quasar-ui-danx 0.4.10 → 0.4.13

package/index.d.ts

@@ -0,0 +1,7 @@
+declare module "quasar-ui-danx";
+
+export * from "./src/components";
+export * from "./src/config";
+export * from "./src/helpers";
+export * from "./src/svg";
+export * from "./src/types";

package/index.ts

@@ -0,0 +1 @@
+export * from "./src";

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.4.10",
+  "version": "0.4.13",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",
   "type": "module",
-  "main": "dist/danx.es.js",
-  "module": "dist/danx.es.js",
+  "main": "./dist/danx.umd.js",
+  "module": "./dist/danx.es.js",
+  "types": "types/index.d.ts",
   "scripts": {
     "dev": "cd dev && quasar dev && cd ..",
     "build": "vite build",
@@ -17,6 +18,10 @@
     "type": "git",
     "url": "https://github.com/flytedan/quasar-ui-danx"
   },
+  "peerDependencies": {
+    "quasar": "^2.0.0",
+    "vue": "^3.4.21"
+  },
   "devDependencies": {
     "@quasar/extras": "^1.16.4",
     "@types/luxon": "^3.4.2",
@@ -52,7 +57,8 @@
     "danx-icon": "^1.0.2",
     "exifreader": "^4.21.1",
     "gsap": "^3.12.5",
-    "luxon": "^3.4.4"
+    "luxon": "^3.4.4",
+    "yaml": "^2.4.5"
   },
   "browserslist": [
     "last 4 Chrome versions",

package/src/components/ActionTable/ActionMenu.vue

@@ -3,53 +3,48 @@
     class="px-2 flex dx-action-button"
     :items="activeActions"
     :disabled="!hasTarget"
-    :tooltip="!hasTarget ? tooltip : null"
-    :loading="isSaving || loading"
+    :tooltip="!hasTarget ? tooltip : ''"
+    :loading="isSaving || !!loading"
     :loading-component="loadingComponent"
     @action-item="onAction"
   />
 </template>
-<script setup>
+<script setup lang="ts">
 import { computed, ref } from "vue";
+import { ActionTarget, ResourceAction } from "../../types";
 import { PopoverMenu } from "../Utility";
 
-const props = defineProps({
-  actions: {
-    type: Array,
-    required: true
-  },
-  target: {
-    type: [Array, Object],
-    default: () => []
-  },
-  tooltip: {
-    type: String,
-    default: "First select records to perform a batch action"
-  },
-  loading: Boolean,
-  loadingComponent: {
-    type: [Function, Object],
-    default: undefined
-  }
+const emit = defineEmits(["success"]);
+const props = withDefaults(defineProps<{
+	actions: ResourceAction[],
+	target?: ActionTarget,
+	tooltip?: string,
+	loading?: boolean,
+	loadingComponent?: any
+}>(), {
+	target: () => [],
+	tooltip: "First select records to perform a batch action",
+	loadingComponent: undefined
 });
 
 const hasTarget = computed(() => Array.isArray(props.target) ? props.target.length > 0 : !!props.target);
 
 const activeActions = computed(() => props.actions.filter(action => {
-  if (Array.isArray(props.target)) {
-    return action.batchEnabled ? action.batchEnabled(props.target) : true;
-  }
+	if (Array.isArray(props.target)) {
+		return action.batchEnabled ? action.batchEnabled(props.target) : true;
+	}
 
-  return action.enabled ? action.enabled(props.target) : true;
+	return action.enabled ? action.enabled(props.target) : true;
 }));
 
 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.");
-  }
-  isSaving.value = true;
-  await action.trigger(props.target);
-  isSaving.value = false;
+	if (!action.trigger) {
+		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);
+	isSaving.value = false;
+	emit("success", action);
 }
 </script>

package/src/components/ActionTable/ActionTable.vue

@@ -31,6 +31,7 @@
           :label="label"
           :item-count="summary?.count || 0"
           :selected-count="selectedRows.length"
+          :sticky-colspan="summaryColSpan"
           :loading="loadingSummary"
           :summary="summary"
           :columns="tableColumns"
@@ -87,6 +88,7 @@ export interface Props {
 	summary: any;
 	columns: TableColumn[];
 	rowsPerPageOptions?: number[];
+	summaryColSpan?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -94,7 +96,8 @@ const props = withDefaults(defineProps<Props>(), {
 	pagedItems: null,
 	summary: null,
 	loadingSummary: false,
-	rowsPerPageOptions: () => [10, 25, 50, 100]
+	rowsPerPageOptions: () => [10, 25, 50, 100],
+	summaryColSpan: null
 });
 
 const actionTable = ref(null);

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

@@ -3,13 +3,18 @@
     :key="rowProps.key"
     :props="rowProps"
     :style="columnStyle"
+    class="dx-column"
+    :class="column.columnClass"
   >
     <div :style="columnStyle">
       <div
         class="flex items-center flex-nowrap"
-        :class="columnClass"
+        :class="wrapClass"
       >
-        <div class="flex-grow overflow-hidden">
+        <div
+          v-if="!column.hideContent"
+          class="flex-grow overflow-hidden"
+        >
           <a
             v-if="column.onClick"
             :class="column.innerClass"
@@ -25,6 +30,7 @@
           <div
             v-else
             :class="column.innerClass"
+            class="dx-column-text"
           >
             <RenderVnode
               v-if="column.vnode"
@@ -42,7 +48,8 @@
         </div>
         <div
           v-if="column.actionMenu"
-          class="flex flex-shrink-0 pl-2"
+          class="flex flex-shrink-0"
+          :class="{'ml-2': !column.hideContent}"
         >
           <ActionMenu
             class="dx-column-action-menu"
@@ -55,12 +62,13 @@
     </div>
   </QTd>
 </template>
-<script setup>
+<script setup lang="ts">
 import { QTd } from "quasar";
 import { computed } from "vue";
 import { RenderVnode } from "../../Utility";
 import ActionMenu from "../ActionMenu";
 import { TitleColumnFormat } from "./";
+import { TableColumn } from "./../../../types";
 
 const props = defineProps({
 	rowProps: {
@@ -74,7 +82,7 @@ const props = defineProps({
 });
 
 const row = computed(() => props.rowProps.row);
-const column = computed(() => props.rowProps.col);
+const column = computed<TableColumn>(() => props.rowProps.col);
 const value = computed(() => props.rowProps.value);
 const isSaving = computed(() => row.value.isSaving?.value);
 
@@ -86,7 +94,7 @@ const columnStyle = computed(() => {
 	};
 });
 
-const columnClass = computed(() => ({
+const wrapClass = computed(() => ({
 	[column.value.class || ""]: true,
 	"is-saving": isSaving.value,
 	"justify-end": column.value.align === "right",

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

@@ -3,7 +3,7 @@
     :key="rowProps.key"
     :props="rowProps"
     :data-drop-zone="isResizeable && `resize-column-` + column.name"
-    :class="isResizeable && cls['handle-drop-zone']"
+    :class="columnClass"
     :style="columnStyle"
   >
     {{ column.label }}
@@ -17,67 +17,88 @@
     </HandleDraggable>
   </QTh>
 </template>
-<script setup>
+<script setup lang="ts">
 import { QTh } from "quasar";
-import { computed } from "vue";
+import { computed, useCssModule } from "vue";
 import { DragHandleIcon as RowResizeIcon } from "../../../svg";
+import { TableColumn } from "../../../types";
 import { HandleDraggable } from "../../DragAndDrop";
 
 const emit = defineEmits(["update:model-value"]);
 const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true
-  },
-  name: {
-    type: String,
-    required: true
-  },
-  rowProps: {
-    type: Object,
-    required: true
-  }
+	modelValue: {
+		type: Object,
+		required: true
+	},
+	name: {
+		type: String,
+		required: true
+	},
+	rowProps: {
+		type: Object,
+		required: true
+	}
 });
 
-const column = computed(() => props.rowProps.col);
+const column = computed<TableColumn>(() => props.rowProps.col);
 const isResizeable = computed(() => column.value.resizeable);
 
 const columnStyle = computed(() => {
-  const width = props.settings?.width || column.value.width;
-  return {
-    width: width ? `${width}px` : undefined,
-    minWidth: column.value.minWidth ? `${column.value.minWidth}px` : undefined,
-    ...(column.value.headerStyle || {})
-  };
+	const width = props.settings?.width || column.value.width;
+	return {
+		width: width ? `${width}px` : undefined,
+		minWidth: column.value.minWidth ? `${column.value.minWidth}px` : undefined,
+		...(column.value.headerStyle || {})
+	};
 });
 
+const clsModule = useCssModule("cls");
+const columnClass = computed(() => {
+	const colCls = {
+		[clsModule["handle-drop-zone"]]: isResizeable.value,
+		"dx-column-shrink": column.value.shrink
+	};
+
+	const headerClass = column.value.headerClass;
+	if (headerClass) {
+		if (typeof headerClass === "string") {
+			colCls[headerClass] = true;
+		} else {
+			Object.keys(headerClass).forEach((key) => {
+				colCls[key] = headerClass[key];
+			});
+		}
+	}
+
+	return colCls;
+});
 
 function onResizeColumn(val) {
-  const settings = {
-    ...props.modelValue,
-    [column.value.name]: {
-      width: Math.max(Math.min(val.distance + val.startDropZoneSize, column.value.maxWidth || 500), column.value.minWidth || 80)
-    }
-  };
-  emit("update:model-value", settings);
+	const settings = {
+		...props.modelValue,
+		[column.value.name]: {
+			width: Math.max(Math.min(val.distance + val.startDropZoneSize, column.value.maxWidth || 500), column.value.minWidth || 80)
+		}
+	};
+	emit("update:model-value", settings);
 }
 </script>
 
 <style lang="scss" module="cls">
 .handle-drop-zone {
-  .resize-handle {
-    position: absolute;
-    top: 0;
-    right: -.45em;
-    width: .9em;
-    opacity: 0;
-    transition: all .3s;
-  }
+	.resize-handle {
+		position: absolute;
+		top: 0;
+		right: -.45em;
+		width: .9em;
+		opacity: 0;
+		transition: all .3s;
+	}
 
-  &:hover {
-    .resize-handle {
-      opacity: 1;
-    }
-  }
+	&:hover {
+		.resize-handle {
+			opacity: 1;
+		}
+	}
 }
 </style>

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

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <RenderedForm
+      v-bind="renderedFormProps"
+      v-model:values="input"
+      empty-value=""
+      :saving="action.isApplying"
+      @update:values="action.trigger(target, input)"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { ActionTargetItem, AnyObject, Form, ResourceAction } from "../../../types";
+import RenderedForm from "./RenderedForm.vue";
+
+interface ActionFormProps {
+	action: ResourceAction;
+	target: ActionTargetItem;
+	form: Form;
+	noLabel?: boolean;
+	showName?: boolean;
+	disable?: boolean;
+	readonly?: boolean;
+	clearable?: boolean;
+	fieldClass?: string;
+	savingClass?: string;
+}
+
+const props = defineProps<ActionFormProps>();
+const renderedFormProps = {
+	form: props.form,
+	noLabel: props.noLabel,
+	showName: props.showName,
+	disable: props.disable,
+	readonly: props.readonly,
+	clearable: props.clearable,
+	fieldClass: props.fieldClass,
+	savingClass: props.savingClass
+};
+
+const input: AnyObject = ref({ ...props.target });
+const fieldStatus: AnyObject = {};
+
+// Only update field values from target changes when the field is not already being saved
+watch(() => props.target, (target: ActionTargetItem) => {
+	if (!target) return;
+
+	for (let field of props.form.fields) {
+		if (!fieldStatus[field.name]?.isSaving) {
+			input.value[field.name] = target[field.name];
+		}
+	}
+});
+</script>

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

@@ -3,12 +3,13 @@
     class="danx-edit-on-click-text-field flex flex-nowrap items-center rounded overflow-ellipsis"
     :class="{[props.class]: true, 'is-readonly': readonly, 'cursor-pointer': !isEditing && !readonly}"
     @click="onEdit"
+    @focusout="isEditing = false"
   >
     <div
       ref="editableBox"
       :contenteditable="!readonly && isEditing"
       class="flex-grow p-2 rounded outline-none border-none"
-      :class="{[editingClass]: isEditing}"
+      :class="{[editingClass]: isEditing, [inputClass]: true}"
       @input="text = $event.target.innerText"
     >
       {{ text }}
@@ -33,15 +34,20 @@
 import { FaSolidCheck as DoneIcon, FaSolidPencil as EditIcon } from "danx-icon";
 import { nextTick, ref } from "vue";
 
-export interface Props {
-	class?: "hover:bg-slate-300",
-	editingClass?: "bg-slate-500";
+export interface EditOnClickTextFieldProps {
+	class?: string;
+	editingClass?: string;
+	inputClass?: string;
 	readonly?: boolean;
 }
 
 const editableBox = ref<HTMLElement | null>(null);
 const text = defineModel({ type: String });
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<EditOnClickTextFieldProps>(), {
+	class: "hover:bg-slate-300",
+	editingClass: "bg-slate-500",
+	inputClass: "whitespace-normal"
+});
 const isEditing = ref(false);
 function onEdit() {
 	if (props.readonly) return;

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

@@ -62,6 +62,7 @@ function upload() {
 async function onAttachFiles({ target: { files } }) {
 	emit("uploading", files);
 	let fileUpload = new FileUpload(files)
+		.prepare()
 		.onProgress(({ file, progress }) => {
 			file.progress = progress;
 			emit("file-progress", file);

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

@@ -20,7 +20,7 @@
       @change="onFilesSelected"
     >
 
-    <div class="max-w-[50em] flex items-stretch justify-start">
+    <div class="flex items-stretch justify-start">
       <FilePreview
         v-for="file in uploadedFiles"
         :key="'file-upload-' + file.id"

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

@@ -82,7 +82,6 @@ function onInput(value) {
 			number = Math.min(number, props.max);
 		}
 
-		console.log("formattinged", number, value);
 		numberVal.value = format(number);
 	}
 

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

@@ -62,32 +62,36 @@
         </QTab>
       </QTabs>
     </div>
-    <div
+    <template
       v-for="(field, index) in mappedFields"
       :key="field.id"
-      :class="{ 'mt-4': index > 0, [fieldClass]: true }"
     >
-      <RenderVnode
-        v-if="field.vnode"
-        :vnode="field.vnode"
-        :field="field"
-        :props="getVnodeProps(field)"
-        @update:model-value="onInput(field.name, $event)"
-      />
-      <Component
-        :is="field.component"
-        :key="field.name + '-' + currentVariation"
-        :model-value="getFieldValue(field.name)"
-        :field="field"
-        :label="field.label || undefined"
-        :no-label="noLabel"
-        :show-name="showName"
-        :clearable="field.clearable || clearable"
-        :disable="disable"
-        :readonly="readonly"
-        @update:model-value="onInput(field.name, $event)"
-      />
-    </div>
+      <div
+        v-show="isFieldEnabled(field)"
+        :class="{ 'mt-4': index > 0, [fieldClass]: true }"
+      >
+        <RenderVnode
+          v-if="field.vnode"
+          :vnode="field.vnode"
+          :props="getVnodeProps(field)"
+          :params="fieldInputs"
+          @update:model-value="onInput(field.name, $event)"
+        />
+        <Component
+          :is="field.component"
+          :key="field.name + '-' + currentVariation"
+          :model-value="getFieldValue(field.name)"
+          :field="field"
+          :label="field.label || undefined"
+          :no-label="noLabel"
+          :show-name="showName"
+          :clearable="field.clearable || clearable"
+          :disable="disable"
+          :readonly="readonly"
+          @update:model-value="onInput(field.name, $event)"
+        />
+      </div>
+    </template>
     <div
       v-if="savedAt"
       :class="savingClass"
@@ -136,7 +140,7 @@ import { ExclamationCircleIcon as MissingIcon, PencilIcon as EditIcon } from "@h
 import { computed, ref } from "vue";
 import { fDateTime, FlashMessages, incrementName, replace } from "../../../helpers";
 import { TrashIcon as RemoveIcon } from "../../../svg";
-import { Form, FormFieldValue } from "../../../types";
+import { AnyObject, FormFieldValue, RenderedFormProps } from "../../../types";
 import { ConfirmDialog, RenderVnode } from "../../Utility";
 import {
 	BooleanField,
@@ -150,28 +154,12 @@ import {
 	WysiwygField
 } from "./Fields";
 
-export interface RenderedFormProps {
-	values?: FormFieldValue[] | object;
-	form: Form;
-	noLabel?: boolean;
-	showName?: boolean;
-	disable?: boolean;
-	readonly?: boolean;
-	saving?: boolean;
-	clearable?: boolean;
-	emptyValue?: string | number | boolean;
-	canModifyVariations?: boolean;
-	fieldClass?: string;
-	savingClass?: string;
-	savedAt?: string;
-}
-
 const props = withDefaults(defineProps<RenderedFormProps>(), {
 	values: null,
 	emptyValue: undefined,
 	fieldClass: "",
 	savingClass: "text-sm text-slate-500 justify-end mt-4",
-	savedAt: null
+	savedAt: undefined
 });
 
 const emit = defineEmits(["update:values"]);
@@ -190,9 +178,9 @@ const FORM_FIELD_MAP = {
 
 const mappedFields = props.form.fields.map((field) => ({
 	placeholder: `Enter ${field.label}`,
+	default: field.type === "BOOLEAN" ? false : "",
 	...field,
-	component: field.component || FORM_FIELD_MAP[field.type],
-	default: field.type === "BOOLEAN" ? false : ""
+	component: field.component || FORM_FIELD_MAP[field.type]
 }));
 
 const fieldResponses = computed(() => {
@@ -201,6 +189,24 @@ const fieldResponses = computed(() => {
 	return Object.entries(props.values).map(([name, value]) => ({ name, value, variation: "" }));
 });
 
+const fieldInputs = computed(() => {
+	const inputs: AnyObject = {};
+	for (const field of mappedFields) {
+		inputs[field.name] = getFieldValue(field.name);
+	}
+	return inputs;
+});
+
+function isFieldEnabled(field) {
+	if (field.enabled === undefined) return true;
+
+	if (typeof field.enabled === "function") {
+		return field.enabled(fieldInputs.value);
+	}
+
+	return field.enabled;
+}
+
 function getVnodeProps(field) {
 	return {
 		modelValue: getFieldValue(field.name),
@@ -226,16 +232,16 @@ const currentVariation = ref(variationNames.value[0] || "");
 const newVariationName = ref("");
 const variationToEdit = ref<boolean | string>(false);
 const variationToDelete = ref("");
-const canAddVariation = computed(() => props.canModifyVariations && !props.readonly && !props.disable && variationNames.value.length < props.form.variations);
+const canAddVariation = computed(() => props.canModifyVariations && !props.readonly && !props.disable && variationNames.value.length < (props.form.variations || 0));
 
-function getFieldResponse(name, variation: string = undefined) {
+function getFieldResponse(name: string, variation?: string) {
 	if (!fieldResponses.value) return undefined;
 	return fieldResponses.value.find((fr: FormFieldValue) => fr.variation === (variation !== undefined ? variation : currentVariation.value) && fr.name === name);
 }
-function getFieldValue(name) {
+function getFieldValue(name: string) {
 	return getFieldResponse(name)?.value;
 }
-function onInput(name, value) {
+function onInput(name: string, value: any) {
 	const fieldResponse = getFieldResponse(name);
 	const newFieldResponse = {
 		name,
@@ -291,11 +297,12 @@ function updateValues(values: FormFieldValue[]) {
 	let updatedValues: FormFieldValue[] | object = values;
 
 	if (!Array.isArray(props.values)) {
-		updatedValues = values.reduce((acc, v) => {
+		updatedValues = values.reduce((acc: AnyObject, v) => {
 			acc[v.name] = v.value;
 			return acc;
 		}, {});
 	}
+
 	emit("update:values", updatedValues);
 }
 
@@ -311,8 +318,8 @@ function onRemoveVariation(name: string) {
 	variationToDelete.value = "";
 }
 
-function isVariationFormComplete(variation) {
-	const requiredGroups = {};
+function isVariationFormComplete(variation: string) {
+	const requiredGroups: AnyObject = {};
 	return props.form.fields.filter(r => r.required || r.required_group).every((field) => {
 		const fieldResponse = getFieldResponse(field.name, variation);
 		const hasValue = !!fieldResponse && fieldResponse.value !== null;

package/src/components/ActionTable/Form/index.ts

@@ -1,3 +1,4 @@
 export * from "./Fields";
 export * from "./Utilities";
+export { default as ActionForm } from "./ActionForm.vue";
 export { default as RenderedForm } from "./RenderedForm.vue";