nuxt-hs-ui 1.0.10 → 2.0.1

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

@@ -0,0 +1,82 @@
+<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>

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

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+// src\runtime\components\interactive\modal.vue
+// ----------------------------------------------------------------------------
+// Modal
+// ModalModal
+----------------------------------------------------------------------------- */
+
+// [ tailwind ]
+import { twMerge } from "tailwind-merge";
+// [ NUXT ]
+import { useId, computed, watch, onUnmounted } 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: "",
+  show: false,
+  mounted: true,
+  zIndex: undefined,
+  focusLock: false,
+  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) {
+  hsModal.add(id, props.closeable);
+}
+watch(
+  () => props.show,
+  (v) => {
+    if (v) {
+      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",
+    ClassTypeToString(props.classInner)
+  );
+});
+const closeOnBackEvent = () => {
+  if (props.closeable) {
+    emit("update:show", false);
+    emit("close");
+  }
+};
+</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 }"
+      >
+        <!-- :aria-hidden="!props.show" -->
+        <div :class="classInner" @click="closeOnBackEvent">
+          <slot />
+        </div>
+      </div>
+    </Teleport>
+  </ClientOnly>
+</template>
+
+<style>
+.Modal > * > * {
+  cursor: default;
+}
+</style>

package/dist/runtime/components/{hs-ui/toast/index.vue → interactive/toast.vue}

@@ -1,44 +1,35 @@
 <script setup lang="ts">
 /* ----------------------------------------------------------------------------
-src\runtime\components\hs-ui\toast\index.vue
+// src\runtime\components\interactive\toast.vue
 // ----------------------------------------------------------------------------
-HsUiToast
-HsUiToastHsUiToast
+// Toast
+// ToastToast
 ----------------------------------------------------------------------------- */
 
 // [ vue ]
-import { computed, watch } from 'vue';
-// [ NUXT ]
-import { useRuntimeConfig } from '#imports';
+import { computed, watch } from "vue";
 // [ vueuse ]
-import { watchArray } from '@vueuse/core';
+import { watchArray } from "@vueuse/core";
 // ----------------------------------------------------------------------------
-// [ tailwind ]
-import { GetPrefix, RemovePrefix } from '../../../lib/prefix';
+// [ 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";
 // ----------------------------------------------------------------------------
-// [ components > v-ui > toast > * ]
-import { type Message } from './index.type';
-// ----------------------------------------------------------------------------
-// [ src > runtime > lib > * ]
-import { Int } from '../../../lib/number';
-// [ store ]
-import { useHsUiToast } from '../../../composables/use-hs-ui-toast';
-import { useHsMultiLang } from '../../../composables/use-hs-multi-lang';
-// ----------------------------------------------------------------------------
-// ----------------------------------------------------------------------------
-const runtimeConfig: any = useRuntimeConfig();
-const prefix = GetPrefix(runtimeConfig);
-
-// const twMerge = extendTailwindMerge({
-//   prefix: prefix,
-// });
-
 // [ nac-Stroe ]
-const toast = useHsUiToast();
+const toast = useHsToast();
 const state = toast.state;
 // ----------------------------------------------------------------------------
-const storeMultiLang = useHsMultiLang();
-const MultiLangText = storeMultiLang.MultiLangText;
+const multiLang = useHsMultiLang();
+const tx = multiLang.tx;
 // ----------------------------------------------------------------------------
 // 要素を消し始めから完全に消すのにかかる時間（Accordionの動作時間）
 const hideSpan = 300;
@@ -78,136 +69,111 @@ const style = (message: Message) => {
   let d = Int(message.hideAfter);
   if (d < 0) d = 0;
   return {
-    'animation-duration': d + 'ms',
+    "animation-duration": d + "ms",
   };
 };
 
