shadcn.io is not affiliated with official shadcn/ui
Merge or Replace File Upload Block for Vue
A merge-or-replace choice for a contact import, with a before and after bar and a sentence from typed counts; Replace needs the object name typed before the button works.
Installation
Overview
Show what an import will do before it does it, with this merge-or-replace panel for Vue with Ark UI. It is the last step of Pivotbook's contact import, a contacts platform. At the start, two mode cards on native radio inputs: Merge adds new contacts and updates the ones whose email matches, Replace deletes every existing contact first. At the end, a figure: three typed counts (6,112 existing, 3,241 in the file, 371 with the same email), a stacked bar for the contacts before and one for after on one shared scale, a legend that always lists Untouched, Updated, Added and Deleted, and a sentence from the counts ("Merge: 2,870 added, 371 updated, 0 deleted. Total 8,982." or "Replace: 6,112 deleted, 3,241 added. Total 3,241."). Replace asks for the object name to be typed in an Input before the Shine Button works. The panel is ruled by Guides. For contact and product imports, migrations and any change that can delete.
FAQ
Where do the numbers come from?
They are typed constants at the top of the file (EXISTING, INCOMING, MATCHES); the added, updated, deleted and total figures are derived from them for each mode, so the bars, the legend and the sentence cannot disagree. In your app, fill them from the dry run your server returns.
How are the bars drawn?
As a small SVG with one rectangle per kind, both bars on the same scale so the length of each means the same thing. Untouched and Updated are grey weights, Added is solid, and Deleted is an outline. The figure's sentence says the same in words, so the drawing is never the only way to read it.
Why must I type a name to replace?
Replace deletes data, so the button stays aria-disabled until the field holds the object name exactly (Contacts). Pressed early, it says what to type and moves focus to the field. The field is disabled in Merge, with a line that says it only applies to Replace.
What does the button do?
Nothing leaves the tab. It reports what it would have done ("Merged, in this demo. Total 8,982.") and changes no data. To wire it, send the chosen mode with the file's id to your server and show its result in the same status line.