vueless 0.0.474 → 0.0.475

package/utils/utilPlatform.d.ts

@@ -0,0 +1,6 @@
+export const isMac: boolean;
+export const isPWA: boolean;
+export const isIOS: any;
+export const isAndroid: boolean;
+export const isMobileApp: any;
+export const isWindows: boolean;

package/utils/utilStorybook.d.ts

@@ -0,0 +1,15 @@
+export function getSlotNames(componentName: any): any;
+export function getArgTypes(componentName: any): {
+    defaultTemplate: {
+        table: {
+            disable: boolean;
+        };
+    };
+    slotTemplate: {
+        table: {
+            disable: boolean;
+        };
+    };
+} | undefined;
+export function getSource(defaultConfig: any): any;
+export function getSlotsFragment(defaultTemplate: any): string;

package/utils/utilUI.d.ts

@@ -0,0 +1,68 @@
+export function getDefault(defaultConfig: Object, name: string): Object;
+export function getColor(color: string): string;
+export function setColor(classes: string, color: string): string;
+export function getRandomId(length?: number): string;
+export let vuelessConfig: {};
+export const cx: import("cva").CX;
+export const compose: import("cva").Compose;
+export const classVarianceAuthority: import("cva").CVA;
+export function cva({ base, variants, compoundVariants, defaultVariants }: {
+    base?: string | undefined;
+    variants?: {} | undefined;
+    compoundVariants?: never[] | undefined;
+    defaultVariants?: {} | undefined;
+}): (props?: ({} & ({
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+    className?: never;
+} | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+})) | undefined) => string;

package/utilsTs/utilHelper.d.ts

@@ -0,0 +1,9 @@
+export declare function cloneDeep(entity: unknown, cache?: WeakMap<object, any>): unknown;
+export declare function createDebounce(func: () => void, ms: number): () => void;
+export declare function setTitle({ title, separator, suffix }: {
+    title?: string | undefined;
+    separator?: string | undefined;
+    suffix?: string | undefined;
+}): void;
+export declare const isSSR: boolean;
+export declare const isCSR: boolean;

package/utilsTs/utilHelper.ts

@@ -0,0 +1,70 @@
+/**
+ * Deeply clone given object (same as lodash.cloneDeep).
+ */
+export function cloneDeep(entity: unknown, cache = new WeakMap()): unknown {
+  // primitives
+  if (Object(entity) !== entity || !entity) {
+    return entity;
+  }
+
+  // cyclic reference
+  if (cache.has(entity)) {
+    return cache.get(entity);
+  }
+
+  const result =
+    entity instanceof Set
+      ? new Set(entity)
+      : entity instanceof Map
+        ? new Map(Array.from(entity, ([key, val]) => [key, cloneDeep(val, cache)]))
+        : entity instanceof Date
+          ? new Date(entity)
+          : entity instanceof RegExp
+            ? new RegExp(entity.source, entity.flags)
+            : entity.constructor
+              ? new (entity.constructor as { new (): typeof entity })()
+              : Object.create(null);
+
+  cache.set(entity, result);
+
+  return Object.assign(
+    result,
+    ...Object.keys(entity).map((key) => ({
+      [key]: cloneDeep((entity as Record<string | number, unknown>)[key], cache),
+    })),
+  );
+}
+
+/**
+ * Creates a debounced function with delay (same as lodash.debounce).
+ */
+export function createDebounce(func: () => void, ms: number) {
+  let timeout: ReturnType<typeof setTimeout>;
+
+  return function (...args: []) {
+    clearTimeout(timeout);
+    // @ts-expect-error - this implicitly has type any because it does not have a type annotation.
+    timeout = setTimeout(() => func.apply(this as unknown, args), ms);
+  };
+}
+
+/**
+ * Change page title in runtime by provided config.
+ */
+export function setTitle({ title = "", separator = " / ", suffix = "" }) {
+  if (isCSR) {
+    document.title = title ? title + separator + suffix : suffix;
+  }
+}
+
+/**
+ * Check is code rendering on the server side.
+ * @returns {boolean}
+ */
+export const isSSR = typeof window === "undefined";
+
+/**
+ * Check is code rendering on the client side.
+ * @returns {boolean}
+ */
+export const isCSR = typeof window !== "undefined";

