edvoyui-component-library-test-flight 0.0.170 → 0.0.173

package/src/components/datepicker/EUIDatepicker.stories.ts

@@ -0,0 +1,492 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUIDatepicker from "./EUIDatepicker.vue";
+import { ref } from "vue";
+import { CalendarDaysIcon } from "@heroicons/vue/24/outline";
+
+// Meta configuration for the component's stories
+const meta = {
+  title: "Forms/Datepicker",
+  component: EUIDatepicker,
+  tags: ["autodocs"],
+  argTypes: {
+    modelValue: {
+      control: "date",
+      description: "The selected date value of the datepicker.",
+    },
+    name: {
+      control: "text",
+      description:
+        "Name for the Validation of Datepicker field, used for identification.",
+    },
+    label: {
+      control: "text",
+      description:
+        "Label for the datepicker field that is displayed above the input.",
+    },
+    placeholder: {
+      control: "text",
+      description:
+        "Placeholder text shown inside the datepicker input when no date is selected.",
+    },
+    errors: {
+      control: "object",
+      description:
+        "Object containing validation errors. The keys are field names, and the values are the corresponding error messages.",
+    },
+    range: {
+      control: "boolean",
+      description:
+        "Enables date range selection, allowing users to pick a start and end date.",
+      defaultValue: false,
+    },
+    multiCalendars: {
+      control: "boolean",
+      description: "Enables date range selection across multiple calendars.",
+      defaultValue: false,
+      table: {
+        type: { summary: "boolean" }, // Specifies the type in the docs table
+        defaultValue: { summary: "false" }, // Default value displayed in the table
+      },
+    },
+    timePicker: {
+      control: "boolean",
+      description: "Allows time selection in addition to the date if true.",
+    },
+    maxDate: {
+      control: "date",
+      description:
+        "The maximum selectable date. ex: const maxDate = ref(new Date())",
+      table: {
+        type: { summary: "Date" },
+        defaultValue: { summary: '""' },
+      },
+    },
+    minDate: {
+      control: "date",
+      description:
+        "The minimum selectable date. ex: const minDate = ref(new Date(2024, 11))",
+      table: {
+        type: { summary: "Date" },
+        defaultValue: { summary: '""' },
+      },
+    },
+    required: {
+      control: "boolean",
+      description: "Marks the datepicker as a required field.",
+    },
+    readonly: {
+      control: "boolean",
+      description: "Makes the datepicker read-only, preventing date selection.",
+    },
+    disabled: {
+      control: "boolean",
+      description:
+        "Disables the datepicker, making it uneditable and unclickable.",
+    },
+    iconType: {
+      control: "select",
+      options: ["", "startIcon", "endIcon"],
+      description:
+        "The position of the icon to be displayed either at the start or end of the input field.",
+    },
+    icon: {
+      control: { type: "text" },
+      description: "Sets an SVG icon inside the datepicker input field.",
+    },
+    isUtc: {
+      control: "boolean",
+      description:
+        "Sets the selected date in UTC format if true, otherwise in local time.",
+    },
+    clearIcon: {
+      control: "boolean",
+      description:
+        "Shows a clear icon inside the datepicker to reset the date.",
+    },
+    disableDate: {
+      control: "boolean",
+      description:
+        "Disables past dates if true, preventing them from being selected.",
+    },
+    quarter: {
+      control: "boolean",
+      description: "Enables quarter selection instead of date selection.",
+    },
+    formatDate: {
+      control: "boolean",
+      description:
+        "Formats the displayed date value; if true, a formatted date string is shown.",
+    },
+    inputFilled: {
+      control: "boolean",
+      description: "Toggles the alternate Datepicker input Filled design.",
+      defaultValue: false,
+      table: {
+        type: { summary: "Boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+  },
+} satisfies Meta<typeof EUIDatepicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story with minimum props
+export const Default: Story = {
+  args: {
+    placeholder: "Select your date",
+    label: "Date",
+    modelValue: new Date(),
+    required: true,
+    readonly: false,
+    disabled: false,
+    errors: {
+      message: "Enter valid date format",
+    },
+  },
+  render: (args) => ({
+    components: { EUIDatepicker },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      return { args, modelValue };
+    },
+    template: `<div class="max-w-sm min-h-64"><EUIDatepicker v-bind="args" /></div>`,
+  }),
+};
+
+export const InputFilled: Story = {
+  args: {
+    modelValue: new Date(),
+    label: "Date of Event",
+    placeholder: "Select your date",
+    inputFilled: true,
+  },
+  render: (args) => ({
+    components: { EUIDatepicker },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      return { args, modelValue };
+    },
+    template: `<div class="max-w-sm"><EUIDatepicker v-bind="args" /></div>`,
+  }),
+};
+
+export const DateRange: Story = {
+  args: {
+    placeholder: "Choose your date range...",
+    label: "Datepicker",
+    range: true,
+    required: true,
+    readonly: false,
+    disabled: false,
+    errors: {
+      message: "Enter valid date format",
+    },
+  },
+  render: (args) => ({
+    components: { EUIDatepicker },
+    setup() {
+      const startDate = new Date();
+      const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
+      const datepicker = ref([startDate, endDate]);
+      return { args, datepicker };
+    },
+    template: `<div class="max-w-sm"><EUIDatepicker v-bind="args" v-model="datepicker" /></div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<script lang="ts" setup>
+const datepickerRange = ref([new Date(), new Date(new Date().setDate(new Date().getDate() + 7))]);
+</script>
+<template>
+<EUIDatepicker
+  v-model="datepickerRange"
+  label="Datepicker"
+  placeholder="Select Date here..."
+  :range="true"
+/>
+</template>`,
+      },
+    },
+  },
+};
+
+export const RangeUsingMultiCalender: Story = {
+  args: {
+    placeholder: "Choose your date range...",
+    label: "Datepicker",
+    range: true,
+    multiCalendars: true,
+    required: true,
+    readonly: false,
+    disabled: false,
+    errors: {
+      message: "Enter valid date format",
+    },
+  },
+  render: (args) => ({
+    components: { EUIDatepicker },
+    setup() {
+      const startDate = new Date();
+      const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
+      const datepicker = ref([startDate, endDate]);
+      return { args, datepicker };
+    },
+    template: `<div class="max-w-sm"><EUIDatepicker v-bind="args" v-model="datepicker" /></div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<script lang="ts" setup>
+const datepickerRange = ref([new Date(), new Date(new Date().setDate(new Date().getDate() + 7))]);
+</script>
+<template>
+<EUIDatepicker
+  v-model="datepickerRange"
+  label="Datepicker"
+  placeholder="Select Date here..."
+  :range="true"
+  :multiCalendars="true"
+/>
+</template>`,
+      },
+    },
+  },
+};
+
+export const TimeOnly: Story = {
+  args: {
+    placeholder: "Select your time",
+    label: "Time picker",
+    required: true,
+    timePicker: true,
+    errors: {
+      message: "Enter valid date format",
+    },
+  },
+  render: (args) => ({
+    components: { EUIDatepicker },
+    setup() {
+      const time = ref({
+        hours: new Date().getHours(),
+        minutes: new Date().getMinutes(),
+      });
+      const modelValue = ref(time);
+      return { args, modelValue };
+    },
+    template: `<div class="max-w-sm"><EUIDatepicker v-bind="args" :modelValue="modelValue" /></div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<script lang="ts" setup>
+      const time = ref({
+        hours: new Date().getHours(),
+        minutes: new Date().getMinutes(),
+      });
+    </script>
+    <template>
+      <EUIDatepicker
+        v-model="time"
+        label="Time"
+        placeholder="Select your time"
+        :timePicker="true"
+      />
+    </template>`,
+      },
+    },
+  },
+};
+
+export const DatepickerIconStart: Story = {
+  args: {
+    iconType: "startIcon",
+    icon: CalendarDaysIcon,
+  },
+  render: (args) => ({
+    components: { EUIDatepicker, CalendarDaysIcon },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      return { args, modelValue };
+    },
+    template: `<div class="max-w-sm"><EUIDatepicker v-bind="args" /></div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<template>
+        <EUIDatepicker
+        v-model="datepicker"
+        :icon="CalendarDaysIcon"
+        icon-type="startIcon"
+        label="Datepicker"
+        placeholder="Select Date here..."
+      />
+      </template>`,
+      },
+    },
+  },
+};
+
+export const DatepickerIconEnd: Story = {
+  args: {
+    iconType: "endIcon",
+    icon: CalendarDaysIcon,
+  },
+  render: (args) => ({
+    components: { EUIDatepicker, CalendarDaysIcon },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      return { args, modelValue };
+    },
+    template: `<div class="max-w-sm"><EUIDatepicker v-bind="args" /></div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<template>
+        <EUIDatepicker
+        v-model="datepicker"
+        :icon="CalendarDaysIcon"
+        icon-type="endIcon"
+        label="Datepicker"
+        placeholder="Select Date here..."
+      />
+      </template>`,
+      },
+    },
+  },
+};
+
+export const InputFilledIconStart: Story = {
+  args: {
+    iconType: "startIcon",
+    icon: CalendarDaysIcon,
+    inputFilled: true,
+  },
+  render: (args) => ({
+    components: { EUIDatepicker, CalendarDaysIcon },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      return { args, modelValue };
+    },
+    template: `<div class="max-w-sm"><EUIDatepicker v-bind="args" /></div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<template>
+        <EUIDatepicker
+        v-model="datepicker"
+        label="Datepicker"
+        placeholder="Select Date here..."
+        :inputFilled="true"
+        icon-type="startIcon"
+        :icon="CalendarDaysIcon"
+      />
+      </template>`,
+      },
+    },
+  },
+};
+
+export const InputFilledIconEnd: Story = {
+  args: {
+    iconType: "endIcon",
+    icon: CalendarDaysIcon,
+    inputFilled: true,
+  },
+  render: (args) => ({
+    components: { EUIDatepicker, CalendarDaysIcon },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      return { args, modelValue };
+    },
+    template: `<div class="max-w-sm"><EUIDatepicker v-bind="args" /></div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<template>
+        <EUIDatepicker
+        v-model="datepicker"
+        label="Datepicker"
+        placeholder="Select Date here..."
+        :inputFilled="true"
+        :icon="CalendarDaysIcon"
+        icon-type="endIcon"
+      />
+      </template>`,
+      },
+    },
+  },
+};
+
+export const DatepickerWidthOutLabel: Story = {
+  args: {
+    placeholder: "Select your date",
+    modelValue: new Date(),
+  },
+  render: (args) => ({
+    components: { EUIDatepicker },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      return { args, modelValue };
+    },
+    template: `<div class="max-w-sm"><EUIDatepicker v-bind="args" /></div>`,
+  }),
+};
+
+export const DatepickerDiasabled: Story = {
+  args: {
+    placeholder: "Select your date",
+    modelValue: new Date(),
+    disabled: true,
+    inputFilled: true,
+  },
+  render: (args) => ({
+    components: { EUIDatepicker },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      return { args, modelValue };
+    },
+    template: `<div class="max-w-sm"><EUIDatepicker v-bind="args" /></div>`,
+  }),
+};
+
+export const DatepickerMinMax: Story = {
+  args: {
+    placeholder: "Select your date",
+    modelValue: new Date(),
+    minDate: ref(new Date(2024, 11)),
+    maxDate: ref(new Date()),
+    inputFilled: true,
+  },
+  render: (args) => ({
+    components: { EUIDatepicker },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      return { args, modelValue };
+    },
+    template: `<div class="max-w-sm"><EUIDatepicker v-bind="args" /></div>`,
+  }),
+};
+
+export const DatepickerReadonly: Story = {
+  args: {
+    placeholder: "Select your date",
+    modelValue: new Date(),
+    readonly: true,
+    inputFilled: true,
+  },
+  render: (args) => ({
+    components: { EUIDatepicker },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      return { args, modelValue };
+    },
+    template: `<div class="max-w-sm"><EUIDatepicker v-bind="args" /></div>`,
+  }),
+};