@munet/ui 1.0.0 → 1.0.1

package/dist/components/Button/index.d.ts

@@ -4,13 +4,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onContextmenu: PropType<() => any>;
     disabled: BooleanConstructor;
     ing: BooleanConstructor;
+    variant: PropType<"primary" | "secondary" | "ghost">;
+    danger: BooleanConstructor;
+    size: PropType<"small" | "medium">;
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     onClick: PropType<() => any>;
     onContextmenu: PropType<() => any>;
     disabled: BooleanConstructor;
     ing: BooleanConstructor;
+    variant: PropType<"primary" | "secondary" | "ghost">;
+    danger: BooleanConstructor;
+    size: PropType<"small" | "medium">;
 }>> & Readonly<{}>, {
     disabled: boolean;
     ing: boolean;
+    danger: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/Button/index.js

@@ -1,29 +1,46 @@
-import { defineComponent as o, createVNode as n } from "vue";
-import { theme as i } from "../../themes/index.js";
+import { defineComponent as a, createVNode as t } from "vue";
+import { theme as r } from "../../themes/index.js";
 import l from "./LoadingBackground/index.js";
-const m = /* @__PURE__ */ o({
+const c = /* @__PURE__ */ a({
   props: {
     onClick: Function,
     onContextmenu: Function,
     disabled: Boolean,
-    ing: Boolean
+    ing: Boolean,
+    variant: String,
+    danger: Boolean,
+    size: String
   },
   setup(e, {
-    emit: a,
-    slots: t
+    emit: u,
+    slots: n
   }) {
-    return () => n("button", {
-      class: "relative of-hidden",
+    const i = () => {
+      if (e.danger)
+        return "text-red-4 hover:bg-red-4/10!";
+      switch (e.variant) {
+        // case 'primary':
+        //   return 'bg-[var(--link-color)]! border-[var(--link-color)]! text-white!';
+        // case 'secondary':
+        //   return 'bg-transparent! border-[var(--link-color)]! text-[var(--link-color)]!';
+        // case 'ghost':
+        //   return 'bg-transparent! border-transparent! text-[var(--link-color)]! hover:bg-[var(--link-color)]/12! active:bg-[var(--link-color)]/18!';
+        default:
+          return "";
+      }
+    }, o = () => e.size === "small" ? "h-8 text-sm px-2" : e.size === "medium" ? "h-10 text-base px-4" : "";
+    return () => t("button", {
+      class: ["relative of-hidden", i(), o()],
       disabled: e.disabled || e.ing,
       onClick: e.onClick,
       onContextmenu: e.onContextmenu
-    }, [n("div", {
+    }, [t("div", {
       class: "z-2 inline-flex items-center justify-center"
-    }, [t.default?.()]), e.ing && n(l, {
-      class: ["absolute bottom-0 left-0 right-0 top-25% z-1", i.value.loadingBackground]
+    }, [n.default?.()]), e.ing && t(l, {
+      class: ["absolute bottom-0 left-0 right-0 top-25% z-1", r.value.loadingBackground]
     }, null)]);
   }
 });
 export {
-  m as default
+  c as default
 };

package/dist/components/DateFormat.d.ts

@@ -1,6 +1,6 @@
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     value: {
-        type: (DateConstructor | StringConstructor | NumberConstructor)[];
+        type: (StringConstructor | DateConstructor | NumberConstructor)[];
         required: true;
     };
     format: {
@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>, () => string, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     value: {
-        type: (DateConstructor | StringConstructor | NumberConstructor)[];
+        type: (StringConstructor | DateConstructor | NumberConstructor)[];
         required: true;
     };
     format: {

package/dist/components/DropMenu/DropDown.d.ts

@@ -19,6 +19,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    align: {
+        type: PropType<"center" | "left" | "right">;
+        default: string;
+    };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     innerClass: (StringConstructor | ArrayConstructor)[];
     innerStyle: PropType<CSSProperties>;
@@ -39,11 +43,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    align: {
+        type: PropType<"center" | "left" | "right">;
+        default: string;
+    };
 }>> & Readonly<{}>, {
     gap: number;
+    maxHeight: number;
     buttonIng: boolean;
     buttonText: string;
     autoPosition: boolean;
-    maxHeight: number;
+    align: "right" | "left" | "center";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/DropMenu/DropDown.js

@@ -1,8 +1,8 @@
-import { defineComponent as p, ref as s, computed as b, createVNode as a } from "vue";
-import { onClickOutside as v } from "@vueuse/core";
-import y from "../TransitionVertical.vue.js";
-import w from "../Button/index.js";
-const H = /* @__PURE__ */ p({
+import { defineComponent as b, ref as l, onBeforeUnmount as x, createVNode as o, Fragment as y, Teleport as h } from "vue";
+import { onClickOutside as S } from "@vueuse/core";
+import B from "../TransitionVertical.vue.js";
+import C from "../Button/index.js";
+const z = /* @__PURE__ */ b({
   props: {
     innerClass: [String, Array],
     innerStyle: [Object, String],
@@ -22,56 +22,64 @@ const H = /* @__PURE__ */ p({
     maxHeight: {
       type: Number,
       default: 200
+    },
+    align: {
+      type: String,
+      default: "center"
     }
   },
-  setup(o, {
-    emit: x,
-    slots: l,
-    expose: f
+  setup(t, {
+    emit: $,
+    slots: s,
+    expose: p
   }) {
-    const n = s(!1), i = s(null), r = s("bottom");
-    v(i, (t) => n.value = !1);
-    const m = () => {
-      if (!o.autoPosition || !i.value) return;
-      const t = i.value.getBoundingClientRect(), c = window.innerHeight - t.bottom, d = t.top;
-      c < o.maxHeight && d > c ? r.value = "top" : r.value = "bottom";
-    }, u = (t) => {
-      const e = typeof t == "boolean" ? t : !n.value;
-      e && m(), n.value = e;
-    };
-    f({
-      setShow: (t) => {
-        u(t);
-      }
+    const i = l(!1), a = l(null), d = l(null), g = l("bottom"), c = l({});
+    S(a, (e) => i.value = !1, {
+      ignore: [d]
     });
-    const g = b(() => {
-      const t = o.innerStyle || {};
-      if (!o.autoPosition) return t;
-      const e = {
-        position: "absolute",
+    const m = () => {
+      if (!t.autoPosition || !a.value) return;
+      const e = a.value.getBoundingClientRect(), r = window.innerHeight, v = r - e.bottom, w = e.top, n = {
+        position: "fixed",
         zIndex: 100
       };
-      return r.value === "bottom" ? (e.top = `calc(100% + ${o.gap}px)`, e.transformOrigin = "top center") : (e.bottom = `calc(100% + ${o.gap}px)`, e.top = "auto", e.transformOrigin = "bottom center"), {
-        ...t,
-        ...e
+      t.align === "right" ? n.right = `${window.innerWidth - e.right}px` : t.align === "left" ? n.left = `${e.left}px` : (n.left = `${e.left + e.width / 2}px`, n.transform = "translateX(-50%)"), v < t.maxHeight && w > v ? (g.value = "top", n.bottom = `${r - e.top + t.gap}px`, n.transformOrigin = "bottom center") : (g.value = "bottom", n.top = `${e.bottom + t.gap}px`, n.transformOrigin = "top center"), c.value = {
+        ...t.innerStyle || {},
+        ...n
       };
-    });
-    return () => a("div", {
+    }, f = (e) => {
+      const r = typeof e == "boolean" ? e : !i.value;
+      r && m(), i.value = r;
+    }, u = () => {
+      i.value && m();
+    };
+    return window.addEventListener("resize", u), window.addEventListener("scroll", u, !0), x(() => {
+      window.removeEventListener("resize", u), window.removeEventListener("scroll", u, !0);
+    }), p({
+      setShow: (e) => {
+        f(e);
+      }
+    }), () => o(y, null, [o("div", {
       class: "relative",
-      ref: i
-    }, [l.trigger ? l.trigger(u) : a(w, {
-      ing: o.buttonIng,
-      onClick: () => u()
+      ref: a
+    }, [s.trigger ? s.trigger(f) : o(C, {
+      ing: t.buttonIng,
+      onClick: () => f()
+    }, {
+      default: () => [t.buttonText]
+    })]), o(h, {
+      to: "body"
     }, {
-      default: () => [o.buttonText]
-    }), a(y, null, {
-      default: () => [n.value && a("div", {
-        class: o.innerClass,
-        style: g.value
-      }, [l.default?.()])]
+      default: () => [o(B, null, {
+        default: () => [i.value && o("div", {
+          ref: d,
+          class: t.innerClass,
+          style: c.value
+        }, [s.default?.()])]
+      })]
     })]);
   }
 });
 export {
-  H as default
+  z as default
 };

package/dist/components/DropMenu/index.d.ts

@@ -12,6 +12,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     options: {
         type: PropType<{
             label: string;
+            desc?: string;
+            icon?: string;
+            disabled?: boolean;
             action: () => any;
         }[]>;
         default: () => never[];
@@ -20,6 +23,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<string>;
         default: string;
     };
+    align: {
+        type: PropType<"center" | "left" | "right">;
+        default: string;
+    };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     buttonText: {
         type: PropType<string>;
@@ -33,6 +40,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     options: {
         type: PropType<{
             label: string;
+            desc?: string;
+            icon?: string;
+            disabled?: boolean;
             action: () => any;
         }[]>;
         default: () => never[];
@@ -41,14 +51,22 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<string>;
         default: string;
     };
+    align: {
+        type: PropType<"center" | "left" | "right">;
+        default: string;
+    };
 }>> & Readonly<{}>, {
     width: string;
     innerClass: string;
     options: {
         label: string;
+        desc?: string;
+        icon?: string;
+        disabled?: boolean;
         action: () => any;
     }[];
-    buttonText: string;
     row: boolean;
+    buttonText: string;
+    align: "right" | "left" | "center";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/DropMenu/index.js

@@ -1,6 +1,6 @@
-import { defineComponent as a, ref as i, createVNode as r } from "vue";
-import u from "./DropDown.js";
-const s = /* @__PURE__ */ a({
+import { defineComponent as s, ref as d, createVNode as l } from "vue";
+import i from "./DropDown.js";
+const c = /* @__PURE__ */ s({
   props: {
     buttonText: {
       type: String,
@@ -18,31 +18,42 @@ const s = /* @__PURE__ */ a({
     innerClass: {
       type: String,
       default: ""
+    },
+    align: {
+      type: String,
+      default: "center"
     }
   },
   setup(t, {
-    slots: o
+    slots: a
   }) {
-    const e = i();
-    return () => r(u, {
+    const n = d();
+    return () => l(i, {
       buttonText: t.buttonText,
       innerStyle: {
         width: t.width
       },
-      ref: e,
-      innerClass: ["absolute top-full left-50% bg-dropMenu rounded-lg p-2 z-10 flex gap-2 translate-x--50% backdrop-blur-8", !t.row && "flex-col", t.innerClass]
+      ref: n,
+      align: t.align,
+      innerClass: ["bg-dropMenu rounded-lg p-2 flex gap-2 backdrop-blur-8", !t.row && "flex-col", t.innerClass]
     }, {
-      default: () => t.options.map((n, l) => r("div", {
-        key: l,
-        class: "w-full min-w-max flex items-center justify-center px-4 py-2 rounded-lg bg-avatarMenuButton transition-colors",
+      default: () => t.options.map((e, r) => l("div", {
+        key: r,
+        class: ["w-full min-w-max flex items-center px-4 py-2 rounded-lg bg-avatarMenuButton transition-colors gap-2", e.disabled && "op-50 cursor-not-allowed"],
         onClick: () => {
-          e.value?.setShow(!1), n.action();
+          e.disabled || (n.value?.setShow(!1), e.action());
         }
-      }, [n.label])),
-      trigger: o.trigger
+      }, [e.icon && l("span", {
+        class: [e.icon, "text-lg shrink-0"]
+      }, null), l("div", {
+        class: "flex flex-col"
+      }, [l("span", null, [e.label]), e.desc && l("span", {
+        class: "text-xs op-60"
+      }, [e.desc])])])),
+      trigger: a.trigger
     });
   }
 });
 export {
-  s as default
+  c as default
 };

package/dist/components/NumberInput.d.ts

@@ -1,3 +1,4 @@
+import { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     min: {
         type: NumberConstructor;
@@ -19,6 +20,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    onFocus: PropType<() => void>;
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     min: {
         type: NumberConstructor;
@@ -40,6 +42,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    onFocus: PropType<() => void>;
 }>> & Readonly<{}>, {
     value: number;
     step: number;

package/dist/components/NumberInput.js

@@ -1,8 +1,8 @@
-import { defineComponent as o, ref as f, computed as d, shallowRef as i, watch as s, createVNode as p } from "vue";
-import { useVModel as c } from "@vueuse/core";
+import { defineComponent as m, ref as f, computed as s, shallowRef as i, watch as c, createVNode as d } from "vue";
+import { useVModel as p } from "@vueuse/core";
 import v from "./TextInput/index.js";
 import * as y from "lodash-es";
-const h = /* @__PURE__ */ o({
+const F = /* @__PURE__ */ m({
   props: {
     min: {
       type: Number,
@@ -23,38 +23,40 @@ const h = /* @__PURE__ */ o({
     value: {
       type: Number,
       default: 0
-    }
+    },
+    onFocus: Function
   },
   setup(e, {
-    emit: m
+    emit: r
   }) {
-    const l = c(e, "value", m), u = f(""), r = d({
+    const n = p(e, "value", r), u = f(""), o = s({
       get: () => u.value,
       set: (t) => {
-        u.value = t, l.value = y.clamp(Number(t), e.min, e.max);
+        u.value = t, n.value = y.clamp(Number(t), e.min, e.max);
       }
     }), a = () => {
-      u.value = l.value.toFixed(e.decimal);
-    }, n = i();
-    return s(() => e.value, () => {
-      if (n?.value?.focused) {
+      u.value = n.value.toFixed(e.decimal);
+    }, l = i();
+    return c(() => e.value, () => {
+      if (l?.value?.focused) {
         console.log("focused, not refresh");
         return;
       }
       a();
     }, {
       immediate: !0
-    }), () => p(v, {
-      ref: n,
-      value: r.value,
-      "onUpdate:value": (t) => r.value = t,
+    }), () => d(v, {
+      ref: l,
+      value: o.value,
+      "onUpdate:value": (t) => o.value = t,
       type: "number",
       step: e.step,
       onBlur: a,
-      onEnterPressed: a
+      onEnterPressed: a,
+      onFocus: e.onFocus
     }, null);
   }
 });
 export {
-  h as default
+  F as default
 };

package/dist/components/Popover/index.d.ts

@@ -0,0 +1,25 @@
+import { PropType } from 'vue';
+type TriggerType = 'hover' | 'click';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    trigger: {
+        type: PropType<TriggerType>;
+        default: string;
+    };
+    offset: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    trigger: {
+        type: PropType<TriggerType>;
+        default: string;
+    };
+    offset: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    trigger: TriggerType;
+    offset: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/Popover/index.js

@@ -0,0 +1,76 @@
+import { defineComponent as R, ref as o, computed as y, onBeforeUnmount as B, createVNode as r, Fragment as H, Teleport as z, nextTick as W } from "vue";
+import N from "../TransitionOpacity.js";
+const $ = /* @__PURE__ */ R({
+  props: {
+    trigger: {
+      type: String,
+      default: "hover"
+    },
+    offset: {
+      type: Number,
+      default: 8
+    }
+  },
+  setup(i, {
+    slots: g
+  }) {
+    const t = o(!1), m = o("bottom"), d = o(0), p = o(0), a = o(null), u = o(null), s = o(null), c = y(() => i.trigger === "hover"), l = () => {
+      s.value !== null && (window.clearTimeout(s.value), s.value = null);
+    }, f = () => {
+      if (!a.value || !u.value) return;
+      const n = a.value.getBoundingClientRect(), e = u.value.getBoundingClientRect(), b = window.innerHeight, L = window.innerWidth, k = b - n.bottom, C = n.top;
+      k < e.height + i.offset && C > k ? (m.value = "top", d.value = Math.max(8, n.top - e.height - i.offset)) : (m.value = "bottom", d.value = Math.min(b - e.height - 8, n.bottom + i.offset));
+      const E = n.left + (n.width - e.width) / 2;
+      p.value = Math.min(Math.max(8, E), Math.max(8, L - e.width - 8));
+    }, w = () => {
+      if (l(), t.value) {
+        f();
+        return;
+      }
+      t.value = !0, W(() => {
+        f();
+      });
+    }, h = () => {
+      l(), t.value = !1;
+    }, x = () => {
+      l(), s.value = window.setTimeout(() => {
+        t.value = !1;
+      }, 120);
+    }, T = () => {
+      t.value ? h() : w();
+    }, v = () => {
+      t.value && f();
+    }, M = (n) => {
+      if (i.trigger !== "click" || !t.value) return;
+      const e = n.target;
+      e && (a.value?.contains(e) || u.value?.contains(e) || h());
+    };
+    return window.addEventListener("resize", v), window.addEventListener("scroll", v, !0), document.addEventListener("click", M, !0), B(() => {
+      l(), window.removeEventListener("resize", v), window.removeEventListener("scroll", v, !0), document.removeEventListener("click", M, !0);
+    }), () => r(H, null, [r("div", {
+      ref: a,
+      class: "inline-flex",
+      onMouseenter: () => c.value && w(),
+      onMouseleave: () => c.value && x(),
+      onClick: () => i.trigger === "click" && T()
+    }, [g.trigger?.()]), r(z, {
+      to: "#app"
+    }, {
+      default: () => [r(N, null, {
+        default: () => [t.value && r("div", {
+          ref: u,
+          class: "fixed z-80 max-w-90vw rd-2 bg-dropMenu p-2 text-sm backdrop-blur-8",
+          style: {
+            top: `${d.value}px`,
+            left: `${p.value}px`
+          },
+          onMouseenter: () => c.value && l(),
+          onMouseleave: () => c.value && x()
+        }, [g.default?.()])]
+      })]
+    })]);
+  }
+});
+export {
+  $ as default
+};

package/dist/components/Progress/index.d.ts

@@ -0,0 +1,33 @@
+import { PropType } from 'vue';
+declare const Progress: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    percentage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    status: {
+        type: PropType<"default" | "success" | "error">;
+        default: string;
+    };
+    showIndicator: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    percentage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    status: {
+        type: PropType<"default" | "success" | "error">;
+        default: string;
+    };
+    showIndicator: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    status: "success" | "error" | "default";
+    percentage: number;
+    showIndicator: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default Progress;

package/dist/components/Progress/index.js

@@ -0,0 +1,35 @@
+import { defineComponent as s, computed as r, createVNode as t, createTextVNode as u } from "vue";
+const d = /* @__PURE__ */ s({
+  props: {
+    percentage: {
+      type: Number,
+      default: 0
+    },
+    status: {
+      type: String,
+      default: "default"
+    },
+    showIndicator: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    const l = r(() => e.status === "success" ? "bg-green-500" : e.status === "error" ? "bg-red-500" : "bg-blue-500"), a = r(() => Math.min(100, Math.max(0, e.percentage)));
+    return () => t("div", {
+      class: "flex items-center gap-2 w-full"
+    }, [t("div", {
+      class: "flex-1 h-2 bg-gray-200 rounded-full overflow-hidden"
+    }, [t("div", {
+      class: [l.value, "h-full rounded-full"],
+      style: {
+        width: `${a.value}%`
+      }
+    }, null)]), e.showIndicator && t("span", {
+      class: "text-sm text-gray-600 min-w-10 text-right"
+    }, [a.value, u("%")])]);
+  }
+});
+export {
+  d as default
+};