nuxt-hs-ui 1.0.10 → 2.0.2

package/dist/runtime/components/form/select-img-icon.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+// src\runtime\components\form\select-img-icon.vue
+// ----------------------------------------------------------------------------
+// SelectImgIcon
+// SelectImgIconSelectImgIcon
+----------------------------------------------------------------------------- */
+
+// [ tailwind ]
+import { twMerge } from "tailwind-merge";
+// [ NUXT ]
+import { computed } from "#imports";
+// [ utils ]
+import { type ClassType, ClassTypeToString } from "../../utils/class-style";
+// ----------------------------------------------------------------------------
+type Props = {
+  imgUrl?: string | null;
+  classImg?: ClassType;
+  classImgTag?: ClassType;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  imgUrl: null,
+  classImg: "",
+  classImgTag: "",
+});
+
+const imgClass = computed(() => {
+  return twMerge(
+    //
+    "border border-gray-700",
+    "h-[18px] w-[36px]",
+    ClassTypeToString(props.classImg)
+  );
+});
+
+const imgTagClass = computed(() => {
+  return twMerge(
+    "object-contain w-full h-full",
+    ClassTypeToString(props.classImgTag)
+  );
+});
+</script>
+
+<template>
+  <div class="flex-cc border border-gray-300 me-[4px]" :class="imgClass">
+    <img v-if="props.imgUrl" :src="props.imgUrl" alt="" :class="imgTagClass" />
+    <div v-else class="text-center leading-[1em]" style="transform: scale(0.5)">
+      <div>NO</div>
+      <div>IMG</div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,438 @@
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+// src\runtime\components\form\select.vue
+// ----------------------------------------------------------------------------
+// Select
+// SelectSelect
+----------------------------------------------------------------------------- */
+
+// [ tailwind ]
+// [ NUXT ]
+import { reactive, ref, watch, computed, useId } from "#imports";
+// [ utils ]
+import type { ClassType } from "../../utils/class-style";
+import type { SelectItem } from "../../utils/select-item";
+import { useDisplayList, type DisplaySelectItem } from "../../utils/select";
+// [ 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;
+
+// ----------------------------------------------------------------------------
+// [ Props ]
+type Props = {
+  // ----------------------------------------------------------------------------
+  // Input 種類別
+  list: SelectItem[];
+  order?: boolean;
+  loading?: boolean;
+  nullText?: string;
+  image?: boolean;
+  classImg?: ClassType;
+  classImgTag?: ClassType;
+  nullable?: boolean;
+  // ----------------------------------------------------------------------------
+  data: number | null;
+  diff?: number | 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;
+  // ----------------------------------------------------------------------------
+  // 表示
+  label?: string;
+  // 表示-副情報
+  require?: boolean;
+  requireText?: string;
+  warn?: string;
+  warnTimeOut?: number;
+  // ----------------------------------------------------------------------------
+  // 設定
+  size?: "s" | "m" | "l";
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  // ----------------------------------------------------------------------------
+  // Input 種類別
+  order: false,
+  loading: false,
+  nullText: "選択してください",
+  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,
+  // ----------------------------------------------------------------------------
+  // 表示
+  label: "",
+  // 表示-副情報
+  require: false,
+  requireText: "必須",
+  warn: "",
+  warnTimeOut: 300,
+  // ----------------------------------------------------------------------------
+  // 設定
+  size: "m",
+});
+// ----------------------------------------------------------------------------
+// [ emit ]
+type Emits = {
+  ref: [element: HTMLElement];
+  focus: [elm: HTMLElement];
+  blur: [elm: HTMLElement];
+  // ----------------------------
+  "update:data": [value: number | null];
+  "value-change": [after: number | null, before: number | null];
+  // ----------------------------
+  keydown: [event: KeyboardEvent];
+  keyup: [event: KeyboardEvent];
+  selectOpen: [uid: string];
+  selectClose: [uid: string];
+  // ----------------------------
+};
+const emit = defineEmits<Emits>();
+// ----------------------------------------------------------------------------
+// [ 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 | null>(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 unKnownSelected = ref<boolean>(false);
+const unKnownData = computed(() => {
+  if (props.data === null) return null;
+  return {
+    id: props.data,
+    text: `選択肢にない値です ID=${props.data}`,
+  };
+});
+
+// ----------------------------------------------------------------------------
+const isShowHidden = ref(false);
+/** 選択肢に非表示アイテムが含まれているかどうか */
+const includeHidden = computed(() => {
+  return props.list.filter((row) => row.hidden).length > 0;
+});
+// ----------------------------------------------------------------------------
+/** 選択肢 */
+const displayList = computed(() => {
+  return useDisplayList({
+    list: props.list,
+    id: props.data,
+    order: props.order,
+    unKnownData: unKnownData.value,
+    unKnownSelected: unKnownSelected.value,
+    isShowHidden: isShowHidden.value,
+    require: props.require || !props.nullable,
+    nullText: props.nullText,
+  });
+});
+// ----------------------------------------------------------------------------
+
+const checkData = (id: number | null) => {
+  const ret = displayList.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);
+  }
+);
+// ----------------------------------------------------------------------------
+
+// [ 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);
+};
+// ----------------------------------------------------------------------------
+// ----------------------------------------------------------------------------
+</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="props.requireText"
+    :warn="props.warn"
+    :warn-time-out="props.warnTimeOut"
+    :size="props.size"
+  >
+    <div
+      v-if="displayData === null"
+      class="absolute inset-0 flex items-center px-1 pointer-events-none text-[0.9em]"
+      :class="[computedActivate ? 'opacity-30' : '']"
+    >
+      {{ props.nullText }}
+    </div>
+    <v-select
+      ref="inputElement"
+      v-model="displayData"
+      label="text"
+      index="id"
+      append-to-body
+      :options="displayList"
+      :loading="props.loading"
+      :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()"
+    >
+      <!--  -->
+      <!--  -->
+      <template #selected-option="{ text, imgUrl, deleted, hidden }">
+        <div class="flex items-baseline w-full">
+          <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">{{ tx(text) }}</div>
+          <div v-if="deleted" class="text-error text-[0.7em] leading-[1em]">
+            ※削除済み
+          </div>
+          <div v-if="hidden" class="text-error text-[0.7em] leading-[1em]">
+            ※非表示
+          </div>
+        </div>
+      </template>
+      <template #option="{ text, imgUrl, deleted, hidden }">
+        <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">{{ tx(text) }}</div>
+          <div v-if="deleted" class="text-error text-[0.7em] leading-[1em]">
+            ※削除済み
+          </div>
+          <div v-if="hidden" class="text-error text-[0.7em] leading-[1em]">
+            ※非表示
+          </div>
+        </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>
+
+<style>
+.v-select > div {
+  border-width: 0 !important;
+}
+.v-select .vs__selected {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+.v-select .vs__selected,
+.v-select .vs__selected-options {
+  max-width: 100%;
+}
+.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;
+}
+.v-select.size-m .vs__spinner {
+  width: 4em;
+  height: 4em;
+}
+.v-select.disabled .vs__search,
+.v-select.disabled .vs__dropdown-toggle,
+.v-select.disabled .vs__open-indicator {
+  background-color: transparent !important;
+}
+.v-select.disabled .vs__clear {
+  display: none;
+}
+
+.v-select-hidden-toggle-switch {
+  pointer-events: all !important;
+}
+</style>