package/utilsTs/utilPlatform.d.ts

@@ -0,0 +1,7 @@
+declare const isWindows: boolean;
+declare const isMac: boolean;
+declare const isPWA: boolean;
+declare const isIOS: boolean;
+declare const isAndroid: boolean;
+declare const isMobileApp: boolean;
+export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows };

package/utilsTs/utilPlatform.ts

@@ -0,0 +1,53 @@
+import { isCSR } from "./utilHelper";
+
+interface ModernNavigator extends Navigator {
+  standalone: string;
+  userAgentData: {
+    platform: string;
+  };
+}
+
+const isWindows = isCSR && checkIsWindows();
+const isMac = isCSR && checkIsMac();
+const isPWA = isCSR && checkIsPWA();
+const isIOS = isCSR && checkIsIOS();
+const isAndroid = isCSR && checkIsAndroid();
+const isMobileApp = isPWA || isIOS || isAndroid;
+
+function checkIsWindows() {
+  return getPlatform().toUpperCase().indexOf("WINDOWS") >= 0;
+}
+
+function checkIsMac() {
+  return getPlatform().toUpperCase().indexOf("MAC") >= 0;
+}
+
+function checkIsPWA() {
+  return !!(navigator as ModernNavigator).standalone;
+}
+
+function checkIsIOS() {
+  const iOSDevices = [
+    "iPad Simulator",
+    "iPhone Simulator",
+    "iPod Simulator",
+    "iPad",
+    "iPhone",
+    "iPod",
+  ];
+
+  const platform = getPlatform();
+  const isIpodIOS13 = platform.includes("Mac") && "ontouchend" in document;
+
+  return iOSDevices.includes(platform) || isIpodIOS13;
+}
+
+function checkIsAndroid() {
+  return getPlatform().toUpperCase().indexOf("ANDROID") >= 0;
+}
+
+function getPlatform() {
+  return (navigator as ModernNavigator).userAgentData?.platform || navigator.platform || "unknown";
+}
+
+export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows };

package/utilsTs/utilStorybook.d.ts

@@ -0,0 +1,24 @@
+interface Types {
+    [key: string]: ArgType | undefined;
+}
+interface ArgType {
+    control?: "text" | "number" | "boolean" | "array" | "select" | false;
+    options?: string[];
+    table?: TableConfig;
+    name?: string;
+    description?: string;
+    type?: string | null;
+    action?: string;
+}
+interface TableConfig {
+    disable?: boolean;
+    defaultValue?: {
+        summary: unknown;
+    };
+    category?: "slots" | "expose" | "Storybook Events";
+}
+export declare function getSlotNames(componentName: string): string[] | undefined;
+export declare function getArgTypes(componentName: string): Partial<Types> | undefined;
+export declare function getSource(defaultConfig: string): string;
+export declare function getSlotsFragment(defaultTemplate: string): string;
+export {};

package/utilsTs/utilStorybook.ts

