@finema/core 1.4.9 → 1.4.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/README.md +60 -60
  2. package/dist/module.d.mts +4 -4
  3. package/dist/module.d.ts +4 -4
  4. package/dist/module.json +1 -1
  5. package/dist/module.mjs +1 -1
  6. package/dist/runtime/components/Alert.vue +49 -49
  7. package/dist/runtime/components/Avatar.vue +27 -27
  8. package/dist/runtime/components/Badge.vue +54 -54
  9. package/dist/runtime/components/Breadcrumb.vue +45 -45
  10. package/dist/runtime/components/Button/Group.vue +37 -37
  11. package/dist/runtime/components/Button/index.vue +77 -77
  12. package/dist/runtime/components/Card.vue +38 -38
  13. package/dist/runtime/components/Core.vue +13 -11
  14. package/dist/runtime/components/Dialog/index.vue +63 -63
  15. package/dist/runtime/components/Dropdown/index.vue +81 -81
  16. package/dist/runtime/components/Form/FieldWrapper.vue +20 -20
  17. package/dist/runtime/components/Form/Fields.vue +86 -86
  18. package/dist/runtime/components/Form/InputCheckbox/index.vue +21 -21
  19. package/dist/runtime/components/Form/InputDateTime/index.vue +51 -51
  20. package/dist/runtime/components/Form/InputRadio/index.vue +27 -27
  21. package/dist/runtime/components/Form/InputSelect/index.vue +37 -37
  22. package/dist/runtime/components/Form/InputStatic/index.vue +16 -16
  23. package/dist/runtime/components/Form/InputText/index.vue +27 -27
  24. package/dist/runtime/components/Form/InputTextarea/index.vue +25 -25
  25. package/dist/runtime/components/Form/InputToggle/index.vue +14 -14
  26. package/dist/runtime/components/Form/index.vue +6 -6
  27. package/dist/runtime/components/Icon.vue +23 -23
  28. package/dist/runtime/components/Loader.vue +6 -6
  29. package/dist/runtime/components/Modal/index.vue +146 -146
  30. package/dist/runtime/components/Slideover/index.vue +110 -110
  31. package/dist/runtime/components/Table/ColumnDate.vue +16 -16
  32. package/dist/runtime/components/Table/ColumnDateTime.vue +30 -30
  33. package/dist/runtime/components/Table/ColumnImage.vue +13 -13
  34. package/dist/runtime/components/Table/ColumnNumber.vue +14 -14
  35. package/dist/runtime/components/Table/Simple.vue +53 -53
  36. package/dist/runtime/components/Table/index.vue +47 -47
  37. package/dist/runtime/components/Tabs/index.vue +65 -65
  38. package/dist/runtime/composables/app.d.ts +38 -0
  39. package/dist/runtime/composables/app.mjs +32 -0
  40. package/dist/runtime/types/utils.d.ts +29 -29
  41. package/dist/runtime/ui.css +46 -46
  42. package/package.json +1 -1
