@evance/evance-ui 1.0.3 → 1.0.5

package/dist/esm/defaults-D1V8n9TU.mjs

@@ -0,0 +1,134 @@
+/*! Evance UI v1.0.4 | MIT License */
+import { ref, computed, unref, provide, inject, shallowRef, watchEffect } from "vue";
+import { g as getCurrentComponent } from "./components-_DLQ8luq.mjs";
+import { m as mergeDeep } from "./helpers-BBJ8aYIT.mjs";
+import { b as toKebabCase } from "./strings-5kc7hTZQ.mjs";
+function injectSelf(key, component = getCurrentComponent("injectSelf")) {
+  const { provides } = component;
+  if (provides && key in provides) {
+    return provides[key];
+  }
+  return void 0;
+}
+const DefaultsSymbol = Symbol.for("ev:defaults");
+function createDefaults(options) {
+  return ref(options);
+}
+function injectDefaults() {
+  const defaults = inject(DefaultsSymbol);
+  if (!defaults) {
+    throw new Error("Evance UI: Could not find defaults instance");
+  }
+  return defaults;
+}
+function provideDefaults(defaults, options) {
+  const injectedDefaults = injectDefaults();
+  const providedDefaults = ref(defaults);
+  const newDefaults = computed(() => {
+    const disabled = unref(options == null ? void 0 : options.disabled);
+    if (disabled) {
+      return injectedDefaults.value;
+    }
+    const scoped = unref(options == null ? void 0 : options.scoped);
+    const reset = unref(options == null ? void 0 : options.reset);
+    const root = unref(options == null ? void 0 : options.root);
+    if (providedDefaults.value == null && !(scoped || reset || root)) {
+      return injectedDefaults.value;
+    }
+    let properties = mergeDeep(providedDefaults.value, {
+      previous: injectedDefaults.value
+    });
+    if (scoped) {
+      return properties;
+    }
+    if (reset || root) {
+      const len = Number(reset || Infinity);
+      for (let i = 0; i <= len; i++) {
+        if (!properties || !("previous" in properties)) {
+          break;
+        }
+        properties = properties.previous;
+      }
+      if (properties && typeof root === "string" && root in properties) {
+        properties = mergeDeep(
+          mergeDeep(properties, { previous: properties }),
+          properties[root]
+        );
+      }
+      return properties;
+    }
+    return properties.previous ? mergeDeep(properties.previous, properties) : properties;
+  });
+  provide(DefaultsSymbol, newDefaults);
+  return newDefaults;
+}
+function propIsDefined(vnode, prop) {
+  var _a, _b;
+  return typeof ((_a = vnode.props) == null ? void 0 : _a[prop]) !== "undefined" || typeof ((_b = vnode.props) == null ? void 0 : _b[toKebabCase(prop)]) !== "undefined";
+}
+function internalUseDefaults(props = {}, name, defaults = injectDefaults()) {
+  const component = getCurrentComponent("useDefaults");
+  name = name ?? component.type.name ?? component.type.__name;
+  if (!name) {
+    throw new Error("Evance UI: Could not determine component name");
+  }
+  const componentDefaults = computed(
+    () => {
+      var _a;
+      return (_a = defaults.value) == null ? void 0 : _a[props._as ?? name];
+    }
+  );
+  const internalProps = new Proxy(props, {
+    get(target, prop) {
+      var _a, _b, _c, _d;
+      const propValue = Reflect.get(target, prop);
+      if (prop === "class" || prop === "style") {
+        return [(_a = componentDefaults.value) == null ? void 0 : _a[prop], propValue].filter(
+          (v) => v != null
+        );
+      } else if (typeof prop === "string" && !propIsDefined(component.vnode, prop)) {
+        return ((_b = componentDefaults.value) == null ? void 0 : _b[prop]) ?? ((_d = (_c = defaults.value) == null ? void 0 : _c.global) == null ? void 0 : _d[prop]) ?? propValue;
+      }
+      return propValue;
+    }
+  });
+  const subcomponentDefaults = shallowRef();
+  watchEffect(() => {
+    if (componentDefaults.value) {
+      const subComponents = Object.entries(
+        componentDefaults.value
+      ).filter(([key]) => key.startsWith(key[0].toUpperCase()));
+      subcomponentDefaults.value = subComponents.length ? Object.fromEntries(subComponents) : void 0;
+    } else {
+      subcomponentDefaults.value = void 0;
+    }
+  });
+  function provideSubDefaults() {
+    const injected = injectSelf(DefaultsSymbol, component);
+    provide(
+      DefaultsSymbol,
+      computed(() => {
+        return subcomponentDefaults.value ? mergeDeep(
+          (injected == null ? void 0 : injected.value) ?? {},
+          subcomponentDefaults.value
+        ) : injected == null ? void 0 : injected.value;
+      })
+    );
+  }
+  return { props: internalProps, provideSubDefaults };
+}
+function useDefaults(props = {}, name) {
+  const { props: _props, provideSubDefaults } = internalUseDefaults(
+    props,
+    name
+  );
+  provideSubDefaults();
+  return _props;
+}
+export {
+  DefaultsSymbol as D,
+  createDefaults as c,
+  provideDefaults as p,
+  useDefaults as u
+};
+//# sourceMappingURL=defaults-D1V8n9TU.mjs.map

