@eslamdevui/ui 3.2.0-beta.1

package/dist/runtime/utils/content.js

@@ -0,0 +1,51 @@
+export function mapContentNavigationItem(item, options) {
+  const navMap = {
+    [options?.labelAttribute || "title"]: "label",
+    path: "to"
+  };
+  return Object.keys(item).reduce((link, key) => {
+    const typedKey = key;
+    const value = item[typedKey];
+    if (value) {
+      const mappedKey = navMap[key] || key;
+      link[mappedKey] = value;
+    }
+    return link;
+  }, {});
+}
+export function mapContentNavigation(navigation, options) {
+  return navigation.map((item) => mapContentNavigationItem(item, options));
+}
+export function findPageHeadline(navigation, page) {
+  if (!navigation?.length || !page) {
+    return;
+  }
+  for (const link of navigation) {
+    if (link.children) {
+      for (const childLink of link.children) {
+        if (childLink.path === page.path) {
+          return link.title;
+        }
+      }
+      const headline = findPageHeadline(link.children, page);
+      if (headline) {
+        return headline;
+      }
+    }
+  }
+  return;
+}
+export function findPageBreadcrumb(navigation, page) {
+  if (!navigation?.length || !page) {
+    return [];
+  }
+  return navigation.reduce((breadcrumb, link) => {
+    if (page.path && (page.path + "/").startsWith(link.path + "/")) {
+      breadcrumb.push(link);
+      if (link.children) {
+        breadcrumb.push(...findPageBreadcrumb(link.children, page));
+      }
+    }
+    return breadcrumb;
+  }, []);
+}

package/dist/runtime/utils/dashboard.d.ts

@@ -0,0 +1,10 @@
+import type { Ref } from 'vue';
+import type { UseResizableProps } from '../composables/useResizable';
+export interface DashboardContext extends Pick<UseResizableProps, 'storage' | 'storageKey' | 'persistent' | 'unit'> {
+    sidebarOpen?: Ref<boolean>;
+    sidebarCollapsed?: Ref<boolean>;
+    toggleSearch?: () => void;
+    toggleSidebar?: () => void;
+    collapseSidebar?: (collapsed: boolean) => void;
+}
+export declare const useDashboard: <T extends DashboardContext | null | undefined = DashboardContext>(fallback?: T | undefined) => T extends null ? DashboardContext | null : DashboardContext, provideDashboardContext: (contextValue: DashboardContext) => DashboardContext;

package/dist/runtime/utils/dashboard.js

@@ -0,0 +1,5 @@
+import { createContext } from "reka-ui";
+export const [
+  useDashboard,
+  provideDashboardContext
+] = createContext("DashboardGroup");

package/dist/runtime/utils/form.d.ts

@@ -0,0 +1,13 @@
+import type { StandardSchemaV1 } from '@standard-schema/spec';
+import type { ValidationError as JoiError, Schema as JoiSchema } from 'joi';
+import type { ObjectSchema as YupObjectSchema, ValidationError as YupError } from 'yup';
+import type { Struct } from 'superstruct';
+import type { FormSchema, ValidateReturnSchema } from '../types/form';
+export declare function isYupSchema(schema: any): schema is YupObjectSchema<any>;
+export declare function isYupError(error: any): error is YupError;
+export declare function isSuperStructSchema(schema: any): schema is Struct<any, any>;
+export declare function isJoiSchema(schema: any): schema is JoiSchema;
+export declare function isJoiError(error: any): error is JoiError;
+export declare function isStandardSchema(schema: any): schema is StandardSchemaV1;
+export declare function validateStandardSchema(state: any, schema: StandardSchemaV1): Promise<ValidateReturnSchema<typeof state>>;
+export declare function validateSchema<T extends object>(state: T, schema: FormSchema<T>): Promise<ValidateReturnSchema<typeof state>>;

package/dist/runtime/utils/form.js

