edvoyui-component-library-test-flight 0.0.23 → 0.0.24

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "edvoyui-component-library-test-flight",
   "private": false,
-  "version": "0.0.23",
+  "version": "0.0.24",
   "type": "module",
   "files": [
     "dist/",
@@ -44,15 +44,15 @@
     "vue-tel-input": "^9.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^8.3.1",
-    "@storybook/addon-interactions": "^8.3.1",
-    "@storybook/addon-links": "^8.3.1",
-    "@storybook/addon-onboarding": "^8.3.1",
-    "@storybook/blocks": "^8.3.1",
-    "@storybook/builder-vite": "^8.3.1",
-    "@storybook/test": "^8.3.1",
-    "@storybook/vue3": "^8.3.1",
-    "@storybook/vue3-vite": "^8.3.1",
+    "@storybook/addon-essentials": "^8.4.4",
+    "@storybook/addon-interactions": "^8.4.4",
+    "@storybook/addon-links": "^8.4.4",
+    "@storybook/addon-onboarding": "^8.4.4",
+    "@storybook/blocks": "^8.4.4",
+    "@storybook/builder-vite": "^8.4.4",
+    "@storybook/test": "^8.4.4",
+    "@storybook/vue3": "^8.4.4",
+    "@storybook/vue3-vite": "^8.4.4",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/typography": "^0.5.15",
     "@types/vue-select": "^3.16.8",
@@ -60,7 +60,7 @@
     "@vitejs/plugin-vue": "^5.1.2",
     "path": "^0.12.7",
     "rollup-plugin-typescript2": "^0.36.0",
-    "storybook": "^8.3.1",
+    "storybook": "^8.4.4",
     "typescript": "^5.5.3",
     "vite": "^5.4.1",
     "vite-plugin-css-injected-by-js": "^3.5.2",

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

@@ -39,6 +39,10 @@ const meta = {
         "Enables date range selection, allowing users to pick a start and end date.",
       defaultValue: false,
     },
+    timePicker: {
+      control: "boolean",
+      description: "Allows time selection in addition to the date if true.",
+    },
     required: {
       control: "boolean",
       description: "Marks the datepicker as a required field.",
@@ -72,11 +76,6 @@ const meta = {
       description:
         "Shows a clear icon inside the datepicker to reset the date.",
     },
-    formatDate: {
-      control: "boolean",
-      description:
-        "Formats the displayed date value; if true, a formatted date string is shown.",
-    },
     disableDate: {
       control: "boolean",
       description:
@@ -86,9 +85,10 @@ const meta = {
       control: "boolean",
       description: "Enables quarter selection instead of date selection.",
     },
-    timePicker: {
+    formatDate: {
       control: "boolean",
-      description: "Allows time selection in addition to the date if true.",
+      description:
+        "Formats the displayed date value; if true, a formatted date string is shown.",
     },
   },
 } satisfies Meta<typeof EUIDatepicker>;
@@ -160,6 +160,50 @@ const datepickerRange = ref([new Date(), new Date(new Date().setDate(new Date().
   },
 };
 
+export const TimeOnly: Story = {
+  args: {
+    placeholder: "Select your time",
+    label: "Time",
+    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-xl min-h-64"><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 IconUsingStart: Story = {
   args: {
     iconType: "startIcon",

package/src/components/datepicker/EUIDatepicker.vue

@@ -31,7 +31,7 @@
           aria-hidden="true"
         />
       </div>
-<VueDatePicker
+    <VueDatePicker
       locale="en-US"
       :name="name"
       :placeholder="placeholder"
@@ -45,9 +45,10 @@
       :disabled="disabled"
       :readonly="readonly"
       :disabled-dates="disableDate ? disabledDates : undefined"
-      :enable-time-picker="timePicker"
-      :enable-seconds="timePicker"
-      :is-24="timePicker"
+      :time-picker="timePicker"
+      :enable-time-picker="false"
+      :enable-seconds="false"
+      :is-24="false"
       :dark="false"
       :inline="false"
       :text-input="false"
@@ -67,7 +68,7 @@ import "@vuepic/vue-datepicker/dist/main.css";
 
 const props = defineProps({
   modelValue: {
-    type: Date,
+    type: Date as any,
     default: "",
   },
    name: {
@@ -114,7 +115,13 @@ 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 datepicker = ref(props.modelValue ? props.modelValue : props.range ? [startDate.value, endDate.value] : startDate.value);
+
+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);
 
 watch(
   datepicker,
@@ -151,7 +158,7 @@ const clearIconRight = computed(() => (props.iconType === 'endIcon' ? '40px' : '
 }
 
 .eui-datepicker {
-    @apply min-w-96;
+    @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;

package/src/components/delete.vue

@@ -19,6 +19,42 @@
       </div>
     </div>
 
+
+    <div class="grid max-w-3xl gap-4 mx-auto sm:grid-cols-3">
+    <div>
+      <EUIDatepicker
+        v-model:modelValue="datepickerRange"
+        label="Datepicker Range"
+        placeholder="Select Date here..."
+        :range="true"
+        required
+      />
+    </div>
+
+    <div>
+      <EUIDatepicker
+        :disabled="false"
+        label="Datepicker Single"
+        v-model:modelValue="singleDate"
+        placeholder="Select your date"
+        :readonly="false"
+        required
+      />
+    </div>
+
+    <div>
+      <EUIDatepicker
+        v-model:modelValue="timepicker"
+        :disabled="false"
+        label="Time Picker"
+        placeholder="Select your time"
+        :readonly="false"
+        required
+        :timePicker="true"
+      />
+    </div>
+  </div>
+
     <EUITable
       :checkable="true"
       paginated
@@ -67,6 +103,20 @@ import { capitalizeText } from "../utils/lodash";
 import EUITable from "./table/EUITable.vue";
 import EUITooltip from "./tooltip/EUITooltip.vue";
 import EUISearch from "./searchInput/EUISearch.vue";
+import EUIDatepicker from "./datepicker/EUIDatepicker.vue";
+
+// TODO: Datepicker
+const datepickerRange = ref([
+  new Date(),
+  new Date(new Date().setDate(new Date().getDate() + 7)),
+]);
+
+const singleDate = ref(new Date());
+
+const timepicker = ref({
+  hours: new Date().getHours(),
+  minutes: new Date().getMinutes(),
+});
 
 //TODO: Dashboard Table
 const checkedRows = ref([]);