@wikicasa-dev/components 2.4.1-alpha.2 → 2.4.1-alpha.3

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 +1 -0
  2. package/dist/packages/components/lib/UIKit/BaseModal.vue.js +77 -76
  3. package/package.json +1 -1
package/dist/UIKit/BaseModal.d.ts CHANGED
@@ -24,6 +24,7 @@ type __VLS_Props = {
24
24
  dataCy?: string;
25
25
  closeIconBtnClasses?: ClassTypeProp;
26
26
  titleClasses?: ClassTypeProp;
27
+ appear?: boolean;
27
28
  };
28
29
  declare function __VLS_template(): {
29
30
  attrs: Partial<{}>;
package/dist/packages/components/lib/UIKit/BaseModal.vue.js CHANGED
@@ -1,6 +1,6 @@
1
- import { defineComponent as $, shallowRef as h, useTemplateRef as v, onUnmounted as H, watch as O, createBlock as F, openBlock as r, Teleport as S, createVNode as y, Transition as K, unref as w, withCtx as N, withDirectives as U, createElementVNode as l, normalizeClass as i, createElementBlock as C, createCommentVNode as x, renderSlot as d, withModifiers as V, vShow as A } from "vue";
2
- import { CloseIcon as P } from "@wikicasa-dev/svg-icons";
3
- const R = ["id", "data-cy"], G = ["innerHTML"], J = /* @__PURE__ */ $({
1
+ import { defineComponent as T, shallowRef as v, useTemplateRef as h, onUnmounted as D, watch as $, createBlock as H, openBlock as c, 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({
4
4
  __name: "BaseModal",
5
5
  props: {
6
6
  id: { default: "base-bt-modal" },
@@ -20,144 +20,145 @@ const R = ["id", "data-cy"], G = ["innerHTML"], J = /* @__PURE__ */ $({
20
20
  centered: { type: Boolean, default: !1 },
21
21
  dataCy: {},
22
22
  closeIconBtnClasses: {},
23
- titleClasses: {}
23
+ titleClasses: {},
24
+ appear: { type: Boolean, default: !0 }
24
25
  },
25
26
  emits: ["closed", "opened", "dialogClick"],
26
- setup(t, { emit: g }) {
27
- const c = g, o = h(!1), k = v("backdrop"), a = v("modalDialog"), u = h(!1), p = t.showModal, m = ({ key: e }) => {
28
- e === "Escape" && s();
29
- }, M = () => {
27
+ setup(e, { emit: x }) {
28
+ const r = x, o = v(!1), k = h("backdrop"), s = h("modalDialog"), u = v(!1), m = ({ key: t }) => {
29
+ t === "Escape" && a();
30
+ }, p = () => {
30
31
  document?.body.addEventListener("keydown", m);
31
32
  }, f = () => {
32
33
  document?.body.removeEventListener("keydown", m);
33
- }, B = () => {
34
- console.log("DEBUG:onBeforeEnter called"), M(), document?.body.classList.add(
34
+ }, g = () => {
35
+ console.log("DEBUG:onBeforeEnter called"), p(), document?.body.classList.add(
35
36
  "sm:uikit-pr-15px",
36
37
  "sm:uikit-mr-0",
37
38
  "uikit-overflow-hidden"
38
39
  );
39
- }, E = () => {
40
- c("opened"), t.autoClose !== void 0 && setTimeout(() => {
41
- s();
42
- }, t.autoClose);
43
- }, I = () => {
40
+ }, B = () => {
41
+ r("opened"), e.autoClose !== void 0 && setTimeout(() => {
42
+ a();
43
+ }, e.autoClose);
44
+ }, M = () => {
44
45
  f(), document?.body.classList.remove(
45
46
  "sm:uikit-pr-15px",
46
47
  "sm:uikit-mr-0",
47
48
  "uikit-overflow-hidden"
48
- ), c("closed");
49
- }, s = () => {
49
+ ), r("closed");
50
+ }, a = () => {
50
51
  o.value = !1;
51
- }, L = (e) => {
52
- a.value && a.value.contains(e.target) && (u.value = !0);
53
- }, z = (e) => {
54
- a.value && a.value.contains(e.target) && (u.value = !1);
55
- }, T = async (e) => {
56
- if (!(e.target !== k.value && k.value?.contains(e.target)) && t.closeOnClickOut) {
52
+ }, E = (t) => {
53
+ s.value && s.value.contains(t.target) && (u.value = !0);
54
+ }, I = (t) => {
55
+ s.value && s.value.contains(t.target) && (u.value = !1);
56
+ }, L = async (t) => {
57
+ if (!(t.target !== k.value && k.value?.contains(t.target)) && e.closeOnClickOut) {
57
58
  if (u.value) {
58
59
  u.value = !1;
59
60
  return;
60
61
  }
61
- s();
62
+ a();
62
63
  }
63
64
  };
64
- H(() => {
65
+ D(() => {
65
66
  f(), document?.body.classList.remove(
66
67
  "sm:uikit-pr-15px",
67
68
  "sm:uikit-mr-0",
68
69
  "uikit-overflow-hidden"
69
70
  );
70
- }), O(
71
- () => t.showModal,
72
- async (e) => {
73
- o.value = e;
71
+ }), $(
72
+ () => e.showModal,
73
+ async (t) => {
74
+ o.value = t;
74
75
  },
75
76
  { immediate: !0 }
76
77
  );
77
- const D = (e) => {
78
- a.value === e.target && e.stopPropagation();
78
+ const z = (t) => {
79
+ s.value === t.target && t.stopPropagation();
79
80
  };
80
- return (e, n) => (r(), F(S, { to: "body" }, [
81
- y(K, {
82
- appear: w(p),
81
+ return (t, n) => (c(), H(O, { to: "body" }, [
82
+ y(F, {
83
+ appear: e.appear,
83
84
  name: "modal-transition",
84
85
  duration: { enter: 500, leave: 250 },
85
- onBeforeEnter: B,
86
- onAfterEnter: E,
87
- onAfterLeave: I
86
+ onBeforeEnter: g,
87
+ onAfterEnter: B,
88
+ onAfterLeave: M
88
89
  }, {
89
- default: N(() => [
90
- U(l("div", {
90
+ default: K(() => [
91
+ N(l("div", {
91
92
  ref: "backdrop",
92
93
  class: i(["bbt-backdrop uikit-fixed uikit-left-0 uikit-top-0 uikit-z-50 uikit-h-full uikit-w-full", [
93
- t.customBackdropClasses,
94
+ e.customBackdropClasses,
94
95
  {
95
96
  "uikit-bg-w-secondary/70": o.value
96
97
  },
97
98
  { "uikit-bg-transparent": !o.value },
98
- { "sm:uikit-pt-[30px]": !t.centered }
99
+ { "sm:uikit-pt-[30px]": !e.centered }
99
100
  ]]),
100
- onClick: T,
101
- onMousedown: L,
102
- onMouseup: z
101
+ onClick: L,
102
+ onMousedown: E,
103
+ onMouseup: I
103
104
  }, [
104
105
  l("dialog", {
105
- id: t.id,
106
+ id: e.id,
106
107
  ref: "modalDialog",
107
- "data-cy": t.dataCy,
108
+ "data-cy": e.dataCy,
108
109
  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,
110
+ e.customModalDialogClasses,
110
111
  {
111
- "centered sm:uikit-absolute sm:uikit-top-1/2 sm:-uikit-translate-y-1/2": t.centered
112
+ "centered sm:uikit-absolute sm:uikit-top-1/2 sm:-uikit-translate-y-1/2": e.centered
112
113
  },
113
- { "uikit-static": !t.centered },
114
- `base-${t.size}`,
115
- t.fullHeight ? "uikit-h-[95%]" : "uikit-h-auto"
114
+ { "uikit-static": !e.centered },
115
+ `base-${e.size}`,
116
+ e.fullHeight ? "uikit-h-[95%]" : "uikit-h-auto"
116
117
  ]]),
117
118
  tabindex: "-1",
118
- onClick: n[1] || (n[1] = (b) => c("dialogClick", b)),
119
- onFocusin: D
119
+ onClick: n[1] || (n[1] = (b) => r("dialogClick", b)),
120
+ onFocusin: z
120
121
  }, [
121
122
  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]])
123
+ 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
124
  }, [
124
- t.withCloseIcon ? (r(), C("button", {
125
+ e.withCloseIcon ? (c(), C("button", {
125
126
  key: 0,
126
127
  id: "close-icon-btn",
127
128
  "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]),
129
+ class: i(["uikit-absolute uikit-right-15px uikit-top-15px uikit-z-10 uikit-bg-transparent uikit-p-5px", e.closeIconBtnClasses]),
129
130
  type: "button",
130
131
  "aria-label": "Close",
131
- onClick: n[0] || (n[0] = V((b) => o.value = !1, ["prevent", "stop"]))
132
+ onClick: n[0] || (n[0] = S((b) => o.value = !1, ["prevent", "stop"]))
132
133
  }, [
133
- y(w(P), {
134
- class: i(["bbt-close-icon uikit-box-border", t.closeIcon?.classes]),
135
- width: t.closeIcon?.size || 20,
136
- height: t.closeIcon?.size || 20
134
+ y(U(A), {
135
+ class: i(["bbt-close-icon uikit-box-border", e.closeIcon?.classes]),
136
+ width: e.closeIcon?.size || 20,
137
+ height: e.closeIcon?.size || 20
137
138
  }, null, 8, ["class", "width", "height"])
138
- ], 2)) : x("", !0),
139
- d(e.$slots, "header", { closeModal: s }, () => [
139
+ ], 2)) : w("", !0),
140
+ d(t.$slots, "header", { closeModal: a }, () => [
140
141
  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, G)
142
+ class: i(["uikit-w-auto uikit-text-18 uikit-font-semibold sm:uikit-text-22", e.titleClasses]),
143
+ innerHTML: e.headerTitle
144
+ }, null, 10, R)
144
145
  ])
145
146
  ], 2),
146
147
  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]])
148
+ 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
149
  }, [
149
- d(e.$slots, "body", { closeModal: s })
150
+ d(t.$slots, "body", { closeModal: a })
150
151
  ], 2),
151
- e.$slots.footer ? (r(), C("div", {
152
+ t.$slots.footer ? (c(), C("div", {
152
153
  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])
154
+ 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
155
  }, [
155
- d(e.$slots, "footer", { closeModal: s })
156
- ], 2)) : x("", !0),
157
- d(e.$slots, "fixed-bottom")
158
- ], 42, R)
156
+ d(t.$slots, "footer", { closeModal: a })
157
+ ], 2)) : w("", !0),
158
+ d(t.$slots, "fixed-bottom")
159
+ ], 42, P)
159
160
  ], 34), [
160
- [A, o.value]
161
+ [V, o.value]
161
162
  ])
162
163
  ]),
163
164
  _: 3
@@ -166,5 +167,5 @@ const R = ["id", "data-cy"], G = ["innerHTML"], J = /* @__PURE__ */ $({
166
167
  }
167
168
  });
168
169
  export {
169
- J as default
170
+ q as default
170
171
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wikicasa-dev/components",
3
- "version": "2.4.1-alpha.2",
3
+ "version": "2.4.1-alpha.3",
4
4
  "description": "Wikicasa frontend components",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",