vueless 0.0.514 → 0.0.516

package/ui.dropdown-list/UDropdownList.vue

@@ -1,103 +1,4 @@
-<template>
-  <div
-    ref="wrapperRef"
-    tabindex="1"
-    :style="{ maxHeight: wrapperHeight }"
-    v-bind="wrapperAttrs"
-    @keydown.self.down.prevent="pointerForward"
-    @keydown.self.up.prevent="pointerBackward"
-    @keydown.enter.stop.self="addPointerElement"
-  >
-    <ul :id="`listbox-${elementId}`" v-bind="listAttrs" role="listbox">
-      <li
-        v-for="(option, index) of options"
-        :id="`${elementId}-${index}`"
-        :key="index"
-        v-bind="listItemAttrs"
-        ref="optionsRef"
-        :role="!(option && option.groupLabel) ? 'option' : null"
-        :data-group-label="Boolean(option.groupLabel)"
-      >
-        <!-- option title -->
-        <span
-          v-if="!(option && (option.groupLabel || option.isSubGroup)) && !option.isHidden"
-          v-bind="optionAttrs"
-          :class="optionHighlight(index, option)"
-          @click="select(option), onClickOption(option)"
-          @mouseenter.self="pointerSet(index)"
-        >
-          <!--
-            @slot Use it to add something before the option.
-            @binding {object} option
-            @binding {number} index
-          -->
-          <slot name="before-option" :option="option" :index="index" />
-
-          <!--
-            @slot Use it to add something instead of the option.
-            @binding {object} option
-            @binding {number} index
-          -->
-          <slot name="option" :option="option" :index="index">
-            <span
-              :style="getMarginForSubCategory(option.level)"
-              v-bind="optionContentAttrs"
-              v-text="option[labelKey]"
-            />
-          </slot>
-
-          <!--
-            @slot Use it to add something after the option.
-            @binding {object} option
-            @binding {number} index
-          -->
-          <slot name="after-option" :option="option" :index="index" />
-        </span>
-
-        <!-- group title -->
-        <template v-if="option && (option.groupLabel || option.isSubGroup) && !option.isHidden">
-          <div v-if="option.groupLabel" v-bind="groupAttrs" v-text="option.groupLabel" />
-
-          <div
-            v-else-if="option.isSubGroup"
-            :style="getMarginForSubCategory(option.level)"
-            v-bind="subGroupAttrs"
-            v-text="option[labelKey]"
-          />
-        </template>
-      </li>
-
-      <div v-if="!options.length" v-bind="optionAttrs">
-        <!-- @slot Use it to add something instead of empty state. -->
-        <slot name="empty">
-          <span v-bind="optionContentAttrs" v-text="currentLocale.noDataToShow" />
-        </slot>
-      </div>
-
-      <!-- Add button -->
-      <template v-if="addOption">
-        <div v-bind="addOptionLabelWrapperAttrs" @click="onClickAddOption">
-          <div v-bind="addOptionLabelAttrs">
-            {{ currentLocale.add }}
-            <span v-bind="addOptionLabelHotkeyAttrs" v-text="addOptionKeyCombination" />
-          </div>
-        </div>
-
-        <UButton round square v-bind="addOptionButtonAttrs" @click="onClickAddOption">
-          <UIcon
-            internal
-            color="white"
-            size="xs"
-            :name="config.defaults.addOptionIcon"
-            v-bind="addOptionIconAttrs"
-          />
-        </UButton>
-      </template>
-    </ul>
-  </div>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, useId } from "vue";
 import { merge } from "lodash-es";
 
@@ -108,90 +9,25 @@ import { getDefault } from "../utils/ui.ts";
 import { isMac } from "../utils/platform.ts";
 
 import usePointer from "./usePointer.js";
-import useAttrs from "./useAttrs.js";
+import useAttrs from "./useAttrs.ts";
 import { useLocale } from "../composables/useLocale.ts";
 
-import defaultConfig from "./config.js";
-import { UDropdownList } from "./constants.js";
+import defaultConfig from "./config.ts";
+import { UDropdownList } from "./constants.ts";
+
+import type { UDropdownListProps } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
 // TODO: Use props and regular modal value
 const modelValue = defineModel({ type: [String, Number, Object], default: "" });
 
