nuxt-hs-ui 2.12.7 → 4.0.0

package/dist/runtime/components/layout/accordion-down.vue.d.ts

@@ -0,0 +1,26 @@
+import { type ClassType } from '../../utils/class-style.js';
+type Props = {
+    class?: ClassType;
+    open: boolean;
+    span?: number;
+};
+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, {
+    closed: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onClosed?: (() => any) | undefined;
+}>, {
+    class: ClassType;
+    span: number;
+}, {}, {}, {}, 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/accordion.vue

@@ -1,86 +1,55 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-// src\runtime\components\layout\accordion.vue
-// ----------------------------------------------------------------------------
-// Accordion
-// AccordionAccordion
------------------------------------------------------------------------------ */
-
-// [ NUXT ]
-import { computed, ref, watch, nextTick } from "#imports";
-// [ tailwind ]
-import { twMerge } from "tailwind-merge";
-// [ utils ]
-import { type ClassType, ClassTypeToString } from "../../utils/class-style";
-// ----------------------------------------------------------------------------
-// ----------------------------------------------------------------------------
-// [ Props ]
-type Props = {
-  class?: ClassType;
-  open: boolean;
-  span?: number;
-};
-const props = withDefaults(defineProps<Props>(), {
-  class: "",
-  span: 300,
-});
-
-const innerHidden = ref(!props.open);
-watch(
-  () => props.open,
-  (v) => {
-    //
-    if (v) {
-      setTimeout(() => {
-        if (props.open) {
-          innerHidden.value = !v;
-        }
-      }, props.span);
-    } else {
-      nextTick(() => {
-        innerHidden.value = !v;
-      });
-    }
-  }
-);
-
-const baseClass = [
-  //
-  "w-full",
-];
-
-const classStyle = computed(() => {
-  return twMerge(baseClass, ClassTypeToString(props.class));
-});
-const classOverflow = [
-  //
-  "overflow-y-hidden",
-];
-const overflowClass = computed(() => {
-  if (innerHidden.value) return classOverflow;
-  return "";
-});
-// ----------------------------------------------------------------------------
-</script>
-
-<template>
-  <div
-    class="Accordion"
-    :class="[{ open: open }, classStyle]"
-    :style="`--hsui-accordion-span:${props.span}ms`"
-  >
-    <!-- :aria-hidden="!props.open" -->
-    <div :class="overflowClass"><slot /></div>
-  </div>
-</template>
-
+<script setup>
+import { computed, ref, watch, nextTick } from "#imports";
+import { twMerge } from "tailwind-merge";
+import { ClassTypeToString } from "../../utils/class-style";
+const props = defineProps({
+  class: { type: [String, Object, Array], required: false, default: "" },
+  open: { type: Boolean, required: true },
+  span: { type: Number, required: false, default: 300 }
+});
+const innerHidden = ref(!props.open);
+watch(
+  () => props.open,
+  (v) => {
+    if (v) {
+      setTimeout(() => {
+        if (props.open) {
+          innerHidden.value = !v;
+        }
+      }, props.span);
+    } else {
+      nextTick(() => {
+        innerHidden.value = !v;
+      });
+    }
+  }
+);
+const classStyle = computed(() => {
+  return twMerge([props.open ? "open" : ""], ClassTypeToString(props.class));
+});
+const overflowClass = computed(() => {
+  return [innerHidden.value ? "overflow-y-hidden" : ""];
+});
+</script>
+
+<template>
+  <div
+    class="Accordion"
+    :class="classStyle"
+    :style="`--hsui-accordion-span:${props.span}ms`"
+    :inert="!props.open"
+  >
+    <div :class="overflowClass" class="overflow-y-hidden"><slot /></div>
+  </div>
+</template>
+
 <style scoped>
 .Accordion {
   display: grid;
   grid-template-rows: 0fr;
-  transition: grid-template-rows var(--hsui-accordion-span);
+  transition: grid-template-rows var(--hsui-accordion-span) ease-in-out;
 }
 .Accordion.open {
   grid-template-rows: 1fr;
 }
-</style>
+</style>

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

@@ -0,0 +1,22 @@
+import { type ClassType } from '../../utils/class-style.js';
+type Props = {
+    class?: ClassType;
+    open: boolean;
+    span?: number;
+};
+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;
+    span: number;
+}, {}, {}, {}, 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/aspect-box.vue

