@munet/ui 1.0.0 → 1.0.2

package/dist/__uno.css

@@ -0,0 +1 @@
+*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.pointer-events-none{pointer-events:none}.absolute{position:absolute}.absolute\!{position:absolute!important}.fixed{position:fixed}.relative{position:relative}.bottom-0{bottom:0}.bottom-1{bottom:.25rem}.bottom-18{bottom:4.5rem}.bottom-4{bottom:1rem}.left-0{left:0}.left-4{left:1rem}.left-50\%{left:50%}.right-0{right:0}.right-1{right:.25rem}.top-0{top:0}.top-25\%{top:25%}.top-50\%{top:50%}.z-1{z-index:1}.z-1001{z-index:1001}.z-1002{z-index:1002}.z-2{z-index:2}.z-40{z-index:40}.z-50{z-index:50}.z-80{z-index:80}.grid{display:grid}.m-auto{margin:auto}.m-t-0\!{margin-top:0!important}.m-t-4{margin-top:1rem}.mr-2{margin-right:.5rem}.ms{margin-inline-start:1rem}.hidden{display:none}.h-0{height:0}.h-10{height:2.5rem}.h-12{height:3rem}.h-1em{height:1em}.h-2{height:.5rem}.h-3\.5em{height:3.5em}.h-3em{height:3em}.h-5{height:1.25rem}.h-8{height:2rem}.h-full{height:100%}.max-w-90dvw{max-width:90dvw}.max-w-90vw{max-width:90vw}.min-h-12{min-height:3rem}.min-w-10{min-width:2.5rem}.min-w-48{min-width:12rem}.min-w-max{min-width:max-content}.w-0{width:0}.w-5{width:1.25rem}.w-50{width:12.5rem}.w-full{width:100%}.flex{display:flex}.inline-flex{display:inline-flex}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.translate--50\%{--un-translate-x:-50%;--un-translate-y:-50%;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.translate-y--100\%{--un-translate-y:-100%;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.translate-y-100\%{--un-translate-y:100%;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.rotate-180{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:180deg;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.transform{transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.resize{resize:both}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-14{gap:3.5rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.of-hidden,.overflow-hidden{overflow:hidden}.of-x-auto{overflow-x:auto}.of-y-hidden{overflow-y:hidden}.ws-pre-wrap{white-space:pre-wrap}.border{border-width:1px}.border-\[var\(--link-color\)\]\!{border-color:var(--link-color)!important}.border-red-600\!{--un-border-opacity:1 !important;border-color:rgb(220 38 38 / var(--un-border-opacity))!important}.border-transparent{border-color:transparent}.border-transparent\!{border-color:transparent!important}.rd-12px,.rounded-12px{border-radius:12px}.rd-2,.rd-lg,.rounded-lg{border-radius:.5rem}.rd-2xl{border-radius:1rem}.rd-md{border-radius:.375rem}.rd-xl{border-radius:.75rem}.rounded-full{border-radius:9999px}.rd-t-2xl{border-top-left-radius:1rem;border-top-right-radius:1rem}.bg-\[var\(--link-color\)\]\!{background-color:var(--link-color)!important}.bg-blue-500{--un-bg-opacity:1;background-color:rgb(59 130 246 / var(--un-bg-opacity))}.bg-blue-600{--un-bg-opacity:1;background-color:rgb(37 99 235 / var(--un-bg-opacity))}.bg-gray-200{--un-bg-opacity:1;background-color:rgb(229 231 235 / var(--un-bg-opacity))}.bg-green-500{--un-bg-opacity:1;background-color:rgb(34 197 94 / var(--un-bg-opacity))}.bg-green-600{--un-bg-opacity:1;background-color:rgb(22 163 74 / var(--un-bg-opacity))}.bg-red-500{--un-bg-opacity:1;background-color:rgb(239 68 68 / var(--un-bg-opacity))}.bg-red-600{--un-bg-opacity:1;background-color:rgb(220 38 38 / var(--un-bg-opacity))}.bg-red-600\!{--un-bg-opacity:1 !important;background-color:rgb(220 38 38 / var(--un-bg-opacity))!important}.bg-transparent{background-color:transparent}.bg-transparent\!{background-color:transparent!important}.bg-yellow-600{--un-bg-opacity:1;background-color:rgb(202 138 4 / var(--un-bg-opacity))}.hover\:bg-\[var\(--link-color\)\]\/12\!:hover{background-color:var(--link-color)!important}.hover\:bg-red-4\/10\!:hover{background-color:#f871711a!important}.active\:bg-\[var\(--link-color\)\]\/18\!:active{background-color:var(--link-color)!important}[stroke-width~="4"]{stroke-width:4px}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-x-10{padding-left:2.5rem;padding-right:2.5rem}.px,.px-4,[px=""]{padding-left:1rem;padding-right:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.text-right{text-align:right}.text-1\.5em{font-size:1.5em}.text-2\.5{font-size:.625rem}.text-6{font-size:1.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.text-\[var\(--link-color\)\]\!{color:var(--link-color)!important}.text-gray-600{--un-text-opacity:1;color:rgb(75 85 99 / var(--un-text-opacity))}.text-red-4{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity))}.text-white\!{--un-text-opacity:1 !important;color:rgb(255 255 255 / var(--un-text-opacity))!important}.c-red-5{--un-text-opacity:1;color:rgb(239 68 68 / var(--un-text-opacity))}.font-600{font-weight:600}.font-bold{font-weight:700}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4}.op-0,.opacity-0{opacity:0}.op-0\!,.opacity-0\!{opacity:0!important}.op-50,.opacity-50{opacity:.5}.op-60{opacity:.6}.op-90{opacity:.9}.opacity-100{opacity:1}.opacity-25{opacity:.25}.opacity-75{opacity:.75}.hover\:op-70:hover{opacity:.7}.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.outline{outline-style:solid}.outline-none{outline:2px solid transparent;outline-offset:2px}.backdrop-blur-8{--un-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)}.backdrop-blur-lg{--un-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)}.backdrop-blur-sm{--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)}.backdrop-filter{-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-300{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.transition-all-500{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.5s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-right{transition-property:right;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-250{transition-duration:.25s}.duration-500,[duration~="500"]{transition-duration:.5s}[duration~="300"]{transition-duration:.3s}.ease,.ease-in-out,.transition-ease,.transition-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,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
+};