package/dist/esm/defaults-D1V8n9TU.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults-D1V8n9TU.mjs","sources":["../../src/util/injectSelf.ts","../../src/composables/defaults.ts"],"sourcesContent":["// Utilities\n\n// Types\nimport type { ComponentInternalInstance, InjectionKey } from \"vue\";\nimport { getCurrentComponent } from \"@/util/components.ts\";\n\nexport function injectSelf<T>(\n    key: InjectionKey<T> | string,\n    vm?: ComponentInternalInstance,\n): T | undefined;\nexport function injectSelf(\n    key: InjectionKey<any> | string,\n    component = getCurrentComponent(\"injectSelf\"),\n) {\n    const { provides } = component as { provides?: any };\n\n    if (provides && (key as string | symbol) in provides) {\n        // TS doesn't allow symbol as index type\n        return provides[key as string];\n    }\n    return undefined;\n}\n","import {\n    computed,\n    ComputedRef,\n    inject,\n    InjectionKey,\n    MaybeRef,\n    provide,\n    ref,\n    Ref,\n    shallowRef,\n    unref,\n    VNode,\n    watchEffect,\n} from \"vue\";\nimport {\n    getCurrentComponent,\n    injectSelf,\n    mergeDeep,\n    toKebabCase,\n} from \"@/util\";\n\nexport type DefaultsInstance =\n    | undefined\n    | {\n          [key: string]: undefined | Record<string, unknown>;\n          global?: Record<string, unknown>;\n      };\n\nexport type DefaultsOptions = Partial<DefaultsInstance>;\n\nexport const DefaultsSymbol: InjectionKey<Ref<DefaultsInstance>> =\n    Symbol.for(\"ev:defaults\");\n\n/**\n * # createDefaults\n * @param options\n */\nexport function createDefaults(\n    options?: DefaultsInstance,\n): Ref<DefaultsInstance> {\n    return ref(options);\n}\n\n/**\n * # injectDefaults\n */\nexport function injectDefaults() {\n    const defaults = inject(DefaultsSymbol);\n    if (!defaults) {\n        throw new Error(\"Evance UI: Could not find defaults instance\");\n    }\n    return defaults;\n}\n\n/**\n * # provideDefaults\n * @param defaults\n * @param options\n */\nexport function provideDefaults(\n    defaults?: MaybeRef<DefaultsInstance | undefined>,\n    options?: {\n        disabled?: MaybeRef<boolean | undefined>;\n        reset?: MaybeRef<number | string | undefined>;\n        root?: MaybeRef<boolean | string | undefined>;\n        scoped?: MaybeRef<boolean | undefined>;\n    },\n) {\n    const injectedDefaults = injectDefaults();\n    const providedDefaults = ref(defaults);\n\n    const newDefaults = computed(() => {\n        const disabled = unref(options?.disabled);\n        if (disabled) {\n            return injectedDefaults.value;\n        }\n\n        const scoped = unref(options?.scoped);\n        const reset = unref(options?.reset);\n        const root = unref(options?.root);\n\n        if (providedDefaults.value == null && !(scoped || reset || root)) {\n            return injectedDefaults.value;\n        }\n\n        let properties = mergeDeep(providedDefaults.value, {\n            previous: injectedDefaults.value,\n        });\n\n        if (scoped) {\n            return properties;\n        }\n\n        if (reset || root) {\n            const len = Number(reset || Infinity);\n\n            for (let i = 0; i <= len; i++) {\n                if (!properties || !(\"previous\" in properties)) {\n                    break;\n                }\n                properties = properties.previous;\n            }\n\n            if (properties && typeof root === \"string\" && root in properties) {\n                properties = mergeDeep(\n                    mergeDeep(properties, { previous: properties }),\n                    properties[root],\n                );\n            }\n\n            return properties;\n        }\n\n        return properties.previous\n            ? mergeDeep(properties.previous, properties)\n            : properties;\n    }) as ComputedRef<DefaultsInstance>;\n\n    provide(DefaultsSymbol, newDefaults);\n    return newDefaults;\n}\n\n/**\n * # propIsDefined\n * @param vnode\n * @param prop\n */\nfunction propIsDefined(vnode: VNode, prop: string) {\n    return (\n        typeof vnode.props?.[prop] !== \"undefined\" ||\n        typeof vnode.props?.[toKebabCase(prop)] !== \"undefined\"\n    );\n}\n\n/**\n * # internalUseDefaults\n * @param props\n * @param name\n * @param defaults\n */\nexport function internalUseDefaults(\n    props: Record<string, any> = {},\n    name?: string,\n    defaults = injectDefaults(),\n) {\n    const component = getCurrentComponent(\"useDefaults\");\n\n    name = name ?? component.type.name ?? component.type.__name;\n    if (!name) {\n        throw new Error(\"Evance UI: Could not determine component name\");\n    }\n\n    const componentDefaults = computed(\n        () => defaults.value?.[props._as ?? name],\n    );\n    const internalProps = new Proxy(props, {\n        get(target, prop) {\n            const propValue = Reflect.get(target, prop);\n            if (prop === \"class\" || prop === \"style\") {\n                return [componentDefaults.value?.[prop], propValue].filter(\n                    (v) => v != null,\n                );\n            } else if (\n                typeof prop === \"string\" &&\n                !propIsDefined(component.vnode, prop)\n            ) {\n                return (\n                    componentDefaults.value?.[prop] ??\n                    defaults.value?.global?.[prop] ??\n                    propValue\n                );\n            }\n            return propValue;\n        },\n    });\n\n    const subcomponentDefaults = shallowRef();\n    watchEffect(() => {\n        if (componentDefaults.value) {\n            const subComponents = Object.entries(\n                componentDefaults.value,\n            ).filter(([key]) => key.startsWith(key[0].toUpperCase()));\n            subcomponentDefaults.value = subComponents.length\n                ? Object.fromEntries(subComponents)\n                : undefined;\n        } else {\n            subcomponentDefaults.value = undefined;\n        }\n    });\n\n    function provideSubDefaults() {\n        const injected = injectSelf(DefaultsSymbol, component);\n        provide(\n            DefaultsSymbol,\n            computed(() => {\n                return subcomponentDefaults.value\n                    ? mergeDeep(\n                          injected?.value ?? {},\n                          subcomponentDefaults.value,\n                      )\n                    : injected?.value;\n            }),\n        );\n    }\n\n    return { props: internalProps, provideSubDefaults };\n}\n\n/**\n * # useDefaults\n *\n * @param props\n * @param name\n */\nexport function useDefaults<T extends Record<string, any>>(\n    props: T,\n    name?: string,\n): T;\nexport function useDefaults(\n    props?: undefined,\n    name?: string,\n): Record<string, any>;\nexport function useDefaults(props: Record<string, any> = {}, name?: string) {\n    const { props: _props, provideSubDefaults } = internalUseDefaults(\n        props,\n        name,\n    );\n    provideSubDefaults();\n    return _props;\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/dimensions-BR2pwRcF.mjs

