@eslamdevui/ui 3.2.0-beta.1

package/dist/runtime/components/Carousel.vue

@@ -0,0 +1,210 @@
+<script>
+import theme from "#build/ui/carousel";
+</script>
+
+<script setup>
+import { computed, ref, watch, onMounted } from "vue";
+import useEmblaCarousel from "embla-carousel-vue";
+import { Primitive, useForwardProps } from "reka-ui";
+import { reactivePick, computedAsync } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  prev: { type: Object, required: false },
+  prevIcon: { type: String, required: false },
+  next: { type: Object, required: false },
+  nextIcon: { type: String, required: false },
+  arrows: { type: Boolean, required: false, default: false },
+  dots: { type: Boolean, required: false, default: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  items: { type: Array, required: false },
+  autoplay: { type: [Boolean, Object], required: false, default: false },
+  autoScroll: { type: [Boolean, Object], required: false, default: false },
+  autoHeight: { type: [Boolean, Object], required: false, default: false },
+  classNames: { type: [Boolean, Object], required: false, default: false },
+  fade: { type: [Boolean, Object], required: false, default: false },
+  wheelGestures: { type: Boolean, required: false, skipCheck: true, default: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  align: { type: [String, Function], required: false, default: "center" },
+  containScroll: { type: [Boolean, String], required: false, default: "trimSnaps" },
+  slidesToScroll: { type: [String, Number], required: false, default: 1 },
+  dragFree: { type: Boolean, required: false, default: false },
+  dragThreshold: { type: Number, required: false, default: 10 },
+  inViewThreshold: { type: null, required: false, default: 0 },
+  loop: { type: Boolean, required: false, default: false },
+  skipSnaps: { type: Boolean, required: false, default: false },
+  duration: { type: Number, required: false, default: 25 },
+  startIndex: { type: Number, required: false, default: 0 },
+  watchDrag: { type: [Boolean, Function], required: false, default: true },
+  watchResize: { type: [Boolean, Function], required: false, default: true },
+  watchSlides: { type: [Boolean, Function], required: false, default: true },
+  watchFocus: { type: [Boolean, Function], required: false, default: true },
+  active: { type: Boolean, required: false, default: true },
+  breakpoints: { type: Object, required: false, default: () => ({}) }
+});
+defineSlots();
+const emits = defineEmits(["select"]);
+const { dir, t } = useLocale();
+const appConfig = useAppConfig();
+const rootProps = useForwardProps(reactivePick(props, "active", "align", "breakpoints", "containScroll", "dragFree", "dragThreshold", "duration", "inViewThreshold", "loop", "skipSnaps", "slidesToScroll", "startIndex", "watchDrag", "watchResize", "watchSlides", "watchFocus"));
+const prevIcon = computed(() => props.prevIcon || (dir.value === "rtl" ? appConfig.ui.icons.arrowRight : appConfig.ui.icons.arrowLeft));
+const nextIcon = computed(() => props.nextIcon || (dir.value === "rtl" ? appConfig.ui.icons.arrowLeft : appConfig.ui.icons.arrowRight));
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.carousel || {} })({
+  orientation: props.orientation
+}));
+const options = computed(() => ({
+  ...props.fade ? { align: "center", containScroll: false } : {},
+  ...rootProps.value,
+  axis: props.orientation === "horizontal" ? "x" : "y",
+  direction: dir.value === "rtl" ? "rtl" : "ltr"
+}));
+const plugins = computedAsync(async () => {
+  const plugins2 = [];
+  if (props.autoplay) {
+    const AutoplayPlugin = await import("embla-carousel-autoplay").then((r) => r.default);
+    plugins2.push(AutoplayPlugin(typeof props.autoplay === "boolean" ? {} : props.autoplay));
+  }
+  if (props.autoScroll) {
+    const AutoScrollPlugin = await import("embla-carousel-auto-scroll").then((r) => r.default);
+    plugins2.push(AutoScrollPlugin(typeof props.autoScroll === "boolean" ? {} : props.autoScroll));
+  }
+  if (props.autoHeight) {
+    const AutoHeightPlugin = await import("embla-carousel-auto-height").then((r) => r.default);
+    plugins2.push(AutoHeightPlugin(typeof props.autoHeight === "boolean" ? {} : props.autoHeight));
+  }
+  if (props.classNames) {
+    const ClassNamesPlugin = await import("embla-carousel-class-names").then((r) => r.default);
+    plugins2.push(ClassNamesPlugin(typeof props.classNames === "boolean" ? {} : props.classNames));
+  }
+  if (props.fade) {
+    const FadePlugin = await import("embla-carousel-fade").then((r) => r.default);
+    plugins2.push(FadePlugin(typeof props.fade === "boolean" ? {} : props.fade));
+  }
+  if (props.wheelGestures) {
+    const { WheelGesturesPlugin } = await import("embla-carousel-wheel-gestures");
+    plugins2.push(WheelGesturesPlugin(typeof props.wheelGestures === "boolean" ? {} : props.wheelGestures));
+  }
+  return plugins2;
+});
+const [emblaRef, emblaApi] = useEmblaCarousel(options.value, plugins.value);
+watch([options, plugins], () => {
+  emblaApi.value?.reInit(options.value, plugins.value);
+});
+function scrollPrev() {
+  emblaApi.value?.scrollPrev();
+}
+function scrollNext() {
+  emblaApi.value?.scrollNext();
+}
+function scrollTo(index) {
+  emblaApi.value?.scrollTo(index);
+}
+function onKeyDown(event) {
+  const prevKey = props.orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+  const nextKey = props.orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+  if (event.key === prevKey) {
+    event.preventDefault();
+    scrollPrev();
+    return;
+  }
+  if (event.key === nextKey) {
+    event.preventDefault();
+    scrollNext();
+  }
+}
+const canScrollNext = ref(false);
+const canScrollPrev = ref(false);
+const selectedIndex = ref(0);
+const scrollSnaps = ref([]);
+function onInit(api) {
+  scrollSnaps.value = api?.scrollSnapList() || [];
+}
+function onSelect(api) {
+  canScrollNext.value = api?.canScrollNext() || false;
+  canScrollPrev.value = api?.canScrollPrev() || false;
+  selectedIndex.value = api?.selectedScrollSnap() || 0;
+  emits("select", selectedIndex.value);
+}
+function isCarouselItem(item) {
+  return typeof item === "object" && item !== null;
+}
+onMounted(() => {
+  if (!emblaApi.value) {
+    return;
+  }
+  emblaApi.value?.on("init", onInit);
+  emblaApi.value?.on("init", onSelect);
+  emblaApi.value?.on("reInit", onInit);
+  emblaApi.value?.on("reInit", onSelect);
+  emblaApi.value?.on("select", onSelect);
+});
+defineExpose({
+  emblaRef,
+  emblaApi
+});
+</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>
+</template>

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

