@cypress-design/vue-alert 0.0.1

package/Alert.rootstory.tsx

@@ -0,0 +1,110 @@
+import { IconArrowRight } from '@cypress-design/vue-icon'
+import dedent from 'dedent'
+import { ref } from 'vue'
+import Alert from './Alert.vue'
+
+export default (() => ({
+  setup() {
+    const displayTimedAlert = ref(false)
+    return () => (
+      <div class="flex flex-col p-4 gap-16px">
+        <Alert type="error" detailsTitle="Stack trace" data-cy="alert-1">
+          {{
+            default: () => 'Spec not found',
+            body: () => (
+              <>
+                There is no spec matching the following location:
+                <code class="bg-red-100 m-8px rounded px-2px">
+                  path/to/spec.cy.js
+                </code>
+                <br />
+                <br />
+                It is possible that the file has since been moved or deleted.
+                Please choose from the list of specs below
+              </>
+            ),
+            details: () => (
+              <pre class="bg-white rounded border border-red-500 px-16px py-8px overflow-x-auto">
+                {dedent`Uncaught Error: Error occurred in defineConfig()
+            Trace: add called with  2 and 3
+                at sum (/home/dev/Documents/stacktrace.js:2:13)
+                at start (/home/dev/Documents/stacktrace.js:11:13)
+                at Object. (/home/dev/Documents/stacktrace.js:16:1)
+                at Module._compile (internal/modules/cjs/loader.js:959:30)
+                at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
+                at Module.load (internal/modules/cjs/loader.js:815:32)
+                at Function.Module._load (internal/modules/cjs/loader.js:727:14)
+                at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
+                at internal/main/run_main_module.js:17:11
+            Trace: add called with  8 and 11
+                at sum (/home/dev/Documents/stacktrace.js:2:13)
+                at calc (/home/dev/Documents/stacktrace.js:7:12)
+                at start (/home/dev/Documents/stacktrace.js:12:13)
+                at Object. (/home/dev/Documents/stacktrace.js:16:1)
+                at Module._compile (internal/modules/cjs/loader.js:959:30)
+                at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
+                at Module.load (internal/modules/cjs/loader.js:815:32)
+                at Function.Module._load (internal/modules/cjs/loader.js:727:14)
+                at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
+                at internal/main/run_main_module.js:17:11
+            Trace: add called with  9 and 14
+                at sum (/home/dev/Documents/stacktrace.js:2:13)
+                at calc (/home/dev/Documents/stacktrace.js:7:25)
+                at start (/home/dev/Documents/stacktrace.js:12:13)
+                at Object. (/home/dev/Documents/stacktrace.js:16:1)
+                at Module._compile (internal/modules/cjs/loader.js:959:30)
+                at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
+                at Module.load (internal/modules/cjs/loader.js:815:32)
+                at Function.Module._load (internal/modules/cjs/loader.js:727:14)
+                at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
+                at internal/main/run_main_module.js:17:11`}
+              </pre>
+            ),
+          }}
+        </Alert>
+        <button
+          class="border rounded p-8px"
+          onClick={() => (displayTimedAlert.value = true)}
+        >
+          open alert for 5 seconds
+        </button>
+        {displayTimedAlert.value && (
+          <Alert
+            duration={5000}
+            onDismiss={() => (displayTimedAlert.value = false)}
+            dismissible
+            data-cy="alert-2"
+          >
+            Wait 5 seconds please
+          </Alert>
+        )}
+        <Alert type="success" dismissible data-cy="alert-3">
+          {{
+            default: () => 'Success with body',
+            body: () => 'Success body',
+          }}
+        </Alert>
+        <Alert type="warning" not-rounded>
+          Warning
+        </Alert>
+        <Alert type="neutral">Neutral</Alert>
+        <Alert type="error" dismissible class="text-justify" data-cy="alert-4">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </Alert>
+        <Alert type="info">Info</Alert>
+        <Alert type="info">
+          {{
+            default: () => 'Info',
+            icon: (props: any) => <IconArrowRight {...props} />,
+          }}
+        </Alert>
+      </div>
+    )
+  },
+}))()

package/Alert.stories.mdx

@@ -0,0 +1,76 @@
+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/Alert.vue

