@eslamdevui/ui 3.2.0-beta.2 → 3.2.1

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/ChatPalette.vue

@@ -0,0 +1,32 @@
+<script>
+import theme from "#build/ui/chat-palette";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive, Slot } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPalette || {} })());
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.content({ class: props.ui?.content })">
+      <Slot compact>
+        <slot />
+      </Slot>
+    </div>
+
+    <Slot v-if="!!slots.prompt" :class="ui.prompt({ class: props.ui?.prompt })">
+      <slot name="prompt" />
+    </Slot>
+  </Primitive>
+</template>

package/dist/runtime/components/ChatPalette.vue.d.ts

@@ -0,0 +1,24 @@
+import theme from '#build/ui/chat-palette';
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../types';
+type ChatPalette = ComponentConfig<typeof theme, AppConfig, 'chatPalette'>;
+export interface ChatPaletteProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    ui?: ChatPalette['slots'];
+}
+export interface ChatPaletteSlots {
+    default(props?: {}): any;
+    prompt(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatPaletteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatPaletteProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPaletteSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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/ChatPrompt.vue.d.ts

@@ -49,8 +49,8 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatPrompt
 }>, {
     as: any;
     autofocus: boolean;
-    autoresize: boolean;
     rows: number;
+    autoresize: boolean;
 }, {}, {}, {}, 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>

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>

package/dist/runtime/components/ColorPicker.vue

@@ -179,36 +179,36 @@ const trackThumbStyle = computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-disabled="disabled ? true : void 0">
-    <div :class="ui.picker({ class: props.ui?.picker })">
-      <div
-        ref="selectorRef"
-        :class="ui.selector({ class: props.ui?.selector })"
-        :style="selectorStyle"
-      >
-        <div :class="ui.selectorBackground({ class: props.ui?.selectorBackground })" data-color-picker-background>
-          <div
-            ref="selectorThumbRef"
-            :class="ui.selectorThumb({ class: props.ui?.selectorThumb })"
-            :style="selectorThumbStyle"
-            :data-disabled="disabled ? true : void 0"
-          />
-        </div>
-      </div>
-      <div
-        ref="trackRef"
-        :class="ui.track({ class: props.ui?.track })"
-        data-color-picker-track
-      >
-        <div
-          ref="trackThumbRef"
-          :class="ui.trackThumb({ class: props.ui?.trackThumb })"
-          :style="trackThumbStyle"
-          :data-disabled="disabled ? true : void 0"
-        />
-      </div>
-    </div>
-  </Primitive>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-disabled="disabled ? true : void 0">
+    <div :class="ui.picker({ class: props.ui?.picker })">
+      <div
+        ref="selectorRef"
+        :class="ui.selector({ class: props.ui?.selector })"
+        :style="selectorStyle"
+      >
+        <div :class="ui.selectorBackground({ class: props.ui?.selectorBackground })" data-color-picker-background>
+          <div
+            ref="selectorThumbRef"
+            :class="ui.selectorThumb({ class: props.ui?.selectorThumb })"
+            :style="selectorThumbStyle"
+            :data-disabled="disabled ? true : void 0"
+          />
+        </div>
+      </div>
+      <div
+        ref="trackRef"
+        :class="ui.track({ class: props.ui?.track })"
+        data-color-picker-track
+      >
+        <div
+          ref="trackThumbRef"
+          :class="ui.trackThumb({ class: props.ui?.trackThumb })"
+          :style="trackThumbStyle"
+          :data-disabled="disabled ? true : void 0"
+        />
+      </div>
+    </div>
+  </Primitive>
 </template>
 
 <style scoped>