@vueland/ui 0.0.1

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

@@ -0,0 +1,240 @@
+import { ref, shallowRef, computed, unref, watch, onBeforeUnmount, nextTick } from 'vue';
+import { useApplication } from './use-application.js';
+import { isDef } from '../helpers/index.js';
+import { IN_BROWSER } from '../utils/globals.js';
+
+const SCREEN_EDGE_OFFSET = 20;
+const getRect = (el) => {
+  var _a;
+  const element = (_a = el == null ? void 0 : el.$el) != null ? _a : el;
+  const {
+    top,
+    left,
+    width,
+    height
+  } = element.getBoundingClientRect();
+  return {
+    top,
+    left,
+    width,
+    height
+  };
+};
+function useAutoPosition(props) {
+  const { getScrollTop, getScrollLeft } = useApplication();
+  const activator = ref({
+    top: 0,
+    left: 0,
+    width: 0,
+    height: 0
+  });
+  const content = ref({
+    top: 0,
+    left: 0,
+    width: 0,
+    height: 0
+  });
+  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");
+  let frameId = 0;
+  const cancelScheduledUpdate = () => {
+    if (!IN_BROWSER || !frameId) return;
+    cancelAnimationFrame(frameId);
+    frameId = 0;
+  };
+  const setActivatorSizes = (activatorEl) => {
+    const rect = getRect(activatorEl);
+    activator.value = {
+      top: rect.top + getScrollTop(),
+      left: rect.left + getScrollLeft(),
+      width: rect.width,
+      height: rect.height
+    };
+  };
+  const setContentSizes = (contentEl) => {
+    var _a;
+    const element = (_a = contentEl == null ? void 0 : contentEl.$el) != null ? _a : contentEl;
+    content.value.width = element.offsetWidth;
+    content.value.height = element.offsetHeight;
+  };
+  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 getScreenXBounds = (contentLeft) => {
+    const scrollLeft = getScrollLeft();
+    const { width: cWidth } = unref(content);
+    const leftEdge = scrollLeft + SCREEN_EDGE_OFFSET;
+    const rightEdge = scrollLeft + window.innerWidth - SCREEN_EDGE_OFFSET;
+    return {
+      leftEdge,
+      rightEdge,
+      isBeyondLeft: contentLeft < leftEdge,
+      isBeyondRight: contentLeft + cWidth > rightEdge
+    };
+  };
+  const getScreenYBounds = (contentTop) => {
+    const scrollTop = getScrollTop();
+    const { height: cHeight } = unref(content);
+    const topEdge = scrollTop + SCREEN_EDGE_OFFSET;
+    const bottomEdge = scrollTop + window.innerHeight - SCREEN_EDGE_OFFSET;
+    return {
+      topEdge,
+      bottomEdge,
+      isBeyondTop: contentTop < topEdge,
+      isBeyondBottom: contentTop + cHeight > 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 {
+      topEdge,
+      bottomEdge,
+      isBeyondTop,
+      isBeyondBottom
+    } = getScreenYBounds(cTop);
+    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();
+    }
+  };
+  const calcXBounce = () => {
+    const { width: cWidth } = unref(content);
+    const cLeft = getContentLeft();
+    const {
+      leftEdge,
+      rightEdge,
+      isBeyondLeft,
+      isBeyondRight
+    } = getScreenXBounds(cLeft);
+    if (!isBeyondLeft && !isBeyondRight) {
+      return cLeft;
+    }
+    if (!unref(isXDirection) || !unref(shouldReverse)) {
+      return isBeyondRight ? rightEdge - cWidth : leftEdge;
+    }
+    if (isBeyondLeft && props.left) {
+      return calcToRight();
+    }
+    if (isBeyondRight && props.right) {
+      return calcToLeft();
+    }
+  };
+  const applyPosition = () => {
+    content.value.top = calcYBounce();
+    content.value.left = calcXBounce();
+  };
+  const scheduleUpdate = () => {
+    if (!IN_BROWSER || frameId) return;
+    frameId = requestAnimationFrame(() => {
+      frameId = 0;
+      applyPosition();
+    });
+  };
+  const update = async (activatorEl) => {
+    if (unref(activatorEl)) {
+      setActivatorSizes(activatorEl);
+      await nextTick();
+    }
+    setContentSizes(contentRef.value);
+    await nextTick();
+    scheduleUpdate();
+  };
+  if (IN_BROWSER) {
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) {
+        return;
+      }
+      const { blockSize, inlineSize } = entry.borderBoxSize[0];
+      if (!blockSize || !inlineSize) {
+        return;
+      }
+      const current = unref(content);
+      if (current.width === inlineSize && current.height === blockSize) {
+        return;
+      }
+      current.width = inlineSize;
+      current.height = blockSize;
+      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;
+      if (prevEl) {
+        resizeObserver.unobserve(prevEl);
+      }
+      if (nextEl) {
+        resizeObserver.observe(nextEl);
+      }
+    });
+    if (isDef(props.positionX) || isDef(props.positionY)) {
+      watch(() => [props.positionX, props.positionY], scheduleUpdate);
+    }
+    onBeforeUnmount(() => {
+      cancelScheduledUpdate();
+      resizeObserver.disconnect();
+    });
+  }
+  return {
+    activator,
+    content,
+    contentRef,
+    update
+  };
+}
+
+export { useAutoPosition };

