@finema/core 1.4.219 → 2.1.0

package/package.json

@@ -1,43 +1,44 @@
 {
   "name": "@finema/core",
-  "version": "1.4.219",
+  "version": "2.1.0",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/types.d.ts",
-      "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
+      "types": "./dist/types.d.mts",
+      "default": "./dist/module.mjs"
+    }
+  },
+  "main": "./dist/module.mjs",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ]
     }
   },
-  "main": "./dist/module.cjs",
-  "types": "./dist/types.d.ts",
   "files": [
     "dist"
   ],
-  "engines": {
-    "node": ">=18.0.0"
-  },
   "scripts": {
     "prepack": "nuxt-module-build build",
     "dev": "nuxi dev playground -o",
-    "docs": "nuxi dev docs -o",
     "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare docs",
-    "docs:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare docs",
-    "lint": "eslint . --cache",
-    "lint:fix": "eslint . --fix --cache",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
     "test": "vitest run",
     "test:watch": "vitest watch",
-    "release": "release-it --ci",
-    "prepare": "husky install"
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
+    "prepare": "husky"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.13.1",
-    "@nuxt/ui": "2.20.0",
-    "@pinia/nuxt": "^0.7.0",
+    "@nuxt/kit": "^3.17.4",
+    "@nuxt/ui": "^3.1.2",
+    "@pinia/nuxt": "^0.11.0",
     "@tiptap/extension-image": "^2.8.0",
     "@tiptap/extension-link": "^2.8.0",
     "@tiptap/extension-text-align": "^2.8.0",
@@ -47,54 +48,44 @@
     "@tiptap/pm": "^2.8.0",
     "@tiptap/starter-kit": "^2.8.0",
     "@tiptap/vue-3": "^2.8.0",
-    "@vee-validate/nuxt": "^4.13.2",
-    "@vee-validate/zod": "^4.13.2",
-    "@vuepic/vue-datepicker": "^8.2.0",
-    "@wdns/vue-code-block": "^2.3.3",
-    "axios": "^1.7.2",
-    "cheerio": "1.0.0-rc.12",
-    "date-fns": "^3.3.1",
-    "date-fns-tz": "^3.1.3",
+    "@vee-validate/nuxt": "^4.15.0",
+    "@vee-validate/valibot": "^4.15.0",
+    "@vuepic/vue-datepicker": "^11.0.2",
+    "@vueuse/components": "^13.2.0",
+    "@vueuse/core": "^13.2.0",
+    "@wdns/vue-code-block": "^2.3.5",
+    "axios": "^1.9.0",
+    "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0",
     "defu": "^6.1.4",
-    "i18next": "^23.12.2",
-    "maska": "^2.1.11",
+    "maska": "^3.0.4",
     "nuxt-lodash": "^2.5.3",
-    "nuxt-security": "^1.2.2",
-    "qrcode.vue": "^3.4.1",
-    "url-join": "^5.0.0",
-    "zod": "^3.23.8",
-    "zod-i18n-map": "^2.27.0"
+    "url-join": "^5.0.0"
   },
   "devDependencies": {
-    "@finema/eslint-config": "^1.2.0",
-    "@nuxt/devtools": "^1.4.2",
-    "@nuxt/eslint-config": "^0.5.0",
-    "@nuxt/module-builder": "^0.5.5",
-    "@nuxt/schema": "^3.13.1",
-    "@nuxt/test-utils": "^3.13.1",
-    "@release-it/conventional-changelog": "^8.0.1",
-    "@types/node": "^20.10.17",
-    "@vue/test-utils": "^2.4.6",
-    "changelogen": "^0.5.5",
-    "eslint": "^8.56.0",
-    "happy-dom": "^13.0.0",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.0",
-    "nuxt": "^3.13.1",
-    "playwright-core": "^1.42.1",
-    "prettier": "^3.1.1",
-    "release-it": "^17.0.1",
-    "sass": "^1.69.5",
-    "stylelint": "^16.1.0",
-    "stylelint-config-prettier-scss": "^1.0.0",
-    "stylelint-config-standard-scss": "^13.0.0",
-    "vitest": "^2.0.4"
+    "@eslint/js": "^9.26.0",
+    "@nuxt/devtools": "^2.4.1",
+    "@nuxt/eslint-config": "^1.3.1",
+    "@nuxt/module-builder": "^1.0.1",
+    "@nuxt/schema": "^3.17.3",
+    "@nuxt/test-utils": "^3.19.0",
+    "@types/node": "latest",
+    "changelogen": "^0.5.7",
+    "eslint": "^9.26.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.7.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-tailwindcss": "^3.17.5",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.0.0",
+    "nuxt": "3.17.3",
+    "typescript": "~5.6.3",
+    "typescript-eslint": "^8.18.0",
+    "vitest": "^3.1.3",
+    "vue-tsc": "^2.2.10"
   },
   "lint-staged": {
-    "*.{ts,vue,tsx,js}": "eslint --fix --cache"
-  },
-  "workspaces": [
-    "./*"
-  ],
-  "packageManager": "yarn@4.4.1"
+    "*": "eslint --fix ."
+  }
 }

