srcdev-nuxt-components 8.0.2 → 9.0.0

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

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

package/app/components/display-tooltip/DisplayTooltip.vue

@@ -12,7 +12,7 @@
         <Icon name="fa7-solid:circle-question" class="display-tooltip-trigger-icon" aria-hidden="true" />
       </button>
     </div>
-    <div popover class="display-tooltip-popover" :id="tooltipId" ref="popover1">
+    <div :id="tooltipId" ref="popover1" popover class="display-tooltip-popover">
       <div class="display-tooltip-popover-content">
         <slot name="tooltipContent"></slot>
       </div>
@@ -30,19 +30,20 @@ const props = defineProps({
     type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
-})
+});
 
-const slots = useSlots()
+const slots = useSlots();
 const tooltipId = computed(() => {
-  return props.tooltipId.length ? props.tooltipId : `nuxt-tooltip-${useId()}`
-})
-const tooltipAnchorName = `tooltip-anchor-${useId()}`
-const hideTooltipTrigger = ref(false)
+  return props.tooltipId.length ? props.tooltipId : `nuxt-tooltip-${useId()}`;
+});
+const tooltipAnchorName = `tooltip-anchor-${useId()}`;
+const hideTooltipTrigger = ref(false);
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 </script>
 
 <style lang="css">
+@layer components {
 .display-tooltip-core {
   padding-block: 8px;
   position: relative;
@@ -116,7 +117,10 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     top: calc(anchor(top) + 0px);
     left: calc(anchor(right) + 1px);
     opacity: 0;
-    transition: opacity 200ms, display 200ms, overlay 200ms;
+    transition:
+      opacity 200ms,
+      display 200ms,
+      overlay 200ms;
 
     transition-behavior: allow-discrete;
     position-try-fallbacks: flip-inline;
@@ -162,4 +166,5 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     }
   }
 }
+}
 </style>

package/app/components/display-tooltip/DisplayTooltipDefined.vue

@@ -79,6 +79,7 @@ const tooltipId = computed(() => {
 </script>
 
 <style lang="css">
+@layer components {
 .display-tooltip-core {
   .popover {
     .popover-content {
@@ -98,4 +99,5 @@ const tooltipId = computed(() => {
     }
   }
 }
+}
 </style>

package/app/components/expanding-panel/ExpandingPanel.vue

@@ -2,12 +2,11 @@
   <div class="expanding-panel" :class="[elementClasses]">
     <details class="expanding-panel-details" :name :open>
       <summary
-        @click.prevent.stop="handleToggle"
-        @keydown.enter.prevent="handleToggle"
-        @keydown.space.prevent="handleToggle"
-        class="expanding-panel-summary"
         :id="`id-${name}-trigger`"
+        class="expanding-panel-summary"
         :aria-controls="`id-${name}-content`"
+        :aria-expanded="open"
+        @click.prevent.stop="handleToggle"
       >
         <span class="label-wrapper">
           <slot name="summary"></slot>
@@ -20,9 +19,9 @@
       </summary>
     </details>
     <div
+      :id="`id-${name}-content`"
       class="expanding-panel-content"
       :aria-labelledby="`id-${name}-trigger`"
-      :id="`id-${name}-content`"
       role="region"
     >
       <div class="inner">
@@ -33,47 +32,37 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
-  name: {
-    type: String,
-    default: "",
-  },
-  iconSize: {
-    type: String,
-    default: "medium",
-  },
-  animationDuration: {
-    type: Number,
-    default: 400,
-  },
-  forceOpened: {
-    type: Boolean,
-    default: false,
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-})
+interface Props {
+  name?: string;
+  animationDuration?: number;
+  forceOpened?: boolean;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  name: undefined,
+  animationDuration: 400,
+  forceOpened: false,
+  styleClassPassthrough: () => [],
+});
 
-const name = shallowRef(props.name || useId())
-const isPanelOpen = defineModel({ default: false }) as Ref<boolean>
-const animationDurationStr = computed(() => `${props.animationDuration}ms`)
-const open = computed(() => {
-  return props.forceOpened ? true : isPanelOpen.value
-})
+const name = props.name || useId();
+const isPanelOpen = defineModel<boolean>({ default: false });
+const animationDurationStr = computed(() => `${props.animationDuration}ms`);
+const open = computed(() => props.forceOpened || isPanelOpen.value);
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 const handleToggle = (event: Event) => {
   if (props.forceOpened) {
-    event.preventDefault()
+    event.preventDefault();
   }
-  isPanelOpen.value = !isPanelOpen.value
-}
+  isPanelOpen.value = !isPanelOpen.value;
+};
 </script>
 
 <style lang="css">
+@layer components {
 .expanding-panel {
   .expanding-panel-details {
     &:hover {
@@ -127,9 +116,6 @@ const handleToggle = (event: Event) => {
       }
       + .expanding-panel-content {
         grid-template-rows: 1fr;
-        .inner {
-          transition: all v-bind(animationDurationStr) ease-in-out;
-        }
       }
     }
   }
@@ -137,7 +123,7 @@ const handleToggle = (event: Event) => {
   .expanding-panel-content {
     display: grid;
     grid-template-rows: 0fr;
-    transition: all v-bind(animationDurationStr) ease-in-out;
+    transition: grid-template-rows v-bind(animationDurationStr) ease-in-out;
     will-change: grid-template-rows;
 
     .inner {
@@ -146,4 +132,5 @@ const handleToggle = (event: Event) => {
     }
   }
 }
+}
 </style>

package/app/components/forms/c12/prop-validators/index.ts

@@ -0,0 +1,48 @@
+export const propValidators = {
+  size: ["x-small", "small", "default", "medium", "large"],
+  weight: [
+    "wght-100",
+    "wght-200",
+    "wght-300",
+    "wght-400",
+    "wght-500",
+    "wght-600",
+    "wght-700",
+    "wght-800",
+    "wght-900",
+    "light",
+    "normal",
+    "bold",
+    "fvs-wght-100",
+    "fvs-wght-200",
+    "fvs-wght-300",
+    "fvs-wght-400",
+    "fvs-wght-500",
+    "fvs-wght-600",
+    "fvs-wght-700",
+    "fvs-wght-800",
+    "fvs-wght-900",
+  ],
+  theme: [
+    "primary",
+    "secondary",
+    "tertiary",
+    "ghost",
+    "error",
+    "success",
+    "warning",
+    "input-action",
+    "input-action-underlined",
+  ],
+  checkboxAppearance: [null, "with-decorator"],
+  checkboxStyle: ["check", "cross"],
+  radioAppearance: [null, "with-decorator"],
+  optionsLayout: ["block", "inline", "equal-widths"],
+  labelWeight: ["normal", "semi-bold", "bold"],
+  InputUiVariant: ["normal", "outlined", "underlined"],
+  inputTypesButton: ["button", "cancel", "reset", "submit"],
+  inputTypesText: ["text", "email", "password", "number", "tel", "url"],
+  inputMode: ["text", "email", "tel", "url", "search", "numeric", "none", "decimal"],
+};
+
+export default propValidators;

package/app/components/forms/c12/utils.ts

@@ -0,0 +1,14 @@
+import type { InpuTextC12, IFormFieldC12, IFormData } from "../../../types/forms/types.forms"
+
+const formFieldC12 = <IFormFieldC12>{
+  label: "",
+  placeholder: "",
+  errorMessage: "",
+  useCustomError: false,
+  customErrors: {},
+  isValid: false,
+  isDirty: false,
+  type: "string",
+}
+
+export { formFieldC12 }