package/dist/composables/use-autocomplete.js

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

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

@@ -0,0 +1,19 @@
+import { computed, unref } from 'vue';
+import { usePresets } from './use-presets.js';
+
+function useButtonPresets({ props }) {
+  const presets = usePresets(props);
+  return computed(() => {
+    var _a, _b, _c, _d;
+    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 : []
+      ] : []
+    };
+  });
+}
+
+export { useButtonPresets };

package/dist/composables/use-core.js

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

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

@@ -0,0 +1,16 @@
+import { isDef } from '../helpers/index.js';
+
+function useDelayedActions(props) {
+  const openDelay = (fn) => {
+    setTimeout(fn, isDef(props.openDelay) ? +props.openDelay : 0);
+  };
+  const closeDelay = (fn) => {
+    setTimeout(fn, isDef(props.closeDelay) ? +props.closeDelay : 0);
+  };
+  return {
+    openDelay,
+    closeDelay
+  };
+}
+
+export { useDelayedActions };

package/dist/composables/use-dialogs-stack.js

@@ -0,0 +1,43 @@
+import { inject, shallowRef, computed, defineAsyncComponent } from 'vue';
+import { isDef } from '../helpers/index.js';
+import { $DIALOGS_STACK_API_KEY } from '../constants/provide-keys.js';
+
+let counter = 0;
+function createDialogsStack() {
+  const stack = shallowRef([]);
+  const current = computed(() => stack.value[stack.value.length - 1]);
+  const openDialog = async (options) => {
+    const id = ++counter;
+    stack.value = [
+      ...stack.value,
+      {
+        id,
+        component: defineAsyncComponent(options.component),
+        props: options.props
+      }
+    ];
+    return id;
+  };
+  const closeDialog = (id) => {
+    if (!isDef(id)) {
+      stack.value = stack.value.slice(0, -1);
+      return;
+    }
+    stack.value = stack.value.filter((item) => item.id !== id);
+  };
+  const closeAll = () => {
+    stack.value = [];
+  };
+  return {
+    stack,
+    current,
+    openDialog,
+    closeDialog,
+    closeAll
+  };
+}
+function useDialogsStack() {
+  return inject($DIALOGS_STACK_API_KEY);
+}
+
+export { createDialogsStack, useDialogsStack };

package/dist/composables/use-display.js

@@ -0,0 +1,73 @@
+import { reactive, shallowRef, watchEffect, unref, toRefs } from 'vue';
+import { IN_BROWSER } from '../utils/globals.js';
+
+const breakpoints = {
+  xs: 0,
+  sm: 600,
+  md: 960,
+  lg: 1280,
+  xl: 1920,
+  xxl: 2560
+};
+function useDisplay() {
+  const state = reactive({
+    xxl: false,
+    xl: false,
+    lg: false,
+    md: false,
+    sm: false,
+    xs: false,
+    xlAndLess: false,
+    lgAndLess: false,
+    mdAndLess: false,
+    smAndLess: false,
+    xlAndUp: false,
+    lgAndUp: false,
+    mdAndUp: false,
+    smAndUp: false
+  });
+  const width = shallowRef(0);
+  const height = shallowRef(0);
+  const getClientWidth = (isSSR = false) => {
+    return IN_BROWSER && !isSSR ? window.innerWidth : 0;
+  };
+  const getClientHeight = (isSSR = false) => {
+    return IN_BROWSER && !isSSR ? window.innerHeight : 0;
+  };
+  const update = () => {
+    width.value = getClientWidth();
+    height.value = getClientHeight();
+  };
+  const createDisplay = (ssr = false) => {
+    width.value = getClientWidth(ssr);
+    height.value = getClientHeight(ssr);
+    watchEffect(() => {
+      const { xxl, xl, lg, md, sm, xs } = breakpoints;
+      const screen = unref(width);
+      state.xs = screen < sm;
+      state.sm = screen < md && screen > xs;
+      state.md = screen < lg && screen > sm;
+      state.lg = screen < xl && screen > md;
+      state.xl = screen < xxl && screen > lg;
+      state.xxl = screen >= xxl;
+      state.xlAndUp = !(state.xs || state.sm || state.md || state.lg);
+      state.lgAndUp = !(state.xs || state.sm || state.md);
+      state.mdAndUp = !(state.xs || state.sm);
+      state.smAndUp = !state.xs;
+      state.xlAndLess = screen <= xl && screen > lg;
+      state.lgAndLess = screen <= lg && screen > md;
+      state.mdAndLess = screen <= md && screen > sm;
+      state.smAndLess = screen <= sm && screen > xs;
+    });
+    return {
+      ...toRefs(state),
+      update
+    };
+  };
+  return {
+    state,
+    createDisplay
+  };
+}
+
+export { breakpoints, useDisplay };

