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

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>',
+  }),
+};

package/src/components/input/EUIInput.vue

@@ -1,38 +1,43 @@
 <template>
   <div>
+    <label
+        v-if="!inputFilled && label"
+        :for="`${name}-${id}`"
+        :class="[
+          'text-xs w-full text-gray-500 cursor-pointer font-medium',
+          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 focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600"
+      :class="[{'pointer-events-none cursor-not-allowed': disabled}, {'h-14 rounded-2xl focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600 border border-gray-100': inputFilled}, 'group cursor-pointer relative w-full mb-2 overflow-hidden']"
     >
       <label
+        v-if="inputFilled"
         :for="`${name}-${id}`"
         :class="[
           getIconClass(),
           inputValue
             ? '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',
-          disabled ? ' cursor-not-allowed' : '',
+            : 'top-1/2 text-sm w-full text-gray-700 cursor-pointer h-14 pt-5 pb-4',
+          disabled ? 'cursor-not-allowed bg-gray-50 z-10' : 'z-0 bg-white',
           required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
+          'absolute font-medium left-0 px-4 -translate-y-1/2 duration-300 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-focus-within:-translate-y-1/2 group-focus-within:ring-transparent group-focus-within:h-auto group-focus-within:py-0 first-letter:capitalize transition-all ease-in-out'
         ]"
-        class="absolute font-medium left-0 px-4 z-0 -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-focus-within:-translate-y-1/2 group-focus-within:ring-transparent group-focus-within:h-auto group-focus-within:py-0"
       >
-        {{ label }}
+        {{ label || 'Label' }}
       </label>
       <div
         v-if="icon && iconType"
-        class="absolute inset-y-0 flex items-center pointer-events-none"
-        :class="[
-          iconType === 'startIcon' ? 'left-0 pl-3' : 'right-0 pr-3',
-          disabled ? 'cursor-not-allowed' : '',
-        ]"
+        :class="['absolute inset-y-0 flex items-center pointer-events-none', iconType === 'startIcon' ? 'left-0 pl-3' : 'right-0 pr-3', disabled ? 'z-20': '']"
       >
         <component
           :is="icon"
-          class="w-6 h-6 text-gray-400"
+          class="text-gray-400 size-6"
           aria-hidden="true"
         />
       </div>
-
       <input
         :id="`${name}-${id}`"
         ref="input"
@@ -40,8 +45,8 @@
         :value="modelValue"
         :placeholder="placeholder"
         :name="name"
-        class="z-10 block w-full h-full pt-6 pb-3 text-sm font-medium leading-6 appearance-none rounded-2xl placeholder:text-gray-400 focus:outline-none disabled:opacity-75 focus:border-purple-600 autofill:bg-white"
-        :class="[getIconClass(), disabled ? 'cursor-not-allowed' : '']"
+        :class="['z-10 block placeholder:text-gray-400 focus:outline-none text-sm font-medium appearance-none disabled:opacity-75 autofill:bg-white leading-6 transition-all duration-100 border-none outline-none', inputFilled ? 'pt-6 pb-3 rounded-2xl size-full' : 'px-4 py-3 h-10 w-full ring-1 ring-gray-100 focus-within:ring-purple-600 focus-within:ring-2 ring-inset', !inputFilled && rounded ? 'rounded-2xl' : 'rounded-md', disabled ? 'cursor-not-allowed' : 'cursor-text', getIconClass(), !inputFilled && className]"
+
         :required="required"
         :disabled="disabled"
         :readonly="readonly"
@@ -118,6 +123,16 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  inputFilled: {
+    type:Boolean,
+    default: false
+  },
+  rounded:Boolean,
+  className: {
+    type: Array as PropType<string[]>,
+    required: false,
+    default: () => [],
+  },
 });
 
 const hasFocus = ref(false);

package/src/components/modal/EUIModal.vue

@@ -7,7 +7,7 @@
         @click.self="closeModal"
       >
         <div
-          class="backdrop fixed inset-0 z-[-1] w-screen h-screen bg-black/25 pointer-events-none overflow-hidden"
+          class="backdrop fixed inset-0 z-[-1] w-screen h-screen bg-black/50 pointer-events-none overflow-hidden"
         ></div>
         <div
           class="bg-white shadow-lg max-w-lg w-full max-h-[calc(100svh-3rem)] md:h-auto overflow-hidden relative"
