add custom props parameters for SafeZoneModal doc

src/web/views/Components/SafeZoneModal/SafeZoneModal.vue

@@ -14,7 +14,11 @@
           >
             Click here to see the safe zone modal
           </BIMDataButton>
-          <BIMDataSafeZoneModal v-if="deleteTopicModal">
+          <BIMDataSafeZoneModal
+            v-if="deleteTopicModal"
+            :width="modalWidth"
+            :iconName="iconName"
+          >
             <template #text> Your text here </template>
             <template #actions>
               <BIMDataButton color="high" fill radius class="m-r-12">
@@ -32,7 +36,25 @@
           </BIMDataSafeZoneModal>
         </template>
 
-        <template #parameters> </template>
+        <template #parameters>
+          <BIMDataInput v-model="modalWidth" placeholder="modal width" />
+
+          <p>Change icon inside the modal</p>
+          <BIMDataDropdownList
+            width="100%"
+            :list="iconsName"
+            :perPage="8"
+            elementKey="dropdown"
+            :disabled="false"
+            :closeOnElementClick="false"
+            @element-click="iconName = $event"
+          >
+            <template #header> {{ iconName }} </template>
+            <template #element="{ element }">
+              {{ element }}
+            </template>
+          </BIMDataDropdownList>
+        </template>
 
         <template #import>
           import BIMDataSafeZoneModal from
@@ -49,7 +71,9 @@
             &gt;
               Click here to see the safe zone modal
             &lt;/BIMDataButton&gt;
-            &lt;BIMDataSafeZoneModal v-if="deleteTopicModal"&gt;
+            &lt;BIMDataSafeZoneModal v-if="deleteTopicModal" {{
+              getModalWidth()
+            }} {{ getIconName() }}&gt;
               &lt;template #text&gt; Your text here &lt;/template&gt;
               &lt;template #actions&gt;
                 &lt;BIMDataButton
@@ -87,16 +111,21 @@
 
 <script>
 import propsData from "./props-data.js";
+import iconsName from "./icons-name.js";
 
 import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue";
 import BIMDataButton from "@/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
+import BIMDataInput from "@/BIMDataComponents/BIMDataInput/BIMDataInput.vue";
+import BIMDataDropdownList from "@/BIMDataComponents/BIMDataDropdownList/BIMDataDropdownList.vue";
 import BIMDataTable from "@/BIMDataComponents/BIMDataTable/BIMDataTable.vue";
 import BIMDataText from "@/BIMDataComponents/BIMDataText/BIMDataText.vue";
 import BIMDataSafeZoneModal from "@/BIMDataComponents/BIMDataSafeZoneModal/BIMDataSafeZoneModal.vue";
 export default {
   components: {
     ComponentCode,
     BIMDataButton,
+    BIMDataInput,
+    BIMDataDropdownList,
     BIMDataTable,
     BIMDataText,
     BIMDataSafeZoneModal,
@@ -105,8 +134,23 @@ export default {
     return {
       deleteTopicModal: false,
       propsData,
+      modalWidth: "350px",
+      iconName: "warning",
+      iconsName,
     };
   },
+  methods: {
+    getModalWidth() {
+      if (this.modalWidth != "350px") {
+        return `width="${this.modalWidth}"`;
+      }
+    },
+    getIconName() {
+      if (this.iconName != "warning") {
+        return `iconName="${this.iconName}"`;
+      }
+    },
+  },
 };
 </script>
 

src/web/views/Components/SafeZoneModal/icons-name.js

@@ -0,0 +1,121 @@
+export default Object.freeze([
+  "addFile",
+  "addFolder",
+  "addUser",
+  "alphabeticalSort",
+  "alt",
+  "angle",
+  "api",
+  "archive",
+  "arrow",
+  "attach",
+  "bcf",
+  "building",
+  "burgerMenu",
+  "calendar",
+  "caliper",
+  "camera",
+  "cancelCamera",
+  "check",
+  "chevron",
+  "classificationCategorie",
+  "classificationElement",
+  "click",
+  "close",
+  "cloud",
+
+  "color",
+  "comment",
+  "cursor",
+  "default",
+  "delete",
+  "deniedFile",
+  "deploy",
+  "detach",
+  "distance",
+  "doubleChevron",
+  "down",
+  "download",
+  "drag",
+  "edit",
+  "ellipsis",
+  "expanded",
+  "explosion",
+  "export",
+  "exportIfc",
+  "failed",
+  "filter",
+  "fitView",
+  "folder",
+  "folderMove",
+  "folderOpen",
+  "fullscreen",
+  "group",
+  "hide",
+  "ifc",
+  "ifcFile",
+  "import",
+  "information",
+  "inProgressFile",
+  "isolate",
+  "key",
+  "left",
+  "linkedDocument",
+  "listManage",
+  "location",
+  "lock",
+  "logout",
+  "measure",
+  "minus",
+  "model3d",
+  "organization",
+  "parameters",
+  "path",
+  "plus",
+  "project",
+  "quickSelect",
+  "readonlyFolder",
+  "redo",
+  "reduced",
+  "refresh",
+  "reprocessIfc",
+  "reset",
+  "right",
+  "rules",
+  "sandglass",
+  "save",
+  "screenConfig",
+  "screenshot",
+  "search",
+  "section",
+  "settings",
+  "share",
+  "show",
+  "showSelected",
+  "socotec",
+  "space",
+  "split",
+  "storey",
+  "success",
+  "surface",
+  "swap",
+  "synchro2d",
+  "system",
+  "tree",
+  "unarchive",
+  "undo",
+  "union",
+  "up",
+  "user",
+  "validate",
+  "validatedFile",
+  "video",
+  "visa",
+  "warning",
+  "windowBottom",
+  "windowed",
+  "windowLeft",
+  "windowRight",
+  "windowTop",
+  "zone",
+]);

src/web/views/Elements/ComponentCode/ComponentCode.vue

@@ -15,7 +15,7 @@
         <BIMDataText
           component="h4"
           color="color-primary"
-          margin="10px 0"
+          margin="12px 0 24px"
           display="block"
           >{{ componentTitle }} options</BIMDataText
         >