-const props = defineProps({
-  /**
-   * List options.
-   */
-  options: {
-    type: Array,
-    default: () => [],
-  },
-
-  /**
-   * Label key in the item object of options.
-   */
-  labelKey: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownList).valueKey,
-  },
-
-  /**
-   * Value key in the item object of options.
-   */
-  valueKey: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownList).valueKey,
-  },
-
-  /**
-   * Show add option button.
-   */
-  addOption: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Disable the list.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDropdownList).disabled,
-  },
-
-  /**
-   * List size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownList).size,
-  },
-
-  /**
-   * Number of options to show without a scroll.
-   */
-  visibleOptions: {
-    type: Number,
-    default: getDefault(defaultConfig, UDropdownList).visibleOptions,
-  },
-
-  /**
-   * Unique element id.
-   */
-  id: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
+const props = withDefaults(defineProps<UDropdownListProps>(), {
+  labelKey: getDefault<UDropdownListProps>(defaultConfig, UDropdownList).labelKey,
+  valueKey: getDefault<UDropdownListProps>(defaultConfig, UDropdownList).valueKey,
+  disabled: getDefault<UDropdownListProps>(defaultConfig, UDropdownList).disabled,
+  size: getDefault<UDropdownListProps>(defaultConfig, UDropdownList).size,
+  visibleOptions: getDefault<UDropdownListProps>(defaultConfig, UDropdownList).visibleOptions,
 });
 
 const emit = defineEmits([
@@ -232,7 +68,7 @@ const {
 const { tm } = useLocale();
 
 const i18nGlobal = tm(UDropdownList);
-const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
+const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props?.config?.i18n));
 
 const addOptionKeyCombination = computed(() => {
   return isMac ? "(⌘ + Enter)" : "(Ctrl + Enter)";
@@ -349,3 +185,102 @@ defineExpose({
   wrapperRef,
 });
 </script>
+
+<template>
+  <div
+    ref="wrapperRef"
+    tabindex="1"
+    :style="{ maxHeight: wrapperHeight }"
+    v-bind="wrapperAttrs"
+    @keydown.self.down.prevent="pointerForward"
+    @keydown.self.up.prevent="pointerBackward"
+    @keydown.enter.stop.self="addPointerElement"
+  >
+    <ul :id="`listbox-${elementId}`" v-bind="listAttrs" role="listbox">
+      <li
+        v-for="(option, index) of options"
+        :id="`${elementId}-${index}`"
+        :key="index"
+        v-bind="listItemAttrs"
+        ref="optionsRef"
+        :role="!(option && option.groupLabel) ? 'option' : null"
+        :data-group-label="Boolean(option.groupLabel)"
+      >
+        <!-- option title -->
+        <span
+          v-if="!(option && (option.groupLabel || option.isSubGroup)) && !option.isHidden"
+          v-bind="optionAttrs"
+          :class="optionHighlight(index, option)"
+          @click="select(option), onClickOption(option)"
+          @mouseenter.self="pointerSet(index)"
+        >
+          <!--
+            @slot Use it to add something before the option.
+            @binding {object} option
+            @binding {number} index
+          -->
+          <slot name="before-option" :option="option" :index="index" />
+
+          <!--
+            @slot Use it to add something instead of the option.
+            @binding {object} option
+            @binding {number} index
+          -->
+          <slot name="option" :option="option" :index="index">
+            <span
+              :style="getMarginForSubCategory(option.level)"
+              v-bind="optionContentAttrs"
+              v-text="option[labelKey]"
+            />
+          </slot>
+
+          <!--
+            @slot Use it to add something after the option.
+            @binding {object} option
+            @binding {number} index
+          -->
+          <slot name="after-option" :option="option" :index="index" />
+        </span>
+
+        <!-- group title -->
+        <template v-if="option && (option.groupLabel || option.isSubGroup) && !option.isHidden">
+          <div v-if="option.groupLabel" v-bind="groupAttrs" v-text="option.groupLabel" />
+
+          <div
+            v-else-if="option.isSubGroup"
+            :style="getMarginForSubCategory(option.level)"
+            v-bind="subGroupAttrs"
+            v-text="option[labelKey]"
+          />
+        </template>
+      </li>
+
+      <div v-if="!options.length" v-bind="optionAttrs">
+        <!-- @slot Use it to add something instead of empty state. -->
+        <slot name="empty">
+          <span v-bind="optionContentAttrs" v-text="currentLocale.noDataToShow" />
+        </slot>
+      </div>
+
+      <!-- Add button -->
+      <template v-if="addOption">
+        <div v-bind="addOptionLabelWrapperAttrs" @click="onClickAddOption">
+          <div v-bind="addOptionLabelAttrs">
+            {{ currentLocale.add }}
+            <span v-bind="addOptionLabelHotkeyAttrs" v-text="addOptionKeyCombination" />
+          </div>
+        </div>
+
+        <UButton round square v-bind="addOptionButtonAttrs" @click="onClickAddOption">
+          <UIcon
+            internal
+            color="white"
+            size="xs"
+            :name="config.defaults.addOptionIcon"
+            v-bind="addOptionIconAttrs"
+          />
+        </UButton>
+      </template>
+    </ul>
+  </div>
+</template>

package/ui.dropdown-list/storybook/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../../utils/storybook.ts";
 
-import * as stories from "./stories.js";
-import defaultConfig from "../config.js?raw"
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.dropdown-list/storybook/{stories.js → stories.ts}

@@ -3,6 +3,15 @@ import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybo
 import UDropdownList from "../../ui.dropdown-list/UDropdownList.vue";
 import URow from "../../ui.container-row/URow.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UDropdownListProps } from "../types.ts";
+
+interface UDropdownListArgs extends UDropdownListProps {
+  slotTemplate?: string;
+  enum: "size";
+  maxHeight: number;
+}
+
 /**
  * The `UDropdownList` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.dropdown-list)
  */
@@ -27,9 +36,9 @@ export default {
       },
     },
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UDropdownListArgs> = (args: UDropdownListArgs) => ({
   components: { UDropdownList },
   setup() {
     const slots = getSlotNames(UDropdownList.__name);
@@ -38,17 +47,20 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UDropdownList v-bind="args" class="mx-4 w-[24rem]">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UDropdownList>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UDropdownListArgs> = (
+  args: UDropdownListArgs,
+  { argTypes },
+) => ({
   components: { UDropdownList, URow },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `
@@ -82,7 +94,11 @@ OptionSettings.args = {
   options: [
     { label: "option 1", id: "1" },
     { label: "option 2", id: "2", isHidden: true },
-    // eslint-disable-next-line no-console
-    { label: "option 3", id: "3", onClick: (option) => console.log("onClick option 3 ", option) },
+
+    {
+      label: "option 3",
+      id: "3",
+      onClick: (option: object) => alert("onClick option 3 " + JSON.stringify(option)),
+    },
   ],
 };

package/ui.dropdown-list/types.ts

@@ -0,0 +1,52 @@
+import defaultConfig from "./config.ts";
+
+import type { UnknownObject } from "../types.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UDropdownListProps {
+  /**
+   * List of options.
+   */
+  options?: UnknownObject[];
+
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey?: string;
+
+  /**
+   * Value key in the item object of options.
+   */
+  valueKey?: string;
+
+  /**
+   * Show add option button.
+   */
+  addOption?: boolean;
+
+  /**
+   * Disable the list.
+   */
+  disabled?: boolean;
+
+  /**
+   * List size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Number of options to show without a scroll.
+   */
+  visibleOptions?: number;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+}

package/ui.dropdown-list/{useAttrs.js → useAttrs.ts}

@@ -1,10 +1,13 @@
 import { computed } from "vue";
 import useUI from "../composables/useUI.ts";
 
-import defaultConfig from "./config.js";
+import defaultConfig from "./config.ts";
 
-export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
+import type { UseAttrs } from "../types.ts";
+import type { UDropdownListProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UDropdownListProps): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI<Config>(
     defaultConfig,
     () => props.config,
   );

package/ui.dropdown-list/usePointer.ts

@@ -0,0 +1,111 @@
+import { ref, computed, toValue } from "vue";
+import type { Ref } from "vue";
+
+interface Option {
+  isSubGroup?: boolean;
+  groupLabel?: string;
+  [key: string]: unknown;
+}
+
+export default function usePointer(
+  options: Option[],
+  optionElements: Ref<HTMLElement[]>,
+  listWrapperElement: Ref<HTMLElement | null>,
+) {
+  const pointer = ref<number | null>(null);
+  const pointerDirty = ref<boolean>(false);
+
+  const activeElementHeight = computed<number>(() => {
+    if (pointer.value === null) return 0;
+    const element = toValue(optionElements)[pointer.value];
+    const isGroupLabel = element.dataset.groupLabel;
+    const groupIndex = 2;
+
+    if (isGroupLabel) {
+      return toValue(optionElements)[pointer.value - groupIndex].getBoundingClientRect().height;
+    }
+
+    return element.getBoundingClientRect().height;
+  });
+
+  const pointerPosition = computed<number>(() => {
+    return (pointer.value !== null ? pointer.value : 0) * activeElementHeight.value || 0;
+  });
+
+  function scrollWrapperToElement() {
+    if (!listWrapperElement.value) return;
+    const visibleElements =
+      listWrapperElement.value.getBoundingClientRect().height / activeElementHeight.value;
+    const currentElement = visibleElements - 1;
+    const currentPointerPosition =
+      pointerPosition.value - currentElement * activeElementHeight.value;
+
+    if (listWrapperElement.value.scrollTop <= currentPointerPosition) {
+      listWrapperElement.value.scrollTop = currentPointerPosition;
+    }
+  }
+
+  function pointerForward() {
+    if (pointer.value === null) pointer.value = 0;
+
+    if (pointer.value < options.length - 1) {
+      pointer.value++;
+
+      const isGroup = options[pointer.value]?.isSubGroup || options[pointer.value]?.groupLabel;
+
+      if (listWrapperElement.value) scrollWrapperToElement();
+
+      if (options[pointer.value] && isGroup) {
+        pointerForward();
+      }
+    }
+
+    pointerDirty.value = true;
+  }
+
+  function pointerBackward() {
+    if (pointer.value === null) pointer.value = 0;
+
+    if (pointer.value > 0) {
+      pointer.value--;
+
+      const isGroup = options[pointer.value]?.isSubGroup || options[pointer.value]?.groupLabel;
+
+      if (listWrapperElement.value && listWrapperElement.value.scrollTop >= pointerPosition.value) {
+        listWrapperElement.value.scrollTop = pointerPosition.value;
+      }
+
+      if (options[pointer.value] && isGroup) {
+        pointerBackward();
+      }
+    } else {
+      if (options[0]?.groupLabel) {
+        pointerForward();
+      }
+    }
+
+    pointerDirty.value = true;
+  }
+
+  function pointerSet(index: number) {
+    pointer.value = index;
+    pointerDirty.value = true;
+  }
+
+  function pointerReset() {
+    pointer.value = 0;
+
+    if (listWrapperElement.value) {
+      listWrapperElement.value.scrollTop = 0;
+    }
+  }
+
+  return {
+    pointer,
+    pointerDirty,
+    pointerSet,
+    pointerReset,
+    pointerBackward,
+    pointerForward,
+  };
+}

package/ui.text-money/UMoney.vue

@@ -61,7 +61,7 @@ const mathSign = computed(() => {
 
 const preparedMoney = computed(() => {
   return separatedMoney(
-    Math.abs(props.value),
+    Math.abs(props.value || 0),
     props.minFractionDigits,
     props.maxFractionDigits,
     props.decimalSeparator,

package/ui.text-money/config.ts

@@ -17,13 +17,13 @@ export default /*tw*/ {
   sum: {
     variants: {
       size: {
-        sm: "text-xs",
-        md: "text-sm",
-        lg: "text-base",
-        xl: "text-lg",
-        "2xl": "text-xl",
-        "3xl": "text-2xl",
-        "4xl": "text-3xl",
+        xs: "text-xs",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+        xl: "text-xl",
+        "2xl": "text-2xl",
+        "3xl": "text-3xl",
       },
       planned: {
         true: "opacity-75 before:content-['('] after:content-[')']",
@@ -38,12 +38,11 @@ export default /*tw*/ {
       size: {
         xs: "text-2xs",
         sm: "text-xs",
-        md: "text-xs",
-        lg: "text-sm",
-        xl: "text-base",
-        "2xl": "text-lg",
-        "3xl": "text-xl",
-        "4xl": "text-2xl",
+        md: "text-sm",
+        lg: "text-base",
+        xl: "text-lg",
+        "2xl": "text-xl",
+        "3xl": "text-2xl",
       },
     },
   },