srcdev-nuxt-components 8.0.3 → 9.0.0

package/app/components/forms/input-select/variants/InputSelectWithLabel.vue

@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <div
+      class="input-select-with-label"
+      :class="[inputVariant, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }]"
+      :data-testid
+      :data-theme="theme"
+      :data-invalid="fieldHasError ? '' : null"
+    >
+      <InputLabel
+        :id
+        :for="id"
+        :theme
+        :name
+        :input-variant
+        :field-has-error
+        :style-class-passthrough="['input-select-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>
+
+      <InputSelectCore
+        :id
+        v-model="modelValue"
+        v-model:field-data="fieldData"
+        v-model:is-dirty="isDirty"
+        v-model:is-active="isActive"
+        :name
+        :placeholder
+        :field-has-error
+        :required
+        :style-class-passthrough
+        :theme="FormUiTheme"
+        :aria-describedby
+        :input-variant
+      />
+
+      <InputError
+        :id="errorId"
+        :error-message="errorMessage"
+        :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, IFormMultipleOptions } from "~/types/forms/types.forms";
+
+interface Props {
+  dataTestid?: string;
+  name: string;
+  label: string;
+  placeholder?: string;
+  errorMessage: object | string;
+  required?: boolean;
+  fieldHasError?: boolean;
+  styleClassPassthrough?: string | string[];
+  theme?: FormUiTheme;
+  inputVariant?: InputUiVariant;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dataTestid: "input-select-with-label",
+  placeholder: "",
+  required: false,
+  fieldHasError: 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 | number | readonly number[]>({ required: true });
+const isDirty = defineModel<boolean>("isDirty");
+const isActive = defineModel<boolean>("isActive");
+const fieldData = defineModel<IFormMultipleOptions>("fieldData");
+</script>

package/app/components/forms/input-text/InputTextCore.vue

@@ -0,0 +1,222 @@
+<template>
+  <div
+    class="input-text-wrapper"
+    data-testid="input-text-wrapper"
+    :data-theme="theme"
+    :data-invalid="fieldHasError ? '' : null"
+    :data-inputmode="inputmode"
+    :class="[
+      inputVariant,
+      { dirty: isDirty },
+      { active: isActive },
+      { error: fieldHasError },
+      { 'has-left-slot': slots.left },
+      { 'has-right-slot': slots.right },
+    ]"
+  >
+    <div v-if="slots.left" class="slot left-slot">
+      <slot name="left"></slot>
+    </div>
+
+    <input
+      :id
+      ref="inputField"
+      v-model="modelValue"
+      :type
+      :placeholder
+      :name
+      :required
+      :maxlength
+      :class="['input-text-core', elementClasses, { dirty: isDirty }, { active: isActive }]"
+      :aria-invalid="fieldHasError ? 'true' : undefined"
+      :aria-describedby
+      :pattern="inputPattern"
+      :inputmode
+      @focusin="updateFocus(true)"
+      @focusout="updateFocus(false)"
+    />
+
+    <div v-if="slots.right" class="slot right-slot">
+      <slot name="right"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { InputTypesText, FormUiTheme, InputUiVariant, InputMode } from "~/types/forms/types.forms";
+
+interface Props {
+  type?: InputTypesText;
+  inputmode?: InputMode;
+  maxlength?: number;
+  id: string;
+  name: string;
+  required?: boolean;
+  placeholder?: string;
+  fieldHasError?: boolean;
+  styleClassPassthrough?: string | string[];
+  theme?: FormUiTheme;
+  ariaDescribedby?: string;
+  inputVariant?: InputUiVariant;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "text",
+  inputmode: "text",
+  maxlength: 255,
+  required: false,
+  placeholder: "",
+  fieldHasError: false,
+  styleClassPassthrough: () => [],
+  theme: "default",
+  ariaDescribedby: "",
+  inputVariant: "normal",
+});
+
+const slots = useSlots();
+
+const FormUiTheme = computed(() => {
+  return props.fieldHasError ? "error" : props.theme;
+});
+
+const modelValue = defineModel<string>();
+const isDirty = defineModel<boolean>("isDirty");
+const isActive = defineModel<boolean>("isActive");
+
+const inputPattern = computed(() => {
+  return props.inputmode === "numeric" ? "[0-9]+" : undefined;
+});
+
+const updateFocus = (isFocused: boolean) => {
+  isActive.value = isFocused;
+};
+
+const inputField = ref<HTMLInputElement | null>(null);
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+// TODO: Move this to a utility function to allow removeEventListener on unmounted
+// Leaving like this could lead to memory leaks
+const validateInput = () => {
+  if (inputField.value !== null) {
+    inputField.value.addEventListener("beforeinput", (event: InputEvent) => {
+      const beforeValue = modelValue.value;
+      if (event.data === null) {
+        // Handle deletion case
+        return;
+      } else if (event.target) {
+        event.target.addEventListener(
+          "input",
+          () => {
+            if (inputField.value !== null && inputField.value.validity.patternMismatch) {
+              inputField.value.value = beforeValue as string;
+            }
+          },
+          { once: true }
+        );
+      }
+    });
+  }
+};
+
+onMounted(() => {
+  if (props.inputmode === "numeric") validateInput();
+});
+</script>
+
+<style lang="css">
+@layer components {
+.input-text-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--input-icon-slot-gap);
+  background-color: var(--theme-input-surface);
+  overflow: hidden;
+  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);
+
+    padding-inline: var(--input-padding-inline);
+
+    &:has(input:is(:hover)) {
+      outline: var(--form-element-outline-width-focus) solid var(--theme-input-outline-focus);
+      outline-offset: var(--form-element-outline-offset-focus);
+    }
+
+    &:has(input:focus-visible) {
+      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);
+    padding-inline: var(--input-padding-inline);
+  }
+
+  &.has-right-slot:has(.input-button-core) {
+    padding-inline-end: 0;
+  }
+
+  .slot {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: content-box;
+
+    .input-button-core {
+      background-color: var(--theme-input-surface);
+      aspect-ratio: 1;
+      border-radius: 0;
+      width: var(--input-min-height);
+
+      &:hover {
+        background-color: var(--theme-input-surface-hover);
+      }
+
+      &:is(:focus-visible) {
+        outline: var(--form-element-outline-width-focus) solid var(--theme-input-outline-focus);
+        outline-offset: -4px;
+      }
+
+      &.icon-only {
+        .btn-icon {
+          margin: 0;
+        }
+      }
+    }
+  }
+
+  .input-text-core {
+    all: unset;
+    touch-action: manipulation;
+    flex-grow: 1;
+
+    color: var(--theme-input-text-color-normal);
+    font-family: var(--font-family);
+    font-size: var(--input-font-size);
+
+    /* line-height: var(--input-element-line-height); */
+
+    padding-block: var(--input-padding-block);
+    padding-inline: var(--input-padding-inline);
+    /* height: stretch; */
+    min-height: var(--input-min-height);
+
+    &::placeholder {
+      color: var(--theme-input-placeholder);
+      font-size: var(--theme-input-placeholder-font-size);
+      font-style: italic;
+      line-height: 1;
+      font-weight: normal;
+    }
+  }
+}
+}
+</style>

