nuxt-hs-ui 2.12.7 → 4.0.0

package/dist/runtime/components/form/_select/item-container.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { computed } from "#imports";
+import SelectItemLabel from "./item-label.vue";
+import SelectImgIcon from "../select-img-icon.vue";
+import { useHsPinia } from "../../../composables/use-pinia";
+import { useHsMultiLang } from "../../../composables/use-hs-multi-lang";
+const props = defineProps({
+  item: { type: Object, required: true },
+  value: { type: [String, Number, null], required: false },
+  img: { type: Boolean, required: false },
+  activated: { type: Boolean, required: true },
+  classImg: { type: [String, Object, Array], required: false },
+  classImgTag: { type: [String, Object, Array], required: false },
+  imgMode: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  type: { type: String, required: true }
+});
+const multiLang = useHsMultiLang(useHsPinia());
+const tx = multiLang.tx;
+const labels = computed(() => {
+  return {
+    deleted: tx({ ja: "\u524A\u9664\u6E08", en: "Deleted" }).value,
+    hidden: tx({ ja: "\u975E\u8868\u793A", en: "Hidden" }).value
+  };
+});
+</script>
+
+<template>
+  <!-- item.imgUrl &&  -->
+  <SelectImgIcon
+    v-if="props.img"
+    :key="item._key + 'img'"
+    class="flex-none"
+    :img-url="item.imgUrl"
+    :class-img="props.classImg"
+    :class-img-tag="props.classImgTag"
+    :img-mode="props.imgMode"
+  />
+  <SelectItemLabel
+    v-if="props.type === 'display'"
+    :key="item._key + 'label'"
+    :item="item"
+    overflow
+    :disabled="props.disabled"
+    :readonly="props.readonly"
+  />
+  <SelectItemLabel v-if="props.type === 'item'" :key="item._key + 'label'" :item="item" overflow />
+  <div :key="item._key + 'state'" class="flex items-center gap-1 ml-auto">
+    <div v-if="props.item.deleted" class="text-error text-[0.7em] leading-[1em] p-1 mr-1 border border-error rounded">
+      {{ labels.deleted }}
+    </div>
+    <div v-if="props.item.hidden" class="text-error text-[0.7em] leading-[1em] p-1 mr-1 border border-error rounded">
+      {{ labels.hidden }}
+    </div>
+  </div>
+  <div v-if="item.appendIcon" :key="item._key + 'appendIcon'" class="mr-1">
+    <i :class="item.appendIcon"></i>
+  </div>
+  <div v-if="props.type === 'item'" class="text-accent1 text-[1em] leading-[1em] w-5 ml-auto text-center">
+    <i v-if="props.item.id === value" class="fa-solid fa-check"></i>
+  </div>
+</template>

package/dist/runtime/components/form/_select/item-container.vue.d.ts

@@ -0,0 +1,19 @@
+import type { ClassType } from '../../../utils/class-style.js';
+import type { SelectItem } from '../../../utils/select-item.js';
+type Props = {
+    item: SelectItem<string | number> & {
+        _key: string;
+    };
+    value?: string | number | null;
+    img?: boolean;
+    activated: boolean;
+    classImg?: ClassType;
+    classImgTag?: ClassType;
+    imgMode?: 'cover' | 'contain';
+    disabled?: boolean;
+    readonly?: boolean;
+    type: 'display' | 'item';
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/_select/item-label.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { twMerge } from "tailwind-merge";
+import { computed, useId } from "#imports";
+import { useHsMultiLang } from "../../../composables/use-hs-multi-lang";
+import { useHsPinia } from "../../../composables/use-pinia";
+const props = defineProps({
+  item: { type: Object, required: true },
+  overflow: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false }
+});
+const multiLang = useHsMultiLang(useHsPinia());
+const tx = multiLang.tx;
+const text = props.item.text || "";
+const uid = useId();
+const baseClass = computed(() => {
+  return [
+    twMerge(
+      props.overflow ? "whitespace-pre-line break-all" : "truncate",
+      props.disabled ? "text-gray-600 " : "",
+      !props.disabled && props.readonly ? "text-black" : ""
+    )
+  ];
+});
+</script>
+
+<template>
+  <div :key="uid + text" class="min-w-0 flex-1 text-[1rem]" :class="baseClass" :title="String(props.item.text)">
+    {{ tx(props.item.text) }}
+  </div>
+</template>

