nuxt-hs-ui 2.12.6 → 4.0.0

package/dist/runtime/components/form/datepicker.vue.d.ts

@@ -0,0 +1,122 @@
+import type { ClassType } from '../../utils/class-style.js';
+import type { MultiLang } from '../../utils/multi-lang.js';
+import { type ThemeColor } from '../../utils/theme.js';
+type Props = {
+    theme?: ThemeColor;
+    textAlign?: 'left' | 'center' | 'right';
+    mode?: 'all' | 'date' | 'time';
+    /** mode=time の場合、[HH:mm:ss.SSS] に固定 */
+    dataFormat?: string;
+    /** mode=time の場合、[HH:mm] に固定 */
+    showFormat?: string;
+    minDate?: string | null;
+    maxDate?: string | null;
+    hideDeleteBtn?: boolean;
+    hideTodayBtn?: boolean;
+    disableMobile?: boolean;
+    hasShift?: boolean;
+    /** 言語設定
+     * * 例 'ja-JP'  'en-US'" */
+    locale?: string | undefined;
+    portal?: string | false | true | HTMLElement;
+    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';
+    uiText?: {
+        error: {
+            inputRangeTitle: MultiLang;
+            inputRangeMessage: MultiLang;
+        };
+    };
+};
+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: (elm: HTMLElement) => any;
+    focus: (elm: HTMLElement) => any;
+    ref: (element: HTMLElement) => any;
+    "update:data": (value: string | null) => any;
+    "value-change": (after: string | null, before: string | null) => any;
+    "reset-piceker-func": (func: any) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onBlur?: ((elm: HTMLElement) => any) | undefined;
+    onFocus?: ((elm: HTMLElement) => any) | undefined;
+    onRef?: ((element: HTMLElement) => any) | undefined;
+    "onUpdate:data"?: ((value: string | null) => any) | undefined;
+    "onValue-change"?: ((after: string | null, before: string | null) => any) | undefined;
+    "onReset-piceker-func"?: ((func: any) => any) | undefined;
+}>, {
+    error: boolean;
+    size: "s" | "m" | "l";
+    disabled: boolean;
+    warn: string;
+    theme: ThemeColor;
+    class: ClassType;
+    textAlign: "left" | "center" | "right";
+    diff: string | null;
+    tabindex: string;
+    label: MultiLang;
+    warnTimeOut: number;
+    uiText: {
+        error: {
+            inputRangeTitle: MultiLang;
+            inputRangeMessage: MultiLang;
+        };
+    };
+    classHeader: ClassType;
+    classInput: ClassType;
+    focusColor: string;
+    changeColor: string;
+    errorColor: string;
+    disabledColor: string;
+    readonly: boolean;
+    headerless: boolean;
+    require: boolean;
+    requireText: MultiLang;
+    mode: "all" | "date" | "time";
+    dataFormat: string;
+    showFormat: string;
+    minDate: string | null;
+    maxDate: string | null;
+    hideDeleteBtn: boolean;
+    disableMobile: boolean;
+    hasShift: boolean;
+    locale: string;
+    portal: string | false | true | HTMLElement;
+}, {}, {}, {}, 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/input-frame.vue

