srcdev-nuxt-components 8.0.3 → 9.0.1

package/app/components/forms/input-text/variants/InputTextWithLabel.vue

@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <div
+      class="input-text-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-text-label']"
+      >
+        <template #textLabel>{{ label }}</template>
+      </InputLabel>
+
+      <InputDescription
+        :id
+        :description-id
+        :name
+        :field-has-error="fieldHasError"
+        :style-class-passthrough="['input-text-description']"
+      >
+        <template #descriptionHtml>
+          <slot name="descriptionHtml"></slot>
+        </template>
+        <template #descriptionText>
+          <slot name="descriptionText"></slot>
+        </template>
+      </InputDescription>
+
+      <InputTextCore
+        :id
+        v-model="modelValue"
+        v-model:is-dirty="isDirty"
+        v-model:is-active="isActive"
+        :type
+        :inputmode
+        :maxlength
+        :name
+        :placeholder
+        :label
+        :error-message
+        :field-has-error
+        :required
+        :style-class-passthrough
+        :theme
+        :aria-describedby
+        :input-variant
+      >
+        <template v-if="slots.left" #left>
+          <slot name="left"></slot>
+        </template>
+        <template v-if="slots.right" #right>
+          <slot name="right"></slot>
+        </template>
+      </InputTextCore>
+
+      <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 { InputTypesText, FormUiTheme, InputUiVariant, InputMode } from "~/types/forms/types.forms";
+
+interface Props {
+  maxlength?: number;
+  type: InputTypesText;
+  inputmode?: InputMode;
+  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,
+  inputmode: "text",
+  placeholder: "",
+  fieldHasError: false,
+  required: false,
+  styleClassPassthrough: () => [],
+  theme: "default",
+  inputVariant: "normal",
+});
+
+const slots = useSlots();
+
+const FormUiTheme = computed(() => {
+  return props.fieldHasError ? "error" : props.theme;
+});
+
+const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
+  props.name,
+  toRef(props, "fieldHasError"),
+  slots
+);
+
+const modelValue = defineModel<string>();
+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/input-textarea/InputTextareaCore.vue

@@ -0,0 +1,151 @@
+<template>
+  <div
+    class="input-textarea-wrapper"
+    :data-theme="theme"
+    :data-invalid="fieldHasError ? '' : null"
+    :class="[
+      inputVariant,
+      { dirty: isDirty },
+      { active: isActive },
+      { error: fieldHasError },
+      { 'has-left-slot': slots.left },
+      { 'has-right-slot': slots.right },
+    ]"
+  >
+    <span v-if="slots.left" class="slot left-slot">
+      <slot name="left"></slot>
+    </span>
+
+    <textarea
+      :id
+      ref="inputField"
+      v-model="modelValue"
+      :maxlength
+      :placeholder
+      :name
+      :required
+      :class="['input-textarea-core', elementClasses, { dirty: isDirty }, { active: isActive }]"
+      :aria-invalid="fieldHasError"
+      :aria-describedby
+      @focusin="updateFocus(true)"
+      @focusout="updateFocus(false)"
+    ></textarea>
+
+    <span v-if="slots.right" class="slot right-slot">
+      <slot name="right"></slot>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms";
+
+interface Props {
+  maxlength?: number;
+  id: string;
+  name: string;
+  placeholder?: string;
+  ariaDescribedby?: string;
+  fieldHasError?: boolean;
+  required?: boolean;
+  styleClassPassthrough?: string | string[];
+  theme?: FormUiTheme;
+  inputVariant?: InputUiVariant;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxlength: 255,
+  placeholder: "",
+  ariaDescribedby: "",
+  fieldHasError: false,
+  required: false,
+  styleClassPassthrough: () => [],
+  theme: "default",
+  inputVariant: "normal",
+});
+
+const slots = useSlots();
+
+const FormUiTheme = computed(() => {
+  return props.fieldHasError ? "error" : props.theme;
+});
+
+const modelValue = defineModel<string | number | readonly string[] | null | undefined>();
+const isDirty = defineModel<boolean>("isDirty");
+const isActive = defineModel<boolean>("isActive");
+
+const updateFocus = (isFocused: boolean) => {
+  isActive.value = isFocused;
+};
+
+const inputField = ref<HTMLInputElement | null>(null);
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+@layer components {
+.input-textarea-wrapper {
+  background-color: var(--theme-input-surface);
+  padding-inline: var(--element-decorator-padding-inline);
+  transition: all var(--theme-form-transition-duration) ease-in-out;
+
+  z-index: 2;
+  position: relative;
+
+  &.normal {
+    border: var(--form-element-border-width) solid var(--theme-input-border);
+    border-radius: var(--form-input-border-radius);
+    outline: var(--form-element-outline-width) solid var(--theme-input-outline);
+
+    &:has(textarea:focus-visible) {
+      outline: var(--form-element-outline-width-focus) solid var(--theme-input-outline-focus);
+      outline-offset: var(--form-element-outline-offset-focus);
+    }
+
+    &:has(textarea:is(:hover)) {
+      outline: var(--form-element-outline-width-focus) solid var(--theme-input-outline-focus);
+      outline-offset: var(--form-element-outline-offset-focus);
+    }
+  }
+
+  &.underlined {
+    border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--theme-input-border);
+  }
+
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  .slot {
+    display: flex;
+    place-items: center;
+    background-clip: padding-box;
+  }
+
+  .input-textarea-core {
+    all: unset;
+    touch-action: manipulation;
+    flex-grow: 1;
+    field-sizing: content;
+
+    color: var(--theme-input-text-color-normal);
+    font-family: var(--font-family);
+    font-size: var(--input-font-size);
+    line-height: var(--input-textarea-line-height);
+    padding-block: var(--form-textarea-padding-block);
+    padding-inline: var(--form-textarea-padding-inline);
+
+    min-height: 6lh;
+
+    &::placeholder {
+      color: var(--theme-input-placeholder);
+      font-size: var(--input-placeholder-font-size);
+      font-style: var(--input-placeholder-font-style);
+      line-height: var(--input-placeholder-line-height);
+      font-weight: var(--input-placeholder-font-weight);
+    }
+  }
+}
+}
+</style>

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

