@eslamdevui/ui 3.2.0-beta.2 → 3.2.1

package/dist/runtime/components/User.vue

@@ -0,0 +1,69 @@
+<script>
+import theme from "#build/ui/user";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  name: { type: String, required: false },
+  description: { type: String, required: false },
+  avatar: { type: Object, required: false },
+  chip: { type: [Boolean, Object], required: false },
+  size: { type: null, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  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 appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.user || {} })({
+  size: props.size,
+  orientation: props.orientation,
+  to: !!props.to || !!props.onClick
+}));
+</script>
+
+<template>
+  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
+    <slot name="avatar">
+      <UChip v-if="chip && avatar" inset v-bind="typeof chip === 'object' ? chip : {}" :size="size">
+        <UAvatar :alt="name" v-bind="avatar" :size="size" :class="ui.avatar({ class: props.ui?.avatar })" />
+      </UChip>
+      <UAvatar v-else-if="avatar" :alt="name" v-bind="avatar" :size="size" :class="ui.avatar({ class: props.ui?.avatar })" />
+    </slot>
+
+    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <ULink
+        v-if="to"
+        :aria-label="name"
+        v-bind="{ to, target, ...$attrs }"
+        class="focus:outline-none peer"
+        tabindex="-1"
+        raw
+      >
+        <span class="absolute inset-0" aria-hidden="true" />
+      </ULink>
+
+      <slot>
+        <p v-if="name || !!slots.name" :class="ui.name({ class: props.ui?.name })">
+          <slot name="name">
+            {{ name }}
+          </slot>
+        </p>
+        <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </p>
+      </slot>
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,46 @@
+import theme from '#build/ui/user';
+import type { AppConfig } from '@nuxt/schema';
+import type { AvatarProps, ChipProps, LinkProps, ComponentConfig } from '../types';
+type User = ComponentConfig<typeof theme, AppConfig, 'user'>;
+export interface UserProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    name?: string;
+    description?: string;
+    avatar?: Omit<AvatarProps, 'size'> & {
+        [key: string]: any;
+    };
+    chip?: boolean | Omit<ChipProps, 'size' | 'inset'>;
+    /**
+     * @defaultValue 'md'
+     */
+    size?: User['variants']['size'];
+    /**
+     * The orientation of the user.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: User['variants']['orientation'];
+    to?: LinkProps['to'];
+    target?: LinkProps['target'];
+    onClick?: (event: MouseEvent) => void | Promise<void>;
+    class?: any;
+    ui?: User['slots'];
+}
+export interface UserSlots {
+    avatar(props?: {}): any;
+    name(props?: {}): any;
+    description(props?: {}): any;
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<UserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UserProps> & Readonly<{}>, {
+    orientation: User["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, UserSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/color-mode/ColorModeAvatar.vue

@@ -11,6 +11,6 @@ defineProps({
 </script>
 
 <template>
-  <UAvatar :src="light" class="dark:hidden" v-bind="$attrs" />
-  <UAvatar :src="dark" class="hidden dark:block" v-bind="$attrs" />
+  <UAvatar :src="light" class="dark:hidden" v-bind="$attrs" />
+  <UAvatar :src="dark" class="hidden dark:block" v-bind="$attrs" />
 </template>

package/dist/runtime/components/color-mode/ColorModeButton.vue

@@ -26,20 +26,20 @@ const isDark = computed({
 </script>
 
 <template>
-  <ClientOnly v-if="!colorMode?.forced">
-    <UButton
-      :icon="isDark ? appConfig.ui.icons.dark : appConfig.ui.icons.light"
-      :color="color"
-      :variant="variant"
-      :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
-      v-bind="$attrs"
-      @click="isDark = !isDark"
-    />
-
-    <template #fallback>
-      <slot name="fallback">
-        <div class="size-8" />
-      </slot>
-    </template>
-  </ClientOnly>
+  <ClientOnly v-if="!colorMode?.forced">
+    <UButton
+      :icon="isDark ? appConfig.ui.icons.dark : appConfig.ui.icons.light"
+      :color="color"
+      :variant="variant"
+      :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
+      v-bind="$attrs"
+      @click="isDark = !isDark"
+    />
+
+    <template #fallback>
+      <slot name="fallback">
+        <div class="size-8" />
+      </slot>
+    </template>
+  </ClientOnly>
 </template>

package/dist/runtime/components/color-mode/ColorModeImage.vue

@@ -12,6 +12,6 @@ defineProps({
 </script>
 
 <template>
-  <component :is="ImageComponent" :src="light" class="dark:hidden" v-bind="$attrs" />
-  <component :is="ImageComponent" :src="dark" class="hidden dark:block" v-bind="$attrs" />
+  <component :is="ImageComponent" :src="light" class="dark:hidden" v-bind="$attrs" />
+  <component :is="ImageComponent" :src="dark" class="hidden dark:block" v-bind="$attrs" />
 </template>

package/dist/runtime/components/color-mode/ColorModeSelect.vue

@@ -27,23 +27,23 @@ const preference = computed({
 </script>
 
 <template>
-  <ClientOnly v-if="!colorMode?.forced">
-    <USelectMenu
-      v-model="preference"
-      :search-input="false"
-      :icon="preference?.icon"
-      v-bind="$attrs"
-      :items="items"
-    />
-    <template #fallback>
-      <USelectMenu
-        :search-input="false"
-        :icon="items[0]?.icon"
-        v-bind="$attrs"
-        :model-value="items[0]"
-        :items="items"
-        disabled
-      />
-    </template>
-  </ClientOnly>
+  <ClientOnly v-if="!colorMode?.forced">
+    <USelectMenu
+      v-model="preference"
+      :search-input="false"
+      :icon="preference?.icon"
+      v-bind="$attrs"
+      :items="items"
+    />
+    <template #fallback>
+      <USelectMenu
+        :search-input="false"
+        :icon="items[0]?.icon"
+        v-bind="$attrs"
+        :model-value="items[0]"
+        :items="items"
+        disabled
+      />
+    </template>
+  </ClientOnly>
 </template>

package/dist/runtime/components/color-mode/ColorModeSwitch.vue

@@ -22,23 +22,23 @@ const isDark = computed({
 </script>
 
 <template>
-  <ClientOnly v-if="!colorMode?.forced">
-    <USwitch
-      v-model="isDark"
-      :checked-icon="appConfig.ui.icons.dark"
-      :unchecked-icon="appConfig.ui.icons.light"
-      :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
-      v-bind="$attrs"
-    />
-
-    <template #fallback>
-      <USwitch
-        :checked-icon="appConfig.ui.icons.dark"
-        :unchecked-icon="appConfig.ui.icons.light"
-        :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
-        v-bind="$attrs"
-        disabled
-      />
-    </template>
-  </ClientOnly>
+  <ClientOnly v-if="!colorMode?.forced">
+    <USwitch
+      v-model="isDark"
+      :checked-icon="appConfig.ui.icons.dark"
+      :unchecked-icon="appConfig.ui.icons.light"
+      :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
+      v-bind="$attrs"
+    />
+
+    <template #fallback>
+      <USwitch
+        :checked-icon="appConfig.ui.icons.dark"
+        :unchecked-icon="appConfig.ui.icons.light"
+        :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
+        v-bind="$attrs"
+        disabled
+      />
+    </template>
+  </ClientOnly>
 </template>

package/dist/runtime/components/content/ContentNavigation.vue

@@ -60,116 +60,116 @@ const defaultValue = computed(() => {
 </script>
 
 <template>
-  <DefineLinkTemplate v-slot="{ link, active }">
-    <slot name="link" :link="link" :active="active">
-      <slot name="link-leading" :link="link" :active="active">
-        <UIcon
-          v-if="link.icon"
-          :name="link.icon"
-          :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })"
-        />
-      </slot>
-
-      <span
-        v-if="link.title || !!slots['link-title']"
-        :class="ui.linkTitle({ class: [props.ui?.linkTitle, link.ui?.linkTitle], active })"
-      >
-        <slot name="link-title" :link="link" :active="active">
-          {{ link.title }}
-        </slot>
-
-        <UIcon
-          v-if="link.target === '_blank'"
-          :name="appConfig.ui.icons.external"
-          :class="ui.linkTitleExternalIcon({ class: [props.ui?.linkTitleExternalIcon, link.ui?.linkTitleExternalIcon], active })"
-        />
-      </span>
-
-      <span
-        v-if="link.badge || link.children?.length && !props.disabled || link.trailingIcon || !!slots['link-trailing']"
-        :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, link.ui?.linkTrailing] })"
-      >
-        <slot name="link-trailing" :link="link" :active="active">
-          <UBadge
-            v-if="link.badge"
-            color="neutral"
-            variant="outline"
-            :size="props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()"
-            v-bind="typeof link.badge === 'string' || typeof link.badge === 'number' ? { label: link.badge } : link.badge"
-            :class="ui.linkTrailingBadge({ class: props.ui?.linkTrailingBadge })"
-          />
-
-          <UIcon
-            v-if="link.children?.length && !props.disabled"
-            :name="link.trailingIcon || props.trailingIcon || appConfig.ui.icons.chevronDown"
-            :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, link.ui?.linkTrailingIcon] })"
-          />
-
-          <UIcon
-            v-else-if="link.trailingIcon"
-            :name="link.trailingIcon"
-            :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, link.ui?.linkTrailingIcon] })"
-          />
-        </slot>
-      </span>
-    </slot>
-  </DefineLinkTemplate>
-
-  <Primitive :as="props.as" :as-child="props.level > 0" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <AccordionRoot
-      as="ul"
-      v-bind="rootProps"
-      :default-value="defaultValue"
-      :class="props.level > 0 ? ui.listWithChildren({ class: props.ui?.listWithChildren }) : ui.list({ class: props.ui?.list })"
-    >
-      <template v-for="(link, index) in props.navigation" :key="index">
-        <AccordionItem
-          v-if="link.children?.length"
-          as="li"
-          :value="String(index)"
-          :class="ui.itemWithChildren({ class: [props.ui?.itemWithChildren, link.ui?.itemWithChildren], level: props.level > 0 })"
-        >
-          <AccordionTrigger
-            as="button"
+  <DefineLinkTemplate v-slot="{ link, active }">
+    <slot name="link" :link="link" :active="active">
+      <slot name="link-leading" :link="link" :active="active">
+        <UIcon
+          v-if="link.icon"
+          :name="link.icon"
+          :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })"
+        />
+      </slot>
+
+      <span
+        v-if="link.title || !!slots['link-title']"
+        :class="ui.linkTitle({ class: [props.ui?.linkTitle, link.ui?.linkTitle], active })"
+      >
+        <slot name="link-title" :link="link" :active="active">
+          {{ link.title }}
+        </slot>
+
+        <UIcon
+          v-if="link.target === '_blank'"
+          :name="appConfig.ui.icons.external"
+          :class="ui.linkTitleExternalIcon({ class: [props.ui?.linkTitleExternalIcon, link.ui?.linkTitleExternalIcon], active })"
+        />
+      </span>
+
+      <span
+        v-if="link.badge || link.children?.length && !props.disabled || link.trailingIcon || !!slots['link-trailing']"
+        :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, link.ui?.linkTrailing] })"
+      >
+        <slot name="link-trailing" :link="link" :active="active">
+          <UBadge
+            v-if="link.badge"
+            color="neutral"
+            variant="outline"
+            :size="props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()"
+            v-bind="typeof link.badge === 'string' || typeof link.badge === 'number' ? { label: link.badge } : link.badge"
+            :class="ui.linkTrailingBadge({ class: props.ui?.linkTrailingBadge })"
+          />
+
+          <UIcon
+            v-if="link.children?.length && !props.disabled"
+            :name="link.trailingIcon || props.trailingIcon || appConfig.ui.icons.chevronDown"
+            :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, link.ui?.linkTrailingIcon] })"
+          />
+
+          <UIcon
+            v-else-if="link.trailingIcon"
+            :name="link.trailingIcon"
+            :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, link.ui?.linkTrailingIcon] })"
+          />
+        </slot>
+      </span>
+    </slot>
+  </DefineLinkTemplate>
+
+  <Primitive :as="props.as" :as-child="props.level > 0" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <AccordionRoot
+      as="ul"
+      v-bind="rootProps"
+      :default-value="defaultValue"
+      :class="props.level > 0 ? ui.listWithChildren({ class: props.ui?.listWithChildren }) : ui.list({ class: props.ui?.list })"
+    >
+      <template v-for="(link, index) in props.navigation" :key="index">
+        <AccordionItem
+          v-if="link.children?.length"
+          as="li"
+          :value="String(index)"
+          :class="ui.itemWithChildren({ class: [props.ui?.itemWithChildren, link.ui?.itemWithChildren], level: props.level > 0 })"
+        >
+          <AccordionTrigger
+            as="button"
             :class="[
   ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active: link.active, disabled: !!link.disabled }),
   ui.trigger({ class: [props.ui?.trigger, link.ui?.trigger] })
-]"
-          >
-            <ReuseLinkTemplate :link="link" :active="link.active" />
-          </AccordionTrigger>
-
-          <AccordionContent :class="ui.content({ class: [props.ui?.content, link.ui?.content] })">
-            <UContentNavigation
-              v-bind="rootProps"
-              :navigation="link.children"
-              :default-open="props.defaultOpen"
-              :level="props.level + 1"
-              :trailing-icon="props.trailingIcon"
-              :color="props.color"
-              :variant="props.variant"
-              :highlight="props.highlight"
-              :highlight-color="props.highlightColor"
-              :ui="props.ui"
-            >
-              <template v-for="(_, name) in slots" #[name]="slotData">
-                <slot :name="name" :link="slotData.link" :active="slotData.active" />
-              </template>
-            </UContentNavigation>
-          </AccordionContent>
-        </AccordionItem>
-
-        <li v-else :class="ui.item({ class: [props.ui?.item, link.ui?.item], level: props.level > 0 })">
-          <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(mapContentNavigationItem(link))" custom>
-            <ULinkBase
-              v-bind="slotProps"
-              :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active, disabled: !!link.disabled, level: props.level > 0 })"
-            >
-              <ReuseLinkTemplate :link="link" :active="active" />
-            </ULinkBase>
-          </ULink>
-        </li>
-      </template>
-    </AccordionRoot>
-  </Primitive>
+]"
+          >
+            <ReuseLinkTemplate :link="link" :active="link.active" />
+          </AccordionTrigger>
+
+          <AccordionContent :class="ui.content({ class: [props.ui?.content, link.ui?.content] })">
+            <UContentNavigation
+              v-bind="rootProps"
+              :navigation="link.children"
+              :default-open="props.defaultOpen"
+              :level="props.level + 1"
+              :trailing-icon="props.trailingIcon"
+              :color="props.color"
+              :variant="props.variant"
+              :highlight="props.highlight"
+              :highlight-color="props.highlightColor"
+              :ui="props.ui"
+            >
+              <template v-for="(_, name) in slots" #[name]="slotData">
+                <slot :name="name" :link="slotData.link" :active="slotData.active" />
+              </template>
+            </UContentNavigation>
+          </AccordionContent>
+        </AccordionItem>
+
+        <li v-else :class="ui.item({ class: [props.ui?.item, link.ui?.item], level: props.level > 0 })">
+          <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(mapContentNavigationItem(link))" custom>
+            <ULinkBase
+              v-bind="slotProps"
+              :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active, disabled: !!link.disabled, level: props.level > 0 })"
+            >
+              <ReuseLinkTemplate :link="link" :active="active" />
+            </ULinkBase>
+          </ULink>
+        </li>
+      </template>
+    </AccordionRoot>
+  </Primitive>
 </template>

package/dist/runtime/components/content/ContentSearch.vue

@@ -156,29 +156,29 @@ defineExpose({ commandPaletteRef });
 </script>
 
 <template>
-  <UModal
-    v-model:open="open"
-    :title="t('contentSearch.title')"
-    :description="t('contentSearch.description')"
-    :class="ui.modal({ class: props.class })"
-  >
-    <template #content>
-      <slot name="content">
-        <UCommandPalette
-          ref="commandPaletteRef"
-          v-model:search-term="searchTerm"
-          v-bind="commandPaletteProps"
-          :groups="groups"
-          :fuse="fuse"
-          :ui="transformUI(omit(ui, ['modal']), props.ui)"
-          @update:model-value="onSelect"
-          @update:open="open = $event"
-        >
-          <template v-for="(_, name) in proxySlots" #[name]="slotData">
-            <slot :name="name" v-bind="slotData" />
-          </template>
-        </UCommandPalette>
-      </slot>
-    </template>
-  </UModal>
+  <UModal
+    v-model:open="open"
+    :title="t('contentSearch.title')"
+    :description="t('contentSearch.description')"
+    :class="ui.modal({ class: props.class })"
+  >
+    <template #content>
+      <slot name="content">
+        <UCommandPalette
+          ref="commandPaletteRef"
+          v-model:search-term="searchTerm"
+          v-bind="commandPaletteProps"
+          :groups="groups"
+          :fuse="fuse"
+          :ui="transformUI(omit(ui, ['modal']), props.ui)"
+          @update:model-value="onSelect"
+          @update:open="open = $event"
+        >
+          <template v-for="(_, name) in proxySlots" #[name]="slotData">
+            <slot :name="name" v-bind="slotData" />
+          </template>
+        </UCommandPalette>
+      </slot>
+    </template>
+  </UModal>
 </template>

package/dist/runtime/components/content/ContentSearchButton.vue

@@ -47,11 +47,11 @@ const tooltipProps = computed(
 </script>
 
 <template>
-  <DefineButtonTemplate>
-    <UButton
-      :icon="icon || appConfig.ui.icons.search"
-      :label="label || t('contentSearchButton.label')"
-      :variant="variant || (collapsed ? 'ghost' : 'outline')"
+  <DefineButtonTemplate>
+    <UButton
+      :icon="icon || appConfig.ui.icons.search"
+      :label="label || t('contentSearchButton.label')"
+      :variant="variant || (collapsed ? 'ghost' : 'outline')"
       v-bind="{
   ...rootProps,
   ...collapsed ? {
@@ -59,37 +59,37 @@ const tooltipProps = computed(
     'label': void 0,
     'aria-label': label || t('contentSearchButton.label')
   } : {}
-}"
-      :class="ui.base({ class: [props.ui?.base, props.class] })"
-      :ui="transformUI(ui, props.ui)"
-      @click="open = true"
-    >
-      <template v-for="(_, name) in proxySlots" #[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
-
-      <template v-if="!props.collapsed" #trailing>
-        <div :class="ui.trailing({ class: props.ui?.trailing })">
-          <slot name="trailing">
-            <UKbd
-              v-for="(kbd, index) in props.kbds"
-              :key="index"
-              variant="subtle"
-              v-bind="typeof kbd === 'string' ? { value: kbd } : kbd"
-            />
-          </slot>
-        </div>
-      </template>
-    </UButton>
-  </DefineButtonTemplate>
-
-  <UTooltip
-    v-if="props.collapsed && props.tooltip"
-    :text="props.label || t('contentSearchButton.label')"
-    v-bind="tooltipProps"
-  >
-    <ReuseButtonTemplate />
-  </UTooltip>
-
-  <ReuseButtonTemplate v-else />
+}"
+      :class="ui.base({ class: [props.ui?.base, props.class] })"
+      :ui="transformUI(ui, props.ui)"
+      @click="open = true"
+    >
+      <template v-for="(_, name) in proxySlots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+
+      <template v-if="!props.collapsed" #trailing>
+        <div :class="ui.trailing({ class: props.ui?.trailing })">
+          <slot name="trailing">
+            <UKbd
+              v-for="(kbd, index) in props.kbds"
+              :key="index"
+              variant="subtle"
+              v-bind="typeof kbd === 'string' ? { value: kbd } : kbd"
+            />
+          </slot>
+        </div>
+      </template>
+    </UButton>
+  </DefineButtonTemplate>
+
+  <UTooltip
+    v-if="props.collapsed && props.tooltip"
+    :text="props.label || t('contentSearchButton.label')"
+    v-bind="tooltipProps"
+  >
+    <ReuseButtonTemplate />
+  </UTooltip>
+
+  <ReuseButtonTemplate v-else />
 </template>