nuxt-hs-ui 1.0.10 → 2.0.2

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

@@ -0,0 +1,113 @@
+<script lang="ts">
+/* ----------------------------------------------------------------------------
+// src\runtime\components\interactive\alert.vue
+// ----------------------------------------------------------------------------
+// Alert
+// AlertAlert
+----------------------------------------------------------------------------- */
+
+// [ utils ]
+import { tv } from "../../utils/tv";
+import type { Theme } from "../../utils/theme";
+const alertTv = tv({
+  slots: {
+    base: [
+      //
+      `p-2`,
+      "bg-white border-2 border-[var(--main-color)] text-[color-mix(in_srgb,_var(--main-color)_,_#000_30%)]",
+      "rounded-xl overflow-hidden",
+    ],
+    bg: "absolute inset-0 bg-[var(--main-color)] opacity-10",
+    inner: "",
+  },
+  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",
+      },
+    },
+  },
+});
+</script>
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+// src\runtime\components\interactive\alert.vue
+// ----------------------------------------------------------------------------
+// Alert
+// AlertAlert
+----------------------------------------------------------------------------- */
+
+// ----------------------------------------------------------------------------
+// [ NUXT ]
+import { computed } from "#imports";
+// [ utils ]
+import { type ClassType, ClassTypeToString } from "../../utils/class-style";
+import { GetGolorCode } from "../../utils/theme";
+
+// ----------------------------------------------------------------------------
+
+interface Props {
+  class?: ClassType;
+  classBg?: ClassType;
+  classInner?: ClassType;
+  theme?: Theme;
+}
+const props = withDefaults(defineProps<Props>(), {
+  class: "",
+  classBg: "",
+  classInner: "",
+  theme: "info",
+});
+// ----------------------------------------------------------------------------
+
+const styleMain = computed(() => {
+  return [
+    //
+    `--main-color:${GetGolorCode(props.theme)};`,
+  ];
+});
+const classTv = computed(() => {
+  return alertTv({});
+});
+
+const classTvBase = computed(() => {
+  return classTv.value.base({
+    class: ClassTypeToString(props.class),
+  });
+});
+
+const classTvBg = computed(() => {
+  return classTv.value.bg({
+    class: ClassTypeToString(props.classBg),
+  });
+});
+
+const classTvInner = computed(() => {
+  return classTv.value.inner({
+    class: ClassTypeToString(props.classInner),
+  });
+});
+</script>
+
+<template>
+  <div :class="classTvBase" :style="styleMain">
+    <div :class="classTvBg"></div>
+    <div :class="classTvInner">
+      <slot />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/{hs-ui → interactive}/block-loading.vue

@@ -1,90 +1,72 @@
 <script setup lang="ts">
 /* ----------------------------------------------------------------------------
-src\runtime\components\hs-ui\block-loading.vue
+// src\runtime\components\interactive\block-loading.vue
 // ----------------------------------------------------------------------------
-HsUiBlockLoading
-HsUiBlockLoadingHsUiBlockLoading
+// BlockLoading
+// BlockLoadingBlockLoading
 ----------------------------------------------------------------------------- */
 
-// [ vue ]
-import { computed } from 'vue';
 // [ NUXT ]
-import { useRuntimeConfig } from '#imports';
+import { computed } 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,
-});
 // ----------------------------------------------------------------------------
 type Props = {
-  class?: ClassType | undefined;
+  class?: ClassType;
   show: boolean;
   message?: string;
 };
 const props = withDefaults(defineProps<Props>(), {
-  class: '',
+  class: "",
   show: false,
-  message: 'Loading',
+  message: "Loading",
 });