package/dist/module.cjs

@@ -1,5 +0,0 @@
-module.exports = function(...args) {
-  return import('./module.mjs').then(m => m.default.call(this, ...args))
-}
-const _meta = module.exports.meta = require('./module.json')
-module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.ts

@@ -1,50 +0,0 @@
-import * as _nuxt_schema from '@nuxt/schema';
-
-declare const core: {
-    limit_per_page: number;
-    default_primary_key: string;
-    time_format: string;
-    date_format: string;
-    date_time_format: string;
-    date_format_system: string;
-    date_time_format_system: string;
-    is_thai_year: boolean;
-    is_thai_month: boolean;
-    site_name: string;
-    is_simple_pagination: boolean;
-    time_zone: string;
-};
-
-declare const config_core: typeof core;
-declare namespace config {
-  export { config_core as core };
-}
-
-interface ModuleOptions {
-    /**
-     * @default ''
-     */
-    prefix?: string;
-    /**
-     * @default false
-     */
-    global?: boolean;
-    securityDisabled?: boolean;
-}
-type CORE = {
-    strategy?: 'merge' | 'override';
-    [key: string]: any;
-} & Partial<typeof config>;
-declare module 'nuxt/schema' {
-    interface AppConfigInput {
-        core?: CORE;
-    }
-}
-declare module '@nuxt/schema' {
-    interface AppConfigInput {
-        core?: CORE;
-    }
-}
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
-
-export { type ModuleOptions, _default as default };

package/dist/runtime/components/Alert.vue

@@ -1,48 +0,0 @@
-<template>
-  <UAlert v-bind="$props">
-    <template #title><slot name="title" :title="title" /></template>
-    <template #description><slot name="description" :description="description" /></template>
-  </UAlert>
-</template>
-<script lang="ts" setup>
-import { type PropType } from 'vue'
-import { type alert } from '#ui/ui.config'
-import type { AlertColor, AlertVariant, Avatar, Button, Strategy } from '#ui/types'
-
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    default: null,
-  },
-  icon: {
-    type: String,
-  },
-  avatar: {
-    type: Object as PropType<Avatar>,
-    default: null,
-  },
-  closeButton: {
-    type: Object as PropType<Button>,
-  },
-  actions: {
-    // eslint-disable-next-line @typescript-eslint/ban-types
-    type: Array as PropType<Array<Button & { click?: Function }>>,
-  },
-  color: {
-    type: String as PropType<AlertColor>,
-  },
-  variant: {
-    type: String as PropType<AlertVariant>,
-  },
-  class: {
-    type: [String, Object, Array] as PropType<any>,
-  },
-  ui: {
-    type: Object as PropType<Partial<typeof alert> & { strategy?: Strategy }>,
-  },
-})
-</script>

