vueless 0.0.185 → 0.0.187

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

@@ -5,14 +5,13 @@
     v-model="search"
     :size="size"
     :disabled="disabled"
-    :description="description"
+    :label-align="labelAlign"
     :label="label"
     :error="error"
+    :description="description"
     :placeholder="placeholder"
-    :type="search"
-    :input-mode="search"
+    inputmode="search"
     :data-cy="dataCy"
-    :label-align="labelAlign"
     v-bind="inputAttrs"
     @keyup.enter="onClickSearch"
   >
@@ -25,44 +24,44 @@
       <!-- @slot Use it to add something before text. -->
       <slot name="right" />
 
-      <UButton
-        v-if="searchButton && !hasSlotContent($slots['right'])"
-        :label="text"
-        v-bind="buttonAttrs"
-        :data-cy="`${dataCy}-right`"
-        @click="onClickSearch"
-      />
-    </template>
-
-    <template #right-icon>
-      <UIcon
-        internal
-        interactive
-        color="gray"
-        :name="config.closeIconName"
-        :data-cy="`${dataCy}-close`"
-        :size="iconSize"
-        v-bind="closeIconAttrs"
-        @click="onClickClear"
-      />
-
-      <UIcon
-        v-if="!searchButton"
-        internal
-        interactive
-        :size="iconSize"
-        color="grayscale"
-        :name="config.searchIconName"
-        :data-cy="`${dataCy}-search`"
-        v-bind="searchIconAttrs"
-        @click="onClickSearch"
-      />
+      <template v-if="!hasSlotContent($slots['right'])">
+        <UIcon
+          internal
+          interactive
+          color="gray"
+          :name="config.closeIconName"
+          :data-cy="`${dataCy}-close`"
+          :size="iconSize"
+          v-bind="closeIconAttrs"
+          @click="onClickClear"
+        />
+
+        <UButton
+          v-if="searchButtonLabel"
+          :label="searchButtonLabel"
+          v-bind="buttonAttrs"
+          :data-cy="`${dataCy}-right`"
+          @click="onClickSearch"
+        />
+
+        <UIcon
+          v-else
+          internal
+          interactive
+          :size="iconSize"
+          color="grayscale"
+          :name="config.searchIconName"
+          :data-cy="`${dataCy}-search`"
+          v-bind="searchIconAttrs"
+          @click="onClickSearch"
+        />
+      </template>
     </template>
   </UInput>
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 
 import UIcon from "../ui.image-icon";
 import UInput from "../ui.form-input";
