vueless 1.3.2-beta.1 → 1.3.2-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.3.2-beta.1",
+  "version": "1.3.2-beta.2",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.form-date-picker/UDatePicker.vue

@@ -318,7 +318,7 @@ watchEffect(() => {
           @binding {string} icon-name
         -->
         <slot name="right" :icon-name="iconName">
-          <UIcon :name="iconName" color="neutral" v-bind="rightIconAttrs" />
+          <UIcon :name="iconName" color="neutral" v-bind="rightIconAttrs" @click="activate" />
         </slot>
       </template>
     </UInput>

package/ui.form-date-picker-range/UDatePickerRange.vue

@@ -653,7 +653,7 @@ watchEffect(() => {
           @binding {string} icon-name
         -->
         <slot name="right" :icon-name="iconName">
-          <UIcon :name="iconName" color="neutral" v-bind="rightIconAttrs" />
+          <UIcon :name="iconName" color="neutral" v-bind="rightIconAttrs" @click="activate" />
         </slot>
       </template>
     </UInput>

package/ui.form-input/UInput.vue

@@ -176,9 +176,7 @@ function onKeydown(event: KeyboardEvent) {
   emit("keydown", event);
 }
 
-function onSlotClick(event: MouseEvent) {
-  if (event.target !== event.currentTarget) return;
-
+function onClickIcon() {
   inputRef.value?.focus();
 }
 
@@ -297,14 +295,19 @@ const {
         v-if="hasSlotContent($slots['left'], { iconName: leftIcon }) || leftIcon"
         v-bind="leftSlotAttrs"
         ref="leftSlotWrapper"
-        @click="onSlotClick"
       >
         <!--
           @slot Use it to add something before the text.
           @binding {string} icon-name
         -->
         <slot name="left" :icon-name="leftIcon">
-          <UIcon v-if="leftIcon" color="neutral" :name="leftIcon" v-bind="leftIconAttrs" />
+          <UIcon
+            v-if="leftIcon"
+            color="neutral"
+            :name="leftIcon"
+            v-bind="leftIconAttrs"
+            @click="onClickIcon"
+          />
         </slot>
       </span>
 
@@ -335,14 +338,19 @@ const {
       <span
         v-if="hasSlotContent($slots['right'], { iconName: rightIcon }) || rightIcon"
         v-bind="rightSlotAttrs"
-        @click="onSlotClick"
       >
         <!--
           @slot Use it to add something after the text.
           @binding {string} icon-name
         -->
         <slot name="right" :icon-name="rightIcon">
-          <UIcon v-if="rightIcon" color="neutral" :name="rightIcon" v-bind="rightIconAttrs" />
+          <UIcon
+            v-if="rightIcon"
+            color="neutral"
+            :name="rightIcon"
+            v-bind="rightIconAttrs"
+            @click="onClickIcon"
+          />
         </slot>
       </span>
     </div>

package/ui.form-input-number/storybook/stories.ts

@@ -203,9 +203,9 @@ export const Slots: StoryFn<UInputNumberArgs> = (args) => ({
   components: { UInputNumber, URow, UButton, UDropdownButton, UText },
   setup() {
     const currencies = [
-      { label: "USD", id: "usd" },
-      { label: "EUR", id: "eur" },
-      { label: "UAH", id: "uah" },
+      { label: "USD", value: "usd" },
+      { label: "EUR", value: "eur" },
+      { label: "UAH", value: "uah" },
     ];
 
     const currency = ref("usd");

package/ui.form-input-password/storybook/stories.ts

@@ -142,8 +142,8 @@ export const Slots: StoryFn<UInputPasswordArgs> = (args) => ({
   components: { UInputPassword, URow, UButton, UDropdownButton },
   setup() {
     const wifiTypes = [
-      { label: "WPA2", id: "wpa2" },
-      { label: "WPA3", id: "wpa3" },
+      { label: "WPA2", value: "wpa2" },
+      { label: "WPA3", value: "wpa3" },
     ];
 
     return { args, wifiTypes };

package/ui.form-input-search/storybook/stories.ts

@@ -155,9 +155,9 @@ export const Slots: StoryFn<UInputSearchArgs> = (args) => ({
   components: { UInputSearch, UCol, URow, UIcon, UDropdownButton, UText },
   setup() {
     const aiVersions = [
-      { label: "GPT-4o", id: "gpt-4o" },
-      { label: "GPT-4o-mini", id: "gpt-4o-mini" },
-      { label: "GPT-4", id: "gpt-4" },
+      { label: "GPT-4o", value: "gpt-4o" },
+      { label: "GPT-4o-mini", value: "gpt-4o-mini" },
+      { label: "GPT-4", value: "gpt-4" },
     ];
 
     return { args, aiVersions };

package/ui.loader-overlay/storybook/stories.ts

@@ -51,11 +51,11 @@ const EnumTemplate: StoryFn<ULoaderOverlayArgs> = (args: ULoaderOverlayArgs, { a
     const selectModel = ref(null);
 
     const options = computed(() => {
-      return argTypes?.[args.enum]?.options?.map((label, id) => ({ label, id }));
+      return argTypes?.[args.enum]?.options?.map((label, value) => ({ label, value }));
     });
 
     const selectedValue = computed(() => {
-      return options.value?.find((option) => option.id === selectModel.value)?.label;
+      return options.value?.find((option) => option.value === selectModel.value)?.label;
     });
 
     return {