nuxt-hs-ui 2.12.6 → 4.0.0

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

@@ -0,0 +1,99 @@
+import { type ClassType } from '../../utils/class-style.js';
+import type { MultiLang } from '../../utils/multi-lang.js';
+import type { SelectItem } from '../../utils/select-item.js';
+type Props = {
+    list: SelectItem[] | readonly SelectItem[];
+    image?: boolean;
+    nullText?: MultiLang;
+    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;
+    headerless?: boolean;
+    label?: MultiLang;
+    require?: boolean;
+    requireText?: MultiLang;
+    warn?: string;
+    warnTimeOut?: number;
+    size?: 's' | 'm' | 'l';
+};
+type InputFocusEventArg = {
+    elm: HTMLElement;
+    label: MultiLang;
+    data: number[];
+};
+type __VLS_Slots = {
+    default(props: {
+        msg: string;
+    }): any;
+    overlay?(): any;
+    'right-icons'?(): any;
+    'left-icons'?(): any;
+    'label-prepend'?(): any;
+    'label-append'?(): any;
+    'header-right'?(): any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {
+    el: import("vue").Ref<any, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (arg: InputFocusEventArg) => any;
+    focus: (arg: InputFocusEventArg) => any;
+    ref: (element: HTMLElement) => any;
+    "update:data": (value: number[], id: number) => any;
+    "value-change": (after: number[], before: number[], id: number) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onBlur?: ((arg: InputFocusEventArg) => any) | undefined;
+    onFocus?: ((arg: InputFocusEventArg) => any) | undefined;
+    onRef?: ((element: HTMLElement) => any) | undefined;
+    "onUpdate:data"?: ((value: number[], id: number) => any) | undefined;
+    "onValue-change"?: ((after: number[], before: number[], id: number) => any) | undefined;
+}>, {
+    error: boolean;
+    size: "s" | "m" | "l";
+    image: boolean;
+    disabled: boolean;
+    warn: string;
+    class: ClassType;
+    classImg: ClassType;
+    classImgTag: ClassType;
+    diff: number[];
+    tabindex: string;
+    label: MultiLang;
+    warnTimeOut: number;
+    classHeader: ClassType;
+    classInput: ClassType;
+    focusColor: string;
+    changeColor: string;
+    errorColor: string;
+    disabledColor: string;
+    readonly: boolean;
+    headerless: boolean;
+    require: boolean;
+    requireText: MultiLang;
+    nullText: MultiLang;
+    classRow: ClassType;
+    classCol: ClassType;
+    classItem: ClassType;
+}, {}, {}, {}, 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;
+    };
+};

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

