vueless 0.0.185 → 0.0.186

package/package.json

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

package/ui.dropdown-list/composables/usePointer.js

@@ -1,17 +1,32 @@
-import { ref, computed } from "vue";
+import { ref, computed, toValue } from "vue";
 
-export default function usePointer(options, optionHeight, listWrapperElement) {
+export default function usePointer(options, optionElements, listWrapperElement) {
   const pointer = ref(null);
   const pointerDirty = ref(false);
 
+  const activeElementHeight = computed(() => {
+    const isGroupLabel = toValue(optionElements).at(pointer.value).dataset.groupLabel;
+    const groupIndex = 2;
+
+    if (isGroupLabel) {
+      return toValue(optionElements)
+        .at(pointer.value - groupIndex)
+        .getBoundingClientRect().height;
+    }
+
+    return toValue(optionElements).at(pointer.value).getBoundingClientRect().height;
+  });
+
   const pointerPosition = computed(() => {
-    return pointer.value * optionHeight || 0;
+    return pointer.value * activeElementHeight.value || 0;
   });
 
   function scrollWrapperToElement() {
-    const visibleElements = listWrapperElement.value.getBoundingClientRect().height / optionHeight;
+    const visibleElements =
+      listWrapperElement.value.getBoundingClientRect().height / activeElementHeight.value;
     const currentElement = visibleElements - 1;
-    const currentPointerPosition = pointerPosition.value - currentElement * optionHeight;
+    const currentPointerPosition =
+      pointerPosition.value - currentElement * activeElementHeight.value;
 
     if (listWrapperElement.value.scrollTop <= currentPointerPosition) {
       listWrapperElement.value.scrollTop = currentPointerPosition;
@@ -22,10 +37,7 @@ export default function usePointer(options, optionHeight, listWrapperElement) {
     if (pointer.value < options.length - 1) {
       pointer.value++;
 
-      const isGroup =
-        options[pointer.value].$isLabel ||
-        options[pointer.value].isSubGroup ||
-        options[pointer.value].$groupLabel;
+      const isGroup = options[pointer.value].isSubGroup || options[pointer.value].groupLabel;
 
       if (listWrapperElement) scrollWrapperToElement();
 
@@ -41,10 +53,7 @@ export default function usePointer(options, optionHeight, listWrapperElement) {
     if (pointer.value > 0) {
       pointer.value--;
 
-      const isGroup =
-        options[pointer.value].$isLabel ||
-        options[pointer.value].isSubGroup ||
-        options[pointer.value].$groupLabel;
+      const isGroup = options[pointer.value].isSubGroup || options[pointer.value].groupLabel;
 
       if (listWrapperElement && listWrapperElement.value.scrollTop >= pointerPosition.value) {
         listWrapperElement.value.scrollTop = pointerPosition.value;
@@ -54,7 +63,7 @@ export default function usePointer(options, optionHeight, listWrapperElement) {
         pointerBackward();
       }
     } else {
-      if (options[pointer.value] && options[0].$isLabel) {
+      if (options[pointer.value] && options[0].groupLabel) {
         pointerForward();
       }
     }

package/ui.dropdown-list/configs/default.config.js

@@ -66,7 +66,7 @@ export default /*tw*/ {
     labelKey: "label",
     valueKey: "id",
     optionHeight: 40,
-    maxHeight: undefined,
+    visibleOptions: undefined,
     disabled: false,
     addOption: false,
   },

package/ui.dropdown-list/index.vue

@@ -13,15 +13,14 @@
         v-for="(option, index) of options"
         :id="`${id}-${index}`"
         :key="index"
-        :role="!(option && (option.$isLabel || option.$isDisabled)) ? 'option' : null"
         v-bind="optionItemAttrs"
+        ref="optionsRef"
+        :role="!(option && option.groupLabel) ? 'option' : null"
+        :data-group-label="Boolean(option.groupLabel)"
       >
         <!-- option title -->
         <span
-          v-if="
-            !(option && (option.$isLabel || option.$isDisabled || option.isSubGroup)) &&
-            !option.isHidden
-          "
+          v-if="!(option && (option.groupLabel || option.isSubGroup)) && !option.isHidden"
           v-bind="optionAttrs(optionHighlight(index, option))"
           @click.stop="select(option)"
           @mouseenter.self="pointerSet(index)"
@@ -42,14 +41,8 @@
         </span>
 
         <!-- group title -->
-        <div
-          v-if="
-            option &&
-            (option.$isLabel || option.$isDisabled || option.isSubGroup) &&
-            !option.isHidden
-          "
-        >
-          <div v-if="option.$groupLabel" v-bind="groupLabelAttrs" v-text="option.$groupLabel" />
+        <div v-if="option && (option.groupLabel || option.isSubGroup) && !option.isHidden">
+          <div v-if="option.groupLabel" v-bind="groupLabelAttrs" v-text="option.groupLabel" />
 
           <div
             v-else-if="option.isSubGroup"
@@ -180,19 +173,11 @@ const props = defineProps({
   },
 
   /**
-   * List max height in pixels.
+   * Amount of options you can see without scroll.
    */
-  maxHeight: {
+  visibleOptions: {
     type: Number,
-    default: UIService.get(defaultConfig, UDropdownList).default.maxHeight,
-  },
-
-  /**
-   * List option height in pixels.
-   */
-  optionHeight: {
-    type: Number,
-    default: UIService.get(defaultConfig, UDropdownList).default.optionHeight,
+    default: UIService.get(defaultConfig, UDropdownList).default.visibleOptions,
   },
 
   /**
@@ -216,9 +201,10 @@ const props = defineProps({
 const emit = defineEmits(["update:modelValue", "addOption"]);
 
 const wrapperRef = ref(null);
+const optionsRef = ref([]);
 
 const { pointer, pointerDirty, pointerSet, pointerBackward, pointerForward, pointerReset } =
-  usePointer(props.options, props.optionHeight, wrapperRef);
+  usePointer(props.options, optionsRef, wrapperRef);
 
 const {
   config,
@@ -240,7 +226,15 @@ const {
 
 const { tm } = useLocale();
 
-defineExpose({ pointerSet, pointerBackward, pointerForward, pointerReset, addPointerElement });
+defineExpose({
+  pointerSet,
+  pointerBackward,
+  pointerForward,
+  pointerReset,
+  addPointerElement,
+  optionsRef,
+  wrapperRef,
+});
 
 const i18nGlobal = tm(UDropdownList);
 const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
@@ -249,16 +243,21 @@ const addOptionKeyCombination = computed(() => {
   return isMac ? "(⌘ + Enter)" : "(Ctrl + Enter)";
 });
 
-const wrapperHeight = computed(() =>
-  props.maxHeight === undefined ? "auto" : `${props.maxHeight}px`,
-);
+const wrapperHeight = computed(() => {
+  const maxHeight = optionsRef.value
+    .slice(0, props.visibleOptions)
+    .map((el) => el.getBoundingClientRect().height)
+    .reduce((acc, cur) => acc + cur, 0);
+
+  return props.visibleOptions === undefined ? "auto" : `${maxHeight}px`;
+});
 
 function onClickAddOption() {
   emit("addOption");
 }
 
 function select(option, key) {
-  if (props.disabled || option.$isDisabled || option.$isLabel) {
+  if (props.disabled || option.groupLabel) {
     return;
   }
 

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

@@ -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/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.185",
+  "version": "0.0.186",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2848,22 +2848,13 @@
               "default": "md"
             },
             {
-              "name": "maxHeight",
-              "description": "List max height in pixels.",
+              "name": "visibleOptions",
+              "description": "Amount of options you can see without scroll.",
               "value": {
                 "kind": "expression",
                 "type": "number"
               }
             },
-            {
-              "name": "optionHeight",
-              "description": "List option height in pixels.",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "40"
-            },
             {
               "name": "id",
               "description": "@ignore: Generates unique element id.",
@@ -6211,7 +6202,7 @@
               "default": "id"
             },
             {
-              "name": "groupLabel",
+              "name": "groupLabelKey",
               "description": "Set a name of the property containing the group label.",
               "value": {
                 "kind": "expression",
@@ -6220,7 +6211,7 @@
               "default": "\"label\""
             },
             {
-              "name": "groupValues",
+              "name": "groupValueKey",
               "description": "Set a name of the property containing the group values.",
               "value": {
                 "kind": "expression",
@@ -6228,15 +6219,6 @@
               },
               "default": "\"\""
             },
-            {
-              "name": "name",
-              "description": "name attribute to match optional label element.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            },
             {
               "name": "optionsLimit",
               "description": "Number of options displayed in the dropdown.",
@@ -6244,24 +6226,16 @@
                 "kind": "expression",
                 "type": "number"
               },
-              "default": "100"
-            },
-            {
-              "name": "maxHeight",
-              "description": "Sets maxHeight style value of the dropdown",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "300"
+              "default": "0"
             },
             {
-              "name": "optionHeight",
+              "name": "visibleOptions",
+              "description": "Amount of options you can see without scroll.",
               "value": {
                 "kind": "expression",
                 "type": "number"
               },
-              "default": "40"
+              "default": "8"
             },
             {
               "name": "noClear",