srcdev-nuxt-components 9.1.55 → 9.1.57

package/app/components/display-toast/molecules/DefaultToastContent.vue

@@ -1,163 +0,0 @@
-<template>
-  <div class="display-toast-inner">
-    <div class="toast-icon" aria-hidden="true">
-      <slot name="customToastIcon">
-        <Icon :name="customIcon || defaultThemeIcons[theme] || 'akar-icons:info'" class="icon" />
-      </slot>
-    </div>
-    <div :id="'toast-message-' + toastId" class="toast-message">
-      <template v-if="slots.title || slots.description || toastTitle || toastDescription">
-        <p v-if="slots.title || toastTitle" class="title" data-test-id="toast-title">
-          <slot name="title">{{ toastTitle }}</slot>
-        </p>
-        <p v-if="slots.description || toastDescription" class="description" data-test-id="toast-description">
-          <slot name="description">{{ toastDescription }}</slot>
-        </p>
-      </template>
-      <template v-else>
-        {{ toastDisplayText }}
-      </template>
-    </div>
-
-    <div v-if="!autoDismiss" class="toast-action">
-      <button @click.prevent="setDismissToast()">
-        <Icon name="material-symbols:close" class="icon" />
-        <span class="sr-only">Close</span>
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { DisplayToastTheme } from "../../../types/components";
-
-interface Props {
-  theme: DisplayToastTheme;
-  customIcon?: string;
-  toastId: string;
-  toastDisplayText: string;
-  toastTitle?: string;
-  toastDescription?: string;
-  autoDismiss: boolean;
-  setDismissToast: () => void;
-}
-
-defineProps<Props>();
-
-const defaultThemeIcons = {
-  primary: "akar-icons:info",
-  secondary: "akar-icons:info",
-  tertiary: "akar-icons:info",
-  ghost: "akar-icons:info",
-  error: "akar-icons:circle-alert",
-  info: "akar-icons:info",
-  success: "akar-icons:info",
-  warning: "akar-icons:circle-alert",
-};
-
-const slots = useSlots();
-</script>
-
-<style lang="css">
-@layer components {
-.display-toast-inner {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  gap: 12px;
-  align-items: center;
-  background-color: var(--colour-theme-1);
-  border-start-start-radius: 8px;
-  border-end-start-radius: 8px;
-  padding: 12px 14px;
-  overflow: hidden;
-
-  .toast-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 12px;
-
-    .icon {
-      color: var(--colour-theme-0);
-      display: inline-block;
-      font-size: 2.5rem;
-      font-style: normal;
-      font-weight: normal;
-      overflow: hidden;
-    }
-  }
-
-  .toast-message {
-    display: flex;
-    align-items: center;
-    gap: var(--step-1);
-    font-size: var(--step-4);
-    font-weight: normal;
-    line-height: 1.3;
-    color: var(--colour-theme-0);
-    margin: 0;
-    padding: 0;
-
-    .title {
-      margin: 0;
-      font-weight: 600;
-      font-size: var(--step-4);
-      line-height: 1.2;
-    }
-
-    .description {
-      margin: 0;
-      font-size: var(--step-3);
-      line-height: 1.4;
-      opacity: 0.9;
-    }
-
-    /* When using slots, change flex direction to column */
-    &:has(.title, .text) {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  }
-
-  .toast-action {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: 12px;
-
-    button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: var(--colour-theme-10);
-      border: 0.1rem solid var(--colour-theme-8);
-      outline: 0.1rem solid transparent;
-      border-radius: 50%;
-      box-shadow: none;
-      color: var(--colour-theme-1);
-      cursor: pointer;
-      font-size: var(--step-4);
-      font-weight: bold;
-      padding: 0.5rem;
-      text-decoration: underline;
-
-      transition: all 0.3s ease;
-
-      .icon {
-        font-size: 1.5rem;
-        vertical-align: middle;
-      }
-
-      &:hover,
-      &:focus-visible {
-        box-shadow: none;
-        background-color: var(--colour-theme-8);
-        color: var(--colour-theme-0);
-        outline: 0.1rem solid var(--colour-theme-3);
-        outline-offset: 0.2rem;
-      }
-    }
-  }
-}
-}
-</style>

package/app/components/display-toast/stories/DisplayToast.stories.ts

