bfg-common 1.2.112 → 1.2.113

package/components/atoms/nav/NavBar.vue

@@ -1,140 +1,140 @@
-<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<{
-    items: UI_I_CollapseNavItem[]
-    testId?: string
-    modelValue?: number | string
-    isLink?: boolean
-    notCollapse?: boolean
-  }>(),
-  { testId: 'ui-nav-bar' }
-)
-const emits = defineEmits<{
-  (event: 'update:model-value', value: number): void
-  (event: 'change', value: number): void
-}>()
-
-const change = (value: number): void => {
-  emits('update:model-value', value)
-  emits('change', value)
-}
-
-const visibleCount = ref<number>(props.items.length)
-const collapsedItems = computed<UI_I_CollapseNavItem[]>(() => {
-  return props.items.filter((_, index) => {
-    return index >= visibleCount.value
-  })
-})
-
-let triggerElementWidth = 0
-const setTriggerElementWidth = (): void => {
-  if (!id.value || !props.testId) return
-
-  const element = document.querySelector(
-    `#${id.value} [test-id="${props.testId}-container"]`
-  )
-  triggerElementWidth =
-    element && element?.style?.display !== 'none'
-      ? element.getBoundingClientRect().width
-      : 0
-}
-
-let outputSize = (): void => {
-  const el = document.getElementById(id.value)
-  if (!el) return
-
-  const elWidth = el.clientWidth
-  const elItems = el.children[0].children
-
-  setTriggerElementWidth()
-  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 - triggerElementWidth < childrenWidth
-
-    if (isWrap) break
-    count++
-  }
-
-  visibleCount.value = count
-
-  const element = document.querySelector(`#${id.value} ul`)
-  if (element) {
-    element.style.paddingRight =
-      collapsedItems.value.length && !props.notCollapse
-        ? `${triggerElementWidth}px`
-        : ''
-  }
-}
-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(() => {
-  setTriggerElementWidth()
-  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<{
+    items: UI_I_CollapseNavItem[]
+    testId?: string
+    modelValue?: number | string
+    isLink?: boolean
+    notCollapse?: boolean
+  }>(),
+  { testId: 'ui-nav-bar' }
+)
+const emits = defineEmits<{
+  (event: 'update:model-value', value: number): void
+  (event: 'change', value: number): void
+}>()
+
+const change = (value: number): void => {
+  emits('update:model-value', value)
+  emits('change', value)
+}
+
+const visibleCount = ref<number>(props.items.length)
+const collapsedItems = computed<UI_I_CollapseNavItem[]>(() => {
+  return props.items.filter((_, index) => {
+    return index >= visibleCount.value
+  })
+})
+
+let triggerElementWidth = 0
+const setTriggerElementWidth = (): void => {
+  if (!id.value || !props.testId) return
+
+  const element = document.querySelector(
+    `#${id.value} [test-id="${props.testId}-container"]`
+  )
+  triggerElementWidth =
+    element && element?.style?.display !== 'none'
+      ? element.getBoundingClientRect().width
+      : 0
+}
+
+let outputSize = (): void => {
+  const el = document.getElementById(id.value)
+  if (!el) return
+
+  const elWidth = el.clientWidth
+  const elItems = el.children[0].children
+
+  setTriggerElementWidth()
+  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 - triggerElementWidth < childrenWidth
+
+    if (isWrap) break
+    count++
+  }
+
+  visibleCount.value = count
+
+  const element = document.querySelector(`#${id.value} ul`)
+  if (element) {
+    element.style.paddingRight =
+      collapsedItems.value.length && !props.notCollapse
+        ? `${triggerElementWidth}px`
+        : ''
+  }
+}
+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(() => {
+  setTriggerElementWidth()
+  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>

package/components/atoms/nav/VerticalNavBar.vue

@@ -1,89 +1,89 @@
-<template>
-  <nav class="clr-vertical-nav">
-    <NuxtLink
-      v-for="(item, key) in props.items"
-      :id="`${props.testId}-link-${key}`"
-      :key="key"
-      class="clr-treenode-link"
-      :to="item.path"
-      active-class="active"
-      @contextmenu="showContextMenu($event, item)"
-    >
-      <span
-        v-if="item.iconClassName"
-        :class="['icon', item.iconClassName]"
-      ></span>
-      <span class="clr-treenode-item text-ellipsis">{{ item.text }}</span>
-    </NuxtLink>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import { UI_I_NavItem } from '~/components/atoms/nav/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    items: UI_I_NavItem[]
-    testId?: string
-  }>(),
-  { testId: 'ui-vertical-nav-bar' }
-)
-const emits = defineEmits<{
-  (event: 'contextmenu', value: [Event, UI_I_NavItem]): void
-}>()
-
-const showContextMenu = (event: Event, item: UI_I_NavItem): void => {
-  // navigateTo(item.path)
-  emits('contextmenu', [event, item])
-}
-</script>
-
-<style scoped lang="scss">
-.clr-vertical-nav {
-  padding-top: 0;
-  width: 100%;
-  background-color: transparent;
-
-  .clr-treenode-link {
-    display: flex;
-    align-items: center;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    padding: 2px 12px;
-    border-radius: 0;
-
-    &.active {
-      background: var(--vertical-nav-active-bg-color);
-      color: var(--vertical-nav-active-item-color);
-      .clr-treenode-item {
-        color: var(--vertical-nav-active-item-color);
-      }
-    }
-    &:hover:not(.active) {
-      background: var(--vertical-nav-hover-bg-color);
-      color: var(--vertical-nav-hover-item-color);
-      margin-bottom: -1px;
-      border-bottom: 1px solid var(--row-hover-border-color);
-
-      .clr-treenode-item {
-        color: var(--vertical-nav-hover-item-color);
-      }
-    }
-    .icon {
-      margin: 1px 4px 0;
-    }
-  }
-}
-</style>
-
-<style>
-/* :root {
-  --vertical-nav-active-item-color: #fff;
-  --vertical-nav-active-bg-color: #29414e;
-}
-:root.dark-theme {
-  --vertical-nav-active-item-color: #000;
-  --vertical-nav-active-bg-color: #d8e3e9;
-} */
-</style>
+<template>
+  <nav class="clr-vertical-nav">
+    <NuxtLink
+      v-for="(item, key) in props.items"
+      :id="`${props.testId}-link-${key}`"
+      :key="key"
+      class="clr-treenode-link"
+      :to="item.path"
+      active-class="active"
+      @contextmenu="showContextMenu($event, item)"
+    >
+      <span
+        v-if="item.iconClassName"
+        :class="['icon', item.iconClassName]"
+      ></span>
+      <span class="clr-treenode-item text-ellipsis">{{ item.text }}</span>
+    </NuxtLink>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { UI_I_NavItem } from '~/components/atoms/nav/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    items: UI_I_NavItem[]
+    testId?: string
+  }>(),
+  { testId: 'ui-vertical-nav-bar' }
+)
+const emits = defineEmits<{
+  (event: 'contextmenu', value: [Event, UI_I_NavItem]): void
+}>()
+
+const showContextMenu = (event: Event, item: UI_I_NavItem): void => {
+  // navigateTo(item.path)
+  emits('contextmenu', [event, item])
+}
+</script>
+
+<style scoped lang="scss">
+.clr-vertical-nav {
+  padding-top: 0;
+  width: 100%;
+  background-color: transparent;
+
+  .clr-treenode-link {
+    display: flex;
+    align-items: center;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    padding: 2px 12px;
+    border-radius: 0;
+
+    &.active {
+      background: var(--vertical-nav-active-bg-color);
+      color: var(--vertical-nav-active-item-color);
+      .clr-treenode-item {
+        color: var(--vertical-nav-active-item-color);
+      }
+    }
+    &:hover:not(.active) {
+      background: var(--vertical-nav-hover-bg-color);
+      color: var(--vertical-nav-hover-item-color);
+      margin-bottom: -1px;
+      border-bottom: 1px solid var(--row-hover-border-color);
+
+      .clr-treenode-item {
+        color: var(--vertical-nav-hover-item-color);
+      }
+    }
+    .icon {
+      margin: 1px 4px 0;
+    }
+  }
+}
+</style>
+
+<style>
+/* :root {
+  --vertical-nav-active-item-color: #fff;
+  --vertical-nav-active-bg-color: #29414e;
+}
+:root.dark-theme {
+  --vertical-nav-active-item-color: #000;
+  --vertical-nav-active-bg-color: #d8e3e9;
+} */
+</style>

package/components/atoms/nav/models/interfaces.ts

@@ -1,5 +1,5 @@
-export interface UI_I_NavItem {
-  text: string,
-  path: string
-  iconClassName: string
-}
+export interface UI_I_NavItem {
+  text: string,
+  path: string
+  iconClassName: string
+}