@cypress-design/vue-alert 0.2.0 → 0.4.0

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.
Files changed (18) hide show
  1. package/.turbo/turbo-build.log +13 -0
  2. package/Alert.rootstory.tsx +4 -4
  3. package/Alert.vue +8 -8
  4. package/AlertVue.cy.tsx +1 -0
  5. package/CHANGELOG.md +23 -0
  6. package/ReadMe.md +24 -23
  7. package/dist/constants.d.ts +7 -7
  8. package/dist/constants.d.ts.map +1 -1
  9. package/dist/index.es.mjs +70 -51
  10. package/dist/index.es.mjs.map +1 -1
  11. package/dist/index.umd.js +3 -3
  12. package/dist/index.umd.js.map +1 -1
  13. package/dist/vue/Alert.vue.d.ts +54 -175
  14. package/dist/vue/Alert.vue.d.ts.map +1 -1
  15. package/package.json +31 -28
  16. package/tsconfig.build.json +2 -1
  17. package/tsconfig.json +3 -0
  18. package/Alert.stories.mdx +0 -76
package/dist/vue/Alert.vue.d.ts CHANGED
@@ -1,162 +1,40 @@
1
1
  import { AlertSize, AlertType } from '../constants';
2
- declare const _default: {
3
- new (...args: any[]): {
4
- $: import("vue").ComponentInternalInstance;
5
- $data: {};
6
- $props: Partial<{
7
- type: AlertType;
8
- detailsTitle: string;
9
- size: AlertSize;
10
- }> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
11
- /**
12
- * Color scheme
13
- */
14
- type?: AlertType | undefined;
15
- /**
16
- * If details are provided,text used in the toggle button
17
- */
18
- detailsTitle?: string | undefined;
19
- /**
20
- * Show the dismiss button
21
- */
22
- dismissible?: boolean | undefined;
23
- /**
24
- * When an icon is displayed by default, use this to remove it
25
- */
26
- noIcon?: boolean | undefined;
27
- /**
28
- * If you need square corners
29
- */
30
- notRounded?: boolean | undefined;
31
- /**
32
- * Dismiss the alert after a delay (in ms)
33
- */
34
- duration?: number | undefined;
35
- /**
36
- * Size of the alert
37
- */
38
- size?: "xs" | "sm" | "md" | "lg" | undefined;
39
- }>, {
40
- type: AlertType;
41
- detailsTitle: string;
42
- size: "xs" | "sm" | "md" | "lg";
43
- }>>> & {
44
- onDismiss?: (() => any) | undefined;
45
- } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "detailsTitle" | "size">;
46
- $attrs: {
47
- [x: string]: unknown;
48
- };
49
- $refs: {
50
- [x: string]: unknown;
51
- };
52
- $slots: Readonly<{
53
- [name: string]: import("vue").Slot | undefined;
54
- }>;
55
- $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
56
- $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
57
- $emit: (event: "dismiss") => void;
58
- $el: any;
59
- $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
60
- /**
61
- * Color scheme
62
- */
63
- type?: AlertType | undefined;
64
- /**
65
- * If details are provided,text used in the toggle button
66
- */
67
- detailsTitle?: string | undefined;
68
- /**
69
- * Show the dismiss button
70
- */
71
- dismissible?: boolean | undefined;
72
- /**
73
- * When an icon is displayed by default, use this to remove it
74
- */
75
- noIcon?: boolean | undefined;
76
- /**
77
- * If you need square corners
78
- */
79
- notRounded?: boolean | undefined;
80
- /**
81
- * Dismiss the alert after a delay (in ms)
82
- */
83
- duration?: number | undefined;
84
- /**
85
- * Size of the alert
86
- */
87
- size?: "xs" | "sm" | "md" | "lg" | undefined;
88
- }>, {
89
- type: AlertType;
90
- detailsTitle: string;
91
- size: "xs" | "sm" | "md" | "lg";
92
- }>>> & {
93
- onDismiss?: (() => any) | undefined;
94
- }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
95
- dismiss: () => void;
96
- }, string, {
97
- type: AlertType;
98
- detailsTitle: string;
99
- size: AlertSize;
100
- }> & {
101
- beforeCreate?: ((() => void) | (() => void)[]) | undefined;
102
- created?: ((() => void) | (() => void)[]) | undefined;
103
- beforeMount?: ((() => void) | (() => void)[]) | undefined;
104
- mounted?: ((() => void) | (() => void)[]) | undefined;
105
- beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
106
- updated?: ((() => void) | (() => void)[]) | undefined;
107
- activated?: ((() => void) | (() => void)[]) | undefined;
108
- deactivated?: ((() => void) | (() => void)[]) | undefined;
109
- beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
110
- beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
111
- destroyed?: ((() => void) | (() => void)[]) | undefined;
112
- unmounted?: ((() => void) | (() => void)[]) | undefined;
113
- renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
114
- renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
115
- 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;
116
- };
117
- $forceUpdate: () => void;
118
- $nextTick: typeof import("vue").nextTick;
119
- $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
120
- } & Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
121
- /**
122
- * Color scheme
123
- */
124
- type?: AlertType | undefined;
125
- /**
126
- * If details are provided,text used in the toggle button
127
- */
128
- detailsTitle?: string | undefined;
129
- /**
130
- * Show the dismiss button
131
- */
132
- dismissible?: boolean | undefined;
133
- /**
134
- * When an icon is displayed by default, use this to remove it
135
- */
136
- noIcon?: boolean | undefined;
137
- /**
138
- * If you need square corners
139
- */
140
- notRounded?: boolean | undefined;
141
- /**
142
- * Dismiss the alert after a delay (in ms)
143
- */
144
- duration?: number | undefined;
145
- /**
146
- * Size of the alert
147
- */
148
- size?: "xs" | "sm" | "md" | "lg" | undefined;
149
- }>, {
150
- type: AlertType;
151
- detailsTitle: string;
152
- size: "xs" | "sm" | "md" | "lg";
153
- }>>> & {
154
- onDismiss?: (() => any) | undefined;
155
- } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
156
- __isFragment?: undefined;
157
- __isTeleport?: undefined;
158
- __isSuspense?: undefined;
159
- } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
2
+ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
3
+ /**
4
+ * Color scheme
5
+ */
6
+ type?: AlertType | undefined;
7
+ /**
8
+ * If details are provided,text used in the toggle button
9
+ */
10
+ detailsTitle?: string | undefined;
11
+ /**
12
+ * Show the dismiss button
13
+ */
14
+ dismissible?: boolean | undefined;
15
+ /**
16
+ * When an icon is displayed by default, use this to remove it
17
+ */
18
+ noIcon?: boolean | undefined;
19
+ /**
20
+ * If you need square corners
21
+ */
22
+ notRounded?: boolean | undefined;
23
+ /**
24
+ * Dismiss the alert after a delay (in ms)
25
+ */
26
+ duration?: number | undefined;
27
+ /**
28
+ * Size of the alert
29
+ */
30
+ size?: "xs" | "sm" | "md" | "lg" | undefined;
31
+ }>, {
32
+ type: AlertType;
33
+ detailsTitle: string;
34
+ size: "xs" | "sm" | "md" | "lg";
35
+ }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
36
+ dismiss: () => void;
37
+ }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
160
38
  /**
161
39
  * Color scheme
162
40
  */
