vueless 0.0.185 → 0.0.187

package/package.json

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

package/ui.button/configs/default.config.js

@@ -3,7 +3,7 @@ export default /*tw*/ {
     base: `
       flex items-center justify-center
       text-base font-medium outline-none
-      border border-solid transition-all
+      border border-solid transition
       focus:ring-opacity-20 focus:ring-4 focus:ring-{color}-700
       focus-within:ring-opacity-20 focus-within:ring-4 focus-within:ring-{color}-700
       disabled:ring-0 disabled:cursor-no-drop

package/ui.button-link/configs/default.config.js

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: {
     base: `
-      w-fit inline-flex rounded transition-all
+      w-fit inline-flex rounded transition
       focus-within:ring-4 focus-within:ring-{color}-500 focus-within:ring-opacity-15 focus-visible:outline-none
     `,
     variants: {
@@ -28,7 +28,7 @@ export default /*tw*/ {
   },
   link: {
     base: `
-      w-full inline-block !leading-none transition-all
+      w-full inline-block !leading-none transition
       text-{color}-500 decoration-{color}-500 underline-offset-4
       hover:text-opacity-80
       active:text-opacity-70

package/ui.container-accordion/configs/default.config.js

@@ -20,7 +20,7 @@ export default /*tw*/ {
         lg: "text-base",
       },
       isOpened: {
-        true: "h-full pt-3 opacity-100 transition-all",
+        true: "h-full pt-3 opacity-100 transition",
       },
     },
   },

package/ui.data-table/configs/default.config.js

