vueless 0.0.356 → 0.0.358

package/composables/useUI.js

@@ -30,7 +30,7 @@ import {
 export default function useUI(defaultConfig = {}, propsConfigGetter = null, topLevelClassKey) {
   const { type, props } = getCurrentInstance();
   const componentName = type.__name;
-  const globalConfig = vuelessConfig?.component ? vuelessConfig?.component[componentName] : {};
+  const globalConfig = vuelessConfig.component ? vuelessConfig.component[componentName] : {};
 
   const isStrategyValid =
     vuelessConfig.strategy && Object.values(STRATEGY_TYPE).includes(vuelessConfig.strategy);

package/directives/vTooltip.js

@@ -17,7 +17,7 @@ if (isCSR) {
     animation: "shift-away",
   };
 
-  settings = merge(defaultSettings, vuelessConfig?.directive?.tooltip || {});
+  settings = merge(defaultSettings, vuelessConfig.directive?.tooltip || {});
   tippy.setDefaultProps(settings);
 }
 

package/package.json

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

package/ui.form-input-search/UInputSearch.vue

@@ -2,7 +2,7 @@
   <UInput
     :id="elementId"
     ref="searchInput"
-    v-model="search"
+    :model-value="localValue"
     :size="size"
     :disabled="disabled"
     :readonly="readonly"
@@ -12,10 +12,11 @@
     :description="description"
     :placeholder="placeholder"
     inputmode="search"
-    :data-test="dataTest"
     :left-icon="leftIcon"
     v-bind="inputAttrs"
-    @keyup.enter="onClickSearch"
+    :data-test="dataTest"
+    @update:model-value="onUpdateModelValue"
+    @keyup.enter="onKeyupEnter"
   >
     <template #left>
       <!-- @slot Use it to add something before the text. -->
@@ -29,14 +30,14 @@
 
     <template #right-icon>
       <UIcon
-        v-if="modelValue"
+        v-if="localValue"
         internal
         interactive
         color="gray"
         :name="config.defaults.clearIcon"
-        :data-test="`${dataTest}-close`"
         :size="iconSize"
         v-bind="clearIconAttrs"
+        :data-test="`${dataTest}-clear`"
         @click="onClickClear"
       />
 
@@ -53,8 +54,8 @@
           interactive
           :size="iconSize"
           :name="rightIcon || config.defaults.searchIcon"
-          :data-test="`${dataTest}-search`"
           v-bind="searchIconAttrs"
+          :data-test="`${dataTest}-search-icon`"
           @click="onClickSearch"
         />
       </slot>
@@ -69,7 +70,7 @@
           :size="buttonSize"
           no-ring
           v-bind="buttonAttrs"
-          :data-test="`${dataTest}-right`"
+          :data-test="`${dataTest}-search-button`"
           @click="onClickSearch"
         />
       </slot>
@@ -84,7 +85,7 @@ 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 debounceMethod } from "../utils/utilHelper.js";
+import { debounce as setDebounce } from "../utils/utilHelper.js";
 
 import { UInputSearch } from "./constants.js";
 import defaultConfig from "./config.js";
