vueless 0.0.533 → 0.0.535

package/ui.dropdown-list/usePointer.ts

@@ -1,61 +1,62 @@
 import { ref, computed, toValue } from "vue";
-import type { Ref } from "vue";
 
-interface Option {
-  isSubGroup?: boolean;
-  groupLabel?: string;
-  [key: string]: unknown;
-}
+import type { MaybeRef } from "vue";
+import type { Option } from "./types.ts";
 
 export default function usePointer(
-  options: Option[],
-  optionElements: Ref<HTMLElement[]>,
-  listWrapperElement: Ref<HTMLElement | null>,
+  options: MaybeRef<Option[]>,
+  optionElements: MaybeRef<HTMLLIElement[] | null>,
+  listWrapperElement: MaybeRef<HTMLDivElement | null>,
 ) {
-  const pointer = ref<number | null>(null);
-  const pointerDirty = ref<boolean>(false);
+  const pointer = ref(0);
+  const pointerDirty = ref(false);
+
+  const localOptions = computed(() => toValue(options));
+  const localOptionElements = computed(() => toValue(optionElements));
+  const localListWrapperElement = computed(() => toValue(listWrapperElement));
 
-  const activeElementHeight = computed<number>(() => {
-    if (pointer.value === null) return 0;
-    const element = toValue(optionElements)[pointer.value];
-    const isGroupLabel = element.dataset.groupLabel;
+  const activeElementHeight = computed(() => {
+    const isGroupLabel = localOptionElements.value?.at(pointer.value)?.dataset?.groupLabel || "";
     const groupIndex = 2;
 
     if (isGroupLabel) {
-      return toValue(optionElements)[pointer.value - groupIndex].getBoundingClientRect().height;
+      const prevIndex = pointer.value - groupIndex;
+
+      return localOptionElements.value?.at(prevIndex)?.getBoundingClientRect()?.height || 0;
     }
 
-    return element.getBoundingClientRect().height;
+    return localOptionElements.value?.at(pointer.value)?.getBoundingClientRect()?.height || 0;
   });
 
-  const pointerPosition = computed<number>(() => {
-    return (pointer.value !== null ? pointer.value : 0) * activeElementHeight.value || 0;
+  const pointerPosition = computed(() => {
+    return pointer.value * activeElementHeight.value || 0;
   });
 
   function scrollWrapperToElement() {
-    if (!listWrapperElement.value) return;
+    if (!localListWrapperElement.value) return;
+
     const visibleElements =
-      listWrapperElement.value.getBoundingClientRect().height / activeElementHeight.value;
+      localListWrapperElement.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;
+    if (localListWrapperElement.value.scrollTop <= currentPointerPosition) {
+      localListWrapperElement.value.scrollTop = currentPointerPosition;
     }
   }
 
   function pointerForward() {
-    if (pointer.value === null) pointer.value = 0;
-
-    if (pointer.value < options.length - 1) {
+    if (pointer.value < localOptions.value.length - 1) {
       pointer.value++;
 
-      const isGroup = options[pointer.value]?.isSubGroup || options[pointer.value]?.groupLabel;
+      const isGroup =
+        localOptions.value[pointer.value].isSubGroup ||
+        localOptions.value[pointer.value].groupLabel;
 
-      if (listWrapperElement.value) scrollWrapperToElement();
+      if (localListWrapperElement.value) scrollWrapperToElement();
 
-      if (options[pointer.value] && isGroup) {
+      if (localOptions.value[pointer.value] && isGroup) {
         pointerForward();
       }
     }
@@ -64,22 +65,25 @@ export default function usePointer(
   }
 
   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;
+      const isGroup =
+        localOptions.value[pointer.value].isSubGroup ||
+        localOptions.value[pointer.value].groupLabel;
 
-      if (listWrapperElement.value && listWrapperElement.value.scrollTop >= pointerPosition.value) {
-        listWrapperElement.value.scrollTop = pointerPosition.value;
+      if (
+        localListWrapperElement.value &&
+        localListWrapperElement.value.scrollTop >= pointerPosition.value
+      ) {
+        localListWrapperElement.value.scrollTop = pointerPosition.value;
       }
 
-      if (options[pointer.value] && isGroup) {
+      if (localOptions.value[pointer.value] && isGroup) {
         pointerBackward();
       }
     } else {
-      if (options[0]?.groupLabel) {
+      if (localOptions.value[pointer.value] && localOptions.value[0].groupLabel) {
         pointerForward();
       }
     }
@@ -95,17 +99,10 @@ export default function usePointer(
   function pointerReset() {
     pointer.value = 0;
 
-    if (listWrapperElement.value) {
-      listWrapperElement.value.scrollTop = 0;
+    if (localListWrapperElement.value) {
+      localListWrapperElement.value.scrollTop = 0;
     }
   }
 
-  return {
-    pointer,
-    pointerDirty,
-    pointerSet,
-    pointerReset,
-    pointerBackward,
-    pointerForward,
-  };
+  return { pointer, pointerDirty, pointerSet, pointerReset, pointerBackward, pointerForward };
 }

package/ui.form-date-picker-range/useAttrs.ts

@@ -4,7 +4,7 @@ import { merge } from "lodash-es";
 import useUI from "../composables/useUI.ts";
 
 import defaultConfig from "./config.js";
-import { POSITION } from "../composables/useAutoPosition.ts";
+import { Direction } from "../composables/useAutoPosition.ts";
 
 import type { Ref } from "vue";
 import type { UseAttrs } from "../types.ts";
@@ -28,8 +28,8 @@ export default function useAttrs(
   );
 
   const mutatedProps = computed(() => ({
-    openDirectionY: isTop.value ? POSITION.top : POSITION.bottom,
-    openDirectionX: isRight.value ? POSITION.right : POSITION.left,
+    openDirectionY: isTop.value ? Direction.Top : Direction.Bottom,
+    openDirectionX: isRight.value ? Direction.Right : Direction.Left,
     error: Boolean(props.error),
     description: Boolean(props.description),
   }));

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

@@ -123,6 +123,7 @@ GroupValue.args = {
   groupLabelKey: "language",
   labelKey: "name",
   valueKey: "name",
+  // TODO: Implement recursion nesting and add ability to use group (nested) options with default options.
   options: [
     {
       language: "Javascript",

package/ui.image-avatar/types.ts

@@ -1,5 +1,7 @@
 import defaultConfig from "./config.ts";
 
+import type { Color } from "../types.ts";
+
 export type Config = Partial<typeof defaultConfig>;
 
 export interface UAvatarProps {
@@ -26,28 +28,7 @@ export interface UAvatarProps {
   /**
    * Avatar color.
    */
-  color?:
-    | "brand"
-    | "grayscale"
-    | "gray"
-    | "red"
-    | "orange"
-    | "amber"
-    | "yellow"
-    | "lime"
-    | "green"
-    | "emerald"
-    | "teal"
-    | "cyan"
-    | "sky"
-    | "blue"
-    | "indigo"
-    | "violet"
-    | "purple"
-    | "fuchsia"
-    | "pink"
-    | "rose"
-    | "white";
+  color?: `${Color}`;
 
   /**
    * Avatar corner rounding.

package/ui.image-icon/types.ts

@@ -1,5 +1,6 @@
 import defaultConfig from "./config.ts";
 
+import type { Color } from "../types.ts";
 export type Config = Partial<typeof defaultConfig>;
 
 export interface UIconProps {
@@ -16,29 +17,7 @@ export interface UIconProps {
   /**
    * Icon color.
    */
-  color?:
-    | "brand"
-    | "grayscale"
-    | "gray"
-    | "red"
-    | "orange"
-    | "amber"
-    | "yellow"
-    | "lime"
-    | "green"
-    | "emerald"
-    | "teal"
-    | "cyan"
-    | "sky"
-    | "blue"
-    | "indigo"
-    | "violet"
-    | "purple"
-    | "fuchsia"
-    | "pink"
-    | "rose"
-    | "black"
-    | "white";
+  color?: `${Color}` | "black";
 
   /**
    * Icon size.

package/ui.loader/types.ts

@@ -1,5 +1,7 @@
 import defaultConfig from "./config.ts";
 
+import type { Color } from "../types.ts";
+
 export type Config = Partial<typeof defaultConfig>;
 
 export interface ULoaderProps {
@@ -11,29 +13,7 @@ export interface ULoaderProps {
   /**
    * Loader color.
    */
-  color?:
-    | "brand"
-    | "grayscale"
-    | "gray"
-    | "red"
-    | "orange"
-    | "amber"
-    | "yellow"
-    | "lime"
-    | "green"
-    | "emerald"
-    | "teal"
-    | "cyan"
-    | "sky"
-    | "blue"
-    | "indigo"
-    | "violet"
-    | "purple"
-    | "fuchsia"
-    | "pink"
-    | "rose"
-    | "black"
-    | "white";
+  color?: `${Color}` | "black";
 
   /**
    * Loader size.

package/ui.loader-overlay/types.ts

@@ -1,5 +1,7 @@
 import defaultConfig from "./config.ts";
 
+import type { Color } from "../types.ts";
+
 export type Config = Partial<typeof defaultConfig>;
 
 export interface ULoaderOverlayProps {
@@ -11,29 +13,7 @@ export interface ULoaderOverlayProps {
   /**
    * Loader color.
    */
-  color?:
-    | "brand"
-    | "grayscale"
-    | "gray"
-    | "red"
-    | "orange"
-    | "amber"
-    | "yellow"
-    | "lime"
-    | "green"
-    | "emerald"
-    | "teal"
-    | "cyan"
-    | "sky"
-    | "blue"
-    | "indigo"
-    | "violet"
-    | "purple"
-    | "fuchsia"
-    | "pink"
-    | "rose"
-    | "black"
-    | "white";
+  color?: `${Color}` | "black";
 
   /**
    * Component config object.

package/ui.loader-progress/types.ts

@@ -1,33 +1,14 @@
 import defaultConfig from "./config.ts";
 
+import type { Color } from "../types.ts";
+
 export type Config = Partial<typeof defaultConfig>;
 
 export interface ULoaderProgressProps {
   /**
    * Loader stripe color.
    */
-  color?:
-    | "brand"
-    | "grayscale"
-    | "gray"
-    | "red"
-    | "orange"
-    | "amber"
-    | "yellow"
-    | "lime"
-    | "green"
-    | "emerald"
-    | "teal"
-    | "cyan"
-    | "sky"
-    | "blue"
-    | "indigo"
-    | "violet"
-    | "purple"
-    | "fuchsia"
-    | "pink"
-    | "rose"
-    | "white";
+  color?: `${Color}`;
 
   /**
    * API resource names (endpoint URIs).

package/ui.navigation-progress/types.ts

@@ -1,5 +1,7 @@
 import defaultConfig from "./config.ts";
 
+import type { Color } from "../types.ts";
+
 export type Config = Partial<typeof defaultConfig>;
 
 export interface UProgressProps {
@@ -21,28 +23,7 @@ export interface UProgressProps {
   /**
    * Progress color.
    */
-  color?:
-    | "brand"
-    | "grayscale"
-    | "gray"
-    | "red"
-    | "orange"
-    | "amber"
-    | "yellow"
-    | "lime"
-    | "green"
-    | "emerald"
-    | "teal"
-    | "cyan"
-    | "sky"
-    | "blue"
-    | "indigo"
-    | "violet"
-    | "purple"
-    | "fuchsia"
-    | "pink"
-    | "rose"
-    | "white";
+  color?: `${Color}`;
 
   /**
    * Progress variant.

package/ui.other-dot/types.ts

@@ -1,33 +1,14 @@
 import defaultConfig from "./config.ts";
 
+import type { Color } from "../types.ts";
+
 export type Config = Partial<typeof defaultConfig>;
 
 export interface UDotProps {
   /**
    * Dot color.
    */
-  color?:
-    | "brand"
-    | "grayscale"
-    | "gray"
-    | "red"
-    | "orange"
-    | "amber"
-    | "yellow"
-    | "lime"
-    | "green"
-    | "emerald"
-    | "teal"
-    | "cyan"
-    | "sky"
-    | "blue"
-    | "indigo"
-    | "violet"
-    | "purple"
-    | "fuchsia"
-    | "pink"
-    | "rose"
-    | "white";
+  color?: `${Color}`;
 
   /**
    * Dot size.

package/ui.text-alert/types.ts

@@ -1,5 +1,7 @@
 import defaultConfig from "./config.ts";
 
+import type { Color } from "../types.ts";
+
 export type Config = Partial<typeof defaultConfig>;
 
 export interface UAlertProps {
@@ -31,28 +33,7 @@ export interface UAlertProps {
   /**
    * Alert color.
    */
-  color?:
-    | "brand"
-    | "grayscale"
-    | "gray"
-    | "red"
-    | "orange"
-    | "amber"
-    | "yellow"
-    | "lime"
-    | "green"
-    | "emerald"
-    | "teal"
-    | "cyan"
-    | "sky"
-    | "blue"
-    | "indigo"
-    | "violet"
-    | "purple"
-    | "fuchsia"
-    | "pink"
-    | "rose"
-    | "white";
+  color?: `${Color}`;
 
   /**
    * Alert timeout.

package/ui.text-badge/types.ts

@@ -1,5 +1,7 @@
 import defaultConfig from "./config.ts";
 
+import type { Color } from "../types.ts";
+
 export type Config = Partial<typeof defaultConfig>;
 
 export interface UBadgeProps {
@@ -26,28 +28,7 @@ export interface UBadgeProps {
   /**
    * Badge color.
    */
-  color?:
-    | "brand"
-    | "grayscale"
-    | "gray"
-    | "red"
-    | "orange"
-    | "amber"
-    | "yellow"
-    | "lime"
-    | "green"
-    | "emerald"
-    | "teal"
-    | "cyan"
-    | "sky"
-    | "blue"
-    | "indigo"
-    | "violet"
-    | "purple"
-    | "fuchsia"
-    | "pink"
-    | "rose"
-    | "white";
+  color?: `${Color}`;
 
   /**
    * Icon name (appears instead of label).

package/ui.text-header/types.ts

@@ -1,5 +1,7 @@
 import defaultConfig from "./config.ts";
 
+import type { Color } from "../types.ts";
+
 export type Config = Partial<typeof defaultConfig>;
 
 export interface UHeaderProps {
@@ -16,28 +18,7 @@ export interface UHeaderProps {
   /**
    * Header color.
    */
-  color?:
-    | "brand"
-    | "grayscale"
-    | "gray"
-    | "red"
-    | "orange"
-    | "amber"
-    | "yellow"
-    | "lime"
-    | "green"
-    | "emerald"
-    | "teal"
-    | "cyan"
-    | "sky"
-    | "blue"
-    | "indigo"
-    | "violet"
-    | "purple"
-    | "fuchsia"
-    | "pink"
-    | "rose"
-    | "white";
+  color?: `${Color}`;
 
   /**
    * Allows changing HTML tag.

package/ui.text-money/types.ts

@@ -1,5 +1,7 @@
 import defaultConfig from "./config.ts";
 
+import type { Color } from "../types.ts";
+
 export type Config = Partial<typeof defaultConfig>;
 
 export interface UMoneyProps {
@@ -16,28 +18,7 @@ export interface UMoneyProps {
   /**
    * Money color.
    */
-  color?:
-    | "brand"
-    | "grayscale"
-    | "gray"
-    | "red"
-    | "orange"
-    | "amber"
-    | "yellow"
-    | "lime"
-    | "green"
-    | "emerald"
-    | "teal"
-    | "cyan"
-    | "sky"
-    | "blue"
-    | "indigo"
-    | "violet"
-    | "purple"
-    | "fuchsia"
-    | "pink"
-    | "rose"
-    | "white";
+  color?: `${Color}`;
 
   /**
    * Money currency symbol.