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

package/dist/runtime/components/prose/Callout.vue

@@ -0,0 +1,60 @@
+<script>
+import theme from "#build/ui/prose/callout";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { tv } from "../../utils/tv";
+import ULink from "../Link.vue";
+import UIcon from "../Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  to: { type: null, required: false },
+  target: { type: [String, Object, null], required: false },
+  icon: { type: String, required: false },
+  color: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({
+  extend: tv(theme),
+  ...appConfig.ui?.prose?.callout || {}
+})({
+  color: props.color,
+  to: !!props.to
+}));
+const target = computed(() => props.target || (!!props.to && typeof props.to === "string" && props.to.startsWith("http") ? "_blank" : void 0));
+</script>
+
+<template>
+  <div :class="ui.base({ class: props.class })">
+    <ULink
+      v-if="to"
+      v-bind="{ to, target, ...$attrs }"
+      class="focus:outline-none"
+      tabindex="-1"
+      raw
+    >
+      <span
+        class="absolute inset-0"
+        aria-hidden="true"
+      />
+    </ULink>
+
+    <UIcon
+      v-if="icon"
+      :name="icon"
+      :class="ui.icon({ class: props.ui?.icon })"
+    />
+    <UIcon
+      v-if="!!to && target === '_blank'"
+      :name="appConfig.ui.icons.external"
+      :class="ui.externalIcon({ class: props.ui?.externalIcon })"
+    />
+
+    <slot mdc-unwrap="p" />
+  </div>
+</template>

package/dist/runtime/components/prose/Callout.vue.d.ts

@@ -0,0 +1,26 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { LinkProps } from '../Link.vue';
+import theme from '#build/ui/prose/callout';
+import type { ComponentConfig } from '../../types/utils';
+type Callout = ComponentConfig<typeof theme, AppConfig, 'callout', 'ui.prose'>;
+export interface CalloutProps {
+    to?: LinkProps['to'];
+    target?: LinkProps['target'];
+    icon?: string;
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: Callout['variants']['color'];
+    class?: any;
+    ui?: Callout['slots'];
+}
+export interface CalloutSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CalloutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CalloutProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CalloutSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/prose/Card.vue

@@ -0,0 +1,83 @@
+<script>
+import theme from "#build/ui/prose/card";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { tv } from "../../utils/tv";
+import ULink from "../Link.vue";
+import UIcon from "../Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  to: { type: null, required: false },
+  target: { type: [String, Object, null], required: false },
+  icon: { type: String, required: false },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  color: { type: null, required: false, default: "primary" },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const isExternal = computed(() => typeof props.to === "string" && props.to.startsWith("http"));
+const target = computed(() => props.target || (props.to && isExternal.value ? "_blank" : void 0));
+const ariaLabel = computed(() => (props.title || "Card link").trim());
+const ui = computed(
+  () => tv({
+    extend: tv(theme),
+    ...appConfig.ui?.prose?.card || {}
+  })({
+    color: props.color,
+    to: !!props.to,
+    title: !!props.title
+  })
+);
+</script>
+
+<template>
+  <div :class="ui.base({ class: props.class })">
+    <!-- Clickable Overlay -->
+    <ULink
+      v-if="to"
+      :to="to"
+      :target="target"
+      :aria-label="ariaLabel"
+      class="focus:outline-none"
+      tabindex="-1"
+      raw
+      v-bind="$attrs"
+    >
+      <span class="absolute inset-0" aria-hidden="true" />
+    </ULink>
+
+    <!-- Icon -->
+    <UIcon
+      v-if="icon"
+      :name="icon"
+      :class="ui.icon({ class: props.ui?.icon })"
+    />
+
+    <!-- External Link Icon -->
+    <UIcon
+      v-if="to && target === '_blank'"
+      :name="appConfig.ui.icons.external"
+      :class="ui.externalIcon({ class: props.ui?.externalIcon })"
+    />
+
+    <!-- Title -->
+    <p v-if="title || $slots.title" :class="ui.title({ class: props.ui?.title })">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </p>
+
+    <!-- Description / Default Slot -->
+    <div v-if="$slots.default || description" :class="ui.description({ class: props.ui?.description })">
+      <slot>
+        {{ description }}
+      </slot>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/prose/Card.vue.d.ts

