@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/components/UiAlertDialog/UiAlertDialogTitle.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { AlertDialogTitle as ShadcnAlertDialogTitle } from '@/components/core/alert-dialog';
+  import { UiAlertDialogTitleProps } from './types';
+
+  defineOptions({
+    name: 'UiAlertDialogTitle',
+  });
+
+  const props = defineProps<UiAlertDialogTitleProps>();
+</script>
+
+<template>
+  <ShadcnAlertDialogTitle v-bind="props">
+    <slot />
+  </ShadcnAlertDialogTitle>
+</template>

package/src/components/UiAlertDialog/UiAlertDialogTrigger.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+  import { AlertDialogTrigger as ShadcnAlertDialogTrigger } from '@/components/core/alert-dialog';
+
+  import { UiAlertDialogTriggerProps } from './types';
+
+  defineOptions({
+    name: 'UiAlertDialogTrigger',
+  });
+
+  const props = defineProps<UiAlertDialogTriggerProps>();
+</script>
+
+<template>
+  <ShadcnAlertDialogTrigger v-bind="props">
+    <slot />
+  </ShadcnAlertDialogTrigger>
+</template>

package/src/components/UiAlertDialog/index.ts

@@ -0,0 +1,10 @@
+export { default as UiAlertDialog } from './UiAlertDialog.vue';
+export { default as UiAlertDialogAction } from './UiAlertDialogAction.vue';
+export { default as UiAlertDialogCancel } from './UiAlertDialogCancel.vue';
+export { default as UiAlertDialogContent } from './UiAlertDialogContent.vue';
+export { default as UiAlertDialogDescription } from './UiAlertDialogDescription.vue';
+export { default as UiAlertDialogFooter } from './UiAlertDialogFooter.vue';
+export { default as UiAlertDialogHeader } from './UiAlertDialogHeader.vue';
+export { default as UiAlertDialogTitle } from './UiAlertDialogTitle.vue';
+export { default as UiAlertDialogTrigger } from './UiAlertDialogTrigger.vue';
+export type * from './types';

package/src/components/UiAlertDialog/types.ts

@@ -0,0 +1,83 @@
+/**
+ * Common prop inside the sub-components.
+ */
+export type UiAlertSubComponentCommonProps = {
+  /** Render as a child element instead of wrapping. */
+  asChild?: boolean;
+};
+
+/**
+ * A modal dialog for confirmations that interrupt the user. Use for
+ * destructive actions, important decisions, or critical confirmations.
+ * @category Overlays
+ * @useCases confirm delete, destructive action, important confirmation, warning
+ * @keywords alert, dialog, modal, confirm, warning, destructive, popup
+ * @related UiPopover
+ */
+export type UiAlertDialogContentProps = UiAlertSubComponentCommonProps & {
+  /**
+   * Prop to disable pointer events outside the dialog
+   * @default false
+   */
+  disableOutsidePointerEvents?: boolean;
+};
+
+/**
+ * Emit options inside the UiAlertDialogContent
+ */
+export type UiAlertDialogContentEmits = {
+  /**
+   * Event handler called when focus moves to the destructive action after opening.
+   */
+  (e: 'openAutoFocus', event: Event): void;
+  /**
+   * Event handler called when focus moves to the trigger after closing.
+   */
+  (e: 'closeAutoFocus', event: Event): void;
+  /**
+   * Event handler called when interacted outside the component.
+   */
+  (e: 'interactOutside', event: Event): void;
+  /**
+   * Event handler called when focus goes outside the component.
+   */
+  (e: 'focusOutside', event: Event): void;
+  /**
+   * Event handler called when pointer down the component.
+   */
+  (e: 'pointerDownOutside', event: Event): void;
+  /**
+   * Event handler called when the escape key is down.
+   */
+  (e: 'escapeKeydown', event: KeyboardEvent): void;
+};
+
+/**
+ * Props for UiAlertDialogTrigger component.
+ */
+export type UiAlertDialogTriggerProps = UiAlertSubComponentCommonProps & {};
+
+/**
+ * Props for UiAlertDialogCancel component.
+ */
+export type UiAlertDialogCancelProps = UiAlertSubComponentCommonProps & {};
+
+/**
+ * Props for UiAlertDialogAction component.
+ */
+export type UiAlertDialogActionProps = UiAlertSubComponentCommonProps & {};
+
+/**
+ * Props for UiAlertDialogHeader component.
+ */
+export type UiAlertDialogHeaderProps = UiAlertSubComponentCommonProps & {};
+
+/**
+ * Props for UiAlertDialogTitle component.
+ */
+export type UiAlertDialogTitleProps = UiAlertSubComponentCommonProps & {};
+
+/**
+ * Props for UiAlertDialogDescription component.
+ */
+export type UiAlertDialogDescriptionProps = UiAlertSubComponentCommonProps & {};

package/src/components/UiAvatar/UiAvatar.stories.ts

