@finema/core 1.2.5 → 1.3.1

package/dist/runtime/components/Form/InputText/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <UInput
+      v-model="value"
+      :disabled="disabled"
+      :name="name"
+      :placeholder="placeholder ?? props.label"
+      :type="isShowPassword ? 'text' : props.type || 'text'"
+      :autofocus="!!autoFocus"
+    />
+  </FieldWrapper>
+</template>
+<script lang="ts" setup>
+import { ref } from '#imports'
+import { type ITextFieldProps } from '#core/components/Form/InputText/types'
+import { useFieldHOC } from '#core/composables/useForm'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+
+const props = withDefaults(defineProps<ITextFieldProps>(), {})
+const emits = defineEmits<{
+  (event: 'change', value: string): void
+  (event: 'blur', value: string): void
+}>()
+
+const { value, wrapperProps, disabled, handleChange } = useFieldHOC<string>(props)
+
+const isShowPassword = ref(false)
+</script>

package/dist/runtime/components/Form/InputText/types.d.ts

@@ -0,0 +1,10 @@
+import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
+export interface ITextFieldProps extends IFieldProps {
+    type?: 'text' | 'password' | 'email';
+    prependIcon?: any;
+    appendIcon?: any;
+}
+export type ITextField = IFormFieldBase<INPUT_TYPES.TEXT | INPUT_TYPES.PASSWORD, ITextFieldProps, {
+    change?: (value: string) => void;
+    blur?: (value: string) => void;
+}>;

package/dist/runtime/components/Form/InputToggle/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <UToggle v-model="value" :disabled="disabled" :name="name" />
+  </FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import { useFieldHOC } from '#core/composables/useForm'
+import { type IToggleFieldProps } from '#core/components/Form/InputToggle/types'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+
+const props = withDefaults(defineProps<IToggleFieldProps>(), {})
+const { value, wrapperProps, disabled, handleChange } = useFieldHOC<boolean>(props)
+</script>

package/dist/runtime/components/Form/InputToggle/types.d.ts

@@ -0,0 +1,6 @@
+import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
+export interface IToggleFieldProps extends IFieldProps {
+}
+export type IToggleField = IFormFieldBase<INPUT_TYPES.TOGGLE, IToggleFieldProps, {
+    change?: (value: string) => void;
+}>;

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

@@ -0,0 +1,6 @@
+<template>
+  <form class="form">
+    <slot />
+  </form>
+</template>
+<script lang="ts" setup></script>

package/dist/runtime/components/Form/types.d.ts

@@ -0,0 +1,47 @@
+import { type Component } from '@nuxt/schema';
+import { type FormContext, type RuleExpression } from 'vee-validate';
+import { type ITextField } from '#core/components/Form/InputText/types';
+import { type IStaticField } from '#core/components/Form/InputStatic/types';
+export declare const enum INPUT_TYPES {
+    TEXT = "TEXT",
+    PASSWORD = "PASSWORD",
+    STATIC = "STATIC",
+    TOGGLE = "TOGGLE",
+    SELECT = "SELECT"
+}
+export interface IOption {
+    label: string;
+    value: any;
+}
+export interface IRadioOption {
+    label: string | any;
+    value: any;
+}
+export interface IFieldProps {
+    form?: FormContext;
+    name: string;
+    label?: string | any;
+    rules?: RuleExpression<any> | any;
+    autoFocus?: boolean;
+    class?: any;
+    classInner?: any;
+    classInputInner?: any;
+    placeholder?: string;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isLoading?: boolean;
+    help?: string;
+    isHideLabel?: boolean;
+    customErrorMessage?: string | any;
+    transform?: (value: any, oldValue: any, e: InputEvent) => any;
+    getInstance?: (el: HTMLElement) => void;
+}
+export interface IFormFieldBase<I extends INPUT_TYPES, P extends object = never, O extends object = never> {
+    type: I | INPUT_TYPES;
+    component?: Component;
+    class?: any;
+    isHide?: boolean;
+    props: IFieldProps & P;
+    on?: O;
+}
+export type IFormField = ITextField | IStaticField;

package/dist/runtime/components/Form/types.mjs