@@ -0,0 +1,30 @@
+import theme from '#build/ui/prose/card';
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig, LinkProps } from '../../types';
+type ProseCard = ComponentConfig<typeof theme, AppConfig, 'card', 'ui.prose'>;
+export interface ProseCardProps {
+    to?: LinkProps['to'];
+    target?: LinkProps['target'];
+    icon?: string;
+    title?: string;
+    description?: string;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: ProseCard['variants']['color'];
+    class?: any;
+    ui?: ProseCard['slots'];
+}
+export interface ProseCardSlots {
+    default(): any;
+    title(): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProseCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCardProps> & Readonly<{}>, {
+    color: ProseCard["variants"]["color"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCardSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/prose/CardGroup.vue

@@ -0,0 +1,21 @@
+<script>
+import theme from "#build/ui/prose/card-group";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { tv } from "../../utils/tv";
+const props = defineProps({
+  class: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.cardGroup || {} }));
+</script>
+
+<template>
+  <div :class="ui({ class: props.class })">
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/prose/CardGroup.vue.d.ts

@@ -0,0 +1,13 @@
+export interface ProseCardGroupProps {
+    class?: any;
+}
+export interface ProseCardGroupSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProseCardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCardGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCardGroupSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/prose/Code.vue

@@ -0,0 +1,23 @@
+<script>
+import theme from "#build/ui/prose/code";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { tv } from "../../utils/tv";
+const props = defineProps({
+  lang: { type: String, required: false },
+  color: { type: null, required: false },
+  class: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.code || {} }));
+</script>
+
+<template>
+  <code :class="ui({ class: (props.class || '').split(',').join(' '), color: props.color })">
+    <slot />
+  </code>
+</template>

package/dist/runtime/components/prose/Code.vue.d.ts

@@ -0,0 +1,22 @@
+import theme from '#build/ui/prose/code';
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../../types';
+type ProseCode = ComponentConfig<typeof theme, AppConfig, 'code', 'ui.prose'>;
+export interface ProseCodeProps {
+    lang?: string;
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: ProseCode['variants']['color'];
+    class?: any;
+}
+export interface ProseCodeSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProseCodeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCodeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCodeSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/prose/CodeCollapse.vue

@@ -0,0 +1,44 @@
+<script>
+import theme from "#build/ui/prose/code-collapse";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { useLocalePro } from "../../composables/useLocalePro";
+import { tv } from "../../utils/tv";
+const props = defineProps({
+  icon: { type: String, required: false },
+  name: { type: String, required: false },
+  openText: { type: String, required: false },
+  closeText: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+defineSlots();
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const { t } = useLocalePro();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.codeCollapse || {} })({
+  open: open.value
+}));
+</script>
+
+<template>
+  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <slot />
+
+    <div :class="ui.footer({ class: props.ui?.footer })">
+      <UButton
+        :icon="icon || appConfig.ui.icons.chevronDown"
+        color="neutral"
+        variant="outline"
+        :data-state="open ? 'open' : 'closed'"
+        :label="`${open ? props.closeText || t('prose.codeCollapse.closeText') : props.openText || t('prose.codeCollapse.openText')} ${props.name || t('prose.codeCollapse.name')}`"
+        :class="ui.trigger({ class: props.ui?.trigger })"
+        :ui="{ leadingIcon: ui.triggerIcon({ class: props.ui?.triggerIcon }) }"
+        @click="open = !open"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/prose/CodeCollapse.vue.d.ts

@@ -0,0 +1,46 @@
+import theme from '#build/ui/prose/code-collapse';
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../../types';
+type ProseCodeCollapse = ComponentConfig<typeof theme, AppConfig, 'codeCollapse', 'ui.prose'>;
+export interface ProseCodeCollapseProps {
+    /**
+     * The icon displayed to toggle the code.
+     * @defaultValue appConfig.ui.icons.chevronDown
+     */
+    icon?: string;
+    /**
+     * The name displayed in the trigger label.
+     * @defaultValue t('prose.codeCollapse.name')
+     */
+    name?: string;
+    /**
+     * The text displayed when the code is collapsed.
+     * @defaultValue t('prose.codeCollapse.openText')
+     */
+    openText?: string;
+    /**
+     * The text displayed when the code is expanded.
+     * @defaultValue t('prose.codeCollapse.closeText')
+     */
+    closeText?: string;
+    class?: any;
+    ui?: ProseCodeCollapse['slots'];
+}
+export interface ProseCodeCollapseSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProseCodeCollapseProps & {
+    open?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<ProseCodeCollapseProps & {
+    open?: boolean;
+}> & Readonly<{
+    "onUpdate:open"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCodeCollapseSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/prose/CodeGroup.vue

@@ -0,0 +1,70 @@
+<script>
+import theme from "#build/ui/prose/code-group";
+</script>
+
+<script setup>
+import { computed, watch, onMounted, ref, onBeforeUpdate } from "vue";
+import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent } from "reka-ui";
+import { useState, useAppConfig } from "#imports";
+import { tv } from "../../utils/tv";
+import CodeIcon from "./CodeIcon.vue";
+const props = defineProps({
+  defaultValue: { type: String, required: false, default: "0" },
+  sync: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const model = defineModel({ type: String });
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.codeGroup || {} })());
+const rerenderCount = ref(1);
+const items = computed(() => {
+  const _ = rerenderCount.value;
+  return slots.default?.()?.flatMap(transformSlot).filter(Boolean) || [];
+});
+function transformSlot(slot, index) {
+  if (typeof slot.type === "symbol") {
+    return slot.children?.map(transformSlot);
+  }
+  return {
+    label: slot.props?.filename || slot.props?.label || `${index}`,
+    icon: slot.props?.icon,
+    component: slot
+  };
+}
+onMounted(() => {
+  if (props.sync) {
+    const syncKey = `code-group-${props.sync}`;
+    const syncValue = useState(syncKey, () => localStorage.getItem(syncKey));
+    watch(syncValue, () => {
+      if (!syncValue.value) return;
+      model.value = syncValue.value;
+    }, { immediate: true });
+    watch(model, () => {
+      if (!model.value) return;
+      syncValue.value = model.value;
+      localStorage.setItem(syncKey, model.value);
+    });
+  }
+});
+onBeforeUpdate(() => rerenderCount.value++);
+</script>
+
+<template>
+  <TabsRoot v-model="model" :default-value="defaultValue" :unmount-on-hide="false" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <TabsList :class="ui.list({ class: props.ui?.list })">
+      <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
+
+      <TabsTrigger v-for="(item, index) of items" :key="index" :value="String(index)" :class="ui.trigger({ class: props.ui?.trigger })">
+        <CodeIcon :icon="item.icon" :filename="item.label" :class="ui.triggerIcon({ class: props.ui?.triggerIcon })" />
+
+        <span :class="ui.triggerLabel({ class: props.ui?.triggerLabel })">{{ item.label }}</span>
+      </TabsTrigger>
+    </TabsList>
+
+    <TabsContent v-for="(item, index) of items" :key="index" :value="String(index)" as-child>
+      <component :is="item.component" hide-header tabindex="-1" />
+    </TabsContent>
+  </TabsRoot>
+</template>