@@ -20,13 +20,13 @@
           </template>
           <div
             v-else
-            class="flex items-center justify-between font-medium text-gray-700"
+            class="flex flex-row items-center justify-between font-medium text-gray-700"
             :class="slimHeader ? 'p-4 text-base' : 'p-6 text-lg'"
           >
             <h3 class="text-xl font-semibold">
               <slot name="title">{{ title || "Modal Title" }}</slot>
             </h3>
-            <div>
+            <div v-if="visibleClose" class="flex-initial">
               <button
                 type="button"
                 class="flex items-center justify-center text-gray-400 bg-white hover:bg-gray-50 rounded-3xl hover:text-gray-600 size-8"
@@ -104,6 +104,10 @@ export default defineComponent({
       type: String,
       default: "",
     },
+    visibleClose: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: ["update:isVisible", "confirm"],
   methods: {
@@ -131,33 +135,26 @@ export default defineComponent({
 <style lang="scss" scoped>
 .modal-enter-active,
 .modal-leave-active {
-  transition: opacity 0.5s ease, transform 0.5s ease;
+  transition: opacity 0.3s ease, transform 0.3s ease;
 }
 .modal-enter-from,
 .modal-leave-to {
-  opacity: 0;
-  transform-origin: top;
-  transform: translateY(40%) scale(0.4);
+  @apply opacity-0;
 }
 .modal-enter-to,
 .modal-leave-from {
-  opacity: 1;
-  transform-origin: top center;
-  transform: translateY(0%) scale(1);
+ @apply opacity-100;
 }
 
 .backdrop {
-  transition: opacity 0.6s ease, transform 0.6s ease;
+  transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 .modal-enter-from .backdrop,
 .modal-leave-to .backdrop {
-  transform: scale(0.3) rotate3d(0.5, 1, 0, 60deg);
-  opacity: 0;
+  @apply opacity-0;
 }
 .modal-enter-to .backdrop,
 .modal-leave-from .backdrop {
-  // transform: scale(0.8) rotate3d(0.5, 0, 0, 90deg); //rotate effect
-  transform: scale(1) rotate3d(0, 0, 0, 90deg); // fade effect only
-  opacity: 0.2;
+  @apply opacity-100;
 }
 </style>

package/src/components/select/EUISelect.stories.ts

@@ -25,6 +25,15 @@ const meta = {
       description:
         "Object containing validation errors where keys are field names and values are the error messages.",
     },
+    inputFilled: {
+      control: "boolean",
+      description: "Toggles the alternate Select input Filled design.",
+      defaultValue: false,
+      table: {
+        type: { summary: "Boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
   },
 } satisfies Meta<typeof EUISelect>;
 
@@ -35,8 +44,8 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     name: "country",
-    label: "country",
-    placeholder: "country",
+    label: "Country Name",
+    placeholder: "select country",
     items: [
       { value: "usa", label: "United States", name: "United States" },
       { value: "canada", label: "Canada", name: "Canada" },
@@ -44,6 +53,43 @@ export const Default: Story = {
     ],
     modelValue: { value: "usa", label: "United States", name: "United States" },
     errors: {},
-    required: true,
+    required: false,
   },
+  render: (args) => ({
+    components: { EUISelect },
+    setup() {
+      return { args };
+    },
+    template: '<div class="max-w-xs"><EUISelect v-bind="args" /></div>',
+  }),
 };
+
+export const inputFilled: Story = {
+  args: {
+    name: "country",
+    label: "Country Name",
+    placeholder: "select country",
+    items: [
+      { value: "usa", label: "United States", name: "United States" },
+      { value: "canada", label: "Canada", name: "Canada" },
+      { value: "uk", label: "United Kingdom", name: "United Kingdom" },
+    ],
+    modelValue: [],
+    errors: {},
+    inputFilled: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Toggles the alternate Select Filled design.",
+      },
+    },
+  },
+  render: (args) => ({
+    components: { EUISelect },
+    setup() {
+      return { args };
+    },
+    template: '<div class="max-w-xs"><EUISelect v-bind="args" /></div>',
+  }),
+};