@byyuurin/ui 0.5.1 → 0.5.2

package/dist/runtime/components/Select.vue

@@ -226,11 +226,11 @@ defineExpose({
   <DefineCreateItemTemplate>
     <ComboboxItem
       :value="searchTerm"
-      :class="ui.item({ class: props.ui?.item })"
       data-part="item"
+      :class="ui.item({ class: props.ui?.item })"
       @select="onCreate"
     >
-      <span :class="ui.itemLabel({ class: props.ui?.itemLabel })" data-part="itemLabel">
+      <span data-part="itemLabel" :class="ui.itemLabel({ class: props.ui?.itemLabel })">
         <slot name="create-item-label" :item="searchTerm">
           {{ t("select.create", { label: searchTerm }) }}
         </slot>
@@ -250,38 +250,38 @@ defineExpose({
     @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">
+      <ComboboxTrigger ref="triggerRef" tabindex="0" data-part="base" :class="ui.base({ class: [props.ui?.base, props.class] })">
+        <span v-if="isLeading || !!props.avatar || slots.leading" data-part="leading" :class="ui.leading({ class: props.ui?.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"
+              :class="ui.leadingIcon({ class: props.ui?.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"
+              :class="ui.leadingAvatar({ class: props.ui?.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">
+            <span v-if="displayedModelValue != null" data-part="value" :class="ui.value({ class: props.ui?.value })">
               {{ displayedModelValue }}
             </span>
-            <span v-else :class="ui.placeholder({ class: props.ui?.placeholder })" data-part="placeholder">
+            <span v-else data-part="placeholder" :class="ui.placeholder({ class: props.ui?.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">
+        <span v-if="isTrailing || !!slots.trailing || props.clear" data-part="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
           <slot name="trailing" :model-value="modelValue" :open="open" :ui="ui">
             <ComboboxCancel v-if="props.clear && !isModelValueEmpty(modelValue)" as-child>
               <Button
@@ -291,20 +291,20 @@ defineExpose({
                 color="neutral"
                 tabindex="-1"
                 v-bind="clearProps"
-                :class="ui.trailingClear({ class: props.ui?.trailingClear })"
                 data-part="trailingClear"
+                :class="ui.trailingClear({ class: props.ui?.trailingClear })"
                 @click.stop="onClear"
               />
             </ComboboxCancel>
-            <Icon v-else-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" data-part="trailingIcon" />
+            <Icon v-else-if="trailingIconName" :name="trailingIconName" data-part="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.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">
+      <ComboboxContent v-bind="contentProps" data-part="content" :class="ui.content({ class: props.ui?.content })">
+        <FocusScope trapped data-part="focusScope" :class="ui.focusScope({ class: props.ui?.focusScope })">
           <slot name="content-top"></slot>
 
           <ComboboxInput v-model="searchTerm" :display-value="() => searchTerm" as-child>
@@ -313,45 +313,45 @@ defineExpose({
               autocomplete="off"
               :size="props.size"
               v-bind="searchInputProps"
-              :class="ui.input({ class: props.ui?.input })"
               data-part="input"
+              :class="ui.input({ class: props.ui?.input })"
               @change.stop
             />
           </ComboboxInput>
 
-          <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })" data-part="empty">
+          <ComboboxEmpty data-part="empty" :class="ui.empty({ class: props.ui?.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">
+          <div role="presentation" data-part="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
+            <ComboboxGroup v-if="createItem && createItemPosition === 'top'" data-part="group" :class="ui.group({ class: props.ui?.group })">
               <ReuseCreateItemTemplate />
             </ComboboxGroup>
 
-            <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })" data-part="group">
+            <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" data-part="group" :class="ui.group({ class: props.ui?.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"
+                  :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })"
                 >
                   {{ 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"
+                  :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })"
                 />
 
                 <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"
+                  :class="ui.item({ class: [props.ui?.item, ...isSelectItem(item) ? [item.ui?.item, item.class] : []] })"
                   @select="onSelect($event, item)"
                 >
                   <slot name="item" :item="item" :index="index" :ui="ui">
@@ -359,15 +359,15 @@ defineExpose({
                       <Icon
                         v-if="isSelectItem(item) && item.icon"
                         :name="item.icon"
-                        :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })"
                         data-part="itemLeadingIcon"
+                        :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.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"
+                        :class="ui.itemLeadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.itemLeadingAvatar] })"
                       />
                       <Chip
                         v-else-if="isSelectItem(item) && item.chip"
@@ -375,13 +375,13 @@ defineExpose({
                         inset
                         standalone
                         v-bind="item.chip"
-                        :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })"
                         data-part="itemLeadingChip"
+                        :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.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">
+                    <span data-part="itemWrapper" :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, isSelectItem(item) && item.ui?.itemWrapper] })">
+                      <span data-part="itemLabel" :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })">
                         <slot name="item-label" :item="item" :index="index">
                           {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
                         </slot>
@@ -389,8 +389,8 @@ defineExpose({
 
                       <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"
+                        :class="ui.itemDescription({ class: [props.ui?.itemDescription, isSelectItem(item) && item.ui?.itemDescription] })"
                       >
                         <slot name="item-description" :item="item" :index="index">
                           {{ isSelectItem(item) ? get(item, props.descriptionKey) : "" }}
@@ -398,11 +398,11 @@ defineExpose({
                       </span>
                     </span>
 
-                    <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })" data-part="itemTrailing">
+                    <span data-part="itemTrailing" :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.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" />
+                        <Icon :name="props.selectedIcon || appConfig.ui.icons.check" data-part="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
                       </ComboboxItemIndicator>
                     </span>
                   </slot>
@@ -410,7 +410,7 @@ defineExpose({
               </template>
             </ComboboxGroup>
 
-            <ComboboxGroup v-if="createItem && createItemPosition === 'bottom'" :class="ui.group({ class: props.ui?.group })" data-part="group">
+            <ComboboxGroup v-if="createItem && createItemPosition === 'bottom'" data-part="group" :class="ui.group({ class: props.ui?.group })">
               <ReuseCreateItemTemplate />
             </ComboboxGroup>
           </div>
@@ -418,7 +418,7 @@ defineExpose({
           <slot name="content-bottom"></slot>
         </FocusScope>
 
-        <ComboboxArrow v-if="props.arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" data-part="arrow" />
+        <ComboboxArrow v-if="props.arrow" v-bind="arrowProps" data-part="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
       </ComboboxContent>
     </ComboboxPortal>
   </ComboboxRoot>

package/dist/runtime/components/Separator.vue

@@ -35,34 +35,34 @@ const ui = computed(() => {
 </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>
+  <Separator v-bind="rootProps" data-part="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-part="border" :class="ui.border({ class: props.ui?.border, start: props.align === 'start' })"></div>
 
     <template v-if="props.label || props.icon || props.avatar || !!slots.default">
-      <div :class="ui.container({ class: props.ui?.container })" data-part="container">
+      <div data-part="container" :class="ui.container({ class: props.ui?.container })">
         <slot :ui="ui">
           <span
             v-if="props.label"
-            :class="ui.label({ class: props.ui?.label })"
             data-part="label"
+            :class="ui.label({ class: props.ui?.label })"
           >{{ props.label }}</span>
           <Icon
             v-else-if="props.icon"
             :name="props.icon"
-            :class="ui.icon({ class: props.ui?.icon })"
             data-part="icon"
+            :class="ui.icon({ class: props.ui?.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"
+            :class="ui.avatar({ class: props.ui?.avatar })"
           />
         </slot>
       </div>
 
-      <div :class="ui.border({ class: props.ui?.border, end: props.align === 'end' })" data-part="border"></div>
+      <div data-part="border" :class="ui.border({ class: props.ui?.border, end: props.align === 'end' })"></div>
     </template>
   </Separator>
 </template>

package/dist/runtime/components/Skeleton.vue

@@ -26,8 +26,8 @@ const ui = computed(() => {
     aria-label="loading"
     aria-live="polite"
     role="alert"
-    :class="ui.base({ class: props.class })"
     data-part="base"
+    :class="ui.base({ class: props.class })"
   >
     <slot></slot>
   </Primitive>

package/dist/runtime/components/Slider.vue

@@ -71,14 +71,14 @@ function onChange(value) {
     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"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @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 data-part="track" :class="ui.track({ class: props.ui?.track })">
+      <SliderRange data-part="range" :class="ui.range({ class: props.ui?.range })" />
     </SliderTrack>
 
     <Tooltip
@@ -89,7 +89,7 @@ function onChange(value) {
       :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}`" />
+      <SliderThumb :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" data-part="thumb" :class="ui.thumb({ class: props.ui?.thumb })" />
     </Tooltip>
   </SliderRoot>
 </template>

package/dist/runtime/components/Stepper.vue

@@ -63,21 +63,21 @@ defineExpose({
 </script>
 
 <template>
-  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <div :class="ui.header({ class: props.ui?.header })" data-part="header">
+  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" data-part="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-part="header" :class="ui.header({ class: props.ui?.header })">
       <StepperItem
         v-for="(item, count) in props.items"
         :key="item.value ?? count"
         :step="count"
         :disabled="item.disabled || props.disabled"
-        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
         data-part="item"
+        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
       >
-        <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })" data-part="container">
-          <StepperTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })" data-part="trigger">
-            <StepperIndicator :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" data-part="indicator">
+        <div data-part="container" :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
+          <StepperTrigger data-part="trigger" :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })">
+            <StepperIndicator data-part="indicator" :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })">
               <slot name="indicator" :item="item" :ui="ui">
-                <Icon v-if="item.icon" :name="item.icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" data-part="icon" />
+                <Icon v-if="item.icon" :name="item.icon" data-part="icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" />
                 <template v-else>
                   {{ count + 1 }}
                 </template>
@@ -87,20 +87,20 @@ defineExpose({
 
           <StepperSeparator
             v-if="count < props.items.length - 1"
-            :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
             data-part="separator"
+            :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
           />
         </div>
 
-        <div :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })" data-part="wrapper">
+        <div data-part="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
           <slot :name="item.slot ? `${item.slot}-wrapper` : 'wrapper'" :item="item">
-            <StepperTitle v-if="item.title || !!slots[item.slot ? `${item.slot}-title` : 'title']" as="div" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })" data-part="title">
+            <StepperTitle v-if="item.title || !!slots[item.slot ? `${item.slot}-title` : 'title']" as="div" data-part="title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
               <slot :name="item.slot ? `${item.slot}-title` : 'title'" :item="item">
                 {{ item.title }}
               </slot>
             </StepperTitle>
 
-            <StepperDescription v-if="item.description || !!slots[item.slot ? `${item.slot}-description` : 'description']" as="div" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })" data-part="description">
+            <StepperDescription v-if="item.description || !!slots[item.slot ? `${item.slot}-description` : 'description']" as="div" data-part="description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
               <slot :name="item.slot ? `${item.slot}-description` : 'description'" :item="item">
                 {{ item.description }}
               </slot>
@@ -110,7 +110,7 @@ defineExpose({
       </StepperItem>
     </div>
 
-    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot && !!slots[currentStep.slot]" :class="ui.content({ class: props.ui?.content })" data-part="content">
+    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot && !!slots[currentStep.slot]" data-part="content" :class="ui.content({ class: props.ui?.content })">
       <slot :name="currentStep?.slot || 'content'" :item="currentStep">
         {{ currentStep?.content }}
       </slot>

package/dist/runtime/components/Switch.vue

@@ -57,30 +57,30 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <div :class="ui.container({ class: props.ui?.container })" data-part="container">
+  <Primitive :as="props.as" data-part="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-part="container" :class="ui.container({ class: props.ui?.container })">
       <SwitchRoot
         v-bind="{ id, ...rootProps, ...ariaAttrs, name }"
         v-model="modelValue"
         :disabled="disabled || props.loading"
-        :class="ui.base({ class: props.ui?.base })"
         data-part="base"
+        :class="ui.base({ class: props.ui?.base })"
         @update:model-value="onUpdate"
       >
-        <SwitchThumb :class="ui.thumb({ class: props.ui?.thumb })" data-part="thumb">
-          <Icon v-if="props.loading" :name="props.loadingIcon || appConfig.ui.icons.loading" :class="ui.icon({ class: props.ui?.icon, checked: true, unchecked: true })" data-part="icon" />
+        <SwitchThumb data-part="thumb" :class="ui.thumb({ class: props.ui?.thumb })">
+          <Icon v-if="props.loading" :name="props.loadingIcon || appConfig.ui.icons.loading" data-part="icon" :class="ui.icon({ class: props.ui?.icon, checked: true, unchecked: true })" />
           <template v-else>
-            <Icon v-if="props.checkedIcon" :name="props.checkedIcon" :class="ui.icon({ class: props.ui?.icon, checked: true })" data-part="icon" />
-            <Icon v-if="props.uncheckedIcon" :name="props.uncheckedIcon" :class="ui.icon({ class: props.ui?.icon, unchecked: true })" data-part="icon" />
+            <Icon v-if="props.checkedIcon" :name="props.checkedIcon" data-part="icon" :class="ui.icon({ class: props.ui?.icon, checked: true })" />
+            <Icon v-if="props.uncheckedIcon" :name="props.uncheckedIcon" data-part="icon" :class="ui.icon({ class: props.ui?.icon, unchecked: true })" />
           </template>
         </SwitchThumb>
       </SwitchRoot>
     </div>
-    <div v-if="props.label || !!slots.label || (props.description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
-      <Label v-if="props.label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })" data-part="label">
+    <div v-if="props.label || !!slots.label || (props.description || !!slots.description)" data-part="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <Label v-if="props.label || !!slots.label" :for="id" data-part="label" :class="ui.label({ class: props.ui?.label })">
         <slot name="label" :label="props.label">{{ props.label }}</slot>
       </Label>
-      <p v-if="props.description || !!slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
+      <p v-if="props.description || !!slots.description" data-part="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description" :description="props.description">
           {{ props.description }}
         </slot>

package/dist/runtime/components/Table.vue

@@ -302,16 +302,16 @@ defineExpose({
     <tr
       :role="props.onSelect ? 'button' : void 0"
       :tabindex="props.onSelect ? 0 : void 0"
+      :data-selected="row.getIsSelected()"
+      :data-selectable="!!props.onSelect || !!props.onHover || !!props.onContextmenu"
+      :data-expanded="row.getIsExpanded()"
+      data-part="tr"
       :class="ui.tr({
   class: [
     props.ui?.tr,
     resolveValue(tableApi.options.meta?.class?.tr, row)
   ]
 })"
-      :data-selected="row.getIsSelected()"
-      :data-selectable="!!props.onSelect || !!props.onHover || !!props.onContextmenu"
-      :data-expanded="row.getIsExpanded()"
-      data-part="tr"
       :style="[resolveValue(tableApi.options.meta?.style?.tr, row), style]"
       @click="onRowSelect($event, row)"
       @pointerenter="onRowHover($event, row)"
@@ -323,6 +323,8 @@ defineExpose({
         :key="cell.id"
         :colspan="resolveValue(cell.column.columnDef.meta?.colspan?.td, cell)"
         :rowspan="resolveValue(cell.column.columnDef.meta?.rowspan?.td, cell)"
+        :data-pinned="cell.column.getIsPinned()"
+        data-part="td"
         :class="ui.td({
   class: [
     props.ui?.td,
@@ -330,8 +332,6 @@ defineExpose({
   ],
   pinned: !!cell.column.getIsPinned()
 })"
-        :data-pinned="cell.column.getIsPinned()"
-        data-part="td"
         :style="[
   getColumnStyles(cell.column),
   resolveValue(cell.column.columnDef.meta?.style?.td, cell)
@@ -343,23 +343,23 @@ defineExpose({
       </td>
     </tr>
 
-    <tr v-if="row.getIsExpanded()" :class="ui.tr({ class: props.ui?.tr })" data-part="tr">
-      <td :colspan="row.getAllCells().length" :class="ui.td({ class: props.ui?.td })" data-part="td">
+    <tr v-if="row.getIsExpanded()" data-part="tr" :class="ui.tr({ class: props.ui?.tr })">
+      <td :colspan="row.getAllCells().length" data-part="td" :class="ui.td({ class: props.ui?.td })">
         <slot name="expanded" :row="row"></slot>
       </td>
     </tr>
   </DefineRowTemplate>
 
   <DefineTableTemplate>
-    <table ref="tableRef" :class="ui.base({ class: props.ui?.base })" data-part="base">
-      <caption v-if="caption || !!slots.caption" :class="ui.caption({ class: [props.ui?.caption] })" data-part="caption">
+    <table ref="tableRef" data-part="base" :class="ui.base({ class: props.ui?.base })">
+      <caption v-if="caption || !!slots.caption" data-part="caption" :class="ui.caption({ class: [props.ui?.caption] })">
         <slot name="caption">
           {{ caption }}
         </slot>
       </caption>
 
-      <thead :class="ui.thead({ class: [props.ui?.thead] })" data-part="thead">
-        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })" data-part="tr">
+      <thead data-part="thead" :class="ui.thead({ class: [props.ui?.thead] })">
+        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" data-part="tr" :class="ui.tr({ class: [props.ui?.tr] })">
           <th
             v-for="header in headerGroup.headers"
             :key="header.id"
@@ -367,6 +367,7 @@ defineExpose({
             :scope="header.colSpan > 1 ? 'colgroup' : 'col'"
             :colspan="header.colSpan > 1 ? header.colSpan : void 0"
             :rowspan="header.rowSpan > 1 ? header.rowSpan : void 0"
+            data-part="th"
             :class="ui.th({
   class: [
     props.ui?.th,
@@ -374,7 +375,6 @@ defineExpose({
   ],
   pinned: !!header.column.getIsPinned()
 })"
-            data-part="th"
             :style="[
   getColumnStyles(header.column),
   resolveValue(header.column.columnDef.meta?.style?.th, header)
@@ -386,10 +386,10 @@ defineExpose({
           </th>
         </tr>
 
-        <tr :class="ui.separator({ class: [props.ui?.separator] })" data-part="separator"></tr>
+        <tr data-part="separator" :class="ui.separator({ class: [props.ui?.separator] })"></tr>
       </thead>
 
-      <tbody :class="ui.tbody({ class: [props.ui?.tbody] })" data-part="tbody">
+      <tbody data-part="tbody" :class="ui.tbody({ class: [props.ui?.tbody] })">
         <slot name="body-top"></slot>
 
         <template v-if="rows.length">
@@ -411,13 +411,13 @@ defineExpose({
         </template>
 
         <tr v-else-if="props.loading && !!slots.loading">
-          <td :colspan="tableApi.getAllLeafColumns().length" :class="ui.loading({ class: props.ui?.loading })" data-part="loading">
+          <td :colspan="tableApi.getAllLeafColumns().length" data-part="loading" :class="ui.loading({ class: props.ui?.loading })">
             <slot name="loading"></slot>
           </td>
         </tr>
 
         <tr v-else>
-          <td :colspan="tableApi.getAllLeafColumns().length" :class="ui.empty({ class: props.ui?.empty })" data-part="empty">
+          <td :colspan="tableApi.getAllLeafColumns().length" data-part="empty" :class="ui.empty({ class: props.ui?.empty })">
             <slot name="empty">
               {{ props.empty || t("table.noData") }}
             </slot>
@@ -429,21 +429,22 @@ defineExpose({
 
       <tfoot
         v-if="hasFooter"
-        :class="ui.tfoot({ class: props.ui?.tfoot })"
         data-part="tfoot"
+        :class="ui.tfoot({ class: props.ui?.tfoot })"
         :style="virtualizer ? {
   transform: `translateY(${virtualizer.getTotalSize() - virtualizer.getVirtualItems().length * virtualizerProps.estimateSize}px)`
 } : void 0"
       >
-        <tr :class="ui.separator({ class: props.ui?.separator })" data-part="separator"></tr>
+        <tr data-part="separator" :class="ui.separator({ class: props.ui?.separator })"></tr>
 
-        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" :class="ui.tr({ class: props.ui?.tr })" data-part="tr">
+        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" data-part="tr" :class="ui.tr({ class: props.ui?.tr })">
           <th
             v-for="header in footerGroup.headers"
             :key="header.id"
             :data-pinned="header.column.getIsPinned()"
             :colspan="header.colSpan > 1 ? header.colSpan : void 0"
             :rowspan="header.rowSpan > 1 ? header.rowSpan : void 0"
+            data-part="th"
             :class="ui.th({
   class: [
     props.ui?.th,
@@ -451,7 +452,6 @@ defineExpose({
   ],
   pinned: !!header.column.getIsPinned()
 })"
-            data-part="th"
             :style="[
   getColumnStyles(header.column),
   resolveValue(header.column.columnDef.meta?.style?.th, header)
@@ -466,7 +466,7 @@ defineExpose({
     </table>
   </DefineTableTemplate>
 
-  <Primitive ref="rootRef" :as="props.as" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+  <Primitive ref="rootRef" :as="props.as" v-bind="$attrs" data-part="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div v-if="virtualizer" :style="{ height: `${virtualizer.getTotalSize()}px` }">
       <ReuseTableTemplate />
     </div>

package/dist/runtime/components/Tabs.vue

@@ -49,11 +49,11 @@ defineExpose({
     :default-value="props.defaultValue"
     :orientation="props.orientation"
     :activation-mode="props.activationMode"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
     data-part="root"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
-    <TabsList :class="ui.list({ class: props.ui?.list })" data-part="list">
-      <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" data-part="indicator" />
+    <TabsList data-part="list" :class="ui.list({ class: props.ui?.list })">
+      <TabsIndicator data-part="indicator" :class="ui.indicator({ class: props.ui?.indicator })" />
 
       <slot name="list-leading">
       </slot>
@@ -64,26 +64,26 @@ defineExpose({
         :key="index"
         :value="item.value ?? String(index)"
         :disabled="item.disabled"
-        :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
         data-part="trigger"
+        :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
       >
         <slot name="leading" :item="item" :index="index" :ui="ui">
           <Icon
             v-if="item.icon"
             :name="item.icon"
-            :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })"
             data-part="leadingIcon"
+            :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })"
           />
           <Avatar
             v-else-if="item.avatar"
             :size="item.ui?.leadingAvatarSize || props.ui?.leadingAvatarSize || ui.leadingAvatarSize()"
             v-bind="item.avatar"
-            :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })"
             data-part="leadingAvatar"
+            :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })"
           />
         </slot>
 
-        <span v-if="get(item, props.labelKey) || !!slots.default" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })" data-part="label">
+        <span v-if="get(item, props.labelKey) || !!slots.default" data-part="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
           <slot :item="item" :index="index">{{ get(item, props.labelKey) }}</slot>
         </span>
 
@@ -94,8 +94,8 @@ defineExpose({
             variant="outline"
             :size="item.ui?.trailingBadgeSize || props.ui?.trailingBadgeSize || ui.trailingBadgeSize()"
             v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
-            :class="ui.trailingBadge({ class: [props.ui?.trailingBadge, item.ui?.trailingBadge] })"
             data-part="trailingBadge"
+            :class="ui.trailingBadge({ class: [props.ui?.trailingBadge, item.ui?.trailingBadge] })"
           />
         </slot>
       </TabsTrigger>
@@ -108,8 +108,8 @@ defineExpose({
         v-for="(item, index) of items"
         :key="index"
         :value="item.value ?? String(index)"
-        :class="ui.content({ class: [props.ui?.content, item.ui?.content] })"
         data-part="content"
+        :class="ui.content({ class: [props.ui?.content, item.ui?.content] })"
       >
         <slot :name="item.slot || 'content'" :item="item" :index="index" :ui="ui">
           {{ item.content }}