quasar-ui-danx 0.4.45 → 0.4.47

package/package.json

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

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

@@ -15,50 +15,49 @@
       :show-icon="selectIcon || DefaultSelectIcon"
       class="mr-2"
     >
-      <template #label>
-        <QMenu
-          :model-value="isSelecting"
-          @before-hide="isSelecting = false"
-          @hide="isSelecting = false"
-        >
-          <div>
-            <div
-              v-for="option in options"
-              :key="option.id"
-              v-ripple
-              class="cursor-pointer flex items-center relative"
-              :class="{'bg-sky-900 hover:bg-sky-800': selected?.id === option.id, 'hover:bg-slate-600': selected?.id !== option.id}"
-              @click="selected = option"
-            >
-              <div class="flex-grow px-4 py-2">
-                {{ option.name }}
-              </div>
-              <ActionButton
-                v-if="deletable"
-                type="trash"
-                class="ml-4 mr-2"
-                @click.stop.prevent="$emit('delete', option)"
-              />
+      <QMenu
+        :model-value="isSelecting"
+        @before-hide="isSelecting = false"
+        @hide="isSelecting = false"
+      >
+        <div>
+          <div
+            v-for="option in options"
+            :key="option.id"
+            v-ripple
+            class="cursor-pointer flex items-center relative"
+            :class="{'bg-sky-900 hover:bg-sky-800': selected?.id === option.id, 'hover:bg-slate-600': selected?.id !== option.id}"
+            @click="selected = option"
+          >
+            <div class="flex-grow px-4 py-2">
+              {{ option.name }}
             </div>
-            <template v-if="creatable">
-              <QSeparator class="bg-slate-400 my-2" />
-              <div class="px-4 mb-2">
-                <QBtn
-                  :class="createClass"
-                  :loading="loading"
-                  @click="$emit('create')"
-                >
-                  <CreateIcon
-                    class="w-3"
-                    :class="createText ? 'mr-2' : ''"
-                  />
-                  {{ createText }}
-                </QBtn>
-              </div>
-            </template>
+            <ActionButton
+              v-if="deletable"
+              type="trash"
+              class="ml-4 mr-2"
+              size="sm"
+              @click.stop.prevent="$emit('delete', option)"
+            />
           </div>
-        </QMenu>
-      </template>
+          <template v-if="creatable">
+            <QSeparator class="bg-slate-400 my-2" />
+            <div class="px-4 mb-2">
+              <QBtn
+                :class="createClass"
+                :loading="loading"
+                @click="$emit('create')"
+              >
+                <CreateIcon
+                  class="w-3"
+                  :class="createText ? 'mr-2' : ''"
+                />
+                {{ createText }}
+              </QBtn>
+            </div>
+          </template>
+        </div>
+      </QMenu>
     </ShowHideButton>
 
     <div :class="labelClass">

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

@@ -1,8 +1,8 @@
 <template>
   <QBtn
     :loading="isSaving"
-    class="shadow-none"
-    :class="disabled ? disabledClass : colorClass"
+    class="shadow-none py-0"
+    :class="buttonClass"
     :disable="disabled"
     @click="()=> onAction()"
   >
@@ -16,6 +16,7 @@
         <div
           v-if="label"
           class="ml-2"
+          :class="labelClass"
         >
           {{ label }}
         </div>
@@ -25,7 +26,9 @@
       v-if="tooltip"
       class="whitespace-nowrap"
     >
-      {{ tooltip }}
+      <slot name="tooltip">
+        {{ tooltip }}
+      </slot>
     </QTooltip>
     <QMenu
       v-if="isConfirming"
