@scalar/components 0.16.4 → 0.16.5

package/dist/components/ScalarButton/ScalarButton.vue.js

@@ -1,12 +1,12 @@
-import { defineComponent as g, createBlock as r, openBlock as i, resolveDynamicComponent as l, mergeProps as p, unref as a, withCtx as v, createElementBlock as s, createCommentVNode as d, renderSlot as o, normalizeClass as t, createVNode as f } from "vue";
-import { cva as n, useBindCx as z } from "@scalar/use-hooks/useBindCx";
+import { defineComponent as v, createBlock as n, openBlock as s, resolveDynamicComponent as l, mergeProps as p, unref as a, withCtx as f, createElementBlock as i, createCommentVNode as d, renderSlot as t, normalizeClass as o, createVNode as z } from "vue";
+import { cva as r, useBindCx as g } from "@scalar/use-hooks/useBindCx";
 import { BUTTON_VARIANT_STYLES as y } from "./constants.js";
 import h from "../ScalarLoading/ScalarLoading.vue.js";
 const k = {
   key: 3,
   class: "centered"
-}, B = {}, T = /* @__PURE__ */ g({
-  ...B,
+}, A = {}, T = /* @__PURE__ */ v({
+  ...A,
   inheritAttrs: !1,
   __name: "ScalarButton",
   props: {
@@ -15,10 +15,10 @@ const k = {
     size: { default: "md" },
     disabled: { type: Boolean },
     icon: { type: [Object, Function] },
-    loading: {}
+    loader: {}
   },
-  setup(S) {
-    const m = n({
+  setup(B) {
+    const m = r({
       base: "scalar-button flex cursor-pointer items-center justify-center rounded font-medium -outline-offset-1",
       variants: {
         disabled: { true: "bg-b-2 text-color-3 shadow-none" },
@@ -41,7 +41,7 @@ const k = {
           class: "to-b-1.5 bg-linear-to-b hover:bg-linear-to-b dark:hover:bg-linear-to-t"
         }
       ]
-    }), u = n({
+    }), c = r({
       base: "shrink-0",
       variants: {
         size: {
@@ -50,7 +50,7 @@ const k = {
           md: "size-3.5 -ml-0.5 mr-1.5"
         }
       }
-    }), b = n({
+    }), u = r({
       variants: {
         size: {
           xs: "size-4",
@@ -58,36 +58,36 @@ const k = {
           md: "size-6"
         }
       }
-    }), { cx: c } = z();
-    return (e, V) => (i(), r(l(e.is), p(
+    }), { cx: b } = g();
+    return (e, V) => (s(), n(l(e.is), p(
       {
         "aria-disabled": e.disabled || void 0,
         type: e.is === "button" ? "button" : void 0
       },
-      a(c)(a(m)({ disabled: e.disabled, size: e.size, variant: e.variant }), {
-        relative: e.loading?.isLoading
+      a(b)(a(m)({ disabled: e.disabled, size: e.size, variant: e.variant }), {
+        relative: e.loader?.isActive
       })
     ), {
-      default: v(() => [
-        e.$slots.icon || e.icon ? (i(), s("div", {
+      default: f(() => [
+        e.$slots.icon || e.icon ? (s(), i("div", {
           key: 0,
-          class: t([a(u)({ size: e.size }), { invisible: e.loading?.isLoading }])
+          class: o([a(c)({ size: e.size }), { invisible: e.loader?.isActive }])
         }, [
-          o(e.$slots, "icon", {}, () => [
-            (i(), r(l(e.icon), { class: "size-full" }))
+          t(e.$slots, "icon", {}, () => [
+            (s(), n(l(e.icon), { class: "size-full" }))
           ])
         ], 2)) : d("", !0),
-        e.loading ? (i(), s("span", {
+        e.loader ? (s(), i("span", {
           key: 1,
-          class: t({ invisible: e.loading?.isLoading })
+          class: o({ invisible: e.loader?.isActive })
         }, [
-          o(e.$slots, "default")
-        ], 2)) : o(e.$slots, "default", { key: 2 }),
-        e.loading?.isLoading ? (i(), s("div", k, [
-          f(a(h), {
-            class: t(a(b)({ size: e.size })),
-            loadingState: e.loading
-          }, null, 8, ["class", "loadingState"])
+          t(e.$slots, "default")
+        ], 2)) : t(e.$slots, "default", { key: 2 }),
+        e.loader?.isActive ? (s(), i("div", k, [
+          z(a(h), {
+            class: o(a(u)({ size: e.size })),
+            loader: e.loader
+          }, null, 8, ["class", "loader"])
         ])) : d("", !0)
       ]),
       _: 3

package/dist/components/ScalarButton/types.d.ts

@@ -55,18 +55,18 @@ export type ScalarButtonProps = {
     /**
      * The loading state of the button
      *
-     * @see <ScalarLoading>
+     * @see ScalarLoading
      *
      * @example
-     * import { useLoadingState } from '@scalar/components'
+     * import { ScalarButton, useLoadingState } from '@scalar/components'
      * ...
-     * const loadingState = useLoadingState()
-     * loadingState.startLoading()
+     * const loader = useLoadingState()
+     * loader.start()
      * ...
-     * <ScalarButton :loading="loadingState">
+     * <ScalarButton :loader>
      *   It's loading...
      * </ScalarButton>
      */
-    loading?: LoadingState;
+    loader?: LoadingState;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/components/ScalarButton/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAEpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAE9D,4CAA4C;AAC5C,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAA;AAElF,2CAA2C;AAC3C,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE3C,mCAAmC;AACnC,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,EAAE,CAAA;AAEzC,2CAA2C;AAC3C,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;;;;;;OASG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAA;IAC1B;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAEpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAE9D,4CAA4C;AAC5C,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAA;AAElF,2CAA2C;AAC3C,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE3C,mCAAmC;AACnC,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,EAAE,CAAA;AAEzC,2CAA2C;AAC3C,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;;;;;;OASG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAA;IAC1B;;;;;;;;;;;;;;OAcG;IACH,MAAM,CAAC,EAAE,YAAY,CAAA;CACtB,CAAA"}

package/dist/components/ScalarFileUpload/ScalarFileUpload.vue.js

@@ -1,13 +1,13 @@
-import { defineComponent as E, mergeModels as m, useModel as p, ref as c, createElementBlock as v, openBlock as r, mergeProps as F, unref as s, withModifiers as g, renderSlot as a, createCommentVNode as y, createBlock as $, createElementVNode as T, resolveDynamicComponent as w, createSlots as k, withCtx as n, createVNode as b, createTextVNode as A, toDisplayString as j } from "vue";
-import { useBindCx as L } from "@scalar/use-hooks/useBindCx";
-import P from "./ScalarFileUploadDropTarget.vue.js";
-import U from "./ScalarFileUploadError.vue.js";
-import _ from "./ScalarFileUploadInput.vue.js";
-import q from "./ScalarFileUploadInputCompact.vue.js";
-import z from "./ScalarFileUploadLoading.vue.js";
+import { defineComponent as A, mergeModels as m, useModel as p, ref as c, createElementBlock as v, openBlock as r, mergeProps as E, unref as s, withModifiers as g, renderSlot as a, createCommentVNode as y, createBlock as $, createElementVNode as F, resolveDynamicComponent as T, createSlots as k, withCtx as n, createVNode as b, createTextVNode as w, toDisplayString as j } from "vue";
+import { useBindCx as P } from "@scalar/use-hooks/useBindCx";
+import U from "./ScalarFileUploadDropTarget.vue.js";
+import _ from "./ScalarFileUploadError.vue.js";
+import q from "./ScalarFileUploadInput.vue.js";
+import z from "./ScalarFileUploadInputCompact.vue.js";
+import G from "./ScalarFileUploadLoading.vue.js";
 import { isExtensionList as h } from "./types.js";
-const G = ["accept", "multiple"], H = {}, Y = /* @__PURE__ */ E({
-  ...H,
+const H = ["accept", "multiple"], I = {}, Y = /* @__PURE__ */ A({
+  ...I,
   inheritAttrs: !1,
   __name: "ScalarFileUpload",
   props: /* @__PURE__ */ m({
@@ -23,9 +23,9 @@ const G = ["accept", "multiple"], H = {}, Y = /* @__PURE__ */ E({
   }),
   emits: /* @__PURE__ */ m(["selected"], ["update:modelValue", "update:error"]),
   setup(i, { emit: C }) {
-    const D = C, V = p(i, "modelValue"), l = p(i, "error"), d = c(), t = c(!1);
-    function u() {
-      d.value?.click();
+    const D = C, V = p(i, "modelValue"), l = p(i, "error"), u = c(), t = c(!1);
+    function d() {
+      u.value?.click();
     }
     function f(e) {
       if (l.value = void 0, !e || e.length < 1) {
@@ -46,8 +46,8 @@ const G = ["accept", "multiple"], H = {}, Y = /* @__PURE__ */ E({
     function M(e) {
       t.value = !1, f(e.dataTransfer?.files);
     }
-    const { cx: N } = L();
-    return (e, o) => (r(), v("div", F(
+    const { cx: N } = P();
+    return (e, o) => (r(), v("div", E(
       s(N)(
         "flex flex-col relative border-dashed border-1 has-[input:focus-visible]:outline outline-offset-1 rounded"
       ),
@@ -58,12 +58,12 @@ const G = ["accept", "multiple"], H = {}, Y = /* @__PURE__ */ E({
         onDrop: g(M, ["prevent"])
       }
     ), [
-      a(e.$slots, "default", { open: u }, () => [
-        (r(), $(w(
-          e.variant === "compact" ? q : _
+      a(e.$slots, "default", { open: d }, () => [
+        (r(), $(T(
+          e.variant === "compact" ? z : q
         ), {
           extensions: s(h)(e.accept) ? e.accept : void 0,
-          onClick: u
+          onClick: d
         }, k({ _: 2 }, [
           e.$slots.label ? {
             name: "default",
@@ -75,9 +75,9 @@ const G = ["accept", "multiple"], H = {}, Y = /* @__PURE__ */ E({
           l.value ? {
             name: "sublabel",
             fn: n(() => [
-              b(U, null, {
+              b(_, null, {
                 default: n(() => [
-                  A(j(l.value), 1)
+                  w(j(l.value), 1)
                 ]),
                 _: 1
               })
@@ -92,7 +92,7 @@ const G = ["accept", "multiple"], H = {}, Y = /* @__PURE__ */ E({
         onDragleave: o[0] || (o[0] = (S) => t.value = !1)
       }, [
         a(e.$slots, "drop-target", {}, () => [
-          b(P, null, k({ _: 2 }, [
+          b(U, null, k({ _: 2 }, [
             e.$slots["drop-target-label"] ? {
               name: "default",
               fn: n(() => [
@@ -103,19 +103,19 @@ const G = ["accept", "multiple"], H = {}, Y = /* @__PURE__ */ E({
           ]), 1024)
         ])
       ], 32)) : y("", !0),
-      e.loader?.isLoading ? (r(), $(z, {
+      e.loader?.isActive ? (r(), $(G, {
         key: 1,
         loader: e.loader
       }, null, 8, ["loader"])) : y("", !0),
-      T("input", {
+      F("input", {
         ref_key: "input",
-        ref: d,
+        ref: u,
         accept: s(h)(e.accept) ? e.accept.join(",") : e.accept,
         class: "sr-only",
         multiple: e.multiple,
         type: "file",
         onChange: B
-      }, null, 40, G)
+      }, null, 40, H)
     ], 16));
   }
 });

package/dist/components/ScalarFileUpload/ScalarFileUploadLoading.vue.js

@@ -1,7 +1,7 @@
-import { defineComponent as r, createElementBlock as a, openBlock as n, normalizeProps as l, guardReactiveProps as i, unref as e, createVNode as s } from "vue";
+import { defineComponent as t, createElementBlock as a, openBlock as n, normalizeProps as l, guardReactiveProps as i, unref as e, createVNode as s } from "vue";
 import { useBindCx as c } from "@scalar/use-hooks/useBindCx";
 import d from "../ScalarLoading/ScalarLoading.vue.js";
-const p = {}, x = /* @__PURE__ */ r({
+const p = {}, z = /* @__PURE__ */ t({
   ...p,
   inheritAttrs: !1,
   __name: "ScalarFileUploadLoading",
@@ -9,19 +9,19 @@ const p = {}, x = /* @__PURE__ */ r({
     loader: {}
   },
   setup(u) {
-    const { cx: t } = c();
+    const { cx: r } = c();
     return (o, m) => (n(), a("div", l(i(
-      e(t)(
+      e(r)(
         " size-full flex items-center justify-center absolute inset-0 z-1 rounded p-1 backdrop-blur text-c-2"
       )
     )), [
       s(e(d), {
-        loadingState: o.loader,
+        loader: o.loader,
         size: "md"
-      }, null, 8, ["loadingState"])
+      }, null, 8, ["loader"])
     ], 16));
   }
 });
 export {
-  x as default
+  z as default
 };

package/dist/components/ScalarLoading/ScalarLoading.vue.d.ts

@@ -1,24 +1,22 @@
-export type LoadingState = ReturnType<typeof useLoadingState>;
+import type { LoadingState } from './types';
 /**
- * Handles isLoading spinner for the FlowLoader Component
- * - stateIsLoading will trigger the spinner
- * - isValid or isInvalid will show a check or x and then spin out
+ * Scalar Loading Component
+ *
+ * Displays a loading state for the application
+ *
+ * @example
+ * import { ScalarLoading, useLoadingState } from '@scalar/components'
+ *
+ * const loader = useLoadingState()
+ * loader.start()
+ * ...
+ * <ScalarLoading :loader="loader" />
  */
-export declare function useLoadingState(): {
-    isValid: boolean;
-    isInvalid: boolean;
-    isLoading: boolean;
-    startLoading: () => void;
-    stopLoading: () => void;
-    validate: (time?: number, clear?: boolean) => Promise<unknown>;
-    invalidate: (time?: number, clear?: boolean) => Promise<unknown>;
-    clear: (time?: number) => Promise<unknown>;
-};
 declare const _default: import("vue").DefineComponent<{
-    loadingState?: LoadingState;
+    loader?: LoadingState;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | undefined;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    loadingState?: LoadingState;
+    loader?: LoadingState;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | undefined;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/ScalarLoading/ScalarLoading.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarLoading.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarLoading/ScalarLoading.vue"],"names":[],"mappings":"AA+OA,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAA;AAE7D;;;;GAIG;AACH,wBAAgB,eAAe;;;;;;sCAWE,OAAO;wCAWJ,OAAO;;EAuB1C;;mBAMgB,YAAY;;;mBAAZ,YAAY;;;AAJ7B,wBAoJK"}
+{"version":3,"file":"ScalarLoading.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarLoading/ScalarLoading.vue"],"names":[],"mappings":"AAqMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAG3C;;;;;;;;;;;;GAYG;;aAKQ,YAAY;;;aAAZ,YAAY;;;AAJvB,wBAmJC"}

package/dist/components/ScalarLoading/ScalarLoading.vue.js

@@ -1,9 +1,7 @@
 import o from "./ScalarLoading.vue2.js";
-import { useLoadingState as i } from "./ScalarLoading.vue2.js";
 /* empty css                   */
-import t from "../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-f525638b"]]);
+import a from "../../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ a(o, [["__scopeId", "data-v-8e99b97a"]]);
 export {
-  f as default,
-  i as useLoadingState
+  p as default
 };

package/dist/components/ScalarLoading/ScalarLoading.vue2.js

@@ -1,52 +1,15 @@
-import { defineComponent as h, createElementBlock as t, createCommentVNode as r, openBlock as l, normalizeProps as g, mergeProps as m, unref as o, normalizeClass as d, createStaticVNode as p, createElementVNode as v, reactive as f } from "vue";
-import { useBindCx as u, cva as c } from "@scalar/use-hooks/useBindCx";
-const z = {
-  key: 0,
-  class: "circular-loader"
-};
-function x() {
-  return f({
-    isValid: !1,
-    isInvalid: !1,
-    isLoading: !1,
-    startLoading() {
-      this.isLoading = !0;
-    },
-    stopLoading() {
-      this.isLoading = !1;
-    },
-    validate(e = 800, s) {
-      this.isInvalid = !1, this.isValid = !0;
-      const i = s ? e - 300 : e;
-      return new Promise(
-        (a) => setTimeout(s ? () => this.clear().then(() => a(!0)) : () => a(!0), i)
-      );
-    },
-    invalidate(e = 1100, s) {
-      this.isValid = !1, this.isInvalid = !0;
-      const i = s ? e - 300 : e;
-      return new Promise(
-        (a) => setTimeout(s ? () => this.clear().then(() => a(!0)) : () => a(!0), i)
-      );
-    },
-    clear(e = 300) {
-      return this.isValid = !1, this.isInvalid = !1, this.isLoading = !1, new Promise((s) => {
-        setTimeout(() => {
-          s(!0);
-        }, e);
-      });
-    }
-  });
-}
-const S = /* @__PURE__ */ h({
+import { defineComponent as n, createElementBlock as e, createCommentVNode as p, openBlock as l, normalizeProps as c, mergeProps as m, unref as t, normalizeClass as r, createStaticVNode as v, createElementVNode as i } from "vue";
+import { useBindCx as h, cva as g } from "@scalar/use-hooks/useBindCx";
+const f = { class: "circular-loader" }, z = {}, w = /* @__PURE__ */ n({
+  ...z,
   inheritAttrs: !1,
   __name: "ScalarLoading",
   props: {
-    loadingState: {},
+    loader: {},
     size: {}
   },
-  setup(e) {
-    const { cx: s } = u(), i = c({
+  setup(u) {
+    const { cx: o } = h(), d = g({
       variants: {
         size: {
           xs: "size-3",
@@ -63,21 +26,21 @@ const S = /* @__PURE__ */ h({
         size: "full"
       }
     });
-    return (a, n) => a.loadingState ? (l(), t("div", g(m({ key: 0 }, o(s)("loader-wrapper", o(i)({ size: a.size })))), [
-      (l(), t("svg", {
-        class: d(["svg-loader", {
-          "icon-is-valid": a.loadingState.isValid,
-          "icon-is-invalid": a.loadingState.isInvalid
+    return (a, s) => a.loader ? (l(), e("div", c(m({ key: 0 }, t(o)("loader-wrapper", t(d)({ size: a.size })))), [
+      (l(), e("svg", {
+        class: r(["svg-loader", {
+          "icon-is-valid": a.loader.isValid,
+          "icon-is-invalid": a.loader.isInvalid
         }]),
         viewBox: "0 0 100 100",
         xmlns: "http://www.w3.org/2000/svg",
         "xmlns:xlink": "http://www.w3.org/1999/xlink"
       }, [
-        n[0] || (n[0] = p('<path class="svg-path svg-check-mark" d="m 0 60 l 30 30 l 70 -80" data-v-f525638b></path><path class="svg-path svg-x-mark" d="m 50 50 l 40 -40" data-v-f525638b></path><path class="svg-path svg-x-mark" d="m 50 50 l 40 40" data-v-f525638b></path><path class="svg-path svg-x-mark" d="m 50 50 l -40 -40" data-v-f525638b></path><path class="svg-path svg-x-mark" d="m 50 50 l -40 40" data-v-f525638b></path>', 5)),
-        a.loadingState.isLoading ? (l(), t("g", z, [
-          v("circle", {
-            class: d(["loader-path", {
-              "loader-path-off": a.loadingState.isValid || a.loadingState.isInvalid
+        s[0] || (s[0] = v('<path class="svg-path svg-check-mark" d="m 0 60 l 30 30 l 70 -80" data-v-8e99b97a></path><path class="svg-path svg-x-mark" d="m 50 50 l 40 -40" data-v-8e99b97a></path><path class="svg-path svg-x-mark" d="m 50 50 l 40 40" data-v-8e99b97a></path><path class="svg-path svg-x-mark" d="m 50 50 l -40 -40" data-v-8e99b97a></path><path class="svg-path svg-x-mark" d="m 50 50 l -40 40" data-v-8e99b97a></path>', 5)),
+        i("g", f, [
+          i("circle", {
+            class: r(["loader-path", {
+              "loader-path-off": !a.loader.isLoading
             }]),
             cx: "50",
             cy: "50",
@@ -85,12 +48,11 @@ const S = /* @__PURE__ */ h({
             r: "20",
             "stroke-width": "3"
           }, null, 2)
-        ])) : r("", !0)
+        ])
       ], 2))
-    ], 16)) : r("", !0);
+    ], 16)) : p("", !0);
   }
 });
 export {
-  S as default,
-  x as useLoadingState
+  w as default
 };

package/dist/components/ScalarLoading/index.d.ts

@@ -1,2 +1,4 @@
-export { default as ScalarLoading, type LoadingState, useLoadingState, } from './ScalarLoading.vue.js';
+export { default as ScalarLoading } from './ScalarLoading.vue.js';
+export type { LoadingState } from './types';
+export { useLoadingState } from './useLoadingState.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ScalarLoading/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarLoading/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,aAAa,EACxB,KAAK,YAAY,EACjB,eAAe,GAChB,MAAM,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarLoading/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC9D,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/components/ScalarLoading/types.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Options for the validate and invalidate methods
+ */
+export type LoadingCompletionOptions = {
+    /**
+     * The duration of to wait before clearing the loading state in milliseconds
+     *
+     * The promise will resolve after the duration has passed.
+     *
+     * @default the length of the completion animation and clearing animation
+     */
+    duration?: number;
+    /**
+     * Whether to persist the loading state after the validation.
+     *
+     * If true, the loading state will not be cleared after the completion animation.
+     *
+     * @default false
+     */
+    persist?: boolean;
+};
+/**
+ * The loading state for the ScalarLoading component
+ */
+export type LoadingState = {
+    /**
+     * Set to true if the loading state completed successfully
+     */
+    isValid: boolean;
+    /**
+     * Set to true if the loading state completed with an error
+     */
+    isInvalid: boolean;
+    /**
+     * Set to true if the loading state is currently loading
+     */
+    isLoading: boolean;
+    /**
+     * Set to true if the loading state is currently active
+     *
+     * This is what you want to use to conditionally render (e.g. v-if) the loading component.
+     */
+    isActive: boolean;
+    /**
+     * Start the loading animation
+     */
+    start: () => void;
+    /**
+     * Set the loading state to true and complete successfully
+     */
+    validate: (opts?: LoadingCompletionOptions) => Promise<void>;
+    /**
+     * Set the loading state to true and complete with an error
+     */
+    invalidate: (opts?: LoadingCompletionOptions) => Promise<void>;
+    /**
+     * Clear the loading state
+     */
+    clear: (opts?: Pick<LoadingCompletionOptions, 'duration'>) => Promise<void>;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/ScalarLoading/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarLoading/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,wBAAwB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC5D;;OAEG;IACH,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,wBAAwB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC9D;;OAEG;IACH,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,wBAAwB,EAAE,UAAU,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CAC5E,CAAA"}

package/dist/components/ScalarLoading/useLoadingState.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Creates a reactive loading state for the ScalarLoading component
+ *
+ * @returns The loading state
+ */
+export declare function useLoadingState(): {
+    isValid: boolean;
+    isInvalid: boolean;
+    isLoading: boolean;
+    isActive: boolean;
+    start: () => void;
+    validate: (opts?: import("./types").LoadingCompletionOptions) => Promise<void>;
+    invalidate: (opts?: import("./types").LoadingCompletionOptions) => Promise<void>;
+    clear: (opts?: Pick<import("./types").LoadingCompletionOptions, "duration">) => Promise<void>;
+};
+//# sourceMappingURL=useLoadingState.d.ts.map

package/dist/components/ScalarLoading/useLoadingState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLoadingState.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarLoading/useLoadingState.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wBAAgB,eAAe;;;;;;mBAiCM,CAAC;qBAIL,CAAA;gBAIvB,CAAC;EASV"}

package/dist/components/ScalarLoading/useLoadingState.js

@@ -0,0 +1,39 @@
+import { reactive as l } from "vue";
+function r() {
+  return l({
+    isValid: !1,
+    isInvalid: !1,
+    isLoading: !1,
+    isActive: !1,
+    start() {
+      this.isLoading = !0, this.isActive = !0, this.isInvalid = !1, this.isValid = !1;
+    },
+    validate(t = {}) {
+      const { duration: i = 1100, persist: s = !1 } = t;
+      this.isLoading = !1, this.isInvalid = !1, this.isValid = !0, this.isActive = !0;
+      const e = s ? i : i - 300;
+      return new Promise(
+        (a) => setTimeout(s ? () => a() : () => this.clear().then(() => a()), e)
+      );
+    },
+    invalidate(t = {}) {
+      const { duration: i = 1100, persist: s = !1 } = t ?? {};
+      this.isLoading = !1, this.isValid = !1, this.isInvalid = !0, this.isActive = !0;
+      const e = s ? i : i - 300;
+      return new Promise(
+        (a) => setTimeout(s ? () => a() : () => this.clear().then(() => a()), e)
+      );
+    },
+    clear(t = {}) {
+      const { duration: i = 300 } = t;
+      return this.isValid = !1, this.isInvalid = !1, this.isLoading = !1, new Promise((s) => {
+        setTimeout(() => {
+          this.isActive = !1, s();
+        }, i);
+      });
+    }
+  });
+}
+export {
+  r as useLoadingState
+};

package/dist/components/ScalarSearchInput/ScalarSearchInput.vue.d.ts

@@ -12,14 +12,14 @@ import { type LoadingState } from '../ScalarLoading';
  * <ScalarSearchInput v-model="search" />
  */
 declare const _default: import("vue").DefineComponent<{
-    loading?: LoadingState;
+    loader?: LoadingState;
     label?: string;
 } & {
     modelValue?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<{
-    loading?: LoadingState;
+    loader?: LoadingState;
     label?: string;
 } & {
     modelValue?: string;

package/dist/components/ScalarSearchInput/ScalarSearchInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSearchInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"names":[],"mappings":"AAoFA,OAAO,EAAE,KAAK,YAAY,EAAiB,MAAM,kBAAkB,CAAA;AAGnE;;;;;;;;;;;GAWG;;cAGS,YAAY;YACd,MAAM;;iBAwBH,MAAM;;;;cAzBP,YAAY;YACd,MAAM;;iBAwBH,MAAM;;;;AA3BnB,wBA6JC"}
+{"version":3,"file":"ScalarSearchInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"names":[],"mappings":"AAoFA,OAAO,EAAE,KAAK,YAAY,EAAiB,MAAM,kBAAkB,CAAA;AAGnE;;;;;;;;;;;GAWG;;aAGQ,YAAY;YACb,MAAM;;iBAwBH,MAAM;;;;aAzBR,YAAY;YACb,MAAM;;iBAwBH,MAAM;;;;AA3BnB,wBA6JC"}