@@ -0,0 +1,8 @@
+export var INPUT_TYPES = /* @__PURE__ */ ((INPUT_TYPES2) => {
+  INPUT_TYPES2["TEXT"] = "TEXT";
+  INPUT_TYPES2["PASSWORD"] = "PASSWORD";
+  INPUT_TYPES2["STATIC"] = "STATIC";
+  INPUT_TYPES2["TOGGLE"] = "TOGGLE";
+  INPUT_TYPES2["SELECT"] = "SELECT";
+  return INPUT_TYPES2;
+})(INPUT_TYPES || {});

package/dist/runtime/components/Icon.vue

@@ -0,0 +1,11 @@
+<template>
+  <UIcon :name="name" />
+</template>
+<script lang="ts" setup>
+defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+})
+</script>

package/dist/runtime/components/Loader.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <UIcon name="i-heroicons-arrow-path w-12 h-12 animate-spin" />
+  </div>
+</template>
+<script lang="ts" setup></script>

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

@@ -0,0 +1,145 @@
+<template>
+  <UModal
+    v-bind="attrs"
+    :model-value="modelValue"
+    :overlay="overlay"
+    :transition="transition"
+    :prevent-close="preventClose"
+    :fullscreen="fullscreen"
+    :initial-focus="modalWrapper"
+    :ui="ui"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <div
+      v-if="title"
+      :class="[ui.header, { 'flex items-center justify-between': !isHideCloseBtn }]"
+    >
+      <h1 class="text-xl font-medium">{{ title }}</h1>
+      <Icon
+        v-if="!isHideCloseBtn"
+        name="i-heroicons-x-mark"
+        class="h-6 w-6 cursor-pointer"
+        @click="close"
+      />
+    </div>
+
+    <div
+      v-if="(!title && !isHideCloseBtn && preventClose) || fullscreen"
+      class="absolute right-0 m-4"
+    >
+      <Icon
+        v-if="!isHideCloseBtn"
+        name="i-heroicons-x-mark"
+        class="h-6 w-6 cursor-pointer"
+        @click="close"
+      />
+    </div>
+
+    <div ref="modalWrapper" :class="['overflow-y-auto', ui.innerWrapper]">
+      <slot />
+    </div>
+  </UModal>
+</template>
+
+<script lang="ts" setup>
+import { type PropType, defineShortcuts, ref, toRef, watch } from '#imports'
+import type { Strategy } from '#core/types/utils'
+import { useUI } from '#ui/composables/useUI'
+import { modal } from '#core/ui.config'
+import { useUiConfig } from '#core/composables/useConfig'
+
+const config = useUiConfig<typeof modal>(modal, 'modal')
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  overlay: {
+    type: Boolean,
+    default: true,
+  },
+  transition: {
+    type: Boolean,
+    default: true,
+  },
+  preventClose: {
+    type: Boolean,
+    default: false,
+  },
+  fullscreen: {
+    type: Boolean,
+    default: false,
+  },
+  scrollable: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  isHideCloseBtn: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String as PropType<keyof typeof modal.size>,
+    default: () => modal.default.size,
+  },
+  position: {
+    type: String as PropType<keyof typeof modal.position>,
+    default: () => modal.default.position,
+  },
+  fixHeightSize: {
+    type: String as PropType<keyof typeof modal.fixHeightSize>,
+    default: () => modal.default.fixHeightSize,
+  },
+  class: {
+    type: [String, Array, Object] as PropType<any>,
+    default: undefined,
+  },
+  ui: {
+    type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+    default: undefined,
+  },
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+defineShortcuts({
+  escape: {
+    usingInput: true,
+    handler: () => {
+      if (props.preventClose) return
+      emits('update:modelValue', false)
+    },
+  },
+})
+
+const modalWrapper = ref<HTMLElement | null>(null)
+
+const close = () => {
+  emits('update:modelValue', false)
+}
+
+const { ui, attrs } = useUI('modal', toRef(props, 'ui'), config, toRef(props, 'class'))
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (props.modelValue) {
+      const size = config.size[props.size]
+      const fixHeightSize = config.fixHeightSize[props.fixHeightSize]
+      const position = config.position[props.position]
+
+      ui.value.width = size
+      ui.value.container = position
+
+      if (props.scrollable) {
+        ui.value.height = fixHeightSize
+      }
+    }
+  }
+)
+</script>

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

