edvoyui-component-library-test-flight 0.0.66 → 0.0.67
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/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
:color="color"
|
|
6
6
|
:iconType="iconType"
|
|
7
7
|
v-bind="$attrs"
|
|
8
|
-
:class="['capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5', rounded ?'rounded-full':'rounded-
|
|
8
|
+
:class="['capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5', rounded ?'rounded-full':'rounded-lg', btnClass]"
|
|
9
9
|
:disabled="disabled"
|
|
10
10
|
:loading="loading"
|
|
11
11
|
:icon="icon"
|
|
@@ -18,7 +18,6 @@
|
|
|
18
18
|
/>
|
|
19
19
|
<slot />
|
|
20
20
|
<component :is="icon" v-if="iconType === 'endIcon'" :class="[iconWidth]" />
|
|
21
|
-
|
|
22
21
|
<svg
|
|
23
22
|
v-if="loading"
|
|
24
23
|
class="animate-spin"
|
|
@@ -61,7 +60,7 @@ const props = defineProps({
|
|
|
61
60
|
},
|
|
62
61
|
color: {
|
|
63
62
|
type: String as PropType<
|
|
64
|
-
"danger" | "success" | "black" | "white" | "purple" | 'primary'>,
|
|
63
|
+
"danger" | "success" | "black" | "white" | "purple" | 'primary' | 'secondary' | 'tertiary'>,
|
|
65
64
|
default: "purple",
|
|
66
65
|
},
|
|
67
66
|
iconType: {
|
|
@@ -81,7 +80,7 @@ const sizeClasses = reactive({
|
|
|
81
80
|
xs: "text-sm font-medium leading-[normal]", // 24
|
|
82
81
|
sm: "text-sm font-medium", // 32
|
|
83
82
|
md: "text-base font-semibold", // 40
|
|
84
|
-
lg: "text-base font-semibold", //
|
|
83
|
+
lg: "text-base font-semibold", // 48
|
|
85
84
|
});
|
|
86
85
|
|
|
87
86
|
const btnClass = computed(() => {
|
|
@@ -92,7 +91,7 @@ const btnClass = computed(() => {
|
|
|
92
91
|
: "text-white bg-gray-900 hover:bg-gray-800 active:bg-black cursor-pointer active:shadow-black/50",
|
|
93
92
|
white: btnDisabled
|
|
94
93
|
? "bg-opacity-80 cursor-not-allowed text-gray-400 bg-gray-200"
|
|
95
|
-
: "bg-white hover:bg-gray-100
|
|
94
|
+
: "bg-white hover:bg-gray-100 text-black cursor-pointer active:shadow-white/50 active:bg-transparent",
|
|
96
95
|
danger: btnDisabled
|
|
97
96
|
? "bg-opacity-60 cursor-not-allowed text-gray-200 bg-red-500"
|
|
98
97
|
: "bg-red-500 hover:bg-red-600 active:bg-red-500 text-white cursor-pointer active:shadow-red-500/50",
|
|
@@ -105,13 +104,17 @@ const btnClass = computed(() => {
|
|
|
105
104
|
primary: btnDisabled
|
|
106
105
|
? "bg-opacity-60 cursor-not-allowed text-gray-200 bg-purple-500"
|
|
107
106
|
: "primary-btn text-white cursor-pointer active:shadow-purple-500/50",
|
|
107
|
+
secondary: btnDisabled
|
|
108
|
+
? "bg-opacity-75 cursor-not-allowed text-gray-400 bg-purple-50"
|
|
109
|
+
: "bg-purple-100 hover:bg-purple-50 active:bg-purple-100 cursor-pointer text-gray-700 active:shadow-purple-200",
|
|
110
|
+
tertiary: btnDisabled
|
|
111
|
+
? "bg-opacity-75 cursor-not-allowed text-gray-400 bg-gray-50 ring-1 ring-gray-100"
|
|
112
|
+
: "bg-gray-100 hover:bg-gray-50 active:bg-gray-100 text-gray-700 cursor-pointer active:shadow-bg-gray-200/50 ring-1 ring-gray-200",
|
|
108
113
|
};
|
|
109
114
|
|
|
110
115
|
// background: linear-gradient(107.63deg, #321386 0%, #9C20D7 100%, #9C20D7 100%);
|
|
111
|
-
|
|
112
|
-
|
|
113
116
|
const iconClasses = {
|
|
114
|
-
lg: props.iconType === "icon" ? "p-3
|
|
117
|
+
lg: props.iconType === "icon" ? "p-3" : "px-6 py-3",
|
|
115
118
|
md: props.iconType === "icon" ? "p-2" : "px-4 py-2",
|
|
116
119
|
sm: props.iconType === "icon" ? "p-1.5" : "px-4 py-1.5",
|
|
117
120
|
xs: props.iconType === "icon" ? "p-1" : "px-3 py-1",
|