vueless 0.0.413 → 0.0.414

package/ui.form-select/USelect.vue

@@ -26,12 +26,12 @@
       @keydown.enter.tab.stop.self="dropdownListRef.addPointerElement"
       @keyup.esc="deactivate"
     >
-      <!-- @slot Use it to add something after input. -->
+      <!-- @slot Use it to add something right. -->
       <slot name="right" />
 
       <div v-if="hasSlotContent($slots['right-icon']) || rightIcon" v-bind="rightIconWrapperAttrs">
         <!--
-            @slot Use it to add icon after option.
+            @slot Use it to add icon right.
             @binding {string} icon-name
             @binding {string} icon-size
           -->
@@ -68,6 +68,7 @@
           @slot Use it to add something instead of the toggle icon.
           @binding {string} icon-name
           @binding {string} icon-size
+          @binding {boolean} opened
         -->
         <slot
           name="toggle"
@@ -88,7 +89,7 @@
       </div>
 
       <div
-        v-if="isLocalValue && !noClear && !disabled && !multiple"
+        v-if="isLocalValue && !clearable && !disabled && !multiple"
         v-bind="clearAttrs"
         @mousedown="removeElement"
       >
@@ -127,7 +128,7 @@
           v-bind="leftIconWrapperAttrs"
         >
           <!--
-            @slot Use it to add icon before option.
+            @slot Use it to add icon left.
             @binding {string} icon-name
             @binding {string} icon-size
           -->
@@ -143,14 +144,14 @@
         </span>
 
         <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapperRef">
-          <!-- @slot Use it to add something before input. -->
+          <!-- @slot Use it to add something left. -->
           <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 customise selected value label.
               @binding {string} selected-label
             -->
             <slot
@@ -243,8 +244,8 @@
         </span>
 
         <div
-          v-if="isLocalValue && !noClear && !disabled && multiple"
-          v-bind="clearMultipleTextAllAttrs"
+          v-if="isLocalValue && !clearable && !disabled && multiple"
+          v-bind="clearMultipleTextAttrs"
           @mousedown.prevent.capture="removeElement(localValue)"
           @click.prevent.capture
           v-text="currentLocale.clear"
@@ -264,23 +265,24 @@
         :add-option="addOption"
         tabindex="-1"
         v-bind="dropdownListAttrs"
+        @add="onAddOption"
         @focus="activate"
-        @add-option="onAddOption"
         @mousedown.prevent.capture
         @click.prevent.capture
       >
         <template #before-option="{ option, index }">
           <!--
             @slot Use it to add something before option.
-            @binding {other} option
+            @binding {object} option
+            @binding {number} index
           -->
           <slot name="before-option" :option="option" :index="index" />
         </template>
 
         <template #option="{ option, index }">
           <!--
-            @slot Use it to add something instead of option.
-            @binding {other} option
+            @slot Use it to customise the option.
+            @binding {object} option
             @binding {number} index
           -->
           <slot name="option" :option="option" :index="index" />
@@ -289,7 +291,8 @@
         <template #after-option="{ option, index }">
           <!--
             @slot Use it to add something after option.
-            @binding {other} option
+            @binding {object} option
+            @binding {number} index
           -->
           <slot name="after-option" :option="option" :index="index" />
         </template>
