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

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

@@ -0,0 +1,280 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUIDatepicker from "./EUIDatepicker.vue";
+import { ref } from "vue";
+import { CalendarDaysIcon } from "@heroicons/vue/24/outline";
+
+// Meta configuration for the component's stories
+const meta = {
+  title: "Forms/Datepicker",
+  component: EUIDatepicker,
+  tags: ["autodocs"],
+  argTypes: {
+    modelValue: {
+      control: "date",
+      description: "The selected date value of the datepicker.",
+    },
+    name: {
+      control: "text",
+      description:
+        "Name for the Validation of Datepicker field, used for identification.",
+    },
+    label: {
+      control: "text",
+      description:
+        "Label for the datepicker field that is displayed above the input.",
+    },
+    placeholder: {
+      control: "text",
+      description:
+        "Placeholder text shown inside the datepicker input when no date is selected.",
+    },
+    errors: {
+      control: "object",
+      description:
+        "Object containing validation errors. The keys are field names, and the values are the corresponding error messages.",
+    },
+    range: {
+      control: "boolean",
+      description:
+        "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.",
+    },
+    readonly: {
+      control: "boolean",
+      description: "Makes the datepicker read-only, preventing date selection.",
+    },
+    disabled: {
+      control: "boolean",
+      description:
+        "Disables the datepicker, making it uneditable and unclickable.",
+    },
+    iconType: {
+      control: "select",
+      options: ["", "startIcon", "endIcon"],
+      description:
+        "The position of the icon to be displayed either at the start or end of the input field.",
+    },
+    icon: {
+      control: { type: "text" },
+      description: "Sets an SVG icon inside the datepicker input field.",
+    },
+    isUtc: {
+      control: "boolean",
+      description:
+        "Sets the selected date in UTC format if true, otherwise in local time.",
+    },
+    clearIcon: {
+      control: "boolean",
+      description:
+        "Shows a clear icon inside the datepicker to reset the date.",
+    },
+    disableDate: {
+      control: "boolean",
+      description:
+        "Disables past dates if true, preventing them from being selected.",
+    },
+    quarter: {
+      control: "boolean",
+      description: "Enables quarter selection instead of date selection.",
+    },
+    formatDate: {
+      control: "boolean",
+      description:
+        "Formats the displayed date value; if true, a formatted date string is shown.",
+    },
+  },
+} satisfies Meta<typeof EUIDatepicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story with minimum props
+export const Default: Story = {
+  args: {
+    placeholder: "Select your date",
+    label: "Datepicker",
+    modelValue: new Date(),
+    required: true,
+    readonly: false,
+    disabled: false,
+    errors: {
+      message: "Enter valid date format",
+    },
+  },
+  render: (args) => ({
+    components: { EUIDatepicker },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      return { args, modelValue };
+    },
+    template: `<div class="max-w-xl min-h-64"><EUIDatepicker v-bind="args" /></div>`,
+  }),
+};
+
+export const DateRange: Story = {
+  args: {
+    placeholder: "Choose your date range...",
+    label: "Datepicker",
+    range: true,
+    required: true,
+    readonly: false,
+    disabled: false,
+    errors: {
+      message: "Enter valid date format",
+    },
+  },
+  render: (args) => ({
+    components: { EUIDatepicker },
+    setup() {
+      const startDate = new Date();
+      const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
+      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>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<script lang="ts" setup>
+const datepickerRange = ref([new Date(), new Date(new Date().setDate(new Date().getDate() + 7))]);
+</script>
+<template>
+<EUIDatepicker
+  v-model="datepickerRange"
+  label="Datepicker"
+  placeholder="Select Date here..."
+  :range="true"
+/>
+</template>`,
+      },
+    },
+  },
+};
+
+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",
+    icon: CalendarDaysIcon,
+  },
+  render: (args) => ({
+    components: { EUIDatepicker, CalendarDaysIcon },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      return { args, modelValue };
+    },
+    template: `<div class="max-w-xl min-h-64"><EUIDatepicker v-bind="args" /></div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<template>
+        <EUIDatepicker
+        v-model="datepicker"
+        :icon="CalendarDaysIcon"
+        icon-type="startIcon"
+        label="Datepicker"
+        placeholder="Select Date here..."
+      />
+      </template>`,
+      },
+    },
+  },
+};
+
+export const IconUsingEnd: Story = {
+  args: {
+    iconType: "endIcon",
+    icon: CalendarDaysIcon,
+  },
+  render: (args) => ({
+    components: { EUIDatepicker, CalendarDaysIcon },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      return { args, modelValue };
+    },
+    template: `<div class="max-w-xl min-h-64"><EUIDatepicker v-bind="args" /></div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<template>
+        <EUIDatepicker
+        v-model="datepicker"
+        :icon="CalendarDaysIcon"
+        icon-type="endIcon"
+        label="Datepicker"
+        placeholder="Select Date here..."
+      />
+      </template>`,
+      },
+    },
+  },
+};
+
+export const DateSelected: Story = {
+  args: {
+    modelValue: new Date(),
+    disabled: false,
+  },
+  render: (args) => ({
+    components: { EUIDatepicker },
+    setup() {
+      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>`,
+  }),
+};

package/src/components/datepicker/EUIDatepicker.vue

@@ -0,0 +1,192 @@
+<template>
+  <div>
+    <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"
+    >
+    <label
+        :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',
+          disabled ? ' cursor-not-allowed' : '',
+          required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
+        ]"
+        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>
+      <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' : '',
+        ]"
+      >
+        <component
+          :is="icon"
+          class="w-6 h-6 text-gray-400"
+          aria-hidden="true"
+        />
+      </div>
+    <VueDatePicker
+      locale="en-US"
+      :name="name"
+      :placeholder="placeholder"
+      v-model="datepicker"
+      :value="modelValue"
+      :utc="isUtc"
+      :range="range"
+      :teleport="true"
+      :clearable="clearIcon"
+      :required="required"
+      :disabled="disabled"
+      :readonly="readonly"
+      :disabled-dates="disableDate ? disabledDates : undefined"
+      :time-picker="timePicker"
+      :enable-time-picker="false"
+      :enable-seconds="false"
+      :is-24="false"
+      :dark="false"
+      :inline="false"
+      :text-input="false"
+      auto-apply
+      :hide-input-icon="true"
+      position="left"
+      />
+    </div>
+    <EUIErrorMessage :errors="errors" :name="name" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType, ref, toRefs, watch } from "vue";
+import VueDatePicker from "@vuepic/vue-datepicker";
+import "@vuepic/vue-datepicker/dist/main.css";
+
+const props = defineProps({
+  modelValue: {
+    type: Date as any,
+    default: "",
+  },
+   name: {
+    type: String,
+    required: false,
+    default: "date-picker",
+  },
+  isUtc: {
+    type: Boolean,
+    default: true,
+  },
+  clearIcon: {
+    type: Boolean,
+    default: true,
+  },
+  placeholder: {
+    type: String,
+    default: 'Choose your date',
+  },
+  label: {
+    type: String,
+    required: true,
+    default: "Datepicker",
+  },
+  iconType: {
+    type: String as PropType<"startIcon" | "endIcon">,
+    default: "",
+  },
+  icon: {
+    type: [Object, String],
+    default: "",
+  },
+  errors: { type: Object, required: false, default: () => {} },
+  timePicker: Boolean,
+  quarter: Boolean,
+  disableDate: Boolean,
+  formatDate: Boolean,
+  readonly: Boolean,
+  disabled:Boolean,
+  required: Boolean,
+  range:Boolean,
+});
+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 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,
+  (newDate) => {
+    emit("update:modelValue", newDate);
+  }
+);
+
+const disabledDates = (date: Date) => {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  return date < today;
+};
+
+const getIconClass = () => {
+  switch (props.iconType) {
+    case "startIcon":
+      return "pl-12 pr-4";
+    case "endIcon":
+      return "pr-12 pl-4";
+    default:
+      return "px-4";
+  }
+};
+
+const iconshowLeft = computed(() => (props.iconType === 'startIcon' ? "46px" : "16px"));
+const iconshowRight = computed(() => (props.iconType === 'endIcon' ? "46px" : "16px"));
+const clearIconRight = computed(() => (props.iconType === 'endIcon' ? '40px' : '0px'));
+</script>
+
+<style lang="scss">
+.dp__theme_light {
+    --dp-primary-color: rgba(139, 92, 246, 1);
+}
+
+.eui-datepicker {
+    @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;
+      padding-left: v-bind(iconshowLeft);
+      padding-right: v-bind(iconshowRight);
+    }
+    .dp__input.dp__input_focus {
+        @apply ring-2 ring-purple-600 rounded-2xl ring-inset h-[3.365rem];
+    }
+    .dp--clear-btn {
+        right: v-bind(clearIconRight);
+    }
+  }
+
+  .dp__range_end,
+  .dp__range_start,
+  .dp__active_date {
+    background-color: var(--dp-primary-color);
+    color: #fff;
+  }
+
+  .dp__today {
+    border-color: var(--dp-primary-color);
+  }
+
+  .dp__action_select:hover {
+    background-color: var(--dp-primary-color);
+    color: #fff;
+  }
+}
+</style>

