updated survey-creator docs [azurepipelines skip]

surveyjs · Sep 17, 2024 · 544b98d · 544b98d
1 parent 4e5d9f1
commit 544b98d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 54 deletions.
diff --git a/docs/get-started-vue.md b/docs/get-started-vue.md
@@ -115,7 +115,20 @@ const creator = new SurveyCreatorModel(creatorOptions);
 
 ### Render Survey Creator
 
-Survey Creator rendering code is encapsulated in the `SurveyCreatorComponent`. To use it in your template, you need to install `surveyPlugin` (for SurveyJS Form Library) and `surveyCreatorPlugin`. Open the `main.ts` file, import these plugins, and install them using the `app.use()` method *in the exact order shown below*:
+To render Survey Creator, add `SurveyCreatorComponent` to your template, and pass the model instance you created in the previous step to the component's `model` attribute:
+
+```html
+<script setup lang="ts">
+import { SurveyCreatorComponent } from "survey-creator-vue";
+// ...
+</script>
+
+<template>
+  <SurveyCreatorComponent :model="creator" />
+</template>
+```
+
+The code above registers `SurveyCreatorComponent` locally. If you want to register it globally, open the `main.ts` file, import `surveyPlugin` (for SurveyJS Form Library) and `surveyCreatorPlugin`, and install them using the `app.use()` method *in the exact order shown below*. In this case, you don't need to import `SurveyCreatorComponent` within each Vue component where you want to use it.
 
 ```js
 // main.ts
@@ -130,18 +143,6 @@ createApp(App)
   .mount("#app");
 ```
 
-To render Survey Creator, add `SurveyCreatorComponent` to your template, and pass the model instance you created in the previous step to the component's `model` attribute:
-
-```html
-<script setup lang="ts">
-// ...
-</script>
-
-<template>
-  <SurveyCreatorComponent :model="creator" />
-</template>
-```
-
 <details>
   <summary>View Full Code</summary>
 
@@ -153,6 +154,7 @@ import "survey-creator-core/survey-creator-core.min.css";
 
 import type { ICreatorOptions } from "survey-creator-core";
 import { SurveyCreatorModel } from "survey-creator-core";
+import { SurveyCreatorComponent } from "survey-creator-vue";
 
 const creatorOptions: ICreatorOptions = {
   showLogicTab: true,
@@ -165,19 +167,6 @@ const creator = new SurveyCreatorModel(creatorOptions);
   <SurveyCreatorComponent :model="creator" />
 </template>
 ```
-
-```js
-// main.ts
-import { createApp } from "vue";
-import App from "./App.vue";
-import { surveyPlugin } from "survey-vue3-ui";
-import { surveyCreatorPlugin } from "survey-creator-vue";
-
-createApp(App)
-  .use(surveyPlugin)
-  .use(surveyCreatorPlugin)
-  .mount("#app");
-```
 </details>
 
 ### Save and Load Survey Model Schemas
@@ -291,6 +280,7 @@ import "survey-creator-core/survey-creator-core.min.css";
 
 import type { ICreatorOptions } from "survey-creator-core";
 import { SurveyCreatorModel } from "survey-creator-core";
+import { SurveyCreatorComponent } from "survey-creator-vue";
 
 const creatorOptions: ICreatorOptions = {
   showLogicTab: true,
@@ -349,19 +339,6 @@ creator.saveSurveyFunc = (saveNo: number, callback: Function) => {
   <SurveyCreatorComponent :model="creator" />
 </template>
 ```
-
-```js
-// main.ts
-import { createApp } from "vue";
-import App from "./App.vue";
-import { surveyPlugin } from "survey-vue3-ui";
-import { surveyCreatorPlugin } from "survey-creator-vue";
-
-createApp(App)
-  .use(surveyPlugin)
-  .use(surveyCreatorPlugin)
-  .mount("#app");
-```
 </details>
 
 ### Manage Image Uploads
@@ -414,6 +391,7 @@ import "survey-creator-core/survey-creator-core.min.css";
 
 import type { ICreatorOptions } from "survey-creator-core";
 import { SurveyCreatorModel } from "survey-creator-core";
+import { SurveyCreatorComponent } from "survey-creator-vue";
 
 const creatorOptions: ICreatorOptions = {
   showLogicTab: true,
@@ -493,19 +471,6 @@ creator.saveSurveyFunc = (saveNo: number, callback: Function) => {
   <SurveyCreatorComponent :model="creator" />
 </template>
 ```
-
-```js
-// main.ts
-import { createApp } from "vue";
-import App from "./App.vue";
-import { surveyPlugin } from "survey-vue3-ui";
-import { surveyCreatorPlugin } from "survey-creator-vue";
-
-createApp(App)
-  .use(surveyPlugin)
-  .use(surveyCreatorPlugin)
-  .mount("#app");
-```
 </details>
 
 [View Demo](https://surveyjs.io/survey-creator/examples/file-upload/vue3js (linkStyle))

diff --git a/docs/sidebar.json b/docs/sidebar.json
@@ -163,6 +163,10 @@
           "Name": "questiontoolbox",
           "Title": "QuestionToolbox"
         },
+        {
+          "Name": "questiontoolboxitem",
+          "Title": "QuestionToolboxItem"
+        },
         {
           "Name": "iquestiontoolboxitem",
           "Title": "IQuestionToolboxItem"

diff --git a/docs/toolbox-customization.md b/docs/toolbox-customization.md
@@ -145,7 +145,7 @@ Toolbox items can have nested items, or "subitems". They appear when users hover
 
 <img src="./images/toolbox-subitems.png" alt="Survey Creator: Toolbox subitems" width="953" height="690">
 
-To create a custom subitem, pass its [configuration object](/survey-creator/documentation/api-reference/iquestiontoolboxitem) to the [`addSubitem(subitem, index)`](/survey-creator/documentation/api-reference/iquestiontoolboxitem#addSubitem) method. Call this method on a toolbox item instance to which you want to add the subitem. For instance, the following code adds a "Limited to 280 characters" subitem to the Long Text toolbox item:
+To create a custom subitem, pass its [configuration object](/survey-creator/documentation/api-reference/iquestiontoolboxitem) to the [`addSubitem(subitem, index)`](/survey-creator/documentation/api-reference/questiontoolboxitem#addSubitem) method. Call this method on a toolbox item instance to which you want to add the subitem. For instance, the following code adds a "Limited to 280 characters" subitem to the Long Text toolbox item:
 
 ```js
 import { SurveyCreatorModel } from "survey-creator-core";
@@ -165,7 +165,7 @@ longTextItem.addSubitem({
 
 [View Demo](/survey-creator/examples/manage-toolbox-subitems/ (linkStyle))
 
-If you want to remove a specific subitem, call the [`removeSubitem(subitem)`](/survey-creator/documentation/api-reference/iquestiontoolboxitem#removeSubitem) method on a toolbox item instance. You can also remove all subitems of a toolbox item by calling the [`clearSubitems()`](/survey-creator/documentation/api-reference/iquestiontoolboxitem#clearSubitems) method:
+If you want to remove a specific subitem, call the [`removeSubitem(subitem)`](/survey-creator/documentation/api-reference/questiontoolboxitem#removeSubitem) method on a toolbox item instance. You can also remove all subitems of a toolbox item by calling the [`clearSubitems()`](/survey-creator/documentation/api-reference/questiontoolboxitem#clearSubitems) method:
 
 ```js
 // Remove the Labels subitem of the Rating Scale toolbox item