@finema/core 2.3.0 → 2.4.1

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "configKey": "core",
   "builder": {
     "@nuxt/module-builder": "1.0.1",

package/dist/module.mjs

@@ -3,7 +3,7 @@ import defu from 'defu';
 import * as theme from '../dist/runtime/theme/index.js';
 
 const name = "@finema/core";
-const version = "2.3.0";
+const version = "2.4.1";
 
 const nuxtAppOptions = {
   head: {

package/dist/runtime/components/Dialog/index.vue

@@ -1,25 +1,26 @@
 <template>
-  <Modal
-    :dismissible="false"
-    :close="false"
-  >
-    <template #body>
-      <div :class="ui.base()">
+  <AlertDialogRoot :open="true">
+    <AlertDialogPortal>
+      <AlertDialogOverlay :class="ui.overlay()" />
+      <AlertDialogContent
+        :class="ui.base()"
+      >
         <Icon
           v-if="!propsSafe.isHideIcon"
           :name="getIcon"
           :class="ui.icon()"
         />
         <div :class="ui.wrapper()">
-          <p :class="ui.title()">
+          <AlertDialogTitle :class="ui.title()">
             {{ propsSafe.title }}
-          </p>
-          <p
+          </AlertDialogTitle>
+          <AlertDialogDescription
             v-if="propsSafe.description"
             :class="ui.description()"
           >
             {{ propsSafe.description }}
-          </p>
+          </AlertDialogDescription>
+
           <div :class="ui.buttonGroup()">
             <Button
               v-if="propsSafe.isShowCancelBtn"
@@ -33,7 +34,7 @@
             </Button>
             <Button
               type="button"
-              :color="propsSafe.type"
+              :color="propsSafe.isConfirm ? ui.confirmColor() : propsSafe.type"
               :class="ui.confirmButton()"
               @click="emits('close', true)"
             >
@@ -41,16 +42,24 @@
             </Button>
           </div>
         </div>
-      </div>
-    </template>
-  </Modal>
+      </AlertDialogContent>
+    </AlertDialogPortal>
+  </AlertDialogRoot>
 </template>
 
 <script setup>
+import {
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogRoot,
+  AlertDialogTitle
+} from "reka-ui";
 import { computed, useAttrs } from "vue";
-import { DialogType } from "#core/composables/useDialog";
 import { useUiConfig } from "#core/composables/useConfig";
 import { dialogTheme } from "#core/theme/dialog";
+import { DialogType } from "#core/composables/useDialog";
 const emits = defineEmits();
 const props = withDefaults(defineProps(), {
   confirmText: "\u0E15\u0E01\u0E25\u0E07",
@@ -71,18 +80,24 @@ const getIcon = computed(() => {
   if (propsSafe.value.icon) {
     return propsSafe.value.icon;
   }
+  if (propsSafe.value.isConfirm) {
+    return ui.value.iconConfirm();
+  }
   switch (propsSafe.value.type) {
     case DialogType.SUCCESS:
-      return "i-heroicons-check-circle";
+      return ui.value.iconSuccess();
     case DialogType.ERROR:
-      return "i-heroicons-x-circle";
+      return ui.value.iconError();
     case DialogType.INFO:
-      return "i-heroicons-information-circle";
+      return ui.value.iconInfo();
     case DialogType.WARNING:
-      return "i-heroicons-exclamation-circle";
+      return ui.value.iconWarning();
     default:
-      return "";
+      return ui.value.iconInfo();
   }
 });
-const ui = computed(() => useUiConfig(dialogTheme, "dialog")({ color: propsSafe.value.type }));
+const ui = computed(() => useUiConfig(dialogTheme, "dialog")({
+  color: propsSafe.value.isConfirm ? void 0 : propsSafe.value.type,
+  confirm: propsSafe.value.isConfirm
+}));
 </script>

package/dist/runtime/components/Dialog/index.vue.d.ts

@@ -1,4 +1,4 @@
-import { type IDialogMetaItem } from '#core/composables/useDialog';
+import type { IDialogMetaItem } from '#core/composables/useDialog';
 declare const _default: import("vue").DefineComponent<IDialogMetaItem, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (args_0: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<IDialogMetaItem> & Readonly<{

package/dist/runtime/components/Empty.vue

@@ -25,7 +25,7 @@ import { useUiConfig } from "#core/composables/useConfig";
 import { emptyTheme } from "#core/theme/empty";
 const props = defineProps({
   message: { type: null, required: false, default: "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25!" },
-  icon: { type: String, required: false, default: "ph:table-thin" },
+  icon: { type: String, required: false },
   ui: { type: null, required: false },
   class: { type: null, required: false }
 });

package/dist/runtime/components/Empty.vue.d.ts

@@ -6,7 +6,6 @@ type __VLS_Props = {
     class?: any;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    icon: string;
     message: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Loader.vue

@@ -21,7 +21,7 @@ import { loaderTheme } from "#core/theme/loader";
 import { useUiConfig } from "#core/composables/useConfig";
 const props = defineProps({
   loading: { type: Boolean, required: false, default: true },
-  icon: { type: String, required: false, default: "i-svg-spinners:180-ring-with-bg" },
+  icon: { type: String, required: false },
   ui: { type: null, required: false },
   class: { type: null, required: false }
 });

package/dist/runtime/components/Loader.vue.d.ts

@@ -11,7 +11,6 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     loading: boolean;
-    icon: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/runtime/composables/useDialog.d.ts

@@ -13,11 +13,13 @@ export interface IDialogMetaItem {
     cancelText?: string;
     isShowCancelBtn?: boolean;
     isHideIcon?: boolean;
+    isConfirm?: boolean;
 }
 export interface IDialog {
     error: (payload: IDialogMetaItem) => Promise<boolean>;
     info: (payload: IDialogMetaItem) => Promise<boolean>;
     success: (payload: IDialogMetaItem) => Promise<boolean>;
     warning: (payload: IDialogMetaItem) => Promise<boolean>;
+    confirm: (payload: IDialogMetaItem) => Promise<boolean>;
 }
 export declare const useDialog: () => IDialog;

package/dist/runtime/composables/useDialog.js

@@ -44,10 +44,19 @@ export const useDialog = () => {
       type: "warning" /* WARNING */
     });
   };
+  const confirm = async (payload) => {
+    return openDialog({
+      ...payload,
+      type: "info" /* INFO */,
+      isShowCancelBtn: true,
+      isConfirm: true
+    });
+  };
   return {
     error,
     success,
     info,
-    warning
+    warning,
+    confirm
   };
 };

package/dist/runtime/theme/dialog.d.ts

@@ -1,8 +1,15 @@
 export declare const dialogTheme: {
     slots: {
         base: string;
+        overlay: string;
         icon: string;
+        iconSuccess: string;
+        iconInfo: string;
+        iconWarning: string;
+        iconError: string;
+        iconConfirm: string;
         wrapper: string;
+        confirmColor: string;
         title: string;
         description: string;
         buttonGroup: string;
@@ -24,8 +31,12 @@ export declare const dialogTheme: {
                 icon: string;
             };
         };
-        defaultVariants: {
-            color: string;
+        confirm: {
+            true: {
+                icon: string;
+            };
+            false: {};
         };
     };
+    defaultVariants: {};
 };

package/dist/runtime/theme/dialog.js

@@ -1,10 +1,17 @@
 export const dialogTheme = {
   slots: {
-    base: "flex space-x-4",
+    base: "flex space-x-4 shadow-lg ring ring-default z-[100] text-sm fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[500px] translate-x-[-50%] translate-y-[-50%] rounded-lg bg-white p-[25px] focus:outline-none",
+    overlay: "fixed inset-0 bg-elevated/75 backdrop-blur",
     icon: "size-12",
+    iconSuccess: "i-heroicons-check-circle",
+    iconInfo: "i-heroicons-information-circle",
+    iconWarning: "i-heroicons-exclamation-circle",
+    iconError: "i-heroicons-x-circle",
+    iconConfirm: "i-heroicons-information-circle",
     wrapper: "flex flex-col w-full",
+    confirmColor: "info",
     title: "font-bold text-lg",
-    description: "text-neutral-400",
+    description: "text-neutral-400 text-sm",
     buttonGroup: "flex justify-end items-center space-x-3 mt-4",
     confirmButton: "",
     cancelButton: ""
@@ -16,6 +23,10 @@ export const dialogTheme = {
       warning: { icon: "text-warning" },
       error: { icon: "text-error" }
     },
-    defaultVariants: { color: "info" }
-  }
+    confirm: {
+      true: { icon: "text-info" },
+      false: {}
+    }
+  },
+  defaultVariants: {}
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",