@@ -0,0 +1,127 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { AcceptableValue } from 'reka-ui';
+import type { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel';
+import type { AutoplayOptionsType } from 'embla-carousel-autoplay';
+import type { AutoScrollOptionsType } from 'embla-carousel-auto-scroll';
+import type { AutoHeightOptionsType } from 'embla-carousel-auto-height';
+import type { ClassNamesOptionsType } from 'embla-carousel-class-names';
+import type { FadeOptionsType } from 'embla-carousel-fade';
+import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures';
+import theme from '#build/ui/carousel';
+import type { ButtonProps } from '../types';
+import type { ComponentConfig } from '../types/utils';
+type Carousel = ComponentConfig<typeof theme, AppConfig, 'carousel'>;
+interface _CarouselItem {
+    class?: any;
+    ui?: Pick<Carousel['slots'], 'item'>;
+    [key: string]: any;
+}
+export type CarouselItem = _CarouselItem | AcceptableValue;
+export interface CarouselProps<T extends CarouselItem = CarouselItem> extends Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * Configure the prev button when arrows are enabled.
+     * @defaultValue { size: 'md', color: 'neutral', variant: 'link' }
+     */
+    prev?: ButtonProps;
+    /**
+     * The icon displayed in the prev button.
+     * @defaultValue appConfig.ui.icons.arrowLeft
+     * @IconifyIcon
+     */
+    prevIcon?: string;
+    /**
+     * Configure the next button when arrows are enabled.
+     * @defaultValue { size: 'md', color: 'neutral', variant: 'link' }
+     */
+    next?: ButtonProps;
+    /**
+     * The icon displayed in the next button.
+     * @defaultValue appConfig.ui.icons.arrowRight
+     * @IconifyIcon
+     */
+    nextIcon?: string;
+    /**
+     * Display prev and next buttons to scroll the carousel.
+     * @defaultValue false
+     */
+    arrows?: boolean;
+    /**
+     * Display dots to scroll to a specific slide.
+     * @defaultValue false
+     */
+    dots?: boolean;
+    /**
+     * The orientation of the carousel.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: Carousel['variants']['orientation'];
+    items?: T[];
+    /**
+     * Enable Autoplay plugin
+     * @link https://www.embla-carousel.com/plugins/autoplay/
+     */
+    autoplay?: boolean | AutoplayOptionsType;
+    /**
+     * Enable Auto Scroll plugin
+     * @link https://www.embla-carousel.com/plugins/auto-scroll/
+     */
+    autoScroll?: boolean | AutoScrollOptionsType;
+    /**
+     * Enable Auto Height plugin
+     * @link https://www.embla-carousel.com/plugins/auto-height/
+     */
+    autoHeight?: boolean | AutoHeightOptionsType;
+    /**
+     * Enable Class Names plugin
+     * @link https://www.embla-carousel.com/plugins/class-names/
+     */
+    classNames?: boolean | ClassNamesOptionsType;
+    /**
+     * Enable Fade plugin
+     * @link https://www.embla-carousel.com/plugins/fade/
+     */
+    fade?: boolean | FadeOptionsType;
+    /**
+     * Enable Wheel Gestures plugin
+     * @link https://www.embla-carousel.com/plugins/wheel-gestures/
+     */
+    wheelGestures?: boolean | WheelGesturesPluginOptions;
+    class?: any;
+    ui?: Carousel['slots'];
+}
+export type CarouselSlots<T extends CarouselItem = CarouselItem> = {
+    default(props: {
+        item: T;
+        index: number;
+    }): any;
+};
+export interface CarouselEmits {
+    /**
+     * Emitted when the selected slide changes
+     * @param selectedIndex The index of the selected slide
+     */
+    select: [selectedIndex: number];
+}
+declare const _default: <T extends CarouselItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onSelect?: ((selectedIndex: number) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSelect"> & CarouselProps<T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        emblaRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+        emblaApi: import("vue").Ref<EmblaCarouselType | undefined, EmblaCarouselType | undefined>;
+    }>): void;
+    attrs: any;
+    slots: CarouselSlots<T>;
+    emit: (evt: "select", selectedIndex: number) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/ChatMessage.vue

