@oneb/ui-vue 0.3.28 → 0.3.29

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.
@@ -0,0 +1,194 @@
1
+ import { defineComponent as O, computed as y, ref as p, openBlock as g, createElementBlock as h, normalizeClass as i, createElementVNode as a, normalizeStyle as S, toDisplayString as C, renderSlot as c, createTextVNode as T, createCommentVNode as b, onMounted as z, onBeforeUnmount as B } from "vue";
2
+ import { _ as $ } from "./_plugin-vue_export-helper-dad06003.js";
3
+ const E = {
4
+ useModal: {
5
+ required: !0,
6
+ type: Object
7
+ },
8
+ title: {
9
+ required: !1,
10
+ type: String
11
+ },
12
+ subtitle: {
13
+ required: !1,
14
+ type: String,
15
+ default: ""
16
+ },
17
+ size: {
18
+ type: String,
19
+ default: "medium"
20
+ },
21
+ onClose: {
22
+ type: Function
23
+ },
24
+ classModal: {
25
+ type: Boolean,
26
+ default: !1
27
+ },
28
+ titleCenter: {
29
+ type: Boolean,
30
+ default: !1
31
+ },
32
+ classTitle: {
33
+ type: String,
34
+ default: ""
35
+ },
36
+ canClose: {
37
+ type: Function,
38
+ default: () => !0
39
+ },
40
+ customWidth: {
41
+ type: String,
42
+ default: ""
43
+ }
44
+ }, L = {
45
+ "3xs": ["max-w-xs"],
46
+ xs: ["max-w-sm"],
47
+ sm: ["max-w-md"],
48
+ small: ["max-w-lg"],
49
+ md: ["max-w-xl"],
50
+ medium: ["max-w-xl"],
51
+ large: ["max-w-2xl"],
52
+ xl: ["max-w-3xl"],
53
+ "2xl": ["max-w-4xl"],
54
+ "3xl": ["max-w-4xl"],
55
+ "4xl": ["max-w-5xl"],
56
+ "5xl": ["max-w-5xl"],
57
+ "7xl": ["max-w-7xl"]
58
+ }, W = (r = "medium") => {
59
+ const o = [];
60
+ return o.push(...L[r] ?? []), o;
61
+ }, D = { class: "relative bg-white rounded-lg shadow h-full" }, _ = /* @__PURE__ */ O({
62
+ __name: "OneModal",
63
+ props: E,
64
+ emits: ["isOpen", "closed"],
65
+ setup(r, { expose: o, emit: u }) {
66
+ const t = r, n = u, v = y(() => {
67
+ var s, d;
68
+ const e = t.useModal;
69
+ return ((s = e == null ? void 0 : e.isOpened) == null ? void 0 : s.value) ?? ((d = e == null ? void 0 : e.isOpen) == null ? void 0 : d.value) ?? !1;
70
+ }), x = y(() => W(t.size)), m = y(() => t.customWidth ? { width: t.customWidth } : {}), l = p(null), w = p(!1);
71
+ function M(e) {
72
+ w.value = !1, l.value && !l.value.contains(e.target) && (w.value = !0);
73
+ }
74
+ function k(e) {
75
+ w.value && l.value && !l.value.contains(e.target) && f();
76
+ }
77
+ const f = () => {
78
+ var s, d;
79
+ if (t.canClose && !t.canClose())
80
+ return;
81
+ const e = t.useModal;
82
+ (s = e == null ? void 0 : e.close) == null || s.call(e), (d = t.onClose) == null || d.call(t), n("closed"), n("isOpen");
83
+ };
84
+ return o({
85
+ open: () => {
86
+ var s;
87
+ const e = t.useModal;
88
+ (s = e == null ? void 0 : e.open) == null || s.call(e), n("isOpen");
89
+ },
90
+ close: f
91
+ }), (e, s) => v.value ? (g(), h("div", {
92
+ key: 0,
93
+ tabindex: "-1",
94
+ onMousedown: M,
95
+ onMouseup: k,
96
+ class: i(["modal backdrop !m-0", { "modal-mobile": e.classModal }])
97
+ }, [
98
+ a("div", {
99
+ class: i([
100
+ "relative w-full max-h-full",
101
+ x.value,
102
+ { "fixed bottom-0 left-0 right-0 w-full bg-white rounded-t-xl mobile-modal": e.classModal }
103
+ ]),
104
+ style: S(m.value),
105
+ ref_key: "modalContent",
106
+ ref: l
107
+ }, [
108
+ a("div", D, [
109
+ e.title ? (g(), h("div", {
110
+ key: 0,
111
+ class: i([
112
+ e.titleCenter ? "grid grid-cols-4" : "flex items-start justify-between",
113
+ "p-3 border-b rounded-t",
114
+ e.classTitle
115
+ ])
116
+ }, [
117
+ a("div", {
118
+ class: i(["flex flex-col min-w-0", e.titleCenter ? "col-span-2 col-start-2 items-center" : ""])
119
+ }, [
120
+ a("h3", {
121
+ class: i(["text-xl font-semibold text-gray-900 whitespace-nowrap overflow-hidden text-ellipsis max-w-full", e.titleCenter ? "text-center" : ""])
122
+ }, C(e.title), 3),
123
+ e.$slots.subtitle || e.subtitle ? (g(), h("div", {
124
+ key: 0,
125
+ class: i(["text-sm text-gray-500 mt-0.5 max-w-full", e.titleCenter ? "text-center" : ""])
126
+ }, [
127
+ c(e.$slots, "subtitle", {}, () => [
128
+ T(C(e.subtitle), 1)
129
+ ], !0)
130
+ ], 2)) : b("", !0)
131
+ ], 2),
132
+ a("button", {
133
+ type: "button",
134
+ class: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center",
135
+ onClick: f
136
+ }, [...s[0] || (s[0] = [
137
+ a("svg", {
138
+ xmlns: "http://www.w3.org/2000/svg",
139
+ fill: "none",
140
+ viewBox: "0 0 24 24",
141
+ "stroke-width": "1.8",
142
+ stroke: "currentColor",
143
+ "aria-hidden": "true",
144
+ class: "w-5 h-5"
145
+ }, [
146
+ a("path", {
147
+ "stroke-linecap": "round",
148
+ "stroke-linejoin": "round",
149
+ d: "M6 18L18 6M6 6l12 12"
150
+ })
151
+ ], -1)
152
+ ])])
153
+ ], 2)) : b("", !0),
154
+ c(e.$slots, "header", {}, void 0, !0),
155
+ c(e.$slots, "body", {}, void 0, !0),
156
+ c(e.$slots, "default", {}, void 0, !0),
157
+ c(e.$slots, "footer", { close: f }, void 0, !0)
158
+ ])
159
+ ], 6)
160
+ ], 34)) : b("", !0);
161
+ }
162
+ });
163
+ const V = /* @__PURE__ */ $(_, [["__scopeId", "data-v-83c666bc"]]);
164
+ function F(r = !1) {
165
+ const o = p(r), u = p(void 0);
166
+ let t = null;
167
+ const n = () => {
168
+ t && (clearTimeout(t), t = null), o.value = !1, u.value = void 0;
169
+ }, v = (l) => {
170
+ u.value = l, o.value = !0;
171
+ }, x = (l) => {
172
+ t && clearTimeout(t), t = setTimeout(n, l * 1e3);
173
+ }, m = (l) => {
174
+ l.key === "Escape" && o.value && n();
175
+ };
176
+ return z(() => {
177
+ document.addEventListener("keydown", m);
178
+ }), B(() => {
179
+ document.removeEventListener("keydown", m), t && clearTimeout(t);
180
+ }), {
181
+ isOpened: o,
182
+ isOpen: o,
183
+ // alias for backward compatibility
184
+ data: u,
185
+ open: v,
186
+ close: n,
187
+ closeWithDelay: x
188
+ };
189
+ }
190
+ export {
191
+ V as O,
192
+ E as m,
193
+ F as u
194
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oneb/ui-vue",
3
- "version": "0.3.28",
3
+ "version": "0.3.29",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "files": [
@@ -1,177 +0,0 @@
1
- import { defineComponent as k, computed as y, ref as f, openBlock as g, createElementBlock as h, normalizeClass as m, createElementVNode as a, normalizeStyle as O, toDisplayString as _, createCommentVNode as M, renderSlot as p, onMounted as S, onBeforeUnmount as T } from "vue";
2
- import { _ as z } from "./_plugin-vue_export-helper-dad06003.js";
3
- const B = {
4
- useModal: {
5
- required: !0,
6
- type: Object
7
- },
8
- title: {
9
- required: !1,
10
- type: String
11
- },
12
- size: {
13
- type: String,
14
- default: "medium"
15
- },
16
- onClose: {
17
- type: Function
18
- },
19
- classModal: {
20
- type: Boolean,
21
- default: !1
22
- },
23
- titleCenter: {
24
- type: Boolean,
25
- default: !1
26
- },
27
- classTitle: {
28
- type: String,
29
- default: ""
30
- },
31
- canClose: {
32
- type: Function,
33
- default: () => !0
34
- },
35
- customWidth: {
36
- type: String,
37
- default: ""
38
- }
39
- }, E = {
40
- "3xs": ["max-w-xs"],
41
- xs: ["max-w-sm"],
42
- sm: ["max-w-md"],
43
- small: ["max-w-lg"],
44
- md: ["max-w-xl"],
45
- medium: ["max-w-xl"],
46
- large: ["max-w-2xl"],
47
- xl: ["max-w-3xl"],
48
- "2xl": ["max-w-4xl"],
49
- "3xl": ["max-w-4xl"],
50
- "4xl": ["max-w-5xl"],
51
- "5xl": ["max-w-5xl"],
52
- "7xl": ["max-w-7xl"]
53
- }, L = (i = "medium") => {
54
- const s = [];
55
- return s.push(...E[i] ?? []), s;
56
- }, W = { class: "relative bg-white rounded-lg shadow h-full" }, D = /* @__PURE__ */ k({
57
- __name: "OneModal",
58
- props: B,
59
- emits: ["isOpen", "closed"],
60
- setup(i, { expose: s, emit: r }) {
61
- const t = i, n = r, v = y(() => {
62
- var l, u;
63
- const e = t.useModal;
64
- return ((l = e == null ? void 0 : e.isOpened) == null ? void 0 : l.value) ?? ((u = e == null ? void 0 : e.isOpen) == null ? void 0 : u.value) ?? !1;
65
- }), x = y(() => L(t.size)), d = y(() => t.customWidth ? { width: t.customWidth } : {}), o = f(null), w = f(!1);
66
- function b(e) {
67
- w.value = !1, o.value && !o.value.contains(e.target) && (w.value = !0);
68
- }
69
- function C(e) {
70
- w.value && o.value && !o.value.contains(e.target) && c();
71
- }
72
- const c = () => {
73
- var l, u;
74
- if (t.canClose && !t.canClose())
75
- return;
76
- const e = t.useModal;
77
- (l = e == null ? void 0 : e.close) == null || l.call(e), (u = t.onClose) == null || u.call(t), n("closed"), n("isOpen");
78
- };
79
- return s({
80
- open: () => {
81
- var l;
82
- const e = t.useModal;
83
- (l = e == null ? void 0 : e.open) == null || l.call(e), n("isOpen");
84
- },
85
- close: c
86
- }), (e, l) => v.value ? (g(), h("div", {
87
- key: 0,
88
- tabindex: "-1",
89
- onMousedown: b,
90
- onMouseup: C,
91
- class: m(["modal backdrop !m-0", { "modal-mobile": e.classModal }])
92
- }, [
93
- a("div", {
94
- class: m([
95
- "relative w-full max-h-full",
96
- x.value,
97
- { "fixed bottom-0 left-0 right-0 w-full bg-white rounded-t-xl mobile-modal": e.classModal }
98
- ]),
99
- style: O(d.value),
100
- ref_key: "modalContent",
101
- ref: o
102
- }, [
103
- a("div", W, [
104
- e.title ? (g(), h("div", {
105
- key: 0,
106
- class: m([
107
- e.titleCenter ? "grid grid-cols-4" : "flex items-start justify-between",
108
- "p-3 border-b rounded-t",
109
- e.classTitle
110
- ])
111
- }, [
112
- a("h3", {
113
- class: m(["text-xl font-semibold text-gray-900 whitespace-nowrap overflow-hidden text-ellipsis", e.titleCenter ? "col-span-2 text-center col-start-2" : ""])
114
- }, _(e.title), 3),
115
- a("button", {
116
- type: "button",
117
- class: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center",
118
- onClick: c
119
- }, [...l[0] || (l[0] = [
120
- a("svg", {
121
- xmlns: "http://www.w3.org/2000/svg",
122
- fill: "none",
123
- viewBox: "0 0 24 24",
124
- "stroke-width": "1.8",
125
- stroke: "currentColor",
126
- "aria-hidden": "true",
127
- class: "w-5 h-5"
128
- }, [
129
- a("path", {
130
- "stroke-linecap": "round",
131
- "stroke-linejoin": "round",
132
- d: "M6 18L18 6M6 6l12 12"
133
- })
134
- ], -1)
135
- ])])
136
- ], 2)) : M("", !0),
137
- p(e.$slots, "header", {}, void 0, !0),
138
- p(e.$slots, "body", {}, void 0, !0),
139
- p(e.$slots, "default", {}, void 0, !0),
140
- p(e.$slots, "footer", { close: c }, void 0, !0)
141
- ])
142
- ], 6)
143
- ], 34)) : M("", !0);
144
- }
145
- });
146
- const F = /* @__PURE__ */ z(D, [["__scopeId", "data-v-3560b61e"]]);
147
- function N(i = !1) {
148
- const s = f(i), r = f(void 0);
149
- let t = null;
150
- const n = () => {
151
- t && (clearTimeout(t), t = null), s.value = !1, r.value = void 0;
152
- }, v = (o) => {
153
- r.value = o, s.value = !0;
154
- }, x = (o) => {
155
- t && clearTimeout(t), t = setTimeout(n, o * 1e3);
156
- }, d = (o) => {
157
- o.key === "Escape" && s.value && n();
158
- };
159
- return S(() => {
160
- document.addEventListener("keydown", d);
161
- }), T(() => {
162
- document.removeEventListener("keydown", d), t && clearTimeout(t);
163
- }), {
164
- isOpened: s,
165
- isOpen: s,
166
- // alias for backward compatibility
167
- data: r,
168
- open: v,
169
- close: n,
170
- closeWithDelay: x
171
- };
172
- }
173
- export {
174
- F as O,
175
- B as m,
176
- N as u
177
- };
@@ -1 +0,0 @@
1
- "use strict";const t=require("vue"),g=require("./_plugin-vue_export-helper-f246444f.cjs"),v={useModal:{required:!0,type:Object},title:{required:!1,type:String},size:{type:String,default:"medium"},onClose:{type:Function},classModal:{type:Boolean,default:!1},titleCenter:{type:Boolean,default:!1},classTitle:{type:String,default:""},canClose:{type:Function,default:()=>!0},customWidth:{type:String,default:""}},y={"3xs":["max-w-xs"],xs:["max-w-sm"],sm:["max-w-md"],small:["max-w-lg"],md:["max-w-xl"],medium:["max-w-xl"],large:["max-w-2xl"],xl:["max-w-3xl"],"2xl":["max-w-4xl"],"3xl":["max-w-4xl"],"4xl":["max-w-5xl"],"5xl":["max-w-5xl"],"7xl":["max-w-7xl"]},h=(r="medium")=>{const n=[];return n.push(...y[r]??[]),n},C={class:"relative bg-white rounded-lg shadow h-full"},M=t.defineComponent({__name:"OneModal",props:v,emits:["isOpen","closed"],setup(r,{expose:n,emit:i}){const l=r,a=i,m=t.computed(()=>{var s,u;const e=l.useModal;return((s=e==null?void 0:e.isOpened)==null?void 0:s.value)??((u=e==null?void 0:e.isOpen)==null?void 0:u.value)??!1}),p=t.computed(()=>h(l.size)),d=t.computed(()=>l.customWidth?{width:l.customWidth}:{}),o=t.ref(null),f=t.ref(!1);function x(e){f.value=!1,o.value&&!o.value.contains(e.target)&&(f.value=!0)}function w(e){f.value&&o.value&&!o.value.contains(e.target)&&c()}const c=()=>{var s,u;if(l.canClose&&!l.canClose())return;const e=l.useModal;(s=e==null?void 0:e.close)==null||s.call(e),(u=l.onClose)==null||u.call(l),a("closed"),a("isOpen")};return n({open:()=>{var s;const e=l.useModal;(s=e==null?void 0:e.open)==null||s.call(e),a("isOpen")},close:c}),(e,s)=>m.value?(t.openBlock(),t.createElementBlock("div",{key:0,tabindex:"-1",onMousedown:x,onMouseup:w,class:t.normalizeClass(["modal backdrop !m-0",{"modal-mobile":e.classModal}])},[t.createElementVNode("div",{class:t.normalizeClass(["relative w-full max-h-full",p.value,{"fixed bottom-0 left-0 right-0 w-full bg-white rounded-t-xl mobile-modal":e.classModal}]),style:t.normalizeStyle(d.value),ref_key:"modalContent",ref:o},[t.createElementVNode("div",C,[e.title?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass([e.titleCenter?"grid grid-cols-4":"flex items-start justify-between","p-3 border-b rounded-t",e.classTitle])},[t.createElementVNode("h3",{class:t.normalizeClass(["text-xl font-semibold text-gray-900 whitespace-nowrap overflow-hidden text-ellipsis",e.titleCenter?"col-span-2 text-center col-start-2":""])},t.toDisplayString(e.title),3),t.createElementVNode("button",{type:"button",class:"text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center",onClick:c},[...s[0]||(s[0]=[t.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.8",stroke:"currentColor","aria-hidden":"true",class:"w-5 h-5"},[t.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18L18 6M6 6l12 12"})],-1)])])],2)):t.createCommentVNode("",!0),t.renderSlot(e.$slots,"header",{},void 0,!0),t.renderSlot(e.$slots,"body",{},void 0,!0),t.renderSlot(e.$slots,"default",{},void 0,!0),t.renderSlot(e.$slots,"footer",{close:c},void 0,!0)])],6)],34)):t.createCommentVNode("",!0)}});const b=g._export_sfc(M,[["__scopeId","data-v-3560b61e"]]);function k(r=!1){const n=t.ref(r),i=t.ref(void 0);let l=null;const a=()=>{l&&(clearTimeout(l),l=null),n.value=!1,i.value=void 0},m=o=>{i.value=o,n.value=!0},p=o=>{l&&clearTimeout(l),l=setTimeout(a,o*1e3)},d=o=>{o.key==="Escape"&&n.value&&a()};return t.onMounted(()=>{document.addEventListener("keydown",d)}),t.onBeforeUnmount(()=>{document.removeEventListener("keydown",d),l&&clearTimeout(l)}),{isOpened:n,isOpen:n,data:i,open:m,close:a,closeWithDelay:p}}exports.OneModal=b;exports.modalProps=v;exports.useModal=k;