@@ -0,0 +1,142 @@
+<template>
+  <div v-if="!dismissed" class="overflow-hidden text-left" :class="props.notRounded ? undefined : 'rounded'">
+    <div class="flex p-16px" :class="typeClasses.headerClass">
+      <!-- @slot replace the default left icon here -->
+      <slot name="icon" v-bind="computedIconProps">
+        <component v-if="!props.noIcon && icon" :is="icon" v-bind="computedIconProps" />
+      </slot>
+      <div class="flex-1 font-medium">
+        <!-- @slot title of the alert -->
+        <slot />
+      </div>
+      <button v-if="dismissible" class="m-4px ml-8px h-16px" @click="dismiss" aria-label="Dismiss">
+        <IconActionDeleteLarge :stroke-color="typeClasses.iconCloseColor" />
+      </button>
+    </div>
+    <div v-if="slots.body" class="p-16px" :class="typeClasses.bodyClass">
+      <!-- @slot body/details of the alert -->
+      <slot name="body" />
+    </div>
+    <details v-if="slots.details" class="p-16px border-t-1" :class="[typeClasses.bodyClass, typeClasses.borderClass]">
+      <summary class="flex font-medium cursor-pointer" :class="typeClasses.detailsHeaderClass">
+        <IconChevronDownSmall :strokeColor="typeClasses.iconChevronColor" class="icon my-4px mr-8px" />
+        {{ props.detailsTitle }}
+      </summary>
+      <div class="mt-16px">
+        <!--@slot Togglable additional details-->
+        <slot name="details" />
+      </div>
+    </details>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, useSlots, h, type FunctionalComponent, ref, onMounted, onUnmounted, type ComputedRef } from 'vue'
+import {
+  IconChevronDownSmall, IconActionDeleteLarge,
+  IconWarningCircle, IconCheckmarkOutline,
+} from '@cypress-design/vue-icon'
+import type { AlertType } from '../constants'
+import { alertClasses } from '../constants'
+
+const dismissed = ref(false)
+
+const slots = useSlots()
+
+const emit = defineEmits<{
+  /**
+   * Clicking on the dismiss button or dismissed after a timeout
+   */
+  (event: 'dismiss'): void,
+}>()
+
+const props = withDefaults(defineProps<{
+  /**
+   * Color scheme
+   */
+  type?: AlertType
+  /**
+   * If details are provided,text used in the toggle button
+   */
+  detailsTitle?: string
+  /**
+   * Show the dismiss button
+   */
+  dismissible?: boolean
+  /**
+   * When an icon is displayed by default, use this to remove it
+   */
+  noIcon?: boolean
+  /**
+   * If you need square corners
+   */
+  notRounded?: boolean
+  /**
+   * Dismiss the alert after a delay (in ms)
+   */
+  duration?: number
+}>(), {
+  type: 'info',
+  detailsTitle: 'Additional details',
+})
+
+const typeClasses = computed(() => {
+  return alertClasses[props.type]
+})
+
+let timeout: number | undefined
+
+onMounted(() => {
+  if (props.duration) {
+    timeout = setTimeout(dismiss, props.duration) as any
+  }
+})
+
+onUnmounted(() => {
+  if (timeout) {
+    clearTimeout(timeout)
+  }
+})
+
+function dismiss() {
+  dismissed.value = true
+  emit('dismiss')
+  if (timeout) {
+    clearTimeout(timeout)
+    timeout = undefined
+  }
+}
+
+const computedIconProps = computed(() => {
+  return {
+    strokeColor: alertClasses[props.type].iconColor,
+    class: 'my-4px mr-8px'
+  }
+})
+
+const icon: ComputedRef<FunctionalComponent | null> = computed(() => {
+  switch (props.type) {
+    case 'info':
+      return null;
+    case 'success':
+      return () => h(IconCheckmarkOutline, computedIconProps.value)
+    case 'warning':
+      return () => h(IconWarningCircle, computedIconProps.value)
+    case 'error':
+      return () => h(IconWarningCircle, computedIconProps.value)
+    default:
+      return null;
+  }
+})
+
+</script>
+
+<style scoped>
+details summary .icon {
+  transform: rotate(-90deg);
+}
+
+details[open] summary .icon {
+  transform: rotate(0);
+}
+</style>

package/AlertVue.cy.tsx