@@ -70,9 +73,11 @@ import { ActionTarget, ResourceAction } from "../../../types";
 export interface ActionButtonProps {
 	type?: "trash" | "trash-red" | "create" | "edit" | "copy" | "play" | "stop" | "pause" | "refresh" | "confirm" | "cancel";
 	color?: "red" | "blue" | "sky" | "green" | "green-invert" | "lime" | "white" | "gray";
+	size?: "xxs" | "xs" | "sm" | "md" | "lg";
 	icon?: object | string;
 	iconClass?: string;
-	label?: string;
+	label?: string | number;
+	labelClass?: string;
 	tooltip?: string;
 	saving?: boolean;
 	action?: ResourceAction;
@@ -90,7 +95,9 @@ const props = withDefaults(defineProps<ActionButtonProps>(), {
 	color: null,
 	icon: null,
 	iconClass: "",
+	size: "md",
 	label: "",
+	labelClass: "",
 	tooltip: "",
 	action: null,
 	target: null,
@@ -99,6 +106,36 @@ const props = withDefaults(defineProps<ActionButtonProps>(), {
 	disabledClass: "text-slate-800 bg-slate-500 opacity-50"
 });
 
+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"
+	}
+};
+
+const buttonClass = computed(() => {
+	return {
+		[props.disabled ? props.disabledClass : colorClass.value]: true,
+		[mappedSizeClass[props.size].button]: true
+	};
+});
+
 const colorClass = computed(() => {
 	switch (props.color) {
 		case "red":
@@ -122,61 +159,62 @@ const colorClass = computed(() => {
 	}
 });
 const typeOptions = computed(() => {
+	const iconClass = mappedSizeClass[props.size].icon;
 	switch (props.type) {
 		case "trash":
 			return {
 				icon: TrashIcon,
-				iconClass: "w-3"
+				iconClass
 			};
 		case "create":
 			return {
 				icon: CreateIcon,
-				iconClass: "w-3"
+				iconClass
 			};
 		case "confirm":
 			return {
 				icon: ConfirmIcon,
-				iconClass: "w-3"
+				iconClass
 			};
 		case "cancel":
 			return {
 				icon: CancelIcon,
-				iconClass: "w-3"
+				iconClass
 			};
 		case "edit":
 			return {
 				icon: EditIcon,
-				iconClass: "w-3"
+				iconClass
 			};
 		case "copy":
 			return {
 				icon: CopyIcon,
-				iconClass: "w-3"
+				iconClass
 			};
 		case "play":
 			return {
 				icon: PlayIcon,
-				iconClass: "w-3"
+				iconClass
 			};
 		case "stop":
 			return {
 				icon: StopIcon,
-				iconClass: "w-3"
+				iconClass
 			};
 		case "pause":
 			return {
 				icon: PauseIcon,
-				iconClass: "w-3"
+				iconClass
 			};
 		case "refresh":
 			return {
 				icon: RefreshIcon,
-				iconClass: "w-4"
+				iconClass
 			};
 		default:
 			return {
 				icon: EditIcon,
-				iconClass: "w-3"
+				iconClass
 			};
 	}
 });

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

@@ -1,37 +1,21 @@
 <template>
-  <QBtn
-    class="py-1 px-2"
-    :disable="disable"
+  <ActionButton
+    :icon="isShowing ? (hideIcon || DefaultHideIcon) : (showIcon || DefaultShowIcon)"
+    :label="(isShowing ? hideLabel : showLabel) || label"
+    :label-class="labelClass"
     @click="onToggle"
   >
-    <div class="flex items-center flex-nowrap whitespace-nowrap">
-      <slot :is-showing="isShowing">
-        <component
-          :is="isShowing ? (hideIcon || DefaultHideIcon) : (showIcon || DefaultShowIcon)"
-          :class="iconClass"
-        />
-      </slot>
-      <slot
-        name="label"
-        :is-showing="isShowing"
-      >
-        <div
-          v-if="label"
-          :class="labelClass"
-        >
-          {{ (isShowing ? hideLabel : showLabel) || label }}
-        </div>
-      </slot>
-    </div>
-    <QTooltip v-if="tooltip">
-      {{ tooltip }}
-    </QTooltip>
-  </QBtn>
+    <slot />
+    <template #tooltip>
+      <slot name="tooltip" />
+    </template>
+  </ActionButton>
 </template>
 <script lang="ts" setup>
 import { FaSolidEye as DefaultShowIcon, FaSolidEyeSlash as DefaultHideIcon } from "danx-icon";
 import { nextTick } from "vue";
 import { getItem, setItem } from "../../../helpers";
+import ActionButton from "./ActionButton";
 
 export interface Props {
 	name?: string;
@@ -39,14 +23,11 @@ export interface Props {
 	hideLabel?: string;
 	showIcon?: object | string;
 	hideIcon?: object | string;
-	iconClass?: string;
 	labelClass?: string;
 	label?: string | number;
-	tooltip?: string;
-	disable?: boolean;
 }
 
-const emit = defineEmits(["show", "hide"]);
+const emit = defineEmits<{ show: void, hide: void }>();
 const isShowing = defineModel<boolean>();
 const props = withDefaults(defineProps<Props>(), {
 	name: "",
@@ -54,10 +35,8 @@ const props = withDefaults(defineProps<Props>(), {
 	hideLabel: "",
 	showIcon: null,
 	hideIcon: null,
-	iconClass: "w-4 h-6",
 	labelClass: "ml-2",
-	label: "",
-	tooltip: ""
+	label: ""
 });
 
 const SETTINGS_KEY = "show-hide-button";
@@ -72,7 +51,6 @@ if (props.name) {
 function onToggle() {
 	isShowing.value = !isShowing.value;
 
-
 	// NOTE: use nextTick to ensure the value is updated before saving (if the parent does not pass a value for modelValue, this can cause a desync)
 	nextTick(() => {
 		if (isShowing.value) {

package/src/components/Utility/Widgets/LabelPillWidget.vue

@@ -21,6 +21,7 @@ const colorClasses = {
 	yellow: "bg-yellow-950 text-yellow-400",
 	blue: "bg-blue-950 text-blue-400",
 	slate: "bg-slate-950 text-slate-400",
+	"slate-mid": "bg-slate-800 text-slate-400",
 	gray: "bg-slate-700 text-gray-300",
 	none: ""
 };