nuxt-hs-ui 1.0.1

package/dist/runtime/components/hs-ui/modal/index.vue

@@ -0,0 +1,203 @@
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+src\runtime\components\hs-ui\modal\index.vue
+// ----------------------------------------------------------------------------
+HsUiModal
+HsUiModalHsUiModal
+----------------------------------------------------------------------------- */
+
+// [ vue ]
+import { computed, ref, watch, nextTick, onUnmounted } from 'vue';
+import { useId } from '#imports';
+// [ tailwind ]
+import { extendTailwindMerge } from 'tailwind-merge';
+import { type ClassType, ClassTypeToString } from '../../../lib/class-style';
+import { GetPrefix, RemovePrefix } from '../../../lib/prefix';
+
+// [ vueuse ]
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap';
+// [ components > v-ui > modal > * ]
+import { useStoreModal } from './use-ui-modal';
+
+// ----------------------------------------------------------------------------
+const twMerge = extendTailwindMerge({
+  prefix: GetPrefix(),
+});
+// ----------------------------------------------------------------------------
+
+interface Props {
+  class?: ClassType | undefined;
+  classInner?: ClassType | undefined;
+  show: boolean;
+  mounted?: boolean;
+  zIndex?: number | undefined;
+  focusLock?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  class: '',
+  classInner: '',
+  show: false,
+  mounted: true,
+  zIndex: undefined,
+  focusLock: false,
+});
+
+type Emits = {
+  close: [];
+};
+const emit = defineEmits<Emits>();
+
+// ----------------------------------------------------------------------------
+const vUiModal = useStoreModal();
+vUiModal.watch();
+const id = useId();
+const active = computed(() => {
+  return vUiModal.activeId === id;
+});
+// ----------------------------------------------------------------------------
+// [ focusTrap ]
+const focusTargetElm = ref<HTMLElement | null>(null);
+const { activate, deactivate } = useFocusTrap(focusTargetElm);
+watch(
+  () => [props.show, active.value],
+  async () => {
+    await nextTick();
+    if (!props.focusLock || !active.value || !props.show) {
+      deactivate();
+      return;
+    }
+    activate();
+  }
+);
+
+// ----------------------------------------------------------------------------
+const zOrder = computed(() => {
+  if (props.zIndex !== undefined) return props.zIndex;
+  return vUiModal.myzIndex(id).value;
+});
+if (props.show) {
+  vUiModal.add(id);
+}
+watch(
+  () => props.show,
+  (v) => {
+    if (v) {
+      vUiModal.add(id);
+    } else {
+      vUiModal.remove(id);
+    }
+  }
+);
+onUnmounted(() => {
+  vUiModal.remove(id);
+});
+const mounted = computed(() => {
+  if (props.show) return true;
+  if (props.mounted) return true;
+  return false;
+});
+// 背景色は[VUiModalBg]が担当します
+const baseClass = RemovePrefix([
+  //
+  'p-2',
+  'tw-p-2',
+  'transition-opacity',
+  'tw-transition-opacity',
+  'fixed',
+  'tw-fixed',
+  'inset-0',
+  'tw-inset-0',
+  'flex',
+  'tw-flex',
+  'justify-center',
+  'tw-justify-center',
+  'pointer-events-none',
+  'tw-pointer-events-none',
+]);
+
+const classStyle = computed(() => {
+  return twMerge(baseClass, ClassTypeToString(props.class));
+});
+
+const innerClass = RemovePrefix([
+  //
+  'w-full',
+  'tw-w-full',
+  'h-full',
+  'tw-h-full',
+  'p-0',
+  'tw-p-0',
+  'flex',
+  'tw-flex',
+  'flex-col',
+  'tw-flex-col',
+  'items-center',
+  'tw-items-center',
+  'overflow-auto',
+  'tw-overflow-auto',
+  'transition-opacity',
+  'tw-transition-opacity',
+  'aaaaaa',
+  'tw-aaaaaa',
+  'aaaaaa',
+  'tw-aaaaaa',
+]);
+const variableStyle = computed(() => {
+  if (props.show) {
+    return RemovePrefix([
+      //
+      'pointer-events-auto',
+      'tw-pointer-events-auto',
+    ]);
+  }
+  return RemovePrefix([
+    //
+    'pointer-events-none',
+    'tw-pointer-events-none',
+  ]);
+});
+
+const classInner = computed(() => {
+  return twMerge(innerClass, variableStyle.value, ClassTypeToString(props.classInner));
+});
+const closeOnBackEvent = () => {
+  emit('close');
+};
+</script>
+<template>
+  <div class="HsUiModal-Parent">
+    <ClientOnly>
+      <Teleport to="body">
+        <div
+          v-if="mounted"
+          :id="id"
+          class="HsUiModal"
+          data-show=""
+          :class="classStyle"
+          :style="{ zIndex: zOrder, opacity: props.show ? 1 : 0 }"
+          :aria-hidden="!props.show"
+        >
+          <div ref="focusTargetElm" :class="classInner" @click="closeOnBackEvent">
+            <slot />
+          </div>
+        </div>
+      </Teleport>
+    </ClientOnly>
+  </div>
+</template>
+
+<style>
+.HsUiModal > * {
+  pointer-events: none;
+}
+.HsUiModal[aria-hidden=false] > * {
+  pointer-events: all;
+}
+
+.HsUiModal-Parent {
+  opacity: 0;
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+</style>

package/dist/runtime/components/hs-ui/modal/use-ui-modal.d.ts

@@ -0,0 +1,20 @@
+interface State {
+    state: {
+        init: boolean;
+        baseIndex: number;
+        activeList: {
+            id: string;
+            zIndex: number;
+        }[];
+    };
+}
+export declare const useStoreModal: import("pinia").StoreDefinition<"HsUiStoreModal", State, {
+    activeId: (state: State & import("pinia").PiniaCustomStateProperties<State>) => string | null;
+}, {
+    watch(): void;
+    myzIndex(id: string): import("vue").ComputedRef<number>;
+    add(id: string): number;
+    remove(id: string): void;
+    removeAll(): void;
+}>;
+export {};

package/dist/runtime/components/hs-ui/modal/use-ui-modal.js

@@ -0,0 +1,74 @@
+import { computed, watch } from "vue";
+import { useRoute } from "#imports";
+import { defineStore } from "pinia";
+import { clearAllBodyScrollLocks } from "body-scroll-lock";
+export const useStoreModal = defineStore({
+  id: "HsUiStoreModal",
+  state: () => {
+    return {
+      state: {
+        init: false,
+        baseIndex: 5e3,
+        activeList: []
+      }
+    };
+  },
+  getters: {
+    activeId: (state) => {
+      const activeList = state.state.activeList;
+      if (activeList.length === 0)
+        return null;
+      const zIndex = Math.max(...activeList.map((row) => row.zIndex));
+      const data = activeList.find((row) => row.zIndex === zIndex);
+      if (!data)
+        return null;
+      return data.id;
+    }
+  },
+  actions: {
+    watch() {
+      const state = this.state;
+      if (import.meta.server)
+        return;
+      if (state.init)
+        return;
+      state.init = true;
+      const route = useRoute();
+      watch(
+        () => route.path,
+        () => {
+          state.activeList = [];
+        }
+      );
+    },
+    myzIndex(id) {
+      const state = this.state;
+      return computed(() => {
+        const target = state.activeList.find((row) => row.id === id);
+        if (!target) {
+          return state.baseIndex;
+        }
+        return target.zIndex;
+      });
+    },
+    add(id) {
+      const zIndex = this.state.activeList.length === 0 ? this.state.baseIndex : Math.max(...this.state.activeList.map((row) => row.zIndex)) + 2;
+      this.state.activeList.push({
+        id,
+        zIndex
+      });
+      return zIndex;
+    },
+    remove(id) {
+      this.state.activeList = this.state.activeList.filter((row) => row.id !== id);
+      if (this.state.activeList.length === 0) {
+        clearAllBodyScrollLocks();
+      }
+    },
+    removeAll() {
+      this.state.activeList = [];
+      clearAllBodyScrollLocks();
+    }
+    // ---------------------------------------------------
+  }
+});

package/dist/runtime/components/hs-ui/toast/index.type.d.ts

@@ -0,0 +1,24 @@
+import { type MultiLang } from '../../../lib/multi-lang.js';
+export declare const NamespaceName = "Toast";
+export declare const Theme: {
+    readonly Success: "success";
+    readonly Info: "info";
+    readonly Warning: "warning";
+    readonly Error: "error";
+};
+export type Theme = (typeof Theme)[keyof typeof Theme];
+export interface Message {
+    key: string;
+    title: MultiLang;
+    message: MultiLang;
+    isShow: boolean;
+    hideAfter: number;
+    barWidth: number;
+    theme: Theme;
+}
+export interface Controler {
+    Success: (message: MultiLang, title: MultiLang, hideAfter?: number) => void;
+    Info: (message: MultiLang, title: MultiLang, hideAfter?: number) => void;
+    Warning: (message: MultiLang, title: MultiLang, hideAfter?: number) => void;
+    E: (message: MultiLang, title: MultiLang, hideAfter?: number) => void;
+}

package/dist/runtime/components/hs-ui/toast/index.type.js

@@ -0,0 +1,7 @@
+export const NamespaceName = "Toast";
+export const Theme = {
+  Success: "success",
+  Info: "info",
+  Warning: "warning",
+  Error: "error"
+};

package/dist/runtime/components/hs-ui/toast/index.vue

@@ -0,0 +1,355 @@
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+src\runtime\components\hs-ui\toast\index.vue
+// ----------------------------------------------------------------------------
+HsUiToast
+HsUiToastHsUiToast
+----------------------------------------------------------------------------- */
+
+// [ vue ]
+import { computed, watch } from 'vue';
+
+// [ vueuse ]
+import { watchArray } from '@vueuse/core';
+// [ tailwind ]
+import { RemovePrefix } from '../../../lib/prefix';
+
+// ----------------------------------------------------------------------------
+// [ 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';
+// ----------------------------------------------------------------------------
+// [ nac-Stroe ]
+const toast = useHsUiToast();
+const state = toast.state;
+// ----------------------------------------------------------------------------
+const storeMultiLang = useHsMultiLang();
+const MultiLangText = storeMultiLang.MultiLangText;
+// ----------------------------------------------------------------------------
+// 要素を消し始めから完全に消すのにかかる時間（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 = RemovePrefix([
+  //
+  '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',
+]);
+
+// ----------------------------------------------------------------------------
+</script>
+<template>
+  <div class="HsUiToast-base" :style="{ 'z-index': state.zindex }">
+    <div
+      v-show="state.pendingList.length != 0"
+      class="HsUiToast-container"
+      :class="RemovePrefix(['grid', 'tw-grid', 'gap-1', 'tw-gap-1'])"
+    >
+      <template v-for="(message, index) in state.pendingList" :key="index">
+        <HsUiAccordion :span="hideSpan" :open="message.isShow">
+          <HsUiCard
+            class="HsUiToast"
+            :class="
+              RemovePrefix(['drop-shadow-md', 'tw-drop-shadow-md', 'pointer-events-all', 'tw-pointer-events-all'])
+            "
+            @click.stop=""
+            @mousedown.stop=""
+            @mouseup.stop=""
+          >
+            <template v-if="MultiLangText(message.title).length > 0">
+              <HsUiCardItem
+                variant="header"
+                class="items-center"
+                :class="[`theme-${message.theme}`, RemovePrefix(['items-center', 'tw-items-center'])]"
+              >
+                <div class="HsUiToast-title">
+                  {{ MultiLangText(message.title) }}
+                </div>
+                <HsFcBtn :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(['items-overflow-visible', 'tw-overflow-visible'])]"
+              >
+                <div class="HsUiToast-message">
+                  {{ MultiLangText(message.message) }}
+                </div>
+                <!-- </div> -->
+              </HsUiCardItem>
+              <HsUiCardItem
+                v-if="message.hideAfter != 0"
+                :class="[
+                  `theme-${message.theme}`,
+                  RemovePrefix([
+                    'overflow-visible',
+                    'tw-overflow-visible',
+                    'p-0',
+                    'tw-p-0',
+                    'min-h-[8px]',
+                    'tw-min-h-[8px]',
+                  ]),
+                ]"
+              >
+                <div class="HsUiToast-bar-body" :class="[`${message.theme}`]">
+                  <div class="HsUiToast-bar" :style="style(message)"/>
+                </div>
+              </HsUiCardItem>
+            </template>
+            <template v-else>
+              <HsUiCardItem
+                variant="header"
+                :class="[`theme-${message.theme}`, RemovePrefix(['items-center', 'tw-items-center'])]"
+              >
+                <div class="HsUiToast-message">
+                  {{ MultiLangText(message.message) }}
+                </div>
+                <HsFcBtn :class="closeBtnStyle" theme="white" variant="outlined" @click="deleteMessage(message)">
+                  <i class="fas fa-times"/>
+                </HsFcBtn>
+              </HsUiCardItem>
+              <HsUiCardItem
+                v-if="message.hideAfter != 0"
+                :class="[
+                  `theme-${message.theme}`,
+                  RemovePrefix([
+                    'overflow-visible',
+                    'tw-overflow-visible',
+                    'p-0',
+                    'tw-p-0',
+                    'min-h-[8px]',
+                    'tw-min-h-[8px]',
+                  ]),
+                ]"
+              >
+                <div class="HsUiToast-bar-body" :class="[`${message.theme}`]">
+                  <div class="HsUiToast-bar" :style="style(message)"/>
+                </div>
+              </HsUiCardItem>
+            </template>
+          </HsUiCard>
+        </HsUiAccordion>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.theme-success {
+  background-color: #2bb60c !important;
+  color: white !important;
+}
+.theme-success .HsUiToast-bar {
+  background-color: #2bb60c !important;
+}
+
+.theme-info {
+  background-color: #2badd5 !important;
+  color: white !important;
+}
+.theme-info .HsUiToast-bar {
+  background-color: #2badd5 !important;
+}
+
+.theme-warning {
+  background-color: #d89400 !important;
+  color: #000000 !important;
+}
+.theme-warning .HsUiToast-bar {
+  background-color: #d89400 !important;
+}
+
+.theme-error {
+  background-color: #e82a4d !important;
+  color: white !important;
+}
+.theme-error .HsUiToast-bar {
+  background-color: #e82a4d !important;
+}
+
+.HsUiToast-base {
+  pointer-events: none;
+  position: fixed;
+  inset: 0 0 0 0;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+}
+
+.HsUiToast-container {
+  pointer-events: none;
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: 100%;
+  height: 100svh;
+  max-height: 100%;
+  max-height: 100svh;
+  display: flex;
+  flex-direction: column;
+  width: 800px;
+  padding: 10px 20px;
+}
+@media screen and (min-width: 0px) and (max-width: 399.9px) {
+  .HsUiToast-container {
+    width: 100%;
+    padding: 5px 5px;
+  }
+}
+@media screen and (min-width: 400px) and (max-width: 599.9px) {
+  .HsUiToast-container {
+    width: 380px;
+  }
+}
+@media screen and (min-width: 600px) and (max-width: 799.9px) {
+  .HsUiToast-container {
+    width: 550px;
+  }
+}
+@media screen and (min-width: 800px) and (max-width: 1199.9px) {
+  .HsUiToast-container {
+    width: 600px;
+  }
+}
+
+.HsUiToast {
+  pointer-events: all;
+}
+
+.HsUiToast-title {
+  pointer-events: all;
+  font-size: 20px;
+  white-space: pre-line;
+  overflow-wrap: break-word;
+  word-break: break-all;
+}
+
+.HsUiToast-message {
+  pointer-events: all;
+  font-size: 16px;
+  white-space: pre-line;
+  overflow-wrap: break-word;
+  word-break: break-all;
+}
+
+.HsUiToast-icon {
+  width: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.HsUiToast-icon::after {
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  font-size: 30px;
+}
+@media screen and (min-width: 0px) and (max-width: 599.9px) {
+  .HsUiToast-icon::after {
+    font-size: 18px;
+  }
+}
+.HsUiToast-icon[data-icon=success]::after {
+  content: "\f058";
+}
+.HsUiToast-icon[data-icon=info]::after {
+  content: "\f05a";
+}
+.HsUiToast-icon[data-icon=warning]::after {
+  content: "\f06a";
+}
+.HsUiToast-icon[data-icon=error]::after {
+  content: "\f071";
+}
+
+.HsUiToast-bar-body {
+  height: 6px;
+  margin: 0px 2px 2px 2px;
+  border-radius: 4px;
+  background-color: rgb(255, 255, 255);
+  display: flex;
+  justify-content: flex-start;
+}
+
+.HsUiToast-bar {
+  margin: 1px 1px;
+  border-radius: 2px;
+  height: 4px;
+  transition: width 10ms;
+  animation-name: HsUiToast-bar-key-frame;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+</style>
+<style lang="scss">
+@keyframes HsUiToast-bar-key-frame {
+  0% {
+    width: 0%;
+  }
+
+  100% {
+    width: 100%;
+  }
+}
+</style>