@@ -0,0 +1,108 @@
+export function isYupSchema(schema) {
+  return schema.validate && schema.__isYupSchema__;
+}
+export function isYupError(error) {
+  return error.inner !== void 0;
+}
+export function isSuperStructSchema(schema) {
+  return "schema" in schema && typeof schema.coercer === "function" && typeof schema.validator === "function" && typeof schema.refiner === "function";
+}
+export function isJoiSchema(schema) {
+  return schema.validateAsync !== void 0 && schema.id !== void 0;
+}
+export function isJoiError(error) {
+  return error.isJoi === true;
+}
+export function isStandardSchema(schema) {
+  return "~standard" in schema;
+}
+export async function validateStandardSchema(state, schema) {
+  const result = await schema["~standard"].validate(state);
+  if (result.issues) {
+    return {
+      errors: result.issues?.map((issue) => ({
+        name: issue.path?.map((item) => typeof item === "object" ? item.key : item).join(".") || "",
+        message: issue.message
+      })) || [],
+      result: null
+    };
+  }
+  return {
+    errors: null,
+    result: result.value
+  };
+}
+async function validateYupSchema(state, schema) {
+  try {
+    const result = await schema.validate(state, { abortEarly: false });
+    return {
+      errors: null,
+      result
+    };
+  } catch (error) {
+    if (isYupError(error)) {
+      const errors = error.inner.map((issue) => ({
+        name: issue.path ?? "",
+        message: issue.message
+      }));
+      return {
+        errors,
+        result: null
+      };
+    } else {
+      throw error;
+    }
+  }
+}
+async function validateSuperstructSchema(state, schema) {
+  const [err, result] = schema.validate(state);
+  if (err) {
+    const errors = err.failures().map((error) => ({
+      message: error.message,
+      name: error.path.join(".")
+    }));
+    return {
+      errors,
+      result: null
+    };
+  }
+  return {
+    errors: null,
+    result
+  };
+}
+async function validateJoiSchema(state, schema) {
+  try {
+    const result = await schema.validateAsync(state, { abortEarly: false });
+    return {
+      errors: null,
+      result
+    };
+  } catch (error) {
+    if (isJoiError(error)) {
+      const errors = error.details.map((issue) => ({
+        name: issue.path.join("."),
+        message: issue.message
+      }));
+      return {
+        errors,
+        result: null
+      };
+    } else {
+      throw error;
+    }
+  }
+}
+export function validateSchema(state, schema) {
+  if (isStandardSchema(schema)) {
+    return validateStandardSchema(state, schema);
+  } else if (isJoiSchema(schema)) {
+    return validateJoiSchema(state, schema);
+  } else if (isYupSchema(schema)) {
+    return validateYupSchema(state, schema);
+  } else if (isSuperStructSchema(schema)) {
+    return validateSuperstructSchema(state, schema);
+  } else {
+    throw new Error("Form validation failed: Unsupported form schema");
+  }
+}

package/dist/runtime/utils/fuse.d.ts

@@ -0,0 +1,4 @@
+import type { FuseResult } from 'fuse.js';
+export declare function highlight<T>(item: T & {
+    matches?: FuseResult<T>['matches'];
+}, searchTerm: string, forceKey?: string, omitKeys?: string[]): string | undefined;

package/dist/runtime/utils/fuse.js

@@ -0,0 +1,63 @@
+function truncateHTMLFromStart(html, maxLength) {
+  let truncated = "";
+  let totalLength = 0;
+  let insideTag = false;
+  for (let i = html.length - 1; i >= 0; i--) {
+    if (html[i] === ">") {
+      insideTag = true;
+    } else if (html[i] === "<") {
+      insideTag = false;
+      truncated = html[i] + truncated;
+      continue;
+    }
+    if (!insideTag) {
+      totalLength++;
+    }
+    if (totalLength <= maxLength) {
+      truncated = html[i] + truncated;
+    } else {
+      truncated = "..." + truncated;
+      break;
+    }
+  }
+  return truncated;
+}
+export function highlight(item, searchTerm, forceKey, omitKeys) {
+  function generateHighlightedText(value, indices = []) {
+    value = value || "";
+    let content = "";
+    let nextUnhighlightedRegionStartingIndex = 0;
+    indices.forEach((region) => {
+      if (region.length === 2 && region[0] === region[1]) {
+        return;
+      }
+      const lastIndiceNextIndex = region[1] + 1;
+      const isMatched = lastIndiceNextIndex - region[0] >= searchTerm.length;
+      content += [
+        value.substring(nextUnhighlightedRegionStartingIndex, region[0]),
+        isMatched && `<mark>`,
+        value.substring(region[0], lastIndiceNextIndex),
+        isMatched && "</mark>"
+      ].filter(Boolean).join("");
+      nextUnhighlightedRegionStartingIndex = lastIndiceNextIndex;
+    });
+    content += value.substring(nextUnhighlightedRegionStartingIndex);
+    const markIndex = content.indexOf("<mark>");
+    if (markIndex !== -1) {
+      content = truncateHTMLFromStart(content, content.length - markIndex);
+    }
+    return content;
+  }
+  if (!item.matches?.length) {
+    return;
+  }
+  for (const match of item.matches) {
+    if (forceKey && match.key !== forceKey) {
+      continue;
+    }
+    if (omitKeys?.includes(match.key)) {
+      continue;
+    }
+    return generateHighlightedText(match.value, match.indices);
+  }
+}

