@wpic/ui 0.9.23 → 0.9.25

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 0.9.25
+
+- Add WChatComposer and WChatEditor with the Perform glass design and generic host events.
+- Add optional attachment visibility to WChatPanel and WChatComposer, and history visibility to WChatComposer.
+
+## 0.9.24
+
+- Add accessible mobile bottom sheets with nested overlays, focus restoration and keyboard viewport support.
+- Adapt selects, date ranges and slide panels below 768px; retain desktop popovers.
+- Keep custom date calendars and table pagination within narrow screens and enlarge touch targets.
+- Share body scroll locks across nested overlays and responsive transitions.
+
 ## 0.9.23
 
 - WTable: support controlled server sorting without reordering the current page locally.

package/COMPONENTS.md

@@ -819,3 +819,65 @@ Inline plain-text editing with Tiptap, inheriting the surrounding typography. Pr
 Use `WSpreadsheet appearance="plain"` for a uniform white surface (dark in dark mode), preserving grid lines and header typography. Pair slotted controls with `WInput variant="plain"` and `WSelect variant="plain"` to avoid nested borders. The default spreadsheet appearance is unchanged.
 
 WModal supports `size="screen"` (12px viewport gutters) and `:body-scroll="false"` for content that owns its scroll container.
+
+
+## Mobile overlays (0.9.24)
+
+`WBottomSheet` accepts `modelValue`, `title`, `closeLabel`, `returnFocus` (an HTMLElement),
+ and `noPadding`, with default, header and footer slots. It keeps the header/footer visible,
+ traps focus, restores focus to the opener, supports nested overlays, and tracks the visual
+ viewport when a phone keyboard opens. Pass localized `title` and `closeLabel` values.
+
+Below 768px, `WSelect` and `WDateRangePicker` use bottom sheets. Their new `closeLabel`
+ prop localizes the dismissal control. `WPopover` supports opt-in `mobileSheet`, `sheetTitle`
+ and `closeLabel`. `WSlidePanel` uses a bottom sheet on mobile by default; set
+ `mobileBottom=false` to retain its side presentation. Header/footer slots are preserved.
+ Mobile controls and table pagination have larger touch targets; pagination wraps locally.
+
+
+## WChatEditor and WChatComposer
+
+`WChatEditor` is a plain-text chat editor backed by Tiptap. It accepts `v-model`,
+`placeholder`, `disabled`, `minLines` and `maxLines`; emits `submit` on Enter
+(Shift+Enter adds a line, IME confirmation does not submit); exposes `focus()`.
+Placeholder changes preserve the draft. Model values are treated as text, not HTML.
+
+`WChatComposer` provides the Perform glass launcher design, expanded input,
+attachments and conversation/project history. It has no application store, API,
+i18n plugin or localStorage dependency.
+
+```vue
+<WChatComposer
+  ref="composer"
+  v-model:minimized="minimized"
+  placeholder="Ask the analyst"
+  :disabled="sending"
+  :sessions="sessions"
+  :projects="projects"
+  :attachments="attachments"
+  :history-loading="historyLoading"
+  locale="en"
+  @submit="send"
+  @request-history="loadHistory"
+  @select-session="selectSession"
+  @files-selected="uploadFiles"
+  @remove-attachment="removeAttachment"
+/>
+```
+
+- The host supplies `WChatAttachment[]`, `WChatProject[]` and
+  `WChatComposerSession[]` (extends `WChatSession` with optional `badge` and
+  `highlighted`). Use `subtitle` for domain context such as a client or date range.
+- The host owns uploads, history loading, selection, persistence and LLM calls.
+  `request-history` fires whenever history opens; deduplicate loading in the host.
+- Translate the label props: `conversationsLabel`, `removeAttachmentLabel`,
+  `minimizeLabel`, `sendLabel`, `attachFilesLabel`, `loadingLabel`,
+  `noConversationsLabel`, `projectsLabel`, `generalConversationLabel`.
+- `accept` configures file selection; loading attachments prevent submission.
+- `openWithPrompt(text)` expands and focuses the input with a draft.
+- Set `--wpic-chat-composer-left` and `--wpic-chat-composer-bottom` to integrate
+  with application navigation. Defaults preserve mobile/desktop floating placement.
+- Use `WChatEditor` in the `WChatPanel` composer slot for the same input in the panel.
+- Import `@wpic/ui/style.css`; no host Tailwind scan is required.
+
+`showAttachments` defaults to true on both chat components. `showHistory` defaults to true on WChatComposer. Disable these for a text-only chat without saved sessions.

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

