@byyuurin/ui 0.3.0 → 0.4.0

package/dist/runtime/components/Select.vue

@@ -13,7 +13,7 @@ import { useFieldGroup } from "../composables/useFieldGroup";
 import { useFormField } from "../composables/useFormField";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
-import { compare, get, getDisplayValue, isArrayOfArray, looseToNumber } from "../utils";
+import { compare, get, getDisplayValue, isArrayOfArray, looseToNumber, pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Avatar from "./Avatar.vue";
 import Button from "./Button.vue";
@@ -90,13 +90,13 @@ const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponen
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.select));
   return styler({
-    ...props,
-    fieldGroup: orientation.value,
-    size: fieldGroupSize.value || formFieldSize.value,
+    ...pick(props, ["variant", "loading"]),
     color: color.value,
+    size: fieldGroupSize.value || formFieldSize.value,
     highlight: highlight.value,
     leading: isLeading.value || !!props.avatar || !!slots.leading,
     trailing: isTrailing.value || !!slots.trailing,
+    fieldGroup: orientation.value,
     searchInput: !!props.searchInput
   });
 });
@@ -223,203 +223,203 @@ defineExpose({
 </script>
 
 <template>
-  <DefineCreateItemTemplate>
-    <ComboboxItem
-      :value="searchTerm"
-      :class="ui.item({ class: props.ui?.item })"
-      data-part="item"
-      @select="onCreate"
-    >
-      <span :class="ui.itemLabel({ class: props.ui?.itemLabel })" data-part="itemLabel">
-        <slot name="create-item-label" :item="searchTerm">
-          {{ t("select.create", { label: searchTerm }) }}
-        </slot>
-      </span>
-    </ComboboxItem>
-  </DefineCreateItemTemplate>
-
-  <ComboboxRoot
-    :id="id"
-    v-slot="{ modelValue, open }"
-    v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
-    :name="name"
-    :disabled="disabled"
-    ignore-filter
-    as-child
-    @update:model-value="onUpdate"
-    @update:open="onUpdateOpen"
-  >
-    <ComboboxAnchor as-child>
-      <ComboboxTrigger ref="triggerRef" :class="ui.base({ class: [props.ui?.base, props.class] })" data-part="base" tabindex="0">
-        <span v-if="isLeading || !!props.avatar || slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
-          <slot name="leading" :model-value="modelValue" :open="open" :ui="ui">
-            <Icon
-              v-if="isLeading && leadingIconName"
-              :name="leadingIconName"
-              :class="ui.leadingIcon({ class: props.ui?.leadingIcon })"
-              data-part="leadingIcon"
-            />
-            <Avatar
-              v-else-if="props.avatar"
-              :size="props.ui?.itemLeadingChipSize || ui.itemLeadingAvatarSize()"
-              v-bind="props.avatar"
-              :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
-              data-part="leadingAvatar"
-            />
-          </slot>
-        </span>
-
-        <slot :model-value="modelValue" :open="open" :ui="ui">
-          <template v-for="displayedModelValue in [displayValue(modelValue)]" :key="displayedModelValue">
-            <span v-if="displayedModelValue != null" :class="ui.value({ class: props.ui?.value })" data-part="value">
-              {{ displayedModelValue }}
-            </span>
-            <span v-else :class="ui.placeholder({ class: props.ui?.placeholder })" data-part="placeholder">
-              <template v-if="props.placeholder">{{ props.placeholder }}</template>
-              <template v-else>&nbsp;</template>
-            </span>
-          </template>
-        </slot>
-
-        <span v-if="isTrailing || !!slots.trailing || props.clear" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
-          <slot name="trailing" :model-value="modelValue" :open="open" :ui="ui">
-            <ComboboxCancel v-if="props.clear && !isModelValueEmpty(modelValue)" as-child>
-              <Button
-                as="span"
-                :icon="props.clearIcon || appConfig.ui.icons.close"
-                variant="link"
-                color="neutral"
-                tabindex="-1"
-                v-bind="clearProps"
-                :class="ui.trailingClear({ class: props.ui?.trailingClear })"
-                data-part="trailingClear"
-                @click.stop="onClear"
-              />
-            </ComboboxCancel>
-            <Icon v-else-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" data-part="trailingIcon" />
-          </slot>
-        </span>
-      </ComboboxTrigger>
-    </ComboboxAnchor>
-
-    <ComboboxPortal v-bind="portalProps">
-      <ComboboxContent v-bind="contentProps" :class="ui.content({ class: props.ui?.content })" data-part="content">
-        <FocusScope trapped :class="ui.focusScope({ class: props.ui?.focusScope })" data-part="focusScope">
-          <slot name="content-top"></slot>
-
-          <ComboboxInput v-model="searchTerm" :display-value="() => searchTerm" as-child>
-            <Input
-              autofocus
-              autocomplete="off"
-              :size="props.size"
-              v-bind="searchInputProps"
-              :class="ui.input({ class: props.ui?.input })"
-              data-part="input"
-              @change.stop
-            />
-          </ComboboxInput>
-
-          <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })" data-part="empty">
-            <slot name="empty" :search-term="searchTerm">
-              {{ searchTerm ? t("select.noMatch", { searchTerm }) : t("select.noData") }}
-            </slot>
-          </ComboboxEmpty>
-
-          <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })" data-part="viewport">
-            <ComboboxGroup v-if="createItem && createItemPosition === 'top'" :class="ui.group({ class: props.ui?.group })" data-part="group">
-              <ReuseCreateItemTemplate />
-            </ComboboxGroup>
-
-            <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })" data-part="group">
-              <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-                <ComboboxLabel
-                  v-if="isSelectItem(item) && item.type === 'label'"
-                  :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })"
-                  data-part="label"
-                >
-                  {{ get(item, props.labelKey) }}
-                </ComboboxLabel>
-
-                <ComboboxSeparator
-                  v-else-if="isSelectItem(item) && item.type === 'separator'"
-                  :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })"
-                  data-part="separator"
-                />
-
-                <ComboboxItem
-                  v-else
-                  :value="props.valueKey && isSelectItem(item) ? get(item, props.valueKey) : item"
-                  :disabled="isSelectItem(item) && item.disabled"
-                  :class="ui.item({ class: [props.ui?.item, ...isSelectItem(item) ? [item.ui?.item, item.class] : []] })"
-                  data-part="item"
-                  @select="onSelect($event, item)"
-                >
-                  <slot name="item" :item="item" :index="index" :ui="ui">
-                    <slot name="item-leading" :item="item" :index="index" :ui="ui">
-                      <Icon
-                        v-if="isSelectItem(item) && item.icon"
-                        :name="item.icon"
-                        :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })"
-                        data-part="itemLeadingIcon"
-                      />
-                      <Avatar
-                        v-else-if="isSelectItem(item) && item.avatar"
-                        :size="item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()"
-                        v-bind="item.avatar"
-                        :class="ui.itemLeadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.itemLeadingAvatar] })"
-                        data-part="itemLeadingAvatar"
-                      />
-                      <Chip
-                        v-else-if="isSelectItem(item) && item.chip"
-                        :size="item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()"
-                        inset
-                        standalone
-                        v-bind="item.chip"
-                        :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })"
-                        data-part="itemLeadingChip"
-                      />
-                    </slot>
-
-                    <span :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, isSelectItem(item) && item.ui?.itemWrapper] })" data-part="itemWrapper">
-                      <span :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })" data-part="itemLabel">
-                        <slot name="item-label" :item="item" :index="index">
-                          {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
-                        </slot>
-                      </span>
-
-                      <span
-                        v-if="isSelectItem(item) && get(item, props.descriptionKey) || !!slots['item-description']"
-                        :class="ui.itemDescription({ class: [props.ui?.itemDescription, isSelectItem(item) && item.ui?.itemDescription] })"
-                        data-part="itemDescription"
-                      >
-                        <slot name="item-description" :item="item" :index="index">
-                          {{ isSelectItem(item) ? get(item, props.descriptionKey) : "" }}
-                        </slot>
-                      </span>
-                    </span>
-
-                    <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })" data-part="itemTrailing">
-                      <slot name="item-trailing" :item="item" :index="index" :ui="ui"></slot>
-
-                      <ComboboxItemIndicator as-child>
-                        <Icon :name="props.selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" data-part="itemTrailingIcon" />
-                      </ComboboxItemIndicator>
-                    </span>
-                  </slot>
-                </ComboboxItem>
-              </template>
-            </ComboboxGroup>
-
-            <ComboboxGroup v-if="createItem && createItemPosition === 'bottom'" :class="ui.group({ class: props.ui?.group })" data-part="group">
-              <ReuseCreateItemTemplate />
-            </ComboboxGroup>
-          </div>
-
-          <slot name="content-bottom"></slot>
-        </FocusScope>
-
-        <ComboboxArrow v-if="props.arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" data-part="arrow" />
-      </ComboboxContent>
-    </ComboboxPortal>
-  </ComboboxRoot>
+  <DefineCreateItemTemplate>
+    <ComboboxItem
+      :value="searchTerm"
+      :class="ui.item({ class: props.ui?.item })"
+      data-part="item"
+      @select="onCreate"
+    >
+      <span :class="ui.itemLabel({ class: props.ui?.itemLabel })" data-part="itemLabel">
+        <slot name="create-item-label" :item="searchTerm">
+          {{ t("select.create", { label: searchTerm }) }}
+        </slot>
+      </span>
+    </ComboboxItem>
+  </DefineCreateItemTemplate>
+
+  <ComboboxRoot
+    :id="id"
+    v-slot="{ modelValue, open }"
+    v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+    :name="name"
+    :disabled="disabled"
+    ignore-filter
+    as-child
+    @update:model-value="onUpdate"
+    @update:open="onUpdateOpen"
+  >
+    <ComboboxAnchor as-child>
+      <ComboboxTrigger ref="triggerRef" :class="ui.base({ class: [props.ui?.base, props.class] })" data-part="base" tabindex="0">
+        <span v-if="isLeading || !!props.avatar || slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
+          <slot name="leading" :model-value="modelValue" :open="open" :ui="ui">
+            <Icon
+              v-if="isLeading && leadingIconName"
+              :name="leadingIconName"
+              :class="ui.leadingIcon({ class: props.ui?.leadingIcon })"
+              data-part="leadingIcon"
+            />
+            <Avatar
+              v-else-if="props.avatar"
+              :size="props.ui?.itemLeadingChipSize || ui.itemLeadingAvatarSize()"
+              v-bind="props.avatar"
+              :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
+              data-part="leadingAvatar"
+            />
+          </slot>
+        </span>
+
+        <slot :model-value="modelValue" :open="open" :ui="ui">
+          <template v-for="displayedModelValue in [displayValue(modelValue)]" :key="displayedModelValue">
+            <span v-if="displayedModelValue != null" :class="ui.value({ class: props.ui?.value })" data-part="value">
+              {{ displayedModelValue }}
+            </span>
+            <span v-else :class="ui.placeholder({ class: props.ui?.placeholder })" data-part="placeholder">
+              <template v-if="props.placeholder">{{ props.placeholder }}</template>
+              <template v-else>&nbsp;</template>
+            </span>
+          </template>
+        </slot>
+
+        <span v-if="isTrailing || !!slots.trailing || props.clear" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
+          <slot name="trailing" :model-value="modelValue" :open="open" :ui="ui">
+            <ComboboxCancel v-if="props.clear && !isModelValueEmpty(modelValue)" as-child>
+              <Button
+                as="span"
+                :icon="props.clearIcon || appConfig.ui.icons.close"
+                variant="link"
+                color="neutral"
+                tabindex="-1"
+                v-bind="clearProps"
+                :class="ui.trailingClear({ class: props.ui?.trailingClear })"
+                data-part="trailingClear"
+                @click.stop="onClear"
+              />
+            </ComboboxCancel>
+            <Icon v-else-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" data-part="trailingIcon" />
+          </slot>
+        </span>
+      </ComboboxTrigger>
+    </ComboboxAnchor>
+
+    <ComboboxPortal v-bind="portalProps">
+      <ComboboxContent v-bind="contentProps" :class="ui.content({ class: props.ui?.content })" data-part="content">
+        <FocusScope trapped :class="ui.focusScope({ class: props.ui?.focusScope })" data-part="focusScope">
+          <slot name="content-top"></slot>
+
+          <ComboboxInput v-model="searchTerm" :display-value="() => searchTerm" as-child>
+            <Input
+              autofocus
+              autocomplete="off"
+              :size="props.size"
+              v-bind="searchInputProps"
+              :class="ui.input({ class: props.ui?.input })"
+              data-part="input"
+              @change.stop
+            />
+          </ComboboxInput>
+
+          <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })" data-part="empty">
+            <slot name="empty" :search-term="searchTerm">
+              {{ searchTerm ? t("select.noMatch", { searchTerm }) : t("select.noData") }}
+            </slot>
+          </ComboboxEmpty>
+
+          <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })" data-part="viewport">
+            <ComboboxGroup v-if="createItem && createItemPosition === 'top'" :class="ui.group({ class: props.ui?.group })" data-part="group">
+              <ReuseCreateItemTemplate />
+            </ComboboxGroup>
+
+            <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })" data-part="group">
+              <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+                <ComboboxLabel
+                  v-if="isSelectItem(item) && item.type === 'label'"
+                  :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })"
+                  data-part="label"
+                >
+                  {{ get(item, props.labelKey) }}
+                </ComboboxLabel>
+
+                <ComboboxSeparator
+                  v-else-if="isSelectItem(item) && item.type === 'separator'"
+                  :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })"
+                  data-part="separator"
+                />
+
+                <ComboboxItem
+                  v-else
+                  :value="props.valueKey && isSelectItem(item) ? get(item, props.valueKey) : item"
+                  :disabled="isSelectItem(item) && item.disabled"
+                  :class="ui.item({ class: [props.ui?.item, ...isSelectItem(item) ? [item.ui?.item, item.class] : []] })"
+                  data-part="item"
+                  @select="onSelect($event, item)"
+                >
+                  <slot name="item" :item="item" :index="index" :ui="ui">
+                    <slot name="item-leading" :item="item" :index="index" :ui="ui">
+                      <Icon
+                        v-if="isSelectItem(item) && item.icon"
+                        :name="item.icon"
+                        :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })"
+                        data-part="itemLeadingIcon"
+                      />
+                      <Avatar
+                        v-else-if="isSelectItem(item) && item.avatar"
+                        :size="item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()"
+                        v-bind="item.avatar"
+                        :class="ui.itemLeadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.itemLeadingAvatar] })"
+                        data-part="itemLeadingAvatar"
+                      />
+                      <Chip
+                        v-else-if="isSelectItem(item) && item.chip"
+                        :size="item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()"
+                        inset
+                        standalone
+                        v-bind="item.chip"
+                        :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })"
+                        data-part="itemLeadingChip"
+                      />
+                    </slot>
+
+                    <span :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, isSelectItem(item) && item.ui?.itemWrapper] })" data-part="itemWrapper">
+                      <span :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })" data-part="itemLabel">
+                        <slot name="item-label" :item="item" :index="index">
+                          {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
+                        </slot>
+                      </span>
+
+                      <span
+                        v-if="isSelectItem(item) && get(item, props.descriptionKey) || !!slots['item-description']"
+                        :class="ui.itemDescription({ class: [props.ui?.itemDescription, isSelectItem(item) && item.ui?.itemDescription] })"
+                        data-part="itemDescription"
+                      >
+                        <slot name="item-description" :item="item" :index="index">
+                          {{ isSelectItem(item) ? get(item, props.descriptionKey) : "" }}
+                        </slot>
+                      </span>
+                    </span>
+
+                    <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })" data-part="itemTrailing">
+                      <slot name="item-trailing" :item="item" :index="index" :ui="ui"></slot>
+
+                      <ComboboxItemIndicator as-child>
+                        <Icon :name="props.selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" data-part="itemTrailingIcon" />
+                      </ComboboxItemIndicator>
+                    </span>
+                  </slot>
+                </ComboboxItem>
+              </template>
+            </ComboboxGroup>
+
+            <ComboboxGroup v-if="createItem && createItemPosition === 'bottom'" :class="ui.group({ class: props.ui?.group })" data-part="group">
+              <ReuseCreateItemTemplate />
+            </ComboboxGroup>
+          </div>
+
+          <slot name="content-bottom"></slot>
+        </FocusScope>
+
+        <ComboboxArrow v-if="props.arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" data-part="arrow" />
+      </ComboboxContent>
+    </ComboboxPortal>
+  </ComboboxRoot>
 </template>

