nuxt-hs-ui 2.12.7 → 4.0.0

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

@@ -1,185 +1,142 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-// src\runtime\components\interactive\toast.vue
-// ----------------------------------------------------------------------------
-// Toast
-// ToastToast
------------------------------------------------------------------------------ */
-
-// [ vue ]
-import { computed, watch } from "vue";
-// [ vueuse ]
-import { watchArray } from "@vueuse/core";
-// ----------------------------------------------------------------------------
-// [ types ]
-import type { Message } from "../../types/toast";
-// [ utils ]
-import { Int } from "../../utils/number";
-// [ composables ]
-import { useHsToast } from "../../composables/use-hs-toast";
-import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
-// [ Components ]
-import Accordion from "../layout/accordion.vue";
-import Card from "../layout/card.vue";
-import CardItem from "../layout/card-item.vue";
-import Btn from "../form/btn.vue";
-// ----------------------------------------------------------------------------
-// [ nac-Stroe ]
-const toast = useHsToast();
-const state = toast.state;
-// ----------------------------------------------------------------------------
-const multiLang = useHsMultiLang();
-const tx = multiLang.tx;
-// ----------------------------------------------------------------------------
-// 要素を消し始めから完全に消すのにかかる時間（Accordionの動作時間）
-const hideSpan = 300;
-const showCount = computed(() => {
-  const list = state.pendingList.filter((row) => row.isShow);
-  return list.length;
-});
-// ----------------------------------------------------------------------------
-watch(
-  () => showCount.value,
-  () => {
-    setTimeout(() => {
-      if (showCount.value === 0 && state.pendingList.length !== 0) {
-        state.pendingList.length = 0;
-      }
-    }, hideSpan);
-  }
-);
-
-watchArray(state.pendingList, (newList, oldList, added, removed) => {
-  if (added.length === 0 && removed.length > 0) return;
-  // const keyMap = newList.map((row) => row.key);
-  newList.forEach((message) => {
-    if (message.hideAfter !== 0) {
-      setTimeout(() => {
-        if (message.isShow === false) return;
-        deleteMessage(message);
-      }, message.hideAfter);
-    }
-  });
-});
-
-const deleteMessage = (message: Message) => {
-  message.isShow = false;
-};
-const style = (message: Message) => {
-  let d = Int(message.hideAfter);
-  if (d < 0) d = 0;
-  return {
-    "animation-duration": d + "ms",
-  };
-};
-
-const closeBtnStyle = [
-  //
-  "bg-transparent",
-  "border-[1px]",
-  "border-white",
-  "rounded",
-  "min-h-0",
-  "w-[30px]",
-  "h-[30px]",
-  "p-0",
-  "flex-none",
-  "self-start",
-];
-
-// ----------------------------------------------------------------------------
-</script>
-
-<template>
-  <div class="HsUiToast-base" :style="{ 'z-index': state.zindex }">
-    <div
-      v-show="state.pendingList.length !== 0"
-      class="HsUiToast-container grid gap-1"
-    >
-      <template v-for="(message, index) in state.pendingList" :key="index">
-        <Accordion :span="hideSpan" :open="message.isShow">
-          <Card
-            class="HsUiToast"
-            :class="['drop-shadow-md', 'pointer-events-all']"
-            @click.stop=""
-            @mousedown.stop=""
-            @mouseup.stop=""
-          >
-            <template v-if="tx(message.title).value.length > 0">
-              <CardItem
-                variant="header"
-                class="items-center"
-                :class="[`theme-${message.theme}`]"
-              >
-                <div class="HsUiToast-title">
-                  {{ tx(message.title) }}
-                </div>
-                <Btn
-                  :class="closeBtnStyle"
-                  theme="white"
-                  type="outlined"
-                  @click="deleteMessage(message)"
-                >
-                  <i class="fas fa-times" />
-                </Btn>
-              </CardItem>
-              <CardItem
-                v-if="tx(message.message).value.length > 0"
-                :class="[`theme-${message.theme}`, ['items-overflow-visible']]"
-              >
-                <div class="HsUiToast-message">
-                  {{ tx(message.message) }}
-                </div>
-              </CardItem>
-              <CardItem
-                v-if="message.hideAfter != 0"
-                :class="[
-                  `theme-${message.theme}`,
-                  ['overflow-visible', 'p-0', 'min-h-[8px]'],
-                ]"
-              >
-                <div class="HsUiToast-bar-body" :class="[`${message.theme}`]">
-                  <div class="HsUiToast-bar" :style="style(message)" />
-                </div>
-              </CardItem>
-            </template>
-            <template v-else>
-              <CardItem
-                variant="header"
-                :class="[`theme-${message.theme}`, ['items-center']]"
-              >
-                <div class="HsUiToast-message">
-                  {{ tx(message.message) }}
-                </div>
-                <Btn
-                  :class="closeBtnStyle"
-                  theme="white"
-                  variant="outlined"
-                  @click="deleteMessage(message)"
-                >
-                  <i class="fas fa-times" />
-                </Btn>
-              </CardItem>
-              <CardItem
-                v-if="message.hideAfter != 0"
-                :class="[
-                  `theme-${message.theme}`,
-                  ['overflow-visible', 'p-0', 'min-h-[8px]'],
-                ]"
-              >
-                <div class="HsUiToast-bar-body" :class="[`${message.theme}`]">
-                  <div class="HsUiToast-bar" :style="style(message)" />
-                </div>
-              </CardItem>
-            </template>
-          </Card>
-        </Accordion>
-      </template>
-    </div>
-  </div>
-</template>
-
+<script setup>
+import { Int } from "../../utils/number";
+import { useHsToast } from "../../composables/use-hs-toast";
+import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
+import { useHsPinia } from "../../composables/use-pinia";
+import Card from "../layout/card.vue";
+import CardItem from "../layout/card-item.vue";
+import Btn from "../form/btn.vue";
+const toast = useHsToast(useHsPinia());
+const state = toast.state;
+const multiLang = useHsMultiLang(useHsPinia());
+const tx = multiLang.tx;
+const style = (message) => {
+  let d = Int(message.hideAfter);
+  if (d < 0) d = 0;
+  return {
+    "animation-duration": d + "ms"
+  };
+};
+const closeBtnStyle = [
+  //
+  "bg-transparent",
+  "border-[1px]",
+  "border-white",
+  "rounded",
+  "min-h-0",
+  "w-[30px]",
+  "h-[30px]",
+  "p-0",
+  "flex-none",
+  "self-start"
+];
+const removeMessage = (key) => {
+  state.pendingList = state.pendingList.filter((row) => {
+    return row.key !== key;
+  });
+};
+</script>
+
+<template>
+  <div class="HsUiToast-base" :style="{ 'z-index': state.zindex }">
+    <div v-show="state.pendingList.length !== 0" class="HsUiToast-container">
+      <TransitionGroup name="list" tag="div" class="flex flex-col-reverse items-end gap-1">
+        <div v-for="message in state.pendingList" :key="message.key" class="z-[1]">
+          <Card
+            class="HsUiToast"
+            :class="['drop-shadow-md', 'pointer-events-all']"
+            @click.stop=""
+            @mousedown.stop=""
+            @mouseup.stop=""
+          >
+            <template v-if="!!tx(message.title).value">
+              <CardItem variant="header" :class="[`theme-${message.theme}`, 'items-center', 'gap-1']">
+                <div class="HsUiToast-title">
+                  {{ tx(message.title) }}
+                </div>
+                <Btn :class="closeBtnStyle" theme="white" variant="outlined" @click="removeMessage(message.key)">
+                  <i class="fas fa-times" />
+                </Btn>
+              </CardItem>
+              <CardItem
+                v-if="!!tx(message.message).value"
+                :class="[`theme-${message.theme}`, ['items-overflow-visible']]"
+              >
+                <div class="HsUiToast-message">
+                  {{ tx(message.message) }}
+                </div>
+              </CardItem>
+              <CardItem
+                v-if="message.hideAfter != 0"
+                :class="[`theme-${message.theme}`, ['overflow-visible', 'p-0', 'min-h-[8px]']]"
+              >
+                <div class="HsUiToast-bar-body" :class="[`${message.theme}`]">
+                  <div class="HsUiToast-bar" :style="style(message)" />
+                </div>
+              </CardItem>
+            </template>
+            <template v-else>
+              <CardItem variant="header" :class="[`theme-${message.theme}`, 'items-center', 'gap-1']">
+                <div class="HsUiToast-message">
+                  {{ tx(message.message) }}
+                </div>
+                <Btn :class="closeBtnStyle" theme="white" variant="outlined" @click="removeMessage(message.key)">
+                  <i class="fas fa-times" />
+                </Btn>
+              </CardItem>
+              <CardItem
+                v-if="message.hideAfter != 0"
+                :class="[`theme-${message.theme}`, ['overflow-visible', 'p-0', 'min-h-[8px]']]"
+              >
+                <div class="HsUiToast-bar-body" :class="[`${message.theme}`]">
+                  <div class="HsUiToast-bar" :style="style(message)" />
+                </div>
+              </CardItem>
+            </template>
+          </Card>
+        </div>
+      </TransitionGroup>
+      <div
+        v-if="state.pendingList.length > 5"
+        class="absolute right-[-50px] bottom-[-50px] z-10 pt-[10px] pr-[55px] pb-[55px] pl-[10px]"
+      >
+        <div class="absolute inset-0 blur-sm bg-white/60"></div>
+        <Btn
+          theme="accent1"
+          variant="outlined"
+          size="xs"
+          class="bg-white mb-1 w-[80px] blur-none pointer-events-auto"
+          @click="state.pendingList.length = 0"
+        >
+          Clear
+        </Btn>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped>
+@charset "UTF-8";
+.list-move,
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+/* leave する項目をレイアウトフローから外すことで
+   アニメーションが正しく計算されるようになる */
+.list-leave-active {
+  position: absolute;
+  z-index: -1;
+  transform: translateX(400%);
+}
+
 .theme-success {
   background-color: #2bb60c !important;
   color: white !important;
@@ -218,47 +175,49 @@ const closeBtnStyle = [
   inset: 0 0 0 0;
   overflow: hidden;
   display: flex;
-  justify-content: center;
+  justify-content: end;
+  align-items: end;
 }
 
 .HsUiToast-container {
   pointer-events: none;
   position: relative;
-  overflow-x: hidden;
-  overflow-y: auto;
-  height: 100%;
-  height: 100svh;
   max-height: 100%;
+  max-height: 100vh;
+  max-height: 100dvh;
   max-height: 100svh;
   display: flex;
   flex-direction: column;
-  width: 800px;
-  padding: 10px 20px;
+  max-width: 800px;
+  padding: 10px;
 }
 @media screen and (min-width: 0px) and (max-width: 399.9px) {
   .HsUiToast-container {
-    width: 100%;
-    padding: 5px 5px;
+    max-width: 100%;
+    max-width: 100vh;
+    max-width: 100dvh;
+    max-width: 100svh;
   }
 }
 @media screen and (min-width: 400px) and (max-width: 599.9px) {
   .HsUiToast-container {
-    width: 380px;
+    max-width: 380px;
   }
 }
 @media screen and (min-width: 600px) and (max-width: 799.9px) {
   .HsUiToast-container {
-    width: 550px;
+    max-width: 550px;
   }
 }
 @media screen and (min-width: 800px) and (max-width: 1199.9px) {
   .HsUiToast-container {
-    width: 600px;
+    max-width: 600px;
   }
 }
 
 .HsUiToast {
   pointer-events: all;
+  min-width: 120px;
 }
 
 .HsUiToast-title {
@@ -324,16 +283,15 @@ const closeBtnStyle = [
   animation-timing-function: linear;
   animation-fill-mode: forwards;
 }
-</style>
-
-<style lang="scss">
-@keyframes HsUiToast-bar-key-frame {
-  0% {
-    width: 0%;
-  }
-
-  100% {
-    width: 100%;
-  }
-}
-</style>
+</style>
+
+<style>
+@keyframes HsUiToast-bar-key-frame {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+</style>

package/dist/runtime/components/interactive/toast.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/window-loader.vue

@@ -1,70 +1,50 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-// src\runtime\components\interactive\window-loader.vue
-// ----------------------------------------------------------------------------
-// WindowLoader
-// WindowLoaderWindowLoader
------------------------------------------------------------------------------ */
-
-/* ----------------------------------------------------------------------------
-const WindowLoader = useHsWindowLoader();
-WindowLoader.Show()
-WindowLoader.zindex=10000
------------------------------------------------------------------------------ */
-
-// [ vueuse ]
-import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
-
-// [ NUXT ]
-import { ref, watch } from "#imports";
-// [ composables ]
-import { useHsWindowLoader } from "../../composables/use-hs-window-loader";
-// ----------------------------------------------------------------------------
-const WindowLoader = useHsWindowLoader();
-// ----------------------------------------------------------------------------
-// [ focusTrap ]
-const focusTargetElm = ref<HTMLElement | null>(null);
-const { activate, deactivate } = useFocusTrap(focusTargetElm);
-watch(
-  () => WindowLoader.state.show,
-  (show) => {
-    if (show) {
-      activate();
-    } else {
-      deactivate();
-    }
-  }
-);
-// ----------------------------------------------------------------------------
-</script>
-
-<template>
-  <div
-    ref="focusTargetElm"
-    class="HsUiWindowLoader"
-    :class="{ show: WindowLoader.state.show }"
-    :style="{ 'z-index': WindowLoader.state.zindex }"
-  >
-    <!--  -->
-    <!--  -->
-    <div class="HsUiWindowLoader-body">
-      <div class="sk-cube-grid">
-        <div class="sk-cube sk-cube1" />
-        <div class="sk-cube sk-cube2" />
-        <div class="sk-cube sk-cube3" />
-        <div class="sk-cube sk-cube4" />
-        <div class="sk-cube sk-cube5" />
-        <div class="sk-cube sk-cube6" />
-        <div class="sk-cube sk-cube7" />
-        <div class="sk-cube sk-cube8" />
-        <div class="sk-cube sk-cube9" />
-      </div>
-      <div class="HsUiWindowLoader-text">Please wait...</div>
-      <input type="checkbox" class="dummy" />
-    </div>
-  </div>
-</template>
-
+<script setup>
+import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
+import { ref, watch } from "#imports";
+import { useHsWindowLoader } from "../../composables/use-hs-window-loader";
+import { useHsPinia } from "../../composables/use-pinia";
+const WindowLoader = useHsWindowLoader(useHsPinia());
+const focusTargetElm = ref(null);
+const { activate, deactivate } = useFocusTrap(focusTargetElm);
+watch(
+  () => WindowLoader.state.show,
+  (show) => {
+    if (show) {
+      activate();
+    } else {
+      deactivate();
+    }
+  }
+);
+</script>
+
+<template>
+  <div
+    ref="focusTargetElm"
+    class="HsUiWindowLoader"
+    :class="{ show: WindowLoader.state.show }"
+    :style="{ 'z-index': WindowLoader.state.zindex }"
+  >
+    <!--  -->
+    <!--  -->
+    <div class="HsUiWindowLoader-body">
+      <div class="sk-cube-grid">
+        <div class="sk-cube sk-cube1" />
+        <div class="sk-cube sk-cube2" />
+        <div class="sk-cube sk-cube3" />
+        <div class="sk-cube sk-cube4" />
+        <div class="sk-cube sk-cube5" />
+        <div class="sk-cube sk-cube6" />
+        <div class="sk-cube sk-cube7" />
+        <div class="sk-cube sk-cube8" />
+        <div class="sk-cube sk-cube9" />
+      </div>
+      <div class="HsUiWindowLoader-text">Please wait...</div>
+      <input type="checkbox" class="dummy" />
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .dummy {
   opacity: 0;
@@ -169,20 +149,17 @@ watch(
   -webkit-animation-delay: 0.2s;
   animation-delay: 0.2s;
 }
-</style>
-
-<style lang="scss">
-@keyframes HsUiWindowLoader-anime {
-  0%,
-  70%,
-  100% {
-    -webkit-transform: scale3D(1, 1, 1);
-    transform: scale3D(1, 1, 1);
-  }
-
-  35% {
-    -webkit-transform: scale3D(0, 0, 1);
-    transform: scale3D(0, 0, 1);
-  }
-}
-</style>
+</style>
+
+<style>
+@keyframes HsUiWindowLoader-anime {
+  0%, 70%, 100% {
+    -webkit-transform: scale3D(1, 1, 1);
+    transform: scale3D(1, 1, 1);
+  }
+  35% {
+    -webkit-transform: scale3D(0, 0, 1);
+    transform: scale3D(0, 0, 1);
+  }
+}
+</style>

package/dist/runtime/components/interactive/window-loader.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/layout/accordion-down.vue

@@ -0,0 +1,72 @@
+<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 emit = defineEmits(["closed"]);
+const innerHidden = ref(!props.open);
+watch(
+  () => props.open,
+  async () => {
+    if (props.open) {
+      innerHidden.value = false;
+    } else {
+      await nextTick();
+      setTimeout(() => {
+        if (props.open) {
+          innerHidden.value = false;
+        } else {
+          innerHidden.value = true;
+          emit("closed");
+        }
+      }, props.span);
+    }
+  }
+);
+const classStyle = computed(() => {
+  return twMerge([props.open ? "open" : ""], ClassTypeToString(props.class));
+});
+</script>
+
+<template>
+  <div
+    v-if="!innerHidden"
+    class="Accordion"
+    :class="[props.open ? 'open' : '', classStyle]"
+    :style="`--hsui-accordion-span:${props.span}ms`"
+    :inert="!props.open"
+  >
+    <div class="Accordion__inner" :class="{ hidden: innerHidden }">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.Accordion {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.Accordion__inner {
+  transform-origin: bottom;
+  transition: transform var(--hsui-accordion-span) ease, opacity var(--hsui-accordion-span) ease;
+  transform: scaleY(0);
+  opacity: 0;
+  will-change: transform, opacity;
+}
+.Accordion__inner.hidden {
+  display: none;
+}
+
+.Accordion.open .Accordion__inner {
+  transform: scaleY(1);
+  opacity: 1;
+  display: block;
+}
+</style>