@@ -0,0 +1,30 @@
+/*! Evance UI v1.0.4 | MIT License */
+import { computed } from "vue";
+import { t as toWebUnit } from "./units-BfGYqMlE.mjs";
+import { p as propsFactory } from "./props-DwRGNAyc.mjs";
+const makeDimensionsProps = propsFactory(
+  {
+    height: [Number, String],
+    maxHeight: [Number, String],
+    maxWidth: [Number, String],
+    minHeight: [Number, String],
+    minWidth: [Number, String],
+    width: [Number, String]
+  },
+  "dimensions"
+);
+function useDimensions(props) {
+  return computed(() => ({
+    height: toWebUnit(props.height),
+    maxHeight: toWebUnit(props.maxHeight),
+    maxWidth: toWebUnit(props.maxWidth),
+    minHeight: toWebUnit(props.minHeight),
+    minWidth: toWebUnit(props.minWidth),
+    width: toWebUnit(props.width)
+  }));
+}
+export {
+  makeDimensionsProps as m,
+  useDimensions as u
+};
+//# sourceMappingURL=dimensions-BR2pwRcF.mjs.map

package/dist/esm/dimensions-BR2pwRcF.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dimensions-BR2pwRcF.mjs","sources":["../../src/composables/dimensions.ts"],"sourcesContent":["import { propsFactory, toWebUnit } from \"../util\";\nimport { computed } from \"vue\";\n\n/**\n * # Dimensions Props\n */\nexport interface DimensionsProps {\n    height?: number | string;\n    maxHeight?: number | string;\n    maxWidth?: number | string;\n    minHeight?: number | string;\n    minWidth?: number | string;\n    width?: number | string;\n}\n\n/**\n * # Make Dimensions Props\n */\nexport const makeDimensionsProps = propsFactory(\n    {\n        height: [Number, String],\n        maxHeight: [Number, String],\n        maxWidth: [Number, String],\n        minHeight: [Number, String],\n        minWidth: [Number, String],\n        width: [Number, String],\n    },\n    \"dimensions\",\n);\n\n/**\n * # Use Dimensions\n * @param props\n */\nexport function useDimensions(props: DimensionsProps) {\n    return computed(() => ({\n        height: toWebUnit(props.height),\n        maxHeight: toWebUnit(props.maxHeight),\n        maxWidth: toWebUnit(props.maxWidth),\n        minHeight: toWebUnit(props.minHeight),\n        minWidth: toWebUnit(props.minWidth),\n        width: toWebUnit(props.width),\n    }));\n}\n"],"names":[],"mappings":";;;;AAkBO,MAAM,sBAAsB;AAAA,EAC/B;AAAA,IACI,QAAQ,CAAC,QAAQ,MAAM;AAAA,IACvB,WAAW,CAAC,QAAQ,MAAM;AAAA,IAC1B,UAAU,CAAC,QAAQ,MAAM;AAAA,IACzB,WAAW,CAAC,QAAQ,MAAM;AAAA,IAC1B,UAAU,CAAC,QAAQ,MAAM;AAAA,IACzB,OAAO,CAAC,QAAQ,MAAM;AAAA,EAC1B;AAAA,EACA;AACJ;AAMO,SAAS,cAAc,OAAwB;AAClD,SAAO,SAAS,OAAO;AAAA,IACnB,QAAQ,UAAU,MAAM,MAAM;AAAA,IAC9B,WAAW,UAAU,MAAM,SAAS;AAAA,IACpC,UAAU,UAAU,MAAM,QAAQ;AAAA,IAClC,WAAW,UAAU,MAAM,SAAS;AAAA,IACpC,UAAU,UAAU,MAAM,QAAQ;AAAA,IAClC,OAAO,UAAU,MAAM,KAAK;AAAA,EAC9B,EAAA;AACN;"}

package/dist/esm/display-CZAkNF0O.mjs

