@vtable-guild/vtable-guild 2.2.1 → 2.3.0

package/dist/core/src/components/Button.mjs

@@ -0,0 +1,108 @@
+import { defineComponent as l, createVNode as c } from "vue";
+import { useTheme as i } from "../composables/useTheme.mjs";
+const s = {
+  slots: {
+    root: "inline-flex items-center justify-center border font-normal transition-all duration-200 ease-[cubic-bezier(0.645,0.045,0.355,1)] leading-[1.5714] cursor-pointer",
+    inner: ""
+  },
+  variants: {
+    type: {
+      default: {
+        root: "bg-[color:var(--color-surface)] text-[color:var(--color-on-surface)] border-[color:var(--color-border,#d9d9d9)] shadow-[0_2px_0_rgba(0,0,0,0.02)] hover:text-[color:var(--color-primary-hover)] hover:border-[color:var(--color-primary-hover)]"
+      },
+      primary: {
+        root: "bg-[color:var(--color-primary)] text-white border-transparent shadow-[0_2px_0_rgba(5,145,255,0.1)] hover:bg-[color:var(--color-primary-hover)] active:bg-[color:var(--color-primary-active,#0958d9)]"
+      },
+      link: {
+        root: "bg-transparent text-[color:var(--color-primary)] border-transparent shadow-none hover:text-[color:var(--color-primary-hover)] active:text-[color:var(--color-primary-active,#0958d9)]"
+      }
+    },
+    size: {
+      sm: {
+        root: "h-[var(--vtg-btn-height-sm)] px-[var(--vtg-btn-padding-sm)] rounded-[var(--vtg-btn-border-radius-sm,4px)] text-[length:var(--vtg-table-font-size)]"
+      },
+      md: {
+        root: "h-[var(--vtg-btn-height-md)] px-[var(--vtg-btn-padding-md)] rounded-[var(--vtg-btn-border-radius)] text-[length:var(--vtg-table-font-size)]"
+      }
+    },
+    disabled: {
+      true: {
+        root: "cursor-not-allowed"
+      }
+    }
+  },
+  compoundVariants: [{
+    type: "default",
+    disabled: !0,
+    class: {
+      root: "bg-[color:var(--color-bg-disabled,rgba(0,0,0,0.04))] text-[color:var(--color-text-disabled)] border-[color:var(--color-border,#d9d9d9)] shadow-none hover:bg-[color:var(--color-bg-disabled,rgba(0,0,0,0.04))] hover:text-[color:var(--color-text-disabled)] hover:border-[color:var(--color-border,#d9d9d9)]"
+    }
+  }, {
+    type: "primary",
+    disabled: !0,
+    class: {
+      root: "bg-[color:var(--color-bg-disabled,rgba(0,0,0,0.04))] text-[color:var(--color-text-disabled)] border-[color:var(--color-border,#d9d9d9)] shadow-none hover:bg-[color:var(--color-bg-disabled,rgba(0,0,0,0.04))] hover:text-[color:var(--color-text-disabled)] hover:border-[color:var(--color-border,#d9d9d9)]"
+    }
+  }, {
+    type: "link",
+    disabled: !0,
+    class: {
+      root: "text-[color:var(--color-text-disabled)] hover:text-[color:var(--color-text-disabled)]"
+    }
+  }, {
+    type: "link",
+    size: "sm",
+    class: {
+      root: "px-1"
+    }
+  }],
+  defaultVariants: {
+    type: "default",
+    size: "md",
+    disabled: !1
+  }
+}, v = /* @__PURE__ */ l({
+  name: "VButton",
+  props: {
+    type: {
+      type: String,
+      default: "default"
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    ui: {
+      type: Object,
+      default: void 0
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["click"],
+  setup(r, {
+    emit: o,
+    slots: e
+  }) {
+    const {
+      slots: t
+    } = i("button", s, r);
+    function a(d) {
+      r.disabled || o("click", d);
+    }
+    return () => c("button", {
+      class: t.root(),
+      disabled: r.disabled,
+      onClick: a
+    }, [e.default?.()]);
+  }
+});
+export {
+  v as default
+};

package/dist/core/src/components/Checkbox.mjs

@@ -0,0 +1,84 @@
+import { defineComponent as n, createVNode as o } from "vue";
+import { useTheme as l } from "../composables/useTheme.mjs";
+const i = {
+  slots: {
+    root: ["relative inline-flex items-center justify-center", "w-[var(--vtg-checkbox-size)] h-[var(--vtg-checkbox-size)]", "rounded-[var(--vtg-checkbox-border-radius)]", "border border-[color:var(--color-border,#d9d9d9)]", "bg-[color:var(--color-surface)]", "cursor-pointer transition-all duration-300 shrink-0", "hover:border-[color:var(--color-primary)]"].join(" "),
+    checkMark: ["pointer-events-none absolute box-border", "top-1/2 left-[22%]", "w-[5.71px] h-[9.14px]", "border-b-2 border-r-2 border-[color:var(--vtg-checkbox-check-color,#fff)]", "[transform:rotate(45deg)_translate(-50%,_-50%)]"].join(" "),
+    indeterminateMark: ["pointer-events-none absolute top-1/2 left-1/2", "w-2 h-2 rounded-[1px]", "bg-[color:var(--vtg-checkbox-indeterminate-color,var(--color-primary))]", "-translate-x-1/2 -translate-y-1/2"].join(" ")
+  },
+  variants: {
+    checked: {
+      true: {
+        root: "bg-[color:var(--color-primary)] border-[color:var(--color-primary)] hover:bg-[color:var(--color-primary-hover)] hover:border-transparent"
+      }
+    },
+    indeterminate: {
+      true: {
+        root: ""
+      }
+    },
+    disabled: {
+      true: {
+        root: "bg-[color:var(--color-bg-disabled,rgba(0,0,0,0.04))] border-[color:var(--color-border,#d9d9d9)] cursor-not-allowed hover:border-[color:var(--color-border,#d9d9d9)]"
+      }
+    }
+  },
+  defaultVariants: {
+    checked: !1,
+    indeterminate: !1,
+    disabled: !1
+  }
+}, h = /* @__PURE__ */ n({
+  name: "VCheckbox",
+  props: {
+    checked: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    indeterminate: {
+      type: Boolean,
+      default: !1
+    },
+    ui: {
+      type: Object,
+      default: void 0
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["update:checked", "change"],
+  setup(e, {
+    emit: a
+  }) {
+    const {
+      slots: r
+    } = l("checkbox", i, e);
+    function c(d) {
+      if (e.disabled) return;
+      const t = !e.checked;
+      a("update:checked", t), a("change", t, d);
+    }
+    return () => o("span", {
+      role: "checkbox",
+      "aria-checked": e.indeterminate ? "mixed" : e.checked,
+      "aria-disabled": e.disabled,
+      class: r.root(),
+      onClick: c
+    }, [e.checked && o("span", {
+      "aria-hidden": "true",
+      class: r.checkMark()
+    }, null), e.indeterminate && !e.checked && o("span", {
+      "aria-hidden": "true",
+      class: r.indeterminateMark()
+    }, null)]);
+  }
+});
+export {
+  h as default
+};

package/dist/core/src/components/Input.mjs

@@ -0,0 +1,82 @@
+import { defineComponent as d, createVNode as u } from "vue";
+import { useTheme as i } from "../composables/useTheme.mjs";
+const s = {
+  slots: {
+    root: ["w-full box-border", "rounded-[var(--vtg-input-border-radius)]", "h-[var(--vtg-input-height)]", "px-[var(--vtg-input-padding-inline)]", "text-[length:var(--vtg-input-font-size)]", "font-[family-name:var(--vtg-table-font-family)]", "leading-[var(--vtg-table-line-height)]", "bg-[color:var(--color-surface)]", "text-[color:var(--color-on-surface)]", "border border-[color:var(--color-border,#d9d9d9)]", "outline-none transition-all duration-200", "focus:border-[color:var(--color-primary)]", "focus:shadow-[0_0_0_2px_rgba(5,145,255,0.1)]", "placeholder:text-[color:var(--color-text-placeholder,rgba(0,0,0,0.25))]", "hover:border-[color:var(--color-primary-hover)]"].join(" ")
+  },
+  variants: {
+    bare: {
+      true: {
+        root: "min-w-0 bg-transparent outline-none border-0 shadow-none p-0 focus:shadow-none"
+      }
+    },
+    disabled: {
+      true: {
+        root: "bg-[color:var(--color-bg-disabled,rgba(0,0,0,0.04))] text-[color:var(--color-text-disabled)] cursor-not-allowed"
+      }
+    }
+  },
+  defaultVariants: {
+    bare: !1,
+    disabled: !1
+  }
+}, f = /* @__PURE__ */ d({
+  name: "VInput",
+  props: {
+    value: {
+      type: String,
+      default: ""
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    bare: {
+      type: Boolean,
+      default: !1
+    },
+    inputClass: {
+      type: [String, Array, Object],
+      default: void 0
+    },
+    ui: {
+      type: Object,
+      default: void 0
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["update:value", "change", "pressEnter"],
+  setup(e, {
+    emit: o
+  }) {
+    const {
+      slots: a
+    } = i("input", s, e);
+    function l(t) {
+      const r = t.target.value;
+      o("update:value", r), o("change", r);
+    }
+    function n(t) {
+      t.key === "Enter" && o("pressEnter", t);
+    }
+    return () => u("input", {
+      class: [a.root(), e.inputClass],
+      type: "text",
+      value: e.value,
+      placeholder: e.placeholder,
+      disabled: e.disabled,
+      onInput: l,
+      onKeydown: n
+    }, null);
+  }
+});
+export {
+  f as default
+};

package/dist/core/src/components/Radio.mjs

@@ -0,0 +1,69 @@
+import { defineComponent as l, createVNode as a } from "vue";
+import { useTheme as i } from "../composables/useTheme.mjs";
+const c = {
+  slots: {
+    root: ["inline-flex items-center justify-center", "w-[var(--vtg-radio-size)] h-[var(--vtg-radio-size)]", "rounded-full", "border border-[length:var(--vtg-radio-border-width)] border-[color:var(--color-border,#d9d9d9)]", "bg-[color:var(--color-surface)]", "cursor-pointer transition-all duration-300 shrink-0", "hover:border-[color:var(--color-primary)]"].join(" "),
+    dot: "rounded-full w-[var(--vtg-radio-size)] h-[var(--vtg-radio-size)] transition-transform duration-300 ease-[cubic-bezier(0.78,0.14,0.15,0.86)]"
+  },
+  variants: {
+    checked: {
+      true: {
+        root: "border-[color:var(--color-primary)] bg-[color:var(--color-primary)]",
+        dot: "scale-[0.375] bg-[color:var(--color-surface)]"
+      }
+    },
+    disabled: {
+      true: {
+        root: "bg-[color:var(--color-bg-disabled,rgba(0,0,0,0.04))] cursor-not-allowed hover:border-[color:var(--color-border,#d9d9d9)]"
+      }
+    }
+  },
+  defaultVariants: {
+    checked: !1,
+    disabled: !1
+  }
+}, u = /* @__PURE__ */ l({
+  name: "VRadio",
+  props: {
+    checked: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    ui: {
+      type: Object,
+      default: void 0
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["update:checked", "change"],
+  setup(e, {
+    emit: r
+  }) {
+    const {
+      slots: o
+    } = i("radio", c, e);
+    function d(t) {
+      e.disabled || e.checked || (r("update:checked", !0), r("change", !0, t));
+    }
+    return () => a("span", {
+      role: "radio",
+      "aria-checked": e.checked,
+      "aria-disabled": e.disabled,
+      class: o.root(),
+      onClick: d
+    }, [a("span", {
+      "aria-hidden": "true",
+      class: o.dot()
+    }, null)]);
+  }
+});
+export {
+  u as default
+};

package/dist/core/src/components/Scrollbar.mjs

@@ -0,0 +1,179 @@
+import { defineComponent as N, inject as O, ref as s, h as L, createVNode as n } from "vue";
+import { useTheme as j } from "../composables/useTheme.mjs";
+import { useScrollbar as B } from "../composables/useScrollbar.mjs";
+import { prefixVtgClassNames as A } from "../utils/classPrefix.mjs";
+import { VTABLE_GUILD_INJECTION_KEY as D } from "../plugin/index.mjs";
+import m from "./ScrollbarBar.mjs";
+const E = {
+  slots: {
+    root: "group relative overflow-hidden",
+    wrap: "overflow-auto scrollbar-none h-full",
+    view: "block min-w-full w-max",
+    track: "absolute z-[3] rounded opacity-0 transition-opacity duration-300 group-hover:opacity-100",
+    trackVertical: "right-0.5 top-0.5 bottom-0.5 w-[var(--vtg-scrollbar-thumb-width)]",
+    trackHorizontal: "bottom-0.5 left-0.5 right-0.5 h-[var(--vtg-scrollbar-thumb-width)]",
+    thumb: ["relative w-full", "h-full", "rounded-[var(--vtg-scrollbar-thumb-radius)]", "bg-[color:var(--vtg-scrollbar-thumb-bg)]", "hover:bg-[color:var(--vtg-scrollbar-thumb-hover-bg)]", "transition-colors cursor-pointer"].join(" ")
+  },
+  defaultVariants: {}
+};
+function c(e) {
+  if (e !== void 0)
+    return typeof e == "number" ? `${e}px` : e;
+}
+const G = /* @__PURE__ */ N({
+  name: "VScrollbar",
+  props: {
+    height: {
+      type: [String, Number],
+      default: void 0
+    },
+    maxHeight: {
+      type: [String, Number],
+      default: void 0
+    },
+    native: {
+      type: Boolean,
+      default: !1
+    },
+    always: {
+      type: Boolean,
+      default: !1
+    },
+    minSize: {
+      type: Number,
+      default: 20
+    },
+    tag: {
+      type: String,
+      default: "div"
+    },
+    wrapClass: {
+      type: String,
+      default: void 0
+    },
+    wrapStyle: {
+      type: [String, Object, Array],
+      default: void 0
+    },
+    viewClass: {
+      type: String,
+      default: void 0
+    },
+    viewStyle: {
+      type: [String, Object, Array],
+      default: void 0
+    },
+    ui: {
+      type: Object,
+      default: void 0
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["scroll"],
+  setup(e, {
+    emit: b,
+    slots: g,
+    expose: S
+  }) {
+    const f = O(D, null), {
+      slots: a
+    } = j("scrollbar", E, e), t = s(null), v = s(null), o = s(!1), {
+      verticalThumbSize: y,
+      verticalThumbOffset: w,
+      verticalVisible: x,
+      horizontalThumbSize: p,
+      horizontalThumbOffset: T,
+      horizontalVisible: C,
+      update: d
+    } = B(t, v, {
+      minSize: e.minSize
+    });
+    function z() {
+      d(), t.value && b("scroll", {
+        scrollTop: t.value.scrollTop,
+        scrollLeft: t.value.scrollLeft
+      });
+    }
+    function h({
+      ratio: l,
+      vertical: i
+    }) {
+      const r = t.value;
+      if (r)
+        if (i) {
+          const u = r.scrollHeight - r.clientHeight;
+          r.scrollTop = l * u;
+        } else {
+          const u = r.scrollWidth - r.clientWidth;
+          r.scrollLeft = l * u;
+        }
+    }
+    function k(l) {
+      t.value?.scrollTo(l);
+    }
+    function H(l) {
+      t.value && (t.value.scrollTop = l);
+    }
+    function V(l) {
+      t.value && (t.value.scrollLeft = l);
+    }
+    return S({
+      update: d,
+      scrollTo: k,
+      setScrollTop: H,
+      setScrollLeft: V,
+      wrapRef: t
+    }), () => {
+      const l = {};
+      e.height && (l.height = c(e.height)), e.maxHeight && (l.maxHeight = c(e.maxHeight));
+      const i = {};
+      e.maxHeight && (i.maxHeight = c(e.maxHeight));
+      const r = L(e.tag, {
+        ref: v,
+        class: [a.view(), e.viewClass],
+        style: e.viewStyle
+      }, g.default?.());
+      return n("div", {
+        class: a.root(),
+        style: l,
+        onMouseover: () => {
+          o.value = !0;
+        },
+        onMouseleave: () => {
+          o.value = !1;
+        }
+      }, [n("div", {
+        ref: t,
+        class: [a.wrap(), e.wrapClass, e.native ? "" : A("scrollbar-none", f?.cssMode ?? "prebuilt", f?.classPrefix ?? "vtg")],
+        style: [i, e.wrapStyle ?? {}],
+        onScroll: z
+      }, [r]), !e.native && x.value && n(m, {
+        vertical: !0,
+        thumbSize: y.value,
+        thumbOffset: w.value,
+        visible: o.value,
+        always: e.always,
+        trackClass: a.track(),
+        trackDirectionClass: a.trackVertical(),
+        thumbClass: a.thumb(),
+        onScroll: h
+      }, null), !e.native && C.value && n(m, {
+        vertical: !1,
+        thumbSize: p.value,
+        thumbOffset: T.value,
+        visible: o.value,
+        always: e.always,
+        trackClass: a.track(),
+        trackDirectionClass: a.trackHorizontal(),
+        thumbClass: a.thumb(),
+        onScroll: h
+      }, null)]);
+    };
+  }
+});
+export {
+  G as default
+};

package/dist/core/src/components/ScrollbarBar.mjs

@@ -0,0 +1,103 @@
+import { defineComponent as w, ref as v, onBeforeUnmount as C, createVNode as g } from "vue";
+const B = /* @__PURE__ */ w({
+  name: "ScrollbarBar",
+  props: {
+    vertical: {
+      type: Boolean,
+      default: !0
+    },
+    thumbSize: {
+      type: Number,
+      required: !0
+    },
+    thumbOffset: {
+      type: Number,
+      required: !0
+    },
+    visible: {
+      type: Boolean,
+      default: !1
+    },
+    always: {
+      type: Boolean,
+      default: !1
+    },
+    trackClass: {
+      type: String,
+      default: ""
+    },
+    trackDirectionClass: {
+      type: String,
+      default: ""
+    },
+    thumbClass: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["scroll"],
+  setup(e, {
+    emit: h
+  }) {
+    const l = v(null), o = v(!1), c = v(!1);
+    let b = 0;
+    function k(t) {
+      t.preventDefault(), t.stopPropagation(), o.value = !0, b = (e.vertical ? t.clientY : t.clientX) - e.thumbOffset, document.addEventListener("mousemove", s), document.addEventListener("mouseup", i), document.onselectstart = () => !1;
+    }
+    function s(t) {
+      if (!o.value || !l.value) return;
+      const n = l.value.getBoundingClientRect(), r = e.vertical ? n.height : n.width, f = (e.vertical ? t.clientY : t.clientX) - b, a = r - e.thumbSize, m = Math.max(0, Math.min(f, a)), d = a > 0 ? m / a : 0;
+      h("scroll", {
+        ratio: d,
+        vertical: e.vertical
+      });
+    }
+    function i() {
+      o.value = !1, document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", i), document.onselectstart = null;
+    }
+    function M(t) {
+      if (t.target === l.value) {
+        t.preventDefault();
+        const n = l.value.getBoundingClientRect(), r = e.vertical ? n.height : n.width, f = (e.vertical ? t.clientY - n.top : t.clientX - n.left) - e.thumbSize / 2, a = r - e.thumbSize, m = Math.max(0, Math.min(f, a)), d = a > 0 ? m / a : 0;
+        h("scroll", {
+          ratio: d,
+          vertical: e.vertical
+        });
+      }
+    }
+    function S() {
+      c.value = !0;
+    }
+    function y() {
+      c.value = !1;
+    }
+    return C(() => {
+      document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", i), document.onselectstart = null;
+    }), () => {
+      const t = e.always || e.visible || c.value || o.value, u = e.vertical ? {
+        height: `${e.thumbSize}px`,
+        transform: `translateY(${e.thumbOffset}px)`
+      } : {
+        width: `${e.thumbSize}px`,
+        transform: `translateX(${e.thumbOffset}px)`
+      };
+      return g("div", {
+        ref: l,
+        class: [e.trackClass, e.trackDirectionClass],
+        style: t ? {
+          opacity: 1
+        } : void 0,
+        onMousedown: M,
+        onMouseenter: S,
+        onMouseleave: y
+      }, [g("div", {
+        class: e.thumbClass,
+        style: u,
+        onMousedown: k
+      }, null)]);
+    };
+  }
+});
+export {
+  B as default
+};