@@ -208,7 +209,7 @@ const props = defineProps({
   },
 
   debounce: {
-    type: Number,
+    type: [String, Number],
     default: getDefault(defaultConfig, UInputSearch).debounce,
   },
 
@@ -254,17 +255,6 @@ const elementId = props.id || useId();
 
 const { config, inputAttrs, searchIconAttrs, clearIconAttrs, buttonAttrs } = useAttrs(props);
 
-const search = computed({
-  get: () => props.modelValue,
-  set: debounceMethod((value) => {
-    localValue.value = value;
-
-    if (localValue.value.length >= Number(props.minLength)) {
-      emit("update:modelValue", value);
-    }
-  }, props.debounce),
-});
-
 const iconSize = computed(() => {
   const sizes = {
     sm: "xs",
@@ -285,13 +275,34 @@ const buttonSize = computed(() => {
   return sizes[props.size];
 });
 
-function onClickClear() {
-  search.value = "";
-  emit("clear");
+function onUpdateModelValue(value) {
+  localValue.value = value;
+
+  if (!value) {
+    emit("update:modelValue", localValue.value);
+  }
+
+  if (Number(props.minLength) && value.length >= Number(props.minLength)) {
+    setDebounce(() => emit("update:modelValue", localValue.value), Number(props.debounce))();
+  }
+}
+
+function search() {
+  if (localValue.value && localValue.value.length >= Number(props.minLength)) {
+    emit("search", localValue.value);
+  }
+}
+
+function onKeyupEnter() {
+  search();
 }
 
 function onClickSearch() {
-  if (!localValue.value) return;
-  emit("search", localValue.value);
+  search();
+}
+
+function onClickClear() {
+  localValue.value = "";
+  emit("clear");
 }
 </script>

package/ui.text-header/config.js

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   header: {
-    base: "text-{color}-600 font-bold",
+    base: "text-{color}-600 font-medium",
     variants: {
       size: {
         xs: "text-lg",

package/utils/utilTheme.js

@@ -31,11 +31,11 @@ export function themeInit() {
 
 export function setTheme(config = {}) {
   const isDarkMode = setDarkMode(config);
-  const ring = config?.ring ?? vuelessConfig?.ring ?? DEFAULT_RING;
-  const ringOffset = config?.ringOffset ?? vuelessConfig?.ringOffset ?? DEFAULT_RING_OFFSET;
-  const rounding = config?.rounding ?? vuelessConfig?.rounding ?? DEFAULT_ROUNDING;
-  let brand = config?.brand ?? vuelessConfig?.brand ?? DEFAULT_BRAND_COLOR;
-  let gray = config?.gray ?? vuelessConfig?.gray ?? DEFAULT_GRAY_COLOR;
+  const ring = config?.ring ?? vuelessConfig.ring ?? DEFAULT_RING;
+  const ringOffset = config?.ringOffset ?? vuelessConfig.ringOffset ?? DEFAULT_RING_OFFSET;
+  const rounding = config?.rounding ?? vuelessConfig.rounding ?? DEFAULT_ROUNDING;
+  let brand = config?.brand ?? vuelessConfig.brand ?? DEFAULT_BRAND_COLOR;
+  let gray = config?.gray ?? vuelessConfig.gray ?? DEFAULT_GRAY_COLOR;
 
   const isBrandColor = BRAND_COLORS.some((color) => color === brand);
   const isGrayColor = GRAY_COLORS.some((color) => color === gray);
@@ -103,7 +103,7 @@ function setDarkMode(config) {
   let isDarkMode =
     storedDarkMode !== null
       ? !!Number(storedDarkMode)
-      : !!(config?.darkMode ?? vuelessConfig?.darkMode ?? config?.systemDarkMode);
+      : !!(config?.darkMode ?? vuelessConfig.darkMode ?? config?.systemDarkMode);
 
   isDarkMode
     ? isCSR && document.documentElement.classList.add(DARK_MODE_SELECTOR)

package/utils/utilUI.js

@@ -17,16 +17,20 @@ import {
 export let vuelessConfig = {};
 
 if (isSSR) {
-  (async () =>
-    (vuelessConfig = (
-      await import(/* @vite-ignore */ `${process.cwd()}/vueless.config.js?${Date.now()}`)
-    ).default))();
+  /* Load Vueless config from the project root in IIFE (no top-level await). */
+  (async () => {
+    try {
+      vuelessConfig = (await import(`${process.cwd()}/vueless.config.js`)).default;
+    } catch (error) {
+      vuelessConfig = {};
+    }
+  })();
 }
 
 if (isCSR) {
-  vuelessConfig = Object.values(
-    import.meta.glob("/vueless.config.js", { eager: true, import: "default" }),
-  )[0];
+  vuelessConfig =
+    Object.values(import.meta.glob("/vueless.config.js", { eager: true, import: "default" }))[0] ||
+    {};
 }
 
 /**
@@ -49,7 +53,7 @@ const twMerge = extendTailwindMerge(
         },
       },
     },
-    vuelessConfig?.tailwindMerge,
+    vuelessConfig.tailwindMerge,
   ),
 );
 
@@ -88,7 +92,7 @@ export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVa
 export function getDefault(defaultConfig, name) {
   const defaults = merge(
     cloneDeep(defaultConfig.defaults),
-    vuelessConfig?.component ? vuelessConfig?.component[name]?.defaults : {},
+    vuelessConfig.component ? vuelessConfig.component[name]?.defaults : {},
   );
 
   defaults.color = getColor(defaults.color);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.356",
+  "version": "0.0.358",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -5560,7 +5560,7 @@
               "name": "debounce",
               "value": {
                 "kind": "expression",
-                "type": "number"
+                "type": "string|number"
               },
               "default": "300"
             },