@septkit/ui 0.0.9 → 0.0.11

package/dist/dropdown/dropdown.vue.js

@@ -1,9 +1,6 @@
-import { defineComponent as h, useTemplateRef as k, ref as _, computed as o, createElementBlock as l, openBlock as a, createElementVNode as z, withDirectives as C, normalizeClass as O, withModifiers as S, renderSlot as r, unref as B } from "vue";
-import { VOnClickOutside as D } from "../external/.pnpm/@vueuse_components@13.5.0_vue@3.5.17_typescript@5.8.3_/node_modules/@vueuse/components/index.js";
-const x = ["open"], q = {
-  "data-testid": "dropdown-menu",
-  class: "menu dropdown-content bg-base-100 z-1 w-52 p-2 shadow-sm"
-}, $ = /* @__PURE__ */ h({
+import { defineComponent as h, useTemplateRef as S, ref as C, computed as n, createElementBlock as i, openBlock as c, createElementVNode as O, withDirectives as x, normalizeClass as l, withModifiers as B, renderSlot as d, unref as D } from "vue";
+import { VOnClickOutside as _ } from "../external/.pnpm/@vueuse_components@13.5.0_vue@3.5.17_typescript@5.8.3_/node_modules/@vueuse/components/index.js";
+const q = ["open"], $ = /* @__PURE__ */ h({
   __name: "dropdown",
   props: {
     color: {},
@@ -12,98 +9,101 @@ const x = ["open"], q = {
     active: { type: Boolean },
     disabled: { type: Boolean },
     modifier: {},
+    background: {},
     id: {}
   },
   emits: ["open", "close"],
-  setup(c, { expose: u, emit: p }) {
-    const n = c, i = p, d = k("details-ref"), e = _(!1), b = o(
-      () => ({
-        neutral: "btn-neutral",
-        primary: "btn-primary",
-        secondary: "btn-secondary",
-        accent: "btn-accent",
-        info: "btn-info",
-        success: "btn-success",
-        warning: "btn-warning",
-        error: "btn-error",
-        undefined: ""
-      })[n.color ?? "undefined"]
-    ), f = o(
-      () => ({
-        outline: "btn-outline",
-        dash: "btn-dash",
-        soft: "btn-soft",
-        ghost: "btn-ghost",
-        link: "btn-link",
-        undefined: ""
-      })[n.variant ?? "undefined"]
-    ), m = o(
-      () => ({
-        xs: "btn-xs",
-        sm: "btn-sm",
-        md: "btn-md",
-        lg: "btn-lg",
-        xl: "btn-xl",
-        undefined: ""
-      })[n.size ?? "undefined"]
-    ), v = o(
-      () => ({
-        wide: "btn-wide",
-        block: "btn-block",
-        square: "btn-square",
-        circle: "btn-circle",
-        undefined: ""
-      })[n.modifier ?? "undefined"]
-    );
-    function w() {
-      d.value && (d.value.open = e.value);
+  setup(b, { expose: u, emit: p }) {
+    const e = b, a = p, s = S("details-ref"), o = C(!1), m = n(() => ({
+      "bg-neutral": e.background === "neutral",
+      "bg-primary": e.background === "primary",
+      "bg-secondary": e.background === "secondary",
+      "bg-accent": e.background === "accent",
+      "bg-info": e.background === "info",
+      "bg-success": e.background === "success",
+      "bg-warning": e.background === "warning",
+      "bg-error": e.background === "error",
+      "bg-base-100": e.background === "base",
+      "bg-white": !e.background
+    })), g = n(() => ({
+      "btn-neutral": e.color === "neutral" || !e.color,
+      "btn-primary": e.color === "primary",
+      "btn-secondary": e.color === "secondary",
+      "btn-accent": e.color === "accent",
+      "btn-info": e.color === "info",
+      "btn-success": e.color === "success",
+      "btn-warning": e.color === "warning",
+      "btn-error": e.color === "error"
+    })), f = n(() => ({
+      "btn-outline": e.variant === "outline",
+      "btn-dash": e.variant === "dash",
+      "btn-soft": e.variant === "soft",
+      "btn-ghost": e.variant === "ghost" || !e.variant,
+      "btn-link": e.variant === "link"
+    })), v = n(() => ({
+      "btn-xs": e.size === "xs",
+      "btn-sm": e.size === "sm" || !e.size,
+      "btn-md": e.size === "md",
+      "btn-lg": e.size === "lg",
+      "btn-xl": e.size === "xl"
+    })), w = n(() => ({
+      "btn-wide": e.modifier === "wide" || !e.modifier,
+      "btn-block": e.modifier === "block",
+      "btn-square": e.modifier === "square",
+      "btn-circle": e.modifier === "circle"
+    }));
+    function k() {
+      s.value && (s.value.open = o.value);
     }
-    function s() {
-      e.value = !1, i("close");
-    }
-    function g() {
-      e.value = !0, i("open");
+    function r() {
+      o.value = !1, a("close");
     }
     function y() {
-      e.value ? s() : g();
+      o.value = !0, a("open");
+    }
+    function z() {
+      o.value ? r() : y();
     }
     return u({
       /** Method to close the dropdown */
-      close: s,
+      close: r,
       /** Reactive boolean of the dropdown state */
-      isOpen: e,
-      id: n.id
-    }), (t, E) => (a(), l("details", {
+      isOpen: o,
+      id: e.id
+    }), (t, E) => (c(), i("details", {
       "data-testid": "dropdown-wrapper",
       ref: "details-ref",
       class: "dropdown",
-      open: e.value,
-      onToggle: w
+      open: o.value,
+      onToggle: k
     }, [
-      z("summary", {
+      O("summary", {
         "data-testid": "dropdown-trigger",
-        onClick: S(y, ["stop"]),
-        class: O(["btn", [
-          b.value,
+        onClick: B(z, ["stop"]),
+        class: l(["btn", [
+          g.value,
           f.value,
-          m.value,
           v.value,
+          w.value,
           { "btn-active": t.active, "btn-disabled": t.disabled }
         ]])
       }, [
-        r(t.$slots, "label")
+        d(t.$slots, "label")
       ], 2),
-      C((a(), l("ul", q, [
-        r(t.$slots, "items")
-      ])), [
+      x((c(), i("ul", {
+        "data-testid": "dropdown-menu",
+        class: l([[m.value], "menu dropdown-content z-1 w-52 p-2 shadow-sm size-max"])
+      }, [
+        d(t.$slots, "items")
+      ], 2)), [
         [
-          B(D),
-          s,
+          D(_),
+          r,
           void 0,
           { bubble: !0 }
         ]
       ])
-    ], 40, x));
+    ], 40, q));
   }
 });
 export {

package/dist/index.d.ts

@@ -45,6 +45,8 @@ declare type __VLS_Props_2 = {
     disabled?: boolean;
     /** Trigger modifier */
     modifier?: 'wide' | 'block' | 'square' | 'circle';
+    /** Menu background */
+    background?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'base' | 'white';
     id?: string;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@septkit/ui",
-	"version": "0.0.9",
+	"version": "0.0.11",
 	"type": "module",
 	"source": "lib/index.ts",
 	"scripts": {