bfg-common 1.3.355 → 1.3.357

package/components/atoms/TheIcon2.vue

@@ -1125,6 +1125,179 @@
       </g>
     </svg>
   </template>
+  <template v-else-if="props.name === 'host'">
+    <svg
+      width="24"
+      height="20"
+      viewBox="0 0 24 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="host-icon"
+    >
+      <path
+        d="M5.25 3.25H2.5C1.94772 3.25 1.5 3.69772 1.5 4.25V15.75C1.5 16.3023 1.94772 16.75 2.5 16.75H5.25"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linecap="round"
+      />
+      <path
+        d="M18.75 3.25H21.5C22.0523 3.25 22.5 3.69772 22.5 4.25V15.75C22.5 16.3023 22.0523 16.75 21.5 16.75H18.75"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linecap="round"
+      />
+      <rect
+        x="7.5"
+        y="1"
+        width="9"
+        height="18"
+        rx="1"
+        stroke="currentColor"
+        stroke-width="1.2"
+      />
+      <circle cx="12" cy="14.5" r="1.5" stroke="currentColor" />
+      <path
+        d="M18.75 13.75C19.3713 13.75 19.875 13.2463 19.875 12.625C19.875 12.0037 19.3713 11.5 18.75 11.5"
+        stroke="currentColor"
+        stroke-linecap="round"
+      />
+      <path
+        d="M5.25 13.75C4.62868 13.75 4.125 13.2463 4.125 12.625C4.125 12.0037 4.62868 11.5 5.25 11.5"
+        stroke="currentColor"
+        stroke-linecap="round"
+      />
+      <path d="M10.5 4H13.5" stroke="currentColor" stroke-linecap="round" />
+      <path d="M10.5 7H13.5" stroke="currentColor" stroke-linecap="round" />
+      <path d="M4.125 6.25H5.25" stroke="currentColor" stroke-linecap="round" />
+      <path
+        d="M18.75 6.25H19.875"
+        stroke="currentColor"
+        stroke-linecap="round"
+      />
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'vm'">
+    <svg
+      width="24"
+      height="22"
+      viewBox="0 0 24 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="vm-icon"
+    >
+      <path
+        d="M12.0537 12.5V18.0381C12.0537 18.3239 12.2062 18.588 12.4537 18.7309L16.8499 21.2691C17.0974 21.412 17.4023 21.412 17.6499 21.2691L22.046 18.7309C22.2935 18.588 22.446 18.3239 22.446 18.0381V12.9619C22.446 12.6761 22.2935 12.412 22.046 12.2691L17.6499 9.73094C17.4023 9.58803 17.0974 9.58803 16.8499 9.73094L12.0537 12.5ZM12.0537 12.5L17.2499 15.5M17.2499 15.5V21.3184M17.2499 15.5L22.3299 12.567"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M6.75572 20.75V15.875M1.77427 12.624L6.57026 15.3929V15.3929C6.68503 15.4592 6.82642 15.4592 6.94118 15.3929L11.795 12.5906M1.55957 12.9619V18.0381C1.55957 18.3239 1.71205 18.588 1.95957 18.7309L6.35572 21.2691C6.60324 21.412 6.9082 21.412 7.15572 21.2691L11.5519 18.7309C11.7994 18.588 11.9519 18.3239 11.9519 18.0381V12.9619C11.9519 12.6761 11.7994 12.412 11.5519 12.2691L7.15572 9.73094C6.9082 9.58803 6.60324 9.58803 6.35572 9.73094L1.95957 12.2691C1.71205 12.412 1.55957 12.6761 1.55957 12.9619Z"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12.0555 12.5L16.8517 9.73094C17.0992 9.58803 17.2517 9.32393 17.2517 9.03812V3.96188C17.2517 3.67607 17.0992 3.41197 16.8517 3.26906L12.4555 0.73094C12.208 0.588034 11.903 0.588034 11.6555 0.73094L7.25937 3.26906C7.01185 3.41197 6.85938 3.67607 6.85938 3.96188V9.03812C6.85938 9.32393 7.01185 9.58803 7.25938 9.73094L12.0555 12.5ZM12.0555 12.5V6.5M12.0555 6.5L7.01004 3.58699M12.0555 6.5L17.083 3.5974"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'datastore'">
+    <svg
+      width="20"
+      height="24"
+      viewBox="0 0 20 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="datastore-icon"
+    >
+      <path
+        d="M19 3.75C19 4.99264 14.9706 6 10 6C5.02944 6 1 4.99264 1 3.75M19 3.75C19 2.50736 14.9706 1.5 10 1.5C5.02944 1.5 1 2.50736 1 3.75M19 3.75V20.25C19 21.4926 14.9706 22.5 10 22.5C5.02944 22.5 1 21.4926 1 20.25V3.75M19 9.25488C19 10.4975 14.9706 11.5049 10 11.5049C5.02944 11.5049 1 10.4975 1 9.25488M19 14.7598C19 16.0024 14.9706 17.0098 10 17.0098C5.02944 17.0098 1 16.0024 1 14.7598"
+        stroke="currentColor"
+        stroke-width="1.2"
+      />
+      <path
+        d="M4 8.17529H4.001"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linecap="round"
+      />
+      <path
+        d="M4 13.6802H4.001"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linecap="round"
+      />
+      <path
+        d="M4 19.1997H4.001"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linecap="round"
+      />
+      <path
+        d="M7 8.625H7.001"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linecap="round"
+      />
+      <path
+        d="M7 14.1299H7.001"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linecap="round"
+      />
+      <path
+        d="M7 19.6348H7.001"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linecap="round"
+      />
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'network'">
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="network-icon"
+    >
+      <path
+        d="M14.625 12.75C14.625 13.7083 14.2983 14.5902 13.7501 15.2905C12.995 16.2551 11.8199 16.875 10.5 16.875C9.44523 16.875 8.48292 16.4791 7.75355 15.8278C6.90759 15.0724 6.375 13.9734 6.375 12.75C6.375 10.4718 8.22183 8.625 10.5 8.625C11.4157 8.625 12.2618 8.92339 12.9462 9.42824C13.9645 10.1794 14.625 11.3876 14.625 12.75Z"
+        stroke="currentColor"
+        stroke-width="1.2"
+      />
+      <path
+        d="M22.5 19.5C22.5 21.1569 21.1569 22.5 19.5 22.5C17.8431 22.5 16.5 21.1569 16.5 19.5C16.5 18.8196 16.7265 18.1921 17.1082 17.6888C17.6561 16.9665 18.5236 16.5 19.5 16.5C21.1569 16.5 22.5 17.8431 22.5 19.5Z"
+        stroke="currentColor"
+        stroke-width="1.2"
+      />
+      <path
+        d="M4.5 6C4.5 6.82843 3.82843 7.5 3 7.5C2.17157 7.5 1.5 6.82843 1.5 6C1.5 5.17157 2.17157 4.5 3 4.5C3.82843 4.5 4.5 5.17157 4.5 6Z"
+        stroke="currentColor"
+        stroke-width="1.2"
+      />
+      <path
+        d="M19.5 3.75C19.5 4.99264 18.4926 6 17.25 6C16.7541 6 16.2957 5.8396 15.9239 5.56785C15.3638 5.15859 15 4.49678 15 3.75C15 2.50736 16.0074 1.5 17.25 1.5C18.4926 1.5 19.5 2.50736 19.5 3.75Z"
+        stroke="currentColor"
+        stroke-width="1.2"
+      />
+      <path
+        d="M6 20.25C6 21.4926 4.99264 22.5 3.75 22.5C2.50736 22.5 1.5 21.4926 1.5 20.25C1.5 19.0074 2.50736 18 3.75 18C4.32627 18 4.85193 18.2166 5.25 18.5729C5.71031 18.9849 6 19.5836 6 20.25Z"
+        stroke="currentColor"
+        stroke-width="1.2"
+      />
+      <path
+        d="M4.07031 7.05141L7.42597 9.99961M5.25024 18.5729L7.7538 15.8278M17.1085 17.6888L13.7503 15.2905M15.9241 5.56787L12.9464 9.42826"
+        stroke="currentColor"
+        stroke-width="1.2"
+      />
+    </svg>
+  </template>
 </template>
 
 <script setup lang="ts">