package/dist/runtime/components/Avatar.vue

@@ -1,27 +0,0 @@
-<template>
-  <UAvatar v-bind="$attrs" :src="src" :alt="alt" :size="size" />
-</template>
-
-<script lang="ts" setup>
-import type { AvatarSize } from '#ui/types'
-import type { PropType } from 'vue'
-
-defineOptions({
-  inheritAttrs: true,
-})
-
-defineProps({
-  src: {
-    type: String,
-    required: true,
-  },
-  alt: {
-    type: String,
-    required: true,
-  },
-  size: {
-    type: String as PropType<AvatarSize>,
-    default: 'sm',
-  },
-})
-</script>

package/dist/runtime/components/Badge.vue

@@ -1,11 +0,0 @@
-<template>
-  <UBadge v-bind="$props">
-    <slot />
-  </UBadge>
-</template>
-
-<script setup lang="ts">
-import type { Badge } from '#ui/types/badge'
-
-defineProps<Badge>()
-</script>

package/dist/runtime/components/Breadcrumb.vue

@@ -1,44 +0,0 @@
-<template>
-  <UBreadcrumb v-bind="attrs" :class="$props.class" :links="links" :divider="divider" :ui="ui">
-    <template #default="{ link, isActive, index }">
-      <slot name="default" :link="link" :is-active="isActive" :index="index" />
-    </template>
-
-    <template #icon="{ link, index, isActive }">
-      <slot name="icon" :link="link" :is-active="isActive" :index="index" />
-    </template>
-
-    <template #divider>
-      <slot name="divider" />
-    </template>
-  </UBreadcrumb>
-</template>
-
-<script setup lang="ts">
-import { useUiConfig, type PropType, useUI, toRef } from '#imports'
-import { breadcrumb } from '#core/ui.config'
-import type { BreadcrumbLink, Strategy } from '#ui/types'
-
-const config = useUiConfig<typeof breadcrumb>(breadcrumb, 'breadcrumb')
-
-const props = defineProps({
-  links: {
-    type: Array as PropType<BreadcrumbLink[]>,
-    default: () => [],
-  },
-  divider: {
-    type: String,
-    default: () => breadcrumb.default.divider,
-  },
-  class: {
-    type: [String, Object, Array] as PropType<any>,
-    default: () => '',
-  },
-  ui: {
-    type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-    default: () => ({}),
-  },
-})
-
-const { ui, attrs } = useUI('breadcrumb', toRef(props, 'ui'), config, toRef(props, 'class'))
-</script>

package/dist/runtime/components/Button/Group.vue

@@ -1,37 +0,0 @@
-<template>
-  <UButtonGroup v-bind="$props">
-    <slot />
-  </UButtonGroup>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue'
-import type { ButtonSize } from '#ui/types/button'
-import { button, type buttonGroup } from '#ui/ui.config'
-import type { Strategy } from '#ui/types'
-
-defineProps({
-  size: {
-    type: String as PropType<ButtonSize>,
-    default: () => button.default.size,
-    validator(value: string) {
-      return Object.keys(button.size).includes(value)
-    },
-  },
-  orientation: {
-    type: String as PropType<'horizontal' | 'vertical'>,
-    default: 'horizontal',
-    validator(value: string) {
-      return ['horizontal', 'vertical'].includes(value)
-    },
-  },
-  class: {
-    type: [String, Object, Array] as PropType<any>,
-    default: undefined,
-  },
-  ui: {
-    type: Object as PropType<Partial<typeof buttonGroup> & { strategy?: Strategy }>,
-    default: undefined,
-  },
-})
-</script>

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

