@finema/core 1.4.192 → 1.4.193

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 (62) 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 +153 -153
  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 +61 -61
  20. package/dist/runtime/components/Form/InputDateTimeRange/index.vue +83 -83
  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 +45 -45
  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 +342 -342
  32. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/ItemUpload.vue +241 -241
  33. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/ItemView.vue +89 -89
  34. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/index.vue +170 -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 -0
  42. package/dist/runtime/components/Form/InputWYSIWYG/index.vue +228 -214
  43. package/dist/runtime/components/Form/InputWYSIWYG/types.d.ts +13 -0
  44. package/dist/runtime/components/Form/index.vue +6 -6
  45. package/dist/runtime/components/Icon.vue +23 -23
  46. package/dist/runtime/components/Image.vue +36 -36
  47. package/dist/runtime/components/Loader.vue +27 -27
  48. package/dist/runtime/components/Modal/index.vue +146 -146
  49. package/dist/runtime/components/QRCode.vue +22 -22
  50. package/dist/runtime/components/SimplePagination.vue +96 -96
  51. package/dist/runtime/components/Slideover/index.vue +110 -110
  52. package/dist/runtime/components/Table/Base.vue +160 -160
  53. package/dist/runtime/components/Table/ColumnDate.vue +16 -16
  54. package/dist/runtime/components/Table/ColumnDateTime.vue +18 -18
  55. package/dist/runtime/components/Table/ColumnImage.vue +15 -15
  56. package/dist/runtime/components/Table/ColumnNumber.vue +14 -14
  57. package/dist/runtime/components/Table/ColumnText.vue +29 -29
  58. package/dist/runtime/components/Table/Simple.vue +69 -69
  59. package/dist/runtime/components/Table/index.vue +65 -65
  60. package/dist/runtime/components/Tabs/index.vue +64 -64
  61. package/dist/runtime/components/TeleportSafe.vue +40 -40
  62. package/package.json +101 -101
@@ -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,69 +1,69 @@
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
- @page-change="onPageChange"
11
- >
12
- <template v-for="(_, slot) of $slots" #[slot]="slotProps">
13
- <slot :name="slot" v-bind="slotProps || {}" />
14
- </template>
15
- </Base>
16
- </template>
17
- <script lang="ts" setup>
18
- import { computed, type PropType, ref } from 'vue'
19
- import { type ISimpleTableOptions } from '#core/components/Table/types'
20
- import Base from '#core/components/Table/Base.vue'
21
- import { initPageOptions } from '#core/composables/loaderPage'
22
- import { useCoreConfig } from '#core/composables/useConfig'
23
-
24
- defineSlots<{
25
- 'empty-state': () => any
26
- 'loading-state': () => any
27
- }>()
28
-
29
- const props = defineProps({
30
- options: { type: Object as PropType<ISimpleTableOptions>, required: true },
31
- })
32
-
33
- const currentPage = ref(1)
34
- const coreConfig = useCoreConfig()
35
- const isShowSimplePagination = computed(
36
- (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
37
- )
38
-
39
- const pageOptions = computed(() => {
40
- if (!props.options?.limit) {
41
- return undefined
42
- }
43
-
44
- return {
45
- ...initPageOptions({
46
- limit: props.options.limit,
47
- primary: props.options.primary,
48
- }),
49
- totalCount: props.options.rawData.length,
50
- totalPage: Math.ceil(props.options.rawData.length / props.options.limit),
51
- currentPage: currentPage.value,
52
- }
53
- })
54
-
55
- const onPageChange = (page: number) => {
56
- currentPage.value = page
57
- }
58
-
59
- const itemsByPage = computed(() => {
60
- if (!pageOptions.value) {
61
- return props.options?.rawData
62
- }
63
-
64
- const start = (pageOptions.value.currentPage - 1) * pageOptions.value.limit
65
- const end = start + pageOptions.value.limit
66
-
67
- return props.options?.rawData.slice(start, end)
68
- })
69
- </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
+ @page-change="onPageChange"
11
+ >
12
+ <template v-for="(_, slot) of $slots" #[slot]="slotProps">
13
+ <slot :name="slot" v-bind="slotProps || {}" />
14
+ </template>
15
+ </Base>
16
+ </template>
17
+ <script lang="ts" setup>
18
+ import { computed, type PropType, ref } from 'vue'
19
+ import { type ISimpleTableOptions } from '#core/components/Table/types'
20
+ import Base from '#core/components/Table/Base.vue'
21
+ import { initPageOptions } from '#core/composables/loaderPage'
22
+ import { useCoreConfig } from '#core/composables/useConfig'
23
+
24
+ defineSlots<{
25
+ 'empty-state': () => any
26
+ 'loading-state': () => any
27
+ }>()
28
+
29
+ const props = defineProps({
30
+ options: { type: Object as PropType<ISimpleTableOptions>, required: true },
31
+ })
32
+
33
+ const currentPage = ref(1)
34
+ const coreConfig = useCoreConfig()
35
+ const isShowSimplePagination = computed(
36
+ (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
37
+ )
38
+
39
+ const pageOptions = computed(() => {
40
+ if (!props.options?.limit) {
41
+ return undefined
42
+ }
43
+
44
+ return {
45
+ ...initPageOptions({
46
+ limit: props.options.limit,
47
+ primary: props.options.primary,
48
+ }),
49
+ totalCount: props.options.rawData.length,
50
+ totalPage: Math.ceil(props.options.rawData.length / props.options.limit),
51
+ currentPage: currentPage.value,
52
+ }
53
+ })
54
+
55
+ const onPageChange = (page: number) => {
56
+ currentPage.value = page
57
+ }
58
+
59
+ const itemsByPage = computed(() => {
60
+ if (!pageOptions.value) {
61
+ return props.options?.rawData
62
+ }
63
+
64
+ const start = (pageOptions.value.currentPage - 1) * pageOptions.value.limit
65
+ const end = start + pageOptions.value.limit
66
+
67
+ return props.options?.rawData.slice(start, end)
68
+ })
69
+ </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>