package/dist/composables/use-effect.js

@@ -0,0 +1,30 @@
+import { shallowRef, ReactiveEffect } from 'vue';
+
+const useEffect = (fn, scheduler) => {
+  let oldVal;
+  const state = shallowRef();
+  const effect = new ReactiveEffect(() => {
+    state.value = fn();
+    return state.value;
+  });
+  oldVal = effect.run();
+  if (scheduler) {
+    effect.scheduler = () => {
+      effect.run();
+      scheduler(state.value, oldVal);
+      oldVal = state.value;
+    };
+  }
+  return {
+    run: () => effect.run(),
+    stop: () => effect.stop(),
+    get value() {
+      return state.value;
+    },
+    get __v_isRef() {
+      return true;
+    }
+  };
+};
+
+export { useEffect };

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

@@ -0,0 +1,43 @@
+import { computed } from 'vue';
+
+const FIELD_ATTRS = /* @__PURE__ */ new Set([
+  "type",
+  "name",
+  "id",
+  "placeholder",
+  "autocomplete",
+  "autofocus",
+  "inputmode",
+  "pattern",
+  "min",
+  "max",
+  "step",
+  "minlength",
+  "maxlength",
+  "readonly",
+  "disabled",
+  "required",
+  "tabindex",
+  "enterkeyhint"
+]);
+function useFieldAttrs({ props, attrs, errors, uid }) {
+  return computed(() => {
+    const map = Object.entries(attrs).reduce((acc, [k, v]) => {
+      if (!props[k] && FIELD_ATTRS.has(k) || k.startsWith("aria-") || k.startsWith("data-")) {
+        acc[k] = v;
+      }
+      return acc;
+    }, {});
+    return {
+      "aria-labelledby": `${uid}-label`,
+      ...!props.noDetails ? { "aria-describedby": `${uid}-details` } : {},
+      ...errors.hasError ? { "aria-invalid": errors.hasError } : {},
+      ...errors.errorMessage ? { "aria-errormessage": errors.errorMessage } : {},
+      ...props.readonly ? { "aria-readonly": props.readonly } : {},
+      ...props.disabled ? { "aria-disabled": props.disabled } : {},
+      ...map
+    };
+  });
+}
+
+export { useFieldAttrs };

package/dist/composables/use-form.js

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

package/dist/composables/use-icon.js

@@ -0,0 +1,54 @@
+import { computed } from 'vue';
+import { useCore } from './use-core.js';
+
+const DEFAULT_VIEW_BOX = "0 0 16 16";
+function useIcon(props) {
+  var _a;
+  const { icons } = (_a = useCore()) != null ? _a : {};
+  return computed(() => {
+    var _a2, _b, _c;
+    if (props.component) {
+      return {
+        kind: "component",
+        component: props.component,
+        body: "",
+        viewBox: props.viewBox || DEFAULT_VIEW_BOX,
+        href: "",
+        found: true
+      };
+    }
+    if (props.body) {
+      return {
+        kind: "svg",
+        component: null,
+        body: props.body,
+        viewBox: props.viewBox || DEFAULT_VIEW_BOX,
+        href: "",
+        found: true
+      };
+    }
+    if (props.source === "sprite") {
+      const symbolId = `${(_a2 = props.spritePrefix) != null ? _a2 : ""}${(_b = props.name) != null ? _b : ""}`;
+      const href = props.spritePath ? `${props.spritePath}#${symbolId}` : `#${symbolId}`;
+      return {
+        kind: "svg",
+        component: null,
+        body: "",
+        viewBox: props.viewBox || DEFAULT_VIEW_BOX,
+        href,
+        found: !!props.name
+      };
+    }
+    const icon = (_c = icons == null ? void 0 : icons.aliases) == null ? void 0 : _c[props.name];
+    return {
+      kind: "svg",
+      component: null,
+      body: (icon == null ? void 0 : icon.body) || "",
+      viewBox: (icon == null ? void 0 : icon.viewBox) || props.viewBox || DEFAULT_VIEW_BOX,
+      href: "",
+      found: !!icon
+    };
+  });
+}
+
+export { useIcon };

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

