@eslamdevui/ui 4.1.0 → 4.1.1-rc.2
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/dist/module.json +1 -1
- package/dist/module.mjs +1 -1
- package/dist/runtime/components/NavigationMenu.vue +101 -82
- package/package.json +2 -2
package/dist/module.json
CHANGED
package/dist/module.mjs
CHANGED
|
@@ -102,86 +102,99 @@ function getAccordionDefaultValue(list, level = 0) {
|
|
|
102
102
|
|
|
103
103
|
<template>
|
|
104
104
|
<DefineLinkTemplate v-slot="{ item, active, index }">
|
|
105
|
-
<slot :name="item.slot || 'item'" :item="item" :index="index" :active="active"
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
105
|
+
<slot :name="item.slot || 'item'" :item="item" :index="index" :active="active"
|
|
106
|
+
:ui="ui">
|
|
107
|
+
<slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item"
|
|
108
|
+
:active="active" :index="index" :ui="ui">
|
|
109
|
+
<UAvatar v-if="item.avatar"
|
|
110
|
+
:size="item.ui?.linkLeadingAvatarSize || props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()"
|
|
111
|
+
v-bind="item.avatar"
|
|
112
|
+
:class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active, disabled: !!item.disabled })" />
|
|
113
|
+
<UIcon v-else-if="item.icon" :name="item.icon"
|
|
114
|
+
:class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active, disabled: !!item.disabled })" />
|
|
109
115
|
</slot>
|
|
110
116
|
|
|
111
117
|
<span
|
|
112
118
|
v-if="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'])"
|
|
113
|
-
:class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
|
|
114
|
-
|
|
115
|
-
|
|
119
|
+
:class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })">
|
|
120
|
+
<slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item"
|
|
121
|
+
:active="active" :index="index">
|
|
116
122
|
{{ get(item, props.labelKey) }}
|
|
117
123
|
</slot>
|
|
118
124
|
|
|
119
|
-
<UIcon v-if="item.target === '_blank' && externalIcon !== false"
|
|
125
|
+
<UIcon v-if="item.target === '_blank' && externalIcon !== false"
|
|
126
|
+
:name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external"
|
|
127
|
+
:class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, item.ui?.linkLabelExternalIcon], active })" />
|
|
120
128
|
</span>
|
|
121
129
|
|
|
122
|
-
<component :is="orientation === 'vertical' && item.children?.length && !collapsed ? AccordionTrigger : '
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
130
|
+
<component :is="orientation === 'vertical' && item.children?.length && !collapsed ? AccordionTrigger : 'button'"
|
|
131
|
+
v-if="(!collapsed || orientation !== 'vertical') && (item.badge !== void 0 || orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length || item.trailingIcon || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing'])"
|
|
132
|
+
as="button" type="button" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
|
|
133
|
+
:aria-label="item.children?.length ? `Toggle ${get(item, props.labelKey)} submenu` : `${get(item, props.labelKey)} options`"
|
|
134
|
+
@click.stop.prevent>
|
|
135
|
+
<slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'"
|
|
136
|
+
:item="item" :active="active" :index="index" :ui="ui">
|
|
137
|
+
<UBadge v-if="item.badge !== void 0" color="neutral" variant="outline"
|
|
128
138
|
:size="item.ui?.linkTrailingBadgeSize || props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()"
|
|
129
139
|
v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
|
|
130
|
-
:class="ui.linkTrailingBadge({ class: [props.ui?.linkTrailingBadge, item.ui?.linkTrailingBadge] })"
|
|
131
|
-
/>
|
|
140
|
+
:class="ui.linkTrailingBadge({ class: [props.ui?.linkTrailingBadge, item.ui?.linkTrailingBadge] })" />
|
|
132
141
|
|
|
133
|
-
<UIcon
|
|
134
|
-
|
|
142
|
+
<UIcon
|
|
143
|
+
v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length"
|
|
144
|
+
:name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown"
|
|
145
|
+
:class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })" />
|
|
146
|
+
<UIcon v-else-if="item.trailingIcon" :name="item.trailingIcon"
|
|
147
|
+
:class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })" />
|
|
135
148
|
</slot>
|
|
136
149
|
</component>
|
|
137
150
|
</slot>
|
|
138
151
|
</DefineLinkTemplate>
|
|
139
152
|
|
|
140
153
|
<DefineItemTemplate v-slot="{ item, index, level = 0 }">
|
|
141
|
-
<component
|
|
142
|
-
:
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
>
|
|
146
|
-
<div v-if="orientation === 'vertical' && item.type === 'label' && !collapsed" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
|
|
154
|
+
<component :is="orientation === 'vertical' && !collapsed ? AccordionItem : NavigationMenuItem" as="li"
|
|
155
|
+
:value="item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`)">
|
|
156
|
+
<div v-if="orientation === 'vertical' && item.type === 'label' && !collapsed"
|
|
157
|
+
:class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
|
|
147
158
|
<ReuseLinkTemplate :item="item" :index="index" />
|
|
148
159
|
</div>
|
|
149
|
-
<ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }"
|
|
160
|
+
<ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }"
|
|
161
|
+
v-bind="orientation === 'vertical' && item.children?.length && !collapsed && item.type === 'trigger' ? {} : pickLinkProps(item)"
|
|
162
|
+
custom>
|
|
150
163
|
<component
|
|
151
164
|
:is="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) ? NavigationMenuTrigger : orientation === 'vertical' && item.children?.length && !collapsed && !slotProps.href ? AccordionTrigger : NavigationMenuLink"
|
|
152
|
-
as-child
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
165
|
+
as-child :active="active || item.active" :disabled="item.disabled" @select="item.onSelect">
|
|
166
|
+
<UPopover
|
|
167
|
+
v-if="orientation === 'vertical' && collapsed && item.children?.length && (!!props.popover || !!item.popover)"
|
|
168
|
+
v-bind="{ ...popoverProps, ...typeof item.popover === 'boolean' ? {} : item.popover || {} }"
|
|
169
|
+
:ui="{ content: ui.content({ class: [props.ui?.content, item.ui?.content] }) }">
|
|
170
|
+
<ULinkBase v-bind="slotProps"
|
|
171
|
+
:class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: level > 0 })">
|
|
159
172
|
<ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
|
|
160
173
|
</ULinkBase>
|
|
161
174
|
|
|
162
175
|
<template #content="{ close }">
|
|
163
|
-
<slot
|
|
164
|
-
:
|
|
165
|
-
:item="item"
|
|
166
|
-
:active="active || item.active"
|
|
167
|
-
:index="index"
|
|
168
|
-
:ui="ui"
|
|
169
|
-
:close="close"
|
|
170
|
-
>
|
|
176
|
+
<slot :name="item.slot ? `${item.slot}-content` : 'item-content'"
|
|
177
|
+
:item="item" :active="active || item.active" :index="index" :ui="ui" :close="close">
|
|
171
178
|
<ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })">
|
|
172
179
|
<li :class="ui.childLabel({ class: [props.ui?.childLabel, item.ui?.childLabel] })">
|
|
173
180
|
{{ get(item, props.labelKey) }}
|
|
174
181
|
</li>
|
|
175
|
-
<li v-for="(childItem, childIndex) in item.children" :key="childIndex"
|
|
182
|
+
<li v-for="(childItem, childIndex) in item.children" :key="childIndex"
|
|
183
|
+
:class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })">
|
|
176
184
|
<ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
|
|
177
185
|
<NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
|
|
178
|
-
<ULinkBase v-bind="childSlotProps"
|
|
179
|
-
|
|
186
|
+
<ULinkBase v-bind="childSlotProps"
|
|
187
|
+
:class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })">
|
|
188
|
+
<UIcon v-if="childItem.icon" :name="childItem.icon"
|
|
189
|
+
:class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" />
|
|
180
190
|
|
|
181
|
-
<span
|
|
191
|
+
<span
|
|
192
|
+
:class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })">
|
|
182
193
|
{{ get(childItem, props.labelKey) }}
|
|
183
194
|
|
|
184
|
-
<UIcon v-if="childItem.target === '_blank' && externalIcon !== false"
|
|
195
|
+
<UIcon v-if="childItem.target === '_blank' && externalIcon !== false"
|
|
196
|
+
:name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external"
|
|
197
|
+
:class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" />
|
|
185
198
|
</span>
|
|
186
199
|
</ULinkBase>
|
|
187
200
|
</NavigationMenuLink>
|
|
@@ -191,32 +204,47 @@ function getAccordionDefaultValue(list, level = 0) {
|
|
|
191
204
|
</slot>
|
|
192
205
|
</template>
|
|
193
206
|
</UPopover>
|
|
194
|
-
<UTooltip v-else-if="orientation === 'vertical' && collapsed && (!!props.tooltip || !!item.tooltip)"
|
|
195
|
-
|
|
207
|
+
<UTooltip v-else-if="orientation === 'vertical' && collapsed && (!!props.tooltip || !!item.tooltip)"
|
|
208
|
+
:text="get(item, props.labelKey)"
|
|
209
|
+
v-bind="{ ...tooltipProps, ...typeof item.tooltip === 'boolean' ? {} : item.tooltip || {} }">
|
|
210
|
+
<ULinkBase v-bind="slotProps"
|
|
211
|
+
:class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: level > 0 })">
|
|
196
212
|
<ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
|
|
197
213
|
</ULinkBase>
|
|
198
214
|
</UTooltip>
|
|
199
|
-
<ULinkBase v-else v-bind="slotProps"
|
|
215
|
+
<ULinkBase v-else v-bind="slotProps"
|
|
216
|
+
:class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
|
|
200
217
|
<ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
|
|
201
218
|
</ULinkBase>
|
|
202
219
|
</component>
|
|
203
220
|
|
|
204
|
-
<NavigationMenuContent
|
|
205
|
-
|
|
221
|
+
<NavigationMenuContent
|
|
222
|
+
v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])"
|
|
223
|
+
v-bind="contentProps" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
|
|
224
|
+
<slot :name="item.slot ? `${item.slot}-content` : 'item-content'"
|
|
225
|
+
:item="item" :active="active || item.active" :index="index" :ui="ui">
|
|
206
226
|
<ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })">
|
|
207
|
-
<li v-for="(childItem, childIndex) in item.children" :key="childIndex"
|
|
227
|
+
<li v-for="(childItem, childIndex) in item.children" :key="childIndex"
|
|
228
|
+
:class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })">
|
|
208
229
|
<ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
|
|
209
230
|
<NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
|
|
210
|
-
<ULinkBase v-bind="childSlotProps"
|
|
211
|
-
|
|
231
|
+
<ULinkBase v-bind="childSlotProps"
|
|
232
|
+
:class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })">
|
|
233
|
+
<UIcon v-if="childItem.icon" :name="childItem.icon"
|
|
234
|
+
:class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" />
|
|
212
235
|
|
|
213
|
-
<div
|
|
214
|
-
|
|
236
|
+
<div
|
|
237
|
+
:class="ui.childLinkWrapper({ class: [props.ui?.childLinkWrapper, item.ui?.childLinkWrapper] })">
|
|
238
|
+
<p
|
|
239
|
+
:class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })">
|
|
215
240
|
{{ get(childItem, props.labelKey) }}
|
|
216
241
|
|
|
217
|
-
<UIcon v-if="childItem.target === '_blank' && externalIcon !== false"
|
|
242
|
+
<UIcon v-if="childItem.target === '_blank' && externalIcon !== false"
|
|
243
|
+
:name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external"
|
|
244
|
+
:class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" />
|
|
218
245
|
</p>
|
|
219
|
-
<p v-if="childItem.description"
|
|
246
|
+
<p v-if="childItem.description"
|
|
247
|
+
:class="ui.childLinkDescription({ class: [props.ui?.childLinkDescription, item.ui?.childLinkDescription], active: childActive })">
|
|
220
248
|
{{ childItem.description }}
|
|
221
249
|
</p>
|
|
222
250
|
</div>
|
|
@@ -229,45 +257,36 @@ function getAccordionDefaultValue(list, level = 0) {
|
|
|
229
257
|
</NavigationMenuContent>
|
|
230
258
|
</ULink>
|
|
231
259
|
|
|
232
|
-
<AccordionContent v-if="orientation === 'vertical' && item.children?.length && !collapsed"
|
|
233
|
-
|
|
234
|
-
|
|
260
|
+
<AccordionContent v-if="orientation === 'vertical' && item.children?.length && !collapsed"
|
|
261
|
+
:class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
|
|
262
|
+
<AccordionRoot v-bind="{
|
|
235
263
|
...accordionProps,
|
|
236
264
|
defaultValue: getAccordionDefaultValue(item.children, level + 1)
|
|
237
|
-
}"
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
<ReuseItemTemplate
|
|
242
|
-
v-for="(childItem, childIndex) in item.children"
|
|
243
|
-
:key="childIndex"
|
|
244
|
-
:item="childItem"
|
|
245
|
-
:index="childIndex"
|
|
246
|
-
:level="level + 1"
|
|
247
|
-
:class="ui.childItem({ class: [props.ui?.childItem, childItem.ui?.childItem] })"
|
|
248
|
-
/>
|
|
265
|
+
}" as="ul" :class="ui.childList({ class: props.ui?.childList })">
|
|
266
|
+
<ReuseItemTemplate v-for="(childItem, childIndex) in item.children" :key="childIndex" :item="childItem"
|
|
267
|
+
:index="childIndex" :level="level + 1"
|
|
268
|
+
:class="ui.childItem({ class: [props.ui?.childItem, childItem.ui?.childItem] })" />
|
|
249
269
|
</AccordionRoot>
|
|
250
270
|
</AccordionContent>
|
|
251
271
|
</component>
|
|
252
272
|
</DefineItemTemplate>
|
|
253
273
|
|
|
254
|
-
<NavigationMenuRoot v-bind="{ ...rootProps, ...$attrs }" :data-collapsed="collapsed"
|
|
274
|
+
<NavigationMenuRoot v-bind="{ ...rootProps, ...$attrs }" :data-collapsed="collapsed"
|
|
275
|
+
:class="ui.root({ class: [props.ui?.root, props.class] })">
|
|
255
276
|
<slot name="list-leading" />
|
|
256
277
|
|
|
257
278
|
<template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
|
|
258
|
-
<component
|
|
259
|
-
v-bind="orientation === 'vertical' && !collapsed ? {
|
|
279
|
+
<component v-bind="orientation === 'vertical' && !collapsed ? {
|
|
260
280
|
...accordionProps,
|
|
261
281
|
defaultValue: getAccordionDefaultValue(list)
|
|
262
|
-
} : {}"
|
|
263
|
-
:
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
>
|
|
267
|
-
<ReuseItemTemplate v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :item="item" :index="index" :class="ui.item({ class: [props.ui?.item, item.ui?.item] })" />
|
|
282
|
+
} : {}" :is="orientation === 'vertical' && !collapsed ? AccordionRoot : NavigationMenuList" as="ul"
|
|
283
|
+
:class="ui.list({ class: props.ui?.list })">
|
|
284
|
+
<ReuseItemTemplate v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :item="item" :index="index"
|
|
285
|
+
:class="ui.item({ class: [props.ui?.item, item.ui?.item] })" />
|
|
268
286
|
</component>
|
|
269
287
|
|
|
270
|
-
<div v-if="orientation === 'vertical' && listIndex < lists.length - 1"
|
|
288
|
+
<div v-if="orientation === 'vertical' && listIndex < lists.length - 1"
|
|
289
|
+
:class="ui.separator({ class: props.ui?.separator })" />
|
|
271
290
|
</template>
|
|
272
291
|
|
|
273
292
|
<slot name="list-trailing" />
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eslamdevui/ui",
|
|
3
3
|
"description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
|
|
4
|
-
"version": "4.1.
|
|
5
|
-
"packageManager": "pnpm@10.
|
|
4
|
+
"version": "4.1.1-rc.2",
|
|
5
|
+
"packageManager": "pnpm@10.24.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
8
8
|
"url": "git+https://github.com/nuxt/ui.git"
|