@eslamdevui/ui 3.2.0-beta.2 → 3.2.0

package/dist/runtime/components/InputMenu.vue

@@ -207,167 +207,167 @@ defineExpose({
 </script>
 
 <template>
-  <DefineCreateItemTemplate>
-    <ComboboxGroup :class="ui.group({ class: props.ui?.group })">
-      <ComboboxItem
-        :class="ui.item({ class: props.ui?.item })"
-        :value="searchTerm"
-        @select.prevent="emits('create', searchTerm)"
-      >
-        <span :class="ui.itemLabel({ class: props.ui?.itemLabel })">
-          <slot name="create-item-label" :item="searchTerm">
-            {{ t("inputMenu.create", { label: searchTerm }) }}
-          </slot>
-        </span>
-      </ComboboxItem>
-    </ComboboxGroup>
-  </DefineCreateItemTemplate>
-
-  <ComboboxRoot
-    :id="id"
-    v-slot="{ modelValue, open }"
-    v-bind="rootProps"
-    :name="name"
-    :disabled="disabled"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :as-child="!!multiple"
-    ignore-filter
-    @update:model-value="onUpdate"
-    @update:open="onUpdateOpen"
-    @keydown.enter="$event.preventDefault()"
-  >
-    <ComboboxAnchor :as-child="!multiple" :class="ui.base({ class: props.ui?.base })">
-      <TagsInputRoot
-        v-if="multiple"
-        v-slot="{ modelValue: tags }"
-        :model-value="modelValue"
-        :disabled="disabled"
-        :required="required"
-        delimiter=""
-        as-child
-        @blur="onBlur"
-        @focus="onFocus"
-        @remove-tag="onRemoveTag"
-      >
-        <TagsInputItem v-for="(item, index) in tags" :key="index" :value="item" :class="ui.tagsItem({ class: [props.ui?.tagsItem, isInputItem(item) && item.ui?.tagsItem] })">
-          <TagsInputItemText :class="ui.tagsItemText({ class: [props.ui?.tagsItemText, isInputItem(item) && item.ui?.tagsItemText] })">
-            <slot name="tags-item-text" :item="item" :index="index">
-              {{ displayValue(item) }}
-            </slot>
-          </TagsInputItemText>
-
-          <TagsInputItemDelete :class="ui.tagsItemDelete({ class: [props.ui?.tagsItemDelete, isInputItem(item) && item.ui?.tagsItemDelete] })" :disabled="disabled">
-            <slot name="tags-item-delete" :item="item" :index="index">
-              <UIcon :name="deleteIcon || appConfig.ui.icons.close" :class="ui.tagsItemDeleteIcon({ class: [props.ui?.tagsItemDeleteIcon, isInputItem(item) && item.ui?.tagsItemDeleteIcon] })" />
-            </slot>
-          </TagsInputItemDelete>
-        </TagsInputItem>
-
-        <ComboboxInput v-model="searchTerm" as-child>
-          <TagsInputInput
-            ref="inputRef"
-            v-bind="{ ...$attrs, ...ariaAttrs }"
-            :placeholder="placeholder"
-            :class="ui.tagsInput({ class: props.ui?.tagsInput })"
-            @keydown.enter.prevent
-          />
-        </ComboboxInput>
-      </TagsInputRoot>
-
-      <ComboboxInput
-        v-else
-        ref="inputRef"
-        :display-value="displayValue"
-        v-bind="{ ...$attrs, ...ariaAttrs }"
-        :type="type"
-        :placeholder="placeholder"
-        :required="required"
-        @blur="onBlur"
-        @focus="onFocus"
-        @update:model-value="searchTerm = $event"
-      />
-
-      <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-        <slot name="leading" :model-value="modelValue" :open="open" :ui="ui">
-          <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-          <UAvatar v-else-if="!!avatar" :size="props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
-        </slot>
-      </span>
-
-      <ComboboxTrigger v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
-        <slot name="trailing" :model-value="modelValue" :open="open" :ui="ui">
-          <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
-        </slot>
-      </ComboboxTrigger>
-    </ComboboxAnchor>
-
-    <ComboboxPortal v-bind="portalProps">
-      <ComboboxContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
-        <slot name="content-top" />
-
-        <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })">
-          <slot name="empty" :search-term="searchTerm">
-            {{ searchTerm ? t("inputMenu.noMatch", { searchTerm }) : t("inputMenu.noData") }}
-          </slot>
-        </ComboboxEmpty>
-
-        <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
-          <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
-
-          <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
-            <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-              <ComboboxLabel v-if="isInputItem(item) && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
-                {{ get(item, props.labelKey) }}
-              </ComboboxLabel>
-
-              <ComboboxSeparator v-else-if="isInputItem(item) && item.type === 'separator'" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })" />
-
-              <ComboboxItem
-                v-else
-                :class="ui.item({ class: [props.ui?.item, isInputItem(item) && item.ui?.item, isInputItem(item) && item.class] })"
-                :disabled="isInputItem(item) && item.disabled"
-                :value="props.valueKey && isInputItem(item) ? get(item, props.valueKey) : item"
-                @select="onSelect($event, item)"
-              >
-                <slot name="item" :item="item" :index="index">
-                  <slot name="item-leading" :item="item" :index="index">
-                    <UIcon v-if="isInputItem(item) && item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
-                    <UAvatar v-else-if="isInputItem(item) && item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
-                    <UChip
-                      v-else-if="isInputItem(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] })"
-                    />
-                  </slot>
-
-                  <span :class="ui.itemLabel({ class: [props.ui?.itemLabel, isInputItem(item) && item.ui?.itemLabel] })">
-                    <slot name="item-label" :item="item" :index="index">
-                      {{ isInputItem(item) ? get(item, props.labelKey) : item }}
-                    </slot>
-                  </span>
-
-                  <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isInputItem(item) && item.ui?.itemTrailing] })">
-                    <slot name="item-trailing" :item="item" :index="index" />
-
-                    <ComboboxItemIndicator as-child>
-                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isInputItem(item) && item.ui?.itemTrailingIcon] })" />
-                    </ComboboxItemIndicator>
-                  </span>
-                </slot>
-              </ComboboxItem>
-            </template>
-          </ComboboxGroup>
-
-          <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
-        </div>
-
-        <slot name="content-bottom" />
-
-        <ComboboxArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
-      </ComboboxContent>
-    </ComboboxPortal>
-  </ComboboxRoot>
+  <DefineCreateItemTemplate>
+    <ComboboxGroup :class="ui.group({ class: props.ui?.group })">
+      <ComboboxItem
+        :class="ui.item({ class: props.ui?.item })"
+        :value="searchTerm"
+        @select.prevent="emits('create', searchTerm)"
+      >
+        <span :class="ui.itemLabel({ class: props.ui?.itemLabel })">
+          <slot name="create-item-label" :item="searchTerm">
+            {{ t("inputMenu.create", { label: searchTerm }) }}
+          </slot>
+        </span>
+      </ComboboxItem>
+    </ComboboxGroup>
+  </DefineCreateItemTemplate>
+
+  <ComboboxRoot
+    :id="id"
+    v-slot="{ modelValue, open }"
+    v-bind="rootProps"
+    :name="name"
+    :disabled="disabled"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :as-child="!!multiple"
+    ignore-filter
+    @update:model-value="onUpdate"
+    @update:open="onUpdateOpen"
+    @keydown.enter="$event.preventDefault()"
+  >
+    <ComboboxAnchor :as-child="!multiple" :class="ui.base({ class: props.ui?.base })">
+      <TagsInputRoot
+        v-if="multiple"
+        v-slot="{ modelValue: tags }"
+        :model-value="modelValue"
+        :disabled="disabled"
+        :required="required"
+        delimiter=""
+        as-child
+        @blur="onBlur"
+        @focus="onFocus"
+        @remove-tag="onRemoveTag"
+      >
+        <TagsInputItem v-for="(item, index) in tags" :key="index" :value="item" :class="ui.tagsItem({ class: [props.ui?.tagsItem, isInputItem(item) && item.ui?.tagsItem] })">
+          <TagsInputItemText :class="ui.tagsItemText({ class: [props.ui?.tagsItemText, isInputItem(item) && item.ui?.tagsItemText] })">
+            <slot name="tags-item-text" :item="item" :index="index">
+              {{ displayValue(item) }}
+            </slot>
+          </TagsInputItemText>
+
+          <TagsInputItemDelete :class="ui.tagsItemDelete({ class: [props.ui?.tagsItemDelete, isInputItem(item) && item.ui?.tagsItemDelete] })" :disabled="disabled">
+            <slot name="tags-item-delete" :item="item" :index="index">
+              <UIcon :name="deleteIcon || appConfig.ui.icons.close" :class="ui.tagsItemDeleteIcon({ class: [props.ui?.tagsItemDeleteIcon, isInputItem(item) && item.ui?.tagsItemDeleteIcon] })" />
+            </slot>
+          </TagsInputItemDelete>
+        </TagsInputItem>
+
+        <ComboboxInput v-model="searchTerm" as-child>
+          <TagsInputInput
+            ref="inputRef"
+            v-bind="{ ...$attrs, ...ariaAttrs }"
+            :placeholder="placeholder"
+            :class="ui.tagsInput({ class: props.ui?.tagsInput })"
+            @keydown.enter.prevent
+          />
+        </ComboboxInput>
+      </TagsInputRoot>
+
+      <ComboboxInput
+        v-else
+        ref="inputRef"
+        :display-value="displayValue"
+        v-bind="{ ...$attrs, ...ariaAttrs }"
+        :type="type"
+        :placeholder="placeholder"
+        :required="required"
+        @blur="onBlur"
+        @focus="onFocus"
+        @update:model-value="searchTerm = $event"
+      />
+
+      <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+        <slot name="leading" :model-value="modelValue" :open="open" :ui="ui">
+          <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          <UAvatar v-else-if="!!avatar" :size="props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
+        </slot>
+      </span>
+
+      <ComboboxTrigger v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+        <slot name="trailing" :model-value="modelValue" :open="open" :ui="ui">
+          <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+        </slot>
+      </ComboboxTrigger>
+    </ComboboxAnchor>
+
+    <ComboboxPortal v-bind="portalProps">
+      <ComboboxContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
+        <slot name="content-top" />
+
+        <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })">
+          <slot name="empty" :search-term="searchTerm">
+            {{ searchTerm ? t("inputMenu.noMatch", { searchTerm }) : t("inputMenu.noData") }}
+          </slot>
+        </ComboboxEmpty>
+
+        <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+          <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
+
+          <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
+            <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+              <ComboboxLabel v-if="isInputItem(item) && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
+                {{ get(item, props.labelKey) }}
+              </ComboboxLabel>
+
+              <ComboboxSeparator v-else-if="isInputItem(item) && item.type === 'separator'" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })" />
+
+              <ComboboxItem
+                v-else
+                :class="ui.item({ class: [props.ui?.item, isInputItem(item) && item.ui?.item, isInputItem(item) && item.class] })"
+                :disabled="isInputItem(item) && item.disabled"
+                :value="props.valueKey && isInputItem(item) ? get(item, props.valueKey) : item"
+                @select="onSelect($event, item)"
+              >
+                <slot name="item" :item="item" :index="index">
+                  <slot name="item-leading" :item="item" :index="index">
+                    <UIcon v-if="isInputItem(item) && item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
+                    <UAvatar v-else-if="isInputItem(item) && item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
+                    <UChip
+                      v-else-if="isInputItem(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] })"
+                    />
+                  </slot>
+
+                  <span :class="ui.itemLabel({ class: [props.ui?.itemLabel, isInputItem(item) && item.ui?.itemLabel] })">
+                    <slot name="item-label" :item="item" :index="index">
+                      {{ isInputItem(item) ? get(item, props.labelKey) : item }}
+                    </slot>
+                  </span>
+
+                  <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isInputItem(item) && item.ui?.itemTrailing] })">
+                    <slot name="item-trailing" :item="item" :index="index" />
+
+                    <ComboboxItemIndicator as-child>
+                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isInputItem(item) && item.ui?.itemTrailingIcon] })" />
+                    </ComboboxItemIndicator>
+                  </span>
+                </slot>
+              </ComboboxItem>
+            </template>
+          </ComboboxGroup>
+
+          <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
+        </div>
+
+        <slot name="content-bottom" />
+
+        <ComboboxArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
+      </ComboboxContent>
+    </ComboboxPortal>
+  </ComboboxRoot>
 </template>

