nuxt-hs-ui 2.12.6 → 4.0.0

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

@@ -1,616 +1,453 @@
-<script setup lang="ts" generic="IdType extends string|number">
-/* ----------------------------------------------------------------------------
-// src\runtime\components\form\radio.vue
-// ----------------------------------------------------------------------------
-// Radio
-// RadioRadio
------------------------------------------------------------------------------ */
-
-// [ tailwind ]
-import { twMerge } from "tailwind-merge";
-// [ NUXT ]
-import {
-  reactive,
-  ref,
-  watch,
-  computed,
-  useId,
-  nextTick,
-  type Ref,
-} from "#imports";
-// [ utils ]
-import { type ClassType, ClassTypeToString } from "../../utils/class-style";
-import type { SelectItem } from "../../utils/select-item";
-import { useDisplayList, type DisplaySelectItem } from "../../utils/select";
-import type { MultiLang } from "../../utils/multi-lang";
-import { ObjectCopy } from "../../utils/object";
-
-// [ composables ]
-import { useHsFocus } from "../../composables/use-hs-focus";
-import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
-// [ 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;
-// ----------------------------------------------------------------------------
-// [ Props ]
-type Props = {
-  // ----------------------------------------------------------------------------
-  // Input 種類別
-  list: SelectItem<IdType>[];
-  order?: boolean;
-  image?: boolean;
-  loading?: boolean;
-  nullText?: MultiLang;
-  classCol?: ClassType;
-  classRow?: ClassType;
-  classImg?: ClassType;
-  classImgTag?: ClassType;
-  nullable?: 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,
-  image: false,
-  loading: false,
-  nullText: () => ({ ja: "選択してください", en: "Select..." }),
-  nullable: false,
-  classCol: "",
-  classRow: "",
-  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];
-  // ----------------------------
-};
-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) {
-    emit("update:data", null);
-    emit("value-change", null, before as any as EmitIdType | null);
-    return;
-  }
-  if (v.id === null) {
-    displayData.value = null;
-    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 selectedId = computed(() => {
-  // console.log("selectedId", displayData.value);
-  if (displayData.value === null) {
-    return null;
-  }
-  return displayData.value.id;
-});
-// ----------------------------------------------------------------------------
-// 不明選択肢太陽
-const unKnownSelected = ref<boolean>(false);
-const unKnownData = computed(() => {
-  if (props.data === null) return null;
-  return {
-    id: props.data,
-    text: {
-      ja: `無効な値が選択されています (ID=${props.data})`,
-      en: `Invalid value selected (ID=${props.data})`,
-    },
-  };
-});
-
-// ----------------------------------------------------------------------------
-const isShowHidden = ref(false);
-/** 選択肢に非表示アイテムが含まれているかどうか */
-const includeHidden = computed(() => {
-  return props.list.filter((row) => row.hidden).length > 0;
-});
-// ----------------------------------------------------------------------------
-/** 選択肢 */
-interface SelectItemShow extends DisplaySelectItem<IdType> {
-  elm: HTMLElement | null;
-  activate: boolean;
-  i: number;
-}
-const displayList: Ref<SelectItemShow[]> = ref([]);
-
-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,
-  }).map((row, index) => {
-    return {
-      ...row,
-      elm: null,
-      activate: false,
-      i: index,
-    };
-  }) as SelectItemShow[];
-};
-watch(
-  () => props.list,
-  () => {
-    nextTick(() => {
-      setDisplayList();
-    });
-  },
-  { deep: true }
-);
-
-watch(
-  () => [
-    props.data,
-    isShowHidden.value,
-    props.require,
-    props.nullable,
-    props.nullText,
-    unKnownSelected.value,
-    displayData.value,
-  ],
-  () => {
-    nextTick(() => {
-      setDisplayList();
-    });
-  },
-  { immediate: true }
-);
-// ----------------------------------------------------------------------------
-
-const checkData = (id: IdType | null) => {
-  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;
-  isMmousedownItem: boolean;
-  isNullActivate: boolean;
-  isKeyDown: boolean;
-}
-const focusState = reactive<FocusState>({
-  isActivate: false,
-  isMmousedownItem: false,
-  isNullActivate: false,
-  isKeyDown: false,
-});
-
-/**
- * コントロールのFocus判定
- */
-const computedActivate = computed(() => {
-  if (props.disabled === true) return false;
-  if (hsFocus.state.id !== uid) return false;
-  if (focusState.isActivate) return true;
-  if (focusState.isMmousedownItem) return true;
-  if (focusState.isNullActivate) return true;
-  if (focusState.isKeyDown) return true;
-  if (displayList.value.filter((row) => row.activate === true).length === 1)
-    return true;
-  return false;
-});
-
-// ----------------------------------------------------------------------------
-// const isOpen = ref(false);
-
-const onFocus = (index: null | number) => {
-  if (props.disabled) return;
-  if (props.readonly) return;
-  focusState.isActivate = true;
-  if (index === null) {
-    focusState.isNullActivate = true;
-  } else {
-    displayList.value[index].activate = true;
-  }
-  hsFocus.state.id = uid;
-};
-
-const onBlur = (index: null | number) => {
-  if (props.disabled) return;
-  if (props.readonly) return;
-  if (index === null) {
-    focusState.isNullActivate = false;
-  } else if (index in displayList.value) {
-    displayList.value[index].activate = false;
-  }
-  setTimeout(() => {
-    focusState.isActivate = false;
-  }, 5);
-};
-// ----------------------------------------------------------------------------
-const colClass = computed(() => {
-  return twMerge(
-    //
-    "col-auto",
-    ClassTypeToString(props.classCol)
-  );
-});
-// ----------------------------------------------------------------------------
-
-const inputElementNull = ref<HTMLElement | null>(null);
-// ----------------------------------------------------------------------------
-const onMousedownItem = () => {
-  if (props.disabled) return;
-  if (props.readonly) return;
-  focusState.isMmousedownItem = true;
-};
-const onMouseupItem = (elm: HTMLElement | null) => {
-  if (props.disabled) return;
-  if (props.readonly) return;
-  focusState.isMmousedownItem = false;
-  if (elm !== null) {
-    elm.focus();
-  }
-};
-
-const onKeydown = (event: KeyboardEvent) => {
-  if (props.disabled || props.readonly) {
-    event.preventDefault();
-    return;
-  }
-  focusState.isKeyDown = true;
-};
-
-const onKeyup = (event: KeyboardEvent) => {
-  if (props.disabled || props.readonly) {
-    event.preventDefault();
-    return;
-  }
-  focusState.isKeyDown = false;
-};
-
-const setValue = async (row: SelectItemShow | null) => {
-  if (props.disabled) return;
-  if (props.readonly) return;
-  // console.log(row);
-  displayData.value = row;
-};
-
-// ----------------------------------------------------------------------------
-const baseClass = computed(() => {
-  return [
-    twMerge(
-      //
-      "h-auto",
-      props.size === "s" ? "min-h-[44px] " : "",
-      props.size === "m" ? "min-h-[48px]" : "",
-      props.size === "l" ? "min-h-[60px]" : "",
-      ClassTypeToString(props.class)
-    ),
-  ];
-});
-// ----------------------------------------------------------------------------
-const inputClass = computed(() => {
-  return [
-    twMerge(
-      //
-      "px-2",
-      ClassTypeToString(props.classInput)
-    ),
-  ];
-});
-
-// ----------------------------------------------------------------------------
-</script>
-
-<template>
-  <InputFrame
-    :class="baseClass"
-    :class-header="props.classHeader"
-    :class-input="inputClass"
-    :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 class="nac-input">
-      <div
-        class="radio-row"
-        :class="[`flex flex-wrap`, classRow]"
-        @keyup.up="onKeyup"
-        @keydown.up="onKeydown"
-        @keyup.down="onKeyup"
-        @keydown.down="onKeydown"
-        @keyup.left="onKeyup"
-        @keydown.left="onKeydown"
-        @keyup.right="onKeyup"
-        @keydown.right="onKeydown"
-      >
-        <!-- null -->
-        <div
-          v-if="!props.require && props.nullable"
-          class="radio-col"
-          :class="colClass"
-        >
-          <div
-            class="nac-radio"
-            :class="[{ disabled: props.disabled, readonly: props.readonly }]"
-            @mousedown="onMousedownItem"
-            @mouseup="onMouseupItem(inputElementNull)"
-            @click="setValue(null)"
-          >
-            <input
-              :id="`radio${uid}-null`"
-              :ref="(e:any) => (inputElementNull = e)"
-              type="radio"
-              :name="`radio${uid}`"
-              :tabindex="props.tabindex"
-              :value="null"
-              :disabled="props.disabled"
-              :readonly="props.readonly"
-              @focus="onFocus(null)"
-              @blur="onBlur(null)"
-            />
-            <div
-              class="radio-mark"
-              :class="[{ checked: selectedId === null }]"
-            ></div>
-            <div class="radio-label">
-              <SelectImgIcon
-                v-if="props.image"
-                class="flex-none"
-                :img-url="null"
-                :class-img="props.classImg"
-                :class-img-tag="props.classImgTag"
-              />
-              <div class="radio-text truncate">{{ tx(nullText) }}</div>
-            </div>
-          </div>
-        </div>
-        <!-- list -->
-        <template v-for="(row, index) in displayList" :key="index">
-          <div
-            v-if="row.id !== null"
-            class="radio-col"
-            :class="colClass"
-            @mousedown="onMousedownItem"
-            @mouseup="onMouseupItem(row.elm)"
-            @click="setValue(row)"
-          >
-            <div
-              class="nac-radio"
-              :class="[{ disabled: props.disabled, readonly: props.readonly }]"
-            >
-              <input
-                :id="`radio${uid}-${row.id}`"
-                :ref="(e:any) => (row.elm = e)"
-                type="radio"
-                class=""
-                :name="`radio${uid}`"
-                :tabindex="props.tabindex"
-                :value="row.id"
-                :disabled="props.disabled"
-                :readonly="props.readonly"
-                @focus="onFocus(index)"
-                @blur="onBlur(index)"
-              />
-              <div
-                class="radio-mark"
-                :class="[{ checked: selectedId === row.id }]"
-              ></div>
-              <div
-                class="radio-label"
-                :class="{
-                  isDeleted: row.deleted === true,
-                  isHidden: row.hidden === false,
-                }"
-              >
-                <SelectImgIcon
-                  v-if="props.image"
-                  class="flex-none"
-                  :img-url="row.imgUrl"
-                  :class-img="props.classImg"
-                  :class-img-tag="props.classImgTag"
-                />
-                <div class="radio-text truncate">
-                  {{ tx(row.text) }}
-                  <span
-                    v-if="row.deleted"
-                    class="text-error text-[0.7em] leading-[1em]"
-                  >
-                    {{ tx({ ja: "削除済", en: "Deleted" }) }}
-                  </span>
-                  <span
-                    v-if="row.hidden"
-                    class="text-error text-[0.7em] leading-[1em]"
-                  >
-                    {{ tx({ ja: "非表示", en: "Hidden" }) }}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </template>
-      </div>
-      <template v-if="includeHidden">
-        <Btn
-          theme="accent1"
-          variant="outlined"
-          class="w-full mb-1"
-          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>
-      </template>
-    </div>
-  </InputFrame>
-</template>
-
+<script setup>
+import { twMerge } from "tailwind-merge";
+import { reactive, ref, watch, computed, useId, nextTick } from "#imports";
+import { ClassTypeToString } from "../../utils/class-style";
+import { useDisplayList } from "../../utils/select";
+import { ObjectCopy } from "../../utils/object";
+import { useHsFocus } from "../../composables/use-hs-focus";
+import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
+import { useHsPinia } from "../../composables/use-pinia";
+import { useHsMisc } from "../../composables/use-hs-misc";
+import InputFrame from "./input-frame.vue";
+import SelectImgIcon from "./select-img-icon.vue";
+import Btn from "../form/btn.vue";
+const hsFocus = useHsFocus(useHsPinia());
+const multiLang = useHsMultiLang(useHsPinia());
+const hsMisc = useHsMisc(useHsPinia());
+const tx = multiLang.tx;
+const gt = multiLang.gt;
+const props = defineProps({
+  list: { type: Array, required: true },
+  order: { type: Boolean, required: false, default: false },
+  image: { 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..." }) },
+  classCol: { type: [String, Object, Array], required: false, default: "" },
+  classRow: { type: [String, Object, Array], required: false, default: "" },
+  classImg: { type: [String, Object, Array], required: false, default: "" },
+  classImgTag: { type: [String, Object, Array], required: false, default: "" },
+  nullable: { type: Boolean, required: false, default: false },
+  data: { type: null, required: true },
+  diff: { type: null, required: false, default: void 0 },
+  tabindex: { type: null, required: false, default: void 0 },
+  class: { type: [String, Object, Array], required: false, default: "" },
+  classHeader: { type: [String, Object, Array], required: false, default: "" },
+  classInput: { type: [String, Object, Array], required: false, default: "" },
+  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(["ref", "focus", "blur", "update:data", "value-change", "keydown", "keyup"]);
+const slots = defineSlots();
+const uid = useId();
+const isChangeData = computed(() => {
+  if (props.diff === void 0) return false;
+  if (props.diff !== props.data) return true;
+  return false;
+});
+const displayData = ref(null);
+watch(displayData, (v) => {
+  const before = props.data;
+  if (v === null) {
+    emit("update:data", null);
+    emit("value-change", null, before);
+    return;
+  }
+  if (v.id === null) {
+    displayData.value = null;
+    return;
+  }
+  emit("update:data", v.id);
+  emit("value-change", v.id, before);
+});
+const selectedId = computed(() => {
+  if (displayData.value === null) {
+    return null;
+  }
+  return displayData.value.id;
+});
+const unKnownSelected = ref(false);
+const unKnownData = computed(() => {
+  if (props.data === null) return null;
+  return {
+    id: props.data,
+    text: {
+      ja: `\u7121\u52B9\u306A\u5024\u304C\u9078\u629E\u3055\u308C\u3066\u3044\u307E\u3059 (ID=${props.data})`,
+      en: `Invalid value selected (ID=${props.data})`
+    }
+  };
+});
+const isShowHidden = ref(false);
+const includeHidden = computed(() => {
+  return props.list.filter((row) => row.hidden).length > 0;
+});
+const displayList = ref([]);
+const baseList = computed(() => {
+  return ObjectCopy(props.list).map((row) => {
+    return { ...row, text: gt(row.text) };
+  });
+});
+const diffDisplayText = computed(() => {
+  if (!props.diff) return "";
+  const data = baseList.value.find((row) => row.id === props.diff) || null;
+  if (!data) return props.nullText;
+  return tx(data.text).value;
+});
+const setDisplayList = () => {
+  displayList.value = useDisplayList({
+    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
+  }).map((row, index) => {
+    return {
+      ...row,
+      elm: null,
+      activate: false,
+      i: index
+    };
+  });
+};
+watch(
+  () => props.list,
+  () => {
+    nextTick(() => {
+      setDisplayList();
+    });
+  },
+  { deep: true }
+);
+watch(
+  () => [
+    props.data,
+    isShowHidden.value,
+    props.require,
+    props.nullable,
+    props.nullText,
+    unKnownSelected.value,
+    displayData.value,
+    multiLang.lang
+  ],
+  () => {
+    nextTick(() => {
+      setDisplayList();
+    });
+  },
+  { immediate: true }
+);
+const checkData = (id) => {
+  const ret = baseList.value.find((row) => row.id === id);
+  if (ret === void 0) {
+    unKnownSelected.value = true;
+    displayData.value = unKnownData.value;
+  } else {
+    unKnownSelected.value = false;
+    displayData.value = ret;
+  }
+};
+checkData(props.data);
+watch(
+  () => props.data,
+  (id) => {
+    checkData(id);
+  }
+);
+watch(baseList, () => {
+  nextTick(() => {
+    checkData(props.data);
+  });
+});
+const focusState = reactive({
+  isActivate: false,
+  isMmousedownItem: false,
+  isNullActivate: false,
+  isKeyDown: false
+});
+const computedActivate = computed(() => {
+  if (props.disabled === true) return false;
+  if (hsFocus.state.id !== uid) return false;
+  if (focusState.isActivate) return true;
+  if (focusState.isMmousedownItem) return true;
+  if (focusState.isNullActivate) return true;
+  if (focusState.isKeyDown) return true;
+  if (displayList.value.filter((row) => row.activate === true).length === 1) return true;
+  return false;
+});
+const onFocus = (index) => {
+  if (props.disabled) return;
+  if (props.readonly) return;
+  focusState.isActivate = true;
+  if (index === null) {
+    focusState.isNullActivate = true;
+  } else if (index in displayList.value && displayList.value[index]) {
+    displayList.value[index].activate = true;
+  }
+  hsFocus.state.id = uid;
+};
+const onBlur = (index) => {
+  if (props.disabled) return;
+  if (props.readonly) return;
+  if (index === null) {
+    focusState.isNullActivate = false;
+  } else if (index in displayList.value && displayList.value[index]) {
+    displayList.value[index].activate = false;
+  }
+  setTimeout(() => {
+    focusState.isActivate = false;
+  }, 5);
+};
+const colClass = computed(() => {
+  return twMerge(
+    //
+    "col-auto",
+    ClassTypeToString(props.classCol)
+  );
+});
+const inputElementNull = ref(null);
+const onMousedownItem = () => {
+  if (props.disabled) return;
+  if (props.readonly) return;
+  focusState.isMmousedownItem = true;
+};
+const onMouseupItem = (elm) => {
+  if (props.disabled) return;
+  if (props.readonly) return;
+  focusState.isMmousedownItem = false;
+  if (elm !== null) {
+    elm.focus();
+  }
+};
+const onKeydown = (event) => {
+  if (props.disabled || props.readonly) {
+    event.preventDefault();
+    return;
+  }
+  focusState.isKeyDown = true;
+};
+const onKeyup = (event) => {
+  if (props.disabled || props.readonly) {
+    event.preventDefault();
+    return;
+  }
+  focusState.isKeyDown = false;
+};
+const setValue = async (row) => {
+  if (props.disabled) return;
+  if (props.readonly) return;
+  displayData.value = row;
+};
+const baseClass = computed(() => {
+  return [
+    twMerge(
+      //
+      "h-auto",
+      props.size === "s" ? "min-h-[44px] " : "",
+      props.size === "m" ? "min-h-[48px]" : "",
+      props.size === "l" ? "min-h-[60px]" : "",
+      ClassTypeToString(props.class)
+    )
+  ];
+});
+const inputClass = computed(() => {
+  return [
+    twMerge(
+      //
+      "px-2",
+      ClassTypeToString(props.classInput)
+    )
+  ];
+});
+</script>
+
+<template>
+  <InputFrame
+    :class="baseClass"
+    :class-header="props.classHeader"
+    :class-input="inputClass"
+    :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 #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">
+          <Btn
+            variant="outlined"
+            theme="error"
+            tabindex="-1"
+            size="xs"
+            class="bg-white flex-none"
+            @click="checkData(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">{{ 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 v-if="slots['right-icons']" #right-icons>
+      <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>
+
+    <div class="nac-input">
+      <div
+        class="radio-row"
+        :class="[`flex flex-wrap`, classRow]"
+        @keyup.up="onKeyup"
+        @keydown.up="onKeydown"
+        @keyup.down="onKeyup"
+        @keydown.down="onKeydown"
+        @keyup.left="onKeyup"
+        @keydown.left="onKeydown"
+        @keyup.right="onKeyup"
+        @keydown.right="onKeydown"
+      >
+        <!-- null -->
+        <div v-if="!props.require && props.nullable" class="radio-col" :class="colClass">
+          <div
+            class="nac-radio"
+            :class="[{ disabled: props.disabled, readonly: props.readonly }]"
+            @mousedown="onMousedownItem"
+            @mouseup="onMouseupItem(inputElementNull)"
+            @click="setValue(null)"
+          >
+            <input
+              :id="`radio${uid}-null`"
+              :ref="(e) => inputElementNull = e"
+              type="radio"
+              :name="`radio${uid}`"
+              :tabindex="props.tabindex"
+              :value="null"
+              :disabled="props.disabled"
+              :readonly="props.readonly"
+              @focus="onFocus(null)"
+              @blur="onBlur(null)"
+            />
+            <div class="radio-mark" :class="[{ checked: selectedId === null }]"></div>
+            <div class="radio-label">
+              <SelectImgIcon
+                v-if="props.image"
+                class="flex-none"
+                :img-url="null"
+                :class-img="props.classImg"
+                :class-img-tag="props.classImgTag"
+              />
+              <div class="radio-text truncate">{{ tx(nullText) }}</div>
+            </div>
+          </div>
+        </div>
+        <!-- list -->
+        <template v-for="(row, index) in displayList" :key="index">
+          <div
+            v-if="row.id !== null"
+            class="radio-col"
+            :class="colClass"
+            @mousedown="onMousedownItem"
+            @mouseup="onMouseupItem(row.elm)"
+            @click="setValue(row)"
+          >
+            <div class="nac-radio" :class="[{ disabled: props.disabled, readonly: props.readonly }]">
+              <input
+                :id="`radio${uid}-${row.id}`"
+                :ref="(e) => row.elm = e"
+                type="radio"
+                class=""
+                :name="`radio${uid}`"
+                :tabindex="props.tabindex"
+                :value="row.id"
+                :disabled="props.disabled"
+                :readonly="props.readonly"
+                @focus="onFocus(index)"
+                @blur="onBlur(index)"
+              />
+              <div class="radio-mark" :class="[{ checked: selectedId === row.id }]"></div>
+              <div
+                class="radio-label"
+                :class="{
+  isDeleted: row.deleted === true,
+  isHidden: row.hidden === false
+}"
+              >
+                <SelectImgIcon
+                  v-if="props.image"
+                  class="flex-none"
+                  :img-url="row.imgUrl"
+                  :class-img="props.classImg"
+                  :class-img-tag="props.classImgTag"
+                />
+                <div class="radio-text truncate">
+                  {{ tx(row.text) }}
+                  <span v-if="row.deleted" class="text-error text-[0.7em] leading-[1em]">
+                    {{ tx({ ja: "\u524A\u9664\u6E08", en: "Deleted" }) }}
+                  </span>
+                  <span v-if="row.hidden" class="text-error text-[0.7em] leading-[1em]">
+                    {{ tx({ ja: "\u975E\u8868\u793A", en: "Hidden" }) }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+      <template v-if="includeHidden">
+        <Btn theme="accent1" variant="outlined" class="w-full mb-1" 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>
+      </template>
+    </div>
+  </InputFrame>
+</template>
+
 <style>
 .nac-input {
   width: 100%;
@@ -774,4 +611,4 @@ const inputClass = computed(() => {
 .nac-input.disabled .item-hidden-control i {
   color: rgb(92, 92, 92) !important;
 }
-</style>
+</style>