feat: tailwind refback input #5203
Conversation
- Add Refback input (wip) - Bind to form by column type - Add Rebback list item component
There was a problem hiding this comment.
Pull Request Overview
This PR adds a reference-back input component to the Tailwind UI library, updates styling and theming, and extends existing form modals and utilities to support CRUD operations on referenced rows.
- Introduces
InputRefBackand associated list/section components for displaying and editing related rows - Updates form modals (
AddModal,EditModal,DeleteModal) to usedefineModel, emit a cancellation event, and bind visibility - Extends
rowToSectionsutility, types, Tailwind configuration, and CSS for new UI pieces
Reviewed Changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| utils/rowToSections.ts | New function to split a row into labeled heading sections |
| types/types.ts | Added Section interface |
| tailwind.config.js & assets/css | Added custom styles for inline buttons and definition lists |
| pages/input/RefBack.story.vue | Storybook entry for new InputRefBack |
| pages/Form.story.vue | Temporarily commented out demo controls |
| pages/Button.story.vue | Added “Text” and “Inline” button variants |
| components/input/ref/ListItem.vue | Displays each ref-back item with expand, edit, remove |
| components/input/RefBack.vue | Core ref-back input with CRUD modals |
| components/input/Array.vue | Unified “Add” button styling |
| components/form/{AddModal,EditModal,DeleteModal}.vue | Updated to defineModel and added cancel events |
| components/content/EMX2Section.vue | Renders a Section with a definition list |
| components/Input.vue | Integrates InputRefBack for REFBACK column types |
| components/Button.vue | Extended button styles and new inline type |
Comments suppressed due to low confidence (9)
apps/tailwind-components/utils/rowToSections.ts:8
- New utility logic in
rowToSectionslacks unit tests; consider adding tests to cover different column types and filtering behavior.
export function rowToSections(
apps/tailwind-components/components/input/ref/ListItem.vue:97
- The
ContentEMX2Sectioncomponent is used here but not imported; addimport ContentEMX2Section from '../content/EMX2Section.vue'to the script.
<ContentEMX2Section
apps/tailwind-components/components/input/RefBack.vue:124
- Add a
:keybinding on thev-foritem (v-for="(ref, index) in modelValue" :key="index") to avoid rendering performance issues.
<InputRefListItem
apps/tailwind-components/components/input/ref/ListItem.vue:97
- Each
v-forshould include a unique:key(e.g.,:key="section.heading") for stable list rendering.
<ContentEMX2Section
apps/tailwind-components/pages/input/RefBack.story.vue:20
- [nitpick] Several constants (
columnType,id,label,name,position,refBackId) are declared but not used in the template; consider removing them.
const columnType = "REFBACK";
apps/tailwind-components/pages/Form.story.vue:193
- [nitpick] Commenting out a large block using HTML comments can lead to mismatched tags; consider removing or extracting this demo code instead of commenting.
<!-- <div class="ml-2 h-screen">
apps/tailwind-components/components/Input.vue:174
- The
InputRefBackcomponent is used but not imported in this file; add an import statement at the top of the script section.
<InputRefBack
apps/tailwind-components/utils/rowToSections.ts:47
- [nitpick] You’ve defined an inline section type here—consider reusing the
Sectioninterface to avoid duplication.
}, [] as { heading: string; fields: { key: string; value: columnValue; metadata: IColumn }[] }[])
apps/tailwind-components/components/content/EMX2Section.vue:30
- [nitpick] This component emits
valueClickbut has nodefineEmitsdeclaration; addconst emit = defineEmits(['valueClick'])for clarity.
@valueClick="$emit('valueClick', $event)"
when no key is pass hide refback components and show message
|
|
||
| const visible = ref(false); | ||
| const visible = defineModel("visible", { |
There was a problem hiding this comment.
allow visibility toggle from outside of the component, as alternative to using the the (default) slot , this allows to multiple buttons ( in a list ) to share is single Modal
| } | ||
|
|
||
| async function onDeleteConfirm() { | ||
| const { deleteRecord } = useForm( |
There was a problem hiding this comment.
lazy composable call, only create the delete Record function when we are going to use it ( instead of on component creation )
| @@ -0,0 +1,60 @@ | |||
| <template> | |||
There was a problem hiding this comment.
Only getting This Order can only be filled in after you have saved (or saved draft). on the styleguide, so can't play around with it.
There was a problem hiding this comment.
added a demo example where the key ( source row ) has been set. A better place to test is probably though the Add/Edit modal , the form, the table-explorer or the ui app. The refback story just renders the input, it not has a sample the the key is set and the key is empty
| .filter((item) => { | ||
| return !item.key.startsWith("mg_") || options.showDataOwner; | ||
| }) | ||
| .filter((item) => { | ||
| return ( | ||
| rowData.hasOwnProperty(item.key) || | ||
| item.metadata.columnType === "HEADING" | ||
| ); | ||
| }) |
There was a problem hiding this comment.
putting the filtering first optimizes this a bit
| @@ -89,9 +92,18 @@ const isDraft = ref(false); | |||
|
|
|||
| function onCancel() { | |||
| visible.value = false; | |||
| emit("update:cancelled"); | |||
There was a problem hiding this comment.
TIL: cancelled is British English and canceled is American :)
|
Add refback input
What are the main changes you did
Add Refback input
Bind to form by column type
Add refback list item component to show a single refBack item
update text button to be able to use it with refback and align with design
update crud modal to open from external button ( i.e each item has buttons but refBack has single crud modal per type)
update inline button style for use in refback
How to test
should look like design:
Checklist