@@ -0,0 +1,271 @@
+/*! Evance UI v1.0.4 | MIT License */
+import { inject, isRef, computed, shallowRef, reactive, watchEffect, toRefs } from "vue";
+import { i as isObject, a as isString, b as isBoolean } from "./is-functions-C4Ohethd.mjs";
+import { t as toCamelCase, a as trimEnd, b as toKebabCase, s as spaceSeparatedValues } from "./strings-5kc7hTZQ.mjs";
+import { c as consoleWarn } from "./console-CHk2oFjL.mjs";
+import { t as toWebUnit } from "./units-BfGYqMlE.mjs";
+import { B as Browser, m as mergeDeep } from "./helpers-BBJ8aYIT.mjs";
+const breakpoints = ["sm", "md", "lg", "xl", "xxl"];
+const parseDisplayOptions = (options = defaultDisplayOptions) => {
+  return mergeDeep(defaultDisplayOptions, options);
+};
+function getClientWidth(ssr) {
+  return Browser.hasWindow && !ssr ? window.innerWidth : isObject(ssr) && ssr.clientWidth || 0;
+}
+function getClientHeight(ssr) {
+  return Browser.hasWindow && !ssr ? window.innerHeight : isObject(ssr) && ssr.clientHeight || 0;
+}
+function getPlatform(ssr) {
+  const userAgent = Browser.hasWindow && !ssr ? window.navigator.userAgent : "ssr";
+  function isUserAgent(regexp) {
+    return Boolean(userAgent.match(regexp));
+  }
+  return {
+    android: isUserAgent(/android/i),
+    ios: isUserAgent(/iphone|ipad|ipod/i),
+    cordova: isUserAgent(/cordova/i),
+    electron: isUserAgent(/electron/i),
+    chrome: isUserAgent(/chrome/i),
+    edge: isUserAgent(/edge/i),
+    firefox: isUserAgent(/firefox/i),
+    opera: isUserAgent(/opera/i),
+    win: isUserAgent(/win/i),
+    mac: isUserAgent(/mac/i),
+    linux: isUserAgent(/linux/i),
+    touch: Browser.supportsTouch,
+    ssr: userAgent === "ssr"
+  };
+}
+const DisplaySymbol = Symbol.for("ev:display");
+const defaultDisplayOptions = {
+  mobileBreakpoint: "lg",
+  thresholds: {
+    xs: 0,
+    sm: 600,
+    md: 960,
+    lg: 1200,
+    xl: 1600,
+    xxl: 2400
+  }
+};
+function createDisplay(options, ssr) {
+  const { thresholds, mobileBreakpoint } = parseDisplayOptions(options);
+  const height = shallowRef(getClientHeight(ssr));
+  const platform = shallowRef(getPlatform(ssr));
+  const state = reactive({});
+  const width = shallowRef(getClientWidth(ssr));
+  function updateSize() {
+    height.value = getClientHeight();
+    width.value = getClientWidth();
+  }
+  function update() {
+    updateSize();
+    platform.value = getPlatform();
+  }
+  watchEffect(() => {
+    const xs = width.value < thresholds.sm;
+    const sm = width.value < thresholds.md && !xs;
+    const md = width.value < thresholds.lg && !(sm || xs);
+    const lg = width.value < thresholds.xl && !(md || sm || xs);
+    const xl = width.value < thresholds.xxl && !(lg || md || sm || xs);
+    const xxl = width.value >= thresholds.xxl;
+    const name = xs ? "xs" : sm ? "sm" : md ? "md" : lg ? "lg" : xl ? "xl" : "xxl";
+    const breakpointValue = typeof mobileBreakpoint === "number" ? mobileBreakpoint : thresholds[mobileBreakpoint];
+    const mobile = width.value < breakpointValue;
+    state.xs = xs;
+    state.sm = sm;
+    state.md = md;
+    state.lg = lg;
+    state.xl = xl;
+    state.xxl = xxl;
+    state.xsUp = true;
+    state.smUp = !xs;
+    state.mdUp = !(xs || sm);
+    state.lgUp = !(xs || sm || md);
+    state.xlUp = !(xs || sm || md || lg);
+    state.xxlUp = !(xs || sm || md || lg || xl);
+    state.smDown = !(md || lg || xl || xxl);
+    state.mdDown = !(lg || xl || xxl);
+    state.lgDown = !(xl || xxl);
+    state.xlDown = !xxl;
+    state.name = name;
+    state.height = height.value;
+    state.width = width.value;
+    state.mobile = mobile;
+    state.mobileBreakpoint = mobileBreakpoint;
+    state.platform = platform.value;
+    state.thresholds = thresholds;
+  });
+  if (Browser.hasWindow) {
+    window.addEventListener("resize", updateSize, { passive: true });
+  }
+  return {
+    ...toRefs(state),
+    update,
+    ssr: !!ssr
+  };
+}
+function useDisplay() {
+  const display = inject(DisplaySymbol);
+  if (!display) {
+    throw new Error(
+      "Evance UI: Could not find `ev:display` injection symbol"
+    );
+  }
+  return display;
+}
+const displayRules = [
+  "xxl",
+  "xl",
+  "lg",
+  "md",
+  "sm",
+  "xs",
+  "xxlOnly",
+  "xlOnly",
+  "lgOnly",
+  "mdOnly",
+  "smOnly",
+  "xsOnly",
+  "xxlUp",
+  "xlUp",
+  "lgUp",
+  "mdUp",
+  "smUp",
+  "xsUp",
+  "smDown",
+  "mdDown",
+  "lgDown",
+  "xlDown"
+];
+const displayRulesKebab = [
+  "xxl-only",
+  "xl-only",
+  "lg-only",
+  "md-only",
+  "sm-only",
+  "xs-only",
+  "xxl-up",
+  "xl-up",
+  "lg-up",
+  "md-up",
+  "sm-up",
+  "xs-up",
+  "sm-down",
+  "md-down",
+  "lg-down",
+  "xl-down"
+];
+function calculateDisplayRuleValue(rules) {
+  const display = useDisplay();
+  if (!isObject(rules)) {
+    return toWebUnit(rules);
+  }
+  for (const ruleKey of displayRules) {
+    const displayKey = toDisplayStateKey(ruleKey);
+    const displayState = display[displayKey];
+    if (isRef(displayState) && displayState.value && !!rules[ruleKey]) {
+      return toWebUnit(rules[ruleKey]);
+    }
+  }
+  return void 0;
+}
+function toDisplayStateKey(displayRule) {
+  if (toDisplayStateKey.cache.has(displayRule)) {
+    return toDisplayStateKey.cache.get(displayRule);
+  }
+  let value = toCamelCase(displayRule);
+  if (isDisplayBreakpoint(value)) {
+    value = `${value}Up`;
+  }
+  value = trimEnd(value, "Only");
+  toKebabCase.cache.set(displayRule, value);
+  return value;
+}
+toDisplayStateKey.cache = /* @__PURE__ */ new Map();
+function toDisplayRuleKebab(displayRule) {
+  if (toDisplayRuleKebab.cache.has(displayRule)) {
+    return toDisplayRuleKebab.cache.get(displayRule);
+  }
+  let value = toKebabCase(displayRule);
+  if (isDisplayBreakpoint(value)) {
+    value = `${value}-up`;
+  }
+  toDisplayRuleKebab.cache.set(displayRule, value);
+  return value;
+}
+toDisplayRuleKebab.cache = /* @__PURE__ */ new Map();
+function isDisplayRule(value, acceptKebabs = true) {
+  return displayRules.includes(value) || acceptKebabs && displayRulesKebab.includes(value);
+}
+function isDisplayBreakpoint(value) {
+  return ["xs", ...breakpoints].includes(value);
+}
+function useBreakpointClasses(props, propName, prefix = void 0, useXs = false) {
+  return computed(() => {
+    const prop = props[propName];
+    if (!prop) {
+      return [];
+    }
+    const classes = [];
+    const values = typeof prop !== "object" ? { xs: prop } : prop;
+    for (const [breakpoint, value] of Object.entries(values)) {
+      const className = [];
+      if (prefix) {
+        className.push(prefix);
+      }
+      if (useXs || breakpoint !== "xs") {
+        className.push(breakpoint);
+      }
+      className.push(value);
+      classes.push(className.join("-"));
+    }
+    return classes;
+  });
+}
+function useDisplayRuleClasses(props, propName, prefix = void 0) {
+  return computed(() => {
+    const classes = [];
+    const rules = toDisplayRuleArray(props[propName]);
+    for (const rule of rules) {
+      if (!isString(rule)) {
+        continue;
+      }
+      if (!isDisplayRule(rule)) {
+        consoleWarn(
+          `The display rule '${rule}' is not valid and will be ignored.`
+        );
+        continue;
+      }
+      const suffix = toDisplayRuleKebab(rule);
+      classes.push(`${prefix}-${suffix}`);
+    }
+    return classes;
+  });
+}
+function toDisplayRuleArray(prop) {
+  if (Array.isArray(prop)) {
+    return prop;
+  }
+  if (isString(prop)) {
+    return spaceSeparatedValues(prop);
+  }
+  if (isObject(prop)) {
+    return Object.entries(prop).map(([key, value]) => {
+      if (isBoolean(value)) {
+        return value ? key : void 0;
+      }
+      return isString(value) ? `${key}-${value.toLowerCase()}` : void 0;
+    }).filter((value) => value !== void 0);
+  }
+  return [];
+}
+export {
+  DisplaySymbol as D,
+  useDisplayRuleClasses as a,
+  useBreakpointClasses as b,
+  calculateDisplayRuleValue as c,
+  createDisplay as d,
+  useDisplay as u
+};
+//# sourceMappingURL=display-CZAkNF0O.mjs.map