package/app/components/forms/input-text/stories/InputPasswordWithLabel.stories.ts

@@ -0,0 +1,339 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import StorybookComponent from "../variants/InputPasswordWithLabel.vue";
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
+
+interface InputPasswordWithLabelStoryArgs {
+  modelValue: string;
+  maxlength: number;
+  name: string;
+  placeholder: string;
+  label: string;
+  errorMessage: string;
+  fieldHasError: boolean;
+  required: boolean;
+  theme: FormUiTheme;
+  InputUiVariant: InputUiVariant;
+  styleClassPassthrough: string[];
+  useDescriptionSlot: boolean;
+  useDescriptionHtmlSlot: boolean;
+  descriptionContent: string;
+  descriptionHtmlContent: string;
+}
+
+export default {
+  title: "Components/Forms/Input Text/InputPasswordWithLabel",
+  component: StorybookComponent,
+  argTypes: {
+    // Model
+    modelValue: {
+      control: "text",
+      description: "The password value",
+      table: {
+        category: "Model",
+      },
+    },
+
+    // Basic Configuration
+    maxlength: {
+      control: { type: "number", min: 1, max: 1000 },
+      description: "Maximum length of password",
+      table: {
+        category: "Basic",
+      },
+    },
+    name: {
+      control: "text",
+      description: "Input name attribute",
+      table: {
+        category: "Basic",
+      },
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text",
+      table: {
+        category: "Basic",
+      },
+    },
+    label: {
+      control: "text",
+      description: "Input 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: "Input variant style",
+      table: {
+        category: "Styling",
+      },
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional CSS classes",
+      table: {
+        category: "Styling",
+      },
+    },
+
+    // Slots
+    useDescriptionSlot: {
+      control: "boolean",
+      description: "Use description slot",
+      table: {
+        category: "Slots",
+      },
+    },
+    useDescriptionHtmlSlot: {
+      control: "boolean",
+      description: "Use description HTML slot",
+      table: {
+        category: "Slots",
+      },
+    },
+    descriptionContent: {
+      control: "text",
+      description: "Content for description slot",
+      table: {
+        category: "Slots",
+      },
+    },
+    descriptionHtmlContent: {
+      control: "text",
+      description: "HTML content for description slot",
+      table: {
+        category: "Slots",
+      },
+    },
+  },
+  args: {
+    modelValue: "",
+    maxlength: 255,
+    name: "password-input",
+    placeholder: "Enter your password...",
+    label: "Password",
+    errorMessage: "",
+    fieldHasError: false,
+    required: false,
+    theme: "default",
+    inputVariant: "normal",
+    styleClassPassthrough: [],
+    useDescriptionSlot: false,
+    useDescriptionHtmlSlot: false,
+    descriptionContent: "Password should be at least 8 characters long",
+    descriptionHtmlContent:
+      "Password must contain: <strong>8+ characters</strong>, <em>uppercase</em>, <em>lowercase</em>, <em>numbers</em>",
+  },
+} as Meta<typeof StorybookComponent>;
+
+const Template: StoryFn<InputPasswordWithLabelStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const { modelValue, ...otherArgs } = args;
+    const passwordValue = ref(modelValue);
+
+    return {
+      passwordValue,
+      args: otherArgs,
+      descriptionContent: args.descriptionContent,
+      descriptionHtmlContent: args.descriptionHtmlContent,
+      useDescriptionSlot: args.useDescriptionSlot,
+      useDescriptionHtmlSlot: args.useDescriptionHtmlSlot,
+    };
+  },
+  template: `
+    <StorybookComponent
+      v-model="passwordValue"
+      v-bind="args"
+    >
+      <template v-if="useDescriptionSlot" #description>{{ descriptionContent }}</template>
+      <template v-if="useDescriptionHtmlSlot" #descriptionHtml v-html="descriptionHtmlContent"></template>
+    </StorybookComponent>
+    <div class="mt-4 text-sm text-gray-600">
+      Current value: {{ passwordValue ? '•'.repeat(passwordValue.length) : 'Empty' }}
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const WithDescription = Template.bind({});
+WithDescription.args = {
+  useDescriptionSlot: true,
+  label: "Account Password",
+  placeholder: "Create a secure password",
+};
+
+export const WithHtmlDescription = Template.bind({});
+WithHtmlDescription.args = {
+  useDescriptionHtmlSlot: true,
+  label: "New Password",
+  placeholder: "Enter new password",
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  required: true,
+  label: "Login Password",
+  placeholder: "Enter your password",
+  useDescriptionSlot: true,
+  descriptionContent: "This field is required for login",
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  fieldHasError: true,
+  errorMessage: "Password must be at least 8 characters long",
+  theme: "error",
+  label: "Password",
+  placeholder: "Enter password",
+  modelValue: "123", // Short password to show error
+};
+
+export const PasswordTooShort = Template.bind({});
+PasswordTooShort.args = {
+  fieldHasError: true,
+  errorMessage: "Password is too weak",
+  theme: "error",
+  label: "Strong Password",
+  placeholder: "Enter a strong password",
+  modelValue: "weak",
+  useDescriptionHtmlSlot: true,
+};
+
+export const Outlined = Template.bind({});
+Outlined.args = {
+  InputUiVariant: "outlined",
+  label: "Confirm Password",
+  placeholder: "Confirm your password",
+};
+
+export const Underlined = Template.bind({});
+Underlined.args = {
+  InputUiVariant: "underlined",
+  label: "Master Password",
+  placeholder: "Enter master password",
+};
+
+export const AllVariants = Template.bind({});
+AllVariants.storyName = "All Input Variants";
+AllVariants.render = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const variants: InputUiVariant[] = ["normal", "outlined", "underlined"];
+    const passwordValues = reactive(
+      variants.reduce(
+        (acc, variant) => ({
+          ...acc,
+          [variant]: "",
+        }),
+        {} as Record<string, string>
+      )
+    );
+
+    return {
+      variants,
+      passwordValues,
+      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="passwordValues[variant]"
+          v-bind="{ ...args, InputUiVariant: variant, label: variant + ' Password', name: variant + '-password' }"
+        />
+      </div>
+    </div>
+  `,
+});
+
+export const SecurityFeatures = Template.bind({});
+SecurityFeatures.storyName = "Password Security Demo";
+SecurityFeatures.render = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const passwords = reactive({
+      weak: "123",
+      medium: "password123",
+      strong: "MyStr0ng!Pass",
+    });
+
+    const getStrengthColor = (password: string) => {
+      if (password.length < 6) return "error";
+      if (password.length < 10) return "warning";
+      return "success";
+    };
+
+    return {
+      passwords,
+      getStrengthColor,
+      args,
+    };
+  },
+  template: `
+    <div class="space-y-6">
+      <div class="space-y-2">
+        <h3 class="text-lg font-semibold">Weak Password (Error State)</h3>
+        <StorybookComponent
+          v-model="passwords.weak"
+          v-bind="{ ...args, theme: getStrengthColor(passwords.weak), fieldHasError: passwords.weak.length < 6, errorMessage: 'Password too short', label: 'Weak Password', name: 'weak-password' }"
+        />
+      </div>
+
+      <div class="space-y-2">
+        <h3 class="text-lg font-semibold">Medium Password (Warning State)</h3>
+        <StorybookComponent
+          v-model="passwords.medium"
+          v-bind="{ ...args, theme: getStrengthColor(passwords.medium), label: 'Medium Password', name: 'medium-password' }"
+        />
+      </div>
+
+      <div class="space-y-2">
+        <h3 class="text-lg font-semibold">Strong Password (Success State)</h3>
+        <StorybookComponent
+          v-model="passwords.strong"
+          v-bind="{ ...args, theme: getStrengthColor(passwords.strong), label: 'Strong Password', name: 'strong-password' }"
+        />
+      </div>
+    </div>
+  `,
+});