@finema/core 1.4.216 → 1.4.217

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 (63) hide show
  1. package/README.md +60 -60
  2. package/dist/module.json +1 -1
  3. package/dist/module.mjs +1 -1
  4. package/dist/runtime/components/Alert.vue +48 -48
  5. package/dist/runtime/components/Avatar.vue +27 -27
  6. package/dist/runtime/components/Badge.vue +11 -11
  7. package/dist/runtime/components/Breadcrumb.vue +44 -44
  8. package/dist/runtime/components/Button/Group.vue +37 -37
  9. package/dist/runtime/components/Button/index.vue +75 -75
  10. package/dist/runtime/components/Card.vue +38 -38
  11. package/dist/runtime/components/Core.vue +45 -45
  12. package/dist/runtime/components/Dialog/index.vue +108 -108
  13. package/dist/runtime/components/Dropdown/index.vue +70 -70
  14. package/dist/runtime/components/FlexDeck/Base.vue +159 -159
  15. package/dist/runtime/components/FlexDeck/index.vue +68 -68
  16. package/dist/runtime/components/Form/FieldWrapper.vue +23 -23
  17. package/dist/runtime/components/Form/Fields.vue +230 -230
  18. package/dist/runtime/components/Form/InputCheckbox/index.vue +28 -28
  19. package/dist/runtime/components/Form/InputDateTime/index.vue +68 -61
  20. package/dist/runtime/components/Form/InputDateTimeRange/index.vue +91 -84
  21. package/dist/runtime/components/Form/InputNumber/index.vue +27 -27
  22. package/dist/runtime/components/Form/InputRadio/index.vue +27 -27
  23. package/dist/runtime/components/Form/InputSelect/index.vue +55 -55
  24. package/dist/runtime/components/Form/InputSelectMultiple/index.vue +54 -54
  25. package/dist/runtime/components/Form/InputStatic/index.vue +16 -16
  26. package/dist/runtime/components/Form/InputTags/index.vue +141 -141
  27. package/dist/runtime/components/Form/InputText/index.vue +68 -68
  28. package/dist/runtime/components/Form/InputTextarea/index.vue +25 -25
  29. package/dist/runtime/components/Form/InputToggle/index.vue +27 -27
  30. package/dist/runtime/components/Form/InputUploadDropzone/index.vue +206 -206
  31. package/dist/runtime/components/Form/InputUploadDropzoneAuto/index.vue +350 -350
  32. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/ItemUpload.vue +241 -241
  33. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/ItemView.vue +102 -102
  34. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/index.vue +171 -170
  35. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/ItemUpload.vue +161 -161
  36. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/ItemView.vue +64 -64
  37. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/index.vue +178 -178
  38. package/dist/runtime/components/Form/InputUploadFileClassic/index.vue +95 -95
  39. package/dist/runtime/components/Form/InputUploadFileClassicAuto/index.vue +151 -151
  40. package/dist/runtime/components/Form/InputUploadImageAuto/index.vue +219 -219
  41. package/dist/runtime/components/Form/InputWYSIWYG/UploadImageForm.vue +55 -55
  42. package/dist/runtime/components/Form/InputWYSIWYG/index.vue +228 -228
  43. package/dist/runtime/components/Form/index.vue +6 -6
  44. package/dist/runtime/components/Icon.vue +23 -23
  45. package/dist/runtime/components/Image.vue +36 -36
  46. package/dist/runtime/components/Loader.vue +27 -27
  47. package/dist/runtime/components/Modal/index.vue +146 -146
  48. package/dist/runtime/components/QRCode.vue +22 -22
  49. package/dist/runtime/components/SimplePagination.vue +96 -96
  50. package/dist/runtime/components/Slideover/index.vue +110 -110
  51. package/dist/runtime/components/Table/Base.vue +161 -161
  52. package/dist/runtime/components/Table/ColumnDate.vue +16 -16
  53. package/dist/runtime/components/Table/ColumnDateTime.vue +18 -18
  54. package/dist/runtime/components/Table/ColumnImage.vue +15 -15
  55. package/dist/runtime/components/Table/ColumnNumber.vue +14 -14
  56. package/dist/runtime/components/Table/ColumnText.vue +29 -29
  57. package/dist/runtime/components/Table/Simple.vue +70 -70
  58. package/dist/runtime/components/Table/index.vue +65 -65
  59. package/dist/runtime/components/Tabs/index.vue +64 -64
  60. package/dist/runtime/components/TeleportSafe.vue +40 -40
  61. package/package.json +100 -100
  62. package/dist/runtime/components/Form/InputDateTime/index.vue~ +0 -61
  63. package/dist/runtime/ui.config/table.ts~ +0 -48
