@vueland/ui 0.0.1 → 0.0.3

package/dist/composables/index.js

@@ -1,22 +1,30 @@
-export { breakpoints, useDisplay } from './use-display.js';
-export { InputEvents, useValidate } from './use-validate.js';
-export { useInputState } from './use-input-state.js';
-export { useFieldAttrs } from './use-field-attrs.js';
 export { useActivator } from './use-activator.js';
-export { useAutocomplete } from './use-autocomplete.js';
-export { usePositionClasses } from './use-position-classes.js';
-export { useDelayedActions } from './use-delay-actions.js';
 export { useApplication } from './use-application.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 { useToggle } from './use-toggle.js';
-export { useInputValue } from './use-input-value.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 { useOverlayStack } from './use-overlay-stack.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';
 export { useForm } from './use-form.js';
-export { usePresets } from './use-presets.js';
+export { useIcon } from './use-icon.js';
+export { useId } from './use-id.js';
 export { useInputPresets } from './use-input-presets.js';
-export { useMenuPresets } from './use-menu-presets.js';
-export { useButtonPresets } from './use-button-presets.js';
-export { useAppScroll } from './use-app-scroll.js';
+export { useKeyboard } from './use-keyboard.js';
+export { useMenu } from './use-menu.js';
+export { useNormalizedItems } from './use-normalized-items.js';
+export { clearOverlayStack, useOverlayStack } from './use-overlay-stack.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';
+export { InputEvents, useValidate } from './use-validate.js';

package/dist/composables/use-activator.js