package/components/atoms/collapse/CollapseNavItem.vue

@@ -16,8 +16,12 @@
           },
         ]"
       >
+        <atoms-the-icon2
+          v-if="props.item.iconName"
+          :name="props.item.iconName"
+        />
         <span
-          v-if="props.item.iconClassName"
+          v-else-if="props.item.iconClassName"
           :class="['icon', props.item.iconClassName]"
         ></span>
         <span v-else>{{ props.item.text }}</span>
@@ -51,8 +55,9 @@
       ]"
       @click="change(props.item.value)"
     >
+      <atoms-the-icon2 v-if="props.item.iconName" :name="props.item.iconName" />
       <span
-        v-if="props.item.iconClassName"
+        v-else-if="props.item.iconClassName"
         :class="['icon', props.item.iconClassName]"
       ></span>
       <span v-else>{{ props.item.text }}</span>
@@ -61,7 +66,7 @@
 </template>
 
 <script setup lang="ts">
-import { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
 
 const props = defineProps<{
   item: UI_I_CollapseNavItem

package/components/atoms/collapse/lib/models/interfaces.ts

@@ -7,4 +7,5 @@ export interface UI_I_CollapseNavItem {
   separate?: boolean
   uploaded?: boolean
   testId?: string
+  iconName?: string
 }

package/components/atoms/switch/Switch.vue

@@ -1,111 +1,111 @@
-<template>
-  <div class="flex-align-center">
-    <div class="switch-body">
-      <input :id="props.testId" v-model="value" type="checkbox" />
-      <label class="switch-label" :for="props.testId"></label>
-    </div>
-    <label :for="props.testId"><slot></slot></label>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-    defineProps<{
-      modelValue: boolean
-      testId?: string
-    }>(),
-    { testId: 'ui-switch' }
-)
-
-const emits = defineEmits<{
-  (event: 'update:model-value', value: boolean): void
-}>()
-
-const value = computed<boolean>({
-  get() {
-    return props.modelValue
-  },
-  set(newValue) {
-    emits('update:model-value', newValue)
-  },
-})
-</script>
-
-<style>
-:root {
-  --label-before-bg-color: #737373;
-  --label-after-bg-color: #fff;
-  --label-before-box-shadow: 0 0 0.1rem 0.1rem #69c0e2;
-}
-
-:root.dark-theme {
-  --label-before-bg-color: #fff;
-  --label-after-bg-color: #1b2a32;
-  --label-before-box-shadow: 0 0 0;
-}
-</style>
-
-<style scoped lang="scss">
-.switch-body {
-  width: 33px;
-  height: 18px;
-  position: relative;
-  margin-right: 4px;
-
-  input[type='checkbox'] {
-    position: absolute;
-    top: 0.3rem;
-    right: 0.3rem;
-    height: 0.8rem;
-    width: 0.8rem;
-    opacity: 0;
-  }
-  .switch-label {
-    display: block;
-    position: relative;
-    cursor: pointer;
-    height: 1.2rem;
-  }
-  .switch-label {
-    &:before {
-      position: absolute;
-      display: inline-block;
-      content: '';
-      height: 18px;
-      width: 33px;
-      border-radius: 0.45rem;
-      border: 2px solid var(--label-before-bg-color);
-      background-color: var(--label-before-bg-color);
-      transition: 0.15s ease-in;
-      transition-property: border-color, background-color;
-    }
-
-    &:after {
-      position: absolute;
-      display: inline-block;
-      content: '';
-      height: 14.5px;
-      width: 14.5px;
-      border: 1px solid var(--label-after-bg-color);
-      border-radius: 50%;
-      background-color: var(--label-after-bg-color);
-      bottom: 12.5px;
-      transition: 0.15s ease-in;
-    }
-  }
-
-  & input[type='checkbox']:focus + label:before {
-    box-shadow: var(--label-before-box-shadow);
-  }
-  & input[type='checkbox']:checked + label:before {
-    border-color: #62a420;
-    background-color: #62a420;
-  }
-  & input[type='checkbox']:checked + label:after {
-    left: 15px;
-  }
-  & input[type='checkbox'] + label:after {
-    left: 3px;
-  }
-}
-</style>
+<template>
+  <div class="flex-align-center">
+    <div class="switch-body">
+      <input :id="props.testId" v-model="value" type="checkbox" />
+      <label class="switch-label" :for="props.testId"></label>
+    </div>
+    <label :for="props.testId"><slot></slot></label>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+    defineProps<{
+      modelValue: boolean
+      testId?: string
+    }>(),
+    { testId: 'ui-switch' }
+)
+
+const emits = defineEmits<{
+  (event: 'update:model-value', value: boolean): void
+}>()
+
+const value = computed<boolean>({
+  get() {
+    return props.modelValue
+  },
+  set(newValue) {
+    emits('update:model-value', newValue)
+  },
+})
+</script>
+
+<style>
+:root {
+  --label-before-bg-color: #737373;
+  --label-after-bg-color: #fff;
+  --label-before-box-shadow: 0 0 0.1rem 0.1rem #69c0e2;
+}
+
+:root.dark-theme {
+  --label-before-bg-color: #fff;
+  --label-after-bg-color: #1b2a32;
+  --label-before-box-shadow: 0 0 0;
+}
+</style>
+
+<style scoped lang="scss">
+.switch-body {
+  width: 33px;
+  height: 18px;
+  position: relative;
+  margin-right: 4px;
+
+  input[type='checkbox'] {
+    position: absolute;
+    top: 0.3rem;
+    right: 0.3rem;
+    height: 0.8rem;
+    width: 0.8rem;
+    opacity: 0;
+  }
+  .switch-label {
+    display: block;
+    position: relative;
+    cursor: pointer;
+    height: 1.2rem;
+  }
+  .switch-label {
+    &:before {
+      position: absolute;
+      display: inline-block;
+      content: '';
+      height: 18px;
+      width: 33px;
+      border-radius: 0.45rem;
+      border: 2px solid var(--label-before-bg-color);
+      background-color: var(--label-before-bg-color);
+      transition: 0.15s ease-in;
+      transition-property: border-color, background-color;
+    }
+
+    &:after {
+      position: absolute;
+      display: inline-block;
+      content: '';
+      height: 14.5px;
+      width: 14.5px;
+      border: 1px solid var(--label-after-bg-color);
+      border-radius: 50%;
+      background-color: var(--label-after-bg-color);
+      bottom: 12.5px;
+      transition: 0.15s ease-in;
+    }
+  }
+
+  & input[type='checkbox']:focus + label:before {
+    box-shadow: var(--label-before-box-shadow);
+  }
+  & input[type='checkbox']:checked + label:before {
+    border-color: #62a420;
+    background-color: #62a420;
+  }
+  & input[type='checkbox']:checked + label:after {
+    left: 15px;
+  }
+  & input[type='checkbox'] + label:after {
+    left: 3px;
+  }
+}
+</style>