quasar-ui-danx 0.2.15 → 0.2.17

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>

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

@@ -15,30 +15,30 @@
         multiple
         @change="onAttachFiles"
     />
-    </QBtn>
+  </QBtn>
 </template>
 <script setup>
-import { PlusIcon } from '@heroicons/vue/outline';
-import { QBtn } from 'quasar';
-import { ref } from 'vue';
-import { FileUpload } from '../../../../helpers';
+import { PlusIcon } from "@heroicons/vue/outline";
+import { QBtn } from "quasar";
+import { ref } from "vue";
+import { FileUpload } from "../../../../helpers";
 
 defineExpose({ upload });
 const emit = defineEmits([
-  'uploading',
-  'file-progress',
-  'file-complete',
-  'complete'
+  "uploading",
+  "file-progress",
+  "file-complete",
+  "complete"
 ]);
 const props = defineProps({
   ...QBtn.props,
   text: {
     type: String,
-    default: 'Add File'
+    default: "Add File"
   },
   locationWaitMessage: {
     type: String,
-    default: 'Waiting for location...'
+    default: "Waiting for location..."
   },
   geolocation: Boolean
 });
@@ -56,17 +56,17 @@ function upload() {
  * @returns {Promise<void>}
  */
 async function onAttachFiles({ target: { files } }) {
-  emit('uploading', files);
+  emit("uploading", files);
   let fileUpload = new FileUpload(files)
       .onProgress(({ file, progress }) => {
         file.progress = progress;
-        emit('file-progress', file);
+        emit("file-progress", file);
       })
       .onComplete(({ file, uploadedFile }) => {
-        emit('file-complete', { file, uploadedFile });
+        emit("file-complete", { file, uploadedFile });
       })
       .onAllComplete(() => {
-        emit('complete', fileUpload.files);
+        emit("complete", fileUpload.files);
       });
 
   if (props.geolocation) {

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

@@ -3,7 +3,7 @@
     <div
         class="cursor-pointer py-2 hover:bg-blue-light flex items-center justify-end"
     >
-      {{ fLocalizedDateTime(modelValue, { empty: 'Never' }) }}
+      {{ fLocalizedDateTime(modelValue, { empty: "Never" }) }}
       <EditIcon class="w-4 font-bold ml-2 text-gray-base" />
       <QPopupEdit
           v-slot="scope"
@@ -23,11 +23,11 @@
   </div>
 </template>
 <script setup>
-import { PencilIcon as EditIcon } from '@heroicons/vue/solid';
-import { fLocalizedDateTime } from '../../../../helpers';
-import DateTimePicker from './DateTimePicker';
+import { PencilIcon as EditIcon } from "@heroicons/vue/solid";
+import { fLocalizedDateTime } from "../../../../helpers";
+import DateTimePicker from "./DateTimePicker";
 
-const emit = defineEmits(['close', 'save', 'update:model-value']);
+const emit = defineEmits(["close", "save", "update:model-value"]);
 defineProps({
   modelValue: {
     type: String,
@@ -37,8 +37,8 @@ defineProps({
 });
 
 function onSave(scope) {
-  emit('update:model-value', scope.value);
-  emit('save', scope.value);
+  emit("update:model-value", scope.value);
+  emit("save", scope.value);
   scope.set();
 }
 </script>

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

@@ -9,9 +9,9 @@
 </template>
 
 <script setup>
-import NumberField from './NumberField';
+import NumberField from "./NumberField";
 
-defineEmits(['update:model-value']);
+defineEmits(["update:model-value"]);
 defineProps({
   modelValue: {
     type: [String, Number],

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

@@ -27,11 +27,11 @@
 </template>
 
 <script setup>
-defineEmits(['update:model-value']);
+defineEmits(["update:model-value"]);
 defineProps({
   type: {
     type: String,
-    default: 'text'
+    default: "text"
   },
   name: {
     type: String,

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

@@ -61,12 +61,12 @@
 </template>
 
 <script setup>
-import { onMounted } from 'vue';
-import { useMultiFileUpload } from '../../../../helpers';
-import { FilePreview } from '../../../Utility';
-import FieldLabel from './FieldLabel';
+import { onMounted } from "vue";
+import { useMultiFileUpload } from "../../../../helpers";
+import { FilePreview } from "../../../Utility";
+import FieldLabel from "./FieldLabel";
 
-const emit = defineEmits(['update:model-value']);
+const emit = defineEmits(["update:model-value"]);
 const props = defineProps({
   modelValue: {
     type: [Object, String],
@@ -87,5 +87,5 @@ onMounted(() => {
     uploadedFiles.value = props.modelValue;
   }
 });
-onComplete(() => emit('update:model-value', uploadedFiles.value));
+onComplete(() => emit("update:model-value", uploadedFiles.value));
 </script>

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

@@ -23,15 +23,15 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue';
-import SelectField from './SelectField';
-import TextField from './TextField';
+import { computed, ref, watch } from "vue";
+import SelectField from "./SelectField";
+import TextField from "./TextField";
 
-const emit = defineEmits(['update:model-value']);
+const emit = defineEmits(["update:model-value"]);
 const props = defineProps({
   modelValue: {
     type: [String, Number, Object],
-    default: ''
+    default: ""
   },
   field: {
     type: Object,
@@ -43,12 +43,12 @@ const selectedFieldName = ref(props.field.defaultOption);
 const searchList = computed(() => props.modelValue && props.modelValue[selectedFieldName.value]);
 const textInput = ref(formatModelValue());
 function onChange() {
-  textInput.value = textInput.value?.replace(/\n/g, ',').replace(/,{2,}/g, ',') || '';
-  emit('update:model-value', textInput.value ? { [selectedFieldName.value]: textInput.value.split(',') } : undefined);
+  textInput.value = textInput.value?.replace(/\n/g, ",").replace(/,{2,}/g, ",") || "";
+  emit("update:model-value", textInput.value ? { [selectedFieldName.value]: textInput.value.split(",") } : undefined);
 }
 
 function formatModelValue() {
-  return Array.isArray(searchList.value) ? searchList.value?.join(',') : '';
+  return Array.isArray(searchList.value) ? searchList.value?.join(",") : "";
 }
 
 watch(() => props.modelValue, () => {

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

@@ -8,21 +8,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'
+    default: "password"
   },
   label: {
     type: String,
-    default: 'Password'
+    default: "Password"
   },
   placeholder: {
     type: String,
-    default: 'Enter Password'
+    default: "Enter Password"
   },
   modelValue: {
     type: [String, Number],
@@ -35,5 +35,5 @@ const props = defineProps({
   disabled: Boolean
 });
 
-const rules = [(val) => val.length >= 8 || 'Please use at least 8 characters'];
+const rules = [(val) => val.length >= 8 || "Please use at least 8 characters"];
 </script>