package/dist/esm/display-CZAkNF0O.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-CZAkNF0O.mjs","sources":["../../src/composables/display.ts"],"sourcesContent":["import {\n    computed,\n    inject,\n    InjectionKey,\n    isRef,\n    reactive,\n    Ref,\n    shallowRef,\n    toRefs,\n    watchEffect,\n} from \"vue\";\nimport {\n    Browser,\n    consoleWarn,\n    isBoolean,\n    isObject,\n    isString,\n    mergeDeep,\n    spaceSeparatedValues,\n    toCamelCase,\n    toKebabCase,\n    toWebUnit,\n    trimEnd,\n} from \"@/util\";\nimport { ResponsiveProp, ResponsivePropObject } from \"@/components\";\n\n/**\n * # Breakpoints\n * Excludes `xs` as this is the smallest size - not really a breakpoint.\n */\nexport const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"xxl\"] as const;\n\nexport type Breakpoint = (typeof breakpoints)[number];\n\nexport type DisplayBreakpoint = \"xs\" | Breakpoint;\n\nexport type DisplayThresholds = {\n    [key in DisplayBreakpoint]: number;\n};\n\nexport interface DisplayOptions {\n    mobileBreakpoint?: number | DisplayBreakpoint;\n    thresholds?: Partial<DisplayThresholds>;\n}\n\nexport interface InternalDisplayOptions {\n    mobileBreakpoint: number | DisplayBreakpoint;\n    thresholds: DisplayThresholds;\n}\n\nexport type SSROptions =\n    | boolean\n    | {\n          clientWidth: number;\n          clientHeight?: number;\n      };\n\nexport interface DisplayPlatform {\n    android: boolean;\n    ios: boolean;\n    cordova: boolean;\n    electron: boolean;\n    chrome: boolean;\n    edge: boolean;\n    firefox: boolean;\n    opera: boolean;\n    win: boolean;\n    mac: boolean;\n    linux: boolean;\n    touch: boolean;\n    ssr: boolean;\n}\n\nexport interface DisplayInstance {\n    xs: Ref<boolean>;\n    sm: Ref<boolean>;\n    md: Ref<boolean>;\n    lg: Ref<boolean>;\n    xl: Ref<boolean>;\n    xxl: Ref<boolean>;\n    xsUp: Ref<boolean>;\n    smUp: Ref<boolean>;\n    mdUp: Ref<boolean>;\n    lgUp: Ref<boolean>;\n    xlUp: Ref<boolean>;\n    xxlUp: Ref<boolean>;\n    smDown: Ref<boolean>;\n    mdDown: Ref<boolean>;\n    lgDown: Ref<boolean>;\n    xlDown: Ref<boolean>;\n    name: Ref<DisplayBreakpoint>;\n    height: Ref<number>;\n    width: Ref<number>;\n    mobile: Ref<boolean>;\n    mobileBreakpoint: Ref<number | DisplayBreakpoint>;\n    platform: Ref<DisplayPlatform>;\n    thresholds: Ref<DisplayThresholds>;\n\n    /** @internal */\n    ssr: boolean;\n\n    update(): void;\n}\n\nconst parseDisplayOptions = (\n    options: DisplayOptions = defaultDisplayOptions,\n) => {\n    return mergeDeep(defaultDisplayOptions, options) as InternalDisplayOptions;\n};\n\nfunction getClientWidth(ssr?: SSROptions) {\n    return Browser.hasWindow && !ssr\n        ? window.innerWidth\n        : (isObject(ssr) && ssr.clientWidth) || 0;\n}\n\nfunction getClientHeight(ssr?: SSROptions) {\n    return Browser.hasWindow && !ssr\n        ? window.innerHeight\n        : (isObject(ssr) && ssr.clientHeight) || 0;\n}\n\nfunction getPlatform(ssr?: SSROptions): DisplayPlatform {\n    const userAgent =\n        Browser.hasWindow && !ssr ? window.navigator.userAgent : \"ssr\";\n\n    function isUserAgent(regexp: RegExp) {\n        return Boolean(userAgent.match(regexp));\n    }\n\n    return {\n        android: isUserAgent(/android/i),\n        ios: isUserAgent(/iphone|ipad|ipod/i),\n        cordova: isUserAgent(/cordova/i),\n        electron: isUserAgent(/electron/i),\n        chrome: isUserAgent(/chrome/i),\n        edge: isUserAgent(/edge/i),\n        firefox: isUserAgent(/firefox/i),\n        opera: isUserAgent(/opera/i),\n        win: isUserAgent(/win/i),\n        mac: isUserAgent(/mac/i),\n        linux: isUserAgent(/linux/i),\n        touch: Browser.supportsTouch,\n        ssr: userAgent === \"ssr\",\n    };\n}\n\nexport const DisplaySymbol: InjectionKey<DisplayInstance> =\n    Symbol.for(\"ev:display\");\n\nexport const defaultDisplayOptions: DisplayOptions = {\n    mobileBreakpoint: \"lg\",\n    thresholds: {\n        xs: 0,\n        sm: 600,\n        md: 960,\n        lg: 1200,\n        xl: 1600,\n        xxl: 2400,\n    },\n};\n\n/**\n * # Create Display\n * @param options\n * @param ssr\n */\nexport function createDisplay(\n    options?: DisplayOptions,\n    ssr?: SSROptions,\n): DisplayInstance {\n    const { thresholds, mobileBreakpoint } = parseDisplayOptions(options);\n\n    const height = shallowRef(getClientHeight(ssr));\n    const platform = shallowRef(getPlatform(ssr));\n    const state = reactive({} as DisplayInstance);\n    const width = shallowRef(getClientWidth(ssr));\n\n    function updateSize() {\n        height.value = getClientHeight();\n        width.value = getClientWidth();\n    }\n\n    function update() {\n        updateSize();\n        platform.value = getPlatform();\n    }\n\n    // eslint-disable-next-line max-statements\n    watchEffect(() => {\n        const xs = width.value < thresholds.sm;\n        const sm = width.value < thresholds.md && !xs;\n        const md = width.value < thresholds.lg && !(sm || xs);\n        const lg = width.value < thresholds.xl && !(md || sm || xs);\n        const xl = width.value < thresholds.xxl && !(lg || md || sm || xs);\n        const xxl = width.value >= thresholds.xxl;\n        const name = xs\n            ? \"xs\"\n            : sm\n              ? \"sm\"\n              : md\n                ? \"md\"\n                : lg\n                  ? \"lg\"\n                  : xl\n                    ? \"xl\"\n                    : \"xxl\";\n        const breakpointValue =\n            typeof mobileBreakpoint === \"number\"\n                ? mobileBreakpoint\n                : thresholds[mobileBreakpoint];\n        const mobile = width.value < breakpointValue;\n\n        state.xs = xs;\n        state.sm = sm;\n        state.md = md;\n        state.lg = lg;\n        state.xl = xl;\n        state.xxl = xxl;\n        state.xsUp = true;\n        state.smUp = !xs;\n        state.mdUp = !(xs || sm);\n        state.lgUp = !(xs || sm || md);\n        state.xlUp = !(xs || sm || md || lg);\n        state.xxlUp = !(xs || sm || md || lg || xl);\n        state.smDown = !(md || lg || xl || xxl);\n        state.mdDown = !(lg || xl || xxl);\n        state.lgDown = !(xl || xxl);\n        state.xlDown = !xxl;\n        state.name = name;\n        state.height = height.value;\n        state.width = width.value;\n        state.mobile = mobile;\n        state.mobileBreakpoint = mobileBreakpoint;\n        state.platform = platform.value;\n        state.thresholds = thresholds;\n    });\n\n    if (Browser.hasWindow) {\n        window.addEventListener(\"resize\", updateSize, { passive: true });\n    }\n\n    return {\n        ...toRefs(state),\n        update,\n        ssr: !!ssr,\n    };\n}\n\n/**\n * # Use Display (from Symbol);\n */\nexport function useDisplay() {\n    const display = inject(DisplaySymbol);\n    if (!display) {\n        throw new Error(\n            \"Evance UI: Could not find `ev:display` injection symbol\",\n        );\n    }\n    return display;\n}\n\n/**\n * # Display Point Options\n *\n * These are listed in order of calculation priority.\n */\nexport const displayRules = [\n    \"xxl\",\n    \"xl\",\n    \"lg\",\n    \"md\",\n    \"sm\",\n    \"xs\",\n    \"xxlOnly\",\n    \"xlOnly\",\n    \"lgOnly\",\n    \"mdOnly\",\n    \"smOnly\",\n    \"xsOnly\",\n    \"xxlUp\",\n    \"xlUp\",\n    \"lgUp\",\n    \"mdUp\",\n    \"smUp\",\n    \"xsUp\",\n    \"smDown\",\n    \"mdDown\",\n    \"lgDown\",\n    \"xlDown\",\n] as const;\nexport const displayRulesKebab = [\n    \"xxl-only\",\n    \"xl-only\",\n    \"lg-only\",\n    \"md-only\",\n    \"sm-only\",\n    \"xs-only\",\n    \"xxl-up\",\n    \"xl-up\",\n    \"lg-up\",\n    \"md-up\",\n    \"sm-up\",\n    \"xs-up\",\n    \"sm-down\",\n    \"md-down\",\n    \"lg-down\",\n    \"xl-down\",\n] as const;\n\nexport type DisplayRuleSuffix = \"only\" | \"up\" | \"down\";\nexport type DisplayRuleKey = (typeof displayRules)[number];\nexport type DisplayRuleKebab = (typeof displayRulesKebab)[number];\nexport type DisplayRuleValue = number | string;\nexport type DisplayRuleObject = {\n    [key in DisplayRuleKey]?: DisplayRuleValue;\n};\nexport type DisplayRuleProp = DisplayRuleValue | DisplayRuleObject;\nexport type DisplayRuleListProp =\n    | DisplayRuleKey\n    | DisplayRuleKey[]\n    | DisplayRuleKebab\n    | DisplayRuleKebab[];\n\n/** Visibility props */\nexport type VisibilityRuleProp = DisplayRuleListProp | boolean;\n\n/**\n * # calculateDisplayRuleValue\n *\n * @param rules\n */\nexport function calculateDisplayRuleValue(\n    rules?: DisplayRuleObject | DisplayRuleValue,\n) {\n    const display = useDisplay();\n    if (!isObject(rules)) {\n        return toWebUnit(rules);\n    }\n    for (const ruleKey of displayRules) {\n        const displayKey = toDisplayStateKey(ruleKey);\n        const displayState = display[displayKey as keyof DisplayInstance];\n        if (isRef(displayState) && displayState.value && !!rules[ruleKey]) {\n            return toWebUnit(rules[ruleKey]);\n        }\n    }\n    return undefined;\n}\n\n/**\n * # To Display Key\n *\n * @param displayRule\n */\nexport function toDisplayStateKey(displayRule: string): string {\n    if (toDisplayStateKey.cache.has(displayRule)) {\n        return toDisplayStateKey.cache.get(displayRule)!;\n    }\n    let value = toCamelCase(displayRule);\n    if (isDisplayBreakpoint(value)) {\n        value = `${value}Up`;\n    }\n    value = trimEnd(value, \"Only\");\n    toKebabCase.cache.set(displayRule, value);\n    return value;\n}\ntoDisplayStateKey.cache = new Map<string, string>();\n\n/**\n * # To Display Rule Kebab\n *\n * @param displayRule\n */\nexport function toDisplayRuleKebab(displayRule: string): string {\n    if (toDisplayRuleKebab.cache.has(displayRule)) {\n        return toDisplayRuleKebab.cache.get(displayRule)!;\n    }\n    let value = toKebabCase(displayRule);\n    if (isDisplayBreakpoint(value)) {\n        value = `${value}-up`;\n    }\n    toDisplayRuleKebab.cache.set(displayRule, value);\n    return value;\n}\ntoDisplayRuleKebab.cache = new Map<string, string>();\n\n/**\n * # isDisplayRule\n *\n * @param value\n * @param acceptKebabs\n */\nexport function isDisplayRule(\n    value: unknown,\n    acceptKebabs: boolean = true,\n): value is DisplayRuleKey | DisplayRuleKebab {\n    return (\n        displayRules.includes(value as DisplayRuleKey) ||\n        (acceptKebabs && displayRulesKebab.includes(value as DisplayRuleKebab))\n    );\n}\n\n/**\n * # isDisplayBreakpoint\n *\n * @param value\n */\nexport function isDisplayBreakpoint(\n    value: unknown,\n): value is DisplayBreakpoint {\n    return [\"xs\", ...breakpoints].includes(value as DisplayBreakpoint);\n}\n\n/**\n * # createBreakpointClasses\n *\n * @param props\n * @param propName\n * @param prefix\n * @param useXs\n */\nexport function useBreakpointClasses<\n    PropsObject extends object,\n    PropName extends Extract<keyof PropsObject, string>,\n    Prefix extends string | undefined,\n    UseXs extends boolean,\n>(\n    props: PropsObject,\n    propName: PropName,\n    prefix: Prefix = undefined as Prefix,\n    useXs: UseXs = false as UseXs,\n) {\n    return computed(() => {\n        const prop = props[propName] as ResponsiveProp;\n        if (!prop) {\n            return [];\n        }\n        const classes = [];\n        const values =\n            typeof prop !== \"object\"\n                ? ({ xs: prop } as ResponsivePropObject)\n                : prop;\n        for (const [breakpoint, value] of Object.entries(values)) {\n            const className = [];\n            if (prefix) {\n                className.push(prefix);\n            }\n            if (useXs || breakpoint !== \"xs\") {\n                className.push(breakpoint);\n            }\n            className.push(value);\n            classes.push(className.join(\"-\"));\n        }\n        return classes;\n    });\n}\n\n/**\n * # useDisplayRuleClasses\n *\n * @param props\n * @param propName\n * @param prefix\n */\nexport function useDisplayRuleClasses<\n    PropsObject extends object,\n    PropName extends Extract<keyof PropsObject, string>,\n    Prefix extends string | undefined,\n>(\n    props: PropsObject,\n    propName: PropName,\n    prefix: Prefix = undefined as Prefix,\n) {\n    return computed(() => {\n        const classes = [];\n        const rules = toDisplayRuleArray(props[propName]);\n        for (const rule of rules) {\n            if (!isString(rule)) {\n                // Gracefully ignore anything that is not a string.\n                continue;\n            }\n            if (!isDisplayRule(rule)) {\n                consoleWarn(\n                    `The display rule '${rule}' is not valid and will be ignored.`,\n                );\n                continue;\n            }\n            const suffix = toDisplayRuleKebab(rule);\n            classes.push(`${prefix}-${suffix}`);\n        }\n        return classes;\n    });\n}\n\n/**\n * # toDisplayRuleArray\n *\n * @param prop\n */\nexport function toDisplayRuleArray(prop: unknown): string[] {\n    if (Array.isArray(prop)) {\n        return prop;\n    }\n    if (isString(prop)) {\n        return spaceSeparatedValues(prop as string);\n    }\n    if (isObject(prop)) {\n        return <string[]>Object.entries(prop)\n            .map(([key, value]) => {\n                if (isBoolean(value)) {\n                    return value ? key : undefined;\n                }\n                return isString(value)\n                    ? `${key}-${value.toLowerCase()}`\n                    : undefined;\n            })\n            .filter((value) => value !== undefined);\n    }\n    return [];\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/form-D9_0uFbN.mjs

