bfg-common 1.2.69 → 1.2.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/components/atoms/nav/NavBar.vue +128 -116
  2. package/package.json +1 -1
package/components/atoms/nav/NavBar.vue CHANGED
@@ -1,116 +1,128 @@
1
- <template>
2
- <nav :id="id" :class="['nav', { 'not-collapse': notCollapse }]">
3
- <ul>
4
- <li v-for="(item, key) in props.items" :key="key" class="nav-item">
5
- <atoms-collapse-nav-item
6
- :test-id="`${props.testId}-item-${key}`"
7
- :is-link="props.isLink"
8
- :item="item"
9
- :value="props.modelValue"
10
- btn-class="btn btn-link nav-link"
11
- @change="change"
12
- />
13
- </li>
14
- <atoms-collapse-nav
15
- v-show="collapsedItems.length && !notCollapse"
16
- :test-id="`${props.testId}-container`"
17
- :items="collapsedItems"
18
- :is-link="props.isLink"
19
- :value="props.modelValue"
20
- @change="change"
21
- />
22
- </ul>
23
- </nav>
24
- </template>
25
-
26
- <script setup lang="ts">
27
- import { UI_I_CollapseNavItem } from '~/components/atoms/collapse/models/interfaces'
28
-
29
- const props = withDefaults(
30
- defineProps<{
31
- testId?: string
32
- items: UI_I_CollapseNavItem[]
33
- modelValue?: number | string
34
- isLink?: boolean
35
- notCollapse?: boolean
36
- }>(),
37
- { testId: 'ui-nav-bar' }
38
- )
39
- const emits = defineEmits<{
40
- (event: 'update:model-value', num: number): void
41
- (event: 'change', num: number): void
42
- }>()
43
-
44
- const change = (value: number): void => {
45
- emits('update:model-value', value)
46
- emits('change', value)
47
- }
48
-
49
- const visibleCount = ref(props.items.length)
50
- const collapsedItems = computed<UI_I_CollapseNavItem[]>(() => {
51
- return props.items.filter((_, index) => {
52
- return index >= visibleCount.value
53
- })
54
- })
55
-
56
- let outputSize = (): void => {
57
- const el = document.getElementById(id.value)
58
- if (!el) return
59
-
60
- const elWidth = el.clientWidth
61
- const elItems = el.children[0].children
62
- const elItemsMarginLeft = parseInt(getComputedStyle(elItems[0]).marginLeft)
63
- const elItemsMarginRight = parseInt(getComputedStyle(elItems[0]).marginRight)
64
- const childrenMarginY = elItemsMarginLeft + elItemsMarginRight
65
-
66
- let childrenWidth = 0
67
- let count = 0
68
- for (let i = 0; i < elItems.length; i++) {
69
- childrenWidth += elItems[i].clientWidth + childrenMarginY
70
- const isWrap = elWidth < childrenWidth
71
-
72
- if (isWrap) break
73
- count++
74
- }
75
-
76
- visibleCount.value = count
77
- }
78
- outputSize = useThrottle(outputSize)
79
-
80
- const id = ref<string>('')
81
- const setResizeObserve = (): void => {
82
- const el = document.getElementById(id.value)
83
-
84
- if (!el) {
85
- setTimeout(setResizeObserve, 0)
86
- return
87
- }
88
-
89
- new ResizeObserver(outputSize).observe(el)
90
- }
91
- onMounted(() => {
92
- setResizeObserve()
93
- id.value = `nav-bar${useUniqueId()}`
94
- })
95
- </script>
96
-
97
- <style scoped lang="scss">
98
- .nav {
99
- box-shadow: inset 0 -0.05rem 0 var(--nav-panel-border-color);
100
- align-items: flex-start;
101
-
102
- &.not-collapse {
103
- ul {
104
- flex-wrap: nowrap;
105
- }
106
- }
107
-
108
- ul {
109
- position: relative;
110
- height: 36px;
111
- overflow: hidden;
112
- display: flex;
113
- flex-wrap: wrap;
114
- }
115
- }
116
- </style>
1
+ <template>
2
+ <nav
3
+ :id="id"
4
+ :class="[
5
+ 'nav',
6
+ { 'not-collapse': notCollapse },
7
+ { 'is-collapsed': collapsedItems.length && !notCollapse },
8
+ ]"
9
+ >
10
+ <ul>
11
+ <li v-for="(item, key) in props.items" :key="key" class="nav-item">
12
+ <atoms-collapse-nav-item
13
+ :test-id="`${props.testId}-item-${key}`"
14
+ :is-link="props.isLink"
15
+ :item="item"
16
+ :value="props.modelValue"
17
+ btn-class="btn btn-link nav-link"
18
+ @change="change"
19
+ />
20
+ </li>
21
+ <atoms-collapse-nav
22
+ v-show="collapsedItems.length && !notCollapse"
23
+ :test-id="`${props.testId}-container`"
24
+ :items="collapsedItems"
25
+ :is-link="props.isLink"
26
+ :value="props.modelValue"
27
+ @change="change"
28
+ />
29
+ </ul>
30
+ </nav>
31
+ </template>
32
+
33
+ <script setup lang="ts">
34
+ import { UI_I_CollapseNavItem } from '~/components/atoms/collapse/models/interfaces'
35
+
36
+ const props = withDefaults(
37
+ defineProps<{
38
+ testId?: string
39
+ items: UI_I_CollapseNavItem[]
40
+ modelValue?: number | string
41
+ isLink?: boolean
42
+ notCollapse?: boolean
43
+ }>(),
44
+ { testId: 'ui-nav-bar' }
45
+ )
46
+ const emits = defineEmits<{
47
+ (event: 'update:model-value', num: number): void
48
+ (event: 'change', num: number): void
49
+ }>()
50
+
51
+ const change = (value: number): void => {
52
+ emits('update:model-value', value)
53
+ emits('change', value)
54
+ }
55
+
56
+ const visibleCount = ref(props.items.length)
57
+ const collapsedItems = computed<UI_I_CollapseNavItem[]>(() => {
58
+ return props.items.filter((_, index) => {
59
+ return index >= visibleCount.value
60
+ })
61
+ })
62
+
63
+ let outputSize = (): void => {
64
+ const el = document.getElementById(id.value)
65
+ if (!el) return
66
+
67
+ const elWidth = el.clientWidth
68
+ const elItems = el.children[0].children
69
+ const elItemsMarginLeft = parseInt(getComputedStyle(elItems[0]).marginLeft)
70
+ const elItemsMarginRight = parseInt(getComputedStyle(elItems[0]).marginRight)
71
+ const childrenMarginY = elItemsMarginLeft + elItemsMarginRight
72
+
73
+ let childrenWidth = 0
74
+ let count = 0
75
+ for (let i = 0; i < elItems.length; i++) {
76
+ childrenWidth += elItems[i].clientWidth + childrenMarginY
77
+ const isWrap = elWidth - 25 < childrenWidth
78
+
79
+ if (isWrap) break
80
+ count++
81
+ }
82
+
83
+ visibleCount.value = count
84
+ }
85
+ outputSize = useThrottle(outputSize)
86
+
87
+ const id = ref<string>('')
88
+ const setResizeObserve = (): void => {
89
+ const el = document.getElementById(id.value)
90
+
91
+ if (!el) {
92
+ setTimeout(setResizeObserve, 0)
93
+ return
94
+ }
95
+
96
+ new ResizeObserver(outputSize).observe(el)
97
+ }
98
+ onMounted(() => {
99
+ setResizeObserve()
100
+ id.value = `nav-bar${useUniqueId()}`
101
+ })
102
+ </script>
103
+
104
+ <style scoped lang="scss">
105
+ .nav {
106
+ box-shadow: inset 0 -0.05rem 0 var(--nav-panel-border-color);
107
+ align-items: flex-start;
108
+
109
+ &.not-collapse {
110
+ ul {
111
+ flex-wrap: nowrap;
112
+ }
113
+ }
114
+ &.is-collapsed {
115
+ ul {
116
+ padding-right: 25px;
117
+ }
118
+ }
119
+
120
+ ul {
121
+ position: relative;
122
+ height: 36px;
123
+ overflow: hidden;
124
+ display: flex;
125
+ flex-wrap: wrap;
126
+ }
127
+ }
128
+ </style>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "bfg-common",
3
3
  "private": false,
4
- "version": "1.2.69",
4
+ "version": "1.2.71",
5
5
  "scripts": {
6
6
  "build": "nuxt build",
7
7
  "dev": "nuxt dev --port=3002",