vueless 0.0.381 → 0.0.383

package/composables/useUI.js

@@ -22,11 +22,11 @@ import {
 } from "../constants.js";
 
 /**
-  Merging component configs in a given sequence (bigger number = bigger priority):
-  1. Default component config
-  2. Custom global component config (/vueless.config.js)
-  3. Component config (:config="{...}" props)
-  4. Component classes (class="...")
+ * Merging component configs in a given sequence (bigger number = bigger priority):
+ * 1. Default component config
+ * 2. Custom global component config (/vueless.config.js)
+ * 3. Component config (:config="{...}" props)
+ * 4. Component classes (class="...")
  */
 export default function useUI(defaultConfig = {}, propsConfigGetter = null, topLevelClassKey) {
   const { type, props } = getCurrentInstance();
@@ -109,7 +109,7 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
    * @param keysToExtendConfig
    * @returns {Object}
    */
-  function getKeysAttrs(mutatedProps, extendingKeys = [], keysToExtendConfig = {}) {
+  function getKeysAttrs(mutatedProps = {}, extendingKeys = [], keysToExtendConfig = {}) {
     const keysToExtend = Object.keys(keysToExtendConfig);
     const keysAttrs = {};
 
@@ -124,7 +124,6 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
         const { base, extend } = keysToExtendConfig[key];
         const keyAttrs = keysAttrs[`${key}Attrs`];
 
-        // TODO: if value of the key contains keys related to the nested nested component it should be skipped
         keysAttrs[`${key}Attrs`] = computed(() => ({
           ...keyAttrs.value,
           class: cx([
@@ -210,13 +209,13 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
 }
 
 /**
-  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}
+ * 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);
@@ -243,15 +242,15 @@ function getMergedConfig({ defaultConfig, globalConfig, propsConfig, vuelessStra
 }
 
 /**
-  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}
+ * 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}
  */
 function mergeConfigs({
   defaultConfig,
@@ -369,14 +368,14 @@ function stringToObject(value, { addBase = false }) {
 }
 
 /**
-  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}
+ * 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 (
@@ -393,9 +392,9 @@ function mergeCompoundVariants({ defaultConfig, globalConfig, propsConfig, key,
 
   const config = defaultConfig[key].map((defaultConfigItem) => {
     /**
-     Compare two objects by keys for match.
-     @param {Object} configItem
-     @returns {Boolean}
+     * Compare two objects by keys for match.
+     * @param {Object} configItem
+     * @returns {Boolean}
      */
     function isSameItem(configItem) {
       const hasConfigItemKeys = Object.keys(defaultConfigItem)
@@ -410,9 +409,9 @@ function mergeCompoundVariants({ defaultConfig, globalConfig, propsConfig, key,
     }
 
     /**
-     Find the same compound variant item in custom config if exist.
-     @param {Object} config
-     @returns {Object|undefined}
+     * 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);
@@ -446,12 +445,12 @@ function mergeCompoundVariants({ defaultConfig, globalConfig, propsConfig, key,
 }
 
 /**
-  Merge component classes from "class" attribute into final config.
-  @param {Object} config
-  @param {Object} attrs
-  @param {string} topLevelClassKey
-
-  @returns {Object}
+ * 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") {
@@ -464,18 +463,18 @@ function mergeClassesIntoConfig(config, topLevelClassKey, attrs) {
 }
 
 /**
- Return base classes.
- @param { String | Object } value
- @returns { String }
+ * Return base classes.
+ * @param { String | Object } value
+ * @returns { String }
  */
 function getBaseClasses(value) {
   return typeof value === "object" ? value.base || "" : value || "";
 }
 
 /**
- Check is config key contains component name and if contains return it.
- @param { String | Object } value
- @returns { String }
+ * Check is config key contains component name and if contains return it.
+ * @param { String | Object } value
+ * @returns { String }
  */
 function getNestedComponent(value) {
   const classes = getBaseClasses(value);
@@ -487,9 +486,9 @@ function getNestedComponent(value) {
 }
 
 /**
- Check is config key not contains classes or CVA config object.
- @param { String } key
- @returns { Boolean }
+ * Check is config key not contains classes or CVA config object.
+ * @param { String } key
+ * @returns { Boolean }
  */
 function isSystemKey(key) {
   const isExactKey = Object.values(SYSTEM_CONFIG_KEY).some((value) => value === key);
@@ -498,9 +497,9 @@ function isSystemKey(key) {
 }
 
 /**
- Check is config contains default CVA keys.
- @param { Object | String } config
- @returns { Boolean }
+ * Check is config contains default CVA keys.
+ * @param { Object | String } config
+ * @returns { Boolean }
  */
 function isCVA(config) {
   if (typeof config !== "object") return false;
@@ -511,11 +510,11 @@ function isCVA(config) {
 }
 
 /**
-  Check if slot defined, and have a content.
-  @param slot
-  @param props
-
-  @returns {boolean}
+ * 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] : []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.381",
+  "version": "0.0.383",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.form-checkbox-multi-state/useAttrs.js

@@ -1,50 +1,28 @@
+import { computed } from "vue";
 import useUI from "../composables/useUI.js";
-import { cva } from "../utils/utilUI.js";
+
 import defaultConfig from "./config.js";
-import { computed } from "vue";
 
 export default function useAttrs(props, { selected }) {
-  const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(
-    defaultConfig,
-    () => props.config,
-  );
-  const attrs = {};
-
-  for (const key in defaultConfig) {
-    if (isSystemKey(key)) continue;
-
-    const classes = computed(() => {
-      let value = config.value[key];
+  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
 
-      if (isCVA(value)) {
-        value = cva(value)({
-          ...props,
-        });
-      }
+  const keysAttrs = getKeysAttrs();
 
-      return value;
-    });
+  const { checkboxAttrs } = keysAttrs;
 
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-
-    if (key === "checkbox") {
-      const checkboxAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => {
-        if (selected.value.icon) {
-          checkboxAttrs.value.config = checkboxAttrs.value.config || {};
-          checkboxAttrs.value.config.defaults = checkboxAttrs.value.config.defaults || {};
-          checkboxAttrs.value.config.defaults.checkedIcon = selected.value.icon;
-        }
-
-        return checkboxAttrs.value;
-      });
+  keysAttrs.checkboxAttrs = computed(() => {
+    if (selected.value.icon) {
+      checkboxAttrs.value.config = checkboxAttrs.value.config || {};
+      checkboxAttrs.value.config.defaults = checkboxAttrs.value.config.defaults || {};
+      checkboxAttrs.value.config.defaults.checkedIcon = selected.value.icon;
     }
-  }
+
+    return checkboxAttrs.value;
+  });
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/utils/utilHelper.js

@@ -1,9 +1,9 @@
 /**
- Deeply clone given object (same as lodash.cloneDeep).
- @param {Object} entity
- @param cache
-
- @returns {Object}
+ * Deeply clone given object (same as lodash.cloneDeep).
+ * @param {Object} entity
+ * @param cache
+ *
+ * @returns {Object}
  */
 export function cloneDeep(entity, cache = new WeakMap()) {
   // primitives
@@ -38,11 +38,11 @@ export function cloneDeep(entity, cache = new WeakMap()) {
 }
 
 /**
- Creates a debounced function with delay (same as lodash.debounce).
- @param {Function} func
- @param {Number} ms
-
- @returns {Function}
+ * Creates a debounced function with delay (same as lodash.debounce).
+ * @param {Function} func
+ * @param {Number} ms
+ *
+ * @returns {Function}
  */
 export function createDebounce(func, ms) {
   let timeout;
@@ -54,13 +54,13 @@ export function createDebounce(func, ms) {
 }
 
 /**
- Change page title in runtime by provided config.
- @param {Object} config
- @param {string} config.title
- @param {string} config.separator
- @param {string} config.suffix
-
- @returns {VoidFunction}
+ * Change page title in runtime by provided config.
+ * @param {Object} config
+ * @param {string} config.title
+ * @param {string} config.separator
+ * @param {string} config.suffix
+ *
+ * @returns {VoidFunction}
  */
 export function setTitle({ title, separator = " / ", suffix = "" }) {
   if (isCSR) {
@@ -69,13 +69,13 @@ export function setTitle({ title, separator = " / ", suffix = "" }) {
 }
 
 /**
- Check is code rendering on the server side.
- @returns {boolean}
+ * Check is code rendering on the server side.
+ * @returns {boolean}
  */
 export const isSSR = typeof window === "undefined";
 
 /**
- Check is code rendering on the client side.
- @returns {boolean}
+ * Check is code rendering on the client side.
+ * @returns {boolean}
  */
 export const isCSR = typeof window !== "undefined";

package/utils/utilStorybook.js

@@ -144,13 +144,6 @@ export function getSource(defaultConfig) {
   return defaultConfig.replace("export default /*tw*/ ", "").replace(";", "");
 }
 
-// TODO: remove it when allSlotsFragment will be replaced to getSlotsFragment
-export const allSlotsFragment = `
-  <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-    <template v-if="args[slot + 'Slot']">{{ args[slot + 'Slot'] }}</template>
-  </template>
-`;
-
 export function getSlotsFragment(defaultTemplate) {
   return `
   <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>

package/utils/utilUI.js

@@ -10,9 +10,9 @@ import {
 } from "../constants.js";
 
 /**
- 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.
+ * 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 = {};
 
@@ -35,9 +35,9 @@ if (isCSR) {
 }
 
 /**
- 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
+ * 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(
@@ -59,11 +59,11 @@ const twMerge = extendTailwindMerge(
 );
 
 /**
- 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 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,
@@ -84,11 +84,11 @@ export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVa
   });
 
 /**
- Return default values for component props, icons, etc..
- @param { Object } defaultConfig
- @param { String } name
-
- @returns { Object }
+ * Return default values for component props, icons, etc..
+ * @param { Object } defaultConfig
+ * @param { String } name
+ *
+ * @returns { Object }
  */
 export function getDefault(defaultConfig, name) {
   const defaults = merge(
@@ -102,10 +102,11 @@ export function getDefault(defaultConfig, name) {
 }
 
 /**
- Return `grayscale` color if in component config it `brand` but in vueless config it `grayscale`
- Otherwise return given color.
- @param { String } color
- @returns { String }
+ * Return `grayscale` color if in component config it `brand` but in vueless config it `grayscale`
+ * Otherwise return given color.
+ * @param { String } color
+ *
+ * @returns { String }
  */
 export function getColor(color) {
   return (vuelessConfig.brand ?? DEFAULT_BRAND_COLOR) === GRAYSCALE_COLOR && color === BRAND_COLOR
@@ -114,11 +115,11 @@ export function getColor(color) {
 }
 
 /**
- Replace in tailwind classes `{color}` variable into given color.
- @param { String } classes
- @param { String } color
-
- @returns { String }
+ * Replace in tailwind classes `{color}` variable into given color.
+ * @param { String } classes
+ * @param { String } color
+ *
+ * @returns { String }
  */
 export function setColor(classes, color) {
   if (typeof classes !== "string") {
@@ -129,9 +130,10 @@ export function setColor(classes, color) {
 }
 
 /**
- Generates simple unique identifier.
- @param { Number } length
- @returns { String }
+ * Generates simple unique identifier.
+ * @param { Number } length
+ *
+ * @returns { String }
  */
 export function getRandomId(length = 15) {
   const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.381",
+  "version": "0.0.383",
   "contributions": {
     "html": {
       "description-markup": "markdown",