@wpic/ui 0.6.6 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.7.0 — 2026-09-10
+
+- Add WSplitButton: a primary action button paired with a chevron that opens a menu of secondary actions, built from WButton + WButtonGroup + WPopover so it matches WButton exactly across every variant and size.
+
 ## 0.6.6 — 2026-09-10
 
 - Localize WDateRangePicker calendars and action labels; expose WSelect search/action labels through WFilterBar.

package/COMPONENTS.md

@@ -379,6 +379,52 @@ close: []
 
 ---
 
+## WSplitButton
+
+A primary action button paired with a chevron that opens a menu of secondary
+actions. Generic: the primary action is not assumed to be any specific intent
+(export, save, etc.) — the caller supplies the primary label via the default
+slot and the menu entries via `options`.
+
+**Import:** `import { WSplitButton, type WSplitButtonOption } from '@wpic/ui'`
+
+**Props:**
+```ts
+options: WSplitButtonOption[]   // { value: string, label: string, icon?: object | Function, disabled?: boolean }
+variant?: 'primary' | 'secondary' | 'subtle' | 'destructive' | 'ghost' | 'outline'
+size?: 'xs' | 'sm' | 'md' | 'lg'
+icon?: object | Function        // icon for the primary button
+disabled?: boolean
+loading?: boolean
+menuLabel?: string              // accessible name for the chevron trigger, default "More options"
+```
+
+**Emits:**
+```ts
+click: [e: MouseEvent]   // primary button activated
+select: [value: string]  // a menu option was chosen
+```
+
+**Slots:**
+```ts
+default  // primary button label/content
+```
+
+**Usage:**
+```html
+<WSplitButton
+  :options="[{ value: 'csv', label: 'CSV' }, { value: 'xlsx', label: 'Excel (.xlsx)' }]"
+  variant="outline"
+  :icon="Download"
+  @click="exportDefault"
+  @select="format => exportAs(format)"
+>
+  Export
+</WSplitButton>
+```
+
+---
+
 ## WProgress
 
 **Import:** `import { WProgress } from '@wpic/ui'`

package/dist/components/WModal.vue.d.ts

@@ -5,20 +5,29 @@ type __VLS_Props = {
     zIndex?: string;
     hideClose?: boolean;
     noPadding?: boolean;
+    draggable?: boolean;
+    modal?: boolean;
+    closeLabel?: string;
+    moveLabel?: string;
 };
-declare var __VLS_5: {}, __VLS_11: {}, __VLS_13: {};
+declare var __VLS_9: {}, __VLS_15: {}, __VLS_17: {};
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_5) => any;
+    header?: (props: typeof __VLS_9) => any;
 } & {
-    default?: (props: typeof __VLS_11) => any;
+    default?: (props: typeof __VLS_15) => any;
 } & {
-    footer?: (props: typeof __VLS_13) => any;
+    footer?: (props: typeof __VLS_17) => any;
 };
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     close: () => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {
+    closeLabel: string;
+    draggable: boolean;
+    modal: boolean;
+    moveLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/WSplitButton.vue.d.ts

@@ -0,0 +1,34 @@
+export interface WSplitButtonOption {
+    value: string;
+    label: string;
+    icon?: object | Function;
+    disabled?: boolean;
+}
+type __VLS_Props = {
+    options: WSplitButtonOption[];
+    variant?: 'primary' | 'secondary' | 'subtle' | 'destructive' | 'ghost' | 'outline';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    icon?: object | Function;
+    disabled?: boolean;
+    loading?: boolean;
+    /** Accessible name for the chevron trigger. Defaults to "More options". */
+    menuLabel?: string;
+};
+declare var __VLS_13: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (e: MouseEvent) => any;
+    select: (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((e: MouseEvent) => any) | undefined;
+    onSelect?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/index.d.ts

@@ -68,6 +68,8 @@ export { default as WImageTile } from './components/WImageTile.vue';
 export { default as WFilterBar } from './components/WFilterBar.vue';
 export type { FilterItem } from './components/WFilterBar.vue';
 export { default as WPopover } from './components/WPopover.vue';
+export { default as WSplitButton } from './components/WSplitButton.vue';
+export type { WSplitButtonOption } from './components/WSplitButton.vue';
 export { default as WTailwindColorPicker } from './components/WTailwindColorPicker.vue';
 export type { WTailwindColorOption } from './components/WTailwindColorPicker.vue';
 export { useRecentItems } from './composables/useRecentItems';