@cypress-design/vue-alert 0.0.2 → 0.1.2
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/Alert.rootstory.tsx +2 -2
- package/Alert.stories.mdx +1 -1
- package/Alert.vue +86 -56
- package/CHANGELOG.md +33 -0
- package/dist/index.es.mjs +219 -0
- package/dist/index.es.mjs.map +1 -0
- package/dist/index.umd.js +2 -223
- package/dist/index.umd.js.map +1 -1
- package/dist/vue/Alert.vue.d.ts +155 -33
- package/dist/vue/Alert.vue.d.ts.map +1 -1
- package/package.json +10 -5
- package/tsconfig.build.json +3 -2
- package/vite.config.ts +7 -0
- package/dist/index.es.js +0 -223
- package/dist/index.es.js.map +0 -1
- package/rollup.config.js +0 -48
package/dist/vue/Alert.vue.d.ts
CHANGED
|
@@ -1,35 +1,145 @@
|
|
|
1
1
|
import type { AlertType } from '../constants';
|
|
2
|
-
declare const _default:
|
|
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
|
-
|
|
2
|
+
declare const _default: {
|
|
3
|
+
new (...args: any[]): {
|
|
4
|
+
$: import("vue").ComponentInternalInstance;
|
|
5
|
+
$data: {};
|
|
6
|
+
$props: Partial<{
|
|
7
|
+
type: AlertType;
|
|
8
|
+
detailsTitle: string;
|
|
9
|
+
}> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
10
|
+
/**
|
|
11
|
+
* Color scheme
|
|
12
|
+
*/
|
|
13
|
+
type?: AlertType | undefined;
|
|
14
|
+
/**
|
|
15
|
+
* If details are provided,text used in the toggle button
|
|
16
|
+
*/
|
|
17
|
+
detailsTitle?: string | undefined;
|
|
18
|
+
/**
|
|
19
|
+
* Show the dismiss button
|
|
20
|
+
*/
|
|
21
|
+
dismissible?: boolean | undefined;
|
|
22
|
+
/**
|
|
23
|
+
* When an icon is displayed by default, use this to remove it
|
|
24
|
+
*/
|
|
25
|
+
noIcon?: boolean | undefined;
|
|
26
|
+
/**
|
|
27
|
+
* If you need square corners
|
|
28
|
+
*/
|
|
29
|
+
notRounded?: boolean | undefined;
|
|
30
|
+
/**
|
|
31
|
+
* Dismiss the alert after a delay (in ms)
|
|
32
|
+
*/
|
|
33
|
+
duration?: number | undefined;
|
|
34
|
+
}>, {
|
|
35
|
+
type: string;
|
|
36
|
+
detailsTitle: string;
|
|
37
|
+
}>>> & {
|
|
38
|
+
onDismiss?: (() => any) | undefined;
|
|
39
|
+
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "detailsTitle">;
|
|
40
|
+
$attrs: {
|
|
41
|
+
[x: string]: unknown;
|
|
42
|
+
};
|
|
43
|
+
$refs: {
|
|
44
|
+
[x: string]: unknown;
|
|
45
|
+
};
|
|
46
|
+
$slots: Readonly<{
|
|
47
|
+
[name: string]: import("vue").Slot | undefined;
|
|
48
|
+
}>;
|
|
49
|
+
$root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
|
|
50
|
+
$parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
|
|
51
|
+
$emit: (event: "dismiss") => void;
|
|
52
|
+
$el: any;
|
|
53
|
+
$options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
54
|
+
/**
|
|
55
|
+
* Color scheme
|
|
56
|
+
*/
|
|
57
|
+
type?: AlertType | undefined;
|
|
58
|
+
/**
|
|
59
|
+
* If details are provided,text used in the toggle button
|
|
60
|
+
*/
|
|
61
|
+
detailsTitle?: string | undefined;
|
|
62
|
+
/**
|
|
63
|
+
* Show the dismiss button
|
|
64
|
+
*/
|
|
65
|
+
dismissible?: boolean | undefined;
|
|
66
|
+
/**
|
|
67
|
+
* When an icon is displayed by default, use this to remove it
|
|
68
|
+
*/
|
|
69
|
+
noIcon?: boolean | undefined;
|
|
70
|
+
/**
|
|
71
|
+
* If you need square corners
|
|
72
|
+
*/
|
|
73
|
+
notRounded?: boolean | undefined;
|
|
74
|
+
/**
|
|
75
|
+
* Dismiss the alert after a delay (in ms)
|
|
76
|
+
*/
|
|
77
|
+
duration?: number | undefined;
|
|
78
|
+
}>, {
|
|
79
|
+
type: string;
|
|
80
|
+
detailsTitle: string;
|
|
81
|
+
}>>> & {
|
|
82
|
+
onDismiss?: (() => any) | undefined;
|
|
83
|
+
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
84
|
+
dismiss: () => void;
|
|
85
|
+
}, string, {
|
|
86
|
+
type: AlertType;
|
|
87
|
+
detailsTitle: string;
|
|
88
|
+
}> & {
|
|
89
|
+
beforeCreate?: ((() => void) | (() => void)[]) | undefined;
|
|
90
|
+
created?: ((() => void) | (() => void)[]) | undefined;
|
|
91
|
+
beforeMount?: ((() => void) | (() => void)[]) | undefined;
|
|
92
|
+
mounted?: ((() => void) | (() => void)[]) | undefined;
|
|
93
|
+
beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
|
|
94
|
+
updated?: ((() => void) | (() => void)[]) | undefined;
|
|
95
|
+
activated?: ((() => void) | (() => void)[]) | undefined;
|
|
96
|
+
deactivated?: ((() => void) | (() => void)[]) | undefined;
|
|
97
|
+
beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
|
|
98
|
+
beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
|
|
99
|
+
destroyed?: ((() => void) | (() => void)[]) | undefined;
|
|
100
|
+
unmounted?: ((() => void) | (() => void)[]) | undefined;
|
|
101
|
+
renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
|
|
102
|
+
renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
|
|
103
|
+
errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
|
|
104
|
+
};
|
|
105
|
+
$forceUpdate: () => void;
|
|
106
|
+
$nextTick: typeof import("vue").nextTick;
|
|
107
|
+
$watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
|
|
108
|
+
} & Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
109
|
+
/**
|
|
110
|
+
* Color scheme
|
|
111
|
+
*/
|
|
112
|
+
type?: AlertType | undefined;
|
|
113
|
+
/**
|
|
114
|
+
* If details are provided,text used in the toggle button
|
|
115
|
+
*/
|
|
116
|
+
detailsTitle?: string | undefined;
|
|
117
|
+
/**
|
|
118
|
+
* Show the dismiss button
|
|
119
|
+
*/
|
|
120
|
+
dismissible?: boolean | undefined;
|
|
121
|
+
/**
|
|
122
|
+
* When an icon is displayed by default, use this to remove it
|
|
123
|
+
*/
|
|
124
|
+
noIcon?: boolean | undefined;
|
|
125
|
+
/**
|
|
126
|
+
* If you need square corners
|
|
127
|
+
*/
|
|
128
|
+
notRounded?: boolean | undefined;
|
|
129
|
+
/**
|
|
130
|
+
* Dismiss the alert after a delay (in ms)
|
|
131
|
+
*/
|
|
132
|
+
duration?: number | undefined;
|
|
133
|
+
}>, {
|
|
134
|
+
type: string;
|
|
135
|
+
detailsTitle: string;
|
|
136
|
+
}>>> & {
|
|
137
|
+
onDismiss?: (() => any) | undefined;
|
|
138
|
+
} & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
|
|
139
|
+
__isFragment?: undefined;
|
|
140
|
+
__isTeleport?: undefined;
|
|
141
|
+
__isSuspense?: undefined;
|
|
142
|
+
} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
33
143
|
/**
|
|
34
144
|
* Color scheme
|
|
35
145
|
*/
|
|
@@ -59,10 +169,22 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
59
169
|
detailsTitle: string;
|
|
60
170
|
}>>> & {
|
|
61
171
|
onDismiss?: (() => any) | undefined;
|
|
62
|
-
}, {
|
|
172
|
+
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
173
|
+
dismiss: () => void;
|
|
174
|
+
}, string, {
|
|
63
175
|
type: AlertType;
|
|
64
176
|
detailsTitle: string;
|
|
65
|
-
}
|
|
177
|
+
}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
|
|
178
|
+
$slots: {
|
|
179
|
+
icon: (_: {
|
|
180
|
+
strokeColor: import("@cypress-design/vue-icon").WindiColor | undefined;
|
|
181
|
+
class: string;
|
|
182
|
+
}) => any;
|
|
183
|
+
default: (_: {}) => any;
|
|
184
|
+
body: (_: {}) => any;
|
|
185
|
+
details: (_: {}) => any;
|
|
186
|
+
};
|
|
187
|
+
});
|
|
66
188
|
export default _default;
|
|
67
189
|
declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
68
190
|
declare type __VLS_TypePropsToRuntimeProps<T> = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.vue.d.ts","sourceRoot":"","sources":["../../Alert.vue.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Alert.vue.d.ts","sourceRoot":"","sources":["../../Alert.vue.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;;;;;;kBAkHlC,SAAS;0BAID,MAAM;;YAPrB;;eAEG;;YAEH;;eAEG;;YAEH;;eAEG;;YAEH;;eAEG;;YAEH;;eAEG;;YAEH;;eAEG;;;;;;;;;;;;;;;;;;;;;;YAtBH;;eAEG;;YAEH;;eAEG;;YAEH;;eAEG;;YAEH;;eAEG;;YAEH;;eAEG;;YAEH;;eAEG;;;;;;;;;;kBAnBI,SAAS;0BAID,MAAM;;;;;;;;;;;;;;;;;;;;;;QAPrB;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;;;;;;;;;;;IAtBH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;;;;;;UAnBI,SAAS;kBAID,MAAM;;;;;;;;;;;;AAnHzB,wBAwJK;AACL,aAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,aAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,aAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE3B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG;QACzD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,GAAG,CAAC,CAAC,CAAC,CAAC;CACR,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,24 +1,29 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cypress-design/vue-alert",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"files": [
|
|
5
5
|
"*"
|
|
6
6
|
],
|
|
7
7
|
"typings": "./dist/vue/index.d.ts",
|
|
8
8
|
"main": "./dist/index.umd.js",
|
|
9
|
-
"module": "./dist/index.es.
|
|
9
|
+
"module": "./dist/index.es.mjs",
|
|
10
10
|
"exports": {
|
|
11
11
|
".": {
|
|
12
|
-
"import": "./dist/index.es.
|
|
12
|
+
"import": "./dist/index.es.mjs",
|
|
13
13
|
"require": "./dist/index.umd.js"
|
|
14
|
+
},
|
|
15
|
+
"./style": {
|
|
16
|
+
"import": "./dist/style.css",
|
|
17
|
+
"require": "./dist/style.css"
|
|
14
18
|
}
|
|
15
19
|
},
|
|
16
20
|
"scripts": {
|
|
17
21
|
"build": "yarn build:module && yarn build:types",
|
|
18
|
-
"build:module": "
|
|
19
|
-
"build:types": "vue-tsc --project ./tsconfig.build.json"
|
|
22
|
+
"build:module": "yarn vite build",
|
|
23
|
+
"build:types": "yarn vue-tsc --project ./tsconfig.build.json"
|
|
20
24
|
},
|
|
21
25
|
"dependencies": {
|
|
26
|
+
"@cypress-design/details-animation": "*",
|
|
22
27
|
"@cypress-design/vue-icon": "*"
|
|
23
28
|
},
|
|
24
29
|
"license": "MIT"
|
package/tsconfig.build.json
CHANGED
package/vite.config.ts
ADDED
package/dist/index.es.js
DELETED
|
@@ -1,223 +0,0 @@
|
|
|
1
|
-
import { defineComponent, ref, useSlots, computed, onMounted, onUnmounted, h, openBlock, createElementBlock, normalizeClass, createElementVNode, unref, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createBlock, resolveDynamicComponent, mergeProps, createVNode, createTextVNode, toDisplayString } from 'vue';
|
|
2
|
-
import { IconWarningCircle, IconCheckmarkOutline, IconActionDeleteLarge, IconChevronDownSmall } from '@cypress-design/vue-icon';
|
|
3
|
-
|
|
4
|
-
const alertClasses = {
|
|
5
|
-
neutral: {
|
|
6
|
-
headerClass: 'text-gray-800 bg-gray-100',
|
|
7
|
-
bodyClass: 'bg-gray-50 text-gray-500',
|
|
8
|
-
borderClass: 'border-gray-100',
|
|
9
|
-
detailsHeaderClass: 'text-gray-600',
|
|
10
|
-
/* <windi-keep strokeColor="gray-600"/> */
|
|
11
|
-
iconCloseColor: 'gray-600',
|
|
12
|
-
/* <windi-keep strokeColor="gray-500"/> */
|
|
13
|
-
iconColor: 'gray-500',
|
|
14
|
-
/* <windi-keep strokeColor="gray-300"/> */
|
|
15
|
-
iconChevronColor: 'gray-300',
|
|
16
|
-
},
|
|
17
|
-
info: {
|
|
18
|
-
headerClass: 'text-indigo-700 bg-indigo-100',
|
|
19
|
-
bodyClass: 'bg-indigo-50 text-indigo-500',
|
|
20
|
-
borderClass: 'border-indigo-100',
|
|
21
|
-
detailsHeaderClass: 'text-indigo-600',
|
|
22
|
-
/* <windi-keep strokeColor="indigo-500"/> */
|
|
23
|
-
iconCloseColor: 'indigo-500',
|
|
24
|
-
/* <windi-keep strokeColor="indigo-500"/> */
|
|
25
|
-
iconColor: 'indigo-500',
|
|
26
|
-
/* <windi-keep strokeColor="indigo-300"/> */
|
|
27
|
-
iconChevronColor: 'indigo-300',
|
|
28
|
-
},
|
|
29
|
-
warning: {
|
|
30
|
-
headerClass: 'text-orange-700 bg-orange-100',
|
|
31
|
-
bodyClass: 'bg-orange-50 text-orange-500',
|
|
32
|
-
borderClass: 'border-orange-100',
|
|
33
|
-
detailsHeaderClass: 'text-orange-600',
|
|
34
|
-
/* <windi-keep strokeColor="orange-500"/> */
|
|
35
|
-
iconCloseColor: 'orange-500',
|
|
36
|
-
/* <windi-keep strokeColor="orange-400"/> */
|
|
37
|
-
iconColor: 'orange-400',
|
|
38
|
-
/* <windi-keep strokeColor="orange-300"/> */
|
|
39
|
-
iconChevronColor: 'orange-300',
|
|
40
|
-
},
|
|
41
|
-
error: {
|
|
42
|
-
headerClass: 'text-red-700 bg-red-100',
|
|
43
|
-
bodyClass: 'bg-red-50 text-red-500',
|
|
44
|
-
borderClass: 'border-red-100',
|
|
45
|
-
detailsHeaderClass: 'text-red-600',
|
|
46
|
-
/* <windi-keep strokeColor="red-500"/> */
|
|
47
|
-
iconCloseColor: 'red-500',
|
|
48
|
-
/* <windi-keep strokeColor="red-400"/> */
|
|
49
|
-
iconColor: 'red-400',
|
|
50
|
-
/* <windi-keep strokeColor="red-300"/> */
|
|
51
|
-
iconChevronColor: 'red-300',
|
|
52
|
-
},
|
|
53
|
-
success: {
|
|
54
|
-
headerClass: 'text-jade-700 bg-jade-100',
|
|
55
|
-
bodyClass: 'bg-jade-50 text-jade-600',
|
|
56
|
-
borderClass: 'border-jade-100',
|
|
57
|
-
detailsHeaderClass: 'text-jade-600',
|
|
58
|
-
/* <windi-keep strokeColor="jade-600"/> */
|
|
59
|
-
iconCloseColor: 'jade-600',
|
|
60
|
-
/* <windi-keep strokeColor="jade-500"/> */
|
|
61
|
-
iconColor: 'jade-500',
|
|
62
|
-
/* <windi-keep strokeColor="jade-300"/> */
|
|
63
|
-
iconChevronColor: 'jade-300',
|
|
64
|
-
},
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
function styleInject(css, ref) {
|
|
68
|
-
if ( ref === void 0 ) ref = {};
|
|
69
|
-
var insertAt = ref.insertAt;
|
|
70
|
-
|
|
71
|
-
if (!css || typeof document === 'undefined') { return; }
|
|
72
|
-
|
|
73
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
|
74
|
-
var style = document.createElement('style');
|
|
75
|
-
style.type = 'text/css';
|
|
76
|
-
|
|
77
|
-
if (insertAt === 'top') {
|
|
78
|
-
if (head.firstChild) {
|
|
79
|
-
head.insertBefore(style, head.firstChild);
|
|
80
|
-
} else {
|
|
81
|
-
head.appendChild(style);
|
|
82
|
-
}
|
|
83
|
-
} else {
|
|
84
|
-
head.appendChild(style);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
if (style.styleSheet) {
|
|
88
|
-
style.styleSheet.cssText = css;
|
|
89
|
-
} else {
|
|
90
|
-
style.appendChild(document.createTextNode(css));
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
var css_248z = "\ndetails summary .icon[data-v-836252c4] {\n transform: rotate(-90deg);\n}\ndetails[open] summary .icon[data-v-836252c4] {\n transform: rotate(0);\n}\n";
|
|
95
|
-
styleInject(css_248z);
|
|
96
|
-
|
|
97
|
-
var _export_sfc = (sfc, props) => {
|
|
98
|
-
const target = sfc.__vccOpts || sfc;
|
|
99
|
-
for (const [key, val] of props) {
|
|
100
|
-
target[key] = val;
|
|
101
|
-
}
|
|
102
|
-
return target;
|
|
103
|
-
};
|
|
104
|
-
|
|
105
|
-
const _hoisted_1 = { class: "flex-1 font-medium" };
|
|
106
|
-
const _hoisted_2 = { class: "mt-16px" };
|
|
107
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
108
|
-
__name: "Alert",
|
|
109
|
-
props: {
|
|
110
|
-
type: { type: null, required: false, default: "info" },
|
|
111
|
-
detailsTitle: { type: String, required: false, default: "Additional details" },
|
|
112
|
-
dismissible: { type: Boolean, required: false },
|
|
113
|
-
noIcon: { type: Boolean, required: false },
|
|
114
|
-
notRounded: { type: Boolean, required: false },
|
|
115
|
-
duration: { type: Number, required: false }
|
|
116
|
-
},
|
|
117
|
-
emits: ["dismiss"],
|
|
118
|
-
setup(__props, { emit }) {
|
|
119
|
-
const props = __props;
|
|
120
|
-
const dismissed = ref(false);
|
|
121
|
-
const slots = useSlots();
|
|
122
|
-
const typeClasses = computed(() => {
|
|
123
|
-
return alertClasses[props.type];
|
|
124
|
-
});
|
|
125
|
-
let timeout;
|
|
126
|
-
onMounted(() => {
|
|
127
|
-
if (props.duration) {
|
|
128
|
-
timeout = setTimeout(dismiss, props.duration);
|
|
129
|
-
}
|
|
130
|
-
});
|
|
131
|
-
onUnmounted(() => {
|
|
132
|
-
if (timeout) {
|
|
133
|
-
clearTimeout(timeout);
|
|
134
|
-
}
|
|
135
|
-
});
|
|
136
|
-
function dismiss() {
|
|
137
|
-
dismissed.value = true;
|
|
138
|
-
emit("dismiss");
|
|
139
|
-
if (timeout) {
|
|
140
|
-
clearTimeout(timeout);
|
|
141
|
-
timeout = void 0;
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
const computedIconProps = computed(() => {
|
|
145
|
-
return {
|
|
146
|
-
strokeColor: alertClasses[props.type].iconColor,
|
|
147
|
-
class: "my-4px mr-8px"
|
|
148
|
-
};
|
|
149
|
-
});
|
|
150
|
-
const icon = computed(() => {
|
|
151
|
-
switch (props.type) {
|
|
152
|
-
case "info":
|
|
153
|
-
return null;
|
|
154
|
-
case "success":
|
|
155
|
-
return () => h(IconCheckmarkOutline, computedIconProps.value);
|
|
156
|
-
case "warning":
|
|
157
|
-
return () => h(IconWarningCircle, computedIconProps.value);
|
|
158
|
-
case "error":
|
|
159
|
-
return () => h(IconWarningCircle, computedIconProps.value);
|
|
160
|
-
default:
|
|
161
|
-
return null;
|
|
162
|
-
}
|
|
163
|
-
});
|
|
164
|
-
return (_ctx, _cache) => {
|
|
165
|
-
return !dismissed.value ? (openBlock(), createElementBlock("div", {
|
|
166
|
-
key: 0,
|
|
167
|
-
class: normalizeClass(["overflow-hidden text-left", props.notRounded ? void 0 : "rounded"])
|
|
168
|
-
}, [
|
|
169
|
-
createElementVNode("div", {
|
|
170
|
-
class: normalizeClass(["flex p-16px", unref(typeClasses).headerClass])
|
|
171
|
-
}, [
|
|
172
|
-
createCommentVNode(" @slot replace the default left icon here "),
|
|
173
|
-
renderSlot(_ctx.$slots, "icon", normalizeProps(guardReactiveProps(unref(computedIconProps))), () => [
|
|
174
|
-
!props.noIcon && unref(icon) ? (openBlock(), createBlock(resolveDynamicComponent(unref(icon)), normalizeProps(mergeProps({ key: 0 }, unref(computedIconProps))), null, 16)) : createCommentVNode("v-if", true)
|
|
175
|
-
], true),
|
|
176
|
-
createElementVNode("div", _hoisted_1, [
|
|
177
|
-
createCommentVNode(" @slot title of the alert "),
|
|
178
|
-
renderSlot(_ctx.$slots, "default", {}, void 0, true)
|
|
179
|
-
]),
|
|
180
|
-
__props.dismissible ? (openBlock(), createElementBlock("button", {
|
|
181
|
-
key: 0,
|
|
182
|
-
class: "m-4px ml-8px h-16px",
|
|
183
|
-
onClick: dismiss,
|
|
184
|
-
"aria-label": "Dismiss"
|
|
185
|
-
}, [
|
|
186
|
-
createVNode(unref(IconActionDeleteLarge), {
|
|
187
|
-
"stroke-color": unref(typeClasses).iconCloseColor
|
|
188
|
-
}, null, 8, ["stroke-color"])
|
|
189
|
-
])) : createCommentVNode("v-if", true)
|
|
190
|
-
], 2),
|
|
191
|
-
unref(slots).body ? (openBlock(), createElementBlock("div", {
|
|
192
|
-
key: 0,
|
|
193
|
-
class: normalizeClass(["p-16px", unref(typeClasses).bodyClass])
|
|
194
|
-
}, [
|
|
195
|
-
createCommentVNode(" @slot body/details of the alert "),
|
|
196
|
-
renderSlot(_ctx.$slots, "body", {}, void 0, true)
|
|
197
|
-
], 2)) : createCommentVNode("v-if", true),
|
|
198
|
-
unref(slots).details ? (openBlock(), createElementBlock("details", {
|
|
199
|
-
key: 1,
|
|
200
|
-
class: normalizeClass(["p-16px border-t-1", [unref(typeClasses).bodyClass, unref(typeClasses).borderClass]])
|
|
201
|
-
}, [
|
|
202
|
-
createElementVNode("summary", {
|
|
203
|
-
class: normalizeClass(["flex font-medium cursor-pointer", unref(typeClasses).detailsHeaderClass])
|
|
204
|
-
}, [
|
|
205
|
-
createVNode(unref(IconChevronDownSmall), {
|
|
206
|
-
strokeColor: unref(typeClasses).iconChevronColor,
|
|
207
|
-
class: "icon my-4px mr-8px"
|
|
208
|
-
}, null, 8, ["strokeColor"]),
|
|
209
|
-
createTextVNode(" " + toDisplayString(props.detailsTitle), 1)
|
|
210
|
-
], 2),
|
|
211
|
-
createElementVNode("div", _hoisted_2, [
|
|
212
|
-
createCommentVNode("@slot Togglable additional details"),
|
|
213
|
-
renderSlot(_ctx.$slots, "details", {}, void 0, true)
|
|
214
|
-
])
|
|
215
|
-
], 2)) : createCommentVNode("v-if", true)
|
|
216
|
-
], 2)) : createCommentVNode("v-if", true);
|
|
217
|
-
};
|
|
218
|
-
}
|
|
219
|
-
});
|
|
220
|
-
var Alert = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-836252c4"], ["__file", "/home/runner/work/cypress-design/cypress-design/components/Alert/vue/Alert.vue"]]);
|
|
221
|
-
|
|
222
|
-
export { Alert as default };
|
|
223
|
-
//# sourceMappingURL=index.es.js.map
|
package/dist/index.es.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../../constants.ts","../../../../node_modules/style-inject/dist/style-inject.es.js","../plugin-vue:export-helper","../Alert.vue"],"sourcesContent":[null,"function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","\nexport default (sfc, props) => {\n const target = sfc.__vccOpts || sfc;\n for (const [key, val] of props) {\n target[key] = val;\n }\n return target;\n}\n","<template>\n <div v-if=\"!dismissed\" class=\"overflow-hidden text-left\" :class=\"props.notRounded ? undefined : 'rounded'\">\n <div class=\"flex p-16px\" :class=\"typeClasses.headerClass\">\n <!-- @slot replace the default left icon here -->\n <slot name=\"icon\" v-bind=\"computedIconProps\">\n <component v-if=\"!props.noIcon && icon\" :is=\"icon\" v-bind=\"computedIconProps\" />\n </slot>\n <div class=\"flex-1 font-medium\">\n <!-- @slot title of the alert -->\n <slot />\n </div>\n <button v-if=\"dismissible\" class=\"m-4px ml-8px h-16px\" @click=\"dismiss\" aria-label=\"Dismiss\">\n <IconActionDeleteLarge :stroke-color=\"typeClasses.iconCloseColor\" />\n </button>\n </div>\n <div v-if=\"slots.body\" class=\"p-16px\" :class=\"typeClasses.bodyClass\">\n <!-- @slot body/details of the alert -->\n <slot name=\"body\" />\n </div>\n <details v-if=\"slots.details\" class=\"p-16px border-t-1\" :class=\"[typeClasses.bodyClass, typeClasses.borderClass]\">\n <summary class=\"flex font-medium cursor-pointer\" :class=\"typeClasses.detailsHeaderClass\">\n <IconChevronDownSmall :strokeColor=\"typeClasses.iconChevronColor\" class=\"icon my-4px mr-8px\" />\n {{ props.detailsTitle }}\n </summary>\n <div class=\"mt-16px\">\n <!--@slot Togglable additional details-->\n <slot name=\"details\" />\n </div>\n </details>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { FunctionalComponent, ComputedRef } from 'vue';\nimport { computed, useSlots, h, ref, onMounted, onUnmounted } from 'vue'\nimport {\n IconChevronDownSmall, IconActionDeleteLarge,\n IconWarningCircle, IconCheckmarkOutline,\n} from '@cypress-design/vue-icon'\nimport type { AlertType } from '../constants'\nimport { alertClasses } from '../constants'\n\nconst dismissed = ref(false)\n\nconst slots = useSlots()\n\nconst emit = defineEmits<{\n /**\n * Clicking on the dismiss button or dismissed after a timeout\n */\n (event: 'dismiss'): void,\n}>()\n\nconst props = withDefaults(defineProps<{\n /**\n * Color scheme\n */\n type?: AlertType\n /**\n * If details are provided,text used in the toggle button\n */\n detailsTitle?: string\n /**\n * Show the dismiss button\n */\n dismissible?: boolean\n /**\n * When an icon is displayed by default, use this to remove it\n */\n noIcon?: boolean\n /**\n * If you need square corners\n */\n notRounded?: boolean\n /**\n * Dismiss the alert after a delay (in ms)\n */\n duration?: number\n}>(), {\n type: 'info',\n detailsTitle: 'Additional details',\n})\n\nconst typeClasses = computed(() => {\n return alertClasses[props.type]\n})\n\nlet timeout: number | undefined\n\nonMounted(() => {\n if (props.duration) {\n timeout = setTimeout(dismiss, props.duration) as any\n }\n})\n\nonUnmounted(() => {\n if (timeout) {\n clearTimeout(timeout)\n }\n})\n\nfunction dismiss() {\n dismissed.value = true\n emit('dismiss')\n if (timeout) {\n clearTimeout(timeout)\n timeout = undefined\n }\n}\n\nconst computedIconProps = computed(() => {\n return {\n strokeColor: alertClasses[props.type].iconColor,\n class: 'my-4px mr-8px'\n }\n})\n\nconst icon: ComputedRef<FunctionalComponent | null> = computed(() => {\n switch (props.type) {\n case 'info':\n return null;\n case 'success':\n return () => h(IconCheckmarkOutline, computedIconProps.value)\n case 'warning':\n return () => h(IconWarningCircle, computedIconProps.value)\n case 'error':\n return () => h(IconWarningCircle, computedIconProps.value)\n default:\n return null;\n }\n})\n\n</script>\n\n<style scoped>\ndetails summary .icon {\n transform: rotate(-90deg);\n}\n\ndetails[open] summary .icon {\n transform: rotate(0);\n}\n</style>\n"],"names":[],"mappings":"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"}
|
package/rollup.config.js
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import commonjs from '@rollup/plugin-commonjs'
|
|
2
|
-
import resolve from '@rollup/plugin-node-resolve'
|
|
3
|
-
import typescript from '@rollup/plugin-typescript'
|
|
4
|
-
import vue from '@vitejs/plugin-vue'
|
|
5
|
-
import postcss from 'rollup-plugin-postcss'
|
|
6
|
-
|
|
7
|
-
export default {
|
|
8
|
-
input: './index.ts',
|
|
9
|
-
output: [
|
|
10
|
-
{
|
|
11
|
-
file: './dist/index.umd.js',
|
|
12
|
-
format: 'cjs',
|
|
13
|
-
exports: 'auto',
|
|
14
|
-
sourcemap: true,
|
|
15
|
-
sourcemapPathTransform: (sourcePath) =>
|
|
16
|
-
sourcePath.includes('node_modules')
|
|
17
|
-
? sourcePath
|
|
18
|
-
: sourcePath.replace(/^\.\.\/\.\.\/(\w)/, `../../vue/$1`),
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
file: './dist/index.es.js',
|
|
22
|
-
format: 'esm',
|
|
23
|
-
sourcemap: true,
|
|
24
|
-
sourcemapPathTransform: (sourcePath) =>
|
|
25
|
-
sourcePath.includes('node_modules')
|
|
26
|
-
? sourcePath
|
|
27
|
-
: sourcePath.replace(/^\.\.\/\.\.\/(\w)/, `../../vue/$1`),
|
|
28
|
-
},
|
|
29
|
-
],
|
|
30
|
-
plugins: [
|
|
31
|
-
resolve(),
|
|
32
|
-
commonjs(),
|
|
33
|
-
vue(),
|
|
34
|
-
postcss(),
|
|
35
|
-
typescript({
|
|
36
|
-
tsconfig: './tsconfig.build.json',
|
|
37
|
-
include: ['./*.ts', '../*.ts', './*.vue'],
|
|
38
|
-
declaration: false,
|
|
39
|
-
declarationMap: false,
|
|
40
|
-
sourceMap: true,
|
|
41
|
-
}),
|
|
42
|
-
],
|
|
43
|
-
external: [
|
|
44
|
-
'vue',
|
|
45
|
-
'@cypress-design/icon-registry',
|
|
46
|
-
'@cypress-design/vue-icon',
|
|
47
|
-
],
|
|
48
|
-
}
|