@wikicasa-dev/components 2.4.1-alpha.1 → 2.4.1-alpha.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/UIKit/BaseModal.d.ts +8 -3
  2. package/dist/packages/components/lib/UIKit/BaseModal.vue.js +89 -92
  3. package/package.json +1 -1
package/dist/UIKit/BaseModal.d.ts CHANGED
@@ -12,7 +12,6 @@ type __VLS_Props = {
12
12
  classes?: ClassTypeProp;
13
13
  }>;
14
14
  withCloseIcon?: boolean;
15
- showModal?: boolean;
16
15
  headerTitle?: string;
17
16
  autoClose?: number;
18
17
  fullHeight?: boolean;
@@ -24,7 +23,11 @@ type __VLS_Props = {
24
23
  dataCy?: string;
25
24
  closeIconBtnClasses?: ClassTypeProp;
26
25
  titleClasses?: ClassTypeProp;
26
+ appear?: boolean;
27
27
  };
28
+ type __VLS_PublicProps = {
29
+ "showModal"?: boolean;
30
+ } & __VLS_Props;
28
31
  declare function __VLS_template(): {
29
32
  attrs: Partial<{}>;
30
33
  slots: {
@@ -46,14 +49,16 @@ declare function __VLS_template(): {
46
49
  rootEl: any;
47
50
  };
48
51
  type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
49
- declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
52
+ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
50
53
  opened: () => any;
51
54
  closed: () => any;
52
55
  dialogClick: (args_0: MouseEvent) => any;
53
- }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
56
+ "update:showModal": (value: boolean) => any;
57
+ }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
54
58
  onOpened?: (() => any) | undefined;
55
59
  onClosed?: (() => any) | undefined;
56
60
  onDialogClick?: ((args_0: MouseEvent) => any) | undefined;
61
+ "onUpdate:showModal"?: ((value: boolean) => any) | undefined;
57
62
  }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
58
63
  backdrop: HTMLDivElement;
59
64
  modalDialog: HTMLDialogElement;
