nuxt-hs-ui 1.0.9 → 2.0.1

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

@@ -0,0 +1,352 @@
+<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";
+// [ composables ]
+import { useHsFocus } from "../../composables/use-hs-focus";
+import { useHsToast } from "../../composables/use-hs-toast";
+// [ 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?: string;
+  warn?: string;
+  warnTimeOut?: number;
+  // ----------------------------------------------------------------------------
+  // 設定
+  size?: "s" | "m" | "l";
+  // ----------------------------------------------------------------------------
+  uiText?: {
+    validError: {
+      title: string;
+    };
+  };
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  // imageObjectFit: 'contain',
+  // imageBorder: 'border-gray'
+  image: false,
+  imgUrl: null,
+  classImg: "",
+  classImgTag: "",
+  classLabel: "",
+  // ----------------------------------------------------------------------------
+  // data
+  data: false,
+  diff: undefined,
+  tabindex: undefined,
+  // ----------------------------------------------------------------------------
+  // 状態
+  disabled: false,
+  // ----------------------------------------------------------------------------
+  // 表示
+  label: "",
+  warn: "",
+  warnTimeOut: 300,
+  // ----------------------------------------------------------------------------
+  // 設定
+  size: "m",
+  uiText: () => {
+    return {
+      validError: {
+        title: "入力値の警告",
+      },
+    };
+  },
+});
+// ----------------------------------------------------------------------------
+// [ 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>();
+// ----------------------------------------------------------------------------
+// [ 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">
+        {{ 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;
+  align-items: center;
+}
+.nac-checkbox > .checkbox {
+  z-index: -1;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+.nac-checkbox .nac-checkbox-box > div {
+  transition: transform 100ms;
+  will-change: transform;
+  transform-origin: center center;
+}
+.nac-checkbox .nac-checkbox-text {
+  min-width: 0;
+  line-height: 1em;
+}
+.nac-checkbox .nac-checkbox-text .warn {
+  color: rgb(190, 0, 0);
+}
+.nac-checkbox.disabled {
+  cursor: default;
+}
+.nac-checkbox.disabled:not(.activate) .nac-checkbox-box {
+  box-shadow: inset 0px 0px 1px 2px #858585;
+}
+.nac-checkbox.disabled:not(.activate) .nac-checkbox-text {
+  opacity: 0.8;
+}
+.nac-checkbox.diff:not(.activate):not(.disabled) .nac-checkbox-box {
+  box-shadow: inset 0px 0px 1px 2px rgba(253, 152, 49, 0.7450980392);
+}
+.nac-checkbox.activate:not(.disabled) .nac-checkbox-box {
+  box-shadow: inset 0px 0px 1px 2px #0d8ee4;
+}
+.nac-checkbox.activate:not(.disabled) .nac-checkbox-text {
+  text-decoration: underline;
+}
+</style>

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

@@ -0,0 +1,354 @@
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+// src\runtime\components\form\check-list.vue
+// ----------------------------------------------------------------------------
+// CheckList
+// CheckListCheckList
+----------------------------------------------------------------------------- */
+
+// [ tailwind ]
+import { twMerge } from "tailwind-merge";
+// [ NUXT ]
+import { reactive, ref, watch, computed, nextTick } from "#imports";
+// [ utils ]
+import { type ClassType, ClassTypeToString } from "../../utils/class-style";
+import type { MultiLang } from "../../utils/multi-lang";
+import { ObjectCompare, ListIdSort } from "../../utils/object";
+import type { SelectItem } from "../../utils/select-item";
+// [ composables ]
+import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
+// [ Components ]
+import InputFrame from "./input-frame.vue";
+import HsFcCheckBox from "./check-box.vue";
+// ----------------------------------------------------------------------------
+// ----------------------------------------------------------------------------
+const multiLang = useHsMultiLang();
+const tx = multiLang.tx;
+// ----------------------------------------------------------------------------
+// [ Props ]
+type Props = {
+  // ----------------------------------------------------------------------------
+  // Input 種類別
+  list: SelectItem[] | readonly SelectItem[];
+  image?: boolean;
+  nullText?: string;
+  classRow?: ClassType;
+  classCol?: ClassType;
+  classItem?: ClassType;
+  classImg?: ClassType;
+  classImgTag?: ClassType;
+  // ----------------------------------------------------------------------------
+  data: number[];
+  diff?: number[] | undefined;
+  tabindex?: string | undefined;
+  // ----------------------------------------------------------------------------
+  class?: ClassType;
+  classHeader?: ClassType;
+  classInput?: ClassType;
+  // ----------------------------------------------------------------------------
+  // 状態
+  focusColor?: string;
+  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,
+  image: false,
+  nullText: "選択してください",
+  nullable: true,
+  classRow: "",
+  classCol: "",
+  classItem: "",
+  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 InputFocusEventArg = {
+  elm: HTMLElement;
+  label: MultiLang;
+  data: number[];
+};
+type Emits = {
+  ref: [element: HTMLElement];
+  focus: [arg: InputFocusEventArg];
+  blur: [arg: InputFocusEventArg];
+  "update:data": [value: number[], id: number];
+  "value-change": [after: number[], before: number[], id: number];
+};
+const emit = defineEmits<Emits>();
+
+// ----------------------------------------------------------------------------
+
+// [ 選択肢配列 ]
+interface ItemListRow {
+  id: number;
+  text: MultiLang;
+  focus: boolean;
+  imgUrl: string | null;
+}
+const itemList = ref<ItemListRow[]>([]);
+watch(
+  () => [...props.list],
+  () => {
+    //
+    setItemList();
+  }
+);
+const setItemList = () => {
+  itemList.value = props.list.map((row) => {
+    return {
+      id: row.id,
+      text: row.text,
+      imgUrl: row.imgUrl === undefined ? null : row.imgUrl,
+      focus: false,
+    } as ItemListRow;
+  });
+};
+setItemList();
+
+// ----------------------------------------------------------------------------
+
+const valueChange = async (id: number) => {
+  const before = props.data.map((row) => row);
+  let temp = props.data.map((row) => row);
+  if (props.data.includes(id)) {
+    // console.log('valueChange off', id);
+    temp = props.data.filter((row) => {
+      if (row === id) {
+        return false;
+      } else {
+        return true;
+      }
+    });
+  } else {
+    // console.log('valueChange on', id, value);
+    temp.push(id);
+  }
+  const ret = ListIdSort([...props.list], temp);
+  emit("update:data", ret, id);
+  await nextTick();
+  emit("value-change", ret, before, id);
+};
+
+// ----------------------------------------------------------------------------
+// [ ref ]
+const inputElement = ref();
+const setRef = (elm: any, index: number) => {
+  if (index === 0) {
+    inputElement.value = elm;
+    emit("ref", inputElement.value as HTMLInputElement);
+  }
+};
+
+// [ focus, blur ]
+interface FocusState {
+  isMmousedown: boolean;
+}
+
+const focusState = reactive<FocusState>({
+  isMmousedown: false,
+});
+
+/**
+ * コントロールのFocus判定
+ */
+const computedActivate = computed(() => {
+  if (focusState.isMmousedown) return true;
+  if (itemList.value.filter((row) => row.focus === true).length !== 0)
+    return true;
+  return false;
+});
+
+/**
+ * focus, blur イベント
+ */
+watch(computedActivate, (value) => {
+  if (value === true) {
+    // クリックでの遷移の場合に
+    // 一つ前のコントロールのblurイベントよりも早くfocusが発生しないようにする対策で10ミリ秒処理をずらす
+    setTimeout(() => {
+      emit("focus", {
+        elm: inputElement.value,
+        label: props.label,
+        data: props.data.map((row) => row),
+      });
+    }, 10);
+  } else {
+    emit("blur", {
+      elm: inputElement.value,
+      label: props.label,
+      data: props.data.map((row) => row),
+    });
+  }
+});
+
+const onFocus = (row: ItemListRow) => {
+  row.focus = true;
+};
+
+const onBlur = (row: ItemListRow) => {
+  setTimeout(() => {
+    row.focus = false;
+  }, 10);
+};
+
+// 更新の有無判定
+const isChangeData = computed(() => {
+  if (props.diff === undefined) return false;
+  return !ObjectCompare(
+    props.diff.map((row) => row).sort(),
+    props.data.map((row) => row)
+  );
+});
+
+const tabindex = computed(() => {
+  if (props.disabled === true) return -1;
+  return props.tabindex;
+});
+// ----------------------------------------------------------------------------
+// Class
+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 rowClass = computed(() => {
+  return twMerge(
+    //
+    "flex items-center flex-wrap",
+    ClassTypeToString(props.classRow)
+  );
+});
+const colClass = computed(() => {
+  return twMerge(
+    //
+    "min-w-[0]",
+    ClassTypeToString(props.classCol)
+  );
+});
+
+const itemClass = computed(() => {
+  return twMerge(
+    //
+    "px-[6px] py-[1px]  w-full",
+    ClassTypeToString(props.classItem)
+  );
+});
+
+// ----------------------------------------------------------------------------
+</script>
+
+<template>
+  <InputFrame
+    :class="baseClass"
+    :class-header="props.classHeader"
+    :class-input="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"
+  >
+    <template v-if="$slots.overlay" #overlay>
+      <slot name="overlay"></slot>
+    </template>
+    <div class="nac-input-box" @mousedown.stop="" @mouseup.stop="">
+      <div
+        class="w-full h-full"
+        :class="rowClass"
+        style="background-color: transparent"
+      >
+        <template v-for="(row, index) in itemList" :key="index">
+          <div :class="colClass">
+            <HsFcCheckBox
+              :data="props.data.includes(row.id) === true"
+              :label="tx(row.text).value"
+              :class="itemClass"
+              :class-img="props.classImg"
+              :class-img-tag="props.classImgTag"
+              :image="props.image"
+              :img-url="row.imgUrl"
+              :tabindex="tabindex"
+              :disabled="props.disabled"
+              @value-change="(value) => valueChange(row.id)"
+              @focus="() => onFocus(row)"
+              @blur="() => onBlur(row)"
+              @ref="(e) => setRef(e, index)"
+            />
+          </div>
+        </template>
+      </div>
+    </div>
+  </InputFrame>
+</template>
+
+<style scoped>
+.nac-input-box {
+  width: 100%;
+  height: 100%;
+}
+</style>