vueless 0.0.198 → 0.0.200

package/composable.ui/index.js

@@ -399,7 +399,13 @@ function getNestedComponent(value) {
  @returns { Boolean }
  */
 function isSystemKey(key) {
-  return Object.values(SYSTEM_CONFIG_KEY).some((value) => value.includes(key));
+  const isExactKey = Object.values(SYSTEM_CONFIG_KEY).some((value) => value === key);
+
+  return (
+    isExactKey ||
+    key.includes(SYSTEM_CONFIG_KEY.iconName) ||
+    key.includes(SYSTEM_CONFIG_KEY.iconNameCapitalize)
+  );
 }
 
 /**

package/package.json

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

package/service.ui/index.js

@@ -226,7 +226,6 @@ export const {
   setFavicon,
   setBrandColor,
   convertHexInRgb,
-  isSystemKey,
   isMac,
   isPWA,
   isIOS,

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

@@ -33,7 +33,7 @@ export default /*tw*/ {
     ],
   },
   innerWrapper: {
-    base: "flex px-4 min-h-full w-full overflow-hidden",
+    base: "flex px-4 min-h-full w-full overflow-hidden justify-between",
     variants: {
       multiple: {
         true: "grid grid-cols-1 grid-rows-[minmax(0, 1fr)_min-content]",
@@ -43,7 +43,8 @@ export default /*tw*/ {
   wrapperActive: "z-[inherit]", // applies when select active
   labelWrapperTop: "group/top", // applies when an open direction is top
   labelWrapperActive: "group/active",
-  leftSlot: "pr-4 flex items-center",
+  leftIconSlot: "pr-3 flex items-center",
+  rightIconSlot: "pl-3 flex items-center",
   caret: {
     base: "flex items-center mt-0",
     compoundVariants: [

package/ui.form-select/index.stories.js

@@ -1,8 +1,9 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 import USelect from "../ui.form-select";
 import URow from "../ui.container-row";
 import UBadge from "../ui.text-badge";
+import UIcon from "../ui.image-icon";
 
 /**
  * The `USelect` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-select)
@@ -43,9 +44,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <USelect v-bind="args" v-model="args.modelValue">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
+      ${allSlotsFragment}
     </USelect>
   `,
 });
@@ -170,7 +169,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 });
 
 const SlotTemplate = (args) => ({
-  components: { USelect },
+  components: { USelect, UIcon },
   setup() {
     return { args };
   },
@@ -323,6 +322,43 @@ slotBeforeCaret.args = {
   `,
 };
 
+export const slotBeforeOption = SlotTemplate.bind({});
+slotBeforeOption.args = {
+  slotTemplate: `
+    <template #before-option>
+       🤘
+    </template>
+  `,
+};
+
+export const iconLeft = DefaultTemplate.bind({});
+iconLeft.args = {
+  iconLeft: "star",
+};
+
+export const iconRight = DefaultTemplate.bind({});
+iconRight.args = {
+  iconRight: "star",
+};
+
+export const iconLeftSlot = SlotTemplate.bind({});
+iconLeftSlot.args = {
+  slotTemplate: `
+    <template #icon-left>
+      <UIcon name="star" color="green" />
+    </template>
+  `,
+};
+
+export const iconRightSlot = SlotTemplate.bind({});
+iconRightSlot.args = {
+  slotTemplate: `
+    <template #icon-right>
+      <UIcon name="star" color="green" />
+    </template>
+  `,
+};
+
 export const slotLeft = SlotTemplate.bind({});
 slotLeft.args = {
   slotTemplate: `
@@ -332,10 +368,10 @@ slotLeft.args = {
   `,
 };
 
-export const slotBeforeOption = SlotTemplate.bind({});
-slotBeforeOption.args = {
+export const slotRight = SlotTemplate.bind({});
+slotRight.args = {
   slotTemplate: `
-    <template #before-option>
+    <template #right>
        🤘
     </template>
   `,

package/ui.form-select/index.vue

@@ -28,7 +28,10 @@
         v-if="hasSlotContent($slots['after-caret']) && !(multiple && localValue.length)"
         v-bind="afterCaretSlotAttrs"
       >
-        <!-- @slot Use it to add something after caret. -->
+        <!--
+          @slot Use it to add something after caret.
+          @binding {object} scope-props
+        -->
         <slot :scope-props="props" name="after-caret" />
       </div>
 
@@ -51,7 +54,10 @@
         v-if="hasSlotContent($slots['before-caret']) && !(multiple && localValue.length)"
         v-bind="beforeCaretSlotAttrs"
       >
-        <!-- @slot Use it to add something after caret. -->
+        <!--
+          @slot Use it to add something before caret.
+          @binding {object} scope-props
+        -->
         <slot :scope-props="props" name="before-caret" />
       </div>
 
@@ -68,9 +74,32 @@
       </div>
 
       <div ref="innerWrapperRef" v-bind="innerWrapperAttrs">
+        <span
+          v-if="hasSlotContent($slots['icon-left']) || iconLeft"
+          ref="leftSlotWrapperRef"
+          v-bind="leftIconSlotAttrs"
+        >
+          <!--
+            @slot Use it to add icon before option.
+            @binding {string} icon-name
+            @binding {string} icon-size
+          -->
+          <slot name="icon-left" :icon-name="iconLeft" :icon-size="iconSize">
+            <UIcon v-if="iconLeft" :name="iconLeft" :size="iconSize" />
+          </slot>
+        </span>
+
+        <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapperRef">
+          <!-- @slot Use it to add something before input. -->
+          <slot name="left" />
+        </span>
+
         <div v-if="multiple && localValue.length" v-bind="selectedLabelsAttrs">
           <span v-for="item in localValue" :key="item[valueKey]" v-bind="selectedLabelAttrs">
-            <!-- @slot Use it to add selected value label. -->
+            <!--
+              @slot Use it to add selected value label.
+              @binding {string} selected-label
+            -->
             <slot
               name="selected-label"
               :selected-label="getOptionLabel(item)"
@@ -80,7 +109,10 @@
               {{ getOptionLabel(item) }}
             </slot>
 
-            <!-- @slot Use it to add selected value label. -->
+            <!--
+              @slot Use it to add something after selected value label.
+              @binding {object} scope-props
+            -->
             <slot :scope-props="props" name="selected-label-after" />
 
             <div
@@ -103,15 +135,6 @@
         </div>
 
         <div v-bind="searchAttrs">
-          <span
-            v-if="hasSlotContent($slots['left'])"
-            ref="leftSlotWrapperRef"
-            v-bind="leftSlotAttrs"
-          >
-            <!-- @slot Use it to add some component before text. -->
-            <slot name="left" />
-          </span>
-
           <input
             v-show="searchable || !localValue || multiple || !isOpen"
             :id="id"
@@ -139,12 +162,19 @@
           v-bind="selectedLabelAttrs"
           @mousedown.prevent="toggle"
         >
-          <!-- @slot Use it to add selected value label. -->
+          <!--
+            @slot Use it to add selected value label.
+            @binding {string} selected-label
+            @binding {string} value
+          -->
           <slot name="selected-label" :selected-label="selectedLabel" :value="localValue[valueKey]">
             {{ selectedLabel }}
           </slot>
 
-          <!-- @slot Use it to add selected value label. -->
+          <!--
+            @slot Use it to add something after selected value label.
+            @binding {object} scope-props
+          -->
           <slot :scope-props="props" name="selected-label-after" />
         </span>
 
@@ -155,6 +185,20 @@
           @click.prevent.capture
           v-text="currentLocale.clear"
         />
+
+        <!-- @slot Use it to add something after input. -->
+        <slot name="right" />
+
+        <span v-if="hasSlotContent($slots['icon-right']) || iconRight" v-bind="rightIconSlotAttrs">
+          <!--
+            @slot Use it to add icon after option.
+            @binding {string} icon-name
+            @binding {string} icon-size
+          -->
+          <slot name="icon-right" :icon-name="iconRight" :icon-size="iconSize">
+            <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" />
+          </slot>
+        </span>
       </div>
 
       <UDropdownList
@@ -176,16 +220,27 @@
         @click.prevent.capture
       >
         <template #before-option="{ option }">
-          <!-- @slot Use it to add something before option. -->
+          <!--
+            @slot Use it to add something before option.
+            @binding {other} option
+          -->
           <slot :option="option" name="before-option" />
         </template>
 
         <template #option="{ option, index }">
+          <!--
+            @slot Use it to add something instead of option.
+            @binding {other} option
+            @binding {number} index
+          -->
           <slot name="option" :option="option" :index="index" />
         </template>
 
         <template #after-option="{ option }">
-          <!-- @slot Use it to add something after option. -->
+          <!--
+            @slot Use it to add something after option.
+            @binding {other} option
+          -->
           <slot :option="option" name="after-option" />
         </template>
 
@@ -288,6 +343,22 @@ const props = defineProps({
     default: UIService.get(defaultConfig, USelect).default.size,
   },
 
+  /**
+   * Left side icon name.
+   */
+  iconLeft: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Right side icon name.
+   */
+  iconRight: {
+    type: String,
+    default: "",
+  },
+
   /**
    * Select open direction.
    * @values auto, top, bottom
@@ -412,13 +483,44 @@ const props = defineProps({
 });
 
 const emit = defineEmits([
+  /**
+   * Triggers when dropdown list is opened.
+   * @property {string} propsId
+   */
   "open",
+
+  /**
+   * Triggers when dropdown list is closed.
+   * @property {string} propsId
+   */
   "close",
+
+  /**
+   * Triggers when the input value is changed.
+   */
   "searchChange",
+
+  /**
+   * Triggers when option is removed.
+   * @property {string} option
+   * @property {string} propsId
+   */
   "remove",
+
+  /**
+   * Triggers when option is selected.
+   * @property {number} value
+   */
   "update:modelValue",
-  "select",
+
+  /**
+   * Triggers when dropdown options list is updated.
+   */
   "addOption",
+
+  /**
+   * Triggers when label position is changed.
+   */
   "change",
 ]);
 
@@ -462,7 +564,8 @@ const {
   labelAttrs,
   wrapperAttrs,
   innerWrapperAttrs,
-  leftSlotAttrs,
+  leftIconSlotAttrs,
+  rightIconSlotAttrs,
   beforeCaretSlotAttrs,
   afterCaretSlotAttrs,
   caretToggleAttrs,
@@ -699,7 +802,13 @@ function removeElement(option, shouldClose = true) {
 }
 
 function setLabelPosition() {
-  if (props.labelAlign === "top" || !hasSlotContent(slots["left"])) return;
+  if (
+    props.labelAlign === "top" ||
+    !hasSlotContent(slots["left"]) ||
+    (!hasSlotContent(slots["icon-left"]) && !props.iconLeft)
+  ) {
+    return;
+  }
 
   const leftSlotWidth = leftSlotWrapperRef.value.getBoundingClientRect().width;
   const innerWrapperPaddingLeft = parseInt(

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.198",
+  "version": "0.0.200",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -6250,6 +6250,24 @@
               },
               "default": "md"
             },
+            {
+              "name": "iconLeft",
+              "description": "Left side icon name.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "name": "iconRight",
+              "description": "Right side icon name.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
             {
               "name": "openDirection",
               "description": "Select open direction.",
@@ -6388,28 +6406,70 @@
           ],
           "events": [
             {
-              "name": "open"
-            },
-            {
-              "name": "close"
+              "name": "open",
+              "description": "Triggers when dropdown list is opened.",
+              "properties": [
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "propsId"
+                }
+              ]
             },
             {
-              "name": "searchChange"
+              "name": "close",
+              "description": "Triggers when dropdown list is closed.",
+              "properties": [
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "propsId"
+                }
+              ]
             },
             {
-              "name": "remove"
+              "name": "searchChange",
+              "description": "Triggers when the input value is changed."
             },
             {
-              "name": "update:modelValue"
+              "name": "remove",
+              "description": "Triggers when option is removed.",
+              "properties": [
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "option"
+                },
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "propsId"
+                }
+              ]
             },
             {
-              "name": "select"
+              "name": "update:modelValue",
+              "description": "Triggers when option is selected.",
+              "properties": [
+                {
+                  "type": [
+                    "number"
+                  ],
+                  "name": "value"
+                }
+              ]
             },
             {
-              "name": "addOption"
+              "name": "addOption",
+              "description": "Triggers when dropdown options list is updated."
             },
             {
-              "name": "change"
+              "name": "change",
+              "description": "Triggers when label position is changed."
             }
           ],
           "slots": [
@@ -6419,6 +6479,7 @@
               "description": "Use it to add something after caret.",
               "bindings": [
                 {
+                  "type": "object",
                   "name": "scope-props"
                 }
               ]
@@ -6426,22 +6487,44 @@
             {
               "name": "before-caret",
               "scoped": true,
-              "description": "Use it to add something after caret.",
+              "description": "Use it to add something before caret.",
               "bindings": [
                 {
+                  "type": "object",
                   "name": "scope-props"
                 }
               ]
             },
+            {
+              "name": "icon-left",
+              "scoped": true,
+              "description": "Use it to add icon before option.",
+              "bindings": [
+                {
+                  "type": "string",
+                  "name": "icon-name"
+                },
+                {
+                  "type": "string",
+                  "name": "icon-size"
+                }
+              ]
+            },
+            {
+              "name": "left",
+              "description": "Use it to add something before input."
+            },
             {
               "name": "selected-label",
               "scoped": true,
               "description": "Use it to add selected value label.",
               "bindings": [
                 {
+                  "type": "string",
                   "name": "selected-label"
                 },
                 {
+                  "type": "string",
                   "name": "value"
                 }
               ]
@@ -6449,16 +6532,32 @@
             {
               "name": "selected-label-after",
               "scoped": true,
-              "description": "Use it to add selected value label.",
+              "description": "Use it to add something after selected value label.",
               "bindings": [
                 {
+                  "type": "object",
                   "name": "scope-props"
                 }
               ]
             },
             {
-              "name": "left",
-              "description": "Use it to add some component before text."
+              "name": "right",
+              "description": "Use it to add something after input."
+            },
+            {
+              "name": "icon-right",
+              "scoped": true,
+              "description": "Use it to add icon after option.",
+              "bindings": [
+                {
+                  "type": "string",
+                  "name": "icon-name"
+                },
+                {
+                  "type": "string",
+                  "name": "icon-size"
+                }
+              ]
             },
             {
               "name": "before-option",
@@ -6466,6 +6565,7 @@
               "description": "Use it to add something before option.",
               "bindings": [
                 {
+                  "type": "other",
                   "name": "option"
                 }
               ]
@@ -6473,11 +6573,14 @@
             {
               "name": "option",
               "scoped": true,
+              "description": "Use it to add something instead of option.",
               "bindings": [
                 {
+                  "type": "other",
                   "name": "option"
                 },
                 {
+                  "type": "number",
                   "name": "index"
                 }
               ]
@@ -6488,6 +6591,7 @@
               "description": "Use it to add something after option.",
               "bindings": [
                 {
+                  "type": "other",
                   "name": "option"
                 }
               ]