@@ -1,380 +0,0 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { ref, onMounted } from "vue";
-import StorybookComponent from "../DisplayToast.vue";
-
-// Custom interface for story args
-interface ToastStoryArgs {
-  theme: "primary" | "secondary" | "success" | "warning" | "error" | "info";
-  position: "top" | "bottom";
-  alignment: "left" | "center" | "right";
-  fullWidth: boolean;
-  autoDismiss: boolean;
-  duration: number;
-  revealDuration: number;
-  text: string;
-  customIcon: string;
-  // DisplayPromptCore specific props
-  usePrompt: boolean;
-  promptTheme: "primary" | "secondary" | "success" | "warning" | "error" | "info";
-  dismissible: boolean;
-  promptTitle: string;
-  promptContent: string;
-  useAutoFocus: boolean;
-  styleClassPassthrough: string[];
-}
-
-export default {
-  title: "Components/UI/DisplayToast",
-  component: StorybookComponent,
-  argTypes: {
-    // Appearance Config
-    theme: {
-      control: { type: "select" },
-      options: ["primary", "secondary", "success", "warning", "error", "info"],
-      description: "Toast theme/variant",
-      table: {
-        category: "Appearance",
-      },
-    },
-    position: {
-      control: { type: "select" },
-      options: ["top", "bottom"],
-      description: "Vertical position of toast",
-      table: {
-        category: "Appearance",
-      },
-    },
-    alignment: {
-      control: { type: "select" },
-      options: ["left", "center", "right"],
-      description: "Horizontal alignment of toast",
-      table: {
-        category: "Appearance",
-      },
-    },
-    fullWidth: {
-      control: { type: "boolean" },
-      description: "Whether toast spans full width",
-      table: {
-        category: "Appearance",
-      },
-    },
-    // Behavior Config
-    autoDismiss: {
-      control: { type: "boolean" },
-      description: "Auto dismiss toast after duration",
-      table: {
-        category: "Behavior",
-      },
-    },
-    duration: {
-      control: { type: "range", min: 1000, max: 10000, step: 500 },
-      description: "Auto dismiss duration in milliseconds",
-      table: {
-        category: "Behavior",
-      },
-    },
-    revealDuration: {
-      control: { type: "range", min: 100, max: 1000, step: 50 },
-      description: "Animation duration for reveal/hide",
-      table: {
-        category: "Behavior",
-      },
-    },
-    // Content Config
-    text: {
-      control: { type: "text" },
-      description: "Toast message text",
-      table: {
-        category: "Content",
-      },
-    },
-    customIcon: {
-      control: { type: "text" },
-      description: "Custom icon name (e.g., 'akar-icons:check-box')",
-      table: {
-        category: "Content",
-      },
-    },
-    // DisplayPromptCore Config
-    usePrompt: {
-      control: { type: "boolean" },
-      description: "Use DisplayPromptCore instead of simple text",
-      table: {
-        category: "Prompt",
-      },
-    },
-    promptTheme: {
-      control: { type: "select" },
-      options: ["primary", "secondary", "success", "warning", "error", "info"],
-      description: "Theme for DisplayPromptCore",
-      table: {
-        category: "Prompt",
-      },
-    },
-    dismissible: {
-      control: { type: "boolean" },
-      description: "Whether DisplayPromptCore is dismissible",
-      table: {
-        category: "Prompt",
-      },
-    },
-    promptTitle: {
-      control: { type: "text" },
-      description: "Title for DisplayPromptCore",
-      table: {
-        category: "Prompt",
-      },
-    },
-    promptContent: {
-      control: { type: "text" },
-      description: "Content for DisplayPromptCore",
-      table: {
-        category: "Prompt",
-      },
-    },
-    useAutoFocus: {
-      control: { type: "boolean" },
-      description: "Auto focus DisplayPromptCore",
-      table: {
-        category: "Prompt",
-      },
-    },
-    styleClassPassthrough: {
-      control: { type: "object" },
-      description: "Style classes for DisplayPromptCore (e.g., ['dark', 'outlined'])",
-      table: {
-        category: "Prompt",
-      },
-    },
-    // Hide complex internal props
-    config: {
-      table: {
-        disable: true,
-      },
-    },
-    modelValue: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-  args: {
-    theme: "primary",
-    position: "top",
-    alignment: "right",
-    fullWidth: false,
-    autoDismiss: false,
-    duration: 3000,
-    revealDuration: 300,
-    text: "This is a toast notification message",
-    customIcon: "",
-    usePrompt: false,
-    promptTheme: "primary",
-    dismissible: true,
-    promptTitle: "Prompt Title",
-    promptContent: "This is prompt content, it can contain html or plain text.",
-    useAutoFocus: false,
-    styleClassPassthrough: ["dark", "outlined"],
-  },
-} as Meta<ToastStoryArgs>;
-
-const Template: StoryFn<ToastStoryArgs> = (args) => ({
-  components: {
-    StorybookComponent,
-  },
-  setup() {
-    const isActive = ref(false);
-
-    // Auto-trigger toast for demo
-    onMounted(() => {
-      setTimeout(() => {
-        isActive.value = true;
-      }, 500);
-    });
-
-    return { args, isActive };
-  },
-  template: `
-    <div style="position: relative; height: 200px; padding: 20px;">
-      <p style="margin-bottom: 20px;">Toast will appear and demonstrate the configured behavior:</p>
-      <p v-if="args.usePrompt" style="margin-bottom: 10px; font-style: italic; color: #666;">
-        Note: DisplayPromptCore examples require component to be properly loaded in the environment.
-      </p>
-      <button
-        @click="isActive = true"
-        style="padding: 8px 16px; background: #0066cc; color: white; border: none; border-radius: 4px; cursor: pointer;"
-      >
-        Trigger Toast
-      </button>
-
-      <StorybookComponent
-        v-model="isActive"
-        :config="{
-          appearance: {
-            theme: args.theme,
-            position: args.position,
-            alignment: args.alignment,
-            fullWidth: args.fullWidth
-          },
-          behavior: {
-            autoDismiss: args.autoDismiss,
-            duration: args.duration,
-            revealDuration: args.revealDuration
-          },
-          content: args.usePrompt ? {
-            text: args.promptTitle + ': ' + args.promptContent
-          } : {
-            text: args.text,
-            ...(args.customIcon && { customIcon: args.customIcon })
-          },
-        }"
-      />
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-
-export const SuccessToast = Template.bind({});
-SuccessToast.args = {
-  theme: "success",
-  text: "Success! Your action was completed.",
-  customIcon: "akar-icons:check-box",
-  autoDismiss: false,
-  duration: 4000,
-  position: "top",
-  alignment: "right",
-  fullWidth: false,
-  revealDuration: 300,
-};
-
-export const ErrorToast = Template.bind({});
-ErrorToast.args = {
-  theme: "error",
-  text: "Error! Something went wrong.",
-  autoDismiss: false,
-  position: "top",
-  alignment: "center",
-  fullWidth: false,
-  duration: 3000,
-  revealDuration: 300,
-  customIcon: "",
-};
-
-export const BottomCenterToast = Template.bind({});
-BottomCenterToast.args = {
-  theme: "info",
-  text: "Info message at bottom center",
-  position: "bottom",
-  alignment: "center",
-  autoDismiss: false,
-  duration: 5000,
-  fullWidth: false,
-  revealDuration: 300,
-  customIcon: "",
-};
-
-export const FullWidthToast = Template.bind({});
-FullWidthToast.args = {
-  theme: "warning",
-  text: "Full width warning message",
-  fullWidth: true,
-  position: "top",
-  alignment: "left",
-  autoDismiss: false,
-  duration: 6000,
-  revealDuration: 300,
-  customIcon: "",
-};
-
-// DisplayPromptCore Examples - Based on Playground
-export const ErrorPromptToast = Template.bind({});
-ErrorPromptToast.args = {
-  theme: "error",
-  position: "top",
-  alignment: "right",
-  fullWidth: false,
-  autoDismiss: false,
-  duration: 5000,
-  revealDuration: 300,
-  usePrompt: true,
-  promptTheme: "error",
-  dismissible: false,
-  promptTitle: "Error Prompt Title with content",
-  promptContent: "This is an error prompt content, it can contain html or plain text.",
-  useAutoFocus: false,
-  styleClassPassthrough: ["dark", "outlined"],
-};
-
-export const SuccessPromptToast = Template.bind({});
-SuccessPromptToast.args = {
-  theme: "success",
-  position: "top",
-  alignment: "right",
-  fullWidth: false,
-  autoDismiss: false,
-  duration: 3000,
-  revealDuration: 300,
-  usePrompt: true,
-  promptTheme: "success",
-  dismissible: true,
-  promptTitle: "Success Prompt Title with content (Dismissible)",
-  promptContent: "This is success prompt content, it can contain html or plain text.",
-  useAutoFocus: true,
-  styleClassPassthrough: ["dark", "outlined"],
-};
-
-export const InfoPromptFullWidth = Template.bind({});
-InfoPromptFullWidth.args = {
-  theme: "info",
-  position: "top",
-  alignment: "center",
-  fullWidth: true,
-  autoDismiss: false,
-  duration: 4000,
-  revealDuration: 300,
-  usePrompt: true,
-  promptTheme: "info",
-  dismissible: false,
-  promptTitle: "Info Prompt Title with content (Auto Dismiss)",
-  promptContent: "This is info prompt content displayed full width.",
-  useAutoFocus: false,
-  styleClassPassthrough: ["dark", "outlined"],
-};
-
-export const WarningPromptBottomCenter = Template.bind({});
-WarningPromptBottomCenter.args = {
-  theme: "warning",
-  position: "bottom",
-  alignment: "center",
-  fullWidth: false,
-  autoDismiss: false,
-  duration: 6000,
-  revealDuration: 300,
-  usePrompt: true,
-  promptTheme: "warning",
-  dismissible: true,
-  promptTitle: "Warning Prompt at Bottom Center",
-  promptContent: "This warning prompt appears at the bottom center with auto dismiss.",
-  useAutoFocus: false,
-  styleClassPassthrough: ["outlined"],
-};
-
-export const PrimaryPromptCustomStyles = Template.bind({});
-PrimaryPromptCustomStyles.args = {
-  theme: "primary",
-  position: "top",
-  alignment: "left",
-  fullWidth: false,
-  autoDismiss: false,
-  duration: 3000,
-  revealDuration: 500,
-  usePrompt: true,
-  promptTheme: "primary",
-  dismissible: true,
-  promptTitle: "Primary Prompt with Custom Styles",
-  promptContent: "This prompt uses custom style configurations and slower reveal animation.",
-  useAutoFocus: false,
-  styleClassPassthrough: ["dark"],
-};