@scalar/components 0.10.1 → 0.11.1

package/dist/components/ScalarListbox/ScalarListbox.vue.js

@@ -0,0 +1,102 @@
+import { defineComponent as b, openBlock as i, createBlock as d, unref as t, withCtx as s, createVNode as a, mergeProps as x, createElementBlock as v, Fragment as g, renderList as y, createElementVNode as o, normalizeClass as m, toDisplayString as _, renderSlot as h } from "vue";
+import { Listbox as V, ListboxOptions as k, ListboxOption as z, ListboxButton as B } from "@headlessui/vue";
+import { cva as w, cx as L } from "../../cva.js";
+import O from "../ScalarFloating/ScalarFloating.vue.js";
+import $ from "../ScalarIcon/ScalarIcon.vue.js";
+const C = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, S = /* @__PURE__ */ o("div", { class: "absolute inset-0 -z-1 rounded bg-b-1 shadow-md brightness-lifted" }, null, -1), P = /* @__PURE__ */ b({
+  inheritAttrs: !1,
+  __name: "ScalarListbox",
+  props: {
+    options: {},
+    modelValue: {},
+    placement: {},
+    resize: { type: Boolean },
+    isOpen: { type: Boolean },
+    teleport: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(E) {
+    const u = w({
+      base: [
+        // Layout
+        "group",
+        "text-lef flex min-w-0 items-center gap-1.5 rounded px-2 py-1.5",
+        "first-of-type:mt-0.75 last-of-type:mb-0.75",
+        // Text / background style
+        "truncate bg-transparent text-c-1",
+        // Interaction
+        "cursor-pointer hover:bg-b-2"
+      ],
+      variants: {
+        selected: { true: "text-c-1" },
+        active: { true: "bg-b-2" },
+        disabled: { true: "pointer-events-none opacity-50" }
+      }
+    });
+    return (e, n) => (i(), d(t(V), {
+      as: "div",
+      class: "text-xs",
+      modelValue: e.modelValue,
+      "onUpdate:modelValue": n[0] || (n[0] = (r) => e.$emit("update:modelValue", r))
+    }, {
+      default: s(({ open: r }) => [
+        a(t(O), {
+          isOpen: r ?? e.isOpen,
+          placement: e.placement ?? "bottom-start",
+          resize: e.resize,
+          teleport: e.teleport
+        }, {
+          floating: s(({ width: c }) => [
+            a(t(k), x({
+              class: "relative flex w-40 flex-col p-0.75",
+              style: { width: c }
+            }, e.$attrs), {
+              default: s(() => [
+                (i(!0), v(g, null, y(e.options, (l) => (i(), d(t(z), {
+                  key: l.id,
+                  as: "template",
+                  disabled: l.disabled,
+                  value: l
+                }, {
+                  default: s(({ active: f, selected: p }) => [
+                    o("li", {
+                      class: m(
+                        t(L)(t(u)({ active: f, selected: p, disabled: l.disabled }))
+                      )
+                    }, [
+                      o("div", {
+                        class: m(["flex size-4 items-center justify-center rounded-full p-[3px] group-hover:shadow-border", p ? "bg-blue text-b-1" : "text-transparent"])
+                      }, [
+                        a(t($), {
+                          class: "relative top-[0.5px] size-2.5 stroke-[1.75]",
+                          icon: "Checkmark"
+                        })
+                      ], 2),
+                      o("span", C, _(l.label), 1)
+                    ], 2)
+                  ]),
+                  _: 2
+                }, 1032, ["disabled", "value"]))), 128)),
+                S
+              ]),
+              _: 2
+            }, 1040, ["style"])
+          ]),
+          default: s(() => [
+            a(t(B), { as: "template" }, {
+              default: s(() => [
+                h(e.$slots, "default")
+              ]),
+              _: 3
+            })
+          ]),
+          _: 2
+        }, 1032, ["isOpen", "placement", "resize", "teleport"])
+      ]),
+      _: 3
+    }, 8, ["modelValue"]));
+  }
+});
+export {
+  P as default
+};

package/dist/components/ScalarListbox/ScalarListbox.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ScalarListbox.vue.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,9 @@
+import o from "./ScalarLoading.vue2.js";
+import { useLoadingState as c } from "./ScalarLoading.vue2.js";
+import "./ScalarLoading.vue3.js";
+import a from "../../_virtual/_plugin-vue_export-helper.js";
+const f = /* @__PURE__ */ a(o, [["__scopeId", "data-v-47faceda"]]);
+export {
+  f as default,
+  c as useLoadingState
+};

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

@@ -0,0 +1,83 @@
+import { defineComponent as r, useCssVars as n, openBlock as s, createElementBlock as i, normalizeClass as l, unref as o, createElementVNode as c, createCommentVNode as d, createStaticVNode as h, reactive as p } from "vue";
+import { cx as g } from "../../cva.js";
+const m = /* @__PURE__ */ h('<path class="svg-path svg-check-mark" d="m 0 60 l 30 30 l 70 -80" data-v-47faceda></path><path class="svg-path svg-x-mark" d="m 50 50 l 40 -40" data-v-47faceda></path><path class="svg-path svg-x-mark" d="m 50 50 l 40 40" data-v-47faceda></path><path class="svg-path svg-x-mark" d="m 50 50 l -40 -40" data-v-47faceda></path><path class="svg-path svg-x-mark" d="m 50 50 l -40 40" data-v-47faceda></path>', 5), v = {
+  key: 0,
+  class: "circular-loader"
+};
+function w() {
+  return p({
+    isValid: !1,
+    isInvalid: !1,
+    isLoading: !1,
+    startLoading() {
+      this.isLoading = !0;
+    },
+    stopLoading() {
+      this.isLoading = !1;
+    },
+    validate(e = 800) {
+      this.isValid = !0;
+      const a = e - 300;
+      return new Promise(
+        (t) => setTimeout(() => this.clear().then(() => t(!0)), a)
+      );
+    },
+    invalidate(e = 1100) {
+      this.isInvalid = !0;
+      const a = e - 300;
+      return new Promise(
+        (t) => setTimeout(() => this.clear().then(() => t(!0)), a)
+      );
+    },
+    clear(e = 300) {
+      return this.isValid = !1, this.isInvalid = !1, this.isLoading = !1, new Promise((a) => {
+        setTimeout(() => {
+          a(!0);
+        }, e);
+      });
+    }
+  });
+}
+const k = /* @__PURE__ */ r({
+  __name: "ScalarLoading",
+  props: {
+    loadingState: {},
+    size: { default: "24px" }
+  },
+  setup(e) {
+    return n((a) => ({
+      d6cae758: a.size
+    })), (a, t) => a.loadingState ? (s(), i("div", {
+      key: 0,
+      class: l(o(g)("loader-wrapper"))
+    }, [
+      (s(), i("svg", {
+        class: l(["svg-loader", {
+          "icon-is-valid": a.loadingState.isValid,
+          "icon-is-invalid": a.loadingState.isInvalid
+        }]),
+        viewBox: "0 0 100 100",
+        xmlns: "http://www.w3.org/2000/svg",
+        "xmlns:xlink": "http://www.w3.org/1999/xlink"
+      }, [
+        m,
+        a.loadingState.isLoading ? (s(), i("g", v, [
+          c("circle", {
+            class: l(["loader-path", {
+              "loader-path-off": a.loadingState.isValid || a.loadingState.isInvalid
+            }]),
+            cx: "50",
+            cy: "50",
+            fill: "none",
+            r: "20",
+            "stroke-width": "2"
+          }, null, 2)
+        ])) : d("", !0)
+      ], 2))
+    ], 2)) : d("", !0);
+  }
+});
+export {
+  k as default,
+  w as useLoadingState
+};

package/dist/components/ScalarLoading/ScalarLoading.vue3.js

@@ -0,0 +1,4 @@
+const e = "";
+export {
+  e as default
+};

package/dist/components/ScalarMarkdown/ScalarMarkdown.vue.js

@@ -0,0 +1,25 @@
+import { defineComponent as r, computed as a, onServerPrefetch as n, openBlock as m, createElementBlock as s } from "vue";
+import { htmlFromMarkdown as c } from "@scalar/code-highlight";
+import "@scalar/code-highlight/css/markdown.css";
+import { sleep as l } from "../../helpers/sleep.js";
+const p = ["innerHTML"], v = /* @__PURE__ */ r({
+  __name: "ScalarMarkdown",
+  props: {
+    value: {},
+    withImages: { type: Boolean, default: !1 }
+  },
+  setup(o) {
+    const e = o, t = a(
+      () => c(e.value ?? "", {
+        removeTags: e.withImages ? [] : ["img", "picture"]
+      })
+    );
+    return n(async () => await l(1)), (i, u) => (m(), s("div", {
+      class: "markdown",
+      innerHTML: t.value
+    }, null, 8, p));
+  }
+});
+export {
+  v as default
+};

package/dist/components/ScalarMarkdown/ScalarMarkdown.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ScalarMarkdown.vue.js";
+export {
+  f as default
+};

package/dist/components/ScalarModal/ScalarModal.vue.js

@@ -0,0 +1,9 @@
+import o from "./ScalarModal.vue2.js";
+import { useModal as s } from "./ScalarModal.vue2.js";
+import "./ScalarModal.vue3.js";
+import r from "../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-f4327857"]]);
+export {
+  m as default,
+  s as useModal
+};