@@ -1,75 +0,0 @@
-<template>
-  <UButton v-bind="$props">
-    <template #leading><slot name="leading" :disabled="disabled" :loading="loading" /></template>
-    <slot />
-    <template #trailing><slot name="trailing" :disabled="disabled" :loading="loading" /></template>
-  </UButton>
-</template>
-
-<script lang="ts" setup>
-import { type button } from '#ui/ui.config'
-import { UButton } from '#components'
-import type { ButtonColor, ButtonSize, ButtonVariant } from '#ui/types/button'
-import type { PropType } from 'vue'
-
-defineProps({
-  label: {
-    type: String,
-  },
-  type: {
-    type: String as PropType<'button' | 'submit' | 'reset'>,
-  },
-  block: {
-    type: Boolean,
-  },
-  loading: {
-    type: Boolean,
-  },
-  disabled: {
-    type: Boolean,
-  },
-  padded: {
-    type: Boolean,
-    default: true,
-  },
-  size: {
-    type: String as PropType<ButtonSize>,
-  },
-  color: {
-    type: String as PropType<ButtonColor>,
-  },
-  variant: {
-    type: String as PropType<ButtonVariant>,
-  },
-  loadingIcon: {
-    type: String,
-  },
-  icon: {
-    type: String,
-  },
-  leadingIcon: {
-    type: String,
-  },
-  trailingIcon: {
-    type: String,
-  },
-  trailing: {
-    type: Boolean,
-  },
-  leading: {
-    type: Boolean,
-  },
-  square: {
-    type: Boolean,
-  },
-  truncate: {
-    type: Boolean,
-  },
-  class: {
-    type: [String, Array, Object] as PropType<any>,
-  },
-  ui: {
-    type: Object as PropType<Partial<typeof button & { strategy?: Strategy }>>,
-  },
-})
-</script>

package/dist/runtime/components/Card.vue

@@ -1,38 +0,0 @@
-<template>
-  <UCard v-bind="attrs" :class="$props.class" :as="as" :ui="ui">
-    <template #header>
-      <slot name="header" />
-    </template>
-
-    <slot />
-
-    <template #footer>
-      <slot name="footer" />
-    </template>
-  </UCard>
-</template>
-
-<script setup lang="ts">
-import { useUiConfig, type PropType, useUI, toRef } from '#imports'
-import { card } from '#core/ui.config'
-import type { Strategy } from '#ui/types'
-
-const config = useUiConfig<typeof card>(card, 'card')
-
-const props = defineProps({
-  as: {
-    type: String,
-    default: 'div',
-  },
-  class: {
-    type: [String, Object, Array] as PropType<any>,
-    default: () => '',
-  },
-  ui: {
-    type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-    default: () => ({}),
-  },
-})
-
-const { ui, attrs } = useUI('card', toRef(props, 'ui'), config, toRef(props, 'class'))
-</script>

package/dist/runtime/components/Core.vue

@@ -1,45 +0,0 @@
-<template>
-  <NuxtLoadingIndicator :color="color" />
-  <Dialog />
-  <UNotifications>
-    <template #title="{ title }">
-      <span v-html="title" />
-    </template>
-
-    <template #description="{ description }">
-      <span v-html="description" />
-    </template>
-  </UNotifications>
-  <div v-if="isDevEnv" class="fixed bottom-4 right-4 z-50">
-    <div class="flex flex-col items-end justify-end">
-      <div
-        v-show="isShowDevTools"
-        class="max-w-screen mb-4 h-[750px] max-h-screen w-[600px] overflow-auto rounded-lg border bg-white opacity-80 shadow-2xl"
-      >
-        <p class="p-3 text-lg font-semibold">Debug Tools</p>
-        <hr />
-        <div id="dev-logs" class="flex flex-col space-y-3 p-3" />
-      </div>
-      <Button
-        :icon="isShowDevTools ? 'heroicons:x-mark' : 'heroicons:information-circle'"
-        color="info"
-        square
-        :ui="{ rounded: 'rounded-full' }"
-        @click="isShowDevTools = !isShowDevTools"
-      />
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-defineProps({
-  color: {
-    type: String,
-    default: '#3675FB',
-  },
-})
-
-const isShowDevTools = ref(false)
-const isDevEnv = process.env.NODE_ENV === 'development'
-</script>

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

