vx-vue 0.0.1 → 0.1.0

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.
package/README.md CHANGED
@@ -1,7 +1,33 @@
1
- # Vue 3 + Vite
1
+ # vxVue
2
2
 
3
- This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
3
+ ## Introduction
4
+ VxVue provides a handful of reusable Vue components styled with Tailwind CSS. All components are geared towards simplicity leaving room for customizations, extensions or adaptations. At some point a more verbose documentation than this brief readme might emerge.
4
5
 
5
- ## Recommended IDE Setup
6
+ ## Requirements
7
+ * Vue.js 3.*
8
+ * Tailwind CSS 3.*
6
9
 
7
- - [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
10
+ The official Tailwind CSS forms plugin is used to provide basic styling of the form components using the class strategy which allows the styling of non-form elements consistently.
11
+ An easy to configure color theming is applied. Since Tailwind won't observe classes in imported components tailwind.config.js should contain
12
+ ```
13
+ module.exports = {
14
+ content: [
15
+ './node_modules/vx-vue/**/*.js',
16
+ ...
17
+ ],
18
+ ...
19
+ }
20
+ ```
21
+ ## Provided components
22
+ So far the following components have been implemented:
23
+
24
+ | element | description |
25
+ |-------------------|----------------------------------------------------------------------------------------------------|
26
+ | `password-input` | a simple input with toggle button which toggles between `type='button'` and `type='text'` |
27
+ | `form-select` | a select element adapted for Vue.js integration |
28
+ | `form-switch` | a fancy checkbox |
29
+ | `sortable` | a sortable table; the `columns` attribute specifies the columns and their sorting options |
30
+ | `message-toast` | displays a notification which dismisses itself after a configurable timeout |
31
+ | `confirm` | promise-based component which can either take one ("confirm") or two buttons ("confirm", "cancel") |
32
+ | `pagination` | A pagination component for arbitrary items; opinionated in its layout |
33
+ | `tabs` | A tabs component which allows both badges and icons |
package/dist/style.css ADDED
@@ -0,0 +1 @@
1
+ .messagetoast-fade-enter-from,.messagetoast-fade-leave-to{@apply opacity-0 transform-gpu -translate-y-10;}.messagetoast-fade-enter-to,.messagetoast-fade-leave-from{@apply opacity-100 translate-y-0;}.messagetoast-fade-enter-active,.messagetoast-fade-leave-active{@apply transition-all duration-300;}tbody tr[data-v-c18eb3d8]:nth-of-type(odd){@apply bg-slate-100 text-slate-700;}tbody tr[data-v-c18eb3d8]:nth-of-type(2n){@apply bg-slate-200 text-slate-800;}tbody tr:nth-of-type(odd) td.active[data-v-c18eb3d8]{@apply bg-amber-100 text-amber-700;}tbody tr:nth-of-type(2n) td.active[data-v-c18eb3d8]{@apply bg-amber-200 text-amber-800;}thead th.active[data-v-c18eb3d8]{@apply bg-amber-800;}
package/dist/vxvue.es.js CHANGED
@@ -1,6 +1,6 @@
1
- import { openBlock as s, createElementBlock as l, createElementVNode as n, ref as c, computed as V, useAttrs as _, normalizeClass as k, mergeProps as A, withModifiers as j, createBlock as C, unref as b, renderSlot as h, toDisplayString as v, createCommentVNode as m, Fragment as x, renderList as L, createVNode as M, Transition as z, withCtx as B, createTextVNode as $, nextTick as N } from "vue";
2
- function O(t, a) {
3
- return s(), l("svg", {
1
+ import { openBlock as a, createElementBlock as o, createElementVNode as n, ref as g, computed as _, useAttrs as T, normalizeClass as f, mergeProps as N, withModifiers as C, createBlock as B, unref as $, renderSlot as x, toDisplayString as h, createCommentVNode as y, Fragment as b, renderList as k, createVNode as P, Transition as L, withCtx as j, createTextVNode as w, nextTick as O, watch as V, onMounted as z, resolveDynamicComponent as D } from "vue";
2
+ function I(t, i) {
3
+ return a(), o("svg", {
4
4
  xmlns: "http://www.w3.org/2000/svg",
5
5
  fill: "none",
6
6
  viewBox: "0 0 24 24",
@@ -15,8 +15,8 @@ function O(t, a) {
15
15
  })
16
16
  ]);
17
17
  }
18
- function E(t, a) {
19
- return s(), l("svg", {
18
+ function F(t, i) {
19
+ return a(), o("svg", {
20
20
  xmlns: "http://www.w3.org/2000/svg",
21
21
  fill: "none",
22
22
  viewBox: "0 0 24 24",
@@ -36,76 +36,76 @@ function E(t, a) {
36
36
  })
37
37
  ]);
38
38
  }
39
- const P = ["value", "type"], te = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
39
+ const E = ["value", "type"], Ee = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
40
40
  __name: "password-input",
41
41
  props: ["modelValue"],
42
42
  emits: ["update:modelValue"],
43
- setup(t, { emit: a }) {
44
- const r = c(!1), i = V(() => {
45
- let e = Object.assign({}, _());
43
+ setup(t, { emit: i }) {
44
+ const s = g(!1), l = _(() => {
45
+ let e = Object.assign({}, T());
46
46
  return delete e.class, e;
47
47
  });
48
- return (e, o) => (s(), l("div", {
49
- class: k("inline-block relative " + _().class)
48
+ return (e, v) => (a(), o("div", {
49
+ class: f("inline-block relative " + T().class)
50
50
  }, [
51
- n("input", A({
51
+ n("input", N({
52
52
  value: t.modelValue,
53
- type: r.value ? "text" : "password",
54
- onInput: o[0] || (o[0] = (u) => a("update:modelValue", u.target.value))
55
- }, i.value, { class: "block pr-10 w-full form-input peer" }), null, 16, P),
53
+ type: s.value ? "text" : "password",
54
+ onInput: v[0] || (v[0] = (u) => i("update:modelValue", u.target.value))
55
+ }, l.value, { class: "block pr-10 w-full form-input peer" }), null, 16, E),
56
56
  n("button", {
57
- onClick: o[1] || (o[1] = j((u) => r.value = !r.value, ["stop"])),
57
+ onClick: v[1] || (v[1] = C((u) => s.value = !s.value, ["stop"])),
58
58
  class: "flex absolute inset-y-0 right-0 items-center pr-3 text-brand-700 hover:text-brand"
59
59
  }, [
60
- r.value ? (s(), C(b(O), {
60
+ s.value ? (a(), B($(I), {
61
61
  key: 0,
62
62
  class: "w-5 h-5"
63
- })) : (s(), C(b(E), {
63
+ })) : (a(), B($(F), {
64
64
  key: 1,
65
65
  class: "w-5 h-5"
66
66
  }))
67
67
  ]),
68
- h(e.$slots, "default")
68
+ x(e.$slots, "default")
69
69
  ], 2));
70
70
  }
71
- }), T = ["value"], F = {
71
+ }), q = ["value"], R = {
72
72
  key: 0,
73
73
  disabled: "",
74
74
  value: ""
75
- }, I = ["value", "selected"], se = {
75
+ }, U = ["value", "selected"], G = {
76
76
  __name: "form-select",
77
77
  props: { options: Array, modelValue: [String, Number], disabledLabel: String },
78
78
  emits: ["update:modelValue"],
79
- setup(t, { emit: a }) {
80
- return (r, i) => (s(), l("select", A(r.$attrs, {
79
+ setup(t, { emit: i }) {
80
+ return (s, l) => (a(), o("select", N(s.$attrs, {
81
81
  value: t.modelValue,
82
82
  class: "form-select",
83
- onChange: i[0] || (i[0] = (e) => a("update:modelValue", e.target.value))
83
+ onChange: l[0] || (l[0] = (e) => i("update:modelValue", e.target.value))
84
84
  }), [
85
- t.disabledLabel ? (s(), l("option", F, v(t.disabledLabel), 1)) : m("", !0),
86
- (s(!0), l(x, null, L(t.options, (e) => (s(), l("option", {
85
+ t.disabledLabel ? (a(), o("option", R, h(t.disabledLabel), 1)) : y("", !0),
86
+ (a(!0), o(b, null, k(t.options, (e) => (a(), o("option", {
87
87
  value: e.key !== void 0 ? e.key : e.label || e,
88
88
  selected: (e.key !== void 0 ? e.key : e.label || e) === t.modelValue
89
- }, v(e.label || e), 9, I))), 256))
90
- ], 16, T));
89
+ }, h(e.label || e), 9, U))), 256))
90
+ ], 16, q));
91
91
  }
92
- }, D = {
92
+ }, H = {
93
93
  key: 0,
94
94
  class: "fixed inset-0 z-50 bg-black bg-opacity-50 backdrop-blur-sm",
95
95
  "aria-hidden": "true"
96
- }, q = {
96
+ }, J = {
97
97
  key: 0,
98
98
  class: "overflow-y-auto fixed inset-0 z-50"
99
- }, G = { class: "flex justify-center items-end px-4 pt-4 pb-20 min-h-screen text-center sm:block sm:p-0" }, H = { key: 0 }, J = /* @__PURE__ */ n("span", {
99
+ }, K = { class: "flex justify-center items-end px-4 pt-4 pb-20 min-h-screen text-center sm:block sm:p-0" }, Q = { key: 0 }, W = /* @__PURE__ */ n("span", {
100
100
  class: "hidden sm:inline-block sm:h-screen sm:align-middle",
101
101
  "aria-hidden": "true"
102
- }, "​", -1), K = { class: "inline-block overflow-hidden text-left align-bottom bg-white rounded shadow-xl transition-all transform sm:my-8 sm:w-full sm:max-w-sm sm:align-middle lg:max-w-lg" }, Q = { class: "px-4 pb-4 mt-4 sm:px-6 sm:pb-6 sm:mt-5" }, R = { class: "flex flex-row items-center" }, U = { class: "flex-shrink-0" }, W = { class: "flex-grow text-center" }, X = ["onClick"], le = {
102
+ }, "​", -1), X = { class: "inline-block overflow-hidden text-left align-bottom bg-white rounded shadow-xl transition-all transform sm:my-8 sm:w-full sm:max-w-sm sm:align-middle lg:max-w-lg" }, Y = { class: "px-4 pb-4 mt-4 sm:px-6 sm:pb-6 sm:mt-5" }, Z = { class: "flex flex-row items-center" }, ee = { class: "flex-shrink-0" }, te = { class: "flex-grow text-center" }, se = ["onClick"], qe = {
103
103
  __name: "confirm",
104
104
  props: {
105
105
  buttons: {
106
106
  type: [Object, Array],
107
107
  default: { label: "Ok" },
108
- validator: (t) => Array.isArray(t) && t.length <= 2 && t.filter((a) => a.label !== "undefined" && a.value !== "undefined").length === t.length || t.label !== void 0 && t.value !== void 0
108
+ validator: (t) => Array.isArray(t) && t.length <= 2 && t.filter((i) => i.label !== "undefined" && i.value !== "undefined").length === t.length || t.label !== void 0 && t.value !== void 0
109
109
  },
110
110
  headerClass: {
111
111
  type: String,
@@ -116,65 +116,458 @@ const P = ["value", "type"], te = /* @__PURE__ */ Object.assign({ inheritAttrs:
116
116
  default: "button"
117
117
  }
118
118
  },
119
- setup(t, { expose: a }) {
120
- const r = t, i = c(""), e = c(""), o = c(!1);
121
- let u = null, g = null;
122
- const S = V(() => Array.isArray(r.buttons) ? r.buttons : [r.buttons]), y = c(null);
123
- return a({ open: (d, w) => (i.value = d, e.value = w, o.value = !0, N(() => y.value.firstElementChild.focus()), new Promise((f, p) => {
124
- u = f, g = p;
125
- })) }), (d, w) => (s(), l(x, null, [
126
- o.value ? (s(), l("div", D)) : m("", !0),
127
- M(z, { name: "appear" }, {
128
- default: B(() => [
129
- o.value ? (s(), l("div", q, [
130
- n("div", G, [
131
- o.value ? (s(), l("div", H, [
132
- J,
133
- n("div", K, [
134
- i.value ? (s(), l("h3", {
119
+ setup(t, { expose: i }) {
120
+ const s = t, l = g(""), e = g(""), v = g(!1);
121
+ let u = null, c = null;
122
+ const d = _(() => Array.isArray(s.buttons) ? s.buttons : [s.buttons]), r = g(null);
123
+ return i({ open: (p, M) => (l.value = p, e.value = M, v.value = !0, O(() => r.value.firstElementChild.focus()), new Promise((A, S) => {
124
+ u = A, c = S;
125
+ })) }), (p, M) => (a(), o(b, null, [
126
+ v.value ? (a(), o("div", H)) : y("", !0),
127
+ P(L, { name: "appear" }, {
128
+ default: j(() => [
129
+ v.value ? (a(), o("div", J, [
130
+ n("div", K, [
131
+ v.value ? (a(), o("div", Q, [
132
+ W,
133
+ n("div", X, [
134
+ l.value ? (a(), o("h3", {
135
135
  key: 0,
136
- class: k(["py-4 pt-4 text-lg font-medium text-center sm:py-6", t.headerClass])
136
+ class: f(["py-4 pt-4 text-lg font-medium text-center sm:py-6", t.headerClass])
137
137
  }, [
138
- h(d.$slots, "title", { title: i.value }, () => [
139
- $(v(i.value), 1)
138
+ x(p.$slots, "title", { title: l.value }, () => [
139
+ w(h(l.value), 1)
140
140
  ])
141
- ], 2)) : m("", !0),
142
- n("div", Q, [
143
- n("div", R, [
144
- n("div", U, [
145
- h(d.$slots, "icon")
141
+ ], 2)) : y("", !0),
142
+ n("div", Y, [
143
+ n("div", Z, [
144
+ n("div", ee, [
145
+ x(p.$slots, "icon")
146
146
  ]),
147
- n("p", W, [
148
- h(d.$slots, "default", { message: e.value }, () => [
149
- $(v(e.value), 1)
147
+ n("p", te, [
148
+ x(p.$slots, "default", { message: e.value }, () => [
149
+ w(h(e.value), 1)
150
150
  ])
151
151
  ])
152
152
  ]),
153
153
  n("div", {
154
154
  class: "flex justify-center mt-5 space-x-2 sm:mt-6",
155
155
  ref_key: "buttonsContainer",
156
- ref: y
156
+ ref: r
157
157
  }, [
158
- (s(!0), l(x, null, L(S.value, (f, p) => (s(), l("button", {
159
- class: k([t.buttonClass, f.class]),
160
- onClick: j((Z) => {
161
- o.value = !1, p === 0 ? b(u)() : b(g)();
158
+ (a(!0), o(b, null, k(d.value, (A, S) => (a(), o("button", {
159
+ class: f([t.buttonClass, A.class]),
160
+ onClick: C((Ie) => {
161
+ v.value = !1, S === 0 ? $(u)() : $(c)();
162
162
  }, ["prevent"])
163
- }, v(f.label), 11, X))), 256))
163
+ }, h(A.label), 11, se))), 256))
164
164
  ], 512)
165
165
  ])
166
166
  ])
167
- ])) : m("", !0)
167
+ ])) : y("", !0)
168
168
  ])
169
- ])) : m("", !0)
169
+ ])) : y("", !0)
170
170
  ]),
171
171
  _: 3
172
172
  })
173
173
  ], 64));
174
174
  }
175
+ }, le = ["aria-checked"], ae = ["checked"], Re = {
176
+ __name: "form-switch",
177
+ props: ["modelValue"],
178
+ emits: ["update:modelValue"],
179
+ setup(t, { emit: i }) {
180
+ const s = t, l = _(() => s.modelValue ? "bg-vxvue" : "bg-slate-200"), e = _(() => s.modelValue ? "translate-x-5" : "translate-x-0"), v = _(() => {
181
+ let u = Object.assign({}, T());
182
+ return delete u.class, u;
183
+ });
184
+ return (u, c) => (a(), o(b, null, [
185
+ n("label", {
186
+ class: f(u.$attrs.class)
187
+ }, [
188
+ n("span", {
189
+ class: f([l.value, "inline-flex relative flex-shrink-0 w-11 h-6 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out cursor-pointer focus:ring-2 focus:ring-offset-2 focus:outline-none focus:ring-vxvue"]),
190
+ role: "switch",
191
+ "aria-checked": !!t.modelValue
192
+ }, [
193
+ n("span", {
194
+ "aria-hidden": "true",
195
+ class: f([e.value, "inline-block w-5 h-5 bg-white rounded-full ring-0 shadow transition duration-200 ease-in-out transform pointer-events-none"])
196
+ }, null, 2),
197
+ n("input", N({
198
+ class: "hidden",
199
+ value: "1",
200
+ type: "checkbox",
201
+ onChange: c[0] || (c[0] = (d) => i("update:modelValue", d.target.checked))
202
+ }, v.value, { checked: t.modelValue }), null, 16, ae)
203
+ ], 10, le)
204
+ ], 2),
205
+ x(u.$slots, "default")
206
+ ], 64));
207
+ }
208
+ };
209
+ function ne(t, i) {
210
+ return a(), o("svg", {
211
+ xmlns: "http://www.w3.org/2000/svg",
212
+ viewBox: "0 0 24 24",
213
+ fill: "currentColor",
214
+ "aria-hidden": "true"
215
+ }, [
216
+ n("path", {
217
+ "fill-rule": "evenodd",
218
+ d: "M7.72 12.53a.75.75 0 010-1.06l7.5-7.5a.75.75 0 111.06 1.06L9.31 12l6.97 6.97a.75.75 0 11-1.06 1.06l-7.5-7.5z",
219
+ "clip-rule": "evenodd"
220
+ })
221
+ ]);
222
+ }
223
+ function re(t, i) {
224
+ return a(), o("svg", {
225
+ xmlns: "http://www.w3.org/2000/svg",
226
+ viewBox: "0 0 24 24",
227
+ fill: "currentColor",
228
+ "aria-hidden": "true"
229
+ }, [
230
+ n("path", {
231
+ "fill-rule": "evenodd",
232
+ d: "M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z",
233
+ "clip-rule": "evenodd"
234
+ })
235
+ ]);
236
+ }
237
+ function oe(t, i) {
238
+ return a(), o("svg", {
239
+ xmlns: "http://www.w3.org/2000/svg",
240
+ viewBox: "0 0 24 24",
241
+ fill: "currentColor",
242
+ "aria-hidden": "true"
243
+ }, [
244
+ n("path", {
245
+ "fill-rule": "evenodd",
246
+ d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z",
247
+ "clip-rule": "evenodd"
248
+ })
249
+ ]);
250
+ }
251
+ const ie = {
252
+ "aria-live": "assertive",
253
+ class: "flex fixed inset-0 z-50 items-start py-6 px-4 pointer-events-none sm:p-6"
254
+ }, ue = { class: "flex flex-col items-center space-y-4 w-full" }, de = { class: "p-4" }, ce = { class: "flex items-start" }, ve = { class: "flex-shrink-0" }, pe = { class: "flex-1 pt-0.5 ml-3 w-0" }, fe = { class: "font-bold" }, he = { class: "mt-1" }, me = { class: "flex flex-shrink-0 ml-4" }, xe = /* @__PURE__ */ n("span", { class: "sr-only" }, "Close", -1), Ue = /* @__PURE__ */ Object.assign({
255
+ inheritAttrs: !1
256
+ }, {
257
+ __name: "message-toast",
258
+ props: {
259
+ title: String,
260
+ message: [String, Array],
261
+ timeout: { type: Number, default: 5e3 },
262
+ active: { type: Boolean, default: !1 }
263
+ },
264
+ emits: ["timeout", "close"],
265
+ setup(t, { emit: i }) {
266
+ const s = t, l = g(null), e = _(() => typeof s.message == "string" ? [s.message] : s.message), v = () => {
267
+ window.clearTimeout(l.value), s.active && s.timeout && (l.value = window.setTimeout(() => {
268
+ i("timeout");
269
+ }, s.timeout));
270
+ };
271
+ return V(() => s.active, v), z(v), (u, c) => (a(), o("div", ie, [
272
+ n("div", ue, [
273
+ P(L, { name: "messagetoast-fade" }, {
274
+ default: j(() => [
275
+ t.active ? (a(), o("div", {
276
+ key: 0,
277
+ class: f(["overflow-hidden w-full max-w-sm rounded-md ring-1 ring-black ring-opacity-5 shadow-lg pointer-events-auto", u.$attrs.class])
278
+ }, [
279
+ n("div", de, [
280
+ n("div", ce, [
281
+ n("div", ve, [
282
+ x(u.$slots, "icon")
283
+ ]),
284
+ n("div", pe, [
285
+ n("p", fe, [
286
+ x(u.$slots, "title", {}, () => [
287
+ w(h(t.title), 1)
288
+ ])
289
+ ]),
290
+ (a(!0), o(b, null, k(e.value, (d) => (a(), o("p", he, [
291
+ x(u.$slots, "default", {}, () => [
292
+ w(h(d), 1)
293
+ ])
294
+ ]))), 256))
295
+ ]),
296
+ n("div", me, [
297
+ n("button", {
298
+ onClick: c[0] || (c[0] = (d) => i("close")),
299
+ class: "inline-flex text-white bg-black bg-opacity-20 rounded-sm focus:ring-2 focus:outline-none hover:text-stone-200 focus:ring-stone-200"
300
+ }, [
301
+ xe,
302
+ P($(oe), { class: "w-5 h-5" })
303
+ ])
304
+ ])
305
+ ])
306
+ ])
307
+ ], 2)) : y("", !0)
308
+ ]),
309
+ _: 3
310
+ })
311
+ ])
312
+ ]));
313
+ }
314
+ }), ge = { class: "flex justify-between items-center px-4 sm:px-0" }, be = { class: "flex flex-1 -mt-px w-0" }, ye = ["onClick"], _e = { class: "hidden md:flex md:-mt-px" }, we = { class: "flex flex-1 justify-end -mt-px w-0" }, ke = ["onClick"], Ge = {
315
+ __name: "pagination",
316
+ props: {
317
+ page: { type: Number, default: 1 },
318
+ total: { type: Number, default: 1 },
319
+ perPage: {
320
+ type: Number,
321
+ default: 20,
322
+ validator(t) {
323
+ return t >= 1;
324
+ }
325
+ },
326
+ showNavButtons: { type: Boolean, default: !0 },
327
+ prevText: { type: String, default: "Previous" },
328
+ nextText: { type: String, default: "Next" },
329
+ showAllPages: { type: Boolean, default: !1 },
330
+ markerPosition: {
331
+ type: String,
332
+ default: "above",
333
+ validator(t) {
334
+ return ["above", "below"].indexOf(t) !== -1;
335
+ }
336
+ }
337
+ },
338
+ emits: ["update:page"],
339
+ setup(t, { emit: i }) {
340
+ const s = t, l = g(Math.ceil(s.total / s.perPage)), e = g(null), v = _(() => s.markerPosition === "above" ? "border-t-2 pt-4" : "border-b-2 pb-4"), u = _(() => {
341
+ let r = [1];
342
+ if (s.showAllPages || l.value <= 7) {
343
+ for (let m = 2; m <= l.value; ++m)
344
+ r.push(m);
345
+ return r;
346
+ }
347
+ return e.value >= l.value ? r.push("dots", e.value - 2, e.value - 1) : e.value - 1 && e.value - 1 > 1 && (e.value > 1 && r.push("dots"), r.push(e.value - 1)), e.value > 1 && r.push(e.value), e.value + 1 < l.value && (r.push(e.value + 1), e.value <= 1 && r.push(e.value + 2), e.value + 2 < this.maxPage && r.push("dots")), e.value < this.maxPage && r.push(this.maxPage), r;
348
+ }), c = () => {
349
+ e.value > 1 && i("update:page", e.value - 1);
350
+ }, d = () => {
351
+ e.value < l.value && i("update:page", e.value + 1);
352
+ };
353
+ return V(() => s.page, (r) => e.value = Math.min(Math.max(r, 1), l.value), { immediate: !0 }), V(() => s.perPage, (r) => {
354
+ l.value = Math.ceil(s.total / s.perPage), i("update:page", 1);
355
+ }), V(() => s.total, (r) => {
356
+ l.value = Math.ceil(s.total / s.perPage), e.value > l.value && i("update:page", 1);
357
+ }), (r, m) => (a(), o("nav", ge, [
358
+ n("div", be, [
359
+ t.showNavButtons ? (a(), o("a", {
360
+ key: 0,
361
+ onClick: C(c, ["prevent"]),
362
+ href: "#",
363
+ class: f(["inline-flex items-center pr-1 text-sm font-medium text-gray-500 border-transparent hover:text-gray-700 hover:border-gray-300", [{ "cursor-default pointer-events-none": e.value <= 1 }, v.value]])
364
+ }, [
365
+ P($(ne), { class: "w-5 h-5" }),
366
+ w(" " + h(t.prevText), 1)
367
+ ], 10, ye)) : y("", !0)
368
+ ]),
369
+ n("div", _e, [
370
+ (a(!0), o(b, null, k(u.value, (p, M) => (a(), B(D(p !== "dots" ? "a" : "span"), {
371
+ onClick: C((A) => p !== "dots" ? i("update:page", p) : null, ["prevent"]),
372
+ key: M,
373
+ href: p !== "dots" ? "#" : null,
374
+ class: f(["inline-flex items-center px-4 text-sm font-medium", [{
375
+ "border-vxvue-500 text-vxvue-700": p === e.value,
376
+ "border-transparent text-gray-500": p !== e.value,
377
+ "hover:text-gray-700 hover:border-gray-300": p !== "dots"
378
+ }, v.value]])
379
+ }, {
380
+ default: j(() => [
381
+ w(h(p !== "dots" ? p : "..."), 1)
382
+ ]),
383
+ _: 2
384
+ }, 1032, ["onClick", "href", "class"]))), 128))
385
+ ]),
386
+ n("div", we, [
387
+ t.showNavButtons ? (a(), o("a", {
388
+ key: 0,
389
+ onClick: C(d, ["prevent"]),
390
+ href: "#",
391
+ class: f(["inline-flex items-center pl-1 text-sm font-medium text-gray-500 border-transparent hover:text-gray-700 hover:border-gray-300", [v.value, { "cursor-default pointer-events-none": e.value >= l.value }]])
392
+ }, [
393
+ w(h(t.nextText) + " ", 1),
394
+ P($(re), { class: "w-5 h-5" })
395
+ ], 10, ke)) : y("", !0)
396
+ ])
397
+ ]));
398
+ }
399
+ };
400
+ const $e = (t, i) => {
401
+ const s = t.__vccOpts || t;
402
+ for (const [l, e] of i)
403
+ s[l] = e;
404
+ return s;
405
+ }, Ce = { class: "overflow-hidden rounded ring-1 ring-opacity-10 shadow ring-slate-500" }, Pe = { class: "min-w-full divide-y divide-y-slate-900" }, Ae = { class: "text-white bg-slate-700" }, Ve = ["onClick"], Me = { class: "flex items-center" }, Se = {
406
+ key: 0,
407
+ xmlns: "http://www.w3.org/2000/svg",
408
+ class: "flex-shrink-0 ml-2 w-4 h-4",
409
+ fill: "none",
410
+ viewBox: "0 0 24 24",
411
+ stroke: "currentColor"
412
+ }, Te = ["d"], Be = {
413
+ key: 1,
414
+ "stroke-linecap": "round",
415
+ "stroke-linejoin": "round",
416
+ "stroke-width": "2",
417
+ d: "M8 9l4-4 4 4m0 6l-4 4-4-4"
418
+ }, Ne = {
419
+ __name: "sortable",
420
+ props: {
421
+ columns: {
422
+ type: Array,
423
+ required: !0,
424
+ validator: (t) => {
425
+ for (const i of t)
426
+ if (i.label === void 0 || i.prop === void 0)
427
+ return !1;
428
+ return !0;
429
+ }
430
+ },
431
+ rows: { type: Array, required: !0 },
432
+ offset: { type: Number, default: null },
433
+ count: { type: Number, default: null },
434
+ sortProp: { type: String },
435
+ sortDirection: { type: String, validator: (t) => !t || ["asc", "desc"].indexOf(t) !== -1 },
436
+ keyProperty: { type: String, default: "key" }
437
+ },
438
+ emits: ["before-sort", "after-sort"],
439
+ setup(t, { emit: i }) {
440
+ const s = t, l = g(s.sortProp), e = g(s.sortDirection), v = _(() => {
441
+ let c = s.rows.slice();
442
+ const d = s.columns.find(({ prop: r }) => r === l.value);
443
+ return d && (e.value === "asc" && d.sortAscFunction ? c.sort(d.sortAscFunction) : e.value === "desc" && d.sortDescFunction ? c.sort(d.sortDescFunction) : c.sort((r, m) => r[l.value] < m[l.value] ? e.value === "asc" ? -1 : 1 : r[l.value] > m[l.value] ? e.value === "asc" ? 1 : -1 : 0)), c.slice(s.offset || 0, (s.offset || 0) + (s.count || c.length));
444
+ }), u = (c) => {
445
+ i("before-sort", { prop: l.value, dir: e.value }), l.value === c ? e.value = e.value === "asc" ? "desc" : "asc" : (l.value = c, e.value = e.value || "asc"), O(() => i("after-sort", { prop: l.value, dir: e.value }));
446
+ };
447
+ return (c, d) => (a(), o("div", Ce, [
448
+ n("table", Pe, [
449
+ n("thead", Ae, [
450
+ n("tr", null, [
451
+ (a(!0), o(b, null, k(t.columns, (r) => (a(), o("th", {
452
+ scope: "col",
453
+ class: f(["py-3 px-6 text-left", [
454
+ { "cursor-pointer": r.sortable, active: l.value === r.prop },
455
+ r.cssClass
456
+ ]]),
457
+ onClick: (m) => r.sortable ? u(r.prop) : null
458
+ }, [
459
+ x(c.$slots, r.prop + "-header", {
460
+ column: r,
461
+ sortDir: e.value,
462
+ sortProp: l.value
463
+ }, () => [
464
+ n("div", Me, [
465
+ n("span", null, h(r.label), 1),
466
+ r.sortable ? (a(), o("svg", Se, [
467
+ l.value === r.prop ? (a(), o("path", {
468
+ key: 0,
469
+ "stroke-linecap": "round",
470
+ "stroke-linejoin": "round",
471
+ "stroke-width": "2",
472
+ d: e.value === "asc" ? "M19 9l-7 7-7-7" : "M5 15l7-7 7 7"
473
+ }, null, 8, Te)) : (a(), o("path", Be))
474
+ ])) : y("", !0)
475
+ ])
476
+ ], !0)
477
+ ], 10, Ve))), 256))
478
+ ])
479
+ ]),
480
+ n("tbody", null, [
481
+ (a(!0), o(b, null, k(v.value, (r) => (a(), o("tr", {
482
+ key: r[t.keyProperty],
483
+ class: f(r.cssClass)
484
+ }, [
485
+ (a(!0), o(b, null, k(t.columns, (m) => (a(), o("td", {
486
+ class: f(["py-3 px-6 whitespace-nowrap", { active: l.value === m.prop }])
487
+ }, [
488
+ x(c.$slots, m.prop, { row: r }, () => [
489
+ w(h(r[m.prop]), 1)
490
+ ], !0)
491
+ ], 2))), 256))
492
+ ], 2))), 128))
493
+ ])
494
+ ])
495
+ ]));
496
+ }
497
+ }, He = /* @__PURE__ */ $e(Ne, [["__scopeId", "data-v-c18eb3d8"]]), je = { class: "sm:hidden" }, Le = { class: "hidden sm:block" }, Oe = { class: "border-b border-gray-200" }, ze = {
498
+ class: "flex -mb-px space-x-8",
499
+ "aria-label": "Tabs"
500
+ }, De = ["onClick", "aria-current"], Je = {
501
+ __name: "tabs",
502
+ props: {
503
+ items: { type: Array, default: [] },
504
+ activeIndex: { type: Number, default: 0 }
505
+ },
506
+ emits: ["update:active-index"],
507
+ setup(t, { emit: i }) {
508
+ const s = t, l = g(s.items[s.activeIndex] || {}), e = _(() => {
509
+ let u = [];
510
+ return s.items.forEach((c, d) => {
511
+ c.disabled || u.push({ label: c.name, key: d });
512
+ }), u;
513
+ });
514
+ V(() => s.activeIndex, (u) => {
515
+ l.value = s.items[u] || {};
516
+ });
517
+ const v = (u) => {
518
+ u.disabled || (l.value = u, i("update:active-index", s.items.indexOf(u)));
519
+ };
520
+ return (u, c) => (a(), o(b, null, [
521
+ n("div", je, [
522
+ P(G, {
523
+ options: e.value,
524
+ "model-value": t.activeIndex,
525
+ "onUpdate:modelValue": c[0] || (c[0] = (d) => i("update:activeIndex", d)),
526
+ class: "w-full"
527
+ }, null, 8, ["options", "model-value"])
528
+ ]),
529
+ n("div", Le, [
530
+ n("div", Oe, [
531
+ n("nav", ze, [
532
+ (a(!0), o(b, null, k(t.items, (d) => (a(), o("a", {
533
+ key: d.name,
534
+ href: "#",
535
+ onClick: C((r) => v(d), ["prevent"]),
536
+ class: f([
537
+ l.value === d ? "border-vxvue-500 text-vxvue-600" : "border-transparent text-gray-900 hover:text-gray-700 hover:border-gray-300",
538
+ d.disabled ? "cursor-not-allowed text-gray-400 hover:border-transparent" : "",
539
+ "group inline-flex items-center py-4 px-1 border-b-4 font-medium"
540
+ ]),
541
+ "aria-current": l.value === d ? "page" : void 0
542
+ }, [
543
+ x(u.$slots, "icon", { tab: d }),
544
+ n("span", null, [
545
+ x(u.$slots, "default", { tab: d }, () => [
546
+ w(h(d.name), 1)
547
+ ])
548
+ ]),
549
+ d.badge ? (a(), o("span", {
550
+ key: 0,
551
+ class: f([
552
+ l.value === d ? "bg-vxvue-50 text-vxvue-700" : "bg-gray-200 text-gray-900",
553
+ d.disabled ? "bg-gray-100 text-gray-400" : "",
554
+ "hidden ml-3 py-0.5 px-2.5 rounded-full text-xs font-medium md:inline-block"
555
+ ])
556
+ }, h(d.badge), 3)) : y("", !0)
557
+ ], 10, De))), 128))
558
+ ])
559
+ ])
560
+ ])
561
+ ], 64));
562
+ }
175
563
  };
176
564
  export {
177
- le as Confirm,
178
- se as FormSelect,
179
- te as PasswordInput
565
+ qe as Confirm,
566
+ G as FormSelect,
567
+ Re as FormSwitch,
568
+ Ue as MessageToast,
569
+ Ge as Pagination,
570
+ Ee as PasswordInput,
571
+ He as Sortable,
572
+ Je as Tabs
180
573
  };
package/dist/vxvue.umd.js CHANGED
@@ -1 +1 @@
1
- (function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.vxVue={},r.Vue))})(this,function(r,e){"use strict";function u(l,n){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"})])}function h(l,n){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"}),e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M15 12a3 3 0 11-6 0 3 3 0 016 0z"})])}const b=["value","type"],g=Object.assign({inheritAttrs:!1},{__name:"password-input",props:["modelValue"],emits:["update:modelValue"],setup(l,{emit:n}){const o=e.ref(!1),a=e.computed(()=>{let t=Object.assign({},e.useAttrs());return delete t.class,t});return(t,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass("inline-block relative "+e.useAttrs().class)},[e.createElementVNode("input",e.mergeProps({value:l.modelValue,type:o.value?"text":"password",onInput:s[0]||(s[0]=c=>n("update:modelValue",c.target.value))},a.value,{class:"block pr-10 w-full form-input peer"}),null,16,b),e.createElementVNode("button",{onClick:s[1]||(s[1]=e.withModifiers(c=>o.value=!o.value,["stop"])),class:"flex absolute inset-y-0 right-0 items-center pr-3 text-brand-700 hover:text-brand"},[o.value?(e.openBlock(),e.createBlock(e.unref(u),{key:0,class:"w-5 h-5"})):(e.openBlock(),e.createBlock(e.unref(h),{key:1,class:"w-5 h-5"}))]),e.renderSlot(t.$slots,"default")],2))}}),y=["value"],x={key:0,disabled:"",value:""},B=["value","selected"],w={__name:"form-select",props:{options:Array,modelValue:[String,Number],disabledLabel:String},emits:["update:modelValue"],setup(l,{emit:n}){return(o,a)=>(e.openBlock(),e.createElementBlock("select",e.mergeProps(o.$attrs,{value:l.modelValue,class:"form-select",onChange:a[0]||(a[0]=t=>n("update:modelValue",t.target.value))}),[l.disabledLabel?(e.openBlock(),e.createElementBlock("option",x,e.toDisplayString(l.disabledLabel),1)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.options,t=>(e.openBlock(),e.createElementBlock("option",{value:t.key!==void 0?t.key:t.label||t,selected:(t.key!==void 0?t.key:t.label||t)===l.modelValue},e.toDisplayString(t.label||t),9,B))),256))],16,y))}},V={key:0,class:"fixed inset-0 z-50 bg-black bg-opacity-50 backdrop-blur-sm","aria-hidden":"true"},_={key:0,class:"overflow-y-auto fixed inset-0 z-50"},E={class:"flex justify-center items-end px-4 pt-4 pb-20 min-h-screen text-center sm:block sm:p-0"},C={key:0},N=e.createElementVNode("span",{class:"hidden sm:inline-block sm:h-screen sm:align-middle","aria-hidden":"true"},"​",-1),S={class:"inline-block overflow-hidden text-left align-bottom bg-white rounded shadow-xl transition-all transform sm:my-8 sm:w-full sm:max-w-sm sm:align-middle lg:max-w-lg"},$={class:"px-4 pb-4 mt-4 sm:px-6 sm:pb-6 sm:mt-5"},A={class:"flex flex-row items-center"},j={class:"flex-shrink-0"},L={class:"flex-grow text-center"},M=["onClick"],z={__name:"confirm",props:{buttons:{type:[Object,Array],default:{label:"Ok"},validator:l=>Array.isArray(l)&&l.length<=2&&l.filter(n=>n.label!=="undefined"&&n.value!=="undefined").length===l.length||l.label!==void 0&&l.value!==void 0},headerClass:{type:String,default:"text-vxvue-alt-900 bg-vxvue-alt-400"},buttonClass:{type:String,default:"button"}},setup(l,{expose:n}){const o=l,a=e.ref(""),t=e.ref(""),s=e.ref(!1);let c=null,f=null;const T=e.computed(()=>Array.isArray(o.buttons)?o.buttons:[o.buttons]),p=e.ref(null);return n({open:(i,k)=>(a.value=i,t.value=k,s.value=!0,e.nextTick(()=>p.value.firstElementChild.focus()),new Promise((d,m)=>{c=d,f=m}))}),(i,k)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[s.value?(e.openBlock(),e.createElementBlock("div",V)):e.createCommentVNode("",!0),e.createVNode(e.Transition,{name:"appear"},{default:e.withCtx(()=>[s.value?(e.openBlock(),e.createElementBlock("div",_,[e.createElementVNode("div",E,[s.value?(e.openBlock(),e.createElementBlock("div",C,[N,e.createElementVNode("div",S,[a.value?(e.openBlock(),e.createElementBlock("h3",{key:0,class:e.normalizeClass(["py-4 pt-4 text-lg font-medium text-center sm:py-6",l.headerClass])},[e.renderSlot(i.$slots,"title",{title:a.value},()=>[e.createTextVNode(e.toDisplayString(a.value),1)])],2)):e.createCommentVNode("",!0),e.createElementVNode("div",$,[e.createElementVNode("div",A,[e.createElementVNode("div",j,[e.renderSlot(i.$slots,"icon")]),e.createElementVNode("p",L,[e.renderSlot(i.$slots,"default",{message:t.value},()=>[e.createTextVNode(e.toDisplayString(t.value),1)])])]),e.createElementVNode("div",{class:"flex justify-center mt-5 space-x-2 sm:mt-6",ref_key:"buttonsContainer",ref:p},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(T.value,(d,m)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass([l.buttonClass,d.class]),onClick:e.withModifiers(O=>{s.value=!1,m===0?e.unref(c)():e.unref(f)()},["prevent"])},e.toDisplayString(d.label),11,M))),256))],512)])])])):e.createCommentVNode("",!0)])])):e.createCommentVNode("",!0)]),_:3})],64))}};r.Confirm=z,r.FormSelect=w,r.PasswordInput=g,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
1
+ (function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(p=typeof globalThis<"u"?globalThis:p||self,e(p.vxVue={},p.Vue))})(this,function(p,e){"use strict";function x(l,r){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"})])}function b(l,r){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"}),e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M15 12a3 3 0 11-6 0 3 3 0 016 0z"})])}const y=["value","type"],_=Object.assign({inheritAttrs:!1},{__name:"password-input",props:["modelValue"],emits:["update:modelValue"],setup(l,{emit:r}){const o=e.ref(!1),n=e.computed(()=>{let t=Object.assign({},e.useAttrs());return delete t.class,t});return(t,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass("inline-block relative "+e.useAttrs().class)},[e.createElementVNode("input",e.mergeProps({value:l.modelValue,type:o.value?"text":"password",onInput:d[0]||(d[0]=s=>r("update:modelValue",s.target.value))},n.value,{class:"block pr-10 w-full form-input peer"}),null,16,y),e.createElementVNode("button",{onClick:d[1]||(d[1]=e.withModifiers(s=>o.value=!o.value,["stop"])),class:"flex absolute inset-y-0 right-0 items-center pr-3 text-brand-700 hover:text-brand"},[o.value?(e.openBlock(),e.createBlock(e.unref(x),{key:0,class:"w-5 h-5"})):(e.openBlock(),e.createBlock(e.unref(b),{key:1,class:"w-5 h-5"}))]),e.renderSlot(t.$slots,"default")],2))}}),w=["value"],B={key:0,disabled:"",value:""},V=["value","selected"],g={__name:"form-select",props:{options:Array,modelValue:[String,Number],disabledLabel:String},emits:["update:modelValue"],setup(l,{emit:r}){return(o,n)=>(e.openBlock(),e.createElementBlock("select",e.mergeProps(o.$attrs,{value:l.modelValue,class:"form-select",onChange:n[0]||(n[0]=t=>r("update:modelValue",t.target.value))}),[l.disabledLabel?(e.openBlock(),e.createElementBlock("option",B,e.toDisplayString(l.disabledLabel),1)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.options,t=>(e.openBlock(),e.createElementBlock("option",{value:t.key!==void 0?t.key:t.label||t,selected:(t.key!==void 0?t.key:t.label||t)===l.modelValue},e.toDisplayString(t.label||t),9,V))),256))],16,w))}},E={key:0,class:"fixed inset-0 z-50 bg-black bg-opacity-50 backdrop-blur-sm","aria-hidden":"true"},N={key:0,class:"overflow-y-auto fixed inset-0 z-50"},C={class:"flex justify-center items-end px-4 pt-4 pb-20 min-h-screen text-center sm:block sm:p-0"},$={key:0},S=e.createElementVNode("span",{class:"hidden sm:inline-block sm:h-screen sm:align-middle","aria-hidden":"true"},"​",-1),P={class:"inline-block overflow-hidden text-left align-bottom bg-white rounded shadow-xl transition-all transform sm:my-8 sm:w-full sm:max-w-sm sm:align-middle lg:max-w-lg"},T={class:"px-4 pb-4 mt-4 sm:px-6 sm:pb-6 sm:mt-5"},M={class:"flex flex-row items-center"},A={class:"flex-shrink-0"},z={class:"flex-grow text-center"},D=["onClick"],L={__name:"confirm",props:{buttons:{type:[Object,Array],default:{label:"Ok"},validator:l=>Array.isArray(l)&&l.length<=2&&l.filter(r=>r.label!=="undefined"&&r.value!=="undefined").length===l.length||l.label!==void 0&&l.value!==void 0},headerClass:{type:String,default:"text-vxvue-alt-900 bg-vxvue-alt-400"},buttonClass:{type:String,default:"button"}},setup(l,{expose:r}){const o=l,n=e.ref(""),t=e.ref(""),d=e.ref(!1);let s=null,i=null;const c=e.computed(()=>Array.isArray(o.buttons)?o.buttons:[o.buttons]),a=e.ref(null);return r({open:(m,h)=>(n.value=m,t.value=h,d.value=!0,e.nextTick(()=>a.value.firstElementChild.focus()),new Promise((u,k)=>{s=u,i=k}))}),(m,h)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[d.value?(e.openBlock(),e.createElementBlock("div",E)):e.createCommentVNode("",!0),e.createVNode(e.Transition,{name:"appear"},{default:e.withCtx(()=>[d.value?(e.openBlock(),e.createElementBlock("div",N,[e.createElementVNode("div",C,[d.value?(e.openBlock(),e.createElementBlock("div",$,[S,e.createElementVNode("div",P,[n.value?(e.openBlock(),e.createElementBlock("h3",{key:0,class:e.normalizeClass(["py-4 pt-4 text-lg font-medium text-center sm:py-6",l.headerClass])},[e.renderSlot(m.$slots,"title",{title:n.value},()=>[e.createTextVNode(e.toDisplayString(n.value),1)])],2)):e.createCommentVNode("",!0),e.createElementVNode("div",T,[e.createElementVNode("div",M,[e.createElementVNode("div",A,[e.renderSlot(m.$slots,"icon")]),e.createElementVNode("p",z,[e.renderSlot(m.$slots,"default",{message:t.value},()=>[e.createTextVNode(e.toDisplayString(t.value),1)])])]),e.createElementVNode("div",{class:"flex justify-center mt-5 space-x-2 sm:mt-6",ref_key:"buttonsContainer",ref:a},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,(u,k)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass([l.buttonClass,u.class]),onClick:e.withModifiers(Ne=>{d.value=!1,k===0?e.unref(s)():e.unref(i)()},["prevent"])},e.toDisplayString(u.label),11,D))),256))],512)])])])):e.createCommentVNode("",!0)])])):e.createCommentVNode("",!0)]),_:3})],64))}},j=["aria-checked"],F=["checked"],O={__name:"form-switch",props:["modelValue"],emits:["update:modelValue"],setup(l,{emit:r}){const o=l,n=e.computed(()=>o.modelValue?"bg-vxvue":"bg-slate-200"),t=e.computed(()=>o.modelValue?"translate-x-5":"translate-x-0"),d=e.computed(()=>{let s=Object.assign({},e.useAttrs());return delete s.class,s});return(s,i)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("label",{class:e.normalizeClass(s.$attrs.class)},[e.createElementVNode("span",{class:e.normalizeClass([n.value,"inline-flex relative flex-shrink-0 w-11 h-6 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out cursor-pointer focus:ring-2 focus:ring-offset-2 focus:outline-none focus:ring-vxvue"]),role:"switch","aria-checked":!!l.modelValue},[e.createElementVNode("span",{"aria-hidden":"true",class:e.normalizeClass([t.value,"inline-block w-5 h-5 bg-white rounded-full ring-0 shadow transition duration-200 ease-in-out transform pointer-events-none"])},null,2),e.createElementVNode("input",e.mergeProps({class:"hidden",value:"1",type:"checkbox",onChange:i[0]||(i[0]=c=>r("update:modelValue",c.target.checked))},d.value,{checked:l.modelValue}),null,16,F)],10,j)],2),e.renderSlot(s.$slots,"default")],64))}};function I(l,r){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"fill-rule":"evenodd",d:"M7.72 12.53a.75.75 0 010-1.06l7.5-7.5a.75.75 0 111.06 1.06L9.31 12l6.97 6.97a.75.75 0 11-1.06 1.06l-7.5-7.5z","clip-rule":"evenodd"})])}function q(l,r){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"fill-rule":"evenodd",d:"M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z","clip-rule":"evenodd"})])}function R(l,r){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"fill-rule":"evenodd",d:"M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z","clip-rule":"evenodd"})])}const Be="",U={"aria-live":"assertive",class:"flex fixed inset-0 z-50 items-start py-6 px-4 pointer-events-none sm:p-6"},G={class:"flex flex-col items-center space-y-4 w-full"},H={class:"p-4"},J={class:"flex items-start"},K={class:"flex-shrink-0"},Q={class:"flex-1 pt-0.5 ml-3 w-0"},W={class:"font-bold"},X={class:"mt-1"},Y={class:"flex flex-shrink-0 ml-4"},Z=e.createElementVNode("span",{class:"sr-only"},"Close",-1),v=Object.assign({inheritAttrs:!1},{__name:"message-toast",props:{title:String,message:[String,Array],timeout:{type:Number,default:5e3},active:{type:Boolean,default:!1}},emits:["timeout","close"],setup(l,{emit:r}){const o=l,n=e.ref(null),t=e.computed(()=>typeof o.message=="string"?[o.message]:o.message),d=()=>{window.clearTimeout(n.value),o.active&&o.timeout&&(n.value=window.setTimeout(()=>{r("timeout")},o.timeout))};return e.watch(()=>o.active,d),e.onMounted(d),(s,i)=>(e.openBlock(),e.createElementBlock("div",U,[e.createElementVNode("div",G,[e.createVNode(e.Transition,{name:"messagetoast-fade"},{default:e.withCtx(()=>[l.active?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["overflow-hidden w-full max-w-sm rounded-md ring-1 ring-black ring-opacity-5 shadow-lg pointer-events-auto",s.$attrs.class])},[e.createElementVNode("div",H,[e.createElementVNode("div",J,[e.createElementVNode("div",K,[e.renderSlot(s.$slots,"icon")]),e.createElementVNode("div",Q,[e.createElementVNode("p",W,[e.renderSlot(s.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(l.title),1)])]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,c=>(e.openBlock(),e.createElementBlock("p",X,[e.renderSlot(s.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(c),1)])]))),256))]),e.createElementVNode("div",Y,[e.createElementVNode("button",{onClick:i[0]||(i[0]=c=>r("close")),class:"inline-flex text-white bg-black bg-opacity-20 rounded-sm focus:ring-2 focus:outline-none hover:text-stone-200 focus:ring-stone-200"},[Z,e.createVNode(e.unref(R),{class:"w-5 h-5"})])])])])],2)):e.createCommentVNode("",!0)]),_:3})])]))}}),ee={class:"flex justify-between items-center px-4 sm:px-0"},te={class:"flex flex-1 -mt-px w-0"},le=["onClick"],oe={class:"hidden md:flex md:-mt-px"},ne={class:"flex flex-1 justify-end -mt-px w-0"},ae=["onClick"],re={__name:"pagination",props:{page:{type:Number,default:1},total:{type:Number,default:1},perPage:{type:Number,default:20,validator(l){return l>=1}},showNavButtons:{type:Boolean,default:!0},prevText:{type:String,default:"Previous"},nextText:{type:String,default:"Next"},showAllPages:{type:Boolean,default:!1},markerPosition:{type:String,default:"above",validator(l){return["above","below"].indexOf(l)!==-1}}},emits:["update:page"],setup(l,{emit:r}){const o=l,n=e.ref(Math.ceil(o.total/o.perPage)),t=e.ref(null),d=e.computed(()=>o.markerPosition==="above"?"border-t-2 pt-4":"border-b-2 pb-4"),s=e.computed(()=>{let a=[1];if(o.showAllPages||n.value<=7){for(let f=2;f<=n.value;++f)a.push(f);return a}return t.value>=n.value?a.push("dots",t.value-2,t.value-1):t.value-1&&t.value-1>1&&(t.value>1&&a.push("dots"),a.push(t.value-1)),t.value>1&&a.push(t.value),t.value+1<n.value&&(a.push(t.value+1),t.value<=1&&a.push(t.value+2),t.value+2<this.maxPage&&a.push("dots")),t.value<this.maxPage&&a.push(this.maxPage),a}),i=()=>{t.value>1&&r("update:page",t.value-1)},c=()=>{t.value<n.value&&r("update:page",t.value+1)};return e.watch(()=>o.page,a=>t.value=Math.min(Math.max(a,1),n.value),{immediate:!0}),e.watch(()=>o.perPage,a=>{n.value=Math.ceil(o.total/o.perPage),r("update:page",1)}),e.watch(()=>o.total,a=>{n.value=Math.ceil(o.total/o.perPage),t.value>n.value&&r("update:page",1)}),(a,f)=>(e.openBlock(),e.createElementBlock("nav",ee,[e.createElementVNode("div",te,[l.showNavButtons?(e.openBlock(),e.createElementBlock("a",{key:0,onClick:e.withModifiers(i,["prevent"]),href:"#",class:e.normalizeClass(["inline-flex items-center pr-1 text-sm font-medium text-gray-500 border-transparent hover:text-gray-700 hover:border-gray-300",[{"cursor-default pointer-events-none":t.value<=1},d.value]])},[e.createVNode(e.unref(I),{class:"w-5 h-5"}),e.createTextVNode(" "+e.toDisplayString(l.prevText),1)],10,le)):e.createCommentVNode("",!0)]),e.createElementVNode("div",oe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,(m,h)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(m!=="dots"?"a":"span"),{onClick:e.withModifiers(u=>m!=="dots"?r("update:page",m):null,["prevent"]),key:h,href:m!=="dots"?"#":null,class:e.normalizeClass(["inline-flex items-center px-4 text-sm font-medium",[{"border-vxvue-500 text-vxvue-700":m===t.value,"border-transparent text-gray-500":m!==t.value,"hover:text-gray-700 hover:border-gray-300":m!=="dots"},d.value]])},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(m!=="dots"?m:"..."),1)]),_:2},1032,["onClick","href","class"]))),128))]),e.createElementVNode("div",ne,[l.showNavButtons?(e.openBlock(),e.createElementBlock("a",{key:0,onClick:e.withModifiers(c,["prevent"]),href:"#",class:e.normalizeClass(["inline-flex items-center pl-1 text-sm font-medium text-gray-500 border-transparent hover:text-gray-700 hover:border-gray-300",[d.value,{"cursor-default pointer-events-none":t.value>=n.value}]])},[e.createTextVNode(e.toDisplayString(l.nextText)+" ",1),e.createVNode(e.unref(q),{class:"w-5 h-5"})],10,ae)):e.createCommentVNode("",!0)])]))}},Ve="",se=(l,r)=>{const o=l.__vccOpts||l;for(const[n,t]of r)o[n]=t;return o},ce={class:"overflow-hidden rounded ring-1 ring-opacity-10 shadow ring-slate-500"},ie={class:"min-w-full divide-y divide-y-slate-900"},de={class:"text-white bg-slate-700"},me=["onClick"],pe={class:"flex items-center"},fe={key:0,xmlns:"http://www.w3.org/2000/svg",class:"flex-shrink-0 ml-2 w-4 h-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"},ue=["d"],he={key:1,"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M8 9l4-4 4 4m0 6l-4 4-4-4"},ke=se({__name:"sortable",props:{columns:{type:Array,required:!0,validator:l=>{for(const r of l)if(r.label===void 0||r.prop===void 0)return!1;return!0}},rows:{type:Array,required:!0},offset:{type:Number,default:null},count:{type:Number,default:null},sortProp:{type:String},sortDirection:{type:String,validator:l=>!l||["asc","desc"].indexOf(l)!==-1},keyProperty:{type:String,default:"key"}},emits:["before-sort","after-sort"],setup(l,{emit:r}){const o=l,n=e.ref(o.sortProp),t=e.ref(o.sortDirection),d=e.computed(()=>{let i=o.rows.slice();const c=o.columns.find(({prop:a})=>a===n.value);return c&&(t.value==="asc"&&c.sortAscFunction?i.sort(c.sortAscFunction):t.value==="desc"&&c.sortDescFunction?i.sort(c.sortDescFunction):i.sort((a,f)=>a[n.value]<f[n.value]?t.value==="asc"?-1:1:a[n.value]>f[n.value]?t.value==="asc"?1:-1:0)),i.slice(o.offset||0,(o.offset||0)+(o.count||i.length))}),s=i=>{r("before-sort",{prop:n.value,dir:t.value}),n.value===i?t.value=t.value==="asc"?"desc":"asc":(n.value=i,t.value=t.value||"asc"),e.nextTick(()=>r("after-sort",{prop:n.value,dir:t.value}))};return(i,c)=>(e.openBlock(),e.createElementBlock("div",ce,[e.createElementVNode("table",ie,[e.createElementVNode("thead",de,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.columns,a=>(e.openBlock(),e.createElementBlock("th",{scope:"col",class:e.normalizeClass(["py-3 px-6 text-left",[{"cursor-pointer":a.sortable,active:n.value===a.prop},a.cssClass]]),onClick:f=>a.sortable?s(a.prop):null},[e.renderSlot(i.$slots,a.prop+"-header",{column:a,sortDir:t.value,sortProp:n.value},()=>[e.createElementVNode("div",pe,[e.createElementVNode("span",null,e.toDisplayString(a.label),1),a.sortable?(e.openBlock(),e.createElementBlock("svg",fe,[n.value===a.prop?(e.openBlock(),e.createElementBlock("path",{key:0,"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:t.value==="asc"?"M19 9l-7 7-7-7":"M5 15l7-7 7 7"},null,8,ue)):(e.openBlock(),e.createElementBlock("path",he))])):e.createCommentVNode("",!0)])],!0)],10,me))),256))])]),e.createElementVNode("tbody",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,a=>(e.openBlock(),e.createElementBlock("tr",{key:a[l.keyProperty],class:e.normalizeClass(a.cssClass)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.columns,f=>(e.openBlock(),e.createElementBlock("td",{class:e.normalizeClass(["py-3 px-6 whitespace-nowrap",{active:n.value===f.prop}])},[e.renderSlot(i.$slots,f.prop,{row:a},()=>[e.createTextVNode(e.toDisplayString(a[f.prop]),1)],!0)],2))),256))],2))),128))])])]))}},[["__scopeId","data-v-c18eb3d8"]]),ge={class:"sm:hidden"},xe={class:"hidden sm:block"},be={class:"border-b border-gray-200"},ye={class:"flex -mb-px space-x-8","aria-label":"Tabs"},_e=["onClick","aria-current"],we={__name:"tabs",props:{items:{type:Array,default:[]},activeIndex:{type:Number,default:0}},emits:["update:active-index"],setup(l,{emit:r}){const o=l,n=e.ref(o.items[o.activeIndex]||{}),t=e.computed(()=>{let s=[];return o.items.forEach((i,c)=>{i.disabled||s.push({label:i.name,key:c})}),s});e.watch(()=>o.activeIndex,s=>{n.value=o.items[s]||{}});const d=s=>{s.disabled||(n.value=s,r("update:active-index",o.items.indexOf(s)))};return(s,i)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",ge,[e.createVNode(g,{options:t.value,"model-value":l.activeIndex,"onUpdate:modelValue":i[0]||(i[0]=c=>r("update:activeIndex",c)),class:"w-full"},null,8,["options","model-value"])]),e.createElementVNode("div",xe,[e.createElementVNode("div",be,[e.createElementVNode("nav",ye,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.items,c=>(e.openBlock(),e.createElementBlock("a",{key:c.name,href:"#",onClick:e.withModifiers(a=>d(c),["prevent"]),class:e.normalizeClass([n.value===c?"border-vxvue-500 text-vxvue-600":"border-transparent text-gray-900 hover:text-gray-700 hover:border-gray-300",c.disabled?"cursor-not-allowed text-gray-400 hover:border-transparent":"","group inline-flex items-center py-4 px-1 border-b-4 font-medium"]),"aria-current":n.value===c?"page":void 0},[e.renderSlot(s.$slots,"icon",{tab:c}),e.createElementVNode("span",null,[e.renderSlot(s.$slots,"default",{tab:c},()=>[e.createTextVNode(e.toDisplayString(c.name),1)])]),c.badge?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass([n.value===c?"bg-vxvue-50 text-vxvue-700":"bg-gray-200 text-gray-900",c.disabled?"bg-gray-100 text-gray-400":"","hidden ml-3 py-0.5 px-2.5 rounded-full text-xs font-medium md:inline-block"])},e.toDisplayString(c.badge),3)):e.createCommentVNode("",!0)],10,_e))),128))])])])],64))}};p.Confirm=L,p.FormSelect=g,p.FormSwitch=O,p.MessageToast=v,p.Pagination=re,p.PasswordInput=_,p.Sortable=ke,p.Tabs=we,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -9,7 +9,7 @@
9
9
  "require": "./dist/vxvue.umd.js"
10
10
  }
11
11
  },
12
- "version": "0.0.1",
12
+ "version": "0.1.0",
13
13
  "scripts": {
14
14
  "dev": "vite",
15
15
  "build": "vite build",