package/src/components/delete.vue

@@ -0,0 +1,158 @@
+<!-- <template>
+  <div class="py-4">
+    <div
+      class="flex flex-row items-center justify-end max-w-screen-xl gap-6 mx-auto mb-10"
+    >
+      <EUISearch />
+
+      <div>
+        <EUITooltip placement="top">
+          <template v-slot:default>
+            <button class="px-4 py-2 text-white bg-gray-800 rounded">
+              Hover rihgt
+            </button>
+          </template>
+          <template v-slot:tooltip>
+            <div>You've got access to canvas. Collaborate with ChatGPT!</div>
+          </template>
+        </EUITooltip>
+      </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
+      :checked-rows.sync="checkedRows"
+      backend-pagination
+      :per-page="limit"
+      :headers="studentHeader"
+      :items="studentData"
+      :total="totalCount"
+      :default-sort-direction="defaultSortOrder"
+      default-sort=""
+      :current-page="offset"
+      table-height="h-[calc(100svh-20rem)] max-h-[calc(100svh-20rem)]"
+      @changePage="onPageChange"
+      @changeLimit="onChangeLimit"
+      @sort="onSort"
+      @mouseenter="select"
+      @mouseleave="(selectedIndex = null), (selected = null)"
+    >
+      <template #[`item.firstName`]="{ row, rowIndex }">
+        <div class="space-y-0.5">
+          <div class="block text-sm font-medium leading-snug">
+            {{
+              capitalizeText(row?.firstName) +
+              " " +
+              capitalizeText(row?.lastName)
+            }}
+          </div>
+          <div class="text-xs font-medium text-gray-900 leading-[normal]">
+            {{ row?.referenceId }}
+          </div>
+        </div>
+      </template>
+      <template #[`item.activeUser`]="{ row, rowIndex }">
+        {{ row?.activeUser?.user?.firstName }}
+        {{ row?.activeUser?.user?.lastName }}
+      </template>
+    </EUITable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { studentData, studentHeader, tableData } from "../data/table";
+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([]);
+const defaultSortOrder = ref("asc");
+const limit = ref(5);
+const offset = ref(0);
+const selectedIndex = ref(null);
+const selected: { index: string } = { index: "" };
+
+const totalCount = computed(() => {
+  return studentData.length;
+});
+
+const select = (_item: any, index: any) => {
+  selectedIndex.value = index;
+};
+
+// onChangeLimit
+const onChangeLimit = (page: number) => {
+  limit.value = page;
+  console.log("@onChangeLimit:", page);
+};
+
+const onPageChange = (offsetData: number) => {
+  offset.value = offsetData;
+  console.log("@changePage:", offsetData);
+};
+
+const onSort = (field: string, order: string) => {
+  const modifier = order === "desc" ? -1 : 1;
+  tableData.sort((a: any, b: any) => {
+    if (a[field] < b[field]) return -1 * modifier;
+    if (a[field] > b[field]) return 1 * modifier;
+    return 0;
+  });
+};
+</script>
+
+<style scoped></style> -->