@digitalwalletcorp/vue-core 1.4.3 → 1.4.6

package/README.md

@@ -146,7 +146,13 @@ Components automatically adapt to your application's color-scheme (supporting bo
 
 **🛠️ Customizing Styles (`--dwui-*` Variables)**
 
-Default styles use CSS variables (`--dwui-*`) and zero-specificity selectors (`:where()`), making them easy to override. The variables of each component are listed in its document.
+Default styles use CSS variables (`--dwui-*`) and zero-specificity selectors (`:where()`), making them easy to override. The variables of each component are listed in its document. [docs/dwui-variables.css](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/dwui-variables.css) lists all of them with their default values, grouped by the component they apply to. Copy the lines you want to change into your own `dwui-variables.css`.
+
+The following default styles do not use `:where()`. To override them, use a CSS rule with higher specificity.
+
+| Component | Style | Reason |
+| --------- | ----- | ------ |
+| [`ScreenLoading`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/screen-loading.md) | `outline` on focus | The loading does not accept user interaction, so it does not show a focus ring. |
 
 We recommend creating a `dwui-variables.css` file to map your application's design tokens to the library's `--dwui-*` variables, and importing it after the library stylesheet. If you use both `vue-forms` and `vue-core`, you can use a single `dwui-variables.css` file for both libraries, as they share common variables like those for focus rings.
 
@@ -174,7 +180,7 @@ export default defineNuxtConfig({
 
 **🧭 Application-wide Options (`vueCoreOptionsKey`)**
 
-Settings that are the same on every page, such as the texts of `DataTable`, can be provided once for the whole application instead of being passed to each component.
+Settings that are the same on every page, such as the texts of `DataTable` or the timezone of the time on snackbars, can be provided once for the whole application instead of being passed to each component.
 Provide `vueCoreOptionsKey` in a component above the components or with `app.provide`.
 A prop wins over the provided value, and without either, the default of the library is used.
 
@@ -199,6 +205,10 @@ export default defineNuxtPlugin((nuxtApp) => {
     dataTable: {
       labels: { totalCount: 'Total', totalUnit: 'records', noData: 'No data' },
       sortMode: 'page'
+    },
+    snackbar: {
+      // The timezone the user selected. A ref or a function is read each time a snackbar is shown.
+      timezone: () => userSession.timezone
     }
   });
 });
@@ -207,6 +217,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 | Property    | Type               | Description |
 | ----------- | ------------------ | ----------- |
 | `dataTable` | `DataTableOptions` | Sets default props for [`DataTable`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/data-table.md) components across the application. For example, you can configure default labels or sort behavior. |
+| `snackbar`  | `SnackbarOptions`  | Sets the default `timezone` of the time shown on snackbars, as a string, a ref, or a function that returns it. It applies to the snackbars shown with [`useSnackbar()`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/snackbar.md) and to `CopyButton`. |
 
 #### 🛠️ Helper Functions
 
