nuxt-hs-ui 2.12.7 → 4.0.0

package/dist/runtime/components/form/select.vue

@@ -1,590 +1,744 @@
-<script setup lang="ts" generic="IdType extends string|number">
-/* ----------------------------------------------------------------------------
-// src\runtime\components\form\select.vue
-// ----------------------------------------------------------------------------
-// Select
-// SelectSelect
------------------------------------------------------------------------------ */
-
-// [ tailwind ]
-// [ NUXT ]
-import { reactive, ref, watch, computed, useId, nextTick } from "#imports";
-
-// import { createPopper } from "@popperjs/core";
-
-// [ utils ]
-import type { ClassType } from "../../utils/class-style";
-import type { SelectItem } from "../../utils/select-item";
-import { useDisplayList, type DisplaySelectItem } from "../../utils/select";
-import { ObjectCopy } from "../../utils/object";
-
-import type { MultiLang } from "../../utils/multi-lang";
-// [ composables ]
-import { useHsFocus } from "../../composables/use-hs-focus";
-import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
-// import { useHsMisc } from "../../composables/use-hs-misc";
-import { useHsIsMobile } from "../../composables/use-hs-is-mobile";
-
-// [ Components ]
-import InputFrame from "./input-frame.vue";
-import SelectImgIcon from "./select-img-icon.vue";
-import Btn from "../form/btn.vue";
-
-// ----------------------------------------------------------------------------
-const hsFocus = useHsFocus();
-const multiLang = useHsMultiLang();
-const tx = multiLang.tx;
-const gt = multiLang.gt;
-// const hsMisc = useHsMisc();
-
-// ----------------------------------------------------------------------------
-// [ Props ]
-type Props = {
-  // ----------------------------------------------------------------------------
-  // Input 種類別
-  list: SelectItem<IdType>[];
-  order?: boolean;
-  loading?: boolean;
-  nullText?: MultiLang;
-  image?: boolean;
-  classImg?: ClassType;
-  classImgTag?: ClassType;
-  nullable?: boolean;
-  searchable?: boolean;
-  // ----------------------------------------------------------------------------
-  data: IdType | null;
-  diff?: IdType | null | undefined;
-  tabindex?: string | undefined;
-  // ----------------------------------------------------------------------------
-  class?: ClassType;
-  classHeader?: ClassType;
-  classInput?: ClassType;
-  // ----------------------------------------------------------------------------
-  // 状態
-  //   focus?: boolean;
-  focusColor?: string;
-  //   change?: boolean;
-  changeColor?: string;
-  error?: boolean;
-  errorColor?: string;
-  disabled?: boolean;
-  disabledColor?: string;
-  readonly?: boolean;
-  headerless?: boolean;
-  // ----------------------------------------------------------------------------
-  // 表示
-  label?: MultiLang;
-  // 表示-副情報
-  require?: boolean;
-  requireText?: MultiLang;
-  warn?: string;
-  warnTimeOut?: number;
-  // ----------------------------------------------------------------------------
-  // 設定
-  size?: "s" | "m" | "l";
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  // ----------------------------------------------------------------------------
-  // Input 種類別
-  order: false,
-  loading: false,
-  nullText: () => ({ ja: "選択してください", en: "Select..." }),
-  nullable: false,
-  image: false,
-  classImg: "",
-  classImgTag: "",
-  // ----------------------------------------------------------------------------
-  diff: undefined,
-  tabindex: undefined,
-  // ----------------------------------------------------------------------------
-  class: "",
-  classHeader: "",
-  classInput: "",
-  // ----------------------------------------------------------------------------
-  // 状態
-  //   focus: false,
-  focusColor: "shadow-[inset_0px_0px_1px_2px_#0d8ee4]",
-  //   change: false,
-  changeColor: "shadow-[inset_0px_0px_1px_2px_#fd9831be]",
-  error: false,
-  errorColor: "shadow-[inset_0px_0px_1px_2px_#d80000dc]",
-  disabled: false,
-  disabledColor: "",
-  readonly: false,
-  headerless: false,
-  // ----------------------------------------------------------------------------
-  // 表示
-  label: "",
-  // 表示-副情報
-  require: false,
-  requireText: () => ({ ja: "必須", en: "Required" }),
-  warn: "",
-  warnTimeOut: 3000,
-  // ----------------------------------------------------------------------------
-  // 設定
-  size: "m",
-});
-// ----------------------------------------------------------------------------
-type EmitIdType = IdType extends string ? string : number;
-
-// [ emit ]
-type Emits = {
-  ref: [element: HTMLElement];
-  focus: [elm: HTMLElement];
-  blur: [elm: HTMLElement];
-  // ----------------------------
-  "update:data": [value: EmitIdType | null];
-  "value-change": [after: EmitIdType | null, before: EmitIdType | null];
-  // ----------------------------
-  keydown: [event: KeyboardEvent];
-  keyup: [event: KeyboardEvent];
-  selectOpen: [uid: string];
-  selectClose: [uid: string];
-  // ----------------------------
-};
-const emit = defineEmits<Emits>();
-// ----------------------------------------------------------------------------
-const slots = defineSlots<{
-  default(props: { msg: string }): any;
-  overlay?(): any;
-  "right-icons"?(): any;
-  "left-icons"?(): any;
-}>();
-// ----------------------------------------------------------------------------
-// [ getCurrentInstance ]
-const uid = useId();
-// ----------------------------------------------------------------------------
-// 更新の有無判定
-const isChangeData = computed(() => {
-  if (props.diff === undefined) return false;
-  if (props.diff !== props.data) return true;
-  return false;
-});
-// [ ref ]
-
-// ----------------------------------------------------------------------------
-const displayData = ref<DisplaySelectItem<IdType> | null>(null);
-watch(displayData, (v) => {
-  const before = props.data;
-  if (v === null) {
-    if (before === null) return;
-    emit("update:data", null);
-    emit("value-change", null, before as any as EmitIdType | null);
-    return;
-  }
-  if (v.id === null) {
-    displayData.value = null;
-    return;
-  }
-  if (v.id === before) return;
-  emit("update:data", v.id as any as EmitIdType | null);
-  emit(
-    "value-change",
-    v.id as any as EmitIdType | null,
-    before as any as EmitIdType | null
-  );
-});
-
-// ----------------------------------------------------------------------------
-// 不明選択肢太陽
-const unKnownSelected = ref<boolean>(false);
-const unKnownData = computed(() => {
-  if (props.data === null) return null;
-  return {
-    id: props.data,
-    text: gt({
-      ja: `無効な値が選択されています (ID=${props.data})`,
-      en: `Invalid value selected (ID=${props.data})`,
-    }),
-  };
-});
-
-// ----------------------------------------------------------------------------
-const isShowHidden = ref(false);
-/** 選択肢に非表示アイテムが含まれているかどうか */
-
-const pList = computed(() => {
-  return ObjectCopy(props.list);
-});
-const includeHidden = computed(() => {
-  return pList.value.filter((row) => row.hidden).length > 0;
-});
-// ----------------------------------------------------------------------------
-/** 選択肢 */
-const displayList = ref<DisplaySelectItem<IdType>[]>([]);
-const baseList = computed(() => {
-  return ObjectCopy(props.list).map((row) => {
-    return { ...row, text: gt(row.text) };
-  });
-});
-
-const setDisplayList = () => {
-  displayList.value = useDisplayList<IdType>({
-    list: baseList.value,
-    id: props.data,
-    order: props.order,
-    unKnownData: unKnownData.value,
-    unKnownSelected: unKnownSelected.value,
-    isShowHidden: isShowHidden.value,
-    require: props.require || !props.nullable,
-    nullText: tx(props.nullText).value,
-  });
-};
-watch(
-  () => props.list,
-  () => {
-    nextTick(() => {
-      setDisplayList();
-    });
-  },
-  { deep: true }
-);
-
-watch(
-  () => [
-    props.list,
-    props.list.length,
-    props.data,
-    isShowHidden.value,
-    props.require,
-    props.nullable,
-    props.nullText,
-  ],
-  () => {
-    nextTick(() => {
-      setDisplayList();
-    });
-  },
-  { immediate: true }
-);
-
-// ----------------------------------------------------------------------------
-
-const checkData = (id: IdType | null) => {
-  // console.log("checkData");
-  const ret = baseList.value.find((row) => row.id === id);
-  if (ret === undefined) {
-    // 選択肢に存在しないコード引当
-    unKnownSelected.value = true;
-    displayData.value = unKnownData.value;
-  } else {
-    unKnownSelected.value = false;
-    displayData.value = ret;
-  }
-};
-checkData(props.data);
-// const activateItem = computed(() => {
-watch(
-  () => props.data,
-  (id) => {
-    checkData(id);
-  }
-);
-watch(baseList, () => {
-  // console.log("change list");
-  nextTick(() => {
-    checkData(props.data);
-  });
-});
-// ----------------------------------------------------------------------------
-
-// [ focus, blur ]
-interface FocusState {
-  isActivate: boolean;
-  isOpen: boolean;
-}
-const focusState = reactive<FocusState>({
-  isActivate: false,
-  isOpen: false,
-});
-
-/**
- * コントロールのFocus判定
- */
-const computedActivate = computed(() => {
-  if (props.disabled === true) return false;
-  if (props.readonly === true) return false;
-  if (focusState.isActivate) return true;
-  if (focusState.isOpen) return true;
-  if (hsFocus.state.id !== uid) return false;
-  return false;
-});
-
-// ----------------------------------------------------------------------------
-// const isOpen = ref(false);
-const onFocus = () => {
-  // console.log('onFocus');
-  if (props.disabled === true) return;
-  if (props.readonly === true) return;
-  focusState.isActivate = true;
-  hsFocus.state.id = uid;
-};
-const onBlur = () => {
-  // console.log('onBlur');
-  focusState.isActivate = false;
-};
-const selectOpen = () => {
-  emit("selectOpen", uid);
-  focusState.isOpen = true;
-};
-const selectClose = () => {
-  // console.log('selectClose');
-  focusState.isOpen = false;
-  emit("selectClose", uid);
-};
-// const placement = ref("top");
-const inputElement = ref<HTMLElement | null>(null);
-// const withPopper = (dropdownList: any, component: any, { width }: any) => {
-//   dropdownList.style.width = width;
-//   const popper = createPopper(component.$refs.toggle, dropdownList, {
-//     placement: placement.value as any,
-//     modifiers: [
-//       {
-//         name: "offset",
-//         options: {
-//           offset: [0, -1],
-//         },
-//       },
-//       {
-//         name: "toggleClass",
-//         enabled: true,
-//         phase: "write",
-//         fn({ state }) {
-//           component.$el.classList.toggle("drop-up", state.placement === "top");
-//         },
-//       },
-//     ],
-//   });
-//   return () => popper.destroy();
-// };
-//       :calculate-position="withPopper"
-const isMobile = useHsIsMobile();
-// ----------------------------------------------------------------------------
-// ----------------------------------------------------------------------------
-</script>
-
-<template>
-  <InputFrame
-    :class="[props.class]"
-    :class-header="props.classHeader"
-    :class-input="['px-0', props.classInput]"
-    :focus="computedActivate"
-    :focus-color="props.focusColor"
-    :change="isChangeData"
-    :change-color="props.changeColor"
-    :error="props.error"
-    :error-color="props.errorColor"
-    :disabled="props.disabled"
-    :disabled-color="props.disabledColor"
-    :readonly="props.readonly"
-    :label="props.label"
-    :require="props.require"
-    :require-text="tx(props.requireText).value"
-    :warn="props.warn"
-    :warn-time-out="props.warnTimeOut"
-    :size="props.size"
-    :headerless="props.headerless"
-  >
-    <template v-if="slots['left-icons']" #left-icons>
-      <slot name="left-icons" :disabled="disabled" />
-    </template>
-    <template v-if="slots['right-icons']" #right-icons>
-      <slot name="right-icons" :disabled="disabled" />
-    </template>
-    <template v-if="slots.overlay" #overlay>
-      <slot name="overlay"></slot>
-    </template>
-    <div
-      v-if="displayData === null"
-      class="absolute inset-0 flex items-center px-1 pointer-events-none text-[0.9em]"
-      :class="[computedActivate ? 'opacity-30' : '']"
-    >
-      {{ tx(props.nullText) }}
-    </div>
-    <v-select
-      ref="inputElement"
-      v-model="displayData"
-      label="text"
-      index="id"
-      append-to-body
-      :options="displayList"
-      :loading="props.loading"
-      :searchable="!isMobile.isMobile && searchable"
-      :clearable="!props.require && props.nullable"
-      :disabled="props.disabled || props.readonly"
-      :uid="uid"
-      :class="[
-        `size-${props.size}`,
-        { disabled: props.disabled || props.readonly },
-      ]"
-      @open="selectOpen"
-      @close="selectClose"
-      @blur="onBlur()"
-      @focus="onFocus()"
-    >
-      <!-- :autoscroll="false" -->
-      <!--  -->
-      <!--  -->
-      <!--  -->
-      <template #selected-option="{ text, imgUrl, deleted, appendIcon }">
-        <div
-          class="flex items-baseline w-full max-w-full min-w-0"
-          :class="loading ? 'opacity-0' : ''"
-        >
-          <SelectImgIcon
-            v-if="imgUrl && props.image"
-            class="flex-none"
-            :class="[computedActivate ? 'opacity-40' : '']"
-            :img-url="imgUrl"
-            :class-img="props.classImg"
-            :class-img-tag="props.classImgTag"
-          />
-          <div class="flex-1 truncate min-w-0">{{ text }}</div>
-          <div v-if="deleted" class="text-error text-[0.7em] leading-[1em]">
-            {{ tx({ ja: "削除済", en: "Deleted" }) }}
-          </div>
-          <!-- <div v-if="hidden" class="text-error text-[0.7em] leading-[1em]">
-            {{ tx({ ja: "非表示", en: "Hidden" }) }}
-          </div> -->
-          <div
-            v-if="appendIcon && typeof appendIcon === 'string'"
-            class="flex-none"
-          >
-            <i :class="appendIcon"></i>
-          </div>
-
-          <div
-            v-else-if="appendIcon && Array.isArray(appendIcon)"
-            class="flex-none"
-          >
-            <i v-for="(c, i) in appendIcon" :key="i" :class="c"></i>
-          </div>
-        </div>
-      </template>
-      <template #option="{ text, imgUrl, deleted, hidden, appendIcon }">
-        <div class="flex items-center">
-          <SelectImgIcon
-            v-if="props.image"
-            class="flex-none"
-            :img-url="imgUrl"
-            :class-img="props.classImg"
-            :class-img-tag="props.classImgTag"
-          />
-          <div class="flex-1 truncate">{{ text }}</div>
-          <div v-if="deleted" class="text-error text-[0.7em] leading-[1em]">
-            {{ tx({ ja: "削除済", en: "Deleted" }) }}
-          </div>
-          <div v-if="hidden" class="text-error text-[0.7em] leading-[1em]">
-            {{ tx({ ja: "非表示", en: "Hidden" }) }}
-          </div>
-          <span v-if="appendIcon && typeof appendIcon === 'string'">
-            <i :class="appendIcon"></i>
-          </span>
-          <span v-else-if="appendIcon && Array.isArray(appendIcon)">
-            <i v-for="(c, i) in appendIcon" :key="i" :class="c"></i>
-          </span>
-        </div>
-      </template>
-      <template v-if="includeHidden" #list-footer>
-        <li class="vs__dropdown-option v-select-hidden-toggle-switch">
-          <Btn
-            theme="accent1"
-            variant="outlined"
-            class="w-full"
-            size="xs"
-            @click="isShowHidden = !isShowHidden"
-          >
-            <span class="me-1">Hidden options</span>
-            <i
-              class="fas"
-              :class="[
-                !isShowHidden
-                  ? 'fa-eye-slash text-error'
-                  : 'fa-eye text-success',
-              ]"
-            ></i>
-            <i class="fas fa-caret-right mx-1"></i>
-            <i
-              class="fas"
-              :class="[
-                isShowHidden
-                  ? 'fa-eye-slash text-error'
-                  : 'fa-eye text-success',
-              ]"
-            ></i>
-          </Btn>
-        </li>
-      </template>
-    </v-select>
-  </InputFrame>
-</template>
-
+<script setup>
+import {
+  reactive,
+  ref,
+  watch,
+  computed,
+  useId,
+  defineShortcuts,
+  nextTick,
+  onMounted,
+  useTemplateRef
+} from "#imports";
+import { ObjectCopy } from "../../utils/object";
+import { InitModalControl, InitModals } from "../../utils/modal";
+import { useHsFocus } from "../../composables/use-hs-focus";
+import { useHsPinia } from "../../composables/use-pinia";
+import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
+import { useHsScrollLock } from "../../composables/use-hs-scroll-lock";
+import { useHsMisc } from "../../composables/use-hs-misc";
+import InputFrame from "./input-frame.vue";
+import Btn from "../form/btn.vue";
+import SelectHiddenItemToggle from "./_select/hidden-item-toggle.vue";
+import { useHsIsMobile } from "../../composables/use-hs-is-mobile";
+import TextBox from "../form/text-box.vue";
+import SelectItemContainer from "./_select/item-container.vue";
+import ViewSelectItemRow from "./_select/item-row.vue";
+const props = defineProps({
+  list: { type: Array, required: true },
+  order: { type: Boolean, required: false, default: false },
+  loading: { type: Boolean, required: false, default: false },
+  nullText: { type: [String, Object], required: false, default: () => ({ ja: "\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044", en: "Select..." }) },
+  unknownText: { type: [String, Object], required: false, default: () => ({
+    ja: "\u7121\u52B9\u306A\u9078\u629E\u304C\u8A2D\u5B9A\u3055\u308C\u3066\u3044\u307E\u3059",
+    en: "An invalid selection has been made"
+  }) },
+  img: { type: Boolean, required: false },
+  imgMode: { type: String, required: false, default: "contain" },
+  classImg: { type: [String, Object, Array], required: false, default: "" },
+  classImgTag: { type: [String, Object, Array], required: false, default: "" },
+  nullable: { type: Boolean, required: false, default: false },
+  searchable: { type: Boolean, required: false },
+  class: { type: [String, Object, Array], required: false, default: "" },
+  classHeader: { type: [String, Object, Array], required: false, default: "" },
+  classInput: { type: [String, Object, Array], required: false, default: "" },
+  data: { type: null, required: true },
+  diff: { type: null, required: false, default: void 0 },
+  tabindex: { type: null, required: false, default: void 0 },
+  focusColor: { type: String, required: false, default: "shadow-[inset_0px_0px_1px_2px_#0d8ee4]" },
+  changeColor: { type: String, required: false, default: "shadow-[inset_0px_0px_1px_2px_#fd9831be]" },
+  error: { type: Boolean, required: false, default: false },
+  errorColor: { type: String, required: false, default: "shadow-[inset_0px_0px_1px_2px_#d80000dc]" },
+  disabled: { type: Boolean, required: false, default: false },
+  disabledColor: { type: String, required: false, default: "" },
+  readonly: { type: Boolean, required: false, default: false },
+  headerless: { type: Boolean, required: false, default: false },
+  label: { type: [String, Object], required: false, default: "" },
+  require: { type: Boolean, required: false, default: false },
+  requireText: { type: [String, Object], required: false, default: () => ({ ja: "\u5FC5\u9808", en: "Required" }) },
+  warn: { type: String, required: false, default: "" },
+  warnTimeOut: { type: Number, required: false, default: 3e3 },
+  size: { type: String, required: false, default: "m" }
+});
+const emit = defineEmits(["update:data", "value-change", "focus", "blur"]);
+const slots = defineSlots();
+const multiLang = useHsMultiLang(useHsPinia());
+const tx = multiLang.tx;
+const gt = multiLang.gt;
+const hsFocus = useHsFocus(useHsPinia());
+const hsIsMobile = useHsIsMobile(useHsPinia());
+const hsMisc = useHsMisc(useHsPinia());
+onMounted(() => {
+  hsIsMobile.init();
+});
+const uid = useId();
+const inputFrameElm = ref();
+const searchWord = ref("");
+const selectOpen = ref(false);
+const openToggle = () => {
+  if (selectOpen.value || modal.sp.isShow) {
+    selectOpen.value = false;
+    modal.sp.close();
+    return;
+  }
+  if (props.disabled) return;
+  if (props.readonly) return;
+  if (props.searchable && hsIsMobile.isMobile) {
+    modal.sp.show();
+  } else {
+    selectOpen.value = true;
+  }
+};
+const lock = computed(() => {
+  return props.disabled || props.readonly;
+});
+const activeValue = ref(props.data);
+watch(
+  () => props.data,
+  () => {
+    activeValue.value = props.data;
+  }
+);
+let versionCounter = 0;
+const nullItem = computed(() => {
+  return { id: null, text: props.nullText };
+});
+const listBase = computed(() => {
+  versionCounter++;
+  const ret = ObjectCopy(
+    props.list.map((row) => {
+      return {
+        ...row,
+        text: gt(row.text) || "",
+        _key: `${row.id}:${versionCounter ?? 0}`
+      };
+    })
+  );
+  if (props.nullable) {
+    ret.unshift(nullItem.value);
+  }
+  return ret;
+});
+const hasLabel = computed(() => {
+  return !!props.list.find((row) => !!row.groupId);
+});
+const activeRow = computed(() => {
+  return listBase.value.find((row) => row.id === activeValue.value) || null;
+});
+const diffDisplayText = computed(() => {
+  if (!props.diff) return "";
+  const data = listBase.value.find((row) => row.id === props.diff) || null;
+  if (!data) return props.nullText;
+  return tx(data.text).value;
+});
+const hiddenItemVisible = ref(false);
+const hasHiddenItem = computed(() => {
+  return props.list.filter((row) => {
+    if (row.deleted) return false;
+    if (row.hidden) return true;
+    return false;
+  }).length !== 0;
+});
+const updateData = (value) => {
+  if (props.disabled === true) return false;
+  if (props.readonly === true) return false;
+  const before = props.data;
+  if (!value) {
+    if (!props.nullable) return;
+    emit("update:data", value);
+    emit("value-change", value, before);
+    return;
+  }
+  emit("update:data", value);
+  emit("value-change", value, before);
+};
+const displayList = computed(() => {
+  const ret = listBase.value.filter((row) => {
+    if (row.id === props.data) return true;
+    if (row.deleted) return false;
+    if (!hiddenItemVisible.value && row.hidden) {
+      return false;
+    }
+    return true;
+  }).sort((a, b) => {
+    if (a.order === void 0 || b.order === void 0) return 0;
+    if (a.order < b.order) return -1;
+    if (a.order > b.order) return 1;
+    return 0;
+  });
+  return ret;
+});
+const isChangeData = computed(() => {
+  if (props.diff === void 0) return false;
+  if (props.diff !== props.data) return true;
+  return false;
+});
+const focusState = reactive({
+  isActivate: false,
+  openActual: false
+});
+const onFocus = () => {
+  if (props.disabled === true) return;
+  if (props.readonly === true) return;
+  focusState.isActivate = true;
+  if (hsFocus.state.id !== uid) {
+    hsFocus.state.id = uid;
+  }
+};
+const onBlur = () => {
+  focusState.isActivate = false;
+};
+const focusId = computed(() => hsFocus.state.id);
+watch(focusId, () => {
+  if (hsFocus.state.id !== uid) {
+    focusState.openActual = false;
+    selectOpen.value = false;
+  }
+});
+watch(selectOpen, (v) => {
+  if (!v) {
+    setTimeout(() => {
+      focusState.openActual = false;
+    }, 300);
+  } else {
+    focusState.openActual = true;
+    if (hsFocus.state.id !== uid) {
+      hsFocus.state.id = uid;
+    }
+  }
+});
+defineShortcuts({
+  delete: {
+    // 入力フォーカス中でも発火させたいなら true（環境によっては省略でOK）
+    usingInput: false,
+    handler: (e) => {
+      if (selectOpen.value) return;
+      if (!focusState.isActivate) return;
+      e.preventDefault();
+      updateData(null);
+    }
+  },
+  backspace: {
+    usingInput: false,
+    handler: (e) => {
+      if (selectOpen.value) return;
+      if (!focusState.isActivate) return;
+      e.preventDefault();
+      updateData(null);
+    }
+  },
+  enter: {
+    usingInput: false,
+    handler: () => {
+      if (selectOpen.value) return;
+      if (!focusState.isActivate) return;
+      selectOpen.value = !selectOpen.value;
+    }
+  }
+});
+const content = {
+  disableOutsidePointerEvents: true,
+  bodyLock: false
+};
+const uiBase = [
+  "bg-transparent",
+  "max-w-full text-left",
+  "focus-visible:outline-none  focus:outline-none ring-0 focus:ring-0",
+  "py-0 pr-[10px]",
+  "focus-visible:ring-0 "
+];
+const modal = reactive({
+  sp: InitModalControl()
+});
+onMounted(() => InitModals(modal, nextTick));
+const modalSpScrollTop = () => {
+  if (!modalSpScrollTopTarget.value) return;
+  modalSpScrollTopTarget.value?.scrollIntoView();
+};
+modal.sp.showBefore = async () => {
+  if (!activeValue.value) return modalSpScrollTop();
+  const target = spFilterList.value.find((row) => row.id === activeValue.value);
+  if (target === void 0 || !target.html) return modalSpScrollTop();
+  target.html.scrollIntoView();
+};
+const modalSpScrollTopTarget = useTemplateRef("modalSpScrollTopTarget");
+const scrollLock = useHsScrollLock();
+const modalElm = useTemplateRef("modalElm");
+watch(modalElm, (elm) => {
+  if (elm !== null) scrollLock.init(elm);
+});
+watch(
+  () => modal.sp.isShow,
+  (v) => {
+    if (v) {
+      scrollLock.lock();
+    } else {
+      scrollLock.unlock();
+    }
+  }
+);
+const showSpModal = () => {
+  if (props.disabled) return;
+  if (props.readonly) return;
+  modal.sp.show();
+};
+const norm = (s) => {
+  return s.normalize("NFKC");
+};
+const spFilterList = computed(() => {
+  return displayList.value.filter((row) => {
+    if (!searchWord.value) return true;
+    if (norm(row.text).toLocaleLowerCase().includes(norm(searchWord.value).toLocaleLowerCase())) {
+      return true;
+    }
+    return false;
+  }).map((row) => {
+    return {
+      ...row,
+      html: null
+    };
+  });
+});
+const computedActivate = computed(() => {
+  if (props.disabled === true) return false;
+  if (props.readonly === true) return false;
+  if (selectOpen.value) return true;
+  if (modal.sp.isShow) return true;
+  if (hsFocus.state.id !== uid) return false;
+  if (focusState.openActual) return true;
+  if (focusState.isActivate) return true;
+  return false;
+});
+watch(computedActivate, (value) => {
+  if (value === true) {
+    setTimeout(() => {
+      emit("focus");
+    }, 10);
+  } else {
+    emit("blur");
+  }
+});
+</script>
+
+<template>
+  <InputFrame
+    :class="['HsSelect', props.class]"
+    :class-header="props.classHeader"
+    :class-input="[' px-0 flex items-center flex-1', props.classInput]"
+    :focus="computedActivate"
+    :focus-color="props.focusColor"
+    :change="isChangeData"
+    :change-color="props.changeColor"
+    :error="props.error"
+    :error-color="props.errorColor"
+    :disabled="props.disabled"
+    :disabled-color="props.disabledColor"
+    :readonly="props.readonly"
+    :label="props.label"
+    :require="props.require"
+    :require-text="tx(props.requireText).value"
+    :warn="props.warn"
+    :warn-time-out="props.warnTimeOut"
+    :size="props.size"
+    :headerless="props.headerless"
+    @focusin="onFocus"
+    @focusout="onBlur"
+    @ref="(e) => inputFrameElm = e"
+    @click="openToggle()"
+  >
+    <template #overlay="{ focus, change }">
+      <div
+        v-if="props.diff !== void 0 && change"
+        class="absolute inset-0 bg-red/30 transition-opacity flex items-center p-1 bg-dark/20"
+        :class="!focus && hsMisc.capsLockState ? 'opacity-100' : 'opacity-0 pointer-events-none select-none'"
+      >
+        <div class="flex" @mousedown.prevent @click.prevent>
+          <Btn
+            variant="outlined"
+            theme="error"
+            tabindex="-1"
+            size="xs"
+            class="bg-white flex-none"
+            @click.stop="updateData(props.diff)"
+          >
+            <i class="fa-solid fa-rotate-right"></i>
+          </Btn>
+          <div v-if="props.diff" class="px-1 truncate bg-white mx-1 flex items-center select-none" @click.stop>
+            {{ diffDisplayText }}
+          </div>
+        </div>
+      </div>
+      <template v-if="slots.overlay">
+        <slot name="overlay" :focus="focus" :change="change"></slot>
+      </template>
+    </template>
+    <template v-if="slots['left-icons']" #left-icons>
+      <slot name="left-icons" :disabled="disabled" />
+    </template>
+    <template #right-icons>
+      <Btn
+        v-if="!lock && props.nullable && props.data !== null"
+        variant="text"
+        theme="error"
+        tabindex="-1"
+        class="text-error w-[1.4em] hover:bg-accent1/10 mr-1"
+        @click.stop="updateData(null)"
+      >
+        <i class="fa-solid fa-xmark"></i>
+      </Btn>
+      <Btn
+        v-if="!lock"
+        variant="text"
+        theme="accent1"
+        tabindex="-1"
+        class="text-accent1 w-[1.4em] hover:bg-accent1/10 mr-1"
+        @click.stop="openToggle()"
+      >
+        <i class="fa-solid fa-chevron-down transition-all" :class="[selectOpen ? 'rotate-x-180' : '']"></i>
+      </Btn>
+      <slot name="right-icons" :disabled="disabled" />
+    </template>
+    <template v-if="slots['label-prepend']" #label-prepend>
+      <slot name="label-prepend" />
+    </template>
+    <template v-if="slots['label-append']" #label-append>
+      <slot name="label-append" />
+    </template>
+    <template v-if="slots['header-right']" #header-right>
+      <slot name="header-right" />
+    </template>
+    <template #default>
+      <template v-if="!props.searchable">
+        <USelect
+          v-model:open="selectOpen"
+          :model-value="activeValue"
+          :items="displayList"
+          value-key="id"
+          label-key="text"
+          class="w-full"
+          :trailing="false"
+          trailing-icon=""
+          :ui="{
+  base: uiBase,
+  item: ['!bg-white focus:bg-white active:bg-white p-0']
+}"
+          :content="{
+  reference: inputFrameElm,
+  ...content
+}"
+          :disabled="lock"
+          :close-on-select="false"
+          @update:model-value="(v) => updateData(v)"
+        >
+          <template #default>
+            <div
+              class="flex items-center w-full"
+              :class="[
+  props.disabled ? 'cursor-not-allowed' : '',
+  //
+  props.readonly ? 'cursor-text' : '',
+  //
+  !lock ? 'cursor-pointer' : ''
+  //
+]"
+              @click.stop="openToggle()"
+            >
+              <template v-if="activeRow">
+                <SelectItemContainer
+                  :item="activeRow"
+                  :value="activeValue"
+                  :img="props.img"
+                  :activated="props.img"
+                  :class-img="props.classImg"
+                  :class-img-tag="props.classImgTag"
+                  :img-mode="props.imgMode"
+                  :disabled="props.disabled"
+                  :readonly="props.readonly"
+                  type="display"
+                />
+              </template>
+              <template v-else-if="!!props.data">
+                <div class="min-w-0 truncate flex-1 text-[1rem]" :class="[!props.disabled ? 'text-error' : '']">
+                  {{ tx(props.unknownText) }}
+                </div>
+              </template>
+              <template v-else>
+                <div class="min-w-0 truncate flex-1 text-[1rem]" :class="[!props.disabled ? 'text-gray-700' : '']">
+                  {{ tx(props.nullText) }}
+                </div>
+              </template>
+            </div>
+          </template>
+          <template #trailing>
+            <div></div>
+          </template>
+          <template #item="{ item, index }">
+            <ViewSelectItemRow
+              :list="displayList"
+              :item="item"
+              :index="index"
+              :active-id="activeValue"
+              :has-label="hasLabel"
+              :img="props.img"
+              :class-img="props.classImg"
+              :class-img-tag="props.classImgTag"
+              :img-mode="props.imgMode"
+              :disabled="props.disabled"
+              :readonly="props.readonly"
+            />
+          </template>
+          <template v-if="hasHiddenItem" #content-bottom>
+            <div class="p-1">
+              <SelectHiddenItemToggle v-model:hidden-item-visible="hiddenItemVisible" />
+            </div>
+          </template>
+        </USelect>
+      </template>
+      <template v-else-if="props.searchable && !hsIsMobile.isMobile">
+        <USelectMenu
+          v-model:serach-term="searchWord"
+          v-model:open="selectOpen"
+          :model-value="activeValue"
+          :items="displayList"
+          value-key="id"
+          label-key="text"
+          class="w-full"
+          :trailing="false"
+          trailing-icon=""
+          :ui="{
+  base: uiBase,
+  item: ['!bg-white focus:bg-white active:bg-white p-0']
+}"
+          :content="{
+  reference: inputFrameElm,
+  ...content
+}"
+          :disabled="lock"
+          :close-on-select="false"
+          @update:model-value="(v) => updateData(v)"
+        >
+          <template #default>
+            <div
+              :key="activeRow?._key || 'null-_base'"
+              class="flex items-center w-full"
+              :class="[
+  props.disabled ? 'cursor-not-allowed' : '',
+  //
+  props.readonly ? 'cursor-text' : '',
+  //
+  !lock ? 'cursor-pointer' : ''
+  //
+]"
+              @click.stop="openToggle()"
+            >
+              <template v-if="activeRow">
+                <SelectItemContainer
+                  :item="activeRow"
+                  :value="activeValue"
+                  :img="props.img"
+                  :activated="props.img"
+                  :class-img="props.classImg"
+                  :class-img-tag="props.classImgTag"
+                  :img-mode="props.imgMode"
+                  :disabled="props.disabled"
+                  :readonly="props.readonly"
+                  type="display"
+                />
+              </template>
+              <template v-else-if="!!props.data">
+                <div class="min-w-0 truncate flex-1 text-[1rem]" :class="[!props.disabled ? 'text-error' : '']">
+                  {{ tx(props.unknownText) }}
+                </div>
+              </template>
+              <template v-else>
+                <div class="min-w-0 truncate flex-1" :class="[!props.disabled ? 'text-gray-700' : '']">
+                  {{ tx(props.nullText) }}
+                </div>
+              </template>
+            </div>
+          </template>
+          <template #trailing>
+            <div></div>
+          </template>
+          <template #item="{ item, index }">
+            <ViewSelectItemRow
+              :key="item.id"
+              :list="displayList"
+              :item="item"
+              :index="index"
+              :active-id="activeValue"
+              :has-label="hasLabel"
+              :img="props.img"
+              :class-img="props.classImg"
+              :class-img-tag="props.classImgTag"
+              :img-mode="props.imgMode"
+              :disabled="props.disabled"
+              :readonly="props.readonly"
+            />
+          </template>
+          <template v-if="hasHiddenItem" #content-bottom>
+            <div class="p-1">
+              <SelectHiddenItemToggle v-model:hidden-item-visible="hiddenItemVisible" />
+            </div>
+          </template>
+        </USelectMenu>
+      </template>
+      <template v-else>
+        <div
+          :key="activeRow?._key || 'null-_base'"
+          class="flex items-center w-full px-2.5 text-neutral-900"
+          :class="[
+  props.disabled ? 'cursor-not-allowed' : '',
+  //
+  props.readonly ? 'cursor-text' : '',
+  //
+  !lock ? 'cursor-pointer' : ''
+  //
+]"
+          @click.stop="showSpModal()"
+        >
+          <template v-if="activeRow">
+            <SelectItemContainer
+              :item="activeRow"
+              :value="activeValue"
+              :img="props.img"
+              :activated="props.img"
+              :class-img="props.classImg"
+              :class-img-tag="props.classImgTag"
+              :img-mode="props.imgMode"
+              :disabled="props.disabled"
+              :readonly="props.readonly"
+              type="display"
+            />
+          </template>
+          <template v-else-if="!!props.data">
+            <div class="min-w-0 truncate flex-1 text-[1rem]" :class="[!props.disabled ? 'text-error' : '']">
+              {{ tx(props.unknownText) }}
+            </div>
+          </template>
+          <template v-else>
+            <div class="min-w-0 truncate flex-1" :class="[!props.disabled ? 'text-gray-700' : '']">
+              {{ tx(props.nullText) }}
+            </div>
+          </template>
+        </div>
+        <Modal
+          :show="modal.sp.isShow"
+          closeable
+          @close="modal.sp.close();
+  selectOpen = false"
+        >
+          <Card ref="modalElm" class="HsSelectModal w-full max-w-125 max-h-full">
+            <CardItem variant="header" size="s" cross @update:open="modal.sp.close()">
+              <div>
+                {{ tx(props.label || { ja: "\u9078\u629E", en: "Please Select" }) }}
+              </div>
+            </CardItem>
+            <CardItem variant="body">
+              <div class="text-[14px] text-gray-600 leading-[1em] mb-1">{{ tx({ ja: "\u691C\u7D22", en: "Search" }) }}</div>
+              <TextBox v-model:data="searchWord" size="m" />
+            </CardItem>
+            <CardItem variant="body">
+              <div class="h-px w-full bg-main0/50"></div>
+            </CardItem>
+            <CardItem variant="body" scroll>
+              <div ref="modalSpScrollTopTarget" class="grid gap-1">
+                <template v-for="(row, index) in spFilterList" :key="index">
+                  <div
+                    v-if="
+  row.groupId !== void 0 && (index === 0 || spFilterList[index - 1]?.groupId !== row.groupId)
+"
+                    class="mt-1 py-1 px-2 font-semibold bg-dark/5 border-dark/40 border"
+                    :class="index !== 0 ? 'mt-2' : ''"
+                  >
+                    {{ tx(row.groupLabel ?? "") }}
+                  </div>
+                  <div
+                    :ref="(e) => row.html = e"
+                    class="cursor-pointerw-full text-neutral-900 border rounded bg-white overflow-hidden"
+                    :class="[
+  row.id === activeValue ? 'border-accent1' : 'border-black/20',
+  row.id !== null && hasLabel ? 'ml-2' : ''
+]"
+                    @click="updateData(row.id);
+  modal.sp.close()"
+                  >
+                    <div class="flex items-center active:bg-accent1/10 p-3">
+                      <SelectItemContainer
+                        :item="row"
+                        :value="activeValue"
+                        :img="props.img"
+                        :activated="props.img"
+                        :class-img="props.classImg"
+                        :class-img-tag="props.classImgTag"
+                        :img-mode="props.imgMode"
+                        :disabled="props.disabled"
+                        :readonly="props.readonly"
+                        type="item"
+                      />
+                    </div>
+                  </div>
+                </template>
+                <div
+                  v-if="listBase.length !== 0 && spFilterList.length === 0"
+                  class="text-error whitespace-pre-line text-center"
+                >
+                  {{
+                    tx({
+  ja: "\u691C\u7D22\u6761\u4EF6\u306B\u4E00\u81F4\u3059\u308B\u7D50\u679C\u306F\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F\u3002\n\u4ED6\u306E\u30AD\u30FC\u30EF\u30FC\u30C9\u3067\u304A\u8A66\u3057\u304F\u3060\u3055\u3044\u3002",
+  en: "No results matched your search. \nPlease try different keywords."
+})
+                  }}
+                </div>
+                <div v-else-if="listBase.length === 0" class="text-error text-center">
+                  {{
+                    tx({
+  ja: "\u5229\u7528\u53EF\u80FD\u306A\u9078\u629E\u80A2\u304C\u3042\u308A\u307E\u305B\u3093",
+  en: "No selectable options"
+})
+                  }}
+                </div>
+              </div>
+            </CardItem>
+            <CardItem variant="body" class="pt-1 bg-back">
+              <SelectHiddenItemToggle v-if="hasHiddenItem" v-model:hidden-item-visible="hiddenItemVisible" />
+            </CardItem>
+          </Card>
+        </Modal>
+      </template>
+    </template>
+  </InputFrame>
+</template>
+
 <style>