package/dist/components/ScalarModal/ScalarModal.vue2.js

@@ -0,0 +1,108 @@
+import { defineComponent as c, openBlock as l, createBlock as s, unref as a, withCtx as o, createElementVNode as f, normalizeClass as t, createVNode as u, normalizeStyle as v, createTextVNode as h, toDisplayString as y, createCommentVNode as b, createElementBlock as g, renderSlot as i, reactive as x } from "vue";
+import { Dialog as w, DialogPanel as z, DialogTitle as C, DialogDescription as k } from "@headlessui/vue";
+import { cva as d, cx as n } from "../../cva.js";
+const W = () => x({
+  open: !1,
+  show() {
+    this.open = !0;
+  },
+  hide() {
+    this.open = !1;
+  }
+}), $ = /* @__PURE__ */ c({
+  __name: "ScalarModal",
+  props: {
+    state: {},
+    title: {},
+    bodyClass: {},
+    maxWidth: {},
+    size: { default: "md" },
+    variant: {}
+  },
+  setup(D) {
+    const m = d({
+      base: [
+        "scalar-modal",
+        "col relative mx-auto mb-0 mt-20 w-full rounded-lg bg-b-2 text-left leading-snug text-c-1 opacity-0"
+      ].join(" "),
+      variants: {
+        size: {
+          xs: "max-w-screen-xs",
+          sm: "max-w-screen-sm",
+          md: "max-w-screen-md",
+          lg: "max-w-screen-lg",
+          full: "mt-0 overflow-hidden"
+        },
+        variant: {
+          history: "scalar-modal-history bg-b-1",
+          search: "scalar-modal-search"
+        }
+      }
+    }), p = d({
+      base: [
+        "scalar-modal-body",
+        "relative max-h-[calc(100dvh-240px)] overflow-y-auto rounded-lg bg-b-1 px-6 pb-4 pt-6"
+      ].join(" "),
+      variants: {
+        variant: {
+          history: "pt-3",
+          search: "col max-h-[440px] overflow-hidden p-0"
+        }
+      }
+    });
+    return (e, r) => (l(), s(a(w), {
+      open: e.state.open,
+      onClose: r[0] || (r[0] = (B) => e.state.hide())
+    }, {
+      default: o(() => [
+        f("div", {
+          class: t(
+            a(n)(
+              "scalar-modal-layout fixed left-0 top-0",
+              "z-[1001] h-[100dvh] w-[100dvw]",
+              "bg-backdrop opacity-0",
+              e.size === "full" && "flex"
+            )
+          )
+        }, [
+          u(a(z), {
+            class: t(a(m)({ size: e.size, variant: e.variant })),
+            style: v({ maxWidth: e.maxWidth })
+          }, {
+            default: o(() => [
+              e.title ? (l(), s(a(C), {
+                key: 0,
+                class: t(["scalar-modal-header font-semiBold m-0 rounded-lg px-6 py-3 text-left text-xs text-c-1", { "pb-0 pt-6": e.variant === "history" }])
+              }, {
+                default: o(() => [
+                  h(y(e.title), 1)
+                ]),
+                _: 1
+              }, 8, ["class"])) : b("", !0),
+              e.size === "full" ? (l(), g("div", {
+                key: 1,
+                class: t(e.bodyClass)
+              }, [
+                i(e.$slots, "default", {}, void 0, !0)
+              ], 2)) : (l(), s(a(k), {
+                key: 2,
+                class: t(a(n)(e.bodyClass, a(p)({ variant: e.variant })))
+              }, {
+                default: o(() => [
+                  i(e.$slots, "default", {}, void 0, !0)
+                ]),
+                _: 3
+              }, 8, ["class"]))
+            ]),
+            _: 3
+          }, 8, ["class", "style"])
+        ], 2)
+      ]),
+      _: 3
+    }, 8, ["open"]));
+  }
+});
+export {
+  $ as default,
+  W as useModal
+};

