edvoyui-component-library-test-flight 0.0.25 → 0.0.26

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

@@ -90,6 +90,15 @@ const meta = {
       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>;
 
@@ -100,7 +109,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     placeholder: "Select your date",
-    label: "Datepicker",
+    label: "Date",
     modelValue: new Date(),
     required: true,
     readonly: false,
@@ -115,7 +124,24 @@ export const Default: Story = {
       const modelValue = ref(args.modelValue);
       return { args, modelValue };
     },
-    template: `<div class="max-w-xl min-h-64"><EUIDatepicker v-bind="args" /></div>`,
+    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>`,
   }),
 };
 
@@ -139,7 +165,7 @@ export const DateRange: Story = {
       const datepicker = ref([startDate, endDate]);
       return { args, datepicker };
     },
-    template: `<div class="max-w-xl min-h-64"><EUIDatepicker v-bind="args" v-model="datepicker" /></div>`,
+    template: `<div class="max-w-sm"><EUIDatepicker v-bind="args" v-model="datepicker" /></div>`,
   }),
   parameters: {
     docs: {
@@ -163,7 +189,7 @@ const datepickerRange = ref([new Date(), new Date(new Date().setDate(new Date().
 export const TimeOnly: Story = {
   args: {
     placeholder: "Select your time",
-    label: "Time",
+    label: "Time picker",
     required: true,
     timePicker: true,
     errors: {
@@ -180,7 +206,7 @@ export const TimeOnly: Story = {
       const modelValue = ref(time);
       return { args, modelValue };
     },
-    template: `<div class="max-w-xl min-h-64"><EUIDatepicker v-bind="args" :modelValue="modelValue" /></div>`,
+    template: `<div class="max-w-sm"><EUIDatepicker v-bind="args" :modelValue="modelValue" /></div>`,
   }),
   parameters: {
     docs: {
@@ -204,7 +230,7 @@ export const TimeOnly: Story = {
   },
 };
 
-export const IconUsingStart: Story = {
+export const DatepickerIconStart: Story = {
   args: {
     iconType: "startIcon",
     icon: CalendarDaysIcon,
@@ -215,7 +241,7 @@ export const IconUsingStart: Story = {
       const modelValue = ref(args.modelValue);
       return { args, modelValue };
     },
-    template: `<div class="max-w-xl min-h-64"><EUIDatepicker v-bind="args" /></div>`,
+    template: `<div class="max-w-sm"><EUIDatepicker v-bind="args" /></div>`,
   }),
   parameters: {
     docs: {
@@ -234,7 +260,7 @@ export const IconUsingStart: Story = {
   },
 };
 
-export const IconUsingEnd: Story = {
+export const DatepickerIconEnd: Story = {
   args: {
     iconType: "endIcon",
     icon: CalendarDaysIcon,
@@ -245,7 +271,7 @@ export const IconUsingEnd: Story = {
       const modelValue = ref(args.modelValue);
       return { args, modelValue };
     },
-    template: `<div class="max-w-xl min-h-64"><EUIDatepicker v-bind="args" /></div>`,
+    template: `<div class="max-w-sm"><EUIDatepicker v-bind="args" /></div>`,
   }),
   parameters: {
     docs: {
@@ -264,10 +290,74 @@ export const IconUsingEnd: Story = {
   },
 };
 
-export const DateSelected: Story = {
+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(),
-    disabled: false,
   },
   render: (args) => ({
     components: { EUIDatepicker },
@@ -275,6 +365,40 @@ export const DateSelected: Story = {
       const modelValue = ref(args.modelValue);
       return { args, modelValue };
     },
-    template: `<div class="max-w-xl"><EUIDatepicker v-bind="args" v-model="modelValue" @update:modelValue="onUpdateModelValue" /></div>`,
+    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 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>`,
+  }),
+};

package/src/components/datepicker/EUIDatepicker.vue

@@ -1,28 +1,37 @@
 <template>
   <div>
+    <label
+        v-if="!inputFilled && label"
+        :class="[
+          'text-xs w-full text-gray-500 cursor-pointer font-medium block mb-1',
+          required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
+        ]"
+      >
+        {{ label }}
+      </label>
     <div
-      :class="disabled ? 'pointer-events-none cursor-not-allowed' : ''"
-      class="relative w-full mb-2 overflow-hidden border border-gray-100 cursor-pointer group h-14 rounded-2xl eui-datepicker"
+      :class="[{'pointer-events-none cursor-not-allowed':disabled}, inputFilled ? 'overflow-hidden border border-gray-100 cursor-pointer group h-14 rounded-2xl eui-datepicker' : 'h-10 eui-datepicker normal', 'relative w-full mb-2']"
     >
     <label