package/dist/runtime/components/InputNumber.vue

@@ -92,53 +92,53 @@ defineExpose({
 </script>
 
 <template>
-  <NumberFieldRoot
-    v-bind="rootProps"
-    :id="id"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :name="name"
-    :disabled="disabled"
-    :locale="locale"
-    @update:model-value="onUpdate"
-  >
-    <NumberFieldInput
-      v-bind="{ ...$attrs, ...ariaAttrs }"
-      ref="inputRef"
-      :placeholder="placeholder"
-      :required="required"
-      :class="ui.base({ class: props.ui?.base })"
-      @blur="onBlur"
-      @focus="emitFormFocus"
-    />
-
-    <div :class="ui.increment({ class: props.ui?.increment })">
-      <NumberFieldIncrement as-child :disabled="disabled || incrementDisabled">
-        <slot name="increment">
-          <UButton
-            :icon="incrementIcon"
-            :color="color"
-            :size="size"
-            variant="link"
-            :aria-label="t('inputNumber.increment')"
-            v-bind="typeof increment === 'object' ? increment : void 0"
-          />
-        </slot>
-      </NumberFieldIncrement>
-    </div>
-
-    <div :class="ui.decrement({ class: props.ui?.decrement })">
-      <NumberFieldDecrement as-child :disabled="disabled || decrementDisabled">
-        <slot name="decrement">
-          <UButton
-            :icon="decrementIcon"
-            :color="color"
-            :size="size"
-            variant="link"
-            :aria-label="t('inputNumber.decrement')"
-            v-bind="typeof decrement === 'object' ? decrement : void 0"
-          />
-        </slot>
-      </NumberFieldDecrement>
-    </div>
-  </NumberFieldRoot>
+  <NumberFieldRoot
+    v-bind="rootProps"
+    :id="id"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :name="name"
+    :disabled="disabled"
+    :locale="locale"
+    @update:model-value="onUpdate"
+  >
+    <NumberFieldInput
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      ref="inputRef"
+      :placeholder="placeholder"
+      :required="required"
+      :class="ui.base({ class: props.ui?.base })"
+      @blur="onBlur"
+      @focus="emitFormFocus"
+    />
+
+    <div :class="ui.increment({ class: props.ui?.increment })">
+      <NumberFieldIncrement as-child :disabled="disabled || incrementDisabled">
+        <slot name="increment">
+          <UButton
+            :icon="incrementIcon"
+            :color="color"
+            :size="size"
+            variant="link"
+            :aria-label="t('inputNumber.increment')"
+            v-bind="typeof increment === 'object' ? increment : void 0"
+          />
+        </slot>
+      </NumberFieldIncrement>
+    </div>
+
+    <div :class="ui.decrement({ class: props.ui?.decrement })">
+      <NumberFieldDecrement as-child :disabled="disabled || decrementDisabled">
+        <slot name="decrement">
+          <UButton
+            :icon="decrementIcon"
+            :color="color"
+            :size="size"
+            variant="link"
+            :aria-label="t('inputNumber.decrement')"
+            v-bind="typeof decrement === 'object' ? decrement : void 0"
+          />
+        </slot>
+      </NumberFieldDecrement>
+    </div>
+  </NumberFieldRoot>
 </template>

package/dist/runtime/components/InputTags.vue

@@ -101,59 +101,59 @@ defineExpose({
 </script>
 
 <template>
-  <TagsInputRoot
-    :id="id"
-    v-slot="{ modelValue: tags }"
-    :model-value="modelValue"
-    :default-value="defaultValue"
-    :class="ui.root({ class: [ui.base({ class: props.ui?.base }), props.ui?.root, props.class] })"
-    v-bind="rootProps"
-    :name="name"
-    :disabled="disabled"
-    @update:model-value="onUpdate"
-    @blur="onBlur"
-    @focus="onFocus"
-  >
-    <TagsInputItem
-      v-for="(item, index) in tags"
-      :key="index"
-      :value="item"
-      :class="ui.item({ class: [props.ui?.item] })"
-    >
-      <TagsInputItemText :class="ui.itemText({ class: [props.ui?.itemText] })">
-        <slot v-if="!!slots['item-text']" name="item-text" :item="item" :index="index" />
-      </TagsInputItemText>
-
-      <TagsInputItemDelete
-        :class="ui.itemDelete({ class: [props.ui?.itemDelete] })"
-        :disabled="disabled"
-      >
-        <slot name="item-delete" :item="item" :index="index">
-          <UIcon :name="deleteIcon || appConfig.ui.icons.close" :class="ui.itemDeleteIcon({ class: [props.ui?.itemDeleteIcon] })" />
-        </slot>
-      </TagsInputItemDelete>
-    </TagsInputItem>
-
-    <TagsInputInput
-      ref="inputRef"
-      v-bind="{ ...$attrs, ...ariaAttrs }"
-      :placeholder="placeholder"
-      :class="ui.input({ class: props.ui?.input })"
-    />
-
-    <slot />
-
-    <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-      <slot name="leading">
-        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-        <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
-      </slot>
-    </span>
-
-    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
-      <slot name="trailing">
-        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
-      </slot>
-    </span>
-  </TagsInputRoot>
+  <TagsInputRoot
+    :id="id"
+    v-slot="{ modelValue: tags }"
+    :model-value="modelValue"
+    :default-value="defaultValue"
+    :class="ui.root({ class: [ui.base({ class: props.ui?.base }), props.ui?.root, props.class] })"
+    v-bind="rootProps"
+    :name="name"
+    :disabled="disabled"
+    @update:model-value="onUpdate"
+    @blur="onBlur"
+    @focus="onFocus"
+  >
+    <TagsInputItem
+      v-for="(item, index) in tags"
+      :key="index"
+      :value="item"
+      :class="ui.item({ class: [props.ui?.item] })"
+    >
+      <TagsInputItemText :class="ui.itemText({ class: [props.ui?.itemText] })">
+        <slot v-if="!!slots['item-text']" name="item-text" :item="item" :index="index" />
+      </TagsInputItemText>
+
+      <TagsInputItemDelete
+        :class="ui.itemDelete({ class: [props.ui?.itemDelete] })"
+        :disabled="disabled"
+      >
+        <slot name="item-delete" :item="item" :index="index">
+          <UIcon :name="deleteIcon || appConfig.ui.icons.close" :class="ui.itemDeleteIcon({ class: [props.ui?.itemDeleteIcon] })" />
+        </slot>
+      </TagsInputItemDelete>
+    </TagsInputItem>
+
+    <TagsInputInput
+      ref="inputRef"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      :placeholder="placeholder"
+      :class="ui.input({ class: props.ui?.input })"
+    />
+
+    <slot />
+
+    <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+      <slot name="leading">
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+      </slot>
+    </span>
+
+    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+      <slot name="trailing">
+        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+      </slot>
+    </span>
+  </TagsInputRoot>
 </template>

package/dist/runtime/components/Kbd.vue

@@ -22,9 +22,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.kbd || {} }))
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ variant, size, class: props.class })">
-    <slot>
-      {{ getKbdKey(value) }}
-    </slot>
-  </Primitive>
+  <Primitive :as="as" :class="ui({ variant, size, class: props.class })">
+    <slot>
+      {{ getKbdKey(value) }}
+    </slot>
+  </Primitive>
 </template>