-const baseClass = RemovePrefix(prefix, [
+const baseClass = [
+  //
   //
-  'px-2',
-  'tw-px-2',
-  'pt-2',
-  'tw-pt-2',
-  'pb-1',
-  'tw-pb-1',
-  'absolute',
-  'tw-absolute',
-  'inset-0',
-  'tw-inset-0',
-  'h-full',
-  'tw-h-full',
-  'w-full',
-  'tw-w-full',
-  'overflow-hidden',
-  'tw-overflow-hidden',
-  'bg-[#13175C]/[0.5]',
-  'tw-bg-[#43536E]/[0.5]',
-  'flex',
-  'tw-flex',
-  'items-center',
-  'tw-items-center',
-  'justify-center',
-  'tw-justify-center',
-  'transition-opacity',
-  'tw-transition-opacity',
-]);
+  "z-100",
+  "px-2",
+  "pt-2",
+  "pb-1",
+  "absolute",
+  "inset-0",
+  "h-full",
+  "w-full",
+  "overflow-hidden",
+  "bg-[#13175C]/[0.5]",
+  "flex",
+  "items-center",
+  "justify-center",
+  "transition-opacity",
+];
 
 const variableStyle = computed(() => {
   if (props.show) {
-    return RemovePrefix(prefix,[
+    return [
       //
-      'pointer-events-auto',
-      'tw-pointer-events-auto',
-      'opacity-100',
-      'tw-opacity-100',
-    ]);
+      "pointer-events-auto",
+      "opacity-100",
+    ];
   }
-  return RemovePrefix(prefix,[
+  return [
     //
-    'pointer-events-none',
-    'tw-pointer-events-none',
-    'opacity-0',
-    'tw-opacity-0',
-  ]);
+    "pointer-events-none",
+    "opacity-0",
+  ];
 });
 
 const classStyle = computed(() => {
-  return twMerge(baseClass, variableStyle.value, ClassTypeToString(props.class));
+  return twMerge(
+    baseClass,
+    variableStyle.value,
+    ClassTypeToString(props.class)
+  );
 });
 </script>
+
 <template>
   <div class="HsUiBlockLoading" :class="[classStyle]">
     <div class="loading-container">
