@eslamdevui/ui 3.2.0-beta.2 → 3.2.0

package/dist/runtime/components/Carousel.vue

@@ -149,62 +149,62 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive
-    :as="as"
-    role="region"
-    aria-roledescription="carousel"
-    tabindex="0"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    @keydown="onKeyDown"
-  >
-    <div ref="emblaRef" :class="ui.viewport({ class: props.ui?.viewport })">
-      <div :class="ui.container({ class: props.ui?.container })">
-        <div
-          v-for="(item, index) in items"
-          :key="index"
-          role="group"
-          aria-roledescription="slide"
-          :class="ui.item({ class: [props.ui?.item, isCarouselItem(item) && item.ui?.item, isCarouselItem(item) && item.class] })"
-        >
-          <slot :item="item" :index="index" />
-        </div>
-      </div>
-    </div>
-
-    <div v-if="arrows || dots" :class="ui.controls({ class: props.ui?.controls })">
-      <div v-if="arrows" :class="ui.arrows({ class: props.ui?.arrows })">
-        <UButton
-          :disabled="!canScrollPrev"
-          :icon="prevIcon"
-          color="neutral"
-          variant="outline"
-          :aria-label="t('carousel.prev')"
-          v-bind="typeof prev === 'object' ? prev : void 0"
-          :class="ui.prev({ class: props.ui?.prev })"
-          @click="scrollPrev"
-        />
-        <UButton
-          :disabled="!canScrollNext"
-          :icon="nextIcon"
-          color="neutral"
-          variant="outline"
-          :aria-label="t('carousel.next')"
-          v-bind="typeof next === 'object' ? next : void 0"
-          :class="ui.next({ class: props.ui?.next })"
-          @click="scrollNext"
-        />
-      </div>
-
-      <div v-if="dots" :class="ui.dots({ class: props.ui?.dots })">
-        <template v-for="(_, index) in scrollSnaps" :key="index">
-          <button
-            :aria-label="t('carousel.goto', { slide: index + 1 })"
-            :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
-            :data-state="selectedIndex === index ? 'active' : void 0"
-            @click="scrollTo(index)"
-          />
-        </template>
-      </div>
-    </div>
-  </Primitive>
+  <Primitive
+    :as="as"
+    role="region"
+    aria-roledescription="carousel"
+    tabindex="0"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    @keydown="onKeyDown"
+  >
+    <div ref="emblaRef" :class="ui.viewport({ class: props.ui?.viewport })">
+      <div :class="ui.container({ class: props.ui?.container })">
+        <div
+          v-for="(item, index) in items"
+          :key="index"
+          role="group"
+          aria-roledescription="slide"
+          :class="ui.item({ class: [props.ui?.item, isCarouselItem(item) && item.ui?.item, isCarouselItem(item) && item.class] })"
+        >
+          <slot :item="item" :index="index" />
+        </div>
+      </div>
+    </div>
+
+    <div v-if="arrows || dots" :class="ui.controls({ class: props.ui?.controls })">
+      <div v-if="arrows" :class="ui.arrows({ class: props.ui?.arrows })">
+        <UButton
+          :disabled="!canScrollPrev"
+          :icon="prevIcon"
+          color="neutral"
+          variant="outline"
+          :aria-label="t('carousel.prev')"
+          v-bind="typeof prev === 'object' ? prev : void 0"
+          :class="ui.prev({ class: props.ui?.prev })"
+          @click="scrollPrev"
+        />
+        <UButton
+          :disabled="!canScrollNext"
+          :icon="nextIcon"
+          color="neutral"
+          variant="outline"
+          :aria-label="t('carousel.next')"
+          v-bind="typeof next === 'object' ? next : void 0"
+          :class="ui.next({ class: props.ui?.next })"
+          @click="scrollNext"
+        />
+      </div>
+
+      <div v-if="dots" :class="ui.dots({ class: props.ui?.dots })">
+        <template v-for="(_, index) in scrollSnaps" :key="index">
+          <button
+            :aria-label="t('carousel.goto', { slide: index + 1 })"
+            :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
+            :data-state="selectedIndex === index ? 'active' : void 0"
+            @click="scrollTo(index)"
+          />
+        </template>
+      </div>
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/ChatMessage.vue

