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

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,18 +119,24 @@ 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);
-const startDate = ref(new Date());
-const endDate = ref(new Date(new Date().setDate(startDate.value.getDate() + 7)));
+// const startDate = ref(new Date());
+// const endDate = ref(new Date(new Date().setDate(startDate.value.getDate() + 7)));
 
-const time = ref({
-  hours: new Date().getHours(),
-  minutes: new Date().getMinutes()
-});
+// const time = ref({
+//   hours: new Date().getHours(),
+//   minutes: new Date().getMinutes()
+// });
+
+// const datepicker = ref( props.modelValue ? props.modelValue : props.timePicker ? time.value : props.range ? [startDate.value, endDate.value] : startDate.value);
 
-const datepicker = ref( props.modelValue ? props.modelValue : props.timePicker ? time.value : props.range ? [startDate.value, endDate.value] : startDate.value);
+const datepicker = ref(props.modelValue)
 
 watch(
   datepicker,
@@ -158,7 +173,7 @@ const clearIconRight = computed(() => (props.iconType === 'endIcon' ? '40px' : '
 }
 
 .eui-datepicker {
-    @apply min-w-56;
+  @apply min-w-56;
   .dp__main {
     .dp__input {
       @apply pb-2 pt-6 border-0 transition-colors duration-100 ease-in-out text-sm font-medium leading-6 placeholder:text-gray-400 placeholder:font-normal;
@@ -173,6 +188,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";