@@ -1,13 +1,13 @@
1
- <template><img class="h-12" :src="getValue" /></template>
2
- <script lang="ts" setup>
3
- import { computed } from 'vue'
4
- import { type IColumn } from '#core/components/Table/types'
5
-
6
- const props = defineProps<{
7
- value: any
8
- row: any
9
- column: IColumn
10
- }>()
11
-
12
- const getValue = computed(() => props.value)
13
- </script>
1
+ <template><img class="h-12" :src="getValue" /></template>
2
+ <script lang="ts" setup>
3
+ import { computed } from 'vue'
4
+ import { type IColumn } from '#core/components/Table/types'
5
+
6
+ const props = defineProps<{
7
+ value: any
8
+ row: any
9
+ column: IColumn
10
+ }>()
11
+
12
+ const getValue = computed(() => props.value)
13
+ </script>
@@ -1,14 +1,14 @@
1
- <template>{{ getValue }}</template>
2
- <script lang="ts" setup>
3
- import { StringHelper } from '../../utils/StringHelper'
4
- import { computed } from 'vue'
5
- import { type IColumn } from '#core/components/Table/types'
6
-
7
- const props = defineProps<{
8
- value: any
9
- row: any
10
- column: IColumn
11
- }>()
12
-
13
- const getValue = computed(() => StringHelper.withComma(props.value))
14
- </script>
1
+ <template>{{ getValue }}</template>
2
+ <script lang="ts" setup>
3
+ import { StringHelper } from '../../utils/StringHelper'
4
+ import { computed } from 'vue'
5
+ import { type IColumn } from '#core/components/Table/types'
6
+
7
+ const props = defineProps<{
8
+ value: any
9
+ row: any
10
+ column: IColumn
11
+ }>()
12
+
13
+ const getValue = computed(() => StringHelper.withComma(props.value))
14
+ </script>
@@ -1,53 +1,53 @@
1
- <template>
2
- <Base
3
- v-bind="$attrs"
4
- :columns="options.columns"
5
- :raw-data="itemsByPage"
6
- :status="options.status"
7
- :page-options="pageOptions"
8
- @page-change="onPageChange"
9
- />
10
- </template>
11
- <script lang="ts" setup>
12
- import { computed, type PropType, ref } from 'vue'
13
- import { type ISimpleTableOptions } from '#core/components/Table/types'
14
- import Base from '#core/components/Table/Base.vue'
15
- import { initPageOptions } from '#core/composables/loaderPage'
16
-
17
- const props = defineProps({
18
- options: { type: Object as PropType<ISimpleTableOptions>, required: true },
19
- })
20
-
21
- const currentPage = ref(1)
22
-
23
- const pageOptions = computed(() => {
24
- if (!props.options?.limit) {
25
- return undefined
26
- }
27
-
28
- return {
29
- ...initPageOptions({
30
- limit: props.options.limit,
31
- primary: props.options.primary,
32
- }),
33
- totalCount: props.options.rawData.length,
34
- totalPage: Math.ceil(props.options.rawData.length / props.options.limit),
35
- currentPage: currentPage.value,
36
- }
37
- })
38
-
39
- const onPageChange = (page: number) => {
40
- currentPage.value = page
41
- }
42
-
43
- const itemsByPage = computed(() => {
44
- if (!pageOptions.value) {
45
- return props.options?.rawData
46
- }
47
-
48
- const start = (pageOptions.value.currentPage - 1) * pageOptions.value.limit
49
- const end = start + pageOptions.value.limit
50
-
51
- return props.options?.rawData.slice(start, end)
52
- })
53
- </script>
1
+ <template>
2
+ <Base
3
+ v-bind="$attrs"
4
+ :columns="options.columns"
5
+ :raw-data="itemsByPage"
6
+ :status="options.status"
7
+ :page-options="pageOptions"
8
+ @page-change="onPageChange"
9
+ />
10
+ </template>
11
+ <script lang="ts" setup>
12
+ import { computed, type PropType, ref } from 'vue'
13
+ import { type ISimpleTableOptions } from '#core/components/Table/types'
14
+ import Base from '#core/components/Table/Base.vue'
15
+ import { initPageOptions } from '#core/composables/loaderPage'
16
+
17
+ const props = defineProps({
18
+ options: { type: Object as PropType<ISimpleTableOptions>, required: true },
19
+ })
20
+
21
+ const currentPage = ref(1)
22
+
23
+ const pageOptions = computed(() => {
24
+ if (!props.options?.limit) {
25
+ return undefined
26
+ }
27
+
28
+ return {
29
+ ...initPageOptions({
30
+ limit: props.options.limit,
31
+ primary: props.options.primary,
32
+ }),
33
+ totalCount: props.options.rawData.length,
34
+ totalPage: Math.ceil(props.options.rawData.length / props.options.limit),
35
+ currentPage: currentPage.value,
36
+ }
37
+ })
38
+
39
+ const onPageChange = (page: number) => {
40
+ currentPage.value = page
41
+ }
42
+
43
+ const itemsByPage = computed(() => {
44
+ if (!pageOptions.value) {
45
+ return props.options?.rawData
46
+ }
47
+
48
+ const start = (pageOptions.value.currentPage - 1) * pageOptions.value.limit
49
+ const end = start + pageOptions.value.limit
50
+
51
+ return props.options?.rawData.slice(start, end)
52
+ })
53
+ </script>
@@ -1,47 +1,47 @@
1
- <template>
2
- <div>
3
- <div v-if="options.isEnabledSearch" class="mb-4 flex justify-end">
4
- <UInput
5
- v-model="q"
6
- icon="i-heroicons-magnifying-glass"
7
- :placeholder="options.searchPlaceholder || 'ค้นหา...'"
8
- />
9
- </div>
10
- <Base
11
- v-bind="$attrs"
12
- :columns="options.columns"
13
- :raw-data="options.rawData"
14
- :status="options.status"
15
- :page-options="options.pageOptions"
16
- @page-change="onPageChange"
17
- />
18
- </div>
19
- </template>
20
- <script lang="ts" setup>
21
- import { type PropType } from 'vue'
22
- import { type ITableOptions } from '#core/components/Table/types'
23
- import { _debounce, ref, watch } from '#imports'
24
- import Base from '#core/components/Table/Base.vue'
25
-
26
- const emits = defineEmits<{
27
- (event: 'pageChange', page: number): void
28
- (event: 'search', q: string): void
29
- }>()
30
-
31
- const props = defineProps({
32
- options: { type: Object as PropType<ITableOptions>, required: true },
33
- })
34
-
35
- const q = ref(props.options?.pageOptions.search ?? '')
36
-
37
- watch(
38
- q,
39
- _debounce((value) => {
40
- emits('search', value)
41
- }, 500)
42
- )
43
-
44
- const onPageChange = (page: number) => {
45
- emits('pageChange', page)
46
- }
47
- </script>
1
+ <template>
2
+ <div>
3
+ <div v-if="options.isEnabledSearch" class="mb-4 flex justify-end">
4
+ <UInput
5
+ v-model="q"
6
+ icon="i-heroicons-magnifying-glass"
7
+ :placeholder="options.searchPlaceholder || 'ค้นหา...'"
8
+ />
9
+ </div>
10
+ <Base
11
+ v-bind="$attrs"
12
+ :columns="options.columns"
13
+ :raw-data="options.rawData"
14
+ :status="options.status"
15
+ :page-options="options.pageOptions"
16
+ @page-change="onPageChange"
17
+ />
18
+ </div>
19
+ </template>
20
+ <script lang="ts" setup>
21
+ import { type PropType } from 'vue'
22
+ import { type ITableOptions } from '#core/components/Table/types'
23
+ import { _debounce, ref, watch } from '#imports'
24
+ import Base from '#core/components/Table/Base.vue'
25
+
26
+ const emits = defineEmits<{
27
+ (event: 'pageChange', page: number): void
28
+ (event: 'search', q: string): void
29
+ }>()
30
+
31
+ const props = defineProps({
32
+ options: { type: Object as PropType<ITableOptions>, required: true },
33
+ })
34
+
35
+ const q = ref(props.options?.pageOptions.search ?? '')
36
+
37
+ watch(
38
+ q,
39
+ _debounce((value) => {
40
+ emits('search', value)
41
+ }, 500)
42
+ )
43
+
44
+ const onPageChange = (page: number) => {
45
+ emits('pageChange', page)
46
+ }
47
+ </script>
@@ -1,65 +1,65 @@
1
- <template>
2
- <UTabs
3
- v-bind="attrs"
4
- :model-value="modelValue"
5
- :class="$props.class"
6
- :items="items"
7
- :orientation="orientation"
8
- :default-index="defaultIndex"
9
- :ui="ui"
10
- @change="change"
11
- >
12
- <template #default="{ item, index, selected }">
13
- <slot name="default" :item="item" :index="index" :selected="selected" />
14
- </template>
15
-
16
- <template #item="{ item, index, selected }">
17
- <slot name="item" :item="item" :index="index" :selected="selected" />
18
- </template>
19
- </UTabs>
20
- </template>
21
-
22
- <script setup lang="ts">
23
- import { useUiConfig, type PropType, useUI, toRef } from '#imports'
24
- import { type TabItem } from '#ui/types'
25
- import type { Strategy } from '#core/types/utils'
26
- import { tabs } from '#core/ui.config'
27
-
28
- const config = useUiConfig<typeof tabs>(tabs, 'tabs')
29
-
30
- const props = defineProps({
31
- modelValue: {
32
- type: Number,
33
- default: undefined,
34
- },
35
- items: {
36
- type: Array as PropType<TabItem[]>,
37
- default: () => [],
38
- },
39
- orientation: {
40
- type: String as PropType<'horizontal' | 'vertical'>,
41
- default: 'horizontal',
42
- validator: (value: string) => ['horizontal', 'vertical'].includes(value),
43
- },
44
- defaultIndex: {
45
- type: Number,
46
- default: 0,
47
- },
48
- class: {
49
- type: [String, Object, Array] as PropType<any>,
50
- default: () => '',
51
- },
52
- ui: {
53
- type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
54
- default: () => ({}),
55
- },
56
- })
57
-
58
- const emits = defineEmits(['update:modelValue', 'change'])
59
-
60
- const change = (index: number) => {
61
- emits('change', index)
62
- }
63
-
64
- const { ui, attrs } = useUI('tabs', toRef(props, 'ui'), config, toRef(props, 'class'))
65
- </script>
1
+ <template>
2
+ <UTabs
3
+ v-bind="attrs"
4
+ :model-value="modelValue"
5
+ :class="$props.class"
6
+ :items="items"
7
+ :orientation="orientation"
8
+ :default-index="defaultIndex"
9
+ :ui="ui"
10
+ @change="change"
11
+ >
12
+ <template #default="{ item, index, selected }">
13
+ <slot name="default" :item="item" :index="index" :selected="selected" />
14
+ </template>
15
+
16
+ <template #item="{ item, index, selected }">
17
+ <slot name="item" :item="item" :index="index" :selected="selected" />
18
+ </template>
19
+ </UTabs>
20
+ </template>
21
+
22
+ <script setup lang="ts">
23
+ import { useUiConfig, type PropType, useUI, toRef } from '#imports'
24
+ import { type TabItem } from '#ui/types'
25
+ import type { Strategy } from '#core/types/utils'
26
+ import { tabs } from '#core/ui.config'
27
+
28
+ const config = useUiConfig<typeof tabs>(tabs, 'tabs')
29
+
30
+ const props = defineProps({
31
+ modelValue: {
32
+ type: Number,
33
+ default: undefined,
34
+ },
35
+ items: {
36
+ type: Array as PropType<TabItem[]>,
37
+ default: () => [],
38
+ },
39
+ orientation: {
40
+ type: String as PropType<'horizontal' | 'vertical'>,
41
+ default: 'horizontal',
42
+ validator: (value: string) => ['horizontal', 'vertical'].includes(value),
43
+ },
44
+ defaultIndex: {
45
+ type: Number,
46
+ default: 0,
47
+ },
48
+ class: {
49
+ type: [String, Object, Array] as PropType<any>,
50
+ default: () => '',
51
+ },
52
+ ui: {
53
+ type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
54
+ default: () => ({}),
55
+ },
56
+ })
57
+
58
+ const emits = defineEmits(['update:modelValue', 'change'])
59
+
60
+ const change = (index: number) => {
61
+ emits('change', index)
62
+ }
63
+
64
+ const { ui, attrs } = useUI('tabs', toRef(props, 'ui'), config, toRef(props, 'class'))
65
+ </script>
@@ -0,0 +1,38 @@
1
+ import { type BreadcrumbLink } from '#ui/types';
2
+ export interface IDefinePageItem {
3
+ title?: string;
4
+ sub_title?: string;
5
+ isHideBreadcrumbs?: boolean;
6
+ breadcrumbs?: BreadcrumbLink[];
7
+ }
8
+ export declare const useApp: import("pinia").StoreDefinition<"_app", import("pinia")._UnwrapAll<Pick<{
9
+ pageMeta: any;
10
+ sidebar: import("vue").Ref<any[]>;
11
+ defineSEO: (payload: {
12
+ title?: string;
13
+ description?: string;
14
+ image?: string;
15
+ }) => void;
16
+ definePage: (payload: IDefinePageItem) => void;
17
+ defineSidebar: (items: BreadcrumbLink[]) => void;
18
+ }, any>>, Pick<{
19
+ pageMeta: any;
20
+ sidebar: import("vue").Ref<any[]>;
21
+ defineSEO: (payload: {
22
+ title?: string;
23
+ description?: string;
24
+ image?: string;
25
+ }) => void;
26
+ definePage: (payload: IDefinePageItem) => void;
27
+ defineSidebar: (items: BreadcrumbLink[]) => void;
28
+ }, any>, Pick<{
29
+ pageMeta: any;
30
+ sidebar: import("vue").Ref<any[]>;
31
+ defineSEO: (payload: {
32
+ title?: string;
33
+ description?: string;
34
+ image?: string;
35
+ }) => void;
36
+ definePage: (payload: IDefinePageItem) => void;
37
+ defineSidebar: (items: BreadcrumbLink[]) => void;
38
+ }, any>>;
@@ -0,0 +1,32 @@
1
+ import { reactive, useSeoMeta } from "#imports";
2
+ import { defineStore } from "pinia";
3
+ import { ref } from "vue";
4
+ export const useApp = defineStore("_app", () => {
5
+ const pageMeta = reactive({});
6
+ const sidebar = ref([]);
7
+ const defineSEO = (payload) => {
8
+ useSeoMeta({
9
+ title: payload.title,
10
+ ogTitle: payload.title,
11
+ description: payload.description,
12
+ ogDescription: payload.description,
13
+ ogImage: payload.image
14
+ });
15
+ };
16
+ const definePage = (payload) => {
17
+ pageMeta.title = payload.title;
18
+ pageMeta.sub_title = payload.sub_title;
19
+ pageMeta.isHideBreadcrumbs = payload.isHideBreadcrumbs;
20
+ pageMeta.breadcrumbs = payload.breadcrumbs;
21
+ };
22
+ const defineSidebar = (items) => {
23
+ sidebar.value = items;
24
+ };
25
+ return {
26
+ pageMeta,
27
+ sidebar,
28
+ defineSEO,
29
+ definePage,
30
+ defineSidebar
31
+ };
32
+ });
@@ -1,29 +1,29 @@
1
- export type Strategy = 'merge' | 'override'
2
-
3
- export type NestedKeyOf<ObjectType extends object> = {
4
- [Key in keyof ObjectType]: ObjectType[Key] extends object ? NestedKeyOf<ObjectType[Key]> : Key
5
- }[keyof ObjectType]
6
-
7
- export type DeepPartial<T> = Partial<{
8
- [P in keyof T]: DeepPartial<T[P]> | Record<string, string>
9
- }>
10
-
11
- type DeepKey<T, Keys extends string[]> = Keys extends [infer First, ...infer Rest]
12
- ? First extends keyof T
13
- ? Rest extends string[]
14
- ? DeepKey<T[First], Rest>
15
- : never
16
- : never
17
- : T
18
-
19
- export type ExtractDeepKey<T, Path extends string[]> = DeepKey<T, Path> extends infer Result
20
- ? Result extends Record<string, any>
21
- ? keyof Result
22
- : never
23
- : never
24
-
25
- export type ExtractDeepObject<T, Path extends string[]> = DeepKey<T, Path> extends infer Result
26
- ? Result extends Record<string, any>
27
- ? Result
28
- : never
29
- : never
1
+ export type Strategy = 'merge' | 'override'
2
+
3
+ export type NestedKeyOf<ObjectType extends object> = {
4
+ [Key in keyof ObjectType]: ObjectType[Key] extends object ? NestedKeyOf<ObjectType[Key]> : Key
5
+ }[keyof ObjectType]
6
+
7
+ export type DeepPartial<T> = Partial<{
8
+ [P in keyof T]: DeepPartial<T[P]> | Record<string, string>
9
+ }>
10
+
11
+ type DeepKey<T, Keys extends string[]> = Keys extends [infer First, ...infer Rest]
12
+ ? First extends keyof T
13
+ ? Rest extends string[]
14
+ ? DeepKey<T[First], Rest>
15
+ : never
16
+ : never
17
+ : T
18
+
19
+ export type ExtractDeepKey<T, Path extends string[]> = DeepKey<T, Path> extends infer Result
20
+ ? Result extends Record<string, any>
21
+ ? keyof Result
22
+ : never
23
+ : never
24
+
25
+ export type ExtractDeepObject<T, Path extends string[]> = DeepKey<T, Path> extends infer Result
26
+ ? Result extends Record<string, any>
27
+ ? Result
28
+ : never
29
+ : never
@@ -1,46 +1,46 @@
1
- :root {
2
- --color-primary-50: 248 248 255;
3
- --color-primary-100: 232 239 253;
4
- --color-primary-200: 190 227 248;
5
- --color-primary-300: 144 205 244;
6
- --color-primary-400: 99 179 237;
7
- --color-primary-500: 54 117 251;
8
- --color-primary-600: 0 104 254;
9
- --color-primary-700: 43 108 176;
10
- --color-primary-800: 44 82 130;
11
- --color-primary-900: 32 36 62;
12
- --color-primary-950: 32 36 62;
13
- --color-primary-DEFAULT: 54 117 251;
14
-
15
- --dp-font-family: inherit !important;
16
-
17
- }
18
-
19
- .dp__theme_light {
20
- --dp-primary-color: rgb(var(--color-primary-DEFAULT)) !important;
21
- --dp-primary-disabled-color: rgb(var(--color-primary-200)) !important;
22
- }
23
-
24
- ::-webkit-scrollbar {
25
- -webkit-appearance: none;
26
- width: 10px;
27
- height: 10px;
28
- }
29
-
30
- ::-webkit-scrollbar-thumb {
31
- border-radius: 4px;
32
- background-color: rgb(0 0 0 / 30%);
33
- box-shadow: 0 0 1px rgb(255 255 255 / 50%);
34
- }
35
-
36
-
37
- html,
38
- body,
39
- #__nuxt,
40
- #__layout,
41
- .root-container {
42
- height: 100%;
43
- display: flex;
44
- flex-direction: column;
45
- }
46
-
1
+ :root {
2
+ --color-primary-50: 248 248 255;
3
+ --color-primary-100: 232 239 253;
4
+ --color-primary-200: 190 227 248;
5
+ --color-primary-300: 144 205 244;
6
+ --color-primary-400: 99 179 237;
7
+ --color-primary-500: 54 117 251;
8
+ --color-primary-600: 0 104 254;
9
+ --color-primary-700: 43 108 176;
10
+ --color-primary-800: 44 82 130;
11
+ --color-primary-900: 32 36 62;
12
+ --color-primary-950: 32 36 62;
13
+ --color-primary-DEFAULT: 54 117 251;
14
+
15
+ --dp-font-family: inherit !important;
16
+
17
+ }
18
+
19
+ .dp__theme_light {
20
+ --dp-primary-color: rgb(var(--color-primary-DEFAULT)) !important;
21
+ --dp-primary-disabled-color: rgb(var(--color-primary-200)) !important;
22
+ }
23
+
24
+ ::-webkit-scrollbar {
25
+ -webkit-appearance: none;
26
+ width: 10px;
27
+ height: 10px;
28
+ }
29
+
30
+ ::-webkit-scrollbar-thumb {
31
+ border-radius: 4px;
32
+ background-color: rgb(0 0 0 / 30%);
33
+ box-shadow: 0 0 1px rgb(255 255 255 / 50%);
34
+ }
35
+
36
+
37
+ html,
38
+ body,
39
+ #__nuxt,
40
+ #__layout,
41
+ .root-container {
42
+ height: 100%;
43
+ display: flex;
44
+ flex-direction: column;
45
+ }
46
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@finema/core",
3
- "version": "1.4.9",
3
+ "version": "1.4.11",
4
4
  "repository": "https://gitlab.finema.co/finema/ui-kit",
5
5
  "license": "MIT",
6
6
  "author": "Finema Dev Core Team",