quasar-ui-danx 0.4.55 → 0.4.57

package/package.json

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

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

@@ -21,7 +21,7 @@ interface ActionFormProps {
 	form: Form;
 	noLabel?: boolean;
 	showName?: boolean;
-	disable?: boolean;
+	disabled?: boolean;
 	readonly?: boolean;
 	clearable?: boolean;
 	fieldClass?: string;
@@ -38,7 +38,7 @@ const renderedFormProps = {
 	form: props.form,
 	noLabel: props.noLabel,
 	showName: props.showName,
-	disable: props.disable,
+	disabled: props.disabled,
 	readonly: props.readonly,
 	clearable: props.clearable,
 	fieldClass: props.fieldClass,

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

@@ -2,7 +2,7 @@
   <QToggle
     :data-testid="'boolean-field-' + (name || label)"
     :model-value="modelValue || (toggleIndeterminate ? modelValue : false)"
-    :disable="disable || readonly"
+    :disable="disabled || readonly"
     :toggle-indeterminate="toggleIndeterminate"
     :indeterminate-value="undefined"
     @update:model-value="$emit('update:model-value', $event)"
@@ -40,7 +40,7 @@ defineProps({
 	},
 	showName: Boolean,
 	toggleIndeterminate: Boolean,
-	disable: Boolean,
+	disabled: Boolean,
 	readonly: Boolean
 });
 </script>

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

@@ -11,7 +11,7 @@
     />
 
     <input
-      v-if="!disable && !readonly"
+      v-if="!disabled && !readonly"
       ref="file"
       class="hidden"
       type="file"
@@ -29,11 +29,11 @@
         :file="file"
         :related-files="file.transcodes || uploadedFiles"
         downloadable
-        :removable="!readonly && !disable"
+        :removable="!readonly && !disabled"
         @remove="onRemove(file)"
       />
       <div
-        v-if="!disable && !readonly"
+        v-if="!disabled && !readonly"
         class="dx-add-remove-files m-2 flex flex-col flex-nowrap items-center overflow-hidden cursor-pointer"
         :class="filePreviewClass"
         :style="styleSize"
@@ -85,7 +85,7 @@ const props = withDefaults(defineProps<{
 	field?: FormField;
 	label?: string;
 	showName?: boolean;
-	disable?: boolean;
+	disabled?: boolean;
 	readonly?: boolean;
 	width?: number | string;
 	height?: number | string;

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

@@ -14,7 +14,7 @@
     <ShowHideButton
       v-if="showEdit"
       v-model="editing"
-      :disable="!canEdit"
+      :disabled="!canEdit"
       :label="editText"
       :class="editClass"
       :show-icon="EditIcon"

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

@@ -3,7 +3,7 @@
     <ShowHideButton
       v-if="selectable"
       v-model="isSelecting"
-      :disable="disable"
+      :disabled="disabled"
       :label="selectText"
       :saving="loading"
       :class="selectClass"
@@ -18,7 +18,7 @@
       >
         <div>
           <div
-            v-for="option in options"
+            v-for="option in optionsPlusSelected"
             :key="option.id"
             v-ripple
             class="cursor-pointer flex items-center relative"
@@ -79,9 +79,11 @@
       :label="editText"
       :class="editClass"
       :size="size"
+      :disabled="editDisabled"
       class="opacity-0 group-hover:opacity-100 transition-all"
       :show-icon="EditIcon"
       :hide-icon="DoneEditingIcon"
+      :tooltip="editDisabled ? 'You are not allowed to edit' : ''"
     />
 
     <QBtn
@@ -102,7 +104,7 @@ import {
 	FaSolidListCheck as DefaultSelectIcon,
 	FaSolidPencil as EditIcon
 } from "danx-icon";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { ActionTargetItem } from "../../../../types";
 import { ShowHideButton } from "../../../Utility/Buttons";
 import { ActionButtonProps, default as ActionButton } from "../../../Utility/Buttons/ActionButton";
@@ -111,7 +113,7 @@ import EditableDiv from "./EditableDiv";
 defineEmits(["create", "update", "delete"]);
 const selected = defineModel<ActionTargetItem | null>("selected");
 const editing = defineModel<boolean>("editing");
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
 	options: ActionTargetItem[];
 	showEdit?: boolean;
 	loading?: boolean;
@@ -132,7 +134,8 @@ withDefaults(defineProps<{
 	deletable?: boolean;
 	nameEditable?: boolean;
 	clearable?: boolean;
-	disable?: boolean;
+	disabled?: boolean;
+	editDisabled?: boolean;
 	size?: ActionButtonProps["size"];
 }>(), {
 	selectText: "",
@@ -150,4 +153,10 @@ withDefaults(defineProps<{
 });
 
 const isSelecting = ref(false);
+
+// If the selected option is not in the options list, it should be added in
+const optionsPlusSelected = computed(() => {
+	if (!selected.value || props.options.find((o) => o.id === selected.value?.id)) return props.options;
+	return [selected.value, ...props.options];
+});
 </script>

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

@@ -13,7 +13,7 @@
       class="text-sm font-semibold"
     />
     <div
-      v-if="!disable && !readonly"
+      v-if="!disabled && !readonly"
       class="text-sm mt-2"
     >
       <a
@@ -39,7 +39,7 @@
       :class="{'border border-dashed border-blue-600': !uploadedFile, 'mx-auto': !readonly}"
       :file="uploadedFile || undefined"
       downloadable
-      @click="!disable && $refs.file.click()"
+      @click="!disabled && $refs.file.click()"
     />
     <div
       v-else-if="readonly"
@@ -63,7 +63,7 @@ const props = defineProps<{
 	label?: string;
 	name?: string;
 	showName?: boolean;
-	disable?: boolean;
+	disabled?: boolean;
 	readonly?: boolean;
 }>();
 const { onComplete, onDrop, onFileSelected, uploadedFile, clearUploadedFile } = useSingleFileUpload();

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

@@ -15,7 +15,7 @@
       v-else
       class="mt-2"
       :api-key="danxOptions.tinyMceApiKey"
-      :disabled="disable"
+      :disabled="disabled"
       :model-value="modelValue"
       @update:model-value="$emit('update:model-value', $event)"
     />
@@ -39,7 +39,7 @@ defineProps({
 	},
 	noLabel: Boolean,
 	showName: Boolean,
-	disable: Boolean,
+	disabled: Boolean,
 	readonly: Boolean
 });
 </script>

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

@@ -27,7 +27,7 @@
               {{ name || "1" }}
             </div>
             <div
-              v-if="!disable && !readonly && canModifyVariations"
+              v-if="!disabled && !readonly && canModifyVariations"
               class="flex flex-nowrap items-center mr-2"
             >
               <a
@@ -86,7 +86,8 @@
           :no-label="noLabel"
           :show-name="showName"
           :clearable="field.clearable || clearable"
-          :disable="disable"
+          :disabled="disabled"
+          :disable="disabled"
           :readonly="readonly"
           @update:model-value="onInput(field.name, $event)"
         />
@@ -206,7 +207,8 @@ function getVnodeProps(field) {
 		label: field.label,
 		clearable: field.clearable || props.clearable,
 		readonly: props.readonly,
-		disable: props.disable,
+		disabled: props.disabled,
+		disable: props.disabled,
 		showName: props.showName,
 		noLabel: props.noLabel
 	};
@@ -225,7 +227,7 @@ 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 || 0));
+const canAddVariation = computed(() => props.canModifyVariations && !props.readonly && !props.disabled && variationNames.value.length < (props.form.variations || 0));
 
 function getFieldResponse(name: string, variation?: string) {
 	if (!fieldResponses.value) return undefined;

package/src/components/PanelsDrawer/PanelsDrawer.vue

@@ -46,6 +46,7 @@
           class="flex items-stretch flex-nowrap h-full"
         >
           <PanelsDrawerTabs
+            v-if="!hideTabs"
             :key="'pd-tabs:' + target.id"
             v-model="activePanel"
             :target="target"
@@ -53,13 +54,31 @@
             :panels="panels"
             @update:model-value="$emit('update:model-value', $event)"
           />
-          <PanelsDrawerPanels
+
+          <QTabPanels
             :key="'pd-panels:' + target.id"
-            :panels="panels"
-            :active-panel="activePanel"
-            :active-item="target"
+            :model-value="activePanel"
             :class="activePanelOptions?.class || panelsClass"
-          />
+            class="dx-panels-drawer-panels overflow-y-auto h-full transition-all"
+          >
+            <slot
+              name="panels"
+              :active-panel="activePanel"
+            >
+              <QTabPanel
+                v-for="panel in panels"
+                :key="panel.name"
+                :name="panel.name"
+              >
+                <RenderVnode
+                  v-if="panel.vnode"
+                  :vnode="panel.vnode"
+                  :props="target"
+                />
+              </QTabPanel>
+            </slot>
+          </QTabPanels>
+
           <div
             v-if="$slots['right-sidebar']"
             class="border-l overflow-y-auto"
@@ -81,8 +100,7 @@
 import { computed, onMounted, ref, watch } from "vue";
 import { XIcon as CloseIcon } from "../../svg";
 import { ActionPanel, ActionTargetItem } from "../../types";
-import { ContentDrawer } from "../Utility";
-import PanelsDrawerPanels from "./PanelsDrawerPanels";
+import { ContentDrawer, RenderVnode } from "../Utility";
 import PanelsDrawerTabs from "./PanelsDrawerTabs";
 
 export interface PanelsDrawerProps {
@@ -93,7 +111,8 @@ export interface PanelsDrawerProps {
 	panelsClass?: string | object,
 	drawerClass?: string | object,
 	position?: "standard" | "right" | "left";
-	panels: ActionPanel[]
+	panels: ActionPanel[];
+	hideTabs?: boolean;
 }
 
 defineEmits(["update:model-value", "close"]);

package/src/components/PanelsDrawer/index.ts

@@ -1,3 +1,2 @@
 export { default as PanelsDrawer } from "./PanelsDrawer.vue";
-export { default as PanelsDrawerPanels } from "./PanelsDrawerPanels.vue";
 export { default as PanelsDrawerTabs } from "./PanelsDrawerTabs.vue";

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

@@ -25,6 +25,7 @@
     <QTooltip
       v-if="tooltip"
       class="whitespace-nowrap"
+      :class="tooltipClass"
     >
       <slot name="tooltip">
         {{ tooltip }}
@@ -89,6 +90,7 @@ export interface ActionButtonProps {
 	disabledClass?: string;
 	confirm?: boolean;
 	confirmText?: string;
+	tooltipClass?: string;
 }
 
 const emit = defineEmits(["success", "error", "always"]);
@@ -105,7 +107,8 @@ const props = withDefaults(defineProps<ActionButtonProps>(), {
 	target: null,
 	input: null,
 	confirmText: "Are you sure?",
-	disabledClass: "text-slate-800 bg-slate-500 opacity-50"
+	disabledClass: "text-slate-800 bg-slate-500 opacity-50",
+	tooltipClass: ""
 });
 
 const mappedSizeClass = {

package/src/components/Utility/Dialogs/InfoDialog.vue

@@ -23,7 +23,7 @@
           :label="doneText"
           class="dx-dialog-button dx-dialog-button-done"
           :class="doneClass"
-          :disable="disable"
+          :disable="disabled"
           @click="onClose"
         >
           <slot name="done-text" />
@@ -40,7 +40,7 @@ import DialogLayout from "./DialogLayout";
 const emit = defineEmits(["update:model-value", "close"]);
 defineProps({
 	...DialogLayout.props,
-	disable: Boolean,
+	disabled: Boolean,
 	doneClass: {
 		type: [String, Object],
 		default: ""

package/src/components/Utility/Dialogs/RenderedFormDialog.vue

@@ -27,7 +27,7 @@ const props = defineProps<{
 	form: Form;
 	noLabel?: boolean;
 	showName?: boolean;
-	disable?: boolean;
+	disabled?: boolean;
 	readonly?: boolean;
 	clearable?: boolean;
 	fieldClass?: string;
@@ -41,7 +41,7 @@ const renderedFormProps = {
 	form: props.form,
 	noLabel: props.noLabel,
 	showName: props.showName,
-	disable: props.disable,
+	disabled: props.disabled,
 	readonly: props.readonly,
 	clearable: props.clearable,
 	fieldClass: props.fieldClass,

package/src/styles/quasar-reset.scss

@@ -87,10 +87,6 @@
 		&.scroll {
 			overflow: auto;
 		}
-
-		.q-tab-panel {
-			padding: 0;
-		}
 	}
 
 	&.overflow-y-auto {

package/src/types/forms.d.ts

@@ -44,7 +44,7 @@ export interface RenderedFormProps {
 	form: Form;
 	noLabel?: boolean;
 	showName?: boolean;
-	disable?: boolean;
+	disabled?: boolean;
 	readonly?: boolean;
 	saving?: boolean;
 	clearable?: boolean;

package/src/components/PanelsDrawer/PanelsDrawerPanels.vue

@@ -1,29 +0,0 @@
-<template>
-  <QTabPanels
-    :model-value="activePanel"
-    class="dx-panels-drawer-panels overflow-y-auto h-full transition-all"
-  >
-    <QTabPanel
-      v-for="panel in panels"
-      :key="panel.name"
-      :name="panel.name"
-    >
-      <RenderVnode
-        v-if="panel.vnode"
-        :vnode="panel.vnode"
-        :props="activeItem"
-      />
-    </QTabPanel>
-  </QTabPanels>
-</template>
-
-<script setup lang="ts">
-import { ActionPanel, ActionTargetItem } from "../../types";
-import { RenderVnode } from "../Utility";
-
-defineProps<{
-	activePanel?: string | number,
-	activeItem: ActionTargetItem,
-	panels: ActionPanel[]
-}>();
-</script>