glass-ui-vue/dist/glass-ui.es.js

A Vue 3 component library that implements glassmorphism design principles, providing a modern and visually appealing UI toolkit. It includes a variety of reusable components styled with glassmorphism effects, making it easy to create elegant and interacti

import { computed as y, createElementBlock as l, openBlock as s, normalizeClass as g, renderSlot as f, normalizeStyle as p, ref as S, watch as C, onBeforeUnmount as I, createCommentVNode as c, createElementVNode as $, createBlock as x, Fragment as k, createTextVNode as T, toDisplayString as h, resolveDynamicComponent as B, TransitionGroup as N, withCtx as V, renderList as z } from "vue";
const u = (e, t) => {
  const a = e.__vccOpts || e;
  for (const [n, i] of t)
    a[n] = i;
  return a;
}, R = ["aria-disabled", "tabindex"], A = {
  __name: "Panel",
  props: {
    variant: {
      type: String,
      default: "default",
      validator: (e) => ["default", "primary", "secondary", "success", "danger", "warning", "info", "light", "dark"].includes(e)
    },
    padding: {
      type: String,
      default: "md",
      validator: (e) => ["xxs", "xs", "sm", "md", "lg", "xl", "2x", "3x", ""].includes(e)
    },
    disabled: {
      type: Boolean,
      default: !1
    }
  },
  setup(e) {
    const t = e, a = y(() => `bg--${t.variant}`), n = y(() => t.padding ? `p--${t.padding}` : "");
    return (i, d) => (s(), l("div", {
      class: g(["panel", [a.value, n.value, { "is-disabled": e.disabled }]]),
      "aria-disabled": e.disabled ? "true" : void 0,
      tabindex: e.disabled ? -1 : void 0
    }, [
      f(i.$slots, "default", {}, void 0, !0)
    ], 10, R));
  }
}, M = /* @__PURE__ */ u(A, [["__scopeId", "data-v-59d4fb3d"]]), W = {
  __name: "Stack",
  props: {
    align: {
      type: String,
      default: "",
      validator: (e) => ["start", "center", "end", "stretch", "baseline", ""].includes(e)
    },
    justify: {
      type: String,
      default: "",
      validator: (e) => ["start", "center", "end", "between", "around", "evenly", ""].includes(e)
    },
    direction: {
      type: String,
      default: "column",
      validator: (e) => ["column", "row"].includes(e)
    },
    gap: {
      type: [String, Number],
      default: ""
    },
    padding: {
      type: String,
      default: ""
    }
  },
  setup(e) {
    const t = e, a = y(() => `direction--${t.direction}`), n = y(
      () => t.gap ? { gap: typeof t.gap == "number" ? `${t.gap}px` : t.gap } : {}
    );
    return (i, d) => (s(), l("div", {
      class: g(["stack", [
        a.value,
        e.align ? `align-${e.align}` : "",
        e.justify ? `justify--${e.justify}` : "",
        e.padding ? `p--${e.padding}` : ""
      ]]),
      style: p(n.value)
    }, [
      f(i.$slots, "default", {}, void 0, !0)
    ], 6));
  }
}, G = /* @__PURE__ */ u(W, [["__scopeId", "data-v-f02c0da9"]]), D = ["disabled", "type", "aria-disabled"], O = {
  __name: "Button",
  props: {
    variant: {
      type: String,
      default: "primary",
      validator: (e) => ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"].includes(e)
    },
    disabled: {
      type: Boolean,
      default: !1
    },
    type: {
      type: String,
      default: "button",
      validator: (e) => ["button", "submit", "reset"].includes(e)
    }
  },
  emits: ["click"],
  setup(e, { emit: t }) {
    const a = e, n = t;
    function i(d) {
      a.disabled || n("click", d);
    }
    return (d, b) => (s(), l("button", {
      class: g(["glass-btn", `glass-btn--${e.variant}`, { "is-disabled": e.disabled }]),
      disabled: e.disabled,
      type: e.type,
      "aria-disabled": e.disabled ? "true" : void 0,
      onClick: i
    }, [
      f(d.$slots, "default", {}, void 0, !0)
    ], 10, D));
  }
}, E = /* @__PURE__ */ u(O, [["__scopeId", "data-v-c480d73d"]]), F = {
  key: 0,
  class: "glass-alert__icon"
}, P = { class: "glass-alert__content" }, U = {
  key: 0,
  class: "glass-alert__title"
}, q = {
  key: 1,
  class: "glass-alert__description"
}, L = {
  __name: "Alert",
  props: {
    variant: {
      type: String,
      default: "info",
      validator: (e) => ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"].includes(e)
    },
    dismissible: {
      type: Boolean,
      default: !1
    },
    timeout: {
      type: [Number, String],
      default: null
      // ms, e.g. 3000
    },
    icon: {
      type: [String, Object, Function],
      default: null
    },
    title: {
      type: String,
      default: ""
    },
    description: {
      type: String,
      default: ""
    }
  },
  setup(e) {
    const t = e, a = S(!0);
    let n = null;
    function i() {
      a.value = !1;
    }
    return C(
      () => t.timeout,
      (d) => {
        n && clearTimeout(n), d && Number(d) > 0 && (n = setTimeout(() => {
          a.value = !1;
        }, Number(d)));
      },
      { immediate: !0 }
    ), I(() => {
      n && clearTimeout(n);
    }), (d, b) => a.value ? (s(), l("div", {
      key: 0,
      class: g(["glass-alert", [
        `glass-alert--${e.variant}`,
        e.dismissible ? "glass-alert--dismissible" : ""
      ]]),
      role: "alert"
    }, [
      e.icon || d.$slots.icon ? (s(), l("span", F, [
        f(d.$slots, "icon", {}, () => [
          typeof e.icon == "string" ? (s(), l(k, { key: 0 }, [
            T(h(e.icon), 1)
          ], 64)) : e.icon ? (s(), x(B(e.icon), { key: 1 })) : c("", !0)
        ], !0)
      ])) : c("", !0),
      $("div", P, [
        e.title ? (s(), l("div", U, h(e.title), 1)) : c("", !0),
        e.description ? (s(), l("div", q, h(e.description), 1)) : c("", !0),
        !e.title && !e.description ? f(d.$slots, "default", { key: 2 }, void 0, !0) : c("", !0)
      ]),
      e.dismissible ? (s(), l("button", {
        key: 1,
        class: "glass-alert__close",
        onClick: i,
        "aria-label": "Dismiss",
        type: "button"
      }, "×")) : c("", !0)
    ], 2)) : c("", !0);
  }
}, H = /* @__PURE__ */ u(L, [["__scopeId", "data-v-7512bc71"]]), J = ["src", "alt", "width", "height"], K = {
  __name: "Avatar",
  props: {
    src: {
      type: String,
      required: !0
    },
    alt: {
      type: String,
      default: "Avatar"
    },
    size: {
      type: [String, Number],
      default: 48
    },
    shape: {
      type: String,
      default: "circle",
      validator: (e) => ["circle", "rounded"].includes(e)
    }
  },
  setup(e) {
    return (t, a) => (s(), l("img", {
      class: "glass-avatar",
      src: e.src,
      alt: e.alt,
      width: e.size,
      height: e.size,
      style: p({ borderRadius: e.shape === "circle" ? "50%" : "8px", width: e.size + "px", height: e.size + "px" })
    }, null, 12, J));
  }
}, Q = /* @__PURE__ */ u(K, [["__scopeId", "data-v-0c6def60"]]), X = {
  __name: "Badge",
  props: {
    variant: {
      type: String,
      default: "primary",
      validator: (e) => ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"].includes(e)
    }
  },
  setup(e) {
    return (t, a) => (s(), l("span", {
      class: g(["glass-badge", `glass-badge--${e.variant}`])
    }, [
      f(t.$slots, "default", {}, void 0, !0)
    ], 2));
  }
}, Y = /* @__PURE__ */ u(X, [["__scopeId", "data-v-03886f9a"]]), Z = ["type", "placeholder", "disabled", "value"], _ = {
  __name: "Input",
  props: {
    modelValue: String,
    type: {
      type: String,
      default: "text",
      validator: (e) => ["text", "password", "email", "number"].includes(e)
    },
    placeholder: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: !1
    },
    borderColor: {
      type: String,
      default: "blue"
      // e.g. "#6200ea" or "blue"
    },
    borderWidth: {
      type: String,
      default: "1px"
    },
    borderType: {
      type: String,
      default: "solid",
      validator: (e) => ["solid", "dotted", "dashed", "double", "groove", "ridge", "inset", "outset", "none", "hidden"].includes(e)
    },
    borderRadius: {
      type: String,
      default: ""
      // e.g. "8px"
    }
  },
  setup(e) {
    const t = e, a = y(() => ({
      border: t.borderColor ? `${t.borderWidth} ${t.borderType} ${t.borderColor}` : void 0,
      borderRadius: t.borderRadius || void 0
    }));
    return (n, i) => (s(), l("input", {
      class: "glass-input",
      type: e.type,
      placeholder: e.placeholder,
      disabled: e.disabled,
      value: e.modelValue,
      onInput: i[0] || (i[0] = (d) => n.$emit("update:modelValue", d.target.value)),
      style: p(a.value)
    }, null, 44, Z));
  }
}, ee = /* @__PURE__ */ u(_, [["__scopeId", "data-v-a700eda9"]]), te = ["placeholder", "disabled", "rows", "value"], ae = {
  __name: "Textarea",
  props: {
    modelValue: String,
    placeholder: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: !1
    },
    rows: {
      type: [String, Number],
      default: 3
    },
    borderColor: {
      type: String,
      default: "grey"
    },
    borderWidth: {
      type: String,
      default: "1px"
    },
    borderType: {
      type: String,
      default: "solid",
      validator: (e) => ["solid", "dotted", "dashed", "double", "groove", "ridge", "inset", "outset", "none", "hidden"].includes(e)
    },
    borderRadius: {
      type: String,
      default: ""
    }
  },
  setup(e) {
    const t = e, a = y(() => ({
      border: `${t.borderWidth} ${t.borderType} ${t.borderColor}`,
      borderRadius: t.borderRadius || void 0
    }));
    return (n, i) => (s(), l("textarea", {
      class: "glass-textarea",
      placeholder: e.placeholder,
      disabled: e.disabled,
      rows: e.rows,
      value: e.modelValue,
      onInput: i[0] || (i[0] = (d) => n.$emit("update:modelValue", d.target.value)),
      style: p(a.value)
    }, null, 44, te));
  }
}, ne = /* @__PURE__ */ u(ae, [["__scopeId", "data-v-7f493733"]]), ie = {
  __name: "Grid",
  props: {
    cols: {
      type: [Number, String],
      default: 2,
      validator: (e) => Number(e) >= 1 && Number(e) <= 12
    },
    gap: {
      type: [String, Number],
      default: "md"
      // Use your spacing scale: xs, sm, md, lg, xl
    },
    align: {
      type: String,
      default: "",
      validator: (e) => ["", "start", "center", "end", "stretch"].includes(e)
    },
    justify: {
      type: String,
      default: "",
      validator: (e) => ["", "start", "center", "end", "between", "around", "evenly"].includes(e)
    },
    wrap: {
      type: Boolean,
      default: !1
    }
  },
  setup(e) {
    return (t, a) => (s(), l("div", {
      class: g([
        "glass-grid",
        `grid-cols-${e.cols}`,
        e.gap ? `grid-gap-${e.gap}` : "",
        e.wrap ? "grid-wrap" : ""
      ]),
      style: p({
        alignItems: e.align || void 0,
        justifyItems: e.justify && ["start", "center", "end", "stretch"].includes(e.justify) ? e.justify : void 0,
        justifyContent: e.justify && ["between", "around", "evenly"].includes(e.justify) ? e.justify === "between" ? "space-between" : e.justify === "around" ? "space-around" : e.justify === "evenly" ? "space-evenly" : void 0 : void 0,
        // Add a maxWidth for demo/dev so justify-content is visible
        maxWidth: e.justify && ["between", "around", "evenly"].includes(e.justify) ? "600px" : void 0,
        margin: e.justify && ["between", "around", "evenly"].includes(e.justify) ? "2em auto" : void 0
      })
    }, [
      f(t.$slots, "default", {}, void 0, !0)
    ], 6));
  }
}, de = /* @__PURE__ */ u(ie, [["__scopeId", "data-v-738438a8"]]);
function se(e) {
  return { all: e = e || /* @__PURE__ */ new Map(), on: function(t, a) {
    var n = e.get(t);
    n ? n.push(a) : e.set(t, [a]);
  }, off: function(t, a) {
    var n = e.get(t);
    n && (a ? n.splice(n.indexOf(a) >>> 0, 1) : e.set(t, []));
  }, emit: function(t, a) {
    var n = e.get(t);
    n && n.slice().map(function(i) {
      i(a);
    }), (n = e.get("*")) && n.slice().map(function(i) {
      i(t, a);
    });
  } };
}
const le = se(), re = ["onMouseenter", "onMouseleave"], oe = ["onClick"], ue = {
  __name: "Toaster",
  setup(e, { expose: t }) {
    const a = S([]);
    let n = 0;
    const i = {};
    function d(r, { variant: v = "info", duration: o = 3e3 } = {}) {
      const m = ++n;
      a.value.push({ id: m, message: r, variant: v }), i[m] = setTimeout(() => b(m), o);
    }
    function b(r) {
      a.value = a.value.filter((v) => v.id !== r), clearTimeout(i[r]), delete i[r];
    }
    function w(r) {
      clearTimeout(i[r]);
    }
    function j(r) {
      a.value.find((o) => o.id === r) && (i[r] = setTimeout(() => b(r), 2e3));
    }
    return le.on("show", (r = {}) => {
      d(r.message, r);
    }), t({ show: d }), (r, v) => (s(), x(N, {
      name: "toaster-fade",
      tag: "div",
      class: "glass-toaster"
    }, {
      default: V(() => [
        (s(!0), l(k, null, z(a.value, (o) => (s(), l("div", {
          key: o.id,
          class: g(["glass-toast", `glass-toast--${o.variant}`]),
          onMouseenter: (m) => w(o.id),
          onMouseleave: (m) => j(o.id)
        }, [
          $("span", null, h(o.message), 1),
          $("button", {
            class: "glass-toast__close",
            onClick: (m) => b(o.id)
          }, "×", 8, oe)
        ], 42, re))), 128))
      ]),
      _: 1
    }));
  }
}, ce = /* @__PURE__ */ u(ue, [["__scopeId", "data-v-9398eac4"]]), ge = {
  install(e) {
    e.component("g-panel", M), e.component("g-stack", G), e.component("g-button", E), e.component("g-alert", H), e.component("g-avatar", Q), e.component("g-badge", Y), e.component("g-input", ee), e.component("g-textarea", ne), e.component("g-grid", de), e.component("g-toaster", ce);
  }
};
export {
  H as Alert,
  Q as Avatar,
  Y as Badge,
  E as Button,
  de as Grid,
  ee as Input,
  M as Panel,
  G as Stack,
  ne as Textarea,
  ce as Toaster,
  ge as default,
  le as toast
};