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

package/src/components/telephone/EUITelephone.stories.ts

@@ -74,6 +74,15 @@ const meta = {
       description:
         "Specifies an SVG icon to be displayed inside the telephone input field.",
     },
+    inputFilled: {
+      control: "boolean",
+      description: "Toggles the alternate Select Tel input Filled design.",
+      defaultValue: false,
+      table: {
+        type: { summary: "Boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
   },
 } satisfies Meta<typeof EUITelephone>;
 
@@ -85,7 +94,7 @@ export const Default: Story = {
   args: {
     placeholder: "Mobile number 0 to 9",
     label: "Contact number",
-    modelValue: "",
+    modelValue: "9094089854",
     name: "telephoneInput",
     autoFocus: false,
     length: 10,
@@ -115,12 +124,40 @@ export const Default: Story = {
 
       return { args, modelValue, isValid, onUpdateModelValue, onUpdateIsValid };
     },
-    template: `<div class="max-w-xl min-h-64"><EUITelephone v-bind="args" /></div>`,
+    template: `<div class="max-w-md min-h-64"><EUITelephone v-bind="args" /></div>`,
   }),
 };
 
-export const IconUsingStart: Story = {
+export const InputFilled: Story = {
   args: {
+    modelValue: "9094089854",
+    inputFilled: true,
+  },
+  render: (args) => ({
+    components: { EUITelephone },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      const isValid = ref(args.isValid);
+
+      const onUpdateModelValue = (newValue: string) => {
+        modelValue.value = newValue;
+        args.modelValue = newValue;
+      };
+
+      const onUpdateIsValid = (newValue: boolean) => {
+        isValid.value = newValue;
+        args.isValid = newValue;
+      };
+
+      return { args, modelValue, isValid, onUpdateModelValue, onUpdateIsValid };
+    },
+    template: `<div class="max-w-md min-h-64"><EUITelephone v-bind="args" /></div>`,
+  }),
+};
+
+export const TelInputIconStart: Story = {
+  args: {
+    modelValue: "9094089854",
     iconType: "startIcon",
     icon: PhoneIcon,
   },
@@ -142,12 +179,13 @@ export const IconUsingStart: Story = {
 
       return { args, modelValue, isValid, onUpdateModelValue, onUpdateIsValid };
     },
-    template: `<div class="max-w-xl min-h-64"><EUITelephone v-bind="args" /></div>`,
+    template: `<div class="max-w-md min-h-64"><EUITelephone v-bind="args" /></div>`,
   }),
 };
 