@@ -0,0 +1,87 @@
+<script>
+import theme from "#build/ui/chat-message";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
+import UIcon from "./Icon.vue";
+import UAvatar from "./Avatar.vue";
+const props = defineProps({
+  as: { type: null, required: false, default: "article" },
+  id: { type: String, required: false },
+  content: { type: String, required: false },
+  role: { type: String, required: false },
+  icon: { type: String, required: false },
+  avatar: { type: Object, required: false },
+  variant: { type: String, required: false, default: "naked" },
+  side: { type: String, required: false, default: "left" },
+  actions: { type: Array, required: false },
+  compact: { type: Boolean, required: false, default: false },
+  createdAt: { type: Date, required: false },
+  reasoning: { type: String, required: false },
+  experimentalAttachments: { type: Array, required: false },
+  data: { type: [null, String, Number, Boolean, Object, Array], required: false },
+  annotations: { type: Array, required: false },
+  toolInvocations: { type: Array, required: false },
+  parts: { type: Array, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const hasLeading = computed(() => Boolean(props.icon || props.avatar));
+const hasActions = computed(() => Boolean(props.actions && props.actions.length > 0));
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessage || {} })({
+  variant: props.variant,
+  side: props.side,
+  compact: props.compact,
+  leading: hasLeading.value,
+  actions: hasActions.value
+}));
+const handleActionClick = (e, action) => {
+  if (action.onClick) {
+    action.onClick(e, props);
+  }
+};
+</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>
+</template>

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

