@finema/core 1.4.220 → 2.1.0

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

@@ -0,0 +1,312 @@
+<template>
+  <div
+    v-show="isShowDevTools"
+    ref="devToolsRef"
+    class="fixed z-50 overflow-hidden rounded-lg border border-neutral-300 bg-white opacity-80 shadow-2xl"
+    :style="devToolsDynamicStyles"
+  >
+    <!-- Draggable Title Bar -->
+    <div class="flex items-center justify-between px-2 py-1 select-none">
+      <p
+        class="text-sm font-semibold cursor-move flex-grow"
+        @mousedown.prevent="handleDragStart"
+      >
+        Debug Tools
+      </p>
+      <div class="flex items-center">
+        <Button
+          icon="i-heroicons-arrow-path"
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          class="mr-1"
+          title="Reset Position & Size"
+          @click.stop="resetDevToolsState"
+        />
+        <Button
+          icon="i-heroicons-x-mark"
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          title="Close DevTools"
+          @click.stop="closeDevTools"
+        />
+      </div>
+    </div>
+    <hr class="text-neutral-300" />
+    <!-- Content Area Target for Logs -->
+    <div
+      id="dev-logs"
+      class="flex flex-col flex-1 space-y-1 p-2 overflow-auto"
+      :style="{ height: `calc(${devToolsHeight} - 40px)` }"
+    />
+
+    <!-- Resize Handles -->
+    <div
+      v-if="!isDragging"
+      class="resize-handles"
+    >
+      <div
+        class="resize-handle top-left"
+        @mousedown.prevent="handleResizeStart('top-left', $event)"
+      />
+      <div
+        class="resize-handle top-center"
+        @mousedown.prevent="handleResizeStart('top', $event)"
+      />
+      <div
+        class="resize-handle top-right"
+        @mousedown.prevent="handleResizeStart('top-right', $event)"
+      />
+      <div
+        class="resize-handle middle-left"
+        @mousedown.prevent="handleResizeStart('left', $event)"
+      />
+      <div
+        class="resize-handle middle-right"
+        @mousedown.prevent="handleResizeStart('right', $event)"
+      />
+      <div
+        class="resize-handle bottom-left"
+        @mousedown.prevent="handleResizeStart('bottom-left', $event)"
+      />
+      <div
+        class="resize-handle bottom-center"
+        @mousedown.prevent="handleResizeStart('bottom', $event)"
+      />
+      <div
+        class="resize-handle bottom-right"
+        @mousedown.prevent="handleResizeStart('bottom-right', $event)"
+      />
+    </div>
+  </div>
+
+  <!-- Toggle button for this DevToolsWindow -->
+  <div
+    class="fixed bottom-1 right-1 z-[99999]"
+  >
+    <Button
+      :icon="isShowDevTools ? 'heroicons:x-mark' : 'heroicons:information-circle'"
+      color="info"
+      square
+      size="sm"
+      :ui="{ base: 'rounded-full' }"
+      @click="toggleDevTools"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, onUnmounted, computed } from "vue";
+import { useStorage } from "@vueuse/core";
+const isShowDevTools = useStorage("isShowDevTools", false);
+const DEFAULT_WIDTH = "300px";
+const DEFAULT_HEIGHT = "400px";
+const DEFAULT_POSITION = {
+  top: "auto",
+  left: "auto",
+  bottom: "2.5rem",
+  right: "0.5rem"
+};
+const devToolsWidth = useStorage("devToolsWidth", DEFAULT_WIDTH);
+const devToolsHeight = useStorage("devToolsHeight", DEFAULT_HEIGHT);
+const devToolsPosition = useStorage("devToolsPosition", JSON.parse(JSON.stringify(DEFAULT_POSITION)));
+const devToolsRef = ref(null);
+const isDragging = ref(false);
+const dragStartX = ref(0);
+const dragStartY = ref(0);
+const initialDragPosition = ref({
+  top: 0,
+  left: 0
+});
+const isResizing = ref(false);
+const activeResizeHandle = ref(null);
+const initialResizeState = ref({
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0,
+  mouseX: 0,
+  mouseY: 0
+});
+const MIN_WIDTH = 150;
+const MIN_HEIGHT = 100;
+const devToolsDynamicStyles = computed(() => {
+  const styles = {
+    width: devToolsWidth.value,
+    height: devToolsHeight.value,
+    maxWidth: "100vw",
+    maxHeight: "100vh"
+  };
+  if (devToolsPosition.value.top !== "auto") {
+    styles.top = devToolsPosition.value.top;
+    styles.bottom = "auto";
+  } else {
+    styles.bottom = devToolsPosition.value.bottom;
+  }
+  if (devToolsPosition.value.left !== "auto") {
+    styles.left = devToolsPosition.value.left;
+    styles.right = "auto";
+  } else {
+    styles.right = devToolsPosition.value.right;
+  }
+  return styles;
+});
+const toggleDevTools = () => {
+  isShowDevTools.value = !isShowDevTools.value;
+};
+const closeDevTools = () => {
+  isShowDevTools.value = false;
+};
+const handleDragStart = (event) => {
+  if (!devToolsRef.value || event.button !== 0) return;
+  isDragging.value = true;
+  const rect = devToolsRef.value.getBoundingClientRect();
+  initialDragPosition.value = {
+    top: rect.top,
+    left: rect.left
+  };
+  dragStartX.value = event.clientX;
+  dragStartY.value = event.clientY;
+  document.addEventListener("mousemove", handleDragMove);
+  document.addEventListener("mouseup", handleDragEnd);
+};
+const handleDragMove = (event) => {
+  if (!isDragging.value || !devToolsRef.value) return;
+  const deltaX = event.clientX - dragStartX.value;
+  const deltaY = event.clientY - dragStartY.value;
+  let newTop = initialDragPosition.value.top + deltaY;
+  let newLeft = initialDragPosition.value.left + deltaX;
+  const elHeight = devToolsRef.value.offsetHeight;
+  const elWidth = devToolsRef.value.offsetWidth;
+  newTop = Math.max(0, Math.min(newTop, window.innerHeight - elHeight));
+  newLeft = Math.max(0, Math.min(newLeft, window.innerWidth - elWidth));
+  devToolsPosition.value = {
+    top: `${newTop}px`,
+    left: `${newLeft}px`,
+    bottom: "auto",
+    right: "auto"
+  };
+};
+const handleDragEnd = () => {
+  isDragging.value = false;
+  document.removeEventListener("mousemove", handleDragMove);
+  document.removeEventListener("mouseup", handleDragEnd);
+};
+const handleResizeStart = (handle, event) => {
+  if (!devToolsRef.value || event.button !== 0) return;
+  isResizing.value = true;
+  activeResizeHandle.value = handle;
+  const rect = devToolsRef.value.getBoundingClientRect();
+  initialResizeState.value = {
+    width: rect.width,
+    height: rect.height,
+    top: rect.top,
+    left: rect.left,
+    mouseX: event.clientX,
+    mouseY: event.clientY
+  };
+  document.addEventListener("mousemove", handleResizeMove);
+  document.addEventListener("mouseup", handleResizeEnd);
+};
+const handleResizeMove = (event) => {
+  if (!isResizing.value || !devToolsRef.value || !activeResizeHandle.value) return;
+  const {
+    width,
+    height,
+    top,
+    left,
+    mouseX,
+    mouseY
+  } = initialResizeState.value;
+  const deltaX = event.clientX - mouseX;
+  const deltaY = event.clientY - mouseY;
+  let newWidth = width;
+  let newHeight = height;
+  let newTop = top;
+  let newLeft = left;
+  if (activeResizeHandle.value.includes("right")) {
+    newWidth = Math.max(MIN_WIDTH, width + deltaX);
+  }
+  if (activeResizeHandle.value.includes("bottom")) {
+    newHeight = Math.max(MIN_HEIGHT, height + deltaY);
+  }
+  if (activeResizeHandle.value.includes("left")) {
+    newWidth = Math.max(MIN_WIDTH, width - deltaX);
+    if (newWidth > MIN_WIDTH) {
+      newLeft = left + deltaX;
+    } else {
+      newLeft = left + (width - MIN_WIDTH);
+    }
+  }
+  if (activeResizeHandle.value.includes("top")) {
+    newHeight = Math.max(MIN_HEIGHT, height - deltaY);
+    if (newHeight > MIN_HEIGHT) {
+      newTop = top + deltaY;
+    } else {
+      newTop = top + (height - MIN_HEIGHT);
+    }
+  }
+  if (newTop !== top || newLeft !== left) {
+    devToolsPosition.value = {
+      top: `${newTop}px`,
+      left: `${newLeft}px`,
+      bottom: "auto",
+      right: "auto"
+    };
+  }
+  devToolsWidth.value = `${newWidth}px`;
+  devToolsHeight.value = `${newHeight}px`;
+};
+const handleResizeEnd = () => {
+  isResizing.value = false;
+  activeResizeHandle.value = null;
+  document.removeEventListener("mousemove", handleResizeMove);
+  document.removeEventListener("mouseup", handleResizeEnd);
+};
+const resetDevToolsState = () => {
+  devToolsWidth.value = DEFAULT_WIDTH;
+  devToolsHeight.value = DEFAULT_HEIGHT;
+  devToolsPosition.value = JSON.parse(JSON.stringify(DEFAULT_POSITION));
+  if (devToolsRef.value) {
+    const newStyles = {
+      width: DEFAULT_WIDTH,
+      height: DEFAULT_HEIGHT,
+      ...DEFAULT_POSITION
+    };
+    Object.keys(newStyles).forEach((key) => {
+      devToolsRef.value.style[key] = newStyles[key];
+    });
+    if (newStyles.top === "auto") {
+      devToolsRef.value.style.bottom = newStyles.bottom;
+    } else {
+      devToolsRef.value.style.bottom = "auto";
+    }
+    if (newStyles.left === "auto") {
+      devToolsRef.value.style.right = newStyles.right;
+    } else {
+      devToolsRef.value.style.right = "auto";
+    }
+  }
+};
+onMounted(() => {
+  watch(isShowDevTools, (newValue) => {
+    if (newValue && devToolsRef.value) {
+      const currentStyle = devToolsDynamicStyles.value;
+      Object.keys(currentStyle).forEach((key) => {
+        if (devToolsRef.value) {
+          devToolsRef.value.style[key] = currentStyle[key];
+        }
+      });
+    }
+  }, { immediate: true });
+});
+onUnmounted(() => {
+  if (isDragging.value) handleDragEnd();
+  if (isResizing.value) handleResizeEnd();
+});
+</script>
+
+<style scoped>
+.resize-handles div{height:10px;position:absolute;width:10px;z-index:1}.resize-handle.top-left{cursor:nwse-resize;left:-5px;top:-5px}.resize-handle.top-center{cursor:ns-resize;left:50%;top:-5px;transform:translateX(-50%)}.resize-handle.top-right{cursor:nesw-resize;right:-5px;top:-5px}.resize-handle.middle-left{cursor:ew-resize;left:-5px;top:50%;transform:translateY(-50%)}.resize-handle.middle-right{cursor:ew-resize;right:-5px;top:50%;transform:translateY(-50%)}.resize-handle.bottom-left{bottom:-5px;cursor:nesw-resize;left:-5px}.resize-handle.bottom-center{bottom:-5px;cursor:ns-resize;left:50%;transform:translateX(-50%)}.resize-handle.bottom-right{bottom:-5px;cursor:nwse-resize;right:-5px}#dev-logs{overscroll-behavior:contain}#dev-logs:empty{align-items:center;display:flex;height:100%;justify-content:center}#dev-logs:empty:before{color:#9ca3af;content:"No logs to display.";font-style:italic}
+</style>

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

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -1,110 +1,77 @@
-<template>
-  <Modal
-    v-if="dialog.meta?.type"
-    v-model="dialog.isShow"
-    :ui="{
-      innerWrapper: 'p-6',
-    }"
-    is-hide-close-btn
-    prevent-close
-  >
-    <UNotification
-      :ui="{
-        padding: '',
-        shadow: '',
-        ring: '',
-        icon: {
-          base: 'flex-shrink-0 w-10 h-10',
-        },
-      }"
-      :icon="getIcon"
-      :description="dialog.meta?.description"
-      :timeout="0"
-      :title="dialog.meta?.title"
-      :color="getColor"
-      close-button=""
-    />
-    <div :class="[uiConfig.actionGroup?.wrapper]">
-      <Button
-        v-if="dialog.meta?.isShowCancelBtn"
-        :color="uiConfig.actionGroup?.cancelColor"
-        :variant="uiConfig.actionGroup?.cancelVariant"
-        :class="[dialog.meta.cancelButtonClassName]"
-        type="button"
-        @click="dialog.closeDialogCancel"
-      >
-        {{ dialog.meta?.cancelText || 'ยกเลิก' }}
-      </Button>
-      <Button
-        :color="uiConfig.actionGroup?.confirmColor"
-        :variant="uiConfig.actionGroup?.confirmVariant"
-        :class="[
-          {
-            'btn-success': dialog.meta?.type === DialogType.SUCCESS,
-            'btn-danger': dialog.meta?.type === DialogType.ERROR,
-            'btn-info': dialog.meta?.type === DialogType.INFO,
-            'btn-warning': dialog.meta?.type === DialogType.WARNING,
-            'mr-3': dialog.meta.isShowCancelBtn,
-          },
-          dialog.meta.confirmButtonClassName,
-        ]"
-        @click="dialog.closeDialogProceed"
-      >
-        {{ dialog.meta?.confirmText || 'ตกลง' }}
-      </Button>
-    </div>
-  </Modal>
-</template>
-<script lang="tsx" setup>
-import { DialogType, useDialog } from '#core/composables/useDialog'
-import { computed } from 'vue'
-import { useUiConfig } from '#core/composables/useConfig'
-import { notification } from '#core/ui.config/notification'
-
-const dialog = useDialog()
-const uiConfig = useUiConfig<typeof notification>(notification, 'notification')
-
-const getColor = computed(() => {
-  if (dialog.meta?.type === DialogType.SUCCESS) {
-    return 'success'
-  }
-
-  if (dialog.meta?.type === DialogType.ERROR) {
-    return 'danger'
-  }
-
-  if (dialog.meta?.type === DialogType.INFO) {
-    return 'info'
-  }
-
-  if (dialog.meta?.type === DialogType.WARNING) {
-    return 'warning'
-  }
-
-  return ''
-})
-
-const getIcon = computed(() => {
-  if (dialog.meta?.isHideIcon) {
-    return ''
-  }
-
-  if (dialog.meta?.type === DialogType.SUCCESS) {
-    return 'i-heroicons-check-circle'
-  }
-
-  if (dialog.meta?.type === DialogType.ERROR) {
-    return 'i-heroicons-x-circle'
-  }
-
-  if (dialog.meta?.type === DialogType.INFO) {
-    return 'i-heroicons-information-circle'
-  }
-
-  if (dialog.meta?.type === DialogType.WARNING) {
-    return 'i-heroicons-exclamation-circle'
-  }
-
-  return ''
-})
-</script>
+<template>
+  <Modal
+    :dismissible="false"
+    :close="false"
+  >
+    <template #body>
+      <div :class="ui.base()">
+        <Icon
+          v-if="!isHideIcon"
+          :name="getIcon"
+          :class="ui.icon()"
+        />
+        <div :class="ui.wrapper()">
+          <p :class="ui.title()">
+            {{ title }}
+          </p>
+          <p
+            v-if="description"
+            :class="ui.description()"
+          >
+            {{ description }}
+          </p>
+          <div :class="ui.buttonGroup()">
+            <Button
+              v-if="isShowCancelBtn"
+              type="button"
+              color="neutral"
+              variant="outline"
+              :class="ui.cancelButton()"
+              @click="emits('close', false)"
+            >
+              {{ cancelText }}
+            </Button>
+            <Button
+              type="button"
+              :color="type"
+              :class="ui.confirmButton()"
+              @click="emits('close', true)"
+            >
+              {{ confirmText }}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { DialogType } from "#core/composables/useDialog";
+import { useUiConfig } from "#core/composables/useConfig";
+import { dialogTheme } from "#core/theme/dialog";
+const emits = defineEmits();
+const props = withDefaults(defineProps(), {
+  confirmText: "\u0E15\u0E01\u0E25\u0E07",
+  cancelText: "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01"
+});
+const getIcon = computed(() => {
+  if (props.icon) {
+    return props.icon;
+  }
+  switch (props.type) {
+    case DialogType.SUCCESS:
+      return "i-heroicons-check-circle";
+    case DialogType.ERROR:
+      return "i-heroicons-x-circle";
+    case DialogType.INFO:
+      return "i-heroicons-information-circle";
+    case DialogType.WARNING:
+      return "i-heroicons-exclamation-circle";
+    default:
+      return "";
+  }
+});
+const ui = computed(() => useUiConfig(dialogTheme, "dialog")({ color: props.type }));
+</script>

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

