quasar-ui-danx 0.2.15 → 0.2.17

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);
 }
 
 /**

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

@@ -23,16 +23,16 @@
       >
         <div>{{ child.label }}</div>
         <div class="text-xs text-gray-silver">{{ child.name }}</div>
-        </QCheckbox>
+      </QCheckbox>
     </div>
   </div>
 </template>
 <script setup>
-import { ref, watch } from 'vue';
-import { remove } from '../../../../helpers';
-import SelectField from './SelectField';
+import { ref, watch } from "vue";
+import { remove } from "../../../../helpers";
+import SelectField from "./SelectField";
 
-const emit = defineEmits(['update:model-value']);
+const emit = defineEmits(["update:model-value"]);
 const props = defineProps({
   modelValue: {
     type: Array,
@@ -40,11 +40,11 @@ const props = defineProps({
   },
   label: {
     type: String,
-    default: 'Selection'
+    default: "Selection"
   },
   placeholder: {
     type: String,
-    default: 'Select an option'
+    default: "Select an option"
   },
   options: {
     type: Array,
@@ -68,11 +68,11 @@ function onSelectChild(child) {
   } else {
     selectedChildren.value.push(child.id);
   }
-  emit('update:model-value', selectedChildren.value.length > 0 ? selectedChildren.value : undefined);
+  emit("update:model-value", selectedChildren.value.length > 0 ? selectedChildren.value : undefined);
 }
 function onSelectOption() {
   selectedChildren.value = [];
-  emit('update:model-value', undefined);
+  emit("update:model-value", undefined);
 }
 watch(() => props.modelValue, (value) => {
   selectedOption.value = resolveSelectedOption();

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

@@ -48,12 +48,12 @@
 </template>
 
 <script setup>
-import { onMounted } from 'vue';
-import { useSingleFileUpload } from '../../../../helpers';
-import { FilePreview } from '../../../Utility';
-import FieldLabel from './FieldLabel';
+import { onMounted } from "vue";
+import { useSingleFileUpload } 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],
@@ -68,7 +68,7 @@ const props = defineProps({
   readonly: Boolean
 });
 const { onComplete, onDrop, onFileSelected, uploadedFile, onClear } = useSingleFileUpload();
-onComplete(() => emit('update:model-value', uploadedFile.value));
+onComplete(() => emit("update:model-value", uploadedFile.value));
 
 onMounted(() => {
   if (props.modelValue) {

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

@@ -26,25 +26,25 @@
             :class="labelClass"
         />
       </template>
-      </QInput>
-      <div v-if="readonly">
-        <LabelValueBlock
-            :label="label || field.label"
-            :value="modelValue"
-        />
-      </div>
+    </QInput>
+    <div v-if="readonly">
+      <LabelValueBlock
+          :label="label || field.label"
+          :value="modelValue"
+      />
+    </div>
   </div>
 </template>
 
 <script setup>
-import FieldLabel from './FieldLabel';
-import LabelValueBlock from './LabelValueBlock';
+import FieldLabel from "./FieldLabel";
+import LabelValueBlock from "./LabelValueBlock";
 
-defineEmits(['update:model-value', 'submit']);
+defineEmits(["update:model-value", "submit"]);
 defineProps({
   modelValue: {
     type: [String, Number],
-    default: ''
+    default: ""
   },
   field: {
     type: Object,
@@ -52,7 +52,7 @@ defineProps({
   },
   type: {
     type: String,
-    default: 'text'
+    default: "text"
   },
   label: {
     type: String,
@@ -60,15 +60,15 @@ defineProps({
   },
   labelClass: {
     type: String,
-    default: 'text-sm text-gray-shadow'
+    default: "text-sm text-gray-shadow"
   },
   parentClass: {
     type: String,
-    default: ''
+    default: ""
   },
   inputClass: {
     type: String,
-    default: ''
+    default: ""
   },
   noLabel: Boolean,
   showName: Boolean,

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

@@ -24,11 +24,11 @@
 </template>
 
 <script setup>
-import { default as TinyMceEditor } from '@tinymce/tinymce-vue';
-import { apiKey } from '../../../../vendor/tinymce-config';
-import FieldLabel from './FieldLabel';
+import { default as TinyMceEditor } from "@tinymce/tinymce-vue";
+import { apiKey } from "../../../../vendor/tinymce-config";
+import FieldLabel from "./FieldLabel";
 
-defineEmits(['update:model-value']);
+defineEmits(["update:model-value"]);
 defineProps({
   modelValue: {
     type: [String, Number],

package/src/components/ActionTable/Form/RenderedForm.vue

@@ -20,7 +20,7 @@
   </div>
 </template>
 <script setup>
-import { reactive } from 'vue';
+import { reactive } from "vue";
 import {
   BooleanField,
   DateField,
@@ -31,9 +31,9 @@ import {
   SingleFileField,
   TextField,
   WysiwygField
-} from './Fields';
+} from "./Fields";
 
-const emit = defineEmits(['update:values']);
+const emit = defineEmits(["update:values"]);
 const props = defineProps({
   values: {
     type: Object,
@@ -65,12 +65,12 @@ const mappedFields = props.fields.map((field) => ({
   placeholder: `Enter ${field.label}`,
   ...field,
   component: FORM_FIELD_MAP[field.type],
-  default: field.type === 'BOOLEAN' ? false : ''
+  default: field.type === "BOOLEAN" ? false : ""
 }));
 
 const fieldValues = reactive(props.values || {});
 
 function onInput(key, value) {
-  emit('update:values', { ...fieldValues, [key]: value });
+  emit("update:values", { ...fieldValues, [key]: value });
 }
 </script>

package/src/components/ActionTable/TableSummaryRow.vue

@@ -41,21 +41,21 @@
   </QTr>
 </template>
 <script setup>
-import { XCircleIcon as ClearIcon } from '@heroicons/vue/solid';
-import { QSpinner, QTd, QTr } from 'quasar';
-import { computed } from 'vue';
-import { fNumber } from '../../helpers';
+import { XCircleIcon as ClearIcon } from "@heroicons/vue/solid";
+import { QSpinner, QTd, QTr } from "quasar";
+import { computed } from "vue";
+import { fNumber } from "../../helpers";
 
-defineEmits(['clear']);
+defineEmits(["clear"]);
 const props = defineProps({
   loading: Boolean,
   label: {
     type: String,
-    default: 'Rows'
+    default: "Rows"
   },
   selectedLabel: {
     type: String,
-    default: 'Selected'
+    default: "Selected"
   },
   selectedCount: {
     type: Number,
@@ -86,7 +86,7 @@ const summaryColumns = computed(() => {
 
 function formatValue(column) {
   const value = props.summary[column.name];
-  if (value === undefined) return '';
+  if (value === undefined) return "";
 
   if (column.format) {
     return column.format(value);

package/src/components/ActionTable/listControls.ts

@@ -4,11 +4,11 @@ import { getFilterFromUrl } from "./listHelpers";
 
 interface ListActionsOptions {
     listRoute: Function;
-    summaryRoute?: Function;
-    filterFieldOptionsRoute?: Function;
-    moreRoute?: Function;
-    itemDetailsRoute?: Function;
-    urlPattern?: RegExp;
+    summaryRoute?: Function | null;
+    filterFieldOptionsRoute?: Function | null;
+    moreRoute?: Function | null;
+    itemDetailsRoute?: Function | null;
+    urlPattern?: RegExp | null;
     filterDefaults?: Record<string, any>;
     refreshFilters?: boolean;
 }

package/src/components/ActionTable/listHelpers.ts

@@ -29,7 +29,7 @@ export function mapSortBy(pagination, columns) {
 
     const column = columns.find(c => c.name === pagination.sortBy);
     if (!column) return null;
-    
+
     return [
         {
             column: column.sortBy || column.name,