Skip to content

Commit 4c3f99a

Browse files
cafadevcafadev
committed
feat: provide tableId for child components
1 parent fc2bc89 commit 4c3f99a

File tree

9 files changed

+97
-109
lines changed

9 files changed

+97
-109
lines changed

‎demo-element-plus/src/plugins/TheMagic.vue

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div>
3+
<h1>The Magic</h1>
4+
</div>
5+
</template>
6+
7+
<script lang="ts" setup>
8+
const tableId = inject('tableId')
9+
10+
console.log('🚀 ~ tableId:', tableId)
11+
</script>

‎demo-element-plus/src/plugins/fancy-crud.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import components, { styles } from '@fancy-crud/wrapper-element-plus'
55
import { valibotSafeParser as parser } from '@fancy-crud/plugin-rule-parsers'
66
import { vueToastifyPlugin } from '@fancy-crud/plugin-vue3-toastify'
77

8+
import TheMagic from './TheMagic.vue'
9+
810
axios.defaults.baseURL = 'http://localhost:9000/api/'
911

1012
export default defineConfig({
@@ -19,7 +21,10 @@ export default defineConfig({
1921
},
2022
},
2123
},
22-
components,
24+
components: {
25+
...components,
26+
tableFooter: TheMagic,
27+
},
2328
styles,
2429
rules: {
2530
parser,

‎demo-element-plus/src/viewer/FInputViewer.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="bg-white rounded-xl p-4">
3-
<f-form @success="printing" @error="printing" v-bind="form" />
3+
<f-form @success="printing" @error="printing" v-bind="form" class="el-form--label-top" />
44
</div>
55

66
<button @click="loadData">

‎demo-element-plus/src/viewer/FTableViewer.vue

+64-99
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,81 @@
11
<template>
22
<div class="pb-5">
3-
<!-- <f-table
4-
:columns="table.columns"
5-
:buttons="table.buttons"
6-
:form="table.form"
7-
:settings="table.settings"
8-
:list="table.list"
9-
:filter-params="table.filterParams"
10-
:pagination="table.pagination"
11-
:id="table.id"
12-
> -->
13-
14-
<el-input v-model="r" />
15-
16-
<!-- <el-select v-model="table.filterParams.gender">
17-
<el-option value="m">
18-
Male
19-
</el-option>
20-
</el-select> -->
21-
<!-- <f-table v-bind="table">
22-
<template #column-created_at>
23-
<a href="https://google.com" class="underline text-primary-500" target="_blank">Haz click</a>
24-
</template>
25-
<template #column-actions-prepend>
26-
'hello'
27-
</template>
28-
</f-table> -->
3+
<f-table v-bind="table" />
294
</div>
30-
31-
<button @click="generate">
32-
Generate
33-
</button>
345
</template>
356

367
<script lang='ts' setup>
378
import { FieldType, useForm, useTable } from '@fancy-crud/vue'
389
39-
const r = ref(1)
40-
41-
function generate() {
42-
const form = useForm({
43-
id: 'formulario',
44-
fields: {
45-
name: {
46-
type: FieldType.text,
47-
label: 'First name',
48-
placeholder: 'First name',
49-
wrapper: {
50-
class: 'col-span-12',
51-
},
52-
},
53-
gender: {
54-
type: FieldType.select,
55-
label: 'Select',
56-
optionLabel: 'label',
57-
optionValue: 'value',
58-
options: [
59-
{ label: 'Male', value: 'm' },
60-
{ label: 'Female', value: 'f' },
61-
],
62-
},
63-
created_at: {
64-
type: FieldType.text,
65-
label: 'Created at',
66-
updateOnly: true,
67-
readonly: true,
68-
disabled: true,
69-
wrapper: {
70-
class: 'col-span-12',
71-
},
10+
const form = useForm({
11+
id: 'formulario',
12+
fields: {
13+
name: {
14+
type: FieldType.text,
15+
label: 'First name',
16+
placeholder: 'First name',
17+
wrapper: {
18+
class: 'col-span-12',
7219
},
7320
},
74-
settings: {
75-
url: 'artists/',
76-
title: '{{ Crear artista | Actualizar artista }}',
21+
gender: {
22+
type: FieldType.select,
23+
label: 'Select',
24+
optionLabel: 'label',
25+
optionValue: 'value',
26+
options: [
27+
{ label: 'Male', value: 'm' },
28+
{ label: 'Female', value: 'f' },
29+
],
7730
},
78-
responseInterceptor: {
31+
created_at: {
32+
type: FieldType.text,
33+
label: 'Created at',
34+
updateOnly: true,
35+
readonly: true,
36+
disabled: true,
37+
wrapper: {
38+
class: 'col-span-12',
39+
},
40+
},
41+
},
42+
settings: {
43+
url: 'artists/',
44+
title: '{{ Crear artista | Actualizar artista }}',
45+
},
46+
responseInterceptor: {
7947
// 201: (formId, response) => {
8048
// console.log('🚀 ~ file: FTableViewer.vue:65 ~ response:', response)
8149
// console.log(response)
8250
// },
83-
},
84-
})
85-
86-
console.log(form)
87-
}
51+
},
52+
})
8853
89-
// const table = useTable({
90-
// form,
91-
// columns: {
92-
// gender: {
93-
// format: (value: string) => value === 'm' ? 'Male' : 'Female',
94-
// width: 700,
95-
// },
96-
// created_at: {
97-
// format: (value: string) => 'anything',
98-
// },
99-
// actions: { value: 'actions', label: '', width: '200px', align: 'right' },
100-
// },
101-
// pagination: {
102-
// rowsPerPage: 10,
103-
// hidden: true,
104-
// },
105-
// filterParams: {
106-
// gender: '',
107-
// },
108-
// buttons: {
109-
// edit: {
110-
// // onClick(row) {
111-
// // console.log('🚀 ~ onClick ~ row:', row)
112-
// // },
113-
// },
114-
// },
115-
// })
54+
const table = useTable({
55+
form,
56+
columns: {
57+
gender: {
58+
format: (value: string) => value === 'm' ? 'Male' : 'Female',
59+
width: 700,
60+
},
61+
created_at: {
62+
format: (value: string) => 'anything',
63+
},
64+
actions: { value: 'actions', label: '', width: '200px', align: 'right' },
65+
},
66+
pagination: {
67+
rowsPerPage: 10,
68+
// hidden: true,
69+
},
70+
filterParams: {
71+
gender: '',
72+
},
73+
buttons: {
74+
edit: {
75+
// onClick(row) {
76+
// console.log('🚀 ~ onClick ~ row:', row)
77+
// },
78+
},
79+
},
80+
})
11681
</script>

‎packages/vue/src/forms/components/FForm.vue

+4-3
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<form
33
class="f-form"
44
>
5-
<f-form-header v-slot="{ formModeTitle }" :title="props.settings.title" :settings="props.settings">
6-
<slot name="form-header" v-bind="{ formModeTitle }" />
5+
<f-form-header v-slot="bind" :title="props.settings.title" :mode="props.settings.mode">
6+
<slot name="form-header" v-bind="bind" />
77
</f-form-header>
88

99
<f-form-body :fields="props.fields" :settings="props.settings" :form-id="props.id">
@@ -19,11 +19,12 @@
1919
<f-form-footer
2020
@main-click="onMainClick"
2121
@aux-click="onAuxClick"
22+
v-slot="bind"
2223
:buttons="props.buttons"
2324
:settings="props.settings"
2425
:is-form-valid="isFormValid"
2526
>
26-
<slot name="form-footer" v-bind="{ onMainClick, onAuxClick, isFormValid }" />
27+
<slot name="form-footer" v-bind="bind" />
2728
</f-form-footer>
2829
</form>
2930
</template>

‎packages/vue/src/forms/components/FFormHeader.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,17 @@
99
</template>
1010

1111
<script lang="ts" setup>
12-
import type { NormalizedSettings } from '@fancy-crud/core'
12+
import type { FormMode } from '@fancy-crud/core'
1313
import { Bus, GetTitleByFormModeCommand } from '@fancy-crud/core'
1414
1515
const props = defineProps<{
1616
title?: string
17-
settings: NormalizedSettings
17+
mode: FormMode
1818
}>()
1919
2020
const bus = new Bus()
2121
2222
const formModeTitle = computed(() => bus.execute(
23-
new GetTitleByFormModeCommand(props.settings.mode, props.title),
23+
new GetTitleByFormModeCommand(props.mode, props.title),
2424
))
2525
</script>

‎packages/vue/src/tables/components/FTable.vue

+4-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
</f-table-body>
2929
</slot>
3030

31-
<slot name="table-footer">
31+
<slot name="table-footer" v-bind="tableFooterVBind">
3232
<div v-if="!props.pagination.hidden" class="flex justify-between mt-4">
3333
<f-table-footer v-bind="tableFooterVBind" />
3434
</div>
@@ -63,6 +63,8 @@ const props = defineProps<{
6363
list: NormalizedTableList
6464
}>()
6565
66+
provide('tableId', props.id)
67+
6668
const slots = useSlots()
6769
6870
const formStore: IFormStore = injecting(IFormStore.name)!
@@ -114,6 +116,7 @@ const tableBodyVBind = computed(() => {
114116
115117
const tableFooterVBind = computed(() => {
116118
return {
119+
'tableId': props.id,
117120
'pagination': props.pagination,
118121
'onUpdate:pagination': (newPagination: Pagination) => Object.assign(table.pagination, newPagination),
119122
}

‎packages/vue/src/tables/typing/table.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export interface TableArgs<
1919
list?: RawTableList<L>
2020
}
2121

22-
export interface UseTable<T extends BaseTableForm, U, S, F, B, L, P> {
22+
export interface UseTable<T extends BaseTableForm = any, U = any, S = any, F = any, B = any, L = any, P = any> {
2323
id: symbol
2424
form: T
2525
columns: FieldAsColumn<T['fields'], NormalizedColumn> & U

‎packages/wrapper-element-plus/src/table/WeTableFooter.vue

+3
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,7 @@ import { useTableFooter } from '@fancy-crud/vue'
3737
const props = defineProps<TableFooterProps>()
3838
const emit = defineEmits<TableFooterEmit>()
3939
const state = useTableFooter(props.pagination, emit)
40+
41+
const tableId = inject('tableId')
42+
console.log('🚀 ~ tableId:', tableId)
4043
</script>

0 commit comments

Comments
 (0)