edvoyui-component-library-test-flight 0.0.88 → 0.0.90

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/select/EUISelect.stories.ts

@@ -33,8 +33,13 @@ const meta = {
         type: { summary: "Boolean" },
         defaultValue: { summary: "false" },
       },
+    fieldName: {
+      control: "text",
+      description:
+        "the field name of the target field which gonna be on view ",
     },
   },
+}
 } satisfies Meta<typeof EUISelect>;
 
 export default meta;
@@ -53,7 +58,8 @@ export const Default: Story = {
     ],
     modelValue: { value: "usa", label: "United States", name: "United States" },
     errors: {},
-    required: false,
+    required: true,
+    fieldName:'name'
   },
   render: (args) => ({
     components: { EUISelect },

package/src/components/select/EUISelect.vue

@@ -58,7 +58,7 @@
           {{ startCaseText(label) || "Select" }}
         </div>
       </template>
-      <template #selected-option="{ name: nameText, iconlink }">
+      <template #selected-option="item">
         <div
           :class="
             isUseCustomSelect
@@ -68,27 +68,27 @@
         >
           <img
             v-if="
-              name == 'country' ? getFlag({ nameText, iconlink }) : iconlink
+              name == 'country' ? getFlag({ nameText:item[fieldName], iconlink:(item as any)?.iconlink }) : (item as any)?.iconlink
             "
             :class="isUseCustomSelect ? 'w-6 mr-1 flex-initial' : 'w-6 mr-2'"
             :src="
-              name == 'country' ? getFlag({ nameText, iconlink }) : iconlink
+              name == 'country' ? getFlag({ nameText:item[fieldName], iconlink:(item as any)?.iconlink }) : (item as any)?.iconlink
             "
-            :alt="nameText"
+            :alt="item[fieldName]"
           />
-          {{ isStartCaseText ? startCaseText(nameText) : nameText }}
+          {{ isStartCaseText ? startCaseText(item[fieldName]) : item[fieldName] }}
         </div>
       </template>
-      <template #option="{ name: nameText, iconlink }">
+      <template #option="item">
         <div class="flex items-center">
           <img
-            v-if="iconlink"
+            v-if="(item as any).iconlink"
             class="w-6 mr-2"
-            :src="iconlink"
-            :alt="nameText"
+            :src="(item as any).iconlink"
+            :alt="item[fieldName]"
           />
 
-          {{ isStartCaseText ? startCaseText(nameText) : nameText }}
+          {{ isStartCaseText ? startCaseText(item[fieldName]) : item[fieldName] }}
         </div>
       </template>
       <template #spinner="{ loading: _loading }">
@@ -279,6 +279,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  fieldName:{
+    type: String,
+    default: 'name',
+  }
 });
 
 const {
@@ -293,6 +297,7 @@ const {
   isStartCaseText,
   isSelectAll,
   required,
+  fieldName
 } = toRefs(props);
 const emit = defineEmits([
   "update:modelValue",
@@ -324,7 +329,7 @@ const change = (newValue: any) => {
 
 const deselected = (newValue: any) => {
   emit("deselected", newValue);
-  if (newValue.name === "All") {
+  if (newValue[fieldName.value] === "All") {
     nodropDown.value = false;
   }
 };
@@ -510,10 +515,6 @@ const open=()=>{
 
 }
 
-// const handlers = (e: Event) => {
-//   console.log("@e", e);
-//   // e.preventDefault();
-// };
 </script>
 <style lang="scss">
 .scrollbar {

package/dist/EUIButton.vue.d.ts

@@ -1,5 +0,0 @@
-import _sfc_main from "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/button/EUIButton.vue?vue&type=script&setup=true&lang.ts";
-export * from "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/button/EUIButton.vue?vue&type=script&setup=true&lang.ts";
-import "/Users/rajmohan/Documents/Workspace/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/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,wHAAwH,CAAC;AAC/I,cAAc,wHAAwH,CAAC;AACvI,OAAO,sHAAsH,CAAC;AAC9H,eAAe,SAAS,CAAC"}

package/dist/selectSearch/EUISelectSearch.vue.d.ts

@@ -1,4 +0,0 @@
-import _sfc_main from "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/selectSearch/EUISelectSearch.vue?vue&type=script&setup=true&lang.ts";
-export * from "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/selectSearch/EUISelectSearch.vue?vue&type=script&setup=true&lang.ts";
-export default _sfc_main;
-//# sourceMappingURL=EUISelectSearch.vue.d.ts.map

package/dist/selectSearch/EUISelectSearch.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EUISelectSearch.vue.d.ts","sourceRoot":"","sources":["../../src/components/selectSearch/EUISelectSearch.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,oIAAoI,CAAC;AAC3J,cAAc,oIAAoI,CAAC;AACnJ,eAAe,SAAS,CAAC"}