@@ -0,0 +1,340 @@
+<script setup>
+import { twMerge } from "tailwind-merge";
+import { reactive, ref, watch, computed, nextTick, useId, watchEffect } from "#imports";
+import { useHsFocus } from "../../composables/use-hs-focus";
+import { useHsPinia } from "../../composables/use-pinia";
+import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
+import { useHsMisc } from "../../composables/use-hs-misc";
+import InputFrame from "./input-frame.vue";
+const fcFocus = useHsFocus(useHsPinia());
+const hsMisc = useHsMisc(useHsPinia());
+const props = defineProps({
+  type: { type: String, required: false, default: "text" },
+  textAlign: { type: String, required: false, default: "left" },
+  maxLen: { type: Number, required: false, default: 0 },
+  autocomplete: { type: String, required: false, default: "off" },
+  datalist: { type: Array, required: false, default: () => [] },
+  enterkeyhint: { type: null, required: false, default: void 0 },
+  inputmode: { type: null, required: false, default: void 0 },
+  inputSize: { type: [String, Number], required: false, default: 10 },
+  placeholder: { type: [String, Object], required: false, default: "" },
+  pattern: { type: String, required: false, default: void 0 },
+  lang: { type: String, required: false, default: void 0 },
+  list: { type: Array, required: true },
+  listLoading: { type: Boolean, required: false, default: false },
+  activeId: { type: null, required: true },
+  freeTextId: { type: null, required: true },
+  data: { type: [String, 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", "update:activeId", "value-change", "keydown", "keyup"]);
+const slots = defineSlots();
+const uid = useId();
+const multiLang = useHsMultiLang(useHsPinia());
+const tx = multiLang.tx;
+const gt = multiLang.gt;
+watch(
+  () => multiLang.lang,
+  () => {
+    if (!props.activeId) return;
+    const data = props.list.find((row) => row.id === props.activeId);
+    if (!data) return;
+    updateValue(gt(data.text), props.activeId);
+  }
+);
+const state = reactive({
+  value: ""
+});
+watch(
+  () => props.data,
+  () => {
+    setValue(props.data);
+  }
+);
+const updateValue = async (text, forceId) => {
+  const before = props.data;
+  let setText = "";
+  if (text === null) {
+    setText = "";
+  } else if (props.maxLen === 0 || text.length <= props.maxLen) {
+    setText = text;
+  } else {
+    const CutLen = (text2, len, addWard = "") => {
+      if (text2 === null) return "";
+      if (len === 0) return text2;
+      return text2.substring(0, len) + addWard;
+    };
+    setText = CutLen(text, props.maxLen, "");
+  }
+  state.value = setText;
+  emit("update:data", setText);
+  if (!setText) {
+    emit("update:activeId", null);
+  } else if (forceId !== void 0) {
+    if (props.activeId !== forceId) {
+      emit("update:activeId", forceId);
+    }
+  } else {
+    const matched = props.list.find((row) => tx(row.text).value === setText);
+    emit("update:activeId", matched ? matched.id : props.freeTextId ?? null);
+  }
+  await nextTick();
+  emit("value-change", setText, before);
+};
+const setValue = (text) => {
+  if (text === null) {
+    state.value = "";
+    return;
+  }
+  if (props.maxLen === 0 || text.length <= props.maxLen) {
+    state.value = text;
+  } else {
+    updateValue(text);
+  }
+};
+setValue(props.data);
+const inputElement = ref();
+defineExpose({ el: inputElement });
+const setRef = (elm) => {
+  inputElement.value = elm;
+  emit("ref", elm);
+};
+const focusState = reactive({
+  isActivate: false,
+  isMmousedown: false
+});
+const computedActivate = computed(() => {
+  if (props.disabled === true) return false;
+  if (props.readonly === true) return false;
+  if (fcFocus.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 onFocus = () => {
+  if (props.disabled === true) return;
+  if (props.readonly === true) return;
+  focusState.isActivate = true;
+  fcFocus.state.id = uid;
+};
+const onBlur = () => {
+  focusState.isActivate = false;
+};
+const isChangeData = computed(() => {
+  if (props.diff === void 0) return false;
+  if (props.diff === null && props.data === "") return false;
+  if (props.diff === "" && props.data === null) return false;
+  if (props.diff !== props.data) return true;
+  return false;
+});
+const tabindex = computed(() => {
+  if (props.disabled === true) return -1;
+  if (props.readonly === true) return -1;
+  return props.tabindex;
+});
+const lastLen = computed(() => {
+  return props.maxLen - state.value.length;
+});
+const lenLabelClass = computed(() => {
+  return [
+    twMerge(
+      "text-white bg-[#2fa412]",
+      lastLen.value < 9 ? "bg-[#fdc90d]" : "",
+      lastLen.value < 6 ? "bg-[#fd750d]" : "",
+      lastLen.value < 3 ? "bg-[#fa541d]" : ""
+    )
+  ];
+});
+const dataListId = ref(`textbox-list-${uid}`);
+const placeholder = computed(() => tx(props.placeholder).value);
+const filteredList = computed(() => {
+  if (!props.data || props.data.length === 0) return props.list;
+  const query = props.data.toLowerCase();
+  return props.list.filter((row) => tx(row.text).value.toLowerCase().includes(query));
+});
+const open = ref(false);
+watchEffect(() => {
+  if (computedActivate.value && (filteredList.value.length !== 0 || props.listLoading)) {
+    open.value = computedActivate.value;
+  } else if (!computedActivate.value) {
+    open.value = false;
+  }
+});
+</script>
+
+<template>
+  <UPopover :open="open" :ui="{ content: 'w-(--reka-popper-anchor-width) p-0 overflow-hidden' }">
+    <InputFrame
+      :class="props.class"
+      :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"
+      :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="updateValue(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">{{ props.diff }}</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="props.maxLen > 0 || slots['header-right']" #header-right="{ defaultClass }">
+        <slot name="header-right" />
+        <div v-if="props.maxLen > 0 && lastLen < 15" :class="[defaultClass, lenLabelClass]">
+          {{ state.value.length }} / {{ props.maxLen }}
+        </div>
+      </template>
+      <template #default="{ focus }">
+        <span
+          v-if="placeholder"
+          class="text-black/50 pointer-events-none select-none px-1 absolute inset-0 items-center transition-opacity truncate"
+          :class="focus || !!state.value ? 'opacity-0' : ''"
+        >
+          <div class="truncate w-full" :style="`text-align:${props.textAlign};`">
+            {{ placeholder }}
+          </div>
+        </span>
+
+        <div v-if="props.disabled" class="input-d" :style="`text-align:${props.textAlign};`">
+          {{ state.value }}
+        </div>
+
+        <input
+          v-else
+          :ref="(e) => setRef(e)"
+          v-model="state.value"
+          :list="props.datalist.length > 0 ? dataListId : void 0"
+          :type="props.type"
+          :autocomplete="props.autocomplete"
+          style="ime-mode: active"
+          :style="`text-align:${props.textAlign};`"
+          class="w-full"
+          :disabled="props.disabled"
+          :readonly="props.readonly"
+          :tabindex="tabindex"
+          :enterkeyhint="props.enterkeyhint"
+          :inputmode="props.inputmode"
+          :size="props.inputSize"
+          :lang="props.lang"
+          :pattern="props.pattern"
+          @blur="onBlur()"
+          @focus="onFocus()"
+          @input="updateValue(state.value)"
+          @keydown="(e) => emit('keydown', e)"
+          @keyup="(e) => emit('keyup', e)"
+          @click.stop=""
+        />
+        <datalist v-if="props.datalist.length !== 0" :id="dataListId">
+          <template v-for="(row, index) in props.datalist" :key="index">
+            <option :value="row" />
+          </template>
+        </datalist>
+      </template>
+    </InputFrame>
+    <template #content>
+      <div class="grid gap-1 bg-white max-h-60 overflow-y-auto p-2 select-none min-h-30">
+        <BlockLoading :show="props.listLoading" />
+        <template v-for="(row, index) in filteredList" :key="index">
+          <div
+            class="relative border border-dark hover:border-accent1 cursor-pointer hover:bg-accent1/5 rounded p-2"
+            :class="props.activeId === row.id ? 'pointer-events-none' : ''"
+            @click="updateValue(tx(row.text).value, row.id)"
+          >
+            {{ tx(row.text) }}
+            <div v-if="props.activeId === row.id" class="absolute inset-px border-2 border-accent1 rounded"></div>
+          </div>
+        </template>
+      </div>
+    </template>
+  </UPopover>
+</template>
+
+<style scoped>
+.input-d,
+input {
+  width: 100%;
+  height: auto;
+  background-color: transparent;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: 0px;
+  outline: none;
+  line-height: 1.4em;
+  color: inherit;
+}
+
+input::-webkit-calendar-picker-indicator {
+  opacity: 0;
+}
+</style>

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

@@ -0,0 +1,69 @@
+import type { ClassType } from '../../utils/class-style.js';
+import type { MultiLang } from '../../utils/multi-lang.js';
+import type { SelectItem } from '../../utils/select-item.js';
+declare const __VLS_export: <IdType extends string | number>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<{
+        type?: "email" | "number" | "tel" | "text" | "url";
+        textAlign?: "left" | "center" | "right";
+        maxLen?: number;
+        autocomplete?: string;
+        datalist?: string[];
+        enterkeyhint?: ("done" | "search" | "enter" | "go" | "next" | "previous" | "send") | undefined;
+        inputmode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputSize?: string | number;
+        placeholder?: MultiLang;
+        pattern?: string;
+        lang?: string;
+        list: SelectItem<IdType>[];
+        listLoading?: boolean;
+        activeId: IdType | null;
+        freeTextId: IdType | null;
+        data: string | null;
+        diff?: string | null | undefined;
+        tabindex?: string | undefined;
+        class?: ClassType;
+        classHeader?: ClassType;
+        classInput?: ClassType;
+        focusColor?: string;
+        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";
+    } & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "blur", elm: HTMLElement) => void) & ((evt: "focus", elm: HTMLElement) => void) & ((evt: "keydown", event: KeyboardEvent) => void) & ((evt: "keyup", event: KeyboardEvent) => void) & ((evt: "ref", element: HTMLElement) => void) & ((evt: "update:data", value: string) => void) & ((evt: "value-change", after: string, before: string | null) => void) & ((evt: "update:activeId", id: IdType | null) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        el: import("vue").Ref<any, any>;
+    }>) => void;
+    attrs: any;
+    slots: {
+        default(props: {
+            msg: string;
+        }): any;
+        overlay?(): any;
+        'right-icons'?(): any;
+        'left-icons'?(): any;
+        'label-prepend'?(): any;
+        'label-append'?(): any;
+        'header-right'?(): any;
+    };
+    emit: ((evt: "blur", elm: HTMLElement) => void) & ((evt: "focus", elm: HTMLElement) => void) & ((evt: "keydown", event: KeyboardEvent) => void) & ((evt: "keyup", event: KeyboardEvent) => void) & ((evt: "ref", element: HTMLElement) => void) & ((evt: "update:data", value: string) => void) & ((evt: "value-change", after: string, before: string | null) => void) & ((evt: "update:activeId", id: IdType | null) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};