vueless 0.0.285 → 0.0.287

package/ui.form-date-picker-range/index.stories.js

@@ -2,6 +2,8 @@ import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storyboo
 
 import UDatePickerRange from "../ui.form-date-picker-range";
 import URow from "../ui.container-row";
+import UIcon from "../ui.image-icon";
+import UButton from "../ui.button";
 
 import { addDays } from "../ui.form-calendar/services/date.service";
 
@@ -31,7 +33,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UDatePickerRange },
+  components: { UDatePickerRange, UIcon, UButton },
   setup() {
     const slots = getSlotNames(UDatePickerRange.name);
 
@@ -165,22 +167,60 @@ customRangeButton.args = {
   value: { from: null, to: null },
 };
 
-export const slotLeft = DefaultTemplate.bind({});
-slotLeft.args = {
+export const leftIcon = DefaultTemplate.bind({});
+leftIcon.args = {
+  leftIcon: "star",
+  variant: "input",
+};
+
+export const rightIcon = DefaultTemplate.bind({});
+rightIcon.args = {
+  rightIcon: "star",
+  variant: "input",
+};
+
+export const leftIconSlot = DefaultTemplate.bind({});
+leftIconSlot.args = {
+  variant: "input",
+  slotTemplate: `
+    <template #left-icon>
+      <UIcon
+        name="archive"
+        color="red"
+      />
+    </template>
+  `,
+};
+
+export const rightIconSlot = DefaultTemplate.bind({});
+rightIconSlot.args = {
+  variant: "input",
+  slotTemplate: `
+    <template #right-icon>
+      <UIcon
+        name="archive"
+        color="red"
+      />
+    </template>
+  `,
+};
+
+export const leftSlot = DefaultTemplate.bind({});
+leftSlot.args = {
   variant: "input",
   slotTemplate: `
     <template #left>
-      🤘
+      <UButton variant="thirdary" filled square label="Filter" class="rounded-r-none h-full" />
     </template>
   `,
 };
 
-export const slotRight = DefaultTemplate.bind({});
-slotRight.args = {
+export const rightSlot = DefaultTemplate.bind({});
+rightSlot.args = {
   variant: "input",
   slotTemplate: `
     <template #right>
-      🤘
+      <UButton variant="thirdary" filled square label="Filter" class="rounded-l-none" />
     </template>
   `,
 };

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

@@ -12,18 +12,28 @@
       :description="description"
       :error="error"
       readonly
+      :left-icon="leftIcon"
+      :right-icon="rightIcon"
       v-bind="inputAttrs"
       @focus="activate"
     >
       <template #left>
+        <!-- @slot Use it to add something before the date. -->
         <slot name="left" />
       </template>
 
+      <template #left-icon>
+        <!-- @slot Use it to add icon before the date. -->
+        <slot name="left-icon" />
+      </template>
+
       <template #right-icon>
+        <!-- @slot Use it to add icon after the date. -->
         <slot name="right-icon" />
       </template>
 
       <template #right>
+        <!-- @slot Use it to add something after the date. -->
         <slot name="right" />
       </template>
     </UInput>
@@ -349,6 +359,22 @@ const props = defineProps({
     default: getDefault(defaultConfig, UDatePickerRange).size,
   },
 
+  /**
+   * Left side icon name.
+   */
+  leftIcon: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Right side icon name.
+   */
+  rightIcon: {
+    type: String,
+    default: "",
+  },
+
   /**
    * Label text for input type.
    */
@@ -415,9 +441,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

@@ -43,8 +43,8 @@ export default /*tw*/ {
       },
       error: {
         true: `
-        bg-red-50 hover:border-red-400 focus:border-red-500 focus:ring-red-500/15
-        focus-within:border-red-500 focus-within:ring-red-500/15
+        bg-red-50 hover:border-red-400 focus:border-red-500 focus:ring-red-700/15
+        focus-within:border-red-500 focus-within:ring-red-700/15
       `,
       },
     },

package/ui.form-input/index.vue

@@ -49,7 +49,7 @@
           :disabled="disabled"
           :maxlength="maxLength"
           :inputmode="inputmode"
-          :data-cy="dataCy"
+          :data-test="dataTest"
           v-bind="inputAttrs"
           @focus="onFocus"
           @blur="onBlur"
@@ -67,7 +67,7 @@
           color="gray"
           interactive
           internal
-          :data-cy="`${dataCy}-show-password`"
+          :data-test="`${dataTest}-show-password`"
           v-bind="passwordIconAttrs"
           @click="onClickShowPassword"
         />
@@ -315,9 +315,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

@@ -25,13 +25,13 @@
           <template #right="{ file }">
             <UIcon
               v-if="props.multiple && !disabled"
-              pill
+              round
               internal
               interactive
               color="brand"
               :size="removeItemIconSize"
               :name="config.removeItemIconName"
-              :data-cy="`${dataCy}-remove-item`"
+              :data-test="`${dataTest}-remove-item`"
               v-bind="removeItemIconAttrs"
               @click.stop.prevent="onClickRemoveItem(file.id)"
             />
@@ -51,7 +51,7 @@
               :label="currentLocale.uploadFile"
               :disabled="disabled"
               v-bind="chooseFileButtonAttrs"
-              :data-cy="`${dataCy}-upload`"
+              :data-test="`${dataTest}-upload`"
             />
 
             <input
@@ -67,7 +67,7 @@
 
           <UButton
             v-if="isValue && !disabled"
-            pill
+            round
             square
             filled
             no-ring
@@ -76,7 +76,7 @@
             :disabled="disabled"
             :left-icon="config.clearIconName"
             v-bind="clearButtonAttrs"
-            :data-cy="`${dataCy}-clear`"
+            :data-test="`${dataTest}-clear`"
             @click="onClickResetFiles"
           />
         </div>
@@ -209,9 +209,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

package/ui.form-input-money/index.stories.js

@@ -2,6 +2,8 @@ import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storyboo
 
 import UInputMoney from "../ui.form-input-money";
 import UCol from "../ui.container-col";
+import UIcon from "../ui.image-icon";
+import UButton from "../ui.button";
 
 /**
  * The `UInputMoney` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-input-money)
@@ -20,7 +22,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UInputMoney },
+  components: { UInputMoney, UIcon, UButton },
   setup() {
     const slots = getSlotNames(UInputMoney.name);
 
@@ -101,3 +103,55 @@ readOnly.args = { readOnly: true };
 
 export const disabled = DefaultTemplate.bind({});
 disabled.args = { disabled: true };
+
+export const leftIcon = DefaultTemplate.bind({});
+leftIcon.args = {
+  leftIcon: "star",
+};
+
+export const rightIcon = DefaultTemplate.bind({});
+rightIcon.args = {
+  rightIcon: "star",
+};
+
+export const leftIconSlot = DefaultTemplate.bind({});
+leftIconSlot.args = {
+  slotTemplate: `
+    <template #left-icon>
+      <UIcon
+        name="archive"
+        color="red"
+      />
+    </template>
+  `,
+};
+
+export const rightIconSlot = DefaultTemplate.bind({});
+rightIconSlot.args = {
+  slotTemplate: `
+    <template #right-icon>
+      <UIcon
+        name="archive"
+        color="red"
+      />
+    </template>
+  `,
+};
+
+export const leftSlot = DefaultTemplate.bind({});
+leftSlot.args = {
+  slotTemplate: `
+    <template #left>
+      <UButton variant="thirdary" filled square label="Filter" class="rounded-r-none h-full" />
+    </template>
+  `,
+};
+
+export const rightSlot = DefaultTemplate.bind({});
+rightSlot.args = {
+  slotTemplate: `
+    <template #right>
+      <UButton variant="thirdary" filled square label="Filter" class="rounded-l-none" />
+    </template>
+  `,
+};

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

@@ -11,7 +11,9 @@
     :error="error"
     :disabled="disabled"
     inputmode="decimal"
-    :data-cy="`${dataCy}-base-currency`"
+    :data-test="`${dataTest}-base-currency`"
+    :left-icon="leftIcon"
+    :right-icon="rightIcon"
     v-bind="inputAttrs"
     @keyup="onKeyup"
     @blur="onBlur"
@@ -22,15 +24,20 @@
       <slot name="left" />
     </template>
 
-    <template #right>
-      <!-- @slot Use it to add something right. -->
-      <slot name="right" />
+    <template #left-icon>
+      <!-- @slot Use it to add icon before the text. -->
+      <slot name="left-icon" />
     </template>
 
     <template #right-icon>
-      <!-- @slot Use it to add right icon. -->
+      <!-- @slot Use it to add icon after the text. -->
       <slot name="right-icon" />
     </template>
+
+    <template #right>
+      <!-- @slot Use it to add something right. -->
+      <slot name="right" />
+    </template>
   </UInput>
 </template>
 
@@ -116,6 +123,22 @@ const props = defineProps({
     default: getDefault(defaultConfig, UInputMoney).size,
   },
 
+  /**
+   * Left side icon name.
+   */
+  leftIcon: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Right side icon name.
+   */
+  rightIcon: {
+    type: String,
+    default: "",
+  },
+
   /**
    * Number of signs after the comma.
    */
@@ -198,9 +221,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

@@ -1,11 +1,11 @@
 <template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+  <div :data-test="dataTest" v-bind="wrapperAttrs">
     <UButton
       variant="thirdary"
       size="sm"
       filled
       square
-      pill
+      round
       :disabled="isRemoveButtonDisabled"
       v-bind="removeButtonAttrs"
       @click="onClickRemove"
@@ -15,7 +15,7 @@
         :size="size"
         :name="config.removeIconName"
         :color="isRemoveButtonDisabled ? 'gray' : 'grayscale'"
-        :data-cy="`${dataCy}-remove`"
+        :data-test="`${dataTest}-remove`"
         v-bind="removeIconAttrs"
       />
     </UButton>
@@ -30,7 +30,7 @@
       size="sm"
       filled
       square
-      pill
+      round
       :disabled="isAddButtonDisabled"
       v-bind="addButtonAttrs"
       @click="onClickAdd"
@@ -40,7 +40,7 @@
         :size="size"
         :name="config.addIconName"
         :color="isAddButtonDisabled ? 'gray' : 'grayscale'"
-        :data-cy="`${dataCy}-add`"
+        :data-test="`${dataTest}-add`"
         v-bind="addIconAttrs"
       />
     </UButton>
@@ -120,9 +120,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

@@ -6,7 +6,7 @@
     :align="labelAlign"
     :description="description"
     v-bind="labelAttrs"
-    :data-cy="dataCy"
+    :data-test="dataTest"
   >
     <div v-bind="wrapperAttrs">
       <div v-if="counter || hasSlotContent($slots['counter'])" v-bind="counterAttrs">
@@ -30,7 +30,7 @@
           :interactive="selectable"
           :name="star <= counterValue ? config.selectedIconName : config.unselectedIconName"
           v-bind="starAttrs"
-          :data-cy="`${dataCy}-rating-star-${star}`"
+          :data-test="`${dataTest}-rating-star-${star}`"
           @click="onClickStar(star)"
           @mouseleave="onMouseHover()"
           @mouseover="onMouseHover(star)"
@@ -155,9 +155,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

package/ui.form-input-search/index.stories.js

@@ -2,6 +2,7 @@ import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storyboo
 
 import UInputSearch from "../ui.form-input-search";
 import UButton from "../ui.button";
+import UIcon from "../ui.image-icon";
 import URow from "../ui.container-row";
 
 /**
@@ -17,7 +18,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UInputSearch, UButton },
+  components: { UInputSearch, UButton, UIcon },
   setup() {
     const slots = getSlotNames(UInputSearch.name);
 
@@ -61,17 +62,54 @@ searchButton.args = { searchButtonLabel: "Search" };
 export const sizes = EnumVariantTemplate.bind({});
 sizes.args = { enum: "size" };
 
-export const slotLeft = DefaultTemplate.bind({});
-slotLeft.args = {
+export const leftIcon = DefaultTemplate.bind({});
+leftIcon.args = {
+  leftIcon: "star",
+};
+
+export const rightIcon = DefaultTemplate.bind({});
+rightIcon.args = {
+  rightIcon: "star",
+};
+
+export const leftIconSlot = DefaultTemplate.bind({});
+leftIconSlot.args = {
   slotTemplate: `
-    <template #left>
-      <UButton
-        label="Filter"
-        variant="thirdary"
-        filled
-        no-ring
-        class="rounded-r-none"
+    <template #left-icon>
+      <UIcon
+        name="archive"
+        color="red"
+      />
+    </template>
+  `,
+};
+
+export const rightIconSlot = DefaultTemplate.bind({});
+rightIconSlot.args = {
+  slotTemplate: `
+    <template #right-icon>
+      <UIcon
+        name="archive"
+        color="red"
       />
     </template>
   `,
 };
+
+export const leftSlot = DefaultTemplate.bind({});
+leftSlot.args = {
+  slotTemplate: `
+    <template #left>
+      <UButton variant="thirdary" filled square label="Filter" class="rounded-r-none h-full" />
+    </template>
+  `,
+};
+
+export const rightSlot = DefaultTemplate.bind({});
+rightSlot.args = {
+  slotTemplate: `
+    <template #right>
+      <UButton variant="thirdary" filled square label="Filter" class="rounded-l-none" />
+    </template>
+  `,
+};

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

@@ -12,7 +12,8 @@
     :description="description"
     :placeholder="placeholder"
     inputmode="search"
-    :data-cy="dataCy"
+    :data-test="dataTest"
+    :left-icon="leftIcon"
     v-bind="inputAttrs"
     @keyup.enter="onClickSearch"
   >
@@ -33,7 +34,7 @@
         interactive
         color="gray"
         :name="config.clearIconName"
-        :data-cy="`${dataCy}-close`"
+        :data-test="`${dataTest}-close`"
         :size="iconSize"
         v-bind="clearIconAttrs"
         @click="onClickClear"
@@ -51,8 +52,8 @@
           internal
           interactive
           :size="iconSize"
-          :name="config.searchIconName"
-          :data-cy="`${dataCy}-search`"
+          :name="rightIcon || config.searchIconName"
+          :data-test="`${dataTest}-search`"
           v-bind="searchIconAttrs"
           @click="onClickSearch"
         />
@@ -68,7 +69,7 @@
           :size="buttonSize"
           no-ring
           v-bind="buttonAttrs"
-          :data-cy="`${dataCy}-right`"
+          :data-test="`${dataTest}-right`"
           @click="onClickSearch"
         />
       </slot>
@@ -110,6 +111,22 @@ const props = defineProps({
     default: getDefault(defaultConfig, UInputSearch).size,
   },
 
+  /**
+   * Left side icon name.
+   */
+  leftIcon: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Right side icon name.
+   */
+  rightIcon: {
+    type: String,
+    default: "",
+  },
+
   /**
    * Input placeholder.
    */
@@ -198,9 +215,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

package/ui.form-label/index.vue

@@ -14,16 +14,16 @@
       <label
         v-if="label"
         :for="props.for"
-        :data-cy="`${dataCy}-label`"
+        :data-test="`${dataTest}-label`"
         v-bind="labelAttrs"
         v-text="label"
       />
 
-      <div v-if="error" :data-cy="`${dataCy}-error`" v-bind="descriptionAttrs" v-text="error" />
+      <div v-if="error" :data-test="`${dataTest}-error`" v-bind="descriptionAttrs" v-text="error" />
 
       <div
         v-if="description && !error"
-        :data-cy="`${dataCy}-description`"
+        :data-test="`${dataTest}-description`"
         v-bind="descriptionAttrs"
         v-text="description"
       />
@@ -38,7 +38,7 @@
       v-if="label"
       ref="labelRef"
       :for="props.for"
-      :data-cy="`${dataCy}-label`"
+      :data-test="`${dataTest}-label`"
       v-bind="labelAttrs"
       v-text="label"
     />
@@ -46,11 +46,11 @@
     <!-- @slot Use it to wrap something into the label. -->
     <slot />
 
-    <div v-if="error" :data-cy="`${dataCy}-error`" v-bind="descriptionAttrs" v-text="error" />
+    <div v-if="error" :data-test="`${dataTest}-error`" v-bind="descriptionAttrs" v-text="error" />
 
     <div
       v-if="description && !error"
-      :data-cy="`${dataCy}-description`"
+      :data-test="`${dataTest}-description`"
       v-bind="descriptionAttrs"
       v-text="description"
     />
@@ -156,9 +156,9 @@ const props = defineProps({
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },