bfg-common 1.2.70 → 1.2.71

package/components/atoms/list/SelectList.vue

@@ -1,62 +1,62 @@
-<template>
-  <select
-    :id="`${props.testId}-select`"
-    v-model="selectedItem"
-    size="15"
-    class="list"
-  >
-    <option
-      v-for="(item, key) in props.items"
-      :key="key"
-      :disabled="item.disabled"
-      class="item"
-      :value="item.value"
-    >
-      <slot :name="`item${key}`">
-        {{ item.text }}
-      </slot>
-    </option>
-  </select>
-</template>
-
-<script setup lang="ts">
-import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    testId?: string
-    items: UI_I_OptionItem[]
-    modelValue: string
-  }>(),
-  { testId: 'ui-select-list' }
-)
-const emits = defineEmits<{
-  (event: 'update:model-value', value: string): void
-}>()
-
-const selectedItem = computed<string>({
-  get() {
-    return props.modelValue
-  },
-  set(newValue) {
-    emits('update:model-value', newValue)
-  },
-})
-</script>
-
-<style scoped lang="scss">
-.list {
-  outline: none;
-
-  .item {
-    padding: 3px 6px;
-    color: #000;
-
-    &:disabled {
-      color: #565656;
-      cursor: not-allowed;
-      opacity: 0.4;
-    }
-  }
-}
-</style>
+<template>
+  <select
+    :id="`${props.testId}-select`"
+    v-model="selectedItem"
+    size="15"
+    class="list"
+  >
+    <option
+      v-for="(item, key) in props.items"
+      :key="key"
+      :disabled="item.disabled"
+      class="item"
+      :value="item.value"
+    >
+      <slot :name="`item${key}`">
+        {{ item.text }}
+      </slot>
+    </option>
+  </select>
+</template>
+
+<script setup lang="ts">
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    testId?: string
+    items: UI_I_OptionItem[]
+    modelValue: string
+  }>(),
+  { testId: 'ui-select-list' }
+)
+const emits = defineEmits<{
+  (event: 'update:model-value', value: string): void
+}>()
+
+const selectedItem = computed<string>({
+  get() {
+    return props.modelValue
+  },
+  set(newValue) {
+    emits('update:model-value', newValue)
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.list {
+  outline: none;
+
+  .item {
+    padding: 3px 6px;
+    color: #000;
+
+    &:disabled {
+      color: #565656;
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+  }
+}
+</style>

package/components/atoms/nav/NavBar.vue

@@ -1,5 +1,12 @@
 <template>
-  <nav :id="id" :class="['nav', { 'not-collapse': notCollapse }]">
+  <nav
+    :id="id"
+    :class="[
+      'nav',
+      { 'not-collapse': notCollapse },
+      { 'is-collapsed': collapsedItems.length && !notCollapse },
+    ]"
+  >
     <ul>
       <li v-for="(item, key) in props.items" :key="key" class="nav-item">
         <atoms-collapse-nav-item
@@ -67,7 +74,7 @@ let outputSize = (): void => {
   let count = 0
   for (let i = 0; i < elItems.length; i++) {
     childrenWidth += elItems[i].clientWidth + childrenMarginY
-    const isWrap = elWidth < childrenWidth
+    const isWrap = elWidth - 25 < childrenWidth
 
     if (isWrap) break
     count++
@@ -104,6 +111,11 @@ onMounted(() => {
       flex-wrap: nowrap;
     }
   }
+  &.is-collapsed {
+    ul {
+      padding-right: 25px;
+    }
+  }
 
   ul {
     position: relative;

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<{
-    testId?: string
-    items: UI_I_NavItem[]
-  }>(),
-  { 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<{
+    testId?: string
+    items: UI_I_NavItem[]
+  }>(),
+  { 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>