@@ -0,0 +1,145 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+/*! Evance UI v1.0.4 | MIT License */
+import { ref, shallowRef, toRaw, computed, toRef, provide, inject } from "vue";
+import { c as consoleWarn } from "./console-CHk2oFjL.mjs";
+import { u as useModelProxy } from "./modelProxy-MDEML1Hj.mjs";
+import { p as propsFactory } from "./props-DwRGNAyc.mjs";
+class Form {
+  constructor(isValid, isDisabled, isReadonly, validateOn) {
+    __publicField(this, "errors", ref([]));
+    __publicField(this, "fields", []);
+    __publicField(this, "isDisabled");
+    __publicField(this, "isReadonly");
+    __publicField(this, "isValid");
+    __publicField(this, "isValidating", shallowRef(false));
+    __publicField(this, "validateOn");
+    this.isDisabled = isDisabled ?? shallowRef(false);
+    this.isReadonly = isReadonly ?? shallowRef(false);
+    this.isValid = isValid ?? shallowRef(null);
+    this.validateOn = validateOn ?? shallowRef("input");
+  }
+  /**
+   * ## Add Field
+   * @param field
+   */
+  addField(field) {
+    if (this.hasField(field.id)) {
+      consoleWarn(`Duplicate form field with name "${field.id}"`);
+    }
+    this.fields.push(field);
+  }
+  /**
+   * ## Expose
+   */
+  expose() {
+    return {
+      reset: this.reset.bind(this),
+      resetValidation: this.resetValidation.bind(this),
+      validate: this.validate.bind(this)
+    };
+  }
+  /**
+   * ## Get Field
+   * @param id
+   */
+  getField(id) {
+    return this.fields.find((field) => {
+      return field.id === id;
+    });
+  }
+  /**
+   * ## Has Field
+   *
+   * Returns `true` if the field `name` already exists in the form.
+   *
+   * @param id
+   */
+  hasField(id) {
+    return this.fields.some((field) => field.id === id);
+  }
+  /**
+   * ## Remove Field
+   * @param id
+   */
+  removeField(id) {
+    this.fields = this.fields.filter((field) => {
+      return field.id !== id;
+    });
+  }
+  /**
+   * ## Reset
+   */
+  reset() {
+    this.fields.forEach((field) => field.reset());
+  }
+  /**
+   * ## Reset Validation
+   */
+  resetValidation() {
+    this.fields.forEach((field) => field.resetValidation());
+  }
+  /**
+   * ## Validate
+   */
+  async validate() {
+    let valid = true;
+    this.errors.value = [];
+    this.isValidating.value = true;
+    const results = [];
+    for (const field of this.fields) {
+      const fieldErrors = await field.validate();
+      for (const fieldError of fieldErrors) {
+        valid = false;
+        results.push({
+          name: field.name,
+          message: fieldError
+        });
+      }
+    }
+    this.errors.value = results;
+    this.isValidating.value = false;
+    return {
+      valid,
+      errors: toRaw(this.errors.value)
+    };
+  }
+}
+const FormKey = Symbol.for("ev:form");
+const makeFormProps = propsFactory(
+  {
+    disabled: Boolean,
+    readonly: Boolean,
+    modelValue: {
+      type: Boolean,
+      default: null
+    },
+    validateOn: {
+      type: String,
+      default: "input"
+    }
+  },
+  "form"
+);
+function createForm(props) {
+  const isValid = useModelProxy(props, "modelValue");
+  const isDisabled = computed(() => props.disabled);
+  const isReadonly = computed(() => props.readonly);
+  const validateOn = toRef(props, "validateOn");
+  const form = new Form(isValid, isDisabled, isReadonly, validateOn);
+  provide(FormKey, form);
+  return form;
+}
+function useForm() {
+  return inject(FormKey, null);
+}
+export {
+  createForm as c,
+  makeFormProps as m,
+  useForm as u
+};
+//# sourceMappingURL=form-D9_0uFbN.mjs.map