package/dist/runtime/utils/index.d.ts

@@ -0,0 +1,12 @@
+export declare function pick<Data extends object, Keys extends keyof Data>(data: Data, keys: Keys[]): Pick<Data, Keys>;
+export declare function omit<Data extends object, Keys extends keyof Data>(data: Data, keys: Keys[]): Omit<Data, Keys>;
+export declare function get(object: Record<string, any> | undefined, path: (string | number)[] | string, defaultValue?: any): any;
+export declare function set(object: Record<string, any>, path: (string | number)[] | string, value: any): void;
+export declare function looseToNumber(val: any): any;
+export declare function compare<T>(value?: T, currentValue?: T, comparator?: string | ((a: T, b: T) => boolean)): boolean;
+export declare function isArrayOfArray<A>(item: A[] | A[][]): item is A[][];
+export declare function getSlotChildrenText(children: any): string;
+export declare function transformUI(ui: Record<string, ((args: {
+    class?: string;
+}) => any) | any>, uiProp?: Record<string, string>): Record<string, any>;
+export * from './content';

package/dist/runtime/utils/index.js

@@ -0,0 +1,89 @@
+import { isEqual } from "ohash/utils";
+export function pick(data, keys) {
+  const result = {};
+  for (const key of keys) {
+    result[key] = data[key];
+  }
+  return result;
+}
+export function omit(data, keys) {
+  const result = { ...data };
+  for (const key of keys) {
+    delete result[key];
+  }
+  return result;
+}
+export function get(object, path, defaultValue) {
+  if (typeof path === "string") {
+    path = path.split(".").map((key) => {
+      const numKey = Number(key);
+      return Number.isNaN(numKey) ? key : numKey;
+    });
+  }
+  let result = object;
+  for (const key of path) {
+    if (result === void 0 || result === null) {
+      return defaultValue;
+    }
+    result = result[key];
+  }
+  return result !== void 0 ? result : defaultValue;
+}
+export function set(object, path, value) {
+  if (typeof path === "string") {
+    path = path.split(".").map((key) => {
+      const numKey = Number(key);
+      return Number.isNaN(numKey) ? key : numKey;
+    });
+  }
+  path.reduce((acc, key, i) => {
+    if (acc[key] === void 0) acc[key] = {};
+    if (i === path.length - 1) acc[key] = value;
+    return acc[key];
+  }, object);
+}
+export function looseToNumber(val) {
+  const n = Number.parseFloat(val);
+  return Number.isNaN(n) ? val : n;
+}
+export function compare(value, currentValue, comparator) {
+  if (value === void 0 || currentValue === void 0) {
+    return false;
+  }
+  if (typeof value === "string") {
+    return value === currentValue;
+  }
+  if (typeof comparator === "function") {
+    return comparator(value, currentValue);
+  }
+  if (typeof comparator === "string") {
+    return get(value, comparator) === get(currentValue, comparator);
+  }
+  return isEqual(value, currentValue);
+}
+export function isArrayOfArray(item) {
+  return Array.isArray(item[0]);
+}
+export function getSlotChildrenText(children) {
+  if (!children) return "";
+  if (typeof children === "string") return children;
+  if (Array.isArray(children)) {
+    return children.map(getSlotChildrenText).join("");
+  }
+  if (typeof children === "object") {
+    if (children.children) {
+      return getSlotChildrenText(children.children);
+    }
+    if (typeof children.default === "function") {
+      return getSlotChildrenText(children.default());
+    }
+  }
+  return "";
+}
+export function transformUI(ui, uiProp) {
+  return Object.entries(ui).reduce((acc, [key, value]) => {
+    acc[key] = typeof value === "function" ? value({ class: uiProp?.[key] }) : value;
+    return acc;
+  }, uiProp ? { ...uiProp } : {});
+}
+export * from "./content.js";

package/dist/runtime/utils/link.d.ts

@@ -0,0 +1,7 @@
+import type { LinkProps } from '../types';
+export declare function pickLinkProps(link: LinkProps & {
+    [key: string]: any;
+}): import("@vueuse/shared").ReactivePickReturn<LinkProps & {
+    [key: string]: any;
+}, string>;
+export declare function isPartiallyEqual(item1: any, item2: any): boolean;

package/dist/runtime/utils/link.js

