quasar-ui-danx 0.2.16 → 0.2.18

package/package.json

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

package/src/components/ActionTable/ActionMenu.vue

@@ -10,8 +10,8 @@
   />
 </template>
 <script setup>
-import { computed, ref } from 'vue';
-import { PopoverMenu } from '../Utility';
+import { computed, ref } from "vue";
+import { PopoverMenu } from "../Utility";
 
 const props = defineProps({
   actions: {
@@ -24,7 +24,7 @@ const props = defineProps({
   },
   tooltip: {
     type: String,
-    default: 'First select records to perform a batch action'
+    default: "First select records to perform a batch action"
   },
   loading: Boolean,
   loadingComponent: {
@@ -46,7 +46,7 @@ const activeActions = computed(() => props.actions.filter(action => {
 const isSaving = ref(false);
 async function onAction(action) {
   if (!action.trigger) {
-    throw new Error('Action must have a trigger function! Make sure you are using useActions() or implement your own trigger function.');
+    throw new Error("Action must have a trigger function! Make sure you are using useActions() or implement your own trigger function.");
   }
   isSaving.value = true;
   await action.trigger(props.target);

package/src/components/ActionTable/ActionTable.vue

@@ -8,7 +8,7 @@
         :columns="columns"
         :loading="isLoadingList"
         :rows="pagedItems?.data || []"
-        binary-state-sort
+        :binary-state-sort="false"
         selection="multiple"
         :rows-per-page-options="rowsPerPageOptions"
         class="sticky-column sticky-header w-full h-full !border-0"
@@ -64,18 +64,18 @@
 </template>
 
 <script setup>
-import { QTable, QTh } from 'quasar';
-import { ref } from 'vue';
-import { getItem, setItem } from '../../helpers';
-import { DragHandleIcon as RowResizeIcon } from '../../svg';
-import { HandleDraggable } from '../DragAndDrop';
-import { ActionVnode } from '../Utility';
-import ActionTableColumn from './ActionTableColumn.vue';
-import EmptyTableState from './EmptyTableState.vue';
-import { mapSortBy, registerStickyScrolling } from './listHelpers';
-import TableSummaryRow from './TableSummaryRow.vue';
+import { QTable, QTh } from "quasar";
+import { ref } from "vue";
+import { getItem, setItem } from "../../helpers";
+import { DragHandleIcon as RowResizeIcon } from "../../svg";
+import { HandleDraggable } from "../DragAndDrop";
+import { ActionVnode } from "../Utility";
+import ActionTableColumn from "./ActionTableColumn.vue";
+import EmptyTableState from "./EmptyTableState.vue";
+import { mapSortBy, registerStickyScrolling } from "./listHelpers";
+import TableSummaryRow from "./TableSummaryRow.vue";
 
-defineEmits(['update:quasar-pagination', 'update:selected-rows']);
+defineEmits(["update:quasar-pagination", "update:selected-rows"]);
 const props = defineProps({
   name: {
     type: String,

package/src/components/ActionTable/ActionTableColumn.vue

@@ -5,7 +5,7 @@
           class="flex items-center flex-nowrap"
           :class="columnClass"
       >
-        <div class="flex-grow">
+        <div class="flex-grow overflow-hidden">
           <a
               v-if="column.onClick"
               @click="column.onClick(row)"
@@ -32,11 +32,11 @@
   </QTd>
 </template>
 <script setup>
-import { QTd } from 'quasar';
-import { computed } from 'vue';
-import { RenderVnode } from '../Utility';
-import ActionMenu from './ActionMenu';
-import { TitleColumnFormat } from './Columns';
+import { QTd } from "quasar";
+import { computed } from "vue";
+import { RenderVnode } from "../Utility";
+import ActionMenu from "./ActionMenu";
+import { TitleColumnFormat } from "./Columns";
 
 const props = defineProps({
   rowProps: {
@@ -60,10 +60,10 @@ const columnStyle = computed(() => {
 });
 
 const columnClass = computed(() => ({
-  [column.value.class || '']: true,
-  'is-saving': isSaving.value,
-  'justify-end': column.value.align === 'right',
-  'justify-center': column.value.align === 'center',
-  'justify-start': column.value.align === 'left'
+  [column.value.class || ""]: true,
+  "is-saving": isSaving.value,
+  "justify-end": column.value.align === "right",
+  "justify-center": column.value.align === "center",
+  "justify-start": column.value.align === "left"
 }));
 </script>

package/src/components/ActionTable/Columns/ColumnListItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="flex items-center w-full"
-    :class="{'cursor-not-allowed': locked}"
+      class="flex items-center w-full"
+      :class="{'cursor-not-allowed': locked}"
   >
     <a v-if="locked" class="text-neutral-on-plus-3 cursor-not-allowed">
       <LockedIcon class="w-4" />

package/src/components/ActionTable/Columns/ColumnSettingsDialog.vue

@@ -36,13 +36,13 @@
   </InfoDialog>
 </template>
 <script setup>
-import { computed } from 'vue';
-import { FlashMessages, remove } from '../../../helpers';
-import { ListItemDraggable } from '../../DragAndDrop';
-import { InfoDialog, ListTransition } from '../../Utility';
-import ColumnListItem from './ColumnListItem';
+import { computed } from "vue";
+import { FlashMessages, remove } from "../../../helpers";
+import { ListItemDraggable } from "../../DragAndDrop";
+import { InfoDialog, ListTransition } from "../../Utility";
+import ColumnListItem from "./ColumnListItem";
 
-const emit = defineEmits(['close', 'update:hidden-column-names', 'update:title-column-names', 'update:sortable-columns']);
+const emit = defineEmits(["close", "update:hidden-column-names", "update:title-column-names", "update:sortable-columns"]);
 const props = defineProps({
   hiddenColumnNames: {
     type: Array,
@@ -80,7 +80,7 @@ function onVisibilityChange(column, visible) {
   } else {
     hiddenColumnNames.push(column.name);
   }
-  emit('update:hidden-column-names', [...new Set(hiddenColumnNames)]);
+  emit("update:hidden-column-names", [...new Set(hiddenColumnNames)]);
 }
 
 function isTitleColumn(column) {
@@ -97,6 +97,6 @@ function onTitleColumnChange(column, isTitle) {
   } else {
     titleColumnNames = remove(titleColumnNames, column.name);
   }
-  emit('update:title-column-names', [...new Set(titleColumnNames)]);
+  emit("update:title-column-names", [...new Set(titleColumnNames)]);
 }
 </script>

package/src/components/ActionTable/Columns/TitleColumnFormat.vue

@@ -20,7 +20,7 @@ defineProps({
 });
 
 function format(value, format) {
-  if (typeof format === 'function') {
+  if (typeof format === "function") {
     return format(value);
   }
   return value;

package/src/components/ActionTable/Columns/VisibleColumnsToggleButtons.vue

@@ -46,11 +46,11 @@
   </div>
 </template>
 <script setup>
-import { computed, ref } from 'vue';
-import { remove } from '../../../helpers';
-import { CaretDownIcon } from '../../../svg';
+import { computed, ref } from "vue";
+import { remove } from "../../../helpers";
+import { CaretDownIcon } from "../../../svg";
 
-const emit = defineEmits(['update:hidden-column-names']);
+const emit = defineEmits(["update:hidden-column-names"]);
 const props = defineProps({
   columns: {
     type: Array,
@@ -62,7 +62,7 @@ const props = defineProps({
   }
 });
 
-const isShowingColumnToggle = ref('');
+const isShowingColumnToggle = ref("");
 const categories = computed(() => [...new Set(props.columns.map(c => c.category)).values()]);
 
 /**
@@ -114,7 +114,7 @@ function toggleColumns(columns, showColumns) {
   } else {
     hiddenColumnNames = [...new Set([...hiddenColumnNames, ...columns.map(c => c.name)])];
   }
-  emit('update:hidden-column-names', hiddenColumnNames);
+  emit("update:hidden-column-names", hiddenColumnNames);
 }
 
 /**
@@ -139,7 +139,7 @@ function toggleColumn(columnName, showColumn) {
     hiddenColumnNames = [...new Set(hiddenColumnNames)];
   }
 
-  emit('update:hidden-column-names', hiddenColumnNames);
+  emit("update:hidden-column-names", hiddenColumnNames);
 }
 </script>
 <style

package/src/components/ActionTable/EmptyTableState.vue

@@ -14,22 +14,22 @@
   </div>
 </template>
 <script setup>
-import { QSpinnerBall } from 'quasar';
+import { QSpinnerBall } from "quasar";
 
 defineProps({
   loading: Boolean,
   saving: Boolean,
   text: {
     type: String,
-    default: 'No records found'
+    default: "No records found"
   },
   loadingText: {
     type: String,
-    default: 'Loading...'
+    default: "Loading..."
   },
   savingText: {
     type: String,
-    default: 'Saving...'
+    default: "Saving..."
   }
 });
 </script>

package/src/components/ActionTable/Filters/CollapsableFiltersSidebar.vue

@@ -15,10 +15,10 @@
   </CollapsableSidebar>
 </template>
 <script setup>
-import { FilterFieldList } from '.';
-import { CollapsableSidebar } from '../../Utility';
+import { FilterFieldList } from ".";
+import { CollapsableSidebar } from "../../Utility";
 
-defineEmits(['update:filter', 'update:show-filters']);
+defineEmits(["update:filter", "update:show-filters"]);
 defineProps({
   name: {
     type: String,

package/src/components/ActionTable/Filters/FilterFieldList.vue

@@ -39,14 +39,14 @@
         />
       </template>
     </div>
-    </QList>
+  </QList>
 </template>
 <script setup>
-import { computed } from 'vue';
-import FilterableField from './FilterableField';
-import FilterFieldItem from './FilterFieldItem';
+import { computed } from "vue";
+import FilterableField from "./FilterableField";
+import FilterFieldItem from "./FilterFieldItem";
 
-const emit = defineEmits(['update:filter']);
+const emit = defineEmits(["update:filter"]);
 const props = defineProps({
   filterFields: {
     type: Array,
@@ -71,6 +71,6 @@ function updateFilter(field, value) {
   if (field.filterBy) {
     fieldFilter = field.filterBy(value);
   }
-  emit('update:filter', { ...props.filter, ...fieldFilter });
+  emit("update:filter", { ...props.filter, ...fieldFilter });
 }
 </script>

package/src/components/ActionTable/Filters/FilterListToggle.vue

@@ -22,10 +22,10 @@
   </div>
 </template>
 <script setup>
-import { computed } from 'vue';
-import { FilterIcon } from '../../../svg';
+import { computed } from "vue";
+import { FilterIcon } from "../../../svg";
 
-defineEmits(['update:show-filters', 'update:filter']);
+defineEmits(["update:show-filters", "update:filter"]);
 const props = defineProps({
   filter: {
     type: Object,

package/src/components/ActionTable/Filters/FilterToolbarLayout.vue

@@ -19,10 +19,10 @@
   </div>
 </template>
 <script setup>
-import { QSeparator } from 'quasar';
-import { FilterListToggle } from '../Filters';
+import { QSeparator } from "quasar";
+import { FilterListToggle } from "../Filters";
 
-defineEmits(['update:show-filters', 'update:filter']);
+defineEmits(["update:show-filters", "update:filter"]);
 defineProps({
   filter: {
     type: Object,

package/src/components/ActionTable/Filters/FilterableField.vue

@@ -110,9 +110,9 @@ import {
   NumberRangeField,
   SelectField,
   SelectWithChildrenField
-} from '../Form/Fields';
+} from "../Form/Fields";
 
-const emit = defineEmits(['update:model-value']);
+const emit = defineEmits(["update:model-value"]);
 const props = defineProps({
   field: {
     type: Object,
@@ -129,15 +129,15 @@ function onUpdate(val) {
   let newVal = val || undefined;
 
   switch (props.field.type) {
-    case 'multi-select':
+    case "multi-select":
       newVal = val.length > 0 ? val : undefined;
       break;
-    case 'single-select':
-    case 'boolean':
+    case "single-select":
+    case "boolean":
       newVal = val === null ? undefined : val;
       break;
   }
 
-  emit('update:model-value', newVal);
+  emit("update:model-value", newVal);
 }
 </script>

package/src/components/ActionTable/Form/Fields/BooleanField.vue

@@ -11,13 +11,13 @@
         :show-name="showName"
         :class="labelClass"
     />
-    </QToggle>
+  </QToggle>
 </template>
 
 <script setup>
-import FieldLabel from './FieldLabel';
+import FieldLabel from "./FieldLabel";
 
-defineEmits(['update:model-value']);
+defineEmits(["update:model-value"]);
 defineProps({
   modelValue: {
     type: [Boolean],
@@ -29,7 +29,7 @@ defineProps({
   },
   labelClass: {
     type: String,
-    default: 'text-sm'
+    default: "text-sm"
   },
   showName: Boolean,
   toggleIndeterminate: Boolean

package/src/components/ActionTable/Form/Fields/ConfirmPasswordField.vue

@@ -10,21 +10,21 @@
 </template>
 
 <script setup>
-import LabeledInput from './LabeledInput';
+import LabeledInput from "./LabeledInput";
 
-defineEmits(['update:model-value']);
+defineEmits(["update:model-value"]);
 const props = defineProps({
   name: {
     type: String,
-    default: 'password_confirmation'
+    default: "password_confirmation"
   },
   label: {
     type: String,
-    default: 'Confirm Password'
+    default: "Confirm Password"
   },
   placeholder: {
     type: String,
-    default: 'Confirm Password'
+    default: "Confirm Password"
   },
   modelValue: {
     type: [String, Number],
@@ -36,13 +36,13 @@ const props = defineProps({
   },
   password: {
     type: String,
-    default: ''
+    default: ""
   },
   disabled: Boolean
 });
 
 const rules = [
   (val) =>
-      val === props.password || 'The password and confirmation do not match'
+      val === props.password || "The password and confirmation do not match"
 ];
 </script>

package/src/components/ActionTable/Form/Fields/DateField.vue

@@ -27,11 +27,11 @@
 </template>
 
 <script setup>
-import { CalendarIcon as DateIcon } from '@heroicons/vue/outline';
-import { computed, ref, watch } from 'vue';
-import { fDate, parseQDate } from '../../../../helpers';
+import { CalendarIcon as DateIcon } from "@heroicons/vue/outline";
+import { computed, ref, watch } from "vue";
+import { fDate, parseQDate } from "../../../../helpers";
 
-const emit = defineEmits(['update:model-value']);
+const emit = defineEmits(["update:model-value"]);
 const props = defineProps({
   modelValue: {
     type: [String, Object],
@@ -45,7 +45,7 @@ const props = defineProps({
 
 const formattedDate = computed(() => {
   if (props.modelValue) {
-    return fDate(parseQDate(props.modelValue || '0000-00-00'));
+    return fDate(parseQDate(props.modelValue || "0000-00-00"));
   }
   return null;
 });
@@ -54,6 +54,6 @@ const date = ref(props.modelValue);
 watch(() => props.modelValue, val => date.value = val);
 
 function onSave() {
-  emit('update:model-value', date.value);
+  emit("update:model-value", date.value);
 }
 </script>

package/src/components/ActionTable/Form/Fields/DateRangeField.vue

@@ -38,11 +38,11 @@
 </template>
 
 <script setup>
-import { CalendarIcon as DateIcon } from '@heroicons/vue/outline';
-import { computed, ref, watch } from 'vue';
-import { fDate, parseQDate, parseQDateTime } from '../../../../helpers';
+import { CalendarIcon as DateIcon } from "@heroicons/vue/outline";
+import { computed, ref, watch } from "vue";
+import { fDate, parseQDate, parseQDateTime } from "../../../../helpers";
 
-const emit = defineEmits(['update:model-value']);
+const emit = defineEmits(["update:model-value"]);
 const props = defineProps({
   modelValue: {
     type: Object,
@@ -60,14 +60,14 @@ const formattedDates = computed(() => {
   if (dateRangeValue.value) {
     if (props.withTime) {
       return {
-        from: fDate(parseQDateTime(dateRangeValue.value.from || '0000-00-00')),
-        to: fDate(parseQDateTime(dateRangeValue.value.to || '9999-12-31'))
+        from: fDate(parseQDateTime(dateRangeValue.value.from || "0000-00-00")),
+        to: fDate(parseQDateTime(dateRangeValue.value.to || "9999-12-31"))
       };
     }
 
     return {
-      from: fDate(parseQDate(dateRangeValue.value.from || '0000-00-00')),
-      to: fDate(parseQDate(dateRangeValue.value.to || '9999-12-31'))
+      from: fDate(parseQDate(dateRangeValue.value.from || "0000-00-00")),
+      to: fDate(parseQDate(dateRangeValue.value.to || "9999-12-31"))
     };
   }
   return {
@@ -89,7 +89,7 @@ function toQDateValue(val) {
 const dateRangeValue = computed(() => {
   let range;
 
-  if (typeof dateRange.value === 'string') {
+  if (typeof dateRange.value === "string") {
     range = {
       from: dateRange.value,
       to: dateRange.value
@@ -101,15 +101,15 @@ const dateRangeValue = computed(() => {
     };
   }
 
-  if (range?.from && range?.to && props.withTime && !range.from.includes('00:00:00')) {
-    range.from += ' 00:00:00';
-    range.to += ' 23:59:59';
+  if (range?.from && range?.to && props.withTime && !range.from.includes("00:00:00")) {
+    range.from += " 00:00:00";
+    range.to += " 23:59:59";
   }
 
   return range;
 });
 
 function onSave() {
-  emit('update:model-value', dateRangeValue.value);
+  emit("update:model-value", dateRangeValue.value);
 }
 </script>

package/src/components/ActionTable/Form/Fields/DateTimeField.vue

@@ -24,11 +24,11 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { fLocalizedDateTime } from '../../../../helpers';
-import DateTimePicker from './DateTimePicker';
+import { ref } from "vue";
+import { fLocalizedDateTime } from "../../../../helpers";
+import DateTimePicker from "./DateTimePicker";
 
-const emit = defineEmits(['update:model-value']);
+const emit = defineEmits(["update:model-value"]);
 const props = defineProps({
   modelValue: {
     type: String,
@@ -36,7 +36,7 @@ const props = defineProps({
   },
   color: {
     type: String,
-    default: 'blue-600'
+    default: "blue-600"
   }
 });
 
@@ -44,7 +44,7 @@ const isShowing = ref(false);
 const dateTime = ref(props.modelValue);
 
 function onSave() {
-  emit('update:model-value', dateTime.value);
+  emit("update:model-value", dateTime.value);
   isShowing.value = false;
 }
 </script>

package/src/components/ActionTable/Form/Fields/DateTimePicker.vue

@@ -26,10 +26,10 @@
   </QPopupProxy>
 </template>
 <script setup>
-import { computed } from 'vue';
-import { dbDateTime, localizedDateTime, remoteDateTime } from '../../../../helpers';
+import { computed } from "vue";
+import { dbDateTime, localizedDateTime, remoteDateTime } from "../../../../helpers";
 
-const emit = defineEmits(['update:modelValue', 'save', 'cancel', 'clear']);
+const emit = defineEmits(["update:modelValue", "save", "cancel", "clear"]);
 const props = defineProps({
   modelValue: {
     type: String,
@@ -37,11 +37,11 @@ const props = defineProps({
   },
   mask: {
     type: String,
-    default: 'YYYY-MM-DD HH:mm'
+    default: "YYYY-MM-DD HH:mm"
   },
   color: {
     type: String,
-    default: 'blue-600'
+    default: "blue-600"
   },
   nullable: Boolean
 });
@@ -52,7 +52,7 @@ const dateTime = computed({
     const newValue = value ? dbDateTime(remoteDateTime(value)) : null;
 
     if (newValue || props.nullable) {
-      emit('update:modelValue', newValue);
+      emit("update:modelValue", newValue);
     }
   }
 });

package/src/components/ActionTable/Form/Fields/EditableDiv.vue

@@ -1,8 +1,8 @@
 <template>
   <div
-    contenteditable
-    class="inline-block hover:bg-blue-light focus:bg-blue-light transition duration-300 outline-none"
-    @input="onInput"
+      contenteditable
+      class="inline-block hover:bg-blue-light focus:bg-blue-light transition duration-300 outline-none"
+      @input="onInput"
   >
     {{ text }}
   </div>

package/src/components/ActionTable/Form/Fields/FieldLabel.vue

@@ -5,8 +5,8 @@
       <template v-if="showName">({{ field?.name }})</template>
     </slot>
     <span
-      v-if="requiredLabel"
-      class="text-red-dark ml-1 text-xs bottom-1 relative"
+        v-if="requiredLabel"
+        class="text-red-dark ml-1 text-xs bottom-1 relative"
     >{{ requiredLabel }}</span>
   </span>
 </template>