-const closeBtnStyle = RemovePrefix(prefix, [
+const closeBtnStyle = [
   //
-  'bg-transparent',
-  'tw-bg-transparent',
-  'border-[1px]',
-  'tw-border-[1px]',
-  'border-white',
-  'tw-border-white',
-  'rounded',
-  'tw-rounded',
-  'min-h-0',
-  'tw-min-h-0',
-  'w-[30px]',
-  'tw-w-[30px]',
-  'h-[30px]',
-  'tw-h-[30px]',
-  'p-0',
-  'tw-p-0',
-  'flex-none',
-  'tw-flex-none',
-  'self-start',
-  'tw-self-start',
-]);
+  "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"
-      :class="RemovePrefix(prefix, ['grid', 'tw-grid', 'gap-1', 'tw-gap-1'])"
+      v-show="state.pendingList.length !== 0"
+      class="HsUiToast-container grid gap-1"
     >
       <template v-for="(message, index) in state.pendingList" :key="index">
-        <HsUiAccordion :span="hideSpan" :open="message.isShow">
-          <HsUiCard
+        <Accordion :span="hideSpan" :open="message.isShow">
+          <Card
             class="HsUiToast"
-            :class="
-              RemovePrefix(prefix, [
-                'drop-shadow-md',
-                'tw-drop-shadow-md',
-                'pointer-events-all',
-                'tw-pointer-events-all',
-              ])
-            "
+            :class="['drop-shadow-md', 'pointer-events-all']"
             @click.stop=""
             @mousedown.stop=""
             @mouseup.stop=""
           >
-            <template v-if="MultiLangText(message.title).length > 0">
-              <HsUiCardItem
+            <template v-if="tx(message.title).value.length > 0">
+              <CardItem
                 variant="header"
                 class="items-center"
-                :class="[`theme-${message.theme}`, RemovePrefix(prefix, ['items-center', 'tw-items-center'])]"
+                :class="[`theme-${message.theme}`]"
               >
                 <div class="HsUiToast-title">
-                  {{ MultiLangText(message.title) }}
+                  {{ tx(message.title) }}
                 </div>
-                <HsFcBtn :class="closeBtnStyle" theme="white" type="outlined" @click="deleteMessage(message)">
+                <Btn
+                  :class="closeBtnStyle"
+                  theme="white"
+                  type="outlined"
+                  @click="deleteMessage(message)"
+                >
                   <i class="fas fa-times" />
-                </HsFcBtn>
-              </HsUiCardItem>
-              <HsUiCardItem
-                v-if="MultiLangText(message.message).length > 0"
-                :class="[
-                  `theme-${message.theme}`,
-                  RemovePrefix(prefix, ['items-overflow-visible', 'tw-overflow-visible']),
-                ]"
+                </Btn>
+              </CardItem>
+              <CardItem
+                v-if="tx(message.message).value.length > 0"
+                :class="[`theme-${message.theme}`, ['items-overflow-visible']]"
               >
                 <div class="HsUiToast-message">
-                  {{ MultiLangText(message.message) }}
+                  {{ tx(message.message) }}
                 </div>
-                <!-- </div> -->
-              </HsUiCardItem>
-              <HsUiCardItem
+              </CardItem>
+              <CardItem
                 v-if="message.hideAfter != 0"
                 :class="[
                   `theme-${message.theme}`,
-                  RemovePrefix(prefix, [
-                    'overflow-visible',
-                    'tw-overflow-visible',
-                    'p-0',
-                    'tw-p-0',
-                    'min-h-[8px]',
-                    'tw-min-h-[8px]',
-                  ]),
+                  ['overflow-visible', 'p-0', 'min-h-[8px]'],
                 ]"
               >
                 <div class="HsUiToast-bar-body" :class="[`${message.theme}`]">
                   <div class="HsUiToast-bar" :style="style(message)" />
                 </div>
-              </HsUiCardItem>
+              </CardItem>
             </template>
             <template v-else>
-              <HsUiCardItem
+              <CardItem
                 variant="header"
-                :class="[`theme-${message.theme}`, RemovePrefix(prefix, ['items-center', 'tw-items-center'])]"
+                :class="[`theme-${message.theme}`, ['items-center']]"
               >
                 <div class="HsUiToast-message">
-                  {{ MultiLangText(message.message) }}
+                  {{ tx(message.message) }}
                 </div>
-                <HsFcBtn :class="closeBtnStyle" theme="white" variant="outlined" @click="deleteMessage(message)">
+                <Btn
+                  :class="closeBtnStyle"
+                  theme="white"
+                  variant="outlined"
+                  @click="deleteMessage(message)"
+                >
                   <i class="fas fa-times" />
-                </HsFcBtn>
-              </HsUiCardItem>
-              <HsUiCardItem
+                </Btn>
+              </CardItem>
+              <CardItem
                 v-if="message.hideAfter != 0"
                 :class="[
                   `theme-${message.theme}`,
-                  RemovePrefix(prefix, [
-                    'overflow-visible',
-                    'tw-overflow-visible',
-                    'p-0',
-                    'tw-p-0',
-                    'min-h-[8px]',
-                    'tw-min-h-[8px]',
-                  ]),
+                  ['overflow-visible', 'p-0', 'min-h-[8px]'],
                 ]"
               >
                 <div class="HsUiToast-bar-body" :class="[`${message.theme}`]">
                   <div class="HsUiToast-bar" :style="style(message)" />
                 </div>
-              </HsUiCardItem>
+              </CardItem>
             </template>
-          </HsUiCard>
-        </HsUiAccordion>
+          </Card>
+        </Accordion>
       </template>
     </div>
   </div>
