vueless 0.0.284 → 0.0.286

package/package.json

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

package/ui.button/composables/attrs.composable.js

@@ -22,8 +22,8 @@ export default function useAttrs(props) {
           ...props,
           color: getColor(props.color),
           square: props.loading || props.square,
-          leftIcon: Boolean(props.iconLeft) || hasSlotContent(slots["left-icon"]),
-          rightIcon: Boolean(props.iconRight) || hasSlotContent(slots["right-icon"]),
+          leftIcon: Boolean(props.leftIcon) || hasSlotContent(slots["left-icon"]),
+          rightIcon: Boolean(props.rightIcon) || hasSlotContent(slots["right-icon"]),
         });
       }
 

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

@@ -145,29 +145,36 @@ MinMax.args = {
   modelValue: new Date(2022, 2, 24),
 };
 
-export const slotIcon = DefaultTemplate.bind({});
-slotIcon.args = {
-  slotTemplate: `
-    <template #right-icon>
-      <UIcon name="star" color="black" />
-    </template>
-  `,
+export const leftIcon = DefaultTemplate.bind({});
+leftIcon.args = {
+  leftIcon: "star",
 };
 
-export const slotRight = DefaultTemplate.bind({});
-slotRight.args = {
+export const rightIcon = DefaultTemplate.bind({});
+rightIcon.args = {
+  rightIcon: "star",
+};
+
+export const leftIconSlot = DefaultTemplate.bind({});
+leftIconSlot.args = {
   slotTemplate: `
-    <template #right>
-      🤘🤘🤘
+    <template #left-icon>
+      <UIcon
+        name="archive"
+        color="red"
+      />
     </template>
   `,
 };
 
-export const slotLeft = DefaultTemplate.bind({});
-slotRight.args = {
+export const rightIconSlot = DefaultTemplate.bind({});
+rightIconSlot.args = {
   slotTemplate: `
-    <template #left>
-      🤘🤘🤘
+    <template #right-icon>
+      <UIcon
+        name="archive"
+        color="red"
+      />
     </template>
   `,
 };

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

@@ -12,6 +12,8 @@
       readonly
       :disabled="disabled"
       :size="size"
+      :left-icon="leftIcon"
+      :right-icon="rightIcon"
       v-bind="inputAttrs"
       @focus="activate"
     >
@@ -20,6 +22,11 @@
         <slot name="left" />
       </template>
 
+      <template #left-icon>
+        <!-- @slot Use it add an icon before the date. -->
+        <slot name="left-icon" />
+      </template>
+
       <template #right-icon>
         <!-- @slot Use it add an icon after the date. -->
         <slot name="right-icon" />
@@ -186,6 +193,22 @@ const props = defineProps({
     default: getDefault(defaultConfig, UDatePicker).size,
   },
 
+  /**
+   * Left side icon name.
+   */
+  leftIcon: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Right side icon name.
+   */
+  rightIcon: {
+    type: String,
+    default: "",
+  },
+
   /**
    * Date format.
    */

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.
    */

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

@@ -12,6 +12,8 @@
     :disabled="disabled"
     inputmode="decimal"
     :data-cy="`${dataCy}-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.
    */

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

@@ -13,6 +13,7 @@
     :placeholder="placeholder"
     inputmode="search"
     :data-cy="dataCy"
+    :left-icon="leftIcon"
     v-bind="inputAttrs"
     @keyup.enter="onClickSearch"
   >
@@ -51,7 +52,7 @@
           internal
           interactive
           :size="iconSize"
-          :name="config.searchIconName"
+          :name="rightIcon || config.searchIconName"
           :data-cy="`${dataCy}-search`"
           v-bind="searchIconAttrs"
           @click="onClickSearch"
@@ -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.
    */

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.284",
+  "version": "0.0.286",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2230,6 +2230,24 @@
               },
               "default": "md"
             },
+            {
+              "name": "leftIcon",
+              "description": "Left side icon name.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "name": "rightIcon",
+              "description": "Right side icon name.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
             {
               "name": "dateFormat",
               "description": "Date format.",
@@ -2306,6 +2324,10 @@
               "name": "left",
               "description": "Use it add something before the date."
             },
+            {
+              "name": "left-icon",
+              "description": "Use it add an icon before the date."
+            },
             {
               "name": "right-icon",
               "description": "Use it add an icon after the date."
@@ -2394,6 +2416,24 @@
               },
               "default": "md"
             },
+            {
+              "name": "leftIcon",
+              "description": "Left side icon name.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "name": "rightIcon",
+              "description": "Right side icon name.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
             {
               "name": "label",
               "description": "Label text for input type.",
@@ -2491,13 +2531,20 @@
           ],
           "slots": [
             {
-              "name": "left"
+              "name": "left",
+              "description": "Use it to add something before the date."
             },
             {
-              "name": "right-icon"
+              "name": "left-icon",
+              "description": "Use it to add icon before the date."
             },
             {
-              "name": "right"
+              "name": "right-icon",
+              "description": "Use it to add icon after the date."
+            },
+            {
+              "name": "right",
+              "description": "Use it to add something after the date."
             }
           ],
           "source": {
@@ -4526,6 +4573,24 @@
               },
               "default": "md"
             },
+            {
+              "name": "leftIcon",
+              "description": "Left side icon name.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "name": "rightIcon",
+              "description": "Right side icon name.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
             {
               "name": "decimalScale",
               "description": "Number of signs after the comma.",
@@ -4646,12 +4711,16 @@
               "description": "Use it to add something left."
             },
             {
-              "name": "right",
-              "description": "Use it to add something right."
+              "name": "left-icon",
+              "description": "Use it to add icon before the text."
             },
             {
               "name": "right-icon",
-              "description": "Use it to add right icon."
+              "description": "Use it to add icon after the text."
+            },
+            {
+              "name": "right",
+              "description": "Use it to add something right."
             }
           ],
           "source": {
@@ -4941,6 +5010,24 @@
               },
               "default": "md"
             },
+            {
+              "name": "leftIcon",
+              "description": "Left side icon name.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "name": "rightIcon",
+              "description": "Right side icon name.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
             {
               "name": "placeholder",
               "description": "Input placeholder.",