@@ -0,0 +1,47 @@
+import { reactivePick } from "@vueuse/core";
+import { isEqual, diff } from "ohash/utils";
+export function pickLinkProps(link) {
+  const keys = Object.keys(link);
+  const ariaKeys = keys.filter((key) => key.startsWith("aria-"));
+  const dataKeys = keys.filter((key) => key.startsWith("data-"));
+  const propsToInclude = [
+    "active",
+    "activeClass",
+    "ariaCurrentValue",
+    "as",
+    "disabled",
+    "exact",
+    "exactActiveClass",
+    "exactHash",
+    "exactQuery",
+    "external",
+    "href",
+    "download",
+    "inactiveClass",
+    "noPrefetch",
+    "noRel",
+    "prefetch",
+    "prefetchedClass",
+    "rel",
+    "replace",
+    "target",
+    "to",
+    "type",
+    "title",
+    "onClick",
+    ...ariaKeys,
+    ...dataKeys
+  ];
+  return reactivePick(link, ...propsToInclude);
+}
+export function isPartiallyEqual(item1, item2) {
+  const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
+    if (q.type === "added") {
+      filtered.add(q.key);
+    }
+    return filtered;
+  }, /* @__PURE__ */ new Set());
+  const item1Filtered = Object.fromEntries(Object.entries(item1).filter(([key]) => !diffedKeys.has(key)));
+  const item2Filtered = Object.fromEntries(Object.entries(item2).filter(([key]) => !diffedKeys.has(key)));
+  return isEqual(item1Filtered, item2Filtered);
+}

package/dist/runtime/utils/locale.d.ts

@@ -0,0 +1,15 @@
+import type { Ref } from 'vue';
+import type { Locale, Direction } from '../types/locale';
+import type { MaybeRef } from '@vueuse/core';
+export type TranslatorOption = Record<string, string | number>;
+export type Translator = (path: string, option?: TranslatorOption) => string;
+export type LocaleContext<M> = {
+    locale: Ref<Locale<M>>;
+    lang: Ref<string>;
+    dir: Ref<Direction>;
+    code: Ref<string>;
+    t: Translator;
+};
+export declare function buildTranslator<M>(locale: MaybeRef<Locale<M>>): Translator;
+export declare function translate<M>(path: string, option: undefined | TranslatorOption, locale: Locale<M>): string;
+export declare function buildLocaleContext<M>(locale: MaybeRef<Locale<M>>): LocaleContext<M>;

package/dist/runtime/utils/locale.js

@@ -0,0 +1,25 @@
+import { computed, isRef, ref, unref } from "vue";
+import { get } from "./index.js";
+export function buildTranslator(locale) {
+  return (path, option) => translate(path, option, unref(locale));
+}
+export function translate(path, option, locale) {
+  const prop = get(locale, `messages.${path}`, path);
+  return prop.replace(
+    /\{(\w+)\}/g,
+    (_, key) => `${option?.[key] ?? `{${key}}`}`
+  );
+}
+export function buildLocaleContext(locale) {
+  const lang = computed(() => unref(locale).name);
+  const code = computed(() => unref(locale).code);
+  const dir = computed(() => unref(locale).dir);
+  const localeRef = isRef(locale) ? locale : ref(locale);
+  return {
+    lang,
+    code,
+    dir,
+    locale: localeRef,
+    t: buildTranslator(locale)
+  };
+}

package/dist/runtime/utils/tv.d.ts

@@ -0,0 +1 @@
+export declare const tv: import("tailwind-variants").CreateTV;

package/dist/runtime/utils/tv.js

@@ -0,0 +1,4 @@
+import { createTV } from "tailwind-variants";
+import appConfig from "#build/app.config";
+const appConfigTv = appConfig;
+export const tv = /* @__PURE__ */ createTV(appConfigTv.ui?.tv);

package/dist/runtime/vue/components/Icon.vue

@@ -0,0 +1,14 @@
+<script>
+
+</script>
+
+<script setup>
+import { Icon as IconifyIcon } from "@iconify/vue";
+defineProps({
+  name: { type: String, required: true }
+});
+</script>
+
+<template>
+  <IconifyIcon :icon="name.replace(/^i-/, '')" />
+</template>

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

