quasar-ui-danx 0.4.80 → 0.4.82
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/danx.es.js +2168 -2119
- package/dist/danx.es.js.map +1 -1
- package/dist/danx.umd.js +46 -46
- package/dist/danx.umd.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/Utility/Buttons/ActionButton.vue +64 -56
package/package.json
CHANGED
|
@@ -1,64 +1,66 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
2
|
+
<QBtn
|
|
3
|
+
:loading="isSaving"
|
|
4
|
+
class="shadow-none py-0"
|
|
5
|
+
:class="buttonClass"
|
|
6
|
+
:disable="disabled"
|
|
7
|
+
@click="()=> onAction()"
|
|
8
|
+
>
|
|
9
|
+
<div class="flex items-center flex-nowrap">
|
|
10
|
+
<component
|
|
11
|
+
:is="icon || typeOptions.icon"
|
|
12
|
+
class="transition-all"
|
|
13
|
+
:class="resolvedIconClass"
|
|
14
|
+
/>
|
|
15
|
+
<div
|
|
16
|
+
v-if="label || label === 0"
|
|
17
|
+
class="ml-2"
|
|
18
|
+
:class="labelClass"
|
|
19
|
+
>
|
|
20
|
+
{{ label }}
|
|
21
|
+
</div>
|
|
22
|
+
<slot />
|
|
23
|
+
</div>
|
|
24
|
+
<QTooltip
|
|
25
|
+
v-if="tooltip"
|
|
26
|
+
class="whitespace-nowrap"
|
|
27
|
+
:class="tooltipClass"
|
|
28
|
+
>
|
|
29
|
+
<slot name="tooltip">
|
|
30
|
+
{{ tooltip }}
|
|
31
|
+
</slot>
|
|
32
|
+
</QTooltip>
|
|
33
|
+
<QMenu
|
|
34
|
+
v-if="isConfirming"
|
|
35
|
+
:model-value="true"
|
|
36
|
+
>
|
|
37
|
+
<div class="p-4 bg-slate-600">
|
|
38
|
+
<div>{{ confirmText }}</div>
|
|
39
|
+
<div class="flex items-center flex-nowrap mt-2">
|
|
40
|
+
<div class="flex-grow">
|
|
41
|
+
<ActionButton
|
|
42
|
+
type="cancel"
|
|
43
|
+
color="gray"
|
|
44
|
+
@click="isConfirming = false"
|
|
45
|
+
/>
|
|
46
|
+
</div>
|
|
47
|
+
<ActionButton
|
|
48
|
+
type="confirm"
|
|
49
|
+
color="green"
|
|
50
|
+
@click="()=> onAction(true)"
|
|
51
|
+
/>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
</QMenu>
|
|
55
|
+
</QBtn>
|
|
56
56
|
</template>
|
|
57
57
|
<script setup lang="ts">
|
|
58
58
|
import {
|
|
59
|
+
FaSolidArrowRotateRight as RestartIcon,
|
|
59
60
|
FaSolidArrowsRotate as RefreshIcon,
|
|
60
61
|
FaSolidCircleCheck as ConfirmIcon,
|
|
61
62
|
FaSolidCircleXmark as CancelIcon,
|
|
63
|
+
FaSolidCodeMerge as MergeIcon,
|
|
62
64
|
FaSolidCopy as CopyIcon,
|
|
63
65
|
FaSolidFileExport as ExportIcon,
|
|
64
66
|
FaSolidFileImport as ImportIcon,
|
|
@@ -75,8 +77,8 @@ import { computed, ref } from "vue";
|
|
|
75
77
|
import { ActionTarget, ResourceAction } from "../../../types";
|
|
76
78
|
|
|
77
79
|
export interface ActionButtonProps {
|
|
78
|
-
type?: "trash" | "create" | "edit" | "copy" | "folder" | "play" | "stop" | "pause" | "refresh" | "confirm" | "cancel" | "export" | "import" | "minus";
|
|
79
|
-
color?: "red" | "blue" | "sky" | "sky-invert" | "green" | "green-invert" | "lime" | "white" | "gray" | "yellow" | "orange";
|
|
80
|
+
type?: "trash" | "create" | "edit" | "copy" | "folder" | "play" | "stop" | "pause" | "refresh" | "restart" | "confirm" | "cancel" | "export" | "import" | "minus" | "merge";
|
|
81
|
+
color?: "red" | "blue" | "blue-invert" | "sky" | "sky-invert" | "green" | "green-invert" | "lime" | "white" | "gray" | "yellow" | "orange";
|
|
80
82
|
size?: "xxs" | "xs" | "sm" | "md" | "lg";
|
|
81
83
|
icon?: object | string;
|
|
82
84
|
iconClass?: string;
|
|
@@ -154,6 +156,8 @@ const colorClass = computed(() => {
|
|
|
154
156
|
return "text-green-300 bg-green-900 hover:bg-green-800";
|
|
155
157
|
case "blue":
|
|
156
158
|
return "text-blue-900 bg-blue-300 hover:bg-blue-400";
|
|
159
|
+
case "blue-invert":
|
|
160
|
+
return "text-blue-300 bg-blue-900 hover:bg-blue-800";
|
|
157
161
|
case "sky":
|
|
158
162
|
return "text-sky-900 bg-sky-300 hover:bg-sky-400";
|
|
159
163
|
case "sky-invert":
|
|
@@ -199,10 +203,14 @@ const typeOptions = computed(() => {
|
|
|
199
203
|
return { icon: StopIcon };
|
|
200
204
|
case "pause":
|
|
201
205
|
return { icon: PauseIcon };
|
|
206
|
+
case "restart":
|
|
207
|
+
return { icon: RestartIcon };
|
|
202
208
|
case "refresh":
|
|
203
209
|
return { icon: RefreshIcon };
|
|
204
210
|
case "minus":
|
|
205
211
|
return { icon: MinusIcon };
|
|
212
|
+
case "merge":
|
|
213
|
+
return { icon: MergeIcon };
|
|
206
214
|
default:
|
|
207
215
|
return { icon: EditIcon };
|
|
208
216
|
}
|