@@ -0,0 +1,292 @@
+interface WebTypes {
+  framework: string;
+  name: string;
+  version: string;
+  contributions: Contributions;
+}
+
+interface Contributions {
+  html: HtmlContributions;
+}
+
+interface HtmlContributions {
+  "description-markup": string;
+  "types-syntax": string;
+  tags: Tag[];
+}
+
+interface Tag {
+  name: string;
+  description?: string;
+  attributes?: Attribute[];
+  events?: Event[];
+  slots?: Slot[];
+  exposes?: Expose[];
+  source?: Source;
+}
+
+interface Attribute {
+  name: string;
+  required?: boolean;
+  description?: string;
+  value: AttributeValue;
+  default?: unknown;
+}
+
+interface AttributeValue {
+  kind: string;
+  type: string;
+}
+
+interface Event {
+  name: string;
+  description?: string;
+  properties?: EventProperty[];
+}
+
+interface EventProperty {
+  type: string[];
+  name: string;
+  description?: string;
+}
+
+interface Slot {
+  name: string;
+  description?: string;
+  scoped?: boolean;
+  bindings?: SlotBinding[];
+}
+
+interface SlotBinding {
+  type: string;
+  name: string;
+  description?: string;
+}
+
+interface Expose {
+  name: string;
+  description?: string;
+  properties: ExposeProperty[];
+}
+
+interface ExposeProperty {
+  type: string;
+  description?: string;
+}
+
+interface Source {
+  module: string;
+  symbol: string;
+}
+
+interface Types {
+  [key: string]: ArgType | undefined;
+}
+
+interface ArgType {
+  control?: "text" | "number" | "boolean" | "array" | "select" | false;
+  options?: string[];
+  table?: TableConfig;
+  name?: string;
+  description?: string;
+  type?: string | null;
+  action?: string;
+}
+
+interface TableConfig {
+  disable?: boolean;
+  defaultValue?: { summary: unknown };
+  category?: "slots" | "expose" | "Storybook Events";
+}
+
+/* Load Web-Types from the project root. */
+const [webTypes]: WebTypes[] = Object.values(
+  import.meta.glob("/web-types.json", { eager: true, import: "default" }),
+);
+
+const getComponentData = (componentName: string) => {
+  return webTypes.contributions.html.tags.find((item: Tag) => item.name === componentName);
+};
+
+export function getSlotNames(componentName: string) {
+  return getComponentData(componentName)?.slots?.map((item) => item.name);
+}
+
+export function getArgTypes(componentName: string) {
+  const component = getComponentData(componentName);
+
+  if (!component) return;
+
+  const types: Partial<Types> = {
+    // Hide default template arg in docs.
+    defaultTemplate: { table: { disable: true } },
+    // Hide slot template arg in docs.
+    slotTemplate: { table: { disable: true } },
+  };
+
+  component.attributes?.forEach((attribute: Attribute) => {
+    const type = attribute.value.type;
+
+    if (type === "string" || type.includes("string")) {
+      types[attribute.name] = {
+        control: "text",
+        table: {
+          defaultValue: { summary: attribute.default || "" },
+        },
+      };
+    }
+
+    if (type === "number") {
+      types[attribute.name] = {
+        control: "number",
+        table: {
+          defaultValue: { summary: attribute.default || "" },
+        },
+      };
+    }
+
+    if (type === "boolean") {
+      types[attribute.name] = {
+        control: "boolean",
+        table: {
+          defaultValue: { summary: attribute.default || "" },
+        },
+      };
+    }
+
+    if (type === "array") {
+      types[attribute.name] = {
+        control: "array",
+        table: {
+          defaultValue: { summary: attribute.default || [] },
+        },
+      };
+    }
+
+    if (type.includes("|")) {
+      const options = attribute.value.type.replace(/['|]/g, "").split(/\s+/);
+
+      if (options.length > 1) {
+        types[attribute.name] = {
+          options,
+          control: "select",
+          table: {
+            defaultValue: { summary: attribute.default || "" },
+          },
+        };
+      } else {
+        types[attribute.name] = {
+          control: type.split("|")[0] as ArgType["control"],
+          table: {
+            defaultValue: { summary: attribute.default || "" },
+          },
+        };
+      }
+    }
+
+    if (attribute.description?.includes("@ignore")) {
+      types[attribute.name] = {
+        table: {
+          disable: true,
+        },
+      };
+    }
+  });
+
+  component.slots?.forEach((slot) => {
+    const bindings: string[] = [];
+
+    slot.bindings?.forEach((binding: SlotBinding) => {
+      if (binding.name === "name") return;
+
+      const description = binding.description ? ` (${binding.description})` : "";
+
+      bindings.push(`${binding.name}: ${binding.type}${description}`);
+    });
+
+    types[`${slot.name}Slot`] = {
+      name: slot.name,
+      description: slot.description,
+      type: slot.bindings ? `{ ${bindings.join(", ")} }` : null,
+      control: "text",
+      table: { category: "slots" },
+    };
+
+    // Hide autogenerated slot docs, but keep props with the same name
+    if (!component.attributes?.map((item) => item.name)?.includes(slot.name)) {
+      types[slot.name] = {
+        table: {
+          disable: true,
+        },
+      };
+    }
+  });
+
+  component.exposes?.forEach((expose) => {
+    const properties: string[] = [];
+
+    expose.properties?.forEach((property: ExposeProperty) => {
+      const description = property.description ? ` (${property.description})` : "";
+
+      properties.push(`${property.type}${description}`);
+    });
+
+    types[`${expose.name}Expose`] = {
+      type: expose.properties ? properties.join(", ") : null,
+      name: expose.name,
+      description: expose.description,
+      control: false,
+      table: { category: "expose" },
+    };
+
+    // Hide autogenerated expose docs, but keep props with the same name
+    if (!component.attributes?.map((item) => item.name)?.includes(expose.name)) {
+      types[expose.name] = {
+        table: {
+          disable: true,
+        },
+      };
+    }
+  });
+
+  component.events?.forEach((event) => {
+    const properties: string[] = [];
+
+    event.properties?.forEach((property: EventProperty) => {
+      const description = property.description ? ` (${property.description})` : "";
+
+      properties.push(`${property.name}: ${property.type}${description}`);
+    });
+
+    types[event.name] = {
+      type: event.properties ? properties.join(", ") : null,
+      name: event.name,
+      description: event.description,
+    };
+
+    if (import.meta.env.STORYBOOK_FULL) {
+      const eventName = "on" + event.name.charAt(0).toUpperCase() + event.name.slice(1);
+
+      types[eventName] = {
+        action: event.name,
+        table: { category: "Storybook Events" },
+      };
+    }
+  });
+
+  return types;
+}
+
+export function getSource(defaultConfig: string) {
+  return defaultConfig.replace("export default /*tw*/ ", "").replace(";", "");
+}
+
+export function getSlotsFragment(defaultTemplate: string) {
+  return `
+  <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
+    <template v-if="slot === 'default' && !args['defaultSlot']">${defaultTemplate || ""}</template>
+    <template v-else-if="slot === 'default' && args['defaultSlot']">{{ args['defaultSlot'] }}</template>
+    <template v-else-if="args[slot + 'Slot']">{{ args[slot + 'Slot'] }}</template>
+  </template>
+`;
+}

package/utilsTs/utilTailwind.d.ts

@@ -0,0 +1 @@
+export declare let fullTailwindConfig: any;

package/utilsTs/utilTailwind.ts

@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import resolveConfig from "tailwindcss/resolveConfig";
+import { isSSR, isCSR } from "./utilHelper";
+
+import type { Config } from "tailwindcss";
+
+/**
+ * Load Tailwind config from the project root.
+ * Both for server and client side renderings.
+ * IIFE for SSR is used to prevent top level await issue.
+ */
+export let fullTailwindConfig: any;
+
+if (isSSR) {
+  /* Load Tailwind config from the project root in IIFE (no top-level await). */
+  (async () => {
+    try {
+      const filePath = `${process.cwd()}/tailwind.config`;
+
+      let tailwindConfig = (await import(/* @vite-ignore */ `${filePath}.js`)).default;
+
+      if (!tailwindConfig) {
+        tailwindConfig = (await import(/* @vite-ignore */ `${filePath}.ts`)).default;
+      }
+
+      fullTailwindConfig = resolveConfig(tailwindConfig);
+    } catch {}
+  })();
+}
+
+if (isCSR) {
+  const tailwindConfig = Object.values(
+    import.meta.glob("/tailwind.config.{js,ts}", { eager: true, import: "default" }),
+  )[0] as Config;
+
+  fullTailwindConfig = resolveConfig(tailwindConfig);
+}

package/utilsTs/utilTheme.d.ts

@@ -0,0 +1,8 @@
+import type { ThemeConfig } from "../types";
+interface InternalThemeConfig extends ThemeConfig {
+    systemDarkMode?: boolean;
+}
+export declare function themeInit(): void;
+export declare function setTheme(config?: InternalThemeConfig): string;
+export declare function convertHexInRgb(hex: string): string;
+export {};