@finema/core 1.2.2 → 1.3.0

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

@@ -0,0 +1,84 @@
+<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

@@ -0,0 +1,57 @@
+import { type IPageOptions, type IStatus } from '#core/types/lib';
+export declare const enum COLUMN_TYPES {
+    VALUE = "VALUE",
+    COMPONENT = "COMPONENT",
+    DATE = "DATE",
+    DATE_TIME = "DATE_TIME",
+    NUMBER = "NUMBER",
+    IMAGE = "IMAGE",
+    ACTION = "ACTION"
+}
+export interface IColumn {
+    [key: string]: any;
+    key: string;
+    sortable?: boolean;
+    direction?: 'asc' | 'desc';
+    class?: string;
+    type?: COLUMN_TYPES;
+}
+export interface IRowItem<T = object> {
+    value: string | any;
+    type?: COLUMN_TYPES;
+    title?: string;
+    className?: string;
+    isSelect?: boolean;
+    props?: Record<string, any>;
+    on?: Record<string, any>;
+}
+export type IRow<T = object> = Record<number, IRowItem<T>>;
+export interface ITableOptions<T = object> {
+    rawData: T[];
+    primary: string;
+    isHideBottomPagination?: boolean;
+    isHideTopPagination?: boolean;
+    isNotChangeRoute: boolean;
+    status: IStatus;
+    pageOptions: IPageOptions;
+    columns: IColumn[];
+    isHideToolbar?: boolean;
+    isShowCheckbox?: boolean;
+    deleteStatus?: IStatus;
+    onRowClick?: (index: number, columns: Array<{
+        value: string;
+    }>) => void;
+    onCheckBoxClick?: (index: number[]) => void;
+    disabledCheckIndexes?: number[];
+}
+export interface ISimpleTableOptions<T = object> {
+    rawData: T[];
+    primary: string;
+    status: IStatus;
+    columns: IColumn[];
+    isHideBottomPagination?: boolean;
+    onRowClick?: (index: number, columns: Array<{
+        value: string;
+    }>) => void;
+    onCheckBoxClick?: (index: number[]) => void;
+}

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

@@ -0,0 +1,10 @@
+export var COLUMN_TYPES = /* @__PURE__ */ ((COLUMN_TYPES2) => {
+  COLUMN_TYPES2["VALUE"] = "VALUE";
+  COLUMN_TYPES2["COMPONENT"] = "COMPONENT";
+  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 || {});

package/dist/runtime/{lib/api → composables}/loaderList.d.ts

@@ -1,2 +1 @@
-import { type IListLoaderOptions, type IUseListLoader } from './loaderTypes';
 export declare const useListLoader: <T = any, O = Record<string, any>>(loaderOptions: IListLoaderOptions<T, O>) => IUseListLoader<T, O>;

package/dist/runtime/{lib/api → composables}/loaderList.mjs

@@ -1,6 +1,6 @@
 import { ref } from "vue";
-import { ObjectHelper } from "../../utils/ObjectHelper.mjs";
-import { apiListHelper } from "./apiListHelper.mjs";
+import { ObjectHelper } from "../utils/ObjectHelper.mjs";
+import { apiListHelper } from "#core/helpers/apiListHelper";
 export const useListLoader = (loaderOptions) => {
   const status = ref(ObjectHelper.createStatus());
   const items = ref([]);

package/dist/runtime/{lib/api → composables}/loaderObject.d.ts

@@ -1,2 +1 @@
-import { type IObjectLoaderOptions, type IUseObjectLoader } from './loaderTypes';
 export declare const useObjectLoader: <T = any, B = any, O = Record<string, any>>(loaderOptions: IObjectLoaderOptions<T, B, O>) => IUseObjectLoader<T, B, O>;

package/dist/runtime/{lib/api → composables}/loaderObject.mjs

@@ -1,6 +1,6 @@
 import { ref } from "vue";
-import { ObjectHelper } from "../../utils/ObjectHelper.mjs";
-import { apiObjectHelper } from "./apiObjectHelper.mjs";
+import { ObjectHelper } from "../utils/ObjectHelper.mjs";
+import { apiObjectHelper } from "#core/helpers/apiObjectHelper";
 export const useObjectLoader = (loaderOptions) => {
   const status = ref(ObjectHelper.createStatus());
   const data = ref(null);

package/dist/runtime/{lib/api → composables}/loaderPage.d.ts

@@ -1,5 +1,7 @@
-import { type IPageLoaderOptions, type IUsePageLoader } from './loaderTypes';
-export declare const initPageOptions: () => {
+export declare const initPageOptions: (options: {
+    limit: number;
+    primary: string;
+}) => {
     currentPageCount: number;
     currentPage: number;
     totalPage: number;

package/dist/runtime/{lib/api → composables}/loaderPage.mjs

@@ -1,23 +1,24 @@
 import { ref } from "vue";
-import { ObjectHelper } from "../../utils/ObjectHelper.mjs";
+import { ObjectHelper } from "../utils/ObjectHelper.mjs";
 import {
   apiAddHelper,
   apiDeleteHelper,
   apiFetchHelper,
   apiFindHelper,
   updateHelper
-} from "./apiPageHelper.mjs";
-import { CONFIG } from "./config.mjs";
-export const initPageOptions = () => ({
+} from "#core/helpers/apiPageHelper";
+import { useCoreConfig } from "./useConfig.mjs";
+export const initPageOptions = (options) => ({
   currentPageCount: 0,
   currentPage: 1,
   totalPage: 0,
   totalCount: 0,
-  limit: CONFIG.LIMIT_PER_PAGE,
+  limit: options.limit,
   search: "",
-  primary: CONFIG.DEFAULT_PRIMARY
+  primary: options.primary
 });
 export const usePageLoader = (loaderOptions) => {
+  const config = useCoreConfig();
   const fetchStatus = ref(ObjectHelper.createStatus());
   const fetchItems = ref([]);
   const findItem = ref(null);
@@ -28,7 +29,12 @@ export const usePageLoader = (loaderOptions) => {
   const addStatus = ref(ObjectHelper.createStatus());
   const updateStatus = ref(ObjectHelper.createStatus());
   const deleteStatus = ref(ObjectHelper.createStatus());
-  const fetchOptions = ref(initPageOptions());
+  const fetchOptions = ref(
+    initPageOptions({
+      limit: config.limit_per_page,
+      primary: config.default_primary_key
+    })
+  );
   const addOptions = ref({});
   const findOptions = ref({});
   const updateOptions = ref({});
@@ -42,7 +48,10 @@ export const usePageLoader = (loaderOptions) => {
     deleteItem.value = null;
     updateItem.value = null;
     fetchStatus.value = ObjectHelper.createStatus();
-    fetchOptions.value = initPageOptions();
+    fetchOptions.value = initPageOptions({
+      limit: config.limit_per_page,
+      primary: config.default_primary_key
+    });
     findOptions.value = {};
     addOptions.value = {};
     deleteOptions.value = {};

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;