@cypress-design/vue-alert 0.3.0 → 0.5.0

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@cypress-design/vue-alert",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "files": [
     "*"
   ],
-  "typings": "./dist/vue/index.d.ts",
+  "typings": "./dist/index.d.ts",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.mjs",
   "exports": {
     ".": {
       "import": "./dist/index.es.mjs",
-      "require": "./dist/index.umd.js"
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
     },
     "./style": {
       "import": "./dist/style.css",
@@ -26,5 +27,9 @@
     "@cypress-design/details-animation": "*",
     "@cypress-design/vue-icon": "*"
   },
+  "devDependencies": {
+    "@cypress-design/constants-alert": "*",
+    "@cypress-design/css": "*"
+  },
   "license": "MIT"
 }

package/tsconfig.build.json

@@ -1,8 +1,9 @@
 {
   "extends": "../../../tsconfig.vue.json",
-  "include": ["./*.vue", "./index.ts", "../constants.ts"],
+  "include": ["./*.vue", "./index.ts"],
   "compilerOptions": {
     "outDir": "dist",
-    "rootDir": "../"
+    "rootDir": "./",
+    "composite": false
   }
 }

package/tsconfig.json

@@ -1,10 +1,7 @@
 {
   "extends": "../../../tsconfig.vue.json",
-  "include": [
-    "*.vue",
-    "*.ts",
-    "*.tsx",
-    "../constants.ts",
-    "../../../cypress/support/*.ts"
-  ]
+  "compilerOptions": {
+    "rootDir": "../"
+  },
+  "include": ["*.vue", "*.ts", "*.tsx", "../../../cypress/support/*.ts"]
 }

package/Alert.stories.mdx

