nuxt-hs-ui 2.12.7 → 4.0.0

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/interactive/modal-bg.vue

@@ -1,82 +1,72 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-// src\runtime\components\interactive\modal-bg.vue
-// ----------------------------------------------------------------------------
-// ModalBg
-// ModalBgModalBg
------------------------------------------------------------------------------ */
-
-// [ tailwind ]
-import { twMerge } from "tailwind-merge";
-// [ NUXT ]
-import { computed } from "#imports";
-// [ utils ]
-import { type ClassType, ClassTypeToString } from "../../utils/class-style";
-// [ composables ]
-import { useHsModal } from "../../composables/use-hs-modal";
-// ----------------------------------------------------------------------------
-// [ com > lib > * ]
-// ----------------------------------------------------------------------------
-type Props = {
-  class?: ClassType;
-};
-const props = withDefaults(defineProps<Props>(), {
-  class: "",
-});
-
-const hsModal = useHsModal();
-
-const zIndex = computed(() => {
-  if (hsModal.state.activeList.length === 0) return -1;
-  return Math.max(...hsModal.state.activeList.map((row) => row.zIndex)) - 1;
-});
-
-const activeData = computed(() => {
-  const len = hsModal.state.activeList.length;
-  if (len === 0) return null;
-  return hsModal.state.activeList[len - 1];
-});
-
-const bg = computed(() => {
-  if (activeData.value === null) return "";
-  if (activeData.value.closeable) {
-    // 外枠で閉じれるモーダル
-    return "bg-slate-700/[0.6]";
-  }
-  return "bg-blue-800/[0.8]";
-});
-
-const isShow = computed(() => {
-  if (hsModal.state.activeList.length === 0) return false;
-  return true;
-});
-
-const classStyle = computed(() => {
-  return twMerge(
-    "transition-opacity",
-    "fixed",
-    "inset-0",
-    "transition-opacity",
-    bg.value,
-    // isShow.value ? 'pointer-events-auto' : 'pointer-events-none',
-    isShow.value ? "opacity-100" : "opacity-0",
-    ClassTypeToString(props.class)
-  );
-});
-
-const closeAll = () => {
-  hsModal.removeAll();
-};
-</script>
-
-<template>
-  <Teleport to="body">
-    <!--  -->
-    <div
-      class="ModalBg"
-      :class="classStyle"
-      :style="{ zIndex: zIndex }"
-      @click.stop="closeAll()"
-    />
-  </Teleport>
-</template>
+<script setup>
+import { twMerge } from "tailwind-merge";
+import { computed, useHead } from "#imports";
+import { ClassTypeToString } from "../../utils/class-style";
+import { useHsModal } from "../../composables/use-hs-modal";
+import { useHsPinia } from "../../composables/use-pinia";
+const props = defineProps({
+  class: { type: [String, Object, Array], required: false, default: "" },
+  target: { type: String, required: false, default: "body" }
+});
+const hsModal = useHsModal(useHsPinia());
+const zIndex = computed(() => {
+  if (hsModal.state.activeList.length === 0) return -1;
+  return Math.max(...hsModal.state.activeList.map((row) => row.zIndex)) - 1;
+});
+const zIndexUiModal = computed(() => {
+  if (hsModal.state.activeList.length === 0) return 1;
+  return Math.max(...hsModal.state.activeList.map((row) => row.zIndex)) + 2;
+});
+useHead({
+  style: [
+    {
+      key: "ui-z-modal",
+      textContent: computed(() => `:root{--ui-z-modal:${zIndexUiModal.value}}`)
+    }
+  ]
+});
+const activeData = computed(() => {
+  const len = hsModal.state.activeList.length;
+  if (len === 0) return null;
+  return hsModal.state.activeList[len - 1];
+});
+const bg = computed(() => {
+  if (!activeData.value) return "";
+  if (activeData.value.closeable) {
+    return "bg-slate-700/[0.6]";
+  }
+  return "bg-blue-800/[0.8]";
+});
+const isShow = computed(() => {
+  if (hsModal.state.activeList.length === 0) return false;
+  return true;
+});
+const classStyle = computed(() => {
+  return twMerge(
+    // 'transition-opacity',
+    "fixed",
+    "inset-0",
+    // 'transition-opacity',
+    bg.value,
+    // isShow.value ? 'pointer-events-auto' : 'pointer-events-none',
+    isShow.value ? "opacity-100" : "opacity-0",
+    ClassTypeToString(props.class)
+  );
+});
+const closeAll = () => {
+  hsModal.removeAll();
+};
+</script>
+
+<template>
+  <ClientOnly>
+    <Teleport :to="target">
+      <!--  -->
+      <div class="ModalBg" :class="classStyle" :style="{ zIndex }" @click.stop="closeAll()" />
+    </Teleport>
+  </ClientOnly>
+</template>
+
+<style>
+[data-reka-popper-content-wrapper]{z-index:var(--ui-z-modal)!important}
+</style>

