bfg-common 1.2.71 → 1.2.72

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 (3) hide show
  1. package/components/atoms/nav/NavBar.vue +140 -128
  2. package/components/atoms/tabs/Tabs.vue +30 -2
  3. package/package.json +1 -1
package/components/atoms/nav/NavBar.vue CHANGED
@@ -1,128 +1,140 @@
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>
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
+ items: UI_I_CollapseNavItem[]
32
+ testId?: string
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 triggerElementWidth = 0
57
+ const setTriggerElementWidth = (): void => {
58
+ if (!id.value || !props.testId) return
59
+
60
+ const element = document.querySelector(
61
+ `#${id.value} [test-id="${props.testId}-container"]`
62
+ )
63
+ triggerElementWidth =
64
+ element && element?.style?.display !== 'none'
65
+ ? element.getBoundingClientRect().width
66
+ : 0
67
+ }
68
+
69
+ let outputSize = (): void => {
70
+ const el = document.getElementById(id.value)
71
+ if (!el) return
72
+
73
+ const elWidth = el.clientWidth
74
+ const elItems = el.children[0].children
75
+
76
+ setTriggerElementWidth()
77
+ const elItemsMarginLeft = parseInt(getComputedStyle(elItems[0]).marginLeft)
78
+ const elItemsMarginRight = parseInt(getComputedStyle(elItems[0]).marginRight)
79
+ const childrenMarginY = elItemsMarginLeft + elItemsMarginRight
80
+
81
+ let childrenWidth = 0
82
+ let count = 0
83
+ for (let i = 0; i < elItems.length; i++) {
84
+ childrenWidth += elItems[i].clientWidth + childrenMarginY
85
+ const isWrap = elWidth - triggerElementWidth < childrenWidth
86
+
87
+ if (isWrap) break
88
+ count++
89
+ }
90
+
91
+ visibleCount.value = count
92
+
93
+ const element = document.querySelector(`#${id.value} ul`)
94
+ if (element) {
95
+ element.style.paddingRight =
96
+ collapsedItems.value.length && !props.notCollapse
97
+ ? `${triggerElementWidth}px`
98
+ : ''
99
+ }
100
+ }
101
+ outputSize = useThrottle(outputSize)
102
+
103
+ const id = ref<string>('')
104
+ const setResizeObserve = (): void => {
105
+ const el = document.getElementById(id.value)
106
+
107
+ if (!el) {
108
+ setTimeout(setResizeObserve, 0)
109
+ return
110
+ }
111
+
112
+ new ResizeObserver(outputSize).observe(el)
113
+ }
114
+ onMounted(() => {
115
+ setTriggerElementWidth()
116
+ setResizeObserve()
117
+ id.value = `nav-bar${useUniqueId()}`
118
+ })
119
+ </script>
120
+
121
+ <style scoped lang="scss">
122
+ .nav {
123
+ box-shadow: inset 0 -0.05rem 0 var(--nav-panel-border-color);
124
+ align-items: flex-start;
125
+
126
+ &.not-collapse {
127
+ ul {
128
+ flex-wrap: nowrap;
129
+ }
130
+ }
131
+
132
+ ul {
133
+ position: relative;
134
+ height: 36px;
135
+ overflow: hidden;
136
+ display: flex;
137
+ flex-wrap: wrap;
138
+ }
139
+ }
140
+ </style>
package/components/atoms/tabs/Tabs.vue CHANGED
@@ -17,8 +17,8 @@
17
17
  />
18
18
  </li>
19
19
  <atoms-collapse-nav
20
- :test-id="`${props.testId}-item`"
21
20
  v-show="collapsedItems.length"
21
+ :test-id="`${props.testId}-item`"
22
22
  :items="collapsedItems"
23
23
  :is-link="props.isLink"
24
24
  />
@@ -77,6 +77,23 @@ const collapsedItems = computed<UI_I_CollapseNavItem[]>(() => {
77
77
 
78
78
  const classes = computed<string>(() => `btn btn--${props.size}`)
79
79
 
80
+ let triggerElementWidth = 0
81
+ const setTriggerElementWidth = (): void => {
82
+ if (!id.value || !props.testId) return
83
+
84
+ const element = document.querySelector(
85
+ `#${id.value} [test-id="${props.testId}-item"]`
86
+ )
87
+ if (
88
+ element &&
89
+ element?.style?.display !== 'none' &&
90
+ collapsedItems.value.length
91
+ ) {
92
+ const { width, right, left } = element.getBoundingClientRect()
93
+ triggerElementWidth = width + (right - left)
94
+ }
95
+ }
96
+
80
97
  const outputSize = (): void => {
81
98
  const el = document.getElementById(id.value)
82
99
  if (!el) return
@@ -89,15 +106,25 @@ const outputSize = (): void => {
89
106
 
90
107
  let childrenWidth = 0
91
108
  let count = 0
109
+ setTriggerElementWidth()
92
110
  for (let i = 0; i < elItems.length; i++) {
93
111
  childrenWidth += elItems[i].clientWidth + childrenMarginY
94
- const isWrap = elWidth < childrenWidth
112
+ const isWrap = collapsedItems.value.length
113
+ ? elWidth - triggerElementWidth < childrenWidth
114
+ : elWidth < childrenWidth
95
115
 
96
116
  if (isWrap) break
97
117
  count++
98
118
  }
99
119
 
100
120
  visibleCount.value = count
121
+
122
+ const element = document.querySelector(`#${id.value} ul`)
123
+ if (element) {
124
+ element.style.paddingRight = collapsedItems.value.length
125
+ ? `${triggerElementWidth}px`
126
+ : ''
127
+ }
101
128
  }
102
129
 
103
130
  const id = ref(`tabs-${useUniqueId()}`)
@@ -133,6 +160,7 @@ onMounted(() => {
133
160
  overflow: hidden;
134
161
  display: flex;
135
162
  flex-wrap: wrap;
163
+ grid-row-gap: 11px;
136
164
 
137
165
  &-item {
138
166
  margin-right: 0;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "bfg-common",
3
3
  "private": false,
4
- "version": "1.2.71",
4
+ "version": "1.2.72",
5
5
  "scripts": {
6
6
  "build": "nuxt build",
7
7
  "dev": "nuxt dev --port=3002",