quasar-ui-danx 0.2.16 → 0.2.17

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>

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

@@ -16,20 +16,20 @@
           :show-name="showName"
       />
     </template>
-    </QInput>
+  </QInput>
 </template>
 
 <script setup>
-import { useDebounceFn } from '@vueuse/core';
-import { computed, nextTick, ref, watch } from 'vue';
-import { fNumber } from '../../../../helpers';
-import FieldLabel from './FieldLabel';
+import { useDebounceFn } from "@vueuse/core";
+import { computed, nextTick, ref, watch } from "vue";
+import { fNumber } from "../../../../helpers";
+import FieldLabel from "./FieldLabel";
 
-const emit = defineEmits(['update:model-value', 'update']);
+const emit = defineEmits(["update:model-value", "update"]);
 const props = defineProps({
   modelValue: {
     type: [String, Number],
-    default: ''
+    default: ""
   },
   precision: {
     type: Number,
@@ -45,7 +45,7 @@ const props = defineProps({
   },
   inputClass: {
     type: String,
-    default: ''
+    default: ""
   },
   delay: {
     type: Number,
@@ -59,47 +59,47 @@ const props = defineProps({
 const numberVal = ref(format(props.modelValue));
 watch(() => props.modelValue, () => numberVal.value = format(props.modelValue));
 
-const fieldOptions = computed(() => props.field || { label: props.label || '', placeholder: '', id: '' });
+const fieldOptions = computed(() => props.field || { label: props.label || "", placeholder: "", id: "" });
 
 function format(number) {
-  if (!number && number !== 0 && number !== '0') return number;
+  if (!number && number !== 0 && number !== "0") return number;
 
-  const minimumFractionDigits = Math.min(props.precision, ('' + number).split('.')[1]?.length || 0);
+  const minimumFractionDigits = Math.min(props.precision, ("" + number).split(".")[1]?.length || 0);
   let options = {
     minimumFractionDigits
   };
 
   if (props.currency) {
     options = {
-      style: 'currency',
-      currency: 'USD',
+      style: "currency",
+      currency: "USD",
       minimumFractionDigits
     };
   }
   return fNumber(number, options);
 }
 
-const onUpdateDebounced = useDebounceFn((val) => emit('update', val), props.delay);
+const onUpdateDebounced = useDebounceFn((val) => emit("update", val), props.delay);
 
 function onInput(value) {
-  let number = '';
+  let number = "";
 
   // Prevent invalid characters
   if (value.match(/[^\d.,$]/)) {
     const oldVal = numberVal.value;
     // XXX: To get QInput to show only the value we want
-    numberVal.value += ' ';
+    numberVal.value += " ";
     return nextTick(() => numberVal.value = oldVal);
   }
 
-  if (value !== '') {
-    value = value.replace(/[^\d.]/g, '');
+  if (value !== "") {
+    value = value.replace(/[^\d.]/g, "");
     number = Number(value);
     numberVal.value = format(number);
   }
 
-  number = number === '' ? undefined : number;
-  emit('update:model-value', number);
+  number = number === "" ? undefined : number;
+  emit("update:model-value", number);
 
   // Delay the change event, so we only see the value after the user has finished
   onUpdateDebounced(number);

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

@@ -37,14 +37,14 @@
 </template>
 
 <script setup>
-import { CurrencyDollarIcon as CurrencyIcon, HashtagIcon as NumberIcon } from '@heroicons/vue/outline';
-import { useDebounceFn } from '@vueuse/core';
-import { computed, ref, watch } from 'vue';
-import { fCurrency, fNumber, fPercent } from '../../../../helpers';
-import { PercentIcon } from '../../../../svg';
-import NumberField from './NumberField';
+import { CurrencyDollarIcon as CurrencyIcon, HashtagIcon as NumberIcon } from "@heroicons/vue/outline";
+import { useDebounceFn } from "@vueuse/core";
+import { computed, ref, watch } from "vue";
+import { fCurrency, fNumber, fPercent } from "../../../../helpers";
+import { PercentIcon } from "../../../../svg";
+import NumberField from "./NumberField";
 
-const emit = defineEmits(['update:model-value']);
+const emit = defineEmits(["update:model-value"]);
 const props = defineProps({
   modelValue: {
     type: Object,
@@ -68,28 +68,28 @@ const props = defineProps({
 
 const symbol = computed(() => {
   if (props.currency) {
-    return '$';
+    return "$";
   } else if (props.percent) {
-    return '%';
+    return "%";
   } else {
-    return '';
+    return "";
   }
 });
 const minField = computed(() => {
   return {
-    id: 'min-field',
-    name: 'from',
-    label: 'Min' + symbol.value,
-    placeholder: '0'
+    id: "min-field",
+    name: "from",
+    label: "Min" + symbol.value,
+    placeholder: "0"
   };
 });
 
 const maxField = computed(() => {
   return {
-    id: 'max-field',
-    name: 'to',
-    label: 'Max' + symbol.value,
-    placeholder: 'No Limit'
+    id: "max-field",
+    name: "to",
+    label: "Max" + symbol.value,
+    placeholder: "No Limit"
   };
 });
 
@@ -112,7 +112,7 @@ setRange(props.modelValue || { from: undefined, to: undefined });
  * @returns {string}
  */
 function formatNum(num) {
-  if (num === undefined) return 'No Limit';
+  if (num === undefined) return "No Limit";
   if (props.currency) {
     return fCurrency(num);
   }
@@ -134,7 +134,7 @@ const onSave = useDebounceFn(() => {
       from: (range.value.from ? range.value.from * multiplier : undefined),
       to: (range.value.to ? range.value.to * multiplier : undefined)
     };
-    emit('update:model-value', newVal);
+    emit("update:model-value", newVal);
   }
 }, props.debounce);
 </script>

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

@@ -53,15 +53,15 @@
           <slot name="placeholder">{{ placeholder }}</slot>
         </template>
       </slot>
-      </QChip>
+    </QChip>
   </div>
 </template>
 
 <script setup>
-import { computed, ref } from 'vue';
-import { ContentDrawer } from '../../../Utility';
+import { computed, ref } from "vue";
+import { ContentDrawer } from "../../../Utility";
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(["update:modelValue"]);
 const props = defineProps({
   modelValue: {
     type: [Object, String, Array, null],
@@ -74,18 +74,18 @@ const props = defineProps({
   multiple: Boolean,
   label: {
     type: String,
-    default: 'Select'
+    default: "Select"
   },
   placeholder: {
     type: String,
-    default: 'All'
+    default: "All"
   }
 });
 
 const showDrawer = ref(false);
 const formattedOptions = computed(() =>
     props.options.map((opt) =>
-        typeof opt === 'string'
+        typeof opt === "string"
             ? {
               label: opt,
               value: opt
@@ -131,6 +131,6 @@ function toggleSelect(option) {
     }
   }
 
-  emit('update:modelValue', selection);
+  emit("update:modelValue", selection);
 }
 </script>

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

@@ -41,13 +41,13 @@
                 :key="'selected-' + chipOption.label"
                 class="!mr-1"
             >{{ chipOption.label }}
-              </QChip>
-              <QChip
-                  v-if="selectedOptions.length > chipOptions.length"
-                  class="!mr-1"
-              >
-                +{{ selectedOptions.length - chipOptions.length }}
-                </QChip>
+            </QChip>
+            <QChip
+                v-if="selectedOptions.length > chipOptions.length"
+                class="!mr-1"
+            >
+              +{{ selectedOptions.length - chipOptions.length }}
+            </QChip>
           </template>
           <template v-else>
             {{ placeholder }}
@@ -59,15 +59,15 @@
         >{{ selectedLabel }}
         </div>
       </template>
-      </QSelect>
+    </QSelect>
   </div>
 </template>
 <script setup>
-import { ChevronDownIcon as DropDownIcon } from '@heroicons/vue/outline';
-import { QSelect } from 'quasar';
-import { computed, isRef, nextTick, ref } from 'vue';
+import { ChevronDownIcon as DropDownIcon } from "@heroicons/vue/outline";
+import { QSelect } from "quasar";
+import { computed, isRef, nextTick, ref } from "vue";
 
-const emit = defineEmits(['update:model-value', 'search', 'update']);
+const emit = defineEmits(["update:model-value", "search", "update"]);
 const props = defineProps({
   ...QSelect.props,
   modelValue: {
@@ -76,7 +76,7 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: ''
+    default: ""
   },
   selectionLabel: {
     type: String,
@@ -88,11 +88,11 @@ const props = defineProps({
   },
   inputClass: {
     type: String,
-    default: ''
+    default: ""
   },
   selectionClass: {
     type: String,
-    default: ''
+    default: ""
   },
   options: {
     type: Array,
@@ -148,10 +148,10 @@ const selectedValue = computed(() => {
   if (props.multiple) {
     const arrVal = Array.isArray(props.modelValue) ? props.modelValue : [];
     return arrVal.map((v) => {
-      return v === null ? '__null__' : v;
+      return v === null ? "__null__" : v;
     }) || [];
   } else {
-    return props.modelValue === null ? '__null__' : props.modelValue;
+    return props.modelValue === null ? "__null__" : props.modelValue;
   }
 });
 
@@ -165,7 +165,7 @@ const selectedOptions = computed(() => {
     values = (values || values === 0) ? [values] : [];
   }
   return computedOptions.value.filter((o) => {
-    return values.includes(o.value) || values.map(v => typeof v === 'object' && v.id).includes(o.value?.id);
+    return values.includes(o.value) || values.map(v => typeof v === "object" && v.id).includes(o.value?.id);
   });
 });
 
@@ -175,10 +175,10 @@ const selectedOptions = computed(() => {
  * @type {ComputedRef<unknown>}
  */
 const selectedLabel = computed(() => {
-  if (props.filterable && isShowing.value) return '';
+  if (props.filterable && isShowing.value) return "";
 
   if (!selectedOptions.value || selectedOptions.value.length === 0) {
-    return props.placeholder || '(Select Option)';
+    return props.placeholder || "(Select Option)";
   }
   return selectedOptions.value[0].selectionLabel;
 });
@@ -197,13 +197,13 @@ const chipOptions = computed(() => {
  * @returns {*|string}
  */
 function resolveLabel(option) {
-  if (typeof option === 'string') {
+  if (typeof option === "string") {
     return option;
   }
-  if (typeof props.optionLabel === 'string') {
+  if (typeof props.optionLabel === "string") {
     return option[props.optionLabel];
   }
-  if (typeof props.optionLabel === 'function') {
+  if (typeof props.optionLabel === "function") {
     return props.optionLabel(option);
   }
   return option?.label;
@@ -216,13 +216,13 @@ function resolveLabel(option) {
  * @returns {*|{default: null, type: String | StringConstructor}|string}
  */
 function resolveSelectionLabel(option) {
-  if (typeof option === 'string') {
+  if (typeof option === "string") {
     return option;
   }
-  if (typeof props.selectionLabel === 'string') {
+  if (typeof props.selectionLabel === "string") {
     return option[props.selectionLabel];
   }
-  if (typeof props.selectionLabel === 'function') {
+  if (typeof props.selectionLabel === "function") {
     return props.selectionLabel(option);
   }
   return option?.selectionLabel || option?.label;
@@ -234,17 +234,17 @@ function resolveSelectionLabel(option) {
  * @returns {string|*|string}
  */
 function resolveValue(option) {
-  if (typeof option === 'string') {
+  if (typeof option === "string") {
     return option;
   }
   let value = option.value;
-  if (typeof props.optionValue === 'string') {
+  if (typeof props.optionValue === "string") {
     value = option[props.optionValue];
-  } else if (typeof props.optionValue === 'function') {
+  } else if (typeof props.optionValue === "function") {
     value = props.optionValue(option);
   }
   // Note the __null__ special case here. See the onUpdate function for more details
-  return value === null ? '__null__' : value;
+  return value === null ? "__null__" : value;
 }
 
 /**
@@ -255,13 +255,13 @@ function resolveValue(option) {
  */
 function onUpdate(value) {
   if (Array.isArray(value)) {
-    value = value.map((v) => v === '__null__' ? null : v);
+    value = value.map((v) => v === "__null__" ? null : v);
   }
 
-  value = value === '__null__' ? null : value;
+  value = value === "__null__" ? null : value;
 
-  emit('update', value);
-  emit('update:model-value', value);
+  emit("update", value);
+  emit("update:model-value", value);
 }
 
 /** XXX: This tells us when we should apply the filter. QSelect likes to trigger a new filter everytime you open the dropdown
@@ -295,8 +295,8 @@ async function onFilter(val, update) {
  * See the onUpdate function for more details
  */
 function onClear() {
-  emit('update:model-value', undefined);
-  emit('update', undefined);
+  emit("update:model-value", undefined);
+  emit("update", undefined);
 }
 
 /**