vueless 0.0.479 → 0.0.481

package/composables/{useUI.js → useUI.ts}

@@ -11,9 +11,8 @@ import {
   computed,
 } from "vue";
 
-import { cx, cva, setColor, getColor, vuelessConfig, mergeConfigs } from "../utils/utilUI.js";
-
-import { cloneDeep, isCSR } from "../utils/utilHelper.js";
+import { cx, cva, setColor, getColor, vuelessConfig, mergeConfigs } from "../utils/ui.ts";
+import { cloneDeep, isCSR } from "../utils/helper.ts";
 import {
   STRATEGY_TYPE,
   CVA_CONFIG_KEY,
@@ -21,6 +20,27 @@ import {
   NESTED_COMPONENT_REG_EXP,
 } from "../constants.js";
 
+import type { ComponentInternalInstance, Slot, VNode, ComputedRef } from "vue";
+import type {
+  BrandColors,
+  Strategies,
+  UnknownObject,
+  VueAttrs,
+  Component,
+  NestedComponent,
+  ComponentNames,
+  CVA,
+  KeyAttrs,
+  KeysToExtend,
+} from "../types.ts";
+
+interface MergedConfigOptions {
+  defaultConfig: Component;
+  globalConfig: Component;
+  propsConfig?: Component;
+  vuelessStrategy?: Strategies;
+}
+
 /**
  * Merging component configs in a given sequence (bigger number = bigger priority):
  * 1. Default component config
@@ -28,21 +48,28 @@ import {
  * 3. Component config (:config="{...}" props)
  * 4. Component classes (class="...")
  */
-export default function useUI(defaultConfig = {}, propsConfigGetter = null, topLevelClassKey) {
-  const { type, props } = getCurrentInstance();
-  const componentName = type.__name;
-  const globalConfig = vuelessConfig.component ? vuelessConfig.component[componentName] : {};
+export default function useUI<T>(
+  defaultConfig: T & Component,
+  propsConfigGetter?: () => (T & Component) | undefined,
+  topLevelClassKey?: string,
+) {
+  const { type, props } = getCurrentInstance() as ComponentInternalInstance;
+  const componentName = type.__name as ComponentNames;
+  const globalConfig = vuelessConfig?.component?.[componentName] || {};
 
   const isStrategyValid =
     vuelessConfig.strategy && Object.values(STRATEGY_TYPE).includes(vuelessConfig.strategy);
-  const vuelessStrategy = isStrategyValid ? vuelessConfig.strategy : STRATEGY_TYPE.merge;
 
-  const [firstClassKey] = Object.keys(defaultConfig);
-  const config = ref({});
+  const vuelessStrategy = isStrategyValid
+    ? (vuelessConfig.strategy as Strategies)
+    : (STRATEGY_TYPE.merge as Strategies);
+
+  const firstClassKey = defaultConfig ? Object.keys(defaultConfig)[0] : "";
+  const config = ref({} as T);
   const attrs = useAttrs();
 
   watchEffect(() => {
-    const propsConfig = propsConfigGetter && propsConfigGetter();
+    const propsConfig = propsConfigGetter ? propsConfigGetter() : {};
 
     const mergedConfig = getMergedConfig({
       defaultConfig,
@@ -56,29 +83,27 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
 
   /**
    * Get classes by given key (including CVA if config set).
-   * @param {string} key
-   * @param {Object} mutatedProps
-   * @returns {ComputedRef | String}
    */
-  function getClasses(key, mutatedProps = {}) {
+  function getClasses(key: string, mutatedProps: UnknownObject): ComputedRef<string> {
     return computed(() => {
-      const color = toValue(mutatedProps)?.color || props.color;
+      const color = (toValue(mutatedProps)?.color as BrandColors) || props?.color;
+      const value = config.value[key] as (CVA & NestedComponent) | string;
 
-      let value = config.value[key];
+      let classes = "";
 
-      if (isCVA(value)) {
-        value = cva(value)({
+      if (typeof value === "object" && isCVA(value)) {
+        classes = cva(value)({
           ...props,
           ...toValue(mutatedProps),
-          color: color ? getColor(color) : null,
+          ...(color ? { color: getColor(color) } : {}),
         });
-      } else if (value.component) {
-        // If the value of the key contains keys related to the nested component, it should be skipped.
-        // Probably this should be fixed later to be possible to extend key with nested component keys.
-        return "";
       }
 
-      return color ? setColor(value, color) : value;
+      if (typeof value === "string") {
+        classes = value;
+      }
+
+      return color ? setColor(classes, color) : classes;
     });
   }
 
@@ -86,12 +111,9 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
    * Get an object where:
    * – key: extendingKey
    * – value: reactive string of extendingKey classes.
-   * @param {Array} extendingKeys
-   * @param {Object} mutatedProps
-   * @returns {Object}
    */
-  function getExtendingKeysClasses(extendingKeys, mutatedProps = {}) {
-    const extendingClasses = {};
+  function getExtendingKeysClasses(extendingKeys: string[], mutatedProps = {}) {
+    const extendingClasses: UnknownObject = {};
 
     for (const key of extendingKeys) {
       extendingClasses[key] = getClasses(key, mutatedProps);
@@ -104,25 +126,23 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
    * Get an object where:
    * – key: elementKey
    * – value: reactive object of string element attributes (with classes).
-   * @param mutatedProps
-   * @param extendingKeys
-   * @param keysToExtendConfig
-   * @returns {Object}
    */
-  function getKeysAttrs(mutatedProps = {}, extendingKeys = [], keysToExtendConfig = {}) {
+  function getKeysAttrs(
+    mutatedProps = {},
+    extendingKeys: string[] = [],
+    keysToExtendConfig: Record<string, KeysToExtend> = {},
+  ) {
     const keysToExtend = Object.keys(keysToExtendConfig);
-    const keysAttrs = {};
+    const keysAttrs: UnknownObject = {};
 
     for (const key in defaultConfig) {
       if (isSystemKey(key) || extendingKeys.includes(key)) continue;
 
-      keysAttrs[`${key}Attrs`] = getAttrs(key, {
-        classes: getClasses(key, mutatedProps),
-      });
+      keysAttrs[`${key}Attrs`] = getAttrs(key, getClasses(key, mutatedProps));
 
       if (keysToExtend.includes(key)) {
         const { base, extend } = keysToExtendConfig[key];
-        const keyAttrs = keysAttrs[`${key}Attrs`];
+        const keyAttrs = keysAttrs[`${key}Attrs`] as ComputedRef<KeyAttrs>;
 
         keysAttrs[`${key}Attrs`] = computed(() => ({
           ...keyAttrs.value,
@@ -140,22 +160,19 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
 
   /**
    * Get an element attributes for a given key.
-   * @param {String} configKey
-   * @param {Object} options with classes
-   * @returns {Object} element attributes
    */
-  function getAttrs(configKey, options) {
-    const nestedComponent = getNestedComponent(defaultConfig[configKey]);
+  function getAttrs(configKey: string, classes: ComputedRef) {
+    const nestedComponent = getNestedComponent(defaultConfig[configKey] || "");
 
     const attrs = useAttrs();
     const isDev = isCSR && import.meta.env?.DEV;
     const vuelessAttrs = ref({});
     const isTopLevelKey = (topLevelClassKey || firstClassKey) === configKey;
 
-    const commonAttrs = {
+    const commonAttrs: KeyAttrs = {
       ...(isTopLevelKey ? attrs : {}),
-      "vl-component": isDev ? attrs["vl-component"] || componentName || null : null,
-      "vl-key": isDev ? attrs["vl-config-key"] || configKey || null : null,
+      "vl-component": isDev ? (attrs["vl-component"] as string) || componentName || null : null,
+      "vl-key": isDev ? (attrs["vl-config-key"] as string) || configKey || null : null,
       "vl-child-component":
         isDev && attrs["vl-component"] ? nestedComponent || componentName : null,
       "vl-child-key": isDev && attrs["vl-component"] ? configKey : null,
@@ -166,28 +183,26 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
 
     watch(config, updateVuelessAttrs, { immediate: true });
     watch(props, updateVuelessAttrs);
-    options?.classes?.value && watch(options?.classes, updateVuelessAttrs);
+
+    if (classes?.value) {
+      watch(classes, updateVuelessAttrs);
+    }
 
     function updateVuelessAttrs() {
-      const configKeyValue = config.value[configKey];
+      const configKeyValue = config.value[configKey] as Component | string;
       const isObject = typeof configKeyValue === "object";
 
       const configAttrs = {
         config: configKeyValue,
-        ...configKeyValue?.defaults,
+        ...(isObject ? configKeyValue.defaults : {}),
       };
 
       const isTopLevelClassKey = configKey === (topLevelClassKey || firstClassKey);
       const attrClass = isTopLevelClassKey && !nestedComponent ? attrs.class : "";
 
-      // TODO: remove `getBaseClasses(configKeyValue)` after migration of all composables to the new logic
       vuelessAttrs.value = {
         ...commonAttrs,
-        class: cx([
-          getBaseClasses(configKeyValue),
-          getBaseClasses(toValue(options?.classes)),
-          attrClass,
-        ]),
+        class: cx([getBaseClasses(toValue(classes)), attrClass]),
         ...((isObject && configAttrs) || {}),
       };
     }
@@ -199,61 +214,59 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
     config,
     setColor,
     getColor,
-    getAttrs,
     getKeysAttrs,
     getExtendingKeysClasses,
-    isCVA,
-    isSystemKey,
     hasSlotContent,
   };
 }
 
 /**
  * Get merged config based on config merging strategy.
- * @param {Object} defaultConfig
- * @param {Object} globalConfig
- * @param {Object} propsConfig
- * @param {string} vuelessStrategy - vueless top level merge strategy.
- *
- * @returns {Object}
  */
-function getMergedConfig({ defaultConfig, globalConfig, propsConfig, vuelessStrategy }) {
-  defaultConfig = cloneDeep(defaultConfig);
-
+function getMergedConfig({
+  defaultConfig,
+  globalConfig,
+  propsConfig,
+  vuelessStrategy,
+}: MergedConfigOptions) {
+  defaultConfig = cloneDeep(defaultConfig) as Component;
+
+  let mergedConfig: Component = {};
   const strategy =
     !globalConfig && !propsConfig
       ? STRATEGY_TYPE.merge
       : propsConfig?.strategy || globalConfig?.strategy || vuelessStrategy;
 
   if (strategy === STRATEGY_TYPE.merge) {
-    return mergeConfigs({ defaultConfig, globalConfig, propsConfig });
+    mergedConfig = mergeConfigs({ defaultConfig, globalConfig, propsConfig });
   }
 
   if (strategy === STRATEGY_TYPE.replace) {
-    return mergeConfigs({ defaultConfig, globalConfig, propsConfig, isReplace: true });
+    mergedConfig = mergeConfigs({ defaultConfig, globalConfig, propsConfig, isReplace: true });
   }
 
   if (strategy === STRATEGY_TYPE.overwrite) {
     const isGlobalConfig = globalConfig && Object.keys(globalConfig).length;
     const isPropsConfig = propsConfig && Object.keys(propsConfig).length;
 
-    return isPropsConfig ? propsConfig : isGlobalConfig ? globalConfig : defaultConfig;
+    mergedConfig = isPropsConfig ? propsConfig : isGlobalConfig ? globalConfig : defaultConfig;
   }
+
+  return mergedConfig;
 }
 
 /**
  * Merge component classes from "class" attribute into final config.
- * @param {Object} config
- * @param {Object} attrs
- * @param {string} topLevelClassKey
- *
- * @returns {Object}
  */
-function mergeClassesIntoConfig(config, topLevelClassKey, attrs) {
-  if (typeof config[topLevelClassKey] === "object") {
-    config[topLevelClassKey].base = cx([config[topLevelClassKey]?.base, attrs.class]);
+function mergeClassesIntoConfig(config: Component, topLevelClassKey: string, attrs: VueAttrs) {
+  const configTopKey = config[topLevelClassKey];
+
+  if (typeof configTopKey === "object") {
+    (configTopKey as CVA).base = cx([(configTopKey as CVA)?.base, attrs.class]);
+
+    config[topLevelClassKey] = configTopKey;
   } else {
-    config[topLevelClassKey] = cx([config[topLevelClassKey], attrs.class]);
+    config[topLevelClassKey] = cx([configTopKey, attrs.class]);
   }
 
   return config;
@@ -261,33 +274,28 @@ function mergeClassesIntoConfig(config, topLevelClassKey, attrs) {
 
 /**
  * Return base classes.
- * @param { String | Object } value
- * @returns { String }
  */
-function getBaseClasses(value) {
-  return typeof value === "object" ? value.base || "" : value || "";
+function getBaseClasses(value: string | CVA | NestedComponent) {
+  return typeof value === "object" ? (value.base as string) || "" : value || "";
 }
 
 /**
  * Check is config key contains component name and if contains return it.
- * @param { String | Object } value
- * @returns { String }
  */
-function getNestedComponent(value) {
+function getNestedComponent(value: string | NestedComponent | CVA) {
   const classes = getBaseClasses(value);
-  const component = value?.component || "";
+  const component = (value as NestedComponent)?.component as ComponentNames;
+
   const match =
-    classes.match(NESTED_COMPONENT_REG_EXP) || component.match(NESTED_COMPONENT_REG_EXP);
+    classes.match(NESTED_COMPONENT_REG_EXP) || component?.match(NESTED_COMPONENT_REG_EXP);
 
   return match ? match[1] : "";
 }
 
 /**
  * Check is config key not contains classes or CVA config object.
- * @param { String } key
- * @returns { Boolean }
  */
-function isSystemKey(key) {
+function isSystemKey(key: string): boolean {
   const isExactKey = Object.values(SYSTEM_CONFIG_KEY).some((value) => value === key);
 
   return isExactKey || key.toLowerCase().includes(SYSTEM_CONFIG_KEY.transition.toLowerCase());
@@ -295,12 +303,8 @@ function isSystemKey(key) {
 
 /**
  * Check is config contains default CVA keys.
- * @param { Object | String } config
- * @returns { Boolean }
  */
-function isCVA(config) {
-  if (typeof config !== "object") return false;
-
+function isCVA(config: UnknownObject): boolean {
   return Object.values(CVA_CONFIG_KEY).some((value) =>
     Object.keys(config).some((key) => key === value),
   );
@@ -308,15 +312,15 @@ function isCVA(config) {
 
 /**
  * Check if slot defined, and have a content.
- * @param slot
- * @param props
- *
- * @returns {boolean}
  */
-function hasSlotContent(slot, props = {}) {
-  const asArray = (arg) => (Array.isArray(arg) ? arg : arg != null ? [arg] : []);
+export function hasSlotContent(slot: Slot | undefined | null, props = {}): boolean {
+  type Args = VNode | VNode[] | undefined | null;
+
+  const asArray = (arg: Args) => {
+    return Array.isArray(arg) ? arg : arg != null ? [arg] : [];
+  };
 
-  const isVNodeEmpty = (vnode) => {
+  const isVNodeEmpty = (vnode: Args) => {
     return (
       !vnode ||
       asArray(vnode).every(

package/constants.js

@@ -1,3 +1,8 @@
+/**
+ * The file has `.js` extension to support both node and browser scripts without a file transpilation.
+ * Please do not change the extension if you do not fully understand the consequences.
+ */
+
 /* Custom Vueless colors */
 export const BRAND_COLOR = "brand";
 export const GRAY_COLOR = "gray";
@@ -14,14 +19,13 @@ export const DEFAULT_GRAY_COLOR = COOL_COLOR;
 export const DEFAULT_RING = 4; /* pixels */
 export const DEFAULT_RING_OFFSET = 0; /* pixels */
 export const DEFAULT_RING_OFFSET_COLOR_LIGHT = "#ffffff"; // white
-export const DEFAULT_RING_OFFSET_COLOR_DARK = "#4b5563"; // gray-600
+export const DEFAULT_RING_OFFSET_COLOR_DARK = "#1f2937"; // gray-800
 export const DEFAULT_ROUNDING = 8; /* pixels */
 
 /* Vueless supported colors and shades */
 export const COLOR_SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
 export const GRAY_COLORS = ["slate", COOL_COLOR, "zinc", "neutral", "stone"];
 export const BRAND_COLORS = [
-  GRAYSCALE_COLOR,
   "red",
   "orange",
   "amber",
@@ -61,12 +65,130 @@ export const SYSTEM_CONFIG_KEY = {
   i18n: "i18n",
   defaults: "defaults",
   strategy: "strategy",
+  safelist: "safelist",
   component: "component",
   transition: "transition",
   safelistColors: "safelistColors",
   ...CVA_CONFIG_KEY,
 };
 
+/* Component to folder mapping. */
+export const COMPONENTS = {
+  /* Buttons & Links */
+  UButton: "ui.button",
+  ULink: "ui.button-link",
+  UToggle: "ui.button-toggle",
+  UToggleItem: "ui.button-toggle-item",
+
+  /* Dropdowns */
+  UDropdownButton: "ui.dropdown-button",
+  UDropdownBadge: "ui.dropdown-badge",
+  UDropdownLink: "ui.dropdown-link",
+  UDropdownList: "ui.dropdown-list",
+
+  /* Form Inputs & Controls */
+  UInput: "ui.form-input",
+  UInputFile: "ui.form-input-file",
+  UInputMoney: "ui.form-input-money",
+  UInputSearch: "ui.form-input-search",
+  UInputNumber: "ui.form-input-number",
+  UInputRating: "ui.form-input-rating",
+  UTextarea: "ui.form-textarea",
+  USelect: "ui.form-select",
+  UCheckbox: "ui.form-checkbox",
+  UCheckboxGroup: "ui.form-checkbox-group",
+  UCheckboxMultiState: "ui.form-checkbox-multi-state",
+  USwitch: "ui.form-switch",
+  URadio: "ui.form-radio",
+  URadioGroup: "ui.form-radio-group",
+  UCalendar: "ui.form-calendar",
+  UDatePicker: "ui.form-date-picker",
+  UDatePickerRange: "ui.form-date-picker-range",
+  ULabel: "ui.form-label",
+  UColorPicker: "ui.form-color-picker",
+
+  /* Text & Content */
+  UHeader: "ui.text-header",
+  UText: "ui.text-block",
+  UAlert: "ui.text-alert",
+  UNotify: "ui.text-notify",
+  UMoney: "ui.text-money",
+  UFile: "ui.text-file",
+  UFiles: "ui.text-files",
+  UEmpty: "ui.text-empty",
+  UBadge: "ui.text-badge",
+
+  /* Containers */
+  UDivider: "ui.container-divider",
+  UCol: "ui.container-col",
+  URow: "ui.container-row",
+  UGroup: "ui.container-group",
+  UAccordion: "ui.container-accordion",
+  UCard: "ui.container-card",
+  UModal: "ui.container-modal",
+  UModalConfirm: "ui.container-modal-confirm",
+  UPage: "ui.container-page",
+
+  /* Images and Icons */
+  UIcon: "ui.image-icon",
+  UAvatar: "ui.image-avatar",
+
+  /* Data */
+  UTable: "ui.data-table",
+  UDataList: "ui.data-list",
+
+  /* Navigation */
+  UTab: "ui.navigation-tab",
+  UTabs: "ui.navigation-tabs",
+  UProgress: "ui.navigation-progress",
+  UPagination: "ui.navigation-pagination",
+
+  /* Loaders and Skeletons */
+  ULoader: "ui.loader",
+  ULoaderProgress: "ui.loader-progress",
+  ULoaderOverlay: "ui.loader-overlay",
+
+  /* Other */
+  UDot: "ui.other-dot",
+};
+
+/* Extending Tailwind Merge by vueless custom tailwind classes. */
+export const TAILWIND_MERGE_EXTENSION = {
+  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": ["color-dynamic"] }],
+      "font-size": [{ text: ["2xs"] }],
+      rounded: [{ rounded: ["dynamic"] }],
+    },
+  },
+};
+
+/* SVGO config for preparing SVG icons. */
+export const DEFAULT_SVGO_CONFIG = {
+  plugins: [
+    {
+      name: "preset-default",
+      params: {
+        overrides: {
+          removeViewBox: false,
+          convertColors: {
+            currentColor: true,
+          },
+        },
+      },
+    },
+  ],
+};
+
 /* Other */
 export const PX_IN_REM = 16;
 export const NESTED_COMPONENT_REG_EXP = /\{U[^}]*}/g;
+export const DYNAMIC_COLOR_PATTERN = "{color}";
+export const TAILWIND_CLASS_DELIMITER = ":";
+export const CACHE_PATH = "node_modules/.cache/vueless";
+export const VUELESS_CONFIG_FILE_NAME = "vueless.config";

package/directives/clickOutside/storybook/Docs.mdx

@@ -1,6 +1,6 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 
-import * as stories from "./stories.js";
+import * as stories from "./stories.ts";
 
 <Meta of={stories} />
 <Title of={stories} />

package/directives/clickOutside/storybook/{stories.js → stories.ts}

@@ -1,11 +1,12 @@
-import { getArgTypes } from "../../../utils/utilStorybook.js";
+import type { Meta } from "@storybook/vue3";
+import { getArgTypes } from "../../../utils/storybook.ts";
 
 import { ref, computed, onMounted, useTemplateRef } from "vue";
 
 import UAlert from "../../../ui.text-alert/UAlert.vue";
 import UButton from "../../../ui.button/UButton.vue";
 import UCalendar from "../../../ui.form-calendar/UCalendar.vue";
-import clickOutside from "../vClickOutside.js";
+import clickOutside from "../vClickOutside.ts";
 
 /**
  * The `v-click-outside` directive. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/directives/clickOutside)
@@ -17,10 +18,10 @@ export default {
   args: {},
   argTypes: {
     ...getArgTypes(UButton.__name),
-  },
+  } as Meta,
 };
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate = () => ({
   components: { UButton, UCalendar, UAlert },
   directives: { clickOutside },
   setup() {
@@ -39,7 +40,7 @@ const DefaultTemplate = (args) => ({
       isShownCalendar.value = false;
     }
 
-    return { args, date, isShownCalendar, buttonLabel, toggleCalendar, closeCalendar };
+    return { date, isShownCalendar, buttonLabel, toggleCalendar, closeCalendar };
   },
   template: `
     <UButton :label="buttonLabel" @click="toggleCalendar" v-click-outside="closeCalendar" />
@@ -54,7 +55,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const SettingsTemplate = (args) => ({
+const SettingsTemplate = () => ({
   components: { UButton, UCalendar, UAlert },
   directives: { clickOutside },
   setup() {
@@ -80,7 +81,6 @@ const SettingsTemplate = (args) => ({
     }
 
     return {
-      args,
       date,
       isShownCalendar,
       buttonLabel,
@@ -105,7 +105,5 @@ const SettingsTemplate = (args) => ({
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = {};
 
 export const Settings = SettingsTemplate.bind({});
-Settings.args = {};

package/directives/clickOutside/types.ts

@@ -0,0 +1,22 @@
+import type { DirectiveBinding } from "vue";
+import type { TemplateRefElement } from "../../types.ts";
+
+export type RemoveEvents = () => void;
+export type ClickCallback = (event: MouseEvent) => void;
+
+export interface ClickOutsideOptions {
+  capture?: boolean;
+  ignore?: TemplateRefElement[];
+}
+
+export interface DirectiveBindingCallback extends DirectiveBinding {
+  value: ClickCallback;
+}
+
+export interface DirectiveBindingOptions extends DirectiveBinding {
+  value: [ClickCallback, ClickOutsideOptions];
+}
+
+export interface ClickOutsideTargetElement extends HTMLElement {
+  _clickOutsideRemove: (...args: unknown[]) => unknown;
+}