vueless 0.0.235 → 0.0.236

package/package.json

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

package/ui.form-input/configs/default.config.js

@@ -1,8 +1,8 @@
 export default /*tw*/ {
   label: "{ULabel}",
   inputWrapper: "flex relative w-full",
-  rightIconSlot: "flex items-center justify-end whitespace-nowrap pr-3 gap-1 rounded-dynamic rounded-l-none",
-  leftIconSlot: "flex items-center justify-end whitespace-nowrap pl-3 gap-1 rounded-dynamic rounded-r-none",
+  rightIconSlot: "flex items-center justify-end whitespace-nowrap pr-2 gap-1 rounded-dynamic rounded-l-none",
+  leftIconSlot: "flex items-center justify-end whitespace-nowrap pl-2 gap-1 rounded-dynamic rounded-r-none",
   passwordIcon: "",
   passwordVisibleIconName: "visibility-fill",
   passwordHiddenIconName: "visibility_off-fill",

package/ui.form-input/index.vue

@@ -12,6 +12,11 @@
     v-bind="labelAttrs"
   >
     <label :for="id" v-bind="blockAttrs">
+      <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapper">
+        <!-- @slot Use it to add something before the text. -->
+        <slot name="left" />
+      </span>
+
       <span
         v-if="hasSlotContent($slots['icon-left']) || iconLeft"
         ref="leftSlotWrapper"
@@ -27,11 +32,6 @@
         </slot>
       </span>
 
-      <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapper">
-        <!-- @slot Use it to add something before the text. -->
-        <slot name="left" />
-      </span>
-
       <span v-bind="inputWrapperAttrs">
         <input
           :id="id"
@@ -67,9 +67,6 @@
         />
       </label>
 
-      <!-- @slot Use it to add something after the text. -->
-      <slot name="right" />
-
       <span v-if="hasSlotContent($slots['icon-right']) || iconRight" v-bind="rightIconSlotAttrs">
         <!--
           @slot Use it to add icon after the text.
@@ -80,6 +77,9 @@
           <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" internal />
         </slot>
       </span>
+
+      <!-- @slot Use it to add something after the text. -->
+      <slot name="right" />
     </label>
   </ULabel>
 </template>

package/ui.form-input-search/configs/default.config.js

@@ -7,8 +7,8 @@ export default /*tw*/ {
     rightSlot: "pr-0",
     leftSlot: "pl-0",
   },
-  closeIcon: "{UIcon} flex h-full items-center",
-  closeIconName: "close",
+  clearIcon: "{UIcon} flex h-full items-center",
+  clearIconName: "close",
   searchIcon: "{UIcon}",
   searchIconName: "search",
   button: "{UButton} rounded-l-none ml-1 outline outline-1 outline-gray-900",

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

@@ -27,13 +27,14 @@
 
     <template #icon-right>
       <UIcon
+        v-if="modelValue"
         internal
         interactive
         color="gray"
-        :name="config.closeIconName"
+        :name="config.clearIconName"
         :data-cy="`${dataCy}-close`"
         :size="iconSize"
-        v-bind="closeIconAttrs"
+        v-bind="clearIconAttrs"
         @click="onClickClear"
       />
 
@@ -210,7 +211,7 @@ const emit = defineEmits([
 
 const localValue = ref("");
 
-const { config, inputAttrs, searchIconAttrs, closeIconAttrs, buttonAttrs } = useAttrs(props);
+const { config, inputAttrs, searchIconAttrs, clearIconAttrs, buttonAttrs } = useAttrs(props);
 
 const search = computed({
   get: () => props.modelValue,

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.235",
+  "version": "0.0.236",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -4184,6 +4184,10 @@
             }
           ],
           "slots": [
+            {
+              "name": "left",
+              "description": "Use it to add something before the text."
+            },
             {
               "name": "icon-left",
               "scoped": true,
@@ -4199,14 +4203,6 @@
                 }
               ]
             },
-            {
-              "name": "left",
-              "description": "Use it to add something before the text."
-            },
-            {
-              "name": "right",
-              "description": "Use it to add something after the text."
-            },
             {
               "name": "icon-right",
               "scoped": true,
@@ -4221,6 +4217,10 @@
                   "name": "icon-size"
                 }
               ]
+            },
+            {
+              "name": "right",
+              "description": "Use it to add something after the text."
             }
           ],
           "source": {