@@ -472,9 +475,9 @@ const props = defineProps({
   /**
    * Allow clearing selected value.
    */
-  noClear: {
+  clearable: {
     type: Boolean,
-    default: getDefault(defaultConfig, USelect).noClear,
+    default: getDefault(defaultConfig, USelect).clearable,
   },
 
   /**
@@ -536,19 +539,19 @@ const props = defineProps({
 
 const emit = defineEmits([
   /**
-   * Triggers when dropdown list is opened.
+   * Triggers when a dropdown list is opened.
    * @property {string} propsId
    */
   "open",
 
   /**
-   * Triggers when dropdown list is closed.
+   * Triggers when a dropdown list is closed.
    * @property {string} propsId
    */
   "close",
 
   /**
-   * Triggers when the input value is changed.
+   * Triggers when the search value is changed.
    */
   "searchChange",
 
@@ -566,9 +569,9 @@ const emit = defineEmits([
   "update:modelValue",
 
   /**
-   * Triggers when dropdown options list is updated.
+   * Triggers on click on add new option button in the dropdown.
    */
-  "addOption",
+  "add",
 
   /**
    * Triggers when the user commits the change to options or selected value explicitly.
@@ -626,7 +629,7 @@ const {
   afterCaretAttrs,
   toggleAttrs,
   clearAttrs,
-  clearMultipleTextAllAttrs,
+  clearMultipleTextAttrs,
   clearMultipleAttrs,
   searchAttrs,
   searchInputAttrs,
@@ -754,18 +757,18 @@ function onKeydownAddOption(event) {
   const isMeta = event.metaKey;
 
   if (isMeta && isEnter && isMac) {
-    emit("addOption");
+    emit("add");
     emit("change", { value: dropdownValue.value, options: props.options });
   }
 
   if (isEnter && isCtrl && !isMac) {
-    emit("addOption");
+    emit("add");
     emit("change", { value: dropdownValue.value, options: props.options });
   }
 }
 
 function onAddOption() {
-  emit("addOption");
+  emit("add");
 }
 
 function filterAndFlat(options, search, label) {
@@ -831,7 +834,7 @@ function adjustPosition() {
 function removeElement(option, shouldClose = true) {
   if (props.disabled) return;
 
-  if (props.noClear && !props.multiple) {
+  if (props.clearable && !props.multiple) {
     deactivate();
 
     return;

package/ui.form-select/config.js

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   selectLabel: "{ULabel}",
-  labelWrapperTop: "group/top", // applies when an open direction is top
-  labelWrapperActive: "group/active",
+  selectLabelActive: "group/active",
+  selectLabelOpenDirectionTop: "group/top",
   wrapper: {
     base: `
       py-2 flex flex-row-reverse justify-between w-full min-h-full box-border relative
@@ -27,7 +27,7 @@ export default /*tw*/ {
       { labelAlign: "topInside", label: true, size: "lg", class: "pt-7" },
     ],
   },
-  wrapperActive: "z-[inherit]", // applies when select active
+  wrapperActive: "z-[inherit]",
   innerWrapper: {
     base: "px-3 flex min-h-full w-full overflow-hidden justify-between",
     variants: {
@@ -81,7 +81,7 @@ export default /*tw*/ {
   clearIcon: "{UIcon}",
   clearMultiple: "flex items-center",
   clearMultipleIcon: "{UIcon}",
-  clearMultipleTextAll: {
+  clearMultipleText: {
     base: "cursor-pointer flex items-center text-sm font-normal text-gray-400 hover:text-gray-500 transition",
     compoundVariants: [
       { size: "sm", class: "text-xs" },
@@ -89,7 +89,8 @@ export default /*tw*/ {
       { size: "lg", class: "text-base" },
     ],
   },
-  search: "flex w-full",
+  search: "flex w-0",
+  searchActive: "w-full",
   searchInput: {
     base: `
         p-0 font-normal leading-none text-gray-900 relative w-full border-none bg-transparent
@@ -122,7 +123,7 @@ export default /*tw*/ {
     multiple: false,
     disabled: false,
     searchable: true,
-    noClear: false,
+    clearable: true,
     addOption: false,
     /* icons */
     dropdownIcon: "expand_more",

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

@@ -15,7 +15,7 @@ export default {
   component: USelect,
   args: {
     label: "Label",
-    modelValue: "",
+    modelValue: null,
     options: [
       { id: 1, label: "value 1", badge: "10%" },
       { id: 2, label: "value 2", badge: "20%" },
@@ -25,7 +25,7 @@ export default {
   },
   argTypes: {
     ...getArgTypes(USelect.__name),
-    modelValue: { control: { type: "text" } },
+    modelValue: { control: { type: "number" } },
   },
   parameters: {
     docs: {

package/ui.form-select/useAttrs.js

@@ -14,19 +14,25 @@ export default function useAttrs(props, { isTop, isOpen, selectedLabel: selected
     label: Boolean(props.label),
   }));
 
-  const extendingKeys = ["caret", "wrapperActive", "labelWrapperActive", "labelWrapperTop"];
+  const extendingKeys = [
+    "caret",
+    "searchActive",
+    "wrapperActive",
+    "selectLabelActive",
+    "selectLabelOpenDirectionTop",
+  ];
   const extendingKeysClasses = getExtendingKeysClasses(extendingKeys, mutatedProps);
 
   const keysAttrs = getKeysAttrs(mutatedProps, extendingKeys, {
-    wrapper: {
-      extend: computed(() => [isOpen.value && extendingKeysClasses.wrapperActive.value]),
-    },
-    label: {
+    selectLabel: {
       extend: computed(() => [
-        isOpen.value && extendingKeysClasses.labelWrapperActive.value,
-        isTop.value && extendingKeysClasses.labelWrapperTop.value,
+        isOpen.value && extendingKeysClasses.selectLabelActive.value,
+        isTop.value && extendingKeysClasses.selectLabelOpenDirectionTop.value,
       ]),
     },
+    wrapper: {
+      extend: computed(() => [isOpen.value && extendingKeysClasses.wrapperActive.value]),
+    },
     toggle: {
       base: computed(() => [extendingKeysClasses.caret.value]),
     },
@@ -43,7 +49,9 @@ export default function useAttrs(props, { isTop, isOpen, selectedLabel: selected
       base: computed(() => [extendingKeysClasses.caret.value]),
     },
     search: {
-      extend: computed(() => [Boolean(selectedLabelValue.value) && !isOpen.value && "w-0"]),
+      extend: computed(() => [
+        (!selectedLabelValue.value || isOpen.value) && extendingKeysClasses.searchActive.value,
+      ]),
     },
   });