@agrotools1/at-components 0.5.0-4 → 0.5.0-6
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/dist/Checkbox/Checkbox.vue.js +1 -1
- package/dist/DataTable/DataTable.d.ts +10 -0
- package/dist/DataTable/DataTable.vue.js +56 -50
- package/dist/DataTable/DataTable.vue2.js +31 -26
- package/dist/DataTable/index.d.ts +10 -0
- package/dist/Dropdown/Dropdown.core.d.ts +24 -0
- package/dist/Dropdown/Dropdown.core.vue.js +22 -19
- package/dist/Dropdown/Dropdown.core.vue2.js +48 -23
- package/dist/Dropdown/Dropdown.types.d.ts +2 -0
- package/dist/Filter/components/Filter.types.d.ts +1 -0
- package/dist/Filter/components/Filter.vue.js +64 -62
- package/dist/Filter/components/Filter.vue2.js +57 -52
- package/dist/Input/Input.core.d.ts +9 -0
- package/dist/Input/Input.core.vue.js +25 -19
- package/dist/Input/Input.core.vue2.js +9 -5
- package/dist/Input/index.d.ts +9 -0
- package/dist/List/components/List.d.ts +18 -0
- package/dist/List/components/List.types.d.ts +2 -0
- package/dist/List/components/List.vue.js +33 -30
- package/dist/List/components/List.vue2.js +20 -12
- package/dist/Search/Search.d.ts +15 -7
- package/dist/Search/Search.vue.js +36 -25
- package/dist/Search/Search.vue2.js +17 -13
- package/dist/Select/Multiple/Select.multiple.d.ts +11 -0
- package/dist/Select/Multiple/Select.multiple.vue.js +10 -9
- package/dist/Select/Multiple/Select.multiple.vue2.js +7 -2
- package/dist/Select/Select.core.d.ts +11 -0
- package/dist/Select/Select.core.vue.js +8 -7
- package/dist/Select/Select.core.vue2.js +8 -3
- package/dist/Select/Single/Select.single.d.ts +11 -0
- package/dist/Select/Single/Select.single.vue.js +13 -12
- package/dist/Select/Single/Select.single.vue2.js +14 -9
- package/dist/Select/index.d.ts +22 -0
- package/dist/Stepper/Stepper.vue.js +10 -10
- package/dist/TableConfig/TableConfig.d.ts +9 -0
- package/dist/TableConfig/TableConfig.vue.js +7 -6
- package/dist/TableConfig/TableConfig.vue2.js +10 -6
- package/dist/Tabs/Tabs.d.ts +11 -0
- package/dist/Tabs/Tabs.vue.js +22 -18
- package/dist/Tabs/Tabs.vue2.js +23 -15
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -32,7 +32,7 @@ function m(e, p, b, k, f, y) {
|
|
|
32
32
|
}, null, 12, u)
|
|
33
33
|
], 64);
|
|
34
34
|
}
|
|
35
|
-
const $ = /* @__PURE__ */ n(r, [["render", m], ["__scopeId", "data-v-
|
|
35
|
+
const $ = /* @__PURE__ */ n(r, [["render", m], ["__scopeId", "data-v-939d784f"]]);
|
|
36
36
|
export {
|
|
37
37
|
$ as default
|
|
38
38
|
};
|
|
@@ -40,7 +40,12 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
40
40
|
type: PropType<"center" | "left" | "right">;
|
|
41
41
|
default: string;
|
|
42
42
|
};
|
|
43
|
+
isLoading: {
|
|
44
|
+
type: PropType<boolean>;
|
|
45
|
+
default: boolean;
|
|
46
|
+
};
|
|
43
47
|
}, {
|
|
48
|
+
reactiveIsLoading: import("vue").ComputedRef<boolean>;
|
|
44
49
|
tableData: import("vue").Ref<{
|
|
45
50
|
[key: string]: unknown;
|
|
46
51
|
}[]>;
|
|
@@ -104,6 +109,10 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
104
109
|
type: PropType<"center" | "left" | "right">;
|
|
105
110
|
default: string;
|
|
106
111
|
};
|
|
112
|
+
isLoading: {
|
|
113
|
+
type: PropType<boolean>;
|
|
114
|
+
default: boolean;
|
|
115
|
+
};
|
|
107
116
|
}>> & {
|
|
108
117
|
"onUpdate:selected-items"?: ((items: any[]) => any) | undefined;
|
|
109
118
|
"onUpdate:table-data"?: ((data: TableData) => any) | undefined;
|
|
@@ -123,5 +132,6 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
123
132
|
} | undefined;
|
|
124
133
|
keyExtractor: (item: any) => string;
|
|
125
134
|
columnsClasses: string[];
|
|
135
|
+
isLoading: boolean;
|
|
126
136
|
}, {}>;
|
|
127
137
|
export default _default;
|
|
@@ -1,95 +1,101 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { resolveComponent as
|
|
1
|
+
import C from "./DataTable.vue2.js";
|
|
2
|
+
import { resolveComponent as i, openBlock as a, createElementBlock as o, Fragment as n, createElementVNode as s, mergeProps as P, createBlock as r, createCommentVNode as p, renderSlot as S, renderList as h, normalizeClass as u, withKeys as A, toDisplayString as g, resolveDynamicComponent as b, createVNode as x, pushScopeId as $, popScopeId as T, createStaticVNode as D } from "vue";
|
|
3
3
|
import "./DataTable.vue3.js";
|
|
4
4
|
import E from "../_virtual/_plugin-vue_export-helper.js";
|
|
5
|
-
const
|
|
5
|
+
const w = (e) => ($("data-v-0da2b2f6"), e = e(), T(), e), I = ["data-align-columns"], K = { role: "rowgroup" }, z = {
|
|
6
6
|
role: "row",
|
|
7
7
|
class: "thead-row"
|
|
8
|
-
},
|
|
8
|
+
}, N = {
|
|
9
9
|
key: 1,
|
|
10
10
|
role: "rowgroup"
|
|
11
|
-
},
|
|
11
|
+
}, V = /* @__PURE__ */ w(() => /* @__PURE__ */ s("tr", { class: "empty-space" }, null, -1)), B = ["onmouseenter"], F = ["data-key", "onClick"], U = { class: "td-container" }, L = ["id", "value", "onKeydown"], j = { key: 1 }, H = {
|
|
12
12
|
key: 2,
|
|
13
13
|
class: "item-as-array"
|
|
14
|
-
}, O = { key: 0 }, q = /* @__PURE__ */
|
|
14
|
+
}, O = { key: 0 }, q = /* @__PURE__ */ w(() => /* @__PURE__ */ s("tr", { class: "empty-space" }, null, -1)), G = {
|
|
15
15
|
key: 0,
|
|
16
|
+
class: "d-flex flex-column gap-2 w-100"
|
|
17
|
+
}, J = /* @__PURE__ */ D('<div class="d-flex flex-row gap-2 w-100" data-v-0da2b2f6><div class="card-body placeholder-glow" data-v-0da2b2f6><span class="placeholder col-12 rounded" style="height:40px;" data-v-0da2b2f6></span></div><div class="card-body placeholder-glow" data-v-0da2b2f6><span class="placeholder col-12 rounded" style="height:40px;" data-v-0da2b2f6></span></div><div class="card-body placeholder-glow" data-v-0da2b2f6><span class="placeholder col-12 rounded" style="height:40px;" data-v-0da2b2f6></span></div></div><div class="d-flex flex-row gap-2 w-100" data-v-0da2b2f6><div class="card-body placeholder-glow" data-v-0da2b2f6><span class="placeholder col-12 rounded" style="height:40px;" data-v-0da2b2f6></span></div><div class="card-body placeholder-glow" data-v-0da2b2f6><span class="placeholder col-12 rounded" style="height:40px;" data-v-0da2b2f6></span></div><div class="card-body placeholder-glow" data-v-0da2b2f6><span class="placeholder col-12 rounded" style="height:40px;" data-v-0da2b2f6></span></div></div><div class="d-flex flex-row gap-2 w-100" data-v-0da2b2f6><div class="card-body placeholder-glow" data-v-0da2b2f6><span class="placeholder col-12 rounded" style="height:40px;" data-v-0da2b2f6></span></div><div class="card-body placeholder-glow" data-v-0da2b2f6><span class="placeholder col-12 rounded" style="height:40px;" data-v-0da2b2f6></span></div><div class="card-body placeholder-glow" data-v-0da2b2f6><span class="placeholder col-12 rounded" style="height:40px;" data-v-0da2b2f6></span></div></div>', 3), M = [
|
|
18
|
+
J
|
|
19
|
+
], Q = {
|
|
20
|
+
key: 1,
|
|
16
21
|
style: { display: "flex", "justify-content": "flex-end", "margin-top": "16px" }
|
|
17
22
|
};
|
|
18
|
-
function
|
|
19
|
-
var
|
|
20
|
-
const
|
|
21
|
-
return
|
|
22
|
-
|
|
23
|
+
function R(e, W, X, Y, Z, ee) {
|
|
24
|
+
var v;
|
|
25
|
+
const m = i("AtColumn"), _ = i("AtText"), k = i("AtPaginator");
|
|
26
|
+
return a(), o(n, null, [
|
|
27
|
+
s("table", P(e.$attrs, {
|
|
23
28
|
role: "table",
|
|
24
29
|
class: "table-content",
|
|
25
30
|
"data-align-columns": e.alignColumns
|
|
26
31
|
}), [
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
e.withSelection ? (
|
|
32
|
+
s("thead", K, [
|
|
33
|
+
s("tr", z, [
|
|
34
|
+
e.withSelection ? (a(), r(m, {
|
|
30
35
|
key: 0,
|
|
31
36
|
field: "selection",
|
|
32
37
|
label: "Selecione"
|
|
33
|
-
})) :
|
|
34
|
-
|
|
38
|
+
})) : p("", !0),
|
|
39
|
+
S(e.$slots, "default", {}, void 0, !0)
|
|
35
40
|
])
|
|
36
41
|
]),
|
|
37
|
-
!e.value || !e.value.length ? (
|
|
42
|
+
!e.value || !e.value.length ? (a(), r(_, {
|
|
38
43
|
key: 0,
|
|
39
44
|
as: "h6"
|
|
40
|
-
})) : (
|
|
41
|
-
|
|
42
|
-
(
|
|
43
|
-
key: e.extractKey(
|
|
44
|
-
class:
|
|
45
|
+
})) : (a(), o("tbody", N, [
|
|
46
|
+
V,
|
|
47
|
+
(a(!0), o(n, null, h(e.activeTableData, (c) => (a(), o("tr", {
|
|
48
|
+
key: e.extractKey(c),
|
|
49
|
+
class: u([...e.columnsClasses, "tbody-tr"]),
|
|
45
50
|
role: "row",
|
|
46
51
|
tabindex: "-1",
|
|
47
|
-
onmouseenter: (
|
|
52
|
+
onmouseenter: (d) => {
|
|
48
53
|
e.lastHoveredTr = {
|
|
49
|
-
element:
|
|
50
|
-
item:
|
|
54
|
+
element: d.target,
|
|
55
|
+
item: c
|
|
51
56
|
};
|
|
52
57
|
}
|
|
53
58
|
}, [
|
|
54
|
-
(
|
|
55
|
-
var
|
|
56
|
-
return
|
|
57
|
-
key:
|
|
58
|
-
"data-key":
|
|
59
|
+
(a(!0), o(n, null, h(e.getEntries(c), ([d, l]) => {
|
|
60
|
+
var f, y;
|
|
61
|
+
return a(), o("td", {
|
|
62
|
+
key: d,
|
|
63
|
+
"data-key": d,
|
|
59
64
|
role: "cell",
|
|
60
|
-
class:
|
|
65
|
+
class: u(`tbody-row ${(f = e.withEditableFields) != null && f.includes(d) ? "with-focus" : ""} `),
|
|
61
66
|
"aria-selected": "false",
|
|
62
|
-
onClick: (
|
|
67
|
+
onClick: (t) => e.handleTrClick(t, d)
|
|
63
68
|
}, [
|
|
64
|
-
|
|
65
|
-
(y = e.withEditableFields) != null && y.includes(
|
|
69
|
+
s("div", U, [
|
|
70
|
+
(y = e.withEditableFields) != null && y.includes(d) ? (a(), o("input", {
|
|
66
71
|
key: 0,
|
|
67
|
-
id:
|
|
72
|
+
id: d,
|
|
68
73
|
placeholder: "",
|
|
69
|
-
value:
|
|
70
|
-
onKeydown:
|
|
71
|
-
}, null, 40,
|
|
72
|
-
(
|
|
73
|
-
typeof
|
|
74
|
+
value: l,
|
|
75
|
+
onKeydown: A((t) => e.updateOnKeyDown(t, d), ["enter"])
|
|
76
|
+
}, null, 40, L)) : typeof l == "number" || typeof l == "string" ? (a(), o("span", j, g(l), 1)) : Array.isArray(l) ? (a(), o("div", H, [
|
|
77
|
+
(a(!0), o(n, null, h(l, (t) => (a(), o("div", { key: t }, [
|
|
78
|
+
typeof t == "number" || typeof t == "string" ? (a(), o("span", O, g(t), 1)) : (a(), r(b(typeof t == "function" ? t() : t), { key: 1 }))
|
|
74
79
|
]))), 128))
|
|
75
|
-
])) : (
|
|
80
|
+
])) : (a(), r(b(typeof l == "function" ? l() : l), { key: 3 }))
|
|
76
81
|
])
|
|
77
|
-
], 10,
|
|
82
|
+
], 10, F);
|
|
78
83
|
}), 128))
|
|
79
|
-
], 10,
|
|
84
|
+
], 10, B))), 128)),
|
|
80
85
|
q
|
|
81
86
|
]))
|
|
82
|
-
], 16,
|
|
83
|
-
e.
|
|
84
|
-
|
|
87
|
+
], 16, I),
|
|
88
|
+
e.reactiveIsLoading ? (a(), o("div", G, M)) : p("", !0),
|
|
89
|
+
e.withPaginator ? (a(), o("div", Q, [
|
|
90
|
+
x(k, {
|
|
85
91
|
"page-size": e.withPaginator.pageSize,
|
|
86
92
|
total: e.withPaginator.total,
|
|
87
|
-
"onUpdate:activePage": (
|
|
93
|
+
"onUpdate:activePage": (v = e.withPaginator) == null ? void 0 : v.onUpdatePage
|
|
88
94
|
}, null, 8, ["page-size", "total", "onUpdate:activePage"])
|
|
89
|
-
])) :
|
|
95
|
+
])) : p("", !0)
|
|
90
96
|
], 64);
|
|
91
97
|
}
|
|
92
|
-
const
|
|
98
|
+
const le = /* @__PURE__ */ E(C, [["render", R], ["__scopeId", "data-v-0da2b2f6"]]);
|
|
93
99
|
export {
|
|
94
|
-
|
|
100
|
+
le as default
|
|
95
101
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { defineComponent as T, ref as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import { defineComponent as T, ref as d, reactive as k, provide as h, readonly as K, inject as j, watch as E, onMounted as x, watchEffect as b, h as O, computed as q } from "vue";
|
|
2
|
+
import F from "../Checkbox/Checkbox.vue.js";
|
|
3
|
+
import L from "../Paginator/Paginator.vue.js";
|
|
4
4
|
import { AtTipograph as P } from "../Tipograph/index.js";
|
|
5
5
|
import V from "./Column/Column.vue.js";
|
|
6
6
|
const H = T({
|
|
@@ -8,7 +8,7 @@ const H = T({
|
|
|
8
8
|
components: {
|
|
9
9
|
AtText: P.Title,
|
|
10
10
|
AtColumn: V,
|
|
11
|
-
AtPaginator:
|
|
11
|
+
AtPaginator: L
|
|
12
12
|
},
|
|
13
13
|
inheritAttrs: !1,
|
|
14
14
|
props: {
|
|
@@ -45,6 +45,10 @@ const H = T({
|
|
|
45
45
|
alignColumns: {
|
|
46
46
|
type: String,
|
|
47
47
|
default: "left"
|
|
48
|
+
},
|
|
49
|
+
isLoading: {
|
|
50
|
+
type: Boolean,
|
|
51
|
+
default: !1
|
|
48
52
|
}
|
|
49
53
|
},
|
|
50
54
|
emits: {
|
|
@@ -52,26 +56,26 @@ const H = T({
|
|
|
52
56
|
"update:table-data": (e) => Array.isArray(e),
|
|
53
57
|
"update:table-cell": (e) => typeof e == "object"
|
|
54
58
|
},
|
|
55
|
-
setup(e,
|
|
56
|
-
const u =
|
|
59
|
+
setup(e, m) {
|
|
60
|
+
const u = d(e.value), p = d([...u.value]), f = d([]), c = d(
|
|
57
61
|
null
|
|
58
|
-
),
|
|
59
|
-
|
|
62
|
+
), r = k([]), y = (t) => {
|
|
63
|
+
r.includes(t) || r.push(t);
|
|
60
64
|
};
|
|
61
65
|
h("columns", {
|
|
62
|
-
columns: K(
|
|
66
|
+
columns: K(r),
|
|
63
67
|
updateColumn: y
|
|
64
68
|
}), h("alignColumns", e.alignColumns), h("tableData", u);
|
|
65
69
|
const w = j("columns", {
|
|
66
|
-
columns:
|
|
70
|
+
columns: r,
|
|
67
71
|
updateColumn: y
|
|
68
|
-
}),
|
|
72
|
+
}), g = (t) => Object.entries(t), s = (t) => {
|
|
69
73
|
try {
|
|
70
74
|
return e.keyExtractor(t);
|
|
71
75
|
} catch (a) {
|
|
72
76
|
console.warn("AtDataTable: Não foi possível extrair a key: ", a);
|
|
73
77
|
}
|
|
74
|
-
},
|
|
78
|
+
}, C = (t, a) => {
|
|
75
79
|
var l;
|
|
76
80
|
const o = t.target;
|
|
77
81
|
if ((l = e.withEditableFields) != null && l.includes(a)) {
|
|
@@ -81,23 +85,23 @@ const H = T({
|
|
|
81
85
|
}, v = (t) => {
|
|
82
86
|
f.value = t;
|
|
83
87
|
const a = [...e.value].filter((o) => {
|
|
84
|
-
const l =
|
|
88
|
+
const l = s(o);
|
|
85
89
|
return [...f.value].includes(l);
|
|
86
90
|
});
|
|
87
91
|
if (c.value) {
|
|
88
92
|
const { element: o, item: l } = c.value, n = a.find(
|
|
89
|
-
(i) =>
|
|
93
|
+
(i) => s(i) === s(l)
|
|
90
94
|
);
|
|
91
95
|
o.setAttribute("aria-selected", JSON.stringify(!!n));
|
|
92
96
|
}
|
|
93
|
-
|
|
94
|
-
},
|
|
97
|
+
m.emit("update:selected-items", Array.from(a));
|
|
98
|
+
}, S = (t, a) => {
|
|
95
99
|
var i;
|
|
96
100
|
const o = t.target, { value: l } = o, n = (i = c.value) == null ? void 0 : i.item;
|
|
97
101
|
n && (n[a] = l, u.value = u.value.map((A) => {
|
|
98
|
-
const D =
|
|
102
|
+
const D = s(A), I = s(n);
|
|
99
103
|
return D === I ? n : A;
|
|
100
|
-
}),
|
|
104
|
+
}), m.emit("update:table-data", u.value), m.emit("update:table-cell", {
|
|
101
105
|
field: a,
|
|
102
106
|
value: l
|
|
103
107
|
}));
|
|
@@ -111,15 +115,15 @@ const H = T({
|
|
|
111
115
|
e.withDefaultSelectedItems && v([...e.withDefaultSelectedItems]);
|
|
112
116
|
}), b(() => {
|
|
113
117
|
e.withSelection ? u.value = [...e.value].map((t) => ({
|
|
114
|
-
selection: () => O(
|
|
118
|
+
selection: () => O(F, {
|
|
115
119
|
modelValue: f.value,
|
|
116
120
|
"onUpdate:modelValue": (a) => v(a),
|
|
117
|
-
val:
|
|
121
|
+
val: s(t)
|
|
118
122
|
}),
|
|
119
123
|
...t
|
|
120
124
|
})) : u.value = [...e.value];
|
|
121
125
|
}), b(() => {
|
|
122
|
-
const t = [...
|
|
126
|
+
const t = [...r], a = [...u.value].map((o) => {
|
|
123
127
|
const l = {}, n = Object.keys({ ...o });
|
|
124
128
|
for (const i of t)
|
|
125
129
|
n.includes(i) && (l[i] = o[i]);
|
|
@@ -127,17 +131,18 @@ const H = T({
|
|
|
127
131
|
});
|
|
128
132
|
p.value = a;
|
|
129
133
|
}), {
|
|
134
|
+
reactiveIsLoading: q(() => e.isLoading),
|
|
130
135
|
tableData: u,
|
|
131
136
|
activeTableData: p,
|
|
132
137
|
columns: w.columns,
|
|
133
138
|
updateColumn: w.updateColumn,
|
|
134
139
|
internalUpdateColumn: y,
|
|
135
|
-
internalColumns:
|
|
140
|
+
internalColumns: r,
|
|
136
141
|
lastHoveredTr: c,
|
|
137
|
-
getEntries:
|
|
138
|
-
extractKey:
|
|
139
|
-
updateOnKeyDown:
|
|
140
|
-
handleTrClick:
|
|
142
|
+
getEntries: g,
|
|
143
|
+
extractKey: s,
|
|
144
|
+
updateOnKeyDown: S,
|
|
145
|
+
handleTrClick: C
|
|
141
146
|
};
|
|
142
147
|
}
|
|
143
148
|
});
|
|
@@ -39,7 +39,12 @@ export declare const AtDataTable: {
|
|
|
39
39
|
type: import("vue").PropType<"center" | "left" | "right">;
|
|
40
40
|
default: string;
|
|
41
41
|
};
|
|
42
|
+
isLoading: {
|
|
43
|
+
type: import("vue").PropType<boolean>;
|
|
44
|
+
default: boolean;
|
|
45
|
+
};
|
|
42
46
|
}, {
|
|
47
|
+
reactiveIsLoading: import("vue").ComputedRef<boolean>;
|
|
43
48
|
tableData: import("vue").Ref<{
|
|
44
49
|
[key: string]: unknown;
|
|
45
50
|
}[]>;
|
|
@@ -107,6 +112,10 @@ export declare const AtDataTable: {
|
|
|
107
112
|
type: import("vue").PropType<"center" | "left" | "right">;
|
|
108
113
|
default: string;
|
|
109
114
|
};
|
|
115
|
+
isLoading: {
|
|
116
|
+
type: import("vue").PropType<boolean>;
|
|
117
|
+
default: boolean;
|
|
118
|
+
};
|
|
110
119
|
}>> & {
|
|
111
120
|
"onUpdate:selected-items"?: ((items: any[]) => any) | undefined;
|
|
112
121
|
"onUpdate:table-data"?: ((data: {
|
|
@@ -128,6 +137,7 @@ export declare const AtDataTable: {
|
|
|
128
137
|
} | undefined;
|
|
129
138
|
keyExtractor: (item: any) => string;
|
|
130
139
|
columnsClasses: string[];
|
|
140
|
+
isLoading: boolean;
|
|
131
141
|
}, {}>;
|
|
132
142
|
Column: import("vue").DefineComponent<{
|
|
133
143
|
field: {
|
|
@@ -8,11 +8,25 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
8
8
|
type: PropType<"left" | "right">;
|
|
9
9
|
default: string;
|
|
10
10
|
};
|
|
11
|
+
fullSize: {
|
|
12
|
+
type: PropType<boolean | undefined>;
|
|
13
|
+
default: boolean;
|
|
14
|
+
};
|
|
15
|
+
id: {
|
|
16
|
+
type: PropType<string | undefined>;
|
|
17
|
+
default: string;
|
|
18
|
+
};
|
|
11
19
|
}, {
|
|
12
20
|
dialogIsOpen: import("vue").Ref<boolean>;
|
|
13
21
|
getDialogClass: import("vue").ComputedRef<string[]>;
|
|
14
22
|
dialogElem: import("vue").Ref<HTMLDivElement | null>;
|
|
15
23
|
triggerElem: import("vue").Ref<HTMLDivElement | null>;
|
|
24
|
+
getStyle: import("vue").ComputedRef<{
|
|
25
|
+
top: string;
|
|
26
|
+
left?: string | undefined;
|
|
27
|
+
right?: string | undefined;
|
|
28
|
+
width?: string | undefined;
|
|
29
|
+
}>;
|
|
16
30
|
toggleDialog: () => void;
|
|
17
31
|
openDialog: () => Promise<void>;
|
|
18
32
|
closeDialog: () => Promise<void>;
|
|
@@ -25,10 +39,20 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
25
39
|
type: PropType<"left" | "right">;
|
|
26
40
|
default: string;
|
|
27
41
|
};
|
|
42
|
+
fullSize: {
|
|
43
|
+
type: PropType<boolean | undefined>;
|
|
44
|
+
default: boolean;
|
|
45
|
+
};
|
|
46
|
+
id: {
|
|
47
|
+
type: PropType<string | undefined>;
|
|
48
|
+
default: string;
|
|
49
|
+
};
|
|
28
50
|
}>> & {
|
|
29
51
|
"onUpdate:isOpen"?: ((...args: any[]) => any) | undefined;
|
|
30
52
|
}, {
|
|
31
53
|
isOpen: boolean;
|
|
54
|
+
id: string | undefined;
|
|
32
55
|
position: "left" | "right";
|
|
56
|
+
fullSize: boolean | undefined;
|
|
33
57
|
}, {}>;
|
|
34
58
|
export default _default;
|
|
@@ -1,32 +1,35 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { openBlock as
|
|
1
|
+
import a from "./Dropdown.core.vue2.js";
|
|
2
|
+
import { openBlock as o, createElementBlock as r, createElementVNode as i, normalizeClass as l, renderSlot as s, createCommentVNode as d, createBlock as g, Teleport as m, normalizeStyle as p } from "vue";
|
|
3
3
|
import "./Dropdown.core.vue3.js";
|
|
4
|
-
import
|
|
5
|
-
const
|
|
6
|
-
function
|
|
7
|
-
return
|
|
4
|
+
import c from "../_virtual/_plugin-vue_export-helper.js";
|
|
5
|
+
const f = { class: "container-dialog" }, u = ["id"];
|
|
6
|
+
function $(e, t, k, v, y, C) {
|
|
7
|
+
return o(), r("section", f, [
|
|
8
8
|
i("div", {
|
|
9
|
-
class:
|
|
9
|
+
class: l(e.getDialogClass)
|
|
10
10
|
}, [
|
|
11
|
-
e.$slots.trigger ? (
|
|
11
|
+
e.$slots.trigger ? (o(), r("section", {
|
|
12
12
|
key: 0,
|
|
13
13
|
id: "trigger",
|
|
14
14
|
ref: "triggerElem",
|
|
15
|
-
onClick:
|
|
15
|
+
onClick: t[0] || (t[0] = (...n) => e.toggleDialog && e.toggleDialog(...n))
|
|
16
16
|
}, [
|
|
17
|
-
|
|
17
|
+
s(e.$slots, "trigger", {}, void 0, !0)
|
|
18
18
|
], 512)) : d("", !0),
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
19
|
+
(o(), g(m, { to: "body" }, [
|
|
20
|
+
i("div", {
|
|
21
|
+
id: e.id,
|
|
22
|
+
ref: "dialogElem",
|
|
23
|
+
class: l([{ isOpen: e.dialogIsOpen }, "dialog-content"]),
|
|
24
|
+
style: p(e.getStyle)
|
|
25
|
+
}, [
|
|
26
|
+
s(e.$slots, "default", {}, void 0, !0)
|
|
27
|
+
], 14, u)
|
|
28
|
+
]))
|
|
26
29
|
], 2)
|
|
27
30
|
]);
|
|
28
31
|
}
|
|
29
|
-
const
|
|
32
|
+
const _ = /* @__PURE__ */ c(a, [["render", $], ["__scopeId", "data-v-7c481c95"]]);
|
|
30
33
|
export {
|
|
31
|
-
|
|
34
|
+
_ as default
|
|
32
35
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
const
|
|
1
|
+
import { defineComponent as D, ref as s, watch as O, computed as h, onMounted as x } from "vue";
|
|
2
|
+
const W = D({
|
|
3
3
|
name: "AtDropdown",
|
|
4
4
|
props: {
|
|
5
5
|
isOpen: {
|
|
@@ -9,37 +9,62 @@ const D = v({
|
|
|
9
9
|
position: {
|
|
10
10
|
type: String,
|
|
11
11
|
default: "left"
|
|
12
|
+
},
|
|
13
|
+
fullSize: {
|
|
14
|
+
type: Boolean,
|
|
15
|
+
default: !1
|
|
16
|
+
},
|
|
17
|
+
id: {
|
|
18
|
+
type: String,
|
|
19
|
+
default: ""
|
|
12
20
|
}
|
|
13
21
|
},
|
|
14
22
|
emits: ["update:isOpen"],
|
|
15
|
-
setup(
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
+
setup(n, { emit: u }) {
|
|
24
|
+
const o = s(!1);
|
|
25
|
+
o.value = n.isOpen;
|
|
26
|
+
const a = s(null), l = s(null);
|
|
27
|
+
O(
|
|
28
|
+
() => n.isOpen,
|
|
29
|
+
(t) => o.value = t
|
|
30
|
+
);
|
|
31
|
+
const w = async () => u("update:isOpen", !0), d = async () => {
|
|
32
|
+
u("update:isOpen", !1);
|
|
33
|
+
}, m = (t) => {
|
|
34
|
+
var e, c;
|
|
35
|
+
o.value && !((e = a == null ? void 0 : a.value) != null && e.contains(t.target)) && !((c = l.value) != null && c.contains(t.target)) && d();
|
|
36
|
+
}, i = s();
|
|
37
|
+
O(
|
|
38
|
+
() => n.isOpen,
|
|
39
|
+
(t) => {
|
|
40
|
+
var e;
|
|
41
|
+
t && (i.value = (e = l.value) == null ? void 0 : e.getBoundingClientRect());
|
|
42
|
+
}
|
|
43
|
+
);
|
|
44
|
+
const y = () => u("update:isOpen", !o.value), S = h(() => {
|
|
45
|
+
var g, r, p, f, v;
|
|
46
|
+
const t = ((g = l.value) == null ? void 0 : g.clientWidth) ?? 0, e = {
|
|
47
|
+
top: `${window.scrollY + (((r = i.value) == null ? void 0 : r.bottom) ?? 0) + 5}px`
|
|
48
|
+
}, C = (window.innerWidth - (((p = i.value) == null ? void 0 : p.right) ?? 0) <= t ? "right" : n.position) === "left" || n.fullSize ? (f = i.value) == null ? void 0 : f.left : window.innerWidth - (((v = i.value) == null ? void 0 : v.right) ?? 0);
|
|
49
|
+
return e[n.position] = `${C}px`, n.fullSize && (e.width = `${t}px`), e;
|
|
50
|
+
});
|
|
51
|
+
x(() => {
|
|
23
52
|
var t;
|
|
24
|
-
document.addEventListener("click",
|
|
53
|
+
document.addEventListener("click", m), i.value = (t = l.value) == null ? void 0 : t.getBoundingClientRect();
|
|
25
54
|
});
|
|
26
|
-
const
|
|
55
|
+
const B = h(() => ["dialog"]);
|
|
27
56
|
return {
|
|
28
|
-
dialogIsOpen:
|
|
29
|
-
getDialogClass:
|
|
57
|
+
dialogIsOpen: o,
|
|
58
|
+
getDialogClass: B,
|
|
30
59
|
dialogElem: a,
|
|
31
60
|
triggerElem: l,
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
61
|
+
getStyle: S,
|
|
62
|
+
toggleDialog: y,
|
|
63
|
+
openDialog: w,
|
|
64
|
+
closeDialog: d
|
|
35
65
|
};
|
|
36
|
-
},
|
|
37
|
-
watch: {
|
|
38
|
-
isOpen(e) {
|
|
39
|
-
this.dialogIsOpen = e;
|
|
40
|
-
}
|
|
41
66
|
}
|
|
42
67
|
});
|
|
43
68
|
export {
|
|
44
|
-
|
|
69
|
+
W as default
|
|
45
70
|
};
|