vueless 0.0.474 → 0.0.475

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";
+import { isSSR, isCSR } from "./utilHelper";
+import { vuelessConfig } from "./utilUI";
 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";
+
+import type { ThemeConfig, GrayColors, BrandColors, VuelessCssVariables } from "../types";
+
+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.d.ts

@@ -0,0 +1,67 @@
+import type { Config, ComponentNames, Component } from "../types";
+export declare let vuelessConfig: Config;
+export declare const cx: import("cva").CX, compose: import("cva").Compose, classVarianceAuthority: import("cva").CVA;
+export declare const 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;
+export declare function getDefault(defaultConfig: Component, name: ComponentNames): Component;
+export declare function getColor(color: string): string;
+export declare function setColor(classes: string, color: string): string;
+export declare function getRandomId(length?: number): string;

package/utilsTs/utilUI.ts

@@ -0,0 +1,142 @@
+import { merge } from "lodash-es";
+import { defineConfig } from "cva";
+import { extendTailwindMerge } from "tailwind-merge";
+import { cloneDeep, isCSR, isSSR } from "./utilHelper.js";
+import {
+  BRAND_COLOR,
+  GRAYSCALE_COLOR,
+  DEFAULT_BRAND_COLOR,
+  NESTED_COMPONENT_REG_EXP,
+} from "../constants.js";
+
+import type { BrandColors, Config, ComponentNames, Component } from "../types";
+
+/**
+ * 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(defaultConfig: Component, name: ComponentNames) {
+  const defaults = merge(
+    cloneDeep(defaultConfig.defaults),
+    vuelessConfig.component ? vuelessConfig.component[name]?.defaults : {},
+  ) as Component;
+
+  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) {
+  return (vuelessConfig.brand ?? DEFAULT_BRAND_COLOR) === GRAYSCALE_COLOR && color === BRAND_COLOR
+    ? 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.474",
+  "version": "0.0.475",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2575,7 +2575,6 @@
               "description": "Use it add an icon before the date.",
               "bindings": [
                 {
-                  "type": "string",
                   "name": "icon-name"
                 },
                 {
@@ -2589,11 +2588,9 @@
               "description": "Use it add an icon after the date.",
               "bindings": [
                 {
-                  "type": "string",
                   "name": "icon-name"
                 },
                 {
-                  "type": "string",
                   "name": "icon-size"
                 }
               ]
@@ -4073,15 +4070,6 @@
               },
               "default": "\"\""
             },
-            {
-              "name": "removable",
-              "description": "Show remove button.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
             {
               "name": "config",
               "description": "Component config object.",
@@ -4101,20 +4089,6 @@
               "default": "\"\""
             }
           ],
-          "events": [
-            {
-              "name": "remove",
-              "description": "Triggers when remove button is clicked.",
-              "properties": [
-                {
-                  "type": [
-                    "string"
-                  ],
-                  "name": "fileId"
-                }
-              ]
-            }
-          ],
           "slots": [
             {
               "name": "left",
@@ -4198,15 +4172,6 @@
               },
               "default": "md"
             },
-            {
-              "name": "removable",
-              "description": "Show remove button for each file",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
             {
               "name": "config",
               "description": "Component config object.",
@@ -4226,20 +4191,6 @@
               "default": "\"\""
             }
           ],
-          "events": [
-            {
-              "name": "remove",
-              "description": "Triggers when remove button is clicked.",
-              "properties": [
-                {
-                  "type": [
-                    "string"
-                  ],
-                  "name": "fileId"
-                }
-              ]
-            }
-          ],
           "slots": [
             {
               "name": "default",
@@ -5016,15 +4967,6 @@
               "name": "left",
               "description": "Use it to add something before the placeholder."
             },
-            {
-              "name": "right",
-              "scoped": true,
-              "bindings": [
-                {
-                  "name": "file"
-                }
-              ]
-            },
             {
               "name": "bottom",
               "description": "Use it to add something below the component content."
@@ -5351,7 +5293,7 @@
                 "kind": "expression",
                 "type": "'top' | 'topWithDesc' | 'left' | 'right'"
               },
-              "default": "topWithDesc"
+              "default": "getDefault(defaultConfig, UInputNumber).labelAlign"
             },
             {
               "name": "description",
@@ -5387,7 +5329,7 @@
                 "kind": "expression",
                 "type": "boolean"
               },
-              "default": "false"
+              "default": "getDefault(defaultConfig, UInputNumber).disabled"
             },
             {
               "name": "config",
@@ -6303,15 +6245,6 @@
                 "type": "string|array"
               },
               "default": "\"\""
-            },
-            {
-              "name": "loading",
-              "description": "Loader state (shown / hidden).",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
             }
           ],
           "source": {
@@ -6745,7 +6678,7 @@
           "description": "",
           "attributes": [
             {
-              "name": "value",
+              "name": "sum",
               "description": "Money value.",
               "value": {
                 "kind": "expression",
@@ -6808,17 +6741,8 @@
               "default": "default"
             },
             {
-              "name": "minFractionDigits",
-              "description": "Minimal number of signs after the decimal separator (fractional part of a number).",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "0"
-            },
-            {
-              "name": "maxFractionDigits",
-              "description": "Maximal number of signs after the decimal separator (fractional part of a number).",
+              "name": "decimalScale",
+              "description": "Set the numeral decimal scale after the comma.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -6835,22 +6759,22 @@
               "default": ","
             },
             {
-              "name": "thousandsSeparator",
-              "description": "A symbol used to separate the thousand parts of a number.",
+              "name": "align",
+              "description": "Money align.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "'right' | 'left'"
               },
-              "default": " "
+              "default": "left"
             },
             {
-              "name": "align",
-              "description": "Money align.",
+              "name": "integer",
+              "description": "Make money sum integer.",
               "value": {
                 "kind": "expression",
-                "type": "'right' | 'left'"
+                "type": "boolean"
               },
-              "default": "left"
+              "default": "false"
             },
             {
               "name": "planned",
@@ -8554,15 +8478,6 @@
                 "type": "array"
               }
             },
-            {
-              "name": "emptyCellLabel",
-              "description": "Label to display for empty cell values.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "—"
-            },
             {
               "name": "dateDivider",
               "description": "Show date divider line between dates.",
@@ -8609,13 +8524,13 @@
               "default": "false"
             },
             {
-              "name": "loading",
-              "description": "Set table loader state.",
+              "name": "resource",
+              "description": "Set loader resource name to activate table progress loader exact for that resource (deprecated).",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               },
-              "default": "false"
+              "default": "\"\""
             },
             {
               "name": "config",
@@ -8826,15 +8741,6 @@
                 "type": "array"
               }
             },
-            {
-              "name": "emptyCellLabel",
-              "required": true,
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "—"
-            },
             {
               "name": "tag",
               "value": {
@@ -9019,33 +8925,36 @@
           "attributes": [
             {
               "name": "html",
-              "description": "НTML markdown or plain text.",
+              "required": false,
+              "description": "HTML markdown or plain text.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "undefined"
+              }
             },
             {
               "name": "size",
+              "required": false,
               "description": "Text size.",
               "value": {
                 "kind": "expression",
-                "type": "'sm' | 'md' | 'lg'"
+                "type": "union"
               },
               "default": "md"
             },
             {
               "name": "align",
+              "required": false,
               "description": "Text align.",
               "value": {
                 "kind": "expression",
-                "type": "'left' | 'center' | 'right'"
+                "type": "union"
               },
               "default": "left"
             },
             {
               "name": "line",
+              "required": false,
               "description": "Remove line height (useful for 1-line text).",
               "value": {
                 "kind": "expression",
@@ -9055,21 +8964,22 @@
             },
             {
               "name": "config",
+              "required": false,
               "description": "Component config object.",
               "value": {
                 "kind": "expression",
                 "type": "object"
               },
-              "default": "{}"
+              "default": "() => ({})"
             },
             {
               "name": "dataTest",
+              "required": false,
               "description": "Data-test attribute for automated testing.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "\"\""
+              }
             }
           ],
           "slots": [

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,
-  };
-}