package/dist/runtime/components/Separator.vue

@@ -7,6 +7,7 @@ import { reactivePick } from "@vueuse/core";
 import { Separator, useForwardProps } from "reka-ui";
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Avatar from "./Avatar.vue";
 import Icon from "./Icon.vue";
@@ -29,39 +30,39 @@ const rootProps = useForwardProps(reactivePick(props, "as", "decorative", "orien
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.separator));
-  return styler(props);
+  return styler(pick(props, ["color", "orientation", "size", "type"]));
 });
 </script>
 
 <template>
-  <Separator v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <div :class="ui.border({ class: props.ui?.border, start: props.align === 'start' })" data-part="border"></div>
-
-    <template v-if="props.label || props.icon || props.avatar || !!slots.default">
-      <div :class="ui.container({ class: props.ui?.container })" data-part="container">
-        <slot :ui="ui">
-          <span
-            v-if="props.label"
-            :class="ui.label({ class: props.ui?.label })"
-            data-part="label"
-          >{{ props.label }}</span>
-          <Icon
-            v-else-if="props.icon"
-            :name="props.icon"
-            :class="ui.icon({ class: props.ui?.icon })"
-            data-part="icon"
-          />
-          <Avatar
-            v-else-if="props.avatar"
-            :size="props.ui?.avatarSize || ui.avatarSize()"
-            v-bind="props.avatar"
-            :class="ui.avatar({ class: props.ui?.avatar })"
-            data-part="avatar"
-          />
-        </slot>
-      </div>
-
-      <div :class="ui.border({ class: props.ui?.border, end: props.align === 'end' })" data-part="border"></div>
-    </template>
-  </Separator>
+  <Separator v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <div :class="ui.border({ class: props.ui?.border, start: props.align === 'start' })" data-part="border"></div>
+
+    <template v-if="props.label || props.icon || props.avatar || !!slots.default">
+      <div :class="ui.container({ class: props.ui?.container })" data-part="container">
+        <slot :ui="ui">
+          <span
+            v-if="props.label"
+            :class="ui.label({ class: props.ui?.label })"
+            data-part="label"
+          >{{ props.label }}</span>
+          <Icon
+            v-else-if="props.icon"
+            :name="props.icon"
+            :class="ui.icon({ class: props.ui?.icon })"
+            data-part="icon"
+          />
+          <Avatar
+            v-else-if="props.avatar"
+            :size="props.ui?.avatarSize || ui.avatarSize()"
+            v-bind="props.avatar"
+            :class="ui.avatar({ class: props.ui?.avatar })"
+            data-part="avatar"
+          />
+        </slot>
+      </div>
+
+      <div :class="ui.border({ class: props.ui?.border, end: props.align === 'end' })" data-part="border"></div>
+    </template>
+  </Separator>
 </template>

