nuxt-hs-ui 2.12.7 → 4.0.0

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

@@ -0,0 +1,128 @@
+import type { ClassType } from '../../utils/class-style.js';
+import type { MultiLang } from '../../utils/multi-lang.js';
+type Enterkeyhint = 'done' | 'search' | 'enter' | 'go' | 'next' | 'previous' | 'send';
+type Props = {
+    nullable?: boolean;
+    unit?: string;
+    step?: number;
+    min?: number;
+    max?: number;
+    digits?: number;
+    /** 小数点以下で末端のゼロを非表示 */
+    digitsAuto?: boolean;
+    isShowBtnControl?: boolean;
+    comma?: string;
+    enterkeyhint?: Enterkeyhint | undefined;
+    inputSize?: string | number;
+    placeholder?: MultiLang;
+    textAlign?: 'left' | 'center' | 'right';
+    digitsPointSmall?: boolean;
+    data: number | null;
+    diff?: number | 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?: {
+        validError: {
+            title: MultiLang;
+            nullValue: MultiLang;
+            minValue: MultiLang;
+            maxValue: 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;
+    keydown: (event: KeyboardEvent) => any;
+    keyup: (event: KeyboardEvent) => any;
+    ref: (element: HTMLElement) => any;
+    "update:data": (value: number | null) => any;
+    "value-change": (after: number | null, before: number | 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: number | null) => any) | undefined;
+    "onValue-change"?: ((after: number | null, before: number | null) => any) | undefined;
+}>, {
+    error: boolean;
+    size: "s" | "m" | "l";
+    disabled: boolean;
+    step: number;
+    warn: string;
+    class: ClassType;
+    textAlign: "left" | "center" | "right";
+    diff: number | null;
+    tabindex: string;
+    label: MultiLang;
+    warnTimeOut: number;
+    uiText: {
+        validError: {
+            title: MultiLang;
+            nullValue: MultiLang;
+            minValue: MultiLang;
+            maxValue: MultiLang;
+        };
+    };
+    classHeader: ClassType;
+    classInput: ClassType;
+    focusColor: string;
+    changeColor: string;
+    errorColor: string;
+    disabledColor: string;
+    readonly: boolean;
+    headerless: boolean;
+    require: boolean;
+    requireText: MultiLang;
+    nullable: boolean;
+    enterkeyhint: Enterkeyhint;
+    inputSize: string | number;
+    placeholder: MultiLang;
+    unit: string;
+    min: number;
+    max: number;
+    digits: number;
+    digitsAuto: boolean;
+    isShowBtnControl: boolean;
+    comma: string;
+    digitsPointSmall: boolean;
+}, {}, {}, {}, 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/interactive/alert.vue

@@ -1,113 +1,49 @@
-<script lang="ts">
-/* ----------------------------------------------------------------------------
-// src\runtime\components\interactive\alert.vue
-// ----------------------------------------------------------------------------
-// Alert
-// AlertAlert
------------------------------------------------------------------------------ */
-
-// [ utils ]
-import { tv } from "../../utils/tv";
-import type { Theme } from "../../utils/theme";
-const alertTv = tv({
-  slots: {
-    base: [
-      //
-      `p-2`,
-      "bg-white border border-[var(--main-color)] text-[color-mix(in_srgb,_var(--main-color)_,_#000_30%)]",
-      "rounded overflow-hidden",
-    ],
-    bg: "absolute inset-0 bg-[var(--main-color)] opacity-10",
-    inner: "",
-  },
-  variants: {
-    variant: {
-      header: {
-        base: [`flex justify-between items-center`],
-      },
-      body: {
-        base: [``],
-      },
-      footer: {
-        base: [`flex justify-between items-center`],
-      },
-    },
-    scroll: {
-      true: {
-        base: "overflow-y-auto overflow-x-hidden flex-1",
-      },
-      false: {
-        base: "flex-y-none",
-      },
-    },
-  },
-});
-</script>
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-// src\runtime\components\interactive\alert.vue
-// ----------------------------------------------------------------------------
-// Alert
-// AlertAlert
------------------------------------------------------------------------------ */
-
-// ----------------------------------------------------------------------------
-// [ NUXT ]
-import { computed } from "#imports";
-// [ utils ]
-import { type ClassType, ClassTypeToString } from "../../utils/class-style";
-import { GetGolorCode } from "../../utils/theme";
-
-// ----------------------------------------------------------------------------
-
-interface Props {
-  class?: ClassType;
-  classBg?: ClassType;
-  classInner?: ClassType;
-  theme?: Theme;
-}
-const props = withDefaults(defineProps<Props>(), {
-  class: "",
-  classBg: "",
-  classInner: "",
-  theme: "info",
-});
-// ----------------------------------------------------------------------------
-
-const styleMain = computed(() => {
-  return [
-    //
-    `--main-color:${GetGolorCode(props.theme)};`,
-  ];
-});
-const classTv = computed(() => {
-  return alertTv({});
-});
-
-const classTvBase = computed(() => {
-  return classTv.value.base({
-    class: ClassTypeToString(props.class),
-  });
-});
-
-const classTvBg = computed(() => {
-  return classTv.value.bg({
-    class: ClassTypeToString(props.classBg),
-  });
-});
-
-const classTvInner = computed(() => {
-  return classTv.value.inner({
-    class: ClassTypeToString(props.classInner),
-  });
-});
-</script>
-
-<template>
-  <div :class="classTvBase" :style="styleMain">
-    <div :class="classTvBg"></div>
-    <div :class="classTvInner">
-      <slot />
-    </div>
-  </div>
-</template>
+<script setup>
+import { twMerge } from "tailwind-merge";
+import { computed } from "#imports";
+import { ClassTypeToString } from "../../utils/class-style";
+import { GetColorCode, MakeAlertColors } from "../../utils/theme";
+const props = defineProps({
+  class: { type: [String, Object, Array], required: false, default: "" },
+  theme: { type: null, required: false, default: "info" },
+  bgDelta: { type: Number, required: false, default: 0.5 },
+  inkDelta: { type: Number, required: false, default: 0.3 },
+  borderDelta: { type: Number, required: false, default: 0.3 },
+  over: { type: String, required: false, default: "#ffffff" }
+});
+const baseColorCode = computed(() => {
+  return GetColorCode(props.theme);
+});
+const color = computed(() => {
+  return MakeAlertColors(baseColorCode.value, {
+    tone: "ink",
+    bgDelta: props.bgDelta,
+    inkDelta: props.inkDelta,
+    borderDelta: props.borderDelta
+  });
+});
+const styleMain = computed(() => {
+  return [
+    //
+    // `--main-color:${GetColorCode(props.theme)};`,
+    `--color-bg:${color.value.bg};`,
+    `--color-text:${color.value.text};`,
+    `--color-border:${color.value.border};`
+  ];
+});
+const classStyle = computed(() => {
+  return twMerge(
+    `relative block`,
+    `p-2`,
+    "border border-[var(--color-border)] text-[var(--color-text)] bg-[var(--color-bg)]",
+    "rounded overflow-hidden",
+    ClassTypeToString(props.class)
+  );
+});
+</script>
+
+<template>
+  <div :class="classStyle" :style="styleMain">
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/interactive/alert.vue.d.ts

@@ -0,0 +1,30 @@
+import { type ClassType } from '../../utils/class-style.js';
+import { type ThemeColor } from '../../utils/theme.js';
+interface Props {
+    class?: ClassType;
+    theme?: ThemeColor;
+    bgDelta?: number;
+    inkDelta?: number;
+    borderDelta?: number;
+    over?: string;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    bgDelta: number;
+    inkDelta: number;
+    borderDelta: number;
+    over: string;
+    theme: ThemeColor;
+    class: 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/interactive/block-loading.vue

@@ -1,84 +1,61 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-// src\runtime\components\interactive\block-loading.vue
-// ----------------------------------------------------------------------------
-// BlockLoading
-// BlockLoadingBlockLoading
------------------------------------------------------------------------------ */
-
-// [ NUXT ]
-import { computed } from "#imports";
-// [ tailwind ]
-import { twMerge } from "tailwind-merge";
-// [ utils ]
-import { type ClassType, ClassTypeToString } from "../../utils/class-style";
-// ----------------------------------------------------------------------------
-// ----------------------------------------------------------------------------
-type Props = {
-  class?: ClassType;
-  show: boolean;
-  message?: string;
-};
-const props = withDefaults(defineProps<Props>(), {
-  class: "",
-  message: "Loading",
-});
-const baseClass = [
-  //
-  //
-  "z-100",
-  "px-2",
-  "pt-2",
-  "pb-1",
-  "absolute",
-  "inset-0",
-  "h-full",
-  "w-full",
-  "overflow-hidden",
-  "bg-[#13175C]/[0.5]",
-  "flex",
-  "items-center",
-  "justify-center",
-  "transition-opacity",
-];
-
-const variableStyle = computed(() => {
-  if (props.show) {
-    return [
-      //
-      "pointer-events-auto",
-      "opacity-100",
-    ];
-  }
-  return [
-    //
-    "pointer-events-none",
-    "opacity-0",
-  ];
-});
-
-const classStyle = computed(() => {
-  return twMerge(
-    baseClass,
-    variableStyle.value,
-    ClassTypeToString(props.class)
-  );
-});
-</script>
-
-<template>
-  <div class="HsUiBlockLoading" :class="[classStyle]">
-    <div class="loading-container">
-      <div class="loading-item">
-        <div class="loading-ball" />
-        <div class="loading-ball" />
-        <div class="loading-ball" />
-      </div>
-      <div class="loading-text">{{ props.message }}<slot /></div>
-    </div>
-  </div>
-</template>
-
+<script setup>
+import { computed } from "#imports";
+import { twMerge } from "tailwind-merge";
+import { ClassTypeToString } from "../../utils/class-style";
+const props = defineProps({
+  class: { type: [String, Object, Array], required: false, default: "" },
+  show: { type: Boolean, required: true },
+  message: { type: String, required: false, default: "Loading" }
+});
+const variableStyle = computed(() => {
+  if (props.show) {
+    return [
+      //
+      "pointer-events-auto",
+      "opacity-100"
+    ];
+  }
+  return [
+    //
+    "pointer-events-none",
+    "opacity-0"
+  ];
+});
+const classStyle = computed(() => {
+  return twMerge(
+    "z-100",
+    "px-2",
+    "pt-2",
+    "pb-1",
+    "absolute",
+    "inset-0",
+    "h-full",
+    "w-full",
+    "overflow-hidden",
+    "bg-[#13175C]/[0.5]",
+    "flex",
+    "items-center",
+    "justify-center",
+    "transition-opacity",
+    variableStyle.value,
+    ClassTypeToString(props.class)
+  );
+});
+</script>
+
+<template>
+  <div class="HsUiBlockLoading" :class="[classStyle]">
+    <div class="loading-container relative">
+      <div class="loading-item ">
+        <div class="loading-ball relative" />
+        <div class="loading-ball relative" />
+        <div class="loading-ball relative" />
+      </div>
+      <div class="loading-text">{{ props.message }}<slot /></div>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .loading-container {
   width: 50%;
@@ -157,41 +134,36 @@ const classStyle = computed(() => {
   -ms-user-select: none;
   user-select: none;
 }
-</style>
-
-<style lang="scss">
-@keyframes HsUiBlockLoading-anime1 {
-  0% {
-    top: calc(100% - 4px);
-    height: 5px;
-    border-radius: 50% 50% 25% 25%;
-    transform: scaleX(1.4);
-  }
-
-  40% {
-    height: 16px;
-    border-radius: 50%;
-    transform: scaleX(1);
-  }
-
-  100% {
-    top: 0%;
-  }
-}
-
-@keyframes HsUiBlockLoading-anime2 {
-  0% {
-    transform: scaleX(1.5);
-  }
-
-  40% {
-    transform: scaleX(1);
-    opacity: 0.7;
-  }
-
-  100% {
-    transform: scaleX(0.2);
-    opacity: 0.4;
-  }
-}
-</style>
+</style>
+
+<style>
+@keyframes HsUiBlockLoading-anime1 {
+  0% {
+    top: calc(100% - 4px);
+    height: 5px;
+    border-radius: 50% 50% 25% 25%;
+    transform: scaleX(1.4);
+  }
+  40% {
+    height: 16px;
+    border-radius: 50%;
+    transform: scaleX(1);
+  }
+  100% {
+    top: 0%;
+  }
+}
+@keyframes HsUiBlockLoading-anime2 {
+  0% {
+    transform: scaleX(1.5);
+  }
+  40% {
+    transform: scaleX(1);
+    opacity: 0.7;
+  }
+  100% {
+    transform: scaleX(0.2);
+    opacity: 0.4;
+  }
+}
+</style>

package/dist/runtime/components/interactive/block-loading.vue.d.ts

@@ -0,0 +1,22 @@
+import { type ClassType } from '../../utils/class-style.js';
+type Props = {
+    class?: ClassType;
+    show: boolean;
+    message?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    message: string;
+    class: 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;
+    };
+};