@@ -78,7 +77,7 @@ defineOptions({ name: "UInputSearch" });
 
 const props = defineProps({
   /**
-   * Set component value.
+   * Search input value.
    */
   modelValue: {
     type: String,
@@ -86,7 +85,7 @@ const props = defineProps({
   },
 
   /**
-   * Set input size.
+   * Input size.
    * @values sm, md, lg
    */
   size: {
@@ -95,38 +94,30 @@ const props = defineProps({
   },
 
   /**
-   * Generates unique element id.
-   * @ignore
+   * Input placeholder.
    */
-  id: {
+  placeholder: {
     type: String,
-    default: () => getRandomId(),
+    default: "",
   },
 
   /**
-   * Set input disabled.
+   * Label placement.
+   * @values top, topInside, topWithDesc, bottom, left, right
    */
-  disabled: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UInputSearch).default.disabled,
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputSearch).default.labelAlign,
   },
 
   /**
-   * Search button text..
+   * Input label.
    */
-  text: {
+  label: {
     type: String,
     default: "",
   },
 
-  /**
-   * Show / hide search button.
-   */
-  searchButton: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UInputSearch).default.searchButton,
-  },
-
   /**
    * Input description.
    */
@@ -136,40 +127,40 @@ const props = defineProps({
   },
 
   /**
-   * Set label placement related from the default slot.
-   * @values top, topInside, topWithDesc, bottom, left, right
+   * Error message.
    */
-  labelAlign: {
+  error: {
     type: String,
-    default: UIService.get(defaultConfig, UInputSearch).default.labelAlign,
+    default: "",
   },
 
   /**
-   * Input placeholder.
+   * Search button label.
    */
-  placeholder: {
+  searchButtonLabel: {
     type: String,
     default: "",
   },
 
   /**
-   * Input label.
+   * Set input disabled.
    */
-  label: {
-    type: String,
-    default: "",
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputSearch).default.disabled,
   },
 
   /**
-   * Error message.
+   * Unique element id.
+   * @ignore
    */
-  error: {
+  id: {
     type: String,
-    default: "",
+    default: () => getRandomId(),
   },
 
   /**
-   * Sets component ui config object.
+   * Component ui config object.
    */
   config: {
     type: Object,
@@ -177,7 +168,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Data-cy attribute for automated testing.
    */
   dataCy: {
     type: String,
@@ -187,12 +178,17 @@ const props = defineProps({
 
 const emit = defineEmits(["update:modelValue", "clear", "search"]);
 
+const localValue = ref("");
+
 const { config, inputAttrs, searchIconAttrs, closeIconAttrs, buttonAttrs, hasSlotContent } =
   useAttrs(props);
 
 const search = computed({
   get: () => props.modelValue,
-  set: (value) => emit("update:modelValue", value),
+  set: (value) => {
+    localValue.value = value;
+    emit("update:modelValue", value);
+  },
 });
 
 const iconSize = computed(() => {
@@ -211,7 +207,7 @@ function onClickClear() {
 }
 
 function onClickSearch() {
-  if (!search.value) return;
-  emit("search", search.value);
+  if (!localValue.value) return;
+  emit("search", localValue.value);
 }
 </script>

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

@@ -4,7 +4,7 @@ export default /*tw*/ {
     base: `
       pb-2 pt-2 flex flex-row-reverse justify-between w-full min-h-full box-border relative
       rounded-lg border border-gray-300 bg-white
-      hover:border-gray-400 hover:transition-all hover:focus-within:border-brand-500
+      hover:border-gray-400 hover:transition hover:focus-within:border-brand-500
       focus-within:border-brand-500 focus-within:ring-4 focus-within:ring-brand-600/[.15] focus-within:outline-none
     `,
     variants: {
@@ -55,7 +55,7 @@ export default /*tw*/ {
   beforeCaretSlot: "",
   afterCaretSlot: "mr-3",
   caretToggle: "mr-3",
-  toggleIcon: "transform transition-all duration-300 group-[]/active:rotate-180",
+  toggleIcon: "transform transition duration-300 group-[]/active:rotate-180",
   toggleIconName: "expand_more",
   clearIcon: "",
   clearIconName: "close_small",
@@ -63,7 +63,7 @@ export default /*tw*/ {
   removeItemIconName: "close_small",
   caretRemoveItem: "flex items-center",
   caretClearText: {
-    base: "cursor-pointer flex items-center text-sm font-normal text-gray-400 hover:text-gray-500 transition-all",
+    base: "cursor-pointer flex items-center text-sm font-normal text-gray-400 hover:text-gray-500 transition",
     compoundVariants: [
       { size: "sm", class: "text-sm" },
       { size: "md", class: "text-base" },
@@ -123,9 +123,8 @@ export default /*tw*/ {
     openDirection: "auto",
     labelKey: "label",
     valueKey: "id",
-    optionsLimit: 100,
-    maxHeight: 300,
-    optionHeight: 40,
+    optionsLimit: 0,
+    visibleOptions: 8,
     multiple: false,
     disabled: false,
     searchable: true,

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

@@ -222,12 +222,12 @@ Multiple.args = { modelValue: [] };
 export const openDirection = OpenDirectionsTemplate.bind({});
 openDirection.args = {};
 
-export const groupValues = GroupValuesTemplate.bind({});
-groupValues.args = {
+export const groupValue = GroupValuesTemplate.bind({});
+groupValue.args = {
   modelValue: "",
   modelValueMultiple: [],
-  groupValues: "libs",
-  groupLabel: "language",
+  groupValueKey: "libs",
+  groupLabelKey: "language",
   labelKey: "name",
   valueKey: "name",
   options: [

package/ui.form-select/index.vue

@@ -117,7 +117,6 @@
             :id="id"
             ref="searchInputRef"
             v-model="search"
-            :name="name"
             type="text"
             autocomplete="off"
             :spellcheck="false"
@@ -159,14 +158,13 @@
       </div>
 
       <UDropdownList
-        v-show="isOpen"
+        v-if="isOpen"
         ref="dropdownListRef"
         v-model="dropdownValue"
         :options="filteredOptions"
         :disabled="disabled"
         :size="size"
-        :max-height="optimizedHeight"
-        :option-height="optionHeight"
+        :visible-options="visibleOptions"
         :value-key="valueKey"
         :label-key="labelKey"
         :add-option="addOption"
@@ -318,8 +316,7 @@ const props = defineProps({
   /**
    * Set a name of the property containing the group label.
    */
-  // TODO: groupLabelKey ???
-  groupLabel: {
+  groupLabelKey: {
     type: String,
     default: "label",
   },
@@ -327,17 +324,7 @@ const props = defineProps({
   /**
    * Set a name of the property containing the group values.
    */
-  // TODO: groupValueKey ???
-  groupValues: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * name attribute to match optional label element.
-   */
-  // TODO: what is it?
-  name: {
+  groupValueKey: {
     type: String,
     default: "",
   },
@@ -351,18 +338,11 @@ const props = defineProps({
   },
 
   /**
-   * Sets maxHeight style value of the dropdown
+   * Amount of options you can see without scroll.
    */
-  // TODO: Should be in option amount not in pixels (option may have be different height)
-  maxHeight: {
-    type: Number,
-    default: UIService.get(defaultConfig, USelect).default.maxHeight,
-  },
-
-  // TODO: there is no desc
-  optionHeight: {
+  visibleOptions: {
     type: Number,
-    default: UIService.get(defaultConfig, USelect).default.optionHeight,
+    default: UIService.get(defaultConfig, USelect).default.visibleOptions,
   },
 
   /**
@@ -448,7 +428,6 @@ const { tm } = useLocale();
 const isOpen = ref(false);
 const preferredOpenDirection = ref(DIRECTION.bottom);
 const search = ref("");
-const optimizedHeight = ref(props.maxHeight);
 
 const dropdownListRef = ref(null);
 const wrapperRef = ref(null);
@@ -543,17 +522,17 @@ const filteredOptions = computed(() => {
   let options = props.multiple
     ? SelectService.removeSelectedValues(
         props.options,
-        props.groupValues,
+        props.groupValueKey,
         props.valueKey,
         props.modelValue,
       )
     : [...props.options];
 
-  options = props.groupValues
+  options = props.groupValueKey
     ? filterAndFlat(options, normalizedSearch, props.labelKey)
     : SelectService.filterOptions(options, normalizedSearch, props.labelKey);
 
-  return options.slice(0, props.optionsLimit);
+  return options.slice(0, props.optionsLimit || options.length);
 });
 
 const localValue = computed(() => {
@@ -561,14 +540,14 @@ const localValue = computed(() => {
     return SelectService.getCurrentOption(
       props.modelValue,
       props.options,
-      props.groupValues,
+      props.groupValueKey,
       props.valueKey,
     );
   }
 
   return props.modelValue
     ? props.modelValue.map((item) =>
-        SelectService.getCurrentOption(item, props.options, props.groupValues, props.valueKey),
+        SelectService.getCurrentOption(item, props.options, props.groupValueKey, props.valueKey),
       )
     : [];
 });
@@ -610,7 +589,6 @@ const onSearchChange = debounce(async function (query) {
 
 function getOptionLabel(option) {
   if (!option) return "";
-  if (option.$isLabel) return option.$groupLabel;
 
   return option[props.labelKey] || "";
 }
@@ -640,11 +618,11 @@ function filterAndFlat(options, search, label) {
     options,
     search,
     label,
-    props.groupValues,
-    props.groupLabel,
+    props.groupValueKey,
+    props.groupLabelKey,
   );
 
-  return SelectService.flattenOptions(filteredGroups, props.groupValues, props.groupLabel);
+  return SelectService.flattenOptions(filteredGroups, props.groupValueKey, props.groupLabelKey);
 }
 
 function toggle() {
@@ -681,25 +659,22 @@ function activate() {
 }
 
 function adjustPosition() {
-  if (typeof window === "undefined") return;
+  if (typeof window === "undefined" || !dropdownListRef.value) return;
 
+  const dropdownHeight = dropdownListRef.value.wrapperRef.getBoundingClientRect().height;
   const spaceAbove = wrapperRef.value.getBoundingClientRect().top;
   const spaceBelow = window.innerHeight - wrapperRef.value.getBoundingClientRect().bottom;
-  const hasEnoughSpaceBelow = spaceBelow > props.maxHeight;
+  const hasEnoughSpaceBelow = spaceBelow > dropdownHeight;
 
   if (hasEnoughSpaceBelow || spaceBelow > spaceAbove || props.openDirection === DIRECTION.bottom) {
     preferredOpenDirection.value = DIRECTION.bottom;
-    // TODO: magic numbers
-    optimizedHeight.value = Math.min(spaceBelow - 40, props.maxHeight);
   } else {
     preferredOpenDirection.value = DIRECTION.top;
-    optimizedHeight.value = Math.min(spaceAbove - 40, props.maxHeight);
   }
 }
 
 function removeElement(option, shouldClose = true) {
   if (props.disabled) return;
-  if (option.$isDisabled) return;
 
   if (props.noClear && !props.multiple) {
     deactivate();

package/ui.form-select/services/select.service.js

@@ -4,12 +4,15 @@ export default class SelectService {
       ? options
           .filter((option) => this.interpolateLabel(option, label).includes(search))
           .sort((a, b) => {
-            return this.interpolateLabel(a, label).length - this.interpolateLabel(b, label).length;
+            return (
+              this.interpolateLabel(a, label).indexOf(search) -
+              this.interpolateLabel(b, label).indexOf(search)
+            );
           })
       : options;
   }
 
-  static filterGroups(options, search, label, values, groupLabel) {
+  static filterGroups(options, search, label, values, groupLabelKey) {
     return options.map((group) => {
       if (!group[values]) {
         // eslint-disable-next-line no-console
@@ -22,20 +25,17 @@ export default class SelectService {
 
       return groupOptions.length
         ? {
-            [groupLabel]: group[groupLabel],
+            [groupLabelKey]: group[groupLabelKey],
             [values]: groupOptions,
           }
         : [];
     });
   }
 
-  static flattenOptions(options, values, label) {
+  static flattenOptions(options, values, groupLabelKey) {
     return options.reduce((prev, curr) => {
       if (curr[values] && curr[values].length) {
-        prev.push({
-          $groupLabel: curr[label],
-          $isLabel: true,
-        });
+        prev.push({ groupLabel: curr[groupLabelKey] });
 
         return prev.concat(curr[values]);
       }
@@ -51,25 +51,27 @@ export default class SelectService {
     return !opt;
   }
 
-  static removeEmptyGroups(options, groupValues) {
+  static removeEmptyGroups(options, groupValueKey) {
     return options.filter((group) => {
-      return Boolean(group[groupValues].filter((item) => !item.isSubGroup).length);
+      return Boolean(group[groupValueKey].filter((item) => !item.isSubGroup).length);
     });
   }
 
-  static removeSelectedValues(options, groupValues, valueKey, modelValue) {
-    if (!groupValues) {
+  static removeSelectedValues(options, groupValueKey, valueKey, modelValue) {
+    if (!groupValueKey) {
       return options.filter((option) => !modelValue.includes(option[valueKey]));
     }
 
     const availableValues = options.map((group) => {
       return {
         ...group,
-        [groupValues]: group[groupValues].filter((item) => !modelValue.includes(item[valueKey])),
+        [groupValueKey]: group[groupValueKey].filter(
+          (item) => !modelValue.includes(item[valueKey]),
+        ),
       };
     });
 
-    return this.removeEmptyGroups(availableValues, groupValues);
+    return this.removeEmptyGroups(availableValues, groupValueKey);
   }
 
   static interpolateLabel(option, label) {
@@ -78,17 +80,17 @@ export default class SelectService {
     return label ? option[label] : option;
   }
 
-  static getGroupOption(item, options, groupValues, valueKey) {
+  static getGroupOption(item, options, groupValueKey, valueKey) {
     const groupOptions = options.find((option) =>
-      option[groupValues]?.find((value) => value[valueKey] === item),
+      option[groupValueKey]?.find((value) => value[valueKey] === item),
     );
 
-    return groupOptions?.[groupValues].find((value) => value[valueKey] === item);
+    return groupOptions?.[groupValueKey].find((value) => value[valueKey] === item);
   }
 
-  static getCurrentOption(item, options, groupValues, valueKey) {
-    if (groupValues) {
-      return this.getGroupOption(item, options, groupValues, valueKey);
+  static getCurrentOption(item, options, groupValueKey, valueKey) {
+    if (groupValueKey) {
+      return this.getGroupOption(item, options, groupValueKey, valueKey);
     }
 
     const value = item[valueKey] || item;

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

@@ -2,7 +2,7 @@ export default /*tw*/ {
   label: "flex items-start",
   wrapper: {
     base: `
-      transition-all duration-300
+      transition duration-300
       flex items-center p-0.5 relative rounded-3xl cursor-pointer
       ring-opacity-10 focus-within:ring-4
     `,
@@ -28,7 +28,7 @@ export default /*tw*/ {
   },
   input: "absolute size-0 opacity-0",
   circle: {
-    base: "transition-all duration-300 rounded-full bg-white flex items-center justify-center",
+    base: "transition duration-300 rounded-full bg-white flex items-center justify-center",
     variants: {
       size: {
         sm: "size-4",
@@ -46,7 +46,7 @@ export default /*tw*/ {
   selectedIconName: "check",
   unselectedIconName: "close",
   toggleLabel: {
-    base: "absolute text-center text-2xs font-medium uppercase text-white transition-all duration-300",
+    base: "absolute text-center text-2xs font-medium uppercase text-white transition duration-300",
     compoundVariants: [
       { toggleLabel: true, checked: true, class: "w-1/2 left-1" },
       { toggleLabel: true, checked: false, class: "w-1/2 right-1" },

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

@@ -4,7 +4,7 @@ export default /*tw*/ {
   rightSlot: "flex items-center justify-center h-full w-11 absolute right-0",
   textareaWrapper: {
     base: `
-      transition-all focus-within:outline-none
+      transition focus-within:outline-none
       rounded-lg border border-solid border-gray-300 ring-0 cursor-text bg-white pr-4
       hover:border-gray-400 pl-4 hover:focus-within:border-gray-500
       focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15]
@@ -53,7 +53,7 @@ export default /*tw*/ {
   defaultVariants: {
     size: "md",
     type: "text",
-    inputMode: "text",
+    inputmode: "text",
     rows: "2",
     labelAlign: "topInside",
     error: false,

package/ui.form-textarea/index.vue

@@ -27,11 +27,10 @@
         v-model="localValue"
         :value="modelValue"
         :placeholder="placeholder"
-        :type="type"
         :readonly="readonly"
         :disabled="disabled"
         :rows="rows"
-        :inputmode="inputMode"
+        :inputmode="inputmode"
         :data-cy="dataCy"
         v-bind="textareaAttrs"
         @focus="onFocus"
@@ -129,22 +128,13 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UTextarea).default.disabled,
   },
 
-  /**
-   * Set input type.
-   * @values text, number, email, tel, password, url
-   */
-  type: {
-    type: String,
-    default: UIService.get(defaultConfig, UTextarea).default.type,
-  },
-
   /**
    * Set proper keyboard on mobile devices.
-   * @values text, none, decimal, tel, numeric, search, email, url,
+   * @values text, decimal, numeric, tel, email, url, search, none
    */
-  inputMode: {
+  inputmode: {
     type: String,
-    default: UIService.get(defaultConfig, UTextarea).default.inputMode,
+    default: UIService.get(defaultConfig, UTextarea).default.inputmode,
   },
 
   /**
@@ -273,7 +263,10 @@ function setLabelPosition() {
 
   const leftSlotWidth = leftSlotWrapper.value.getBoundingClientRect().width;
 
-  labelComponent.value.labelElement.style.left = `${leftSlotWidth}px`;
+  if (labelComponent.value.labelElement) {
+    labelComponent.value.labelElement.style.left = `${leftSlotWidth}px`;
+  }
+
   textareaWrapper.value.style.paddingLeft = `${leftSlotWidth}px`;
 }
 

package/ui.loader-rendering/configs/default.config.js

@@ -5,7 +5,7 @@ export default /*tw*/ {
       h-screen w-screen
       flex justify-center items-center
       fixed left-0 top-0 z-[9999]
-      transition-all duration-300
+      transition duration-300
     `,
     variants: {
       color: {