bfg-common 1.0.43 → 1.0.44
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.
|
@@ -58,6 +58,7 @@
|
|
|
58
58
|
|
|
59
59
|
<script setup lang="ts">
|
|
60
60
|
import { UI_I_Localization } from '~/models/interfaces'
|
|
61
|
+
import { UI_I_NavigationItem } from '~/components/common/diagramMain/models/interfaces'
|
|
61
62
|
import { switchMainNavigationFunc } from '~/components/common/diagramMain/modals/config'
|
|
62
63
|
|
|
63
64
|
const props = defineProps<{
|
|
@@ -73,7 +74,9 @@ const emits = defineEmits<{
|
|
|
73
74
|
|
|
74
75
|
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
75
76
|
|
|
76
|
-
const switchMainNavigation =
|
|
77
|
+
const switchMainNavigation = computed<UI_I_NavigationItem[]>(() =>
|
|
78
|
+
switchMainNavigationFunc(localization.value)
|
|
79
|
+
)
|
|
77
80
|
|
|
78
81
|
const onToggleDiagram = () => emits('toggle-diagram')
|
|
79
82
|
|
|
@@ -1,141 +1,144 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div :id="id" class="btn-group">
|
|
3
|
-
<div v-for="(button, key) in props.actions" :key="button.type">
|
|
4
|
-
<label v-if="button.uploaded">
|
|
5
|
-
<span :class="[`btn btn-link ${props.size}`]">
|
|
6
|
-
{{ button.text }}
|
|
7
|
-
</span>
|
|
8
|
-
<input
|
|
9
|
-
:id="`select-file-button-${key}`"
|
|
10
|
-
type="file"
|
|
11
|
-
:disabled="button.disabled"
|
|
12
|
-
:multiple="false"
|
|
13
|
-
class="btn-group__file"
|
|
14
|
-
@change="(event) => onSelectFiles(event, button.type)"
|
|
15
|
-
/>
|
|
16
|
-
</label>
|
|
17
|
-
|
|
18
|
-
<button
|
|
19
|
-
v-else
|
|
20
|
-
:id="`actions-button-${key}`"
|
|
21
|
-
:class="[`btn btn-link ${props.size}`]"
|
|
22
|
-
:disabled="button.disabled"
|
|
23
|
-
@click="onClickButton(button.type)"
|
|
24
|
-
>
|
|
25
|
-
{{ button.text }}
|
|
26
|
-
</button>
|
|
27
|
-
</div>
|
|
28
|
-
<atoms-collapse-nav
|
|
29
|
-
v-show="collapsedItems.length"
|
|
30
|
-
:test-id="`${props.testId}-item`"
|
|
31
|
-
:items="collapsedItems"
|
|
32
|
-
@change="onClickButton"
|
|
33
|
-
@select-file="onSelectFiles"
|
|
34
|
-
/>
|
|
35
|
-
</div>
|
|
36
|
-
</template>
|
|
37
|
-
|
|
38
|
-
<script lang="ts" setup>
|
|
39
|
-
import { UI_I_Button } from '~/components/common/tools/models/interfaces'
|
|
40
|
-
import { UI_I_CollapseNavItem } from '~/components/atoms/collapse/models/interfaces'
|
|
41
|
-
|
|
42
|
-
const props = withDefaults(
|
|
43
|
-
defineProps<{
|
|
44
|
-
actions: UI_I_Button[]
|
|
45
|
-
testId: string
|
|
46
|
-
size?: 'btn-sm' | ''
|
|
47
|
-
}>(),
|
|
48
|
-
{
|
|
49
|
-
size: 'btn-sm',
|
|
50
|
-
}
|
|
51
|
-
)
|
|
52
|
-
const emits = defineEmits<{
|
|
53
|
-
(event: 'click', value1: string, value2?: Event | null): void
|
|
54
|
-
}>()
|
|
55
|
-
|
|
56
|
-
const onClickButton = (type: string): void => {
|
|
57
|
-
emits('click', type)
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
const onSelectFiles = (event: Event, type: string): void => {
|
|
61
|
-
emits('click', type, event)
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
const visibleCount = ref(props.actions.length)
|
|
65
|
-
const collapsedItems = computed<UI_I_CollapseNavItem[]>(() => {
|
|
66
|
-
return props.actions
|
|
67
|
-
.filter((_, index) => {
|
|
68
|
-
return index >= visibleCount.value
|
|
69
|
-
})
|
|
70
|
-
.map((item) => {
|
|
71
|
-
return {
|
|
72
|
-
text: item.text,
|
|
73
|
-
value: item.type,
|
|
74
|
-
disabled: item.disabled,
|
|
75
|
-
uploaded: item.uploaded,
|
|
76
|
-
}
|
|
77
|
-
})
|
|
78
|
-
})
|
|
79
|
-
|
|
80
|
-
const outputSize = (): void => {
|
|
81
|
-
const el = document.getElementById(id.value)
|
|
82
|
-
if (!el) return
|
|
83
|
-
|
|
84
|
-
const elWidth = el.clientWidth
|
|
85
|
-
const elItems = el.children
|
|
86
|
-
const elItemsMarginLeft = parseInt(getComputedStyle(elItems[0]).marginLeft)
|
|
87
|
-
const elItemsMarginRight = parseInt(getComputedStyle(elItems[0]).marginRight)
|
|
88
|
-
const childrenMarginY = elItemsMarginLeft + elItemsMarginRight
|
|
89
|
-
|
|
90
|
-
let childrenWidth = 0
|
|
91
|
-
let count = 0
|
|
92
|
-
for (let i = 0; i < elItems.length; i++) {
|
|
93
|
-
childrenWidth += elItems[i].clientWidth + childrenMarginY
|
|
94
|
-
const isWrap = elWidth < childrenWidth
|
|
95
|
-
|
|
96
|
-
if (isWrap) break
|
|
97
|
-
count++
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
visibleCount.value = count
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
const setResizeObserve = (): void => {
|
|
104
|
-
const el = document.getElementById(id.value)
|
|
105
|
-
|
|
106
|
-
if (!el) {
|
|
107
|
-
setTimeout(setResizeObserve, 0)
|
|
108
|
-
return
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
new ResizeObserver(outputSize).observe(el)
|
|
112
|
-
}
|
|
113
|
-
const id = ref<string>('')
|
|
114
|
-
onMounted(() => {
|
|
115
|
-
id.value = `tool-actions-${useUniqueId()}`
|
|
116
|
-
setResizeObserve()
|
|
117
|
-
})
|
|
118
|
-
</script>
|
|
119
|
-
|
|
120
|
-
<style lang="scss" scoped>
|
|
121
|
-
.btn {
|
|
122
|
-
&:disabled {
|
|
123
|
-
color: var(--btn-link-disabled);
|
|
124
|
-
}
|
|
125
|
-
&-group {
|
|
126
|
-
margin-top: 10px;
|
|
127
|
-
box-shadow: none;
|
|
128
|
-
position: relative;
|
|
129
|
-
overflow: hidden;
|
|
130
|
-
display: flex;
|
|
131
|
-
flex-wrap: wrap;
|
|
132
|
-
min-height: 25px;
|
|
133
|
-
height: 25px;
|
|
134
|
-
box-sizing: content-box;
|
|
135
|
-
|
|
136
|
-
&__file {
|
|
137
|
-
display: none;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
1
|
+
<template>
|
|
2
|
+
<div :id="id" :class="['btn-group', { 'with-space': collapsedItems.length }]">
|
|
3
|
+
<div v-for="(button, key) in props.actions" :key="button.type">
|
|
4
|
+
<label v-if="button.uploaded">
|
|
5
|
+
<span :class="[`btn btn-link ${props.size}`]">
|
|
6
|
+
{{ button.text }}
|
|
7
|
+
</span>
|
|
8
|
+
<input
|
|
9
|
+
:id="`select-file-button-${key}`"
|
|
10
|
+
type="file"
|
|
11
|
+
:disabled="button.disabled"
|
|
12
|
+
:multiple="false"
|
|
13
|
+
class="btn-group__file"
|
|
14
|
+
@change="(event) => onSelectFiles(event, button.type)"
|
|
15
|
+
/>
|
|
16
|
+
</label>
|
|
17
|
+
|
|
18
|
+
<button
|
|
19
|
+
v-else
|
|
20
|
+
:id="`actions-button-${key}`"
|
|
21
|
+
:class="[`btn btn-link ${props.size}`]"
|
|
22
|
+
:disabled="button.disabled"
|
|
23
|
+
@click="onClickButton(button.type)"
|
|
24
|
+
>
|
|
25
|
+
{{ button.text }}
|
|
26
|
+
</button>
|
|
27
|
+
</div>
|
|
28
|
+
<atoms-collapse-nav
|
|
29
|
+
v-show="collapsedItems.length"
|
|
30
|
+
:test-id="`${props.testId}-item`"
|
|
31
|
+
:items="collapsedItems"
|
|
32
|
+
@change="onClickButton"
|
|
33
|
+
@select-file="onSelectFiles"
|
|
34
|
+
/>
|
|
35
|
+
</div>
|
|
36
|
+
</template>
|
|
37
|
+
|
|
38
|
+
<script lang="ts" setup>
|
|
39
|
+
import { UI_I_Button } from '~/components/common/tools/models/interfaces'
|
|
40
|
+
import { UI_I_CollapseNavItem } from '~/components/atoms/collapse/models/interfaces'
|
|
41
|
+
|
|
42
|
+
const props = withDefaults(
|
|
43
|
+
defineProps<{
|
|
44
|
+
actions: UI_I_Button[]
|
|
45
|
+
testId: string
|
|
46
|
+
size?: 'btn-sm' | ''
|
|
47
|
+
}>(),
|
|
48
|
+
{
|
|
49
|
+
size: 'btn-sm',
|
|
50
|
+
}
|
|
51
|
+
)
|
|
52
|
+
const emits = defineEmits<{
|
|
53
|
+
(event: 'click', value1: string, value2?: Event | null): void
|
|
54
|
+
}>()
|
|
55
|
+
|
|
56
|
+
const onClickButton = (type: string): void => {
|
|
57
|
+
emits('click', type)
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
const onSelectFiles = (event: Event, type: string): void => {
|
|
61
|
+
emits('click', type, event)
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
const visibleCount = ref(props.actions.length)
|
|
65
|
+
const collapsedItems = computed<UI_I_CollapseNavItem[]>(() => {
|
|
66
|
+
return props.actions
|
|
67
|
+
.filter((_, index) => {
|
|
68
|
+
return index >= visibleCount.value
|
|
69
|
+
})
|
|
70
|
+
.map((item) => {
|
|
71
|
+
return {
|
|
72
|
+
text: item.text,
|
|
73
|
+
value: item.type,
|
|
74
|
+
disabled: item.disabled,
|
|
75
|
+
uploaded: item.uploaded,
|
|
76
|
+
}
|
|
77
|
+
})
|
|
78
|
+
})
|
|
79
|
+
|
|
80
|
+
const outputSize = (): void => {
|
|
81
|
+
const el = document.getElementById(id.value)
|
|
82
|
+
if (!el) return
|
|
83
|
+
|
|
84
|
+
const elWidth = el.clientWidth
|
|
85
|
+
const elItems = el.children
|
|
86
|
+
const elItemsMarginLeft = parseInt(getComputedStyle(elItems[0]).marginLeft)
|
|
87
|
+
const elItemsMarginRight = parseInt(getComputedStyle(elItems[0]).marginRight)
|
|
88
|
+
const childrenMarginY = elItemsMarginLeft + elItemsMarginRight
|
|
89
|
+
|
|
90
|
+
let childrenWidth = 0
|
|
91
|
+
let count = 0
|
|
92
|
+
for (let i = 0; i < elItems.length; i++) {
|
|
93
|
+
childrenWidth += elItems[i].clientWidth + childrenMarginY
|
|
94
|
+
const isWrap = elWidth - 66 < childrenWidth
|
|
95
|
+
|
|
96
|
+
if (isWrap) break
|
|
97
|
+
count++
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
visibleCount.value = count
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
const setResizeObserve = (): void => {
|
|
104
|
+
const el = document.getElementById(id.value)
|
|
105
|
+
|
|
106
|
+
if (!el) {
|
|
107
|
+
setTimeout(setResizeObserve, 0)
|
|
108
|
+
return
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
new ResizeObserver(outputSize).observe(el)
|
|
112
|
+
}
|
|
113
|
+
const id = ref<string>('')
|
|
114
|
+
onMounted(() => {
|
|
115
|
+
id.value = `tool-actions-${useUniqueId()}`
|
|
116
|
+
setResizeObserve()
|
|
117
|
+
})
|
|
118
|
+
</script>
|
|
119
|
+
|
|
120
|
+
<style lang="scss" scoped>
|
|
121
|
+
.btn {
|
|
122
|
+
&:disabled {
|
|
123
|
+
color: var(--btn-link-disabled);
|
|
124
|
+
}
|
|
125
|
+
&-group {
|
|
126
|
+
margin-top: 10px;
|
|
127
|
+
box-shadow: none;
|
|
128
|
+
position: relative;
|
|
129
|
+
overflow: hidden;
|
|
130
|
+
display: flex;
|
|
131
|
+
flex-wrap: wrap;
|
|
132
|
+
min-height: 25px;
|
|
133
|
+
height: 25px;
|
|
134
|
+
box-sizing: content-box;
|
|
135
|
+
|
|
136
|
+
&__file {
|
|
137
|
+
display: none;
|
|
138
|
+
}
|
|
139
|
+
&.with-space {
|
|
140
|
+
padding-right: 66px;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
</style>
|