@@ -1,70 +0,0 @@
-<template>
-  <UDropdown
-    v-bind="attrs"
-    :class="$props.class"
-    :items="items"
-    :mode="mode"
-    :open-delay="openDelay"
-    :close-delay="closeDelay"
-    :popper="{ placement: placement, arrow: arrow, offsetDistance: offset }"
-    :ui="ui"
-  >
-    <slot />
-
-    <template v-for="(_, slot) of $slots" #[slot]="slotProps">
-      <slot :name="slot" v-bind="slotProps || {}" />
-    </template>
-  </UDropdown>
-</template>
-
-<script lang="ts" setup>
-import { type PropType, useUiConfig, useUI, toRef } from '#imports'
-import { dropdown } from '#ui/ui.config'
-import { DropdownPlacementArray, type DropdownPlacement } from './types'
-import type { DropdownItem, Strategy } from '#ui/types'
-
-const config = useUiConfig<typeof dropdown>(dropdown, 'dropdown')
-
-const props = defineProps({
-  items: {
-    type: Array as PropType<DropdownItem[][]>,
-    default: () => [],
-  },
-  mode: {
-    type: String as PropType<'click' | 'hover'>,
-    default: 'click',
-    validator: (value: string) => ['click', 'hover'].includes(value),
-  },
-  arrow: {
-    type: Boolean,
-    default: false,
-  },
-  offset: {
-    type: Number,
-    default: 10,
-  },
-  openDelay: {
-    type: Number,
-    default: 0,
-  },
-  closeDelay: {
-    type: Number,
-    default: 0,
-  },
-  placement: {
-    type: String as PropType<DropdownPlacement>,
-    default: 'bottom-start',
-    validator: (value: DropdownPlacement) => DropdownPlacementArray.includes(value),
-  },
-  class: {
-    type: [String, Array, Object] as PropType<any>,
-    default: () => '',
-  },
-  ui: {
-    type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
-    default: () => ({}),
-  },
-})
-
-const { ui, attrs } = useUI('dropdown', toRef(props, 'ui'), config, toRef(props, 'class'))
-</script>

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

@@ -1,2 +0,0 @@
-export type DropdownPlacement = 'auto' | 'auto-end' | 'auto-start' | 'bottom' | 'bottom-end' | 'bottom-start' | 'left' | 'left-end' | 'left-start' | 'right' | 'right-end' | 'right-start' | 'top' | 'top-end' | 'top-start';
-export declare const DropdownPlacementArray: DropdownPlacement[];

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

@@ -1,17 +0,0 @@
-export const DropdownPlacementArray = [
-  "auto",
-  "auto-end",
-  "auto-start",
-  "bottom",
-  "bottom-end",
-  "bottom-start",
-  "left",
-  "left-end",
-  "left-start",
-  "right",
-  "right-end",
-  "right-start",
-  "top",
-  "top-end",
-  "top-start"
-];

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

@@ -1,17 +0,0 @@
-import { type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
-import type { IDateTimeFieldProps } from '../InputDateTime/date_time_field.types';
-export interface ITimeOption {
-    hours?: number | string;
-    minutes?: number | string;
-    seconds?: number | string;
-}
-export interface IDateTimeRangeResponse {
-    start: Date | string;
-    end: Date | string;
-}
-export interface IDateTimeRangeFieldProps extends IDateTimeFieldProps {
-    isDisabledMultiCalendar?: boolean;
-}
-export type IDateTimeRangeField = IFormFieldBase<INPUT_TYPES.DATE_RANGE | INPUT_TYPES.DATE_TIME_RANGE, IDateTimeRangeFieldProps, {
-    change: (value: IDateTimeRangeResponse) => void;
-}>;