quasar-ui-danx 0.2.16 → 0.2.18

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,

package/src/components/ActionTable/tableColumns.ts

@@ -1,7 +1,30 @@
 import { computed, ref, watch } from "vue";
 import { getItem, setItem } from "../../helpers";
 
-export function useTableColumns(name, columns) {
+export interface TableColumn {
+    actionMenu?: object,
+    align?: string,
+    category?: string,
+    class?: string | object,
+    field: string,
+    format?: Function,
+    innerClass?: string | object,
+    isSaving?: boolean,
+    label: string,
+    maxWidth?: number,
+    minWidth?: number,
+    name: string,
+    onClick?: Function,
+    required?: boolean,
+    resizeable?: boolean,
+    sortable?: boolean,
+    sortBy?: string,
+    sortByExpression?: string,
+    titleColumns?: string[]
+    vnode?: Function,
+}
+
+export function useTableColumns(name: string, columns: TableColumn[]) {
     const COLUMN_ORDER_KEY = `${name}-column-order`;
     const VISIBLE_COLUMNS_KEY = `${name}-visible-columns`;
     const TITLE_COLUMNS_KEY = `${name}-title-columns`;

package/src/components/AuditHistory/AuditHistoryItem.vue

@@ -31,9 +31,9 @@
   </div>
 </template>
 <script setup>
-import { computed } from 'vue';
-import { fLocalizedDateTime } from '../../helpers';
-import AuditHistoryItemValue from './AuditHistoryItemValue';
+import { computed } from "vue";
+import { fLocalizedDateTime } from "../../helpers";
+import AuditHistoryItemValue from "./AuditHistoryItemValue";
 
 const props = defineProps({
   item: {
@@ -46,7 +46,7 @@ const props = defineProps({
   },
   novaUrl: {
     type: String,
-    default: '/nova'
+    default: "/nova"
   }
 });
 

package/src/components/AuditHistory/AuditHistoryItemValue.vue

@@ -23,8 +23,8 @@
   </div>
 </template>
 <script setup>
-import { fCurrency, fDate, fLocalizedDateTime, fNumber } from '../../helpers';
-import { FilePreview } from '../Utility';
+import { fCurrency, fDate, fLocalizedDateTime, fNumber } from "../../helpers";
+import { FilePreview } from "../Utility";
 
 const props = defineProps({
   type: {
@@ -38,21 +38,21 @@ const props = defineProps({
 });
 
 function format(value) {
-  if (value === null || value === '' || value === undefined) {
-    return '';
+  if (value === null || value === "" || value === undefined) {
+    return "";
   }
 
   switch (props.type) {
-    case 'NUMBER':
+    case "NUMBER":
       return fNumber(value);
-    case 'CURRENCY':
+    case "CURRENCY":
       return fCurrency(value);
-    case 'DATE':
+    case "DATE":
       return fDate(value);
-    case 'DATETIME':
+    case "DATETIME":
       return fLocalizedDateTime(value);
-    case 'BOOLEAN':
-      return value ? 'Yes' : 'No';
+    case "BOOLEAN":
+      return value ? "Yes" : "No";
   }
 
   return value;

package/src/components/DragAndDrop/HandleDraggable.vue

@@ -13,10 +13,10 @@
   </div>
 </template>
 <script setup>
-import { useDebounceFn } from '@vueuse/core';
-import { DragAndDrop } from './dragAndDrop';
+import { useDebounceFn } from "@vueuse/core";
+import { DragAndDrop } from "./dragAndDrop";
 
-const emit = defineEmits(['start', 'end', 'resize']);
+const emit = defineEmits(["start", "end", "resize"]);
 const props = defineProps({
   initialValue: {
     type: Number,
@@ -28,8 +28,8 @@ const props = defineProps({
   },
   direction: {
     type: String,
-    default: 'horizontal',
-    validator: (value) => ['vertical', 'horizontal'].includes(value)
+    default: "horizontal",
+    validator: (value) => ["vertical", "horizontal"].includes(value)
   }
 });
 
@@ -41,13 +41,13 @@ const dragAndDrop = new DragAndDrop()
       hideDragImage: true
     })
     .onDragging(useDebounceFn(() => {
-      emit('resize', {
+      emit("resize", {
         distance: dragAndDrop.getDistance(),
         percent: dragAndDrop.getPercentChange(),
         startDropZoneSize: dragAndDrop.startSize,
         dropZoneSize: dragAndDrop.getDropZoneSize()
       });
     }, 20, { maxWait: 30 }))
-    .onStart(() => emit('start'))
-    .onEnd(() => emit('end'));
+    .onStart(() => emit("start"))
+    .onEnd(() => emit("end"));
 </script>

package/src/components/DragAndDrop/ListItemDraggable.vue

@@ -16,11 +16,11 @@
   </div>
 </template>
 <script setup>
-import { DragHandleDotsIcon as DragHandleIcon } from '../../svg';
-import { SvgImg } from '../Utility';
-import { ListDragAndDrop } from './listDragAndDrop';
+import { DragHandleDotsIcon as DragHandleIcon } from "../../svg";
+import { SvgImg } from "../Utility";
+import { ListDragAndDrop } from "./listDragAndDrop";
 
-const emit = defineEmits(['position', 'update:list-items']);
+const emit = defineEmits(["position", "update:list-items"]);
 const props = defineProps({
   dropZone: {
     type: [Function, String],
@@ -28,8 +28,8 @@ const props = defineProps({
   },
   direction: {
     type: String,
-    default: 'vertical',
-    validator: (value) => ['vertical', 'horizontal'].includes(value)
+    default: "vertical",
+    validator: (value) => ["vertical", "horizontal"].includes(value)
   },
   showHandle: Boolean,
   listItems: {
@@ -42,12 +42,12 @@ const dragAndDrop = new ListDragAndDrop()
     .setDropZone(props.dropZone)
     .setOptions({ showPlaceholder: true, direction: props.direction })
     .onPositionChange((newPosition, oldPosition) => {
-      emit('position', newPosition);
+      emit("position", newPosition);
 
       if (props.listItems) {
         const items = [...props.listItems];
         items.splice(newPosition, 0, items.splice(oldPosition, 1)[0]);
-        emit('update:list-items', items);
+        emit("update:list-items", items);
       }
     });
 </script>