@vueland/ui 0.0.1 → 0.0.3

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-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-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,11 +1,17 @@
 import { isDef } from '../helpers/index.js';
 
 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,

package/dist/composables/use-display.js

@@ -1,16 +1,17 @@
-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';
 
 const breakpoints = {
-  xs: 0,
-  sm: 600,
-  md: 960,
-  lg: 1280,
-  xl: 1920,
-  xxl: 2560
+  [BreakpointLabels.XS]: 0,
+  [BreakpointLabels.SM]: 600,
+  [BreakpointLabels.MD]: 960,
+  [BreakpointLabels.LG]: 1280,
+  [BreakpointLabels.XL]: 1920,
+  [BreakpointLabels.XXL]: 2560
 };
 function useDisplay() {
-  const state = reactive({
+  const state = shallowReactive({
     xxl: false,
     xl: false,
     lg: false,
@@ -28,21 +29,28 @@ function useDisplay() {
   });
   const width = shallowRef(0);
   const height = shallowRef(0);
-  const getClientWidth = (isSSR = false) => {
-    return IN_BROWSER && !isSSR ? window.innerWidth : 0;
+  const getClientWidth = () => {
+    return IN_BROWSER ? window.innerWidth : 0;
   };
-  const getClientHeight = (isSSR = false) => {
-    return IN_BROWSER && !isSSR ? window.innerHeight : 0;
+  const getClientHeight = () => {
+    return IN_BROWSER ? window.innerHeight : 0;
   };
   const update = () => {
     width.value = getClientWidth();
     height.value = getClientHeight();
   };
-  const createDisplay = (ssr = false) => {
-    width.value = getClientWidth(ssr);
-    height.value = getClientHeight(ssr);
+  const createDisplay = (points = breakpoints) => {
+    width.value = getClientWidth();
+    height.value = getClientHeight();
     watchEffect(() => {
-      const { xxl, xl, lg, md, sm, xs } = breakpoints;
+      const {
+        xxl,
+        xl,
+        lg,
+        md,
+        sm,
+        xs
+      } = points;
       const screen = unref(width);
       state.xs = screen < sm;
       state.sm = screen < md && screen > xs;
@@ -60,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-field-presets.js

@@ -0,0 +1,82 @@
+import { computed, unref } from 'vue';
+import { usePresets } from './use-presets.js';
+import { getPresetIf } from '../helpers/preset.js';
+
+const EMPTY_FIELD_PRESETS = {
+  root: [],
+  input: [],
+  label: []
+};
+function mergePresetClasses(...args) {
+  return args.flatMap((it) => it != null ? it : []);
+}
+function resolveInteraction(preset, zone, isDisabled, isReadonly, hasError, isFocused, isFilled) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  const base = preset == null ? void 0 : preset[zone];
+  if (isDisabled) {
+    const s = preset == null ? void 0 : preset.disabled;
+    if (isFocused && ((_a = s == null ? void 0 : s.focused) == null ? void 0 : _a[zone])) return s.focused[zone];
+    if (isFilled && ((_b = s == null ? void 0 : s.filled) == null ? void 0 : _b[zone])) return s.filled[zone];
+    return (_c = s == null ? void 0 : s[zone]) != null ? _c : [];
+  }
+  if (isReadonly) {
+    const s = preset == null ? void 0 : preset.readonly;
+    if (isFocused && ((_d = s == null ? void 0 : s.focused) == null ? void 0 : _d[zone])) return s.focused[zone];
+    if (isFilled && ((_e = s == null ? void 0 : s.filled) == null ? void 0 : _e[zone])) return s.filled[zone];
+    return (_f = s == null ? void 0 : s[zone]) != null ? _f : [];
+  }
+  if (hasError) {
+    const s = preset == null ? void 0 : preset.error;
+    if (isFocused && ((_g = s == null ? void 0 : s.focused) == null ? void 0 : _g[zone])) return s.focused[zone];
+    if (isFilled && ((_h = s == null ? void 0 : s.filled) == null ? void 0 : _h[zone])) return s.filled[zone];
+    return (_i = s == null ? void 0 : s[zone]) != null ? _i : [];
+  }
+  if (isFocused) {
+    return (_k = (_j = preset == null ? void 0 : preset.focused) == null ? void 0 : _j[zone]) != null ? _k : [];
+  }
+  if (isFilled) {
+    return (_m = (_l = preset == null ? void 0 : preset.filled) == null ? void 0 : _l[zone]) != null ? _m : [];
+  }
+  return base != null ? base : [];
+}
+function useFieldPresets({
+  props,
+  slots,
+  hasValue
+}) {
+  const presets = usePresets(props);
+  return computed(() => {
+    var _a, _b, _c, _d, _e, _f;
+    if (!props.preset) {
+      return EMPTY_FIELD_PRESETS;
+    }
+    const preset = unref(presets);
+    const isFilled = unref(hasValue);
+    const isPrepended = !!slots.prepend;
+    const isAppended = !!slots.append;
+    const isFocused = !!props.focused;
+    const isReadonly = !!props.readonly;
+    const isDisabled = !!props.disabled;
+    const hasError = !!props.error;
+    const resolve = (zone) => resolveInteraction(preset, zone, isDisabled, isReadonly, hasError, isFocused, isFilled);
+    return {
+      root: mergePresetClasses(
+        resolve("root"),
+        getPresetIf(isPrepended, (_a = preset == null ? void 0 : preset.prepended) == null ? void 0 : _a.root),
+        getPresetIf(isAppended, (_b = preset == null ? void 0 : preset.appended) == null ? void 0 : _b.root)
+      ),
+      input: mergePresetClasses(
+        resolve("input"),
+        getPresetIf(isPrepended, (_c = preset == null ? void 0 : preset.prepended) == null ? void 0 : _c.input),
+        getPresetIf(isAppended, (_d = preset == null ? void 0 : preset.appended) == null ? void 0 : _d.input)
+      ),
+      label: mergePresetClasses(
+        resolve("label"),
+        getPresetIf(isPrepended, (_e = preset == null ? void 0 : preset.prepended) == null ? void 0 : _e.label),
+        getPresetIf(isAppended, (_f = preset == null ? void 0 : preset.appended) == null ? void 0 : _f.label)
+      )
+    };
+  });
+}
+
+export { useFieldPresets };

package/dist/composables/use-icon.js

@@ -2,52 +2,124 @@ import { computed } from 'vue';
 import { useCore } from './use-core.js';
 
 const DEFAULT_VIEW_BOX = "0 0 16 16";
+const emptyIcon = (viewBox = DEFAULT_VIEW_BOX) => ({
+  kind: "svg",
+  component: null,
+  body: "",
+  viewBox,
+  href: "",
+  text: "",
+  className: "",
+  found: false
+});
+function normalizeIcon(icon, fallbackViewBox = DEFAULT_VIEW_BOX) {
+  if (!icon) {
+    return emptyIcon(fallbackViewBox);
+  }
+  if (icon.kind === "component") {
+    return {
+      kind: "component",
+      component: icon.component,
+      body: "",
+      viewBox: fallbackViewBox,
+      href: "",
+      text: "",
+      className: "",
+      found: true
+    };
+  }
+  if (icon.kind === "font") {
+    return {
+      kind: "font",
+      component: null,
+      body: "",
+      viewBox: fallbackViewBox,
+      href: "",
+      text: icon.text,
+      className: icon.className,
+      found: true
+    };
+  }
+  if (icon.kind === "sprite") {
+    return {
+      kind: "sprite",
+      component: null,
+      body: "",
+      viewBox: icon.viewBox || fallbackViewBox,
+      href: icon.href,
+      text: "",
+      className: "",
+      found: true
+    };
+  }
+  return {
+    kind: "svg",
+    component: null,
+    body: icon.body,
+    viewBox: icon.viewBox || fallbackViewBox,
+    href: "",
+    text: "",
+    className: "",
+    size: icon.size,
+    found: true
+  };
+}
 function useIcon(props) {
   var _a;
   const { icons } = (_a = useCore()) != null ? _a : {};
   return computed(() => {
-    var _a2, _b, _c;
+    var _a2, _b, _c, _d;
+    const fallbackViewBox = props.viewBox || DEFAULT_VIEW_BOX;
     if (props.component) {
-      return {
-        kind: "component",
-        component: props.component,
-        body: "",
-        viewBox: props.viewBox || DEFAULT_VIEW_BOX,
-        href: "",
-        found: true
-      };
+      return normalizeIcon(
+        {
+          kind: "component",
+          component: props.component
+        },
+        fallbackViewBox
+      );
     }
     if (props.body) {
-      return {
-        kind: "svg",
-        component: null,
-        body: props.body,
-        viewBox: props.viewBox || DEFAULT_VIEW_BOX,
-        href: "",
-        found: true
-      };
+      return normalizeIcon(
+        {
+          kind: "svg",
+          body: props.body,
+          viewBox: props.viewBox
+        },
+        fallbackViewBox
+      );
     }
     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
-      };
+      return normalizeIcon(
+        {
+          kind: "sprite",
+          href,
+          viewBox: props.viewBox
+        },
+        fallbackViewBox
+      );
     }
-    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
-    };
+    if (!props.name) {
+      return emptyIcon(fallbackViewBox);
+    }
+    if (props.source && ((_c = icons == null ? void 0 : icons.sets) == null ? void 0 : _c[props.source])) {
+      const resolver = icons.sets[props.source];
+      if (resolver) {
+        return normalizeIcon(resolver(props.name, props), fallbackViewBox);
+      }
+    }
+    const icon = (_d = icons == null ? void 0 : icons.aliases) == null ? void 0 : _d[props.name];
+    return normalizeIcon(
+      icon ? {
+        kind: "svg",
+        body: icon.body,
+        viewBox: icon.viewBox,
+        size: icon.size
+      } : null,
+      fallbackViewBox
+    );
   });
 }
 

package/dist/composables/use-id.js

@@ -0,0 +1,9 @@
+import { isDef, unique } from '../helpers/index.js';
+
+function useId(id, { prefix, postfix } = {}) {
+  if (isDef(id)) return `${id}`;
+  id = unique(6);
+  return prefix ? `${prefix}-${id}` : postfix ? `${id}-${postfix}` : `${id}`;
+}
+
+export { useId };

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

@@ -1,28 +1,97 @@
 import { computed, unref } from 'vue';
+import { useCore } from './use-core.js';
 import { usePresets } from './use-presets.js';
 
-function useInputPresets({ props, errors }) {
+const EMPTY_INPUT_PRESETS = {
+  root: [],
+  field: void 0,
+  details: []
+};
+function mergeClasses(...args) {
+  return args.flatMap((it) => it != null ? it : []);
+}
+function resolveZone(preset, zone, primaryState) {
+  var _a, _b;
+  if (!primaryState) return (_a = preset == null ? void 0 : preset[zone]) != null ? _a : [];
+  const stateZone = (_b = preset == null ? void 0 : preset[primaryState]) == null ? void 0 : _b[zone];
+  if (stateZone !== void 0) return stateZone;
+  return [];
+}
+const FIELD_PRESET_SIMPLE_STATES = ["focused", "filled", "prepended", "appended"];
+const FIELD_PRESET_COMPOUND_STATES = ["error", "disabled", "readonly"];
+function pickFieldZone(s) {
+  return s ? {
+    label: s.label,
+    input: s.input
+  } : void 0;
+}
+function buildFieldPreset(preset) {
+  const simple = Object.fromEntries(
+    FIELD_PRESET_SIMPLE_STATES.map((key) => [key, pickFieldZone(preset[key])])
+  );
+  const compound = Object.fromEntries(
+    FIELD_PRESET_COMPOUND_STATES.map((key) => {
+      const s = preset[key];
+      if (!s) return [key, void 0];
+      return [key, {
+        ...pickFieldZone(s),
+        focused: pickFieldZone(s.focused),
+        filled: pickFieldZone(s.filled)
+      }];
+    })
+  );
+  return {
+    label: preset.label,
+    input: preset.input,
+    ...simple,
+    ...compound
+  };
+}
+function setNestedValue(obj, dotPath, value) {
+  const parts = dotPath.split(".");
+  let current = obj;
+  for (let i = 0; i < parts.length - 1; i++) {
+    if (!current[parts[i]]) current[parts[i]] = {};
+    current = current[parts[i]];
+  }
+  current[parts[parts.length - 1]] = value;
+}
+function useInputPresets({
+  props,
+  errors,
+  state
+}) {
+  const core = useCore();
   const presets = usePresets(props);
+  if (props.preset && core) {
+    const rawPreset = props.preset.split(".").reduce((acc, key) => acc == null ? void 0 : acc[key], core.presets);
+    if (rawPreset) {
+      setNestedValue(core.presets, `__field.${props.preset}`, buildFieldPreset(rawPreset));
+    }
+  }
   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;
+    var _a, _b, _c, _d, _e, _f;
+    if (!props.preset) return EMPTY_INPUT_PRESETS;
+    const preset = unref(presets);
+    const focused = state.focused;
+    const hasError = errors.hasError;
+    const hasErrorMessage = !!errors.errorMessage;
+    const disabled = !!props.disabled;
+    const readonly = !!props.readonly;
+    const isActive = !disabled && !readonly;
+    const isFocused = focused && isActive;
+    const primaryState = disabled ? "disabled" : readonly ? "readonly" : hasError ? "error" : isFocused ? "focused" : void 0;
     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 : [] : []
-      ] : []
+      root: mergeClasses(
+        resolveZone(preset, "root", primaryState),
+        hasError && isFocused ? (_b = (_a = preset == null ? void 0 : preset.error) == null ? void 0 : _a.focused) == null ? void 0 : _b.root : void 0,
+        disabled && isFocused ? (_d = (_c = preset == null ? void 0 : preset.disabled) == null ? void 0 : _c.focused) == null ? void 0 : _d.root : void 0,
+        readonly && isFocused ? (_f = (_e = preset == null ? void 0 : preset.readonly) == null ? void 0 : _e.focused) == null ? void 0 : _f.root : void 0
+      ),
+      field: `__field.${props.preset}`,
+      details: mergeClasses(
+        resolveZone(preset, "details", hasErrorMessage ? "error" : void 0)
+      )
     };
   });
 }

package/dist/composables/use-keyboard.js

@@ -0,0 +1,52 @@
+const KEY_ALIASES = {
+  Enter: "Enter",
+  Escape: "Escape",
+  Esc: "Escape",
+  Backspace: "Backspace",
+  ArrowUp: "ArrowUp",
+  Up: "ArrowUp",
+  ArrowDown: "ArrowDown",
+  Down: "ArrowDown",
+  ArrowLeft: "ArrowLeft",
+  Left: "ArrowLeft",
+  ArrowRight: "ArrowRight",
+  Right: "ArrowRight",
+  Tab: "Tab",
+  Home: "Home",
+  End: "End",
+  " ": "Space",
+  Space: "Space",
+  Spacebar: "Space"
+};
+function normalizeKey(event) {
+  var _a;
+  return (_a = KEY_ALIASES[event.key]) != null ? _a : KEY_ALIASES[event.code];
+}
+function shouldApply(value, key) {
+  if (value === true) {
+    return true;
+  }
+  if (Array.isArray(value)) {
+    return value.includes(key);
+  }
+  return false;
+}
+function useKeyboard(handlers, options = {}) {
+  const onKeydown = (event) => {
+    const key = normalizeKey(event);
+    if (!key || !handlers[key]) {
+      return;
+    }
+    const handler = handlers[key];
+    if (shouldApply(options.prevent, key)) {
+      event.preventDefault();
+    }
+    if (shouldApply(options.stop, key)) {
+      event.stopPropagation();
+    }
+    handler(event);
+  };
+  return { onKeydown };
+}
+
+export { useKeyboard };

package/dist/composables/use-list.js

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

package/dist/composables/use-menu.js

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

package/dist/composables/use-normalized-items.js

@@ -0,0 +1,22 @@
+import { computed } from 'vue';
+
+function getByPath(item, path) {
+  if (!path) return item;
+  return path.split(".").reduce((acc, key) => acc == null ? void 0 : acc[key], item);
+}
+function useNormalizedItems(props) {
+  return computed(() => {
+    return props.items.map((item, index) => {
+      const title = props.titleKey ? getByPath(item, props.titleKey) : item;
+      const value = props.valueKey ? getByPath(item, props.valueKey) : item;
+      return {
+        raw: item,
+        title,
+        value,
+        key: `${title != null ? title : index}`
+      };
+    });
+  });
+}
+
+export { useNormalizedItems };

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

@@ -1,5 +1,8 @@
 const BASE_Z_INDEX = 2e3;
 const stack = [];
+function clearOverlayStack() {
+  stack.length = 0;
+}
 function useOverlayStack() {
   let zIndex = -1;
   const register = () => {
@@ -20,4 +23,4 @@ function useOverlayStack() {
   };
 }
 
-export { useOverlayStack };
+export { clearOverlayStack, useOverlayStack };

package/dist/composables/use-presets.js

@@ -1,10 +1,10 @@
-import { useCore } from './use-core.js';
 import { computed } from 'vue';
+import { useCore } from './use-core.js';
 
 function usePresets(props) {
+  const core = useCore();
   return computed(() => {
     if (!props.preset) return void 0;
-    const core = useCore();
     return props.preset.split(".").reduce((acc, it) => acc[it], core.presets);
   });
 }