-export const IconUsingEnd: Story = {
+export const TelInputIconEnd: Story = {
   args: {
+    modelValue: "9094089854",
     iconType: "endIcon",
     icon: PhoneIcon,
   },
@@ -169,13 +207,13 @@ export const IconUsingEnd: Story = {
 
       return { args, modelValue, isValid, onUpdateModelValue, onUpdateIsValid };
     },
-    template: `<div class="max-w-xl min-h-64"><EUITelephone v-bind="args" /></div>`,
+    template: `<div class="max-w-md min-h-64"><EUITelephone v-bind="args" /></div>`,
   }),
 };
 
 export const MobileNumberUsed: Story = {
   args: {
-    modelValue: "+919094089456",
+    modelValue: "+919094089854",
     disabled: false,
     isValid: false,
   },
@@ -197,6 +235,124 @@ export const MobileNumberUsed: Story = {
 
       return { args, modelValue, isValid, onUpdateModelValue, onUpdateIsValid };
     },
-    template: `<div class="max-w-xl"><EUITelephone v-bind="args" v-model="modelValue" @update:modelValue="onUpdateModelValue" @update:isValid="onUpdateIsValid" /></div>`,
+    template: `<div class="max-w-md"><EUITelephone v-bind="args" v-model="modelValue" @update:modelValue="onUpdateModelValue" @update:isValid="onUpdateIsValid" /></div>`,
+  }),
+};
+
+export const InputFilledIconStart: Story = {
+  args: {
+    modelValue: "9094089854",
+    inputFilled: true,
+    iconType: "startIcon",
+    icon: PhoneIcon,
+  },
+  render: (args) => ({
+    components: { EUITelephone },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      const isValid = ref(args.isValid);
+
+      const onUpdateModelValue = (newValue: string) => {
+        modelValue.value = newValue;
+        args.modelValue = newValue;
+      };
+
+      const onUpdateIsValid = (newValue: boolean) => {
+        isValid.value = newValue;
+        args.isValid = newValue;
+      };
+
+      return { args, modelValue, isValid, onUpdateModelValue, onUpdateIsValid };
+    },
+    template: `<div class="max-w-md min-h-64"><EUITelephone v-bind="args" /></div>`,
+  }),
+};
+
+export const InputFilledIconEnd: Story = {
+  args: {
+    modelValue: "9094089854",
+    inputFilled: true,
+    iconType: "endIcon",
+    icon: PhoneIcon,
+  },
+  render: (args) => ({
+    components: { EUITelephone },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      const isValid = ref(args.isValid);
+
+      const onUpdateModelValue = (newValue: string) => {
+        modelValue.value = newValue;
+        args.modelValue = newValue;
+      };
+
+      const onUpdateIsValid = (newValue: boolean) => {
+        isValid.value = newValue;
+        args.isValid = newValue;
+      };
+
+      return { args, modelValue, isValid, onUpdateModelValue, onUpdateIsValid };
+    },
+    template: `<div class="max-w-md min-h-64"><EUITelephone v-bind="args" /></div>`,
+  }),
+};
+
+export const TelInputDisabled: Story = {
+  args: {
+    modelValue: "9094089854",
+    inputFilled: true,
+    iconType: "startIcon",
+    icon: PhoneIcon,
+    disabled: true,
+  },
+  render: (args) => ({
+    components: { EUITelephone },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      const isValid = ref(args.isValid);
+
+      const onUpdateModelValue = (newValue: string) => {
+        modelValue.value = newValue;
+        args.modelValue = newValue;
+      };
+
+      const onUpdateIsValid = (newValue: boolean) => {
+        isValid.value = newValue;
+        args.isValid = newValue;
+      };
+
+      return { args, modelValue, isValid, onUpdateModelValue, onUpdateIsValid };
+    },
+    template: `<div class="max-w-md min-h-64"><EUITelephone v-bind="args" /></div>`,
   }),
 };
+
+export const TelInputReadonly: Story = {
+  args: {
+    modelValue: "9094089854",
+    inputFilled: true,
+    iconType: "startIcon",
+    icon: PhoneIcon,
+    readonly: true,
+  },
+  render: (args) => ({
+    components: { EUITelephone },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      const isValid = ref(args.isValid);
+
+      const onUpdateModelValue = (newValue: string) => {
+        modelValue.value = newValue;
+        args.modelValue = newValue;
+      };
+
+      const onUpdateIsValid = (newValue: boolean) => {
+        isValid.value = newValue;
+        args.isValid = newValue;
+      };
+
+      return { args, modelValue, isValid, onUpdateModelValue, onUpdateIsValid };
+    },
+    template: `<div class="max-w-md min-h-64"><EUITelephone v-bind="args" /></div>`,
+  }),
+};

package/src/components/telephone/EUITelephone.vue

@@ -1,12 +1,19 @@
 <template>
-  <div class="relative z-0">
+  <div class="relative z-[calc(infinity)]">
+    <label
+        v-if="!inputFilled && label"
+        :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>
+
     <button
       type="button"
-      :class="disabled ? 'pointer-events-none cursor-not-allowed' : ''"
-      class="relative w-full mb-2 bg-white border border-gray-100 cursor-pointer z-1 group h-14 rounded-2xl focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600"
+      :class="[disabled ? 'pointer-events-none cursor-not-allowed bg-gray-50' : 'bg-white', inputFilled ? 'h-14 rounded-2xl' : 'h-10 rounded-md', 'relative w-full mb-2 border border-gray-100 cursor-pointer z-1 group focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600']"
       @click="focusInput"
     >
       <label
+        v-if="inputFilled"
         :for="`${name}-${id}`"
         :class="[
           getIconClass(),
@@ -30,7 +37,7 @@
       >
         <component
           :is="icon"
-          class="w-6 h-6 text-gray-400"
+          class="text-gray-400 size-6"
           aria-hidden="true"
         />
       </div>
@@ -44,9 +51,10 @@
         @blur="$emit('blur')"
       ></vue-tel-input>
     </button>
-     <EUIErrorMessage :errors="errors" :name="name" />
+
+    <EUIErrorMessage :errors="errors" :name="name" />
     <div class="errors" v-if="errorMessage">
-      <p class="mt-2 text-xs text-red-600">
+      <p class="mt-2 text-xs text-red-500">
         {{ errorMessage }}
       </p>
     </div>