@@ -0,0 +1,109 @@
+<template>
+  <USlideover
+    v-bind="attrs"
+    :model-value="modelValue"
+    :prevent-close="preventClose"
+    :overlay="overlay"
+    :transition="transition"
+    :side="side"
+    :initial-focus="emptyFocusRef"
+    :ui="ui"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <div v-if="!isHideCloseBtn && preventClose" class="absolute right-0 m-4">
+      <Icon
+        v-if="!isHideCloseBtn"
+        name="i-heroicons-x-mark"
+        class="h-6 w-6 cursor-pointer"
+        @click="close"
+      />
+    </div>
+
+    <div :class="['overflow-y-auto', ui.bodyWrapper]">
+      <slot />
+    </div>
+  </USlideover>
+
+  <div ref="emptyFocusRef" />
+</template>
+
+<script lang="ts" setup>
+import { ref, type PropType, toRef, defineShortcuts, watch } from '#imports'
+import type { Strategy } from '#core/types/utils'
+import { useUI } from '#ui/composables/useUI'
+import { slideover } from '#core/ui.config'
+import { useUiConfig } from '#core/composables/useConfig'
+
+const config = useUiConfig<typeof slideover>(slideover, 'slideover')
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+  side: {
+    type: String as PropType<'left' | 'right'>,
+    default: 'right',
+    validator: (value: string) => ['left', 'right'].includes(value),
+  },
+  overlay: {
+    type: Boolean,
+    default: true,
+  },
+  preventClose: {
+    type: Boolean,
+    default: false,
+  },
+  isHideCloseBtn: {
+    type: Boolean,
+    default: false,
+  },
+  transition: {
+    type: Boolean,
+    default: true,
+  },
+  size: {
+    type: String as PropType<keyof typeof slideover.size>,
+    default: () => slideover.default.size,
+  },
+  class: {
+    type: [String, Array, Object] as PropType<any>,
+    default: undefined,
+  },
+  ui: {
+    type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+    default: undefined,
+  },
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const emptyFocusRef = ref<HTMLElement | null>(null)
+
+defineShortcuts({
+  escape: {
+    usingInput: true,
+    handler: () => {
+      if (props.preventClose) return
+      emits('update:modelValue', false)
+    },
+  },
+})
+
+const close = () => {
+  emits('update:modelValue', false)
+}
+
+const { ui, attrs } = useUI('slideover', toRef(props, 'ui'), config, toRef(props, 'class'))
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (props.modelValue) {
+      const size = config.size[props.size]
+
+      ui.value.width = size
+    }
+  }
+)
+</script>

package/dist/runtime/components/Table/ColumnImage.vue

@@ -0,0 +1,13 @@
+<template><img class="h-12" :src="getValue" /></template>
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { type IColumn } from '#core/components/Table/types'
+
+const props = defineProps<{
+  value: any
+  row: any
+  column: IColumn
+}>()
+
+const getValue = computed(() => props.value)
+</script>

package/dist/runtime/components/Table/ColumnNumber.vue

@@ -0,0 +1,14 @@
+<template>{{ getValue }}</template>
+<script lang="ts" setup>
+import { StringHelper } from '../../utils/StringHelper'
+import { computed } from 'vue'
+import { type IColumn } from '#core/components/Table/types'
+
+const props = defineProps<{
+  value: any
+  row: any
+  column: IColumn
+}>()
+
+const getValue = computed(() => StringHelper.withComma(props.value))
+</script>

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

