Skip to content

feat(json-render-ui): implement Tabs, Link, Select renderers - #183

Merged
antfu merged 1 commit into
mainfrom
feat/json-render-ui-provider
Aug 10, 2026
Merged

feat(json-render-ui): implement Tabs, Link, Select renderers#183
antfu merged 1 commit into
mainfrom
feat/json-render-ui-provider

Conversation

@antfubot

Copy link
Copy Markdown
Collaborator

PR B of the json-render view-provider stack (plan: plans/json-render-ui-packaging.md). Stacked on #182.

Implements the three catalog components #182 added, so the reference Vue renderer covers all 17:

  • Link — a thin anchor, safe-scheme only (http(s)/mailto:), with a runtime Icon.
  • Select — wraps @antfu/design FormSelect (or FormCombobox when searchable). Icon/description on options are accepted by the catalog but not rendered by the reference select (documented).
  • Tabs — a thin custom component over the shared semantic tokens: dynamic tab icons need the runtime Icon, which LayoutTabs' class-based icon can't do. Uses a stateful inner component so uncontrolled selection persists across renders (a JrComponent render fn can't hold a ref), and writes back to the state store when value is $bindState-bound. Roving tabindex + arrow-key nav.

Registered in baseRegistry (17) and exported from ./components. API snapshots updated.

Note: the provider-SPA enablement (single-view ?view= mode, jsonRenderProvider() factory, iframe theming, deprecating the in-process createJsonRenderDockRenderer) is split into the next PR so each stays green and reviewable — it pairs with the hub view-provider mechanism (plan PR C) and hub-ui iframe rendering (PR D).

Verified: typecheck, eslint, build, package tests.

Created with the help of an agent.

Base automatically changed from feat/json-render-catalog-tabs-link-select to main August 10, 2026 04:23
Implements the three catalog components added in the previous commit, so the
reference Vue renderer covers all seventeen. Link is a thin anchor (safe-scheme
only) with a runtime Icon; Select wraps @antfu/design FormSelect (or FormCombobox
when searchable); Tabs is a thin custom component (dynamic tab icons need the
runtime Icon, which @antfu/design LayoutTabs' class-based icon can't do) with a
stateful inner component so uncontrolled selection persists and a $bindState
binding writes back to the state store.

Registered in baseRegistry (now 17) and exported from ./components.
@antfu
antfu force-pushed the feat/json-render-ui-provider branch from f75d5dc to 84c0424 Compare August 10, 2026 04:23
@netlify

netlify Bot commented Aug 10, 2026

Copy link
Copy Markdown

Deploy Preview for devfra ready!

Name Link
🔨 Latest commit 84c0424
🔍 Latest deploy log https://app.netlify.com/projects/devfra/deploys/6a79524a68d7270008f2408d
😎 Deploy Preview https://deploy-preview-183--devfra.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@antfu
antfu merged commit ffdb690 into main Aug 10, 2026
12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants