edvoyui-component-library-test-flight 0.0.89 → 0.0.91

package/src/components/datepicker/EUIDatepicker.vue

@@ -1,18 +1,24 @@
 <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>
+      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']"
+      :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
+      <label
         v-if="inputFilled"
         :class="[
           getIconClass(),
@@ -21,17 +27,18 @@
             : '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'
+          '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 || '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'
+          inputFilled ? 'inset-y-0' : 'top-2',
+          'absolute z-10 flex items-center pointer-events-none',
         ]"
       >
         <component
@@ -40,35 +47,35 @@
           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="autoApply"
-      :hide-input-icon="true"
-      position="left"
-      :multi-calendars="multiCalendars"
-      :min-date="minDate"
-      :max-date="maxDate"
-      :format="format" 
-      :config="config"
+      <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>
     <EUIErrorMessage :errors="errors" :name="name" />
@@ -76,35 +83,34 @@
 </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";
+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'
 
 const props = defineProps({
   modelValue: {
     type: Date as any,
-    default: "",
+    default: '',
   },
   format: {
     type: [String, Function] as PropType<
-      | string
-      | ((date: Date) => string)
-      | ((dates: Date[]) => string)
+      string | ((date: Date) => string) | ((dates: Date[]) => string)
     >,
     default: 'dd/MM/yyyy', // Default format  dd/MM/yyyy HH:mm
   },
   maxDate: {
     type: Date as any,
-    default: "",
+    default: '',
   },
   minDate: {
     type: Date as any,
-    default: "",
+    default: '',
   },
   name: {
     type: String,
     required: false,
-    default: "date-picker",
+    default: 'date-picker',
   },
   isUtc: {
     type: Boolean,
@@ -121,15 +127,15 @@ const props = defineProps({
   label: {
     type: String,
     required: true,
-    default: "",
+    default: '',
   },
   iconType: {
-    type: String as PropType<"startIcon" | "endIcon">,
-    default: "",
+    type: String as PropType<'startIcon' | 'endIcon'>,
+    default: '',
   },
   icon: {
     type: [Object, String],
-    default: "",
+    default: '',
   },
   errors: { type: Object, required: false, default: () => {} },
   timePicker: Boolean,
@@ -137,24 +143,26 @@ const props = defineProps({
   disableDate: Boolean,
   formatDate: Boolean,
   readonly: Boolean,
-  disabled:Boolean,
+  disabled: Boolean,
   required: Boolean,
-  range:Boolean,
-  multiCalendars:Boolean,
+  range: Boolean,
+  multiCalendars: Boolean,
   autoApply: {
-    type:Boolean,
-    default: true
+    type: Boolean,
+    default: true,
   },
   inputFilled: {
-    type:Boolean,
-    default: false
+    type: Boolean,
+    default: false,
   },
   config: {
-    type: Object, required: false, default: () => {}
-  }
-});
-const emit = defineEmits(["update:modelValue"]);
-const { modelValue, isUtc, clearIcon } = toRefs(props);
+    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)));
 
@@ -170,45 +178,51 @@ 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;;
+  newValue => {
+    if (
+      newValue === null ||
+      newValue === undefined ||
+      (Array.isArray(newValue) && newValue.length === 0)
+    ) {
+      datepicker.value = props.range ? [] : null
     } else {
-      datepicker.value = newValue;
+      datepicker.value = newValue
     }
   },
-  { immediate: true }
-);
+  { immediate: true },
+)
 
-watch(
-  datepicker,
-  (newDate) => {
-    emit("update:modelValue", newDate);
-  }
-);
+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 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";
+    case 'startIcon':
+      return 'pl-12 pr-4'
+    case 'endIcon':
+      return 'pr-12 pl-4'
     default:
-      return "px-4";
+      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'));
+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">
@@ -217,10 +231,10 @@ const clearIconRight = computed(() => (props.iconType === 'endIcon' ? '40px' : '
   --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;
-  }
+  --dp-primary-color: rgba(139, 92, 246, 1);
+  --dp-row-margin: 2px 0;
+  --dp-cell-size: 36px;
+}
 
 .eui-datepicker {
   @apply min-w-56;
@@ -231,10 +245,10 @@ const clearIconRight = computed(() => (props.iconType === 'endIcon' ? '40px' : '
       padding-right: v-bind(iconshowRight);
     }
     .dp__input.dp__input_focus {
-        @apply ring-2 ring-purple-600 rounded-2xl ring-inset h-[3.365rem];
+      @apply ring-2 ring-purple-600 rounded-2xl ring-inset h-[3.365rem];
     }
     .dp--clear-btn {
-        right: v-bind(clearIconRight);
+      right: v-bind(clearIconRight);
     }
   }
   &.normal {
@@ -243,7 +257,7 @@ const clearIconRight = computed(() => (props.iconType === 'endIcon' ? '40px' : '
         @apply py-2 ring-1 ring-gray-100;
       }
       .dp__input.dp__input_focus {
-          @apply ring-2 h-10 rounded-md ring-purple-600;
+        @apply ring-2 h-10 rounded-md ring-purple-600;
       }
     }
   }
@@ -261,19 +275,18 @@ const clearIconRight = computed(() => (props.iconType === 'endIcon' ? '40px' : '
     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);
-  }
+.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/input/EUIInput.vue

@@ -1,18 +1,47 @@
 <template>
   <div>
     <label
-        v-if="!inputFilled && label"
-        :for="`${name}-${id}`"
-        :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>
+      v-if="!inputFilled && label"
+      :for="`${name}-${id}`"
+      :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>
     <div
-      :class="[{'pointer-events-none cursor-not-allowed': disabled}, {'h-14 rounded-2xl focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600 border border-gray-100': inputFilled}, 'group cursor-pointer relative w-full mb-2 overflow-hidden']"
+      :class="[
+        'relative',
+        { 'pointer-events-none cursor-not-allowed': disabled },
+        {
+          'h-14 rounded-2xl focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600 border border-gray-100':
+            inputFilled,
+        },
+        'group cursor-pointer relative w-full mb-2 overflow-hidden',
+      ]"
     >
+      <button
+        :class="inputValue ? '  absolute inset-y-0 right-3  ' : ' hidden '"
+        @click="emit('update:modelValue', '')"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="size-5"
+        >
+        <!--         <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+ -->
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M6 18 18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
       <label
         v-if="inputFilled"
         :for="`${name}-${id}`"
@@ -23,30 +52,39 @@
             : 'top-1/2 text-sm w-full text-gray-700 cursor-pointer h-14 pt-5 pb-4',
           disabled ? 'cursor-not-allowed bg-gray-50 z-10' : 'z-0 bg-white',
           required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
-          'absolute font-medium left-0 px-4 -translate-y-1/2 duration-300 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-focus-within:-translate-y-1/2 group-focus-within:ring-transparent group-focus-within:h-auto group-focus-within:py-0 first-letter:capitalize transition-all ease-in-out'
+          'absolute font-medium left-0 px-4 -translate-y-1/2 duration-300 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-focus-within:-translate-y-1/2 group-focus-within:ring-transparent group-focus-within:h-auto group-focus-within:py-0 first-letter:capitalize transition-all ease-in-out',
         ]"
       >
-        {{ label || 'Label' }}
+        {{ label || "Label" }}
       </label>
       <div
         v-if="icon && iconType"
-        :class="['absolute inset-y-0 flex items-center pointer-events-none', iconType === 'startIcon' ? 'left-0 pl-3' : 'right-0 pr-3', disabled ? 'z-20': '']"
+        :class="[
+          'absolute inset-y-0 flex items-center pointer-events-none',
+          iconType === 'startIcon' ? 'left-0 pl-3' : 'right-0 pr-3',
+          disabled ? 'z-20' : '',
+        ]"
       >
-        <component
-          :is="icon"
-          class="text-gray-400 size-6"
-          aria-hidden="true"
-        />
+        <component :is="icon" class="text-gray-400 size-6" aria-hidden="true" />
       </div>
       <input
         :id="`${name}-${id}`"
         ref="input"
