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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "quasar-ui-danx",
3
- "version": "0.0.17",
3
+ "version": "0.0.19",
4
4
  "author": "Dan <dan@flytedesk.com>",
5
5
  "description": "DanX Vue / Quasar component library",
6
6
  "license": "MIT",
@@ -49,27 +49,27 @@
49
49
  </template>
50
50
  <template #body-cell="rowProps">
51
51
  <q-td :key="rowProps.key" :props="rowProps">
52
- <template v-if="rowProps.col.component">
53
- <RenderComponentColumn
54
- :row-props="rowProps"
55
- @action="$emit('action', $event)"
56
- />
57
- </template>
58
- <template v-else-if="rowProps.col.fieldList">
59
- <div v-for="field in rowProps.col.fieldList" :key="field">
60
- {{ rowProps.row[field] }}
61
- </div>
62
- </template>
63
- <template v-else-if="rowProps.col.filterOnClick">
64
- <a @click="$emit('filter', rowProps.col.filterOnClick(rowProps.row))">
65
- {{ rowProps.value }}
66
- </a>
67
- </template>
68
- <template v-else>
69
- <slot v-bind="{name: rowProps.col.name, row: rowProps.row, value: rowProps.value}">
70
- {{ rowProps.value }}
71
- </slot>
72
- </template>
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, RenderComponentColumn, TableSummaryRow } from '.';
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 RenderComponentColumn } from "./RenderComponentColumn.vue";
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>
@@ -8,9 +8,9 @@ const SERVER_TZ = new IANAZone("America/Chicago");
8
8
  * @returns {DateTime}
9
9
  */
10
10
  export function localizedDateTime(dateTimeString) {
11
- dateTimeString = dateTimeString?.replace("T", " ");
12
- // noinspection JSCheckFunctionSignatures
13
- return DateTime.fromSQL(dateTimeString, { zone: SERVER_TZ }).setZone("local");
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
- dateTimeString = dateTimeString?.replace("T", " ");
23
- // noinspection JSCheckFunctionSignatures
24
- return DateTime.fromSQL(dateTimeString, { zone: "local" }).setZone(SERVER_TZ);
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
- 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");
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
- return DateTime.fromFormat(date, format);
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
- return DateTime.fromFormat(date, format);
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
- return fDate(date, { format: "yyyy/MM/dd" });
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
- return fDateTime(localizedDateTime(dateTimeString), options);
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
- dateTime = null,
88
- { format = "M/d/yy h:mma", empty = "- -" } = {}
87
+ dateTime = null,
88
+ { format = "M/d/yy h:mma", empty = "- -" } = {}
89
89
  ) {
90
- const formatted = (dateTime ? parseDateTime(dateTime) : DateTime.now()).toFormat(format).toLowerCase();
91
- return formatted === "invalid datetime" ? empty : formatted;
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
- return fDateTime(dateTime, { format: "yyyy-MM-dd HH:mm:ss", empty: null });
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
- const formatted = parseDateTime(dateTime).toFormat(format);
112
- return ["Invalid DateTime", "invalid datetime"].includes(formatted) ? empty : formatted;
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
- 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");
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
- return new Intl.NumberFormat("en-US", {
134
- style: "currency",
135
- currency: "USD"
136
- }).format(amount);
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
- return new Intl.NumberFormat("en-US", options).format(number);
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
- 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
- }
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
- num = parseFloat(num);
176
+ num = parseFloat(num);
177
177
 
178
- if (isNaN(num)) {
179
- return options.NaN;
180
- }
178
+ if (isNaN(num)) {
179
+ return options.NaN;
180
+ }
181
181
 
182
- return fNumber(num * options.multiplier, options) + "%";
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
  }