edvoyui-component-library-test-flight 0.0.25 → 0.0.27

package/dist/modal/EUIModal.vue.d.ts

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

package/dist/modal/EUIModal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EUIModal.vue.d.ts","sourceRoot":"","sources":["../../src/components/modal/EUIModal.vue"],"names":[],"mappings":"AACA,cAAc,2FAA2F,CAAC;AAmF1G,OAAO,oHAAoH,CAAC;;AAE5H,wBAAmH"}
+{"version":3,"file":"EUIModal.vue.d.ts","sourceRoot":"","sources":["../../src/components/modal/EUIModal.vue"],"names":[],"mappings":"AACA,cAAc,2FAA2F,CAAC;AAuF1G,OAAO,oHAAoH,CAAC;;AAE5H,wBAAmH"}

package/dist/table/EUIDashboardTable.vue.d.ts

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

package/dist/table/EUITable.vue.d.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "edvoyui-component-library-test-flight",
   "private": false,
-  "version": "0.0.25",
+  "version": "0.0.27",
   "type": "module",
   "files": [
     "dist/",

package/src/assets/svg/ChevronBigDown.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg
+    width="21"
+    height="20"
+    viewBox="0 0 21 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5.45312 7.5C6.7673 9.31733 8.30557 10.947 10.028 12.3476C10.2779 12.5508 10.6284 12.5508 10.8782 12.3476C12.6007 10.947 14.139 9.31733 15.4531 7.5"
+      stroke="currentColor"
+      stroke-opacity="0.5"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

package/src/components/HelloWorld.vue

@@ -2,9 +2,9 @@
   <h1 class="my-10 text-2xl font-bold text-center text-gray-900 underline underline-offset-2 decoration-green-400 decoration-wavy">
     Edvoy User Interface
   </h1>
-
 </template>
 <script setup lang="ts">
+
 </script>
 <style lang="scss"></style>
 
@@ -12,73 +12,171 @@
 <!-- <template>
   <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="grid gap-4 sm:grid- cols-2 place-items-start">
+
+    <Delete />
+
+    <div class="grid gap-4 sm:grid-cols-2 place-items-start">
       <div
         class="w-full max-w-screen-xl col-span-2 p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
       >
         <span
           class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
         >
-          Name: Select Multiple
+          Name: Input
         </span>
-        <pre
-          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
-        >
-      <code>&lt;EUISelect label="Firstname" placeholder="Enter your name" :items="datas" /&gt;</code>
-    </pre>
+        <pre class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"><code>&lt;EUIInput label="Firstname" placeholder="Enter your name" /&gt;</code></pre>
+
+           <div class="grid grid-cols-3 gap-4 pb-6 mb-4 border-b">
+          <EUIInput
+            v-model.trim="form.input"
+            name="addnote"
+            id="addnote"
+            placeholder="Note here..."
+          />
+
+          <EUIInput
+            v-model.trim="form.input"
+            name="addnote"
+            id="addnote"
+            label="Add Note"
+            placeholder="Note here..."
+          />
+          <EUIInput
+            v-model.trim="form.input"
+            name="addnote"
+            id="addnote"
+            label="Add Note"
+            placeholder="Note here..."
+            rounded
+            :class-name="['bg-gray-100/50']"
+          />
+          <EUIInput
+            v-model.trim="form.input"
+            name="addnote"
+            id="addnote"
+            label="Add Note"
+            placeholder="Note type here..."
+            :icon="MagnifyingGlassIcon"
+            icon-type="startIcon"
+          />
+
+          <EUIInput
+            v-model.trim="form.input"
+            name="addnote"
+            id="addnote"
+            label="Add Note"
+            placeholder="Note type here..."
+            :icon="MagnifyingGlassIcon"
+            icon-type="endIcon"
+          />
+
+          <EUIInput
+            v-model.trim="form.input"
+            name="addnote"
+            id="addnote"
+            type="search"
+            placeholder="Search here..."
+            rounded
+            :class-name="['bg-gray-100/50 rounded-3xl']"
+            :icon="MagnifyingGlassIcon"
+            icon-type="startIcon"
+          />
+
+          <EUIInput
+            v-model.trim="form.input"
+            name="addnote"
+            id="addnote"
+            label="Add note disabled"
+            placeholder="Note type here..."
+            :icon="MagnifyingGlassIcon"
+            icon-type="endIcon"
+            disabled
+          />
+
+          <EUIInput
+            v-model.trim="form.input"
+            name="addnote"
+            id="addnote"
+            label="Add note readonly"
+            placeholder="Note type here..."
+            :icon="MagnifyingGlassIcon"
+            icon-type="endIcon"
+            readonly
+          />
+        </div>
 
         <div class="grid grid-cols-3 gap-4">
-          <EUISelect
-            search-label="name"
-            label="Multiple Select width Limiting"
+          <EUIInput
+            v-model.trim="form.input"
+            label="full name"
             placeholder="Enter your name"
-            :items="datas"
-            :multiple="true"
-            :multiple-limit="3"
+            inputFilled
           />
-          <EUISelect placeholder="Enter your name" :items="datas" />
-          <EUISelect
-            :is-use-custom-select="true"
-            :items="datas"
-            name="customselect"
-            placeholder="Select multiple"
-            :multiple="true"
-            customWidth="500px"
-            :custom-offset="[-200, 100]"
+
+          <EUIInput
+            v-model.trim="form.input"
+            name="addname"
+            id="addname"
+            label="Full name"
+            placeholder="Enter your name"
+            :icon="MagnifyingGlassIcon"
+            icon-type="startIcon"
+            inputFilled
           />
 
-          <EUISelectSearch />
+          <EUIInput
+            v-model.trim="form.input"
+            name="addemail"
+            id="addemail"
+            label="Email address"
+            placeholder="Enter your email"
+            :icon="MagnifyingGlassIcon"
+            icon-type="endIcon"
+            inputFilled
+          />
+
+          <EUIInput
+            v-model.trim="form.input"
+            name="search"
+            id="search"
+            type="search"
+            label="Course Search"
+            placeholder="Search here..."
+            :icon="MagnifyingGlassIcon"
+            icon-type="startIcon"
+            inputFilled
+          />
+
+          <EUIInput
+            v-model.trim="form.input"
+            name="search"
+            id="search"
+            type="search"
+            label="Course search disabled"
+            placeholder="Search here..."
+            :icon="MagnifyingGlassIcon"
+            icon-type="startIcon"
+            inputFilled
+            disabled
+          />
+
+          <EUIInput
+            v-model.trim="form.input"
+            name="search"
+            id="search"
+            type="search"
+            label="Course Search readonly"
+            placeholder="Search here..."
+            :icon="MagnifyingGlassIcon"
+            icon-type="startIcon"
+            inputFilled
+            readonly
+          />
         </div>
       </div>
 
        <div
-        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
-      >
-        <span
-          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
-        >
-          Name: Multi Dropdown
-        </span>
-        <pre
-          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
-        ><code>&lt;EUIMultiDropdown title="dropdown" :menu-items="menubar" /&gt;</code>
-    </pre>
-         <div class="inline-flex items-center gap-4">
-      <EUIMultiDropdown title="dropdown" :menu-items="menubar" />
-      <EUIMultiDropdown title="dropdown" class-name="px-3 py-2 text-gray-700 hover:text-gray-900 bg-white rounded-md focus:bg-violet-100 group focus:outline-none focus:ring-2 focus:ring-violet-400 focus:ring-opacity-100 hover:bg-gray-100 active:bg-violet-200" @subMenuItem="handleSubMenuItem" @menuItem="handleMenuItem">
-        <template #dropdownName="{ open }">
-            <span>My Students</span>
-            <ChevronDownStroke :class="open ? 'text-gray-900 rotate-180' : 'text-gray-500'"
-              class="transition duration-100 ease-in-out transform rotate-0 size-6 group-hover:text-opacity-80"
-              aria-hidden="true"
-            />
-          </template>
-      </EUIMultiDropdown>
-    </div>
-      </div>
-
-      <div
-        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+        class="w-full max-w-screen-xl col-span-2 p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
       >
         <span
           class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
@@ -91,6 +189,21 @@
       <code>&lt;EUITelephone name="contactNumber" label="Contact Number" placeholder="Your mobile number" tag="Mobile
         input required" tag-color="Error" /&gt;</code>
     </pre>
+
+    <div class="grid grid-cols-2 gap-6">
+      <EUITelephone
+          v-model="mobileNumber"
+          name="contactNumber"
+          label="Contact Number"
+          placeholder="Your mobile number"
+          tag="Mobile input required"
+          tag-color="Error"
+          :errors="{ name: 'Enter a valid phone number' }"
+          icon-type="startIcon"
+          :icon="DevicePhoneMobileIcon"
+          inputFilled
+        />
+
         <EUITelephone
           v-model="mobileNumber"
           name="contactNumber"
@@ -100,52 +213,97 @@
           tag-color="Error"
           :errors="{ name: 'Enter a valid phone number' }"
           icon-type="startIcon"
+          :icon="DevicePhoneMobileIcon"
+          required
         />
+    </div>
+
       </div>
 
       <div
-        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+        class="w-full max-w-screen-xl col-span-2 p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
       >
         <span
           class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
         >
-          Name: Input Normal
+          Name: Select Multiple
         </span>
         <pre
           class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
         >
-      <code>&lt;EUIInputNormal label="Firstname" placeholder="Enter your name" rounded :class-name="['bg-gray-100/50']
-        /&gt;</code>
+      <code>&lt;EUISelect label="Firstname" placeholder="Enter your name" :items="datas" /&gt;</code>
     </pre>
-        <EUIInputNormal
-          v-model.trim="form.input"
-          name="addnote"
-          id="addnote"
-          label="Add Note"
-          placeholder="Note here..."
-          rounded
-          :class-name="['bg-gray-100/50']"
-        />
+
+    <div class="grid grid-cols-3 gap-4">
+          <EUISelect
+            search-label="name"
+            label="Select Label"
+            placeholder="Placeholder"
+            :items="datas"
+            :multiple="true"
+            :multiple-limit="3"
+          />
+          <EUISelect placeholder="Enter your name" :items="datas" />
+          <EUISelect
+            :is-use-custom-select="true"
+            :items="datas"
+            name="customselect"
+            placeholder="Select multiple"
+            :multiple="true"
+            customWidth="380px"
+            :custom-offset="[0, 10]"
+          />
+        </div>
+
+        <div class="grid grid-cols-3 gap-4">
+          <EUISelect
+            search-label="name"
+            label="Multiple Select width Limiting"
+            placeholder="Enter your name"
+            :items="datas"
+            :multiple="true"
+            :multiple-limit="3"
+            inputFilled
+          />
+          <EUISelect placeholder="Enter your name" :items="datas" inputFilled />
+          <EUISelect
+            :is-use-custom-select="true"
+            :items="datas"
+            name="customselect"
+            placeholder="Select multiple"
+            :multiple="true"
+            customWidth="380px"
+            :custom-offset="[-20, 10]"
+            inputFilled
+          />
+          <EUISelectSearch />
+        </div>
       </div>
 
-      <div
+       <div
         class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
       >
         <span
           class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
         >
-          Name: Input
+          Name: Multi Dropdown
         </span>
         <pre
           class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
-        >
-      <code>&lt;EUIInput label="Firstname" placeholder="Enter your name" /&gt;</code>
+        ><code>&lt;EUIMultiDropdown title="dropdown" :menu-items="menubar" /&gt;</code>
     </pre>
-        <EUIInput
-          v-model.trim="form.input"
-          label="Firstname"
-          placeholder="Enter your name"
-        />
+         <div class="inline-flex items-center gap-4">
+      <EUIMultiDropdown title="dropdown" :menu-items="menubar" />
+      <EUIMultiDropdown title="dropdown" class-name="px-3 py-2 text-gray-700 hover:text-gray-900 bg-white rounded-md focus:bg-violet-100 group focus:outline-none focus:ring-2 focus:ring-violet-400 focus:ring-opacity-100 hover:bg-gray-100 active:bg-violet-200" @subMenuItem="handleSubMenuItem" @menuItem="handleMenuItem">
+        <template #dropdownName="{ open }">
+            <span>My Students</span>
+            <ChevronDownStroke :class="open ? 'text-gray-900 rotate-180' : 'text-gray-500'"
+              class="transition duration-100 ease-in-out transform rotate-0 size-6 group-hover:text-opacity-80"
+              aria-hidden="true"
+            />
+          </template>
+      </EUIMultiDropdown>
+    </div>
       </div>
 
       <div
@@ -709,14 +867,13 @@ import { computed, reactive, ref } from "vue";
 import EUIButton from "./button/EUIButton.vue";
 import EUICheckbox from "./checkbox/EUICheckbox.vue";
 import EUIInput from "./input/EUIInput.vue";
-import EUIInputNormal from "./inputNormal/EUIInputNormal.vue";
 import EUIModal from "./modal/EUIModal.vue";
 import EUISelect from "./select/EUISelect.vue";
 import EUITabs from "./tabs/EUITabs.vue";
 import EUITextarea from "./textArea/EUITextArea.vue";
 import EUISelectSearch from "./selectSearch/EUISelectSearch.vue";
 import EUITimeLine from "./timeLine/EUITimeLine.vue";
-import { ArrowDownCircleIcon } from "@heroicons/vue/24/solid";
+import { ArrowDownCircleIcon, MagnifyingGlassIcon } from "@heroicons/vue/24/solid";
 import EUITag from "./tag/EUITag.vue";
 import EUIToggle from "./toggle/EUIToggle.vue";
 import EUILoader from "./loader/EUILoader.vue";
@@ -724,7 +881,7 @@ import EUIAvatar from "./avatar/EUIAvatar.vue";
 import EUIStepperTimeline from "./stepperTimeline/EUIStepperTimeline.vue";
 import EUIAccordion from "./accordion/EUIAccordion.vue";
 import EUITelephone from "./telephone/EUITelephone.vue";
-import { HomeIcon } from "@heroicons/vue/24/outline";
+import { DevicePhoneMobileIcon, HomeIcon } from "@heroicons/vue/24/outline";
 import EUIDatepicker from "./datepicker/EUIDatepicker.vue";
 import EUIDashboardTable from "./table/EUIDashboardTable.vue";
 import tabData from "../data/tab";
@@ -738,12 +895,13 @@ import EUITable from "./table/EUITable.vue";
 import { capitalizeText } from "../utils/lodash";
 import ChevronDownStroke from '../assets/svg/ChevronDownStroke.vue';
 import EUIMultiDropdown from './dropdown/EUIMultiDropdown.vue';
+import Delete from "./delete.vue";
 
 const mobileNumber = ref("+91 8667444951");
 const datepicker = ref(new Date());
 
 const form = reactive({
-  input: "",
+  input: "Lorem ipsum dolor sit",
   mobile: "+918667444951",
 });
 

package/src/components/checkbox/EUICheckbox.vue

@@ -1,5 +1,5 @@
 <template>
- <label class="flex flex-wrap items-center scale-100 translate-x-0 translate-y-0 eui-checkbox">
+ <label class="flex flex-row items-start 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">
@@ -83,7 +83,7 @@ watch(props, (newValue) => {
   transition: all 0.3s ease;
   transition-delay: 0.1s;
   transform: translate3d(0, 0, 0);
-  @apply absolute fill-none stroke-white
+  @apply absolute fill-none stroke-white;
 }
 
 .eui-checkbox .input-checkbox:checked + .cbx-icon > span {