nuxt-hs-ui 2.12.7 → 4.0.0

package/dist/runtime/components/layout/card.vue

@@ -1,42 +1,27 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-// src\runtime\components\layout\card.vue
-// ----------------------------------------------------------------------------
-// Card
-// CardCard
------------------------------------------------------------------------------ */
-
-// [ NUXT ]
-import { computed } from "#imports";
-// [ tailwind ]
-import { twMerge } from "tailwind-merge";
-// [ utils ]
-import { type ClassType, ClassTypeToString } from "../../utils/class-style";
-// ----------------------------------------------------------------------------
-// ----------------------------------------------------------------------------
-interface Props {
-  class?: ClassType;
-}
-const props = withDefaults(defineProps<Props>(), {
-  class: "",
-});
-
-const baseClass = [
-  //
-  "relative",
-  "flex",
-  "flex-col",
-  "border-[2px]",
-  "border-white",
-  "shadow-[0px_0px_4px_0px_#000]",
-];
-const classStyle = computed(() => {
-  return twMerge(baseClass, ClassTypeToString(props.class));
-});
-</script>
-
-<template>
-  <div :class="classStyle">
-    <slot />
-  </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: "" }
+});
+const emit = defineEmits(["ref"]);
+const baseClass = [
+  //
+  "relative",
+  "flex",
+  "flex-col",
+  "border-[2px]",
+  "border-white",
+  "shadow-[0px_0px_4px_0px_#000]"
+];
+const classStyle = computed(() => {
+  return twMerge(baseClass, ClassTypeToString(props.class));
+});
+</script>
+
+<template>
+  <div :ref="(e) => emit('ref', e)" :class="classStyle">
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/layout/card.vue.d.ts

@@ -0,0 +1,23 @@
+import { type ClassType } from '../../utils/class-style.js';
+interface Props {
+    class?: ClassType;
+}
+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, {
+    ref: (element: HTMLElement) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onRef?: ((element: HTMLElement) => any) | undefined;
+}>, {
+    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/layout/container.vue

@@ -1,40 +1,25 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-// src\runtime\components\layout\container.vue
-// ----------------------------------------------------------------------------
-// Container
-// ContainerContainer
------------------------------------------------------------------------------ */
-
-// [ NUXT ]
-import { computed } from "#imports";
-// [ tailwind ]
-import { twMerge } from "tailwind-merge";
-// [ utils ]
-import { type ClassType, ClassTypeToString } from "../../utils/class-style";
-// ----------------------------------------------------------------------------
-// ----------------------------------------------------------------------------
-interface Props {
-  class?: ClassType;
-  fluid?: boolean;
-}
-const props = withDefaults(defineProps<Props>(), {
-  class: "",
-  fluid: false,
-});
-const classStyle = computed(() => {
-  return twMerge(
-    "mx-auto px-2",
-    props.fluid
-      ? "w-full"
-      : "w-full xs:max-w-[600px] md:max-w-[700px]  lg:max-w-[950px] xl:max-w-[1200px] 2xl:max-w-[1450px]",
-    ClassTypeToString(props.class)
-  );
-});
-</script>
-
-<template>
-  <div :class="classStyle">
-    <slot />
-  </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: "" },
+  fluid: { type: Boolean, required: false, default: false },
+  brakePoint: { type: Array, required: false, default: () => [
+    "xs:max-w-[600px]",
+    "md:max-w-[700px]",
+    "lg:max-w-[950px]",
+    "xl:max-w-[1200px]",
+    "2xl:max-w-[1450px]"
+  ] }
+});
+const classStyle = computed(() => {
+  return twMerge("mx-auto px-2 w-full", props.fluid ? "" : props.brakePoint, ClassTypeToString(props.class));
+});
+</script>
+
+<template>
+  <div :class="classStyle">
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/layout/container.vue.d.ts

