@vueland/ui 0.0.2 → 0.0.3

package/dist/composables/index.js

@@ -1,11 +1,17 @@
-export { makeActivatorProps, useActivator } from './use-activator.js';
-export { useAppScroll } from './use-app-scroll.js';
+export { useActivator } from './use-activator.js';
 export { useApplication } from './use-application.js';
-export { makeAutoPositionProps, useAutoPosition } from './use-auto-position.js';
+export { useApplicationScroll } from './use-application-scroll.js';
+export { useAriaActivator } from './use-aria-activator.js';
+export { useAriaDialog } from './use-aria-dialog.js';
+export { useAriaField } from './use-aria-field.js';
+export { useAriaListbox } from './use-aria-listbox.js';
+export { useAriaToggle } from './use-aria-toggle.js';
+export { useAutoPosition } from './use-auto-position.js';
 export { useAutocomplete } from './use-autocomplete.js';
+export { useBreakpoints } from './use-breakpoints.js';
 export { useButtonPresets } from './use-button-presets.js';
 export { useCore } from './use-core.js';
-export { makeDelayProps, useDelayedActions } from './use-delay-actions.js';
+export { useDelayedActions } from './use-delay-actions.js';
 export { createDialogsStack, useDialogsStack } from './use-dialogs-stack.js';
 export { breakpoints, useDisplay } from './use-display.js';
 export { useEffect } from './use-effect.js';
@@ -15,10 +21,9 @@ export { useId } from './use-id.js';
 export { useInputPresets } from './use-input-presets.js';
 export { useKeyboard } from './use-keyboard.js';
 export { useMenu } from './use-menu.js';
-export { useMenuPresets } from './use-menu-presets.js';
 export { useNormalizedItems } from './use-normalized-items.js';
 export { clearOverlayStack, useOverlayStack } from './use-overlay-stack.js';
-export { makePresetProps, usePresets } from './use-presets.js';
+export { usePresets } from './use-presets.js';
 export { useSelectControl } from './use-select-control.js';
 export { useSelectedChips } from './use-selected-chips.js';
 export { useToggle } from './use-toggle.js';

package/dist/composables/use-activator.js

@@ -1,17 +1,5 @@
 import { shallowRef, computed, unref, markRaw } from 'vue';
-import { propsFactory } from '../utils/props-factory.js';
 
-const makeActivatorProps = propsFactory({
-  closeOnClick: Boolean,
-  openOnClick: Boolean,
-  openOnHover: Boolean,
-  closeOnLeave: Boolean,
-  openOnFocus: Boolean,
-  activator: {
-    type: null,
-    default: void 0
-  }
-});
 function useActivator(props) {
   const activatorEl = shallowRef(props.activator);
   const element = computed(() => getActivator());
@@ -46,4 +34,4 @@ function useActivator(props) {
   };
 }
 
-export { makeActivatorProps, useActivator };
+export { useActivator };

package/dist/composables/{use-app-scroll.js → use-application-scroll.js}

@@ -2,7 +2,7 @@ import { shallowReactive, shallowRef, computed, unref } from 'vue';
 import { convertToUnit } from '../utils/convert-to-unit.js';
 import { IN_BROWSER } from '../utils/globals.js';
 