package/dist/packages/components/lib/UIKit/BaseModal.vue.js CHANGED
@@ -1,8 +1,8 @@
1
- import { defineComponent as T, shallowRef as v, useTemplateRef as h, onUnmounted as D, watch as $, createBlock as H, openBlock as r, Teleport as O, createVNode as y, Transition as F, withCtx as K, withDirectives as N, createElementVNode as l, normalizeClass as i, createElementBlock as C, createCommentVNode as w, renderSlot as d, withModifiers as S, unref as U, vShow as V } from "vue";
2
- import { CloseIcon as A } from "@wikicasa-dev/svg-icons";
3
- const P = ["id", "data-cy"], R = ["innerHTML"], q = /* @__PURE__ */ T({
1
+ import { defineComponent as D, mergeModels as h, useModel as H, useTemplateRef as y, shallowRef as C, onUnmounted as O, createBlock as F, openBlock as k, Teleport as A, createVNode as w, Transition as K, withCtx as N, withDirectives as S, createElementVNode as l, normalizeClass as i, createElementBlock as p, createCommentVNode as x, renderSlot as d, withModifiers as V, unref as P, vShow as R } from "vue";
2
+ import { CloseIcon as U } from "@wikicasa-dev/svg-icons";
3
+ const j = ["id", "data-cy"], q = ["innerHTML"], Q = /* @__PURE__ */ D({
4
4
  __name: "BaseModal",
5
- props: {
5
+ props: /* @__PURE__ */ h({
6
6
  id: { default: "base-bt-modal" },
7
7
  size: { default: "modal-md" },
8
8
  customBackdropClasses: {},
@@ -12,7 +12,6 @@ const P = ["id", "data-cy"], R = ["innerHTML"], q = /* @__PURE__ */ T({
12
12
  customModalFooterClasses: {},
13
13
  closeIcon: {},
14
14
  withCloseIcon: { type: Boolean, default: !0 },
15
- showModal: { type: Boolean, default: !0 },
16
15
  headerTitle: { default: "" },
17
16
  autoClose: {},
18
17
  fullHeight: { type: Boolean, default: !1 },
@@ -20,144 +19,142 @@ const P = ["id", "data-cy"], R = ["innerHTML"], q = /* @__PURE__ */ T({
20
19
  centered: { type: Boolean, default: !1 },
21
20
  dataCy: {},
22
21
  closeIconBtnClasses: {},
23
- titleClasses: {}
24
- },
25
- emits: ["closed", "opened", "dialogClick"],
26
- setup(t, { emit: x }) {
27
- const c = x, o = v(!1), k = h("backdrop"), a = h("modalDialog"), u = v(!1), m = ({ key: e }) => {
28
- e === "Escape" && s();
29
- }, g = () => {
30
- document?.body.addEventListener("keydown", m);
31
- }, f = () => {
32
- document?.body.removeEventListener("keydown", m);
33
- }, p = () => {
34
- console.log("DEBUG:onBeforeEnter called"), g(), document?.body.classList.add(
22
+ titleClasses: {},
23
+ appear: { type: Boolean, default: !0 }
24
+ }, {
25
+ showModal: { type: Boolean, default: !0 },
26
+ showModalModifiers: {}
27
+ }),
28
+ emits: /* @__PURE__ */ h(["closed", "opened", "dialogClick"], ["update:showModal"]),
29
+ setup(e, { emit: g }) {
30
+ const r = g, a = H(e, "showModal"), m = y("backdrop"), s = y("modalDialog"), u = C(!1), c = C(!1), f = ({ key: t }) => {
31
+ t === "Escape" && o();
32
+ }, M = () => {
33
+ document?.body.addEventListener("keydown", f);
34
+ }, b = () => {
35
+ document?.body.removeEventListener("keydown", f);
36
+ }, B = () => {
37
+ c.value || (M(), document?.body.classList.add(
35
38
  "sm:uikit-pr-15px",
36
39
  "sm:uikit-mr-0",
37
40
  "uikit-overflow-hidden"
38
- );
39
- }, M = () => {
40
- c("opened"), t.autoClose !== void 0 && setTimeout(() => {
41
- s();
42
- }, t.autoClose);
43
- }, B = () => {
44
- f(), document?.body.classList.remove(
41
+ ), c.value = !0);
42
+ }, E = () => {
43
+ r("opened"), e.autoClose !== void 0 && setTimeout(() => {
44
+ o();
45
+ }, e.autoClose);
46
+ }, I = () => {
47
+ b(), document?.body.classList.remove(
45
48
  "sm:uikit-pr-15px",
46
49
  "sm:uikit-mr-0",
47
50
  "uikit-overflow-hidden"
48
- ), c("closed");
49
- }, s = () => {
50
- o.value = !1;
51
- }, E = (e) => {
52
- a.value && a.value.contains(e.target) && (u.value = !0);
53
- }, I = (e) => {
54
- a.value && a.value.contains(e.target) && (u.value = !1);
55
- }, L = async (e) => {
56
- if (!(e.target !== k.value && k.value?.contains(e.target)) && t.closeOnClickOut) {
51
+ ), c.value = !1, r("closed");
52
+ }, o = () => {
53
+ a.value = !1;
54
+ }, L = (t) => {
55
+ s.value && s.value.contains(t.target) && (u.value = !0);
56
+ }, z = (t) => {
57
+ s.value && s.value.contains(t.target) && (u.value = !1);
58
+ }, T = async (t) => {
59
+ if (!(t.target !== m.value && m.value?.contains(t.target)) && e.closeOnClickOut) {
57
60
  if (u.value) {
58
61
  u.value = !1;
59
62
  return;
60
63
  }
61
- s();
64
+ o();
62
65
  }
63
66
  };
64
- D(() => {
65
- f(), document?.body.classList.remove(
67
+ O(() => {
68
+ b(), document?.body.classList.remove(
66
69
  "sm:uikit-pr-15px",
67
70
  "sm:uikit-mr-0",
68
71
  "uikit-overflow-hidden"
69
72
  );
70
- }), $(
71
- () => t.showModal,
72
- async (e) => {
73
- o.value = e;
74
- },
75
- { immediate: !0 }
76
- );
77
- const z = (e) => {
78
- a.value === e.target && e.stopPropagation();
73
+ });
74
+ const $ = (t) => {
75
+ s.value === t.target && t.stopPropagation();
79
76
  };
80
- return (e, n) => (r(), H(O, { to: "body" }, [
81
- y(F, {
82
- appear: o.value,
77
+ return (t, n) => (k(), F(A, { to: "body" }, [
78
+ w(K, {
79
+ appear: e.appear,
83
80
  name: "modal-transition",
84
81
  duration: { enter: 500, leave: 250 },
85
- onBeforeEnter: p,
86
- onAfterEnter: M,
87
- onAfterLeave: B
82
+ onBeforeEnter: B,
83
+ onAfterEnter: E,
84
+ onAfterLeave: I
88
85
  }, {
89
- default: K(() => [
90
- N(l("div", {
86
+ default: N(() => [
87
+ S(l("div", {
91
88
  ref: "backdrop",
92
89
  class: i(["bbt-backdrop uikit-fixed uikit-left-0 uikit-top-0 uikit-z-50 uikit-h-full uikit-w-full", [
93
- t.customBackdropClasses,
90
+ e.customBackdropClasses,
94
91
  {
95
- "uikit-bg-w-secondary/70": o.value
92
+ "uikit-bg-w-secondary/70": a.value
96
93
  },
97
- { "uikit-bg-transparent": !o.value },
98
- { "sm:uikit-pt-[30px]": !t.centered }
94
+ { "uikit-bg-transparent": !a.value },
95
+ { "sm:uikit-pt-[30px]": !e.centered }
99
96
  ]]),
100
- onClick: L,
101
- onMousedown: E,
102
- onMouseup: I
97
+ onClick: T,
98
+ onMousedown: L,
99
+ onMouseup: z
103
100
  }, [
104
101
  l("dialog", {
105
- id: t.id,
102
+ id: e.id,
106
103
  ref: "modalDialog",
107
- "data-cy": t.dataCy,
104
+ "data-cy": e.dataCy,
108
105
  class: i(["uikit-modal-dialog uikit-mx-auto uikit-block uikit-w-full uikit-overflow-y-auto uikit-overflow-x-hidden uikit-rounded uikit-border-none uikit-bg-transparent uikit-bg-white uikit-p-0 uikit-shadow-lg uikit-no-scrollbar uikit-safe-bottom max-sm:uikit-fixed max-sm:uikit-bottom-0 max-sm:uikit-max-h-[95%] max-sm:uikit-rounded-bl-none max-sm:uikit-rounded-br-none sm:uikit-h-auto", [
109
- t.customModalDialogClasses,
106
+ e.customModalDialogClasses,
110
107
  {
111
- "centered sm:uikit-absolute sm:uikit-top-1/2 sm:-uikit-translate-y-1/2": t.centered
108
+ "centered sm:uikit-absolute sm:uikit-top-1/2 sm:-uikit-translate-y-1/2": e.centered
112
109
  },
113
- { "uikit-static": !t.centered },
114
- `base-${t.size}`,
115
- t.fullHeight ? "uikit-h-[95%]" : "uikit-h-auto"
110
+ { "uikit-static": !e.centered },
111
+ `base-${e.size}`,
112
+ e.fullHeight ? "uikit-h-[95%]" : "uikit-h-auto"
116
113
  ]]),
117
114
  tabindex: "-1",
118
- onClick: n[1] || (n[1] = (b) => c("dialogClick", b)),
119
- onFocusin: z
115
+ onClick: n[1] || (n[1] = (v) => r("dialogClick", v)),
116
+ onFocusin: $
120
117
  }, [
121
118
  l("div", {
122
- class: i(["default-header uikit-sticky uikit-top-0 uikit-z-10 uikit-rounded-t uikit-border-0 uikit-bg-white uikit-px-4 uikit-pb-10px uikit-pt-20px sm:uikit-px-6", [t.customModalHeaderClasses]])
119
+ class: i(["default-header uikit-sticky uikit-top-0 uikit-z-10 uikit-rounded-t uikit-border-0 uikit-bg-white uikit-px-4 uikit-pb-10px uikit-pt-20px sm:uikit-px-6", [e.customModalHeaderClasses]])
123
120
  }, [
124
- t.withCloseIcon ? (r(), C("button", {
121
+ e.withCloseIcon ? (k(), p("button", {
125
122
  key: 0,
126
123
  id: "close-icon-btn",
127
124
  "data-cy": "bbt-default-close-icon-btn",
128
- class: i(["uikit-absolute uikit-right-15px uikit-top-15px uikit-z-10 uikit-bg-transparent uikit-p-5px", t.closeIconBtnClasses]),
125
+ class: i(["uikit-absolute uikit-right-15px uikit-top-15px uikit-z-10 uikit-bg-transparent uikit-p-5px", e.closeIconBtnClasses]),
129
126
  type: "button",
130
127
  "aria-label": "Close",
131
- onClick: n[0] || (n[0] = S((b) => o.value = !1, ["prevent", "stop"]))
128
+ onClick: n[0] || (n[0] = V((v) => a.value = !1, ["prevent", "stop"]))
132
129
  }, [
133
- y(U(A), {
134
- class: i(["bbt-close-icon uikit-box-border", t.closeIcon?.classes]),
135
- width: t.closeIcon?.size || 20,
136
- height: t.closeIcon?.size || 20
130
+ w(P(U), {
131
+ class: i(["bbt-close-icon uikit-box-border", e.closeIcon?.classes]),
132
+ width: e.closeIcon?.size || 20,
133
+ height: e.closeIcon?.size || 20
137
134
  }, null, 8, ["class", "width", "height"])
138
- ], 2)) : w("", !0),
139
- d(e.$slots, "header", { closeModal: s }, () => [
135
+ ], 2)) : x("", !0),
136
+ d(t.$slots, "header", { closeModal: o }, () => [
140
137
  l("span", {
141
- class: i(["uikit-w-auto uikit-text-18 uikit-font-semibold sm:uikit-text-22", t.titleClasses]),
142
- innerHTML: t.headerTitle
143
- }, null, 10, R)
138
+ class: i(["uikit-w-auto uikit-text-18 uikit-font-semibold sm:uikit-text-22", e.titleClasses]),
139
+ innerHTML: e.headerTitle
140
+ }, null, 10, q)
144
141
  ])
145
142
  ], 2),
146
143
  l("div", {
147
- class: i(["uikit-bbt-body uikit-flex-auto uikit-overflow-y-auto uikit-overflow-x-hidden uikit-px-4 uikit-pb-0 uikit-no-scrollbar sm:uikit-px-6 sm:uikit-pb-25px", [t.customModalBodyClasses]])
144
+ class: i(["uikit-bbt-body uikit-flex-auto uikit-overflow-y-auto uikit-overflow-x-hidden uikit-px-4 uikit-pb-0 uikit-no-scrollbar sm:uikit-px-6 sm:uikit-pb-25px", [e.customModalBodyClasses]])
148
145
  }, [
149
- d(e.$slots, "body", { closeModal: s })
146
+ d(t.$slots, "body", { closeModal: o })
150
147
  ], 2),
151
- e.$slots.footer ? (r(), C("div", {
148
+ t.$slots.footer ? (k(), p("div", {
152
149
  key: 0,
153
- class: i(["uikit-bbt-footer uikit-sticky uikit-bottom-0 uikit-border-0 uikit-bg-white uikit-px-4 uikit-py-15px sm:uikit-px-6", t.customModalFooterClasses])
150
+ class: i(["uikit-bbt-footer uikit-sticky uikit-bottom-0 uikit-border-0 uikit-bg-white uikit-px-4 uikit-py-15px sm:uikit-px-6", e.customModalFooterClasses])
154
151
  }, [
155
- d(e.$slots, "footer", { closeModal: s })
156
- ], 2)) : w("", !0),
157
- d(e.$slots, "fixed-bottom")
158
- ], 42, P)
152
+ d(t.$slots, "footer", { closeModal: o })
153
+ ], 2)) : x("", !0),
154
+ d(t.$slots, "fixed-bottom")
155
+ ], 42, j)
159
156
  ], 34), [
160
- [V, o.value]
157
+ [R, a.value]
161
158
  ])
162
159
  ]),
163
160
  _: 3
@@ -166,5 +163,5 @@ const P = ["id", "data-cy"], R = ["innerHTML"], q = /* @__PURE__ */ T({
166
163
  }
167
164
  });
168
165
  export {
169
- q as default
166
+ Q as default
170
167
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wikicasa-dev/components",
3
- "version": "2.4.1-alpha.1",
3
+ "version": "2.4.1-alpha.10",
4
4
  "description": "Wikicasa frontend components",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",