srcdev-nuxt-components 8.0.3 → 9.0.1

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

@@ -0,0 +1,293 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import StorybookComponent from "../variants/InputTextWithLabel.vue";
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
+
+interface InputTextWithLabelStoryArgs {
+  modelValue: string;
+  type: "text" | "email" | "password" | "tel" | "url" | "search";
+  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;
+}
+
+export default {
+  title: "Components/Forms/Input Text/InputTextWithLabel",
+  component: StorybookComponent,
+  argTypes: {
+    // Model
+    modelValue: {
+      control: "text",
+      description: "The input value",
+      table: {
+        category: "Model",
+      },
+    },
+
+    // Basic Configuration
+    type: {
+      control: { type: "select" },
+      options: ["text", "email", "password", "tel", "url", "search"],
+      description: "Input type",
+      table: {
+        category: "Basic",
+      },
+    },
+    maxlength: {
+      control: { type: "number", min: 1, max: 1000 },
+      description: "Maximum length of input",
+      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",
+      },
+    },
+  },
+  args: {
+    modelValue: "",
+    type: "text",
+    maxlength: 255,
+    name: "example-input",
+    placeholder: "Enter your text...",
+    label: "Text Input",
+    errorMessage: "",
+    fieldHasError: false,
+    required: false,
+    theme: "default",
+    inputVariant: "normal",
+    styleClassPassthrough: [],
+    useDescriptionSlot: false,
+    useDescriptionHtmlSlot: false,
+    descriptionContent: "This is a helpful description",
+    descriptionHtmlContent: "<strong>Bold</strong> HTML description",
+  },
+} as Meta<typeof StorybookComponent>;
+
+const Template: StoryFn<InputTextWithLabelStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const { modelValue, ...otherArgs } = args;
+    const inputValue = ref(modelValue);
+
+    return {
+      inputValue,
+      args: otherArgs,
+      descriptionContent: args.descriptionContent,
+      descriptionHtmlContent: args.descriptionHtmlContent,
+      useDescriptionSlot: args.useDescriptionSlot,
+      useDescriptionHtmlSlot: args.useDescriptionHtmlSlot,
+    };
+  },
+  template: `
+    <StorybookComponent
+      v-model="inputValue"
+      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: {{ inputValue }}
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const WithDescription = Template.bind({});
+WithDescription.args = {
+  useDescriptionSlot: true,
+  label: "Email Address",
+  placeholder: "Enter your email address",
+  type: "email",
+};
+
+export const WithHtmlDescription = Template.bind({});
+WithHtmlDescription.args = {
+  useDescriptionHtmlSlot: true,
+  label: "Password",
+  placeholder: "Enter a strong password",
+  type: "password",
+  descriptionHtmlContent:
+    "Password must contain at least <strong>8 characters</strong> and include <em>uppercase</em>, <em>lowercase</em>, and <em>numbers</em>",
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  required: true,
+  label: "Full Name",
+  placeholder: "Enter your full name",
+  useDescriptionSlot: true,
+  descriptionContent: "This field is required",
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  fieldHasError: true,
+  errorMessage: "Please enter a valid email address",
+  theme: "error",
+  label: "Email Address",
+  placeholder: "Enter your email",
+  type: "email",
+  modelValue: "invalid-email",
+};
+
+export const Outlined = Template.bind({});
+Outlined.args = {
+  inputVariant: "outlined",
+  label: "Phone Number",
+  placeholder: "Enter your phone number",
+  type: "tel",
+};
+
+export const Underlined = Template.bind({});
+Underlined.args = {
+  inputVariant: "underlined",
+  label: "Website URL",
+  placeholder: "https://example.com",
+  type: "url",
+};
+
+export const AllThemes = Template.bind({});
+AllThemes.storyName = "All Themes";
+AllThemes.args = {};
+AllThemes.render = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const themes: FormUiTheme[] = ["default", "success", "error", "warning"];
+    const inputValues = reactive(
+      themes.reduce(
+        (acc, theme) => ({
+          ...acc,
+          [theme]: "",
+        }),
+        {} as Record<string, string>
+      )
+    );
+
+    return {
+      themes,
+      inputValues,
+      args,
+    };
+  },
+  template: `
+    <div class="space-y-6">
+      <div v-for="theme in themes" :key="theme" class="space-y-2">
+        <h3 class="text-lg font-semibold capitalize">{{ theme }} Theme</h3>
+        <StorybookComponent
+          v-model="inputValues[theme]"
+          v-bind="{ ...args, theme, label: theme + ' Input', name: theme + '-input' }"
+        />
+      </div>
+    </div>
+  `,
+});

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

@@ -0,0 +1,86 @@
+<template>
+  <InputTextWithLabel
+    v-model="modelValue"
+    :type="inputType"
+    :maxlength
+    :name
+    :placeholder
+    :label
+    :error-message
+    :field-has-error
+    :required
+    :style-class-passthrough
+    :theme
+    :input-variant
+  >
+    <template #descriptionHtml>
+      <slot name="descriptionHtml"></slot>
+    </template>
+    <template #descriptionText>
+      <slot name="descriptionText"></slot>
+    </template>
+
+    <template #right>
+      <InputButtonCore
+        type="button"
+        :is-pending="false"
+        :button-text
+        :theme="theme"
+        variant="inline"
+        @click.stop.prevent="toggleDisplayPassword"
+      >
+        <template #iconOnly>
+          <Icon v-if="displayPassword" name="radix-icons:eye-none" class="icon" />
+          <Icon v-else name="radix-icons:eye-open" class="icon" />
+        </template>
+      </InputButtonCore>
+    </template>
+  </InputTextWithLabel>
+</template>
+
+<script setup lang="ts">
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms";
+
+interface Props {
+  type?: "text" | "password";
+  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>(), {
+  type: "password",
+  maxlength: 255,
+  placeholder: "",
+  fieldHasError: false,
+  required: false,
+  styleClassPassthrough: () => [],
+  theme: "default",
+  inputVariant: "normal",
+});
+
+const modelValue = defineModel<string>();
+
+const { updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const inputType = computed<"text" | "password">(() => {
+  return displayPassword.value ? "text" : "password";
+});
+
+const displayPassword = ref(false);
+const buttonText = computed(() => {
+  return displayPassword.value ? "Hide password" : "Show password";
+});
+const toggleDisplayPassword = () => {
+  displayPassword.value = !displayPassword.value;
+};
+
+updateElementClasses(["has-right-button"]);
+</script>

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

@@ -0,0 +1,203 @@
+<template>
+  <div
+    class="input-text-with-label"
+    :data-theme="theme"
+    :data-invalid="fieldHasError ? '' : null"
+    :class="[inputVariant, elementClasses, { dirty: isDirty }, { active: isActive }]"
+  >
+    <InputLabel
+      :id
+      :for="id"
+      :theme
+      :name
+      :input-variant
+      :field-has-error
+      :style-class-passthrough="['input-text-label', 'body-normal-bold']"
+    >
+      <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="internalStringValue"
+      v-model:is-dirty="isDirty"
+      v-model:is-active="isActive"
+      type="text"
+      :maxlength
+      :name
+      :placeholder
+      :label
+      :error-message
+      :field-has-error
+      :required
+      :style-class-passthrough
+      :theme
+      inputmode="numeric"
+      :aria-describedby
+      :input-variant
+    >
+      <template v-if="slots.left" #left>
+        <InputButtonCore
+          type="button"
+          :readonly="(modelValue ?? 0) <= min"
+          :is-pending="false"
+          button-text="Step down"
+          theme="default"
+          variant="inline"
+          @click.stop.prevent="updateValue(-step, (modelValue ?? 0) > min)"
+        >
+          <template #iconOnly>
+            <slot name="left"></slot>
+          </template>
+        </InputButtonCore>
+      </template>
+      <template v-if="slots.right" #right>
+        <InputButtonCore
+          type="button"
+          :readonly="(modelValue ?? 0) >= max"
+          :is-pending="false"
+          button-text="Step up"
+          theme="default"
+          variant="inline"
+          @click.stop.prevent="updateValue(step, (modelValue ?? 0) < max)"
+        >
+          <template #iconOnly>
+            <slot name="right"></slot>
+          </template>
+        </InputButtonCore>
+      </template>
+    </InputTextCore>
+    <InputError :id="errorId" :error-message :show-error="fieldHasError" :is-detached="true" />
+  </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;
+  min: number;
+  max: number;
+  step?: number;
+  inputVariant?: InputUiVariant;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxlength: 255,
+  placeholder: "",
+  fieldHasError: false,
+  required: false,
+  styleClassPassthrough: () => [],
+  theme: "default",
+  step: 1,
+  inputVariant: "normal",
+});
+
+const slots = useSlots();
+
+const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
+  props.name,
+  toRef(props, "fieldHasError"),
+  slots
+);
+
+const modelValue = defineModel<number>();
+const isActive = ref<boolean>(false);
+const isDirty = ref<boolean>(false);
+
+// Convert between string (for input) and number (for modelValue)
+const internalStringValue = computed({
+  get: () => modelValue.value?.toString() ?? "",
+  set: (value: string) => {
+    const numericValue = value === "" ? undefined : Number(value);
+    // Only update if it's a valid number or empty string
+    if (value === "" || !isNaN(numericValue as number)) {
+      modelValue.value = numericValue;
+    }
+  },
+});
+
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const minLength = computed(() => `${props.max.toString().length + 1}em`);
+
+const updateValue = (step: number, withinRangeLimit: boolean) => {
+  if (withinRangeLimit) {
+    const currentValue = modelValue.value ?? 0;
+    modelValue.value = currentValue + step;
+  }
+};
+
+updateElementClasses(["input-text-as-number", "has-left-button", "has-right-button"]);
+</script>
+
+<style lang="css">
+@layer components {
+.input-text-as-number {
+  .input-text-wrapper {
+    width: fit-content;
+    padding-inline: 0;
+
+    &:has(.input-text-as-number) {
+      .slot {
+        margin-inline: 0;
+
+        .input-button-core {
+          background-color: var(--theme-input-surface);
+
+          &:hover {
+            background-color: var(--theme-input-surface-hover);
+          }
+
+          &.icon-only {
+            .btn-icon {
+              margin: 0;
+            }
+          }
+        }
+
+        &.left-slot {
+          .input-button-core {
+            border-right: var(--form-element-border-width) solid var(--theme-input-border);
+          }
+        }
+
+        &.right-slot {
+          .input-button-core {
+            border-left: var(--form-element-border-width) solid var(--theme-input-border);
+          }
+        }
+      }
+    }
+
+    .input-text-core.input-text-as-number {
+      flex-grow: initial;
+      text-align: center;
+      width: v-bind(minLength);
+    }
+  }
+}
+}
+</style>