package/dist/runtime/components/Skeleton.vue

@@ -6,6 +6,7 @@ import { useAppConfig } from "#imports";
 import { Primitive } from "reka-ui";
 import { computed } from "vue";
 import theme from "#build/ui/skeleton";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 const props = defineProps({
   as: { type: null, required: false },
@@ -14,20 +15,20 @@ const props = defineProps({
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.skeleton));
-  return styler(props);
+  return styler(pick(props, []));
 });
 </script>
 
 <template>
-  <Primitive
-    :as="props.as"
-    aria-busy="true"
-    aria-label="loading"
-    aria-live="polite"
-    role="alert"
-    :class="ui.base({ class: props.class })"
-    data-part="base"
-  >
-    <slot></slot>
-  </Primitive>
+  <Primitive
+    :as="props.as"
+    aria-busy="true"
+    aria-label="loading"
+    aria-live="polite"
+    role="alert"
+    :class="ui.base({ class: props.class })"
+    data-part="base"
+  >
+    <slot></slot>
+  </Primitive>
 </template>

package/dist/runtime/components/Slider.vue

@@ -8,6 +8,7 @@ import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
 import { useFormField } from "../composables/useFormField";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Tooltip from "./Tooltip.vue";
 const props = defineProps({
@@ -52,7 +53,7 @@ const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.slider));
   return styler({
-    ...props,
+    ...pick(props, ["orientation"]),
     size: size.value,
     color: color.value,
     disabled: disabled.value
@@ -66,29 +67,29 @@ function onChange(value) {
 </script>
 
 <template>
-  <SliderRoot
-    v-bind="{ ...rootProps, ...ariaAttrs, id, name, disabled }"
-    v-model="sliderValue"
-    :default-value="defaultSliderValue"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :data-steps="thumbs"
-    data-part="root"
-    @update:model-value="emitFormInput()"
-    @value-commit="onChange"
-  >
-    <SliderTrack :class="ui.track({ class: props.ui?.track })" data-part="track">
-      <SliderRange :class="ui.range({ class: props.ui?.range })" data-part="range" />
-    </SliderTrack>
-
-    <Tooltip
-      v-for="thumb in thumbs"
-      :key="thumb"
-      v-bind="typeof props.tooltip === 'object' ? props.tooltip : {}"
-      :text="String(thumbs > 1 ? sliderValue?.[thumb - 1] : sliderValue)"
-      :disabled="!props.tooltip"
-      disable-closing-trigger
-    >
-      <SliderThumb :class="ui.thumb({ class: props.ui?.thumb })" data-part="thumb" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
-    </Tooltip>
-  </SliderRoot>
+  <SliderRoot
+    v-bind="{ ...rootProps, ...ariaAttrs, id, name, disabled }"
+    v-model="sliderValue"
+    :default-value="defaultSliderValue"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :data-steps="thumbs"
+    data-part="root"
+    @update:model-value="emitFormInput()"
+    @value-commit="onChange"
+  >
+    <SliderTrack :class="ui.track({ class: props.ui?.track })" data-part="track">
+      <SliderRange :class="ui.range({ class: props.ui?.range })" data-part="range" />
+    </SliderTrack>
+
+    <Tooltip
+      v-for="thumb in thumbs"
+      :key="thumb"
+      v-bind="typeof props.tooltip === 'object' ? props.tooltip : {}"
+      :text="String(thumbs > 1 ? sliderValue?.[thumb - 1] : sliderValue)"
+      :disabled="!props.tooltip"
+      disable-closing-trigger
+    >
+      <SliderThumb :class="ui.thumb({ class: props.ui?.thumb })" data-part="thumb" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
+    </Tooltip>
+  </SliderRoot>
 </template>