-function useAppScroll() {
+function useApplicationScroll() {
   const state = shallowReactive({ blockScroll: false });
   const appRef = shallowRef();
   let savedScrollTop = 0;
@@ -48,4 +48,4 @@ function useAppScroll() {
   };
 }
 
-export { useAppScroll };
+export { useApplicationScroll };

package/dist/composables/use-aria-activator.js

@@ -0,0 +1,15 @@
+import { computed } from 'vue';
+import { ariaExpandable } from '../utils/aria.js';
+
+function useAriaActivator(state) {
+  return computed(() => {
+    var _a;
+    const s = state();
+    return ariaExpandable(s.expanded, {
+      haspopup: (_a = s.haspopup) != null ? _a : true,
+      controls: s.controls
+    });
+  });
+}
+
+export { useAriaActivator };

package/dist/composables/use-aria-dialog.js

@@ -0,0 +1,16 @@
+import { computed } from 'vue';
+import { ariaDescribedBy, ariaLabelledBy, ariaModal } from '../utils/aria.js';
+
+function useAriaDialog(state = () => ({})) {
+  return computed(() => {
+    var _a;
+    const s = state();
+    return {
+      ...ariaModal((_a = s.modal) != null ? _a : true),
+      ...ariaLabelledBy(s.labelledBy),
+      ...ariaDescribedBy(s.describedBy)
+    };
+  });
+}
+
+export { useAriaDialog };

package/dist/composables/use-aria-field.js

@@ -0,0 +1,18 @@
+import { computed } from 'vue';
+import { ariaDisabled, ariaReadonly, ariaErrorMessage, ariaInvalid, ariaDescribedBy, ariaLabelledBy } from '../utils/aria.js';
+
+function useAriaField(state) {
+  return computed(() => {
+    const s = state();
+    return {
+      ...ariaLabelledBy(s.label ? `${s.fieldId}-label` : void 0),
+      ...ariaDescribedBy(s.hasDetails ? `${s.fieldId}-details` : void 0),
+      ...ariaInvalid(s.hasError),
+      ...ariaErrorMessage(s.errorMessage && s.hasDetails ? `${s.fieldId}-details` : void 0),
+      ...ariaReadonly(s.readonly),
+      ...ariaDisabled(s.disabled)
+    };
+  });
+}
+
+export { useAriaField };

package/dist/composables/use-aria-listbox.js

@@ -0,0 +1,14 @@
+import { computed } from 'vue';
+import { ariaActiveDescendant, ariaMultiselectable } from '../utils/aria.js';
+
+function useAriaListbox(state) {
+  return computed(() => {
+    const s = state();
+    return {
+      ...ariaMultiselectable(s.multiple),
+      ...ariaActiveDescendant(s.activeDescendant)
+    };
+  });
+}
+
+export { useAriaListbox };

package/dist/composables/use-aria-toggle.js

@@ -0,0 +1,15 @@
+import { computed } from 'vue';
+import { ariaRequired, ariaDisabled, ariaPressed, ariaChecked } from '../utils/aria.js';
+
+function useAriaToggle(state) {
+  return computed(() => {
+    const s = state();
+    return {
+      ...s.mode === "button" ? ariaPressed(s.checked) : ariaChecked(s.checked),
+      ...ariaDisabled(s.disabled),
+      ...ariaRequired(s.required)
+    };
+  });
+}
+
+export { useAriaToggle };

package/dist/composables/use-auto-position.js

@@ -2,23 +2,22 @@ import { ref, shallowRef, computed, unref, watch, onBeforeUnmount, nextTick } fr
 import { isDef } from '../helpers/index.js';
 import { useApplication } from './use-application.js';
 import { IN_BROWSER } from '../utils/globals.js';
-import { propsFactory } from '../utils/props-factory.js';
 
-const makeAutoPositionProps = propsFactory({
-  strategy: {
-    type: String,
-    default: "bounce"
-  },
-  positionX: Number,
-  positionY: Number,
-  offsetX: [Number, String],
-  offsetY: [Number, String],
-  left: Boolean,
-  right: Boolean,
-  top: Boolean,
-  bottom: Boolean
-});
-const SCREEN_EDGE_OFFSET = 20;
+const SCREEN_EDGE_OFFSET = 10;
+const REVERSE_SIDE = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left"
+};
+function parseSide(align) {
+  return align == null ? void 0 : align.split("-")[0];
+}
+function parseCross(align) {
+  if (!align) return void 0;
+  const idx = align.indexOf("-");
+  return idx === -1 ? void 0 : align.slice(idx + 1);
+}
 function resolveElement(value) {
   var _a;
   if (!value) {
@@ -68,9 +67,12 @@ function useAutoPosition(props, activatorEl) {
   const contentRef = shallowRef();
   const offsetX = computed(() => Number(props.offsetX) || 0);
   const offsetY = computed(() => Number(props.offsetY) || 0);
-  const isHorizontalDirection = computed(() => props.left || props.right);
+  const side = computed(() => parseSide(props.align));
+  const cross = computed(() => parseCross(props.align));
+  const isHorizontalSide = computed(() => unref(side) === "left" || unref(side) === "right");
   const isReverseStrategy = computed(() => props.strategy === "reverse");
   let frameId = 0;
+  let updateInFlight = false;
   const getActivatorElement = () => {
     return resolveElement(unref(activatorEl));
   };
@@ -133,45 +135,40 @@ function useAutoPosition(props, activatorEl) {
       isBeyondBottom: top + height > bottomEdge
     };
   };
-  const getBaseTop = () => {
+  const getBaseTop = (s = unref(side), c = unref(cross)) => {
     if (isDef(props.positionY)) {
       return props.positionY + unref(offsetY);
     }
-    if (props.top) {
-      return unref(activator).top - unref(content).height - unref(offsetY);
-    }
-    if (props.bottom) {
-      return unref(activator).top + unref(activator).height + unref(offsetY);
-    }
-    return unref(activator).top + unref(offsetY);
+    const act = unref(activator);
+    const cnt = unref(content);
+    if (s === "top") return act.top - cnt.height - unref(offsetY);
+    if (s === "bottom") return act.top + act.height + unref(offsetY);
+    if (c === "center") return act.top + act.height / 2 - cnt.height / 2;
+    return act.top + unref(offsetY);
   };
-  const getBaseLeft = () => {
+  const getBaseLeft = (s = unref(side), c = unref(cross)) => {
     if (isDef(props.positionX)) {
       return props.positionX + unref(offsetX);
     }
-    if (props.left) {
-      return unref(activator).left - unref(content).width - unref(offsetX);
-    }
-    if (props.right) {
-      return unref(activator).left + unref(activator).width + unref(offsetX);
-    }
-    return unref(activator).left + unref(offsetX);
+    const act = unref(activator);
+    const cnt = unref(content);
+    if (s === "left") return act.left - cnt.width - unref(offsetX);
+    if (s === "right") return act.left + act.width + unref(offsetX);
+    if (c === "center") return act.left + act.width / 2 - cnt.width / 2;
+    if (c === "right") return act.left + act.width - cnt.width;
+    return act.left + unref(offsetX);
   };
   const getReversedTop = () => {
-    if (props.top) {
-      return unref(activator).top + unref(activator).height + unref(offsetY);
-    }
-    if (props.bottom) {
-      return unref(activator).top - unref(content).height - unref(offsetY);
+    const s = unref(side);
+    if (s && !unref(isHorizontalSide)) {
+      return getBaseTop(REVERSE_SIDE[s]);
     }
     return getBaseTop();
   };
   const getReversedLeft = () => {
-    if (props.left) {
-      return unref(activator).left + unref(activator).width + unref(offsetX);
-    }
-    if (props.right) {
-      return unref(activator).left - unref(content).width - unref(offsetX);
+    const s = unref(side);
+    if (s && unref(isHorizontalSide)) {
+      return getBaseLeft(REVERSE_SIDE[s]);
     }
     return getBaseLeft();
   };
@@ -207,7 +204,7 @@ function useAutoPosition(props, activatorEl) {
     if (!isBeyondTop && !isBeyondBottom) {
       return top;
     }
-    if (!unref(isReverseStrategy) || unref(isHorizontalDirection)) {
+    if (!unref(isReverseStrategy) || unref(isHorizontalSide)) {
       return clampTopToViewport(top);
     }
     return getReversedTop();
@@ -218,7 +215,7 @@ function useAutoPosition(props, activatorEl) {
     if (!isBeyondLeft && !isBeyondRight) {
       return left;
     }
-    if (!unref(isReverseStrategy) || !unref(isHorizontalDirection)) {
+    if (!unref(isReverseStrategy) || !unref(isHorizontalSide)) {
       return clampLeftToViewport(left);
     }
     return getReversedLeft();
@@ -253,13 +250,17 @@ function useAutoPosition(props, activatorEl) {
     });
   };
   const update = async () => {
+    updateInFlight = true;
+    cancelScheduledUpdate();
     setActivatorDimensions();
     await nextTick();
     if (!setContentDimensions()) {
+      updateInFlight = false;
       return;
     }
     await nextTick();
     applyPosition();
+    updateInFlight = false;
   };
   if (IN_BROWSER) {
     const resizeObserver = new ResizeObserver((entries) => {
@@ -274,7 +275,9 @@ function useAutoPosition(props, activatorEl) {
       }
       current.width = width;
       current.height = height;
-      scheduleUpdate();
+      if (!updateInFlight) {
+        scheduleUpdate();
+      }
     });
     watch(
       () => resolveElement(unref(activatorEl)),
@@ -302,10 +305,7 @@ function useAutoPosition(props, activatorEl) {
       () => [
         props.positionX,
         props.positionY,
-        props.top,
-        props.bottom,
-        props.left,
-        props.right,
+        props.align,
         props.offsetX,
         props.offsetY,
         props.strategy
@@ -325,4 +325,4 @@ function useAutoPosition(props, activatorEl) {
   };
 }
 
-export { makeAutoPositionProps, useAutoPosition };
+export { useAutoPosition };

package/dist/composables/use-breakpoints.js

@@ -0,0 +1,8 @@
+import { inject } from 'vue';
+import { $BREAKPOINTS_KEY } from '../constants/provide-keys.js';
+
+function useBreakpoints() {
+  return inject($BREAKPOINTS_KEY);
+}
+
+export { useBreakpoints };

package/dist/composables/use-delay-actions.js

@@ -1,16 +1,17 @@
 import { isDef } from '../helpers/index.js';
-import { propsFactory } from '../utils/props-factory.js';
 
-const makeDelayProps = propsFactory({
-  openDelay: [Number, String],
-  closeDelay: [Number, String]
-});
 function useDelayedActions(props) {
+  let openTimer;
+  let closeTimer;
   const openDelay = (fn) => {
-    setTimeout(fn, isDef(props.openDelay) ? +props.openDelay : 0);
+    clearTimeout(closeTimer);
+    clearTimeout(openTimer);
+    openTimer = setTimeout(fn, isDef(props.openDelay) ? +props.openDelay : 0);
   };
   const closeDelay = (fn) => {
-    setTimeout(fn, isDef(props.closeDelay) ? +props.closeDelay : 0);
+    clearTimeout(openTimer);
+    clearTimeout(closeTimer);
+    closeTimer = setTimeout(fn, isDef(props.closeDelay) ? +props.closeDelay : 0);
   };
   return {
     openDelay,
@@ -18,4 +19,4 @@ function useDelayedActions(props) {
   };
 }
 
-export { makeDelayProps, useDelayedActions };
+export { useDelayedActions };

package/dist/composables/use-display.js

@@ -1,4 +1,4 @@
-import { reactive, shallowRef, watchEffect, unref, toRefs } from 'vue';
+import { shallowReactive, shallowRef, watchEffect, unref, toRefs } from 'vue';
 import { BreakpointLabels } from '../enums/BreakpointLabels.js';
 import { IN_BROWSER } from '../utils/globals.js';
 
@@ -11,7 +11,7 @@ const breakpoints = {
   [BreakpointLabels.XXL]: 2560
 };
 function useDisplay() {
-  const state = reactive({
+  const state = shallowReactive({
     xxl: false,
     xl: false,
     lg: false,
@@ -68,12 +68,12 @@ function useDisplay() {
       state.smAndLess = screen <= sm && screen > xs;
     });
     return {
-      ...toRefs(state),
-      update
+      ...toRefs(state)
     };
   };
   return {
     state,
+    update,
     createDisplay
   };
 }

package/dist/composables/use-presets.js

@@ -1,8 +1,6 @@
 import { computed } from 'vue';
 import { useCore } from './use-core.js';
-import { propsFactory } from '../utils/props-factory.js';
 
-const makePresetProps = propsFactory({ preset: String });
 function usePresets(props) {
   const core = useCore();
   return computed(() => {
@@ -11,4 +9,4 @@ function usePresets(props) {
   });
 }
 
-export { makePresetProps, usePresets };
+export { usePresets };

package/dist/constants/aria.js

@@ -0,0 +1,32 @@
+const ARIA = {
+  EXPANDED: "aria-expanded",
+  HASPOPUP: "aria-haspopup",
+  CONTROLS: "aria-controls",
+  LABEL: "aria-label",
+  LABELLEDBY: "aria-labelledby",
+  DESCRIBEDBY: "aria-describedby",
+  ERRORMESSAGE: "aria-errormessage",
+  HIDDEN: "aria-hidden",
+  DISABLED: "aria-disabled",
+  INVALID: "aria-invalid",
+  READONLY: "aria-readonly",
+  SELECTED: "aria-selected",
+  MULTISELECTABLE: "aria-multiselectable",
+  REQUIRED: "aria-required",
+  LIVE: "aria-live",
+  ATOMIC: "aria-atomic",
+  BUSY: "aria-busy",
+  CURRENT: "aria-current",
+  PRESSED: "aria-pressed",
+  CHECKED: "aria-checked",
+  VALUENOW: "aria-valuenow",
+  VALUEMIN: "aria-valuemin",
+  VALUEMAX: "aria-valuemax",
+  VALUETEXT: "aria-valuetext",
+  MODAL: "aria-modal",
+  ACTIVEDESCENDANT: "aria-activedescendant",
+  AUTOCOMPLETE: "aria-autocomplete",
+  ORIENTATION: "aria-orientation"
+};
+
+export { ARIA };

package/dist/constants/index.d.ts

@@ -1,4 +1,39 @@
-import { ComputedRef, ShallowRef, MaybeRef, InjectionKey } from 'vue';
+import { Ref, ShallowRef, ComputedRef, InjectionKey } from 'vue';
+
+declare const ARIA: {
+    readonly EXPANDED: "aria-expanded";
+    readonly HASPOPUP: "aria-haspopup";
+    readonly CONTROLS: "aria-controls";
+    readonly LABEL: "aria-label";
+    readonly LABELLEDBY: "aria-labelledby";
+    readonly DESCRIBEDBY: "aria-describedby";
+    readonly ERRORMESSAGE: "aria-errormessage";
+    readonly HIDDEN: "aria-hidden";
+    readonly DISABLED: "aria-disabled";
+    readonly INVALID: "aria-invalid";
+    readonly READONLY: "aria-readonly";
+    readonly SELECTED: "aria-selected";
+    readonly MULTISELECTABLE: "aria-multiselectable";
+    readonly REQUIRED: "aria-required";
+    readonly LIVE: "aria-live";
+    readonly ATOMIC: "aria-atomic";
+    readonly BUSY: "aria-busy";
+    readonly CURRENT: "aria-current";
+    readonly PRESSED: "aria-pressed";
+    readonly CHECKED: "aria-checked";
+    readonly VALUENOW: "aria-valuenow";
+    readonly VALUEMIN: "aria-valuemin";
+    readonly VALUEMAX: "aria-valuemax";
+    readonly VALUETEXT: "aria-valuetext";
+    readonly MODAL: "aria-modal";
+    readonly ACTIVEDESCENDANT: "aria-activedescendant";
+    readonly AUTOCOMPLETE: "aria-autocomplete";
+    readonly ORIENTATION: "aria-orientation";
+};
+type AriaKey = typeof ARIA[keyof typeof ARIA];
+type AriaHaspopup = 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+type AriaLive = 'off' | 'polite' | 'assertive';
+type AriaCurrent = 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
 
 declare const FIELD_ATTRS: Set<string>;
 
@@ -122,6 +157,42 @@ type ApplicationApi = {
     getScrollLeft(): number;
 };
 
+interface Breakpoints {
+    xxl: boolean;
+    xl: boolean;
+    lg: boolean;
+    md: boolean;
+    sm: boolean;
+    xs: boolean;
+    xlAndLess: boolean;
+    lgAndLess: boolean;
+    mdAndLess: boolean;
+    smAndLess: boolean;
+    xlAndUp: boolean;
+    lgAndUp: boolean;
+    mdAndUp: boolean;
+    smAndUp: boolean;
+}
+type Display = {
+    [k in keyof Breakpoints]: Ref<boolean>;
+};
+
+type DialogStackItem = {
+    id: number;
+    component: any;
+    props?: Record<string, any>;
+};
+interface DialogsStackAPI {
+    stack: ShallowRef<DialogStackItem[]>;
+    current: ComputedRef<DialogStackItem | undefined>;
+    openDialog: (options: {
+        component: () => Promise<any>;
+        props?: Record<string, any>;
+    }) => Promise<number>;
+    closeDialog: (id?: number) => void;
+    closeAll: () => void;
+}
+
 type ValidatorFn = () => boolean | Promise<boolean>;
 type ResetFn = () => void;
 interface FormAPI {
@@ -138,53 +209,23 @@ type ListItemControls = {
 };
 type ListAPI<T = any> = {
     role: ComputedRef<CListRole>;
-    register(controls: ListItemControls): void;
+    listId: string;
+    register(controls: ListItemControls): number;
     unregister(controls: ListItemControls): void;
     select(value: T): void;
     unselect(value: T): void;
     isActive(value: T): boolean;
+    setDescendant(id: string | undefined): void;
 };
 
-type DialogStackItem = {
-    id: number;
-    component: any;
-    props?: Record<string, any>;
-};
-interface DialogsStackAPI {
-    stack: ShallowRef<DialogStackItem[]>;
-    current: ComputedRef<DialogStackItem | undefined>;
-    openDialog: (options: {
-        component: () => Promise<any>;
-        props?: Record<string, any>;
-    }) => Promise<number>;
-    closeDialog: (id?: number) => void;
-    closeAll: () => void;
-}
-
-interface AppBreakpoints {
-    xxl: MaybeRef<boolean>;
-    xl: MaybeRef<boolean>;
-    lg: MaybeRef<boolean>;
-    md: MaybeRef<boolean>;
-    sm: MaybeRef<boolean>;
-    xs: MaybeRef<boolean>;
-    xlAndLess: MaybeRef<boolean>;
-    lgAndLess: MaybeRef<boolean>;
-    mdAndLess: MaybeRef<boolean>;
-    smAndLess: MaybeRef<boolean>;
-    xlAndUp: MaybeRef<boolean>;
-    lgAndUp: MaybeRef<boolean>;
-    mdAndUp: MaybeRef<boolean>;
-    smAndUp: MaybeRef<boolean>;
-}
-
 declare const $FORM_API_KEY: InjectionKey<FormAPI>;
 declare const $LIST_API_KEY: InjectionKey<ListAPI>;
 declare const $MENU_API_KEY: InjectionKey<any>;
 declare const $APP_API_KEY: InjectionKey<ApplicationApi>;
 declare const $SELECT_CONTROL_API_KEY: InjectionKey<any>;
-declare const $BREAKPOINTS_KEY: InjectionKey<AppBreakpoints>;
+declare const $BREAKPOINTS_KEY: InjectionKey<Display>;
 declare const $VUELAND_UI_KEY: InjectionKey<any>;
 declare const $DIALOGS_STACK_API_KEY: InjectionKey<DialogsStackAPI>;
 
-export { $APP_API_KEY, $BREAKPOINTS_KEY, $DIALOGS_STACK_API_KEY, $FORM_API_KEY, $LIST_API_KEY, $MENU_API_KEY, $SELECT_CONTROL_API_KEY, $VUELAND_UI_KEY, ALIASES, BREAKPOINTS, FIELD_ATTRS, ICONS };
+export { $APP_API_KEY, $BREAKPOINTS_KEY, $DIALOGS_STACK_API_KEY, $FORM_API_KEY, $LIST_API_KEY, $MENU_API_KEY, $SELECT_CONTROL_API_KEY, $VUELAND_UI_KEY, ALIASES, ARIA, BREAKPOINTS, FIELD_ATTRS, ICONS };
+export type { AriaCurrent, AriaHaspopup, AriaKey, AriaLive };

package/dist/constants/index.js

@@ -1,3 +1,4 @@
+export { ARIA } from './aria.js';
 export { FIELD_ATTRS } from './attrs.js';
 export { BREAKPOINTS } from './breakpoints.js';
 export { ALIASES, ICONS } from './icons.js';