vueless 0.0.477 → 0.0.478-beta.1

package/utilsTs/utilPlatform.ts

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,296 @@
+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>
+`;
+}

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.ts";
+
+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/{utils/utilTheme.js → utilsTs/utilTheme.ts}

@@ -1,23 +1,26 @@
-import colors from "tailwindcss/colors.js";
-
-import { vuelessConfig } from "./utilUI.js";
-import { isSSR, isCSR } from "./utilHelper.js";
+import { fullTailwindConfig } from "./utilTailwind.ts";
+import { isSSR, isCSR } from "./utilHelper.ts";
+import { vuelessConfig } from "./utilUI.ts";
 import {
-  GRAY_COLOR,
-  COOL_COLOR,
   BRAND_COLORS,
   GRAYSCALE_COLOR,
   DEFAULT_RING,
   DEFAULT_RING_OFFSET,
-  DEFAULT_RING_OFFSET_COLOR_LIGHT,
-  DEFAULT_RING_OFFSET_COLOR_DARK,
   DEFAULT_ROUNDING,
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
+  DEFAULT_RING_OFFSET_COLOR_LIGHT,
+  DEFAULT_RING_OFFSET_COLOR_DARK,
   DARK_MODE_SELECTOR,
   GRAY_COLORS,
   PX_IN_REM,
-} from "../constants.js";
+} from "../constants.ts";
+
+import type { ThemeConfig, GrayColors, BrandColors, VuelessCssVariables } from "../types.ts";
+
+interface InternalThemeConfig extends ThemeConfig {
+  systemDarkMode?: boolean;
+}
 
 export function themeInit() {
   if (isSSR) return;
@@ -31,8 +34,12 @@ export function themeInit() {
   );
 }
 
-export function setTheme(config = {}) {
+export function setTheme(config: InternalThemeConfig = {}) {
   const isDarkMode = setDarkMode(config);
+  const rounding = config?.rounding ?? vuelessConfig.rounding ?? DEFAULT_ROUNDING;
+  let brand: BrandColors | GrayColors = config?.brand ?? vuelessConfig.brand ?? DEFAULT_BRAND_COLOR;
+  const gray = config?.gray ?? vuelessConfig.gray ?? DEFAULT_GRAY_COLOR;
+
   const ring = config?.ring ?? vuelessConfig.ring ?? DEFAULT_RING;
   const ringOffset = config?.ringOffset ?? vuelessConfig.ringOffset ?? DEFAULT_RING_OFFSET;
 
@@ -46,10 +53,7 @@ export function setTheme(config = {}) {
     vuelessConfig.ringOffsetColorLight ??
     DEFAULT_RING_OFFSET_COLOR_LIGHT;
 
-  const rounding = config?.rounding ?? vuelessConfig.rounding ?? DEFAULT_ROUNDING;
-  let brand = config?.brand ?? vuelessConfig.brand ?? DEFAULT_BRAND_COLOR;
-  let gray = config?.gray ?? vuelessConfig.gray ?? DEFAULT_GRAY_COLOR;
-
+  const colors = fullTailwindConfig.theme.colors;
   const isBrandColor = BRAND_COLORS.some((color) => color === brand);
   const isGrayColor = GRAY_COLORS.some((color) => color === gray);
 
@@ -69,29 +73,29 @@ export function setTheme(config = {}) {
     ? defaultRingOffsetColorDark
     : defaultRingOffsetColorLight;
 
-  if (gray === COOL_COLOR) {
-    gray = GRAY_COLOR;
-  }
-
   if (brand === GRAYSCALE_COLOR) {
     brand = gray;
   }
 
-  const variables = {
+  const variables: Partial<VuelessCssVariables> = {
+    "--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,
     "--vl-ring": `${ring}px`,
     "--vl-ring-offset": `${ringOffset}px`,
-    "--vl-ring-offset-color": `rgb(${convertHexInRgb(defaultRingOffsetColor)})`,
-    "--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,
+    "--vl-ring-offset-color": convertHexInRgb(defaultRingOffsetColor),
     "--vl-color-gray-default": convertHexInRgb(colors[gray][defaultBrandShade]),
     "--vl-color-brand-default": convertHexInRgb(colors[brand][defaultGrayShade]),
   };
 
   for (const key in colors[gray]) {
-    variables[`--vl-color-gray-${key}`] = convertHexInRgb(colors[gray][key]);
+    variables[`--vl-color-gray-${key}` as keyof VuelessCssVariables] = convertHexInRgb(
+      colors[gray][key],
+    );
   }
 
   for (const key in colors[brand]) {
-    variables[`--vl-color-brand-${key}`] = convertHexInRgb(colors[brand][key]);
+    variables[`--vl-color-brand-${key}` as keyof VuelessCssVariables] = convertHexInRgb(
+      colors[brand][key],
+    );
   }
 
   const stringVariables = Object.entries(variables)
@@ -110,14 +114,14 @@ export function setTheme(config = {}) {
   return rootVariables;
 }
 
-function setDarkMode(config) {
+function setDarkMode(config: InternalThemeConfig) {
   config?.darkMode === undefined
     ? isCSR && localStorage.removeItem(DARK_MODE_SELECTOR)
-    : isCSR && localStorage.setItem(DARK_MODE_SELECTOR, Number(!!config?.darkMode));
+    : isCSR && localStorage.setItem(DARK_MODE_SELECTOR, Number(config?.darkMode).toString());
 
   const storedDarkMode = isCSR ? localStorage.getItem(DARK_MODE_SELECTOR) : null;
 
-  let isDarkMode =
+  const isDarkMode =
     storedDarkMode !== null
       ? !!Number(storedDarkMode)
       : !!(config?.darkMode ?? vuelessConfig.darkMode ?? config?.systemDarkMode);
@@ -129,7 +133,7 @@ function setDarkMode(config) {
   return isDarkMode;
 }
 
-export function convertHexInRgb(hex) {
+export function convertHexInRgb(hex: string) {
   const color = hex.replace(/#/g, "");
 
   let r, g, b;

package/utilsTs/utilUI.ts

@@ -0,0 +1,143 @@
+import { merge } from "lodash-es";
+import { defineConfig } from "cva";
+import { extendTailwindMerge } from "tailwind-merge";
+import { cloneDeep, isCSR, isSSR } from "./utilHelper.ts";
+import {
+  BRAND_COLOR,
+  GRAYSCALE_COLOR,
+  DEFAULT_BRAND_COLOR,
+  NESTED_COMPONENT_REG_EXP,
+} from "../constants.ts";
+
+import type { BrandColors, Config, ComponentNames, Component, Defaults } from "../types.ts";
+
+/**
+ * Load Vueless 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 vuelessConfig: Config = {};
+
+if (isSSR) {
+  /* Load Vueless config from the project root in IIFE (no top-level await). */
+  (async () => {
+    try {
+      const filePath = `${process.cwd()}/vueless.config`;
+
+      vuelessConfig = (await import(/* @vite-ignore */ `${filePath}.js`)).default;
+
+      if (!vuelessConfig) {
+        vuelessConfig = (await import(/* @vite-ignore */ `${filePath}.ts`)).default;
+      }
+    } catch {
+      vuelessConfig = {};
+    }
+  })();
+}
+
+if (isCSR) {
+  vuelessConfig =
+    Object.values(
+      import.meta.glob("/vueless.config.{js,ts}", { eager: true, import: "default" }),
+    )[0] || {};
+}
+
+/**
+ * Extend twMerge (tailwind merge) by vueless and user config:
+ * All list of rules available here:
+ * https://github.com/dcastil/tailwind-merge/blob/v2.3.0/src/lib/default-config.ts
+ */
+const twMerge = extendTailwindMerge(
+  merge(
+    {
+      extend: {
+        theme: {
+          spacing: ["safe-top", "safe-bottom", "safe-left", "safe-right"],
+        },
+        classGroups: {
+          "ring-w": [{ ring: ["dynamic"] }],
+          "ring-offset-w": [{ "ring-offset": ["dynamic"] }],
+          "ring-offset-color": [{ "ring-offset": ["dynamic"] }],
+          "font-size": [{ text: ["2xs"] }],
+          rounded: [{ rounded: ["dynamic"] }],
+        },
+      },
+    },
+    vuelessConfig.tailwindMerge,
+  ),
+);
+
+/**
+ * Export cva (class variance authority) methods:
+ * – extended with tailwind-merge
+ * – remove all Vueless nested component names ({U...} strings) from class list string.
+ * Learn more here: https://beta.cva.style
+ */
+export const {
+  cx,
+  compose,
+  cva: classVarianceAuthority,
+} = defineConfig({
+  hooks: {
+    onComplete: (classNames) => twMerge(classNames).replace(NESTED_COMPONENT_REG_EXP, ""),
+  },
+});
+
+/* This allows skipping some CVA config keys in vueless config. */
+export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVariants = {} }) =>
+  classVarianceAuthority({
+    base,
+    variants,
+    compoundVariants,
+    defaultVariants,
+  });
+
+/**
+ * Return default values for component props, icons, etc..
+ */
+export function getDefault<T>(defaultConfig: Component, name: ComponentNames): T {
+  const componentDefaults = cloneDeep(defaultConfig.defaults) || {};
+  const globalDefaults = cloneDeep(vuelessConfig.component?.[name]?.defaults) || {};
+
+  const defaults = merge(componentDefaults, globalDefaults) as T & Defaults;
+
+  if (defaults.color) {
+    defaults.color = getColor(defaults.color as BrandColors);
+  }
+
+  return defaults;
+}
+
+/**
+ * Return `grayscale` color if in component config it `brand` but in vueless config it `grayscale`
+ * Otherwise return given color.
+ */
+export function getColor(color: string) {
+  const isBrandColorGrayscale = (vuelessConfig.brand ?? DEFAULT_BRAND_COLOR) === GRAYSCALE_COLOR;
+  const isComponentColorBrand = color === BRAND_COLOR;
+
+  return isBrandColorGrayscale && isComponentColorBrand ? GRAYSCALE_COLOR : color;
+}
+
+/**
+ * Replace in tailwind classes `{color}` variable into given color.
+ */
+export function setColor(classes: string, color: string) {
+  return classes?.replace(/{color}/g, color);
+}
+
+/**
+ * Generates simple unique identifier.
+ */
+export function getRandomId(length = 15) {
+  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+  const charactersLength = characters.length;
+
+  let id = "";
+
+  while (id.length < length) {
+    id += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+
+  return id;
+}

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.477",
+  "version": "0.0.478-beta.1",
   "contributions": {
     "html": {
       "description-markup": "markdown",

package/ui.text-block/useAttrs.js

@@ -1,15 +0,0 @@
-import useUI from "../composables/useUI.js";
-
-import defaultConfig from "./config.js";
-
-export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
-}