vueless 0.0.476-0 → 0.0.476

package/utils/utilUI.js

@@ -7,6 +7,7 @@ import {
   GRAYSCALE_COLOR,
   DEFAULT_BRAND_COLOR,
   NESTED_COMPONENT_REG_EXP,
+  SYSTEM_CONFIG_KEY,
 } from "../constants.js";
 
 /**
@@ -40,6 +41,209 @@ if (isCSR) {
     )[0] || {};
 }
 
+/**
+ * Recursively merge config objects with removing tailwind classes duplicates.
+ * @param {Object} defaultConfig
+ * @param {Object} globalConfig
+ * @param {Object} propsConfig
+ * @param {Object} config - final merged config.
+ * @param {boolean} isReplace - enables class replacement instead of merge.
+ * @param {boolean} isVarinants - if true, prevents adding a "base" key into nested objects.
+ *
+ * @returns {Object}
+ */
+export function mergeConfigs({
+  defaultConfig,
+  globalConfig,
+  propsConfig,
+  config = {},
+  isReplace = false,
+  isVariants = false,
+}) {
+  globalConfig = cloneDeep(globalConfig || {});
+  propsConfig = cloneDeep(propsConfig || {});
+
+  const isGlobalConfig = Object.keys(globalConfig).length;
+  const isPropsConfig = Object.keys(propsConfig).length;
+
+  // Add unique keys from defaultConfig to composedConfig
+  let composedConfig = cloneDeep(defaultConfig);
+
+  // Add unique keys from globalConfig to composedConfig
+  for (let key in globalConfig) {
+    if (!Object.keys(composedConfig).includes(key)) {
+      composedConfig[key] = globalConfig[key];
+    }
+  }
+
+  // Add unique keys from propsConfig to composedConfig
+  for (let key in propsConfig) {
+    if (!Object.keys(composedConfig).includes(key)) {
+      composedConfig[key] = propsConfig[key];
+    }
+  }
+
+  const {
+    i18n,
+    defaults,
+    strategy,
+    safelist,
+    component,
+    safelistColors,
+    defaultVariants,
+    compoundVariants,
+  } = SYSTEM_CONFIG_KEY;
+
+  for (let key in composedConfig) {
+    if (isGlobalConfig || isPropsConfig) {
+      if (key === safelist || key === safelistColors) {
+        if (propsConfig[key]) {
+          // eslint-disable-next-line no-console
+          console.warn(`Passing '${key}' key in 'config' prop is not allowed.`);
+        }
+      } else if (key === component) {
+        config[key] = propsConfig[key] || defaultConfig[key];
+
+        if (globalConfig[key]) {
+          // eslint-disable-next-line no-console
+          console.warn(`Passing '${key}' key in 'config' prop or by global config is not allowed.`);
+        }
+      } else if (key === strategy) {
+        config[key] = propsConfig[key] || globalConfig[key] || defaultConfig[key];
+      } else if (key === defaults || key === defaultVariants) {
+        config[key] = { ...defaultConfig[key], ...globalConfig[key], ...propsConfig[key] };
+      } else if (key === compoundVariants) {
+        config[key] = mergeCompoundVariants({
+          defaultConfig: composedConfig,
+          globalConfig,
+          propsConfig,
+          isReplace,
+          key,
+        });
+      } else {
+        const isObjectComposedConfig = typeof composedConfig[key] === "object";
+        const isObjectGlobalConfig = typeof globalConfig[key] === "object";
+        const isObjectPropsConfig = typeof propsConfig[key] === "object";
+
+        const isObject = isObjectComposedConfig || isObjectGlobalConfig || isObjectPropsConfig;
+        const isEmpty = composedConfig[key] === null;
+        const isI18n = key === i18n;
+
+        if (key === "variants" && !isVariants) {
+          isVariants = true;
+        }
+
+        config[key] =
+          isObject && !isEmpty && !isI18n
+            ? mergeConfigs({
+                defaultConfig: stringToObject(composedConfig[key], { addBase: !isVariants }),
+                globalConfig: stringToObject(globalConfig[key], { addBase: !isVariants }),
+                propsConfig: stringToObject(propsConfig[key], { addBase: !isVariants }),
+                config: stringToObject(composedConfig[key], { addBase: !isVariants }),
+                isReplace,
+                isVariants,
+              })
+            : isReplace || isI18n
+              ? propsConfig[key] || globalConfig[key] || defaultConfig[key]
+              : cx([defaultConfig[key], globalConfig[key], propsConfig[key]]);
+      }
+    } else {
+      config[key] = composedConfig[key];
+    }
+  }
+
+  return config;
+}
+
+/**
+ Turn simplified nested component config to regular config.
+ @param {Object | String} value
+ @param {Boolean} addBase
+ @returns {Object}
+ */
+function stringToObject(value, { addBase = false }) {
+  if (value === undefined) value = "";
+
+  return typeof value !== "object" ? addBase && { base: value } : value;
+}
+
+/**
+ * Merge CVA compound variants arrays.
+ * @param {Object} defaultConfig
+ * @param {Object} globalConfig
+ * @param {Object} propsConfig
+ * @param {string} key
+ * @param {boolean} isReplace - enables class replacement instead of merge.
+ *
+ * @returns {Array}
+ */
+function mergeCompoundVariants({ defaultConfig, globalConfig, propsConfig, key, isReplace }) {
+  if (
+    (globalConfig[key] && !Array.isArray(globalConfig[key])) ||
+    (propsConfig[key] && !Array.isArray(propsConfig[key])) ||
+    (defaultConfig[key] && !Array.isArray(defaultConfig[key]))
+  ) {
+    // eslint-disable-next-line no-console
+    console.error("CompoundVariants should be an array.");
+  }
+
+  let globalConfigUniqueItems = cloneDeep(globalConfig[key] || []);
+  let propsConfigUniqueItems = cloneDeep(propsConfig[key] || []);
+
+  const config = defaultConfig[key].map((defaultConfigItem) => {
+    /**
+     * Compare two objects by keys for match.
+     * @param {Object} configItem
+     * @returns {Boolean}
+     */
+    function isSameItem(configItem) {
+      const hasConfigItemKeys = Object.keys(defaultConfigItem)
+        .map((key) => defaultConfigItem[key] === configItem[key] || key === "class")
+        .every((item) => !!item);
+
+      const hasDefaultConfigItemKeys = Object.keys(configItem)
+        .map((key) => defaultConfigItem[key] === configItem[key] || key === "class")
+        .every((item) => !!item);
+
+      return hasConfigItemKeys && hasDefaultConfigItemKeys;
+    }
+
+    /**
+     * Find the same compound variant item in custom config if exist.
+     * @param {Object} config
+     * @returns {Object|undefined}
+     */
+    function findItem(config = []) {
+      const globalConfigUniqueItemIndex = globalConfigUniqueItems.findIndex(isSameItem);
+      const propsConfigUniqueItemIndex = propsConfigUniqueItems.findIndex(isSameItem);
+
+      if (~globalConfigUniqueItemIndex) {
+        globalConfigUniqueItems.splice(globalConfigUniqueItemIndex, 1);
+      }
+
+      if (~propsConfigUniqueItemIndex) {
+        propsConfigUniqueItems.splice(propsConfigUniqueItemIndex, 1);
+      }
+
+      return config.find(isSameItem);
+    }
+
+    const globalConfigItem = findItem(globalConfig[key]);
+    const propsConfigItem = findItem(propsConfig[key]);
+
+    return globalConfigItem || propsConfigItem
+      ? {
+          ...defaultConfigItem,
+          class: isReplace
+            ? propsConfigItem?.class || globalConfigItem?.class || defaultConfigItem.class
+            : cx([defaultConfigItem.class, globalConfigItem?.class, propsConfigItem?.class]),
+        }
+      : defaultConfigItem;
+  });
+
+  return [...config, ...globalConfigUniqueItems, ...propsConfigUniqueItems];
+}
+
 /**
  * Extend twMerge (tailwind merge) by vueless and user config:
  * All list of rules available here:

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.476-0",
+  "version": "0.0.476",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2575,6 +2575,7 @@
               "description": "Use it add an icon before the date.",
               "bindings": [
                 {
+                  "type": "string",
                   "name": "icon-name"
                 },
                 {
@@ -2588,9 +2589,11 @@
               "description": "Use it add an icon after the date.",
               "bindings": [
                 {
+                  "type": "string",
                   "name": "icon-name"
                 },
                 {
+                  "type": "string",
                   "name": "icon-size"
                 }
               ]
@@ -4070,6 +4073,15 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "removable",
+              "description": "Show remove button.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "config",
               "description": "Component config object.",
@@ -4089,6 +4101,20 @@
               "default": "\"\""
             }
           ],
+          "events": [
+            {
+              "name": "remove",
+              "description": "Triggers when remove button is clicked.",
+              "properties": [
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "fileId"
+                }
+              ]
+            }
+          ],
           "slots": [
             {
               "name": "left",
@@ -4172,6 +4198,15 @@
               },
               "default": "md"
             },
+            {
+              "name": "removable",
+              "description": "Show remove button for each file",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "config",
               "description": "Component config object.",
@@ -4191,6 +4226,20 @@
               "default": "\"\""
             }
           ],
+          "events": [
+            {
+              "name": "remove",
+              "description": "Triggers when remove button is clicked.",
+              "properties": [
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "fileId"
+                }
+              ]
+            }
+          ],
           "slots": [
             {
               "name": "default",
@@ -4967,6 +5016,15 @@
               "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."
@@ -5293,7 +5351,7 @@
                 "kind": "expression",
                 "type": "'top' | 'topWithDesc' | 'left' | 'right'"
               },
-              "default": "getDefault(defaultConfig, UInputNumber).labelAlign"
+              "default": "topWithDesc"
             },
             {
               "name": "description",
@@ -5329,7 +5387,7 @@
                 "kind": "expression",
                 "type": "boolean"
               },
-              "default": "getDefault(defaultConfig, UInputNumber).disabled"
+              "default": "false"
             },
             {
               "name": "config",
@@ -6245,6 +6303,15 @@
                 "type": "string|array"
               },
               "default": "\"\""
+            },
+            {
+              "name": "loading",
+              "description": "Loader state (shown / hidden).",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "source": {
@@ -6678,7 +6745,7 @@
           "description": "",
           "attributes": [
             {
-              "name": "sum",
+              "name": "value",
               "description": "Money value.",
               "value": {
                 "kind": "expression",
@@ -6741,8 +6808,17 @@
               "default": "default"
             },
             {
-              "name": "decimalScale",
-              "description": "Set the numeral decimal scale after the comma.",
+              "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).",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -6759,22 +6835,22 @@
               "default": ","
             },
             {
-              "name": "align",
-              "description": "Money align.",
+              "name": "thousandsSeparator",
+              "description": "A symbol used to separate the thousand parts of a number.",
               "value": {
                 "kind": "expression",
-                "type": "'right' | 'left'"
+                "type": "string"
               },
-              "default": "left"
+              "default": " "
             },
             {
-              "name": "integer",
-              "description": "Make money sum integer.",
+              "name": "align",
+              "description": "Money align.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "'right' | 'left'"
               },
-              "default": "false"
+              "default": "left"
             },
             {
               "name": "planned",
@@ -8478,6 +8554,15 @@
                 "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.",
@@ -8524,13 +8609,13 @@
               "default": "false"
             },
             {
-              "name": "resource",
-              "description": "Set loader resource name to activate table progress loader exact for that resource (deprecated).",
+              "name": "loading",
+              "description": "Set table loader state.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "boolean"
               },
-              "default": "\"\""
+              "default": "false"
             },
             {
               "name": "config",
@@ -8741,6 +8826,15 @@
                 "type": "array"
               }
             },
+            {
+              "name": "emptyCellLabel",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "—"
+            },
             {
               "name": "tag",
               "value": {
@@ -8925,36 +9019,33 @@
           "attributes": [
             {
               "name": "html",
-              "required": false,
-              "description": "HTML markdown or plain text.",
+              "description": "НTML markdown or plain text.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              }
+              },
+              "default": "undefined"
             },
             {
               "name": "size",
-              "required": false,
               "description": "Text size.",
               "value": {
                 "kind": "expression",
-                "type": "union"
+                "type": "'sm' | 'md' | 'lg'"
               },
               "default": "md"
             },
             {
               "name": "align",
-              "required": false,
               "description": "Text align.",
               "value": {
                 "kind": "expression",
-                "type": "union"
+                "type": "'left' | 'center' | 'right'"
               },
               "default": "left"
             },
             {
               "name": "line",
-              "required": false,
               "description": "Remove line height (useful for 1-line text).",
               "value": {
                 "kind": "expression",
@@ -8964,22 +9055,21 @@
             },
             {
               "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": [