@@ -0,0 +1,247 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import StorybookComponent from "../InputTextareaCore.vue";
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
+
+interface InputTextareaCoreStoryArgs {
+  modelValue: string;
+  maxlength: number;
+  id: string;
+  name: string;
+  placeholder: string;
+  ariaDescribedby: string;
+  fieldHasError: boolean;
+  required: boolean;
+  theme: FormUiTheme;
+  InputUiVariant: InputUiVariant;
+  styleClassPassthrough: string[];
+  leftSlotContent: string;
+  rightSlotContent: string;
+  useLeftSlot: boolean;
+  useRightSlot: boolean;
+}
+
+export default {
+  title: "Components/Forms/Input Textarea/InputTextareaCore",
+  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",
+      },
+    },
+    id: {
+      control: "text",
+      description: "Element ID",
+      table: {
+        category: "Basic",
+      },
+    },
+    name: {
+      control: "text",
+      description: "Textarea name attribute",
+      table: {
+        category: "Basic",
+      },
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text",
+      table: {
+        category: "Basic",
+      },
+    },
+    ariaDescribedby: {
+      control: "text",
+      description: "ARIA describedby attribute",
+      table: {
+        category: "Accessibility",
+      },
+    },
+
+    // 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
+    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,
+    id: "example-textarea",
+    name: "example-textarea",
+    placeholder: "Enter your message...",
+    ariaDescribedby: "",
+    fieldHasError: false,
+    required: false,
+    theme: "default",
+    inputVariant: "normal",
+    styleClassPassthrough: [],
+    useLeftSlot: false,
+    useRightSlot: false,
+    leftSlotContent: "📝",
+    rightSlotContent: "✨",
+  },
+} as Meta<typeof StorybookComponent>;
+
+const Template: StoryFn<InputTextareaCoreStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const { modelValue, ...otherArgs } = args;
+    const textareaValue = ref(modelValue);
+
+    return {
+      textareaValue,
+      args: otherArgs,
+      leftSlotContent: args.leftSlotContent,
+      rightSlotContent: args.rightSlotContent,
+      useLeftSlot: args.useLeftSlot,
+      useRightSlot: args.useRightSlot,
+    };
+  },
+  template: `
+    <StorybookComponent
+      v-model="textareaValue"
+      v-bind="args"
+    >
+      <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 }}
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const WithPlaceholder = Template.bind({});
+WithPlaceholder.args = {
+  placeholder: "Type your thoughts here...",
+};
+
+export const LongText = Template.bind({});
+LongText.args = {
+  modelValue:
+    "This is a longer piece of text that demonstrates how the textarea handles multiple lines and wrapping. You can continue typing and see how it behaves with more content.",
+  placeholder: "Enter a long message...",
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  required: true,
+  placeholder: "This field is required",
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  fieldHasError: true,
+  theme: "error",
+  modelValue: "Invalid content",
+  placeholder: "Enter valid content",
+};
+
+export const WithSlots = Template.bind({});
+WithSlots.args = {
+  useLeftSlot: true,
+  useRightSlot: true,
+  leftSlotContent: "📝",
+  rightSlotContent: "✨",
+  placeholder: "Textarea with decorative slots",
+};
+
+export const Outlined = Template.bind({});
+Outlined.args = {
+  InputUiVariant: "outlined",
+  placeholder: "Outlined textarea",
+};
+
+export const Underlined = Template.bind({});
+Underlined.args = {
+  InputUiVariant: "underlined",
+  placeholder: "Underlined textarea",
+};
+
+export const CharacterLimit = Template.bind({});
+CharacterLimit.args = {
+  maxlength: 140,
+  placeholder: "Tweet-length message (140 chars max)",
+  modelValue: "This is a sample message to show character counting.",
+};