@@ -359,6 +325,7 @@ const closeBtnStyle = RemovePrefix(prefix, [
   animation-fill-mode: forwards;
 }
 </style>
+
 <style lang="scss">
 @keyframes HsUiToast-bar-key-frame {
   0% {

package/dist/runtime/components/{hs-ui → interactive}/window-loader.vue

@@ -1,24 +1,26 @@
 <script setup lang="ts">
 /* ----------------------------------------------------------------------------
-src\runtime\components\hs-ui\window-loader.vue
+// src\runtime\components\interactive\window-loader.vue
 // ----------------------------------------------------------------------------
-HsUiWindowLoader
-HsUiWindowLoaderHsUiWindowLoader
+// WindowLoader
+// WindowLoaderWindowLoader
 ----------------------------------------------------------------------------- */
 
 /* ----------------------------------------------------------------------------
-const WindowLoader = useHsUiWindowLoader();
+const WindowLoader = useHsWindowLoader();
 WindowLoader.Show()
 WindowLoader.zindex=10000
 ----------------------------------------------------------------------------- */
 
-// [ vue ]
-import { ref, watch } from 'vue';
-import { useHsUiWindowLoader } from '../../composables/use-hs-ui-window-loader';
 // [ vueuse ]
-import { useFocusTrap } from '@vueuse/integrations/useFocusTrap';
+import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
+
+// [ NUXT ]
+import { ref, watch } from "#imports";
+// [ composables ]
+import { useHsWindowLoader } from "../../composables/use-hs-window-loader";
 // ----------------------------------------------------------------------------
-const WindowLoader = useHsUiWindowLoader();
+const WindowLoader = useHsWindowLoader();
 // ----------------------------------------------------------------------------
 // [ focusTrap ]
 const focusTargetElm = ref<HTMLElement | null>(null);
@@ -35,6 +37,7 @@ watch(
 );
 // ----------------------------------------------------------------------------
 </script>
+
 <template>
   <div
     ref="focusTargetElm"

package/dist/runtime/components/{hs-ui → layout}/accordion.vue

@@ -1,35 +1,27 @@
 <script setup lang="ts">
 /* ----------------------------------------------------------------------------
-src\runtime\components\hs-ui\accordion.vue
+// src\runtime\components\layout\accordion.vue
 // ----------------------------------------------------------------------------
-HsUiAccordion
-HsUiAccordionHsUiAccordion
+// Accordion
+// AccordionAccordion
 ----------------------------------------------------------------------------- */
 
-// [ vue ]
-import { computed, ref, watch, nextTick } from 'vue';
 // [ NUXT ]
-import { useRuntimeConfig } from '#imports';
+import { computed, ref, watch, nextTick } from "#imports";
 // [ tailwind ]
-import { extendTailwindMerge } from 'tailwind-merge';
-import { type ClassType, ClassTypeToString } from '../../lib/class-style';
-import { GetPrefix, RemovePrefix } from '../../lib/prefix';
+import { twMerge } from "tailwind-merge";
+// [ utils ]
+import { type ClassType, ClassTypeToString } from "../../utils/class-style";
 // ----------------------------------------------------------------------------
-const runtimeConfig: any = useRuntimeConfig();
-const prefix = GetPrefix(runtimeConfig);
-// ----------------------------------------------------------------------------
-const twMerge = extendTailwindMerge({
-  prefix: prefix,
-});
 // ----------------------------------------------------------------------------
 // [ Props ]
 type Props = {
-  class?: ClassType | undefined;
+  class?: ClassType;
   open: boolean;
   span?: number;
 };
 const props = withDefaults(defineProps<Props>(), {
-  class: '',
+  class: "",
   open: true,
   span: 300,
 });
@@ -53,44 +45,43 @@ watch(
   }
 );
 
-const baseClass = RemovePrefix(prefix, [
+const baseClass = [
   //
-  'w-full',
-  'tw-w-full',
-]);
+  "w-full",
+];
 
 const classStyle = computed(() => {
   return twMerge(baseClass, ClassTypeToString(props.class));
 });
-const classOverflow = RemovePrefix(prefix, [
+const classOverflow = [
   //
-  'overflow-y-hidden',
-  'tw-overflow-y-hidden',
-]);
+  "overflow-y-hidden",
+];
 const overflowClass = computed(() => {
   if (innerHidden.value) return classOverflow;
-  return '';
+  return "";
 });
 // ----------------------------------------------------------------------------
 </script>
+
 <template>
   <div
-    class="HsUiAccordion"
+    class="Accordion"
     :class="[{ open: open }, classStyle]"
     :style="`--hsui-accordion-span:${props.span}ms`"
-    :aria-hidden="!props.open"
   >
+    <!-- :aria-hidden="!props.open" -->
     <div :class="overflowClass"><slot /></div>
   </div>
 </template>
 
 <style scoped>
-.HsUiAccordion {
+.Accordion {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows var(--hsui-accordion-span);
 }
-.HsUiAccordion.open {
+.Accordion.open {
   grid-template-rows: 1fr;
 }
 </style>