package/dist/runtime/components/form/_select/item-label.vue.d.ts

@@ -0,0 +1,13 @@
+import type { SelectItem } from '../../../utils/select-item.js';
+type Props = {
+    item: SelectItem<string | number>;
+    overflow?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    disabled: boolean;
+    readonly: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/_select/item-row.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { Theme, GetColorCode } from "../../../utils/theme";
+import { useHsPinia } from "../../../composables/use-pinia";
+import { useHsMultiLang } from "../../../composables/use-hs-multi-lang";
+import SelectItemContainer from "./item-container.vue";
+const props = defineProps({
+  list: { type: Array, required: true },
+  item: { type: Object, required: true },
+  index: { type: Number, required: true },
+  activeId: { type: null, required: true },
+  hasLabel: { type: Boolean, required: true },
+  img: { type: Boolean, required: false },
+  classImg: { type: [String, Object, Array], required: true },
+  classImgTag: { type: [String, Object, Array], required: true },
+  imgMode: { type: String, required: true },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:selectOpen", "value-change", "focus", "blur"]);
+const multiLang = useHsMultiLang(useHsPinia());
+const tx = multiLang.tx;
+const activeColorCode = GetColorCode(Theme.accent1);
+const groupLabel = tx(props.item.groupLabel ?? "");
+</script>
+
+<template>
+  <div class="w-full px-1">
+    <div
+      v-if="
+  props.item.groupId !== void 0 && (props.index === 0 || props.list[index - 1]?.groupId !== props.item.groupId)
+"
+      class="my-1 py-1 px-2 font-semibold bg-dark/5 border-dark/40 border"
+    >
+      {{ groupLabel }}
+    </div>
+    <div :class="[props.item.id !== null && props.hasLabel ? 'pl-2' : '']">
+      <div
+        :key="props.item.id"
+        class="HsSelectItem cursor-pointer flex items-center w-full p-2 rounded border mb-px"
+        :class="[
+  props.item.id === props.activeId ? ' border-accent1' : 'border-transparent'
+  // props.item.id !== null && props.hasLabel ? \'ml-2\' : \'\',
+]"
+        :style="`--color-bg: ${activeColorCode}10;`"
+        @click="emit('update:selectOpen', false)"
+      >
+        <SelectItemContainer
+          :item="props.item"
+          :value="props.activeId"
+          :img="props.img"
+          :activated="props.img"
+          :class-img="props.classImg"
+          :class-img-tag="props.classImgTag"
+          :img-mode="props.imgMode"
+          :disabled="props.disabled"
+          :readonly="props.readonly"
+          type="item"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/form/_select/item-row.vue.d.ts

@@ -0,0 +1,34 @@
+import type { ClassType } from '../../../utils/class-style.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<{
+        list: SelectItem<IdType>[];
+        item: SelectItem<IdType> & {
+            _key: string;
+        };
+        index: number;
+        activeId: IdType | null;
+        hasLabel: boolean;
+        img?: boolean;
+        classImg: ClassType;
+        classImgTag: ClassType;
+        imgMode: "cover" | "contain";
+        disabled?: boolean;
+        readonly?: boolean;
+    } & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "blur") => void) & ((evt: "focus") => void) & ((evt: "value-change", after: IdType | null, before: IdType | null) => void) & ((evt: "update:selectOpen", isOpen: boolean) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: ((evt: "blur") => void) & ((evt: "focus") => void) & ((evt: "value-change", after: IdType | null, before: IdType | null) => void) & ((evt: "update:selectOpen", isOpen: boolean) => 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];
+}) & {};

package/dist/runtime/components/form/btn-line-loading.vue