@@ -1,11 +1,84 @@
-<template>
-  <UTable :loading="options.status.isLoading" :columns="options.columns" :rows="options.rawData"/>
-</template>
-<script lang="ts" setup>
-import {PropType} from 'vue';
-import {ITableOptions} from '#core/components/Table/types';
-
-defineProps({
-  options: {type: Object as PropType<ITableOptions>, required: true},
-});
-</script>
+<template>
+  <div>
+    <div
+      v-if="!options.isHideToolbar"
+      class="flex border-b border-gray-200 px-3 py-3.5 dark:border-gray-700"
+    >
+      <UInput v-model="q" placeholder="Search..." />
+    </div>
+    <UTable
+      :loading="options.status.isLoading"
+      :columns="options.columns"
+      :rows="options.rawData"
+      v-bind="$attrs"
+    >
+      <template #empty-state>
+        <div class="flex flex-col items-center justify-center gap-3 py-6">
+          <span class="text-sm italic">No one here!</span>
+        </div>
+      </template>
+      <template
+        v-for="column in options.columns"
+        #[`${column.key}-data`]="{ row }"
+        :key="column.key"
+      >
+        <ColumnNumber
+          v-if="column.type === COLUMN_TYPES.NUMBER"
+          :value="row[column.key]"
+          :column="column"
+          :row="row"
+        />
+        <ColumnImage
+          v-if="column.type === COLUMN_TYPES.IMAGE"
+          :value="row[column.key]"
+          :column="column"
+          :row="row"
+        />
+        <template v-else>
+          <span :title="row[column.key]">{{ row[column.key] ?? '-' }}</span>
+        </template>
+      </template>
+      <template v-for="(_, slot) of $slots" #[slot]="scope">
+        <slot :name="slot" v-bind="scope" />
+      </template>
+    </UTable>
+    <div class="mt-4 flex justify-end">
+      <UPagination
+        v-model="page"
+        :page-count="options.pageOptions.totalPage"
+        :total="options.pageOptions.totalCount"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { type PropType } from 'vue'
+import { COLUMN_TYPES, type ITableOptions } from '#core/components/Table/types'
+import { _debounce, ref, watch } from '#imports'
+import ColumnNumber from '#core/components/Table/ColumnNumber.vue'
+import ColumnImage from '#core/components/Table/ColumnImage.vue'
+
+const emits = defineEmits<{
+  (event: 'pageChange', page: number): void
+  (event: 'search', q: string): void
+}>()
+
+const props = defineProps({
+  options: { type: Object as PropType<ITableOptions>, required: true },
+})
+
+const q = ref(props.options?.pageOptions.search ?? '')
+
+const page = ref(props.options?.pageOptions.currentPage)
+
+watch(
+  q,
+  _debounce((value) => {
+    emits('search', value)
+  }, 500)
+)
+
+watch(page, () => {
+  emits('pageChange', page.value)
+})
+</script>

package/dist/runtime/components/Table/types.d.ts

@@ -5,27 +5,16 @@ export declare const enum COLUMN_TYPES {
     DATE = "DATE",
     DATE_TIME = "DATE_TIME",
     NUMBER = "NUMBER",
+    IMAGE = "IMAGE",
     ACTION = "ACTION"
 }
