quasar-ui-danx 0.4.9 → 0.4.12

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.9",
+  "version": "0.4.12",
   "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",

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/FieldLabel.vue

@@ -1,27 +1,30 @@
 <template>
-  <span class="dx-field-label">
+  <div class="dx-field-label">
     <slot>
-      {{ labelText }}
-      <template v-if="showName">({{ field?.name }})</template>
+      <div class="dx-field-label-text">
+        <div class="dx-field-label-label">
+          {{ label }}
+        </div>
+        <div
+          v-if="name"
+          class="dx-field-label-name"
+        >
+          ({{ name }})
+        </div>
+      </div>
     </slot>
     <span
-      v-if="requiredLabel"
+      v-if="required"
       class="dx-field-required"
-    >{{ requiredLabel }}</span>
-  </span>
+    >{{ requiredLabel || "*" }}</span>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import { FormField } from "../../../../types";
-
-const props = defineProps<{
-	field?: FormField;
+defineProps<{
 	label?: string;
-	showName?: boolean;
+	name?: string;
 	required?: boolean;
+	requiredLabel?: string;
 }>();
-
-const labelText = computed(() => props.label || props.field?.label);
-const requiredLabel = computed(() => props.field?.required_group || (props.required || props.field?.required ? "*" : ""));
 </script>

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/LabelValueBlock.vue

@@ -1,22 +1,51 @@
 <template>
   <div>
-    <div class="text-xs font-bold">{{ label }}</div>
-    <div :class="{'mt-2': !dense, 'mt-1': dense, 'text-no-wrap': nowrap}">
-      <slot>{{ value || "-" }}</slot>
+    <div class="text-xs font-bold">
+      {{ label }}
+    </div>
+    <div :class="valueClass">
+      <a
+        v-if="url"
+        target="_blank"
+        :href="url"
+        :class="valueClass"
+      >
+        <slot>{{ formattedValue }}</slot>
+      </a>
+      <template v-else>
+        <slot>{{ formattedValue }}</slot>
+      </template>
     </div>
   </div>
 </template>
-<script setup>
-defineProps({
-  label: {
-    type: String,
-    required: true
-  },
-  value: {
-    type: [String, Number],
-    default: "-"
-  },
-  dense: Boolean,
-  nowrap: Boolean
+<script setup lang="ts">
+import { computed } from "vue";
+import { fBoolean, fNumber } from "../../../../helpers";
+
+export interface LabelValueBlockProps {
+	label: string;
+	value: string | number | boolean;
+	url?: string;
+	dense?: boolean;
+	nowrap?: boolean;
+}
+
+const props = withDefaults(defineProps<LabelValueBlockProps>(), {
+	value: "",
+	url: ""
+});
+
+const valueClass = computed(() => ({ "mt-2": !props.dense, "mt-1": props.dense, "text-no-wrap": props.nowrap }));
+const formattedValue = computed(() => {
+	switch (typeof props.value) {
+		case "boolean":
+			return fBoolean(props.value);
+
+		case "number":
+			return fNumber(props.value);
+
+		default:
+			return props.value || "-";
+	}
 });
 </script>

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/MultiKeywordField.vue

@@ -12,7 +12,6 @@
       :field="field"
       :no-label="!field.label"
       label-class="text-xs font-bold text-zinc-800"
-      parent-class="tight-label"
       input-class="!py-0"
       dense
       type="textarea"
@@ -29,29 +28,29 @@ import TextField from "./TextField";
 
 const emit = defineEmits(["update:model-value"]);
 const props = defineProps({
-  modelValue: {
-    type: [String, Number, Object],
-    default: ""
-  },
-  field: {
-    type: Object,
-    default: null
-  }
+	modelValue: {
+		type: [String, Number, Object],
+		default: ""
+	},
+	field: {
+		type: Object,
+		default: null
+	}
 });
 
 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, () => {
-  textInput.value = formatModelValue();
+	textInput.value = formatModelValue();
 });
 </script>