vueless 0.0.379 → 0.0.381

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.379",
+  "version": "0.0.381",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.data-list/storybook/stories.js

@@ -45,16 +45,12 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UDataList, UIcon, URow, UButton },
   setup() {
-    function onDragSort(value) {
-      this.list = value;
-    }
-
     const slots = getSlotNames(UDataList.__name);
 
-    return { args, slots, onDragSort };
+    return { args, slots };
   },
   template: `
-    <UDataList v-bind="args" @dragSort="onDragSort">
+    <UDataList v-bind="args">
       ${args.slotTemplate || getSlotsFragment()}
     </UDataList>
   `,

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -54,7 +54,6 @@
       ref="dropdownListRef"
       :size="size"
       :options="options"
-      :value-key="valueKey"
       :label-key="labelKey"
       v-bind="dropdownListAttrs"
       :data-test="`${dataTest}-list`"
@@ -105,14 +104,6 @@ const props = defineProps({
     default: getDefault(defaultConfig, UDropdownBadge).labelKey,
   },
 
-  /**
-   * Value key in the item object of options.
-   */
-  valueKey: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownBadge).valueKey,
-  },
-
   /**
    * Badge variant.
    * @values primary, secondary, thirdary

package/ui.dropdown-badge/storybook/stories.js

@@ -13,11 +13,7 @@ export default {
   component: UDropdownBadge,
   args: {
     label: "Dropdown",
-    options: [
-      { label: "option 1", id: "1" },
-      { label: "option 2", id: "2" },
-      { label: "option 3", id: "3" },
-    ],
+    options: [{ label: "option 1" }, { label: "option 2" }, { label: "option 3" }],
   },
   argTypes: {
     ...getArgTypes(UDropdownBadge.__name),

package/ui.dropdown-button/UDropdownButton.vue

@@ -55,7 +55,6 @@
       ref="dropdownListRef"
       :size="size"
       :options="options"
-      :value-key="valueKey"
       :label-key="labelKey"
       v-bind="dropdownListAttrs"
       :data-test="`${dataTest}-list`"
@@ -107,14 +106,6 @@ const props = defineProps({
     default: getDefault(defaultConfig, UDropdownButton).labelKey,
   },
 
-  /**
-   * Value key in the item object of options.
-   */
-  valueKey: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownButton).valueKey,
-  },
-
   /**
    * Button variant.
    * @values primary, secondary, thirdary

package/ui.dropdown-button/storybook/stories.js

@@ -14,11 +14,7 @@ export default {
   component: UDropdownButton,
   args: {
     label: "Dropdown",
-    options: [
-      { label: "option 1", id: "1" },
-      { label: "option 2", id: "2" },
-      { label: "option 3", id: "3" },
-    ],
+    options: [{ label: "option 1" }, { label: "option 2" }, { label: "option 3" }],
   },
   argTypes: {
     ...getArgTypes(UDropdownButton.__name),

package/ui.dropdown-link/UDropdownLink.vue

@@ -58,7 +58,6 @@
       ref="dropdownListRef"
       :size="size"
       :options="options"
-      :value-key="valueKey"
       :label-key="labelKey"
       :data-test="`${dataTest}-list`"
       v-bind="dropdownListAttrs"
@@ -110,14 +109,6 @@ const props = defineProps({
     default: getDefault(defaultConfig, UDropdownLink).labelKey,
   },
 
-  /**
-   * Value key in the item object of options.
-   */
-  valueKey: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownLink).valueKey,
-  },
-
   /**
    * Link color.
    * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white

package/ui.form-input/config.js

@@ -16,7 +16,7 @@ export default /*tw*/ {
     variants: {
       error: {
         true: `
-          border-red-300
+          border-red-300 bg-red-50
           hover:border-red-400 hover:focus-within:border-red-500
           focus-within:border-red-500 focus-within:ring-red-700/15
         `,

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.379",
+  "version": "0.0.381",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -3108,15 +3108,6 @@
               },
               "default": "label"
             },
-            {
-              "name": "valueKey",
-              "description": "Value key in the item object of options.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "id"
-            },
             {
               "name": "variant",
               "description": "Badge variant.",
@@ -3297,15 +3288,6 @@
               },
               "default": "label"
             },
-            {
-              "name": "valueKey",
-              "description": "Value key in the item object of options.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "id"
-            },
             {
               "name": "variant",
               "description": "Button variant.",
@@ -3510,15 +3492,6 @@
               },
               "default": "label"
             },
-            {
-              "name": "valueKey",
-              "description": "Value key in the item object of options.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "id"
-            },
             {
               "name": "color",
               "description": "Link color.",
@@ -5410,7 +5383,7 @@
               "description": "Minimum character length for search.",
               "value": {
                 "kind": "expression",
-                "type": "string|number"
+                "type": "number|string"
               },
               "default": "0"
             },
@@ -5454,7 +5427,7 @@
               "name": "debounce",
               "value": {
                 "kind": "expression",
-                "type": "string|number"
+                "type": "number|string"
               },
               "default": "300"
             },