@@ -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,29 +1,29 @@
1
- <template>{{ getValue }}</template>
2
- <script lang="ts" setup>
3
- import { computed } from 'vue'
4
- import { type IColumn } from '#core/components/Table/types'
5
- import { StringHelper } from '#imports'
6
-
7
- const props = defineProps<{
8
- value: any
9
- row: any
10
- column: IColumn<{
11
- max?: number
12
- }>
13
- }>()
14
-
15
- const getValue = computed<string>(() => {
16
- const value = props.value
17
- const max = props.column.props?.max
18
-
19
- if (max) {
20
- return StringHelper.truncate(value, max)
21
- }
22
-
23
- if (typeof value === 'string') {
24
- return value || '-'
25
- }
26
-
27
- return value ?? '-'
28
- })
29
- </script>
1
+ <template>{{ getValue }}</template>
2
+ <script lang="ts" setup>
3
+ import { computed } from 'vue'
4
+ import { type IColumn } from '#core/components/Table/types'
5
+ import { StringHelper } from '#imports'
6
+
7
+ const props = defineProps<{
8
+ value: any
9
+ row: any
10
+ column: IColumn<{
11
+ max?: number
12
+ }>
13
+ }>()
14
+
15
+ const getValue = computed<string>(() => {
16
+ const value = props.value
17
+ const max = props.column.props?.max
18
+
19
+ if (max) {
20
+ return StringHelper.truncate(value, max)
21
+ }
22
+
23
+ if (typeof value === 'string') {
24
+ return value || '-'
25
+ }
26
+
27
+ return value ?? '-'
28
+ })
29
+ </script>
@@ -1,70 +1,70 @@
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
- :is-simple-pagination="isShowSimplePagination"
9
- :is-hide-bottom-pagination="options.isHideBottomPagination"
10
- :is-hide-caption="options.isHideCaption"
11
- @page-change="onPageChange"
12
- >
13
- <template v-for="(_, slot) of $slots" #[slot]="slotProps">
14
- <slot :name="slot" v-bind="slotProps || {}" />
15
- </template>
16
- </Base>
17
- </template>
18
- <script lang="ts" setup>
19
- import { computed, type PropType, ref } from 'vue'
20
- import { type ISimpleTableOptions } from '#core/components/Table/types'
21
- import Base from '#core/components/Table/Base.vue'
22
- import { initPageOptions } from '#core/composables/loaderPage'
23
- import { useCoreConfig } from '#core/composables/useConfig'
24
-
25
- defineSlots<{
26
- 'empty-state': () => any
27
- 'loading-state': () => any
28
- }>()
29
-
30
- const props = defineProps({
31
- options: { type: Object as PropType<ISimpleTableOptions>, required: true },
32
- })
33
-
34
- const currentPage = ref(1)
35
- const coreConfig = useCoreConfig()
36
- const isShowSimplePagination = computed(
37
- (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
38
- )
39
-
40
- const pageOptions = computed(() => {
41
- if (!props.options?.limit) {
42
- return undefined
43
- }
44
-
45
- return {
46
- ...initPageOptions({
47
- limit: props.options.limit,
48
- primary: props.options.primary,
49
- }),
50
- totalCount: props.options.rawData.length,
51
- totalPage: Math.ceil(props.options.rawData.length / props.options.limit),
52
- currentPage: currentPage.value,
53
- }
54
- })
55
-
56
- const onPageChange = (page: number) => {
57
- currentPage.value = page
58
- }
59
-
60
- const itemsByPage = computed(() => {
61
- if (!pageOptions.value) {
62
- return props.options?.rawData
63
- }
64
-
65
- const start = (pageOptions.value.currentPage - 1) * pageOptions.value.limit
66
- const end = start + pageOptions.value.limit
67
-
68
- return props.options?.rawData.slice(start, end)
69
- })
70
- </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
+ :is-simple-pagination="isShowSimplePagination"
9
+ :is-hide-bottom-pagination="options.isHideBottomPagination"
10
+ :is-hide-caption="options.isHideCaption"
11
+ @page-change="onPageChange"
12
+ >
13
+ <template v-for="(_, slot) of $slots" #[slot]="slotProps">
14
+ <slot :name="slot" v-bind="slotProps || {}" />
15
+ </template>
16
+ </Base>
17
+ </template>
18
+ <script lang="ts" setup>
19
+ import { computed, type PropType, ref } from 'vue'
20
+ import { type ISimpleTableOptions } from '#core/components/Table/types'
21
+ import Base from '#core/components/Table/Base.vue'
22
+ import { initPageOptions } from '#core/composables/loaderPage'
23
+ import { useCoreConfig } from '#core/composables/useConfig'
24
+
25
+ defineSlots<{
26
+ 'empty-state': () => any
27
+ 'loading-state': () => any
28
+ }>()
29
+
30
+ const props = defineProps({
31
+ options: { type: Object as PropType<ISimpleTableOptions>, required: true },
32
+ })
33
+
34
+ const currentPage = ref(1)
35
+ const coreConfig = useCoreConfig()
36
+ const isShowSimplePagination = computed(
37
+ (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
38
+ )
39
+
40
+ const pageOptions = computed(() => {
41
+ if (!props.options?.limit) {
42
+ return undefined
43
+ }
44
+
45
+ return {
46
+ ...initPageOptions({
47
+ limit: props.options.limit,
48
+ primary: props.options.primary,
49
+ }),
50
+ totalCount: props.options.rawData.length,
51
+ totalPage: Math.ceil(props.options.rawData.length / props.options.limit),
52
+ currentPage: currentPage.value,
53
+ }
54
+ })
55
+
56
+ const onPageChange = (page: number) => {
57
+ currentPage.value = page
58
+ }
59
+
60
+ const itemsByPage = computed(() => {
61
+ if (!pageOptions.value) {
62
+ return props.options?.rawData
63
+ }
64
+
65
+ const start = (pageOptions.value.currentPage - 1) * pageOptions.value.limit
66
+ const end = start + pageOptions.value.limit
67
+
68
+ return props.options?.rawData.slice(start, end)
69
+ })
70
+ </script>
@@ -1,65 +1,65 @@
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
- :is-simple-pagination="isShowSimplePagination"
17
- :is-hide-bottom-pagination="options.isHideBottomPagination"
18
- @page-change="onPageChange"
19
- >
20
- <template v-for="(_, slot) of $slots" #[slot]="slotProps">
21
- <slot :name="slot" v-bind="slotProps || {}" />
22
- </template>
23
- </Base>
24
- </div>
25
- </template>
26
- <script lang="ts" setup>
27
- import { type PropType } from 'vue'
28
- import { type ITableOptions } from '#core/components/Table/types'
29
- import { _debounce, computed, ref, watch } from '#imports'
30
- import { useCoreConfig } from '#core/composables/useConfig'
31
- import Base from '#core/components/Table/Base.vue'
32
-
33
- defineSlots<{
34
- 'empty-state': () => any
35
- 'loading-state': () => any
36
- }>()
37
-
38
- const emits = defineEmits<{
39
- (event: 'pageChange', page: number): void
40
- (event: 'search', q: string): void
41
- }>()
42
-
43
- const props = defineProps({
44
- options: { type: Object as PropType<ITableOptions>, required: true },
45
- })
46
-
47
- const coreConfig = useCoreConfig()
48
-
49
- const q = ref(props.options?.pageOptions.search ?? '')
50
-
51
- const isShowSimplePagination = computed(
52
- (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
53
- )
54
-
55
- watch(
56
- q,
57
- _debounce((value) => {
58
- emits('search', value)
59
- }, 500)
60
- )
61
-
62
- const onPageChange = (page: number) => {
63
- emits('pageChange', page)
64
- }
65
- </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
+ :is-simple-pagination="isShowSimplePagination"
17
+ :is-hide-bottom-pagination="options.isHideBottomPagination"
18
+ @page-change="onPageChange"
19
+ >
20
+ <template v-for="(_, slot) of $slots" #[slot]="slotProps">
21
+ <slot :name="slot" v-bind="slotProps || {}" />
22
+ </template>
23
+ </Base>
24
+ </div>
25
+ </template>
26
+ <script lang="ts" setup>
27
+ import { type PropType } from 'vue'
28
+ import { type ITableOptions } from '#core/components/Table/types'
29
+ import { _debounce, computed, ref, watch } from '#imports'
30
+ import { useCoreConfig } from '#core/composables/useConfig'
31
+ import Base from '#core/components/Table/Base.vue'
32
+
33
+ defineSlots<{
34
+ 'empty-state': () => any
35
+ 'loading-state': () => any
36
+ }>()
37
+
38
+ const emits = defineEmits<{
39
+ (event: 'pageChange', page: number): void
40
+ (event: 'search', q: string): void
41
+ }>()
42
+
43
+ const props = defineProps({
44
+ options: { type: Object as PropType<ITableOptions>, required: true },
45
+ })
46
+
47
+ const coreConfig = useCoreConfig()
48
+
49
+ const q = ref(props.options?.pageOptions.search ?? '')
50
+
51
+ const isShowSimplePagination = computed(
52
+ (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
53
+ )
54
+
55
+ watch(
56
+ q,
57
+ _debounce((value) => {
58
+ emits('search', value)
59
+ }, 500)
60
+ )
61
+
62
+ const onPageChange = (page: number) => {
63
+ emits('pageChange', page)
64
+ }
65
+ </script>
@@ -1,64 +1,64 @@
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 { tabs } from '#core/ui.config'
25
- import type { Strategy, TabItem } from '#ui/types'
26
-
27
- const config = useUiConfig<typeof tabs>(tabs, 'tabs')
28
-
29
- const props = defineProps({
30
- modelValue: {
31
- type: Number,
32
- default: undefined,
33
- },
34
- items: {
35
- type: Array as PropType<TabItem[]>,
36
- default: () => [],
37
- },
38
- orientation: {
39
- type: String as PropType<'horizontal' | 'vertical'>,
40
- default: 'horizontal',
41
- validator: (value: string) => ['horizontal', 'vertical'].includes(value),
42
- },
43
- defaultIndex: {
44
- type: Number,
45
- default: 0,
46
- },
47
- class: {
48
- type: [String, Object, Array] as PropType<any>,
49
- default: () => '',
50
- },
51
- ui: {
52
- type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
53
- default: () => ({}),
54
- },
55
- })
56
-
57
- const emits = defineEmits(['update:modelValue', 'change'])
58
-
59
- const change = (index: number) => {
60
- emits('change', index)
61
- }
62
-
63
- const { ui, attrs } = useUI('tabs', toRef(props, 'ui'), config, toRef(props, 'class'))
64
- </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 { tabs } from '#core/ui.config'
25
+ import type { Strategy, TabItem } from '#ui/types'
26
+
27
+ const config = useUiConfig<typeof tabs>(tabs, 'tabs')
28
+
29
+ const props = defineProps({
30
+ modelValue: {
31
+ type: Number,
32
+ default: undefined,
33
+ },
34
+ items: {
35
+ type: Array as PropType<TabItem[]>,
36
+ default: () => [],
37
+ },
38
+ orientation: {
39
+ type: String as PropType<'horizontal' | 'vertical'>,
40
+ default: 'horizontal',
41
+ validator: (value: string) => ['horizontal', 'vertical'].includes(value),
42
+ },
43
+ defaultIndex: {
44
+ type: Number,
45
+ default: 0,
46
+ },
47
+ class: {
48
+ type: [String, Object, Array] as PropType<any>,
49
+ default: () => '',
50
+ },
51
+ ui: {
52
+ type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
53
+ default: () => ({}),
54
+ },
55
+ })
56
+
57
+ const emits = defineEmits(['update:modelValue', 'change'])
58
+
59
+ const change = (index: number) => {
60
+ emits('change', index)
61
+ }
62
+
63
+ const { ui, attrs } = useUI('tabs', toRef(props, 'ui'), config, toRef(props, 'class'))
64
+ </script>
@@ -1,40 +1,40 @@
1
- <template>
2
- <Teleport v-if="isShow" :to="target" :disabled="!target || disabled">
3
- <slot />
4
- </Teleport>
5
- </template>
6
-
7
- <script setup lang="ts">
8
- import { onBeforeUnmount, onMounted, ref } from 'vue'
9
-
10
- const props = defineProps<{ to: string; disabled?: boolean }>()
11
-
12
- const target = ref<Element | null>(null)
13
- const isShow = ref(false)
14
-
15
- onBeforeUnmount(() => {
16
- isShow.value = false
17
- })
18
-
19
- onMounted(() => {
20
- isShow.value = true
21
-
22
- const observer = new MutationObserver((mutationList, observer) => {
23
- for (const mutation of mutationList) {
24
- if (mutation.type !== 'childList') continue
25
- const el = document.querySelector(props.to)
26
- if (!el) continue
27
- target.value = el
28
- observer.disconnect()
29
-
30
- break
31
- }
32
- })
33
-
34
- observer.observe(document, { childList: true, subtree: true })
35
-
36
- return () => {
37
- observer.disconnect()
38
- }
39
- })
40
- </script>
1
+ <template>
2
+ <Teleport v-if="isShow" :to="target" :disabled="!target || disabled">
3
+ <slot />
4
+ </Teleport>
5
+ </template>
6
+
7
+ <script setup lang="ts">
8
+ import { onBeforeUnmount, onMounted, ref } from 'vue'
9
+
10
+ const props = defineProps<{ to: string; disabled?: boolean }>()
11
+
12
+ const target = ref<Element | null>(null)
13
+ const isShow = ref(false)
14
+
15
+ onBeforeUnmount(() => {
16
+ isShow.value = false
17
+ })
18
+
19
+ onMounted(() => {
20
+ isShow.value = true
21
+
22
+ const observer = new MutationObserver((mutationList, observer) => {
23
+ for (const mutation of mutationList) {
24
+ if (mutation.type !== 'childList') continue
25
+ const el = document.querySelector(props.to)
26
+ if (!el) continue
27
+ target.value = el
28
+ observer.disconnect()
29
+
30
+ break
31
+ }
32
+ })
33
+
34
+ observer.observe(document, { childList: true, subtree: true })
35
+
36
+ return () => {
37
+ observer.disconnect()
38
+ }
39
+ })
40
+ </script>