-export declare const enum SORT_STATUS {
-    ASC = "asc",
-    DESC = "desc",
-    NONE = "none"
-}
 export interface IColumn {
     [key: string]: any;
     key: string;
     sortable?: boolean;
     direction?: 'asc' | 'desc';
     class?: string;
-}
-export interface IColumnItem extends IColumn {
-    sortStatus?: SORT_STATUS;
-}
-export interface IColumnSortStatus {
-    value: string | any;
-    sortKey?: string;
-    sortStatus: SORT_STATUS;
+    type?: COLUMN_TYPES;
 }
 export interface IRowItem<T = object> {
     value: string | any;
@@ -46,7 +35,6 @@ export interface ITableOptions<T = object> {
     status: IStatus;
     pageOptions: IPageOptions;
     columns: IColumn[];
-    rows: any[];
     isHideToolbar?: boolean;
     isShowCheckbox?: boolean;
     deleteStatus?: IStatus;
@@ -54,7 +42,6 @@ export interface ITableOptions<T = object> {
         value: string;
     }>) => void;
     onCheckBoxClick?: (index: number[]) => void;
-    onSortChange?: (sortStatus: IColumnSortStatus[]) => void;
     disabledCheckIndexes?: number[];
 }
 export interface ISimpleTableOptions<T = object> {
@@ -62,11 +49,9 @@ export interface ISimpleTableOptions<T = object> {
     primary: string;
     status: IStatus;
     columns: IColumn[];
-    rows: Array<IRow<T>>;
     isHideBottomPagination?: boolean;
     onRowClick?: (index: number, columns: Array<{
         value: string;
     }>) => void;
     onCheckBoxClick?: (index: number[]) => void;
-    onSortChange?: (sortStatus: IColumnSortStatus[]) => void;
 }

package/dist/runtime/components/Table/types.mjs

@@ -4,12 +4,7 @@ export var COLUMN_TYPES = /* @__PURE__ */ ((COLUMN_TYPES2) => {
   COLUMN_TYPES2["DATE"] = "DATE";
   COLUMN_TYPES2["DATE_TIME"] = "DATE_TIME";
   COLUMN_TYPES2["NUMBER"] = "NUMBER";
+  COLUMN_TYPES2["IMAGE"] = "IMAGE";
   COLUMN_TYPES2["ACTION"] = "ACTION";
   return COLUMN_TYPES2;
 })(COLUMN_TYPES || {});
-export var SORT_STATUS = /* @__PURE__ */ ((SORT_STATUS2) => {
-  SORT_STATUS2["ASC"] = "asc";
-  SORT_STATUS2["DESC"] = "desc";
-  SORT_STATUS2["NONE"] = "none";
-  return SORT_STATUS2;
-})(SORT_STATUS || {});

package/dist/runtime/composables/loaderPage.mjs

@@ -1,7 +1,5 @@
 import { ref } from "vue";
 import { ObjectHelper } from "../utils/ObjectHelper.mjs";
-import { mergeConfig } from "#ui/utils";
-import { app } from "#core/core.config";
 import {
   apiAddHelper,
   apiDeleteHelper,
@@ -9,7 +7,7 @@ import {
   apiFindHelper,
   updateHelper
 } from "#core/helpers/apiPageHelper";
-import appConfig from "#build/app.config";
+import { useCoreConfig } from "./useConfig.mjs";
 export const initPageOptions = (options) => ({
   currentPageCount: 0,
   currentPage: 1,
@@ -20,7 +18,7 @@ export const initPageOptions = (options) => ({
   primary: options.primary
 });
 export const usePageLoader = (loaderOptions) => {
-  const config = mergeConfig(appConfig.app.strategy, appConfig.app, app);
+  const config = useCoreConfig();
   const fetchStatus = ref(ObjectHelper.createStatus());
   const fetchItems = ref([]);
   const findItem = ref(null);

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

@@ -0,0 +1,3 @@
+import { type UIComponentList } from '../types/config';
+export declare const useCoreConfig: () => any;
+export declare const useUiConfig: <T>(config: object, name: UIComponentList) => any;

package/dist/runtime/composables/useConfig.mjs

@@ -0,0 +1,9 @@
+import { mergeConfig } from "#ui/utils";
+import { core } from "#core/core.config";
+import appConfig from "#build/app.config";
+export const useCoreConfig = () => {
+  return mergeConfig(appConfig.core.strategy, appConfig.core, core);
+};
+export const useUiConfig = (config, name) => {
+  return mergeConfig(appConfig.ui.strategy, appConfig.ui[name], config);
+};

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

@@ -0,0 +1,26 @@
+export declare const enum DialogType {
+    ERROR = "error",
+    INFO = "info",
+    SUCCESS = "success",
+    WARNING = "warning"
+}
+export interface IDialogMetaItem {
+    title: string;
+    message?: string;
+    type?: DialogType;
+    confirmText?: string;
+    cancelText?: string;
+    isShowCancelBtn?: boolean;
+}
+export interface IDialog {
+    isShow: boolean;
+    meta: IDialogMetaItem | undefined;
+    openDialog: (meta: IDialogMetaItem) => void;
+    closeDialogCancel: () => void;
+    closeDialogProceed: () => void;
+    error: (payload: IDialogMetaItem) => Promise<boolean>;
+    info: (payload: IDialogMetaItem) => Promise<boolean>;
+    success: (payload: IDialogMetaItem) => Promise<boolean>;
+    warning: (payload: IDialogMetaItem) => Promise<boolean>;
+}
+export declare const useDialog: () => IDialog;