edvoyui-component-library-test-flight 0.0.149 → 0.0.151

package/dist/searchTagSelect/EUISearchTagSelect.vue.d.ts

@@ -0,0 +1,5 @@
+import _sfc_main from "/Volumes/work/repos/edvoy-ui-v2/src/components/searchTagSelect/EUISearchTagSelect.vue?vue&type=script&setup=true&lang.ts";
+export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/searchTagSelect/EUISearchTagSelect.vue?vue&type=script&setup=true&lang.ts";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/searchTagSelect/EUISearchTagSelect.vue?vue&type=style&index=0&lang.scss";
+export default _sfc_main;
+//# sourceMappingURL=EUISearchTagSelect.vue.d.ts.map

package/dist/searchTagSelect/EUISearchTagSelect.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EUISearchTagSelect.vue.d.ts","sourceRoot":"","sources":["../../src/components/searchTagSelect/EUISearchTagSelect.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,0HAA0H,CAAC;AACjJ,cAAc,0HAA0H,CAAC;AACzI,OAAO,wHAAwH,CAAC;AAChI,eAAe,SAAS,CAAC"}

package/dist/searchTagSelect/SearchInput.vue.d.ts

@@ -0,0 +1,5 @@
+export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/searchTagSelect/SearchInput.vue?vue&type=script&setup=true&lang.ts";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/searchTagSelect/SearchInput.vue?vue&type=style&index=0&scoped=d6f85bc3&lang.scss";
+declare const _default: any;
+export default _default;
+//# sourceMappingURL=SearchInput.vue.d.ts.map

package/dist/searchTagSelect/SearchInput.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.vue.d.ts","sourceRoot":"","sources":["../../src/components/searchTagSelect/SearchInput.vue"],"names":[],"mappings":"AACA,cAAc,mHAAmH,CAAC;AAClI,OAAO,iIAAiI,CAAC;;AAEzI,wBAA0F"}

package/dist/telephone/EUITelephone.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EUITelephone.vue.d.ts","sourceRoot":"","sources":["../../src/components/telephone/EUITelephone.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,8GAA8G,CAAC;AACrI,cAAc,8GAA8G,CAAC;AAC7H,OAAO,4GAA4G,CAAC;AACpH,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "edvoyui-component-library-test-flight",
   "private": false,