package/dist/components/ScalarModal/ScalarModal.vue3.js

@@ -0,0 +1,4 @@
+const _ = "";
+export {
+  _ as default
+};

package/dist/components/ScalarPopover/ScalarPopover.vue.js

@@ -0,0 +1,49 @@
+import { defineComponent as i, openBlock as f, createBlock as d, unref as t, withCtx as o, createVNode as l, mergeProps as r, renderSlot as s, createElementVNode as u } from "vue";
+import { Popover as m, PopoverPanel as c, PopoverButton as _ } from "@headlessui/vue";
+import v from "../ScalarFloating/ScalarFloating.vue.js";
+const h = /* @__PURE__ */ u("div", { class: "absolute inset-0 -z-1 rounded bg-b-1 shadow-lg brightness-lifted" }, null, -1), b = /* @__PURE__ */ i({
+  inheritAttrs: !1,
+  __name: "ScalarPopover",
+  props: {
+    placement: {},
+    resize: { type: Boolean },
+    isOpen: { type: Boolean },
+    teleport: { type: Boolean }
+  },
+  setup(B) {
+    return (e, P) => (f(), d(t(m), null, {
+      default: o(({ open: p }) => [
+        l(t(v), r(e.$props, {
+          isOpen: p ?? e.isOpen,
+          teleport: e.teleport
+        }), {
+          floating: o(({ width: a, height: n }) => [
+            l(t(c), r({
+              class: "relative flex flex-col p-0.75",
+              style: { width: a, height: n }
+            }, e.$attrs), {
+              default: o(() => [
+                s(e.$slots, "popover"),
+                h
+              ]),
+              _: 2
+            }, 1040, ["style"])
+          ]),
+          default: o(() => [
+            l(t(_), { as: "template" }, {
+              default: o(() => [
+                s(e.$slots, "default")
+              ]),
+              _: 3
+            })
+          ]),
+          _: 2
+        }, 1040, ["isOpen", "teleport"])
+      ]),
+      _: 3
+    }));
+  }
+});
+export {
+  b as default
+};

