@eslamdevui/ui 3.2.0-beta.2 → 3.2.1

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

@@ -0,0 +1,165 @@
+<script>
+import theme from "#build/ui/changelog-version";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive, useDateFormatter } from "reka-ui";
+import { createReusableTemplate } from "@vueuse/core";
+import ImageComponent from "#build/ui-image-component";
+import { useLocale, useAppConfig } from "#imports";
+import { getSlotChildrenText } from "../utils";
+import { tv } from "../utils/tv";
+import UUser from "./User.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: "article" },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  date: { type: [String, Date], required: false },
+  badge: { type: [String, Object], required: false },
+  authors: { type: Array, required: false },
+  image: { type: [String, Object], required: false },
+  indicator: { type: Boolean, required: false, default: true },
+  to: { type: null, required: false },
+  target: { type: [String, Object, null], required: false },
+  onClick: { type: Function, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const { locale } = useLocale();
+const appConfig = useAppConfig();
+const formatter = useDateFormatter(locale.value.code);
+const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate();
+const [DefineDateTemplate, ReuseDateTemplate] = createReusableTemplate({
+  props: {
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  }
+});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.changelogVersion || {} })({
+  to: !!props.to || !!props.onClick
+}));
+const date = computed(() => {
+  if (!props.date) {
+    return;
+  }
+  try {
+    return formatter.custom(new Date(props.date), { dateStyle: "medium" });
+  } catch {
+    return props.date;
+  }
+});
+const datetime = computed(() => {
+  if (!props.date) {
+    return;
+  }
+  try {
+    return new Date(props.date)?.toISOString();
+  } catch {
+    return void 0;
+  }
+});
+const ariaLabel = computed(() => {
+  const slotText = slots.title && getSlotChildrenText(slots.title());
+  return (slotText || props.title || "Version link").trim();
+});
+</script>
+
+<template>
+  <DefineLinkTemplate>
+    <ULink
+      v-if="to"
+      :aria-label="ariaLabel"
+      v-bind="{ to, target, ...$attrs }"
+      class="focus:outline-none peer"
+      tabindex="-1"
+      raw
+    >
+      <span class="absolute inset-0" aria-hidden="true" />
+    </ULink>
+  </DefineLinkTemplate>
+
+  <DefineDateTemplate v-slot="{ hidden }">
+    <time v-if="date" :datetime="datetime" :class="ui.date({ class: props.ui?.date, hidden })">
+      <slot name="date">
+        {{ date }}
+      </slot>
+    </time>
+  </DefineDateTemplate>
+
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
+    <div v-if="!!props.indicator || !!slots.indicator" :class="ui.indicator({ class: props.ui?.indicator })">
+      <slot name="indicator">
+        <!-- <ReuseDateTemplate :hidden="false" /> when used inside the indicator slot -->
+        <ReuseDateTemplate :hidden="!!props.indicator" /> <!-- when used elsewhere -->
+
+        <div :class="ui.dot({ class: props.ui?.dot })">
+          <div :class="ui.dotInner({ class: props.ui?.dotInner })" />
+        </div>
+      </slot>
+    </div>
+
+    <div :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.header || (date || !!slots.date) || (badge || !!slots.badge) || (title || !!slots.title) || (description || !!slots.description) || (image || !!slots.image)" :class="ui.header({ class: props.ui?.header })">
+        <slot name="header">
+          <div v-if="date || !!slots.date || (badge || !!slots.badge)" :class="ui.meta({ class: props.ui?.meta, badge: !!badge || !!slots.badge || !props.indicator })">
+            <slot name="badge">
+              <UBadge v-if="badge" color="neutral" variant="solid" v-bind="typeof badge === 'string' ? { label: badge } : badge" :class="ui.badge({ class: props.ui?.badge })" />
+            </slot>
+
+            <ReuseDateTemplate :hidden="!!props.indicator" />
+          </div>
+
+          <h2 v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+            <ReuseLinkTemplate />
+
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </h2>
+
+          <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </div>
+
+          <div v-if="image || !!slots.image" :class="ui.imageWrapper({ class: props.ui?.imageWrapper })">
+            <slot name="image">
+              <component
+                :is="ImageComponent"
+                v-if="image"
+                v-bind="typeof image === 'string' ? { src: image, alt: title } : { alt: title, ...image }"
+                :class="ui.image({ class: props.ui?.image, to: !!to })"
+              />
+            </slot>
+
+            <ReuseLinkTemplate />
+          </div>
+        </slot>
+      </div>
+
+      <slot name="body" />
+
+      <div v-if="!!slots.footer || (authors?.length || !!slots.authors) || !!slots.actions" :class="ui.footer({ class: props.ui?.footer, body: !!slots.body })">
+        <slot name="footer">
+          <div v-if="authors?.length || !!slots.authors" :class="ui.authors({ class: props.ui?.authors })">
+            <slot name="authors">
+              <UUser
+                v-for="(author, index) in authors"
+                :key="index"
+                v-bind="author"
+              />
+            </slot>
+          </div>
+
+          <slot name="actions" />
+        </slot>
+      </div>
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,58 @@
+import theme from '#build/ui/changelog-version';
+import type { AppConfig } from '@nuxt/schema';
+import type { BadgeProps, LinkProps, ComponentConfig, UserProps } from '../types';
+type ChangelogVersion = ComponentConfig<typeof theme, AppConfig, 'changelogVersion'>;
+export interface ChangelogVersionProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'article'
+     */
+    as?: any;
+    title?: string;
+    description?: string;
+    /** The date of the changelog version. Can be a string or a Date object. */
+    date?: string | Date;
+    /**
+     * Display a badge on the changelog version.
+     * Can be a string or an object.
+     * `{ color: 'neutral', variant: 'solid' }`{lang="ts-type"}
+     */
+    badge?: string | BadgeProps;
+    /** The authors of the changelog version. */
+    authors?: UserProps[];
+    /** The image of the changelog version. Can be a string or an object. */
+    image?: string | Partial<HTMLImageElement>;
+    /**
+     * Display an indicator dot on the left.
+     * @defaultValue true
+     */
+    indicator?: boolean;
+    to?: LinkProps['to'];
+    target?: LinkProps['target'];
+    onClick?: (event: MouseEvent) => void | Promise<void>;
+    class?: any;
+    ui?: ChangelogVersion['slots'];
+}
+export interface ChangelogVersionSlots {
+    header(props?: {}): any;
+    badge(props?: {}): any;
+    date(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    image(props?: {}): any;
+    body(props?: {}): any;
+    footer(props?: {}): any;
+    authors(props?: {}): any;
+    actions(props?: {}): any;
+    indicator(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChangelogVersionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChangelogVersionProps> & Readonly<{}>, {
+    as: any;
+    indicator: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChangelogVersionSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ChangelogVersions.vue

@@ -0,0 +1,54 @@
+<script>
+import theme from "#build/ui/changelog-versions";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { Motion, useScroll, useSpring } from "motion-v";
+import { defu } from "defu";
+import { omit } from "../utils";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+import UChangelogVersion from "./ChangelogVersion.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  versions: { type: Array, required: false },
+  indicator: { type: Boolean, required: false, default: true },
+  indicatorMotion: { type: [Boolean, Object], required: false, default: true },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const proxySlots = omit(slots, ["default", "indicator"]);
+const appConfig = useAppConfig();
+const springOptions = computed(() => defu(typeof props.indicatorMotion === "object" ? props.indicatorMotion : {}, { damping: 30, restDelta: 1e-3 }));
+const { scrollY } = useScroll();
+const height = useSpring(scrollY, springOptions);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.changelogVersions || {} })());
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!props.indicator || !!slots.indicator" :class="ui.indicator({ class: props.ui?.indicator })">
+      <slot name="indicator">
+        <Motion v-if="!!props.indicatorMotion" :class="ui.beam({ class: props.ui?.beam })" :style="{ height }" />
+      </slot>
+    </div>
+
+    <div v-if="versions?.length || !!slots.default" :class="ui.container({ class: props.ui?.container })">
+      <slot>
+        <UChangelogVersion
+          v-for="(version, index) in versions"
+          :key="index"
+          :indicator="!!props.indicator"
+          v-bind="version"
+        >
+          <template v-for="(_, name) in proxySlots" #[name]>
+            <slot :name="name" v-bind="{ version }" />
+          </template>
+        </UChangelogVersion>
+      </slot>
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,74 @@
+import theme from '#build/ui/changelog-versions';
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig, ChangelogVersionProps } from '../types';
+import type { SpringOptions } from 'motion-v';
+type ChangelogVersions = ComponentConfig<typeof theme, AppConfig, 'changelogVersions'>;
+export interface ChangelogVersionsProps<T extends ChangelogVersionProps = ChangelogVersionProps> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    versions?: T[];
+    /**
+     * Display an indicator bar on the left.
+     * @defaultValue true
+     */
+    indicator?: boolean;
+    /**
+     * Enable scrolling motion effect on the indicator bar.
+     * `{ damping: 30, restDelta: 0.001 }`{lang="ts-type"}
+     * @defaultValue true
+     * @see https://motion.dev/docs/vue-transitions#spring
+     */
+    indicatorMotion?: boolean | SpringOptions;
+    class?: any;
+    ui?: ChangelogVersions['slots'];
+}
+export interface ChangelogVersionsSlots<T extends ChangelogVersionProps = ChangelogVersionProps> {
+    default(props?: {}): any;
+    indicator(props?: {}): any;
+    header(props: {
+        version: T;
+    }): any;
+    badge(props: {
+        version: T;
+    }): any;
+    date(props: {
+        version: T;
+    }): any;
+    title(props: {
+        version: T;
+    }): any;
+    description(props: {
+        version: T;
+    }): any;
+    image(props: {
+        version: T;
+    }): any;
+    body(props: {
+        version: T;
+    }): any;
+    footer(props: {
+        version: T;
+    }): any;
+    authors(props: {
+        version: T;
+    }): any;
+    actions(props: {
+        version: T;
+    }): any;
+    indicator(props: {
+        version: T;
+    }): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChangelogVersionsProps<ChangelogVersionProps>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChangelogVersionsProps<ChangelogVersionProps>> & Readonly<{}>, {
+    indicator: boolean;
+    indicatorMotion: boolean | SpringOptions;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChangelogVersionsSlots<ChangelogVersionProps>>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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>