package/dist/runtime/components/prose/CodeGroup.vue.d.ts

@@ -0,0 +1,37 @@
+import theme from '#build/ui/prose/code-group';
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../../types';
+type ProseCodeGroup = ComponentConfig<typeof theme, AppConfig, 'codeGroup', 'ui.prose'>;
+export interface ProseCodeGroupProps {
+    /**
+     * The default tab to select.
+     * @example '1'
+     */
+    defaultValue?: string;
+    /**
+     * Sync the selected tab with a local storage key.
+     */
+    sync?: string;
+    class?: any;
+    ui?: ProseCodeGroup['slots'];
+}
+export interface ProseCodeGroupSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProseCodeGroupProps & {
+    modelValue?: string | undefined;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<ProseCodeGroupProps & {
+    modelValue?: string | undefined;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    defaultValue: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCodeGroupSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/prose/CodeIcon.vue

@@ -0,0 +1,28 @@
+<script>
+import theme from "#build/ui/prose/code-icon";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { defu } from "defu";
+import { useAppConfig } from "#imports";
+const props = defineProps({
+  icon: { type: String, required: false },
+  filename: { type: String, required: false }
+});
+const appConfig = useAppConfig();
+const icons = computed(() => defu(appConfig.ui?.prose?.codeIcon || {}, theme));
+const iconMap = computed(() => icons.value);
+const icon = computed(() => {
+  if (props.icon) return props.icon;
+  if (!props.filename) return;
+  const cleanFilename = props.filename.replace(/\s*\(.*\)\s*$/, "");
+  const extension = cleanFilename.includes(".") ? cleanFilename.split(".").pop() : void 0;
+  const name = cleanFilename.split("/").pop()?.toLowerCase();
+  return (name && iconMap.value[name]) ?? (extension && (iconMap.value[extension] ?? `i-vscode-icons-file-type-${extension}`));
+});
+</script>
+
+<template>
+  <UIcon v-if="icon" :name="icon" />
+</template>

package/dist/runtime/components/prose/CodeIcon.vue.d.ts

@@ -0,0 +1,24 @@
+export interface ProseCodeIconProps {
+    icon?: string;
+    filename?: string;
+}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+        required: false;
+    };
+    filename: {
+        type: StringConstructor;
+        required: false;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+        required: false;
+    };
+    filename: {
+        type: StringConstructor;
+        required: false;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/prose/CodePreview.vue

@@ -0,0 +1,28 @@
+<script>
+import theme from "#build/ui/prose/code-preview";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { tv } from "../../utils/tv";
+const props = defineProps({
+  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?.prose?.codePreview || {} })({ code: !!slots.code }));
+</script>
+
+<template>
+  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.preview({ class: [props.ui?.preview] })">
+      <slot />
+    </div>
+
+    <div v-if="!!slots.code" :class="ui.code({ class: [props.ui?.code] })">
+      <slot name="code" />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/prose/CodePreview.vue.d.ts

@@ -0,0 +1,19 @@
+import theme from '#build/ui/prose/code-preview';
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../../types';
+type ProseCodePreview = ComponentConfig<typeof theme, AppConfig, 'codePreview', 'ui.prose'>;
+export interface ProseCodePreviewProps {
+    class?: any;
+    ui?: ProseCodePreview['slots'];
+}
+export interface ProseCodePreviewSlots {
+    default(props?: {}): any;
+    code(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProseCodePreviewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCodePreviewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCodePreviewSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};