srcdev-nuxt-components 9.6.8 → 9.6.10

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

@@ -1,154 +0,0 @@
-<template>
-  <div>
-    <div
-      class="input-text-with-label"
-      :data-theme="theme"
-      :data-invalid="fieldHasError ? '' : null"
-      :class="[elementClasses, inputVariant, { dirty: isDirty }, { active: isActive }]"
-    >
-      <InputLabel
-        :id
-        :required
-        :input-variant
-        :field-has-error
-        :style-class-passthrough="['input-text-label']"
-      >
-        <template #textLabel>{{ label }}</template>
-      </InputLabel>
-
-      <InputDescription
-        v-if="inputVariant !== 'outlined'"
-        :description-id
-        :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>
-
-      <InputTextCore
-        :id
-        v-model="modelValue"
-        v-model:is-dirty="isDirty"
-        v-model:is-active="isActive"
-        :type
-        :inputmode
-        :maxlength
-        :min
-        :max
-        :name
-        :placeholder
-        :label
-        :error-message
-        :field-has-error
-        :required
-        :style-class-passthrough
-        :theme
-        :aria-describedby="ariaDescribedby()"
-        :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'"
-      :description-id
-      :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;
-  /** Passed straight through to the native input — meaningful for type="date"/"number" etc. */
-  min?: string | number;
-  /** Passed straight through to the native input — meaningful for type="date"/"number" etc. */
-  max?: string | 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,
-  min: undefined,
-  max: undefined,
-  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>({ required: true });
-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/05.forms/input-text/stories/InputPasswordWithLabel.stories.ts

@@ -1,368 +0,0 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { computed } from "vue";
-import StorybookComponent from "../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;
-  inputVariant: InputUiVariant;
-  styleClassPassthrough: string[];
-  useDescriptionSlot: boolean;
-  useDescriptionHtmlSlot: boolean;
-  descriptionContent: string;
-  descriptionHtmlContent: string;
-  showPasswordText: string;
-  hidePasswordText: 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",
-      },
-    },
-    inputVariant: {
-      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",
-      },
-    },
-
-    // Localisation
-    showPasswordText: {
-      control: "text",
-      description: "Accessible name for the toggle button while the password is hidden",
-      table: {
-        category: "Localisation",
-      },
-    },
-    hidePasswordText: {
-      control: "text",
-      description: "Accessible name for the toggle button while the password is visible",
-      table: {
-        category: "Localisation",
-      },
-    },
-  },
-  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>",
-    showPasswordText: "Show password",
-    hidePasswordText: "Hide password",
-  },
-} as Meta<typeof StorybookComponent>;
-
-// `args` is Storybook's own reactive object — bind to it directly (`args.x`) rather than
-// destructuring it into local variables/refs, which would snapshot the values once at setup()
-// and stop reflecting later Controls-panel changes. `componentArgs` strips the non-prop
-// slot-toggle args so they don't leak onto the component as unknown attributes.
-const Template: StoryFn<InputPasswordWithLabelStoryArgs> = (args) => ({
-  components: { StorybookComponent },
-  setup() {
-    const componentArgs = computed(() => {
-      const { useDescriptionSlot, useDescriptionHtmlSlot, descriptionContent, descriptionHtmlContent, ...rest } = args;
-      return rest;
-    });
-
-    return { args, componentArgs };
-  },
-  template: `
-    <StorybookComponent
-      v-model="args.modelValue"
-      v-bind="componentArgs"
-    >
-      <template v-if="args.useDescriptionSlot" #description>{{ args.descriptionContent }}</template>
-      <template v-if="args.useDescriptionHtmlSlot" #descriptionHtml v-html="args.descriptionHtmlContent"></template>
-    </StorybookComponent>
-    <div class="mt-4 text-sm text-gray-600">
-      Current value: {{ args.modelValue ? '•'.repeat(args.modelValue.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 = {
-  inputVariant: "outlined",
-  label: "Confirm Password",
-  placeholder: "Confirm your password",
-};
-
-export const Underlined = Template.bind({});
-Underlined.args = {
-  inputVariant: "underlined",
-  label: "Master Password",
-  placeholder: "Enter master password",
-};
-
-export const LocalisedToggleText = Template.bind({});
-LocalisedToggleText.storyName = "Localised Toggle Text";
-LocalisedToggleText.args = {
-  label: "Mot de passe",
-  placeholder: "Saisissez votre mot de passe",
-  showPasswordText: "Afficher le mot de passe",
-  hidePasswordText: "Masquer le mot de passe",
-};
-
-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, inputVariant: 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>
-  `,
-});