srcdev-nuxt-components 8.0.3 → 9.0.1

package/app/components/forms/input-textarea/stories/InputTextareaWithLabel.stories.ts

@@ -0,0 +1,452 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import StorybookComponent from "../variants/InputTextareaWithLabel.vue";
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
+
+interface InputTextareaWithLabelStoryArgs {
+  modelValue: string;
+  maxlength: number;
+  name: string;
+  placeholder: string;
+  label: string;
+  errorMessage: string;
+  fieldHasError: boolean;
+  required: boolean;
+  theme: FormUiTheme;
+  InputUiVariant: InputUiVariant;
+  styleClassPassthrough: string[];
+  useDescriptionTextSlot: boolean;
+  useDescriptionHtmlSlot: boolean;
+  descriptionTextContent: string;
+  descriptionHtmlContent: string;
+  useLeftSlot: boolean;
+  useRightSlot: boolean;
+  leftSlotContent: string;
+  rightSlotContent: string;
+}
+
+export default {
+  title: "Components/Forms/Input Textarea/InputTextareaWithLabel",
+  component: StorybookComponent,
+  argTypes: {
+    // Model
+    modelValue: {
+      control: "text",
+      description: "The textarea value",
+      table: {
+        category: "Model",
+      },
+    },
+
+    // Basic Configuration
+    maxlength: {
+      control: { type: "number", min: 1, max: 10000 },
+      description: "Maximum length of textarea",
+      table: {
+        category: "Basic",
+      },
+    },
+    name: {
+      control: "text",
+      description: "Textarea name attribute",
+      table: {
+        category: "Basic",
+      },
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text",
+      table: {
+        category: "Basic",
+      },
+    },
+    label: {
+      control: "text",
+      description: "Textarea label",
+      table: {
+        category: "Basic",
+      },
+    },
+
+    // Validation
+    errorMessage: {
+      control: "text",
+      description: "Error message to display",
+      table: {
+        category: "Validation",
+      },
+    },
+    fieldHasError: {
+      control: "boolean",
+      description: "Whether field has validation error",
+      table: {
+        category: "Validation",
+      },
+    },
+    required: {
+      control: "boolean",
+      description: "Whether field is required",
+      table: {
+        category: "Validation",
+      },
+    },
+
+    // Styling
+    theme: {
+      control: { type: "select" },
+      options: ["primary", "secondary", "tertiary", "ghost", "error", "success", "warning"],
+      description: "Theme for styling",
+      table: {
+        category: "Styling",
+      },
+    },
+    InputUiVariant: {
+      control: { type: "select" },
+      options: ["normal", "outlined", "underlined"],
+      description: "Textarea variant style",
+      table: {
+        category: "Styling",
+      },
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional CSS classes",
+      table: {
+        category: "Styling",
+      },
+    },
+
+    // Slots
+    useDescriptionTextSlot: {
+      control: "boolean",
+      description: "Use description text slot",
+      table: {
+        category: "Slots",
+      },
+    },
+    useDescriptionHtmlSlot: {
+      control: "boolean",
+      description: "Use description HTML slot",
+      table: {
+        category: "Slots",
+      },
+    },
+    descriptionTextContent: {
+      control: "text",
+      description: "Content for description text slot",
+      table: {
+        category: "Slots",
+      },
+    },
+    descriptionHtmlContent: {
+      control: "text",
+      description: "HTML content for description slot",
+      table: {
+        category: "Slots",
+      },
+    },
+    useLeftSlot: {
+      control: "boolean",
+      description: "Use left slot",
+      table: {
+        category: "Slots",
+      },
+    },
+    useRightSlot: {
+      control: "boolean",
+      description: "Use right slot",
+      table: {
+        category: "Slots",
+      },
+    },
+    leftSlotContent: {
+      control: "text",
+      description: "Content for left slot",
+      table: {
+        category: "Slots",
+      },
+    },
+    rightSlotContent: {
+      control: "text",
+      description: "Content for right slot",
+      table: {
+        category: "Slots",
+      },
+    },
+  },
+  args: {
+    modelValue: "",
+    maxlength: 1000,
+    name: "example-textarea",
+    placeholder: "Enter your message...",
+    label: "Message",
+    errorMessage: "",
+    fieldHasError: false,
+    required: false,
+    theme: "default",
+    inputVariant: "normal",
+    styleClassPassthrough: [],
+    useDescriptionTextSlot: false,
+    useDescriptionHtmlSlot: false,
+    descriptionTextContent: "Please provide a detailed message",
+    descriptionHtmlContent: "Please provide a <strong>detailed</strong> message with <em>important</em> information",
+    useLeftSlot: false,
+    useRightSlot: false,
+    leftSlotContent: "📝",
+    rightSlotContent: "✨",
+  },
+} as Meta<typeof StorybookComponent>;
+
+const Template: StoryFn<InputTextareaWithLabelStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const { modelValue, ...otherArgs } = args;
+    const textareaValue = ref(modelValue);
+
+    return {
+      textareaValue,
+      args: otherArgs,
+      descriptionTextContent: args.descriptionTextContent,
+      descriptionHtmlContent: args.descriptionHtmlContent,
+      useDescriptionTextSlot: args.useDescriptionTextSlot,
+      useDescriptionHtmlSlot: args.useDescriptionHtmlSlot,
+      leftSlotContent: args.leftSlotContent,
+      rightSlotContent: args.rightSlotContent,
+      useLeftSlot: args.useLeftSlot,
+      useRightSlot: args.useRightSlot,
+    };
+  },
+  template: `
+    <StorybookComponent
+      v-model="textareaValue"
+      v-bind="args"
+    >
+      <template v-if="useDescriptionTextSlot" #descriptionText>{{ descriptionTextContent }}</template>
+      <template v-if="useDescriptionHtmlSlot" #descriptionHtml v-html="descriptionHtmlContent"></template>
+      <template v-if="useLeftSlot" #left>{{ leftSlotContent }}</template>
+      <template v-if="useRightSlot" #right>{{ rightSlotContent }}</template>
+    </StorybookComponent>
+    <div class="mt-4 text-sm text-gray-600">
+      Character count: {{ textareaValue.length }} / {{ args.maxlength }}
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const WithDescription = Template.bind({});
+WithDescription.args = {
+  useDescriptionTextSlot: true,
+  label: "Feedback",
+  placeholder: "Share your thoughts...",
+};
+
+export const WithHtmlDescription = Template.bind({});
+WithHtmlDescription.args = {
+  useDescriptionHtmlSlot: true,
+  label: "Product Review",
+  placeholder: "Write your detailed review...",
+  descriptionHtmlContent:
+    "Please include <strong>specific details</strong> about the product, including <em>pros</em> and <em>cons</em>",
+};
+
+export const ContactForm = Template.bind({});
+ContactForm.args = {
+  label: "Message",
+  placeholder: "Tell us how we can help you...",
+  useDescriptionTextSlot: true,
+  descriptionTextContent: "Please provide as much detail as possible so we can assist you effectively",
+  maxlength: 500,
+  required: true,
+};
+
+export const CommentBox = Template.bind({});
+CommentBox.args = {
+  label: "Comment",
+  placeholder: "Add a comment...",
+  maxlength: 280,
+  modelValue: "This is a great article! Thanks for sharing.",
+};
+
+export const CodeSnippet = Template.bind({});
+CodeSnippet.args = {
+  label: "Code",
+  placeholder: "Paste your code here...",
+  useDescriptionTextSlot: true,
+  descriptionTextContent: "Please include any relevant context or error messages",
+  useLeftSlot: true,
+  leftSlotContent: "💻",
+  maxlength: 2000,
+  modelValue: `function greet(name) {
+  return "Hello, " + name + "!";
+}
+
+console.log(greet("World"));`,
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  fieldHasError: true,
+  errorMessage: "Message is too short. Please provide more details.",
+  theme: "error",
+  label: "Error Example",
+  placeholder: "This field has an error",
+  modelValue: "Too short",
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  required: true,
+  label: "Required Message",
+  placeholder: "This field is required",
+  useDescriptionTextSlot: true,
+  descriptionTextContent: "This field is required and cannot be left empty",
+};
+
+export const Outlined = Template.bind({});
+Outlined.args = {
+  InputUiVariant: "outlined",
+  label: "Outlined Textarea",
+  placeholder: "This is an outlined textarea",
+  useDescriptionTextSlot: true,
+  descriptionTextContent: "Notice how the description appears below in outlined variant",
+};
+
+export const Underlined = Template.bind({});
+Underlined.args = {
+  InputUiVariant: "underlined",
+  label: "Underlined Textarea",
+  placeholder: "This is an underlined textarea",
+};
+
+export const WithSlots = Template.bind({});
+WithSlots.args = {
+  label: "Message with Icons",
+  placeholder: "Type your message...",
+  useLeftSlot: true,
+  useRightSlot: true,
+  leftSlotContent: "📝",
+  rightSlotContent: "💌",
+  useDescriptionTextSlot: true,
+  descriptionTextContent: "Icons are displayed on the left and right of the textarea",
+};
+
+export const AllVariants = Template.bind({});
+AllVariants.storyName = "All Input Variants";
+AllVariants.render = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const variants: InputUiVariant[] = ["normal", "outlined", "underlined"];
+    const textareaValues = reactive(
+      variants.reduce(
+        (acc, variant) => ({
+          ...acc,
+          [variant]: `Sample text for ${variant} variant`,
+        }),
+        {} as Record<string, string>
+      )
+    );
+
+    return {
+      variants,
+      textareaValues,
+      args,
+    };
+  },
+  template: `
+    <div class="space-y-6">
+      <div v-for="variant in variants" :key="variant" class="space-y-2">
+        <h3 class="text-lg font-semibold capitalize">{{ variant }} Variant</h3>
+        <StorybookComponent
+          v-model="textareaValues[variant]"
+          v-bind="{ ...args, InputUiVariant: variant, label: variant + ' Textarea', name: variant + '-textarea' }"
+        />
+      </div>
+    </div>
+  `,
+});
+
+export const FormExamples = Template.bind({});
+FormExamples.storyName = "Real-World Form Examples";
+FormExamples.render = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const formData = reactive({
+      feedback: "",
+      bio: "",
+      message: "",
+      code: "",
+    });
+
+    return {
+      formData,
+      args,
+    };
+  },
+  template: `
+    <div class="space-y-6">
+      <div class="space-y-4">
+        <h2 class="text-xl font-bold">Contact Form</h2>
+        <StorybookComponent
+          v-model="formData.message"
+          label="Message"
+          name="contact-message"
+          placeholder="How can we help you?"
+          :required="true"
+          :maxlength="500"
+        >
+          <template #descriptionText>Please describe your inquiry in detail (max 500 characters)</template>
+        </StorybookComponent>
+      </div>
+
+      <div class="space-y-4">
+        <h2 class="text-xl font-bold">User Profile</h2>
+        <StorybookComponent
+          v-model="formData.bio"
+          label="Bio"
+          name="user-bio"
+          placeholder="Tell us about yourself..."
+          :maxlength="200"
+          input-variant="outlined"
+        >
+          <template #descriptionText>Share a brief description about yourself (max 200 characters)</template>
+        </StorybookComponent>
+      </div>
+
+      <div class="space-y-4">
+        <h2 class="text-xl font-bold">Feedback Form</h2>
+        <StorybookComponent
+          v-model="formData.feedback"
+          label="Feedback"
+          name="user-feedback"
+          placeholder="Share your experience..."
+          :maxlength="1000"
+        >
+          <template #descriptionHtml>Rate your experience and provide <strong>detailed feedback</strong></template>
+          <template #left>⭐</template>
+        </StorybookComponent>
+      </div>
+
+      <div class="space-y-4">
+        <h2 class="text-xl font-bold">Code Submission</h2>
+        <StorybookComponent
+          v-model="formData.code"
+          label="Code Snippet"
+          name="code-snippet"
+          placeholder="Paste your code here..."
+          :maxlength="5000"
+          input-variant="underlined"
+        >
+          <template #descriptionText>Paste your code snippet with proper formatting</template>
+          <template #left>💻</template>
+          <template #right>📋</template>
+        </StorybookComponent>
+      </div>
+
+      <div class="p-4 bg-gray-100 rounded">
+        <h3 class="font-semibold mb-2">Form Data Preview:</h3>
+        <pre class="text-sm">{{ JSON.stringify(formData, null, 2) }}</pre>
+      </div>
+    </div>
+  `,
+});

package/app/components/forms/input-textarea/variants/InputTextareaWithLabel.vue

@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <div
+      class="input-textarea-with-label"
+      :data-theme="theme"
+      :data-invalid="fieldHasError ? '' : null"
+      :class="[elementClasses, inputVariant, { dirty: isDirty }, { active: isActive }]"
+    >
+      <InputLabel
+        :id
+        :for="id"
+        :theme
+        :name
+        :input-variant
+        :field-has-error
+        :style-class-passthrough="['input-textarea-label']"
+      >
+        <template #textLabel>{{ label }}</template>
+      </InputLabel>
+
+      <InputDescription
+        v-if="inputVariant !== 'outlined'"
+        :id
+        :description-id="descriptionId"
+        :input-variant
+        :field-has-error="fieldHasError"
+        :style-class-passthrough="['input-text-description']"
+      >
+        <template v-if="slots.descriptionHtml" #descriptionHtml>
+          <slot name="descriptionHtml"></slot>
+        </template>
+        <template v-if="slots.descriptionText" #descriptionText>
+          <slot name="descriptionText"></slot>
+        </template>
+      </InputDescription>
+
+      <InputTextareaCore
+        :id
+        v-model="modelValue"
+        v-model:is-dirty="isDirty"
+        v-model:is-active="isActive"
+        :maxlength
+        :name
+        :placeholder
+        :label
+        :field-has-error
+        :required
+        :style-class-passthrough
+        :theme
+        :input-variant
+        :aria-describedby
+      >
+        <template v-if="slots.left" #left>
+          <slot name="left"></slot>
+        </template>
+        <template v-if="slots.right" #right>
+          <slot name="right"></slot>
+        </template>
+      </InputTextareaCore>
+      <InputError :id="errorId" :error-message :show-error="fieldHasError" :is-detached="false" :input-variant />
+    </div>
+
+    <InputDescription
+      v-if="inputVariant === 'outlined'"
+      :id
+      :name
+      :input-variant
+      :field-has-error="fieldHasError"
+      :style-class-passthrough="['input-text-description']"
+    >
+      <template v-if="slots.descriptionHtml" #descriptionHtml>
+        <slot name="descriptionHtml"></slot>
+      </template>
+      <template v-if="slots.descriptionText" #descriptionText>
+        <slot name="descriptionText"></slot>
+      </template>
+    </InputDescription>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms";
+
+interface Props {
+  maxlength?: number;
+  name: string;
+  placeholder?: string;
+  label: string;
+  errorMessage: object | string;
+  fieldHasError?: boolean;
+  required?: boolean;
+  styleClassPassthrough?: string | string[];
+  theme?: FormUiTheme;
+  inputVariant?: InputUiVariant;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxlength: 255,
+  placeholder: "",
+  fieldHasError: false,
+  required: false,
+  styleClassPassthrough: () => [],
+  theme: "default",
+  inputVariant: "normal",
+});
+
+const slots = useSlots();
+
+const FormUiTheme = computed(() => {
+  return props.fieldHasError ? "error" : props.theme;
+});
+
+// const id = `${props.name}-${useId()}`;
+// const errorId = `${id}-error-message`;
+// const ariaDescribedby = computed(() => {
+//   const ariaDescribedbyId = slots.descriptionText || slots.descriptionHtml ? `${id}-description` : undefined;
+//   return props.fieldHasError ? errorId : ariaDescribedbyId;
+// });
+
+const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
+  props.name,
+  toRef(props, "fieldHasError"),
+  slots
+);
+
+const modelValue = defineModel<string | number | readonly string[] | null | undefined>();
+const isActive = ref<boolean>(false);
+const isDirty = ref<boolean>(false);
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const testDirty = () => {
+  const watchValue = modelValue.value ?? "";
+
+  if (!isDirty.value && typeof watchValue === "string" && watchValue.length > 0) {
+    isDirty.value = true;
+  }
+};
+
+onMounted(() => {
+  testDirty();
+});
+
+watch(
+  () => modelValue.value,
+  () => {
+    testDirty();
+  }
+);
+</script>

package/app/components/forms/pending-effect/PendingEffect.vue

@@ -0,0 +1,101 @@
+<template>
+  <svg class="pending-container" :class="[elementClasses]" :data-theme="theme">
+    <rect pathLength="100" stroke-linecap="round" class="pending-blur" />
+    <rect pathLength="100" stroke-linecap="round" class="pending-line" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  theme?: "default" | "success" | "error" | "warning";
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  theme: "default",
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+@layer components {
+.pending-effect {
+  --pending-line-color: var(--theme-button-primary-border);
+  --pending-line-thickness: 0.1rem;
+  --pending-line-length: 2rem;
+  --pending-blur-color: var(--theme-button-primary-border);
+  --pending-blur-size: 0rem; /* 0.3rem */
+  --pending-offset: 1rem;
+  --animation-speed: 3000ms;
+  /* do not change, used for calculations */
+  --container-offset: 10rem;
+  position: relative;
+
+  .pending-container {
+    pointer-events: none;
+    position: absolute;
+    inset: calc(var(--container-offset) / -2);
+    width: calc(100% + var(--container-offset));
+    height: calc(100% + var(--container-offset));
+    opacity: 0;
+
+    .pending-blur,
+    .pending-line {
+      width: calc(100% - var(--container-offset) + var(--pending-offset));
+      height: calc(100% - var(--container-offset) + var(--pending-offset));
+      x: calc((var(--container-offset) / 2) + calc(var(--pending-offset) / -2));
+      y: calc((var(--container-offset) / 2) + calc(var(--pending-offset) / -2));
+      rx: 0.8rem;
+      fill: transparent;
+      stroke: black;
+      stroke-width: 0.5rem;
+      stroke-dasharray: var(--pending-line-length) calc(5rem - var(--pending-line-length));
+    }
+
+    .pending-line {
+      stroke: var(--pending-line-color);
+      stroke-width: var(--pending-line-thickness);
+    }
+
+    .pending-blur {
+      filter: blur(var(--pending-blur-size));
+      stroke: var(--pending-blur-color);
+      stroke-width: var(--pending-blur-size);
+    }
+  }
+
+  &:is(.icon-only) {
+    .pending-container {
+      .pending-blur,
+      .pending-line {
+        rx: 100vw;
+      }
+    }
+  }
+
+  &:is(.is-pending) {
+    pointer-events: none;
+    cursor: wait;
+
+    @media (prefers-reduced-motion: no-preference) {
+      animation: stroke-dashoffset var(--animation-speed) infinite linear;
+
+      .pending-container {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+@keyframes stroke-dashoffset {
+  0% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: -10rem;
+  }
+}
+}
+</style>