@@ -62,6 +70,7 @@
       {{ tag }}
     </div>
   </div>
+
 </template>
 <script lang="ts" setup>
 import { computed, onUpdated, PropType, ref, toRefs, watch } from "vue";
@@ -126,6 +135,10 @@ const props = defineProps({
     type: [Object, String],
     default: "",
   },
+  inputFilled: {
+    type:Boolean,
+    default: false
+  }
 });
 const { isValid } = toRefs(props);
 
@@ -187,7 +200,7 @@ const bindProps = {
     styleClasses: "eui-tel_input",
   },
   dropdownOptions: {
-    disabled: false,
+    disabled: updateValue.value.readonly || updateValue.value.disabled,
     showFlags: true,
     showDialCodeInList: true,
     showSearchBox: true,
@@ -233,11 +246,11 @@ const errorMessage = computed(() => {
 const getIconClass = () => {
   switch (props.iconType) {
     case "startIcon":
-      return "pl-12 pr-4";
+      return props.inputFilled ? "pl-12 pr-4" : "normal pl-10 pr-4";
     case "endIcon":
-      return "pr-12 pl-4";
+     return props.inputFilled ? "pr-12 pl-4" : "normal pr-10 pl-4";
     default:
-      return "px-4";
+      return props.inputFilled ? "px-4" : "normal px-4";
   }
 };
 
@@ -274,7 +287,16 @@ const focusInput = () => {
     @apply w-[98%] rounded-[4px] placeholder:text-sm;
   }
   .eui-tel_input {
-    @apply z-0 h-full w-full rounded-2xl pt-6 pb-3 placeholder:text-gray-400 focus:outline-none block text-sm font-medium appearance-none disabled:opacity-75 focus:border-purple-600 autofill:bg-white leading-6;
+    @apply z-0 h-full w-full pt-6 pb-3 placeholder:text-gray-400 focus:outline-none block text-sm font-medium appearance-none focus:border-purple-600 autofill:bg-white leading-6 disabled:opacity-75 disabled:bg-transparent;
+  }
+}
+
+.vue-tel-input.eui-tel.normal {
+  .vti__dropdown {
+    @apply mt-0 p-2 ps-0 hover:bg-transparent open:bg-transparent bg-transparent;
+  }
+  .eui-tel_input {
+    @apply rounded-md py-2;
   }
 }
 </style>

package/src/components/textArea/EUITextArea.stories.ts

@@ -37,6 +37,15 @@ const meta = {
       description:
         "Validation errors object, with field names as keys and error messages as values.",
     },
+    inputFilled: {
+      control: "boolean",
+      description: "Toggles the alternate Textarea filled design.",
+      defaultValue: false,
+      table: {
+        type: { summary: "Boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
   },
 } satisfies Meta<typeof EUITextarea>;
 
@@ -54,6 +63,49 @@ export const Default: Story = {
   },
 };
 
+export const inputFilled: Story = {
+  args: {
+    label: "Description",
+    modelValue: "",
+    rows: 3,
+    cols: 150,
+    placeholder: "Enter some description here...",
+    inputFilled: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Toggles the alternate Textarea Filled design.",
+      },
+    },
+  },
+};
+
+export const inputFilledDisabled: Story = {
+  args: {
+    label: "Description",
+    modelValue: "",
+    rows: 3,
+    cols: 150,
+    placeholder: "Enter some description here...",
+    inputFilled: true,
+    disabled: true,
+  },
+};
+
+export const inputFilledReadonly: Story = {
+  args: {
+    label: "Description",
+    rows: 3,
+    cols: 150,
+    placeholder: "Enter some description here...",
+    inputFilled: true,
+    readonly: true,
+    modelValue:
+      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum porro quia hic sed voluptatem, laudantium dignissimos sequi illo quasi error maxime vel nam deleniti adipisci itaque.",
+  },
+};
+
 // Story to demonstrate textarea with an error message
 export const WithError: Story = {
   args: {

package/src/components/textArea/EUITextArea.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="relative">
     <button
+      v-if="inputFilled"
       :class="[
-        disabled ? 'pointer-events-none cursor-not-allowed' : '',
+        disabled ? 'pointer-events-none cursor-not-allowed bg-gray-50' : '',
         'group transition-all duration-100 ease-in-out outline-none border-none z-0 focus:border-purple-600 min-h-[4.5rem] mb-2 relative w-full rounded-md ring-1 ring-gray-200 focus-within:ring-2 focus-within:ring-purple-600 cursor-pointer overflow-hidden;',
       ]"
       @click="focusInput"
@@ -13,20 +14,20 @@
           inputValue
             ? 'top-2 text-xs text-gray-400 cursor-default'
             : 'top-4 text-sm text-gray-700 cursor-pointer pb-2',
-          disabled ? 'cursor-not-allowed' : '',
+          disabled ? 'cursor-not-allowed bg-gray-50' : 'bg-white',
           required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
+          'absolute left-0 z-10 w-full h-auto px-4 font-medium leading-normal text-left transition-all duration-300 ease-in-out transform translate-y-0 group-focus-within:top-2 group-focus-within:bg-transparent group-focus-within:py-0 group-focus-within:h-auto'
         ]"