@@ -1,56 +1,37 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-// src\runtime\components\form\btn-line-loading.vue
-// ----------------------------------------------------------------------------
-// BtnLineLoading
-// BtnLineLoadingBtnLineLoading
------------------------------------------------------------------------------ */
-
-// [ NUXT ]
-import { computed } from "#imports";
-// [ tailwind ]
-import { twMerge } from "tailwind-merge";
-// [ utils ]
-import { type ClassType, ClassTypeToString } from "../../utils/class-style";
-// ----------------------------------------------------------------------------
-// ----------------------------------------------------------------------------
-interface Props {
-  class?: ClassType;
-  show: boolean;
-  height?: number | undefined;
-  speed?: number | undefined;
-}
-const props = withDefaults(defineProps<Props>(), {
-  height: 5,
-  speed: 1000,
-  class: "",
-});
-// ----------------------------------------------------------------------------
-const baseClass = [
-  //
-  "absolute",
-  "inset-0",
-  "bg-slate-600/[0.6]",
-  "flex",
-  "justify-center",
-  "items-center",
-  "transition-opacity",
-];
-const classStyle = computed(() => {
-  return twMerge(baseClass, ClassTypeToString(props.class));
-});
-// ----------------------------------------------------------------------------
-</script>
-
-<template>
-  <div class="BtnLineLoading" :class="[classStyle, { show: props.show }]">
-    <span
-      class="loader"
-      :style="`--BtnLineLoading-height:${props.height}px;--BtnLineLoading-speed:${props.speed}ms`"
-    />
-  </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 },
+  height: { type: null, required: false, default: 5 },
+  speed: { type: null, required: false, default: 1e3 }
+});
+const baseClass = [
+  //
+  "absolute",
+  "inset-0",
+  "bg-slate-600/[0.6]",
+  "flex",
+  "justify-center",
+  "items-center",
+  "transition-opacity"
+];
+const classStyle = computed(() => {
+  return twMerge(baseClass, ClassTypeToString(props.class));
+});
+</script>
+
+<template>
+  <div class="BtnLineLoading" :class="[classStyle, { show: props.show }]">
+    <span
+      class="loader"
+      :style="`--BtnLineLoading-height:${props.height}px;--BtnLineLoading-speed:${props.speed}ms`"
+    />
+  </div>
+</template>
+
 <style scoped>
 .BtnLineLoading {
   opacity: 0;
@@ -84,31 +65,31 @@ const classStyle = computed(() => {
   box-sizing: border-box;
   animation: BtnLineLoading-anime var(--BtnLineLoading-speed) linear infinite;
 }
-</style>
-
-<style lang="scss">
-@keyframes BtnLineLoading-anime {
-  0% {
-    opacity: 0;
-    left: 0;
-    transform: translateX(-200%);
-  }
-  20% {
-    opacity: 1;
-    left: 0;
-    transform: translateX(-200%);
-  }
-  80% {
-    opacity: 1;
-    left: 100%;
-    left: 0;
-    transform: translateX(200%);
-  }
-  100% {
-    left: 100%;
-    left: 0;
-    transform: translateX(200%);
-    opacity: 0;
-  }
-}
-</style>
+</style>
+
+<style>
+@keyframes BtnLineLoading-anime {
+  0% {
+    opacity: 0;
+    left: 0;
+    transform: translateX(-200%);
+  }
+  20% {
+    opacity: 1;
+    left: 0;
+    transform: translateX(-200%);
+  }
+  80% {
+    opacity: 1;
+    left: 100%;
+    left: 0;
+    transform: translateX(200%);
+  }
+  100% {
+    left: 100%;
+    left: 0;
+    transform: translateX(200%);
+    opacity: 0;
+  }
+}
+</style>

package/dist/runtime/components/form/btn-line-loading.vue.d.ts

@@ -0,0 +1,14 @@
+import { type ClassType } from "../../utils/class-style.js";
+interface Props {
+    class?: ClassType;
+    show: boolean;
+    height?: number | undefined;
+    speed?: number | undefined;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    class: ClassType;
+    height: number;
+    speed: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;