package/dist/esm/form-D9_0uFbN.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-D9_0uFbN.mjs","sources":["../../src/modules/Form/Form.ts","../../src/composables/form.ts"],"sourcesContent":["import { FormField } from \"@/modules/Form/FormField.ts\";\nimport { Ref, ref, shallowRef, toRaw } from \"vue\";\nimport { consoleWarn } from \"@/util\";\nimport { FormProps } from \"@/composables/form.ts\";\nimport { ValidationError } from \"@/composables/validation.ts\";\n\n/**\n * # Form\n */\nexport class Form {\n    public readonly errors: Ref<ValidationError[]> = ref([]);\n    private fields: FormField[] = [];\n    public readonly isDisabled: Ref<boolean>;\n    public readonly isReadonly: Ref<boolean>;\n    public readonly isValid: Ref<boolean | null>;\n    public readonly isValidating = shallowRef(false);\n    public readonly validateOn: Ref<FormProps[\"validateOn\"]>;\n\n    constructor(\n        isValid: Ref<boolean | null> | undefined,\n        isDisabled: Ref<boolean> | undefined,\n        isReadonly: Ref<boolean> | undefined,\n        validateOn: Ref<FormProps[\"validateOn\"]> | undefined,\n    ) {\n        this.isDisabled = isDisabled ?? shallowRef(false);\n        this.isReadonly = isReadonly ?? shallowRef(false);\n        this.isValid = isValid ?? shallowRef(null);\n        this.validateOn = validateOn ?? shallowRef(\"input\");\n    }\n\n    /**\n     * ## Add Field\n     * @param field\n     */\n    public addField(field: FormField) {\n        if (this.hasField(field.id)) {\n            consoleWarn(`Duplicate form field with name \"${field.id}\"`);\n        }\n        this.fields.push(field);\n    }\n\n    /**\n     * ## Expose\n     */\n    public expose() {\n        return {\n            reset: this.reset.bind(this),\n            resetValidation: this.resetValidation.bind(this),\n            validate: this.validate.bind(this),\n        };\n    }\n\n    /**\n     * ## Get Field\n     * @param id\n     */\n    public getField(id: string): FormField | undefined {\n        return this.fields.find((field) => {\n            return field.id === id;\n        });\n    }\n\n    /**\n     * ## Has Field\n     *\n     * Returns `true` if the field `name` already exists in the form.\n     *\n     * @param id\n     */\n    public hasField(id: string): boolean {\n        return this.fields.some((field) => field.id === id);\n    }\n\n    /**\n     * ## Remove Field\n     * @param id\n     */\n    public removeField(id: string) {\n        this.fields = this.fields.filter((field) => {\n            return field.id !== id;\n        });\n    }\n\n    /**\n     * ## Reset\n     */\n    public reset() {\n        this.fields.forEach((field) => field.reset());\n    }\n\n    /**\n     * ## Reset Validation\n     */\n    public resetValidation() {\n        this.fields.forEach((field) => field.resetValidation());\n    }\n\n    /**\n     * ## Validate\n     */\n    public async validate() {\n        let valid = true;\n        this.errors.value = [];\n        this.isValidating.value = true;\n\n        const results = [];\n        for (const field of this.fields) {\n            const fieldErrors = await field.validate();\n            for (const fieldError of fieldErrors) {\n                valid = false;\n                results.push({\n                    name: field.name,\n                    message: fieldError,\n                });\n            }\n        }\n\n        this.errors.value = results;\n        this.isValidating.value = false;\n        return {\n            valid,\n            errors: toRaw(this.errors.value),\n        };\n    }\n}\n","import { computed, inject, InjectionKey, PropType, provide, toRef } from \"vue\";\nimport { ValidationError, FormFieldProps } from \"@/composables/validation.ts\";\nimport { propsFactory } from \"@/util\";\nimport { Form } from \"@/modules/Form/Form.ts\";\nimport { useModelProxy } from \"@/composables/modelProxy.ts\";\n\n/**\n * # Form Key\n * Used for provide/inject functions.\n */\nexport const FormKey: InjectionKey<any> = Symbol.for(\"ev:form\");\n\n/**\n * # Submit Event Promise\n */\nexport interface SubmitEventPromise\n    extends SubmitEvent,\n        Promise<FormValidationResult> {}\n\n/**\n * # Form Props\n */\nexport interface FormProps {\n    disabled?: boolean;\n    readonly?: boolean;\n    modelValue?: boolean | null;\n    \"onUpdate:modelValue\"?: ((val: boolean | null) => void) | undefined;\n    validateOn?: FormFieldProps[\"validateOn\"];\n}\n\n/**\n * # Form Validation Result\n */\nexport interface FormValidationResult {\n    valid: boolean;\n    errors: ValidationError[];\n}\n\n/**\n * # Make Form Props\n */\nexport const makeFormProps = propsFactory(\n    {\n        disabled: Boolean,\n        readonly: Boolean,\n        modelValue: {\n            type: Boolean as PropType<boolean | null>,\n            default: null,\n        },\n        validateOn: {\n            type: String as PropType<FormProps[\"validateOn\"]>,\n            default: \"input\",\n        },\n    },\n    \"form\",\n);\n\n/**\n * # Create Form\n * @param props\n */\nexport function createForm(props: FormProps) {\n    const isValid = useModelProxy(props, \"modelValue\");\n    const isDisabled = computed(() => props.disabled);\n    const isReadonly = computed(() => props.readonly);\n    const validateOn = toRef(props, \"validateOn\");\n\n    const form = new Form(isValid, isDisabled, isReadonly, validateOn);\n\n    provide(FormKey, form);\n\n    return form;\n}\n\n/**\n * # Use Form\n */\nexport function useForm() {\n    return inject(FormKey, null);\n}\n"],"names":[],"mappings":"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"}