@vueland/ui 0.0.1 → 0.0.2

package/dist/composables/index.js

@@ -1,22 +1,25 @@
-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 { makeActivatorProps, useActivator } from './use-activator.js';
+export { useAppScroll } from './use-app-scroll.js';
 export { useApplication } from './use-application.js';
-export { useAutoPosition } from './use-auto-position.js';
-export { useToggle } from './use-toggle.js';
-export { useInputValue } from './use-input-value.js';
+export { makeAutoPositionProps, useAutoPosition } from './use-auto-position.js';
+export { useAutocomplete } from './use-autocomplete.js';
+export { useButtonPresets } from './use-button-presets.js';
 export { useCore } from './use-core.js';
-export { useOverlayStack } from './use-overlay-stack.js';
+export { makeDelayProps, 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 { useKeyboard } from './use-keyboard.js';
+export { useMenu } from './use-menu.js';
 export { useMenuPresets } from './use-menu-presets.js';
-export { useButtonPresets } from './use-button-presets.js';
-export { useAppScroll } from './use-app-scroll.js';
+export { useNormalizedItems } from './use-normalized-items.js';
+export { clearOverlayStack, useOverlayStack } from './use-overlay-stack.js';
+export { makePresetProps, 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,47 +1,49 @@
-import { shallowRef, computed, markRaw, unref } from 'vue';
+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();
+  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
   };
 }
 
-export { useActivator };
+export { makeActivatorProps, useActivator };

package/dist/composables/use-app-scroll.js

@@ -3,15 +3,11 @@ import { convertToUnit } from '../utils/convert-to-unit.js';
 import { IN_BROWSER } from '../utils/globals.js';
 
 function useAppScroll() {
-  const state = shallowReactive({
-    blockScroll: false
-  });
+  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;

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

@@ -1,12 +1,32 @@
 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';
+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 getRect = (el) => {
+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 +39,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 +68,27 @@ 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 isHorizontalDirection = computed(() => props.left || props.right);
+  const isReverseStrategy = computed(() => props.strategy === "reverse");
   let frameId = 0;
-  const cancelScheduledUpdate = () => {
-    if (!IN_BROWSER || !frameId) return;
-    cancelAnimationFrame(frameId);
-    frameId = 0;
+  const getActivatorElement = () => {
+    return resolveElement(unref(activatorEl));
   };
-  const setActivatorSizes = (activatorEl) => {
-    const rect = getRect(activatorEl);
+  const getContentElement = () => {
+    return resolveElement(unref(contentRef));
+  };
+  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 +96,170 @@ 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 measure = () => {
+    setActivatorDimensions();
+    return setContentDimensions();
   };
-  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 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 = () => {
+    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 getBaseLeft = () => {
+    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 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);
+    }
+    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);
+    }
+    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(isHorizontalDirection)) {
+      return clampTopToViewport(top);
     }
-    if (isBeyondRight && props.right) {
-      return calcToLeft();
+    return getReversedTop();
+  };
+  const resolveLeft = () => {
+    const left = getBaseLeft();
+    const { isBeyondLeft, isBeyondRight } = getViewportXBounds(left);
+    if (!isBeyondLeft && !isBeyondRight) {
+      return left;
     }
+    if (!unref(isReverseStrategy) || !unref(isHorizontalDirection)) {
+      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 () => {
+    setActivatorDimensions();
+    await nextTick();
+    if (!setContentDimensions()) {
+      return;
     }
-    setContentSizes(contentRef.value);
     await nextTick();
-    scheduleUpdate();
+    applyPosition();
   };
   if (IN_BROWSER) {
     const resizeObserver = new ResizeObserver((entries) => {
@@ -198,22 +267,30 @@ 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;
+      current.width = width;
+      current.height = height;
       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 +298,20 @@ 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.top,
+        props.bottom,
+        props.left,
+        props.right,
+        props.offsetX,
+        props.offsetY,
+        props.strategy
+      ],
+      scheduleUpdate
+    );
     onBeforeUnmount(() => {
       cancelScheduledUpdate();
       resizeObserver.disconnect();
@@ -237,4 +325,4 @@ function useAutoPosition(props) {
   };
 }
 
-export { useAutoPosition };
+export { makeAutoPositionProps, useAutoPosition };

package/dist/composables/use-autocomplete.js

@@ -1,33 +1,35 @@
-import { shallowRef, computed, unref, watchEffect } from 'vue';
-import { useInputValue } from './use-input-value.js';
+import { shallowRef, computed, unref } from 'vue';
+import { useNormalizedItems } from './use-normalized-items.js';
+import { useSelectedChips } from './use-selected-chips.js';
 
 function useAutocomplete(props) {
-  var _a;
-  const value = useInputValue(props);
-  const input = shallowRef();
-  const { extKey } = (_a = props.options) != null ? _a : {};
+  const normalizedItems = useNormalizedItems(props);
+  const {
+    chips,
+    hasValue,
+    select
+  } = useSelectedChips(props);
+  const inputValue = shallowRef();
   const normalizedInput = computed(() => {
-    var _a2, _b;
-    return (_b = (_a2 = unref(input)) == null ? void 0 : _a2.trim().toLowerCase()) != null ? _b : "";
+    var _a, _b;
+    return (_b = (_a = unref(inputValue)) == null ? void 0 : _a.trim().toLowerCase()) != null ? _b : "";
   });
-  const isEqual = computed(() => unref(normalizedInput) === unref(value).toLowerCase());
+  const isEqual = computed(() => unref(chips).includes(unref(normalizedInput)));
   const searchItems = computed(() => {
     if (unref(isEqual) || !unref(normalizedInput)) {
-      return props.items;
+      return unref(normalizedItems);
     }
-    return props.items.filter((it) => {
-      const val = extKey ? it[extKey] : it;
-      return `${val}`.toLowerCase().startsWith(unref(normalizedInput));
+    return unref(normalizedItems).filter((it) => {
+      return `${it.title}`.toLowerCase().startsWith(unref(normalizedInput));
     });
   });
-  function rollbackValue() {
-    input.value = unref(value);
-  }
-  watchEffect(() => rollbackValue());
   return {
-    input,
+    normalizedItems,
+    chips,
     searchItems,
-    rollbackValue
+    hasValue,
+    inputValue,
+    select
   };
 }
 

package/dist/composables/use-button-presets.js

@@ -4,14 +4,10 @@ import { usePresets } from './use-presets.js';
 function useButtonPresets({ props }) {
   const presets = usePresets(props);
   return computed(() => {
-    var _a, _b, _c, _d;
+    var _a, _b;
     return {
-      root: props.preset ? [
-        ...(_b = (_a = unref(presets)) == null ? void 0 : _a.root) != null ? _b : []
-      ] : [],
-      label: props.preset ? [
-        ...(_d = (_c = unref(presets)) == null ? void 0 : _c.label) != null ? _d : []
-      ] : []
+      root: props.preset ? [...(_b = (_a = unref(presets)) == null ? void 0 : _a.root) != null ? _b : []] : [],
+      label: props.preset ? [] : []
     };
   });
 }

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

@@ -1,5 +1,10 @@
 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) {
   const openDelay = (fn) => {
     setTimeout(fn, isDef(props.openDelay) ? +props.openDelay : 0);
@@ -13,4 +18,4 @@ function useDelayedActions(props) {
   };
 }
 
-export { useDelayedActions };
+export { makeDelayProps, useDelayedActions };