@shineuix/vue 0.0.0-stage → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ShineUI contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,49 @@
-# Temporary Holding Version
+# @shineuix/vue
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Vue 3 bindings for ShineUI, one component per element.
+
+```bash
+npm i @shineuix/core @shineuix/vue
+```
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { SuiButton, SuiInputText } from '@shineuix/vue';
+import '@shineuix/core/shineui.css';
+const email = ref('');
+</script>
+<template>
+  <SuiButton variant="accent" label="Pay bills" @click="pay" />
+  <SuiInputText label="Customer email" required v-model="email" />
+</template>
+```
+
+Events: core `suiChange` is `@sui-change`, and so on. `v-model` works on every form part: text
+parts update on `suiInput`, `sui-edit-box` on `suiSave`, the rest on `suiChange`. Every prop
+reaches the element as a property, so `:disabled="false"` means enabled.
+
+Vite: use the plain `@vitejs/plugin-vue`; the bindings are real Vue components, so no
+`isCustomElement` configuration is needed. Peer dependency: Vue 3.4 or newer. Install
+`@shineuix/core` and this package at the same version; the bindings pin the core exactly. Each
+component is typed as the package's own `StencilVueComponent`, exported from the root, so the types
+resolve under every TypeScript resolution mode and need no `vue-router`. `require('@shineuix/vue')`
+resolves through the `default` condition and loads on Node 20.19 and later.
+
+Props that would start with `on` followed by a capital letter are renamed in the core (for example
+`sui-toggle-button` uses `labelOn`/`labelOff`), because Vue treats such names as event listeners.
+
+A template ref holds the Vue component, and its `$el` is the element, typed as that element in
+TypeScript (`HTMLSuiInputTextElement` for `SuiInputText`), so element methods and state are checked:
+`useTemplateRef<InstanceType<typeof SuiInputText>>('name').value?.$el.setFocus()`.
+
+Server rendering: under Nuxt, with server rendering on, a component renders nothing on the server
+and while the page hydrates, and the element draws, with the content of its slots, once the page
+has mounted, so hydration reports no mismatch and no `<ClientOnly>` is needed; an app that renders
+only in the browser sees the element in its first render. The elements draw into their own light
+DOM, which Vue would take for nodes it rendered, so their markup does not come from the server in a
+Vue app. `@shineuix/ssr` renders the elements' own markup for pages without Vue.
+
+Documentation, live demos and the API of every element: [shineui.dev](https://shineui.dev).
+
+MIT. Copyright 2026 ShineUI contributors.

package/dist/components.d.ts

@@ -0,0 +1,148 @@
+import { type StencilVueComponent } from './types.js';
+import type { JSX } from '@shineuix/core/dist/components';
+export declare const SuiAccordion: StencilVueComponent<JSX.SuiAccordion, HTMLSuiAccordionElement>;
+export declare const SuiAccordionItem: StencilVueComponent<JSX.SuiAccordionItem, HTMLSuiAccordionItemElement>;
+export declare const SuiAnchor: StencilVueComponent<JSX.SuiAnchor, HTMLSuiAnchorElement>;
+export declare const SuiAutoComplete: StencilVueComponent<JSX.SuiAutoComplete, HTMLSuiAutoCompleteElement, JSX.SuiAutoComplete["value"]>;
+export declare const SuiAvatar: StencilVueComponent<JSX.SuiAvatar, HTMLSuiAvatarElement>;
+export declare const SuiAvatarGroup: StencilVueComponent<JSX.SuiAvatarGroup, HTMLSuiAvatarGroupElement>;
+export declare const SuiBadge: StencilVueComponent<JSX.SuiBadge, HTMLSuiBadgeElement>;
+export declare const SuiBlockUi: StencilVueComponent<JSX.SuiBlockUi, HTMLSuiBlockUiElement>;
+export declare const SuiBoard: StencilVueComponent<JSX.SuiBoard, HTMLSuiBoardElement>;
+export declare const SuiBottomNav: StencilVueComponent<JSX.SuiBottomNav, HTMLSuiBottomNavElement>;
+export declare const SuiBreadcrumb: StencilVueComponent<JSX.SuiBreadcrumb, HTMLSuiBreadcrumbElement>;
+export declare const SuiButton: StencilVueComponent<JSX.SuiButton, HTMLSuiButtonElement>;
+export declare const SuiButtonGroup: StencilVueComponent<JSX.SuiButtonGroup, HTMLSuiButtonGroupElement>;
+export declare const SuiCalendar: StencilVueComponent<JSX.SuiCalendar, HTMLSuiCalendarElement>;
+export declare const SuiCard: StencilVueComponent<JSX.SuiCard, HTMLSuiCardElement>;
+export declare const SuiCarousel: StencilVueComponent<JSX.SuiCarousel, HTMLSuiCarouselElement>;
+export declare const SuiCascadeSelect: StencilVueComponent<JSX.SuiCascadeSelect, HTMLSuiCascadeSelectElement, JSX.SuiCascadeSelect["value"]>;
+export declare const SuiChartBar: StencilVueComponent<JSX.SuiChartBar, HTMLSuiChartBarElement>;
+export declare const SuiChartCandlestick: StencilVueComponent<JSX.SuiChartCandlestick, HTMLSuiChartCandlestickElement>;
+export declare const SuiChartCombo: StencilVueComponent<JSX.SuiChartCombo, HTMLSuiChartComboElement>;
+export declare const SuiChartGauge: StencilVueComponent<JSX.SuiChartGauge, HTMLSuiChartGaugeElement>;
+export declare const SuiChartHeatmap: StencilVueComponent<JSX.SuiChartHeatmap, HTMLSuiChartHeatmapElement>;
+export declare const SuiChartLine: StencilVueComponent<JSX.SuiChartLine, HTMLSuiChartLineElement>;
+export declare const SuiChartNavigator: StencilVueComponent<JSX.SuiChartNavigator, HTMLSuiChartNavigatorElement>;
+export declare const SuiChartPie: StencilVueComponent<JSX.SuiChartPie, HTMLSuiChartPieElement>;
+export declare const SuiChartRadar: StencilVueComponent<JSX.SuiChartRadar, HTMLSuiChartRadarElement>;
+export declare const SuiChartScatter: StencilVueComponent<JSX.SuiChartScatter, HTMLSuiChartScatterElement>;
+export declare const SuiChartSynced: StencilVueComponent<JSX.SuiChartSynced, HTMLSuiChartSyncedElement>;
+export declare const SuiChartTreemap: StencilVueComponent<JSX.SuiChartTreemap, HTMLSuiChartTreemapElement>;
+export declare const SuiChartWaterfall: StencilVueComponent<JSX.SuiChartWaterfall, HTMLSuiChartWaterfallElement>;
+export declare const SuiCheckbox: StencilVueComponent<JSX.SuiCheckbox, HTMLSuiCheckboxElement, JSX.SuiCheckbox["checked"]>;
+export declare const SuiCheckboxGroup: StencilVueComponent<JSX.SuiCheckboxGroup, HTMLSuiCheckboxGroupElement, JSX.SuiCheckboxGroup["value"]>;
+export declare const SuiChip: StencilVueComponent<JSX.SuiChip, HTMLSuiChipElement>;
+export declare const SuiChoiceCards: StencilVueComponent<JSX.SuiChoiceCards, HTMLSuiChoiceCardsElement, JSX.SuiChoiceCards["value"]>;
+export declare const SuiCodeBlock: StencilVueComponent<JSX.SuiCodeBlock, HTMLSuiCodeBlockElement>;
+export declare const SuiColorEditor: StencilVueComponent<JSX.SuiColorEditor, HTMLSuiColorEditorElement, JSX.SuiColorEditor["value"]>;
+export declare const SuiColorPicker: StencilVueComponent<JSX.SuiColorPicker, HTMLSuiColorPickerElement, JSX.SuiColorPicker["value"]>;
+export declare const SuiCommandPalette: StencilVueComponent<JSX.SuiCommandPalette, HTMLSuiCommandPaletteElement>;
+export declare const SuiConfigList: StencilVueComponent<JSX.SuiConfigList, HTMLSuiConfigListElement>;
+export declare const SuiConfigRow: StencilVueComponent<JSX.SuiConfigRow, HTMLSuiConfigRowElement>;
+export declare const SuiConfirmDialog: StencilVueComponent<JSX.SuiConfirmDialog, HTMLSuiConfirmDialogElement>;
+export declare const SuiConfirmPopup: StencilVueComponent<JSX.SuiConfirmPopup, HTMLSuiConfirmPopupElement>;
+export declare const SuiContextMenu: StencilVueComponent<JSX.SuiContextMenu, HTMLSuiContextMenuElement>;
+export declare const SuiCopyButton: StencilVueComponent<JSX.SuiCopyButton, HTMLSuiCopyButtonElement>;
+export declare const SuiDataGrid: StencilVueComponent<JSX.SuiDataGrid, HTMLSuiDataGridElement>;
+export declare const SuiDataTable: StencilVueComponent<JSX.SuiDataTable, HTMLSuiDataTableElement>;
+export declare const SuiDataView: StencilVueComponent<JSX.SuiDataView, HTMLSuiDataViewElement>;
+export declare const SuiDatePicker: StencilVueComponent<JSX.SuiDatePicker, HTMLSuiDatePickerElement, JSX.SuiDatePicker["value"]>;
+export declare const SuiDescriptionList: StencilVueComponent<JSX.SuiDescriptionList, HTMLSuiDescriptionListElement>;
+export declare const SuiDialog: StencilVueComponent<JSX.SuiDialog, HTMLSuiDialogElement>;
+export declare const SuiDivider: StencilVueComponent<JSX.SuiDivider, HTMLSuiDividerElement>;
+export declare const SuiDock: StencilVueComponent<JSX.SuiDock, HTMLSuiDockElement>;
+export declare const SuiDrawer: StencilVueComponent<JSX.SuiDrawer, HTMLSuiDrawerElement>;
+export declare const SuiEditBox: StencilVueComponent<JSX.SuiEditBox, HTMLSuiEditBoxElement, JSX.SuiEditBox["html"]>;
+export declare const SuiEmptyState: StencilVueComponent<JSX.SuiEmptyState, HTMLSuiEmptyStateElement>;
+export declare const SuiFieldset: StencilVueComponent<JSX.SuiFieldset, HTMLSuiFieldsetElement>;
+export declare const SuiFileUpload: StencilVueComponent<JSX.SuiFileUpload, HTMLSuiFileUploadElement>;
+export declare const SuiFilterBuilder: StencilVueComponent<JSX.SuiFilterBuilder, HTMLSuiFilterBuilderElement, JSX.SuiFilterBuilder["value"]>;
+export declare const SuiFilterPanel: StencilVueComponent<JSX.SuiFilterPanel, HTMLSuiFilterPanelElement, JSX.SuiFilterPanel["values"]>;
+export declare const SuiFloatLabel: StencilVueComponent<JSX.SuiFloatLabel, HTMLSuiFloatLabelElement, JSX.SuiFloatLabel["value"]>;
+export declare const SuiFluid: StencilVueComponent<JSX.SuiFluid, HTMLSuiFluidElement>;
+export declare const SuiForm: StencilVueComponent<JSX.SuiForm, HTMLSuiFormElement>;
+export declare const SuiFormActions: StencilVueComponent<JSX.SuiFormActions, HTMLSuiFormActionsElement>;
+export declare const SuiFormLayout: StencilVueComponent<JSX.SuiFormLayout, HTMLSuiFormLayoutElement>;
+export declare const SuiGalleria: StencilVueComponent<JSX.SuiGalleria, HTMLSuiGalleriaElement>;
+export declare const SuiIconButton: StencilVueComponent<JSX.SuiIconButton, HTMLSuiIconButtonElement>;
+export declare const SuiIconField: StencilVueComponent<JSX.SuiIconField, HTMLSuiIconFieldElement, JSX.SuiIconField["value"]>;
+export declare const SuiIftaLabel: StencilVueComponent<JSX.SuiIftaLabel, HTMLSuiIftaLabelElement, JSX.SuiIftaLabel["value"]>;
+export declare const SuiImage: StencilVueComponent<JSX.SuiImage, HTMLSuiImageElement>;
+export declare const SuiImageCompare: StencilVueComponent<JSX.SuiImageCompare, HTMLSuiImageCompareElement>;
+export declare const SuiInplace: StencilVueComponent<JSX.SuiInplace, HTMLSuiInplaceElement, JSX.SuiInplace["value"]>;
+export declare const SuiInputGroup: StencilVueComponent<JSX.SuiInputGroup, HTMLSuiInputGroupElement>;
+export declare const SuiInputGroupAddon: StencilVueComponent<JSX.SuiInputGroupAddon, HTMLSuiInputGroupAddonElement>;
+export declare const SuiInputMask: StencilVueComponent<JSX.SuiInputMask, HTMLSuiInputMaskElement, JSX.SuiInputMask["value"]>;
+export declare const SuiInputNumber: StencilVueComponent<JSX.SuiInputNumber, HTMLSuiInputNumberElement, JSX.SuiInputNumber["value"]>;
+export declare const SuiInputOtp: StencilVueComponent<JSX.SuiInputOtp, HTMLSuiInputOtpElement, JSX.SuiInputOtp["value"]>;
+export declare const SuiInputTags: StencilVueComponent<JSX.SuiInputTags, HTMLSuiInputTagsElement, JSX.SuiInputTags["value"]>;
+export declare const SuiInputText: StencilVueComponent<JSX.SuiInputText, HTMLSuiInputTextElement, JSX.SuiInputText["value"]>;
+export declare const SuiKbd: StencilVueComponent<JSX.SuiKbd, HTMLSuiKbdElement>;
+export declare const SuiKnob: StencilVueComponent<JSX.SuiKnob, HTMLSuiKnobElement, JSX.SuiKnob["value"]>;
+export declare const SuiList: StencilVueComponent<JSX.SuiList, HTMLSuiListElement>;
+export declare const SuiListbox: StencilVueComponent<JSX.SuiListbox, HTMLSuiListboxElement, JSX.SuiListbox["value"]>;
+export declare const SuiMegaMenu: StencilVueComponent<JSX.SuiMegaMenu, HTMLSuiMegaMenuElement>;
+export declare const SuiMenu: StencilVueComponent<JSX.SuiMenu, HTMLSuiMenuElement>;
+export declare const SuiMenubar: StencilVueComponent<JSX.SuiMenubar, HTMLSuiMenubarElement>;
+export declare const SuiMessage: StencilVueComponent<JSX.SuiMessage, HTMLSuiMessageElement>;
+export declare const SuiMeterGroup: StencilVueComponent<JSX.SuiMeterGroup, HTMLSuiMeterGroupElement>;
+export declare const SuiMiniToolbar: StencilVueComponent<JSX.SuiMiniToolbar, HTMLSuiMiniToolbarElement>;
+export declare const SuiMultiSelect: StencilVueComponent<JSX.SuiMultiSelect, HTMLSuiMultiSelectElement, JSX.SuiMultiSelect["value"]>;
+export declare const SuiNotificationCenter: StencilVueComponent<JSX.SuiNotificationCenter, HTMLSuiNotificationCenterElement>;
+export declare const SuiOrderList: StencilVueComponent<JSX.SuiOrderList, HTMLSuiOrderListElement>;
+export declare const SuiOrgChart: StencilVueComponent<JSX.SuiOrgChart, HTMLSuiOrgChartElement>;
+export declare const SuiOverlayBadge: StencilVueComponent<JSX.SuiOverlayBadge, HTMLSuiOverlayBadgeElement>;
+export declare const SuiPageHeader: StencilVueComponent<JSX.SuiPageHeader, HTMLSuiPageHeaderElement>;
+export declare const SuiPaginator: StencilVueComponent<JSX.SuiPaginator, HTMLSuiPaginatorElement>;
+export declare const SuiPanel: StencilVueComponent<JSX.SuiPanel, HTMLSuiPanelElement>;
+export declare const SuiPanelMenu: StencilVueComponent<JSX.SuiPanelMenu, HTMLSuiPanelMenuElement>;
+export declare const SuiPassword: StencilVueComponent<JSX.SuiPassword, HTMLSuiPasswordElement, JSX.SuiPassword["value"]>;
+export declare const SuiPersona: StencilVueComponent<JSX.SuiPersona, HTMLSuiPersonaElement>;
+export declare const SuiPickList: StencilVueComponent<JSX.SuiPickList, HTMLSuiPickListElement>;
+export declare const SuiPopover: StencilVueComponent<JSX.SuiPopover, HTMLSuiPopoverElement>;
+export declare const SuiProgressBar: StencilVueComponent<JSX.SuiProgressBar, HTMLSuiProgressBarElement>;
+export declare const SuiProgressRing: StencilVueComponent<JSX.SuiProgressRing, HTMLSuiProgressRingElement>;
+export declare const SuiProgressSpinner: StencilVueComponent<JSX.SuiProgressSpinner, HTMLSuiProgressSpinnerElement>;
+export declare const SuiQrCode: StencilVueComponent<JSX.SuiQrCode, HTMLSuiQrCodeElement>;
+export declare const SuiRadioButton: StencilVueComponent<JSX.SuiRadioButton, HTMLSuiRadioButtonElement, JSX.SuiRadioButton["checked"]>;
+export declare const SuiRadioGroup: StencilVueComponent<JSX.SuiRadioGroup, HTMLSuiRadioGroupElement, JSX.SuiRadioGroup["value"]>;
+export declare const SuiRating: StencilVueComponent<JSX.SuiRating, HTMLSuiRatingElement, JSX.SuiRating["value"]>;
+export declare const SuiRichTextEditor: StencilVueComponent<JSX.SuiRichTextEditor, HTMLSuiRichTextEditorElement, JSX.SuiRichTextEditor["html"]>;
+export declare const SuiSaveStatus: StencilVueComponent<JSX.SuiSaveStatus, HTMLSuiSaveStatusElement>;
+export declare const SuiSchedulerBuilder: StencilVueComponent<JSX.SuiSchedulerBuilder, HTMLSuiSchedulerBuilderElement, JSX.SuiSchedulerBuilder["config"]>;
+export declare const SuiScrollPanel: StencilVueComponent<JSX.SuiScrollPanel, HTMLSuiScrollPanelElement>;
+export declare const SuiScrollTop: StencilVueComponent<JSX.SuiScrollTop, HTMLSuiScrollTopElement>;
+export declare const SuiSelect: StencilVueComponent<JSX.SuiSelect, HTMLSuiSelectElement, JSX.SuiSelect["value"]>;
+export declare const SuiSelectButton: StencilVueComponent<JSX.SuiSelectButton, HTMLSuiSelectButtonElement, JSX.SuiSelectButton["value"]>;
+export declare const SuiSideNav: StencilVueComponent<JSX.SuiSideNav, HTMLSuiSideNavElement>;
+export declare const SuiSkeleton: StencilVueComponent<JSX.SuiSkeleton, HTMLSuiSkeletonElement>;
+export declare const SuiSkeletonCard: StencilVueComponent<JSX.SuiSkeletonCard, HTMLSuiSkeletonCardElement>;
+export declare const SuiSlider: StencilVueComponent<JSX.SuiSlider, HTMLSuiSliderElement, JSX.SuiSlider["value"]>;
+export declare const SuiSparkline: StencilVueComponent<JSX.SuiSparkline, HTMLSuiSparklineElement>;
+export declare const SuiSpeedDial: StencilVueComponent<JSX.SuiSpeedDial, HTMLSuiSpeedDialElement>;
+export declare const SuiSplitButton: StencilVueComponent<JSX.SuiSplitButton, HTMLSuiSplitButtonElement>;
+export declare const SuiSplitter: StencilVueComponent<JSX.SuiSplitter, HTMLSuiSplitterElement>;
+export declare const SuiSpoiler: StencilVueComponent<JSX.SuiSpoiler, HTMLSuiSpoilerElement>;
+export declare const SuiStatCard: StencilVueComponent<JSX.SuiStatCard, HTMLSuiStatCardElement>;
+export declare const SuiStepper: StencilVueComponent<JSX.SuiStepper, HTMLSuiStepperElement>;
+export declare const SuiTab: StencilVueComponent<JSX.SuiTab, HTMLSuiTabElement>;
+export declare const SuiTabs: StencilVueComponent<JSX.SuiTabs, HTMLSuiTabsElement>;
+export declare const SuiTag: StencilVueComponent<JSX.SuiTag, HTMLSuiTagElement>;
+export declare const SuiTerminal: StencilVueComponent<JSX.SuiTerminal, HTMLSuiTerminalElement>;
+export declare const SuiTextarea: StencilVueComponent<JSX.SuiTextarea, HTMLSuiTextareaElement, JSX.SuiTextarea["value"]>;
+export declare const SuiThemePicker: StencilVueComponent<JSX.SuiThemePicker, HTMLSuiThemePickerElement>;
+export declare const SuiTieredMenu: StencilVueComponent<JSX.SuiTieredMenu, HTMLSuiTieredMenuElement>;
+export declare const SuiTimePicker: StencilVueComponent<JSX.SuiTimePicker, HTMLSuiTimePickerElement, JSX.SuiTimePicker["value"]>;
+export declare const SuiTimeline: StencilVueComponent<JSX.SuiTimeline, HTMLSuiTimelineElement>;
+export declare const SuiToastHost: StencilVueComponent<JSX.SuiToastHost, HTMLSuiToastHostElement>;
+export declare const SuiToggleButton: StencilVueComponent<JSX.SuiToggleButton, HTMLSuiToggleButtonElement, JSX.SuiToggleButton["checked"]>;
+export declare const SuiToggleSwitch: StencilVueComponent<JSX.SuiToggleSwitch, HTMLSuiToggleSwitchElement, JSX.SuiToggleSwitch["checked"]>;
+export declare const SuiToolbar: StencilVueComponent<JSX.SuiToolbar, HTMLSuiToolbarElement>;
+export declare const SuiTooltip: StencilVueComponent<JSX.SuiTooltip, HTMLSuiTooltipElement>;
+export declare const SuiTour: StencilVueComponent<JSX.SuiTour, HTMLSuiTourElement>;
+export declare const SuiTree: StencilVueComponent<JSX.SuiTree, HTMLSuiTreeElement>;
+export declare const SuiTreeSelect: StencilVueComponent<JSX.SuiTreeSelect, HTMLSuiTreeSelectElement, JSX.SuiTreeSelect["value"]>;
+export declare const SuiTreeTable: StencilVueComponent<JSX.SuiTreeTable, HTMLSuiTreeTableElement>;
+export declare const SuiTrend: StencilVueComponent<JSX.SuiTrend, HTMLSuiTrendElement>;
+export declare const SuiVirtualScroller: StencilVueComponent<JSX.SuiVirtualScroller, HTMLSuiVirtualScrollerElement>;