@usssa/component-library 1.0.0-alpha.32 → 1.0.0-alpha.33
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.
- package/package.json +1 -1
- package/src/components/core/UBtnIcon.vue +18 -14
- package/src/components/core/UBtnStd.vue +1 -0
- package/src/components/core/UMenuButtonStd.vue +274 -0
- package/src/components/index.js +3 -1
- package/src/layouts/MainLayout.vue +4 -0
- package/src/pages/MenuButton.vue +194 -0
- package/src/router/routes.js +4 -0
package/package.json
CHANGED
|
@@ -89,20 +89,24 @@ const btnClass = computed(() => {
|
|
|
89
89
|
class="u-btn-icon"
|
|
90
90
|
:class="`size-${size} ${btnClass}`"
|
|
91
91
|
>
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
92
|
+
|
|
93
|
+
<template #default>
|
|
94
|
+
<q-icon
|
|
95
|
+
:color="iconColor"
|
|
96
|
+
:aria-hidden="true"
|
|
97
|
+
:class="`${iconClass} size-${size}`"
|
|
98
|
+
:size="iconSize"
|
|
99
|
+
/>
|
|
100
|
+
|
|
101
|
+
<UTooltip
|
|
102
|
+
v-if="tooltip"
|
|
103
|
+
:description="tooltip"
|
|
104
|
+
:anchor="anchor"
|
|
105
|
+
:self="self"
|
|
106
|
+
:offset="offset"
|
|
107
|
+
/>
|
|
108
|
+
<slot name="menu" />
|
|
109
|
+
</template>
|
|
106
110
|
</q-btn>
|
|
107
111
|
</template>
|
|
108
112
|
|
|
@@ -0,0 +1,274 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { computed, ref } from 'vue'
|
|
3
|
+
import UAvatar from './UAvatar.vue'
|
|
4
|
+
import UBtnStd from './UBtnStd.vue'
|
|
5
|
+
import UBtnIcon from './UBtnIcon.vue'
|
|
6
|
+
|
|
7
|
+
const props = defineProps({
|
|
8
|
+
color: {
|
|
9
|
+
type: String,
|
|
10
|
+
},
|
|
11
|
+
label: {
|
|
12
|
+
type: String
|
|
13
|
+
},
|
|
14
|
+
iconClass: {
|
|
15
|
+
type: String,
|
|
16
|
+
},
|
|
17
|
+
size: {
|
|
18
|
+
type: String,
|
|
19
|
+
default: 'md',
|
|
20
|
+
validator: (val) => ['sm', 'md', 'lg'].includes(val),
|
|
21
|
+
},
|
|
22
|
+
states: {
|
|
23
|
+
type: String,
|
|
24
|
+
default: 'Basic',
|
|
25
|
+
validator: (val) => ['Basic', 'Icon', 'Button', 'Avatar', 'Prefix'].includes(val),
|
|
26
|
+
},
|
|
27
|
+
selectedCountry: {
|
|
28
|
+
type: Object,
|
|
29
|
+
},
|
|
30
|
+
tooltip: {
|
|
31
|
+
type: String,
|
|
32
|
+
},
|
|
33
|
+
anchor: {
|
|
34
|
+
type: String,
|
|
35
|
+
},
|
|
36
|
+
self: {
|
|
37
|
+
type: String,
|
|
38
|
+
},
|
|
39
|
+
displayName: {
|
|
40
|
+
type: String,
|
|
41
|
+
},
|
|
42
|
+
avatarUrl: {
|
|
43
|
+
type: String,
|
|
44
|
+
},
|
|
45
|
+
ariaLabel: {
|
|
46
|
+
type: String,
|
|
47
|
+
},
|
|
48
|
+
menuOffset: {
|
|
49
|
+
type: Array,
|
|
50
|
+
default: () => [4, 4],
|
|
51
|
+
},
|
|
52
|
+
})
|
|
53
|
+
|
|
54
|
+
const emit = defineEmits(['update-country', 'onClick'])
|
|
55
|
+
|
|
56
|
+
const handleClick = () => {
|
|
57
|
+
return emit('onClick')
|
|
58
|
+
}
|
|
59
|
+
const selectCountry = (country) => {
|
|
60
|
+
emit('update-country', country)
|
|
61
|
+
}
|
|
62
|
+
const toLowerCase = (str) => str.toLowerCase()
|
|
63
|
+
</script>
|
|
64
|
+
|
|
65
|
+
<template>
|
|
66
|
+
|
|
67
|
+
<!-- 1. Menu button Basic state -->
|
|
68
|
+
<q-btn-dropdown
|
|
69
|
+
v-if="states === 'Basic'"
|
|
70
|
+
:aria-label="label"
|
|
71
|
+
:class="`u-mb-btn u-mb-basic size-${size}`"
|
|
72
|
+
:color="color"
|
|
73
|
+
flat
|
|
74
|
+
:menu-offset="menuOffset"
|
|
75
|
+
no-caps
|
|
76
|
+
text-color='dark'
|
|
77
|
+
>
|
|
78
|
+
<template #label>
|
|
79
|
+
<q-icon
|
|
80
|
+
v-if="iconClass"
|
|
81
|
+
:class="iconClass"
|
|
82
|
+
size='sm'
|
|
83
|
+
/>
|
|
84
|
+
<div class="text-body-md q-ml-xs">{{ label }}</div>
|
|
85
|
+
</template>
|
|
86
|
+
<slot name='menu' />
|
|
87
|
+
</q-btn-dropdown>
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
<!-- 2. Menu button Icon state -->
|
|
91
|
+
<UBtnIcon
|
|
92
|
+
v-if="states === 'Icon'"
|
|
93
|
+
:ariaLabel="ariaLabel"
|
|
94
|
+
:anchor="anchor"
|
|
95
|
+
class="u-mb-icon"
|
|
96
|
+
:color="color"
|
|
97
|
+
:iconClass="iconClass"
|
|
98
|
+
:offset="menuOffset"
|
|
99
|
+
ref="btn-icon"
|
|
100
|
+
:size="size"
|
|
101
|
+
:self="self"
|
|
102
|
+
:tooltip="tooltip"
|
|
103
|
+
@onClick="handleClick"
|
|
104
|
+
>
|
|
105
|
+
<template v-slot:menu>
|
|
106
|
+
<slot name='menu' />
|
|
107
|
+
</template>
|
|
108
|
+
</UBtnIcon>
|
|
109
|
+
|
|
110
|
+
<!-- 3. Menu button Button state -->
|
|
111
|
+
<UBtnStd
|
|
112
|
+
v-if="states === 'Button'"
|
|
113
|
+
class="u-mb-btn"
|
|
114
|
+
:color="color"
|
|
115
|
+
:left-icon="iconClass"
|
|
116
|
+
:label="label"
|
|
117
|
+
outline
|
|
118
|
+
:size="size"
|
|
119
|
+
>
|
|
120
|
+
<template v-slot:menu>
|
|
121
|
+
<slot name='menu' />
|
|
122
|
+
</template>
|
|
123
|
+
</UBtnStd>
|
|
124
|
+
|
|
125
|
+
<!-- 4. Menu button Avatar state -->
|
|
126
|
+
<q-btn-dropdown
|
|
127
|
+
v-if="states === 'Avatar'"
|
|
128
|
+
:class="`u-mb-avatar size-${size}`"
|
|
129
|
+
:color="color"
|
|
130
|
+
content-class="u-options-menu"
|
|
131
|
+
no-caps
|
|
132
|
+
:menu-offset="menuOffset"
|
|
133
|
+
rounded
|
|
134
|
+
text-color="black"
|
|
135
|
+
unelevated
|
|
136
|
+
>
|
|
137
|
+
<template #label>
|
|
138
|
+
<q-item class="account-drop-down">
|
|
139
|
+
<q-item-section avatar class="q-pr-xs">
|
|
140
|
+
<UAvatar
|
|
141
|
+
v-if="avatarUrl"
|
|
142
|
+
:image="avatarUrl"
|
|
143
|
+
:name="displayName"
|
|
144
|
+
size="md"
|
|
145
|
+
:showIndicator="false"
|
|
146
|
+
:round="true"
|
|
147
|
+
/>
|
|
148
|
+
<UAvatar
|
|
149
|
+
v-else
|
|
150
|
+
:name="displayName"
|
|
151
|
+
size="md"
|
|
152
|
+
:showIndicator="false"
|
|
153
|
+
:round="true"
|
|
154
|
+
/>
|
|
155
|
+
</q-item-section>
|
|
156
|
+
<q-item-section v-if="displayName">
|
|
157
|
+
<q-item-label class="text-body-md">
|
|
158
|
+
{{ displayName }}
|
|
159
|
+
</q-item-label>
|
|
160
|
+
</q-item-section>
|
|
161
|
+
</q-item>
|
|
162
|
+
</template>
|
|
163
|
+
<slot name='menu' />
|
|
164
|
+
</q-btn-dropdown>
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
<!-- 5. Menu button Prefix state -->
|
|
168
|
+
<q-btn-dropdown
|
|
169
|
+
v-if="states === 'Prefix'"
|
|
170
|
+
class="u-prefix-dropdown text-body-sm"
|
|
171
|
+
:class="`btn-field-${size}`"
|
|
172
|
+
content-class="u-prefix-dropdown-list"
|
|
173
|
+
flat
|
|
174
|
+
menu-anchor="top right"
|
|
175
|
+
menu-self="bottom middle"
|
|
176
|
+
:menu-offset="menuOffset"
|
|
177
|
+
rounded
|
|
178
|
+
>
|
|
179
|
+
<template #label>
|
|
180
|
+
<q-icon
|
|
181
|
+
:class="`fi fi-${toLowerCase(selectedCountry.flag)} q-mr-xxs`"
|
|
182
|
+
:aria-label="selectedCountry.name"
|
|
183
|
+
left
|
|
184
|
+
/>
|
|
185
|
+
<label class="selected-code"> {{ selectedCountry.code }}</label>
|
|
186
|
+
</template>
|
|
187
|
+
<slot name='menu' />
|
|
188
|
+
</q-btn-dropdown>
|
|
189
|
+
</template>
|
|
190
|
+
|
|
191
|
+
<style lang="sass">
|
|
192
|
+
.u-mb-basic
|
|
193
|
+
.q-icon
|
|
194
|
+
font-size: 1.875rem
|
|
195
|
+
|
|
196
|
+
.u-mb-avatar
|
|
197
|
+
padding: 0rem $xs
|
|
198
|
+
align-items: center
|
|
199
|
+
&:hover::before
|
|
200
|
+
background-color: $neutral-3
|
|
201
|
+
gap: $xs
|
|
202
|
+
.account-drop-down
|
|
203
|
+
padding: 0
|
|
204
|
+
min-height: 0
|
|
205
|
+
.q-item__section--avatar
|
|
206
|
+
min-width: 0
|
|
207
|
+
.q-btn__content
|
|
208
|
+
.q-icon
|
|
209
|
+
width:1rem
|
|
210
|
+
height:1rem
|
|
211
|
+
|
|
212
|
+
.u-mb-icon
|
|
213
|
+
&:hover::before
|
|
214
|
+
background-color: $blue-1
|
|
215
|
+
&:focus
|
|
216
|
+
border: 1.5px solid $primary
|
|
217
|
+
background-color: $blue-1
|
|
218
|
+
box-shadow: 0px 0px 0px 2px $primary-transparent
|
|
219
|
+
|
|
220
|
+
.u-mb-btn
|
|
221
|
+
border-radius: $xs
|
|
222
|
+
min-width: 5.5rem !important
|
|
223
|
+
&.bg-neutral
|
|
224
|
+
background-color: $neutral-3
|
|
225
|
+
&.size-sm
|
|
226
|
+
min-height: $md
|
|
227
|
+
padding: 0 $sm !important
|
|
228
|
+
&.size-md
|
|
229
|
+
min-height: $lg
|
|
230
|
+
padding: 0 $ba !important
|
|
231
|
+
&.size-lg
|
|
232
|
+
min-height: $xl
|
|
233
|
+
padding: 0 $ba !important
|
|
234
|
+
|
|
235
|
+
.u-mb-avatar
|
|
236
|
+
&.size-sm
|
|
237
|
+
min-height: $md
|
|
238
|
+
&.size-md
|
|
239
|
+
min-height: $lg
|
|
240
|
+
&.size-lg
|
|
241
|
+
min-height: $xl
|
|
242
|
+
|
|
243
|
+
.u-prefix-dropdown
|
|
244
|
+
border-radius: $xs 0px 0px $xs
|
|
245
|
+
border: 1.5px solid $neutral-4
|
|
246
|
+
background: $neutral-2
|
|
247
|
+
&:hover
|
|
248
|
+
border: 1.5px solid $primary
|
|
249
|
+
background-color: $neutral-2
|
|
250
|
+
&:focus
|
|
251
|
+
border: 1.5px solid $primary
|
|
252
|
+
background-color: $neutral-2
|
|
253
|
+
box-shadow: 0px 0px 0px 2px $primary-transparent
|
|
254
|
+
&.q-btn
|
|
255
|
+
height: 2rem
|
|
256
|
+
min-height: 2rem
|
|
257
|
+
padding: 0px $xs
|
|
258
|
+
.selected-code
|
|
259
|
+
width: 2rem
|
|
260
|
+
&.btn-field-sm
|
|
261
|
+
height: $md
|
|
262
|
+
&.btn-field-md
|
|
263
|
+
height: $lg
|
|
264
|
+
&.btn-field-lg
|
|
265
|
+
height: $xl
|
|
266
|
+
.q-icon.on-left
|
|
267
|
+
width: 1rem
|
|
268
|
+
height: 0.655rem
|
|
269
|
+
|
|
270
|
+
.q-btn-dropdown__arrow
|
|
271
|
+
width: 1rem
|
|
272
|
+
height: 1rem
|
|
273
|
+
margin-left: $xxs
|
|
274
|
+
</style>
|
package/src/components/index.js
CHANGED
|
@@ -24,6 +24,7 @@ import UInnerLoader from './core/UInnerLoader.vue'
|
|
|
24
24
|
import UMenuItem from './core/UMenuItem.vue'
|
|
25
25
|
import UDrawer from './core/UDrawer.vue'
|
|
26
26
|
import UMenuDropdown from './core/UMenuDropdown.vue'
|
|
27
|
+
import UMenuButtonStd from './core/UMenuButtonStd.vue'
|
|
27
28
|
import UBreadCrumbs from './core/UBreadCrumbs.vue'
|
|
28
29
|
|
|
29
30
|
import { useNotify } from '../composables/useNotify.js'
|
|
@@ -55,5 +56,6 @@ export {
|
|
|
55
56
|
UInnerLoader,
|
|
56
57
|
UDrawer,
|
|
57
58
|
UMenuDropdown,
|
|
58
|
-
|
|
59
|
+
UMenuButtonStd,
|
|
60
|
+
UBreadCrumbs
|
|
59
61
|
}
|
|
@@ -0,0 +1,194 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import ComponentBase from './ComponentBase.vue'
|
|
3
|
+
import UMenuButtonStd from '../components/core/UMenuButtonStd.vue'
|
|
4
|
+
import UMenuDropdown from '../components/core/UMenuDropdown.vue'
|
|
5
|
+
import { computed, ref } from 'vue'
|
|
6
|
+
|
|
7
|
+
// state of menu button
|
|
8
|
+
const anchor = ref('center left')
|
|
9
|
+
const ariaLabel = ref('Btn Icon')
|
|
10
|
+
const avatarUrl = ref('https://cdn.quasar.dev/img/avatar1.jpg')
|
|
11
|
+
const color = ref('primary')
|
|
12
|
+
const displayName = ref('Label')
|
|
13
|
+
const iconClass = ref('fa-kit-duotone fa-filter-list')
|
|
14
|
+
const label = ref('Label')
|
|
15
|
+
const menuOffset = ref([4, 4])
|
|
16
|
+
const states = ref('Basic')
|
|
17
|
+
const statesOptions = ['Basic', 'Icon', 'Button', 'Avatar', 'Prefix']
|
|
18
|
+
const size = ref('md')
|
|
19
|
+
const sizeOptions = ['sm', 'md', 'lg']
|
|
20
|
+
const self = ref('center end')
|
|
21
|
+
const selectedCountry = ref({
|
|
22
|
+
name: 'United States',
|
|
23
|
+
code: '+1',
|
|
24
|
+
flag: 'us',
|
|
25
|
+
})
|
|
26
|
+
const tooltip = ref('Tooltip')
|
|
27
|
+
const type = ref('standard')
|
|
28
|
+
|
|
29
|
+
const anchorOptions = [
|
|
30
|
+
'top left',
|
|
31
|
+
'top middle',
|
|
32
|
+
'top right',
|
|
33
|
+
'top start',
|
|
34
|
+
'top end',
|
|
35
|
+
'center left',
|
|
36
|
+
'center middle',
|
|
37
|
+
'center right',
|
|
38
|
+
'center start',
|
|
39
|
+
'center end',
|
|
40
|
+
'bottom left',
|
|
41
|
+
'bottom middle',
|
|
42
|
+
'bottom right',
|
|
43
|
+
'bottom start',
|
|
44
|
+
'bottom end',
|
|
45
|
+
]
|
|
46
|
+
|
|
47
|
+
const selfOptions = [
|
|
48
|
+
'top left',
|
|
49
|
+
'top middle',
|
|
50
|
+
'top right',
|
|
51
|
+
'top start',
|
|
52
|
+
'top end',
|
|
53
|
+
'center left',
|
|
54
|
+
'center middle',
|
|
55
|
+
'center right',
|
|
56
|
+
'center start',
|
|
57
|
+
'center end',
|
|
58
|
+
'bottom left',
|
|
59
|
+
'bottom middle',
|
|
60
|
+
'bottom right',
|
|
61
|
+
'bottom start',
|
|
62
|
+
'bottom end',
|
|
63
|
+
]
|
|
64
|
+
|
|
65
|
+
const htmlContent = `<UMenuButtonStd
|
|
66
|
+
ref="btn"
|
|
67
|
+
:size="size"
|
|
68
|
+
:label="label"
|
|
69
|
+
:states="states"
|
|
70
|
+
:color="colorClass"
|
|
71
|
+
:icon-class="iconClass"
|
|
72
|
+
:ariaLabel="ariaLabel"
|
|
73
|
+
:tooltip="tooltip"
|
|
74
|
+
:selected-country="selectedCountry"
|
|
75
|
+
@update-country="selectCountry"
|
|
76
|
+
:displayName="displayName"
|
|
77
|
+
:avatarUrl="avatarUrl"
|
|
78
|
+
:anchor="anchor"
|
|
79
|
+
:self="self"
|
|
80
|
+
:menu-offset="menuOffset"
|
|
81
|
+
>
|
|
82
|
+
<template #menu>
|
|
83
|
+
<q-menu>
|
|
84
|
+
<q-list>
|
|
85
|
+
<q-item clickable v-ripple>
|
|
86
|
+
<q-item-section>Option 1</q-item-section>
|
|
87
|
+
</q-item>
|
|
88
|
+
<q-item clickable v-ripple>
|
|
89
|
+
<q-item-section>Option 2</q-item-section>
|
|
90
|
+
</q-item>
|
|
91
|
+
</q-list>
|
|
92
|
+
</q-menu>
|
|
93
|
+
</template>
|
|
94
|
+
</UMenuButtonStd>`
|
|
95
|
+
|
|
96
|
+
defineOptions({
|
|
97
|
+
name: 'BtnStd',
|
|
98
|
+
})
|
|
99
|
+
|
|
100
|
+
const selectCountry = (value) => {
|
|
101
|
+
selectedCountry.value = value
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
const countryOptions = [
|
|
105
|
+
{ label: 'United States', code: '+1', leftIcon: 'fi fi-us' },
|
|
106
|
+
{ label: 'Canada', code: '+1', leftIcon: 'fi fi-ca' },
|
|
107
|
+
{ label: 'Mexico', code: '+52', leftIcon: 'fi fi-mx' },
|
|
108
|
+
]
|
|
109
|
+
|
|
110
|
+
const colorClass = computed(() => states.value === 'Avatar' ? 'neutral-2' : 'primary' )
|
|
111
|
+
</script>
|
|
112
|
+
|
|
113
|
+
<template>
|
|
114
|
+
<q-page class="flex flex-center">
|
|
115
|
+
<ComponentBase
|
|
116
|
+
figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=3449-13467&node-type=instance&m=dev"
|
|
117
|
+
>
|
|
118
|
+
<template v-slot:component>
|
|
119
|
+
<UMenuButtonStd
|
|
120
|
+
ref="btn"
|
|
121
|
+
:size="size"
|
|
122
|
+
:label="label"
|
|
123
|
+
:states="states"
|
|
124
|
+
:color="colorClass"
|
|
125
|
+
:icon-class="iconClass"
|
|
126
|
+
:ariaLabel="ariaLabel"
|
|
127
|
+
:tooltip="tooltip"
|
|
128
|
+
:selected-country="selectedCountry"
|
|
129
|
+
@update-country="selectCountry"
|
|
130
|
+
:displayName="displayName"
|
|
131
|
+
:avatarUrl="avatarUrl"
|
|
132
|
+
:anchor="anchor"
|
|
133
|
+
:self="self"
|
|
134
|
+
:menu-offset="menuOffset"
|
|
135
|
+
>
|
|
136
|
+
<template #menu>
|
|
137
|
+
<!-- <q-menu>
|
|
138
|
+
<q-list>
|
|
139
|
+
<q-item clickable v-ripple>
|
|
140
|
+
<q-item-section>Option 1</q-item-section>
|
|
141
|
+
</q-item>
|
|
142
|
+
<q-item clickable v-ripple>
|
|
143
|
+
<q-item-section>Option 2</q-item-section>
|
|
144
|
+
</q-item>
|
|
145
|
+
</q-list>
|
|
146
|
+
</q-menu> -->
|
|
147
|
+
</template>
|
|
148
|
+
</UMenuButtonStd>
|
|
149
|
+
</template>
|
|
150
|
+
|
|
151
|
+
<template v-slot:properties>
|
|
152
|
+
<div class="column q-gutter-y-lg">
|
|
153
|
+
<q-select v-model="states" :options="statesOptions" label="Menu state" />
|
|
154
|
+
<q-select
|
|
155
|
+
v-model="iconClass"
|
|
156
|
+
:options="['fa-kit-duotone fa-filter-list','fa-kit fa-caret-down']"
|
|
157
|
+
label="Icon"
|
|
158
|
+
v-if="['Basic','Button','Icon'].includes(states)"
|
|
159
|
+
/>
|
|
160
|
+
<q-input
|
|
161
|
+
label="Label"
|
|
162
|
+
v-model="label"
|
|
163
|
+
v-if="['Basic','Button'].includes(states)"
|
|
164
|
+
/>
|
|
165
|
+
<q-input label="Tooltip" v-model="tooltip" v-if="states === 'Icon'" />
|
|
166
|
+
<q-input label="Aria Label" v-model="ariaLabel" v-if="states === 'Icon'" />
|
|
167
|
+
<q-input label="AVatar url" v-model="avatarUrl" v-if="states === 'Avatar'"/>
|
|
168
|
+
<q-input label="Avatar name" v-model="displayName" v-if="states === 'Avatar'"/>
|
|
169
|
+
<!-- <q-input label="Icon" v-model="iconClass" /> -->
|
|
170
|
+
<q-select v-model="size" :options="sizeOptions" label="Size" />
|
|
171
|
+
<div class="column" v-if="states === 'Icon'">
|
|
172
|
+
<span class="text-grey-8 text-caption-sm">Tooltip Position</span>
|
|
173
|
+
<div>
|
|
174
|
+
<q-select
|
|
175
|
+
v-model="anchor"
|
|
176
|
+
:options="anchorOptions"
|
|
177
|
+
label="Anchor Origin"
|
|
178
|
+
/>
|
|
179
|
+
<q-select
|
|
180
|
+
v-model="self"
|
|
181
|
+
:options="selfOptions"
|
|
182
|
+
label="Self Origin"
|
|
183
|
+
/>
|
|
184
|
+
</div>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
</template>
|
|
188
|
+
|
|
189
|
+
<template v-slot:code>
|
|
190
|
+
<pre><code>{{ htmlContent }}</code></pre>
|
|
191
|
+
</template>
|
|
192
|
+
</ComponentBase>
|
|
193
|
+
</q-page>
|
|
194
|
+
</template>
|
package/src/router/routes.js
CHANGED
|
@@ -115,6 +115,10 @@ const routes = [
|
|
|
115
115
|
path: 'menu-dropdown',
|
|
116
116
|
component: () => import('src/pages/MenuDropdown.vue'),
|
|
117
117
|
},
|
|
118
|
+
{
|
|
119
|
+
path: 'menu-button',
|
|
120
|
+
component: () => import('src/pages/MenuButton.vue'),
|
|
121
|
+
},
|
|
118
122
|
{
|
|
119
123
|
path: 'bread-crumbs',
|
|
120
124
|
component: () => import('src/pages/BreadCrumbs.vue'),
|