nuxt-hs-ui 2.12.7 → 4.0.0

package/dist/runtime/components/form/check-box.vue

@@ -1,317 +1,202 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-// src\runtime\components\form\check-box.vue
-// ----------------------------------------------------------------------------
-// CheckBox
-// CheckBoxCheckBox
------------------------------------------------------------------------------ */
-
-// [ tailwind ]
-import { twMerge } from "tailwind-merge";
-// [ NUXT ]
-import { reactive, ref, watch, computed, useId, nextTick } from "#imports";
-// [ utils ]
-import { type ClassType, ClassTypeToString } from "../../utils/class-style";
-import type { MultiLang } from "../../utils/multi-lang";
-// [ composables ]
-import { useHsFocus } from "../../composables/use-hs-focus";
-import { useHsToast } from "../../composables/use-hs-toast";
-import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
-// [ Components ]
-import SelectImgIcon from "./select-img-icon.vue";
-// ----------------------------------------------------------------------------
-const hsFocus = useHsFocus();
-const Toast = useHsToast();
-// ----------------------------------------------------------------------------
-// [ Props ]
-type Props = {
-  // ----------------------------------------------------------------------------
-  // Input 種類別
-  // imageObjectFit?: 'contain' | 'cover';
-  // imageBorder?: string;
-  image?: boolean;
-  imgUrl?: string | null;
-  classImg?: ClassType;
-  classImgTag?: ClassType;
-  classLabel?: ClassType;
-  // ----------------------------------------------------------------------------
-  data: boolean | null;
-  diff?: boolean | null | undefined;
-  tabindex?: string | undefined;
-  // ----------------------------------------------------------------------------
-  // 状態
-  disabled?: boolean;
-  // ----------------------------------------------------------------------------
-  // 表示
-  label?: MultiLang;
-  warn?: string;
-  warnTimeOut?: number;
-  // ----------------------------------------------------------------------------
-  // 設定
-  size?: "s" | "m" | "l";
-  // ----------------------------------------------------------------------------
-  uiText?: {
-    validError: {
-      title: MultiLang;
-    };
-  };
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  // imageObjectFit: 'contain',
-  // imageBorder: 'border-gray'
-  image: false,
-  imgUrl: null,
-  classImg: "",
-  classImgTag: "",
-  classLabel: "",
-  // ----------------------------------------------------------------------------
-  diff: undefined,
-  tabindex: undefined,
-  // ----------------------------------------------------------------------------
-  // 状態
-  disabled: false,
-  // ----------------------------------------------------------------------------
-  // 表示
-  label: "",
-  warn: "",
-  warnTimeOut: 3000,
-  // ----------------------------------------------------------------------------
-  // 設定
-  size: "m",
-  uiText: () => {
-    return {
-      validError: {
-        title: { ja: "入力値の警告", en: "Input Value Warning" },
-      },
-    };
-  },
-});
-// ----------------------------------------------------------------------------
-// [ emit ]
-type Emits = {
-  ref: [element: HTMLElement];
-  focus: [elm: HTMLElement];
-  blur: [elm: HTMLElement];
-  // ----------------------------
-  "update:data": [value: boolean];
-  "value-change": [after: boolean, before: boolean | null];
-  // ----------------------------
-  keydown: [event: KeyboardEvent];
-  keyup: [event: KeyboardEvent];
-  // ----------------------------
-};
-const emit = defineEmits<Emits>();
-// ----------------------------------------------------------------------------
-
-const multiLang = useHsMultiLang();
-const tx = multiLang.tx;
-// ----------------------------------------------------------------------------
-// [ getCurrentInstance ]
-const uid = useId();
-// ----------------------------------------------------------------------------
-// [ ref ]
-const inputElement = ref();
-
-const setRef = (elm: any) => {
-  inputElement.value = elm;
-  emit("ref", elm);
-};
-
-const switchValue = () => {
-  const before = props.data as boolean | null;
-  if (props.disabled === true) return;
-
-  if (props.data === true) {
-    emit("update:data", false);
-    nextTick(() => {
-      emit("value-change", false, before);
-    });
-  } else {
-    emit("update:data", true);
-    nextTick(() => {
-      emit("value-change", true, before);
-    });
-  }
-  if (inputElement.value !== null) {
-    inputElement.value.focus();
-  }
-};
-
-/**
- * 強制focus
- */
-const elmFocus = () => {
-  inputElement.value.focus();
-};
-
-// [ focus, blur ]
-interface FocusState {
-  isActivate: boolean;
-  isMmousedown: boolean;
-}
-
-const focusState = reactive<FocusState>({
-  isActivate: false,
-  isMmousedown: false,
-});
-
-/**
- * コントロールのFocus判定
- */
-const computedActivate = computed(() => {
-  // console.log(JSON.stringify(focusState));
-  if (props.disabled === true) return false;
-  if (hsFocus.state.id !== uid) return false;
-  if (focusState.isActivate) return true;
-  if (focusState.isMmousedown) return true;
-  return false;
-});
-
-/**
- * focus, blur イベント
- */
-watch(computedActivate, (value) => {
-  if (value === true) {
-    // クリックでの遷移の場合に
-    // 一つ前のコントロールのblurイベントよりも早くfocusが発生しないようにする対策で10ミリ秒処理をずらす
-    setTimeout(() => {
-      emit("focus", inputElement.value);
-    }, 10);
-  } else {
-    emit("blur", inputElement.value);
-  }
-});
-const onMousedown = () => {
-  if (props.disabled === true) return;
-  focusState.isMmousedown = true;
-};
-const onMouseup = () => {
-  if (props.disabled === true) return;
-  elmFocus();
-  focusState.isMmousedown = false;
-};
-const onFocus = () => {
-  if (props.disabled === true) return;
-  focusState.isActivate = true;
-  hsFocus.state.id = uid;
-};
-const onBlur = () => {
-  focusState.isActivate = false;
-};
-
-// [ iconEventShowWarn ]
-const iconEventShowWarn = () => {
-  Toast.Warning(props.warn, props.uiText.validError.title, props.warnTimeOut);
-};
-const tabindex = computed(() => {
-  if (props.disabled === true) return -1;
-  return props.tabindex;
-});
-//
-// ----------------------------------------------------------------------------
-// Class
-
-const baseClass = computed(() => {
-  return {
-    disabled: props.disabled,
-    activate: computedActivate.value,
-    diff:
-      props.diff !== undefined &&
-      props.diff !== props.data &&
-      !(props.diff === null && props.data === true),
-  };
-});
-
-const boxClass = computed(() => {
-  return [
-    twMerge(
-      "border border-gray-700",
-      !props.disabled ? "cursor-pointer" : "cursor-not-allowed",
-      !props.disabled ? "bg-white" : "bg-gray-100",
-      props.size === "s" ? "w-[16px] h-[16px] " : "",
-      props.size === "m" ? "w-[18px] h-[18px] " : "",
-      props.size === "l" ? "w-[22px] h-[22px] " : ""
-    ),
-  ];
-});
-
-const checkClass = computed(() => {
-  return [
-    twMerge(
-      "absolute inset-0",
-      "flex items-center justify-center",
-      props.size === "s" ? "text-[14px]" : "",
-      props.size === "m" ? "text-[16px]" : "",
-      props.size === "l" ? "text-[18px]" : "",
-      props.data === true ? "scale-100" : "scale-0"
-    ),
-  ];
-});
-const labelClass = computed(() => {
-  return [
-    twMerge(
-      "flex items-center gap-[2px]",
-      !props.disabled ? "cursor-pointer" : "cursor-not-allowed",
-      props.size === "s" ? "text-[14px] ps-[6px]" : "",
-      props.size === "m" ? "text-[16px] ps-[8px]" : "",
-      props.size === "l" ? "text-[20px] ps-[10px]" : "",
-      ClassTypeToString(props.classLabel)
-    ),
-  ];
-});
-
-// ----------------------------------------------------------------------------
-</script>
-
-<template>
-  <div class="nac-checkbox" :class="baseClass">
-    <input
-      :ref="(e) => setRef(e)"
-      :tabindex="tabindex"
-      type="checkbox"
-      class="checkbox"
-      @blur="onBlur()"
-      @focus="onFocus()"
-    />
-    <div
-      class="nac-checkbox-box flex-none"
-      :class="[boxClass, { checked: props.data === true }]"
-      @click="switchValue()"
-    >
-      <div :class="checkClass">
-        <i class="fas fa-check text-green-600"></i>
-      </div>
-    </div>
-    <div
-      class="nac-checkbox-text"
-      :class="labelClass"
-      @mousedown="onMousedown()"
-      @mouseup="onMouseup()"
-      @click="switchValue()"
-    >
-      <SelectImgIcon
-        v-if="props.image"
-        class="flex-none"
-        :img-url="props.imgUrl"
-        :class-img="props.classImg"
-        :class-img-tag="props.classImgTag"
-      />
-      <div class="flex-1 min-w-[0] whitespace-pre-wrap break-words">
-        {{ tx(label) }}
-        <slot />
-      </div>
-      <span
-        v-if="props.warn.length !== 0"
-        class="warn flex-none"
-        @click.stop="iconEventShowWarn()"
-      >
-        <i class="fas fa-exclamation-triangle"></i>{{ props.warn }}
-      </span>
-    </div>
-  </div>
-</template>
-
+<script setup>
+import { twMerge } from "tailwind-merge";
+import { reactive, ref, watch, computed, useId, nextTick } from "#imports";
+import { ClassTypeToString } from "../../utils/class-style";
+import { useHsFocus } from "../../composables/use-hs-focus";
+import { useHsToast } from "../../composables/use-hs-toast";
+import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
+import { useHsPinia } from "../../composables/use-pinia";
+import SelectImgIcon from "./select-img-icon.vue";
+const hsFocus = useHsFocus(useHsPinia());
+const Toast = useHsToast(useHsPinia());
+const props = defineProps({
+  image: { type: Boolean, required: false, default: false },
+  imgUrl: { type: [String, null], required: false, default: null },
+  classImg: { type: [String, Object, Array], required: false, default: "" },
+  classImgTag: { type: [String, Object, Array], required: false, default: "" },
+  classLabel: { type: [String, Object, Array], required: false, default: "" },
+  data: { type: [Boolean, null], required: true },
+  diff: { type: [Boolean, null], required: false, skipCheck: true, default: void 0 },
+  tabindex: { type: null, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  label: { type: [String, Object], required: false, default: "" },
+  warn: { type: String, required: false, default: "" },
+  warnTimeOut: { type: Number, required: false, default: 3e3 },
+  size: { type: String, required: false, default: "m" },
+  uiText: { type: Object, required: false, default: () => {
+    return {
+      validError: {
+        title: { ja: "\u5165\u529B\u5024\u306E\u8B66\u544A", en: "Input Value Warning" }
+      }
+    };
+  } }
+});
+const emit = defineEmits(["ref", "focus", "blur", "update:data", "value-change", "keydown", "keyup"]);
+const multiLang = useHsMultiLang(useHsPinia());
+const tx = multiLang.tx;
+const uid = useId();
+const inputElement = ref();
+defineExpose({ el: inputElement });
+const setRef = (elm) => {
+  inputElement.value = elm;
+  emit("ref", elm);
+};
+const switchValue = () => {
+  const before = props.data;
+  if (props.disabled === true) return;
+  if (props.data === true) {
+    emit("update:data", false);
+    nextTick(() => {
+      emit("value-change", false, before);
+    });
+  } else {
+    emit("update:data", true);
+    nextTick(() => {
+      emit("value-change", true, before);
+    });
+  }
+  if (inputElement.value !== null) {
+    inputElement.value.focus();
+  }
+};
+const elmFocus = () => {
+  inputElement.value.focus();
+};
+const focusState = reactive({
+  isActivate: false,
+  isMmousedown: false
+});
+const computedActivate = computed(() => {
+  if (props.disabled === true) return false;
+  if (hsFocus.state.id !== uid) return false;
+  if (focusState.isActivate) return true;
+  if (focusState.isMmousedown) return true;
+  return false;
+});
+watch(computedActivate, (value) => {
+  if (value === true) {
+    setTimeout(() => {
+      emit("focus", inputElement.value);
+    }, 10);
+  } else {
+    emit("blur", inputElement.value);
+  }
+});
+const onMousedown = () => {
+  if (props.disabled === true) return;
+  focusState.isMmousedown = true;
+};
+const onMouseup = () => {
+  if (props.disabled === true) return;
+  elmFocus();
+  focusState.isMmousedown = false;
+};
+const onFocus = () => {
+  if (props.disabled === true) return;
+  focusState.isActivate = true;
+  if (hsFocus.state.id !== uid) {
+    hsFocus.state.id = uid;
+  }
+};
+const onBlur = () => {
+  focusState.isActivate = false;
+};
+const iconEventShowWarn = () => {
+  Toast.Warning(props.warn, props.uiText.validError.title, props.warnTimeOut);
+};
+const tabindex = computed(() => {
+  if (props.disabled === true) return -1;
+  return props.tabindex;
+});
+const baseClass = computed(() => {
+  return {
+    disabled: props.disabled,
+    activate: computedActivate.value,
+    diff: props.diff !== void 0 && props.diff !== props.data && !(props.diff === null && props.data === true)
+  };
+});
+const boxClass = computed(() => {
+  return [
+    twMerge(
+      "border border-gray-700",
+      !props.disabled ? "cursor-pointer" : "cursor-not-allowed",
+      !props.disabled ? "bg-white" : "bg-gray-100",
+      props.size === "s" ? "w-[16px] h-[16px] " : "",
+      props.size === "m" ? "w-[18px] h-[18px] " : "",
+      props.size === "l" ? "w-[22px] h-[22px] " : ""
+    )
+  ];
+});
+const checkClass = computed(() => {
+  return [
+    twMerge(
+      "absolute inset-0",
+      "flex items-center justify-center",
+      props.size === "s" ? "text-[14px]" : "",
+      props.size === "m" ? "text-[16px]" : "",
+      props.size === "l" ? "text-[18px]" : "",
+      props.data === true ? "scale-100" : "scale-0"
+    )
+  ];
+});
+const labelClass = computed(() => {
+  return [
+    twMerge(
+      "flex items-center gap-[2px]",
+      !props.disabled ? "cursor-pointer" : "cursor-not-allowed",
+      props.size === "s" ? "text-[14px] ps-[6px]" : "",
+      props.size === "m" ? "text-[16px] ps-[8px]" : "",
+      props.size === "l" ? "text-[20px] ps-[10px]" : "",
+      ClassTypeToString(props.classLabel)
+    )
+  ];
+});
+</script>
+
+<template>
+  <div class="nac-checkbox" :class="baseClass">
+    <input
+      :ref="(e) => setRef(e)"
+      :tabindex="tabindex"
+      type="checkbox"
+      class="checkbox"
+      @blur="onBlur()"
+      @focus="onFocus()"
+    />
+    <div
+      class="nac-checkbox-box flex-none relative"
+      :class="[boxClass, { checked: props.data === true }]"
+      @click="switchValue()"
+    >
+      <div :class="checkClass">
+        <i class="fas fa-check text-green-600"></i>
+      </div>
+    </div>
+    <div
+      class="nac-checkbox-text"
+      :class="labelClass"
+      @mousedown="onMousedown()"
+      @mouseup="onMouseup()"
+      @click="switchValue()"
+    >
+      <SelectImgIcon
+        v-if="props.image"
+        class="flex-none"
+        :img-url="props.imgUrl"
+        :class-img="props.classImg"
+        :class-img-tag="props.classImgTag"
+      />
+      <div class="flex-1 min-w-0 whitespace-pre-wrap wrap-break-word">
+        {{ tx(label) }}
+        <slot />
+      </div>
+      <span v-if="props.warn.length !== 0" class="warn flex-none" @click.stop="iconEventShowWarn()">
+        <i class="fas fa-exclamation-triangle"></i>{{ props.warn }}
+      </span>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .nac-checkbox {
   display: inline-flex;
@@ -353,4 +238,4 @@ const labelClass = computed(() => {
 .nac-checkbox.activate:not(.disabled) .nac-checkbox-text {
   text-decoration: underline;
 }
-</style>
+</style>

package/dist/runtime/components/form/check-box.vue.d.ts

@@ -0,0 +1,71 @@
+import { type ClassType } from '../../utils/class-style.js';
+import type { MultiLang } from '../../utils/multi-lang.js';
+type Props = {
+    image?: boolean;
+    imgUrl?: string | null;
+    classImg?: ClassType;
+    classImgTag?: ClassType;
+    classLabel?: ClassType;
+    data: boolean | null;
+    diff?: boolean | null | undefined;
+    tabindex?: string | undefined;
+    disabled?: boolean;
+    label?: MultiLang;
+    warn?: string;
+    warnTimeOut?: number;
+    size?: 's' | 'm' | 'l';
+    uiText?: {
+        validError: {
+            title: MultiLang;
+        };
+    };
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {
+    el: import("vue").Ref<any, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (elm: HTMLElement) => any;
+    focus: (elm: HTMLElement) => any;
+    keydown: (event: KeyboardEvent) => any;
+    keyup: (event: KeyboardEvent) => any;
+    ref: (element: HTMLElement) => any;
+    "update:data": (value: boolean) => any;
+    "value-change": (after: boolean, before: boolean | null) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onBlur?: ((elm: HTMLElement) => any) | undefined;
+    onFocus?: ((elm: HTMLElement) => any) | undefined;
+    onKeydown?: ((event: KeyboardEvent) => any) | undefined;
+    onKeyup?: ((event: KeyboardEvent) => any) | undefined;
+    onRef?: ((element: HTMLElement) => any) | undefined;
+    "onUpdate:data"?: ((value: boolean) => any) | undefined;
+    "onValue-change"?: ((after: boolean, before: boolean | null) => any) | undefined;
+}>, {
+    size: "s" | "m" | "l";
+    image: boolean;
+    disabled: boolean;
+    warn: string;
+    imgUrl: string | null;
+    classImg: ClassType;
+    classImgTag: ClassType;
+    classLabel: ClassType;
+    diff: boolean | null;
+    tabindex: string;
+    label: MultiLang;
+    warnTimeOut: number;
+    uiText: {
+        validError: {
+            title: MultiLang;
+        };
+    };
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};