bfg-common 1.0.15 → 1.0.16

package/components/atoms/modal/byStepsSecond/ByStepsSecond.vue

@@ -1,174 +1,174 @@
-<template>
-  <div v-if="props.show" class="modal clr-wizard wizard-xl">
-    <div class="modal-dialog modal-xl">
-      <div class="wizard-modal-titlebar ui-draggable-handle">
-        <h3>{{ props.title }}</h3>
-        <button :id="`${props.testId}-close-icon`" class="close" @click="hide">
-          <atoms-the-icon class="close-icon" name="close" />
-        </button>
-      </div>
-      <div class="modal-content-wrapper">
-        <nav class="wizard-panel-TOC">
-          <atoms-step-vertical-step
-            :test-id="props.testId"
-            :items="props.stepItems"
-            :step-position="props.stepPosition"
-            type="check"
-            @change="changeStep"
-          />
-        </nav>
-        <div class="modal-content">
-          <div class="modal-body">
-            <slot name="modalBody" />
-          </div>
-          <div class="modal-footer">
-            <slot name="modalFooter">
-              <button
-                :id="`${props.testId}-cancel-button`"
-                class="btn btn-link"
-                @click="hide"
-              >
-                {{ localization.cancel }}
-              </button>
-              <button
-                v-show="props.stepPosition > 0"
-                :id="`${props.testId}-back-button`"
-                class="btn btn-outline"
-                @click="back"
-              >
-                {{ localization.back }}
-              </button>
-              <button
-                v-if="props.stepPosition === props.stepItems.length - 1"
-                :id="`${props.testId}-finish-button`"
-                class="btn btn-success"
-                @click="finish"
-              >
-                {{ localization.finish }}
-              </button>
-              <button
-                v-else
-                :id="`${props.testId}-next-button`"
-                class="btn btn-primary"
-                @click="next"
-              >
-                {{ localization.next }}
-              </button>
-            </slot>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="modal-backdrop" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_VerticalStepItem } from '~/components/atoms/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    testId?: string
-    show: boolean
-    title: string
-    stepItems: UI_I_VerticalStepItem
-    stepPosition: number
-  }>(),
-  { testId: 'ui-modal-by-steps' }
-)
-const emits = defineEmits<{
-  (event: 'finish'): void
-  (event: 'next'): void
-  (event: 'back'): void
-  (event: 'hide'): void
-  (event: 'change-step', num: number): void
-}>()
-
-const localization = computed(() => useLocal())
-const hide = (): void => emits('hide')
-
-const finish = (): void => {
-  emits('finish')
-}
-const next = (): void => {
-  emits('next')
-}
-const back = (): void => {
-  emits('back')
-}
-const changeStep = (key: number): void => {
-  emits('change-step', key)
-}
-</script>
-
-<style scoped lang="scss">
-.modal {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  z-index: 1050;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 48px;
-  overflow-y: auto;
-
-  .modal-dialog {
-    padding: 24px;
-    background-color: var(--modal-other-bg-color);
-    border-radius: 6px;
-
-    .wizard-modal-titlebar {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 100%;
-      border-bottom: 1px solid #a6a6a6;
-      color: #333;
-
-      & > h3 {
-        color: var(--main-color-mode);
-      }
-
-      .close {
-        display: flex;
-        width: 16px;
-        height: 16px;
-        .close-icon {
-          fill: var(--close-icon-color);
-        }
-      }
-    }
-
-    .clr-wizard-stepnav {
-      padding: 10px 5px 10px 6px;
-    }
-
-    .modal-content {
-      background-color: var(--modal-other-bg-color);
-      .modal-footer {
-        display: flex;
-        justify-content: flex-end;
-        padding: 24px 24px 0 0;
-      }
-    }
-
-    .modal-backdrop {
-      opacity: 1;
-      background-color: rgba(0, 0, 0, 0.6);
-    }
-  }
-}
-</style>
-
-<style>
-:root {
-  --close-icon-color: #8c8c8c;
-}
-:root.dark-theme {
-  --close-icon-color: #fff;
-}
-</style>
+<template>
+  <div v-if="props.show" class="modal clr-wizard wizard-xl">
+    <div class="modal-dialog modal-xl">
+      <div class="wizard-modal-titlebar ui-draggable-handle">
+        <h3>{{ props.title }}</h3>
+        <button :id="`${props.testId}-close-icon`" class="close" @click="hide">
+          <atoms-the-icon class="close-icon" name="close" />
+        </button>
+      </div>
+      <div class="modal-content-wrapper">
+        <nav class="wizard-panel-TOC">
+          <atoms-step-vertical-step
+            :test-id="props.testId"
+            :items="props.stepItems"
+            :step-position="props.stepPosition"
+            type="check"
+            @change="changeStep"
+          />
+        </nav>
+        <div class="modal-content">
+          <div class="modal-body">
+            <slot name="modalBody" />
+          </div>
+          <div class="modal-footer">
+            <slot name="modalFooter">
+              <button
+                :id="`${props.testId}-cancel-button`"
+                class="btn btn-link"
+                @click="hide"
+              >
+                {{ localization.cancel }}
+              </button>
+              <button
+                v-show="props.stepPosition > 0"
+                :id="`${props.testId}-back-button`"
+                class="btn btn-outline"
+                @click="back"
+              >
+                {{ localization.back }}
+              </button>
+              <button
+                v-if="props.stepPosition === props.stepItems.length - 1"
+                :id="`${props.testId}-finish-button`"
+                class="btn btn-success"
+                @click="finish"
+              >
+                {{ localization.finish }}
+              </button>
+              <button
+                v-else
+                :id="`${props.testId}-next-button`"
+                class="btn btn-primary"
+                @click="next"
+              >
+                {{ localization.next }}
+              </button>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="modal-backdrop" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_VerticalStepItem } from '~/components/atoms/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    testId?: string
+    show: boolean
+    title: string
+    stepItems: UI_I_VerticalStepItem
+    stepPosition: number
+  }>(),
+  { testId: 'ui-modal-by-steps' }
+)
+const emits = defineEmits<{
+  (event: 'finish'): void
+  (event: 'next'): void
+  (event: 'back'): void
+  (event: 'hide'): void
+  (event: 'change-step', num: number): void
+}>()
+
+const localization = computed(() => useLocal())
+const hide = (): void => emits('hide')
+
+const finish = (): void => {
+  emits('finish')
+}
+const next = (): void => {
+  emits('next')
+}
+const back = (): void => {
+  emits('back')
+}
+const changeStep = (key: number): void => {
+  emits('change-step', key)
+}
+</script>
+
+<style scoped lang="scss">
+.modal {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 1050;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 48px;
+  overflow-y: auto;
+
+  .modal-dialog {
+    padding: 24px;
+    background-color: var(--modal-other-bg-color);
+    border-radius: 6px;
+
+    .wizard-modal-titlebar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      border-bottom: 1px solid #a6a6a6;
+      color: #333;
+
+      & > h3 {
+        color: var(--main-color-mode);
+      }
+
+      .close {
+        display: flex;
+        width: 16px;
+        height: 16px;
+        .close-icon {
+          fill: var(--close-icon-color);
+        }
+      }
+    }
+
+    .clr-wizard-stepnav {
+      padding: 10px 5px 10px 6px;
+    }
+
+    .modal-content {
+      background-color: var(--modal-other-bg-color);
+      .modal-footer {
+        display: flex;
+        justify-content: flex-end;
+        padding: 24px 24px 0 0;
+      }
+    }
+
+    .modal-backdrop {
+      opacity: 1;
+      background-color: rgba(0, 0, 0, 0.6);
+    }
+  }
+}
+</style>
+
+<style>
+:root {
+  --close-icon-color: #8c8c8c;
+}
+:root.dark-theme {
+  --close-icon-color: #fff;
+}
+</style>

