bfg-common 1.5.313 → 1.5.314

package/components/atoms/nav/NavBar.vue

@@ -1,147 +1,147 @@
-<template>
-  <nav :id="id" :class="['nav', { 'not-collapse': notCollapse }]">
-    <ul>
-      <li
-        v-for="(item, key) in props.items"
-        :key="key"
-        v-permission="item.permission"
-        class="nav-item"
-      >
-        <atoms-collapse-nav-item
-          :is-link="props.isLink"
-          :item="item"
-          :value="props.modelValue"
-          :title="item.title"
-          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 type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/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} #${props.testId}-container`
-  )
-  triggerElementWidth =
-    element && element?.style?.display !== 'none'
-      ? element.getBoundingClientRect().width
-      : 0
-}
-
-const spaceForCollapseBtn = ref<number>(60)
-
-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 = spaceForCollapseBtn.value
-  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
-        ? `${spaceForCollapseBtn.value}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"
+        v-permission="item.permission"
+        class="nav-item"
+      >
+        <atoms-collapse-nav-item
+          :is-link="props.isLink"
+          :item="item"
+          :value="props.modelValue"
+          :title="item.title"
+          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 type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/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} #${props.testId}-container`
+  )
+  triggerElementWidth =
+    element && element?.style?.display !== 'none'
+      ? element.getBoundingClientRect().width
+      : 0
+}
+
+const spaceForCollapseBtn = ref<number>(60)
+
+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 = spaceForCollapseBtn.value
+  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
+        ? `${spaceForCollapseBtn.value}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/perPage/PerPage.vue

@@ -1,58 +1,58 @@
-<template>
-  <div class="page-size">
-    {{ selectLabel }}
-
-    <div class="clr-select-wrapper">
-      <select
-        :id="`${props.testId}-select`"
-        v-development="props.development"
-        :data-id="`${props.testId}-select`"
-        :value="props.pageSize"
-        class="clr-page-size-select"
-        @change="change"
-      >
-        <option
-          v-for="(item, key) in props.options"
-          :key="key"
-          :value="item.value"
-        >
-          {{ item.text }}
-        </option>
-      </select>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    pageSize: number
-    options: UI_I_OptionItem[]
-    label?: string
-    testId?: string
-    development?: boolean
-  }>(),
-  {
-    testId: 'ui-per-page',
-    label: 'itemsPerPage',
-    development: false,
-  }
-)
-const emits = defineEmits<{
-  (event: 'change', value: number): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const selectLabel = computed<string>(
-  () => localization.value.common[props.label]
-)
-
-const change = (event: InputEvent): void => {
-  emits('change', +(event.target as HTMLInputElement).value)
-}
-</script>
-
-<style scoped></style>
+<template>
+  <div class="page-size">
+    {{ selectLabel }}
+
+    <div class="clr-select-wrapper">
+      <select
+        :id="`${props.testId}-select`"
+        v-development="props.development"
+        :data-id="`${props.testId}-select`"
+        :value="props.pageSize"
+        class="clr-page-size-select"
+        @change="change"
+      >
+        <option
+          v-for="(item, key) in props.options"
+          :key="key"
+          :value="item.value"
+        >
+          {{ item.text }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    pageSize: number
+    options: UI_I_OptionItem[]
+    label?: string
+    testId?: string
+    development?: boolean
+  }>(),
+  {
+    testId: 'ui-per-page',
+    label: 'itemsPerPage',
+    development: false,
+  }
+)
+const emits = defineEmits<{
+  (event: 'change', value: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const selectLabel = computed<string>(
+  () => localization.value.common[props.label]
+)
+
+const change = (event: InputEvent): void => {
+  emits('change', +(event.target as HTMLInputElement).value)
+}
+</script>
+
+<style scoped></style>