@@ -191,26 +69,22 @@ declare const _default: {
191
69
  size: "xs" | "sm" | "md" | "lg";
192
70
  }>>> & {
193
71
  onDismiss?: (() => any) | undefined;
194
- }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
195
- dismiss: () => void;
196
- }, string, {
72
+ }, {
197
73
  type: AlertType;
198
74
  detailsTitle: string;
199
75
  size: AlertSize;
200
- }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
201
- $slots: {
202
- icon: (_: {
203
- strokeColor: import("@cypress-design/vue-icon").WindiColor | undefined;
204
- class: string;
205
- }) => any;
206
- default: (_: {}) => any;
207
- body: (_: {}) => any;
208
- details: (_: {}) => any;
209
- };
210
- });
76
+ }>, {
77
+ icon: (_: {
78
+ strokeColor: import("@cypress-design/vue-icon").WindiColor | undefined;
79
+ class: string;
80
+ }) => any;
81
+ default: (_: {}) => any;
82
+ body: (_: {}) => any;
83
+ details: (_: {}) => any;
84
+ }>;
211
85
  export default _default;
212
- declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
213
- declare type __VLS_TypePropsToRuntimeProps<T> = {
86
+ type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
87
+ type __VLS_TypePropsToRuntimeProps<T> = {
214
88
  [K in keyof T]-?: {} extends Pick<T, K> ? {
215
89
  type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
216
90
  } : {
@@ -218,9 +92,14 @@ declare type __VLS_TypePropsToRuntimeProps<T> = {
218
92
  required: true;
219
93
  };
220
94
  };
221
- declare type __VLS_WithDefaults<P, D> = {
95
+ type __VLS_WithDefaults<P, D> = {
222
96
  [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
223
97
  default: D[K];
224
98
  } : P[K];
225
99
  };
100
+ type __VLS_WithTemplateSlots<T, S> = T & {
101
+ new (): {
102
+ $slots: S;
103
+ };
104
+ };
226
105
  //# sourceMappingURL=Alert.vue.d.ts.map
package/dist/vue/Alert.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.vue.d.ts","sourceRoot":"","sources":["../../Alert.vue.ts"],"names":[],"mappings":"AAUA,OAAO,EACL,SAAS,EAET,SAAS,EAIV,MAAM,cAAc,CAAA;;;;;;kBA4HV,SAAS;0BAID,MAAM;kBAoBd,SAAS;;YA3BhB;;eAEG;;YAEH;;eAEG;;YAEH;;eAEG;;YAEH;;eAEG;;YAEH;;eAEG;;YAEH;;eAEG;;YAEH;;eAEG;;;;;;;;;;;;;;;;;;;;;;;YA1BH;;eAEG;;YAEH;;eAEG;;YAEH;;eAEG;;YAEH;;eAEG;;YAEH;;eAEG;;YAEH;;eAEG;;YAEH;;eAEG;;;;;;;;;;;kBAvBI,SAAS;0BAID,MAAM;kBAoBd,SAAS;;;;;;;;;;;;;;;;;;;;;;QA3BhB;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;;;;;;;;;;;;IA1BH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;;;;;;;UAvBI,SAAS;kBAID,MAAM;UAoBd,SAAS;;;;;;;;;;;;AAjJpB,wBAsKK;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"}
1
+ {"version":3,"file":"Alert.vue.d.ts","sourceRoot":"","sources":["../../Alert.vue.ts"],"names":[],"mappings":"AAUA,OAAO,EACL,SAAS,EAET,SAAS,EAIV,MAAM,cAAc,CAAA;;IA0HjB;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;;;;;IA1BH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;;;;;UAvBI,SAAS;kBAID,MAAM;UAoBd,SAAS;;;;;UA4LS,GAAG;wBACA,GAAG;qBACL,GAAG;wBACA,GAAG;;AAjVpC,wBA0Wc;AACd,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,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,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,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;AAWN,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAAE,MAAM,EAAE,CAAC,CAAA;KAAE,CAAA;CAAE,CAAC"}
package/package.json CHANGED
@@ -1,30 +1,33 @@
1
1
  {
2
- "name": "@cypress-design/vue-alert",
3
- "version": "0.2.0",
4
- "files": [
5
- "*"
6
- ],
7
- "typings": "./dist/vue/index.d.ts",
8
- "main": "./dist/index.umd.js",
9
- "module": "./dist/index.es.mjs",
10
- "exports": {
11
- ".": {
12
- "import": "./dist/index.es.mjs",
13
- "require": "./dist/index.umd.js"
14
- },
15
- "./style": {
16
- "import": "./dist/style.css",
17
- "require": "./dist/style.css"
18
- }
19
- },
20
- "scripts": {
21
- "build": "yarn build:module && yarn build:types",
22
- "build:module": "yarn vite build",
23
- "build:types": "yarn vue-tsc --project ./tsconfig.build.json"
24
- },
25
- "dependencies": {
26
- "@cypress-design/details-animation": "*",
27
- "@cypress-design/vue-icon": "*"
28
- },
29
- "license": "MIT"
2
+ "name": "@cypress-design/vue-alert",
3
+ "version": "0.4.0",
4
+ "files": [
5
+ "*"
6
+ ],
7
+ "typings": "./dist/vue/index.d.ts",
8
+ "main": "./dist/index.umd.js",
9
+ "module": "./dist/index.es.mjs",
10
+ "exports": {
11
+ ".": {
12
+ "import": "./dist/index.es.mjs",
13
+ "require": "./dist/index.umd.js"
14
+ },
15
+ "./style": {
16
+ "import": "./dist/style.css",
17
+ "require": "./dist/style.css"
18
+ }
19
+ },
20
+ "scripts": {
21
+ "build": "yarn build:module && yarn build:types",
22
+ "build:module": "yarn vite build",
23
+ "build:types": "yarn vue-tsc --project ./tsconfig.build.json"
24
+ },
25
+ "dependencies": {
26
+ "@cypress-design/details-animation": "*",
27
+ "@cypress-design/vue-icon": "*"
28
+ },
29
+ "devDependencies": {
30
+ "@cypress-design/css": "*"
31
+ },
32
+ "license": "MIT"
30
33
  }
package/tsconfig.build.json CHANGED
@@ -3,6 +3,7 @@
3
3
  "include": ["./*.vue", "./index.ts", "../constants.ts"],
4
4
  "compilerOptions": {
5
5
  "outDir": "dist",
6
- "rootDir": "../"
6
+ "rootDir": "../",
7
+ "composite": false
7
8
  }
8
9
  }
package/tsconfig.json CHANGED
@@ -1,5 +1,8 @@
1
1
  {
2
2
  "extends": "../../../tsconfig.vue.json",
3
+ "compilerOptions": {
4
+ "rootDir": "../"
5
+ },
3
6
  "include": [
4
7
  "*.vue",
5
8
  "*.ts",
package/Alert.stories.mdx DELETED
@@ -1,76 +0,0 @@
1
- import { ArgsTable, Canvas, Meta, Story, Description } from '@storybook/addon-docs'
2
- import { version } from "./package.json"
3
- import changelog from "./CHANGELOG.md?raw"
4
-
5
- import Alert from './Alert.vue'
6
-
7
- import AlertStory from './Alert.rootstory'
8
-
9
- <h1>Alert<span className="text-lg font-normal"> - v{version}</span></h1>
10
-
11
- <Meta title="Alert" component={Alert} parameters={{
12
- design: {
13
- type: "figma",
14
- url: "https://www.figma.com/file/1WJ3GVQyMV5e7xVxPg3yID/Design-System?node-id=1035%3A9923",
15
- }
16
- }} />
17
-
18
- <Canvas withSource="none">
19
- <Story name="Alert">
20
- {AlertStory()}
21
- </Story>
22
- </Canvas>
23
-
24
- <ArgsTable />
25
-
26
- ## Usage
27
-
28
- The simplest is to use with plain text. By default, type is `info`.
29
-
30
- ```vue
31
- <script setup>
32
- import Alert from '@cypress-design/vue-alert'
33
- </script>
34
- <template>
35
- <Alert type="error">Great Scott!!</Alert>
36
- </template>
37
- ```
38
-
39
- One can also have rich text in both the title and the body.
40
-
41
- ```vue
42
- <template>
43
- <Alert>
44
- This is an <code>info</code> message
45
- <template #body>
46
- <p>This is the body of the alert.</p>
47
- </template>
48
- </Alert>
49
- </template>
50
- ```
51
-
52
- If you want the alert to be dismissible, you can add the `dismissible` prop. Don't forget to add the `@dismiss` prop to handle the dismiss event.
53
-
54
- ```vue
55
- <template>
56
- <Alert
57
- title="This is an info message"
58
- dismissible
59
- @dismiss="() => setDismissed(true)"
60
- />
61
- </template>
62
- ```
63
-
64
- You can also remove the rounded corners and the icon of the alert by adding the `notRounded` and the `noIcon` props.
65
-
66
- ```vue
67
- <template>
68
- <Alert type="warning" title="This is an info message" notRounded noIcon />
69
- </template>
70
- ```
71
-
72
-
73
- <Description>
74
- {changelog.replace(/^# .+/, '## Changelog')}
75
- </Description>
76
-