@thl-ui/vue 0.0.0-stage → 0.1.0

package/dist/components/data.js

@@ -0,0 +1,911 @@
+import { defineComponent as p, computed as P, h as e, ref as T, watch as L, onMounted as K, onBeforeUnmount as W } from "vue";
+import { bem as f, addMonths as j, weekdayNames as Y, monthGrid as H, toISODate as J, cx as M, createTable as Q, pageSizeOptions as X } from "@thl-ui/core";
+import { barChart as Z, colorAt as ee, formatTick as I, lineChart as ae, pieChart as te, sparkline as le } from "@thl-ui/charts";
+import { usePrefix as g, useI18n as S, useThlContext as oe, useDefaults as re, useStore as ne } from "../context.js";
+import { icon as x, any as A, str as D } from "./util.js";
+import { ThlCheckbox as F } from "./form.js";
+import { ThlPagination as se } from "./nav.js";
+import { ThlButton as B, ThlLabel as ie } from "./basic.js";
+import { ThlProgress as ue } from "./overlay.js";
+const fe = /* @__PURE__ */ p({
+  name: "ThlTable",
+  props: { striped: Boolean, hover: Boolean, bordered: A(), compact: Boolean, color: String, full: String },
+  setup(a, { slots: i }) {
+    const r = g();
+    return () => e(
+      "div",
+      { class: `${r.value}-table-wrap` },
+      e(
+        "table",
+        {
+          class: f(
+            "table",
+            r.value
+          )({
+            striped: a.striped,
+            hover: a.hover,
+            bordered: a.bordered === !0 || a.bordered === "",
+            compact: a.compact,
+            [`color-${a.color}`]: !!a.color,
+            [`full-${a.full}`]: !!a.full,
+            [`bordered-${a.bordered}`]: typeof a.bordered == "string" && a.bordered !== ""
+          })
+        },
+        i.default?.()
+      )
+    );
+  }
+}), xe = /* @__PURE__ */ p({
+  name: "ThlDataTable",
+  props: {
+    data: { type: Array, required: !0 },
+    columns: { type: Array, required: !0 },
+    rowKey: A(),
+    pageSize: Number,
+    paginate: { type: Boolean, default: !0 },
+    searchable: { type: Boolean, default: !0 },
+    selectable: Boolean,
+    striped: { type: Boolean, default: void 0 },
+    hover: { type: Boolean, default: void 0 },
+    bordered: { type: Boolean, default: void 0 },
+    color: String,
+    stack: Boolean,
+    compact: Boolean,
+    emptyText: String,
+    manual: Boolean,
+    total: Number,
+    loading: Boolean
+  },
+  emits: ["selection-change", "cell-edit", "query-change"],
+  setup(a, { slots: i, emit: r }) {
+    const t = g(), { t: n } = S(), o = re("Table", a), l = Q({
+      data: a.data,
+      columns: a.columns,
+      rowKey: a.rowKey,
+      pageSize: o.value.pageSize ?? 10,
+      paginate: a.paginate,
+      manual: a.manual,
+      total: a.total
+    });
+    L(
+      () => a.data,
+      (c) => l.setData(c)
+    ), L(
+      () => a.columns,
+      (c) => l.setColumns(c)
+    );
+    const s = ne(l.state);
+    L(
+      () => s.value.selected,
+      () => r("selection-change", l.selectedRows())
+    ), L(
+      () => [s.value.page, s.value.pageSize, s.value.sort, s.value.search],
+      () => r("query-change", { page: s.value.page, pageSize: s.value.pageSize, sort: s.value.sort, search: s.value.search })
+    );
+    const v = T(null), d = () => {
+      if (!v.value) return;
+      const c = v.value, y = l.updateCell(c.row, c.key, c.value);
+      r("cell-edit", { rowKey: c.row, key: c.key, value: c.value, data: y }), v.value = null;
+    }, u = (c) => c.hideBelow && `${t.value}-col-hidden-${c.hideBelow >= 1170 ? "lg" : c.hideBelow >= 1024 ? "md" : "sm"}`;
+    return () => {
+      s.value;
+      const c = s.value, y = l.view(), m = f("table", t.value), C = l.allSelected(), b = a.manual ? a.total ?? a.data.length : y.total, $ = b === 0 ? 0 : (c.page - 1) * c.pageSize + 1, U = Math.min(b, c.page * c.pageSize), V = a.columns.length + (a.selectable ? 1 : 0);
+      return e("div", { "aria-busy": a.loading || void 0 }, [
+        e("div", { class: `${t.value}-table-toolbar` }, [
+          a.paginate ? e("label", [
+            n("table.show", { n: "\0" }).split("\0")[0],
+            e(
+              "select",
+              {
+                class: `${t.value}-input ${t.value}-input--size-sm`,
+                value: c.pageSize,
+                "aria-label": n("pagination.pageSize", { size: c.pageSize }),
+                onChange: (h) => l.setPageSize(Number(h.target.value))
+              },
+              X(o.value.pageSizes, c.pageSize).map((h) => e("option", { value: h, selected: h === c.pageSize }, h))
+            ),
+            n("table.show", { n: "\0" }).split("\0")[1]
+          ]) : e("span"),
+          e("div", { class: `${t.value}-flex` }, [
+            i.toolbar?.(),
+            a.searchable ? e("label", [
+              n("table.search"),
+              e("input", {
+                type: "search",
+                class: `${t.value}-input ${t.value}-input--size-sm`,
+                value: c.search,
+                "aria-label": n("common.search"),
+                onInput: (h) => l.setSearch(h.target.value)
+              })
+            ]) : null
+          ])
+        ]),
+        e(
+          "div",
+          { class: `${t.value}-table-wrap` },
+          e(
+            "table",
+            {
+              class: m({
+                striped: o.value.striped,
+                hover: o.value.hover,
+                bordered: o.value.bordered,
+                compact: a.compact,
+                stack: a.stack,
+                [`color-${a.color}`]: !!a.color
+              })
+            },
+            [
+              e(
+                "thead",
+                e("tr", [
+                  a.selectable ? e(
+                    "th",
+                    { class: m("check") },
+                    e(F, {
+                      modelValue: C === !0,
+                      indeterminate: C === "indeterminate",
+                      "aria-label": n("common.selectAll"),
+                      onChange: () => l.toggleAll()
+                    })
+                  ) : null,
+                  ...a.columns.map((h) => {
+                    const k = l.sortDir(h.key);
+                    return e(
+                      "th",
+                      {
+                        key: h.key,
+                        style: { width: typeof h.width == "number" ? `${h.width}px` : h.width, textAlign: h.align },
+                        "aria-sort": k ? k === "asc" ? "ascending" : "descending" : void 0,
+                        class: u(h)
+                      },
+                      h.sortable ? e("button", { type: "button", class: M(m("sort"), k && `is-${k}`), onClick: () => l.toggleSort(h.key) }, [
+                        h.title ?? h.key,
+                        e("span", { class: m("sort-icon"), "aria-hidden": "true" }, [e("span", "▲"), e("span", "▼")])
+                      ]) : h.title ?? h.key
+                    );
+                  })
+                ])
+              ),
+              e(
+                "tbody",
+                y.rows.length === 0 ? [e("tr", { class: m("empty") }, e("td", { colspan: V }, a.loading ? n("common.loading") : a.emptyText ?? n("table.empty")))] : y.rows.map(
+                  ({ row: h, key: k }, _) => e("tr", { key: k, class: M({ "is-selected": l.isSelected(k) }) }, [
+                    a.selectable ? e(
+                      "td",
+                      { class: m("check") },
+                      e(F, {
+                        modelValue: l.isSelected(k),
+                        "aria-label": n("common.selectRow", { n: String(k) }),
+                        onChange: () => l.toggleRow(k)
+                      })
+                    ) : null,
+                    ...a.columns.map((w) => {
+                      const q = l.value(w, h), G = v.value && v.value.row === k && v.value.key === w.key, E = i[`cell-${w.key}`] ? i[`cell-${w.key}`]({ row: h, value: q, index: _ }) : String(q ?? "");
+                      return e(
+                        "td",
+                        { key: w.key, "data-label": w.title ?? w.key, style: { textAlign: w.align }, class: u(w) },
+                        G ? e("input", {
+                          class: `${t.value}-input ${t.value}-input--size-sm ${m("edit-input")}`,
+                          value: v.value.value,
+                          onVnodeMounted: (z) => z.el.focus(),
+                          onInput: (z) => v.value.value = z.target.value,
+                          onBlur: d,
+                          onKeydown: (z) => {
+                            z.key === "Enter" && d(), z.key === "Escape" && (v.value = null);
+                          }
+                        }) : w.editable ? e(
+                          "span",
+                          {
+                            role: "button",
+                            tabindex: 0,
+                            class: m("editable"),
+                            onClick: () => v.value = { row: k, key: w.key, value: String(q ?? "") },
+                            onKeydown: (z) => z.key === "Enter" && (v.value = { row: k, key: w.key, value: String(q ?? "") })
+                          },
+                          E
+                        ) : E
+                      );
+                    })
+                  ])
+                )
+              )
+            ]
+          )
+        ),
+        a.paginate ? e("div", { class: `${t.value}-table-footer` }, [
+          e("span", [n("pagination.showing", { from: $, to: U, total: b }), c.selected.size ? ` · ${n("table.selected", { count: c.selected.size })}` : ""]),
+          e(se, { page: c.page, total: b, pageSize: c.pageSize, size: "sm", "onUpdate:page": l.setPage })
+        ]) : null
+      ]);
+    };
+  }
+}), ke = /* @__PURE__ */ p({
+  name: "ThlList",
+  props: {
+    items: {
+      type: Array,
+      required: !0
+    },
+    hover: Boolean
+  },
+  emits: ["item-click"],
+  setup(a, { emit: i, slots: r }) {
+    const t = g();
+    return () => {
+      const n = f("list", t.value);
+      return e(
+        "ul",
+        { class: n({ hover: a.hover }) },
+        a.items.map(
+          (o, l) => e(
+            "li",
+            {
+              key: o.key ?? l,
+              class: n("item"),
+              tabindex: a.hover ? 0 : void 0,
+              onClick: () => i("item-click", o),
+              onKeydown: (s) => s.key === "Enter" && i("item-click", o)
+            },
+            [
+              o.avatar ? e("span", { class: `${t.value}-avatar` }, e("img", { src: o.avatar, alt: "" })) : null,
+              o.icon ? e("span", { class: n("icon", { [o.iconColor ?? "primary"]: !0 }) }, x(o.icon)) : null,
+              e("div", { class: n("body") }, [e("p", { class: n("title") }, o.title), o.description ? e("p", { class: n("desc") }, o.description) : null]),
+              r.meta ? r.meta({ item: o }) : o.meta ? e("span", { class: n("meta") }, o.meta) : null
+            ]
+          )
+        )
+      );
+    };
+  }
+}), we = /* @__PURE__ */ p({
+  name: "ThlGallery",
+  props: { images: { type: Array, required: !0 } },
+  setup(a) {
+    const i = g(), { t: r } = S(), t = T(null), n = (o) => {
+      const l = t.value;
+      if (l === null) return;
+      const s = a.images.length;
+      o.key === "Escape" && (t.value = null), o.key === "ArrowRight" && (t.value = (l + 1) % s), o.key === "ArrowLeft" && (t.value = (l - 1 + s) % s);
+    };
+    return K(() => document.addEventListener("keydown", n)), W(() => document.removeEventListener("keydown", n)), () => {
+      const o = f("gallery", i.value), l = f("lightbox", i.value), s = a.images.length;
+      return [
+        e(
+          "div",
+          { class: o() },
+          a.images.map(
+            (v, d) => e(
+              "button",
+              { key: d, type: "button", class: o("item"), onClick: () => t.value = d },
+              e("img", { src: v.thumb ?? v.src, alt: v.alt ?? "", loading: "lazy" })
+            )
+          )
+        ),
+        t.value !== null ? e("div", { class: l(), role: "dialog", "aria-modal": "true", onClick: (v) => v.target === v.currentTarget && (t.value = null) }, [
+          e("img", { src: a.images[t.value].src, alt: a.images[t.value].alt ?? "" }),
+          e("button", { type: "button", class: l("close"), onClick: () => t.value = null, "aria-label": r("common.close") }, "×"),
+          e(
+            "button",
+            { type: "button", class: l("nav", { prev: !0 }), onClick: () => t.value = (t.value - 1 + s) % s, "aria-label": r("common.previous") },
+            x("chevron-left")
+          ),
+          e(
+            "button",
+            { type: "button", class: l("nav", { next: !0 }), onClick: () => t.value = (t.value + 1) % s, "aria-label": r("common.next") },
+            x("chevron-right")
+          ),
+          a.images[t.value].caption ? e("div", { class: l("caption") }, a.images[t.value].caption) : null
+        ]) : null
+      ];
+    };
+  }
+}), $e = /* @__PURE__ */ p({
+  name: "ThlInfoBox",
+  props: { icon: String, value: A(), title: String, color: D("primary"), filled: Boolean, soft: Boolean },
+  setup(a, { slots: i }) {
+    const r = g();
+    return () => {
+      const t = f("info-box", r.value);
+      return e("div", { class: t({ [a.color]: !0, filled: a.filled, soft: a.soft }) }, [
+        a.icon ? e("span", { class: t("icon") }, x(a.icon)) : null,
+        e("div", { class: t("body") }, [
+          e("div", { class: t("value") }, a.value),
+          e("p", { class: t("title") }, a.title),
+          i.footer ? [e("span", { class: t("line") }), e("div", { class: t("foot") }, i.footer())] : null
+        ])
+      ]);
+    };
+  }
+}), Te = /* @__PURE__ */ p({
+  name: "ThlStatBox",
+  props: {
+    title: String,
+    value: A(),
+    icon: String,
+    color: D("primary"),
+    trend: String,
+    delta: String,
+    progress: Number
+  },
+  setup(a, { slots: i }) {
+    const r = g();
+    return () => {
+      const t = f("stat", r.value);
+      return e("div", { class: t({ [a.color]: !0 }) }, [
+        e("div", { class: t("head") }, [e("h2", { class: t("title") }, a.title), a.icon ? e("span", { class: t("icon") }, x(a.icon)) : null]),
+        e("div", { class: t("value") }, [
+          a.value,
+          a.delta ? e("span", { class: t("delta", { [a.trend ?? "up"]: !0 }) }, [x(a.trend === "down" ? "trending-down" : "trending-up"), " ", a.delta]) : null
+        ]),
+        a.progress !== void 0 ? e(ue, { value: a.progress, color: a.color, size: "sm" }) : null,
+        i.default?.()
+      ]);
+    };
+  }
+}), Se = /* @__PURE__ */ p({
+  name: "ThlColorBox",
+  props: { color: D("primary"), icon: String, label: String, value: A() },
+  setup(a, { slots: i }) {
+    const r = g();
+    return () => {
+      const t = f("color-box", r.value);
+      return e("div", { class: t({ [a.color]: !0 }) }, [
+        a.label ? e("div", { class: t("label") }, a.label) : null,
+        a.value !== void 0 ? e("div", { class: t("value") }, a.value) : null,
+        i.default?.(),
+        a.icon ? e("span", { class: t("icon") }, x(a.icon)) : null
+      ]);
+    };
+  }
+}), Ce = /* @__PURE__ */ p({
+  name: "ThlStatsRow",
+  props: { items: { type: Array, required: !0 } },
+  setup(a) {
+    const i = g();
+    return () => {
+      const r = f("stats-row", i.value);
+      return e(
+        "div",
+        { class: r() },
+        a.items.map((t, n) => e("div", { key: n, class: r("item") }, [e("div", { class: r("label") }, t.label), e("b", t.value)]))
+      );
+    };
+  }
+}), ze = /* @__PURE__ */ p({
+  name: "ThlPricingTable",
+  props: { plans: { type: Array, required: !0 } },
+  emits: ["select"],
+  setup(a, { emit: i }) {
+    const r = g(), { t } = S();
+    return () => {
+      const n = f("pricing-plan", r.value);
+      return e(
+        "div",
+        { class: `${r.value}-pricing` },
+        a.plans.map(
+          (o, l) => e("div", { key: l, class: n({ featured: o.featured }) }, [
+            o.tag ? e("div", { class: n("tag") }, o.tag) : null,
+            e("div", { class: n("header") }, [
+              e("h2", o.name),
+              e("div", { class: n("price") }, [e("sup", o.currency ?? "$"), o.price]),
+              e("p", { class: n("period") }, o.period ?? t("pages.pricing.perMonth"))
+            ]),
+            e(
+              "ul",
+              { class: n("features") },
+              o.features.map((s, v) => e("li", { key: v, class: n("feature") }, [x(s.icon), s.text]))
+            ),
+            e(
+              "div",
+              { class: n("action") },
+              e(
+                B,
+                { variant: o.ctaVariant ?? (o.featured ? "danger" : "success"), size: o.featured ? "lg" : void 0, onClick: () => i("select", o, l) },
+                () => o.cta ?? t("pages.pricing.signUp")
+              )
+            )
+          ])
+        )
+      );
+    };
+  }
+}), Be = /* @__PURE__ */ p({
+  name: "ThlUserCard",
+  props: { image: { type: String, required: !0 }, name: String, subtitle: String },
+  setup(a, { slots: i }) {
+    const r = g();
+    return () => {
+      const t = f("user-card", r.value);
+      return e("div", { class: t() }, [
+        e("div", { class: t("media"), tabindex: i.actions ? 0 : void 0 }, [
+          e("img", { src: a.image, alt: "" }),
+          i.actions ? e("div", { class: t("overlay") }, i.actions()) : null
+        ]),
+        e("div", { class: t("content") }, [e("h2", a.name), a.subtitle ? e("small", a.subtitle) : null])
+      ]);
+    };
+  }
+}), De = /* @__PURE__ */ p({
+  name: "ThlProfileCard",
+  props: { cover: String, avatar: String, name: String, email: String, stats: Array },
+  setup(a, { slots: i }) {
+    const r = g();
+    return () => {
+      const t = f("profile-card", r.value);
+      return e("div", { class: t() }, [
+        e("div", { class: t("cover") }, [
+          a.cover ? e("img", { src: a.cover, alt: "" }) : null,
+          e("div", { class: t("overlay") }, [
+            a.avatar ? e("img", {
+              src: a.avatar,
+              alt: "",
+              style: { width: "80px", height: "80px", borderRadius: "50%", border: "3px solid #fff", objectFit: "cover" }
+            }) : null,
+            e("h2", a.name),
+            a.email ? e("div", a.email) : null
+          ])
+        ]),
+        a.stats ? e(
+          "div",
+          { class: t("stats") },
+          a.stats.map((n, o) => e("div", { key: o }, [e("b", n.value), e("small", n.label)]))
+        ) : null,
+        i.default ? e("div", { class: t("body") }, i.default()) : null
+      ]);
+    };
+  }
+}), Ae = /* @__PURE__ */ p({
+  name: "ThlChat",
+  props: {
+    messages: {
+      type: Array,
+      required: !0
+    },
+    composer: Boolean
+  },
+  emits: ["send"],
+  setup(a, { emit: i }) {
+    const r = g(), { t } = S(), n = T("");
+    return () => {
+      const o = f("chat", r.value);
+      return e("div", [
+        e(
+          "ul",
+          { class: o(), "aria-live": "polite" },
+          a.messages.map(
+            (l) => e("li", { key: l.id, class: o("msg", { me: l.me }) }, [
+              l.avatar ? e("img", { src: l.avatar, alt: "", style: { width: "36px", height: "36px", borderRadius: "50%", objectFit: "cover" } }) : null,
+              e("div", [
+                l.me ? null : e("div", { class: o("name") }, l.from),
+                e("div", { class: o("bubble") }, l.text),
+                l.time ? e("div", { class: o("time") }, l.time) : null
+              ])
+            ])
+          )
+        ),
+        a.composer ? e(
+          "form",
+          {
+            class: o("composer"),
+            onSubmit: (l) => {
+              l.preventDefault(), n.value.trim() && (i("send", n.value.trim()), n.value = "");
+            }
+          },
+          [
+            e("input", {
+              class: `${r.value}-input`,
+              value: n.value,
+              onInput: (l) => n.value = l.target.value,
+              placeholder: `${t("layout.messages")}...`,
+              "aria-label": t("layout.messages")
+            }),
+            e(B, { type: "submit", variant: "primary", circle: !0, "aria-label": t("pages.inbox.send") }, () => x("send"))
+          ]
+        ) : null
+      ]);
+    };
+  }
+}), qe = /* @__PURE__ */ p({
+  name: "ThlTodoList",
+  props: {
+    items: { type: Array, required: !0 },
+    addable: Boolean
+  },
+  emits: ["toggle", "remove", "add"],
+  setup(a, { emit: i }) {
+    const r = g(), { t } = S(), n = T("");
+    return () => {
+      const o = f("todo", r.value);
+      return e("div", [
+        e(
+          "ul",
+          { class: o() },
+          a.items.map(
+            (l) => e("li", { key: l.id, class: M(o("item"), { "is-done": l.done }) }, [
+              e("label", { class: `${r.value}-check`, style: { margin: 0 } }, [
+                e("input", {
+                  type: "checkbox",
+                  class: `${r.value}-check__input`,
+                  checked: !!l.done,
+                  "aria-label": `${t("common.toggleDone")}: ${l.text}`,
+                  onChange: () => i("toggle", l.id)
+                }),
+                e("span", { class: `${r.value}-check__box` })
+              ]),
+              e("span", { class: o("text") }, l.text),
+              l.badge ? e(ie, { color: l.badge.color ?? "info", rounded: !0 }, () => l.badge.text) : null,
+              e("button", { type: "button", class: o("remove"), onClick: () => i("remove", l.id), "aria-label": t("common.delete") }, x("trash-2"))
+            ])
+          )
+        ),
+        a.addable ? e(
+          "form",
+          {
+            class: `${r.value}-flex ${r.value}-mt-3`,
+            style: { flexWrap: "nowrap" },
+            onSubmit: (l) => {
+              l.preventDefault(), n.value.trim() && (i("add", n.value.trim()), n.value = "");
+            }
+          },
+          [
+            e("input", {
+              class: `${r.value}-input`,
+              value: n.value,
+              onInput: (l) => n.value = l.target.value,
+              placeholder: `${t("common.add")}...`,
+              "aria-label": t("common.add")
+            }),
+            e(B, { type: "submit", variant: "success" }, () => t("common.add"))
+          ]
+        ) : null
+      ]);
+    };
+  }
+}), Le = /* @__PURE__ */ p({
+  name: "ThlWeather",
+  props: {
+    city: String,
+    temp: Number,
+    condition: String,
+    icon: D("cloud-sun"),
+    days: Array
+  },
+  setup(a) {
+    const i = g();
+    return () => {
+      const r = f("weather", i.value);
+      return e("div", { class: r() }, [
+        e("div", { class: `${i.value}-flex-between` }, [
+          e("div", [
+            e("div", { class: r("temp") }, [a.temp, e("sup", "°")]),
+            e("div", a.condition),
+            e("small", { style: { opacity: 0.85 } }, [x("map-pin"), " ", a.city])
+          ]),
+          e("span", { class: r("icon") }, x(a.icon, { strokeWidth: 1.5 }))
+        ]),
+        a.days ? e(
+          "div",
+          { class: r("days") },
+          a.days.map((t, n) => e("div", { key: n }, [e("div", t.day), x(t.icon), e("b", `${t.temp}°`)]))
+        ) : null
+      ]);
+    };
+  }
+});
+function O() {
+  const a = T(), i = T(600);
+  let r = null;
+  return K(() => {
+    a.value && typeof ResizeObserver < "u" && (r = new ResizeObserver(([t]) => i.value = Math.max(200, Math.round(t.contentRect.width))), r.observe(a.value));
+  }), W(() => r?.disconnect()), { el: a, w: i };
+}
+const R = (a, i) => e(
+  "ul",
+  { class: `${a}-chart-legend` },
+  i.map((r, t) => e("li", { key: t }, [e("i", { style: { background: r.color } }), r.name]))
+), N = (a, i, r, t = "middle") => e("text", { x: a, y: i, "text-anchor": t, "font-size": 11, fill: "var(--thl-text)" }, r), Me = /* @__PURE__ */ p({
+  name: "ThlLineChart",
+  props: {
+    series: { type: Array, required: !0 },
+    labels: { type: Array, required: !0 },
+    height: { type: Number, default: 280 },
+    area: Boolean,
+    smooth: { type: Boolean, default: !0 },
+    legend: { type: Boolean, default: !0 }
+  },
+  setup(a) {
+    const i = g(), { intlLocale: r } = S(), { el: t, w: n } = O(), o = T(null), l = P(() => ae(a.series, a.labels, { width: n.value, height: a.height }, { smooth: a.smooth }));
+    return () => {
+      const s = l.value, v = r(), d = Math.max(1, a.labels.length - 1);
+      return e("div", { ref: t, class: `${i.value}-chart` }, [
+        a.legend ? R(
+          i.value,
+          s.series.map((u) => ({ name: u.name, color: u.color }))
+        ) : null,
+        e(
+          "svg",
+          { width: n.value, height: a.height, role: "img", "aria-label": a.series.map((u) => u.name).join(", "), onMouseleave: () => o.value = null },
+          [
+            ...s.yTicks.map(
+              (u) => e("g", { key: u.value }, [
+                e("line", { x1: s.plot.x, x2: s.plot.x + s.plot.width, y1: u.y, y2: u.y, stroke: "var(--thl-border-color)" }),
+                N(s.plot.x - 8, u.y + 4, I(u.value, v), "end")
+              ])
+            ),
+            ...s.xLabels.map((u, c) => e("g", { key: `x${c}` }, N(u.x, a.height - 8, u.label))),
+            ...s.series.map(
+              (u, c) => e("g", { key: c }, [
+                a.area ? e("path", { d: u.area, fill: u.color, opacity: 0.15 }) : null,
+                e("path", { d: u.line, fill: "none", stroke: u.color, "stroke-width": 2.5, "stroke-linejoin": "round", "stroke-linecap": "round" }),
+                ...u.points.map(
+                  (y, m) => e("circle", { key: m, cx: y.x, cy: y.y, r: o.value === m ? 5 : 3, fill: "var(--thl-surface)", stroke: u.color, "stroke-width": 2 })
+                )
+              ])
+            ),
+            ...s.xLabels.map(
+              (u, c) => e("rect", {
+                key: `h${c}`,
+                x: u.x - s.plot.width / d / 2,
+                y: s.plot.y,
+                width: s.plot.width / d,
+                height: s.plot.height,
+                fill: "transparent",
+                onMouseenter: () => o.value = c
+              })
+            )
+          ]
+        ),
+        o.value !== null ? e(
+          "div",
+          {
+            class: `${i.value}-chart-tooltip`,
+            style: {
+              left: `${s.xLabels[o.value].x}px`,
+              top: `${Math.min(...s.series.map((u) => u.points[o.value]?.y ?? a.height)) + (a.legend ? 30 : 0)}px`
+            }
+          },
+          [
+            e("b", a.labels[o.value]),
+            ...s.series.map((u) => e("div", { key: u.name }, `${u.name}: ${I(u.points[o.value]?.value ?? 0, v)}`))
+          ]
+        ) : null
+      ]);
+    };
+  }
+}), Ne = /* @__PURE__ */ p({
+  name: "ThlBarChart",
+  props: {
+    series: { type: Array, required: !0 },
+    labels: { type: Array, required: !0 },
+    height: { type: Number, default: 280 },
+    stacked: Boolean,
+    legend: { type: Boolean, default: !0 }
+  },
+  setup(a) {
+    const i = g(), { intlLocale: r, n: t } = S(), { el: n, w: o } = O(), l = P(() => Z(a.series, a.labels, { width: o.value, height: a.height }, { stacked: a.stacked }));
+    return () => {
+      const s = l.value, v = r();
+      return e("div", { ref: n, class: `${i.value}-chart` }, [
+        a.legend ? R(
+          i.value,
+          a.series.map((d, u) => ({ name: d.name, color: ee(u, d) }))
+        ) : null,
+        e("svg", { width: o.value, height: a.height, role: "img", "aria-label": a.series.map((d) => d.name).join(", ") }, [
+          ...s.yTicks.map(
+            (d) => e("g", { key: d.value }, [
+              e("line", { x1: s.plot.x, x2: s.plot.x + s.plot.width, y1: d.y, y2: d.y, stroke: "var(--thl-border-color)" }),
+              N(s.plot.x - 8, d.y + 4, I(d.value, v), "end")
+            ])
+          ),
+          ...s.xLabels.map((d, u) => e("g", { key: `x${u}` }, N(d.x, a.height - 8, d.label))),
+          ...s.bars.map(
+            (d, u) => e(
+              "rect",
+              { key: u, x: d.x, y: d.y, width: d.width, height: d.height, fill: d.color, rx: 2 },
+              e("title", `${d.series} · ${d.label}: ${t(d.value)}`)
+            )
+          )
+        ])
+      ]);
+    };
+  }
+}), Pe = /* @__PURE__ */ p({
+  name: "ThlPieChart",
+  props: {
+    data: { type: Array, required: !0 },
+    size: { type: Number, default: 220 },
+    donut: { type: Number, default: 0.6 },
+    legend: { type: Boolean, default: !0 }
+  },
+  setup(a, { slots: i }) {
+    const r = g(), { n: t } = S(), n = T(null), o = P(() => te(a.data, a.size, { donut: a.donut }));
+    return () => e("div", { class: `${r.value}-chart`, style: { display: "flex", flexDirection: "column", alignItems: "center" } }, [
+      e("div", { style: { position: "relative", width: `${a.size}px`, height: `${a.size}px` } }, [
+        e(
+          "svg",
+          { width: a.size, height: a.size, role: "img", "aria-label": a.data.map((l) => `${l.label} ${l.value}`).join(", ") },
+          o.value.map(
+            (l, s) => e(
+              "path",
+              {
+                key: s,
+                d: l.path,
+                fill: l.color,
+                stroke: "var(--thl-surface)",
+                "stroke-width": 2,
+                opacity: n.value === null || n.value === s ? 1 : 0.55,
+                onMouseenter: () => n.value = s,
+                onMouseleave: () => n.value = null
+              },
+              e("title", `${l.label}: ${t(l.value)} (${l.percent.toFixed(1)}%)`)
+            )
+          )
+        ),
+        e(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexDirection: "column",
+              pointerEvents: "none",
+              textAlign: "center"
+            }
+          },
+          n.value !== null ? [
+            e("b", { style: { fontSize: "22px", color: "var(--thl-heading)" } }, `${o.value[n.value].percent.toFixed(0)}%`),
+            e("small", o.value[n.value].label)
+          ] : i.center?.()
+        )
+      ]),
+      a.legend ? e(
+        "div",
+        { class: `${r.value}-mt-3` },
+        R(
+          r.value,
+          o.value.map((l) => ({ name: l.label, color: l.color }))
+        )
+      ) : null
+    ]);
+  }
+}), Ie = /* @__PURE__ */ p({
+  name: "ThlSparkline",
+  props: {
+    data: { type: Array, required: !0 },
+    width: { type: Number, default: 120 },
+    height: { type: Number, default: 36 },
+    type: D("line"),
+    color: D("primary")
+  },
+  setup(a) {
+    const i = g();
+    return () => {
+      const r = le(a.data, a.width, a.height, a.type === "bar" ? "bar" : "line"), t = `var(--${i.value}-color-${a.color})`;
+      return e(
+        "svg",
+        {
+          width: a.width,
+          height: a.height,
+          viewBox: `0 0 ${a.width} ${a.height}`,
+          role: "img",
+          "aria-label": a.data.join(", "),
+          style: { overflow: "visible", maxWidth: "100%", height: "auto" }
+        },
+        a.type === "bar" ? r.bars.map((n, o) => e("rect", { key: o, x: n.x, y: n.y, width: n.width, height: n.height, fill: t, rx: 1 })) : [
+          a.type === "area" ? e("path", { d: r.area, fill: t, opacity: 0.2 }) : null,
+          e("path", { d: r.line, fill: "none", stroke: t, "stroke-width": 2, "stroke-linejoin": "round" }),
+          r.last ? e("circle", { cx: r.last[0], cy: r.last[1], r: 3, fill: t }) : null
+        ]
+      );
+    };
+  }
+}), Re = /* @__PURE__ */ p({
+  name: "ThlCalendar",
+  props: { events: { type: Array, required: !0 } },
+  emits: ["event-move", "date-click", "event-click"],
+  setup(a, { emit: i }) {
+    const r = g(), { t, d: n, intlLocale: o } = S(), l = oe(), s = T(new Date((/* @__PURE__ */ new Date()).getFullYear(), (/* @__PURE__ */ new Date()).getMonth(), 1)), v = T(null), d = P(() => {
+      const u = {};
+      return a.events.forEach((c) => (u[c.date] ??= []).push(c)), u;
+    });
+    return () => {
+      const u = l.config.value.components.DatePicker?.weekStartsOn ?? 1, c = o(), y = f("calendar", r.value);
+      return e("div", { class: y() }, [
+        e("div", { class: y("toolbar") }, [
+          e("div", { class: `${r.value}-btn-group` }, [
+            e(
+              B,
+              { size: "sm", "aria-label": t("common.previous"), onClick: () => s.value = j(s.value, -1) },
+              () => x("chevron-left")
+            ),
+            e(B, { size: "sm", "aria-label": t("common.next"), onClick: () => s.value = j(s.value, 1) }, () => x("chevron-right"))
+          ]),
+          e("h2", { "aria-live": "polite" }, new Intl.DateTimeFormat(c, { month: "long", year: "numeric" }).format(s.value)),
+          e(
+            B,
+            {
+              size: "sm",
+              variant: "primary",
+              onClick: () => {
+                const m = /* @__PURE__ */ new Date();
+                s.value = new Date(m.getFullYear(), m.getMonth(), 1);
+              }
+            },
+            () => t("datepicker.today")
+          )
+        ]),
+        e("div", { class: y("grid") }, [
+          ...Y(c, u, "short").map((m) => e("div", { key: m, class: y("dow"), "aria-hidden": "true" }, m)),
+          ...H(s.value.getFullYear(), s.value.getMonth(), u).flat().map((m) => {
+            const C = J(m.date);
+            return e(
+              "div",
+              {
+                key: m.key,
+                role: "group",
+                "aria-label": n(m.date, { dateStyle: "full" }),
+                class: M(y("cell"), { "is-outside": !m.inMonth, "is-today": m.today, "is-drop": v.value === C }),
+                onClick: () => i("date-click", C),
+                onDragover: (b) => {
+                  b.preventDefault(), v.value = C;
+                },
+                onDragleave: () => v.value = null,
+                onDrop: (b) => {
+                  b.preventDefault(), v.value = null;
+                  const $ = b.dataTransfer?.getData("text/thl-event");
+                  $ && i("event-move", isNaN(Number($)) ? $ : Number($), C);
+                }
+              },
+              [
+                e("span", { class: y("date"), "aria-hidden": "true" }, m.date.getDate()),
+                ...(d.value[C] ?? []).map(
+                  (b) => e(
+                    "button",
+                    {
+                      key: b.id,
+                      type: "button",
+                      draggable: !0,
+                      class: y("event", { [b.color ?? "primary"]: !0 }),
+                      title: b.title,
+                      onDragstart: ($) => $.dataTransfer?.setData("text/thl-event", String(b.id)),
+                      onClick: ($) => {
+                        $.stopPropagation(), i("event-click", b);
+                      }
+                    },
+                    b.title
+                  )
+                )
+              ]
+            );
+          })
+        ])
+      ]);
+    };
+  }
+});
+export {
+  Ne as ThlBarChart,
+  Re as ThlCalendar,
+  Ae as ThlChat,
+  Se as ThlColorBox,
+  xe as ThlDataTable,
+  we as ThlGallery,
+  $e as ThlInfoBox,
+  Me as ThlLineChart,
+  ke as ThlList,
+  Pe as ThlPieChart,
+  ze as ThlPricingTable,
+  De as ThlProfileCard,
+  Ie as ThlSparkline,
+  Te as ThlStatBox,
+  Ce as ThlStatsRow,
+  fe as ThlTable,
+  qe as ThlTodoList,
+  Be as ThlUserCard,
+  Le as ThlWeather
+};
+//# sourceMappingURL=data.js.map