vueless 0.0.478-beta.3 → 0.0.479

package/types.ts

@@ -1,223 +0,0 @@
-import { hasSlotContent } from "./composablesTs/useUI.ts";
-
-// TODO: Import all components here
-import UTextDefaultConfig from "./ui.text-block/config.ts";
-import UButtonDefaultConfig from "./ui.button/config.ts";
-
-import type { ComputedRef } from "vue";
-
-export interface ThemeConfig {
-  /**
-   * Components brand (primary) color.
-   */
-  brand?: BrandColors;
-
-  /**
-   * Components gray (secondary) color.
-   */
-  gray?: GrayColors;
-
-  /**
-   * Default components rounding (border-radius).
-   */
-  rounding?: number;
-
-  /**
-   * Default components ring width.
-   */
-  ring?: number;
-
-  /**
-   * Default components ring offset width.
-   */
-  ringOffset?: number;
-
-  /**
-   * Default components ring color for light theme.
-   */
-  ringOffsetColorLight?: string;
-
-  /**
-   * Default components ring color for dark theme.
-   */
-  ringOffsetColorDark?: string;
-
-  /**
-   * Default dark mode state.
-   */
-  darkMode?: boolean;
-}
-
-export interface Config extends ThemeConfig {
-  /**
-   * Component classes merge behavior.
-   * – merge (default) – smartly merge provided custom classes with default config classes.
-   * – replace – replace default config keys by provided custom keys (override only provided keys, the rest classes will be taken from the default config).
-   * – override – override default config by provided custom config (keeps only custom config, removes all default classes).
-   */
-  strategy?: Strategies;
-
-  /**
-   * Component configs.
-   */
-  component?: Partial<Components>;
-
-  /**
-   * Tailwind-merge config extension for custom classes.
-   * All lists of rules available here:
-   * https://github.com/dcastil/tailwind-merge/blob/v2.3.0/src/lib/default-config.ts.
-   */
-  tailwindMerge?: UnknownObject;
-}
-
-export type UnknownObject = Record<string, unknown>;
-export type ComponentNames = keyof Components; // keys union
-export type Strategies = "merge" | "replace" | "override";
-export type GrayColors = "slate" | "cool" | "zinc" | "neutral" | "stone";
-export type BrandColors =
-  | "grayscale"
-  | "red"
-  | "orange"
-  | "amber"
-  | "yellow"
-  | "lime"
-  | "green"
-  | "emerald"
-  | "teal"
-  | "cyan"
-  | "sky"
-  | "blue"
-  | "indigo"
-  | "violet"
-  | "purple"
-  | "fuchsia"
-  | "pink"
-  | "rose";
-
-export interface Components {
-  UText?: Partial<typeof UTextDefaultConfig>;
-  UButton?: Partial<typeof UButtonDefaultConfig>;
-}
-
-export interface Component {
-  i18n?: UnknownObject;
-  defaults?: Defaults;
-  safelist?: () => TailwindSafelist[];
-  strategy?: Strategies;
-  transition?: Transition;
-  safelistColors?: BrandColors;
-  [key: string]: (CVA & NestedComponent) | object | string | undefined;
-}
-
-export type Defaults = {
-  color?: string;
-  [key: string]: unknown;
-};
-
-export interface NestedComponent {
-  component: string;
-  [key: string]: Record<string, string | object> | string;
-}
-
-export interface Transition {
-  enterFromClass?: string;
-  enterActiveClass?: string;
-  enterToClass?: string;
-  leaveFromClass?: string;
-  leaveActiveClass?: string;
-  leaveToClass?: string;
-}
-
-export interface CVA {
-  base?: string;
-  variants?: UnknownObject;
-  compoundVariants?: CVACompoundVariants[] & never[];
-  defaultVariants?: UnknownObject;
-}
-
-export interface CVACompoundVariants {
-  class: string;
-  [key: string]: string | number | undefined | null;
-}
-
-export interface VueAttrs {
-  id?: string;
-  class?: string;
-  value?: string;
-}
-
-export interface UseAttrs {
-  hasSlotContent: typeof hasSlotContent;
-  [key: string]: object | undefined;
-}
-
-export interface KeyAttrs extends VueAttrs {
-  "vl-component"?: string | null;
-  "vl-key"?: string | null;
-  "vl-child-component"?: string | null;
-  "vl-child-key"?: string | null;
-  config?: UnknownObject;
-  [key: string]: string | UnknownObject | undefined | null;
-}
-
-export interface KeysToExtend {
-  base?: ComputedRef;
-  extend?: ComputedRef;
-}
-
-export interface CreateVuelessOptions {
-  i18n?: Record<string, string | object>;
-}
-
-export interface TailwindSafelist {
-  pattern: string;
-  variants?: string[];
-}
-
-export interface TailwindColorShades {
-  DEFAULT: string;
-  50: string;
-  100: string;
-  200: string;
-  300: string;
-  400: string;
-  500: string;
-  600: string;
-  700: string;
-  800: string;
-  900: string;
-  950: string;
-}
-
-export interface VuelessCssVariables {
-  "--vl-ring": string;
-  "--vl-ring-offset": string;
-  "--vl-ring-offset-color": string;
-  "--vl-rounding": string;
-  /* Gray CSS variables */
-  "--vl-color-gray-50": string;
-  "--vl-color-gray-100": string;
-  "--vl-color-gray-200": string;
-  "--vl-color-gray-300": string;
-  "--vl-color-gray-400": string;
-  "--vl-color-gray-500": string;
-  "--vl-color-gray-600": string;
-  "--vl-color-gray-700": string;
-  "--vl-color-gray-800": string;
-  "--vl-color-gray-900": string;
-  "--vl-color-gray-950": string;
-  "--vl-color-gray-default": string;
-  /* Brand CSS variables */
-  "--vl-color-brand-50": string;
-  "--vl-color-brand-100": string;
-  "--vl-color-brand-200": string;
-  "--vl-color-brand-300": string;
-  "--vl-color-brand-400": string;
-  "--vl-color-brand-500": string;
-  "--vl-color-brand-600": string;
-  "--vl-color-brand-700": string;
-  "--vl-color-brand-800": string;
-  "--vl-color-brand-900": string;
-  "--vl-color-brand-950": string;
-  "--vl-color-brand-default": string;
-}

