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

package/src/components/searchTagSelect/SearchInput.vue

@@ -1,167 +0,0 @@
-<template>
-  <div class="relative h-10 rounded-full">
-    <template v-if="icon">
-      <div
-        v-if="icon"
-        class="absolute flex items-center justify-center w-6 h-6 top-2 left-4"
-      >
-        <component
-          :is="icon"
-          :class="[
-            'w-5 h-5',
-            { 'text-gray-800': inputValue },
-            hasError ? 'text-red-500' : 'text-gray-400',
-          ]"
-          aria-hidden="true"
-        />
-      </div>
-    </template>
-    <input
-      ref="searchInput"
-      type="text"
-      :class="['search-input', hasError ? 'error-state' : '']"
-      :placeholder="placeholder"
-      :value="modelValue"
-      @input="emitInput"
-      @focus="onFocus"
-      @blur="onBlur"
-      @click="onClick"
-    />
-    <div
-      v-if="inputValue"
-      class="absolute flex items-center justify-center w-6 h-6 text-gray-400 transition-colors duration-150 ease-in bg-gray-100 cursor-pointer hover:text-gray-700 rounded-xl top-2 right-2"
-      @click.stop="clearSearch"
-    >
-      <XMarkIcon class="w-3 h-3 text-current" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, nextTick, onMounted, ref } from "vue";
-import { XMarkIcon } from "@heroicons/vue/20/solid";
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: "",
-  },
-  isToFocus: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-    required: false,
-    default: "",
-  },
-  icon: {
-    type: [Object, Function],
-    required: false,
-  },
-  hasError: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-});
-
-const searchInput = ref<HTMLInputElement>();
-const hasFocus = ref(false);
-const emit = defineEmits([
-  "update:modelValue",
-  "blur",
-  "cleared",
-  "focus",
-  "click",
-]);
-
-const emitInput = (event: Event) => {
-  const inputElement = event.target as HTMLInputElement;
-  let newValue = inputElement.value;
-  if (newValue !== undefined) {
-    //TODO: firstlater is uppercase added
-    const selectionStart = inputElement.selectionStart;
-    const selectionEnd = inputElement.selectionEnd;
-    if (typeof newValue === "string" && newValue.length > 0) {
-      if (newValue[0] !== newValue[0].toUpperCase()) {
-        newValue = newValue.charAt(0).toUpperCase() + newValue.slice(1);
-      }
-    }
-    emit("update:modelValue", newValue);
-
-    nextTick(() => {
-      if (searchInput.value) {
-        if (searchInput.value.value === newValue) {
-          searchInput.value.setSelectionRange(selectionStart, selectionEnd);
-        }
-      }
-    });
-  }
-};
-
-const inputValue = computed(() => {
-  return props.modelValue === 0 ? true : !!props.modelValue;
-});
-
-const onFocus = () => {
-  hasFocus.value = true;
-  emit("focus");
-};
-
-const onBlur = () => {
-  hasFocus.value = false;
-  emit("blur");
-};
-
-const onClick = () => {
-  emit("click");
-};
-
-const clearSearch = () => {
-  emit("update:modelValue", null);
-  emit("cleared");
-  nextTick(() => {
-    searchInput.value?.focus();
-  });
-};
-
-onMounted(() => {
-  if (props?.isToFocus) {
-    searchInput?.value?.focus();
-  }
-});
-
-// Expose the searchInput ref for parent components to access
-defineExpose({
-  searchInput,
-});
-</script>
-
-<style lang="scss" scoped>
-:deep(input.search-input) {
-  transition: 0.2s;
-  @apply w-full pl-12 pr-2 py-2 text-sm text-gray-700 border-none rounded-full h-10 ring-1 ring-gray-200 ring-opacity-75 focus:ring-2 font-medium focus:ring-purple-400 focus:outline-none outline-none appearance-none ring-inset;
-
-  &::placeholder {
-    @apply font-normal text-gray-400;
-  }
-  &:focus::placeholder {
-    @apply opacity-0 invisible;
-  }
-
-  &.error-state {
-    @apply ring-1 ring-red-500;
-  }
-
-  &.error-state::placeholder {
-    @apply text-red-500;
-  }
-}
-</style>

package/src/components/searchexpand/EUISearchExpand.vue