@@ -0,0 +1,10 @@
+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<{
+    onClose?: ((args_0: boolean) => any) | undefined;
+}>, {
+    confirmText: string;
+    cancelText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Empty.vue

@@ -1,18 +1,33 @@
-<template>
-  <div class="flex flex-col items-center justify-center py-6 text-gray-400">
-    <Icon :name="icon!" class="text-[72px]" />
-    <p class="mt-2" v-html="message!" />
-  </div>
-</template>
-<script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    message?: any
-    icon?: string
-  }>(),
-  {
-    message: 'ไม่พบข้อมูล!',
-    icon: 'ph:table-thin',
-  }
-)
-</script>
+<template>
+  <div
+    :class="theme.base({
+  class: [ui?.base, props.class]
+})"
+  >
+    <Icon
+      :name="icon"
+      :class="theme.icon({
+  class: [ui?.icon]
+})"
+    />
+    <p
+      :class="theme.message({
+  class: [ui?.message]
+})"
+      v-html="message"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+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" },
+  ui: { type: null, required: false },
+  class: { type: null, required: false }
+});
+const theme = computed(() => useUiConfig(emptyTheme, "empty")());
+</script>

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

@@ -0,0 +1,12 @@
+import { emptyTheme } from '#core/theme/empty';
+type __VLS_Props = {
+    message?: any;
+    icon?: string;
+    ui?: typeof emptyTheme['slots'];
+    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;