package/ui.text-block/types.ts

@@ -1,33 +0,0 @@
-import defaultConfig from "./config.ts";
-
-export interface UTextProps {
-  /**
-   * HTML markdown or plain text.
-   */
-  html?: string;
-
-  /**
-   * Text size.
-   */
-  size?: "sm" | "md" | "lg";
-
-  /**
-   * Text align.
-   */
-  align?: "left" | "center" | "right";
-
-  /**
-   * Remove line height (useful for 1-line text).
-   */
-  line?: boolean;
-
-  /**
-   * Component config object.
-   */
-  config?: Partial<typeof defaultConfig>;
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest?: string;
-}

package/ui.text-block/useAttrs.ts

@@ -1,20 +0,0 @@
-import useUI from "../composablesTs/useUI.ts";
-
-import defaultConfig from "./config.ts";
-
-import type { UseAttrs } from "../types.ts";
-import type { UTextProps } from "./types.ts";
-
-type Config = Partial<typeof defaultConfig>;
-
-export default function useAttrs(props: UTextProps): UseAttrs {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
-
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
-}

package/utilsTs/utilHelper.ts

@@ -1,68 +0,0 @@
-/**
- * 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.
- */
-export const isSSR: boolean = typeof window === "undefined";
-
-/**
- * Check is code rendering on the client side.
- */
-export const isCSR: boolean = typeof window !== "undefined";

package/utilsTs/utilPlatform.ts

@@ -1,53 +0,0 @@
-import { isCSR } from "./utilHelper.ts";
-
-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.ts

@@ -1,296 +0,0 @@
-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 | undefined) => {
-  if (!componentName) return;
-
-  return webTypes.contributions.html.tags.find((item: Tag) => item.name === componentName);
-};
-
-export function getSlotNames(componentName: string | undefined) {
-  if (!componentName) return;
-
-  return getComponentData(componentName)?.slots?.map((item) => item.name);
-}
-
-export function getArgTypes(componentName: string | undefined) {
-  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>
-`;
-}