@indielayer/ui 1.10.5 → 1.12.0

package/docs/pages/component/select/multiple.vue

@@ -4,20 +4,27 @@ import { ref } from 'vue'
 const selectedMultiple = ref<string[]>(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M'])
 
 const options = ref([
-  { value: 'A', label: 'Option lorem ipsum' },
-  { value: 'B', label: 'Option B ipsum' },
-  { value: 'C', label: 'Option C lorem ipsum' },
-  { value: 'D', label: 'D' },
-  { value: 'E', label: 'E ipsum' },
-  { value: 'F', label: 'Option F' },
-  { value: 'G', label: 'Option lorem ipsum qoiwjdoqiwjdoqiwjdoqiwjdoi' },
-  { value: 'H', label: 'Option H' },
-  { value: 'I', label: 'lorem ipsum dolo' },
-  { value: 'J', label: 'Option J' },
-  { value: 'K', label: 'Option K' },
-  { value: 'L', label: 'consectetur adipi' },
-  { value: 'M', label: 'Option M' },
+  { value: 'A', label: 'Option lorem ipsum', color: 'bg-red-500' },
+  { value: 'B', label: 'Option B ipsum', color: 'bg-orange-500' },
+  { value: 'C', label: 'Option C lorem ipsum', color: 'bg-amber-500' },
+  { value: 'D', label: 'D', color: 'bg-yellow-500' },
+  { value: 'E', label: 'E ipsum', color: 'bg-lime-500' },
+  { value: 'F', label: 'Option F', color: 'bg-green-500' },
+  { value: 'G', label: 'Option lorem ipsum qoiwjdoqiwjdoqiwjdoqiwjdoi', color: 'bg-emerald-500' },
+  { value: 'H', label: 'Option H', color: 'bg-teal-500' },
+  { value: 'I', label: 'lorem ipsum dolo', color: 'bg-cyan-500' },
+  { value: 'J', label: 'Option J', color: 'bg-sky-500' },
+  { value: 'K', label: 'Option K', color: 'bg-blue-500' },
+  { value: 'L', label: 'consectetur adipi', color: 'bg-indigo-500' },
+  { value: 'M', label: 'Option M', color: 'bg-violet-500' },
 ])
+
+const optionsWithColors = options.value.map((option) => {
+  return {
+    ...option,
+    prefix: option.color,
+  }
+})
 </script>
 
 <template>
@@ -38,5 +45,28 @@ const options = ref([
       multiple
       truncate
     />
+    <x-select
+      v-model="selectedMultiple"
+      label="Multi select - checkbox"
+      placeholder="Multiple"
+      :options="options"
+      multiple-checkbox
+      filterable
+    />
+    <x-select
+      v-model="selectedMultiple"
+      label="Multi select - checkbox - prefix items"
+      placeholder="Multiple"
+      :options="optionsWithColors"
+      multiple-checkbox
+      filterable
+    >
+      <template #prefix="{ item }">
+        <div class="w-2 h-2 rounded-full" :class="item.prefix"></div>
+      </template>
+      <template #tag-prefix="{ item }">
+        <div class="w-2 h-2 rounded-full" :class="item.prefix"></div>
+      </template>
+    </x-select>
   </div>
 </template>

package/docs/pages/component/tag/usage.vue

@@ -25,5 +25,31 @@ const notifications = useNotifications()
     <x-tag removable disabled @remove="notifications?.log('remove me')">I'm a md tag</x-tag>
     <x-tag removable size="lg" @remove="notifications?.log('remove me')">I'm a lg tag</x-tag>
     <x-tag removable size="xl" @remove="notifications?.log('remove me')">I'm a xl tag</x-tag>
+
+    <div class="flex flex-col max-w-xs gap-y-1">
+      <div>
+        <x-tag outlined>
+          I'm a veeeeeeeeeeeeeeeeeeeeeeeery long tag
+        </x-tag>
+      </div>
+
+      <div>
+        <x-tag outlined>
+          <template #prefix>
+            <div class="w-2 h-2 rounded-full bg-green-500"></div>
+          </template>
+          I'm a veeeeeeeeeeeeeeeeeeeeery long tag
+        </x-tag>
+      </div>
+
+      <div>
+        <x-tag removable outlined>
+          <template #prefix>
+            <div class="w-2 h-2 rounded-full bg-green-500"></div>
+          </template>
+          I'm a veeeeeeeeeeeeeeeeeeery long tag
+        </x-tag>
+      </div>
+    </div>
   </div>
 </template>

package/lib/components/menu/MenuItem.vue.d.ts

@@ -34,6 +34,7 @@ declare const menuItemProps: {
     minimal: BooleanConstructor;
     prefix: StringConstructor;
     suffix: StringConstructor;
+    checkbox: BooleanConstructor;
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
@@ -84,6 +85,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     minimal: BooleanConstructor;
     prefix: StringConstructor;
     suffix: StringConstructor;
+    checkbox: BooleanConstructor;
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
@@ -93,7 +95,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "active")[], "click" | "active", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "active" | "checkbox-click")[], "click" | "active" | "checkbox-click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     item: {
         type: PropType<MenuArrayItem>;
         default: () => void;
@@ -126,6 +128,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     minimal: BooleanConstructor;
     prefix: StringConstructor;
     suffix: StringConstructor;
+    checkbox: BooleanConstructor;
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
@@ -138,6 +141,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
 }>> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
     onActive?: ((...args: any[]) => any) | undefined;
+    "onCheckbox-click"?: ((...args: any[]) => any) | undefined;
 }>, {
     disabled: boolean;
     color: string;
@@ -151,6 +155,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     attrs: Record<string, any>;
     exact: boolean;
     selected: boolean;
+    checkbox: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     prefix?(_: {
         item: MenuItemProps;

package/lib/components/menu/MenuItem.vue.js

@@ -3,7 +3,7 @@ import o from "./MenuItem.vue3.js";
 import t from "../../_virtual/_plugin-vue_export-helper.js";
 const e = {
   $style: o
-}, c = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-47a57bf7"]]);
+}, _ = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-4c0f9774"]]);
 export {
-  c as default
+  _ as default
 };

package/lib/components/menu/MenuItem.vue2.js

@@ -1,19 +1,19 @@
-import { defineComponent as z, ref as k, computed as g, onMounted as N, watch as h, openBlock as l, createBlock as i, resolveDynamicComponent as R, mergeProps as I, unref as s, withCtx as M, createElementBlock as r, renderSlot as n, createTextVNode as u, toDisplayString as c, createCommentVNode as f, createElementVNode as O, Fragment as P } from "vue";
-import { useMutationObserver as j } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
-import { useColors as w } from "../../composables/useColors.js";
-import { useCommon as $ } from "../../composables/useCommon.js";
-import { useTheme as D } from "../../composables/useTheme.js";
-import y from "../icon/Icon.vue.js";
-import F from "../spinner/Spinner.vue.js";
-const T = {
-  key: 0,
+import { defineComponent as R, ref as y, computed as b, onMounted as w, watch as x, resolveComponent as I, openBlock as l, createBlock as r, resolveDynamicComponent as O, mergeProps as P, unref as c, withCtx as j, withModifiers as D, createCommentVNode as s, createElementBlock as n, renderSlot as v, createTextVNode as f, toDisplayString as m, createElementVNode as F, Fragment as T } from "vue";
+import { useMutationObserver as V } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import { useColors as E } from "../../composables/useColors.js";
+import { useCommon as C } from "../../composables/useCommon.js";
+import { useTheme as A } from "../../composables/useTheme.js";
+import $ from "../icon/Icon.vue.js";
+import L from "../spinner/Spinner.vue.js";
+const X = {
+  key: 1,
   class: "mr-2 shrink-0"
-}, V = {
-  key: 2,
+}, q = {
+  key: 3,
   class: "flex-1 truncate"
-}, E = { class: "ml-1 shrink-0" }, A = { key: 0 }, L = {
-  ...$.props(),
-  ...w.props("secondary"),
+}, G = { class: "ml-1 shrink-0" }, H = { key: 0 }, J = {
+  ...C.props(),
+  ...E.props("secondary"),
   item: {
     type: Object,
     default: () => {
@@ -47,108 +47,119 @@ const T = {
   disabled: Boolean,
   minimal: Boolean,
   prefix: String,
-  suffix: String
-}, X = {
+  suffix: String,
+  checkbox: Boolean
+}, K = {
   name: "XMenuItem",
   validators: {
-    ...$.validators()
+    ...C.validators()
   }
-}, Y = /* @__PURE__ */ z({
-  ...X,
-  props: L,
-  emits: ["active", "click"],
-  setup(b, { emit: _ }) {
-    const v = b, m = _, a = k(), o = k(!1), e = g(() => ({
-      ...v,
-      ...v.item
-    })), p = g(() => e.value.to ? "router-link" : e.value.href ? "a" : "div");
-    N(() => {
-      a.value && (d(), p.value === "router-link" && j(a.value.$el, d, {
+}, le = /* @__PURE__ */ R({
+  ...K,
+  props: J,
+  emits: ["active", "click", "checkbox-click"],
+  setup(B, { emit: S }) {
+    const p = B, d = S, o = y(), a = y(!1), e = b(() => ({
+      ...p,
+      ...p.item
+    })), k = b(() => e.value.to ? "router-link" : e.value.href ? "a" : "div");
+    w(() => {
+      o.value && (g(), k.value === "router-link" && V(o.value.$el, g, {
         attributes: !0,
         attributeFilter: ["class"]
       }));
     });
-    function x(t) {
+    function h(t, i) {
       if (e.value.disabled) {
         t.stopPropagation(), t.preventDefault();
         return;
       }
-      e.value.onClick && e.value.onClick(t), m("click", t);
+      e.value.onClick && e.value.onClick(t), d(i, t);
     }
-    function d() {
-      if (a.value && a.value.$el && (e.value.href || e.value.to)) {
-        const t = a.value.$el.classList.contains(e.value.exact ? "router-link-exact-active" : "router-link-active") || !1;
-        o.value = t;
+    function g() {
+      if (o.value && o.value.$el && (e.value.href || e.value.to)) {
+        const t = o.value.$el.classList.contains(e.value.exact ? "router-link-exact-active" : "router-link-active") || !1;
+        a.value = t;
       } else
-        o.value = !!e.value.active;
+        a.value = !!e.value.active;
     }
-    h(() => o.value, (t) => {
-      t && m("active");
-    }), h(() => e.value.active, (t) => {
-      o.value = !!t;
+    x(() => a.value, (t) => {
+      t && d("active");
+    }), x(() => e.value.active, (t) => {
+      a.value = !!t;
     });
-    const { styles: B, classes: C, className: S } = D("MenuItem", {}, e, { isActive: o });
-    return (t, q) => (l(), i(R(p.value), I({
-      ref_key: "elRef",
-      ref: a
-    }, {
-      ...e.value.href ? { href: e.value.href } : {},
-      ...e.value.attrs
-    }, {
-      to: e.value.to,
-      target: e.value.target,
-      color: e.value.color,
-      style: s(B),
-      class: [
-        s(S),
-        t.$style["menu-item"],
-        [o.value ? t.$style["menu-item--active"] : ""],
-        s(C).wrapper,
-        {
-          "flex items-center": t.$slots.prefix || t.$slots.suffix
-        }
-      ],
-      title: e.value.label,
-      alt: e.value.label,
-      onClick: x
-    }), {
-      default: M(() => [
-        t.$slots.prefix || e.value.prefix ? (l(), r("span", T, [
-          n(t.$slots, "prefix", { item: e.value }, () => [
-            u(c(e.value.prefix), 1)
-          ], !0)
-        ])) : e.value.icon ? (l(), i(y, {
-          key: 1,
-          size: e.value.size,
-          icon: e.value.icon,
-          class: "mr-2"
-        }, null, 8, ["size", "icon"])) : f("", !0),
-        t.minimal ? f("", !0) : (l(), r("span", V, [
-          n(t.$slots, "default", { item: e.value }, () => [
-            u(c(e.value.label), 1)
-          ], !0)
-        ])),
-        O("span", E, [
-          e.value.loading ? (l(), i(F, {
+    const { styles: z, classes: _, className: M } = A("MenuItem", {}, e, { isActive: a });
+    return (t, i) => {
+      const N = I("x-checkbox");
+      return l(), r(O(k.value), P({
+        ref_key: "elRef",
+        ref: o
+      }, {
+        ...e.value.href ? { href: e.value.href } : {},
+        ...e.value.attrs
+      }, {
+        to: e.value.to,
+        target: e.value.target,
+        color: e.value.color,
+        style: c(z),
+        class: [
+          c(M),
+          t.$style["menu-item"],
+          [a.value && !t.checkbox ? t.$style["menu-item--active"] : ""],
+          c(_).wrapper,
+          {
+            "flex items-center": t.$slots.prefix || t.$slots.suffix
+          }
+        ],
+        title: e.value.label,
+        alt: e.value.label,
+        onClick: i[1] || (i[1] = (u) => h(u, "click"))
+      }), {
+        default: j(() => [
+          t.checkbox ? (l(), r(N, {
             key: 0,
-            size: e.value.size
-          }, null, 8, ["size"])) : (l(), r(P, { key: 1 }, [
-            t.$slots.suffix || e.value.suffix ? (l(), r("span", A, [
-              n(t.$slots, "suffix", { item: e.value }, () => [
-                u(c(e.value.suffix), 1)
-              ], !0)
-            ])) : e.value.iconRight ? (l(), i(y, {
-              key: 1,
-              size: e.value.size,
-              icon: e.value.iconRight
-            }, null, 8, ["size", "icon"])) : f("", !0)
-          ], 64))
-        ])
-      ]),
-      _: 3
-    }, 16, ["to", "target", "color", "style", "class", "title", "alt"]));
+            "model-value": e.value.active,
+            "hide-footer": "",
+            "skip-form-registry": "",
+            onClick: i[0] || (i[0] = D((u) => h(u, "checkbox-click"), ["stop", "prevent"]))
+          }, null, 8, ["model-value"])) : s("", !0),
+          t.$slots.prefix || e.value.prefix ? (l(), n("span", X, [
+            v(t.$slots, "prefix", { item: e.value }, () => [
+              f(m(e.value.prefix), 1)
+            ], !0)
+          ])) : e.value.icon ? (l(), r($, {
+            key: 2,
+            size: e.value.size,
+            icon: e.value.icon,
+            class: "mr-2"
+          }, null, 8, ["size", "icon"])) : s("", !0),
+          t.minimal ? s("", !0) : (l(), n("span", q, [
+            v(t.$slots, "default", { item: e.value }, () => [
+              f(m(e.value.label), 1)
+            ], !0)
+          ])),
+          F("span", G, [
+            e.value.loading ? (l(), r(L, {
+              key: 0,
+              size: e.value.size
+            }, null, 8, ["size"])) : (l(), n(T, { key: 1 }, [
+              t.$slots.suffix || e.value.suffix ? (l(), n("span", H, [
+                v(t.$slots, "suffix", { item: e.value }, () => [
+                  f(m(e.value.suffix), 1)
+                ], !0)
+              ])) : e.value.iconRight ? (l(), r($, {
+                key: 1,
+                size: e.value.size,
+                icon: e.value.iconRight
+              }, null, 8, ["size", "icon"])) : s("", !0)
+            ], 64))
+          ])
+        ]),
+        _: 3
+      }, 16, ["to", "target", "color", "style", "class", "title", "alt"]);
+    };
   }
 });
 export {
-  Y as default
+  le as default
 };

package/lib/components/menu/theme/MenuItem.base.theme.js

@@ -5,15 +5,15 @@ const l = {
       return s.disabled || t.push("cursor-pointer"), r.isActive && t.push("font-medium"), s.rounded && t.push("rounded"), s.size === "xs" ? t.push("py-1 text-xs") : s.size === "sm" ? t.push("py-1.5 text-sm") : s.size === "lg" ? t.push("py-3") : s.size === "xl" ? t.push("py-4 text-lg") : t.push("py-1.5"), t;
     }
   },
-  styles: ({ colors: s, props: r, css: t, data: a }) => {
-    const e = s.getPalette(r.color || "gray"), i = s.getPalette("secondary");
+  styles: ({ colors: s, props: r, css: t, data: i }) => {
+    const e = s.getPalette(r.color || "gray"), a = s.getPalette("secondary");
     return r.disabled ? t.variables({
-      text: i[300],
+      text: a[300],
       dark: {
-        text: i[600]
+        text: a[600]
       }
-    }) : r.filled ? a.isActive ? t.variables({
-      bg: r.selected ? e[100] : e[200],
+    }) : r.filled ? i.isActive ? t.variables({
+      bg: r.selected ? e[100] : r.checkbox ? "transparent" : e[200],
       text: e[800],
       hover: {
         bg: (r.selected, e[200]),
@@ -42,7 +42,7 @@ const l = {
           text: e[100]
         }
       }
-    }) : a.isActive ? t.variables({
+    }) : i.isActive ? t.variables({
       text: e[500],
       hover: {
         text: e[500],
@@ -56,21 +56,21 @@ const l = {
         }
       }
     }) : t.variables({
-      text: i[800],
+      text: a[800],
       hover: {
-        text: i[900],
-        border: i[300]
+        text: a[900],
+        border: a[300]
       },
       dark: {
-        text: i[300],
+        text: a[300],
         hover: {
-          text: i[200],
-          border: i[800]
+          text: a[200],
+          border: a[800]
         }
       }
     });
   }
-}, d = l;
+}, x = l;
 export {
-  d as default
+  x as default
 };