edvoyui-component-library-test-flight 0.0.184 → 0.0.185

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

@@ -1,492 +0,0 @@
-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>`,
-  }),
-};