@@ -1,44 +1,34 @@
-import { shallowRef, computed, markRaw, unref } from 'vue';
+import { shallowRef, computed, unref, markRaw } from 'vue';
 
 function useActivator(props) {
-  const activatorEl = shallowRef();
+  const activatorEl = shallowRef(props.activator);
+  const element = computed(() => getActivator());
   const activatorProps = { ref: set };
   function set(val) {
     activatorEl.value = val;
   }
   function getActivator() {
-    return activatorEl.value;
-  }
-  function getActivatorElement() {
-    var _a, _b;
-    return (_b = (_a = unref(activatorEl)) == null ? void 0 : _a.$el) != null ? _b : unref(activatorEl);
+    var _a, _b, _c;
+    return (_c = (_b = props.activator) != null ? _b : (_a = unref(activatorEl)) == null ? void 0 : _a.$el) != null ? _c : unref(activatorEl);
   }
   function genListeners({
     open,
     close,
     toggle
   }) {
-    return computed(() => markRaw({
-      ...props.openOnHover ? {
-        mouseenter: () => open()
-      } : {},
-      ...props.closeOnLeave ? {
-        mouseleave: () => close()
-      } : {},
-      ...props.openOnClick ? {
-        click: () => open()
-      } : {},
-      ...props.closeOnClick ? {
-        click: () => toggle()
-      } : {},
-      ...props.openOnFocus ? {
-        focus: () => open()
-      } : {}
-    }));
+    return computed(
+      () => markRaw({
+        ...props.openOnHover ? { mouseenter: () => open() } : {},
+        ...props.closeOnLeave ? { mouseleave: () => close() } : {},
+        ...props.openOnClick ? { click: () => open() } : {},
+        ...props.closeOnClick ? { click: () => toggle() } : {},
+        ...props.openOnFocus ? { focus: () => open() } : {}
+      })
+    );
   }
   return {
+    element,
     activatorProps,
-    getActivatorElement,
     genListeners,
     getActivator
   };

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

@@ -2,16 +2,12 @@ import { shallowReactive, shallowRef, computed, unref } from 'vue';
 import { convertToUnit } from '../utils/convert-to-unit.js';
 import { IN_BROWSER } from '../utils/globals.js';
 
-function useAppScroll() {
-  const state = shallowReactive({
-    blockScroll: false
-  });
+function useApplicationScroll() {
+  const state = shallowReactive({ blockScroll: false });
   const appRef = shallowRef();
   let savedScrollTop = 0;
   let savedScrollLeft = 0;
-  const classes = computed(() => ({
-    "c-app--block-scroll": state.blockScroll
-  }));
+  const classes = computed(() => ({ "c-app--block-scroll": state.blockScroll }));
   function getScrollTop() {
     if (!IN_BROWSER) return 0;
     return window.scrollY;
@@ -52,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

@@ -1,12 +1,31 @@
 import { ref, shallowRef, computed, unref, watch, onBeforeUnmount, nextTick } from 'vue';
-import { useApplication } from './use-application.js';
 import { isDef } from '../helpers/index.js';
+import { useApplication } from './use-application.js';
 import { IN_BROWSER } from '../utils/globals.js';
 
-const SCREEN_EDGE_OFFSET = 20;
-const getRect = (el) => {
+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;
-  const element = (_a = el == null ? void 0 : el.$el) != null ? _a : el;
+  if (!value) {
+    return void 0;
+  }
+  return (_a = value.$el) != null ? _a : value;
+}
+function getElementRect(element) {
   const {
     top,
     left,
@@ -19,8 +38,19 @@ const getRect = (el) => {
     width,
     height
   };
-};
-function useAutoPosition(props) {
+}
+function getObservedSize(entry) {
+  var _a, _b, _c;
+  const borderBoxSize = (_a = entry.borderBoxSize) == null ? void 0 : _a[0];
+  return {
+    width: (_b = borderBoxSize == null ? void 0 : borderBoxSize.inlineSize) != null ? _b : entry.contentRect.width,
+    height: (_c = borderBoxSize == null ? void 0 : borderBoxSize.blockSize) != null ? _c : entry.contentRect.height
+  };
+}
+function isSameSize(current, width, height) {
+  return Math.round(current.width) === Math.round(width) && Math.round(current.height) === Math.round(height);
+}
+function useAutoPosition(props, activatorEl) {
   const { getScrollTop, getScrollLeft } = useApplication();
   const activator = ref({
     top: 0,
@@ -37,16 +67,30 @@ function useAutoPosition(props) {
   const contentRef = shallowRef();
   const offsetX = computed(() => Number(props.offsetX) || 0);
   const offsetY = computed(() => Number(props.offsetY) || 0);
-  const isXDirection = computed(() => props.left || props.right);
-  const shouldReverse = computed(() => props.strategy === "reverse");
+  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;
-  const cancelScheduledUpdate = () => {
-    if (!IN_BROWSER || !frameId) return;
-    cancelAnimationFrame(frameId);
-    frameId = 0;
+  let updateInFlight = false;
+  const getActivatorElement = () => {
+    return resolveElement(unref(activatorEl));
+  };
+  const getContentElement = () => {
+    return resolveElement(unref(contentRef));
   };
-  const setActivatorSizes = (activatorEl) => {
-    const rect = getRect(activatorEl);
+  const setActivatorDimensions = () => {
+    const element = getActivatorElement();
+    if (!element) {
+      activator.value = {
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0
+      };
+      return;
+    }
+    const rect = getElementRect(element);
     activator.value = {
       top: rect.top + getScrollTop(),
       left: rect.left + getScrollLeft(),
@@ -54,143 +98,169 @@ function useAutoPosition(props) {
       height: rect.height
     };
   };
-  const setContentSizes = (contentEl) => {
-    var _a;
-    const element = (_a = contentEl == null ? void 0 : contentEl.$el) != null ? _a : contentEl;
+  const setContentDimensions = () => {
+    const element = getContentElement();
+    if (!element) {
+      return false;
+    }
     content.value.width = element.offsetWidth;
     content.value.height = element.offsetHeight;
+    return true;
   };
-  const calcToBottom = () => {
-    const { top, height } = unref(activator);
-    return top + height + unref(offsetY);
-  };
-  const calcToTop = () => {
-    const { top } = unref(activator);
-    const { height } = unref(content);
-    return top - height - unref(offsetY);
-  };
-  const calcToLeft = () => {
-    const { left } = unref(activator);
-    const { width } = unref(content);
-    return left - width - unref(offsetX);
-  };
-  const calcToRight = () => {
-    const { left, width } = unref(activator);
-    return left + width + unref(offsetX);
-  };
-  const calcY = () => {
-    return props.positionY + unref(offsetY);
-  };
-  const calcX = () => {
-    return props.positionX + unref(offsetX);
+  const measure = () => {
+    setActivatorDimensions();
+    return setContentDimensions();
   };
-  const getScreenXBounds = (contentLeft) => {
+  const getViewportXBounds = (left) => {
     const scrollLeft = getScrollLeft();
-    const { width: cWidth } = unref(content);
+    const width = unref(content).width;
     const leftEdge = scrollLeft + SCREEN_EDGE_OFFSET;
     const rightEdge = scrollLeft + window.innerWidth - SCREEN_EDGE_OFFSET;
     return {
       leftEdge,
       rightEdge,
-      isBeyondLeft: contentLeft < leftEdge,
-      isBeyondRight: contentLeft + cWidth > rightEdge
+      isBeyondLeft: left < leftEdge,
+      isBeyondRight: left + width > rightEdge
     };
   };
-  const getScreenYBounds = (contentTop) => {
+  const getViewportYBounds = (top) => {
     const scrollTop = getScrollTop();
-    const { height: cHeight } = unref(content);
+    const height = unref(content).height;
     const topEdge = scrollTop + SCREEN_EDGE_OFFSET;
     const bottomEdge = scrollTop + window.innerHeight - SCREEN_EDGE_OFFSET;
     return {
       topEdge,
       bottomEdge,
-      isBeyondTop: contentTop < topEdge,
-      isBeyondBottom: contentTop + cHeight > bottomEdge
+      isBeyondTop: top < topEdge,
+      isBeyondBottom: top + height > bottomEdge
     };
   };
-  const alignToActivatorTop = () => {
-    const { top } = unref(activator);
-    return top + unref(offsetY);
-  };
-  const alignToActivatorLeft = () => {
-    const { left } = unref(activator);
-    return left + unref(offsetX);
-  };
-  const getContentTop = () => {
-    if (props.positionY) return calcY();
-    if (props.top) return calcToTop();
-    if (props.bottom) return calcToBottom();
-    return alignToActivatorTop();
-  };
-  const getContentLeft = () => {
-    if (props.positionX) return calcX();
-    if (props.left) return calcToLeft();
-    if (props.right) return calcToRight();
-    return alignToActivatorLeft();
-  };
-  const calcYBounce = () => {
-    const { height: cHeight } = unref(content);
-    const cTop = getContentTop();
+  const getBaseTop = (s = unref(side), c = unref(cross)) => {
+    if (isDef(props.positionY)) {
+      return props.positionY + 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 = (s = unref(side), c = unref(cross)) => {
+    if (isDef(props.positionX)) {
+      return props.positionX + 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 = () => {
+    const s = unref(side);
+    if (s && !unref(isHorizontalSide)) {
+      return getBaseTop(REVERSE_SIDE[s]);
+    }
+    return getBaseTop();
+  };
+  const getReversedLeft = () => {
+    const s = unref(side);
+    if (s && unref(isHorizontalSide)) {
+      return getBaseLeft(REVERSE_SIDE[s]);
+    }
+    return getBaseLeft();
+  };
+  const clampTopToViewport = (top) => {
+    const { height } = unref(content);
     const {
       topEdge,
       bottomEdge,
       isBeyondTop,
       isBeyondBottom
-    } = getScreenYBounds(cTop);
+    } = getViewportYBounds(top);
     if (!isBeyondTop && !isBeyondBottom) {
-      return cTop;
-    }
-    if (unref(isXDirection) || !unref(shouldReverse)) {
-      return isBeyondBottom ? bottomEdge - cHeight : topEdge;
-    }
-    if (isBeyondTop && props.top) {
-      return calcToBottom();
-    }
-    if (isBeyondBottom && props.bottom) {
-      return calcToTop();
+      return top;
     }
+    return isBeyondBottom ? bottomEdge - height : topEdge;
   };
-  const calcXBounce = () => {
-    const { width: cWidth } = unref(content);
-    const cLeft = getContentLeft();
+  const clampLeftToViewport = (left) => {
+    const { width } = unref(content);
     const {
       leftEdge,
       rightEdge,
       isBeyondLeft,
       isBeyondRight
-    } = getScreenXBounds(cLeft);
+    } = getViewportXBounds(left);
     if (!isBeyondLeft && !isBeyondRight) {
-      return cLeft;
+      return left;
     }
-    if (!unref(isXDirection) || !unref(shouldReverse)) {
-      return isBeyondRight ? rightEdge - cWidth : leftEdge;
+    return isBeyondRight ? rightEdge - width : leftEdge;
+  };
+  const resolveTop = () => {
+    const top = getBaseTop();
+    const { isBeyondTop, isBeyondBottom } = getViewportYBounds(top);
+    if (!isBeyondTop && !isBeyondBottom) {
+      return top;
     }
-    if (isBeyondLeft && props.left) {
-      return calcToRight();
+    if (!unref(isReverseStrategy) || unref(isHorizontalSide)) {
+      return clampTopToViewport(top);
+    }
+    return getReversedTop();
+  };
+  const resolveLeft = () => {
+    const left = getBaseLeft();
+    const { isBeyondLeft, isBeyondRight } = getViewportXBounds(left);
+    if (!isBeyondLeft && !isBeyondRight) {
+      return left;
     }
-    if (isBeyondRight && props.right) {
-      return calcToLeft();
+    if (!unref(isReverseStrategy) || !unref(isHorizontalSide)) {
+      return clampLeftToViewport(left);
     }
+    return getReversedLeft();
   };
   const applyPosition = () => {
-    content.value.top = calcYBounce();
-    content.value.left = calcXBounce();
+    if (!IN_BROWSER) {
+      return;
+    }
+    content.value.top = resolveTop();
+    content.value.left = resolveLeft();
+  };
+  const cancelScheduledUpdate = () => {
+    if (!IN_BROWSER || !frameId) {
+      return;
+    }
+    cancelAnimationFrame(frameId);
+    frameId = 0;
+  };
+  const updateNow = () => {
+    if (!measure()) {
+      return;
+    }
+    applyPosition();
   };
   const scheduleUpdate = () => {
-    if (!IN_BROWSER || frameId) return;
+    if (!IN_BROWSER || frameId) {
+      return;
+    }
     frameId = requestAnimationFrame(() => {
       frameId = 0;
-      applyPosition();
+      updateNow();
     });
   };
-  const update = async (activatorEl) => {
-    if (unref(activatorEl)) {
-      setActivatorSizes(activatorEl);
-      await nextTick();
+  const update = async () => {
+    updateInFlight = true;
+    cancelScheduledUpdate();
+    setActivatorDimensions();
+    await nextTick();
+    if (!setContentDimensions()) {
+      updateInFlight = false;
+      return;
     }
-    setContentSizes(contentRef.value);
     await nextTick();
-    scheduleUpdate();
+    applyPosition();
+    updateInFlight = false;
   };
   if (IN_BROWSER) {
     const resizeObserver = new ResizeObserver((entries) => {
@@ -198,22 +268,32 @@ function useAutoPosition(props) {
       if (!entry) {
         return;
       }
-      const { blockSize, inlineSize } = entry.borderBoxSize[0];
-      if (!blockSize || !inlineSize) {
-        return;
-      }
+      const { width, height } = getObservedSize(entry);
       const current = unref(content);
-      if (current.width === inlineSize && current.height === blockSize) {
+      if (isSameSize(current, width, height)) {
         return;
       }
-      current.width = inlineSize;
-      current.height = blockSize;
-      scheduleUpdate();
+      current.width = width;
+      current.height = height;
+      if (!updateInFlight) {
+        scheduleUpdate();
+      }
     });
-    watch(contentRef, (val, oldValue) => {
-      var _a, _b;
-      const nextEl = (_a = val == null ? void 0 : val.$el) != null ? _a : val;
-      const prevEl = (_b = oldValue == null ? void 0 : oldValue.$el) != null ? _b : oldValue;
+    watch(
+      () => resolveElement(unref(activatorEl)),
+      (newEl, oldEl) => {
+        if (oldEl) {
+          resizeObserver.unobserve(oldEl);
+        }
+        if (newEl) {
+          resizeObserver.observe(newEl);
+        }
+      },
+      { immediate: true }
+    );
+    watch(contentRef, (newEl, oldEl) => {
+      const prevEl = resolveElement(oldEl);
+      const nextEl = resolveElement(newEl);
       if (prevEl) {
         resizeObserver.unobserve(prevEl);
       }
@@ -221,9 +301,17 @@ function useAutoPosition(props) {
         resizeObserver.observe(nextEl);
       }
     });
-    if (isDef(props.positionX) || isDef(props.positionY)) {
-      watch(() => [props.positionX, props.positionY], scheduleUpdate);
-    }
+    watch(
+      () => [
+        props.positionX,
+        props.positionY,
+        props.align,
+        props.offsetX,
+        props.offsetY,
+        props.strategy
+      ],
+      scheduleUpdate
+    );
     onBeforeUnmount(() => {
       cancelScheduledUpdate();
       resizeObserver.disconnect();