@eslamdevui/ui 3.2.0-beta.1 → 3.2.0-beta.2

package/dist/runtime/components/Card.vue

@@ -21,17 +21,17 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.card || {} })
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
-      <slot name="header" />
-    </div>
-
-    <div v-if="!!slots.default" :class="ui.body({ class: props.ui?.body })">
-      <slot />
-    </div>
-
-    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
-      <slot name="footer" />
-    </div>
-  </Primitive>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
+      <slot name="header" />
+    </div>
+
+    <div v-if="!!slots.default" :class="ui.body({ class: props.ui?.body })">
+      <slot />
+    </div>
+
+    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+      <slot name="footer" />
+    </div>
+  </Primitive>
 </template>

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

@@ -3,11 +3,10 @@ import theme from "#build/ui/chat-messages";
 </script>
 
 <script setup>
-import { ref, computed, watch, nextTick, toRef, onMounted } from "vue";
-import { defu } from "defu";
+import { ref, computed, watch, nextTick, onMounted } from "vue";
 import { Presence } from "reka-ui";
 import { useElementBounding, useEventListener, watchThrottled } from "@vueuse/core";
-import { omit } from "@eslamdevui/ui/utils";
+import { omit } from "../utils";
 import { useAppConfig } from "#imports";
 import { tv } from "../utils/tv";
 import UChatMessage from "./ChatMessage.vue";
@@ -30,20 +29,21 @@ const proxySlots = omit(slots, ["default", "indicator", "viewport"]);
 const appConfig = useAppConfig();
 function getValidVariant(variant) {
   const allowed = ["solid", "outline", "soft", "subtle", "naked"];
-  return allowed.includes(variant) ? variant : "soft";
+  if (allowed.includes(variant)) {
+    return variant;
+  }
+  return "soft";
 }
-const userProps = toRef(
-  () => defu(
-    { ...props.user, variant: getValidVariant(props.user?.variant) },
-    { side: "right", variant: "soft" }
-  )
-);
-const assistantProps = toRef(
-  () => defu(
-    { ...props.assistant, variant: getValidVariant(props.assistant?.variant) },
-    { side: "left", variant: "naked" }
-  )
-);
+const userProps = computed(() => ({
+  ...props.user,
+  variant: getValidVariant(props.user?.variant ?? void 0),
+  side: props.user?.side ?? "right"
+}));
+const assistantProps = computed(() => ({
+  ...props.assistant,
+  variant: getValidVariant(props.assistant?.variant ?? void 0) === "soft" ? "naked" : getValidVariant(props.assistant?.variant ?? void 0),
+  side: props.assistant?.side ?? "left"
+}));
 const ui = computed(
   () => tv({ extend: tv(theme), ...appConfig.ui?.chatMessages || {} })({
     compact: props.compact
@@ -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/ChatMessages.vue.d.ts

@@ -1,8 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
-import type { ButtonProps, ComponentConfig } from '@eslamdevui/ui';
+import type { ButtonProps, ComponentConfig, ChatMessageProps } from '../types';
 import type { Message, UseChatHelpers } from '@ai-sdk/vue';
 import theme from '#build/ui/chat-messages';
-import type { ChatMessageProps } from '../types';
 type ChatMessages = ComponentConfig<typeof theme, AppConfig, 'chatMessages'>;
 export interface ChatMessagesProps {
     messages?: Message[];

package/dist/runtime/components/ChatPrompt.vue

@@ -6,18 +6,17 @@ import theme from "#build/ui/chat-prompt";
 import { computed, useTemplateRef } from "vue";
 import { Primitive, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
-import { omit } from "@eslamdevui/ui/utils";
 import { useAppConfig } from "#imports";
 import { useLocalePro } from "../composables/useLocalePro";
-import { transformUI } from "../utils";
+import { transformUI, omit } from "../utils";
 import { tv } from "../utils/tv";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "form" },
   placeholder: { type: String, required: false },
-  autofocus: { type: null, required: false, default: true },
-  autoresize: { type: null, required: false, default: true },
-  rows: { type: null, required: false, default: 1 },
+  autofocus: { type: Boolean, required: false, default: true },
+  autoresize: { type: Boolean, required: false, default: true },
+  rows: { type: Number, required: false, default: 1 },
   variant: { type: null, required: false },
   error: { type: Error, required: false },
   class: { type: null, required: false },
@@ -48,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/ChatPrompt.vue.d.ts

@@ -1,5 +1,5 @@
 import type { AppConfig } from '@nuxt/schema';
-import type { TextareaProps, TextareaSlots, ComponentConfig } from '@eslamdevui/ui';
+import type { TextareaProps, TextareaSlots, ComponentConfig } from '../types';
 import theme from '#build/ui/chat-prompt';
 type ChatPrompt = ComponentConfig<typeof theme, AppConfig, 'chatPrompt', 'ui'>;
 export interface ChatPromptProps extends /** @vue-ignore */ Pick<TextareaProps, 'autofocusDelay' | 'autoresizeDelay' | 'maxrows' | 'icon' | 'avatar' | 'loading' | 'loadingIcon'> {
@@ -48,9 +48,9 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatPrompt
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     as: any;
-    autofocus: TextareaProps["autofocus"];
-    autoresize: TextareaProps["autoresize"];
-    rows: TextareaProps["rows"];
+    autofocus: boolean;
+    autoresize: boolean;
+    rows: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPromptSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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>