-  "version": "0.0.149",
+  "version": "0.0.151",
   "type": "module",
   "files": [
     "dist/",
@@ -41,7 +41,8 @@
     "tailwindcss": "^3.4.11",
     "vue": "^3.4.37",
     "vue-select": "^4.0.0-beta.6",
-    "vue-tel-input": "^9.2.0"
+    "vue-tel-input": "^9.2.0",
+    "vue3-popper": "^1.5.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^8.4.4",

package/src/assets/svg/CheckTick.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5 12.7132L10.0168 17.7247L10.4177 17.0238C12.5668 13.2658 15.541 10.0448 19.1161 7.60354L20 7"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

package/src/components/HelloWorld.vue

@@ -5,9 +5,11 @@
     >
       Edvoy User Interface
     </h1>
-  </div>
+
+</div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+</script>
 <style lang="scss"></style>
 
 <!-- Development code here  -->
@@ -17,6 +19,29 @@
   <div class="h-[clac(100svh-64px)] w-full px-10 py-8 max-w-screen-xl mx-auto">
     <h1 class="mb-2 font-semibold text-gray-900 tetx-lg">Edvoy UI Componnet</h1>
 
+  <div class="max-w-xs py-4 mx-auto border border-red-500 rounded-xl">
+    <EUISearchTagSelect
+      v-model="selectedCity"
+      :items="datas"
+      :searchIcon="true"
+      :required="false"
+      itemText="name"
+      placeholder="Search Cities"
+      select-type="multiple"
+      :clearable="true"
+      @search="onSearch"
+      @on-change="onCitySelect"
+      @on-deselect="clear"
+    >
+      <template #labelhint>
+        <div class="my-1 text-xs font-medium text-gray-400">
+          Changing the city will affect your university selection
+        </div>
+      </template>
+    </EUISearchTagSelect>
+    <pre class="p-2 text-red-500 text-xxs">{{ selectedCity }}--</pre>
+  </div>
+
     <div class="relative">
       <EUIStepperHorizontal
   :steps="allSteps"
@@ -1466,6 +1491,8 @@ import EUISearchExpand from "./searchexpand/EUISearchExpand.vue";
 import EUITabOutline from "./tabs/EUITabOutline.vue";
 import EUIPopover from "./popover/EUIPopover.vue";
 import EUIStepperHorizontal from "./stepperTimeline/EUIStepperHorizontal.vue";
+import { debounce } from "lodash";
+import EUISearchTagSelect from "./searchTagSelect/EUISearchTagSelect.vue";
 
 const checkboxData = ref([])
 const businessAreaSel = ref()
@@ -1478,6 +1505,25 @@ const businessArea = ref([
   "Accelerator"
 ])
 
+const emit = defineEmits(["update:modelValue", "on-select"]);
+const selectedCity = ref()
+
+const onSearch = debounce(async (query: string) => query, 350);
+const onCitySelect = (value: any) => {
+  emit("on-select", value);
+};
+
+const clear = (item: any) => {
+  // const currentSelection = props.modelValue;
+  // if (Array.isArray(currentSelection)) {
+  //   const updatedSelection = currentSelection.filter(
+  //     (selectedItem) => !selectedItem.slug?.includes(item.slug)
+  //   );
+  //   emit("update:modelValue", updatedSelection);
+  //   emit("on-select", updatedSelection);
+  // }
+};
+
 // TODO: Popover
 const isLoading = ref(false);
 const popoverVisible = ref(false);
@@ -1614,8 +1660,8 @@ const handleActiveItem = (activeItems: number) => {
 };
 
 // Stepper dynamic Data
-const allSteps = ['MQL','SAL','Prospect','Customer']
-const currentStage = 'Prospect'
+const allSteps = ['MQL','SAL','PROSPECT','CUSTOMER']
+const currentStage = 'PROSPECT'
 const lifeCycleHistory = [
   {
     "lifecycleStage": "MQL",

package/src/components/checkbox/EUICheckbox.vue

@@ -1,5 +1,6 @@
 <template>
- <label class="flex flex-row items-center scale-100 translate-x-0 translate-y-0 eui-checkbox">
+<div>
+   <label class="flex flex-row items-center scale-100 translate-x-0 translate-y-0 eui-checkbox">
     <input v-model="isChecked" type="checkbox" id="checkbox" class="appearance-none sr-only input-checkbox" :disabled="disabled"
       @change="toggle($event)" />
       <div class="cbx-icon" for="checkbox">
@@ -14,9 +15,14 @@
           </symbol>
         </svg>
       </div>
-    <span v-if="label" class="text-sm font-medium tracking-wide text-gray-700 ms-2 first-letter:capitalize">{{ label }}</span>
+      <slot name="label">
+        <span v-if="label" class="text-sm font-medium tracking-wide text-gray-700 ms-2 first-letter:capitalize">{{ label }}</span>
+      </slot>
   </label>
-  <EUIErrorMessage :errors="errors" :name="name" />
+  <template v-if="errors && errors.length">
+    <EUIErrorMessage :errors="errors" :name="name" />
+  </template>
+</div>
 </template>
 
 <script setup lang="ts">
@@ -63,7 +69,7 @@ watch(props, (newValue) => {
 <style lang="scss">
 .eui-checkbox .cbx-icon {
   transition: all 0.2s ease;
-  @apply select-none cursor-pointer p-0.5 rounded-md overflow-hidden inline-block scale-110;
+  @apply select-none cursor-pointer p-px rounded-md overflow-hidden inline-block scale-110;
 }
 
 .eui-checkbox .cbx-icon span {
@@ -93,6 +99,7 @@ watch(props, (newValue) => {
 
 .eui-checkbox .input-checkbox:checked + .cbx-icon span > svg {
   stroke-dashoffset: 0;
+  transition: rotate(8deg);
 }
 
 @keyframes anim {

package/src/components/index.ts

@@ -52,6 +52,7 @@ export { default as EUITooltip } from "./tooltip/EUITooltip.vue";
 export { default as EUISearch } from "./searchInput/EUISearch.vue";
 export { default as EUISearchExpand } from "./searchexpand/EUISearchExpand.vue";
 export { default as EUISearchToggle } from "./searchexpand/EUISearchToggle.vue";
+export { default as EUISearchTagSelect } from "./searchTagSelect/EUISearchTagSelect.vue";
 
 export { default as EUIBreadcrumb } from "./breadcrumb/EUIBreadcrumb.vue";
 export { default as EUIAlerts } from "./alerts/EUIAlerts.vue";