-.v-select > div {
-  border-width: 0 !important;
-}
-.v-select:not(.vs--open).vs--single.vs--searchable .vs__selected {
-  width: 100%;
-}
-.v-select.vs--open.vs--single.vs--searchable .vs__selected {
-  width: calc(100% - 0.5em);
-}
-.v-select .vs__selected {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  flex: 1 1 auto;
-}
-.v-select .vs__selected,
-.v-select .vs__selected-options {
-  max-width: 100%;
+.HsSelect .icons > * {
+  height: auto;
+  height: calc(100% - 6px);
+  max-height: calc(100% - 6px);
+  min-height: 0;
   min-width: 0;
 }
-.v-select .vs__search {
-  margin: 0 !important;
-}
-.v-select .vs__clear {
-  padding: 3px;
-  border: solid 1px transparent;
-  transition: border-color 300ms;
-  border-radius: 3px;
-}
-.v-select .vs__clear:focus {
-  box-shadow: inset 0px 0px 1px 2px #0d8ee4;
-}
-.v-select .vs__dropdown-toggle {
-  background-color: transparent;
-}
-.v-select.size-s .vs__dropdown-toggle {
-  padding-bottom: 0 !important;
-  height: 24px !important;
-}
-.v-select.size-s .vs__spinner {
-  width: 3.5em;
-  height: 3.5em;
-}
-.v-select.size-m .vs__dropdown-toggle {
-  padding-bottom: 0 !important;
-  height: 26px !important;
+.HsSelect .icons > *:after {
+  display: none;
 }
-.v-select.size-m .vs__spinner {
-  width: 4em;
-  height: 4em;
+
+.HsSelectItem:not(.active):hover {
+  background-color: var(--color-bg);
 }
-.v-select.disabled .vs__search,
-.v-select.disabled .vs__dropdown-toggle,
-.v-select.disabled .vs__open-indicator {
-  background-color: transparent !important;
+
+[data-highlighted] .HsSelectItem:hover {
+  background-color: var(--color-bg);
 }
-.v-select.disabled .vs__clear {
-  display: none;
+
+[data-highlighted] .HsSelectItem:not(:hover) {
+  background-color: var(--color-bg);
 }
 
-.vs__dropdown-menu {
-  max-height: 250px;
+[data-reka-popper-content-wrapper] > [data-dismissable-layer] {
+  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.58));
 }
 
-.v-select-hidden-toggle-switch {
-  pointer-events: all !important;
+[data-reka-popper-content-wrapper] > [data-dismissable-layer] > span > svg {
+  fill: white;
 }
-</style>
+</style>