@eslamdevui/ui 3.2.0-beta.1

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

@@ -0,0 +1,93 @@
+import type { ButtonHTMLAttributes } from 'vue';
+import type { RouterLinkProps, RouteLocationRaw } from 'vue-router';
+interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
+    /**
+     * Route Location the link should navigate to when clicked on.
+     */
+    to?: RouteLocationRaw;
+    /**
+     * An alias for `to`. If used with `to`, `href` will be ignored
+     */
+    href?: NuxtLinkProps['to'];
+    /**
+     * Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
+     */
+    external?: boolean;
+    /**
+     * Where to display the linked URL, as the name for a browsing context.
+     */
+    target?: '_blank' | '_parent' | '_self' | '_top' | (string & {}) | null;
+    /**
+     * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
+     */
+    rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {}) | null;
+    /**
+     * If set to true, no rel attribute will be added to the link
+     */
+    noRel?: boolean;
+    /**
+     * A class to apply to links that have been prefetched.
+     */
+    prefetchedClass?: string;
+    /**
+     * When enabled will prefetch middleware, layouts and payloads of links in the viewport.
+     */
+    prefetch?: boolean;
+    /**
+     * Allows controlling when to prefetch links. By default, prefetch is triggered only on visibility.
+     */
+    prefetchOn?: 'visibility' | 'interaction' | Partial<{
+        visibility: boolean;
+        interaction: boolean;
+    }>;
+    /**
+     * Escape hatch to disable `prefetch` attribute.
+     */
+    noPrefetch?: boolean;
+}
+export interface LinkProps extends NuxtLinkProps {
+    /**
+     * The element or component this component should render as when not a link.
+     * @defaultValue 'button'
+     */
+    as?: any;
+    /**
+     * The type of the button when not a link.
+     * @defaultValue 'button'
+     */
+    type?: ButtonHTMLAttributes['type'];
+    disabled?: boolean;
+    /** Force the link to be active independent of the current route. */
+    active?: boolean;
+    /** Will only be active if the current route is an exact match. */
+    exact?: boolean;
+    /** Will only be active if the current route query is an exact match. */
+    exactQuery?: boolean | 'partial';
+    /** Will only be active if the current route hash is an exact match. */
+    exactHash?: boolean;
+    /** The class to apply when the link is inactive. */
+    inactiveClass?: string;
+    custom?: boolean;
+    /** When `true`, only styles from `class`, `activeClass`, and `inactiveClass` will be applied. */
+    raw?: boolean;
+    class?: any;
+}
+export interface LinkSlots {
+    default(props: {
+        active: boolean;
+    }): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<LinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkProps> & Readonly<{}>, {
+    type: "reset" | "submit" | "button";
+    as: any;
+    activeClass: string;
+    ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
+    active: boolean;
+    inactiveClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,34 @@
+<script>
+
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useAppConfig, useColorMode } from "#imports";
+import { useLocalePro } from "../../../composables/useLocalePro";
+defineProps({
+  color: { type: null, required: false, default: "neutral" },
+  variant: { type: null, required: false, default: "ghost" }
+});
+const { t } = useLocalePro();
+const colorMode = useColorMode();
+const appConfig = useAppConfig();
+const isDark = computed({
+  get() {
+    return colorMode.value === "dark";
+  },
+  set(_isDark) {
+    colorMode.preference = _isDark ? "dark" : "light";
+  }
+});
+</script>
+
+<template>
+  <UButton
+    :icon="isDark ? appConfig.ui.icons.dark : appConfig.ui.icons.light"
+    :color="color"
+    :variant="variant"
+    :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
+    @click="isDark = !isDark"
+  />
+</template>

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

@@ -0,0 +1,38 @@
+import type { ButtonProps } from '../../../types';
+export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * @defaultValue 'ghost'
+     */
+    variant?: ButtonProps['variant'];
+}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    color: {
+        type: null;
+        required: false;
+        default: string;
+    };
+    variant: {
+        type: null;
+        required: false;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    color: {
+        type: null;
+        required: false;
+        default: string;
+    };
+    variant: {
+        type: null;
+        required: false;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    color: any;
+    variant: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,37 @@
+<script>
+
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useAppConfig, useColorMode } from "#imports";
+import { useLocalePro } from "../../../composables/useLocalePro";
+defineOptions({ inheritAttrs: false });
+defineProps({});
+const { t } = useLocalePro();
+const colorMode = useColorMode();
+const appConfig = useAppConfig();
+const items = computed(() => [
+  { label: t("colorMode.system"), value: "system", icon: appConfig.ui.icons.system },
+  { label: t("colorMode.light"), value: "light", icon: appConfig.ui.icons.light },
+  { label: t("colorMode.dark"), value: "dark", icon: appConfig.ui.icons.dark }
+]);
+const preference = computed({
+  get() {
+    return items.value.find((option) => option.value === colorMode.preference) || items.value[0];
+  },
+  set(option) {
+    colorMode.preference = option.value;
+  }
+});
+</script>
+
+<template>
+  <USelectMenu
+    v-model="preference"
+    :icon="preference?.icon"
+    :search-input="false"
+    v-bind="$attrs"
+    :items="items"
+  />
+</template>

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

@@ -0,0 +1,5 @@
+import type { SelectMenuProps } from '../../../types';
+export interface ColorModeSelectProps extends /** @vue-ignore */ Pick<SelectMenuProps<any>, 'color' | 'variant' | 'size' | 'trailingIcon' | 'selectedIcon' | 'content' | 'arrow' | 'portal' | 'disabled' | 'ui'> {
+}
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,32 @@
+<script>
+
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useAppConfig, useColorMode } from "#imports";
+import { useLocalePro } from "../../../composables/useLocalePro";
+defineOptions({ inheritAttrs: false });
+defineProps({});
+const { t } = useLocalePro();
+const colorMode = useColorMode();
+const appConfig = useAppConfig();
+const isDark = computed({
+  get() {
+    return colorMode.value === "dark";
+  },
+  set(_isDark) {
+    colorMode.preference = _isDark ? "dark" : "light";
+  }
+});
+</script>
+
+<template>
+  <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>

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