@@ -1,60 +1,31 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-// src\runtime\components\layout\aspect-box.vue
-// ----------------------------------------------------------------------------
-// AspectBox
-// AspectBoxAspectBox
------------------------------------------------------------------------------ */
-// [ tailwind ]
-import { twMerge } from "tailwind-merge";
-// [ NUXT ]
-import { computed } from "#imports";
-// [ utils ]
-import { type ClassType, ClassTypeToString } from "../../utils/class-style";
-import { Int } from "../../utils/number";
-// ----------------------------------------------------------------------------
-// ----------------------------------------------------------------------------
-type Props = {
-  class?: ClassType;
-  /**
-   * Aspect ratio
-   * - Example:
-   *   - 1:1
-   *   - 3:2 <- Default
-   *   - 4:3
-   *   - 16:9
-   */
-  rate?: string;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  class: "",
-  rate: "3:2",
-});
-const aspectRate = computed(() => {
-  const left = Int(props.rate.replace(/^(\d*):(\d*)$/, "$1"));
-  const right = Int(props.rate.replace(/^(\d*):(\d*)$/, "$2"));
-  if (left === 0 || right === 0) return "100";
-  return ((right / left) * 100).toFixed(3);
-});
-
-const classStyle = computed(() => {
-  return twMerge(`relative block`, ClassTypeToString(props.class));
-});
-</script>
-
-<template>
-  <div
-    class="UiAspectContainer"
-    :class="classStyle"
-    :style="` --aspect-rate: ${aspectRate}%;`"
-  >
-    <div>
-      <slot />
-    </div>
-  </div>
-</template>
-
+<script setup>
+import { twMerge } from "tailwind-merge";
+import { computed } from "#imports";
+import { ClassTypeToString } from "../../utils/class-style";
+import { Int } from "../../utils/number";
+const props = defineProps({
+  class: { type: [String, Object, Array], required: false, default: "" },
+  rate: { type: String, required: false, default: "3:2" }
+});
+const aspectRate = computed(() => {
+  const left = Int(props.rate.replace(/^(\d*):(\d*)$/, "$1"));
+  const right = Int(props.rate.replace(/^(\d*):(\d*)$/, "$2"));
+  if (left === 0 || right === 0) return "100";
+  return (right / left * 100).toFixed(3);
+});
+const classStyle = computed(() => {
+  return twMerge(`relative block`, ClassTypeToString(props.class));
+});
+</script>
+
+<template>
+  <div class="UiAspectContainer" :class="classStyle" :style="` --aspect-rate: ${aspectRate}%;`">
+    <div>
+      <slot />
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .UiAspectContainer {
   --aspect-rate: 66.66%;
@@ -68,4 +39,4 @@ const classStyle = computed(() => {
   position: absolute;
   inset: 0 0 0 0;
 }
-</style>
+</style>

package/dist/runtime/components/layout/aspect-box.vue.d.ts

@@ -0,0 +1,29 @@
+import { type ClassType } from '../../utils/class-style.js';
+type Props = {
+    class?: ClassType;
+    /**
+     * Aspect ratio
+     * - Example:
+     *   - 1:1
+     *   - 3:2 <- Default
+     *   - 4:3
+     *   - 16:9
+     */
+    rate?: 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;
+    rate: 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/card-item.vue

@@ -1,193 +1,148 @@
-<script lang="ts">
-/* ----------------------------------------------------------------------------
-// src\runtime\components\layout\card-item.vue
-// ----------------------------------------------------------------------------
-// CardItem
-// CardItemCardItem
------------------------------------------------------------------------------ */
-
-// [ utils ]
-import { tv } from "../../utils/tv";
-import { Theme } from "../../utils/theme";
-import { ObjectKeyToMap } from "../../utils/object";
-const cardItemTv = tv({
-  slots: {
-    base: [
-      //
-      `p-2`,
-      "bg-[var(--main-color)]",
-    ],
-    btn: [`border-[1px]`],
-  },
-  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",
-      },
-    },
-    size: {
-      xs: {
-        base: [`p-1`],
-        btn: ["text-sm  h-[30px] w-[30px]"],
-      },
-      s: {
-        base: [`p-1 ps-2`],
-        btn: ["text-sm h-[36px] w-[36px]"],
-      },
-      m: { btn: ["text-base h-[44px] w-[44px]"] },
-      l: { btn: ["text-base h-[48px] w-[48px]"] },
-      xl: { btn: ["text-lg  h-[60px] w-[60px]"] },
-    },
-    theme: ObjectKeyToMap(Theme, ""),
-  },
-  compoundVariants: [
-    ...Object.keys(Theme).map((theme) => {
-      return {
-        theme: theme,
-        class: {
-          base: [
-            ["back", "white", "warn"].includes(theme)
-              ? `text-black `
-              : "text-white ",
-          ],
-        },
-      } as any;
-    }),
-  ],
-});
-</script>
-
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-// src\runtime\components\layout\card-item.vue
-// ----------------------------------------------------------------------------
-// CardItem
-// CardItemCardItem
------------------------------------------------------------------------------ */
-
-// [ NUXT ]
-import { computed } from "#imports";
-// [ utils ]
-import { type ClassType, ClassTypeToString } from "../../utils/class-style";
-import { GetGolorCode } from "../../utils/theme";
-// [ Components ]
-import Btn from "../form/btn.vue";
-import Accordion from "./accordion.vue";
-// ----------------------------------------------------------------------------
-// ----------------------------------------------------------------------------
-interface Props {
-  class?: ClassType;
-  variant?: "header" | "body" | "footer";
-  size?: "xs" | "s" | "m" | "l" | "xl";
-  accordion?: boolean | undefined;
-  theme?: Theme | undefined;
-  scroll?: boolean;
-  open?: boolean | undefined;
-  cross?: boolean;
-  // btn?: "cross" | "accordion" | undefined;
-}
-const props = withDefaults(defineProps<Props>(), {
-  class: "",
-  variant: "body",
-  size: "m",
-  theme: undefined,
-  scroll: false,
-  accordion: undefined,
-  open: undefined,
-  btn: undefined,
-  cross: false,
-});
-type Emits = {
-  ref: [e: HTMLElement];
-  "update:open": [value: boolean];
-  "bg-click": [];
-  toggle: [];
-};
-const emit = defineEmits<Emits>();
-
-// ----------------------------------------------------------------------------
-const bgTheme = computed(() => {
-  if (props.theme !== undefined) return props.theme;
-  if (props.variant == "header") return Theme.main1;
-  if (props.variant == "footer") return Theme.main2;
-  return Theme.back;
-});
-const styleMain = computed(() => {
-  return [
-    //
-    `--main-color:${GetGolorCode(bgTheme.value)};`,
-  ];
-});
-const classTv = computed(() => {
-  return cardItemTv({
-    variant: props.variant,
-    scroll: props.scroll,
-    theme: bgTheme.value,
-    size: props.size,
-  });
-});
-const classTvBase = computed(() => {
-  return classTv.value.base({
-    class: ClassTypeToString(props.class),
-  });
-});
-const classTvBtn = computed(() => {
-  return classTv.value.btn();
-});
-</script>
-
-<template>
-  <template v-if="props.accordion === undefined">
-    <div
-      :ref="(e:any) => emit('ref', e)"
-      :style="styleMain"
-      :class="classTvBase"
-      @click.stop="emit('bg-click')"
-    >
-      <slot />
-      <Btn
-        v-if="props.open !== undefined || props.cross"
-        theme="white"
-        variant="outlined"
-        :class="classTvBtn"
-        :size="props.size"
-        @click.stop="
-          emit('update:open', !props.open);
-          emit('toggle');
-        "
-      >
-        <i
-          v-if="props.open !== undefined && !props.cross"
-          class="fa-solid fa-chevron-down"
-          :class="{ 'rotate-180': props.open }"
-        />
-        <i v-else-if="props.cross" class="fa-solid fa-xmark" />
-      </Btn>
-    </div>
-  </template>
-  <template v-else>
-    <Accordion :open="props.accordion">
-      <div
-        :ref="(e:any) => emit('ref', e)"
-        :style="styleMain"
-        :class="classTvBase"
-      >
-        <slot />
-      </div>
-    </Accordion>
-  </template>
-</template>
+<script>
+import { tv } from "../../utils/tv";
+import { Theme } from "../../utils/theme";
+import { ObjectKeyToMap } from "../../utils/object";
+const cardItemTv = tv({
+  slots: {
+    base: [
+      //
+      `p-2 relative`,
+      "bg-[var(--main-color)]"
+    ],
+    btn: [`border-[1px]`]
+  },
+  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"
+      }
+    },
+    size: {
+      xs: {
+        base: [`p-1`],
+        btn: ["text-sm  h-[30px] w-[30px]"]
+      },
+      s: {
+        base: [`p-1 ps-2`],
+        btn: ["text-sm h-[36px] w-[36px]"]
+      },
+      m: { btn: ["text-base h-[44px] w-[44px]"] },
+      l: { btn: ["text-base h-[48px] w-[48px]"] },
+      xl: { btn: ["text-lg  h-[60px] w-[60px]"] }
+    },
+    theme: ObjectKeyToMap(Theme, "")
+  },
+  compoundVariants: [
+    ...Object.keys(Theme).map((theme) => {
+      return {
+        theme,
+        class: {
+          base: [["back1", "white", "warn"].includes(theme) ? `` : "text-white "]
+        }
+      };
+    })
+  ]
+});
+</script>
+
+<script setup>
+import { computed, useId } from "#imports";
+import { ClassTypeToString } from "../../utils/class-style";
+import { GetColorCode } from "../../utils/theme";
+import { useHsFocus } from "../../composables/use-hs-focus";
+import { useHsPinia } from "../../composables/use-pinia";
+import Btn from "../form/btn.vue";
+import Accordion from "./accordion.vue";
+const props = defineProps({
+  class: { type: [String, Object, Array], required: false, default: "" },
+  variant: { type: String, required: false, default: "body" },
+  size: { type: String, required: false, default: "m" },
+  accordion: { type: Boolean, required: false, skipCheck: true, default: void 0 },
+  theme: { type: null, required: false, default: void 0 },
+  scroll: { type: Boolean, required: false, default: false },
+  open: { type: Boolean, required: false, skipCheck: true, default: void 0 },
+  cross: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["ref", "update:open", "toggle"]);
+const uid = useId();
+const hsFocus = useHsFocus(useHsPinia());
+const bgTheme = computed(() => {
+  if (props.theme !== void 0) return props.theme;
+  if (props.variant == "header") return Theme.main1;
+  if (props.variant == "footer") return Theme.main2;
+  return Theme.back1;
+});
+const styleMain = computed(() => {
+  return [
+    //
+    `--main-color:${GetColorCode(bgTheme.value)};`
+  ];
+});
+const classTv = computed(() => {
+  return cardItemTv({
+    variant: props.variant,
+    scroll: props.scroll,
+    theme: bgTheme.value,
+    size: props.size
+  });
+});
+const classTvBase = computed(() => {
+  return classTv.value.base({
+    class: ClassTypeToString(props.class)
+  });
+});
+const classTvBtn = computed(() => {
+  return classTv.value.btn();
+});
+const toggleOpen = () => {
+  if (hsFocus.state.id !== uid) {
+    hsFocus.state.id = uid;
+  }
+  emit("update:open", !props.open);
+  emit("toggle");
+};
+</script>
+
+<template>
+  <template v-if="props.accordion === void 0">
+    <div :ref="(e) => emit('ref', e)" :style="styleMain" :class="classTvBase">
+      <slot />
+      <Btn
+        v-if="props.open !== void 0 || props.cross"
+        theme="white"
+        variant="outlined"
+        :class="classTvBtn"
+        :size="props.size"
+        @click.stop="toggleOpen"
+      >
+        <i
+          v-if="props.open !== void 0 && !props.cross"
+          class="fa-solid fa-chevron-down"
+          :class="{ 'rotate-180': props.open }"
+        />
+        <i v-else-if="props.cross" class="fa-solid fa-xmark" />
+      </Btn>
+    </div>
+  </template>
+  <template v-else>
+    <Accordion :open="props.accordion">
+      <div :ref="(e) => emit('ref', e)" :style="styleMain" :class="classTvBase">
+        <slot />
+      </div>
+    </Accordion>
+  </template>
+</template>