@wpic/ui 0.9.23 → 0.9.24

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 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,17 @@ 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.

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/WChatPanel.vue.d.ts

@@ -217,8 +217,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,7 +255,6 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     thinkingLabel: string;
     dockLabel: string;
     undockLabel: string;
-    closeLabel: string;
     helpfulLabel: string;
     notHelpfulLabel: string;
     attachments: WChatAttachment[];

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,4 @@ 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';