@@ -0,0 +1,35 @@
+import { type ClassType } from '../../utils/class-style.js';
+interface Props {
+    class?: ClassType;
+    fluid?: boolean;
+    /**
+     * default
+     * ```javascript
+     * const brakePoint= [
+     *   'xs:max-w-[600px]',
+     *   'md:max-w-[700px]',
+     *   'lg:max-w-[950px]',
+     *   'xl:max-w-[1200px]',
+     *   '2xl:max-w-[1450px]',
+     * ]
+     * ```
+     */
+    brakePoint?: 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<{}>, {
+    class: ClassType;
+    fluid: boolean;
+    brakePoint: string[];
+}, {}, {}, {}, 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/layout/divider-h.vue

@@ -1,52 +1,32 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-// src\runtime\components\layout\divider-h.vue
-// ----------------------------------------------------------------------------
-// DividerH
-// DividerHDividerH
------------------------------------------------------------------------------ */
-// [ tailwind ]
-import { twMerge } from "tailwind-merge";
-// [ NUXT ]
-import { computed } from "#imports";
-// [ utils ]
-import { type ClassType, ClassTypeToString } from "../../utils/class-style";
-import { Theme, GetGolorCode } from "../../utils/theme";
-// ----------------------------------------------------------------------------
-
-// [ Props ]
-interface Props {
-  theme?: Theme;
-  size?: number;
-  span1?: number;
-  span2?: number;
-  class?: ClassType;
-}
-const props = withDefaults(defineProps<Props>(), {
-  theme: Theme.main2,
-  size: 2,
-  span1: 4,
-  span2: 8,
-  class: "",
-});
-
-const style = computed(() => {
-  return [
-    `--main-color:${GetGolorCode(props.theme)};`,
-    `--size:${props.size}px;`,
-    `--span1:${props.span1}px;`,
-    `--span2:${props.span2}px;`,
-  ];
-});
-const classStyle = computed(() => {
-  return twMerge("h-[var(--size)] w-full", ClassTypeToString(props.class));
-});
-</script>
-
-<template>
-  <div class="divider" :class="classStyle" :style="style"></div>
-</template>
-
+<script setup>
+import { twMerge } from "tailwind-merge";
+import { computed } from "#imports";
+import { ClassTypeToString } from "../../utils/class-style";
+import { Theme, GetColorCode } from "../../utils/theme";
+const props = defineProps({
+  theme: { type: null, required: false, default: Theme.main0 },
+  size: { type: Number, required: false, default: 2 },
+  span1: { type: Number, required: false, default: 4 },
+  span2: { type: Number, required: false, default: 8 },
+  class: { type: [String, Object, Array], required: false, default: "" }
+});
+const style = computed(() => {
+  return [
+    `--main-color:${GetColorCode(props.theme)};`,
+    `--size:${props.size}px;`,
+    `--span1:${props.span1}px;`,
+    `--span2:${props.span2}px;`
+  ];
+});
+const classStyle = computed(() => {
+  return twMerge("h-[var(--size)] w-full", ClassTypeToString(props.class));
+});
+</script>
+
+<template>
+  <div class="divider" :class="classStyle" :style="style"></div>
+</template>
+
 <style scoped>
 .divider {
   background-image: linear-gradient(to right, var(--main-color), var(--main-color) var(--span1), transparent var(--span1), transparent var(--span2));
@@ -54,4 +34,4 @@ const classStyle = computed(() => {
   background-repeat: repeat-x;
   background-position: left bottom;
 }
-</style>
+</style>

package/dist/runtime/components/layout/divider-h.vue.d.ts

@@ -0,0 +1,18 @@
+import { type ClassType } from '../../utils/class-style.js';
+import { type ThemeColor } from '../../utils/theme.js';
+interface Props {
+    theme?: ThemeColor;
+    size?: number;
+    span1?: number;
+    span2?: number;
+    class?: ClassType;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: number;
+    theme: ThemeColor;
+    class: ClassType;
+    span1: number;
+    span2: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/misc/breadcrumb.vue

@@ -1,83 +1,49 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-// src\runtime\components\misc\breadcrumb.vue
-// ----------------------------------------------------------------------------
-// Breadcrumb
-// BreadcrumbBreadcrumb
------------------------------------------------------------------------------ */
-
-// [ tailwind ]
-import { twMerge } from "tailwind-merge";
-// [ NUXT ]
-import { computed } from "#imports";
-// [ utils ]
-import { type ClassType, ClassTypeToString } from "../../utils/class-style";
-
-import Card from "../layout/card.vue";
-import CardItem from "../layout/card-item.vue";
-import type { MultiLang } from "../../utils/multi-lang";
-import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
-// ----------------------------------------------------------------------------
-
-interface Props {
-  class?: ClassType;
-  links: { label: MultiLang; to?: string; icon?: string }[];
-  classLink?: ClassType;
-  classUnlink?: ClassType;
-}
-const props = withDefaults(defineProps<Props>(), {
-  class: "",
-  classLink: "",
-  classUnlink: "",
-});
-// ----------------------------------------------------------------------------
-const multiLang = useHsMultiLang();
-const tx = multiLang.tx;
-// ----------------------------------------------------------------------------
-
-const classStyle = computed(() => {
-  return twMerge(`w-full  min-w-0`, ClassTypeToString(props.class));
-});
-const classStyleLink = computed(() => {
-  return twMerge(`text-main1`, ClassTypeToString(props.classLink));
-});
-const classStyleUnlink = computed(() => {
-  return twMerge(`text-gray-600`, ClassTypeToString(props.classUnlink));
-});
-</script>
-
-<template>
-  <Card :class="classStyle">
-    <CardItem
-      class="px-1 py-1 sm:px-4 sm:py-1 min-w-0 h-full flex-c"
-      theme="back"
-      variant="body"
-    >
-      <div class="flex flex-wrap gap-[2px] sm:gap-[4px] max-w-full">
-        <template v-for="(item, index) in props.links" :key="index">
-          <div class="truncate min-w-0 w-full sm:w-auto">
-            <NuxtLink
-              v-if="item.to !== undefined"
-              :to="item.to"
-              :class="[classStyleLink, { hasBefore: index !== 0 }]"
-            >
-              <i v-if="item.icon" :class="item.icon"></i>
-              {{ tx(item.label) }}
-            </NuxtLink>
-            <span
-              v-else
-              :class="[classStyleUnlink, { hasBefore: index !== 0 }]"
-            >
-              <i v-if="item.icon" :class="item.icon"></i>
-              {{ tx(item.label) }}
-            </span>
-          </div>
-        </template>
-      </div>
-    </CardItem>
-  </Card>
-</template>
-
+<script setup>
+import { twMerge } from "tailwind-merge";
+import { computed } from "#imports";
+import { ClassTypeToString } from "../../utils/class-style";
+import Card from "../layout/card.vue";
+import CardItem from "../layout/card-item.vue";
+import { Theme } from "../../utils/theme";
+const props = defineProps({
+  class: { type: [String, Object, Array], required: false, default: "" },
+  links: { type: Array, required: true },
+  classLink: { type: [String, Object, Array], required: false, default: "" },
+  classUnlink: { type: [String, Object, Array], required: false, default: "" },
+  theme: { type: null, required: false, default: Theme.back1 }
+});
+const classStyle = computed(() => {
+  return twMerge(`w-full  min-w-0`, ClassTypeToString(props.class));
+});
+const classStyleLink = computed(() => {
+  return twMerge(`!text-link`, "relative", ClassTypeToString(props.classLink));
+});
+const classStyleUnlink = computed(() => {
+  return twMerge(`text-gray-600`, ClassTypeToString(props.classUnlink));
+});
+</script>
+
+<template>
+  <Card :class="classStyle">
+    <CardItem class="px-1 py-1 min-w-0 h-full" :theme="props.theme" variant="body">
+      <div class="flex flex-wrap gap-[2px] max-w-full relative items-center min-h-full">
+        <template v-for="(item, index) in props.links" :key="index">
+          <div class="truncate min-w-0 w-auto relative text-link">
+            <NuxtLink v-if="item.to !== void 0" :to="item.to" :class="[classStyleLink, { hasBefore: index !== 0 }]">
+              <i v-if="item.icon" :class="item.icon"></i>
+              {{ item.label }}
+            </NuxtLink>
+            <span v-else :class="[classStyleUnlink, { hasBefore: index !== 0 }]">
+              <i v-if="item.icon" :class="item.icon"></i>
+              {{ item.label }}
+            </span>
+          </div>
+        </template>
+      </div>
+    </CardItem>
+  </Card>
+</template>
+
 <style scoped>
 .hasBefore {
   padding-left: calc(1em + 4px);
@@ -95,18 +61,4 @@ const classStyleUnlink = computed(() => {
   justify-content: center;
   align-items: center;
 }
-
-.hov::before {
-  content: "";
-  position: absolute;
-  inset: auto auto 0 0;
-  width: 0;
-  height: 1px;
-  background-color: white;
-  transition: all 300ms ease;
-}
-
-.hov:hover::before {
-  width: 100%;
-}
-</style>
+</style>

package/dist/runtime/components/misc/breadcrumb.vue.d.ts

@@ -0,0 +1,22 @@
+import { type ClassType } from '../../utils/class-style.js';
+import type { MultiLang } from '../../utils/multi-lang.js';
+import { type ThemeColor } from '../../utils/theme.js';
+interface Props {
+    class?: ClassType;
+    links: {
+        label: MultiLang;
+        to?: string;
+        icon?: string;
+    }[];
+    classLink?: ClassType;
+    classUnlink?: ClassType;
+    theme?: ThemeColor;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    theme: ThemeColor;
+    class: ClassType;
+    classLink: ClassType;
+    classUnlink: ClassType;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;