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

package/src/components/radio/EUIRadio.vue

@@ -1,75 +0,0 @@
-<template>
-  <div>
-    <label class="inline-flex items-center cursor-pointer eui-radio">
-        <input
-            v-model="modelValue"
-            type="radio"
-            class="sr-only peer eui-radio_input"
-            :disabled="disabled"
-            @change="toggle()"
-        />
-        <div
-        class="eui-radio_circle relative size-6 bg-gray-200 peer-focus:outline-none rounded-full after:content-[''] after:absolute after:top-0.5 after:start-0.5 after:bg-gray-500/20 after:border-gray-300/10 after:border after:rounded-full after:size-5 peer-checked:after:bg-purple-700"
-        >
-            <span class="eui-radio_icons"></span>
-        </div>
-        <span v-if="label" class="text-sm font-medium text-gray-900 ms-3 first-letter:capitalize">
-            {{ label }}
-        </span>
-    </label>
-     <template v-if="errors && Object.keys(errors).length">
-      <EUIErrorMessage :errors="errors" :name="name" />
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { PropType, toRefs } from "vue";
-import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
-
-// Props declaration
-const props = defineProps({
-  errors: { type: Object, required: false, default: () => {} },
-  modelValue: {
-    type: Boolean as PropType<boolean>,
-    required: true,
-    default: false,
-  },
-  name: {
-    type: String,
-    required: false,
-    default: "",
-  },
-  label: { type: String as PropType<string>, required: true, default: "" },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-const {modelValue} = toRefs(props)
-
-const emit = defineEmits(["update:modelValue", "toggle"]);
-const toggle = () => {
-  emit("toggle", props.modelValue);
-  emit("update:modelValue", props.modelValue);
-};
-
-</script>
-
-<style lang="scss" scoped>
-    .eui-radio_icons {
-      @apply size-5 absolute z-10 inset-0 rounded-full;
-      &::after {
-        content: '';
-        @apply absolute transform scale-0 opacity-0 transition-all duration-200 delay-75 ease-in size-2.5 bg-white rounded-full top-[0.45rem] left-[0.45rem];
-      }
-    }
-
-    .eui-radio_input:checked + .eui-radio_circle {
-      .eui-radio_icons {
-        &::after {
-          @apply opacity-100 scale-100;
-        }
-      }
-    }
-</style>

package/src/components/searchInput/EUISearch.vue

@@ -1,223 +0,0 @@
-<template>
-  <div ref="componentWrapper" class="cursor-pointer group" @click="expandInput">
-    <div class="relative max-w-96 z-[calc(infinity)]">
-      <div
-        :class="[
-          'relative flex items-center py-1 duration-300 ease-linear bg-gray-100 border border-gray-200 rounded-full pe-1 group-focus-within:ring-2 ring-purple-200 group-focus-within:border-gray-300 transition-all delay-100',
-          isExpanded ? 'group-focus-within:w-96' : 'size-[2.875rem]',
-        ]"
-      >
-        <MagnifyingGlassIcon
-          class="absolute text-current size-6 top-3 left-3"
-        />
-        <input
-          v-if="isExpanded"
-          v-model="searchQuery"
-          type="search"
-          placeholder="Search here..."
-          class="text-sm font-medium bg-transparent w-96 ps-12 pe-2 focus:outline-none min-h-9"
-          autofocus="true"
-          @input="handleSearch"
-          @blur="closeDropdown"
-          @focus="showDropdownResult = true"
-        />
-        <div
-          v-if="menuDropdown && isExpanded"
-          ref="dropdownButton"
-          :open="isOpen"
-          class="flex items-center pl-3 pe-2 py-1.5 ml-auto bg-white cursor-pointer rounded-3xl ring-1 ring-gray-200/40 select-none transition-all duration-300 ease-in delay-100"
-          @click="toggleDropdown"
-        >
-          <div
-            class="inline-flex items-center gap-2 text-sm font-medium tracking-wide min-w-20"
-          >
-            <component :is="selectOption.icon" class="text-current size-4" />
-            {{ selectOption.title }}
-          </div>
-          <ChevronDownStroke
-            :class="[
-              'text-current size-6 transform transition-all duration-300 delay-75',
-              isOpen ? '-rotate-180 opacity-100' : 'opacity-50',
-            ]"
-          />
-        </div>
-      </div>
-      <ul
-        v-if="showDropdown"
-        ref="dropdown"
-        class="absolute text-sm font-medium right-0 z-50 w-40 bg-white border rounded-xl shadow-lg mt-0.5 overflow-hidden"
-      >
-        <li
-          v-for="data in dataList"
-          class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-gray-100"
-          @click.stop="onSelectOption(data)"
-        >
-          <component :is="data.icon" class="text-current size-4" />
-          <span>{{ data.title }}</span>
-        </li>
-      </ul>
-
-      <!-- search data -->
-      <ul
-        v-if="showDropdownResult && filteredResults.length"
-        ref="dropdown"
-        class="absolute text-sm font-medium right-0 z-40 w-full bg-white border rounded-xl shadow-lg mt-0.5 overflow-hidden"
-        @click="closeDropdown"
-      >
-        <li
-          v-for="(result, index) in filteredResults"
-          :key="index"
-          class="flex flex-col gap-1 px-4 py-2 cursor-pointer hover:bg-gray-100"
-        >
-          <div class="flex items-center gap-2">
-            <span
-              class="flex items-center justify-center w-8 h-8 rounded-full"
-              :style="{ backgroundColor: result.color }"
-            >
-              <span class="font-bold text-white">{{ result.initial }}</span>
-            </span>
-            <div class="flex flex-col">
-              <span class="font-semibold">{{ result.name }}</span>
-              <span class="text-sm text-gray-500">{{ result.email }}</span>
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { MagnifyingGlassIcon } from "@heroicons/vue/24/solid";
-import { createPopper } from "@popperjs/core";
-import { computed, onBeforeUnmount, onMounted, ref, toRefs } from "vue";
-import ChevronDownStroke from "../../assets/svg/ChevronDownStroke.vue";
-import Student from "../../assets/svg/Student.vue";
-import Partner from "../../assets/svg/partner.vue";
-import People from "../../assets/svg/people.vue";
-
-const props = defineProps({
-  menuDropdown: {
-    type: Boolean,
-    default: false
-  }
-})
-const {menuDropdown }= toRefs(props);
-
-const isExpanded = ref(false);
-const dropdownButton = ref<HTMLElement | null>(null);
-const dropdown = ref<HTMLElement | null>(null);
-const showDropdown = ref(false);
-const searchQuery = ref();
-const showDropdownResult = ref(false);
-const isOpen = ref(false);
-const componentWrapper = ref<HTMLElement | null>(null);
-
-function expandInput() {
-  isExpanded.value = true;
-}
-
-function closeInput() {
-  if (!searchQuery.value && !selectOption.value) {
-    isExpanded.value = false;
-  }
-  showDropdownResult.value = false;
-  isOpen.value = false;
-}
-
-function toggleDropdown() {
-  showDropdown.value = !showDropdown.value;
-  isOpen.value = !isOpen.value;
-}
-
-function closeDropdown() {
-  showDropdown.value = false;
-  isOpen.value = false;
-  closeInput();
-}
-
-function handleOutsideClick(event: MouseEvent) {
-  if (
-    componentWrapper.value &&
-    !componentWrapper.value.contains(event.target as Node)
-  ) {
-    closeDropdown();
-    if (!searchQuery.value) {
-      isExpanded.value = false;
-    }
-  }
-}
-
-onMounted(() => {
-  document.addEventListener("click", handleOutsideClick);
-  if (searchQuery.value) {
-    searchQuery.value?.focus();
-  }
-  if (dropdownButton.value && dropdown.value) {
-    createPopper(dropdownButton.value, dropdown.value, {
-      placement: "bottom",
-    });
-  }
-});
-
-onBeforeUnmount(() => {
-  document.removeEventListener("click", handleOutsideClick);
-});
-
-const filteredResults = computed(() => {
-  return results.value.filter((result) =>
-    result.name?.toLowerCase().includes(searchQuery.value?.toLowerCase())
-  );
-});
-
-function handleSearch() {
-  if (searchQuery.value) {
-    showDropdownResult.value = true;
-  } else {
-    showDropdownResult.value = false;
-  }
-}
-
-const dataList = ref([
-  { title: "Student", icon: Student },
-  { title: "People", icon: People },
-  { title: "Partner", icon: Partner },
-]);
-
-const selectOption = ref(dataList.value[0]);
-const onSelectOption = (data: any) => {
-  selectOption.value = data;
-  toggleDropdown()
-};
-
-const results = ref([
-  {
-    name: "Kamal Ahmed",
-    email: "kamalahmed@gmail.com",
-    color: "green",
-    initial: "A",
-  },
-  {
-    name: "Kamala Koteswararoo",
-    email: "kamalkote86@gmail.com",
-    color: "purple",
-    initial: "K",
-  },
-  {
-    name: "Kamaljeet Kaur",
-    email: "cheemak346@gmail.com",
-    color: "orange",
-    initial: "K",
-  },
-  {
-    name: "Kamala Hamal",
-    email: "kamalahamal88@outlook.com",
-    color: "gray",
-    initial: "K",
-  },
-]);
-</script>
-
-<style scoped>
-/* Add custom styles here */
-</style>