@@ -0,0 +1,130 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../types/utils';
+import theme from '#build/ui/chat-message';
+import type { AvatarProps, ButtonProps } from '../types';
+export type ChatMessage = ComponentConfig<typeof theme, AppConfig, 'chatMessage'>;
+export interface ChatMessageProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'article'
+     */
+    as?: any;
+    /**
+     * A unique identifier for the message.
+     */
+    id?: string;
+    /**
+     * Text content of the message. Use parts when possible.
+     */
+    content?: string;
+    /**
+     * The 'data' role is deprecated.
+     */
+    role?: 'data' | 'user' | 'system' | 'assistant';
+    /**
+     * Icon to display next to the message.
+     */
+    icon?: string;
+    /**
+     * Avatar to display next to the message.
+     */
+    avatar?: AvatarProps & {
+        [key: string]: any;
+    };
+    /**
+     * @defaultValue 'naked'
+     */
+    variant?: 'solid' | 'outline' | 'soft' | 'subtle' | 'naked';
+    /**
+     * @defaultValue 'left'
+     */
+    side?: 'right' | 'left';
+    /**
+     * Display a list of actions under the message. The label will be used in a tooltip. { size: 'xs', color: 'neutral', variant: 'ghost' }
+     */
+    actions?: (Omit<ButtonProps, 'onClick'> & {
+        onClick?: ((e: MouseEvent, message: any) => void) | undefined;
+    })[];
+    /**
+     * Render the message in a compact style. This is done automatically when used inside a UChatPalette.
+     * @defaultValue false
+     */
+    compact?: boolean;
+    /**
+     * The timestamp of the message.
+     */
+    createdAt?: Date;
+    /**
+     * Reasoning for the message.
+     */
+    reasoning?: string;
+    /**
+     * Additional attachments to be sent along with the message.
+     */
+    experimentalAttachments?: any[];
+    /**
+     * For data messages.
+     */
+    data?: null | string | number | false | true | {
+        [value: string]: any;
+    } | any[];
+    /**
+     * Additional message-specific information added on the server via StreamData
+     */
+    annotations?: any[];
+    /**
+     * Tool invocations (that can be tool calls or tool results, depending on whether or not the invocation has finished) that the assistant made as part of this message.
+     */
+    toolInvocations?: any[];
+    /**
+     * The parts of the message. Use this for rendering the message in the UI.
+     */
+    parts?: any[];
+    class?: any;
+    ui?: ChatMessage['slots'];
+}
+export interface ChatMessageSlots {
+    leading(props?: {
+        avatar: (AvatarProps & {
+            [key: string]: any;
+        }) | undefined;
+    }): any;
+    content(props?: {
+        content: string;
+    }): any;
+    actions(props?: {
+        actions: (Omit<ButtonProps, 'onClick'> & {
+            onClick?: ((e: MouseEvent, message: any) => void) | undefined;
+        })[] | undefined;
+    }): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatMessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatMessageProps> & Readonly<{}>, {
+    as: any;
+    variant: "solid" | "outline" | "soft" | "subtle" | "naked";
+    side: "right" | "left";
+    compact: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    leading?: (props: {
+        avatar: (AvatarProps & {
+            [key: string]: any;
+        }) | undefined;
+    }) => any;
+} & {
+    content?: (props: {
+        content: string | undefined;
+    }) => any;
+} & {
+    default?: (props: {}) => any;
+} & {
+    actions?: (props: {
+        actions: (Omit<ButtonProps, "onClick"> & {
+            onClick?: ((e: MouseEvent, message: any) => void) | undefined;
+        })[] | undefined;
+    }) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};