arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): allow override of root through ui.root

Browse Source
This commit is contained in:
Benjamin Canac
2024-09-05 10:37:39 +02:00
parent 59201e3a67
commit 47ad74d029
24 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
cli/templates.mjs
View File

@@ -65,7 +65,7 @@ const ui = ${camelName}()
</script>
<template>
<Primitive :as="as" :class="ui.root({ class: props.class })">
<Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
<slot />
</Primitive>
</template>
@@ -109,7 +109,7 @@ const ui = ${camelName}()
</script>
<template>
<${upperName}Root v-bind="rootProps" :class="ui.root({ class: props.class })" />
<${upperName}Root v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })" />
</template>
`
}

2
src/runtime/components/Accordion.vue
View File

@@ -71,7 +71,7 @@ const ui = computed(() => accordion({
</script>
<template>
<AccordionRoot v-bind="rootProps" :class="ui.root({ class: props.class })">
<AccordionRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
<AccordionItem
v-for="(item, index) in items"
v-slot="{ open }"

2
src/runtime/components/Alert.vue
View File

@@ -80,7 +80,7 @@ const ui = computed(() => alert({
</script>
<template>
<Primitive :as="as" :class="ui.root({ class: props.class, multiline })">
<Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root], multiline })">
<slot name="leading">
<UAvatar v-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
<UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />

2
src/runtime/components/Avatar.vue
View File

@@ -51,7 +51,7 @@ const ui = computed(() => avatar({
</script>
<template>
<AvatarRoot :class="ui.root({ class: props.class })">
<AvatarRoot :class="ui.root({ class: [props.class, props.ui?.root] })">
<AvatarImage
v-if="src"
:as="as"

2
src/runtime/components/AvatarGroup.vue
View File

@@ -91,7 +91,7 @@ provide(avatarGroupInjectionKey, computed(() => ({
</script>
<template>
<Primitive :as="as" :class="ui.root({ class: props.class })">
<Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
<UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" />
<component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" :class="ui.base({ class: props.ui?.base })" />
</Primitive>

2
src/runtime/components/Breadcrumb.vue
View File

@@ -63,7 +63,7 @@ const ui = breadcrumb()
</script>
<template>
<Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: props.class })">
<Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: [props.class, props.ui?.root] })">
<ol :class="ui.list({ class: props.ui?.list })">
<template v-for="(item, index) in items" :key="index">
<li :class="ui.item({ class: props.ui?.item })">

2
src/runtime/components/Card.vue
View File

@@ -36,7 +36,7 @@ const ui = card()
</script>
<template>
<Primitive :as="as" :class="ui.root({ class: props.class })">
<Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
<div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
<slot name="header" />
</div>

2
src/runtime/components/Checkbox.vue
View File

@@ -93,7 +93,7 @@ function onUpdate(value: any) {
</script>
<template>
<div :class="ui.root({ class: props.class })">
<div :class="ui.root({ class: [props.class, props.ui?.root] })">
<div :class="ui.container({ class: props.ui?.container })">
<CheckboxRoot
:id="id"

2
src/runtime/components/Chip.vue
View File

@@ -64,7 +64,7 @@ const ui = computed(() => chip({
</script>
<template>
<Primitive :as="as" :class="ui.root({ class: props.class })">
<Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
<slot />
<span v-if="show" :class="ui.base({ class: props.ui?.base })">

2
src/runtime/components/Collapsible.vue
View File

@@ -42,7 +42,7 @@ const ui = collapsible()
</script>
<template>
<CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :class="ui.root({ class: props.class })">
<CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
<CollapsibleTrigger v-if="!!slots.default" as-child>
<slot :open="open" />
</CollapsibleTrigger>

2
src/runtime/components/CommandPalette.vue
View File

@@ -207,7 +207,7 @@ const groups = computed(() => {
<!-- eslint-disable vue/no-v-html -->
<template>
<ComboboxRoot v-bind="rootProps" v-model:search-term="searchTerm" open :class="ui.root({ class: props.class })">
<ComboboxRoot v-bind="rootProps" v-model:search-term="searchTerm" open :class="ui.root({ class: [props.class, props.ui?.root] })">
<ComboboxInput as-child>
<UInput
variant="none"

2
src/runtime/components/FormField.vue
View File

@@ -72,7 +72,7 @@ provide(formFieldInjectionKey, computed(() => ({
</script>
<template>
<div :class="ui.root({ class: props.class })">
<div :class="ui.root({ class: [props.class, props.ui?.root] })">
<div :class="ui.wrapper({ class: props.ui?.wrapper })">
<div v-if="label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
<Label :for="id" :class="ui.label({ class: props.ui?.label })">

2
src/runtime/components/Input.vue
View File

@@ -145,7 +145,7 @@ onMounted(() => {
</script>
<template>
<div :class="ui.root({ class: props.class })">
<div :class="ui.root({ class: [props.class, props.ui?.root] })">
<input
:id="id"
ref="inputRef"

2
src/runtime/components/InputMenu.vue
View File

@@ -244,7 +244,7 @@ defineExpose({
:disabled="disabled"
:display-value="displayValue"
:filter-function="filterFunction"
:class="ui.root({ class: props.class })"
:class="ui.root({ class: [props.class, props.ui?.root] })"
:as-child="!!multiple"
@update:model-value="onUpdate"
@update:open="onUpdateOpen"

2
src/runtime/components/NavigationMenu.vue
View File

@@ -109,7 +109,7 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
</script>
<template>
<NavigationMenuRoot v-bind="rootProps" :class="ui.root({ class: props.class })">
<NavigationMenuRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
<template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
<NavigationMenuList :class="ui.list({ class: props.ui?.list })">
<NavigationMenuItem v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :value="item.value || String(index)" :class="ui.item({ class: props.ui?.item })">

2
src/runtime/components/Pagination.vue
View File

@@ -123,7 +123,7 @@ const ui = pagination()
</script>
<template>
<PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: props.class })">
<PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
<PaginationList v-slot="{ items }" :class="ui.list({ class: props.ui?.list })">
<PaginationFirst v-if="showControls || !!slots.first" as-child>
<slot name="first">

2
src/runtime/components/Progress.vue
View File

@@ -142,7 +142,7 @@ const ui = computed(() => progress({
</script>
<template>
<div :class="ui.root({ class: props.class })">
<div :class="ui.root({ class: [props.class, props.ui?.root] })">
<div v-if="!isIndeterminate && (status || $slots.status)" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
<slot name="status" :percent="percent">
{{ percent }}%

2
src/runtime/components/RadioGroup.vue
View File

@@ -123,7 +123,7 @@ function onUpdate(value: any) {
v-bind="rootProps"
:name="name"
:disabled="disabled"
:class="ui.root({ class: props.class })"
:class="ui.root({ class: [props.class, props.ui?.root] })"
@update:model-value="onUpdate"
>
<fieldset :class="ui.fieldset({ class: props.ui?.fieldset })">

2
src/runtime/components/Separator.vue
View File

@@ -64,7 +64,7 @@ const ui = computed(() => separator({
</script>
<template>
<Separator v-bind="rootProps" :class="ui.root({ class: props.class })">
<Separator v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
<div :class="ui.border({ class: props.ui?.border })" />
<template v-if="label || icon || avatar || !!slots.default">

2
src/runtime/components/Slider.vue
View File

@@ -99,7 +99,7 @@ function onChange(value: any) {
v-model="sliderValue"
:name="name"
:disabled="disabled"
:class="ui.root({ class: props.class })"
:class="ui.root({ class: [props.class, props.ui?.root] })"
:default-value="defaultSliderValue"
@update:model-value="emitFormInput()"
@value-commit="onChange"

2
src/runtime/components/Switch.vue
View File

@@ -87,7 +87,7 @@ function onUpdate(value: any) {
</script>
<template>
<div :class="ui.root({ class: props.class })">
<div :class="ui.root({ class: [props.class, props.ui?.root] })">
<div :class="ui.container({ class: props.ui?.container })">
<SwitchRoot
:id="id"

2
src/runtime/components/Tabs.vue
View File

@@ -85,7 +85,7 @@ const ui = computed(() => tabs({
</script>
<template>
<TabsRoot v-bind="rootProps" :class="ui.root({ class: props.class })">
<TabsRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
<TabsList :class="ui.list({ class: props.ui?.list })">
<TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" />

2
src/runtime/components/Textarea.vue
View File

@@ -163,7 +163,7 @@ onMounted(() => {
</script>
<template>
<div :class="ui.root({ class: props.class })">
<div :class="ui.root({ class: [props.class, props.ui?.root] })">
<textarea
:id="id"
ref="textareaRef"

2
src/runtime/components/Toast.vue
View File

@@ -101,7 +101,7 @@ defineExpose({
ref="el"
v-slot="{ remaining, duration }"
v-bind="rootProps"
:class="ui.root({ class: props.class, multiline })"
:class="ui.root({ class: [props.class, props.ui?.root], multiline })"
:style="{ '--height': height }"
>
<slot name="leading">