quasar-ui-danx 0.4.82 → 0.4.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.4.82",
+  "version": "0.4.86",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",

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

@@ -5,7 +5,7 @@
       :contenteditable="readonly ? 'false' : 'true'"
       class="relative inline-block transition duration-300 outline-none outline-offset-0 border-none rounded-sm z-10 min-w-10 min-h-10"
       :style="{minWidth, minHeight}"
-      :class="contentClass"
+      :class="contentClassComputed"
       @input="onInput"
       @focusin="hasFocus = true"
       @focusout="hasFocus = false"
@@ -32,6 +32,7 @@ const props = withDefaults(defineProps<{
 	debounceDelay?: number;
 	readonly?: boolean;
 	placeholder?: string;
+	contentClass?: string;
 }>(), {
 	modelValue: "",
 	// NOTE: You must safe-list required colors in tailwind.config.js
@@ -39,7 +40,8 @@ const props = withDefaults(defineProps<{
 	color: "blue-200",
 	textColor: "blue-900",
 	debounceDelay: 1000,
-	placeholder: "Enter Text..."
+	placeholder: "Enter Text...",
+	contentClass: ""
 });
 
 const text = ref(props.modelValue);
@@ -80,12 +82,13 @@ function onInput(e) {
 	debouncedChange();
 }
 
-const contentClass = computed(() => [
+const contentClassComputed = computed(() => [
 	...(props.readonly ? [] : [
 		`hover:bg-${props.color} focus:bg-${props.color}`,
 		`hover:text-${props.textColor} focus:text-${props.textColor}`,
 		`hover:outline-${props.color} focus:outline-${props.color}`,
-		"focus:outline-4 hover:outline-4"
+		"focus:outline-4 hover:outline-4",
+		props.contentClass || ""
 	]),
 	text.value ? "" : "!bg-none"
 ]);

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

@@ -80,43 +80,61 @@ import { FormField, UploadedFile } from "../../../../types";
 import { FilePreview } from "../../../Utility";
 import FieldLabel from "./FieldLabel";
 
-const emit = defineEmits(["update:model-value"]);
+const emit = defineEmits(["update:model-value", "uploading", "complete"]);
 const props = withDefaults(defineProps<{
-	modelValue?: UploadedFile[];
-	field?: FormField;
-	label?: string;
-	showName?: boolean;
-	disabled?: boolean;
-	readonly?: boolean;
-	width?: number | string;
-	height?: number | string;
-	addIconClass?: string;
-	filePreviewClass?: string;
-	filePreviewBtnSize?: string;
-	showTranscodes?: boolean;
+  modelValue?: UploadedFile[];
+  field?: FormField;
+  label?: string;
+  showName?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  width?: number | string;
+  height?: number | string;
+  addIconClass?: string;
+  filePreviewClass?: string;
+  filePreviewBtnSize?: string;
+  showTranscodes?: boolean;
 }>(), {
-	modelValue: null,
-	field: null,
-	label: "",
-	width: 128,
-	height: 128,
-	addIconClass: "w-10",
-	filePreviewClass: "rounded-2xl",
-	filePreviewBtnSize: "sm"
+  modelValue: null,
+  field: null,
+  label: "",
+  width: 128,
+  height: 128,
+  addIconClass: "w-10",
+  filePreviewClass: "rounded-2xl",
+  filePreviewBtnSize: "sm"
 });
 
-const { onComplete, onDrop, onFilesSelected, uploadedFiles, clearUploadedFiles, onRemove } = useMultiFileUpload();
+const {
+  onComplete,
+  onDrop,
+  onFilesChange,
+  onFilesSelected,
+  uploadedFiles,
+  clearUploadedFiles,
+  onRemove
+} = useMultiFileUpload();
 onMounted(() => {
-	if (props.modelValue) {
-		uploadedFiles.value = props.modelValue;
-	}
+  if (props.modelValue) {
+    uploadedFiles.value = props.modelValue;
+  }
+});
+
+onFilesChange(() => {
+  // Check if the files are currently uploading
+  if (uploadedFiles.value.some(file => file.progress < 1)) {
+    emit("uploading");
+  }
+});
+onComplete(() => {
+  emit("update:model-value", uploadedFiles.value);
+  emit("complete");
 });
-onComplete(() => emit("update:model-value", uploadedFiles.value));
 
 const styleSize = computed(() => {
-	return {
-		width: typeof props.width === "number" ? `${props.width}px` : props.width,
-		height: typeof props.height === "number" ? `${props.height}px` : props.height
-	};
+  return {
+    width: typeof props.width === "number" ? `${props.width}px` : props.width,
+    height: typeof props.height === "number" ? `${props.height}px` : props.height
+  };
 });
 </script>

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

@@ -18,6 +18,7 @@
         :placeholder="placeholder || (placeholder === '' ? '' : `Enter ${label}`)"
         outlined
         dense
+        name=""
         :readonly="readonly"
         :autogrow="autogrow"
         :disable="disabled"
@@ -66,15 +67,15 @@ import FieldLabel from "./FieldLabel";
 
 defineEmits(["update:model-value", "submit"]);
 withDefaults(defineProps<TextFieldProps>(), {
-	modelValue: "",
-	field: null,
-	type: "text",
-	label: "",
-	labelClass: "",
-	inputClass: "",
-	maxLength: null,
-	rows: 3,
-	debounce: 0,
-	placeholder: null
+  modelValue: "",
+  field: null,
+  type: "text",
+  label: "",
+  labelClass: "",
+  inputClass: "",
+  maxLength: null,
+  rows: 3,
+  debounce: 0,
+  placeholder: null
 });
 </script>

package/src/components/Utility/Buttons/ActionButton.vue

@@ -56,201 +56,221 @@
 </template>
 <script setup lang="ts">
 import {
-	FaSolidArrowRotateRight as RestartIcon,
-	FaSolidArrowsRotate as RefreshIcon,
-	FaSolidCircleCheck as ConfirmIcon,
-	FaSolidCircleXmark as CancelIcon,
-	FaSolidCodeMerge as MergeIcon,
-	FaSolidCopy as CopyIcon,
-	FaSolidFileExport as ExportIcon,
-	FaSolidFileImport as ImportIcon,
-	FaSolidFolder as FolderIcon,
-	FaSolidMinus as MinusIcon,
-	FaSolidPause as PauseIcon,
-	FaSolidPencil as EditIcon,
-	FaSolidPlay as PlayIcon,
-	FaSolidPlus as CreateIcon,
-	FaSolidStop as StopIcon,
-	FaSolidTrash as TrashIcon
+  FaSolidArrowRotateRight as RestartIcon,
+  FaSolidArrowsRotate as RefreshIcon,
+  FaSolidBackward as BackIcon,
+  FaSolidCheck as CheckIcon,
+  FaSolidCircleCheck as ConfirmIcon,
+  FaSolidCircleXmark as CancelIcon,
+  FaSolidClock as ClockIcon,
+  FaSolidCodeMerge as MergeIcon,
+  FaSolidCopy as CopyIcon,
+  FaSolidEye as ViewIcon,
+  FaSolidFileExport as ExportIcon,
+  FaSolidFileImport as ImportIcon,
+  FaSolidFloppyDisk as SaveIcon,
+  FaSolidFolder as FolderIcon,
+  FaSolidMinus as MinusIcon,
+  FaSolidPause as PauseIcon,
+  FaSolidPencil as EditIcon,
+  FaSolidPlay as PlayIcon,
+  FaSolidPlus as CreateIcon,
+  FaSolidStop as StopIcon,
+  FaSolidTrash as TrashIcon
 } from "danx-icon";
 import { computed, ref } from "vue";
 import { ActionTarget, ResourceAction } from "../../../types";
 
 export interface ActionButtonProps {
-	type?: "trash" | "create" | "edit" | "copy" | "folder" | "play" | "stop" | "pause" | "refresh" | "restart" | "confirm" | "cancel" | "export" | "import" | "minus" | "merge";
-	color?: "red" | "blue" | "blue-invert" | "sky" | "sky-invert" | "green" | "green-invert" | "lime" | "white" | "gray" | "yellow" | "orange";
-	size?: "xxs" | "xs" | "sm" | "md" | "lg";
-	icon?: object | string;
-	iconClass?: string;
-	label?: string | number;
-	labelClass?: string;
-	tooltip?: string;
-	saving?: boolean;
-	action?: ResourceAction;
-	target?: ActionTarget;
-	input?: object;
-	disabled?: boolean;
-	disabledClass?: string;
-	confirm?: boolean;
-	confirmText?: string;
-	tooltipClass?: string;
+  type?: "save" | "trash" | "back" | "create" | "edit" | "copy" | "folder" | "play" | "stop" | "pause" | "refresh" | "restart" | "confirm" | "cancel" | "export" | "import" | "minus" | "merge" | "check" | "clock" | "view";
+  color?: "red" | "blue" | "blue-invert" | "sky" | "sky-invert" | "green" | "green-invert" | "lime" | "white" | "gray" | "slate" | "slate-invert" | "yellow" | "orange";
+  size?: "xxs" | "xs" | "sm" | "md" | "lg";
+  icon?: object | string;
+  iconClass?: string;
+  label?: string | number;
+  labelClass?: string;
+  tooltip?: string;
+  saving?: boolean;
+  action?: ResourceAction;
+  target?: ActionTarget;
+  input?: object;
+  disabled?: boolean;
+  disabledClass?: string;
+  confirm?: boolean;
+  confirmText?: string;
+  tooltipClass?: string;
 }
 
 const emit = defineEmits(["success", "error", "always"]);
 const props = withDefaults(defineProps<ActionButtonProps>(), {
-	type: null,
-	color: null,
-	icon: null,
-	iconClass: "",
-	size: "md",
-	label: "",
-	labelClass: "",
-	tooltip: "",
-	action: null,
-	target: null,
-	input: null,
-	confirmText: "Are you sure?",
-	disabledClass: "text-slate-800 bg-slate-500 opacity-50",
-	tooltipClass: ""
+  type: null,
+  color: null,
+  icon: null,
+  iconClass: "",
+  size: "md",
+  label: "",
+  labelClass: "",
+  tooltip: "",
+  action: null,
+  target: null,
+  input: null,
+  confirmText: "Are you sure?",
+  disabledClass: "text-slate-800 bg-slate-500 opacity-50",
+  tooltipClass: ""
 });
 
 const mappedSizeClass = {
-	xxs: {
-		icon: "w-2",
-		button: "px-.5 h-5"
-	},
-	xs: {
-		icon: "w-3",
-		button: "px-1.5 h-6"
-	},
-	sm: {
-		icon: "w-4",
-		button: "px-2 h-8"
-	},
-	md: {
-		icon: "w-5",
-		button: "px-2.5 h-10"
-	},
-	lg: {
-		icon: "w-6",
-		button: "px-3 h-12"
-	}
+  xxs: {
+    icon: "w-2",
+    button: "px-.5 h-5"
+  },
+  xs: {
+    icon: "w-3",
+    button: "px-1.5 h-6"
+  },
+  sm: {
+    icon: "w-4",
+    button: "px-2 h-8"
+  },
+  md: {
+    icon: "w-5",
+    button: "px-2.5 h-10"
+  },
+  lg: {
+    icon: "w-6",
+    button: "px-3 h-12"
+  }
 };
 
 const buttonClass = computed(() => {
-	return {
-		[props.disabled ? props.disabledClass : colorClass.value]: true,
-		[mappedSizeClass[props.size].button]: true
-	};
+  return {
+    [props.disabled ? props.disabledClass : colorClass.value]: true,
+    [mappedSizeClass[props.size].button]: true
+  };
 });
 
 const colorClass = computed(() => {
-	switch (props.color) {
-		case "red":
-			return "text-red-900 bg-red-300 hover:bg-red-400";
-		case "lime":
-			return "text-lime-900 bg-lime-300 hover:bg-lime-400";
-		case "green":
-			return "text-green-900 bg-green-300 hover:bg-green-400";
-		case "green-invert":
-			return "text-green-300 bg-green-900 hover:bg-green-800";
-		case "blue":
-			return "text-blue-900 bg-blue-300 hover:bg-blue-400";
-		case "blue-invert":
-			return "text-blue-300 bg-blue-900 hover:bg-blue-800";
-		case "sky":
-			return "text-sky-900 bg-sky-300 hover:bg-sky-400";
-		case "sky-invert":
-			return "text-sky-400 bg-sky-800 hover:bg-sky-900";
-		case "white":
-			return "text-white bg-gray-800 hover:bg-gray-200";
-		case "yellow":
-			return "text-yellow-300 bg-yellow-800 hover:bg-yellow-700";
-		case "orange":
-			return "text-orange-400 bg-orange-900 hover:bg-orange-800";
-		case "gray":
-			return "text-slate-200 bg-slate-800 hover:bg-slate-900";
-		default:
-			return "";
-	}
+  switch (props.color) {
+    case "red":
+      return "text-red-900 bg-red-300 hover:bg-red-400";
+    case "lime":
+      return "text-lime-900 bg-lime-300 hover:bg-lime-400";
+    case "green":
+      return "text-green-900 bg-green-300 hover:bg-green-400";
+    case "green-invert":
+      return "text-green-300 bg-green-900 hover:bg-green-800";
+    case "blue":
+      return "text-blue-900 bg-blue-300 hover:bg-blue-400";
+    case "blue-invert":
+      return "text-blue-300 bg-blue-900 hover:bg-blue-800";
+    case "sky":
+      return "text-sky-900 bg-sky-300 hover:bg-sky-400";
+    case "sky-invert":
+      return "text-sky-400 bg-sky-800 hover:bg-sky-900";
+    case "white":
+      return "text-white bg-gray-800 hover:bg-gray-200";
+    case "yellow":
+      return "text-yellow-300 bg-yellow-800 hover:bg-yellow-700";
+    case "orange":
+      return "text-orange-400 bg-orange-900 hover:bg-orange-800";
+    case "gray":
+      return "text-slate-200 bg-slate-800 hover:bg-slate-900";
+    case "slate":
+      return "text-slate-900 bg-slate-300 hover:bg-slate-400";
+    case "slate-invert":
+      return "text-slate-300 bg-slate-900 hover:bg-slate-800";
+    default:
+      return "";
+  }
 });
 
 const resolvedIconClass = computed(() => props.iconClass + " " + mappedSizeClass[props.size].icon);
 
 const typeOptions = computed(() => {
-	switch (props.type) {
-		case "trash":
-			return { icon: TrashIcon };
-		case "export":
-			return { icon: ExportIcon };
-		case "import":
-			return { icon: ImportIcon };
-		case "create":
-			return { icon: CreateIcon };
-		case "confirm":
-			return { icon: ConfirmIcon };
-		case "cancel":
-			return { icon: CancelIcon };
-		case "edit":
-			return { icon: EditIcon };
-		case "copy":
-			return { icon: CopyIcon };
-		case "folder":
-			return { icon: FolderIcon };
-		case "play":
-			return { icon: PlayIcon };
-		case "stop":
-			return { icon: StopIcon };
-		case "pause":
-			return { icon: PauseIcon };
-		case "restart":
-			return { icon: RestartIcon };
-		case "refresh":
-			return { icon: RefreshIcon };
-		case "minus":
-			return { icon: MinusIcon };
-		case "merge":
-			return { icon: MergeIcon };
-		default:
-			return { icon: EditIcon };
-	}
+  switch (props.type) {
+    case "save":
+      return { icon: SaveIcon };
+    case "trash":
+      return { icon: TrashIcon };
+    case "export":
+      return { icon: ExportIcon };
+    case "import":
+      return { icon: ImportIcon };
+    case "back":
+      return { icon: BackIcon };
+    case "create":
+      return { icon: CreateIcon };
+    case "confirm":
+      return { icon: ConfirmIcon };
+    case "cancel":
+      return { icon: CancelIcon };
+    case "edit":
+      return { icon: EditIcon };
+    case "copy":
+      return { icon: CopyIcon };
+    case "folder":
+      return { icon: FolderIcon };
+    case "clock":
+      return { icon: ClockIcon };
+    case "play":
+      return { icon: PlayIcon };
+    case "stop":
+      return { icon: StopIcon };
+    case "pause":
+      return { icon: PauseIcon };
+    case "restart":
+      return { icon: RestartIcon };
+    case "refresh":
+      return { icon: RefreshIcon };
+    case "minus":
+      return { icon: MinusIcon };
+    case "merge":
+      return { icon: MergeIcon };
+    case "check":
+      return { icon: CheckIcon };
+    case "view":
+      return { icon: ViewIcon };
+    default:
+      return { icon: EditIcon };
+  }
 });
 
 const isSaving = computed(() => {
-	if (props.saving) return true;
-	if (props.action) {
-		return props.action.isApplying;
-	}
-	if (props.target) {
-		if (Array.isArray(props.target)) {
-			return props.target.some((t) => t.isSaving);
-		}
-		return props.target.isSaving;
-	}
-	return false;
+  if (props.saving) return true;
+  if (props.action) {
+    return props.action.isApplying;
+  }
+  if (props.target) {
+    if (Array.isArray(props.target)) {
+      return props.target.some((t) => t.isSaving);
+    }
+    return props.target.isSaving;
+  }
+  return false;
 });
 
 const isConfirming = ref(false);
+
 function onAction(isConfirmed = false) {
-	if (props.disabled) return;
+  if (props.disabled) return;
 
-	// Make sure this action is confirmed if the confirm prop is set
-	if (props.confirm && !isConfirmed) {
-		isConfirming.value = true;
-		return false;
-	}
-	isConfirming.value = false;
-	if (props.action) {
-		props.action.trigger(props.target, props.input).then(async (response) => {
-			emit("success", typeof response.json === "function" ? await response.json() : response);
-		}).catch((e) => {
-			console.error(`Action emitted an error: ${props.action.name}`, e, props.target);
-			emit("error", e);
-		}).finally(() => {
-			emit("always");
-		});
-	} else {
-		emit("always");
-	}
+  // Make sure this action is confirmed if the confirm prop is set
+  if (props.confirm && !isConfirmed) {
+    isConfirming.value = true;
+    return false;
+  }
+  isConfirming.value = false;
+  if (props.action) {
+    props.action.trigger(props.target, props.input).then(async (response) => {
+      emit("success", typeof response.json === "function" ? await response.json() : response);
+    }).catch((e) => {
+      console.error(`Action emitted an error: ${props.action.name}`, e, props.target);
+      emit("error", e);
+    }).finally(() => {
+      emit("always");
+    });
+  } else {
+    emit("always");
+  }
 }
 </script>