edvoyui-component-library-test-flight 0.0.184 → 0.0.185

package/src/components/select/EUISelect.vue

@@ -1,1092 +0,0 @@
-<template>
-  <div :class="{ isUseCustomSelect: isUseCustomSelect }">
-    <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>
-    <vSelect
-      v-model="selected"
-      :filter="isFussySeach ? fuseSearch : undefined"
-      :options="items"
-      :label="searchLabel"
-      :name="name"
-      :value="selected"
-      :placeholder="showPlaceholder"
-      :multiple="multiple"
-      :taggable="taggable"
-      :push-tags="pushtags"
-      :deselect-from-dropdown="true"
-      append-to-body
-      :searchable="searchable"
-      :calculate-position="withPopper"
-      :loading="loading"
-      :disabled="disabled"
-      :selectable="selectedLimit"
-      :class="[
-        isUseCustomSelect
-          ? 'customselect'
-          : 'border border-gray-200 focus-within:border-purple-600 focus-within:ring-inset focus-within:ring-1 focus-within:ring-purple-600 z-10 focus-within:rounded',
-        inputFilled ? 'rounded-2xl min-h-14' : 'rounded-md min-h-10',
-        'group relative w-full bg-white cursor-pointer overflow-hidden',
-        { 'opacity-75': disabled },
-        className,
-      ]"
-      :clearable="clearable"
-      :no-drop="nodropDown"
-      :components="customComponents"
-      @search="search($event)"
-      @option:selected="change($event)"
-      @option:deselected="deselected($event)"
-      @option:created="handleOptionCreate"
-      @open="open"
-      :dropdown-should-open="dropdownShouldOpen"
-    >
-      <!-- :clearable="isUseCustomSelect ? clearable : undefined" -->
-      <!-- Allow parent to override header slot -->
-      <template v-if="$slots.header" #header>
-        <slot name="header"></slot>
-      </template>
-      <template v-if="inputFilled && !$slots.header" #header>
-        <div
-          :class="[
-            inputValue
-              ? 'top-3.5 text-xs text-gray-400 cursor-default max-w-max'
-              : 'top-1/2 text-sm text-gray-700 cursor-pointer h-14 pt-5 pb-4 bg-transparent ring-0 ring-gray-200 group-hover:top-3.5 group-hover:py-0 group-hover:h-auto bg-white group-hover:text-xs group-hover:w-max w-[88%] group-hover:-translate-y-1/2 group-hover:text-gray-400',
-            disabled ? ' cursor-not-allowed' : '',
-            required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
-          ]"
-          class="absolute text-left font-medium inset-x-0 px-4 z-10 -translate-y-1/2 duration-200 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-focus-within:-translate-y-1/2 group-focus-within:ring-transparent group-focus-within:h-auto group-focus-within:py-0 capitalize leading-[normal]"
-        >
-          {{ startCaseText(label) || "Select" }}
-        </div>
-      </template>
-
-      <!-- option, deselect, multiple, disabled  -->
-      <template
-        v-if="selectedCount && multiple"
-        #selected-option-container="{}"
-      >
-        <div class="vs__selected_count" :class="[isShowDropdown ? '!p-0' : '']">
-          <template v-if="!isShowDropdown">
-            {{ selectedCountLabel }} <span>{{ selected?.length }}</span>
-          </template>
-        </div>
-      </template>
-
-      <!-- Allow parent to override selected-option slot -->
-      <template v-if="$slots['selected-option']" #selected-option="slotProps">
-        <slot
-          name="selected-option"
-          v-bind="slotProps as Record<string, any>"
-        ></slot>
-      </template>
-
-      <template v-if="!$slots['selected-option']" #selected-option="item">
-        <div
-          :class="
-            isUseCustomSelect
-              ? 'break-words flex items-start'
-              : 'flex items-center'
-          "
-        >
-          <img
-            v-if="
-              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:item[fieldName], iconlink:(item as any)?.iconlink }) : (item as any)?.iconlink
-            "
-            :alt="item[fieldName]"
-          />
-          {{
-            isStartCaseText ? startCaseText(item[fieldName]) : item[fieldName]
-          }}
-        </div>
-      </template>
-
-      <!-- Allow parent to override option slot -->
-      <template v-if="$slots.option" #option="option">
-        <slot name="option" v-bind="option  as Record<string, any>"></slot>
-        <!-- Passing the 'option' data -->
-      </template>
-      <template v-else #option="item">
-        <div class="flex items-center gap-2">
-          <img
-            v-if="(item as any).iconlink"
-            class="flex-shrink-0 size-6"
-            :src="(item as any).iconlink"
-            :alt="item[fieldName]"
-          />
-
-          <span v-if="isCheckbox" class="flex-shrink-0">
-            <input
-              :id="`checkbox-${item[fieldName]}`"
-              type="checkbox"
-              :checked="isChecked(item)"
-              class="selectall__input"
-              @change="(e) => onCheckBoxChange(item, e)"
-            />
-          </span>
-          {{
-            isStartCaseText ? startCaseText(item[fieldName]) : item[fieldName]
-          }}
-        </div>
-      </template>
-
-      <!-- Allow parent to override spinner slot -->
-      <template v-if="$slots.spinner" #spinner="{ loading: _loading }">
-        <slot name="spinner" :loading="_loading || loading"></slot>
-      </template>
-      <template v-else #spinner="{ loading: _loading }">
-        <div
-          v-if="loading || _loading"
-          style="border-left-color: rgba(107, 30, 190, 0.71)"
-          class="vs__spinner"
-        />
-      </template>
-
-      <!-- Allow parent to override list-header slot -->
-      <template v-if="$slots['list-header']" #list-header>
-        <slot name="list-header"></slot>
-      </template>
-
-      <template v-else-if="isSelectAll || isCheckbox" #list-header>
-        <div
-          v-if="isCheckbox && groupSelect"
-          class="sticky top-0 left-0 z-10 flex flex-row items-center justify-between gap-1 px-2 py-2 bg-white border-b border-gray-200 border-solid"
-        >
-          <h3 class="text-xs font-semibold text-black">Options</h3>
-
-          <div class="flex items-center gap-px whitespace-nowrap">
-            <button
-              class="w-full p-1 font-medium transition duration-75 rounded text-xss text-start"
-              :class="[
-                items?.length !== selected?.length
-                  ? 'text-gray-600 hover:bg-gray-50 hover:text-violet-600'
-                  : 'pointer-events-none opacity-50 cursor-default text-gray-400',
-              ]"
-              :disabled="items?.length === selected?.length"
-              @click.prevent="isCheckedAll"
-            >
-              Select All
-            </button>
-            <button
-              class="w-full p-1 font-medium transition duration-75 rounded text-xss text-start"
-              :class="[
-                (selected?.length ?? 0) > 0
-                  ? 'text-gray-600 hover:text-red-600 hover:bg-gray-50'
-                  : 'pointer-events-none opacity-50 cursor-default text-gray-400',
-              ]"
-              :disabled="(selected?.length ?? 0) === 0"
-              @click.prevent="clearAll"
-            >
-              Clear All
-            </button>
-          </div>
-        </div>
-
-        <div
-          v-if="
-            selectedCount &&
-            multiple &&
-            selected &&
-            selected.length > 0 &&
-            isShowDropdown
-          "
-          class="px-2 py-2 border-b border-gray-200 border-solid"
-        >
-          <h3 class="mb-2 font-semibold text-gray-500 text-xss">
-            Selected Countries
-          </h3>
-          <div class="flex flex-wrap gap-1">
-            <div
-              v-for="(item, index) in selected"
-              :key="index"
-              class="inline-flex items-center gap-1 px-2 py-1 text-xs text-purple-700 bg-purple-100 rounded-full"
-            >
-              <span>{{ item[fieldName] }}</span>
-              <button
-                @click.stop="onRemoveSelectedItem(item)"
-                class="text-gray-500 hover:text-red-600"
-              >
-                <XMarkIcon class="size-4" />
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <template v-else-if="isSelectAll">
-          <button
-            v-if="items.length !== selected?.length"
-            class="w-full px-6 py-2 text-sm font-medium text-gray-600 transition duration-75 hover:font-bold hover:text-gray-900 text-start"
-            @click.prevent="selectAll"
-          >
-            Select All
-          </button>
-        </template>
-      </template>
-
-      <!-- Allow parent to override open-indicator slot -->
-      <template v-if="$slots['open-indicator']" #open-indicator="attributes">
-        <slot
-          name="open-indicator"
-          v-bind="attributes as Record<string, any>"
-        ></slot>
-      </template>
-
-      <template v-else #open-indicator="{ attributes }">
-        <span v-bind="attributes as Record<string, any>">
-          <ChevronDownSolid class="text-current size-6" />
-        </span>
-      </template>
-    </vSelect>
-
-     <template v-if="errors && Object.keys(errors).length">
-      <EUIErrorMessage :errors="errors" :name="name" />
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
-import vSelect from "vue-select";
-import "vue-select/dist/vue-select.css";
-import { createPopper } from "@popperjs/core";
-import Fuse from "fuse.js";
-import _, { startCase } from "lodash";
-import {
-  computed,
-  onBeforeUnmount,
-  onMounted,
-  PropType,
-  ref,
-  toRefs,
-  watch,
-  h,
-} from "vue";
-import { ValidationErrors } from "../../utils/types";
-import { XMarkIcon } from "@heroicons/vue/20/solid";
-import ChevronDownSolid from "../../assets/svg/ChevronDownStroke.vue";
-
-const customComponents = {
-  Deselect: {
-    render() {
-      return h(XMarkIcon, { class: "w-4 h-4 text-current" });
-    },
-  },
-  OpenIndicator: {
-    render() {
-      return h(ChevronDownSolid, { class: "w-6 h-6 text-gray-800" });
-    },
-  },
-};
-
-type VirtualElement = {
-  getBoundingClientRect: () => ClientRect | DOMRect;
-  contextElement?: Element;
-};
-
-const showPlaceholder = computed(() => {
-  const label = props.placeholder || `Select ${name}`;
-  const labelReq = props.required ? "*" : "";
-  return `${label} ${labelReq}`;
-});
-
-const startCaseText = (x: string) => {
-  return startCase(x);
-};
-
-const selected = ref<
-  string | string[] | Record<string, any> | Record<string, any>[] | null
->(null);
-
-const nodropDown = ref(false);
-const props = defineProps({
-  clearable: {
-    type: Boolean,
-    default: true,
-  },
-  isUseCustomSelect: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  customWidth: {
-    type: String,
-    default: "",
-    required: false,
-  },
-  customHeight: {
-    type: String,
-    default: "",
-    required: false,
-  },
-  customOffset: {
-    type: Array as PropType<any>,
-    required: false,
-  },
-  className: {
-    type: Array as PropType<string[]>,
-    required: false,
-    default: () => [],
-  },
-  errors: {
-    type: Object as PropType<ValidationErrors>,
-    required: false,
-    default: () => {},
-  },
-  items: {
-    type: Array as PropType<any>,
-    required: true,
-  },
-  placeholder: {
-    type: String,
-    default: "",
-  },
-  label: {
-    type: String,
-    default: "",
-    required: false,
-  },
-  searchLabel: {
-    type: String,
-    default: "name",
-    required: false,
-  },
-  name: {
-    type: String,
-    default: "",
-    required: false,
-  },
-  modelValue: {
-    type: [Object, Array, String],
-    required: true,
-    default: () => {},
-  },
-  value: {
-    type: [Object, Array, String],
-    required: true,
-    default: () => {},
-  },
-  multiple: {
-    type: Boolean,
-    required: false,
-    default: true,
-  },
-  multipleLimit: {
-    type: Number,
-    required: false,
-  },
-  disabled: {
-    type: Boolean as PropType<boolean>,
-    required: false,
-    default: false,
-  },
-  isStartCaseText: {
-    type: Boolean as PropType<boolean>,
-    required: false,
-    default: false,
-  },
-  isFussySeach: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  keys: {
-    type: Array as PropType<string[]>,
-    required: false,
-    default: () => ["e", "label", "value"],
-  },
-  loading: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  isSelectAll: {
-    type: Boolean,
-    default: false,
-  },
-  taggable: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  pushtags: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  searchable: {
-    type: Boolean,
-    required: false,
-    default: true,
-  },
-  inputFilled: {
-    type: Boolean,
-    default: false,
-  },
-  fieldName: {
-    type: String,
-    default: "name",
-  },
-  selectedCount: {
-    type: Boolean,
-    default: false,
-  },
-  selectedCountLabel: {
-    type: String,
-    default: "Selected",
-  },
-  isCheckbox: {
-    type: Boolean,
-    default: false,
-  },
-  groupSelect: { type: Boolean, default: false },
-});
-
-const {
-  modelValue,
-  isFussySeach,
-  clearable,
-  isUseCustomSelect,
-  items,
-  keys,
-  loading,
-  multiple,
-  isStartCaseText,
-  required,
-  fieldName,
-} = toRefs(props);
-const emit = defineEmits([
-  "update:modelValue",
-  "update:searchString",
-  "change",
-  "deselected",
-  "search",
-  "tag",
-  "selectedOption",
-  "open",
-]);
-
-const isCheckedAll = (e: Event) => {
-  if (e.target) {
-    selected.value = [...props.items];
-  }
-};
-
-const isShowDropdown = ref(false);
-
-const dropdownShouldOpen = (VueSelect: any) => {
-  isShowDropdown.value = VueSelect.open;
-  return VueSelect.open;
-};
-
-const onRemoveSelectedItem = (itemToRemove: any) => {
-  if (Array.isArray(selected.value)) {
-    selected.value = selected.value.filter((item: any) => {
-      return item[fieldName.value] !== itemToRemove[fieldName.value];
-    });
-  }
-};
-
-const isChecked = (item: any) => {
-  const sel = selected.value;
-  const itemValue = item?.[fieldName.value];
-  if (Array.isArray(sel)) {
-    return sel.some((s: any) => {
-      if (s && typeof s === "string") {
-        return s === itemValue;
-      } else {
-        return s?.[fieldName.value] === itemValue;
-      }
-    });
-  }
-  if (sel && typeof sel === "object") {
-    return sel?.[fieldName.value] === itemValue;
-  }
-  return false;
-};
-
-const clearAll = (e: Event) => {
-  if (e.target) {
-    selected.value = [];
-    nodropDown.value = false;
-  }
-};
-
-const onCheckBoxChange = (item: any, event: Event) => {
-  const target = event.target as HTMLInputElement;
-
-  if (!Array.isArray(selected.value)) {
-    selected.value = [];
-  }
-
-  const current = selected.value as any[];
-
-  if (target.checked) {
-    const exists = current.some((s) => {
-      if (typeof s === "string") return s === item[fieldName.value];
-      return s?.[fieldName.value] === item[fieldName.value];
-    });
-
-    if (!exists) {
-      current.push(item);
-    }
-  } else {
-    selected.value = current.filter((s) => {
-      if (typeof s === "string") return s !== item[fieldName.value];
-      return s?.[fieldName.value] !== item[fieldName.value];
-    });
-  }
-};
-
-const selectAll = (e: Event) => {
-  if (e.target) {
-    selected.value = [{ _id: "6565d869eb1b7cf8745d6beb", name: "All" }];
-    nodropDown.value = true;
-  }
-};
-
-watch(selected, (newValue) => {
-  // Emit scalar for single-select, array for multi-select
-  if (props.multiple) {
-    emit("update:modelValue", newValue);
-  } else {
-    if (Array.isArray(newValue)) {
-      emit("update:modelValue", newValue[0] ?? "");
-    } else {
-      emit("update:modelValue", newValue as any);
-    }
-  }
-  if (
-    newValue === null ||
-    !newValue ||
-    (Array.isArray(newValue) && newValue.length === 0)
-  ) {
-    emit("deselected", newValue);
-  }
-});
-
-const change = (newValue: any) => {
-  emit("change", newValue);
-};
-
-const deselected = (newValue: any) => {
-  emit("deselected", newValue);
-  if (newValue[fieldName.value] === "All") {
-    nodropDown.value = false;
-  }
-};
-
-watch(modelValue, (newValue: any) => {
-  if (props.multiple) {
-    selected.value = Array.isArray(newValue)
-      ? newValue
-      : newValue
-      ? [newValue]
-      : [];
-  } else {
-    // keep scalar
-    selected.value = Array.isArray(newValue) ? newValue[0] ?? "" : newValue;
-  }
-});
-
-const search = (x: string) => {
-  emit("update:searchString", x);
-  emit("search", x);
-};
-
-const selectWidth = computed(() => props.customWidth);
-const selectMaxHeight = computed(() => props.customHeight);
-const offsetValue = computed(() => props.customOffset);
-
-const withPopper = (
-  dropdownList: HTMLElement,
-  component: { $refs: { toggle: Element | VirtualElement } },
-  { width, maxHeight }: any
-) => {
-  const newwidth = selectWidth.value || width; //setcustom width '400px'
-  const newHeight = selectMaxHeight.value || width; //setcustom maxHeight '600px'
-
-  const newOffset = offsetValue.value || [0, 7]; //setcustom Offset '[123, -1]'
-  const customWidth = isUseCustomSelect.value ? newwidth : width;
-  dropdownList.style.width = customWidth;
-  dropdownList.style.maxHeight = isUseCustomSelect.value
-    ? newHeight
-    : maxHeight;
-  const offsetValues = isUseCustomSelect.value ? newOffset : [0, 7];
-  const popper = createPopper(component.$refs.toggle, dropdownList, {
-    placement: "bottom",
-    modifiers: [
-      {
-        name: "offset",
-        options: {
-          offset: offsetValues,
-        },
-      },
-    ],
-  });
-  dropdownList.classList.add("toggle-dropdown");
-  return () => popper.destroy();
-};
-
-const fuseSearch = (
-  options: readonly unknown[],
-  search: string | any[] | Fuse.Expression
-) => {
-  const fuse: any = new Fuse(options, {
-    keys: keys.value,
-    shouldSort: true,
-  });
-
-  return search ? fuse.search(search).map((item: any) => item) : fuse?.list;
-};
-
-onMounted(() => {
-  if (props.multiple) {
-    if (Array.isArray(props.value)) {
-      selected.value = props.value;
-    } else if (props.value) {
-      selected.value = [props.value];
-    } else {
-      selected.value = [];
-    }
-  } else {
-    // single: scalar
-    if (Array.isArray(props.value)) {
-      selected.value = props.value[0] ?? "";
-    } else {
-      selected.value = props.value ?? "";
-    }
-  }
-});
-
-onBeforeUnmount(() => {
-  selected.value = null;
-});
-
-onBeforeUnmount(() => {
-  selected.value = [];
-});
-
-const slectedChipbg = computed(() => (props.multiple ? "#f3e8ff" : ""));
-const slectedChiptextColor = computed(() => (props.multiple ? "#7e22ce" : ""));
-const slectedChipHeight = computed(() =>
-  props.multiple && props.inputFilled
-    ? "fit-content"
-    : props.inputFilled
-    ? ""
-    : "auto"
-);
-
-const dropDownIcon = computed(() => (props.clearable ? "flex" : "none"));
-
-const selectBG = computed(() => {
-  if (selected.value?.length === 0 || !!_.isEmpty(selected.value)) {
-    return "#ffffff";
-  }
-  return "transparent";
-});
-const selectHeight = computed(() => {
-  if (selected.value?.length === 0 || _.isEmpty(selected.value)) {
-    return props.inputFilled ? "54px" : "36px";
-  }
-
-  let heightValue;
-
-  if (props.multiple) {
-    heightValue = props.inputFilled ? "32px" : "0px";
-  } else if (isUseCustomSelect.value) {
-    heightValue = "fit-content";
-  } else {
-    heightValue = props.inputFilled ? "40px" : "30px";
-  }
-
-  return heightValue;
-});
-
-const selectedMultiple = computed(() => {
-  if (selected.value?.length === 0 || _.isEmpty(selected.value)) {
-    return "0px";
-  }
-  let heightValue;
-  if (isUseCustomSelect.value || props.multiple) {
-    heightValue = props.inputFilled ? "24px" : "4px";
-  } else {
-    heightValue = props.inputFilled ? "12px" : "2px";
-  }
-
-  return heightValue;
-});
-
-const selectFocus = computed(() =>
-  props.multiple && props.inputFilled
-    ? "8px"
-    : props.inputFilled
-    ? "8px"
-    : "0px"
-);
-const searchMargin = computed(() =>
-  props.multiple && props.inputFilled
-    ? "10px"
-    : props.inputFilled
-    ? "10px"
-    : "0px"
-);
-
-const selectRequited = computed(() =>
-  props.required
-    ? "-webkit-linear-gradient(left, #374151 0%, #374151 92%,red 8%,red 100%)"
-    : "-webkit-linear-gradient(left, #374151 50%, #374151 50%)"
-);
-
-interface Iflag {
-  nameText: string;
-  iconlink: string;
-}
-
-interface IKeyValueRef {
-  value: string;
-  name: string;
-  key: string;
-}
-
-const getFlag = computed(() => {
-  return (x: Iflag) =>
-    items.value?.find((item: IKeyValueRef) => item.name === x.nameText)
-      ?.iconlink;
-});
-
-const inputValue = computed(() => {
-  // return !!(props.modelValue || selected.value);
-  const modelValue = props.modelValue;
-  const selectedValue = selected.value;
-  if (modelValue) return true;
-  if (Array.isArray(selectedValue)) return !!selectedValue.length;
-  if (selectedValue && typeof selectedValue === "object")
-    return !!Object.keys(selectedValue).length;
-  return !!selectedValue;
-});
-
-const handleOptionCreate = (e: any) => {
-  emit("selectedOption", e);
-};
-
-const isSelectable = computed(() => {
-  return (
-    !props.multipleLimit || (selected.value?.length ?? 0) < props.multipleLimit
-  );
-});
-
-const selectedLimit = () => {
-  if (!props.multipleLimit) return true;
-
-  if (props.multipleLimit) {
-    return isSelectable.value;
-  }
-};
-
-const open = () => {
-  emit("open");
-};
-</script>
-<style lang="scss">
-:root {
-  --vs-dropdown-color: theme("colors.gray.600");
-  --vs-dropdown-option--active-color: theme("colors.white");
-  --vs-disabled-bg: theme("colors.white");
-}
-.scrollbar {
-  &--hide {
-    @apply overflow-y-auto;
-    &::-webkit-scrollbar {
-      @apply w-0 h-full;
-    }
-    &::-webkit-scrollbar-track {
-      @apply bg-transparent rounded-full;
-    }
-    &::-webkit-scrollbar-thumb {
-      @apply bg-transparent rounded-full;
-    }
-  }
-  &--thin {
-    @apply overflow-y-auto transition delay-300 ease-in;
-    &::-webkit-scrollbar {
-      @apply w-1 h-full;
-    }
-    &::-webkit-scrollbar-track {
-      @apply bg-transparent rounded-full;
-    }
-    &::-webkit-scrollbar-thumb {
-      @apply bg-transparent rounded-full;
-    }
-    &:hover::-webkit-scrollbar-thumb {
-      @apply bg-gray-500;
-    }
-  }
-}
-.vs__dropdown-menu.toggle-dropdown {
-  border-top-style: solid;
-  margin-top: -5px !important;
-  border-radius: 6px !important;
-}
-
-.vs--single.vs--open .vs__selected,
-.vs--single.vs--loading .vs__selected {
-  @apply opacity-0;
-}
-.vs__dropdown {
-  &-toggle {
-    @apply px-1 py-0 border-transparent;
-    &[aria-expanded="true"] {
-      @apply bg-transparent;
-    }
-  }
-  &-option {
-    @apply py-2 text-sm font-medium;
-    &--selected {
-      @apply bg-purple-100 text-purple-700;
-    }
-    &--highlight {
-      @apply bg-gray-100 text-gray-900 font-medium;
-    }
-  }
-  &-menu {
-    @apply max-h-64 py-0;
-  }
-}
-.vs__no-options {
-  @apply py-3 font-medium text-base;
-}
-
-.vs__actions {
-  .vs__clear {
-    @apply mr-0.5 scale-95 transform transition-all duration-300 ease-out text-gray-400;
-    &:hover {
-      @apply scale-125 text-red-600;
-    }
-  }
-  .vs__open-indicator {
-    fill: var(--vs-controls-color);
-  }
-}
-
-.vs__selected-options {
-  @apply group-focus:bg-transparent focus-within:bg-transparent border-transparent;
-  background-color: v-bind(selectBG);
-  min-height: v-bind(selectHeight);
-  margin-top: v-bind(selectedMultiple);
-  span.vs__selected {
-    background: v-bind(slectedChipbg) !important;
-    color: v-bind(slectedChiptextColor) !important;
-    height: v-bind(slectedChipHeight) !important;
-    @apply rounded-md pl-2 text-sm font-medium bg-gray-200 border-transparent;
-
-    button.vs__deselect {
-      @apply p-1 text-gray-400;
-    }
-    &:hover button.vs__deselect svg {
-      @apply fill-current text-red-600;
-    }
-  }
-}
-
-.v-select.vs--multiple {
-  .vs__selected-options {
-    margin-top: v-bind(selectedMultiple);
-    .vs__selected {
-      @apply mt-px;
-    }
-  }
-}
-
-.vs {
-  &__search {
-    @apply px-2 placeholder:text-sm placeholder:font-medium placeholder:leading-loose appearance-none;
-    margin-top: v-bind(searchMargin);
-    &:focus {
-      @apply text-sm font-medium pl-2.5;
-      padding-top: v-bind(selectFocus);
-    }
-  }
-  &__selected {
-    @apply text-sm font-medium;
-  }
-}
-
-.v-select.drop-up.vs--open .vs__dropdown-toggle {
-  border-radius: 0 0 4px 4px;
-  border-top-color: transparent;
-  border-bottom-color: rgba(60, 60, 60, 0.26);
-}
-
-[data-popper-placement="top"] {
-  border-radius: 4px 4px 0 0;
-  border-top-style: solid;
-  border-bottom-style: none;
-  box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.15);
-}
-
-:root {
-  --vs-dropdown-option--active-bg: #7e22ce;
-  --vs-dropdown-option--active-color: #eeeeee;
-}
-
-.v-select input::-webkit-input-placeholder {
-  width: fit-content;
-  background: v-bind(selectRequited);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  @apply appearance-none;
-}
-
-.v-select .vs__selected-options .vs__selected_count {
-  @apply text-gray-600 first:flex items-center justify-start gap-2 hidden text-sm font-medium leading-snug px-2 py-1;
-  span {
-    @apply flex items-center justify-center h-5 text-xs text-gray-800 bg-gray-200 rounded-3xl shrink-0 min-w-5;
-  }
-}
-
-.isUseCustomSelect {
-  .v-select.customselect {
-    .vs__search:focus {
-      padding-top: v-bind(selectFocus);
-    }
-    .vs--single.vs--open .vs__selected,
-    .vs--single.vs--loading .vs__selected {
-      @apply opacity-0;
-    }
-    .vs__dropdown {
-      &-toggle {
-        @apply px-1 py-0 border-transparent;
-        &[aria-expanded="true"] {
-          @apply bg-transparent;
-        }
-      }
-      &-option {
-        @apply py-2 text-sm font-medium;
-        &--selected {
-          @apply bg-purple-100 text-purple-700;
-        }
-        &--highlight {
-          @apply bg-gray-100 text-black font-medium;
-        }
-      }
-      &-menu {
-        @apply max-h-64 py-0;
-      }
-    }
-    .vs__no-options {
-      @apply py-3 font-medium text-base;
-    }
-
-    .vs__selected-options {
-      @apply group-focus:bg-transparent focus-within:bg-transparent border-transparent scrollbar--thin;
-      background-color: v-bind(selectBG);
-      min-height: v-bind(selectHeight);
-      margin-top: v-bind(selectedMultiple);
-      max-height: 54px;
-      span.vs__selected {
-        background: v-bind(slectedChipbg) !important;
-        color: v-bind(slectedChiptextColor) !important;
-        height: v-bind(slectedChipHeight) !important;
-        @apply rounded p-0.5 pl-1  text-xs font-medium bg-gray-200 border-transparent;
-
-        button.vs__deselect {
-          @apply p-0.5;
-        }
-        &:hover button.vs__deselect svg {
-          @apply fill-current text-red-600;
-        }
-      }
-    }
-
-    .vs {
-      &__search {
-        @apply placeholder-gray-700 placeholder:text-sm placeholder:font-medium;
-      }
-      &__selected {
-        @apply text-sm font-medium;
-      }
-    }
-  }
-
-  .v-select.customselect.vs--multiple {
-    .vs__selected-options {
-      margin-top: v-bind(selectedMultiple);
-    }
-  }
-
-  .v-select.customselect.drop-up.vs--open .vs__dropdown-toggle {
-    border-radius: 0 0 4px 4px;
-    border-top-color: transparent;
-    border-bottom-color: rgba(60, 60, 60, 0.26);
-  }
-
-  .v-select.customselect .vs__dropdown-toggle .vs__actions {
-    display: v-bind(dropDownIcon);
-  }
-
-  :root {
-    --vs-dropdown-option--active-bg: #7e22ce;
-    --vs-dropdown-option--active-color: #eeeeee;
-  }
-
-  .v-select.customselect input::-webkit-input-placeholder {
-    width: fit-content;
-    background: v-bind(selectRequited);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-}
-
-.selectall__input {
-  @apply size-4 flex-shrink-0 border border-solid border-gray-200 bg-white appearance-none inline-block select-none cursor-pointer align-middle rounded relative before:content-[''] before:transform before:translate-x-1/2 before:-translate-y-1/2 before:z-[-1] before:absolute before:top-1/2 before:right-1/2 before:block before:size-9 before:rounded-full before:bg-violet-100 before:opacity-0 before:transition-opacity hover:before:opacity-75;
-  &::after {
-    @apply absolute hidden border-solid inset-0 -ml-px -mt-px size-4 scale-90;
-    content: "";
-    background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%2012.7132L10.0168%2017.7247L10.4177%2017.0238C12.5668%2013.2658%2015.541%2010.0448%2019.1161%207.60354L20%207%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E);
-    background-size: contain;
-    transition: all 0.2s ease;
-  }
-  &:hover {
-    @apply bg-violet-100 border-violet-500;
-  }
-  &:checked {
-    transition: all 0.3s ease;
-    transform: translate3d(0, 1, 0);
-    @apply bg-violet-700 border-violet-700;
-    &::after {
-      @apply block border-white;
-    }
-    &:focus {
-      @apply bg-violet-700;
-    }
-  }
-  &:focus {
-    @apply outline-none border border-violet-700 bg-violet-200;
-  }
-  &:disabled {
-    @apply bg-gray-300 border-gray-100 cursor-not-allowed;
-    & ~ span {
-      @apply cursor-not-allowed;
-    }
-    &:checked {
-      @apply bg-white border-white;
-      &::after {
-        @apply block border-gray-100;
-      }
-    }
-  }
-}
-</style>