quasar-ui-danx 0.0.17 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",

package/src/components/ActionTable/ActionTable.vue

@@ -49,27 +49,27 @@
     </template>
     <template #body-cell="rowProps">
       <q-td :key="rowProps.key" :props="rowProps">
-        <template v-if="rowProps.col.component">
-          <RenderComponentColumn
-              :row-props="rowProps"
-              @action="$emit('action', $event)"
-          />
-        </template>
-        <template v-else-if="rowProps.col.fieldList">
-          <div v-for="field in rowProps.col.fieldList" :key="field">
-            {{ rowProps.row[field] }}
-          </div>
-        </template>
-        <template v-else-if="rowProps.col.filterOnClick">
-          <a @click="$emit('filter', rowProps.col.filterOnClick(rowProps.row))">
-            {{ rowProps.value }}
-          </a>
-        </template>
-        <template v-else>
-          <slot v-bind="{name: rowProps.col.name, row: rowProps.row, value: rowProps.value}">
-            {{ rowProps.value }}
-          </slot>
-        </template>
+        <component
+            :is="rowProps.col.onClick ? 'a' : 'div'"
+            @click="() => rowProps.col.onClick && rowProps.col.onClick(rowProps.row)"
+        >
+          <template v-if="rowProps.col.component">
+            <RenderComponent
+                :row-props="rowProps"
+                @action="$emit('action', $event)"
+            />
+          </template>
+          <template v-else-if="rowProps.col.fieldList">
+            <div v-for="field in rowProps.col.fieldList" :key="field">
+              {{ rowProps.row[field] }}
+            </div>
+          </template>
+          <template v-else>
+            <slot v-bind="{name: rowProps.col.name, row: rowProps.row, value: rowProps.value}">
+              {{ rowProps.value }}
+            </slot>
+          </template>
+        </component>
       </q-td>
     </template>
   </q-table>
@@ -77,7 +77,7 @@
 
 <script setup>
 import { ref } from 'vue';
-import { EmptyTableState, registerStickyScrolling, RenderComponentColumn, TableSummaryRow } from '.';
+import { EmptyTableState, registerStickyScrolling, RenderComponent, TableSummaryRow } from '.';
 import { DragHandleIcon as RowResizeIcon } from '../../svg';
 import { HandleDraggable } from '../DragAndDrop';
 

package/src/components/ActionTable/index.ts

@@ -6,5 +6,5 @@ export * from "./tableColumns";
 export { default as ActionTable } from "./ActionTable.vue";
 export { default as BatchActionMenu } from "./BatchActionMenu.vue";
 export { default as EmptyTableState } from "./EmptyTableState.vue";
-export { default as RenderComponentColumn } from "./RenderComponentColumn.vue";
+export { default as RenderComponent } from "src/components/ActionTable/RenderComponent.vue";
 export { default as TableSummaryRow } from "./TableSummaryRow.vue";

package/src/components/Utility/FlatList.vue

@@ -0,0 +1,19 @@
+<template>
+  <ul>
+    <li v-for="item in items" :key="item[column]">
+      {{ item[column] }}
+    </li>
+  </ul>
+</template>
+<script setup>
+defineProps({
+  items: {
+    type: Array,
+    required: true
+  },
+  column: {
+    type: String,
+    required: true
+  }
+});
+</script>

package/src/components/Utility/RefreshButton.vue

@@ -0,0 +1,16 @@
+<template>
+  <QBtn
+    class="bg-neutral-plus-6"
+    :loading="loading"
+  >
+    <RefreshIcon class="w-5" />
+  </QBtn>
+</template>
+<script setup>
+import { RefreshIcon } from "@heroicons/vue/solid";
+
+defineEmits(["refresh"]);
+defineProps({
+  loading: Boolean
+});
+</script>

package/src/helpers/formats.ts