@@ -1,148 +0,0 @@
-<template>
-  <div class="relative rounded-full size-10">
-    <div class="absolute top-0 right-0">
-      <div
-        ref="componentWrapper"
-        class="cursor-pointer group"
-        @click="expandInput"
-      >
-        <div class="relative max-w-80 z-[calc(infinity)]">
-          <div
-            :class="[
-              'relative flex items-center duration-300 ease-linear bg-gray-100 rounded-full pe-1 group-focus-within:ring-2 ring-purple-200 group-focus-within:border-gray-200 group-focus-within:border transition-all delay-75',
-              isExpanded
-                ? 'group-focus-within:w-80 text-gray-300 h-10'
-                : 'size-10 text-gray-500',
-            ]"
-          >
-            <SearchBigZoomIn
-              class="absolute text-current size-6 top-2 left-2"
-            />
-
-            <button
-              v-if="isExpanded"
-              :class="
-                inputValue ? '  absolute inset-y-0 right-3  ' : ' hidden '
-              "
-              @click="(searchQuery=''), 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>
-
-            <input
-              v-if="isExpanded"
-              v-model="searchQuery"
-              ref="input"
-              :type="type === 'search' ? 'text' : type"
-              placeholder="Search here..."
-              class="h-10 text-sm font-medium text-gray-900 bg-transparent w-80 ps-10 pe-2 focus:outline-none"
-              autocomplete="off"
-              @input="handleSearch"
-              @blur="closeInput"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, PropType, ref, toRefs, watch } from "vue";
-import SearchBigZoomIn from "../../assets/svg/SearchBigZoomIn.vue";
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: "",
-  },
-  searchSync: {
-    type: Boolean,
-    default: false,
-  },
-  type: {
-    type: String as PropType<
-      "text" | "number" | "email" | "password" | "search" 
-    >,
-    default: "text",
-  },
-});
-const { searchSync } = toRefs(props);
-const emit = defineEmits(["update:modelValue"]);
-
-const input = ref<HTMLInputElement>();
-const isExpanded = ref(true);
-const searchQuery = ref();
-const componentWrapper = ref<HTMLElement | null>(null);
-
-function expandInput() {
-  isExpanded.value = true;
-  input?.value?.focus();
-}
-
-const inputValue = computed(() => {
-  return props.modelValue === 0 ? true : !!props.modelValue;
-});
-
-function closeInput() {
-  if (!searchQuery.value) {
-    isExpanded.value = false;
-  }
-}
-
-function handleOutsideClick(event: MouseEvent) {
-  if (
-    componentWrapper.value &&
-    !componentWrapper.value.contains(event.target as Node)
-  ) {
-    closeInput();
-  }
-}
-
-watch(
-  searchSync,
-  (newVal) => {
-    if (!newVal) {
-      closeInput();
-    }
-  },
-  { immediate: true, deep: true }
-);
-
-onMounted(() => {
-  document.addEventListener("click", handleOutsideClick);
-  if (searchQuery.value) {
-    searchQuery.value?.focus();
-  }
-});
-
-onBeforeUnmount(() => {
-  document.removeEventListener("click", handleOutsideClick);
-});
-
-function handleSearch(event: Event) {
-  const newValue = (event?.target as HTMLInputElement)?.value;
-  if (newValue !== undefined) {
-    emit("update:modelValue", newValue);
-  }
-}
-</script>
-
-<style scoped>
-/* Add custom styles here */
-</style>

package/src/components/searchexpand/EUISearchToggle.vue

@@ -1,86 +0,0 @@
-<template>
-  <div class="relative rounded-full size-12">
-    <div class="absolute top-0 right-0">
-      <div
-        ref="componentWrapper"
-        class="cursor-pointer group"
-        @click="expandInput"
-      >
-        <div class="relative max-w-80 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-80 text-gray-300'
-                : 'size-[2.875rem] text-gray-500',
-            ]"
-          >
-            <SearchBigZoomIn
-              class="absolute text-current size-6 top-2.5 left-2.5 transition-colors duration-100"
-            />
-            <input
-              v-if="isExpanded"
-              v-model="searchQuery"
-              ref="input"
-              type="search"
-              placeholder="Search here..."
-              class="text-sm font-medium text-gray-900 bg-transparent w-80 ps-10 pe-2 focus:outline-none min-h-9"
-              autocomplete="off"
-              @input="handleSearch"
-              @blur="handleSearch"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, toRefs, watch } from "vue";
-import SearchBigZoomIn from "../../assets/svg/SearchBigZoomIn.vue";
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: "",
-  },
-  searchSync: {
-    type: Boolean,
-    default: true,
-  },
-});
-const { searchSync } = toRefs(props);
-const emit = defineEmits(["update:modelValue", "update:searchSync"]);
-
-const input = ref<HTMLInputElement>();
-const isExpanded = ref(true);
-const searchQuery = ref(null);
-const componentWrapper = ref<HTMLElement | null>(null);
-
-function handleSearch(event: Event) {
-  const newValue = (event?.target as HTMLInputElement)?.value;
-  if (newValue !== undefined) {
-    emit("update:modelValue", newValue);
-  }
-}
-
-function expandInput() {
-  isExpanded.value = true;
-  input?.value?.focus();
-  emit("update:searchSync", true);
-}
-
-watch(
-  searchSync,
-  (newVal) => {
-    isExpanded.value = newVal;
-    emit("update:searchSync", newVal);
-  },
-  { immediate: true, deep: true }
-);
-</script>
-
-<style scoped>
-/* Add custom styles here */
-</style>