@@ -97,6 +79,7 @@ const classStyle = computed(() => {
     </div>
   </div>
 </template>
+
 <style scoped>
 .loading-container {
   width: 50%;

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

@@ -1,40 +1,42 @@
 <script setup lang="ts">
 /* ----------------------------------------------------------------------------
-src\runtime\components\hs-ui\dialog\index.vue
+// src\runtime\components\interactive\dialog.vue
 // ----------------------------------------------------------------------------
-HsUiDialog
-HsUiDialogHsUiDialog
+// Dialog
+// DialogDialog
 ----------------------------------------------------------------------------- */
 
-// [ vue ]
-import { computed, watch, ref, nextTick } from 'vue';
-// [ NUXT ]
-import { useRuntimeConfig } 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';
 
 // ----------------------------------------------------------------------------
-import { DialogDefaultZIndex } from './index.type';
-import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
+
+// import { type ClassType, ClassTypeToString } from '~/components/lib/class-style';
+// import { TailwindPrefix } from '~/components/hs/setting';
 // ----------------------------------------------------------------------------
-import { useHsUiDialog } from '../../../composables/use-hs-ui-dialog';
-import { useHsMultiLang } from '../../../composables/use-hs-multi-lang';
+
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
+// [ NUXT ]
+import { computed, ref, watch, nextTick } from "#imports";
+// [ types ]
+import { DialogDefaultZIndex } from "../../types/dialog";
+// [ composables ]
+import { useHsDialog } from "../../composables/use-hs-dialog";
+import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
+// [ Components ]
+import Modal from "./modal.vue";
+import Card from "../layout/card.vue";
+import CardItem from "../layout/card-item.vue";
+import Btn from "../form/btn.vue";
 // ----------------------------------------------------------------------------
-const runtimeConfig: any = useRuntimeConfig();
-const prefix = GetPrefix(runtimeConfig);
-// const twMerge = extendTailwindMerge({
-//   prefix: prefix,
-// });
+
 // ----------------------------------------------------------------------------
 // [ nac-Stroe ]
-const toast = useHsUiDialog();
+const toast = useHsDialog();
 const state = toast.state;
 // ----------------------------------------------------------------------------
-const storeMultiLang = useHsMultiLang();
-const MultiLangText = storeMultiLang.MultiLangText;
+const multiLang = useHsMultiLang();
+const tx = multiLang.tx;
 // ----------------------------------------------------------------------------
 const cancelBtnElm = ref<HTMLElement | null>(null);
 const leftBtnElm = ref<HTMLElement | null>(null);
@@ -88,11 +90,20 @@ watch(activateTs, async (ts) => {
   }
   if (activeItem.value === null) return;
   if (isShow.value === true) {
-    if (activeItem.value.data.option.defaultBtn === 'right' && rightBtnElm.value !== null) {
+    if (
+      activeItem.value.data.option.defaultBtn === "right" &&
+      rightBtnElm.value !== null
+    ) {
       rightBtnElm.value.focus();
-    } else if (activeItem.value.data.option.defaultBtn === 'left' && leftBtnElm.value !== null) {
+    } else if (
+      activeItem.value.data.option.defaultBtn === "left" &&
+      leftBtnElm.value !== null
+    ) {
       leftBtnElm.value.focus();
-    } else if (activeItem.value.data.option.defaultBtn === 'cancel' && cancelBtnElm.value !== null) {
+    } else if (
+      activeItem.value.data.option.defaultBtn === "cancel" &&
+      cancelBtnElm.value !== null
+    ) {
       cancelBtnElm.value.focus();
     }
   }
@@ -100,18 +111,24 @@ watch(activateTs, async (ts) => {
 
 const keyMoveFlag = ref(false);
 const onKeyDownNoBtn = (e: KeyboardEvent) => {
-  if (activeItem.value === null) return '';
-  if (e.key === 'Tab') return;
-  if (activeItem.value.data.option.btnRight.isShow === true && rightBtnElm.value !== null) {
+  if (activeItem.value === null) return "";
+  if (e.key === "Tab") return;
+  if (
+    activeItem.value.data.option.btnRight.isShow === true &&
+    rightBtnElm.value !== null
+  ) {
     keyMoveFlag.value = true;
     rightBtnElm.value.focus();
   }
 };
 
 const onKeyDownYesBtn = (e: KeyboardEvent) => {
-  if (activeItem.value === null) return '';
-  if (e.key === 'Tab') return;
-  if (activeItem.value.data.option.btnLeft.isShow === true && leftBtnElm.value !== null) {
+  if (activeItem.value === null) return "";
+  if (e.key === "Tab") return;
+  if (
+    activeItem.value.data.option.btnLeft.isShow === true &&
+    leftBtnElm.value !== null
+  ) {
     keyMoveFlag.value = true;
     leftBtnElm.value.focus();
   }
@@ -144,101 +161,88 @@ watch(isShow, (v) => {
   }
 });
 
-const cancelBtnStyle = RemovePrefix(prefix, [
+const cancelBtnStyle = [
   //
-  'px-2',
-  'tw-px-2',
-  'py-1',
-  'tw-py-1',
-  'border-[1px]',
-  'tw-border-[1px]',
-  '!bg-transparent',
-  '!tw-bg-transparent',
-  'rounded-none',
-  'tw-rounded-none',
-  'h-full',
-  'tw-h-full',
-]);
+  "px-2",
+  "py-1",
+  "border-[1px]",
+  "!bg-transparent",
+  "rounded-none",
+  "h-full",
+];
 
-const cancelBtnStyleInner = RemovePrefix(prefix, [
-  //
-  'flex',
-  'tw-flex',
-  'items-center',
-  'tw-items-center',
-]);
-const btnBaseStyle = RemovePrefix(prefix, [
+const cancelBtnStyleInner = [
   //
-  'grid',
-  'tw-grid',
-  'grid-cols-2',
-  'tw-grid-cols-2',
-  'gap-2',
-  'tw-gap-2',
-]);
-const btnStyle = RemovePrefix(prefix, [
+  "flex",
+  "items-center",
+];
+const btnBaseStyle = [
   //
-  'py-1',
-  'tw-py-1',
-  'w-full',
-  'tw-w-full',
-]);
-const titleStyle = RemovePrefix(prefix, [
+  "grid",
+  "grid-cols-2",
+  "gap-2",
+];
+const btnStyle = [
   //
-  'text-[14px]',
-  'tw-text-[14px]',
-  'sm:text-[18px]',
-  'sm:tw-text-[18px]',
-  'whitespace-pre-line',
-  'tw-whitespace-pre-line',
-  'text-wrap',
-  'tw-text-wrap',
-]);
-const messageStyle = RemovePrefix(prefix, [
+  "py-1",
+  "w-full",
+];
+const titleStyle = [
   //
-  'text-[14px]',
-  'tw-text-[14px]',
-  'sm:text-[18px]',
-  'sm:tw-text-[18px]',
-  'whitespace-pre-line',
-  'tw-whitespace-pre-line',
-  'text-wrap',
-  'tw-text-wrap',
+  "text-[14px]",
+  "sm:text-[18px]",
+  "whitespace-pre-line",
+  "text-wrap",
+];
+const messageStyle = [
   //
-  'pb-2',
-  'tw-pb-2',
-]);
-const cardStyle = RemovePrefix(prefix, [
+  "text-[14px]",
+  "sm:text-[18px]",
+  "whitespace-pre-line",
+  "text-wrap",
+  "pb-2",
+];
+const cardStyle = [
   //
-  'min-w-[300px]',
-  'tw-min-w-[300px]',
-  'mt-auto',
-  'tw-mt-auto',
-  'mb-auto',
-  'tw-mb-auto',
-]);
-const closeBtnIcon = RemovePrefix(prefix, [
+  "min-w-[300px]",
+  "mt-auto",
+  "mb-auto",
+];
+const closeBtnIcon = [
   //
-  'tw-mx-1',
-  'mx-1',
-]);
-const baseCardHeader = RemovePrefix(prefix, [
+  "mx-1",
+];
+const baseCardHeader = [
   //
-  'py-1',
-  'tw-py-1',
-  'pe-1',
-  'tw-pe-1',
-]);
+  "py-1",
+  "pe-1",
+];
 </script>
+
 <template>
   <ClientOnly>
-    <HsUiModal ref="targetElm" :show="isShow" :z-index="zindex" focus-lock @close="clickCancel()">
-      <HsUiCard v-if="activeItem !== null" class="HsUiDialog" :class="cardStyle" @click.stop>
-        <HsUiCardItem :class="[`theme-${activeItem.data.option.theme}`, baseCardHeader]" variant="header">
+    <Modal
+      ref="targetElm"
+      :show="isShow"
+      :z-index="zindex"
+      focus-lock
+      :closeable="activeItem?.data.option.btnCancel.isShow || false"
+      @close="clickCancel()"
+    >
+      <Card
+        v-if="activeItem !== null"
+        class="HsUiDialog"
+        :class="cardStyle"
+        @click.stop
+      >
+        <CardItem
+          :class="[`theme-${activeItem.data.option.theme}`, baseCardHeader]"
+          variant="header"
+        >
           <div :class="titleStyle">
-            {{ MultiLangText(activeItem.data.title) }}
+            {{ tx(activeItem.data.title) }}
           </div>
-          <HsFcBtn
+          <Btn
             v-if="activeItem.data.option.btnCancel.isShow"
             :class="cancelBtnStyle"
             :class-inner="cancelBtnStyleInner"
@@ -248,16 +252,16 @@ const baseCardHeader = RemovePrefix(prefix, [
             @ref="(e:any) => (cancelBtnElm = e)"
           >
             <i class="fas fa-times" :class="closeBtnIcon" />
-            {{ MultiLangText(activeItem.data.option.btnCancel.title) }}
-          </HsFcBtn>
-        </HsUiCardItem>
-        <HsUiCardItem variant="body">
+            {{ tx(activeItem.data.option.btnCancel.title) }}
+          </Btn>
+        </CardItem>
+        <CardItem variant="body">
           <div :class="messageStyle">
-            {{ MultiLangText(activeItem.data.message) }}
+            {{ tx(activeItem.data.message) }}
           </div>
           <div :class="btnBaseStyle">
             <div>
-              <HsFcBtn
+              <Btn
                 v-if="activeItem.data.option.btnLeft.isShow"
                 :class="btnStyle"
                 variant="flat"
@@ -266,11 +270,11 @@ const baseCardHeader = RemovePrefix(prefix, [
                 @ref="(e:any) => (leftBtnElm = e)"
                 @keydown="onKeyDownNoBtn"
               >
-                {{ MultiLangText(activeItem.data.option.btnLeft.title) }}
-              </HsFcBtn>
+                {{ tx(activeItem.data.option.btnLeft.title) }}
+              </Btn>
             </div>
             <div>
-              <HsFcBtn
+              <Btn
                 v-if="activeItem.data.option.btnRight.isShow"
                 :class="btnStyle"
                 variant="flat"
@@ -279,15 +283,16 @@ const baseCardHeader = RemovePrefix(prefix, [
                 @ref="(e:any) => (rightBtnElm = e)"
                 @keydown="onKeyDownYesBtn"
               >
-                {{ MultiLangText(activeItem.data.option.btnRight.title) }}
-              </HsFcBtn>
+                {{ tx(activeItem.data.option.btnRight.title) }}
+              </Btn>
             </div>
           </div>
-        </HsUiCardItem>
-      </HsUiCard>
-    </HsUiModal>
+        </CardItem>
+      </Card>
+    </Modal>
   </ClientOnly>
 </template>
+
 <style scoped>
 .theme-main0 {
   background-color: theme("colors.main0");
@@ -353,7 +358,7 @@ const baseCardHeader = RemovePrefix(prefix, [
   background-color: theme("colors.white");
   color: theme("colors.main1");
 }
-.theme-white .HsFcBtn--border {
+.theme-white .Btn--border {
   border-color: theme("colors.gray.600");
 }