stk-table-vue 1.0.0-beta.2 → 1.0.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/lib/{Dropdown-BIGxWVTR.js → Dropdown-CX_2Kv4I.js} +158 -159
  2. package/lib/StkTable-BugG7a1E.js +4758 -4758
  3. package/lib/src/StkTable/custom-cells/Filter/Filter.vue.d.ts +35 -35
  4. package/lib/stk-table-vue.js +314 -303
  5. package/lib/style.css +688 -688
  6. package/package.json +1 -1
  7. package/src/StkTable/custom-cells/Filter/Dropdown/index.vue +1 -1
  8. package/src/StkTable/custom-cells/Filter/Filter.vue +2 -2
  9. package/src/StkTable/custom-cells/Filter/createFilter.ts +19 -7
package/lib/{Dropdown-BIGxWVTR.js → Dropdown-CX_2Kv4I.js} RENAMED
@@ -1,159 +1,158 @@
1
- /**
2
- * name: stk-table-vue
3
- * version: v1.0.0-beta.2
4
- * description: High performance realtime virtual table for vue3 and vue2.7
5
- * author: japlus
6
- * homepage: https://ja-plus.github.io/stk-table-vue/
7
- * license: MIT
8
- */
9
- import { t as StkTable_default } from "./StkTable-BugG7a1E.js";
10
- import { createElementBlock, createElementVNode, createVNode, defineComponent, h, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, reactive, ref, withModifiers } from "vue";
11
- //#region src/StkTable/custom-cells/Filter/Dropdown/index.vue?vue&type=script&setup=true&lang.ts
12
- var DROPDOWN_DEFAULT_WIDTH = 300;
13
- var DROPDOWN_DEFAULT_HEIGHT = 400;
14
- var PADDING = 6;
15
- //#endregion
16
- //#region src/StkTable/custom-cells/Filter/Dropdown/index.vue
17
- var Dropdown_default = /* @__PURE__ */ defineComponent({
18
- __name: "index",
19
- setup(__props, { expose: __expose }) {
20
- const theme = ref("light");
21
- const checkedTempValueSet = reactive(/* @__PURE__ */ new Set());
22
- const columns = ref([{
23
- title: "",
24
- dataIndex: "value",
25
- width: 30,
26
- className: "stk-filter-dropdown-checkbox",
27
- customCell: ({ row }) => h("input", {
28
- type: "checkbox",
29
- checked: checkedTempValueSet.has(row.value)
30
- })
31
- }, {
32
- title: "",
33
- dataIndex: "label",
34
- customCell: ({ row }) => h("span", [row.label])
35
- }]);
36
- const visible = ref(false);
37
- const position = ref({
38
- x: 0,
39
- y: 0
40
- });
41
- const options = ref([]);
42
- const dropdownEl = ref();
43
- onMounted(() => {
44
- document.addEventListener("click", handleClickOutside);
45
- });
46
- onUnmounted(() => {
47
- document.removeEventListener("click", handleClickOutside);
48
- });
49
- let onConfirmFn;
50
- function getDropdownSize() {
51
- if (!dropdownEl.value) return [DROPDOWN_DEFAULT_WIDTH, DROPDOWN_DEFAULT_HEIGHT];
52
- const rect = dropdownEl.value.getBoundingClientRect();
53
- return [rect.width || DROPDOWN_DEFAULT_WIDTH, rect.height || DROPDOWN_DEFAULT_HEIGHT];
54
- }
55
- function calculatePosition(docPos) {
56
- const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
57
- const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
58
- const viewportWidth = document.documentElement.clientWidth;
59
- const viewportHeight = document.documentElement.clientHeight;
60
- const [dropdownWidth, dropdownHeight] = getDropdownSize();
61
- let finalX = docPos.x;
62
- let finalY = docPos.y;
63
- if (docPos.x - scrollLeft + dropdownWidth > viewportWidth - PADDING) finalX = viewportWidth - dropdownWidth - PADDING + scrollLeft;
64
- const relativeY = docPos.y - scrollTop;
65
- if (relativeY + dropdownHeight > viewportHeight - PADDING) {
66
- const triggerHeight = docPos.height || 30;
67
- if (relativeY - triggerHeight >= dropdownHeight + PADDING) finalY = docPos.y - triggerHeight - dropdownHeight - PADDING;
68
- else finalY = PADDING + scrollTop;
69
- }
70
- finalX = Math.max(PADDING + scrollLeft, finalX);
71
- finalY = Math.max(PADDING + scrollTop, finalY);
72
- return {
73
- x: finalX,
74
- y: finalY
75
- };
76
- }
77
- async function show(pos, opt, onConfirm) {
78
- if (dropdownEl.value) dropdownEl.value.style.visibility = "hidden";
79
- visible.value = true;
80
- options.value = opt || [];
81
- initChecked();
82
- onConfirmFn = onConfirm;
83
- await nextTick();
84
- position.value = calculatePosition(pos);
85
- if (dropdownEl.value) dropdownEl.value.style.visibility = "visible";
86
- }
87
- async function handleClickOutside(e) {
88
- var _dropdownEl$value;
89
- if (!visible.value || ((_dropdownEl$value = dropdownEl.value) === null || _dropdownEl$value === void 0 ? void 0 : _dropdownEl$value.contains(e.target))) return;
90
- hide();
91
- }
92
- function initChecked() {
93
- options.value.forEach((opt) => {
94
- if (opt.selected) checkedTempValueSet.add(opt.value);
95
- });
96
- }
97
- function updateChecked(checked, row) {
98
- if (checked) checkedTempValueSet.add(row.value);
99
- else checkedTempValueSet.delete(row.value);
100
- }
101
- function confirm() {
102
- options.value.forEach((opt) => opt.selected = checkedTempValueSet.has(opt.value));
103
- onConfirmFn(Array.from(checkedTempValueSet));
104
- hide();
105
- }
106
- function hide() {
107
- visible.value = false;
108
- options.value = [];
109
- checkedTempValueSet.clear();
110
- }
111
- function handleRowClick(e, row) {
112
- updateChecked(!checkedTempValueSet.has(row.value), row);
113
- }
114
- function setTheme(t) {
115
- theme.value = t;
116
- }
117
- function handleClear() {
118
- checkedTempValueSet.clear();
119
- confirm();
120
- }
121
- __expose({
122
- visible,
123
- show,
124
- hide,
125
- setTheme
126
- });
127
- return (_ctx, _cache) => {
128
- return openBlock(), createElementBlock("div", {
129
- ref_key: "dropdownEl",
130
- ref: dropdownEl,
131
- class: normalizeClass(["stk-filter-dropdown", [`stk-filter-dropdown--${theme.value}`]]),
132
- style: normalizeStyle({
133
- top: position.value.y + "px",
134
- left: position.value.x + "px",
135
- display: visible.value ? void 0 : "none"
136
- }),
137
- onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
138
- }, [createVNode(StkTable_default, {
139
- "row-key": "id",
140
- headless: "",
141
- virtual: "",
142
- "no-data-full": "",
143
- theme: theme.value,
144
- "row-active": false,
145
- "row-height": 20,
146
- bordered: false,
147
- columns: columns.value,
148
- "data-source": options.value,
149
- onRowClick: handleRowClick
150
- }, null, 8, [
151
- "theme",
152
- "columns",
153
- "data-source"
154
- ]), createElementVNode("footer", null, [createElementVNode("button", { onClick: handleClear }, "↺"), createElementVNode("button", { onClick: confirm }, "✓")])], 6);
155
- };
156
- }
157
- });
158
- //#endregion
159
- export { Dropdown_default as default };
1
+ /**
2
+ * name: stk-table-vue
3
+ * version: v1.0.0-beta.3
4
+ * description: High performance realtime virtual table for vue3 and vue2.7
5
+ * author: japlus
6
+ * homepage: https://ja-plus.github.io/stk-table-vue/
7
+ * license: MIT
8
+ */
9
+ import { t as StkTable_default } from "./StkTable-BugG7a1E.js";
10
+ import { createElementBlock, createElementVNode, createVNode, defineComponent, h, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, reactive, ref, withModifiers } from "vue";
11
+ //#region src/StkTable/custom-cells/Filter/Dropdown/index.vue?vue&type=script&setup=true&lang.ts
12
+ var DROPDOWN_DEFAULT_WIDTH = 300;
13
+ var DROPDOWN_DEFAULT_HEIGHT = 400;
14
+ var PADDING = 6;
15
+ //#endregion
16
+ //#region src/StkTable/custom-cells/Filter/Dropdown/index.vue
17
+ var Dropdown_default = /* @__PURE__ */ defineComponent({
18
+ __name: "index",
19
+ setup(__props, { expose: __expose }) {
20
+ const theme = ref("light");
21
+ const checkedTempValueSet = reactive(/* @__PURE__ */ new Set());
22
+ const columns = ref([{
23
+ title: "",
24
+ dataIndex: "value",
25
+ width: 30,
26
+ className: "stk-filter-dropdown-checkbox",
27
+ customCell: ({ row }) => h("input", {
28
+ type: "checkbox",
29
+ checked: checkedTempValueSet.has(row.value)
30
+ })
31
+ }, {
32
+ title: "",
33
+ dataIndex: "label"
34
+ }]);
35
+ const visible = ref(false);
36
+ const position = ref({
37
+ x: 0,
38
+ y: 0
39
+ });
40
+ const options = ref([]);
41
+ const dropdownEl = ref();
42
+ onMounted(() => {
43
+ document.addEventListener("click", handleClickOutside);
44
+ });
45
+ onUnmounted(() => {
46
+ document.removeEventListener("click", handleClickOutside);
47
+ });
48
+ let onConfirmFn;
49
+ function getDropdownSize() {
50
+ if (!dropdownEl.value) return [DROPDOWN_DEFAULT_WIDTH, DROPDOWN_DEFAULT_HEIGHT];
51
+ const rect = dropdownEl.value.getBoundingClientRect();
52
+ return [rect.width || DROPDOWN_DEFAULT_WIDTH, rect.height || DROPDOWN_DEFAULT_HEIGHT];
53
+ }
54
+ function calculatePosition(docPos) {
55
+ const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
56
+ const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
57
+ const viewportWidth = document.documentElement.clientWidth;
58
+ const viewportHeight = document.documentElement.clientHeight;
59
+ const [dropdownWidth, dropdownHeight] = getDropdownSize();
60
+ let finalX = docPos.x;
61
+ let finalY = docPos.y;
62
+ if (docPos.x - scrollLeft + dropdownWidth > viewportWidth - PADDING) finalX = viewportWidth - dropdownWidth - PADDING + scrollLeft;
63
+ const relativeY = docPos.y - scrollTop;
64
+ if (relativeY + dropdownHeight > viewportHeight - PADDING) {
65
+ const triggerHeight = docPos.height || 30;
66
+ if (relativeY - triggerHeight >= dropdownHeight + PADDING) finalY = docPos.y - triggerHeight - dropdownHeight - PADDING;
67
+ else finalY = PADDING + scrollTop;
68
+ }
69
+ finalX = Math.max(PADDING + scrollLeft, finalX);
70
+ finalY = Math.max(PADDING + scrollTop, finalY);
71
+ return {
72
+ x: finalX,
73
+ y: finalY
74
+ };
75
+ }
76
+ async function show(pos, opt, onConfirm) {
77
+ if (dropdownEl.value) dropdownEl.value.style.visibility = "hidden";
78
+ visible.value = true;
79
+ options.value = opt || [];
80
+ initChecked();
81
+ onConfirmFn = onConfirm;
82
+ await nextTick();
83
+ position.value = calculatePosition(pos);
84
+ if (dropdownEl.value) dropdownEl.value.style.visibility = "visible";
85
+ }
86
+ async function handleClickOutside(e) {
87
+ var _dropdownEl$value;
88
+ if (!visible.value || ((_dropdownEl$value = dropdownEl.value) === null || _dropdownEl$value === void 0 ? void 0 : _dropdownEl$value.contains(e.target))) return;
89
+ hide();
90
+ }
91
+ function initChecked() {
92
+ options.value.forEach((opt) => {
93
+ if (opt.selected) checkedTempValueSet.add(opt.value);
94
+ });
95
+ }
96
+ function updateChecked(checked, row) {
97
+ if (checked) checkedTempValueSet.add(row.value);
98
+ else checkedTempValueSet.delete(row.value);
99
+ }
100
+ function confirm() {
101
+ options.value.forEach((opt) => opt.selected = checkedTempValueSet.has(opt.value));
102
+ onConfirmFn(Array.from(checkedTempValueSet));
103
+ hide();
104
+ }
105
+ function hide() {
106
+ visible.value = false;
107
+ options.value = [];
108
+ checkedTempValueSet.clear();
109
+ }
110
+ function handleRowClick(e, row) {
111
+ updateChecked(!checkedTempValueSet.has(row.value), row);
112
+ }
113
+ function setTheme(t) {
114
+ theme.value = t;
115
+ }
116
+ function handleClear() {
117
+ checkedTempValueSet.clear();
118
+ confirm();
119
+ }
120
+ __expose({
121
+ visible,
122
+ show,
123
+ hide,
124
+ setTheme
125
+ });
126
+ return (_ctx, _cache) => {
127
+ return openBlock(), createElementBlock("div", {
128
+ ref_key: "dropdownEl",
129
+ ref: dropdownEl,
130
+ class: normalizeClass(["stk-filter-dropdown", [`stk-filter-dropdown--${theme.value}`]]),
131
+ style: normalizeStyle({
132
+ top: position.value.y + "px",
133
+ left: position.value.x + "px",
134
+ display: visible.value ? void 0 : "none"
135
+ }),
136
+ onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
137
+ }, [createVNode(StkTable_default, {
138
+ "row-key": "id",
139
+ headless: "",
140
+ virtual: "",
141
+ "no-data-full": "",
142
+ theme: theme.value,
143
+ "row-active": false,
144
+ "row-height": 20,
145
+ bordered: false,
146
+ columns: columns.value,
147
+ "data-source": options.value,
148
+ onRowClick: handleRowClick
149
+ }, null, 8, [
150
+ "theme",
151
+ "columns",
152
+ "data-source"
153
+ ]), createElementVNode("footer", null, [createElementVNode("button", { onClick: handleClear }, "↺"), createElementVNode("button", { onClick: confirm }, "✓")])], 6);
154
+ };
155
+ }
156
+ });
157
+ //#endregion
158
+ export { Dropdown_default as default };