+        v-if="inputFilled"
         :class="[
           getIconClass(),
           datepicker
             ? 'top-3.5 text-xs text-gray-400 leading-none cursor-default'
-            : 'top-1/2 text-sm w-full text-gray-700 cursor-pointer h-14 pt-5 pb-4 bg-white ring-1 ring-gray-200',
+            : 'top-1/2 text-sm w-full text-gray-700 cursor-pointer h-14 pt-5 pb-4 bg-white',
           disabled ? ' cursor-not-allowed' : '',
           required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
+          'absolute font-medium left-0 px-4 z-[1] -translate-y-1/2 group-focus-within:top-3.5 group-focus-within:text-xs group-focus-within:text-gray-400 rounded-2xl group-focus-within:bg-transparent group-hover:text-xs group-focus-within:h-auto group-focus-within:py-0 group-hover:top-3.5 group-hover:bg-transparent group-hover:h-auto group-hover:py-0 group-focus-within:-translate-y-1/2 group-hover:-translate-y-1/2 text-start first-letter:capitalize group-hover:rounded-none group-hover:text-gray-400 group-hover:w-max transition-all ease-in-out duration-300'
         ]"
-        class="absolute font-medium left-0 px-4 z-[1] -translate-y-1/2 duration-200 group-focus-within:top-3.5 group-focus-within:text-xs group-focus-within:text-gray-400 rounded-2xl group-focus-within:bg-transparent group-hover:text-xs group-focus-within:ring-transparent group-focus-within:h-auto group-focus-within:py-0 group-hover:top-3.5 group-hover:ring-0 group-hover:ring-transparent group-hover:bg-transparent group-hover:h-auto group-hover:py-0 group-focus-within:-translate-y-1/2 group-hover:-translate-y-1/2 text-start first-letter:capitalize group-hover:rounded-none group-hover:text-gray-400 group-hover:w-max group-hover:transition-colors"
       >
-        {{ label }}
+        {{ label  || 'Datepicker'}}
       </label>
       <div
         v-if="icon && iconType"
-        class="absolute inset-y-0 z-10 flex items-center pointer-events-none"
         :class="[
           iconType === 'startIcon' ? 'left-0 pl-3' : 'right-0 pr-3',
           disabled ? 'cursor-not-allowed' : '',
+          inputFilled ? 'inset-y-0' : 'top-2', 'absolute z-10 flex items-center pointer-events-none'
         ]"
       >
         <component