@@ -1,275 +1,191 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-// src\runtime\components\form\input-frame.vue
-// ----------------------------------------------------------------------------
-// InputFrame
-// InputFrameInputFrame
------------------------------------------------------------------------------ */
-
-// [ tailwind ]
-import { twMerge } from "tailwind-merge";
-// [ NUXT ]
-import { computed, useSlots } from "#imports";
-// [ utils ]
-import { type ClassType, ClassTypeToString } from "../../utils/class-style";
-import type { MultiLang } from "../../utils/multi-lang";
-// [ composables ]
-import { useHsToast } from "../../composables/use-hs-toast";
-import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
-// ----------------------------------------------------------------------------
-// [ Props ]
-type Props = {
-  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>(), {
-  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 Emits = {
-  // ----------------------------
-  "header-label-click": [];
-  // ----------------------------
-};
-const emit = defineEmits<Emits>();
-// ----------------------------------------------------------------------------
-
-const toast = useHsToast();
-
-const multiLang = useHsMultiLang();
-const tx = multiLang.tx;
-// ----------------------------------------------------------------------------
-const baseClass = computed(() => {
-  return [
-    twMerge(
-      //
-      "flex max-w-full",
-      "border-[1px] border-main0",
-      "bg-white",
-      props.size === "s" ? "h-[44px]" : "",
-      props.size === "m" ? "h-[48px]" : "",
-      props.size === "l" ? "h-[60px]" : "",
-      props.change ? props.changeColor : "",
-      props.error ? props.errorColor : "",
-      props.warn ? props.errorColor : "",
-      props.focus ? props.focusColor : "",
-      props.disabled ? "shadow-none bg-slate-300" : "",
-      props.disabled ? props.disabledColor : "",
-      props.readonly ? "shadow-none bg-transparent " : "",
-      ClassTypeToString(props.class)
-    ),
-    props.disabled ? "disabled " : "",
-    props.readonly ? "readonly " : "",
-  ];
-});
-
-const headerClass = computed(() => {
-  return [
-    twMerge(
-      //
-      "px-1",
-      "overflow-hidden",
-      "text-[#996655]",
-      props.size === "s" ? "h-[18px] text-[12px]" : "",
-      props.size === "m" ? "h-[20px] text-[14px]" : "",
-      props.size === "l" ? "h-[22px] text-[15px]" : "",
-      ClassTypeToString(props.classHeader)
-    ),
-  ];
-});
-
-const headerIconClass = computed(() => {
-  return [
-    twMerge(
-      //
-      props.size === "s"
-        ? "text-[12px] rounded leading-[12px] px-[2px] py-[2px]"
-        : "",
-      props.size === "m"
-        ? "text-[13px] rounded leading-[13px] px-[2px] py-[2px]"
-        : "",
-      props.size === "l"
-        ? "text-[14px] rounded leading-[14px] px-[2px] py-[3px]"
-        : ""
-    ),
-  ];
-});
-
-const inputClass = computed(() => {
-  return [
-    twMerge(
-      "px-1",
-      "truncate",
-      //
-      "w-full",
-      // 'max-w-full max-h-full w-full',
-      props.size === "s" ? "text-[14px]" : "",
-      props.size === "m" ? "text-[16px]" : "",
-      props.size === "l" ? "text-[20px]" : "",
-      ClassTypeToString(props.classInput)
-    ),
-  ];
-});
-// ----------------------------------------------------------------------------
-const iconDisabled = computed(() => {
-  if (props.disabled) return true;
-  if (props.readonly) return true;
-  return false;
-});
-// ----------------------------------------------------------------------------
-const label = computed(() => tx(props.label).value);
-// ----------------------------------------------------------------------------
-const slots = useSlots();
-const hasHeader = computed(() => {
-  if (label.value.length !== 0) return true;
-  if (props.require && !props.readonly) return true;
-  // if (slots.label) return true;
-  if (slots["label-prepend"]) return true;
-  if (slots["label-append"]) return true;
-  if (slots["header-right"]) return true;
-  return false;
-});
-// ----------------------------------------------------------------------------
-</script>
-
-<template>
-  <div ref="el" class="hc-ui-input-frame" :class="baseClass">
-    <div
-      v-if="$slots['left-icons']"
-      class="icons left-icons flex-none"
-      :class="iconDisabled ? 'disabled' : ''"
-    >
-      <slot name="left-icons" :disabled="iconDisabled" />
-    </div>
-    <div class="flex-1 flex flex-col overflow-hidden justify-start">
-      <div
-        v-if="hasHeader && !props.headerless"
-        class="flex-none flex items-end"
-        :class="headerClass"
-      >
-        <div
-          class="hc-input-label grow-0 shrink-1 truncate leading-[1.5em]"
-          :title="label"
-          @click.stop="emit('header-label-click')"
-        >
-          <slot name="label-prepend" />{{ label }}<slot name="label-append" />
-        </div>
-        <div class="flex-1"></div>
-        <div class="flex-none flex gap-2">
-          <slot name="header-right" :default-class="headerIconClass" />
-          <div
-            v-if="props.require && !props.readonly"
-            :class="headerIconClass"
-            class="text-white bg-error"
-          >
-            <span data-type="require">{{ tx(props.requireText) }}</span>
-          </div>
-        </div>
-      </div>
-      <div class="hc-input-body flex-1 flex flex-col justify-center">
-        <div :class="inputClass"><slot /></div>
-      </div>
-    </div>
-    <div
-      v-if="$slots['right-icons'] || props.warn"
-      class="icons right-icons flex-none"
-      :class="iconDisabled ? 'disabled' : ''"
-    >
-      <slot name="right-icons" :disabled="iconDisabled" />
-      <div
-        v-if="props.warn"
-        @click="toast.Warning(props.warn, '', props.warnTimeOut)"
-      >
-        <i
-          class="fa-solid fa-triangle-exclamation text-error cursor-pointer"
-        ></i>
-      </div>
-    </div>
-    <slot name="overlay"></slot>
-  </div>
-</template>
-
-<style scoped>
-.icons {
+<script setup>
+import { twMerge } from "tailwind-merge";
+import { computed, useSlots } from "#imports";
+import { ClassTypeToString } from "../../utils/class-style";
+import { useHsToast } from "../../composables/use-hs-toast";
+import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
+import { useHsPinia } from "../../composables/use-pinia";
+const props = defineProps({
+  class: { type: [String, Object, Array], required: false, default: "" },
+  classHeader: { type: [String, Object, Array], required: false, default: "" },
+  classInput: { type: [String, Object, Array], required: false, default: "" },
+  focus: { type: Boolean, required: false, default: false },
+  focusColor: { type: String, required: false, default: "shadow-[inset_0px_0px_1px_2px_#0d8ee4]" },
+  change: { type: Boolean, required: false, default: false },
+  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(["header-label-click", "ref", "focus"]);
+const toast = useHsToast(useHsPinia());
+const multiLang = useHsMultiLang(useHsPinia());
+const tx = multiLang.tx;
+const baseClass = computed(() => {
+  return [
+    twMerge(
+      //
+      "flex max-w-full relative",
+      "border-[1px] border-[#183C5E]",
+      "bg-white",
+      "min-w-[100px]",
+      props.size === "s" ? "min-h-[44px]" : "",
+      props.size === "m" ? "min-h-[48px]" : "",
+      props.size === "l" ? "min-h-[60px]" : "",
+      props.change ? props.changeColor : "",
+      props.error ? props.errorColor : "",
+      props.warn ? props.errorColor : "",
+      props.focus ? props.focusColor : "",
+      props.disabled ? "shadow-none bg-slate-300" : "",
+      props.disabled ? props.disabledColor : "",
+      props.readonly ? "shadow-none bg-transparent " : "",
+      ClassTypeToString(props.class)
+    ),
+    props.disabled ? "disabled " : "",
+    props.readonly ? "readonly " : ""
+  ];
+});
+const headerClass = computed(() => {
+  return [
+    twMerge(
+      //
+      "px-1",
+      "overflow-hidden",
+      "text-[#996655]",
+      props.size === "s" ? "h-[18px] text-[12px]" : "",
+      props.size === "m" ? "h-[20px] text-[14px]" : "",
+      props.size === "l" ? "h-[22px] text-[15px]" : "",
+      ClassTypeToString(props.classHeader)
+    )
+  ];
+});
+const headerIconClass = computed(() => {
+  return [
+    twMerge(
+      //
+      props.size === "s" ? "text-[12px] rounded leading-[12px] px-[2px] py-[2px]" : "",
+      props.size === "m" ? "text-[13px] rounded leading-[13px] px-[2px] py-[2px]" : "",
+      props.size === "l" ? "text-[14px] rounded leading-[14px] px-[2px] py-[3px]" : ""
+    )
+  ];
+});
+const inputClass = computed(() => {
+  return [
+    twMerge(
+      "px-1",
+      "truncate relative",
+      "flex items-center",
+      "text-black",
+      props.disabled ? "text-gray-600 " : "",
+      // props.readonly ? 'text-black' : '',
+      "w-full",
+      // 'max-w-full max-h-full w-full',
+      props.size === "s" ? "text-[16px]" : "",
+      props.size === "m" ? "text-[16px]" : "",
+      props.size === "l" ? "text-[20px]" : "",
+      ClassTypeToString(props.classInput)
+    )
+  ];
+});
+const iconDisabled = computed(() => {
+  if (props.disabled) return true;
+  if (props.readonly) return true;
+  return false;
+});
+const label = computed(() => tx(props.label).value);
+const slots = useSlots();
+const hasHeader = computed(() => {
+  if (label.value) return true;
+  if (props.require && !props.readonly) return true;
+  if (slots["label-prepend"]) return true;
+  if (slots["label-append"]) return true;
+  if (slots["header-right"]) return true;
+  return false;
+});
+const setRef = (e) => {
+  emit("ref", e);
+};
+</script>
+
+<template>
+  <div :ref="(e) => setRef(e)" class="hc-ui-input-frame" :class="baseClass">
+    <div
+      v-if="$slots['left-icons']"
+      class="icons left-icons flex-none text-accent1 relative"
+      :class="iconDisabled ? 'disabled' : ''"
+    >
+      <slot name="left-icons" :disabled="iconDisabled" />
+    </div>
+    <div class="flex-1 flex flex-col overflow-hidden justify-start relative">
+      <div v-if="hasHeader && !props.headerless" class="flex-none flex items-end relative" :class="headerClass">
+        <div
+          class="hc-input-label grow-0 shrink truncate leading-[1.5em] relative"
+          :title="label"
+          @click="emit('header-label-click')"
+        >
+          <slot name="label-prepend" />{{ label }}<slot name="label-append" />
+        </div>
+        <div class="flex-1"></div>
+        <div class="flex-none flex gap-2 relative">
+          <slot name="header-right" :default-class="headerIconClass" />
+          <div v-if="props.require && !props.readonly" :class="headerIconClass" class="text-white bg-error">
+            <span data-type="require">{{ tx(props.requireText) }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="hc-input-body flex-1 flex flex-col justify-center relative">
+        <div :class="inputClass"><slot name="default" :focus="props.focus" :change="props.change" /></div>
+      </div>
+    </div>
+    <div
+      v-if="$slots['right-icons'] || props.warn"
+      class="icons right-icons flex-none relative"
+      :class="iconDisabled ? 'disabled' : ''"
+    >
+      <slot name="right-icons" :disabled="iconDisabled" />
+      <div v-if="props.warn" class="relative" @click="toast.Warning(props.warn, '', props.warnTimeOut)">
+        <i class="fa-solid fa-triangle-exclamation text-error cursor-pointer"></i>
+      </div>
+    </div>
+    <slot name="overlay" :focus="props.focus" :change="props.change"></slot>
+  </div>
+</template>
+
+<style>
+.hc-ui-input-frame .icons {
   display: flex;
+  align-items: center;
 }
-.icons > * {
+.hc-ui-input-frame .icons > * {
+  position: relative;
   height: 100%;
   min-width: 2em;
   display: flex;
   justify-content: center;
   align-items: center;
-  color: theme("colors.accent1");
 }
-.icons > *::after {
+.hc-ui-input-frame .icons > *::after {
   content: "";
   width: 1px;
   position: absolute;
-  background-color: theme("colors.main0");
+  background-color: #9faab3;
 }
-.icons.disabled > * {
-  color: theme("colors.dark");
+.hc-ui-input-frame .icons.disabled > * {
+  color: #224466;
 }
-
-.left-icons > *::after {
+.hc-ui-input-frame .left-icons > *::after {
   inset: 2px 0 2px auto;
 }
-
-.right-icons > *::after {
+.hc-ui-input-frame .right-icons > *::after {
   inset: 2px auto 2px 0;
 }
-
-.hc-ui-input-frame {
-  min-width: 100px;
-}
-</style>
+</style>

package/dist/runtime/components/form/input-frame.vue.d.ts

@@ -0,0 +1,88 @@
+import { type ClassType } from '../../utils/class-style.js';
+import type { MultiLang } from '../../utils/multi-lang.js';
+type Props = {
+    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';
+};
+declare var __VLS_1: {
+    disabled: any;
+}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {
+    defaultClass: any;
+}, __VLS_9: {
+    focus: boolean;
+    change: boolean;
+}, __VLS_11: {
+    disabled: any;
+}, __VLS_13: {
+    focus: boolean;
+    change: boolean;
+};
+type __VLS_Slots = {} & {
+    'left-icons'?: (props: typeof __VLS_1) => any;
+} & {
+    'label-prepend'?: (props: typeof __VLS_3) => any;
+} & {
+    'label-append'?: (props: typeof __VLS_5) => any;
+} & {
+    'header-right'?: (props: typeof __VLS_7) => any;
+} & {
+    default?: (props: typeof __VLS_9) => any;
+} & {
+    'right-icons'?: (props: typeof __VLS_11) => any;
+} & {
+    overlay?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    focus: (flag: boolean) => any;
+    ref: (elm: HTMLElement) => any;
+    "header-label-click": () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onFocus?: ((flag: boolean) => any) | undefined;
+    onRef?: ((elm: HTMLElement) => any) | undefined;
+    "onHeader-label-click"?: (() => any) | undefined;
+}>, {
+    change: boolean;
+    error: boolean;
+    focus: boolean;
+    size: "s" | "m" | "l";
+    disabled: boolean;
+    warn: string;
+    class: ClassType;
+    label: MultiLang;
+    warnTimeOut: number;
+    classHeader: ClassType;
+    classInput: ClassType;
+    focusColor: string;
+    changeColor: string;
+    errorColor: string;
+    disabledColor: string;
+    readonly: boolean;
+    headerless: boolean;
+    require: boolean;
+    requireText: 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;
+    };
+};