@@ -0,0 +1,30 @@
+import { computed, unref } from 'vue';
+import { usePresets } from './use-presets.js';
+
+function useInputPresets({ props, errors }) {
+  const presets = usePresets(props);
+  return computed(() => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    return {
+      root: props.preset ? [
+        ...!errors.hasError ? (_b = (_a = unref(presets)) == null ? void 0 : _a.root) != null ? _b : [] : [],
+        ...errors.hasError ? (_e = (_d = (_c = unref(presets)) == null ? void 0 : _c.error) == null ? void 0 : _d.root) != null ? _e : [] : []
+      ] : [],
+      label: props.preset ? [
+        ...props.disabled ? (_h = (_g = (_f = unref(presets)) == null ? void 0 : _f.disabled) == null ? void 0 : _g.label) != null ? _h : [] : [],
+        ...!errors.hasError && !props.disabled ? (_j = (_i = unref(presets)) == null ? void 0 : _i.label) != null ? _j : [] : [],
+        ...errors.hasError && !props.disabled ? (_m = (_l = (_k = unref(presets)) == null ? void 0 : _k.error) == null ? void 0 : _l.label) != null ? _m : [] : []
+      ] : [],
+      field: props.preset ? [
+        ...(_o = (_n = unref(presets)) == null ? void 0 : _n.field) != null ? _o : [],
+        ...errors.hasError ? (_r = (_q = (_p = unref(presets)) == null ? void 0 : _p.error) == null ? void 0 : _q.field) != null ? _r : [] : []
+      ] : [],
+      details: props.preset ? [
+        ...(_t = (_s = unref(presets)) == null ? void 0 : _s.details) != null ? _t : [],
+        ...errors.hasError ? (_w = (_v = (_u = unref(presets)) == null ? void 0 : _u.error) == null ? void 0 : _v.details) != null ? _w : [] : []
+      ] : []
+    };
+  });
+}
+
+export { useInputPresets };

package/dist/composables/use-input-state.js

@@ -0,0 +1,41 @@
+import { getCurrentInstance, shallowReactive, watch } from 'vue';
+import { isNotEmpty } from '../helpers/index.js';
+
+function useInputState(props = {}) {
+  var _a;
+  const instance = getCurrentInstance();
+  const state = shallowReactive({
+    focused: (_a = props.focused) != null ? _a : false,
+    isDirty: false,
+    hasValue: false
+  });
+  function dirty() {
+    state.isDirty = true;
+  }
+  function onFocus() {
+    if (props.readonly || props.disabled) return;
+    state.focused = true;
+    instance == null ? void 0 : instance.emit("focus", state.focused);
+    if (!state.isDirty) {
+      dirty();
+    }
+  }
+  function onBlur() {
+    state.focused = false;
+    instance == null ? void 0 : instance.emit("blur", state.focused);
+  }
+  function onInput() {
+  }
+  watch(() => props.modelValue, (value) => {
+    const isArray = Array.isArray(value);
+    state.hasValue = isArray ? !!value.length : isNotEmpty(value);
+  }, { immediate: true });
+  return {
+    state,
+    onFocus,
+    onBlur,
+    onInput
+  };
+}
+
+export { useInputState };

package/dist/composables/use-input-value.js

@@ -0,0 +1,18 @@
+import { computed } from 'vue';
+
+function useInputValue(props) {
+  var _a;
+  const { extKey } = (_a = props.options) != null ? _a : {};
+  return computed(() => {
+    var _a2;
+    if (props.multiple) {
+      return props.modelValue.map((it) => {
+        var _a3;
+        return (_a3 = it[extKey]) != null ? _a3 : it;
+      }).join(", ");
+    }
+    return props.modelValue ? `${(_a2 = props.modelValue[extKey]) != null ? _a2 : props.modelValue}` : "";
+  });
+}
+
+export { useInputValue };

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

@@ -0,0 +1,17 @@
+import { computed, unref } from 'vue';
+import { usePresets } from './use-presets.js';
+
+function useMenuPresets({ props }) {
+  const presets = usePresets(props);
+  return computed(() => {
+    var _a, _b, _c, _d, _e;
+    return {
+      root: props.preset ? [
+        ...(_b = (_a = unref(presets)) == null ? void 0 : _a.root) != null ? _b : [],
+        ...props.modelValue ? (_e = (_d = (_c = unref(presets)) == null ? void 0 : _c.opened) == null ? void 0 : _d.root) != null ? _e : [] : []
+      ] : []
+    };
+  });
+}
+
+export { useMenuPresets };