package/components/atoms/nav/NavBar.vue

@@ -1,116 +1,116 @@
-<template>
-  <nav :id="id" :class="['nav', { 'not-collapse': notCollapse }]">
-    <ul>
-      <li v-for="(item, key) in props.items" :key="key" class="nav-item">
-        <atoms-collapse-nav-item
-          :test-id="`${props.testId}-item-${key}`"
-          :is-link="props.isLink"
-          :item="item"
-          :value="props.modelValue"
-          btn-class="btn btn-link nav-link"
-          @change="change"
-        />
-      </li>
-      <atoms-collapse-nav
-        v-show="collapsedItems.length && !notCollapse"
-        :test-id="`${props.testId}-container`"
-        :items="collapsedItems"
-        :is-link="props.isLink"
-        :value="props.modelValue"
-        @change="change"
-      />
-    </ul>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import { UI_I_CollapseNavItem } from '~/components/atoms/collapse/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    testId?: string
-    items: UI_I_CollapseNavItem[]
-    modelValue?: number | string
-    isLink?: boolean
-    notCollapse?: boolean
-  }>(),
-  { testId: 'ui-nav-bar' }
-)
-const emits = defineEmits<{
-  (event: 'update:model-value', num: number): void
-  (event: 'change', num: number): void
-}>()
-
-const change = (value: number): void => {
-  emits('update:model-value', value)
-  emits('change', value)
-}
-
-const visibleCount = ref(props.items.length)
-const collapsedItems = computed<UI_I_CollapseNavItem[]>(() => {
-  return props.items.filter((_, index) => {
-    return index >= visibleCount.value
-  })
-})
-
-let outputSize = (): void => {
-  const el = document.getElementById(id.value)
-  if (!el) return
-
-  const elWidth = el.clientWidth
-  const elItems = el.children[0].children
-  const elItemsMarginLeft = parseInt(getComputedStyle(elItems[0]).marginLeft)
-  const elItemsMarginRight = parseInt(getComputedStyle(elItems[0]).marginRight)
-  const childrenMarginY = elItemsMarginLeft + elItemsMarginRight
-
-  let childrenWidth = 0
-  let count = 0
-  for (let i = 0; i < elItems.length; i++) {
-    childrenWidth += elItems[i].clientWidth + childrenMarginY
-    const isWrap = elWidth < childrenWidth
-
-    if (isWrap) break
-    count++
-  }
-
-  visibleCount.value = count
-}
-outputSize = useThrottle(outputSize)
-
-const id = ref<string>('')
-const setResizeObserve = (): void => {
-  const el = document.getElementById(id.value)
-
-  if (!el) {
-    setTimeout(setResizeObserve, 0)
-    return
-  }
-
-  new ResizeObserver(outputSize).observe(el)
-}
-onMounted(() => {
-  setResizeObserve()
-  id.value = `nav-bar${useUniqueId()}`
-})
-</script>
-
-<style scoped lang="scss">
-.nav {
-  box-shadow: inset 0 -0.05rem 0 var(--nav-panel-border-color);
-  align-items: flex-start;
-
-  &.not-collapse {
-    ul {
-      flex-wrap: nowrap;
-    }
-  }
-
-  ul {
-    position: relative;
-    height: 36px;
-    overflow: hidden;
-    display: flex;
-    flex-wrap: wrap;
-  }
-}
-</style>
+<template>
+  <nav :id="id" :class="['nav', { 'not-collapse': notCollapse }]">
+    <ul>
+      <li v-for="(item, key) in props.items" :key="key" class="nav-item">
+        <atoms-collapse-nav-item
+          :test-id="`${props.testId}-item-${key}`"
+          :is-link="props.isLink"
+          :item="item"
+          :value="props.modelValue"
+          btn-class="btn btn-link nav-link"
+          @change="change"
+        />
+      </li>
+      <atoms-collapse-nav
+        v-show="collapsedItems.length && !notCollapse"
+        :test-id="`${props.testId}-container`"
+        :items="collapsedItems"
+        :is-link="props.isLink"
+        :value="props.modelValue"
+        @change="change"
+      />
+    </ul>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { UI_I_CollapseNavItem } from '~/components/atoms/collapse/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    testId?: string
+    items: UI_I_CollapseNavItem[]
+    modelValue?: number | string
+    isLink?: boolean
+    notCollapse?: boolean
+  }>(),
+  { testId: 'ui-nav-bar' }
+)
+const emits = defineEmits<{
+  (event: 'update:model-value', num: number): void
+  (event: 'change', num: number): void
+}>()
+
+const change = (value: number): void => {
+  emits('update:model-value', value)
+  emits('change', value)
+}
+
+const visibleCount = ref(props.items.length)
+const collapsedItems = computed<UI_I_CollapseNavItem[]>(() => {
+  return props.items.filter((_, index) => {
+    return index >= visibleCount.value
+  })
+})
+
+let outputSize = (): void => {
+  const el = document.getElementById(id.value)
+  if (!el) return
+
+  const elWidth = el.clientWidth
+  const elItems = el.children[0].children
+  const elItemsMarginLeft = parseInt(getComputedStyle(elItems[0]).marginLeft)
+  const elItemsMarginRight = parseInt(getComputedStyle(elItems[0]).marginRight)
+  const childrenMarginY = elItemsMarginLeft + elItemsMarginRight
+
+  let childrenWidth = 0
+  let count = 0
+  for (let i = 0; i < elItems.length; i++) {
+    childrenWidth += elItems[i].clientWidth + childrenMarginY
+    const isWrap = elWidth < childrenWidth
+
+    if (isWrap) break
+    count++
+  }
+
+  visibleCount.value = count
+}
+outputSize = useThrottle(outputSize)
+
+const id = ref<string>('')
+const setResizeObserve = (): void => {
+  const el = document.getElementById(id.value)
+
+  if (!el) {
+    setTimeout(setResizeObserve, 0)
+    return
+  }
+
+  new ResizeObserver(outputSize).observe(el)
+}
+onMounted(() => {
+  setResizeObserve()
+  id.value = `nav-bar${useUniqueId()}`
+})
+</script>
+
+<style scoped lang="scss">
+.nav {
+  box-shadow: inset 0 -0.05rem 0 var(--nav-panel-border-color);
+  align-items: flex-start;
+
+  &.not-collapse {
+    ul {
+      flex-wrap: nowrap;
+    }
+  }
+
+  ul {
+    position: relative;
+    height: 36px;
+    overflow: hidden;
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+</style>