@@ -0,0 +1,31 @@
+declare const _default: __VLS_WithSlots<import('vue').DefineComponent<{
+    returnFocus?: HTMLElement | null;
+    modelValue: boolean;
+    title?: string;
+    closeLabel?: string;
+    noPadding?: boolean;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    returnFocus?: HTMLElement | null;
+    modelValue: boolean;
+    title?: string;
+    closeLabel?: string;
+    noPadding?: boolean;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    closeLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    header?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+} & {
+    footer?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,64 @@
+import { WChatAttachment, WChatProject, WChatSession } from './WChatPanel.vue';
+export interface WChatComposerSession extends WChatSession {
+    badge?: string;
+    highlighted?: boolean;
+}
+type __VLS_Props = {
+    placeholder: string;
+    disabled?: boolean;
+    showAttachments?: boolean;
+    showHistory?: boolean;
+    attachments?: WChatAttachment[];
+    projects?: WChatProject[];
+    sessions?: WChatComposerSession[];
+    historyLoading?: boolean;
+    locale?: string;
+    minimized?: boolean;
+    accept?: string;
+    conversationsLabel?: string;
+    removeAttachmentLabel?: string;
+    minimizeLabel?: string;
+    sendLabel?: string;
+    attachFilesLabel?: string;
+    loadingLabel?: string;
+    noConversationsLabel?: string;
+    projectsLabel?: string;
+    generalConversationLabel?: string;
+};
+declare function openWithPrompt(prompt: string): Promise<void>;
+declare const _default: import('vue').DefineComponent<__VLS_Props, {
+    openWithPrompt: typeof openWithPrompt;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    submit: (value: string) => any;
+    "select-session": (sessionId: string) => any;
+    "files-selected": (files: File[]) => any;
+    "remove-attachment": (attachment: WChatAttachment) => any;
+    "request-history": () => any;
+    "update:minimized": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSubmit?: ((value: string) => any) | undefined;
+    "onSelect-session"?: ((sessionId: string) => any) | undefined;
+    "onFiles-selected"?: ((files: File[]) => any) | undefined;
+    "onRemove-attachment"?: ((attachment: WChatAttachment) => any) | undefined;
+    "onRequest-history"?: (() => any) | undefined;
+    "onUpdate:minimized"?: ((value: boolean) => any) | undefined;
+}>, {
+    projects: WChatProject[];
+    sessions: WChatComposerSession[];
+    noConversationsLabel: string;
+    projectsLabel: string;
+    conversationsLabel: string;
+    sendLabel: string;
+    attachFilesLabel: string;
+    removeAttachmentLabel: string;
+    showAttachments: boolean;
+    attachments: WChatAttachment[];
+    accept: string;
+    locale: string;
+    showHistory: boolean;
+    minimized: boolean;
+    minimizeLabel: string;
+    loadingLabel: string;
+    generalConversationLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    modelValue: string;
+    placeholder: string;
+    disabled?: boolean;
+    minLines?: number;
+    maxLines?: number;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {
+    focus: () => boolean | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    submit: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onSubmit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -116,6 +116,7 @@ type __VLS_Props = {
     closeLabel?: string;
     helpfulLabel?: string;
     notHelpfulLabel?: string;
+    showAttachments?: boolean;
     attachments?: WChatAttachment[];
     accept?: string;
     customAttachmentPicker?: boolean;
@@ -217,8 +218,9 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     modelValue: string;
     placeholder: string;
     minWidth: number;
-    minHeight: number;
+    closeLabel: string;
     zIndex: number;
+    minHeight: number;
     mentionItems: WChatMentionItem[];
     projects: WChatProject[];
     sessions: WChatSession[];
@@ -254,9 +256,9 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     thinkingLabel: string;
     dockLabel: string;
     undockLabel: string;
-    closeLabel: string;
     helpfulLabel: string;
     notHelpfulLabel: string;
+    showAttachments: boolean;
     attachments: WChatAttachment[];
     accept: string;
     customAttachmentPicker: boolean;

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

@@ -9,6 +9,7 @@ interface Preset {
     label: string;
 }
 type __VLS_Props = {
+    closeLabel?: string;
     locale?: string;
     applyLabel?: string;
     previousMonthLabel?: string;

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

@@ -1,6 +1,9 @@
 import { Ref } from 'vue';
 import { Placement } from '@floating-ui/vue';
 type __VLS_Props = {
+    mobileSheet?: boolean;
+    sheetTitle?: string;
+    closeLabel?: string;
     open: boolean;
     /** Accepts an HTMLElement, a Vue ref (Ref<HTMLElement | null>), or null */
     anchor: HTMLElement | Ref<HTMLElement | null> | null;
@@ -26,19 +29,21 @@ type __VLS_Props = {
     /** Extra DOM elements (e.g. Teleport'd submenus) that should not trigger close */
     extraPanels?: (HTMLElement | null)[];
 };
-declare var __VLS_5: {};
+declare var __VLS_9: {}, __VLS_15: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_5) => any;
+    default?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_15) => 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;
 }>, {
+    zIndex: string | number;
     panelScroll: boolean;
     freezePositionOnOpen: boolean;
     flip: boolean;
-    zIndex: string | number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -16,6 +16,7 @@ type __VLS_Props = {
     multiple?: boolean;
     searchable?: boolean;
     creatable?: boolean;
+    closeLabel?: string;
     searchPlaceholder?: string;
     selectAllLabel?: string;
     clearLabel?: string;

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

@@ -1,4 +1,6 @@
-declare const _default: __VLS_WithSlots<import('vue').DefineComponent<{
+type __VLS_Props = {
+    closeLabel?: string;
+    mobileBottom?: boolean;
     modelValue: boolean;
     title?: string;
     width?: string;
@@ -7,26 +9,29 @@ declare const _default: __VLS_WithSlots<import('vue').DefineComponent<{
     hideHeader?: boolean;
     subtitle?: string;
     zIndex?: number;
-}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (v: boolean) => any;
-}, string, import('vue').PublicProps, Readonly<{
-    modelValue: boolean;
-    title?: string;
-    width?: string;
-    island?: boolean;
-    noPadding?: boolean;
-    hideHeader?: boolean;
-    subtitle?: string;
-    zIndex?: number;
-}> & Readonly<{
-    "onUpdate:modelValue"?: ((v: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
-    header?: (props: {}) => any;
+};
+declare var __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_27: {}, __VLS_33: {}, __VLS_35: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_11) => any;
+} & {
+    footer?: (props: typeof __VLS_13) => any;
 } & {
-    default?: (props: {}) => any;
+    header?: (props: typeof __VLS_27) => any;
 } & {
-    footer?: (props: {}) => any;
-}>;
+    default?: (props: typeof __VLS_33) => any;
+} & {
+    footer?: (props: typeof __VLS_35) => any;
+};
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (v: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((v: boolean) => any) | undefined;
+}>, {
+    mobileBottom: boolean;
+}, {}, {}, {}, 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 (): {

package/dist/composables/lockBodyScroll.d.ts

@@ -0,0 +1,2 @@
+/** A shared lock survives nested overlays and responsive presentation changes. */
+export declare function lockBodyScroll(): () => void;

package/dist/composables/useMobileViewport.d.ts

@@ -0,0 +1 @@
+export declare function useMobileViewport(): import('vue').Ref<boolean, boolean>;

package/dist/index.d.ts

@@ -88,3 +88,7 @@ export { ui5Theme, themeVariables, chartPalettes, useWTheme } from './theme';
 export type { WThemeMode, WThemeColors, WThemeOverrides } from './theme';
 export { default as WTrendBadge } from './components/WTrendBadge.vue';
 export { default as WEditableText } from './components/WEditableText.vue';
+export { default as WBottomSheet } from './components/WBottomSheet.vue';
+export { default as WChatEditor } from './components/WChatEditor.vue';
+export { default as WChatComposer } from './components/WChatComposer.vue';
+export type { WChatComposerSession } from './components/WChatComposer.vue';