diff --git a/.publish/compiler/README.md b/.publish/compiler/README.md index 4fec3363..7eeeea82 100644 --- a/.publish/compiler/README.md +++ b/.publish/compiler/README.md @@ -201,6 +201,7 @@ A file opens with `page ` or `component ` followed by a `{ ... }` bo - `@event name = function` inside `props` — declares a public component event. Emit it from component behavior with `name(detail)` or `$emit("name", detail)`, and consume it with ``. - `state : Type = ` — typed reactive state seeded from a raw JS expression, including native array and object literals. The annotation is optional for backward compatibility. - `view { }` — plain HTML with `{expr}` interpolation in text and attributes, JSX-style component props such as `items={items}`, `items={[...]}`, and `options={{...}}`, hyphenated attributes, boolean attributes, `@event="..."` client bindings, and ``. Structured component props are serialized safely for SSR; expressions that reference `state` retain their initial value and update reactively in the browser. +- Client functions automatically commit state changed by `setTimeout` callbacks. For other deferred callbacks (observers, third-party APIs, or detached promise callbacks), call the injected `commit()` function after changing local state; returning/awaiting a promise also commits through the normal function boundary. - `seo { key = "value" ... }` — metadata merged into the generated `meta`. - `style { }` — inlined page/component stylesheet (repeatable). - `functions { }` — helpers with typed parameters and return values. Types remain in server output and are safely erased from browser behavior code. diff --git a/.publish/pubsub/package.json b/.publish/pubsub/package.json index 95c1e287..4f1c4cbc 100644 --- a/.publish/pubsub/package.json +++ b/.publish/pubsub/package.json @@ -44,6 +44,10 @@ "import": "./dist/redis.js" } }, + "dependencies": { + "@wrnexus/core": "^0.8.6", + "@wrnexus/rpc": "^0.8.6" + }, "files": [ "dist", "README.md" diff --git a/.publish/queue/package.json b/.publish/queue/package.json index b3d174f3..e801ce1d 100644 --- a/.publish/queue/package.json +++ b/.publish/queue/package.json @@ -37,7 +37,8 @@ } }, "dependencies": { - "@wrnexus/core": "^0.8.6" + "@wrnexus/core": "^0.8.6", + "@wrnexus/rpc": "^0.8.6" }, "files": [ "dist", diff --git a/.publish/ui/COMPONENTS.md b/.publish/ui/COMPONENTS.md index 7b47b446..d91b3fb7 100644 --- a/.publish/ui/COMPONENTS.md +++ b/.publish/ui/COMPONENTS.md @@ -1,6 +1,6 @@ # WRNexus UI component reference -This reference is generated from the 108 packaged `.wrn` component sources. Props marked required have no default; all others show their runtime default. +This reference is generated from the 102 packaged `.wrn` component sources. Props marked required have no default; all others show their runtime default. ## Advanced-forms @@ -22,15 +22,6 @@ Editable autocomplete combobox with local and remote suggestions. - Slots: None - Outputs: `search({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `clear({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `close({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `load({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)` -### CopyMarkup - -Theme-aware, responsive copy markup component. - -- Mount: `data-component="CopyMarkup"` -- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Copy Markup"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""` -- Slots: None -- Outputs: `copy({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `success({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)` - ### InputNumber Theme-aware, responsive input number component. @@ -303,23 +294,14 @@ Present responsive chronological activity, milestones, or workflow status with r - Slots: `default` - Outputs: `select({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` -### Toast - -Theme-aware, responsive toast component. - -- Mount: `data-component="Toast"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Toast"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Outputs: `dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `action({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` - ### TreeView Theme-aware, responsive tree view component. - Mount: `data-component="TreeView"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Tree View"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` +- Props: `title: string = "Tree View"`, `description: string = ""`, `items: unknown[] = []`, `valueKey: string = "value"`, `labelKey: string = "label"`, `defaultExpanded: unknown[] = []`, `selected: string = ""`, `size: string = "default"`, `color: string = "primary"`, `class: string = ""` - Slots: `default` -- Outputs: `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `toggle({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `expand({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `collapse({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` +- Outputs: `select({ item: object; value: string; sourceEvent?: Event })`, `toggle({ item: object; value: string; expanded: boolean; sourceEvent?: Event })`, `expand({ item: object; value: string; sourceEvent?: Event })`, `collapse({ item: object; value: string; sourceEvent?: Event })` ## Core @@ -509,50 +491,32 @@ Theme-aware, responsive time picker component. ## Integrations -### AdvancedDatePicker - -Theme-aware, responsive advanced date picker component. - -- Mount: `data-component="AdvancedDatePicker"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Advanced Date Picker"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `close({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `clear({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` - -### AdvancedRangeSlider - -Theme-aware, responsive advanced range slider component. - -- Mount: `data-component="AdvancedRangeSlider"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Advanced Range Slider"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Outputs: `input({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `start({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `end({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` - ### Chart Theme-aware, responsive chart component. - Mount: `data-component="Chart"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Chart"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` +- Props: `title: string = "Chart"`, `description: string = ""`, `items: unknown[] = []`, `valueKey: string = "value"`, `labelKey: string = "label"`, `height: number = 240`, `showLegend: boolean = true`, `showValues: boolean = true`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "bar"`, `class: string = ""` - Slots: `default` -- Outputs: `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `dataPointClick({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `legendToggle({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])` +- Outputs: `select({ item: object; index: number; sourceEvent?: Event })`, `dataPointClick({ item: object; index: number; sourceEvent?: Event })`, `legendToggle({ item: object; index: number; hidden: boolean; sourceEvent?: Event })` ### Clipboard Theme-aware, responsive clipboard component. - Mount: `data-component="Clipboard"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Clipboard"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` +- Props: `value: string = ""`, `label: string = "Copy"`, `copiedLabel: string = "Copied"`, `errorLabel: string = "Copy failed"`, `title: string = "Clipboard"`, `description: string = ""`, `code: boolean = true`, `size: string = "default"`, `color: string = "primary"`, `disabled: boolean = false`, `class: string = ""` - Slots: `default` -- Outputs: `copy({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `success({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)` +- Outputs: `copy({ value: string; sourceEvent?: Event })`, `success({ value: string; sourceEvent?: Event })`, `error({ error: Error | string; value: string; sourceEvent?: Event })` ### Confetti Theme-aware, responsive confetti component. - Mount: `data-component="Confetti"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Confetti"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` +- Props: `label: string = "Celebrate"`, `duration: number = 1200`, `count: number = 24`, `autoStart: boolean = false`, `disabled: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `class: string = ""` - Slots: `default` -- Outputs: `start({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `complete({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` +- Outputs: `start({ sourceEvent?: Event; duration: number })`, `complete({ sourceEvent?: Event; duration: number })` ### DataMap @@ -572,15 +536,6 @@ Theme-aware, responsive drag and drop component. - Slots: `default` - Outputs: `dragStart({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `dragEnd({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `dragEnter({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `dragLeave({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `drop({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `change({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` -### FileUpload - -Theme-aware, responsive file upload component. - -- Mount: `data-component="FileUpload"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "File Upload"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Outputs: `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `upload({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `progress({ progress: number; [key: string]: string | number | boolean | null | object } | number)`, `success({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)`, `cancel({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `remove({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` - ### Map Present responsive location information and markers with map-ready metadata and movement or marker events. @@ -590,15 +545,6 @@ Present responsive location information and markers with map-ready metadata and - Slots: `default` - Outputs: `markerClick({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `select({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `zoom({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` -### ToastNotifications - -Theme-aware, responsive toast notifications component. - -- Mount: `data-component="ToastNotifications"` -- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Toast Notifications"`, `description: string = ""`, `items: unknown[] = []`, `variant: string = "default"`, `class: string = ""` -- Slots: `default` -- Outputs: `add({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `clear({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `action({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })` - ### WysiwygEditor Theme-aware, responsive wysiwyg editor component. diff --git a/.publish/ui/README.md b/.publish/ui/README.md index 14e79db6..5ddddced 100644 --- a/.publish/ui/README.md +++ b/.publish/ui/README.md @@ -118,16 +118,12 @@ are `.wrn` files rendered server-side. The framework serves this stylesheet once at `/__wrnexus/ui.css`, so pages get all component styles from a single request. -### Tailwind and motion +### Component styles and motion -Components use static Tailwind utility classes alongside the shared `.wire-*` -layer. If the package is consumed by a separate Tailwind build, include its -component sources so every utility is generated: - -```css -@import "tailwindcss"; -@source "../node_modules/@wrnexus/ui/components/*.wrn"; -``` +Components own their BEM styles in local `style {}` blocks and do not require a +Tailwind scan. `ui.css` supplies only global tokens, resets, and shared +primitives. Applications can still use Tailwind independently in their own +source files. The shared stylesheet gives all component boundaries consistent, GPU-friendly entry and interaction motion. Override `--wire-motion-fast`, diff --git a/.publish/ui/component-catalog.json b/.publish/ui/component-catalog.json index c4478a65..ab49f7c3 100644 --- a/.publish/ui/component-catalog.json +++ b/.publish/ui/component-catalog.json @@ -6,16 +6,6 @@ "category": "base", "purpose": "Theme-aware, responsive accordion component." }, - { - "name": "AdvancedDatePicker", - "category": "integrations", - "purpose": "Theme-aware, responsive advanced date picker component." - }, - { - "name": "AdvancedRangeSlider", - "category": "integrations", - "purpose": "Theme-aware, responsive advanced range slider component." - }, { "name": "AdvancedSelect", "category": "advanced-forms", @@ -151,11 +141,6 @@ "category": "overlays", "purpose": "Open an accessible keyboard-aware action menu from pointer or keyboard context interactions." }, - { - "name": "CopyMarkup", - "category": "advanced-forms", - "purpose": "Theme-aware, responsive copy markup component." - }, { "name": "CustomScrollbar", "category": "layout", @@ -221,11 +206,6 @@ "category": "forms", "purpose": "Theme-aware, responsive file input component." }, - { - "name": "FileUpload", - "category": "integrations", - "purpose": "Theme-aware, responsive file upload component." - }, { "name": "FileUploadProgress", "category": "base", @@ -496,16 +476,6 @@ "category": "base", "purpose": "Present responsive chronological activity, milestones, or workflow status with rich item metadata." }, - { - "name": "Toast", - "category": "base", - "purpose": "Theme-aware, responsive toast component." - }, - { - "name": "ToastNotifications", - "category": "integrations", - "purpose": "Theme-aware, responsive toast notifications component." - }, { "name": "Toaster", "category": "core", diff --git a/.publish/ui/component-migrations.json b/.publish/ui/component-migrations.json index 58fb01f2..0b84b0e1 100644 --- a/.publish/ui/component-migrations.json +++ b/.publish/ui/component-migrations.json @@ -1,5 +1,12 @@ { - "generatedFrom": "full component catalog reset", - "removedCount": 0, - "replacements": {} + "generatedFrom": "framework remediation 0.8.7", + "removedCount": 6, + "replacements": { + "AdvancedDatePicker": "DatePicker", + "AdvancedRangeSlider": "RangeSlider", + "FileUpload": "FileInput", + "Toast": "Toaster", + "ToastNotifications": "Toaster", + "CopyMarkup": "Clipboard" + } } diff --git a/.publish/ui/component-reference.json b/.publish/ui/component-reference.json index cb9b51af..9fa6cdf1 100644 --- a/.publish/ui/component-reference.json +++ b/.publish/ui/component-reference.json @@ -1,6 +1,6 @@ { "generatedFrom": "packages/ui/components/*.wrn", - "count": 108, + "count": 102, "components": [ { "name": "Accordion", @@ -146,166 +146,6 @@ "events": ["change", "open", "close"], "source": "components/Accordion.wrn" }, - { - "name": "AdvancedDatePicker", - "mount": "AdvancedDatePicker", - "category": "integrations", - "purpose": "Theme-aware, responsive advanced date picker component.", - "props": [ - { - "name": "size", - "type": "string", - "required": false, - "default": "\"default\"", - "options": [] - }, - { - "name": "color", - "type": "string", - "required": false, - "default": "\"primary\"", - "options": [] - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Advanced Date Picker\"", - "options": [] - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"", - "options": [] - }, - { - "name": "items", - "type": "unknown[]", - "required": false, - "default": "[]", - "options": [] - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"", - "options": [] - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"", - "options": [] - } - ], - "slots": ["default"], - "outputs": [ - { - "name": "input", - "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" - }, - { - "name": "change", - "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" - }, - { - "name": "open", - "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" - }, - { - "name": "close", - "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" - }, - { - "name": "clear", - "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" - } - ], - "events": ["input", "change", "open", "close", "clear"], - "source": "components/AdvancedDatePicker.wrn" - }, - { - "name": "AdvancedRangeSlider", - "mount": "AdvancedRangeSlider", - "category": "integrations", - "purpose": "Theme-aware, responsive advanced range slider component.", - "props": [ - { - "name": "size", - "type": "string", - "required": false, - "default": "\"default\"", - "options": [] - }, - { - "name": "color", - "type": "string", - "required": false, - "default": "\"primary\"", - "options": [] - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Advanced Range Slider\"", - "options": [] - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"", - "options": [] - }, - { - "name": "items", - "type": "unknown[]", - "required": false, - "default": "[]", - "options": [] - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"", - "options": [] - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"", - "options": [] - } - ], - "slots": ["default"], - "outputs": [ - { - "name": "input", - "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" - }, - { - "name": "change", - "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" - }, - { - "name": "start", - "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" - }, - { - "name": "end", - "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" - } - ], - "events": ["input", "change", "start", "end"], - "source": "components/AdvancedRangeSlider.wrn" - }, { "name": "AdvancedSelect", "mount": "AdvancedSelect", @@ -1756,7 +1596,7 @@ } ], "events": ["dismiss"], - "source": "components/Badge.wrn" + "source": "components/badge.wrn" }, { "name": "Blockquote", @@ -2935,7 +2775,7 @@ "dragStart", "dragEnd" ], - "source": "components/carousel.wrn" + "source": "components/Carousel.wrn" }, { "name": "Chart", @@ -2943,20 +2783,6 @@ "category": "integrations", "purpose": "Theme-aware, responsive chart component.", "props": [ - { - "name": "size", - "type": "string", - "required": false, - "default": "\"default\"", - "options": [] - }, - { - "name": "color", - "type": "string", - "required": false, - "default": "\"primary\"", - "options": [] - }, { "name": "title", "type": "string", @@ -2979,12 +2805,61 @@ "options": [] }, { - "name": "variant", + "name": "valueKey", + "type": "string", + "required": false, + "default": "\"value\"", + "options": [] + }, + { + "name": "labelKey", + "type": "string", + "required": false, + "default": "\"label\"", + "options": [] + }, + { + "name": "height", + "type": "number", + "required": false, + "default": "240", + "options": [] + }, + { + "name": "showLegend", + "type": "boolean", + "required": false, + "default": "true", + "options": [] + }, + { + "name": "showValues", + "type": "boolean", + "required": false, + "default": "true", + "options": [] + }, + { + "name": "size", "type": "string", "required": false, "default": "\"default\"", "options": [] }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"", + "options": [] + }, + { + "name": "variant", + "type": "string", + "required": false, + "default": "\"bar\"", + "options": [] + }, { "name": "class", "type": "string", @@ -2997,15 +2872,15 @@ "outputs": [ { "name": "select", - "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" + "payloadType": "{ item: object; index: number; sourceEvent?: Event }" }, { "name": "dataPointClick", - "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" + "payloadType": "{ item: object; index: number; sourceEvent?: Event }" }, { "name": "legendToggle", - "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" + "payloadType": "{ item: object; index: number; hidden: boolean; sourceEvent?: Event }" } ], "events": ["select", "dataPointClick", "legendToggle"], @@ -3337,7 +3212,7 @@ } ], "events": ["input", "change", "focus", "blur", "invalid"], - "source": "components/Checkbox.wrn" + "source": "components/checkbox.wrn" }, { "name": "Clipboard", @@ -3346,17 +3221,31 @@ "purpose": "Theme-aware, responsive clipboard component.", "props": [ { - "name": "size", + "name": "value", "type": "string", "required": false, - "default": "\"default\"", + "default": "\"\"", "options": [] }, { - "name": "color", + "name": "label", "type": "string", "required": false, - "default": "\"primary\"", + "default": "\"Copy\"", + "options": [] + }, + { + "name": "copiedLabel", + "type": "string", + "required": false, + "default": "\"Copied\"", + "options": [] + }, + { + "name": "errorLabel", + "type": "string", + "required": false, + "default": "\"Copy failed\"", "options": [] }, { @@ -3374,19 +3263,33 @@ "options": [] }, { - "name": "items", - "type": "unknown[]", + "name": "code", + "type": "boolean", "required": false, - "default": "[]", + "default": "true", "options": [] }, { - "name": "variant", + "name": "size", "type": "string", "required": false, "default": "\"default\"", "options": [] }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"", + "options": [] + }, + { + "name": "disabled", + "type": "boolean", + "required": false, + "default": "false", + "options": [] + }, { "name": "class", "type": "string", @@ -3399,15 +3302,15 @@ "outputs": [ { "name": "copy", - "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" + "payloadType": "{ value: string; sourceEvent?: Event }" }, { "name": "success", - "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + "payloadType": "{ value: string; sourceEvent?: Event }" }, { "name": "error", - "payloadType": "{ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string" + "payloadType": "{ error: Error | string; value: string; sourceEvent?: Event }" } ], "events": ["copy", "success", "error"], @@ -4048,6 +3951,41 @@ "category": "integrations", "purpose": "Theme-aware, responsive confetti component.", "props": [ + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Celebrate\"", + "options": [] + }, + { + "name": "duration", + "type": "number", + "required": false, + "default": "1200", + "options": [] + }, + { + "name": "count", + "type": "number", + "required": false, + "default": "24", + "options": [] + }, + { + "name": "autoStart", + "type": "boolean", + "required": false, + "default": "false", + "options": [] + }, + { + "name": "disabled", + "type": "boolean", + "required": false, + "default": "false", + "options": [] + }, { "name": "size", "type": "string", @@ -4062,34 +4000,6 @@ "default": "\"primary\"", "options": [] }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Confetti\"", - "options": [] - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"", - "options": [] - }, - { - "name": "items", - "type": "unknown[]", - "required": false, - "default": "[]", - "options": [] - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"", - "options": [] - }, { "name": "class", "type": "string", @@ -4102,11 +4012,11 @@ "outputs": [ { "name": "start", - "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + "payloadType": "{ sourceEvent?: Event; duration: number }" }, { "name": "complete", - "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + "payloadType": "{ sourceEvent?: Event; duration: number }" } ], "events": ["start", "complete"], @@ -4328,122 +4238,6 @@ "events": ["open", "close", "select", "action"], "source": "components/ContextMenu.wrn" }, - { - "name": "CopyMarkup", - "mount": "CopyMarkup", - "category": "advanced-forms", - "purpose": "Theme-aware, responsive copy markup component.", - "props": [ - { - "name": "size", - "type": "string", - "required": false, - "default": "\"default\"", - "options": [] - }, - { - "name": "color", - "type": "string", - "required": false, - "default": "\"primary\"", - "options": [] - }, - { - "name": "label", - "type": "string", - "required": false, - "default": "\"Copy Markup\"", - "options": [] - }, - { - "name": "name", - "type": "string", - "required": false, - "default": "\"\"", - "options": [] - }, - { - "name": "value", - "type": "string", - "required": false, - "default": "\"\"", - "options": [] - }, - { - "name": "placeholder", - "type": "string", - "required": false, - "default": "\"\"", - "options": [] - }, - { - "name": "type", - "type": "string", - "required": false, - "default": "\"text\"", - "options": [] - }, - { - "name": "min", - "type": "string", - "required": false, - "default": "\"\"", - "options": [] - }, - { - "name": "max", - "type": "string", - "required": false, - "default": "\"\"", - "options": [] - }, - { - "name": "step", - "type": "string", - "required": false, - "default": "\"\"", - "options": [] - }, - { - "name": "disabled", - "type": "boolean", - "required": false, - "default": "false", - "options": [] - }, - { - "name": "required", - "type": "boolean", - "required": false, - "default": "false", - "options": [] - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"", - "options": [] - } - ], - "slots": [], - "outputs": [ - { - "name": "copy", - "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" - }, - { - "name": "success", - "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" - }, - { - "name": "error", - "payloadType": "{ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string" - } - ], - "events": ["copy", "success", "error"], - "source": "components/CopyMarkup.wrn" - }, { "name": "CustomScrollbar", "mount": "CustomScrollbar", @@ -6240,96 +6034,6 @@ "events": ["input", "change", "focus", "blur", "select", "clear", "invalid"], "source": "components/FileInput.wrn" }, - { - "name": "FileUpload", - "mount": "FileUpload", - "category": "integrations", - "purpose": "Theme-aware, responsive file upload component.", - "props": [ - { - "name": "size", - "type": "string", - "required": false, - "default": "\"default\"", - "options": [] - }, - { - "name": "color", - "type": "string", - "required": false, - "default": "\"primary\"", - "options": [] - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"File Upload\"", - "options": [] - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"", - "options": [] - }, - { - "name": "items", - "type": "unknown[]", - "required": false, - "default": "[]", - "options": [] - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"", - "options": [] - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"", - "options": [] - } - ], - "slots": ["default"], - "outputs": [ - { - "name": "select", - "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" - }, - { - "name": "upload", - "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" - }, - { - "name": "progress", - "payloadType": "{ progress: number; [key: string]: string | number | boolean | null | object } | number" - }, - { - "name": "success", - "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" - }, - { - "name": "error", - "payloadType": "{ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string" - }, - { - "name": "cancel", - "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" - }, - { - "name": "remove", - "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" - } - ], - "events": ["select", "upload", "progress", "success", "error", "cancel", "remove"], - "source": "components/FileUpload.wrn" - }, { "name": "FileUploadProgress", "mount": "FileUploadProgress", @@ -7247,7 +6951,7 @@ } ], "events": ["input", "change", "focus", "blur", "invalid", "keydown", "keyup"], - "source": "components/Input.wrn" + "source": "components/input.wrn" }, { "name": "InputGroup", @@ -10490,7 +10194,7 @@ } ], "events": ["input", "change", "focus", "blur", "invalid"], - "source": "components/Radio.wrn" + "source": "components/radio.wrn" }, { "name": "RangeSlider", @@ -11308,7 +11012,7 @@ } ], "events": ["input", "change", "focus", "blur", "open", "close", "invalid"], - "source": "components/Select.wrn" + "source": "components/select.wrn" }, { "name": "Sidebar", @@ -12387,7 +12091,7 @@ } ], "events": ["input", "change", "focus", "blur"], - "source": "components/Switch.wrn" + "source": "components/switch.wrn" }, { "name": "Tabs", @@ -12788,7 +12492,7 @@ } ], "events": ["input", "change", "focus", "blur", "invalid"], - "source": "components/Textarea.wrn" + "source": "components/textarea.wrn" }, { "name": "TimePicker", @@ -13079,154 +12783,6 @@ "events": ["select"], "source": "components/Timeline.wrn" }, - { - "name": "Toast", - "mount": "Toast", - "category": "base", - "purpose": "Theme-aware, responsive toast component.", - "props": [ - { - "name": "size", - "type": "string", - "required": false, - "default": "\"default\"", - "options": [] - }, - { - "name": "color", - "type": "string", - "required": false, - "default": "\"primary\"", - "options": [] - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Toast\"", - "options": [] - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"", - "options": [] - }, - { - "name": "items", - "type": "unknown[]", - "required": false, - "default": "[]", - "options": [] - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"", - "options": [] - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"", - "options": [] - } - ], - "slots": ["default"], - "outputs": [ - { - "name": "dismiss", - "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" - }, - { - "name": "action", - "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" - } - ], - "events": ["dismiss", "action"], - "source": "components/Toast.wrn" - }, - { - "name": "ToastNotifications", - "mount": "ToastNotifications", - "category": "integrations", - "purpose": "Theme-aware, responsive toast notifications component.", - "props": [ - { - "name": "size", - "type": "string", - "required": false, - "default": "\"default\"", - "options": [] - }, - { - "name": "color", - "type": "string", - "required": false, - "default": "\"primary\"", - "options": [] - }, - { - "name": "title", - "type": "string", - "required": false, - "default": "\"Toast Notifications\"", - "options": [] - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"", - "options": [] - }, - { - "name": "items", - "type": "unknown[]", - "required": false, - "default": "[]", - "options": [] - }, - { - "name": "variant", - "type": "string", - "required": false, - "default": "\"default\"", - "options": [] - }, - { - "name": "class", - "type": "string", - "required": false, - "default": "\"\"", - "options": [] - } - ], - "slots": ["default"], - "outputs": [ - { - "name": "add", - "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" - }, - { - "name": "dismiss", - "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" - }, - { - "name": "clear", - "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" - }, - { - "name": "action", - "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" - } - ], - "events": ["add", "dismiss", "clear", "action"], - "source": "components/ToastNotifications.wrn" - }, { "name": "Toaster", "mount": "Toaster", @@ -13874,7 +13430,7 @@ } ], "events": ["toggle", "open", "close"], - "source": "components/Tooltip.wrn" + "source": "components/tooltip.wrn" }, { "name": "TreeView", @@ -13882,20 +13438,6 @@ "category": "base", "purpose": "Theme-aware, responsive tree view component.", "props": [ - { - "name": "size", - "type": "string", - "required": false, - "default": "\"default\"", - "options": [] - }, - { - "name": "color", - "type": "string", - "required": false, - "default": "\"primary\"", - "options": [] - }, { "name": "title", "type": "string", @@ -13918,12 +13460,47 @@ "options": [] }, { - "name": "variant", + "name": "valueKey", + "type": "string", + "required": false, + "default": "\"value\"", + "options": [] + }, + { + "name": "labelKey", + "type": "string", + "required": false, + "default": "\"label\"", + "options": [] + }, + { + "name": "defaultExpanded", + "type": "unknown[]", + "required": false, + "default": "[]", + "options": [] + }, + { + "name": "selected", + "type": "string", + "required": false, + "default": "\"\"", + "options": [] + }, + { + "name": "size", "type": "string", "required": false, "default": "\"default\"", "options": [] }, + { + "name": "color", + "type": "string", + "required": false, + "default": "\"primary\"", + "options": [] + }, { "name": "class", "type": "string", @@ -13936,19 +13513,19 @@ "outputs": [ { "name": "select", - "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" + "payloadType": "{ item: object; value: string; sourceEvent?: Event }" }, { "name": "toggle", - "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + "payloadType": "{ item: object; value: string; expanded: boolean; sourceEvent?: Event }" }, { "name": "expand", - "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + "payloadType": "{ item: object; value: string; sourceEvent?: Event }" }, { "name": "collapse", - "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" + "payloadType": "{ item: object; value: string; sourceEvent?: Event }" } ], "events": ["select", "toggle", "expand", "collapse"], diff --git a/.publish/ui/components/Accordion.wrn b/.publish/ui/components/Accordion.wrn index 5973f986..ceb9ed1f 100644 --- a/.publish/ui/components/Accordion.wrn +++ b/.publish/ui/components/Accordion.wrn @@ -1,3 +1,5 @@ +import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn" + component Accordion { outputs { change(payload: { value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null) @@ -103,7 +105,7 @@ component Accordion { data-variant="{variant}" data-indicator="{indicator}" data-multiple="{allowsMultiple() ? 'true' : 'false'}" - class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--accordion wire-next--accordion-{variant} {bordered ? 'wire-next--accordion-bordered' : ''} {separated ? 'wire-next--accordion-separated' : ''} {flush ? 'wire-next--accordion-flush' : ''} {disabled ? 'wire-next--disabled' : ''} {class}" + class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--accordion wire-next--accordion-{variant} {bordered ? 'wire-next--accordion-bordered' : ''} {separated ? 'wire-next--accordion-separated' : ''} {flush ? 'wire-next--accordion-flush' : ''} {disabled ? 'wire-next--disabled' : ''} {class}" > {#each items as item, index}
{/each} +