package/dist/runtime/components/interactive/modal-bg.vue.d.ts

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

package/dist/runtime/components/interactive/modal.vue

@@ -1,172 +1,124 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-// src\runtime\components\interactive\modal.vue
-// ----------------------------------------------------------------------------
-// Modal
-// ModalModal
------------------------------------------------------------------------------ */
-
-// [ tailwind ]
-import { twMerge } from "tailwind-merge";
-// [ NUXT ]
-import { useId, computed, watch, onUnmounted, ref, useHead } from "#imports";
-// [ utils ]
-import { type ClassType, ClassTypeToString } from "../../utils/class-style";
-// [ composables ]
-import { useHsModal } from "../../composables/use-hs-modal";
-// ----------------------------------------------------------------------------
-// ----------------------------------------------------------------------------
-interface Props {
-  class?: ClassType;
-  classInner?: ClassType;
-  show: boolean;
-  mounted?: boolean;
-  zIndex?: number | undefined;
-  /** 背景クリックで閉じれる場合に背景色を切り替える機能
-   *   - closeイベントとセットで使う */
-  closeable?: boolean;
-}
-const props = withDefaults(defineProps<Props>(), {
-  class: "",
-  classInner: "",
-  mounted: true,
-  zIndex: undefined,
-  closeable: false,
-});
-
-type Emits = {
-  close: [];
-  "update:show": [bool: boolean];
-};
-const emit = defineEmits<Emits>();
-
-// ----------------------------------------------------------------------------
-const hsModal = useHsModal();
-hsModal.watch();
-const id = useId();
-
-// );
-
-// ----------------------------------------------------------------------------
-const zOrder = computed(() => {
-  if (props.zIndex !== undefined) return props.zIndex;
-  return hsModal.myzIndex(id).value;
-});
-if (props.show) {
-  if (props.zIndex !== undefined) {
-    hsModal.add(id, props.closeable, props.zIndex - 1);
-  } else {
-    hsModal.add(id, props.closeable);
-  }
-}
-useHead({
-  style: [
-    {
-      // flatpickr が毎回勝てるよう、都度上書き
-      children: `.flatpickr-calendar{z-index:${zOrder.value + 1} !important;}`,
-    },
-  ],
-});
-watch(
-  () => props.show,
-  (show) => {
-    if (show) {
-      if (props.zIndex !== undefined) {
-        hsModal.add(id, props.closeable, props.zIndex - 1);
-      } else {
-        hsModal.add(id, props.closeable);
-      }
-    } else {
-      hsModal.remove(id);
-    }
-  }
-);
-onUnmounted(() => {
-  hsModal.remove(id);
-});
-const mounted = computed(() => {
-  if (props.show) return true;
-  if (props.mounted) return true;
-  return false;
-});
-// 背景色は[VUiModalBg]が担当します
-
-const classStyle = computed(() => {
-  return twMerge(
-    [
-      //
-      "p-2",
-      "transition-opacity",
-      "fixed",
-      "inset-0",
-      "flex",
-      "justify-center",
-      props.show ? "pointer-events-all" : "pointer-events-none",
-    ],
-    ClassTypeToString(props.class)
-  );
-});
-
-const classInner = computed(() => {
-  return twMerge(
-    "w-full",
-    "h-full",
-    "p-0",
-    "flex",
-    "flex-col",
-    "items-center",
-    "overflow-auto",
-    "transition-opacity",
-    props.closeable ? "cursor-pointer" : "",
-    props.show ? "pointer-events-all" : "pointer-events-none",
-    // "bg-red-600",
-    ClassTypeToString(props.classInner)
-  );
-});
-const closeOnBackEvent = () => {
-  if (props.closeable) {
-    emit("update:show", false);
-    emit("close");
-  }
-};
-const down = ref(false);
-const downStop = () => {
-  // console.log("downStop", down.value);
-  if (down.value) {
-    down.value = false;
-    closeOnBackEvent();
-  }
-};
-</script>
-
-<template>
-  <ClientOnly>
-    <Teleport to="body">
-      <div
-        v-if="mounted"
-        :id="id"
-        class="Modal"
-        data-show=""
-        :class="classStyle"
-        :style="{ zIndex: zOrder, opacity: props.show ? 1 : 0 }"
-      >
-        <div
-          :class="classInner"
-          @mousedown.self="down = true"
-          @mouseup.self="downStop"
-          @mousedown.stop
-          @mouseup.stop
-          @click.stop=""
-        >
-          <slot />
-        </div>
-      </div>
-    </Teleport>
-  </ClientOnly>
-</template>
-
+<script setup>
+import { twMerge } from "tailwind-merge";
+import { useId, computed, watch, onUnmounted, ref } from "#imports";
+import { ClassTypeToString } from "../../utils/class-style";
+import { useHsModal } from "../../composables/use-hs-modal";
+import { useHsPinia } from "../../composables/use-pinia";
+const props = defineProps({
+  class: { type: [String, Object, Array], required: false, default: "" },
+  classInner: { type: [String, Object, Array], required: false, default: "" },
+  show: { type: Boolean, required: true },
+  mounted: { type: Boolean, required: false, default: true },
+  zIndex: { type: null, required: false, default: void 0 },
+  closeable: { type: Boolean, required: false, default: false },
+  target: { type: String, required: false, default: "body" }
+});
+const emit = defineEmits(["close", "update:show"]);
+const hsModal = useHsModal(useHsPinia());
+hsModal.watch();
+const id = useId();
+const zOrder = computed(() => {
+  if (props.zIndex !== void 0) return props.zIndex;
+  return hsModal.myzIndex(id).value;
+});
+if (props.show) {
+  if (props.zIndex !== void 0) {
+    hsModal.add(id, props.closeable, props.zIndex - 1);
+  } else {
+    hsModal.add(id, props.closeable);
+  }
+}
+watch(
+  () => props.show,
+  (show) => {
+    if (show) {
+      if (props.zIndex !== void 0) {
+        hsModal.add(id, props.closeable, props.zIndex - 1);
+      } else {
+        hsModal.add(id, props.closeable);
+      }
+    } else {
+      hsModal.remove(id);
+    }
+  }
+);
+onUnmounted(() => {
+  hsModal.remove(id);
+});
+const mounted = computed(() => {
+  if (props.show) return true;
+  if (props.mounted) return true;
+  return false;
+});
+const classStyle = computed(() => {
+  return twMerge(
+    [
+      //
+      "p-2",
+      "fixed",
+      "inset-0",
+      "flex",
+      "justify-center",
+      props.show ? "pointer-events-all" : "pointer-events-none"
+    ],
+    ClassTypeToString(props.class)
+  );
+});
+const classInner = computed(() => {
+  return twMerge(
+    "w-full",
+    "h-full",
+    "p-0",
+    "flex",
+    "flex-col",
+    "items-center",
+    "overflow-auto",
+    // 'transition-opacity',
+    props.closeable ? "cursor-pointer" : "",
+    props.show ? "pointer-events-all" : "pointer-events-none",
+    // "bg-red-600",
+    ClassTypeToString(props.classInner)
+  );
+});
+const closeOnBackEvent = () => {
+  if (props.closeable) {
+    emit("update:show", false);
+    emit("close");
+  }
+};
+const down = ref(false);
+const downStop = () => {
+  if (down.value) {
+    down.value = false;
+    closeOnBackEvent();
+  }
+};
+</script>
+
+<template>
+  <ClientOnly>
+    <Teleport :to="target">
+      <div
+        v-if="mounted"
+        :id="id"
+        class="Modal"
+        data-show=""
+        :class="classStyle"
+        :style="{ zIndex: zOrder, opacity: props.show ? 1 : 0 }"
+      >
+        <div :class="classInner" @mousedown.self="down = true" @mouseup.self="downStop">
+          <!-- @click.stop="" -->
+          <!-- @mousedown.stop @mouseup.stop -->
+
+          <slot />
+        </div>
+      </div>
+    </Teleport>
+  </ClientOnly>
+</template>
+
 <style>
-.Modal > * > * {
+.Modal > div > * {
   cursor: default;
 }
-</style>
+</style>

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

@@ -0,0 +1,38 @@
+import { type ClassType } from '../../utils/class-style.js';
+interface Props {
+    class?: ClassType;
+    classInner?: ClassType;
+    show: boolean;
+    mounted?: boolean;
+    zIndex?: number | undefined;
+    /** 背景クリックで閉じれる場合に背景色を切り替える機能
+     *   - closeイベントとセットで使う */
+    closeable?: boolean;
+    target?: string;
+}
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    "update:show": (bool: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:show"?: ((bool: boolean) => any) | undefined;
+}>, {
+    zIndex: number;
+    closeable: boolean;
+    class: ClassType;
+    classInner: ClassType;
+    mounted: boolean;
+    target: 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;
+    };
+};