@@ -1,76 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story, Description } from '@storybook/addon-docs'
-import { version } from "./package.json"
-import changelog from "./CHANGELOG.md?raw"
-
-import Alert from './Alert.vue'
-
-import AlertStory from './Alert.rootstory'
-
-<h1>Alert<span className="text-lg font-normal"> - v{version}</span></h1>
-
-<Meta title="Alert" component={Alert} parameters={{
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/1WJ3GVQyMV5e7xVxPg3yID/Design-System?node-id=1035%3A9923",
-    }
-  }} />
-
-<Canvas withSource="none">
-  <Story name="Alert">
-    {AlertStory()}
-  </Story>
-</Canvas>
-
-<ArgsTable />
-
-## Usage
-
-The simplest is to use with plain text. By default, type is `info`.
-
-```vue
-<script setup>
-import Alert from '@cypress-design/vue-alert'
-</script>
-<template>
-  <Alert type="error">Great Scott!!</Alert>
-</template>
-```
-
-One can also have rich text in both the title and the body.
-
-```vue
-<template>
-  <Alert>
-    This is an <code>info</code> message
-    <template #body>
-      <p>This is the body of the alert.</p>
-    </template>
-  </Alert>
-</template>
-```
-
-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.
-
-```vue
-<template>
-  <Alert
-    title="This is an info message"
-    dismissible
-    @dismiss="() => setDismissed(true)"
-  />
-</template>
-```
-
-You can also remove the rounded corners and the icon of the alert by adding the `notRounded` and the `noIcon` props.
-
-```vue
-<template>
-  <Alert type="warning" title="This is an info message" notRounded noIcon />
-</template>
-```
-
-
-<Description>
-  {changelog.replace(/^# .+/, '## Changelog')}
-</Description>
-

package/dist/constants.d.ts

@@ -1,23 +0,0 @@
-import type { WindiColor } from '@cypress-design/icon-registry';
-export declare type AlertType = 'info' | 'success' | 'error' | 'warning' | 'neutral';
-export declare const alertSizesClasses: {
-    readonly xs: "py-[4px] px-[8px] leading-[22px] text-[14px]";
-    readonly sm: "py-[8px] px-[12px] leading-[22px] text-[14px]";
-    readonly md: "py-[12px] px-[16px] leading-[24px] text-[16px]";
-    readonly lg: "p-[16px] leading-[24px] text-[16px]";
-};
-export declare type AlertSize = keyof typeof alertSizesClasses;
-export declare const defaultAlertSize: AlertSize;
-export declare type AlertClasses = {
-    headerClass: string;
-    bodyClass: string;
-    borderClass: string;
-    detailsHeaderClass: string;
-    iconCloseColor: WindiColor;
-    iconColor?: WindiColor;
-    iconChevronColor: WindiColor;
-};
-export declare const alertClasses: Record<AlertType, AlertClasses>;
-export declare const defaultAlertType: AlertType;
-export declare const defaultAlertTitle = "Additional details";
-//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAE/D,oBAAY,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AAC5E,eAAO,MAAM,iBAAiB;;;;;CAKpB,CAAA;AAEV,oBAAY,SAAS,GAAG,MAAM,OAAO,iBAAiB,CAAA;AACtD,eAAO,MAAM,gBAAgB,EAAE,SAAgB,CAAA;AAE/C,oBAAY,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,cAAc,EAAE,UAAU,CAAA;IAC1B,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,gBAAgB,EAAE,UAAU,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CA6DxD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,SAAkB,CAAA;AAEjD,eAAO,MAAM,iBAAiB,uBAAuB,CAAA"}

package/dist/vue/Alert.vue.d.ts

@@ -1,226 +0,0 @@
-import { AlertSize, AlertType } from '../constants';
-declare const _default: {
-    new (...args: any[]): {
-        $: import("vue").ComponentInternalInstance;
-        $data: {};
-        $props: Partial<{
-            type: AlertType;
-            detailsTitle: string;
-            size: AlertSize;
-        }> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-            /**
-             * Color scheme
-             */
-            type?: AlertType | undefined;
-            /**
-             * If details are provided,text used in the toggle button
-             */
-            detailsTitle?: string | undefined;
-            /**
-             * Show the dismiss button
-             */
-            dismissible?: boolean | undefined;
-            /**
-             * When an icon is displayed by default, use this to remove it
-             */
-            noIcon?: boolean | undefined;
-            /**
-             * If you need square corners
-             */
-            notRounded?: boolean | undefined;
-            /**
-             * Dismiss the alert after a delay (in ms)
-             */
-            duration?: number | undefined;
-            /**
-             * Size of the alert
-             */
-            size?: "xs" | "sm" | "md" | "lg" | undefined;
-        }>, {
-            type: AlertType;
-            detailsTitle: string;
-            size: "xs" | "sm" | "md" | "lg";
-        }>>> & {
-            onDismiss?: (() => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "detailsTitle" | "size">;
-        $attrs: {
-            [x: string]: unknown;
-        };
-        $refs: {
-            [x: string]: unknown;
-        };
-        $slots: Readonly<{
-            [name: string]: import("vue").Slot | undefined;
-        }>;
-        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
-        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
-        $emit: (event: "dismiss") => void;
-        $el: any;
-        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-            /**
-             * Color scheme
-             */
-            type?: AlertType | undefined;
-            /**
-             * If details are provided,text used in the toggle button
-             */
-            detailsTitle?: string | undefined;
-            /**
-             * Show the dismiss button
-             */
-            dismissible?: boolean | undefined;
-            /**
-             * When an icon is displayed by default, use this to remove it
-             */
-            noIcon?: boolean | undefined;
-            /**
-             * If you need square corners
-             */
-            notRounded?: boolean | undefined;
-            /**
-             * Dismiss the alert after a delay (in ms)
-             */
-            duration?: number | undefined;
-            /**
-             * Size of the alert
-             */
-            size?: "xs" | "sm" | "md" | "lg" | undefined;
-        }>, {
-            type: AlertType;
-            detailsTitle: string;
-            size: "xs" | "sm" | "md" | "lg";
-        }>>> & {
-            onDismiss?: (() => any) | undefined;
-        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-            dismiss: () => void;
-        }, string, {
-            type: AlertType;
-            detailsTitle: string;
-            size: AlertSize;
-        }> & {
-            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
-            created?: ((() => void) | (() => void)[]) | undefined;
-            beforeMount?: ((() => void) | (() => void)[]) | undefined;
-            mounted?: ((() => void) | (() => void)[]) | undefined;
-            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
-            updated?: ((() => void) | (() => void)[]) | undefined;
-            activated?: ((() => void) | (() => void)[]) | undefined;
-            deactivated?: ((() => void) | (() => void)[]) | undefined;
-            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
-            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
-            destroyed?: ((() => void) | (() => void)[]) | undefined;
-            unmounted?: ((() => void) | (() => void)[]) | undefined;
-            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            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;
-        };
-        $forceUpdate: () => void;
-        $nextTick: typeof import("vue").nextTick;
-        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
-    } & Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-        /**
-         * Color scheme
-         */
-        type?: AlertType | undefined;
-        /**
-         * If details are provided,text used in the toggle button
-         */
-        detailsTitle?: string | undefined;
-        /**
-         * Show the dismiss button
-         */
-        dismissible?: boolean | undefined;
-        /**
-         * When an icon is displayed by default, use this to remove it
-         */
-        noIcon?: boolean | undefined;
-        /**
-         * If you need square corners
-         */
-        notRounded?: boolean | undefined;
-        /**
-         * Dismiss the alert after a delay (in ms)
-         */
-        duration?: number | undefined;
-        /**
-         * Size of the alert
-         */
-        size?: "xs" | "sm" | "md" | "lg" | undefined;
-    }>, {
-        type: AlertType;
-        detailsTitle: string;
-        size: "xs" | "sm" | "md" | "lg";
-    }>>> & {
-        onDismiss?: (() => any) | undefined;
-    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
-    __isFragment?: undefined;
-    __isTeleport?: undefined;
-    __isSuspense?: undefined;
-} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    /**
-     * Color scheme
-     */
-    type?: AlertType | undefined;
-    /**
-     * If details are provided,text used in the toggle button
-     */
-    detailsTitle?: string | undefined;
-    /**
-     * Show the dismiss button
-     */
-    dismissible?: boolean | undefined;
-    /**
-     * When an icon is displayed by default, use this to remove it
-     */
-    noIcon?: boolean | undefined;
-    /**
-     * If you need square corners
-     */
-    notRounded?: boolean | undefined;
-    /**
-     * Dismiss the alert after a delay (in ms)
-     */
-    duration?: number | undefined;
-    /**
-     * Size of the alert
-     */
-    size?: "xs" | "sm" | "md" | "lg" | undefined;
-}>, {
-    type: AlertType;
-    detailsTitle: string;
-    size: "xs" | "sm" | "md" | "lg";
-}>>> & {
-    onDismiss?: (() => any) | undefined;
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    dismiss: () => void;
-}, string, {
-    type: AlertType;
-    detailsTitle: string;
-    size: AlertSize;
-}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-    $slots: {
-        icon: (_: {
-            strokeColor: import("@cypress-design/vue-icon").WindiColor | undefined;
-            class: string;
-        }) => any;
-        default: (_: {}) => any;
-        body: (_: {}) => any;
-        details: (_: {}) => any;
-    };
-});
-export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
-        default: D[K];
-    } : P[K];
-};
-//# sourceMappingURL=Alert.vue.d.ts.map

package/dist/vue/Alert.vue.d.ts.map

@@ -1 +0,0 @@
-{"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"}

package/dist/vue/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA"}