@@ -227,7 +238,7 @@ const onClickDelete = async () => {
 | Function | Description |
 | -------- | ----------- |
 | [`showInformationDialog()` / `showConfirmationDialog()` / `showWarningDialog()` / `showErrorDialog()` / `showModalDialog()`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/modal-dialog.md) | Shows a modal dialog with a message and returns the button the user chose. |
-| [`showSnackbar()` / `closeAllSnackbars()`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/snackbar.md) | Shows a short message at an edge of the screen. |
+| [`showSnackbar()` / `closeAllSnackbars()` / `useSnackbar()`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/snackbar.md) | Shows a short message at an edge of the screen. |
 | [`showOverlayBox()` / `closeAllOverlayBoxes()` / `useOverlayBox()`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/overlay-box.md) | Shows a component in an `OverlayBox` and returns a handle to close it. |
 | [`showFloatingComponent()` / `showFloatingMessage()` / `closeAllFloatingComponents()` / `useFloatingComponent()`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/floating-component.md) | Shows a component or a message in a window that floats over the page without a backdrop. |
 | [`showScreenLoading()`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/screen-loading.md) | Covers the whole screen with a spinner until the returned handle is closed. |

package/lib/{components-ytOBcKlQ.cjs → components-Dniui6mw.cjs}

@@ -1 +1 @@
-"use strict";const n=require("./warning-popper.vue_vue_type_style_index_0_lang-142lRixg.cjs"),_=Object.freeze(Object.defineProperty({__proto__:null,AccordionFieldset:n._sfc_main$4,AccordionSection:n._sfc_main$5,CopyButton:n._sfc_main$1,DarkModeSelector:n._sfc_main$6,DataTable:n._sfc_main$7,HelpButton:n._sfc_main$8,HelpPopper:n._sfc_main$9,HourglassLoading:n._sfc_main$10,IntersectionLazyComponent:n._sfc_main$11,LabelButton:n._sfc_main$12,LabelIcon:n._sfc_main$13,ModalDialog:n._sfc_main$2,OverlayBox:n._sfc_main$14,PageSection:n._sfc_main$15,PageTitle:n._sfc_main$16,ScreenLoading:n._sfc_main$3,TabContent:n._sfc_main$17,TabGroup:n._sfc_main$18,WarningPopper:n._sfc_main$19},Symbol.toStringTag,{value:"Module"}));exports.components=_;
+"use strict";const n=require("./warning-popper.vue_vue_type_style_index_0_lang-BxdfpRXg.cjs"),_=Object.freeze(Object.defineProperty({__proto__:null,AccordionFieldset:n._sfc_main$4,AccordionSection:n._sfc_main$5,CopyButton:n._sfc_main$1,DarkModeSelector:n._sfc_main$6,DataTable:n._sfc_main$7,HelpButton:n._sfc_main$8,HelpPopper:n._sfc_main$9,HourglassLoading:n._sfc_main$10,IntersectionLazyComponent:n._sfc_main$11,LabelButton:n._sfc_main$12,LabelIcon:n._sfc_main$13,ModalDialog:n._sfc_main$2,OverlayBox:n._sfc_main$14,PageSection:n._sfc_main$15,PageTitle:n._sfc_main$16,ScreenLoading:n._sfc_main$3,TabContent:n._sfc_main$17,TabGroup:n._sfc_main$18,WarningPopper:n._sfc_main$19},Symbol.toStringTag,{value:"Module"}));exports.components=_;

package/lib/{components-Mk1fpjbw.js → components-gKR_xoi-.js}

@@ -1,4 +1,4 @@
-import { e as a, f as s, a as n, g as _, h as o, i as e, j as c, k as i, l as t, o as f, p as m, b as r, q as l, r as $, s as p, d, v as g, w as b, x as u } from "./warning-popper.vue_vue_type_style_index_0_lang-BKR56ef2.js";
+import { e as a, f as s, a as n, g as _, h as o, i as e, j as c, k as i, l as t, o as f, p as m, b as r, q as l, r as $, s as p, d, v as g, w as b, x as u } from "./warning-popper.vue_vue_type_style_index_0_lang-DuzeuEx2.js";
 const y = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   AccordionFieldset: a,

package/lib/copy-button.d.cts

@@ -3,6 +3,10 @@ export interface Props {
     value: string | number | (() => string | number);
     /** ボタンの読み上げ名。スロットで文字を渡したときは使わない */
     label?: string;
+    /** コピーした後に snackbar で表示する文字列。未指定なら表示しない */
+    copiedMessage?: string;
+    /** copiedMessage の snackbar が自動で閉じるまでの時間(ミリ秒) */
+    copiedDuration?: number;
 }
 export interface Emits {
     /** コピーに成功したときに、コピーした文字列を発行する */
@@ -23,6 +27,8 @@ declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, i
     "onEmit:error"?: ((error: unknown) => any) | undefined;
 }>, {
     label: string;
+    copiedMessage: string;
+    copiedDuration: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/lib/copy-button.d.ts

@@ -3,6 +3,10 @@ export interface Props {
     value: string | number | (() => string | number);
     /** ボタンの読み上げ名。スロットで文字を渡したときは使わない */
     label?: string;
+    /** コピーした後に snackbar で表示する文字列。未指定なら表示しない */
+    copiedMessage?: string;
+    /** copiedMessage の snackbar が自動で閉じるまでの時間(ミリ秒) */
+    copiedDuration?: number;
 }
 export interface Emits {
     /** コピーに成功したときに、コピーした文字列を発行する */
@@ -23,6 +27,8 @@ declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, i
     "onEmit:error"?: ((error: unknown) => any) | undefined;
 }>, {
     label: string;
+    copiedMessage: string;
+    copiedDuration: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/lib/help-button.d.cts

@@ -19,11 +19,11 @@ export interface Slots {
 }
 type __VLS_Slots = Slots;
 declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    "emit:open": () => any;
     "emit:close": () => any;
+    "emit:open": () => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
-    "onEmit:open"?: (() => any) | undefined;
     "onEmit:close"?: (() => any) | undefined;
+    "onEmit:open"?: (() => any) | undefined;
 }>, {
     label: string;
     placement: PopoverPlacement;

package/lib/help-button.d.ts

@@ -19,11 +19,11 @@ export interface Slots {
 }
 type __VLS_Slots = Slots;
 declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    "emit:open": () => any;
     "emit:close": () => any;
+    "emit:open": () => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
-    "onEmit:open"?: (() => any) | undefined;
     "onEmit:close"?: (() => any) | undefined;
+    "onEmit:open"?: (() => any) | undefined;
 }>, {
     label: string;
     placement: PopoverPlacement;

package/lib/help-popper.d.cts

@@ -19,11 +19,11 @@ export interface Slots {
 }
 type __VLS_Slots = Slots;
 declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    "emit:open": () => any;
     "emit:close": () => any;
+    "emit:open": () => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
-    "onEmit:open"?: (() => any) | undefined;
     "onEmit:close"?: (() => any) | undefined;
+    "onEmit:open"?: (() => any) | undefined;
 }>, {
     label: string;
     placement: PopoverPlacement;

package/lib/help-popper.d.ts

@@ -19,11 +19,11 @@ export interface Slots {
 }
 type __VLS_Slots = Slots;
 declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    "emit:open": () => any;
     "emit:close": () => any;
+    "emit:open": () => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
-    "onEmit:open"?: (() => any) | undefined;
     "onEmit:close"?: (() => any) | undefined;
+    "onEmit:open"?: (() => any) | undefined;
 }>, {
     label: string;
     placement: PopoverPlacement;

package/lib/helpers/snackbar.d.cts

@@ -22,8 +22,11 @@ export interface ShowSnackbarOptions {
     title?: string;
     /** 見出しの右側に出す短い文字 */
     label?: string;
-    /** 右下に出す時刻。整形済みの文字列を渡す */
-    timestamp?: string;
+    /**
+     * 右下に出す時刻のタイムゾーン(IANA名)。未指定か空文字なら UTC、false なら時刻を出さない。
+     * useSnackbar() から呼ぶときは、未指定なら vueCoreOptionsKey の snackbar.timezone を使う
+     */
+    timezone?: string | false;
     /** 自動で閉じるまでの時間(ミリ秒)。未指定ならクリックするまで閉じない */
     duration?: number;
     /** 表示する位置 */
@@ -51,6 +54,8 @@ export interface SnackbarHandle {
  * placement と direction の組み合わせが同じ snackbar は同じ表示領域に並び、新しいものが末尾(overlap では前面)に加わる。
  * クリックすると閉じる。ブラウザでのみ動作する
  *
+ * 時刻は timezone で整形する。アプリ既定のタイムゾーンを使うには useSnackbar() から呼ぶ
+ *
  * @param {string} message 表示する文字列
  * @param {ShowSnackbarOptions} [options]
  * @returns {SnackbarHandle}
@@ -60,3 +65,13 @@ export declare function showSnackbar(message: string, options?: ShowSnackbarOpti
  * 表示中の snackbar をすべて閉じる。表示領域ごとに、古い順に少しずつずらして閉じる
  */
 export declare function closeAllSnackbars(): void;
+/**
+ * vueCoreOptionsKey の snackbar の設定を既定にして snackbar を表示する関数を返す。
+ * 設定は表示するたびに読むため、ref や関数で渡した値の変化に追従する。
+ * コンポーネントの setup の中で呼ぶこと
+ *
+ * @returns {{ showSnackbar: typeof showSnackbar }}
+ */
+export declare function useSnackbar(): {
+    showSnackbar: typeof showSnackbar;
+};

package/lib/helpers/snackbar.d.ts

@@ -22,8 +22,11 @@ export interface ShowSnackbarOptions {
     title?: string;
     /** 見出しの右側に出す短い文字 */
     label?: string;
-    /** 右下に出す時刻。整形済みの文字列を渡す */
-    timestamp?: string;
+    /**
+     * 右下に出す時刻のタイムゾーン(IANA名)。未指定か空文字なら UTC、false なら時刻を出さない。
+     * useSnackbar() から呼ぶときは、未指定なら vueCoreOptionsKey の snackbar.timezone を使う
+     */
+    timezone?: string | false;
     /** 自動で閉じるまでの時間(ミリ秒)。未指定ならクリックするまで閉じない */
     duration?: number;
     /** 表示する位置 */
@@ -51,6 +54,8 @@ export interface SnackbarHandle {
  * placement と direction の組み合わせが同じ snackbar は同じ表示領域に並び、新しいものが末尾(overlap では前面)に加わる。
  * クリックすると閉じる。ブラウザでのみ動作する
  *
+ * 時刻は timezone で整形する。アプリ既定のタイムゾーンを使うには useSnackbar() から呼ぶ
+ *
  * @param {string} message 表示する文字列
  * @param {ShowSnackbarOptions} [options]
  * @returns {SnackbarHandle}
@@ -60,3 +65,13 @@ export declare function showSnackbar(message: string, options?: ShowSnackbarOpti
  * 表示中の snackbar をすべて閉じる。表示領域ごとに、古い順に少しずつずらして閉じる
  */
 export declare function closeAllSnackbars(): void;
+/**
+ * vueCoreOptionsKey の snackbar の設定を既定にして snackbar を表示する関数を返す。
+ * 設定は表示するたびに読むため、ref や関数で渡した値の変化に追従する。
+ * コンポーネントの setup の中で呼ぶこと
+ *
+ * @returns {{ showSnackbar: typeof showSnackbar }}
+ */
+export declare function useSnackbar(): {
+    showSnackbar: typeof showSnackbar;
+};

package/lib/helpers/vue-core-options.d.cts

@@ -1,14 +1,25 @@
-import { InjectionKey } from 'vue';
+import { InjectionKey, MaybeRefOrGetter } from 'vue';
 import { Props } from '../data-table.cjs';
 /**
  * DataTable のアプリ既定の設定。vueCoreOptionsKey の dataTable で渡す。
  * props のうちデータと表示の状態を除いた項目を持ち、DataTable の props に同じ名前の指定があればそちらが優先される
  */
 export type DataTableOptions = Partial<Omit<Props, 'dataList' | 'headers' | 'loading' | 'totalCount' | 'current' | 'limit'>>;
+/** snackbar のアプリ既定の設定。vueCoreOptionsKey の snackbar で渡す */
+export type SnackbarOptions = {
+    /**
+     * 時刻を表示するタイムゾーン(IANA名)。未指定か空文字なら UTC、false なら時刻を表示しない。
+     * ref や関数で渡すと表示するたびに読むため、利用者が選んだタイムゾーンの変化に追従する。
+     * showSnackbar() の timezone に指定があればそちらが優先される
+     */
+    timezone?: MaybeRefOrGetter<string | false | undefined>;
+};
 /** アプリ全体の設定 */
 export type VueCoreOptions = {
     /** DataTable のアプリ既定の設定 */
     dataTable?: DataTableOptions;
+    /** snackbar のアプリ既定の設定 */
+    snackbar?: SnackbarOptions;
 };
 /**
  * アプリ全体の設定を provide/inject するためのキー

package/lib/helpers/vue-core-options.d.ts

@@ -1,14 +1,25 @@
-import { InjectionKey } from 'vue';
+import { InjectionKey, MaybeRefOrGetter } from 'vue';
 import { Props } from '../data-table';
 /**
  * DataTable のアプリ既定の設定。vueCoreOptionsKey の dataTable で渡す。
  * props のうちデータと表示の状態を除いた項目を持ち、DataTable の props に同じ名前の指定があればそちらが優先される
  */
 export type DataTableOptions = Partial<Omit<Props, 'dataList' | 'headers' | 'loading' | 'totalCount' | 'current' | 'limit'>>;
+/** snackbar のアプリ既定の設定。vueCoreOptionsKey の snackbar で渡す */
+export type SnackbarOptions = {
+    /**
+     * 時刻を表示するタイムゾーン(IANA名)。未指定か空文字なら UTC、false なら時刻を表示しない。
+     * ref や関数で渡すと表示するたびに読むため、利用者が選んだタイムゾーンの変化に追従する。
+     * showSnackbar() の timezone に指定があればそちらが優先される
+     */
+    timezone?: MaybeRefOrGetter<string | false | undefined>;
+};
 /** アプリ全体の設定 */
 export type VueCoreOptions = {
     /** DataTable のアプリ既定の設定 */
     dataTable?: DataTableOptions;
+    /** snackbar のアプリ既定の設定 */
+    snackbar?: SnackbarOptions;
 };
 /**
  * アプリ全体の設定を provide/inject するためのキー

package/lib/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./warning-popper.vue_vue_type_style_index_0_lang-142lRixg.cjs"),e=require("vue"),E=require("@digitalwalletcorp/vue-svg-icons"),T=e.defineComponent({__name:"floating-component",props:{open:{type:Boolean},title:{},anchor:{},dragMode:{},loading:{type:Boolean},closeLabel:{},copyValue:{type:[String,Number,Function]},copyLabel:{},closeOnDblClick:{type:Boolean},lockScroll:{type:Boolean},initialSize:{},headerClass:{type:[Boolean,null,String,Object,Array]},headerStyle:{type:[Boolean,null,String,Object,Array]}},emits:["update:open","emit:close"],setup(n,{emit:t}){const o=n,l=t,s=e.ref(),i=e.ref(a.nextWindowOrder()),c=()=>{i.value=a.nextWindowOrder()},d=()=>{o.closeOnDblClick&&l("update:open",!1)},r=()=>{const u=s.value;if(!u?.element)return;const m=u.element.getBoundingClientRect();let p=o.initialSize?.width??m.width;window.innerWidth<p&&(p=window.innerWidth*.9);let f=o.initialSize?.height??-1;window.innerHeight<f&&(f=window.innerHeight*.9),u.size.width=p,u.size.height=f;const C=document.documentElement.scrollLeft,b=document.documentElement.scrollTop;if(o.anchor){const L={width:p,height:0<=f?f:m.height},D={width:document.documentElement.clientWidth,height:document.documentElement.clientHeight},k=a.computeAnchoredPosition(o.anchor.getBoundingClientRect(),L,D,{placement:"bottom-start",offset:0,margin:0,arrowMargin:0});u.position.x=k.left+C,u.position.y=k.top+b}else u.position.x=10+C,u.position.y=10+b};return e.onMounted(()=>{o.open&&r()}),(u,m)=>(e.openBlock(),e.createBlock(e.Transition,{name:"dwui-floating-component-fade",onAfterLeave:m[1]||(m[1]=p=>l("emit:close"))},{default:e.withCtx(()=>[o.open?(e.openBlock(),e.createBlock(a._sfc_main,{key:0,ref_key:"refWindow",ref:s,class:e.normalizeClass(["dwui-floating-component",{"dwui-lock-scroll":o.lockScroll}]),name:"dwui-floating-component",style:e.normalizeStyle({"--dwui-order-window":i.value}),"drag-mode":o.dragMode,loading:o.loading,"close-label":o.closeLabel,"clamp-bottom":!1,"header-class":o.headerClass,"header-style":o.headerStyle,onPointerdownCapture:c,onDblclick:d,"onEmit:close":m[0]||(m[0]=p=>l("update:open",!1))},e.createSlots({title:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.title),1)]),default:e.withCtx(()=>[e.renderSlot(u.$slots,"default")]),_:2},[o.copyValue!=null?{name:"actions",fn:e.withCtx(()=>[e.createVNode(a._sfc_main$1,{class:"dwui-floating-component-copy-button",value:o.copyValue,"aria-label":o.copyLabel},null,8,["value","aria-label"])]),key:"0"}:void 0]),1032,["class","style","drag-mode","loading","close-label","header-class","header-style"])):e.createCommentVNode("",!0)]),_:3}))}}),B=new Set,h=(n,t,o)=>{const{appContext:l,onClose:s,...i}=t??{};return a.mountWindow((c,d)=>e.h(T,{closeLabel:"Close",copyLabel:"Copy",closeOnDblClick:!1,lockScroll:!1,...i,...c},{default:()=>n(d)}),{appContext:l,onClose:s,onClosed:o},B)},S=(n,t)=>o=>e.h(n,{...t,...o}),$=(n,t)=>()=>t&&typeof n=="string"?e.h("div",{class:"dwui-floating-component-message",innerHTML:n}):e.h("div",{class:"dwui-floating-component-message"},a.toMessageText(n));function O(n,t,o){return h(S(n,t),o)}function M(n,t){const{html:o,...l}=t??{};return h($(n,o),{copyValue:a.toMessageText(n),...l})}function V(){for(const n of[...B])n.close()}function A(){const n=a.useWindowOwner("useFloatingComponent"),t=o=>({appContext:n.appContext,...o});return{showFloatingComponent:(o,l,s)=>n.own(i=>h(S(o,l),t(s),i)),showFloatingMessage:(o,l)=>{const{html:s,...i}=l??{};return n.own(c=>h($(o,s),t({copyValue:a.toMessageText(o),...i}),c))}}}function w(n,t){const{icon:o,appContext:l,...s}=t??{};return new Promise(i=>{const c=document.createElement("div");document.body.appendChild(c);const d=e.h(a._sfc_main$2,{...s,message:n,open:!0,"onEmit:close":r=>{e.render(null,c),c.remove(),i(r)}},o?{icon:()=>e.h(o)}:void 0);l&&(d.appContext=l),e.render(d,c)})}function F(n,t){return w(n,{...t,type:"info"})}function W(n,t){return w(n,{...t,type:"confirm"})}function z(n,t){return w(n,{...t,type:"warn"})}function N(n,t){return w(n,{...t,type:"error"})}function P(n){const t=document.createElement("div");document.body.appendChild(t);const o=()=>{e.render(null,t),t.remove()};return e.render(e.h(a._sfc_main$3,{...n,loading:!0}),t),{close:o}}const I=["aria-label","title"],H=["title","onClick"],R={key:0,class:"dwui-snackbar-header"},j={key:0,class:"dwui-snackbar-title"},q={key:1,class:"dwui-snackbar-label"},G={class:"dwui-snackbar-message"},K={key:1,class:"dwui-snackbar-timestamp"},J=e.defineComponent({__name:"snackbar-container",props:{placement:{},direction:{},items:{}},emits:["emit:close","emit:clear","emit:afterLeave"],setup(n,{emit:t}){const o=n,l=t,s=e.computed(()=>{const[c,d="center"]=o.placement.split("-");return[`dwui-snackbar-container-${c}`,`dwui-snackbar-container-${d}`,`dwui-snackbar-container-${o.direction}`]}),i=e.computed(()=>o.items.filter(c=>c.clearable).at(-1)?.clearLabel);return(c,d)=>(e.openBlock(),e.createBlock(e.TransitionGroup,{tag:"div",name:"dwui-snackbar-fade",class:e.normalizeClass(["dwui-snackbar-container",s.value]),role:"status",onAfterLeave:d[1]||(d[1]=r=>l("emit:afterLeave"))},{default:e.withCtx(()=>[i.value!=null?(e.openBlock(),e.createElementBlock("button",{key:"clear",type:"button",class:"dwui-snackbar-clear-button","aria-label":i.value,title:i.value,onClick:d[0]||(d[0]=r=>l("emit:clear"))},[e.createVNode(e.unref(E.SvgWastebasket))],8,I)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.items,r=>(e.openBlock(),e.createElementBlock("button",{key:r.id,type:"button",class:e.normalizeClass(["dwui-snackbar",r.class]),style:e.normalizeStyle(r.style),title:r.message,onClick:u=>l("emit:close",r.id)},[r.title||r.label?(e.openBlock(),e.createElementBlock("span",R,[r.title?(e.openBlock(),e.createElementBlock("span",j,e.toDisplayString(r.title),1)):e.createCommentVNode("",!0),r.label?(e.openBlock(),e.createElementBlock("span",q,e.toDisplayString(r.label),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("span",G,e.toDisplayString(r.message),1),r.timestamp?(e.openBlock(),e.createElementBlock("span",K,e.toDisplayString(r.timestamp),1)):e.createCommentVNode("",!0)],14,H))),128))]),_:1},8,["class"]))}}),Q=50,g=new Map,y=new Map;let v=0;const _=(n,t,o)=>{const l=n.findIndex(i=>i.id===t);if(l<0)return;n.splice(l,1);const s=y.get(t);y.delete(t),clearTimeout(s?.timer),s?.onClose?.(o)},x=n=>{const t=n.map(o=>o.id);for(let o=0;o<t.length;o++)setTimeout(()=>_(n,t[o],"clear"),Q*o)},U=(n,t)=>{const o=`${n} ${t}`,l=g.get(o);if(l)return l;const s=document.createElement("div");document.body.appendChild(s);const i=e.shallowReactive([]);return g.set(o,i),e.render(e.h(J,{placement:n,direction:t,items:i,"onEmit:close":c=>_(i,c,"click"),"onEmit:clear":()=>x(i),"onEmit:afterLeave":()=>{i.length===0&&g.get(o)===i&&(g.delete(o),e.render(null,s),s.remove())}}),s),i};function X(n,t){const{placement:o="bottom",direction:l="overlap",duration:s,clearable:i=!1,clearLabel:c="Clear all",onClose:d,...r}=t??{},u=U(o,l);v+=1;const m=v;return u.push({...r,id:m,message:n,clearable:i,clearLabel:c}),y.set(m,{timer:s?setTimeout(()=>_(u,m,"duration"),s):void 0,onClose:d}),{close:()=>_(u,m,"handle")}}function Y(){for(const n of g.values())x(n)}exports.AccordionFieldset=a._sfc_main$4;exports.AccordionSection=a._sfc_main$5;exports.CopyButton=a._sfc_main$1;exports.DarkModeSelector=a._sfc_main$6;exports.DataTable=a._sfc_main$7;exports.HelpButton=a._sfc_main$8;exports.HelpPopper=a._sfc_main$9;exports.HourglassLoading=a._sfc_main$10;exports.IntersectionLazyComponent=a._sfc_main$11;exports.LabelButton=a._sfc_main$12;exports.LabelIcon=a._sfc_main$13;exports.ModalDialog=a._sfc_main$2;exports.OverlayBox=a._sfc_main$14;exports.PageSection=a._sfc_main$15;exports.PageTitle=a._sfc_main$16;exports.ScreenLoading=a._sfc_main$3;exports.TabContent=a._sfc_main$17;exports.TabGroup=a._sfc_main$18;exports.WarningPopper=a._sfc_main$19;exports.closeAllOverlayBoxes=a.closeAllOverlayBoxes;exports.headersToCsvColumns=a.headersToCsvColumns;exports.rowToCsvColumns=a.rowToCsvColumns;exports.showOverlayBox=a.showOverlayBox;exports.useOverlayBox=a.useOverlayBox;exports.vueCoreOptionsKey=a.vueCoreOptionsKey;exports.closeAllFloatingComponents=V;exports.closeAllSnackbars=Y;exports.showConfirmationDialog=W;exports.showErrorDialog=N;exports.showFloatingComponent=O;exports.showFloatingMessage=M;exports.showInformationDialog=F;exports.showModalDialog=w;exports.showScreenLoading=P;exports.showSnackbar=X;exports.showWarningDialog=z;exports.useFloatingComponent=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./warning-popper.vue_vue_type_style_index_0_lang-BxdfpRXg.cjs"),t=require("vue"),$=t.defineComponent({__name:"floating-component",props:{open:{type:Boolean},title:{},anchor:{},dragMode:{},loading:{type:Boolean},closeLabel:{},copyValue:{type:[String,Number,Function]},copyLabel:{},closeOnDblClick:{type:Boolean},lockScroll:{type:Boolean},initialSize:{},headerClass:{type:[Boolean,null,String,Object,Array]},headerStyle:{type:[Boolean,null,String,Object,Array]}},emits:["update:open","emit:close"],setup(n,{emit:i}){const o=n,l=i,a=t.ref(),s=t.ref(e.nextWindowOrder()),r=()=>{s.value=e.nextWindowOrder()},u=()=>{o.closeOnDblClick&&l("update:open",!1)},w=()=>{const c=a.value;if(!c?.element)return;const d=c.element.getBoundingClientRect();let p=o.initialSize?.width??d.width;window.innerWidth<p&&(p=window.innerWidth*.9);let m=o.initialSize?.height??-1;window.innerHeight<m&&(m=window.innerHeight*.9),c.size.width=p,c.size.height=m;const h=document.documentElement.scrollLeft,_=document.documentElement.scrollTop;if(o.anchor){const S={width:p,height:0<=m?m:d.height},x={width:document.documentElement.clientWidth,height:document.documentElement.clientHeight},y=e.computeAnchoredPosition(o.anchor.getBoundingClientRect(),S,x,{placement:"bottom-start",offset:0,margin:0,arrowMargin:0});c.position.x=y.left+h,c.position.y=y.top+_}else c.position.x=10+h,c.position.y=10+_};return t.onMounted(()=>{o.open&&w()}),(c,d)=>(t.openBlock(),t.createBlock(t.Transition,{name:"dwui-floating-component-fade",onAfterLeave:d[1]||(d[1]=p=>l("emit:close"))},{default:t.withCtx(()=>[o.open?(t.openBlock(),t.createBlock(e._sfc_main,{key:0,ref_key:"refWindow",ref:a,class:t.normalizeClass(["dwui-floating-component",{"dwui-lock-scroll":o.lockScroll}]),name:"dwui-floating-component",style:t.normalizeStyle({"--dwui-order-window":s.value}),"drag-mode":o.dragMode,loading:o.loading,"close-label":o.closeLabel,"clamp-bottom":!1,"header-class":o.headerClass,"header-style":o.headerStyle,onPointerdownCapture:r,onDblclick:u,"onEmit:close":d[0]||(d[0]=p=>l("update:open",!1))},t.createSlots({title:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(o.title),1)]),default:t.withCtx(()=>[t.renderSlot(c.$slots,"default")]),_:2},[o.copyValue!=null?{name:"actions",fn:t.withCtx(()=>[t.createVNode(e._sfc_main$1,{class:"dwui-floating-component-copy-button",value:o.copyValue,"aria-label":o.copyLabel},null,8,["value","aria-label"])]),key:"0"}:void 0]),1032,["class","style","drag-mode","loading","close-label","header-class","header-style"])):t.createCommentVNode("",!0)]),_:3}))}}),C=new Set,g=(n,i,o)=>{const{appContext:l,onClose:a,...s}=i??{};return e.mountWindow((r,u)=>t.h($,{closeLabel:"Close",copyLabel:"Copy",closeOnDblClick:!1,lockScroll:!1,...s,...r},{default:()=>n(u)}),{appContext:l,onClose:a,onClosed:o},C)},b=(n,i)=>o=>t.h(n,{...i,...o}),v=(n,i)=>()=>i&&typeof n=="string"?t.h("div",{class:"dwui-floating-component-message",innerHTML:n}):t.h("div",{class:"dwui-floating-component-message"},e.toMessageText(n));function k(n,i,o){return g(b(n,i),o)}function B(n,i){const{html:o,...l}=i??{};return g(v(n,o),{copyValue:e.toMessageText(n),...l})}function O(){for(const n of[...C])n.close()}function D(){const n=e.useWindowOwner("useFloatingComponent"),i=o=>({appContext:n.appContext,...o});return{showFloatingComponent:(o,l,a)=>n.own(s=>g(b(o,l),i(a),s)),showFloatingMessage:(o,l)=>{const{html:a,...s}=l??{};return n.own(r=>g(v(o,a),i({copyValue:e.toMessageText(o),...s}),r))}}}function f(n,i){const{icon:o,appContext:l,...a}=i??{};return new Promise(s=>{const r=document.createElement("div");document.body.appendChild(r);const u=t.h(e._sfc_main$2,{...a,message:n,open:!0,"onEmit:close":w=>{t.render(null,r),r.remove(),s(w)}},o?{icon:()=>t.h(o)}:void 0);l&&(u.appContext=l),t.render(u,r)})}function L(n,i){return f(n,{...i,type:"info"})}function M(n,i){return f(n,{...i,type:"confirm"})}function T(n,i){return f(n,{...i,type:"warn"})}function F(n,i){return f(n,{...i,type:"error"})}function W(n){const i=document.createElement("div");document.body.appendChild(i);const o=()=>{t.render(null,i),i.remove()};return t.render(t.h(e._sfc_main$3,{...n,loading:!0}),i),{close:o}}exports.AccordionFieldset=e._sfc_main$4;exports.AccordionSection=e._sfc_main$5;exports.CopyButton=e._sfc_main$1;exports.DarkModeSelector=e._sfc_main$6;exports.DataTable=e._sfc_main$7;exports.HelpButton=e._sfc_main$8;exports.HelpPopper=e._sfc_main$9;exports.HourglassLoading=e._sfc_main$10;exports.IntersectionLazyComponent=e._sfc_main$11;exports.LabelButton=e._sfc_main$12;exports.LabelIcon=e._sfc_main$13;exports.ModalDialog=e._sfc_main$2;exports.OverlayBox=e._sfc_main$14;exports.PageSection=e._sfc_main$15;exports.PageTitle=e._sfc_main$16;exports.ScreenLoading=e._sfc_main$3;exports.TabContent=e._sfc_main$17;exports.TabGroup=e._sfc_main$18;exports.WarningPopper=e._sfc_main$19;exports.closeAllOverlayBoxes=e.closeAllOverlayBoxes;exports.closeAllSnackbars=e.closeAllSnackbars;exports.headersToCsvColumns=e.headersToCsvColumns;exports.rowToCsvColumns=e.rowToCsvColumns;exports.showOverlayBox=e.showOverlayBox;exports.showSnackbar=e.showSnackbar;exports.useOverlayBox=e.useOverlayBox;exports.useSnackbar=e.useSnackbar;exports.vueCoreOptionsKey=e.vueCoreOptionsKey;exports.closeAllFloatingComponents=O;exports.showConfirmationDialog=M;exports.showErrorDialog=F;exports.showFloatingComponent=k;exports.showFloatingMessage=B;exports.showInformationDialog=L;exports.showModalDialog=f;exports.showScreenLoading=W;exports.showWarningDialog=T;exports.useFloatingComponent=D;

package/lib/index.d.cts

@@ -28,10 +28,10 @@ export { closeAllOverlayBoxes, showOverlayBox, useOverlayBox } from './helpers/o
 export type { OverlayBoxContentProps, OverlayBoxHandle, ShowOverlayBoxOptions } from './helpers/overlay-box.cjs';
 export { showScreenLoading } from './helpers/screen-loading.cjs';
 export type { ScreenLoadingHandle, ShowScreenLoadingOptions } from './helpers/screen-loading.cjs';
-export { closeAllSnackbars, showSnackbar } from './helpers/snackbar.cjs';
+export { closeAllSnackbars, showSnackbar, useSnackbar } from './helpers/snackbar.cjs';
 export type { ShowSnackbarOptions, SnackbarCloseReason, SnackbarDirection, SnackbarHandle, SnackbarPlacement } from './helpers/snackbar.cjs';
 export type { MovableWindowContentProps, MovableWindowDragMode, MovableWindowHandle } from './internal/window-control.cjs';
 export type { TabContentStatus } from './internal/tab-group.cjs';
 export { vueCoreOptionsKey } from './helpers/vue-core-options.cjs';
-export type { DataTableOptions, VueCoreOptions } from './helpers/vue-core-options.cjs';
+export type { DataTableOptions, SnackbarOptions, VueCoreOptions } from './helpers/vue-core-options.cjs';
 export type { PopoverPlacement } from './internal/anchored-position.cjs';

package/lib/index.d.ts

@@ -28,10 +28,10 @@ export { closeAllOverlayBoxes, showOverlayBox, useOverlayBox } from './helpers/o
 export type { OverlayBoxContentProps, OverlayBoxHandle, ShowOverlayBoxOptions } from './helpers/overlay-box';
 export { showScreenLoading } from './helpers/screen-loading';
 export type { ScreenLoadingHandle, ShowScreenLoadingOptions } from './helpers/screen-loading';
-export { closeAllSnackbars, showSnackbar } from './helpers/snackbar';
+export { closeAllSnackbars, showSnackbar, useSnackbar } from './helpers/snackbar';
 export type { ShowSnackbarOptions, SnackbarCloseReason, SnackbarDirection, SnackbarHandle, SnackbarPlacement } from './helpers/snackbar';
 export type { MovableWindowContentProps, MovableWindowDragMode, MovableWindowHandle } from './internal/window-control';
 export type { TabContentStatus } from './internal/tab-group';
 export { vueCoreOptionsKey } from './helpers/vue-core-options';
-export type { DataTableOptions, VueCoreOptions } from './helpers/vue-core-options';
+export type { DataTableOptions, SnackbarOptions, VueCoreOptions } from './helpers/vue-core-options';
 export type { PopoverPlacement } from './internal/anchored-position';