-        :type="type"
+        :type="type === 'search' ? 'text' : type"
         :value="modelValue"
         :placeholder="placeholder"
         :name="name"
-        :class="['z-10 block placeholder:text-gray-400 focus:outline-none text-sm font-medium appearance-none disabled:opacity-75 autofill:bg-white leading-6 transition-all duration-100 border-none outline-none', inputFilled ? 'pt-6 pb-3 rounded-2xl size-full' : 'py-3 h-10 w-full ring-1 ring-gray-100 focus-within:ring-purple-600 focus-within:ring-2 ring-inset', !inputFilled && rounded ? 'rounded-2xl' : 'rounded-md', disabled ? 'cursor-not-allowed' : 'cursor-text', getIconClass(), !inputFilled && className]"
-
+        :class="[
+          'z-10 block placeholder:text-gray-400 focus:outline-none text-sm font-medium appearance-none disabled:opacity-75 autofill:bg-white leading-6 transition-all duration-100 border-none outline-none',
+          inputFilled
+            ? 'pt-6 pb-3 rounded-2xl size-full'
+            : 'py-3 h-10 w-full ring-1 ring-gray-100 focus-within:ring-purple-600 focus-within:ring-2 ring-inset',
+          !inputFilled && rounded ? 'rounded-2xl' : 'rounded-md',
+          disabled ? 'cursor-not-allowed' : 'cursor-text',
+          getIconClass(),
+          !inputFilled && className,
+          'pr-8'
+        ]"
         :required="required"
         :disabled="disabled"
         :readonly="readonly"
@@ -124,10 +162,10 @@ const props = defineProps({
     default: false,
   },
   inputFilled: {
-    type:Boolean,
-    default: false
+    type: Boolean,
+    default: false,
   },
-  rounded:Boolean,
+  rounded: Boolean,
   className: {
     type: Array as PropType<string[]>,
     required: false,

package/dist/EUICheckbox.vue.d.ts

@@ -1,5 +0,0 @@
-import _sfc_main from "/Users/somnath/Documents/Workspace/Edvoy/edvoy-ui-v2/src/components/checkbox/EUICheckbox.vue?vue&type=script&setup=true&lang.ts";
-export * from "/Users/somnath/Documents/Workspace/Edvoy/edvoy-ui-v2/src/components/checkbox/EUICheckbox.vue?vue&type=script&setup=true&lang.ts";
-import "/Users/somnath/Documents/Workspace/Edvoy/edvoy-ui-v2/src/components/checkbox/EUICheckbox.vue?vue&type=style&index=0&lang.scss";
-export default _sfc_main;
-//# sourceMappingURL=EUICheckbox.vue.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"EUICheckbox.vue.d.ts","sourceRoot":"","sources":["../src/components/checkbox/EUICheckbox.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,iIAAiI,CAAC;AACxJ,cAAc,iIAAiI,CAAC;AAChJ,OAAO,+HAA+H,CAAC;AACvI,eAAe,SAAS,CAAC"}

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

@@ -1,5 +0,0 @@
-import _sfc_main from "/Users/somnath/Documents/Workspace/Edvoy/edvoy-ui-v2/src/components/button/EUIButton.vue?vue&type=script&setup=true&lang.ts";
-export * from "/Users/somnath/Documents/Workspace/Edvoy/edvoy-ui-v2/src/components/button/EUIButton.vue?vue&type=script&setup=true&lang.ts";
-import "/Users/somnath/Documents/Workspace/Edvoy/edvoy-ui-v2/src/components/button/EUIButton.vue?vue&type=style&index=0&lang.scss";
-export default _sfc_main;
-//# sourceMappingURL=EUIButton.vue.d.ts.map

package/dist/button/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,6HAA6H,CAAC;AACpJ,cAAc,6HAA6H,CAAC;AAC5I,OAAO,2HAA2H,CAAC;AACnI,eAAe,SAAS,CAAC"}