@@ -8,9 +8,9 @@ const SERVER_TZ = new IANAZone("America/Chicago");
  * @returns {DateTime}
  */
 export function localizedDateTime(dateTimeString) {
-  dateTimeString = dateTimeString?.replace("T", " ");
-  // noinspection JSCheckFunctionSignatures
-  return DateTime.fromSQL(dateTimeString, { zone: SERVER_TZ }).setZone("local");
+    dateTimeString = dateTimeString?.replace("T", " ");
+    // noinspection JSCheckFunctionSignatures
+    return DateTime.fromSQL(dateTimeString, { zone: SERVER_TZ }).setZone("local");
 }
 
 /**
@@ -19,9 +19,9 @@ export function localizedDateTime(dateTimeString) {
  * @returns {DateTime}
  */
 export function remoteDateTime(dateTimeString) {
-  dateTimeString = dateTimeString?.replace("T", " ");
-  // noinspection JSCheckFunctionSignatures
-  return DateTime.fromSQL(dateTimeString, { zone: "local" }).setZone(SERVER_TZ);
+    dateTimeString = dateTimeString?.replace("T", " ");
+    // noinspection JSCheckFunctionSignatures
+    return DateTime.fromSQL(dateTimeString, { zone: "local" }).setZone(SERVER_TZ);
 }
 
 /**
@@ -29,11 +29,11 @@ export function remoteDateTime(dateTimeString) {
  * @returns {DateTime|*}
  */
 export function parseDateTime(dateTime) {
-  if (typeof dateTime === "string") {
-    dateTime = dateTime.replace("T", " ").replace(/\//g, "-");
-    return DateTime.fromSQL(dateTime);
-  }
-  return dateTime || DateTime.fromSQL("0000-00-00 00:00:00");
+    if (typeof dateTime === "string") {
+        dateTime = dateTime.replace("T", " ").replace(/\//g, "-");
+        return DateTime.fromSQL(dateTime);
+    }
+    return dateTime || DateTime.fromSQL("0000-00-00 00:00:00");
 }
 
 /**
@@ -43,7 +43,7 @@ export function parseDateTime(dateTime) {
  * @returns {DateTime}
  */
 export function parseQDate(date, format = "yyyy/MM/dd") {
-  return DateTime.fromFormat(date, format);
+    return DateTime.fromFormat(date, format);
 }
 
 /**
@@ -53,7 +53,7 @@ export function parseQDate(date, format = "yyyy/MM/dd") {
  * @returns {DateTime}
  */
 export function parseQDateTime(date, format = "yyyy/MM/dd HH:mm:ss") {
-  return DateTime.fromFormat(date, format);
+    return DateTime.fromFormat(date, format);
 }
 
 /**
@@ -62,7 +62,7 @@ export function parseQDateTime(date, format = "yyyy/MM/dd HH:mm:ss") {
  * @returns {string}
  */
 export function fQDate(date) {
-  return fDate(date, { format: "yyyy/MM/dd" });
+    return fDate(date, { format: "yyyy/MM/dd" });
 }
 
 /**
@@ -72,7 +72,7 @@ export function fQDate(date) {
  * @returns {string}
  */
 export function fLocalizedDateTime(dateTimeString, options = {}) {
-  return fDateTime(localizedDateTime(dateTimeString), options);
+    return fDateTime(localizedDateTime(dateTimeString), options);
 }
 
 /**
@@ -84,11 +84,11 @@ export function fLocalizedDateTime(dateTimeString, options = {}) {
  * @returns {string}
  */
 export function fDateTime(
-  dateTime = null,
-  { format = "M/d/yy h:mma", empty = "- -" } = {}
+    dateTime = null,
+    { format = "M/d/yy h:mma", empty = "- -" } = {}
 ) {
-  const formatted = (dateTime ? parseDateTime(dateTime) : DateTime.now()).toFormat(format).toLowerCase();
-  return formatted === "invalid datetime" ? empty : formatted;
+    const formatted = (dateTime ? parseDateTime(dateTime) : DateTime.now()).toFormat(format).toLowerCase();
+    return formatted === "invalid datetime" ? empty : formatted;
 }
 
 /**
@@ -97,7 +97,7 @@ export function fDateTime(
  * @returns {string}
  */
 export function dbDateTime(dateTime = null) {
-  return fDateTime(dateTime, { format: "yyyy-MM-dd HH:mm:ss", empty: null });
+    return fDateTime(dateTime, { format: "yyyy-MM-dd HH:mm:ss", empty: null });
 }
 
 /**
@@ -108,8 +108,8 @@ export function dbDateTime(dateTime = null) {
  * @returns {string}
  */
 export function fDate(dateTime, { empty = "--", format = "M/d/yy" } = {}) {
-  const formatted = parseDateTime(dateTime).toFormat(format);
-  return ["Invalid DateTime", "invalid datetime"].includes(formatted) ? empty : formatted;
+    const formatted = parseDateTime(dateTime).toFormat(format);
+    return ["Invalid DateTime", "invalid datetime"].includes(formatted) ? empty : formatted;
 }
 
 /**
@@ -119,9 +119,9 @@ export function fDate(dateTime, { empty = "--", format = "M/d/yy" } = {}) {
  * @returns {string}
  */
 export function fSecondsToTime(second) {
-  const time = DateTime.now().setZone("UTC").startOf("year").set({ second });
-  const hours = Math.floor(second / 3600);
-  return (hours ? hours + ":" : "") + time.toFormat("mm:ss");
+    const time = DateTime.now().setZone("UTC").startOf("year").set({ second });
+    const hours = Math.floor(second / 3600);
+    return (hours ? hours + ":" : "") + time.toFormat("mm:ss");
 }
 
 /**
@@ -130,10 +130,10 @@ export function fSecondsToTime(second) {
  * @returns {string}
  */
 export function fCurrency(amount) {
-  return new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD"
-  }).format(amount);
+    return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD"
+    }).format(amount);
 }
 
 /**
@@ -143,7 +143,7 @@ export function fCurrency(amount) {
  * @returns {string}
  */
 export function fNumber(number, options = {}) {
-  return new Intl.NumberFormat("en-US", options).format(number);
+    return new Intl.NumberFormat("en-US", options).format(number);
 }
 
 /**
@@ -153,17 +153,17 @@ export function fNumber(number, options = {}) {
  * @returns {string|*}
  */
 export function centerTruncate(str, maxLength) {
-  if (str.length > maxLength) {
-    const frontCharCount = Math.floor((maxLength - 3) / 2);
-    const backCharCount = maxLength - frontCharCount - 3;
-    return (
-      str.substring(0, frontCharCount) +
-      "..." +
-      str.substring(str.length - backCharCount)
-    );
-  } else {
-    return str;
-  }
+    if (str.length > maxLength) {
+        const frontCharCount = Math.floor((maxLength - 3) / 2);
+        const backCharCount = maxLength - frontCharCount - 3;
+        return (
+            str.substring(0, frontCharCount) +
+            "..." +
+            str.substring(str.length - backCharCount)
+        );
+    } else {
+        return str;
+    }
 }
 
 /**
@@ -173,11 +173,52 @@ export function centerTruncate(str, maxLength) {
  * @returns {string}
  */
 export function fPercent(num, options = { multiplier: 100, maximumFractionDigits: 1, NaN: "N/A" }) {
-  num = parseFloat(num);
+    num = parseFloat(num);
 
-  if (isNaN(num)) {
-    return options.NaN;
-  }
+    if (isNaN(num)) {
+        return options.NaN;
+    }
 
-  return fNumber(num * options.multiplier, options) + "%";
+    return fNumber(num * options.multiplier, options) + "%";
+}
+
+
+export function fPhone(value) {
+    if (!value || typeof value !== "string") {
+        return value || "";
+    }
+
+    const input = value.replace(/\D/g, "").split("");
+    let phone = "";
+
+    const startsWithOne = input.length > 0 && input[0] === "1";
+    const shift = startsWithOne ? 1 : 0;
+
+    input.map((number, index) => {
+        switch (index) {
+            case shift:
+                phone += "(";
+                break;
+            case shift + 3:
+                phone += ") ";
+                break;
+            case shift + 6:
+                phone += "-";
+                break;
+            case shift + 10:
+                phone += " x";
+                break;
+        }
+        if (index === 0 && number === "1") {
+            phone += "+1 ";
+        } else {
+            phone += number;
+        }
+    });
+
+    if (value === "+1 (") {
+        return "";
+    }
+
+    return phone;
 }