@indielayer/ui 1.8.0 → 1.8.2

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

@@ -71,6 +71,7 @@ function onSubmit(isValid: string) {
       v-model="country"
       :rules="[rules.isRequired]"
       :options="countries"
+      filterable
       name="country"
       placeholder="Select another country"
       label="Country"

package/docs/pages/component/modal/composed.vue

@@ -9,6 +9,7 @@ const notifications = useNotifications()
 const email = ref('')
 const password = ref('')
 const description = ref('')
+const datetime = ref('')
 
 const selected = ref()
 const options = [
@@ -62,7 +63,15 @@ function onSubmit(isValid: boolean) {
       placeholder="Description"
       hide-footer
     />
-    <x-select v-model="selected" :options="options" label="Country" :rules="[rules.isRequired]"/>
+    <x-select
+      v-model="selected"
+      filterable
+      :options="options"
+      label="Country"
+      :rules="[rules.isRequired]"
+    />
+
+    <x-datepicker v-model="datetime" label="Start date" :rules="[rules.isRequired]"/>
 
     <!-- <template #tertiary-action>
       <x-button color="gray" size="lg">Tertiary</x-button>

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

@@ -4,7 +4,7 @@ import { ref } from 'vue'
 const selected = ref<undefined | string>()
 const selectedMultiple = ref<string[]>(['A', 'B'])
 const options = ref([
-  { value: 'A', label: 'Option A' },
+  { value: 'A', label: 'Option A', disabled: true },
   { value: 'B', label: 'Option B' },
 ])
 
@@ -35,8 +35,8 @@ for (let i = 0; i < 20; i++) {
       v-model="selectedMultiple"
       label="Multi select"
       placeholder="Multiple"
-      filterable
       :options="options"
+      filterable
       multiple
     />
   </div>

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

@@ -11,9 +11,10 @@ const notifications = useNotifications()
     <x-tag outlined>I'm a tag</x-tag>
     <x-tag rounded outlined color="pink">I'm a tag</x-tag>
     <x-tag color="pink">I'm a tag</x-tag>
-    <x-tag removable @remove="notifications?.log('remove me')">I'm a tag</x-tag>
-    <x-tag removable size="xs" @remove="notifications?.log('remove me')">I'm a tag</x-tag>
-    <x-tag removable size="lg" @remove="notifications?.log('remove me')">I'm a tag</x-tag>
-    <x-tag removable size="xl" @remove="notifications?.log('remove me')">I'm a tag</x-tag>
+    <x-tag removable size="xs" @remove="notifications?.log('remove me')">I'm a xs tag</x-tag>
+    <x-tag removable size="sm" @remove="notifications?.log('remove me')">I'm a sm tag</x-tag>
+    <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>
 </template>

package/lib/components/checkbox/Checkbox.vue.d.ts

@@ -25,6 +25,7 @@ declare const checkboxProps: {
         readonly default: () => never[];
     };
     tooltip: StringConstructor;
+    skipFormRegistry: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -76,6 +77,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     tooltip: StringConstructor;
+    skipFormRegistry: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -124,6 +126,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     tooltip: StringConstructor;
+    skipFormRegistry: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -156,6 +159,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     validateOnInput: boolean;
     hideFooter: boolean;
     rules: unknown[];
+    skipFormRegistry: boolean;
 }, {}>, {
     icon?(_: {}): any;
     default?(_: {}): any;

package/lib/components/datepicker/Datepicker.vue.d.ts

@@ -552,6 +552,7 @@ declare const datepickerProps: {
         readonly default: () => never[];
     };
     tooltip: StringConstructor;
+    skipFormRegistry: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -1118,6 +1119,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     tooltip: StringConstructor;
+    skipFormRegistry: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -1683,6 +1685,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     tooltip: StringConstructor;
+    skipFormRegistry: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -1709,6 +1712,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     validateOnInput: boolean;
     hideFooter: boolean;
     rules: unknown[];
+    skipFormRegistry: boolean;
     multiCalendars: import("@vuepic/vue-datepicker").DpOptionEnabled | Partial<{
         static: boolean;
         solo: boolean;

package/lib/components/formGroup/FormGroup.vue.d.ts

@@ -26,6 +26,7 @@ declare const formGroupProps: {
         readonly default: () => never[];
     };
     tooltip: StringConstructor;
+    skipFormRegistry: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -75,6 +76,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     tooltip: StringConstructor;
+    skipFormRegistry: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -114,6 +116,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     tooltip: StringConstructor;
+    skipFormRegistry: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -133,6 +136,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     validateOnInput: boolean;
     hideFooter: boolean;
     rules: unknown[];
+    skipFormRegistry: boolean;
     vertical: boolean;
 }, {}>, {
     default?(_: {}): any;

package/lib/components/input/Input.vue.d.ts

@@ -44,6 +44,7 @@ declare const inputProps: {
         readonly default: () => never[];
     };
     tooltip: StringConstructor;
+    skipFormRegistry: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -112,6 +113,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     tooltip: StringConstructor;
+    skipFormRegistry: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -178,6 +180,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     tooltip: StringConstructor;
+    skipFormRegistry: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -210,6 +213,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     validateOnInput: boolean;
     hideFooter: boolean;
     rules: unknown[];
+    skipFormRegistry: boolean;
     showPasswordToggle: boolean;
     dir: "rtl" | "ltr";
 }, {}>, {

package/lib/components/modal/Modal.vue.js

@@ -1,12 +1,12 @@
-import { defineComponent as X, ref as f, watch as g, nextTick as B, useSlots as H, computed as I, openBlock as l, createBlock as p, Teleport as M, createElementBlock as r, normalizeStyle as j, unref as o, normalizeClass as t, createCommentVNode as a, createElementVNode as S, resolveDynamicComponent as K, withCtx as w, renderSlot as i, toDisplayString as v } from "vue";
-import { onClickOutside as L, useEventListener as q } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
-import { useTheme as G } from "../../composables/useTheme.js";
-import { useFocusTrap as J } from "../../composables/useFocusTrap.js";
-import { closeIcon as Q } from "../../common/icons.js";
-import U from "../button/Button.vue.js";
-import Y from "../scroll/Scroll.vue.js";
-import Z from "../form/Form.vue.js";
-const _ = { key: 0 }, x = ["xs", "sm", "md", "lg", "xl", "full"], ee = ["top", "center", "bottom"], oe = {
+import { defineComponent as X, ref as y, watch as S, nextTick as w, useSlots as H, computed as M, openBlock as t, createBlock as v, Teleport as j, createElementBlock as r, normalizeStyle as q, unref as o, normalizeClass as l, createCommentVNode as a, createElementVNode as B, resolveDynamicComponent as K, withCtx as $, renderSlot as i, toDisplayString as k } from "vue";
+import { onClickOutside as L, useEventListener as G } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import { useTheme as J } from "../../composables/useTheme.js";
+import { useFocusTrap as Q } from "../../composables/useFocusTrap.js";
+import { closeIcon as U } from "../../common/icons.js";
+import Y from "../button/Button.vue.js";
+import Z from "../scroll/Scroll.vue.js";
+import _ from "../form/Form.vue.js";
+const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top", "center", "bottom"], te = {
   size: {
     type: String,
     default: "lg"
@@ -52,68 +52,72 @@ const _ = { key: 0 }, x = ["xs", "sm", "md", "lg", "xl", "full"], ee = ["top", "
 }, le = {
   name: "XModal",
   validators: {
-    size: x,
-    position: ee
+    size: ee,
+    position: oe
   }
-}, ce = /* @__PURE__ */ X({
+}, me = /* @__PURE__ */ X({
   ...le,
-  props: oe,
+  props: te,
   emits: ["update:modelValue", "submit"],
-  setup($, { expose: V, emit: C }) {
-    const n = $, b = C, u = f(n.modelValue), d = f(!1), y = f(null), T = f(null), { initFocusTrap: z, clearFocusTrap: D } = J();
-    let c;
-    g(u, (e) => {
-      c && (c(), c = void 0), e && setTimeout(() => {
-        c = L(y, F, {
+  setup(V, { expose: C, emit: T }) {
+    const n = V, h = T, u = y(n.modelValue), d = y(!1), b = y(null), z = y(null), { initFocusTrap: A, clearFocusTrap: D } = Q();
+    let m;
+    S(u, (e) => {
+      m && (m(), m = void 0), e && setTimeout(() => {
+        m = L(b, P, {
           ignore: [".v-popper__popper"]
         });
       });
-    }), g(() => n.modelValue, E, { immediate: !0 });
+    }), S(() => n.modelValue, E, { immediate: !0 });
     async function E() {
       const e = n.modelValue;
-      e ? (u.value = e, await B(), d.value = e, await B(), z(y), document.body.style.overflow = "hidden") : (d.value = e, u.value = e, D(), document.body.style.overflow = "auto");
+      e ? (u.value = e, await w(), d.value = e, await w(), A(b), document.body.style.overflow = "hidden") : (d.value = e, u.value = e, D(), document.body.style.overflow = "auto");
     }
-    typeof window < "u" && q(document, "keydown", A);
-    function A(e) {
-      e.key === "Escape" && u.value && !n.persistent && m();
+    typeof window < "u" && G(document, "keydown", O);
+    const F = (e) => [".v-popper__popper", ".x-datepicker"].some((c) => {
+      if (typeof c == "string")
+        return Array.from(window.document.querySelectorAll(c)).some((f) => f === e.target || e.composedPath().includes(f));
+    });
+    function O(e) {
+      e.key === "Escape" && !F(e) && u.value && !n.persistent && p();
     }
-    function F() {
-      n.persistent || m();
+    function P() {
+      n.persistent || p();
     }
-    function m() {
+    function p() {
       d.value = !1, setTimeout(() => {
-        b("update:modelValue", !1);
+        h("update:modelValue", !1);
       }, 150);
     }
-    function O() {
-      b("update:modelValue", !0), d.value = !0;
+    function R() {
+      h("update:modelValue", !0), d.value = !0;
     }
-    const k = H(), R = I(() => !!(k["tertiary-action"] || k["cancel-action"])), { styles: N, classes: s, className: P } = G("Modal", {}, n, {
+    const g = H(), I = M(() => !!(g["tertiary-action"] || g["cancel-action"])), { styles: N, classes: s, className: W } = J("Modal", {}, n, {
       visible: d
     });
-    return V({ open: O, close: m }), (e, h) => (l(), p(M, { to: "body" }, [
-      u.value ? (l(), r("div", {
+    return C({ open: R, close: p }), (e, c) => (t(), v(j, { to: "body" }, [
+      u.value ? (t(), r("div", {
         key: 0,
         ref_key: "modalWrapperRef",
-        ref: T,
-        style: j(o(N)),
-        class: t([
-          o(P),
+        ref: z,
+        style: q(o(N)),
+        class: l([
+          o(W),
           o(s).wrapper,
           d.value ? "visible" : "invisible ease-in duration-100"
         ])
       }, [
-        e.backdrop ? (l(), r("div", {
+        e.backdrop ? (t(), r("div", {
           key: 0,
-          class: t(o(s).backdrop)
+          class: l(o(s).backdrop)
         }, null, 2)) : a("", !0),
-        S("div", {
-          class: t(o(s).modalWrapper)
+        B("div", {
+          class: l(o(s).modalWrapper)
         }, [
-          (l(), p(K(e.isForm ? Z : "div"), {
+          (t(), v(K(e.isForm ? _ : "div"), {
             ref_key: "modalRef",
-            ref: y,
-            class: t(["max-h-full", o(s).modal]),
+            ref: b,
+            class: l(["max-h-full", o(s).modal]),
             disabled: e.formDisabled,
             "auto-validate": e.formAutoValidate,
             title: e.formTitle,
@@ -124,65 +128,65 @@ const _ = { key: 0 }, x = ["xs", "sm", "md", "lg", "xl", "full"], ee = ["top", "
             role: "dialog",
             "aria-modal": "true",
             "aria-labelledby": "modal-headline",
-            onSubmit: h[0] || (h[0] = (W) => e.$emit("submit", W))
+            onSubmit: c[0] || (c[0] = (f) => e.$emit("submit", f))
           }, {
-            default: w(() => [
+            default: $(() => [
               i(e.$slots, "image"),
               i(e.$slots, "header", {}, () => [
-                e.hasHeader ? (l(), r("div", {
+                e.hasHeader ? (t(), r("div", {
                   key: 0,
-                  class: t(o(s).header)
+                  class: l(o(s).header)
                 }, [
                   i(e.$slots, "header-content", {}, () => [
-                    e.label ? (l(), r("div", {
+                    e.label ? (t(), r("div", {
                       key: 0,
-                      class: t(o(s).label)
-                    }, v(e.label), 3)) : a("", !0),
-                    e.title ? (l(), r("div", {
+                      class: l(o(s).label)
+                    }, k(e.label), 3)) : a("", !0),
+                    e.title ? (t(), r("div", {
                       key: 1,
-                      class: t(o(s).title)
-                    }, v(e.title), 3)) : a("", !0)
+                      class: l(o(s).title)
+                    }, k(e.title), 3)) : a("", !0)
                   ])
                 ], 2)) : a("", !0)
               ]),
-              e.$slots.default ? (l(), p(Y, {
+              e.$slots.default ? (t(), v(Z, {
                 key: 0,
                 scrollbar: !1,
-                class: t({
+                class: l({
                   "h-full": e.size === "full"
                 }),
                 vertical: ""
               }, {
-                default: w(() => [
-                  S("div", {
-                    class: t(o(s).content)
+                default: $(() => [
+                  B("div", {
+                    class: l(o(s).content)
                   }, [
-                    e.description ? (l(), r("div", {
+                    e.description ? (t(), r("div", {
                       key: 0,
-                      class: t(o(s).description)
-                    }, v(e.description), 3)) : a("", !0),
+                      class: l(o(s).description)
+                    }, k(e.description), 3)) : a("", !0),
                     i(e.$slots, "default")
                   ], 2)
                 ]),
                 _: 3
               }, 8, ["class"])) : a("", !0),
-              e.showClose ? (l(), p(U, {
+              e.showClose ? (t(), v(Y, {
                 key: 1,
                 ghost: "",
                 size: "sm",
                 tabindex: "-1",
-                icon: o(Q),
-                class: t(o(s).closeIcon),
-                onClick: m
+                icon: o(U),
+                class: l(o(s).closeIcon),
+                onClick: p
               }, null, 8, ["icon", "class"])) : a("", !0),
               i(e.$slots, "footer", {}, () => [
-                e.hasActions ? (l(), r("div", {
+                e.hasActions ? (t(), r("div", {
                   key: 0,
-                  class: t(o(s).actions)
+                  class: l(o(s).actions)
                 }, [
                   i(e.$slots, "actions", {}, () => [
                     i(e.$slots, "cancel-action"),
-                    R.value ? (l(), r("div", _)) : a("", !0),
+                    I.value ? (t(), r("div", x)) : a("", !0),
                     i(e.$slots, "tertiary-action"),
                     i(e.$slots, "secondary-action"),
                     i(e.$slots, "primary-action")
@@ -198,5 +202,5 @@ const _ = { key: 0 }, x = ["xs", "sm", "md", "lg", "xl", "full"], ee = ["top", "
   }
 });
 export {
-  ce as default
+  me as default
 };

package/lib/components/radio/Radio.vue.d.ts

@@ -24,6 +24,7 @@ declare const radioProps: {
         readonly default: () => never[];
     };
     tooltip: StringConstructor;
+    skipFormRegistry: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -74,6 +75,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     tooltip: StringConstructor;
+    skipFormRegistry: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -120,6 +122,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     tooltip: StringConstructor;
+    skipFormRegistry: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -151,6 +154,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     validateOnInput: boolean;
     hideFooter: boolean;
     rules: unknown[];
+    skipFormRegistry: boolean;
 }, {}>, {
     default?(_: {}): any;
 }>;

package/lib/components/select/Select.vue.d.ts

@@ -32,6 +32,7 @@ declare const selectProps: {
         readonly default: () => never[];
     };
     tooltip: StringConstructor;
+    skipFormRegistry: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -93,6 +94,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     tooltip: StringConstructor;
+    skipFormRegistry: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -147,6 +149,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     tooltip: StringConstructor;
+    skipFormRegistry: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -178,6 +181,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     validateOnInput: boolean;
     hideFooter: boolean;
     rules: unknown[];
+    skipFormRegistry: boolean;
     multiple: boolean;
     native: boolean;
     filterable: boolean;