@@ -0,0 +1,5 @@
+import type { SwitchProps } from '../../../types';
+export interface ColorModeSwitchProps extends /** @vue-ignore */ Pick<SwitchProps, 'as' | 'color' | 'size' | 'disabled' | 'ui'> {
+}
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/vue/composables/useAppConfig.d.ts

@@ -0,0 +1 @@
+export declare const useAppConfig: () => any;

package/dist/runtime/vue/composables/useAppConfig.js

@@ -0,0 +1,4 @@
+import { reactive } from "vue";
+import appConfig from "#build/app.config";
+const _appConfig = reactive(appConfig);
+export const useAppConfig = () => _appConfig;

package/dist/runtime/vue/plugins/color-mode.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    install(): void;
+};
+export default _default;

package/dist/runtime/vue/plugins/color-mode.js

@@ -0,0 +1,6 @@
+import { useDark } from "@vueuse/core";
+export default {
+  install() {
+    useDark();
+  }
+};

package/dist/runtime/vue/plugins/head.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    install(app: import("vue").App<any>): void;
+};
+export default _default;

package/dist/runtime/vue/plugins/head.js

@@ -0,0 +1,10 @@
+import { createHead } from "@unhead/vue/client";
+export default {
+  install(app) {
+    if (app._context.provides.usehead) {
+      return;
+    }
+    const head = createHead();
+    app.use(head);
+  }
+};

package/dist/runtime/vue/stubs.d.ts

@@ -0,0 +1,40 @@
+import type { Ref } from 'vue';
+import type { NuxtApp } from '#app';
+export { useHead } from '@unhead/vue';
+export { useRoute, useRouter } from 'vue-router';
+export { useAppConfig } from './composables/useAppConfig';
+export { defineShortcuts } from '../composables/defineShortcuts';
+export { defineLocale } from '../composables/defineLocale';
+export { useLocale } from '../composables/useLocale';
+export declare const useColorMode: () => {
+    forced: boolean;
+    preference?: undefined;
+    readonly value?: undefined;
+} | {
+    preference: "system" | "light" | "dark";
+    readonly value: import("@vueuse/core").BasicColorMode;
+    forced: boolean;
+};
+export declare const useCookie: <T = string>(_name: string, _options?: Record<string, any>) => {
+    value: Ref<T, T>;
+    get: () => T;
+    set: () => void;
+    update: () => void;
+    refresh: () => Promise<Awaited<T>>;
+    remove: () => void;
+};
+export declare const useState: <T>(key: string, init: () => T) => Ref<T>;
+export declare function useNuxtApp(): {
+    isHydrating: boolean;
+    payload: {
+        serverRendered: boolean;
+    };
+    hooks: import("hookable").Hookable<Record<string, any>, string>;
+    hook: <NameT extends string>(name: NameT, function_: any, options?: {
+        allowDeprecated?: boolean;
+    }) => () => void;
+};
+export declare function useRuntimeHook(name: string, fn: (...args: any[]) => void): void;
+export declare function defineNuxtPlugin(plugin: (nuxtApp: NuxtApp) => void): {
+    install(app: import("vue").App<any>): void;
+};

package/dist/runtime/vue/stubs.js

@@ -0,0 +1,74 @@
+import { ref, onScopeDispose } from "vue";
+import { createHooks } from "hookable";
+import appConfig from "#build/app.config";
+import { useColorMode as useColorModeVueUse } from "@vueuse/core";
+export { useHead } from "@unhead/vue";
+export { useRoute, useRouter } from "vue-router";
+export { useAppConfig } from "./composables/useAppConfig.js";
+export { defineShortcuts } from "../composables/defineShortcuts.js";
+export { defineLocale } from "../composables/defineLocale.js";
+export { useLocale } from "../composables/useLocale.js";
+export const useColorMode = () => {
+  if (!appConfig.colorMode) {
+    return {
+      forced: true
+    };
+  }
+  const { store, system } = useColorModeVueUse();
+  return {
+    get preference() {
+      return store.value === "auto" ? "system" : store.value;
+    },
+    set preference(value) {
+      store.value = value === "system" ? "auto" : value;
+    },
+    get value() {
+      return store.value === "auto" ? system.value : store.value;
+    },
+    forced: false
+  };
+};
+export const useCookie = (_name, _options = {}) => {
+  const value = ref(null);
+  return {
+    value,
+    get: () => value.value,
+    set: () => {
+    },
+    update: () => {
+    },
+    refresh: () => Promise.resolve(value.value),
+    remove: () => {
+    }
+  };
+};
+const state = {};
+export const useState = (key, init) => {
+  if (state[key]) {
+    return state[key];
+  }
+  const value = ref(init());
+  state[key] = value;
+  return value;
+};
+const hooks = createHooks();
+export function useNuxtApp() {
+  return {
+    isHydrating: true,
+    payload: { serverRendered: false },
+    hooks,
+    hook: hooks.hook
+  };
+}
+export function useRuntimeHook(name, fn) {
+  const nuxtApp = useNuxtApp();
+  const unregister = nuxtApp.hook(name, fn);
+  onScopeDispose(unregister);
+}
+export function defineNuxtPlugin(plugin) {
+  return {
+    install(app) {
+      app.runWithContext(() => plugin({ vueApp: app }));
+    }
+  };
+}