-        class="absolute left-0 z-10 w-full h-auto px-4 font-medium leading-normal text-left transition-all duration-100 ease-in-out transform translate-y-0 bg-white group-focus-within:top-2 group-focus-within:py-0"
       >
         {{ label }}
       </label>
       <textarea
         ref="inputRef"
-        :class="[errors ? 'border-red-500' : '']"
-        class="min-h-[4.5rem] max-h-40 appearance-none block w-full px-4 py-2 placeholder:text-gray-400 text-sm font-medium relative z-0 mt-4 bg-transparent border-none focus:outline-none focus:shadow-none focus-within:outline-none focus:border-none disabled:opacity-75 autofill:bg-white leading-6 placeholder:capitalize rounded-2xl"
+        :class="['min-h-[4.5rem] max-h-40 appearance-none block w-full px-4 py-2 placeholder:text-gray-400 text-sm font-medium relative z-0 mt-4 bg-transparent border-none focus:outline-none focus:shadow-none focus-within:outline-none focus:border-none disabled:opacity-75 autofill:bg-white leading-6 placeholder:capitalize rounded-2xl' ,{'border-red-500': errors}]"
         :placeholder="placeholder"
         v-model="localValue"
         :disabled="disabled"
+        :readonly="readonly"
         :autofocus="autoFocus"
         aria-invalid="true"
         :rows="rows"
@@ -37,6 +38,28 @@
       </textarea>
     </button>
 
+    <div v-else>
+      <label
+        v-if="label"
+        :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>
+      <textarea
+        ref="inputRef"
+        :class="['min-h-[4.5rem] max-h-40 appearance-none block w-full px-4 py-2 placeholder:text-gray-400 text-sm font-medium relative z-0 bg-transparent border-gray-100 focus:outline-none focus:shadow-none focus-within:outline-none focus:border-purple-600 disabled:opacity-75 autofill:bg-white leading-6 placeholder:capitalize rounded-md border-solid border focus-within:ring-1 focus-within:ring-purple-600 transition-colors duration-300 ease-in-out',{'border-red-500': errors}]"
+        v-model="localValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+        :autofocus="autoFocus"
+        aria-invalid="true"
+        :rows="rows"
+        :cols="cols"
+        @input="$emit('update:modelValue', localValue)"
+        @blur="$emit('blur')"
+        >
+      </textarea>
+    </div>
   </div>
   <EUIErrorMessage :errors="errors" :name="name" />
 </template>
@@ -94,6 +117,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  inputFilled: {
+    type:Boolean,
+    default: false
+  }
 });
 
 const { label, rows, cols, placeholder } = props;

package/dist/EUIButton.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EUIButton.vue.d.ts","sourceRoot":"","sources":["../src/components/button/EUIButton.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,wGAAwG,CAAC;AAC/H,cAAc,wGAAwG,CAAC;AACvH,OAAO,sGAAsG,CAAC;AAC9G,eAAe,SAAS,CAAC"}

package/dist/input/EUIInput.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EUIInput.vue.d.ts","sourceRoot":"","sources":["../../src/components/input/EUIInput.vue"],"names":[],"mappings":"AACA,cAAc,sGAAsG,CAAC;AACrH,OAAO,oHAAoH,CAAC;;AAE5H,wBAA0F"}

package/dist/inputNormal/EUIInputNormal.vue.d.ts

@@ -1,5 +0,0 @@
-export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/inputNormal/EUIInputNormal.vue?vue&type=script&setup=true&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/inputNormal/EUIInputNormal.vue?vue&type=style&index=0&scoped=17f24ec5&lang.scss";
-declare const _default: any;
-export default _default;
-//# sourceMappingURL=EUIInputNormal.vue.d.ts.map

