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

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