MINOR: safe zone inline (#265)

src/BIMDataComponents/BIMDataSafeZoneInline/BIMDataSafeZoneInline.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="safe-zone-inline">
+    <BIMDataButton
+      class="safe-zone-inline__btn-delete"
+      color="high"
+      fill
+      radius
+      @click="$emit('confirm-delete')"
+    >
+      <slot name="content">Delete</slot>
+    </BIMDataButton>
+    <BIMDataButton
+      class="safe-zone-inline__btn-close"
+      :style="{ width: '15px', order: reverse ? -1 : 0 }"
+      width="0px"
+      radius
+      @click="$emit('cancel-delete')"
+    >
+      <BIMDataIcon name="close" size="xxs" color="granite" />
+    </BIMDataButton>
+  </div>
+</template>
+
+<script>
+import BIMDataIcon from "../BIMDataIcon/BIMDataIcon.vue";
+import BIMDataButton from "../BIMDataButton/BIMDataButton.vue";
+
+export default {
+  components: {
+    BIMDataIcon,
+    BIMDataButton,
+  },
+  props: {
+    reverse: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["confirm-delete", "cancel-delete"],
+};
+</script>
+
+<style scoped lang="scss" src="./_BIMDataSafeZoneInline.scss"></style>

src/BIMDataComponents/BIMDataSafeZoneInline/_BIMDataSafeZoneInline.scss

@@ -0,0 +1,15 @@
+.safe-zone-inline {
+  display: flex;
+  gap: 9px;
+  padding: 6px 9px;
+  border-radius: 5px;
+  box-shadow: var(--box-shadow);
+
+  &__btn-delete {
+    width: 90px;
+  }
+
+  &__btn-close {
+    padding: 0 8px;
+  }
+}

src/BIMDataComponents/index.js

@@ -30,6 +30,7 @@ export { default as BIMDataPaginatedList } from "./BIMDataPaginatedList/BIMDataP
 export { default as BIMDataPieSpinner } from "./BIMDataPieSpinner/BIMDataPieSpinner.vue";
 export { default as BIMDataRadio } from "./BIMDataRadio/BIMDataRadio.vue";
 export { default as BIMDataResponsiveGrid } from "./BIMDataResponsiveGrid/BIMDataResponsiveGrid.vue";
+export { default as BIMDataSafeZoneInline } from "./BIMDataSafeZoneInline/BIMDataSafeZoneInline.vue";
 export { default as BIMDataSafeZoneModal } from "./BIMDataSafeZoneModal/BIMDataSafeZoneModal.vue";
 export { default as BIMDataSearch } from "./BIMDataSearch/BIMDataSearch.vue";
 export { default as BIMDataSearchAutocomplete } from "./BIMDataSearchAutocomplete/BIMDataSearchAutocomplete.vue";

src/store.js

@@ -227,6 +227,13 @@ export default new Vuex.Store({
           text: "Display a list of item with a responsive layout",
           btn: "View responsive grid",
         },
+        {
+          title: "SafeZoneInline",
+          img: require("./web/assets/img/icon-safe_zone_inline.svg"),
+          path: "safe-zone-inline",
+          text: "",
+          btn: "View safe zone inline",
+        },
         {
           title: "SafeZoneModal",
           img: require("./web/assets/img/icon-safe_zone_modal.svg"),

src/web/router/router.js

@@ -40,6 +40,7 @@ import Pagination from "../views/Components/Pagination/Pagination.vue";
 import Radio from "../views/Components/Radio/Radio.vue";
 import ResponsiveGrid from "../views/Components/ResponsiveGrid/ResponsiveGrid.vue";
 import SafeZoneModal from "../views/Components/SafeZoneModal/SafeZoneModal.vue";
+import SafeZoneInline from "../views/Components/SafeZoneInline/SafeZoneInline.vue";
 import Search from "../views/Components/Search/Search.vue";
 import SearchAutocomplete from "../views/Components/SearchAutocomplete/SearchAutocomplete.vue";
 import Select from "../views/Components/Select/Select.vue";
@@ -243,6 +244,11 @@ const routes = [
         name: "responsive-grid",
         component: ResponsiveGrid,
       },
+      {
+        path: "safe-zone-inline",
+        name: "safe-zone-inline",
+        component: SafeZoneInline,
+      },
       {
         path: "safe-zone-modal",
         name: "safe-zone-modal",

src/web/views/Components/SafeZoneInline/SafeZoneInline.vue

@@ -0,0 +1,115 @@
+<template>
+  <main class="article safe-zone-inline">
+    <div class="article-wrapper">
+      <BIMDataText component="h1" color="color-primary">
+        {{ $route.name }}
+      </BIMDataText>
+      <ComponentCode :componentTitle="$route.name" language="javascript">
+        <template #module>
+          <div class="safe-zone-inline__playground">
+            <BIMDataButton
+              class="safe-zone-inline__playground__btn-delete"
+              fill
+              radius
+              icon
+              @click="isModalOpen = true"
+            >
+              <BIMDataIcon name="delete" size="xs" color="high" />
+            </BIMDataButton>
+            <BIMDataSafeZoneInline
+              class="safe-zone-inline__playground__component"
+              v-if="isModalOpen"
+              :reverse="reverse"
+              @cancel-delete="isModalOpen = false"
+              @confirm-delete="isModalOpen = false"
+            />
+          </div>
+        </template>
+
+        <template #parameters>
+          <p>Change content order</p>
+          <BIMDataCheckbox text="reverse" v-model="reverse" />
+        </template>
+
+        <template #import>
+          import BIMDataSafeZoneInline from
+          "@bimdata/design-system/dist/js/BIMDataComponents/BIMDataSafeZoneInline.js";
+        </template>
+
+        <template #code>
+          <pre>
+            &lt;BIMDataSafeZoneInline :reverse="{{ reverse }}"/>
+          </pre>
+        </template>
+      </ComponentCode>
+
+      <div class="m-t-12">
+        <BIMDataText component="h5" color="color-primary" margin="15px 0 0">
+          Props:
+        </BIMDataText>
+        <BIMDataTable :columns="propsData[0]" :rows="propsData.slice(1)" />
+      </div>
+      <div class="m-t-12">
+        <BIMDataText component="h5" color="color-primary" margin="15px 0 0">
+          Events:
+        </BIMDataText>
+        <BIMDataTable :columns="eventData[0]" :rows="eventData.slice(1)" />
+      </div>
+      <div class="m-t-12">
+        <BIMDataText component="h5" color="color-primary" margin="15px 0 0">
+          Slots:
+        </BIMDataText>
+        <BIMDataTable :columns="slotData[0]" :rows="slotData.slice(1)" />
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue";
+import BIMDataText from "../../../../BIMDataComponents/BIMDataText/BIMDataText.vue";
+import BIMDataIcon from "../../../../BIMDataComponents/BIMDataIcon/BIMDataIcon.vue";
+import BIMDataTable from "../../../../BIMDataComponents/BIMDataTable/BIMDataTable.vue";
+import BIMDataButton from "../../../../BIMDataComponents/BIMDataButton/BIMDataButton.vue";
+import BIMDataCheckbox from "../../../../BIMDataComponents/BIMDataCheckbox/BIMDataCheckbox.vue";
+import BIMDataSafeZoneInline from "../../../../BIMDataComponents/BIMDataSafeZoneInline/BIMDataSafeZoneInline.vue";
+
+export default {
+  components: {
+    ComponentCode,
+    BIMDataText,
+    BIMDataIcon,
+    BIMDataTable,
+    BIMDataButton,
+    BIMDataCheckbox,
+    BIMDataSafeZoneInline,
+  },
+  data() {
+    return {
+      isModalOpen: false,
+      reverse: false,
+      propsData: [
+        ["Props", "Type", "Default value", "Description"],
+        ["locale", "String", "en", "Use this props to select a language."],
+        [
+          "reverse",
+          "Boolean",
+          "false",
+          "Use this props to reverse content order.",
+        ],
+      ],
+      eventData: [
+        ["Event name", "Description"],
+        ["confirm-delete", "Use this event to confirm delete."],
+        ["cancel-delete", "Use this event to cancel delete."],
+      ],
+      slotData: [
+        ["Slot name", "Description"],
+        ["content", "Use this slot to add a custom text."],
+      ],
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped src="./_SafeZoneInline.scss"></style>

src/web/views/Components/SafeZoneInline/_SafeZoneInline.scss

@@ -0,0 +1,13 @@
+.safe-zone-inline {
+  &__playground {
+    position: relative;
+
+    &__component {
+      background-color: var(--color-white);
+      position: absolute;
+      z-index: 1;
+      top: -7px;
+      right: 0px;
+    }
+  }
+}

src/web/views/SmartComponents/FileManager/FileManager.vue

@@ -153,6 +153,7 @@ export default {
           "false",
           "Allow PDF to be seen within a viewer.",
         ],
+        ["locale", "String", "en", "Use this props to select a language."],
       ],
       eventsData: [
         ["Event name", "Payload"],