@@ -43,7 +43,7 @@ export default /*tw*/ {
   headerLoader: "absolute !top-auto",
   body: "group/body divide-none",
   bodyRow: "hover:bg-gray-50",
-  bodyRowChecked: "bg-gray-100 transition-all",
+  bodyRowChecked: "bg-gray-100 transition",
   bodyRowBefore: "!p-0",
   bodyRowBeforeCell: "py-1",
   bodyRowAfter: "!p-0",

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

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
   badge: "cursor-pointer",
-  icon: "transition-all duration-300",
+  icon: "transition duration-300",
   iconName: "keyboard_arrow_down",
   iconRotate: "rotate-180",
   listWrapper: {

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

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
   button: "",
-  icon: "transition-all duration-300",
+  icon: "transition duration-300",
   iconName: "keyboard_arrow_down",
   iconRotate: "rotate-180",
   listWrapper: {

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

@@ -2,7 +2,7 @@ export default /*tw*/ {
   wrapper: "relative inline-block",
   trigger: "flex items-center relative space-x-0.5",
   link: "",
-  icon: "block transition-all duration-300",
+  icon: "block transition duration-300",
   iconName: "keyboard_arrow_down",
   iconRotate: "rotate-180",
   listWrapper: {

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

@@ -5,7 +5,7 @@ export default /*tw*/ {
     overflow-auto [-webkit-overflow-scrolling:touch]
     focus:outline-none
   `,
-  list: "inline-block list-none align-top m-0 min-w-full p-0 bg-white opacity-1 hover:transition-all",
+  list: "inline-block list-none align-top m-0 min-w-full p-0 bg-white opacity-1 hover:transition",
   subGroupLabel: {
     base: "pointer-events-none bg-transparent !font-medium !leading-none !uppercase !text-gray-500/[85] pt-1",
     variants: {
@@ -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-checkbox/configs/default.config.js

@@ -20,7 +20,7 @@ export default /*tw*/ {
   icon: "",
   checkbox: {
     base: `
-      border border-solid rounded border-gray-300 bg-white hover:transition-all
+      border border-solid rounded border-gray-300 bg-white hover:transition
       hover:border-gray-400
       focus:border-{color}-500 focus:ring-4 focus:ring-opacity-20 focus:ring-offset-0 focus:ring-{color}-500
       active:border-{color}-500 active:bg-{color}-500

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

@@ -8,7 +8,7 @@ export default /*tw*/ {
   passwordHiddenIconName: "visibility_off-fill",
   block: {
     base: `
-      rounded-lg border border-solid border-gray-300 bg-white !opacity-100 relative flex transition-all
+      rounded-lg border border-solid border-gray-300 bg-white !opacity-100 relative flex transition
       hover:border-gray-400 hover:focus-within:border-brand-500
       focus-within:border-brand-500 focus-within:ring-4 focus-within:ring-brand-600/[.15]
     `,
@@ -31,7 +31,7 @@ export default /*tw*/ {
   input: {
     base: `
       block w-full pb-2 px-4 font-normal leading-none text-gray-900 placeholder:font-normal placeholder-gray-400
-      transition-all bg-white border-none border-gray-300 rounded-lg shadow-none
+      transition bg-white border-none border-gray-300 rounded-lg shadow-none
       focus:outline-none focus:ring-0 disabled:opacity-50
       disabled:cursor-not-allowed disabled:text-gray-900 disabled:border-gray-100
       read-only:border-gray-300 read-only:ring-0
@@ -56,7 +56,7 @@ export default /*tw*/ {
   defaultVariants: {
     size: "md",
     type: "text",
-    inputMode: "text",
+    inputmode: "text",
     error: false,
     readonly: false,
     disabled: false,

package/ui.form-input/index.vue

@@ -32,7 +32,7 @@
           :readonly="readonly"
           :disabled="disabled"
           :maxlength="maxLength"
-          :inputmode="inputMode"
+          :inputmode="inputmode"
           :data-cy="dataCy"
           v-bind="inputAttrs"
           @focus="onFocus"
@@ -181,8 +181,8 @@ const props = defineProps({
   },
 
   /**
-   * Input type.
-   * @values text, number, email, tel, password, url
+   * Input type
+   * @values text, number, tel, email, url, search, password
    */
   type: {
     type: String,
@@ -191,12 +191,12 @@ const props = defineProps({
   },
 
   /**
-   * Input mode (to show different mobile keyboard).
-   * @values none, text, decimal, numeric, tel, email, url
+   * Set proper keyboard on mobile devices.
+   * @values text, decimal, numeric, tel, email, url, search, none
    */
-  inputMode: {
+  inputmode: {
     type: String,
-    default: UIService.get(defaultConfig, UInput).default.inputMode,
+    default: UIService.get(defaultConfig, UInput).default.inputmode,
   },
 
   /**
@@ -392,7 +392,9 @@ function setLabelPosition() {
     }
   }
 
-  labelComponent.value.labelElement.style.left = `${leftSlotOrIconWidth}px`;
+  if (labelComponent.value.labelElement) {
+    labelComponent.value.labelElement.style.left = `${leftSlotOrIconWidth}px`;
+  }
 }
 </script>
 

package/ui.form-input-file/configs/default.config.js

@@ -12,7 +12,7 @@ export default /*tw*/ {
   dropzoneWrapper: {
     base: `
       size-auto w-full rounded-lg border border-solid border-gray-300 bg-white
-      p-4 px-5 py-6 transition-all hover:border-gray-400
+      p-4 px-5 py-6 transition hover:border-gray-400
     `,
     variants: {
       error: {

package/ui.form-input-search/configs/default.config.js

@@ -8,9 +8,9 @@ export default /*tw*/ {
   },
   closeIcon: "flex h-full items-center mr-2",
   closeIconName: "close",
-  searchIcon: "mr-2",
+  searchIcon: "mr-3",
   searchIconName: "search",
-  button: "",
+  button: "rounded-l-none ml-1 !ring-0 outline outline-1 outline-gray-900",
   defaultVariants: {
     size: "md",
     labelAlign: "topInside",

package/ui.form-input-search/index.stories.js

@@ -44,7 +44,7 @@ const SlotTemplate = (args) => ({
   },
   template: `
     <UInputSearch v-bind="args">
-      ${args.slotTemplate}
+      ${args.slotTemplate || ""}
     </UInputSearch>
   `,
 });
@@ -74,7 +74,7 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const searchButton = DefaultTemplate.bind({});
-searchButton.args = { searchButton: true, text: "Search" };
+searchButton.args = { searchButtonLabel: "Search" };
 
 export const sizes = SizesTemplate.bind({});
 sizes.args = {};
@@ -87,6 +87,7 @@ slotLeft.args = {
         label="filter"
         variant="thirdary"
         filled
+        class="rounded-r-none !ring-0"
       />
     </template>
   `,