@@ -0,0 +1,9 @@
+/// <reference types="cypress" />
+import { mount } from 'cypress/vue'
+import AlertStory from './Alert.rootstory'
+
+describe('<Alert />', { viewportHeight: 800 }, () => {
+  it('renders', () => {
+    mount(AlertStory)
+  })
+})

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @cypress-design/vue-alert
+
+## 0.0.1
+
+### Patch Changes
+
+- [#39](https://github.com/cypress-io/cypress-design/pull/39) [`1b383f3`](https://github.com/cypress-io/cypress-design/commit/1b383f3d149948bf2cc062d3baa17d5ce032f07e) Thanks [@elevatebart](https://github.com/elevatebart)! - create alert component
+
+- Updated dependencies [[`4259026`](https://github.com/cypress-io/cypress-design/commit/4259026314464260e89bcd88690c8a60ad2f0459)]:
+  - @cypress-design/vue-icon@0.4.0

package/ReadMe.md

@@ -0,0 +1,68 @@
+# Alert
+
+## Summary
+
+Use the alert when you need a banner of some kind.
+Examples:
+
+- To give temporary information to the user.
+- To attract attention to a specific note on the page.
+- To inform the user of a change in the system.
+
+## install
+
+```bash
+npm install @cypress-design/vue-alert
+```
+
+or with yarn
+
+```bash
+yarn add @cypress-design/vue-alert
+```
+
+## 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>
+```

package/dist/constants.d.ts

@@ -0,0 +1,13 @@
+import type { WindiColor } from '@cypress-design/icon-registry';
+export declare type AlertType = 'info' | 'success' | 'error' | 'warning' | 'neutral';
+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>;
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

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

package/dist/index.es.js

@@ -0,0 +1,223 @@
+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';
+import { IconWarningCircle, IconCheckmarkOutline, IconActionDeleteLarge, IconChevronDownSmall } from '@cypress-design/vue-icon';
+
+const alertClasses = {
+    neutral: {
+        headerClass: 'text-gray-800 bg-gray-100',
+        bodyClass: 'bg-gray-50 text-gray-500',
+        borderClass: 'border-gray-100',
+        detailsHeaderClass: 'text-gray-600',
+        /* <windi-keep strokeColor="gray-600"/> */
+        iconCloseColor: 'gray-600',
+        /* <windi-keep strokeColor="gray-500"/> */
+        iconColor: 'gray-500',
+        /* <windi-keep strokeColor="gray-300"/> */
+        iconChevronColor: 'gray-300',
+    },
+    info: {
+        headerClass: 'text-indigo-700 bg-indigo-100',
+        bodyClass: 'bg-indigo-50 text-indigo-500',
+        borderClass: 'border-indigo-100',
+        detailsHeaderClass: 'text-indigo-600',
+        /* <windi-keep strokeColor="indigo-500"/> */
+        iconCloseColor: 'indigo-500',
+        /* <windi-keep strokeColor="indigo-500"/> */
+        iconColor: 'indigo-500',
+        /* <windi-keep strokeColor="indigo-300"/> */
+        iconChevronColor: 'indigo-300',
+    },
+    warning: {
+        headerClass: 'text-orange-700 bg-orange-100',
+        bodyClass: 'bg-orange-50 text-orange-500',
+        borderClass: 'border-orange-100',
+        detailsHeaderClass: 'text-orange-600',
+        /* <windi-keep strokeColor="orange-500"/> */
+        iconCloseColor: 'orange-500',
+        /* <windi-keep strokeColor="orange-400"/> */
+        iconColor: 'orange-400',
+        /* <windi-keep strokeColor="orange-300"/> */
+        iconChevronColor: 'orange-300',
+    },
+    error: {
+        headerClass: 'text-red-700 bg-red-100',
+        bodyClass: 'bg-red-50 text-red-500',
+        borderClass: 'border-red-100',
+        detailsHeaderClass: 'text-red-600',
+        /* <windi-keep strokeColor="red-500"/> */
+        iconCloseColor: 'red-500',
+        /* <windi-keep strokeColor="red-400"/> */
+        iconColor: 'red-400',
+        /* <windi-keep strokeColor="red-300"/> */
+        iconChevronColor: 'red-300',
+    },
+    success: {
+        headerClass: 'text-jade-700 bg-jade-100',
+        bodyClass: 'bg-jade-50 text-jade-600',
+        borderClass: 'border-jade-100',
+        detailsHeaderClass: 'text-jade-600',
+        /* <windi-keep strokeColor="jade-600"/> */
+        iconCloseColor: 'jade-600',
+        /* <windi-keep strokeColor="jade-500"/> */
+        iconColor: 'jade-500',
+        /* <windi-keep strokeColor="jade-300"/> */
+        iconChevronColor: 'jade-300',
+    },
+};
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+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";
+styleInject(css_248z);
+
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+const _hoisted_1 = { class: "flex-1 font-medium" };
+const _hoisted_2 = { class: "mt-16px" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Alert",
+  props: {
+    type: { type: null, required: false, default: "info" },
+    detailsTitle: { type: String, required: false, default: "Additional details" },
+    dismissible: { type: Boolean, required: false },
+    noIcon: { type: Boolean, required: false },
+    notRounded: { type: Boolean, required: false },
+    duration: { type: Number, required: false }
+  },
+  emits: ["dismiss"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const dismissed = ref(false);
+    const slots = useSlots();
+    const typeClasses = computed(() => {
+      return alertClasses[props.type];
+    });
+    let timeout;
+    onMounted(() => {
+      if (props.duration) {
+        timeout = setTimeout(dismiss, props.duration);
+      }
+    });
+    onUnmounted(() => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    });
+    function dismiss() {
+      dismissed.value = true;
+      emit("dismiss");
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = void 0;
+      }
+    }
+    const computedIconProps = computed(() => {
+      return {
+        strokeColor: alertClasses[props.type].iconColor,
+        class: "my-4px mr-8px"
+      };
+    });
+    const icon = computed(() => {
+      switch (props.type) {
+        case "info":
+          return null;
+        case "success":
+          return () => h(IconCheckmarkOutline, computedIconProps.value);
+        case "warning":
+          return () => h(IconWarningCircle, computedIconProps.value);
+        case "error":
+          return () => h(IconWarningCircle, computedIconProps.value);
+        default:
+          return null;
+      }
+    });
+    return (_ctx, _cache) => {
+      return !dismissed.value ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(["overflow-hidden text-left", props.notRounded ? void 0 : "rounded"])
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(["flex p-16px", unref(typeClasses).headerClass])
+        }, [
+          createCommentVNode(" @slot replace the default left icon here "),
+          renderSlot(_ctx.$slots, "icon", normalizeProps(guardReactiveProps(unref(computedIconProps))), () => [
+            !props.noIcon && unref(icon) ? (openBlock(), createBlock(resolveDynamicComponent(unref(icon)), normalizeProps(mergeProps({ key: 0 }, unref(computedIconProps))), null, 16)) : createCommentVNode("v-if", true)
+          ], true),
+          createElementVNode("div", _hoisted_1, [
+            createCommentVNode(" @slot title of the alert "),
+            renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          ]),
+          __props.dismissible ? (openBlock(), createElementBlock("button", {
+            key: 0,
+            class: "m-4px ml-8px h-16px",
+            onClick: dismiss,
+            "aria-label": "Dismiss"
+          }, [
+            createVNode(unref(IconActionDeleteLarge), {
+              "stroke-color": unref(typeClasses).iconCloseColor
+            }, null, 8, ["stroke-color"])
+          ])) : createCommentVNode("v-if", true)
+        ], 2),
+        unref(slots).body ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["p-16px", unref(typeClasses).bodyClass])
+        }, [
+          createCommentVNode(" @slot body/details of the alert "),
+          renderSlot(_ctx.$slots, "body", {}, void 0, true)
+        ], 2)) : createCommentVNode("v-if", true),
+        unref(slots).details ? (openBlock(), createElementBlock("details", {
+          key: 1,
+          class: normalizeClass(["p-16px border-t-1", [unref(typeClasses).bodyClass, unref(typeClasses).borderClass]])
+        }, [
+          createElementVNode("summary", {
+            class: normalizeClass(["flex font-medium cursor-pointer", unref(typeClasses).detailsHeaderClass])
+          }, [
+            createVNode(unref(IconChevronDownSmall), {
+              strokeColor: unref(typeClasses).iconChevronColor,
+              class: "icon my-4px mr-8px"
+            }, null, 8, ["strokeColor"]),
+            createTextVNode(" " + toDisplayString(props.detailsTitle), 1)
+          ], 2),
+          createElementVNode("div", _hoisted_2, [
+            createCommentVNode("@slot Togglable additional details"),
+            renderSlot(_ctx.$slots, "details", {}, void 0, true)
+          ])
+        ], 2)) : createCommentVNode("v-if", true)
+      ], 2)) : createCommentVNode("v-if", true);
+    };
+  }
+});
+var Alert = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-836252c4"], ["__file", "/home/runner/work/cypress-design/cypress-design/components/Alert/vue/Alert.vue"]]);
+
+export { Alert as default };
+//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -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 { computed, useSlots, h, type FunctionalComponent, ref, onMounted, onUnmounted, type ComputedRef } 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":";;;AAcO,MAAM,YAAY,GAAoC;AAC3D,IAAA,OAAO,EAAE;AACP,QAAA,WAAW,EAAE,2BAA2B;AACxC,QAAA,SAAS,EAAE,0BAA0B;AACrC,QAAA,WAAW,EAAE,iBAAiB;AAC9B,QAAA,kBAAkB,EAAE,eAAe;;AAEnC,QAAA,cAAc,EAAE,UAAU;;AAE1B,QAAA,SAAS,EAAE,UAAU;;AAErB,QAAA,gBAAgB,EAAE,UAAU;AAC7B,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,WAAW,EAAE,+BAA+B;AAC5C,QAAA,SAAS,EAAE,8BAA8B;AACzC,QAAA,WAAW,EAAE,mBAAmB;AAChC,QAAA,kBAAkB,EAAE,iBAAiB;;AAErC,QAAA,cAAc,EAAE,YAAY;;AAE5B,QAAA,SAAS,EAAE,YAAY;;AAEvB,QAAA,gBAAgB,EAAE,YAAY;AAC/B,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,WAAW,EAAE,+BAA+B;AAC5C,QAAA,SAAS,EAAE,8BAA8B;AACzC,QAAA,WAAW,EAAE,mBAAmB;AAChC,QAAA,kBAAkB,EAAE,iBAAiB;;AAErC,QAAA,cAAc,EAAE,YAAY;;AAE5B,QAAA,SAAS,EAAE,YAAY;;AAEvB,QAAA,gBAAgB,EAAE,YAAY;AAC/B,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAE,yBAAyB;AACtC,QAAA,SAAS,EAAE,wBAAwB;AACnC,QAAA,WAAW,EAAE,gBAAgB;AAC7B,QAAA,kBAAkB,EAAE,cAAc;;AAElC,QAAA,cAAc,EAAE,SAAS;;AAEzB,QAAA,SAAS,EAAE,SAAS;;AAEpB,QAAA,gBAAgB,EAAE,SAAS;AAC5B,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,WAAW,EAAE,2BAA2B;AACxC,QAAA,SAAS,EAAE,0BAA0B;AACrC,QAAA,WAAW,EAAE,iBAAiB;AAC9B,QAAA,kBAAkB,EAAE,eAAe;;AAEnC,QAAA,cAAc,EAAE,UAAU;;AAE1B,QAAA,SAAS,EAAE,UAAU;;AAErB,QAAA,gBAAgB,EAAE,UAAU;AAC7B,KAAA;CACF;;AC3ED,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;ACxBA,kBAAe,CAAC,GAAG,EAAE,KAAK,KAAK;AAC/B,EAAE,MAAM,MAAM,GAAG,GAAG,CAAC,SAAS,IAAI,GAAG,CAAC;AACtC,EAAE,KAAK,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,KAAK,EAAE;AAClC,IAAI,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;AACtB,GAAG;AACH,EAAE,OAAO,MAAM,CAAC;AAChB;;;;;;;;;;;;;;;;;ACkCA,IAAM,MAAA,SAAA,GAAY,IAAI,KAAK,CAAA,CAAA;AAE3B,IAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AAuCvB,IAAM,MAAA,WAAA,GAAc,SAAS,MAAM;AACjC,MAAA,OAAO,aAAa,KAAM,CAAA,IAAA,CAAA,CAAA;AAAA,KAC3B,CAAA,CAAA;AAED,IAAI,IAAA,OAAA,CAAA;AAEJ,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,MAAM,QAAU,EAAA;AAClB,QAAU,OAAA,GAAA,UAAA,CAAW,OAAS,EAAA,KAAA,CAAM,QAAQ,CAAA,CAAA;AAAA,OAC9C;AAAA,KACD,CAAA,CAAA;AAED,IAAA,WAAA,CAAY,MAAM;AAChB,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,YAAA,CAAa,OAAO,CAAA,CAAA;AAAA,OACtB;AAAA,KACD,CAAA,CAAA;AAED,IAAmB,SAAA,OAAA,GAAA;AACjB,MAAA,SAAA,CAAU,KAAQ,GAAA,IAAA,CAAA;AAClB,MAAA,IAAA,CAAK,SAAS,CAAA,CAAA;AACd,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,YAAA,CAAa,OAAO,CAAA,CAAA;AACpB,QAAU,OAAA,GAAA,KAAA,CAAA,CAAA;AAAA,OACZ;AAAA,KACF;AAEA,IAAM,MAAA,iBAAA,GAAoB,SAAS,MAAM;AACvC,MAAO,OAAA;AAAA,QACL,WAAA,EAAa,YAAa,CAAA,KAAA,CAAM,IAAM,CAAA,CAAA,SAAA;AAAA,QACtC,KAAO,EAAA,eAAA;AAAA,OACT,CAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAM,MAAA,IAAA,GAAgD,SAAS,MAAM;AACnE,MAAA,QAAQ,KAAM,CAAA,IAAA;AAAA,QACP,KAAA,MAAA;AACH,UAAO,OAAA,IAAA,CAAA;AAAA,QACJ,KAAA,SAAA;AACH,UAAA,OAAO,MAAM,CAAA,CAAE,oBAAsB,EAAA,iBAAA,CAAkB,KAAK,CAAA,CAAA;AAAA,QACzD,KAAA,SAAA;AACH,UAAA,OAAO,MAAM,CAAA,CAAE,iBAAmB,EAAA,iBAAA,CAAkB,KAAK,CAAA,CAAA;AAAA,QACtD,KAAA,OAAA;AACH,UAAA,OAAO,MAAM,CAAA,CAAE,iBAAmB,EAAA,iBAAA,CAAkB,KAAK,CAAA,CAAA;AAAA,QAAA;AAEzD,UAAO,OAAA,IAAA,CAAA;AAAA,OAAA;AAAA,KAEZ,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.umd.js

@@ -0,0 +1,225 @@
+'use strict';
+
+var vue = require('vue');
+var vueIcon = require('@cypress-design/vue-icon');
+
+const alertClasses = {
+    neutral: {
+        headerClass: 'text-gray-800 bg-gray-100',
+        bodyClass: 'bg-gray-50 text-gray-500',
+        borderClass: 'border-gray-100',
+        detailsHeaderClass: 'text-gray-600',
+        /* <windi-keep strokeColor="gray-600"/> */
+        iconCloseColor: 'gray-600',
+        /* <windi-keep strokeColor="gray-500"/> */
+        iconColor: 'gray-500',
+        /* <windi-keep strokeColor="gray-300"/> */
+        iconChevronColor: 'gray-300',
+    },
+    info: {
+        headerClass: 'text-indigo-700 bg-indigo-100',
+        bodyClass: 'bg-indigo-50 text-indigo-500',
+        borderClass: 'border-indigo-100',
+        detailsHeaderClass: 'text-indigo-600',
+        /* <windi-keep strokeColor="indigo-500"/> */
+        iconCloseColor: 'indigo-500',
+        /* <windi-keep strokeColor="indigo-500"/> */
+        iconColor: 'indigo-500',
+        /* <windi-keep strokeColor="indigo-300"/> */
+        iconChevronColor: 'indigo-300',
+    },
+    warning: {
+        headerClass: 'text-orange-700 bg-orange-100',
+        bodyClass: 'bg-orange-50 text-orange-500',
+        borderClass: 'border-orange-100',
+        detailsHeaderClass: 'text-orange-600',
+        /* <windi-keep strokeColor="orange-500"/> */
+        iconCloseColor: 'orange-500',
+        /* <windi-keep strokeColor="orange-400"/> */
+        iconColor: 'orange-400',
+        /* <windi-keep strokeColor="orange-300"/> */
+        iconChevronColor: 'orange-300',
+    },
+    error: {
+        headerClass: 'text-red-700 bg-red-100',
+        bodyClass: 'bg-red-50 text-red-500',
+        borderClass: 'border-red-100',
+        detailsHeaderClass: 'text-red-600',
+        /* <windi-keep strokeColor="red-500"/> */
+        iconCloseColor: 'red-500',
+        /* <windi-keep strokeColor="red-400"/> */
+        iconColor: 'red-400',
+        /* <windi-keep strokeColor="red-300"/> */
+        iconChevronColor: 'red-300',
+    },
+    success: {
+        headerClass: 'text-jade-700 bg-jade-100',
+        bodyClass: 'bg-jade-50 text-jade-600',
+        borderClass: 'border-jade-100',
+        detailsHeaderClass: 'text-jade-600',
+        /* <windi-keep strokeColor="jade-600"/> */
+        iconCloseColor: 'jade-600',
+        /* <windi-keep strokeColor="jade-500"/> */
+        iconColor: 'jade-500',
+        /* <windi-keep strokeColor="jade-300"/> */
+        iconChevronColor: 'jade-300',
+    },
+};
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+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";
+styleInject(css_248z);
+
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+const _hoisted_1 = { class: "flex-1 font-medium" };
+const _hoisted_2 = { class: "mt-16px" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "Alert",
+  props: {
+    type: { type: null, required: false, default: "info" },
+    detailsTitle: { type: String, required: false, default: "Additional details" },
+    dismissible: { type: Boolean, required: false },
+    noIcon: { type: Boolean, required: false },
+    notRounded: { type: Boolean, required: false },
+    duration: { type: Number, required: false }
+  },
+  emits: ["dismiss"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const dismissed = vue.ref(false);
+    const slots = vue.useSlots();
+    const typeClasses = vue.computed(() => {
+      return alertClasses[props.type];
+    });
+    let timeout;
+    vue.onMounted(() => {
+      if (props.duration) {
+        timeout = setTimeout(dismiss, props.duration);
+      }
+    });
+    vue.onUnmounted(() => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    });
+    function dismiss() {
+      dismissed.value = true;
+      emit("dismiss");
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = void 0;
+      }
+    }
+    const computedIconProps = vue.computed(() => {
+      return {
+        strokeColor: alertClasses[props.type].iconColor,
+        class: "my-4px mr-8px"
+      };
+    });
+    const icon = vue.computed(() => {
+      switch (props.type) {
+        case "info":
+          return null;
+        case "success":
+          return () => vue.h(vueIcon.IconCheckmarkOutline, computedIconProps.value);
+        case "warning":
+          return () => vue.h(vueIcon.IconWarningCircle, computedIconProps.value);
+        case "error":
+          return () => vue.h(vueIcon.IconWarningCircle, computedIconProps.value);
+        default:
+          return null;
+      }
+    });
+    return (_ctx, _cache) => {
+      return !dismissed.value ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        class: vue.normalizeClass(["overflow-hidden text-left", props.notRounded ? void 0 : "rounded"])
+      }, [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(["flex p-16px", vue.unref(typeClasses).headerClass])
+        }, [
+          vue.createCommentVNode(" @slot replace the default left icon here "),
+          vue.renderSlot(_ctx.$slots, "icon", vue.normalizeProps(vue.guardReactiveProps(vue.unref(computedIconProps))), () => [
+            !props.noIcon && vue.unref(icon) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(icon)), vue.normalizeProps(vue.mergeProps({ key: 0 }, vue.unref(computedIconProps))), null, 16)) : vue.createCommentVNode("v-if", true)
+          ], true),
+          vue.createElementVNode("div", _hoisted_1, [
+            vue.createCommentVNode(" @slot title of the alert "),
+            vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          ]),
+          __props.dismissible ? (vue.openBlock(), vue.createElementBlock("button", {
+            key: 0,
+            class: "m-4px ml-8px h-16px",
+            onClick: dismiss,
+            "aria-label": "Dismiss"
+          }, [
+            vue.createVNode(vue.unref(vueIcon.IconActionDeleteLarge), {
+              "stroke-color": vue.unref(typeClasses).iconCloseColor
+            }, null, 8, ["stroke-color"])
+          ])) : vue.createCommentVNode("v-if", true)
+        ], 2),
+        vue.unref(slots).body ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: vue.normalizeClass(["p-16px", vue.unref(typeClasses).bodyClass])
+        }, [
+          vue.createCommentVNode(" @slot body/details of the alert "),
+          vue.renderSlot(_ctx.$slots, "body", {}, void 0, true)
+        ], 2)) : vue.createCommentVNode("v-if", true),
+        vue.unref(slots).details ? (vue.openBlock(), vue.createElementBlock("details", {
+          key: 1,
+          class: vue.normalizeClass(["p-16px border-t-1", [vue.unref(typeClasses).bodyClass, vue.unref(typeClasses).borderClass]])
+        }, [
+          vue.createElementVNode("summary", {
+            class: vue.normalizeClass(["flex font-medium cursor-pointer", vue.unref(typeClasses).detailsHeaderClass])
+          }, [
+            vue.createVNode(vue.unref(vueIcon.IconChevronDownSmall), {
+              strokeColor: vue.unref(typeClasses).iconChevronColor,
+              class: "icon my-4px mr-8px"
+            }, null, 8, ["strokeColor"]),
+            vue.createTextVNode(" " + vue.toDisplayString(props.detailsTitle), 1)
+          ], 2),
+          vue.createElementVNode("div", _hoisted_2, [
+            vue.createCommentVNode("@slot Togglable additional details"),
+            vue.renderSlot(_ctx.$slots, "details", {}, void 0, true)
+          ])
+        ], 2)) : vue.createCommentVNode("v-if", true)
+      ], 2)) : vue.createCommentVNode("v-if", true);
+    };
+  }
+});
+var Alert = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-836252c4"], ["__file", "/home/runner/work/cypress-design/cypress-design/components/Alert/vue/Alert.vue"]]);
+
+module.exports = Alert;
+//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.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 { computed, useSlots, h, type FunctionalComponent, ref, onMounted, onUnmounted, type ComputedRef } 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":["ref","useSlots","computed","onMounted","onUnmounted","h","IconCheckmarkOutline","IconWarningCircle"],"mappings":"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"}

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

@@ -0,0 +1,81 @@
+import type { AlertType } from '../constants';
+declare const _default: import("vue").DefineComponent<__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;
+}>, {
+    type: string;
+    detailsTitle: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    dismiss: () => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, 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;
+}>, {
+    type: string;
+    detailsTitle: string;
+}>>> & {
+    onDismiss?: (() => any) | undefined;
+}, {
+    type: AlertType;
+    detailsTitle: string;
+}>;
+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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.vue.d.ts","sourceRoot":"","sources":["../../Alert.vue.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;;IAoG3C;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;;;;IAtBH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;;;;UAnBI,SAAS;kBAID,MAAM;;AAxGvB,wBA+MK;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;KAE5B,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

@@ -0,0 +1,2 @@
+export { default } from './Alert.vue';
+//# sourceMappingURL=index.d.ts.map

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

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

package/index.ts

@@ -0,0 +1 @@
+export { default } from './Alert.vue'

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@cypress-design/vue-alert",
+  "version": "0.0.1",
+  "files": [
+    "*"
+  ],
+  "typings": "./dist/vue/index.d.ts",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "scripts": {
+    "build": "yarn build:module && yarn build:types",
+    "build:module": "rollup -c ./rollup.config.js",
+    "build:types": "vue-tsc --project ./tsconfig.build.json"
+  },
+  "dependencies": {
+    "@cypress-design/vue-icon": "*"
+  },
+  "license": "MIT"
+}

package/rollup.config.js

@@ -0,0 +1,48 @@
+import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
+import typescript from '@rollup/plugin-typescript'
+import vue from '@vitejs/plugin-vue'
+import postcss from 'rollup-plugin-postcss'
+
+export default {
+  input: './index.ts',
+  output: [
+    {
+      file: './dist/index.umd.js',
+      format: 'cjs',
+      exports: 'auto',
+      sourcemap: true,
+      sourcemapPathTransform: (sourcePath) =>
+        sourcePath.includes('node_modules')
+          ? sourcePath
+          : sourcePath.replace(/^\.\.\/\.\.\/(\w)/, `../../vue/$1`),
+    },
+    {
+      file: './dist/index.es.js',
+      format: 'esm',
+      sourcemap: true,
+      sourcemapPathTransform: (sourcePath) =>
+        sourcePath.includes('node_modules')
+          ? sourcePath
+          : sourcePath.replace(/^\.\.\/\.\.\/(\w)/, `../../vue/$1`),
+    },
+  ],
+  plugins: [
+    resolve(),
+    commonjs(),
+    vue(),
+    postcss(),
+    typescript({
+      tsconfig: './tsconfig.build.json',
+      include: ['./*.ts', '../*.ts', './*.vue'],
+      declaration: false,
+      declarationMap: false,
+      sourceMap: true,
+    }),
+  ],
+  external: [
+    'vue',
+    '@cypress-design/icon-registry',
+    '@cypress-design/vue-icon',
+  ],
+}

package/tsconfig.build.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.vue.json",
+  "include": ["./*.vue", "./*.ts", "../constants.ts"],
+  "compilerOptions": {
+    "outDir": "dist"
+  }
+}

package/tsconfig.json

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

package/vue-shim.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}