quasar-ui-danx 0.0.17 → 0.0.19
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/package.json +1 -1
- package/src/components/ActionTable/ActionTable.vue +22 -22
- package/src/components/ActionTable/index.ts +1 -1
- package/src/components/Utility/FlatList.vue +19 -0
- package/src/components/Utility/RefreshButton.vue +16 -0
- package/src/helpers/formats.ts +87 -46
- /package/src/components/ActionTable/{RenderComponentColumn.vue → RenderComponent.vue} +0 -0
package/package.json
CHANGED
@@ -49,27 +49,27 @@
|
|
49
49
|
</template>
|
50
50
|
<template #body-cell="rowProps">
|
51
51
|
<q-td :key="rowProps.key" :props="rowProps">
|
52
|
-
<
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
</
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
</
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
</
|
72
|
-
</
|
52
|
+
<component
|
53
|
+
:is="rowProps.col.onClick ? 'a' : 'div'"
|
54
|
+
@click="() => rowProps.col.onClick && rowProps.col.onClick(rowProps.row)"
|
55
|
+
>
|
56
|
+
<template v-if="rowProps.col.component">
|
57
|
+
<RenderComponent
|
58
|
+
:row-props="rowProps"
|
59
|
+
@action="$emit('action', $event)"
|
60
|
+
/>
|
61
|
+
</template>
|
62
|
+
<template v-else-if="rowProps.col.fieldList">
|
63
|
+
<div v-for="field in rowProps.col.fieldList" :key="field">
|
64
|
+
{{ rowProps.row[field] }}
|
65
|
+
</div>
|
66
|
+
</template>
|
67
|
+
<template v-else>
|
68
|
+
<slot v-bind="{name: rowProps.col.name, row: rowProps.row, value: rowProps.value}">
|
69
|
+
{{ rowProps.value }}
|
70
|
+
</slot>
|
71
|
+
</template>
|
72
|
+
</component>
|
73
73
|
</q-td>
|
74
74
|
</template>
|
75
75
|
</q-table>
|
@@ -77,7 +77,7 @@
|
|
77
77
|
|
78
78
|
<script setup>
|
79
79
|
import { ref } from 'vue';
|
80
|
-
import { EmptyTableState, registerStickyScrolling,
|
80
|
+
import { EmptyTableState, registerStickyScrolling, RenderComponent, TableSummaryRow } from '.';
|
81
81
|
import { DragHandleIcon as RowResizeIcon } from '../../svg';
|
82
82
|
import { HandleDraggable } from '../DragAndDrop';
|
83
83
|
|
@@ -6,5 +6,5 @@ export * from "./tableColumns";
|
|
6
6
|
export { default as ActionTable } from "./ActionTable.vue";
|
7
7
|
export { default as BatchActionMenu } from "./BatchActionMenu.vue";
|
8
8
|
export { default as EmptyTableState } from "./EmptyTableState.vue";
|
9
|
-
export { default as
|
9
|
+
export { default as RenderComponent } from "src/components/ActionTable/RenderComponent.vue";
|
10
10
|
export { default as TableSummaryRow } from "./TableSummaryRow.vue";
|
@@ -0,0 +1,19 @@
|
|
1
|
+
<template>
|
2
|
+
<ul>
|
3
|
+
<li v-for="item in items" :key="item[column]">
|
4
|
+
{{ item[column] }}
|
5
|
+
</li>
|
6
|
+
</ul>
|
7
|
+
</template>
|
8
|
+
<script setup>
|
9
|
+
defineProps({
|
10
|
+
items: {
|
11
|
+
type: Array,
|
12
|
+
required: true
|
13
|
+
},
|
14
|
+
column: {
|
15
|
+
type: String,
|
16
|
+
required: true
|
17
|
+
}
|
18
|
+
});
|
19
|
+
</script>
|
@@ -0,0 +1,16 @@
|
|
1
|
+
<template>
|
2
|
+
<QBtn
|
3
|
+
class="bg-neutral-plus-6"
|
4
|
+
:loading="loading"
|
5
|
+
>
|
6
|
+
<RefreshIcon class="w-5" />
|
7
|
+
</QBtn>
|
8
|
+
</template>
|
9
|
+
<script setup>
|
10
|
+
import { RefreshIcon } from "@heroicons/vue/solid";
|
11
|
+
|
12
|
+
defineEmits(["refresh"]);
|
13
|
+
defineProps({
|
14
|
+
loading: Boolean
|
15
|
+
});
|
16
|
+
</script>
|
package/src/helpers/formats.ts
CHANGED
@@ -8,9 +8,9 @@ const SERVER_TZ = new IANAZone("America/Chicago");
|
|
8
8
|
* @returns {DateTime}
|
9
9
|
*/
|
10
10
|
export function localizedDateTime(dateTimeString) {
|
11
|
-
|
12
|
-
|
13
|
-
|
11
|
+
dateTimeString = dateTimeString?.replace("T", " ");
|
12
|
+
// noinspection JSCheckFunctionSignatures
|
13
|
+
return DateTime.fromSQL(dateTimeString, { zone: SERVER_TZ }).setZone("local");
|
14
14
|
}
|
15
15
|
|
16
16
|
/**
|
@@ -19,9 +19,9 @@ export function localizedDateTime(dateTimeString) {
|
|
19
19
|
* @returns {DateTime}
|
20
20
|
*/
|
21
21
|
export function remoteDateTime(dateTimeString) {
|
22
|
-
|
23
|
-
|
24
|
-
|
22
|
+
dateTimeString = dateTimeString?.replace("T", " ");
|
23
|
+
// noinspection JSCheckFunctionSignatures
|
24
|
+
return DateTime.fromSQL(dateTimeString, { zone: "local" }).setZone(SERVER_TZ);
|
25
25
|
}
|
26
26
|
|
27
27
|
/**
|
@@ -29,11 +29,11 @@ export function remoteDateTime(dateTimeString) {
|
|
29
29
|
* @returns {DateTime|*}
|
30
30
|
*/
|
31
31
|
export function parseDateTime(dateTime) {
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
32
|
+
if (typeof dateTime === "string") {
|
33
|
+
dateTime = dateTime.replace("T", " ").replace(/\//g, "-");
|
34
|
+
return DateTime.fromSQL(dateTime);
|
35
|
+
}
|
36
|
+
return dateTime || DateTime.fromSQL("0000-00-00 00:00:00");
|
37
37
|
}
|
38
38
|
|
39
39
|
/**
|
@@ -43,7 +43,7 @@ export function parseDateTime(dateTime) {
|
|
43
43
|
* @returns {DateTime}
|
44
44
|
*/
|
45
45
|
export function parseQDate(date, format = "yyyy/MM/dd") {
|
46
|
-
|
46
|
+
return DateTime.fromFormat(date, format);
|
47
47
|
}
|
48
48
|
|
49
49
|
/**
|
@@ -53,7 +53,7 @@ export function parseQDate(date, format = "yyyy/MM/dd") {
|
|
53
53
|
* @returns {DateTime}
|
54
54
|
*/
|
55
55
|
export function parseQDateTime(date, format = "yyyy/MM/dd HH:mm:ss") {
|
56
|
-
|
56
|
+
return DateTime.fromFormat(date, format);
|
57
57
|
}
|
58
58
|
|
59
59
|
/**
|
@@ -62,7 +62,7 @@ export function parseQDateTime(date, format = "yyyy/MM/dd HH:mm:ss") {
|
|
62
62
|
* @returns {string}
|
63
63
|
*/
|
64
64
|
export function fQDate(date) {
|
65
|
-
|
65
|
+
return fDate(date, { format: "yyyy/MM/dd" });
|
66
66
|
}
|
67
67
|
|
68
68
|
/**
|
@@ -72,7 +72,7 @@ export function fQDate(date) {
|
|
72
72
|
* @returns {string}
|
73
73
|
*/
|
74
74
|
export function fLocalizedDateTime(dateTimeString, options = {}) {
|
75
|
-
|
75
|
+
return fDateTime(localizedDateTime(dateTimeString), options);
|
76
76
|
}
|
77
77
|
|
78
78
|
/**
|
@@ -84,11 +84,11 @@ export function fLocalizedDateTime(dateTimeString, options = {}) {
|
|
84
84
|
* @returns {string}
|
85
85
|
*/
|
86
86
|
export function fDateTime(
|
87
|
-
|
88
|
-
|
87
|
+
dateTime = null,
|
88
|
+
{ format = "M/d/yy h:mma", empty = "- -" } = {}
|
89
89
|
) {
|
90
|
-
|
91
|
-
|
90
|
+
const formatted = (dateTime ? parseDateTime(dateTime) : DateTime.now()).toFormat(format).toLowerCase();
|
91
|
+
return formatted === "invalid datetime" ? empty : formatted;
|
92
92
|
}
|
93
93
|
|
94
94
|
/**
|
@@ -97,7 +97,7 @@ export function fDateTime(
|
|
97
97
|
* @returns {string}
|
98
98
|
*/
|
99
99
|
export function dbDateTime(dateTime = null) {
|
100
|
-
|
100
|
+
return fDateTime(dateTime, { format: "yyyy-MM-dd HH:mm:ss", empty: null });
|
101
101
|
}
|
102
102
|
|
103
103
|
/**
|
@@ -108,8 +108,8 @@ export function dbDateTime(dateTime = null) {
|
|
108
108
|
* @returns {string}
|
109
109
|
*/
|
110
110
|
export function fDate(dateTime, { empty = "--", format = "M/d/yy" } = {}) {
|
111
|
-
|
112
|
-
|
111
|
+
const formatted = parseDateTime(dateTime).toFormat(format);
|
112
|
+
return ["Invalid DateTime", "invalid datetime"].includes(formatted) ? empty : formatted;
|
113
113
|
}
|
114
114
|
|
115
115
|
/**
|
@@ -119,9 +119,9 @@ export function fDate(dateTime, { empty = "--", format = "M/d/yy" } = {}) {
|
|
119
119
|
* @returns {string}
|
120
120
|
*/
|
121
121
|
export function fSecondsToTime(second) {
|
122
|
-
|
123
|
-
|
124
|
-
|
122
|
+
const time = DateTime.now().setZone("UTC").startOf("year").set({ second });
|
123
|
+
const hours = Math.floor(second / 3600);
|
124
|
+
return (hours ? hours + ":" : "") + time.toFormat("mm:ss");
|
125
125
|
}
|
126
126
|
|
127
127
|
/**
|
@@ -130,10 +130,10 @@ export function fSecondsToTime(second) {
|
|
130
130
|
* @returns {string}
|
131
131
|
*/
|
132
132
|
export function fCurrency(amount) {
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
133
|
+
return new Intl.NumberFormat("en-US", {
|
134
|
+
style: "currency",
|
135
|
+
currency: "USD"
|
136
|
+
}).format(amount);
|
137
137
|
}
|
138
138
|
|
139
139
|
/**
|
@@ -143,7 +143,7 @@ export function fCurrency(amount) {
|
|
143
143
|
* @returns {string}
|
144
144
|
*/
|
145
145
|
export function fNumber(number, options = {}) {
|
146
|
-
|
146
|
+
return new Intl.NumberFormat("en-US", options).format(number);
|
147
147
|
}
|
148
148
|
|
149
149
|
/**
|
@@ -153,17 +153,17 @@ export function fNumber(number, options = {}) {
|
|
153
153
|
* @returns {string|*}
|
154
154
|
*/
|
155
155
|
export function centerTruncate(str, maxLength) {
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
156
|
+
if (str.length > maxLength) {
|
157
|
+
const frontCharCount = Math.floor((maxLength - 3) / 2);
|
158
|
+
const backCharCount = maxLength - frontCharCount - 3;
|
159
|
+
return (
|
160
|
+
str.substring(0, frontCharCount) +
|
161
|
+
"..." +
|
162
|
+
str.substring(str.length - backCharCount)
|
163
|
+
);
|
164
|
+
} else {
|
165
|
+
return str;
|
166
|
+
}
|
167
167
|
}
|
168
168
|
|
169
169
|
/**
|
@@ -173,11 +173,52 @@ export function centerTruncate(str, maxLength) {
|
|
173
173
|
* @returns {string}
|
174
174
|
*/
|
175
175
|
export function fPercent(num, options = { multiplier: 100, maximumFractionDigits: 1, NaN: "N/A" }) {
|
176
|
-
|
176
|
+
num = parseFloat(num);
|
177
177
|
|
178
|
-
|
179
|
-
|
180
|
-
|
178
|
+
if (isNaN(num)) {
|
179
|
+
return options.NaN;
|
180
|
+
}
|
181
181
|
|
182
|
-
|
182
|
+
return fNumber(num * options.multiplier, options) + "%";
|
183
|
+
}
|
184
|
+
|
185
|
+
|
186
|
+
export function fPhone(value) {
|
187
|
+
if (!value || typeof value !== "string") {
|
188
|
+
return value || "";
|
189
|
+
}
|
190
|
+
|
191
|
+
const input = value.replace(/\D/g, "").split("");
|
192
|
+
let phone = "";
|
193
|
+
|
194
|
+
const startsWithOne = input.length > 0 && input[0] === "1";
|
195
|
+
const shift = startsWithOne ? 1 : 0;
|
196
|
+
|
197
|
+
input.map((number, index) => {
|
198
|
+
switch (index) {
|
199
|
+
case shift:
|
200
|
+
phone += "(";
|
201
|
+
break;
|
202
|
+
case shift + 3:
|
203
|
+
phone += ") ";
|
204
|
+
break;
|
205
|
+
case shift + 6:
|
206
|
+
phone += "-";
|
207
|
+
break;
|
208
|
+
case shift + 10:
|
209
|
+
phone += " x";
|
210
|
+
break;
|
211
|
+
}
|
212
|
+
if (index === 0 && number === "1") {
|
213
|
+
phone += "+1 ";
|
214
|
+
} else {
|
215
|
+
phone += number;
|
216
|
+
}
|
217
|
+
});
|
218
|
+
|
219
|
+
if (value === "+1 (") {
|
220
|
+
return "";
|
221
|
+
}
|
222
|
+
|
223
|
+
return phone;
|
183
224
|
}
|
File without changes
|