package/dist/runtime/components/Link.vue

@@ -87,9 +87,9 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
 </script>
 
 <template>
-  <NuxtLink v-slot="{ href, navigate, route: linkRoute, rel, target, isExternal, isActive, isExactActive }" v-bind="nuxtLinkProps" :to="to" custom>
-    <template v-if="custom">
-      <slot
+  <NuxtLink v-slot="{ href, navigate, route: linkRoute, rel, target, isExternal, isActive, isExactActive }" v-bind="nuxtLinkProps" :to="to" custom>
+    <template v-if="custom">
+      <slot
         v-bind="{
   ...$attrs,
   ...exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
@@ -102,11 +102,11 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
   target,
   isExternal,
   active: isLinkActive({ route: linkRoute, isActive, isExactActive })
-}"
-      />
-    </template>
-    <ULinkBase
-      v-else
+}"
+      />
+    </template>
+    <ULinkBase
+      v-else
       v-bind="{
   ...$attrs,
   ...exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
@@ -118,10 +118,10 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
   rel,
   target,
   isExternal
-}"
-      :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
-    >
-      <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
-    </ULinkBase>
-  </NuxtLink>
+}"
+      :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
+    >
+      <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
+    </ULinkBase>
+  </NuxtLink>
 </template>

package/dist/runtime/components/LinkBase.vue

@@ -34,7 +34,7 @@ function onClickWrapper(e) {
 </script>
 
 <template>
-  <Primitive
+  <Primitive
     v-bind="href ? {
   'as': 'a',
   'href': disabled ? void 0 : href,
@@ -47,11 +47,11 @@ function onClickWrapper(e) {
   disabled
 } : {
   as
-}"
-    :rel="rel"
-    :target="target"
-    @click="onClickWrapper"
-  >
-    <slot />
-  </Primitive>
+}"
+    :rel="rel"
+    :target="target"
+    @click="onClickWrapper"
+  >
+    <slot />
+  </Primitive>
 </template>