@@ -91,7 +100,7 @@ const props = defineProps({
   label: {
     type: String,
     required: true,
-    default: "Datepicker",
+    default: "",
   },
   iconType: {
     type: String as PropType<"startIcon" | "endIcon">,
@@ -110,6 +119,10 @@ const props = defineProps({
   disabled:Boolean,
   required: Boolean,
   range:Boolean,
+  inputFilled: {
+    type:Boolean,
+    default: false
+  }
 });
 const emit = defineEmits(["update:modelValue"]);
 const { modelValue, isUtc, clearIcon } = toRefs(props);
@@ -173,6 +186,17 @@ const clearIconRight = computed(() => (props.iconType === 'endIcon' ? '40px' : '
     }
   }
 
+  &.normal {
+    .dp__main {
+      .dp__input {
+        @apply py-2 ring-1 ring-gray-100;
+      }
+      .dp__input.dp__input_focus {
+          @apply ring-2 h-10 rounded-md ring-purple-600;
+      }
+    }
+  }
+
   .dp__range_end,
   .dp__range_start,
   .dp__active_date {

package/src/components/delete.vue

@@ -20,7 +20,7 @@
     </div>
 
 
-    <div class="grid max-w-3xl gap-4 mx-auto sm:grid-cols-3">
+    <div class="grid max-w-3xl gap-4 mx-auto mb-6 sm:grid-cols-3">
     <div>
       <EUIDatepicker
         v-model:modelValue="datepickerRange"
@@ -28,6 +28,8 @@
         placeholder="Select Date here..."
         :range="true"
         required
+        :icon="CalendarIcon"
+        iconType="startIcon"
       />
     </div>
 
@@ -39,6 +41,8 @@
         placeholder="Select your date"
         :readonly="false"
         required
+         :icon="CalendarIcon"
+        iconType="endIcon"
       />
     </div>
 
@@ -55,6 +59,49 @@
     </div>
   </div>
 
+
+    <div class="grid max-w-3xl gap-4 mx-auto mb-6 sm:grid-cols-3">
+    <div>
+      <EUIDatepicker
+        v-model:modelValue="datepickerRange"
+        label="Datepicker Range"
+        placeholder="Select Date here..."
+        :range="true"
+        required
+        inputFilled
+        :icon="CalendarIcon"
+        iconType="startIcon"
+      />
+    </div>
+
+    <div>
+      <EUIDatepicker
+        :disabled="false"
+        label="Datepicker Single"
+        v-model:modelValue="singleDate"
+        placeholder="Select your date"
+        :readonly="false"
+        required
+        inputFilled
+        :icon="CalendarIcon"
+        iconType="endIcon"
+      />
+    </div>
+
+    <div>
+      <EUIDatepicker
+        v-model:modelValue="timepicker"
+        :disabled="false"
+        label="Time Picker"
+        placeholder="Select your time"
+        :readonly="false"
+        :timePicker="true"
+        required
+        inputFilled
+      />
+    </div>
+  </div>
+
     <EUITable
       :checkable="true"
       paginated
@@ -104,6 +151,7 @@ import EUITable from "./table/EUITable.vue";
 import EUITooltip from "./tooltip/EUITooltip.vue";
 import EUISearch from "./searchInput/EUISearch.vue";
 import EUIDatepicker from "./datepicker/EUIDatepicker.vue";
+import { CalculatorIcon, CalendarIcon } from "@heroicons/vue/24/solid";
 
 // TODO: Datepicker
 const datepickerRange = ref([

package/src/components/index.ts

@@ -1,7 +1,6 @@
 import "../style.scss";
 export { default as EUIButton } from "./button/EUIButton.vue";
 export { default as EUIInput } from "./input/EUIInput.vue";
-export { default as EUIInputNormal } from "./inputNormal/EUIInputNormal.vue";
 export { default as EUITelephone } from "./telephone/EUITelephone.vue";
 export { default as EUITextArea } from "./textArea/EUITextArea.vue";
 

package/src/components/input/EUIInput.stories.ts

@@ -2,7 +2,7 @@ import { expect, userEvent, within } from "@storybook/test";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import EUIInput from "./EUIInput.vue";
 import { UserCircleIcon } from "@heroicons/vue/24/outline";
-
+import { MagnifyingGlassIcon } from "@heroicons/vue/24/solid";
 // Meta configuration for the component's stories
 const meta = {
   title: "Forms/Input",
@@ -38,7 +38,7 @@ const meta = {
         ],
       },
       description:
-        "Specifies the type of input, such as `text`, `number`, `email`, etc.",
+        "Defines the type of input field. Accepted values are 'text', 'number', 'email', 'password', 'search', 'date', and 'url'.",
     },
     placeholder: {
       control: "text",
@@ -81,6 +81,24 @@ const meta = {
       description:
         "An object containing error messages or validation information, typically used for form validation.",
     },
+    rounded: {
+      control: "boolean",
+      description:
+        "rounded the input field. (InputFilled rounded and className not working)",
+    },
+    className: {
+      control: "text",
+      description: "Required design to add class",
+    },
+    inputFilled: {
+      control: "boolean",
+      description: "Toggles the alternate input design.",
+      defaultValue: false,
+      table: {
+        type: { summary: "Boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
   },
 } satisfies Meta<typeof EUIInput>;
 
@@ -100,6 +118,13 @@ export const Default: Story = {
     disabled: false,
     autoFocus: false,
   },
+  render: (args) => ({
+    components: { EUIInput },
+    setup() {
+      return { args };
+    },
+    template: '<div class="max-w-sm"><EUIInput v-bind="args" /></div>',
+  }),
 };
 
 export const TypeOfInput: Story = {
@@ -113,13 +138,45 @@ export const TypeOfInput: Story = {
     errors: {
       message: "Enter valid mobile number",
     },
+    class: "max-w-sm",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Specifies the type of input, such as `text`, `number`, `email`, etc.",
+      },
+    },
+  },
+};
+
+export const InputFilled: Story = {
+  args: {
+    modelValue: "",
+    name: "emailaddress",
+    label: "Email Address",
+    type: "email",
+    placeholder: "Enter your email here...",
+    disabled: false,
+    errors: {
+      message: "Enter valid mobile number",
+    },
+    class: "max-w-sm",
+    inputFilled: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Toggles the alternate input Filled design.",
+      },
+    },
   },
   render: (args) => ({
     components: { EUIInput },
     setup() {
       return { args };
     },
-    template: '<div class="max-w-xl"><EUIInput v-bind="args" /></div>',
+    template: '<div class="max-w-sm"><EUIInput v-bind="args" /></div>',
   }),
 };
 
@@ -130,6 +187,7 @@ export const InputValue: Story = {
     label: "User Name",
     placeholder: "Enter fullname here..",
     name: "inputName",
+    class: "max-w-sm",
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
@@ -139,7 +197,47 @@ export const InputValue: Story = {
   },
 };
 
-export const IconUsingStart: Story = {
+export const InputWithoutLabel: Story = {
+  args: {
+    modelValue: "",
+    type: "text",
+    placeholder: "Enter full name",
+    name: "userName",
+    disabled: true,
+    class: "max-w-sm",
+  },
+};
+
+export const InputDisabled: Story = {
+  args: {
+    modelValue: "",
+    label: "User Name",
+    type: "text",
+    placeholder: "Enter fullname here..",
+    name: "userName",
+    disabled: true,
+    class: "max-w-sm",
+  },
+};
+
+export const InputReadonly: Story = {
+  args: {
+    modelValue: "John Cena",
+    label: "User Name",
+    placeholder: "Enter fullname here..",
+    name: "inputName",
+    readonly: true,
+    class: "max-w-sm",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const inputElement = canvas.getByPlaceholderText("Enter fullname here..");
+    await userEvent.type(inputElement, "Storybook Test");
+    await expect(inputElement).toBe("Storybook Test");
+  },
+};
+
+export const InputIconStart: Story = {
   args: {
     iconType: "startIcon",
     icon: UserCircleIcon,
@@ -147,6 +245,7 @@ export const IconUsingStart: Story = {
     placeholder: "Enter fullname here..",
     name: "inputStarIcon",
     modelValue: "",
+    class: "max-w-sm",
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
@@ -156,7 +255,7 @@ export const IconUsingStart: Story = {
   },
 };
 
-export const IconUsingEnd: Story = {
+export const InputIconEnd: Story = {
   args: {
     modelValue: "",
     iconType: "endIcon",
@@ -164,6 +263,7 @@ export const IconUsingEnd: Story = {
     label: "User Name",
     placeholder: "Enter fullname here..",
     name: "inputEndIcon",
+    class: "max-w-sm",
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
@@ -171,4 +271,117 @@ export const IconUsingEnd: Story = {
     await userEvent.type(inputElement, "Jane Doe");
     expect(inputElement).toBe("Jane Doe");
   },
-};
+};
+
+export const InputRoundedDefault: Story = {
+  args: {
+    modelValue: "",
+    type: "text",
+    placeholder: "Enter full name",
+    name: "userName",
+    rounded: true,
+    class: "max-w-sm",
+  },
+};
+
+export const InputAddClassName: Story = {
+  args: {
+    modelValue: "",
+    name: "searchInput",
+    type: "search",
+    placeholder: "Search here...",
+    rounded: true,
+    className: ["bg-gray-100/50 rounded-3xl"],
+    icon: MagnifyingGlassIcon,
+    iconType: "startIcon",
+  },
+  render: (args) => ({
+    components: { EUIInput },
+    setup() {
+      return { args };
+    },
+    template: '<div class="max-w-sm"><EUIInput v-bind="args" /></div>',
+  }),
+};
+
+export const InputFilledIconStart: Story = {
+  args: {
+    modelValue: "",
+    name: "courseSearch",
+    label: "Course search",
+    type: "search",
+    placeholder: "Search here...",
+    inputFilled: true,
+    icon: MagnifyingGlassIcon,
+    iconType: "startIcon",
+  },
+  render: (args) => ({
+    components: { EUIInput },
+    setup() {
+      return { args };
+    },
+    template: '<div class="max-w-sm"><EUIInput v-bind="args" /></div>',
+  }),
+};
+
+export const InputFilledIconEnd: Story = {
+  args: {
+    modelValue: "",
+    name: "courseSearch",
+    label: "Course search",
+    type: "search",
+    placeholder: "Search here...",
+    inputFilled: true,
+    icon: MagnifyingGlassIcon,
+    iconType: "endIcon",
+  },
+  render: (args) => ({
+    components: { EUIInput },
+    setup() {
+      return { args };
+    },
+    template: '<div class="max-w-sm"><EUIInput v-bind="args" /></div>',
+  }),
+};
+
+export const InputFilledDisabled: Story = {
+  args: {
+    modelValue: "",
+    name: "courseSearch",
+    label: "Course search",
+    type: "search",
+    placeholder: "Search here...",
+    inputFilled: true,
+    icon: MagnifyingGlassIcon,
+    iconType: "startIcon",
+    disabled: true,
+  },
+  render: (args) => ({
+    components: { EUIInput },
+    setup() {
+      return { args };
+    },
+    template: '<div class="max-w-sm"><EUIInput v-bind="args" /></div>',
+  }),
+};
+
+export const InputFilledReadonly: Story = {
+  args: {
+    modelValue: "Lorem ipsum dolor sit amet ",
+    name: "courseSearch",
+    label: "Course search",
+    type: "search",
+    placeholder: "Search here...",
+    inputFilled: true,
+    icon: MagnifyingGlassIcon,
+    iconType: "startIcon",
+    readonly: true,
+  },
+  render: (args) => ({
+    components: { EUIInput },
+    setup() {
+      return { args };
+    },
+    template: '<div class="max-w-sm"><EUIInput v-bind="args" /></div>',
+  }),
+};