@@ -0,0 +1,194 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { UiAvatar, UiAvatarFallback, UiAvatarImage } from './index';
+
+const meta: Meta<typeof UiAvatar> = {
+  title: 'Components/UiAvatar',
+  component: UiAvatar,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiAvatar>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { UiAvatar, UiAvatarFallback, UiAvatarImage } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiAvatar>
+    <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+    <UiAvatarFallback>CN</UiAvatarFallback>
+  </UiAvatar>
+</template>`;
+
+/**
+ * Default avatar with image and fallback.
+ */
+export const Default: Story = {
+  render: () => ({
+    components: {
+      UiAvatar,
+      UiAvatarFallback,
+      UiAvatarImage,
+    },
+    template: `
+      <UiAvatar>
+        <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <UiAvatarFallback>CN</UiAvatarFallback>
+      </UiAvatar>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+};
+
+const fallbackTemplateSource = `<script setup lang="ts">
+import { UiAvatar, UiAvatarFallback, UiAvatarImage } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiAvatar>
+    <UiAvatarImage src="" alt="@user" />
+    <UiAvatarFallback>CN</UiAvatarFallback>
+  </UiAvatar>
+</template>`;
+
+/**
+ * Avatar showing fallback when image fails to load.
+ */
+export const Fallback: Story = {
+  render: () => ({
+    components: {
+      UiAvatar,
+      UiAvatarFallback,
+      UiAvatarImage,
+    },
+    template: `
+      <UiAvatar>
+        <UiAvatarImage src="" alt="@user" />
+        <UiAvatarFallback>CN</UiAvatarFallback>
+      </UiAvatar>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: fallbackTemplateSource,
+      },
+    },
+  },
+};
+
+const multipleTemplateSource = `<script setup lang="ts">
+import { UiAvatar, UiAvatarFallback, UiAvatarImage } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="flex flex-row items-center gap-4">
+    <UiAvatar>
+      <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <UiAvatarFallback>CN</UiAvatarFallback>
+    </UiAvatar>
+    <UiAvatar>
+      <UiAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
+      <UiAvatarFallback>ER</UiAvatarFallback>
+    </UiAvatar>
+  </div>
+</template>`;
+
+/**
+ * Multiple avatars in a row.
+ */
+export const Multiple: Story = {
+  render: () => ({
+    components: {
+      UiAvatar,
+      UiAvatarFallback,
+      UiAvatarImage,
+    },
+    template: `
+      <div class="flex flex-row items-center gap-4">
+        <UiAvatar>
+          <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <UiAvatarFallback>CN</UiAvatarFallback>
+        </UiAvatar>
+        <UiAvatar>
+          <UiAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
+          <UiAvatarFallback>ER</UiAvatarFallback>
+        </UiAvatar>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: multipleTemplateSource,
+      },
+    },
+  },
+};
+
+const stackedTemplateSource = `<script setup lang="ts">
+import { UiAvatar, UiAvatarFallback, UiAvatarImage } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background">
+    <UiAvatar>
+      <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <UiAvatarFallback>CN</UiAvatarFallback>
+    </UiAvatar>
+    <UiAvatar>
+      <UiAvatarImage src="https://github.com/leerob.png" alt="@leerob" />
+      <UiAvatarFallback>LR</UiAvatarFallback>
+    </UiAvatar>
+    <UiAvatar>
+      <UiAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
+      <UiAvatarFallback>ER</UiAvatarFallback>
+    </UiAvatar>
+  </div>
+</template>`;
+
+/**
+ * Stacked avatars with overlapping layout.
+ */
+export const Stacked: Story = {
+  render: () => ({
+    components: {
+      UiAvatar,
+      UiAvatarFallback,
+      UiAvatarImage,
+    },
+    template: `
+      <div class="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background">
+        <UiAvatar>
+          <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <UiAvatarFallback>CN</UiAvatarFallback>
+        </UiAvatar>
+        <UiAvatar>
+          <UiAvatarImage src="https://github.com/leerob.png" alt="@leerob" />
+          <UiAvatarFallback>LR</UiAvatarFallback>
+        </UiAvatar>
+        <UiAvatar>
+          <UiAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
+          <UiAvatarFallback>ER</UiAvatarFallback>
+        </UiAvatar>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: stackedTemplateSource,
+      },
+    },
+  },
+};

package/src/components/UiAvatar/UiAvatar.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { Avatar as ShadcnAvatar } from '@/components/core/avatar';
+
+  defineOptions({
+    name: 'UiAvatar',
+  });
+</script>
+
+<template>
+  <ShadcnAvatar>
+    <slot />
+  </ShadcnAvatar>
+</template>

package/src/components/UiAvatar/UiAvatarFallback.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { AvatarFallback as ShadcnAvatarFallback } from '@/components/core/avatar';
+
+  defineOptions({
+    name: 'UiAvatarFallback',
+  });
+</script>
+
+<template>
+  <ShadcnAvatarFallback>
+    <slot />
+  </ShadcnAvatarFallback>
+</template>

package/src/components/UiAvatar/UiAvatarImage.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+  import { AvatarImage as ShadcnAvatarImage } from '@/components/core/avatar';
+  import { UiAvatarImageProps } from './types';
+
+  defineOptions({
+    name: 'UiAvatarImage',
+  });
+
+  const props = defineProps<UiAvatarImageProps>();
+</script>
+
+<template>
+  <ShadcnAvatarImage v-bind="props" />
+</template>

package/src/components/UiAvatar/index.ts

@@ -0,0 +1,4 @@
+export { default as UiAvatar } from './UiAvatar.vue';
+export { default as UiAvatarFallback } from './UiAvatarFallback.vue';
+export { default as UiAvatarImage } from './UiAvatarImage.vue';
+export type * from './types';

package/src/components/UiAvatar/types.ts

@@ -0,0 +1,20 @@
+import { ImgHTMLAttributes } from 'vue';
+
+/**
+ * A circular image for representing users or entities. Use for
+ * profile pictures, user lists, or any person/entity representation.
+ * @category Data Display
+ * @useCases profile picture, user avatar, contact image, team member
+ * @keywords avatar, image, profile, picture, user, photo, initials
+ * @related UiBadge
+ */
+export type UiAvatarImageProps = {
+  /** The source URL of the avatar image. */
+  src: string;
+  /** Alternative text for the avatar image. */
+  alt: string;
+  /** The referrer policy for the image request. */
+  referrerPolicy?: ImgHTMLAttributes['referrerpolicy'];
+  /** The CORS setting for the image request. */
+  crossOrigin?: ImgHTMLAttributes['crossorigin'];
+};