@poupe/vue/dist/theme-scheme.mjs

Vue component library for Poupe UI framework with theme customization and accessibility support

import { defineComponent as d, computed as u, createElementBlock as r, openBlock as e, normalizeClass as m, createElementVNode as j, toDisplayString as P, Fragment as b, renderList as y, createBlock as f, mergeProps as v, normalizeStyle as k, unref as p, normalizeProps as A, guardReactiveProps as z, createVNode as L } from "vue";
import { j as R, g as $ } from "./consts-DXBA35Em.js";
import { _ as S } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const M = ["aria-label"], T = { class: "block w-full" }, w = /* @__PURE__ */ d({
  __name: "slot",
  props: {
    bg: {},
    text: {},
    label: {}
  },
  setup(n) {
    const t = n, s = u(() => {
      var a;
      return t.label || ((a = t.bg) == null ? void 0 : a.split("-").slice(1).join(" ")) || "undefined";
    });
    return (a, o) => (e(), r("div", {
      class: m(["p-2 capitalize flex items-center justify-center text-center leading-tight h-full overflow-hidden", [a.bg, a.text]]),
      role: "status",
      "aria-label": s.value
    }, [
      j("span", T, P(s.value), 1)
    ], 10, M));
  }
}), V = ["role", "aria-label"], D = /* @__PURE__ */ d({
  __name: "group",
  props: {
    ariaLabel: { default: void 0 },
    entries: {},
    justify: { default: "start" }
  },
  setup(n) {
    const t = n, s = u(() => t.ariaLabel ? "group" : void 0), a = u(() => t.ariaLabel), o = u(() => R[t.justify]), _ = (l) => $[l];
    return (l, c) => (e(), r("div", {
      role: s.value,
      "aria-label": a.value,
      class: m(["flex flex-col overflow-auto", o.value])
    }, [
      (e(!0), r(b, null, y(l.entries, (g, h) => (e(), r("div", { key: h }, [
        Array.isArray(g) ? (e(), r("div", {
          key: 0,
          class: m(["grid grid-flow-col mt-2 h-12", _(g.length)])
        }, [
          (e(!0), r(b, null, y(g, (i, x) => (e(), f(w, v({
            key: x,
            class: i.class
          }, { ref_for: !0 }, i), null, 16, ["class"]))), 128))
        ], 2)) : (e(), f(w, v({
          key: 1,
          class: g.class
        }, { ref_for: !0 }, g), null, 16, ["class"]))
      ]))), 128))
    ], 10, V));
  }
}), F = ["role", "aria-label"], B = /* @__PURE__ */ d({
  __name: "groups",
  props: {
    ariaLabel: {},
    groups: {}
  },
  setup(n) {
    const t = n, s = u(() => t.ariaLabel ? "group" : void 0), a = u(() => t.ariaLabel), o = u(() => Math.max(...t.groups.map((c) => c.length))), _ = u(() => {
      const c = [];
      for (const [g, h] of t.groups.entries()) {
        c[g] = [];
        for (let i = 0; i < o.value; i++)
          c[g][i] = i < h.length ? h[i] : void 0;
      }
      return c;
    }), l = (c) => Array.isArray(c);
    return (c, g) => (e(), r("div", {
      role: s.value,
      "aria-label": a.value,
      class: m(["grid gap-2 w-full overflow-auto", p($)[t.groups.length]]),
      style: k(`grid-template-rows: repeat(${o.value}, 3rem);`)
    }, [
      (e(!0), r(b, null, y(_.value, (h, i) => (e(), r("div", {
        key: i,
        class: "grid gap-0",
        style: k(`grid-template-rows: subgrid; grid-row: 1 / ${o.value + 1};`)
      }, [
        (e(!0), r(b, null, y(h, (x, C) => (e(), r(b, { key: C }, [
          x ? (e(), r("div", {
            key: 0,
            style: k(`grid-row: ${C + 1};`)
          }, [
            l(x) ? (e(), r("div", {
              key: 0,
              class: m(["grid grid-flow-col h-12", p($)[x.length]])
            }, [
              (e(!0), r(b, null, y(x, (E, N) => (e(), f(w, v({
                key: N,
                class: E.class
              }, { ref_for: !0 }, E), null, 16, ["class"]))), 128))
            ], 2)) : (e(), f(w, v({
              key: 1,
              class: x.class
            }, { ref_for: !0 }, x), null, 16, ["class"]))
          ], 4)) : (e(), r("div", {
            key: 1,
            style: k(`grid-row: ${C + 1};`)
          }, null, 4))
        ], 64))), 128))
      ], 4))), 128))
    ], 14, F));
  }
}), G = /* @__PURE__ */ d({
  __name: "colors",
  setup(n) {
    const o = {
      ariaLabel: "Main Colors",
      groups: [[
        { bg: "bg-primary", text: "text-on-primary" },
        { bg: "bg-on-primary", text: "text-primary" },
        { bg: "bg-primary-container", text: "text-on-primary-container", class: "mt-1" },
        { bg: "bg-on-primary-container", text: "text-primary-container" },
        [
          { bg: "bg-primary-fixed", text: "text-on-primary-fixed" },
          { bg: "bg-primary-fixed-dim", text: "text-on-primary-fixed" }
        ],
        { bg: "bg-on-primary-fixed", text: "text-primary-fixed" },
        { bg: "bg-on-primary-fixed-variant", text: "text-primary-fixed" }
      ], [
        { bg: "bg-secondary", text: "text-on-secondary" },
        { bg: "bg-on-secondary", text: "text-secondary" },
        { bg: "bg-secondary-container", text: "text-on-secondary-container", class: "mt-1" },
        { bg: "bg-on-secondary-container", text: "text-secondary-container" },
        [
          { bg: "bg-secondary-fixed", text: "text-on-secondary-fixed" },
          { bg: "bg-secondary-fixed-dim", text: "text-on-secondary-fixed" }
        ],
        { bg: "bg-on-secondary-fixed", text: "text-secondary-fixed" },
        { bg: "bg-on-secondary-fixed-variant", text: "text-secondary-fixed" }
      ], [
        { bg: "bg-tertiary", text: "text-on-tertiary" },
        { bg: "bg-on-tertiary", text: "text-tertiary" },
        { bg: "bg-tertiary-container", text: "text-on-tertiary-container", class: "mt-1" },
        { bg: "bg-on-tertiary-container", text: "text-tertiary-container" },
        [
          { bg: "bg-tertiary-fixed", text: "text-on-tertiary-fixed" },
          { bg: "bg-tertiary-fixed-dim", text: "text-on-tertiary-fixed" }
        ],
        { bg: "bg-on-tertiary-fixed", text: "text-tertiary-fixed" },
        { bg: "bg-on-tertiary-fixed-variant", text: "text-tertiary-fixed" }
      ]]
    };
    return (_, l) => (e(), f(B, A(z(o)), null, 16));
  }
}), I = /* @__PURE__ */ d({
  __name: "error",
  setup(n) {
    const s = {
      ariaLabel: "Error Colors",
      groups: [[
        { bg: "bg-error", text: "text-on-error" },
        { bg: "bg-on-error", text: "text-error" },
        { bg: "bg-error-container", text: "text-on-error-container", class: "mt-1" },
        { bg: "bg-on-error-container", text: "text-error-container" }
      ]]
    };
    return (a, o) => (e(), f(B, A(z(s)), null, 16));
  }
}), q = /* @__PURE__ */ d({
  __name: "extra",
  setup(n) {
    const t = {
      ariaLabel: "Additional Colors",
      justify: "between",
      entries: [
        { bg: "bg-inverse-surface", text: "text-on-inverse-surface" },
        { bg: "bg-on-inverse-surface", text: "text-inverse-surface" },
        { bg: "bg-inverse-primary", text: "text-inverse-surface" },
        [
          { bg: "bg-scrim", text: "text-primary-50" },
          { bg: "bg-shadow", text: "text-primary-50" }
        ]
      ]
    };
    return (s, a) => (e(), f(D, A(z(t)), null, 16));
  }
}), H = {
  class: "flex flex-col h-full",
  role: "group",
  "aria-label": "Neutral Colors"
}, J = /* @__PURE__ */ d({
  __name: "neutral",
  setup(n) {
    const t = [
      [
        { bg: "bg-surface-dim", text: "text-on-surface-dim" },
        { bg: "bg-surface", text: "text-on-surface" },
        { bg: "bg-surface-bright", text: "text-on-surface-bright" }
      ],
      [
        { bg: "bg-surface-container-lowest", text: "text-on-surface-container-lowest" },
        { bg: "bg-surface-container-low", text: "text-on-surface-container-low" },
        { bg: "bg-surface-container", text: "text-on-surface-container" },
        { bg: "bg-surface-container-high", text: "text-on-surface-container-high" },
        { bg: "bg-surface-container-highest", text: "text-on-surface-container-highest" }
      ],
      [
        { bg: "bg-on-surface", text: "text-surface" },
        { bg: "bg-on-surface-variant", text: "text-surface" },
        { bg: "bg-outline", text: "text-surface" },
        { bg: "bg-outline-variant", text: "text-on-surface" }
      ]
    ];
    return (s, a) => (e(), r("div", H, [
      (e(), r(b, null, y(t, (o, _) => j("div", {
        key: _,
        class: "flex-1"
      }, [
        j("div", {
          class: m(["grid h-full items-center", p($)[o.length]])
        }, [
          (e(!0), r(b, null, y(o, (l) => (e(), f(w, v({
            key: l.bg
          }, { ref_for: !0 }, l), null, 16))), 128))
        ], 2)
      ])), 64))
    ]));
  }
}), K = ["aria-label"], O = /* @__PURE__ */ d({
  __name: "scheme",
  props: {
    ariaLabel: {}
  },
  setup(n) {
    const t = n, s = u(() => t.ariaLabel || "Theme Colors");
    return (a, o) => (e(), r("div", {
      class: m([
        "grid grid-cols-4 gap-2 h-full",
        "text-[length:var(--text-3xs)] sm:text-[length:var(--text-2xs)] md:text-xs lg:text-sm theme-scheme-sizes"
      ]),
      role: "region",
      "aria-label": s.value
    }, [
      L(p(G), { class: "col-span-3 h-full" }),
      L(p(I), { class: "h-full" }),
      L(p(J), { class: "col-span-3 h-full" }),
      L(p(q), { class: "h-full" })
    ], 8, K));
  }
}), X = /* @__PURE__ */ S(O, [["__scopeId", "data-v-00be8027"]]);
export {
  X as ThemeScheme
};