edvoyui-component-library-test-flight 0.0.168 → 0.0.170

package/src/components/datepicker/EUIDatepicker.vue

@@ -1,295 +0,0 @@
-<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="[
-        { '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',
-          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',
-        ]"
-      >
-        {{ label || 'Datepicker' }}
-      </label>
-      <div
-        v-if="icon && iconType"
-        :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
-          :is="icon"
-          class="w-6 h-6 text-gray-400"
-          aria-hidden="true"
-        />
-      </div>
-      <VueDatePicker
-        locale="en-US"
-        :name="name"
-        :placeholder="placeholder"
-        :model-value="datepicker"
-        :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="autoApply"
-        :hide-input-icon="true"
-        position="left"
-        :multi-calendars="multiCalendars"
-        :min-date="minDate"
-        :max-date="maxDate"
-        :format="format"
-        :config="config"
-        @update:model-value="handleDate"
-      />
-    </div>
-    <template v-if="errors && Object.keys(errors).length">
-      <EUIErrorMessage :errors="errors" :name="name" class="mt-2" />
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, toRefs, watch } from 'vue'
-import type { PropType } from 'vue'
-import VueDatePicker from '@vuepic/vue-datepicker'
-import '@vuepic/vue-datepicker/dist/main.css'
-import EUIErrorMessage from '../errorMessage/EUIErrorMessage.vue';
-
-const props = defineProps({
-  modelValue: {
-    type: Date as any,
-    default: '',
-  },
-  format: {
-    type: [String, Function] as PropType<
-      string | ((date: Date) => string) | ((dates: Date[]) => string)
-    >,
-    default: 'dd/MM/yyyy', // Default format  dd/MM/yyyy HH:mm
-  },
-  maxDate: {
-    type: Date as any,
-    default: '',
-  },
-  minDate: {
-    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: '',
-  },
-  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,
-  multiCalendars: Boolean,
-  autoApply: {
-    type: Boolean,
-    default: true,
-  },
-  inputFilled: {
-    type: Boolean,
-    default: false,
-  },
-  config: {
-    type: Object,
-    required: false,
-    default: () => {},
-  },
-})
-const emit = defineEmits(['update:modelValue'])
-const { 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);
-
-const datepicker = ref(props.modelValue || (props.range ? [] : null))
-
-//Date clear
-watch(
-  () => props.modelValue,
-  newValue => {
-    if (
-      newValue === null ||
-      newValue === undefined ||
-      (Array.isArray(newValue) && newValue.length === 0)
-    ) {
-      datepicker.value = props.range ? [] : null
-    } else {
-      datepicker.value = newValue
-    }
-  },
-  { immediate: true },
-)
-
-const handleDate = (modelData: any) => {
-  datepicker.value = modelData
-  emit('update:modelValue', modelData)
-}
-
-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">
-:root {
-  --dp-menu-width: 232px;
-  --dp-menu-min-width: 232px;
-}
-.dp__theme_light {
-  --dp-primary-color: rgba(139, 92, 246, 1);
-  --dp-row-margin: 2px 0;
-  --dp-cell-size: 36px;
-}
-
-.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);
-    }
-  }
-  &.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 {
-    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;
-  }
-}
-.dp__calendar_header {
-  @apply text-sm font-medium;
-}
-.dp__cell_inner {
-  height: var(--dp-cell-size);
-  width: var(--dp-cell-size);
-  @apply text-sm font-normal;
-}
-.dp__month_year_wrap {
-  @apply text-sm font-semibold;
-}
-.dp__calendar_row {
-  margin: var(--dp-row-margin);
-}
-</style>

package/src/components/delete.vue

@@ -1,262 +0,0 @@
-<!-- <template>
-  <div class="py-4">
-    <div
-      class="flex flex-row items-center justify-end max-w-screen-xl gap-6 mx-auto mb-10"
-    >
-      <div class="flex-1">
-        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad quibusdam
-        illo nisi recusandae impedit nulla possimus, et delectus necessitatibus
-        tempora maxime maiores dolores voluptates nemo ratione officia suscipit
-        voluptatum iure.
-      </div>
-      <div class="relative size-10">
-        <div class="absolute top-0 right-0"><EUISearchExpand /></div>
-      </div>
-      <div class="inline-flex flex-row gap-2">
-        <EUISearchToggle
-          v-model:model-value="inputSearch"
-          v-model:search-sync="showSearch"
-        />
-        <EUIButton color="primary" rounded size="sm" @click="toggleSearch"
-          >Close</EUIButton
-        >
-      </div>
-      <div class="relative border border-red-500 rounded-full size-12">
-        <div class="absolute top-0 right-0"><EUISearch /></div>
-      </div>
-      <div>
-        <EUITooltip placement="top">
-          <template v-slot:default>
-            <button class="px-4 py-2 text-white bg-gray-800 rounded">
-              Hover here
-            </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 mb-6 sm:grid-cols-3">
-      <div>
-        <EUIDatepicker
-          v-model:modelValue="datepickerRange"
-          label="Date Min and max"
-          placeholder="Select Date here..."
-          :range="true"
-          required
-          :icon="CalendarIcon"
-          iconType="startIcon"
-          :min-date="minDate"
-          :max-date="maxDate"
-        />
-      </div>
-      <div>
-        <EUIDatepicker
-          v-model:modelValue="datepickerRange"
-          label="Datepicker Range multi"
-          placeholder="Select Date here..."
-          :range="true"
-          :multi-calendars="true"
-          required
-          :icon="CalendarIcon"
-          iconType="startIcon"
-        />
-        <EUIButton @click="resetFilter">Reset</EUIButton>
-      </div>
-      <div>
-        <EUIDatepicker
-          v-model:modelValue="datepickerRange"
-          label="Datepicker Range"
-          placeholder="Select Date here..."
-          :range="true"
-          required
-          :icon="CalendarIcon"
-          iconType="startIcon"
-        />
-      </div>
-      <div>
-        <EUIDatepicker
-          :disabled="false"
-          label="Datepicker Single"
-          v-model:modelValue="singleDate"
-          placeholder="Select your date"
-          :readonly="false"
-          required
-          :icon="CalendarIcon"
-          iconType="endIcon"
-        />
-      </div>
-      <div>
-        <EUIDatepicker
-          v-model:modelValue="timepicker"
-          :disabled="false"
-          label="Time Picker"
-          placeholder="Select your time"
-          :readonly="false"
-          required
-          :timePicker="true"
-        />
-      </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
-      :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";
-import { CalendarIcon } from "@heroicons/vue/24/solid";
-import EUIButton from "./button/EUIButton.vue";
-import EUISearchToggle from "./searchexpand/EUISearchToggle.vue";
-import EUISearchExpand from "./searchexpand/EUISearchExpand.vue";
-
-// TODO: Datepicker
-const datepickerRange = ref([
-  new Date(),
-  new Date(new Date().setDate(new Date().getDate() + 7)),
-]);
-
-const singleDate = ref(new Date());
-
-const inputSearch = ref("");
-const showSearch = ref(true);
-
-const toggleSearch = () => {
-  showSearch.value = !showSearch.value;
-};
-
-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;
-  });
-};
-
-const resetFilter = () => {
-  datepickerRange.value = [];
-};
-
-const minDate = ref(new Date(2024, 11));
-const maxDate = ref(new Date());
-</script>
-
-<style scoped></style> -->