package/dist/components/ScalarPopover/ScalarPopover.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ScalarPopover.vue.js";
+export {
+  f as default
+};

package/dist/components/ScalarSearchInput/ScalarSearchInput.vue.js

@@ -0,0 +1,62 @@
+import { defineComponent as d, computed as m, useAttrs as i, openBlock as a, createElementBlock as p, mergeProps as f, unref as l, createElementVNode as n, renderSlot as g, createTextVNode as h, createBlock as s, createCommentVNode as V } from "vue";
+import { cx as b } from "../../cva.js";
+import S from "../ScalarLoading/ScalarLoading.vue.js";
+import k from "../ScalarIconButton/ScalarIconButton.vue.js";
+const v = { class: "sr-only" }, N = ["value"], E = /* @__PURE__ */ d({
+  inheritAttrs: !1,
+  __name: "ScalarSearchInput",
+  props: {
+    loading: {},
+    modelValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(_, { emit: c }) {
+    const o = c;
+    function u(e) {
+      o("update:modelValue", e.target.value);
+    }
+    const r = m(() => {
+      const { class: e, ...t } = i();
+      return { className: e || "", rest: t };
+    });
+    return (e, t) => (a(), p("label", f(r.value.rest, {
+      class: l(b)(
+        "flex rounded border bg-b-1 text-sm font-medium focus-within:border-c-1",
+        r.value.className
+      )
+    }), [
+      n("span", v, [
+        g(e.$slots, "label", {}, () => [
+          h("Enter search")
+        ])
+      ]),
+      n("input", {
+        autocapitalize: "off",
+        autocomplete: "off",
+        autocorrect: "off",
+        class: "flex-1 rounded bg-transparent p-3 outline-none",
+        placeholder: "Search...",
+        spellcheck: "false",
+        type: "text",
+        value: e.modelValue,
+        onInput: u
+      }, null, 40, N),
+      e.loading && e.loading.isLoading ? (a(), s(l(S), {
+        key: 0,
+        class: "mr-3 self-center",
+        loadingState: e.loading,
+        size: "20px"
+      }, null, 8, ["loadingState"])) : e.modelValue ? (a(), s(l(k), {
+        key: 1,
+        class: "self-center",
+        icon: "Close",
+        label: "Clear Search",
+        size: "md",
+        onClick: t[0] || (t[0] = (C) => o("update:modelValue", ""))
+      })) : V("", !0)
+    ], 16));
+  }
+});
+export {
+  E as default
+};

package/dist/components/ScalarSearchInput/ScalarSearchInput.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ScalarSearchInput.vue.js";
+export {
+  f as default
+};

package/dist/components/ScalarSearchResults/ScalarSearchResultItem.vue.js

@@ -0,0 +1,57 @@
+import { defineComponent as i, computed as d, useAttrs as m, openBlock as o, createElementBlock as r, createElementVNode as t, mergeProps as p, unref as a, renderSlot as s, createBlock as u, createCommentVNode as l } from "vue";
+import { cx as f } from "../../cva.js";
+import _ from "../ScalarIcon/ScalarIcon.vue.js";
+const h = { class: "contents" }, v = { class: "text-c-3 group-hover:text-c-1" }, x = { class: "flex min-w-0 flex-1 flex-col gap-0.75" }, g = { class: "flex items-center gap-1" }, $ = { class: "flex-1 truncate text-sm font-medium" }, k = {
+  key: 0,
+  class: "text-xs text-c-2"
+}, N = { class: "truncate text-xs text-c-2" }, A = /* @__PURE__ */ i({
+  inheritAttrs: !1,
+  __name: "ScalarSearchResultItem",
+  props: {
+    icon: {},
+    active: { type: Boolean }
+  },
+  setup(b) {
+    const c = d(() => {
+      const { class: e, ...n } = m();
+      return { className: e || "", rest: n };
+    });
+    return (e, n) => (o(), r("li", h, [
+      t("a", p(c.value.rest, {
+        class: a(f)(
+          "group flex cursor-pointer gap-3 rounded px-3 py-1.5 no-underline hover:bg-b-2",
+          {
+            "bg-b-2": e.active
+          },
+          c.value.className
+        )
+      }), [
+        t("div", v, [
+          s(e.$slots, "icon", {}, () => [
+            e.icon ? (o(), u(a(_), {
+              key: 0,
+              icon: e.icon,
+              size: "sm"
+            }, null, 8, ["icon"])) : l("", !0)
+          ])
+        ]),
+        t("div", x, [
+          t("div", g, [
+            t("div", $, [
+              s(e.$slots, "default")
+            ]),
+            e.$slots.addon ? (o(), r("div", k, [
+              s(e.$slots, "addon")
+            ])) : l("", !0)
+          ]),
+          t("div", N, [
+            s(e.$slots, "description")
+          ])
+        ])
+      ], 16)
+    ]));
+  }
+});
+export {
+  A as default
+};

package/dist/components/ScalarSearchResults/ScalarSearchResultItem.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ScalarSearchResultItem.vue.js";
+export {
+  f as default
+};

package/dist/components/ScalarSearchResults/ScalarSearchResultList.vue.js

@@ -0,0 +1,29 @@
+import { defineComponent as r, computed as a, useAttrs as n, openBlock as c, createElementBlock as m, mergeProps as u, unref as p, renderSlot as l, createCommentVNode as f, createElementVNode as t } from "vue";
+import { cx as d } from "../../cva.js";
+const i = /* @__PURE__ */ t("div", { class: "flex flex-col items-center gap-2 px-3 py-4" }, [
+  /* @__PURE__ */ t("div", { class: "rotate-90 text-lg font-bold" }, ":("),
+  /* @__PURE__ */ t("div", { class: "text-sm font-medium text-c-2" }, "No results found")
+], -1), v = /* @__PURE__ */ r({
+  inheritAttrs: !1,
+  __name: "ScalarSearchResultList",
+  props: {
+    noResults: { type: Boolean }
+  },
+  setup(x) {
+    const s = a(() => {
+      const { class: e, ...o } = n();
+      return { className: e || "", rest: o };
+    });
+    return (e, o) => (c(), m("ul", u(s.value.rest, {
+      class: p(d)("flex flex-col", s.value.className)
+    }), [
+      e.noResults ? l(e.$slots, "noResults", { key: 0 }, () => [
+        i
+      ]) : f("", !0),
+      l(e.$slots, "default")
+    ], 16));
+  }
+});
+export {
+  v as default
+};

package/dist/components/ScalarSearchResults/ScalarSearchResultList.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ScalarSearchResultList.vue.js";
+export {
+  f as default
+};

package/dist/components/ScalarTextField/ScalarTextField.vue.js

@@ -0,0 +1,7 @@
+import o from "./ScalarTextField.vue2.js";
+import "./ScalarTextField.vue3.js";
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-94574cc9"]]);
+export {
+  e as default
+};