vueless 0.0.380 → 0.0.382

package/composables/useUI.js

@@ -72,6 +72,10 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
           ...toValue(mutatedProps),
           color: color ? getColor(color) : null,
         });
+      } 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;
@@ -120,6 +124,7 @@ 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([
@@ -150,10 +155,11 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
 
     const commonAttrs = {
       ...(isTopLevelKey ? attrs : {}),
-      component: isDev ? attrs.component || componentName || null : null,
-      "config-key": isDev ? attrs["config-key"] || configKey || null : null,
-      "child-component": isDev && attrs.component ? nestedComponent || componentName : null,
-      "child-config-key": isDev && attrs.component ? configKey : null,
+      "vl-component": isDev ? attrs["vl-component"] || componentName || null : null,
+      "vl-key": isDev ? attrs["vl-config-key"] || configKey || null : null,
+      "vl-child-component":
+        isDev && attrs["vl-component"] ? nestedComponent || componentName : null,
+      "vl-child-key": isDev && attrs["vl-component"] ? configKey : null,
     };
 
     // Delete value key to prevent v-model overwrite

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.380",
+  "version": "0.0.382",
   "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/ui.form-input-search/UInputSearch.vue

@@ -1,7 +1,6 @@
 <template>
   <UInput
     :id="elementId"
-    ref="searchInput"
     :model-value="localValue"
     :size="size"
     :disabled="disabled"
@@ -15,7 +14,7 @@
     :left-icon="leftIcon"
     v-bind="inputAttrs"
     :data-test="dataTest"
-    @update:model-value="onUpdateModelValue"
+    @update:model-value="onUpdateValue"
     @keyup.enter="onKeyupEnter"
   >
     <template #left>
@@ -79,13 +78,13 @@
 </template>
 
 <script setup>
-import { computed, ref, useId } from "vue";
+import { computed, useId, ref, watchEffect } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UInput from "../ui.form-input/UInput.vue";
 import UButton from "../ui.button/UButton.vue";
 import { getDefault } from "../utils/utilUI.js";
-import { debounce as setDebounce } from "../utils/utilHelper.js";
+import { createDebounce } from "../utils/utilHelper.js";
 
 import { UInputSearch } from "./constants.js";
 import defaultConfig from "./config.js";
@@ -172,7 +171,7 @@ const props = defineProps({
    * Minimum character length for search.
    */
   minLength: {
-    type: [String, Number],
+    type: [Number, String],
     default: getDefault(defaultConfig, UInputSearch).minLength,
   },
 
@@ -209,7 +208,7 @@ const props = defineProps({
   },
 
   debounce: {
-    type: [String, Number],
+    type: [Number, String],
     default: getDefault(defaultConfig, UInputSearch).debounce,
   },
 
@@ -249,6 +248,10 @@ const emit = defineEmits([
   "search",
 ]);
 
+let updateValueWithDebounce = createDebounce((value) => {
+  emit("update:modelValue", value);
+}, Number(props.debounce));
+
 const localValue = ref("");
 
 const elementId = props.id || useId();
@@ -275,17 +278,23 @@ const buttonSize = computed(() => {
   return sizes[props.size];
 });
 
-function onUpdateModelValue(value) {
+watchEffect(() => {
+  updateValueWithDebounce = createDebounce((value) => {
+    emit("update:modelValue", value);
+  }, Number(props.debounce));
+});
+
+function onUpdateValue(value) {
   localValue.value = value;
 
   if (!value) {
-    emit("update:modelValue", localValue.value);
+    updateValueWithDebounce(value);
+
+    return;
   }
 
   if (value.length >= Number(props.minLength)) {
-    Number(props.minLength)
-      ? setDebounce(() => emit("update:modelValue", localValue.value), Number(props.debounce))()
-      : value && emit("update:modelValue", localValue.value);
+    updateValueWithDebounce(value);
   }
 }
 
@@ -305,7 +314,8 @@ function onClickSearch() {
 
 function onClickClear() {
   localValue.value = "";
-  emit("update:modelValue", localValue.value);
+
+  emit("update:modelValue", "");
   emit("clear");
 }
 </script>

package/ui.form-select/USelect.vue

@@ -310,11 +310,13 @@
 
 <script setup>
 import { ref, computed, nextTick, watch, useSlots, onMounted, useId } from "vue";
-import { debounce, merge } from "lodash-es";
+import { merge } from "lodash-es";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import ULabel from "../ui.form-label/ULabel.vue";
 import UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
+
+import { createDebounce } from "../utils/utilHelper.js";
 import { getDefault } from "../utils/utilUI.js";
 import { isMac } from "../utils/utilPlatform.js";
 
@@ -729,7 +731,7 @@ const isLocalValue = computed(() => {
     : Boolean(String(localValue.value));
 });
 
-const onSearchChange = debounce(function (query) {
+const onSearchChange = createDebounce(function (query) {
   emit("searchChange", query);
 }, 300);
 

package/utils/utilHelper.js

@@ -38,20 +38,18 @@ export function cloneDeep(entity, cache = new WeakMap()) {
 }
 
 /**
- Invoke function with delay (same as lodash.debounce).
+ Creates a debounced function with delay (same as lodash.debounce).
  @param {Function} func
- @param {Number} wait
+ @param {Number} ms
 
  @returns {Function}
  */
-export function debounce(func, wait) {
+export function createDebounce(func, ms) {
   let timeout;
 
-  return function (...args) {
-    const context = this;
-
+  return function () {
     clearTimeout(timeout);
-    timeout = setTimeout(() => func.apply(context, args), wait);
+    timeout = setTimeout(() => func.apply(this, arguments), ms);
   };
 }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.380",
+  "version": "0.0.382",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -5383,7 +5383,7 @@
               "description": "Minimum character length for search.",
               "value": {
                 "kind": "expression",
-                "type": "string|number"
+                "type": "number|string"
               },
               "default": "0"
             },
@@ -5427,7 +5427,7 @@
               "name": "debounce",
               "value": {
                 "kind": "expression",
-                "type": "string|number"
+                "type": "number|string"
               },
               "default": "300"
             },