package/dist/inputNormal/EUIInputNormal.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EUIInputNormal.vue.d.ts","sourceRoot":"","sources":["../../src/components/inputNormal/EUIInputNormal.vue"],"names":[],"mappings":"AACA,cAAc,kHAAkH,CAAC;AACjI,OAAO,gIAAgI,CAAC;;AAExI,wBAA0F"}

package/src/components/inputNormal/EUIInputNormal.stories.ts

@@ -1,164 +0,0 @@
-import { expect, userEvent, within } from "@storybook/test";
-import type { Meta, StoryObj } from "@storybook/vue3";
-import EUIInputNormal from "./EUIInputNormal.vue";
-import { UserCircleIcon } from "@heroicons/vue/24/outline";
-
-// Meta configuration for the component's stories
-const meta = {
-  title: "Forms/InputNormal",
-  component: EUIInputNormal,
-  tags: ["autodocs"],
-  argTypes: {
-    modelValue: {
-      control: "text",
-      description:
-        "The value of the input. This is a two-way binding property, used to reflect the current value of the input field.",
-    },
-    name: {
-      control: "text",
-      description:
-        "The `name` attribute of the input, typically used for form identification and validation.",
-    },
-    label: {
-      control: "text",
-      description:
-        "The label for the input field, usually displayed above or inside the input.",
-    },
-    type: {
-      control: {
-        type: "select",
-        options: [
-          "text",
-          "number",
-          "email",
-          "password",
-          "search",
-          "date",
-          "url",
-        ],
-      },
-      description:
-        "Specifies the type of input, such as `text`, `number`, `email`, etc.",
-    },
-    placeholder: {
-      control: "text",
-      description:
-        "A short hint that describes the expected value when the input is empty.",
-    },
-    autoFocus: {
-      control: "boolean",
-      description:
-        "Automatically focuses the input field when the page loads or the component mounts.",
-    },
-    required: {
-      control: "boolean",
-      description:
-        "Marks the field as required, showing validation for non-empty input.",
-    },
-    readonly: {
-      control: "boolean",
-      description:
-        "Makes the input field read-only, which means users can see the value but cannot edit it.",
-    },
-    disabled: {
-      control: "boolean",
-      description:
-        "Disables the input field, making it uneditable and unclickable.",
-    },
-    iconType: {
-      control: "select",
-      options: ["", "startIcon", "endIcon"],
-      description:
-        "Defines the position of the icon. It can be placed at the `start` or `end` of the input field.",
-    },
-    icon: {
-      control: { type: "text" },
-      description:
-        "Specifies an SVG icon or icon component to be displayed inside the input field.",
-    },
-    errors: {
-      control: "object",
-      description:
-        "An object containing error messages or validation information, typically used for form validation.",
-    },
-    rounded: {
-      control: "boolean",
-      description: "rounded the input field.",
-    },
-    className: {
-      control: "text",
-      description: "Required design to add class",
-    },
-  },
-} satisfies Meta<typeof EUIInputNormal>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Default story with minimum props
-export const Default: Story = {
-  argTypes: {
-    type: {
-      control: "select",
-      options: ["text", "number", "email", "password", "search", "date"],
-    },
-  },
-  args: {
-    label: "Username",
-    type: "text",
-    placeholder: "Enter fullname here..",
-  },
-};
-
-export const InputValue: Story = {
-  args: {
-    label: "User Name",
-    type: "text",
-    placeholder: "Enter fullname here..",
-    modelValue: "John Cena",
-  },
-  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 IconUsingStart: Story = {
-  args: {
-    label: "User Name",
-    type: "text",
-    placeholder: "Enter fullname here..",
-    modelValue: "John Cena",
-    disabled: false,
-    iconType: "startIcon",
-    icon: UserCircleIcon,
-  },
-  render: (args) => ({
-    components: { EUIInputNormal },
-    setup() {
-      return { args };
-    },
-    template: '<EUIInputNormal v-bind="args" />',
-  }),
-};
-
-export const IconUsingEnd: Story = {
-  args: {
-    label: "User Name",
-    type: "text",
-    placeholder: "Enter fullname here..",
-    modelValue: "John Cena",
-    disabled: false,
-    iconType: "endIcon",
-    icon: UserCircleIcon,
-  },
-  render: (args) => ({
-    components: { EUIInputNormal },
-    setup() {
-      return { args };
-    },
-    template: '<EUIInputNormal v-bind="args" />',
-  }),
-};