@@ -0,0 +1,5 @@
+export interface IconProps {
+    name: string;
+}
+declare const _default: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,169 @@
+<script>
+import theme from "#build/ui/link";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { defu } from "defu";
+import { isEqual } from "ohash/utils";
+import { useForwardProps } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
+import { hasProtocol } from "ufo";
+import { useRoute, RouterLink } from "vue-router";
+import { useAppConfig } from "#imports";
+import { tv } from "../../utils/tv";
+import { isPartiallyEqual } from "../../utils/link";
+import ULinkBase from "../../components/LinkBase.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: "button" },
+  type: { type: null, required: false, default: "button" },
+  disabled: { type: Boolean, required: false },
+  active: { type: Boolean, required: false, default: void 0 },
+  exact: { type: Boolean, required: false },
+  exactQuery: { type: [Boolean, String], required: false },
+  exactHash: { type: Boolean, required: false },
+  inactiveClass: { type: String, required: false, default: "" },
+  custom: { type: Boolean, required: false },
+  raw: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  to: { type: null, required: false },
+  href: { type: null, required: false },
+  external: { type: Boolean, required: false },
+  target: { type: [String, Object, null], required: false },
+  rel: { type: [String, Object, null], required: false },
+  noRel: { type: Boolean, required: false },
+  prefetchedClass: { type: String, required: false },
+  prefetch: { type: Boolean, required: false },
+  prefetchOn: { type: [String, Object], required: false },
+  noPrefetch: { type: Boolean, required: false },
+  activeClass: { type: String, required: false, default: "" },
+  exactActiveClass: { type: String, required: false },
+  ariaCurrentValue: { type: String, required: false, default: "page" },
+  viewTransition: { type: Boolean, required: false },
+  replace: { type: Boolean, required: false }
+});
+defineSlots();
+const route = useRoute();
+const appConfig = useAppConfig();
+const routerLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "exactQuery", "exactHash", "activeClass", "inactiveClass", "to", "href", "raw", "custom", "class"));
+const ui = computed(() => tv({
+  extend: tv(theme),
+  ...defu({
+    variants: {
+      active: {
+        true: props.activeClass,
+        false: props.inactiveClass
+      }
+    }
+  }, appConfig.ui?.link || {})
+}));
+const to = computed(() => props.to ?? props.href);
+const isExternal = computed(() => {
+  if (props.external) {
+    return true;
+  }
+  if (!to.value) {
+    return false;
+  }
+  return typeof to.value === "string" && hasProtocol(to.value, { acceptRelative: true });
+});
+function isLinkActive({ route: linkRoute, isActive, isExactActive }) {
+  if (props.active !== void 0) {
+    return props.active;
+  }
+  if (!to.value) {
+    return false;
+  }
+  if (props.exactQuery === "partial") {
+    if (!isPartiallyEqual(linkRoute.query, route.query)) return false;
+  } else if (props.exactQuery === true) {
+    if (!isEqual(linkRoute.query, route.query)) return false;
+  }
+  if (props.exactHash && linkRoute.hash !== route.hash) {
+    return false;
+  }
+  if (props.exact && isExactActive) {
+    return true;
+  }
+  if (!props.exact && isActive) {
+    return true;
+  }
+  return false;
+}
+function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
+  const active = isLinkActive({ route: route2, isActive, isExactActive });
+  if (props.raw) {
+    return [props.class, active ? props.activeClass : props.inactiveClass];
+  }
+  return ui.value({ class: props.class, active, disabled: props.disabled });
+}
+</script>
+
+<template>
+  <template v-if="!isExternal && !!to">
+    <RouterLink v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive }" v-bind="routerLinkProps" :to="to" custom>
+      <template v-if="custom">
+        <slot
+          v-bind="{
+  ...$attrs,
+  ...exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
+  as,
+  type,
+  disabled,
+  href,
+  navigate,
+  active: isLinkActive({ route: linkRoute, isActive, isExactActive })
+}"
+        />
+      </template>
+      <ULinkBase
+        v-else
+        v-bind="{
+  ...$attrs,
+  ...exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
+  as,
+  type,
+  disabled,
+  href,
+  navigate
+}"
+        :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
+      >
+        <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
+      </ULinkBase>
+    </RouterLink>
+  </template>
+
+  <template v-else>
+    <template v-if="custom">
+      <slot
+        v-bind="{
+  ...$attrs,
+  as,
+  type,
+  disabled,
+  href: to,
+  target: isExternal ? '_blank' : void 0,
+  active,
+  isExternal
+}"
+      />
+    </template>
+    <ULinkBase
+      v-else
+      v-bind="{
+  ...$attrs,
+  as,
+  type,
+  disabled,
+  href: to,
+  target: isExternal ? '_blank' : void 0,
+  isExternal
+}"
+      :class="resolveLinkClass()"
+    >
+      <slot :active="active" />
+    </ULinkBase>
+  </template>
+</template>