@@ -49,39 +49,39 @@ const handleActionClick = (e, action) => {
 </script>
 
 <template>
-  <Primitive :id="id" :as="as" :data-role="role" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.container({ class: props.ui?.container })">
-      <slot name="leading" :avatar="avatar">
-        <div v-if="hasLeading" :class="ui.leading({ class: props.ui?.leading })">
-          <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-          <UAvatar
-            v-else-if="avatar"
-            :size="ui.leadingAvatar()"
-            v-bind="avatar"
-            :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
-          />
-        </div>
-      </slot>
-      <slot name="content" :content="content">
-        <div :class="ui.content({ class: props.ui?.content })">
-          <slot name="default">
-            {{ content }}
-          </slot>
-        </div>
-      </slot>
-      <slot name="actions" :actions="actions">
-        <div v-if="hasActions" :class="ui.actions({ class: props.ui?.actions })">
-          <UButton
-            v-for="action in actions"
-            :key="action.label"
-            v-bind="action"
-            :size="action.size || 'xs'"
-            :color="action.color || 'neutral'"
-            :variant="action.variant || 'ghost'"
-            @click="(e) => handleActionClick(e, action)"
-          />
-        </div>
-      </slot>
-    </div>
-  </Primitive>
+  <Primitive :id="id" :as="as" :data-role="role" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.container({ class: props.ui?.container })">
+      <slot name="leading" :avatar="avatar">
+        <div v-if="hasLeading" :class="ui.leading({ class: props.ui?.leading })">
+          <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          <UAvatar
+            v-else-if="avatar"
+            :size="ui.leadingAvatar()"
+            v-bind="avatar"
+            :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
+          />
+        </div>
+      </slot>
+      <slot name="content" :content="content">
+        <div :class="ui.content({ class: props.ui?.content })">
+          <slot name="default">
+            {{ content }}
+          </slot>
+        </div>
+      </slot>
+      <slot name="actions" :actions="actions">
+        <div v-if="hasActions" :class="ui.actions({ class: props.ui?.actions })">
+          <UButton
+            v-for="action in actions"
+            :key="action.label"
+            v-bind="action"
+            :size="action.size || 'xs'"
+            :color="action.color || 'neutral'"
+            :variant="action.variant || 'ghost'"
+            @click="(e) => handleActionClick(e, action)"
+          />
+        </div>
+      </slot>
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/ChatMessages.vue

@@ -167,59 +167,59 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    ref="el"
-    :data-status="status"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :style="{ '--last-message-height': `${lastMessageHeight}px` }"
-  >
-    <slot>
-      <UChatMessage
-        v-for="message in messages"
-        :key="message.id"
-        v-bind="{ ...message, ...message.role === 'user' ? userProps : assistantProps }"
-        :ref="(el) => registerMessageRef(message.id, el)"
-        :compact="compact"
-      >
-        <template v-for="(_, name) in proxySlots" #[name]>
-          <slot :name="name" v-bind="{ message }" />
-        </template>
-      </UChatMessage>
-    </slot>
-
-    <UChatMessage
-      v-if="status === 'submitted'"
-      id="indicator"
-      content=""
-      role="assistant"
-      v-bind="{ ...assistantProps, actions: void 0 }"
-      :compact="compact"
-    >
-      <template #content>
-        <div :class="ui.indicator({ class: props.ui?.indicator })">
-          <slot name="indicator">
-            <span />
-            <span />
-            <span />
-          </slot>
-        </div>
-      </template>
-    </UChatMessage>
-
-    <Presence :present="showAutoScroll">
-      <div :data-state="showAutoScroll ? 'open' : 'closed'" :class="ui.viewport({ class: props.ui?.viewport })">
-        <slot name="viewport" :on-click="onAutoScrollClick">
-          <UButton
-            v-if="autoScroll"
-            :icon="autoScrollIcon || appConfig.ui.icons.arrowDown"
-            color="neutral"
-            variant="outline"
-            v-bind="typeof autoScroll === 'object' ? autoScroll : {}"
-            :class="ui.autoScroll({ class: props.ui?.autoScroll })"
-            @click="onAutoScrollClick"
-          />
-        </slot>
-      </div>
-    </Presence>
-  </div>
+  <div
+    ref="el"
+    :data-status="status"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :style="{ '--last-message-height': `${lastMessageHeight}px` }"
+  >
+    <slot>
+      <UChatMessage
+        v-for="message in messages"
+        :key="message.id"
+        v-bind="{ ...message, ...message.role === 'user' ? userProps : assistantProps }"
+        :ref="(el) => registerMessageRef(message.id, el)"
+        :compact="compact"
+      >
+        <template v-for="(_, name) in proxySlots" #[name]>
+          <slot :name="name" v-bind="{ message }" />
+        </template>
+      </UChatMessage>
+    </slot>
+
+    <UChatMessage
+      v-if="status === 'submitted'"
+      id="indicator"
+      content=""
+      role="assistant"
+      v-bind="{ ...assistantProps, actions: void 0 }"
+      :compact="compact"
+    >
+      <template #content>
+        <div :class="ui.indicator({ class: props.ui?.indicator })">
+          <slot name="indicator">
+            <span />
+            <span />
+            <span />
+          </slot>
+        </div>
+      </template>
+    </UChatMessage>
+
+    <Presence :present="showAutoScroll">
+      <div :data-state="showAutoScroll ? 'open' : 'closed'" :class="ui.viewport({ class: props.ui?.viewport })">
+        <slot name="viewport" :on-click="onAutoScrollClick">
+          <UButton
+            v-if="autoScroll"
+            :icon="autoScrollIcon || appConfig.ui.icons.arrowDown"
+            color="neutral"
+            variant="outline"
+            v-bind="typeof autoScroll === 'object' ? autoScroll : {}"
+            :class="ui.autoScroll({ class: props.ui?.autoScroll })"
+            @click="onAutoScrollClick"
+          />
+        </slot>
+      </div>
+    </Presence>
+  </div>
 </template>

package/dist/runtime/components/ChatPrompt.vue

@@ -47,30 +47,30 @@ defineExpose({ textareaRef: textarea.value?.textareaRef });
 </script>
 
 <template>
-  <Primitive :as="as" :class="uiPro.root({ class: [props.ui?.root, props.class] })" @submit.prevent="submit">
-    <div v-if="!!slots.header" :class="uiPro.header({ class: props.ui?.header })">
-      <slot name="header" />
-    </div>
-
-    <UTextarea
-      ref="textarea"
-      v-model="model"
-      :placeholder="placeholder || t('chatPrompt.placeholder')"
-      :disabled="Boolean(error)"
-      variant="none"
-      v-bind="{ ...textareaProps, ...$attrs }"
-      :ui="transformUI(omit(uiPro, ['root', 'body', 'header', 'footer']), props.ui)"
-      :class="uiPro.body({ class: props.ui?.body })"
-      @keydown.enter.exact.prevent="submit"
-      @keydown.esc="blur"
-    >
-      <template v-for="(_, name) in proxySlots" #[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
-    </UTextarea>
-
-    <div v-if="!!slots.footer" :class="uiPro.footer({ class: props.ui?.footer })">
-      <slot name="footer" />
-    </div>
-  </Primitive>
+  <Primitive :as="as" :class="uiPro.root({ class: [props.ui?.root, props.class] })" @submit.prevent="submit">
+    <div v-if="!!slots.header" :class="uiPro.header({ class: props.ui?.header })">
+      <slot name="header" />
+    </div>
+
+    <UTextarea
+      ref="textarea"
+      v-model="model"
+      :placeholder="placeholder || t('chatPrompt.placeholder')"
+      :disabled="Boolean(error)"
+      variant="none"
+      v-bind="{ ...textareaProps, ...$attrs }"
+      :ui="transformUI(omit(uiPro, ['root', 'body', 'header', 'footer']), props.ui)"
+      :class="uiPro.body({ class: props.ui?.body })"
+      @keydown.enter.exact.prevent="submit"
+      @keydown.esc="blur"
+    >
+      <template v-for="(_, name) in proxySlots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </UTextarea>
+
+    <div v-if="!!slots.footer" :class="uiPro.footer({ class: props.ui?.footer })">
+      <slot name="footer" />
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/ChatPromptSubmit.vue

@@ -61,14 +61,14 @@ const uiPro = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPrompt
 </script>
 
 <template>
-  <UButton
-    :aria-label="t('chatPromptSubmit.label')"
-    v-bind="buttonProps"
-    :class="uiPro.base({ class: [props.ui?.base, props.class] })"
-    :ui="transformUI(uiPro, props.ui)"
-  >
-    <template v-for="(_, name) in slots" #[name]="slotData">
-      <slot :name="name" v-bind="slotData" />
-    </template>
-  </UButton>
+  <UButton
+    :aria-label="t('chatPromptSubmit.label')"
+    v-bind="buttonProps"
+    :class="uiPro.base({ class: [props.ui?.base, props.class] })"
+    :ui="transformUI(uiPro, props.ui)"
+  >
+    <template v-for="(_, name) in slots" #[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+  </UButton>
 </template>

package/dist/runtime/components/Checkbox.vue

@@ -54,37 +54,37 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="!variant || variant === 'list' ? as : Label" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.container({ class: props.ui?.container })">
-      <CheckboxRoot
-        :id="id"
-        v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
-        v-model="modelValue"
-        :name="name"
-        :disabled="disabled"
-        :class="ui.base({ class: props.ui?.base })"
-        @update:model-value="onUpdate"
-      >
-        <template #default="{ modelValue }">
-          <CheckboxIndicator :class="ui.indicator({ class: props.ui?.indicator })">
-            <UIcon v-if="modelValue === 'indeterminate'" :name="indeterminateIcon || appConfig.ui.icons.minus" :class="ui.icon({ class: props.ui?.icon })" />
-            <UIcon v-else :name="icon || appConfig.ui.icons.check" :class="ui.icon({ class: props.ui?.icon })" />
-          </CheckboxIndicator>
-        </template>
-      </CheckboxRoot>
-    </div>
-
-    <div v-if="label || !!slots.label || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <component :is="!variant || variant === 'list' ? Label : 'p'" v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
-        <slot name="label" :label="label">
-          {{ label }}
-        </slot>
-      </component>
-      <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
-        <slot name="description" :description="description">
-          {{ description }}
-        </slot>
-      </p>
-    </div>
-  </Primitive>
+  <Primitive :as="!variant || variant === 'list' ? as : Label" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.container({ class: props.ui?.container })">
+      <CheckboxRoot
+        :id="id"
+        v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+        v-model="modelValue"
+        :name="name"
+        :disabled="disabled"
+        :class="ui.base({ class: props.ui?.base })"
+        @update:model-value="onUpdate"
+      >
+        <template #default="{ modelValue }">
+          <CheckboxIndicator :class="ui.indicator({ class: props.ui?.indicator })">
+            <UIcon v-if="modelValue === 'indeterminate'" :name="indeterminateIcon || appConfig.ui.icons.minus" :class="ui.icon({ class: props.ui?.icon })" />
+            <UIcon v-else :name="icon || appConfig.ui.icons.check" :class="ui.icon({ class: props.ui?.icon })" />
+          </CheckboxIndicator>
+        </template>
+      </CheckboxRoot>
+    </div>
+
+    <div v-if="label || !!slots.label || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <component :is="!variant || variant === 'list' ? Label : 'p'" v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
+        <slot name="label" :label="label">
+          {{ label }}
+        </slot>
+      </component>
+      <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+        <slot name="description" :description="description">
+          {{ description }}
+        </slot>
+      </p>
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/CheckboxGroup.vue

@@ -89,36 +89,36 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <CheckboxGroupRoot
-    :id="id"
-    v-bind="rootProps"
-    :name="name"
-    :disabled="disabled"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    @update:model-value="onUpdate"
-  >
-    <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
-      <legend v-if="legend || !!slots.legend" :class="ui.legend({ class: props.ui?.legend })">
-        <slot name="legend">
-          {{ legend }}
-        </slot>
-      </legend>
-
-      <UCheckbox
-        v-for="item in normalizedItems"
-        :key="item.value"
-        v-bind="{ ...item, ...checkboxProps }"
-        :color="color"
-        :size="size"
-        :name="name"
-        :disabled="item.disabled || disabled"
-        :ui="{ ...props.ui ? omit(props.ui, ['root']) : void 0, ...item.ui || {} }"
-        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
-      >
-        <template v-for="(_, name) in proxySlots" #[name]>
-          <slot :name="name" :item="item" />
-        </template>
-      </UCheckbox>
-    </fieldset>
-  </CheckboxGroupRoot>
+  <CheckboxGroupRoot
+    :id="id"
+    v-bind="rootProps"
+    :name="name"
+    :disabled="disabled"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    @update:model-value="onUpdate"
+  >
+    <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
+      <legend v-if="legend || !!slots.legend" :class="ui.legend({ class: props.ui?.legend })">
+        <slot name="legend">
+          {{ legend }}
+        </slot>
+      </legend>
+
+      <UCheckbox
+        v-for="item in normalizedItems"
+        :key="item.value"
+        v-bind="{ ...item, ...checkboxProps }"
+        :color="color"
+        :size="size"
+        :name="name"
+        :disabled="item.disabled || disabled"
+        :ui="{ ...props.ui ? omit(props.ui, ['root']) : void 0, ...item.ui || {} }"
+        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
+      >
+        <template v-for="(_, name) in proxySlots" #[name]>
+          <slot :name="name" :item="item" />
+        </template>
+      </UCheckbox>
+    </fieldset>
+  </CheckboxGroupRoot>
 </template>

package/dist/runtime/components/Chip.vue

@@ -34,15 +34,15 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chip || {} })
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <Slot v-bind="$attrs">
-      <slot />
-    </Slot>
-
-    <span v-if="show" :class="ui.base({ class: props.ui?.base })">
-      <slot name="content">
-        {{ text }}
-      </slot>
-    </span>
-  </Primitive>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <Slot v-bind="$attrs">
+      <slot />
+    </Slot>
+
+    <span v-if="show" :class="ui.base({ class: props.ui?.base })">
+      <slot name="content">
+        {{ text }}
+      </slot>
+    </span>
+  </Primitive>
 </template>

package/dist/runtime/components/Collapsible.vue

@@ -25,13 +25,13 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.collapsible |
 </script>
 
 <template>
-  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <CollapsibleTrigger v-if="!!slots.default" as-child>
-      <slot :open="open" />
-    </CollapsibleTrigger>
-
-    <CollapsibleContent :class="ui.content({ class: props.ui?.content })">
-      <slot name="content" />
-    </CollapsibleContent>
-  </CollapsibleRoot>
+  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <CollapsibleTrigger v-if="!!slots.default" as-child>
+      <slot :open="open" />
+    </CollapsibleTrigger>
+
+    <CollapsibleContent :class="ui.content({ class: props.ui?.content })">
+      <slot name="content" />
+    </CollapsibleContent>
+  </CollapsibleRoot>
 </template>