@digitalwalletcorp/vue-core 1.3.1 → 1.4.1

package/lib/helpers/{show-modal-dialog.d.cts → modal-dialog.d.cts}

@@ -1,5 +1,17 @@
 import { AppContext, ClassValue, Component, StyleValue } from 'vue';
-import { ModalDialogButton, ModalDialogImage, ModalDialogResult, ModalDialogType } from '../types/modal-dialog.cjs';
+/** モーダルダイアログの種類 */
+export type ModalDialogType = 'info' | 'confirm' | 'warn' | 'error';
+/** モーダルダイアログに並べるボタンの種類 */
+export type ModalDialogButton = 'ok' | 'yes' | 'no' | 'cancel';
+/** モーダルダイアログを閉じたボタン。Esc で閉じたときは cancel */
+export type ModalDialogResult = ModalDialogButton;
+/** モーダルダイアログに表示する画像。文字列は画像の URL */
+export type ModalDialogImage = string | {
+    /** 画像の URL */
+    src: string;
+    /** 代替テキスト */
+    alt: string;
+};
 export interface ShowModalDialogOptions {
     /** ダイアログの種類 */
     type?: ModalDialogType;

package/lib/helpers/{show-modal-dialog.d.ts → modal-dialog.d.ts}

@@ -1,5 +1,17 @@
 import { AppContext, ClassValue, Component, StyleValue } from 'vue';
-import { ModalDialogButton, ModalDialogImage, ModalDialogResult, ModalDialogType } from '../types/modal-dialog';
+/** モーダルダイアログの種類 */
+export type ModalDialogType = 'info' | 'confirm' | 'warn' | 'error';
+/** モーダルダイアログに並べるボタンの種類 */
+export type ModalDialogButton = 'ok' | 'yes' | 'no' | 'cancel';
+/** モーダルダイアログを閉じたボタン。Esc で閉じたときは cancel */
+export type ModalDialogResult = ModalDialogButton;
+/** モーダルダイアログに表示する画像。文字列は画像の URL */
+export type ModalDialogImage = string | {
+    /** 画像の URL */
+    src: string;
+    /** 代替テキスト */
+    alt: string;
+};
 export interface ShowModalDialogOptions {
     /** ダイアログの種類 */
     type?: ModalDialogType;

package/lib/helpers/{show-overlay-box.d.ts → overlay-box.d.cts}

@@ -1,5 +1,7 @@
 import { AppContext, ClassValue, Component, StyleValue } from 'vue';
-import { MovableWindowContentProps, MovableWindowDragMode, MovableWindowHandle } from '../types/movable-window';
+import { MovableWindowContentProps, MovableWindowDragMode, MovableWindowHandle } from '../internal/window-control.cjs';
+/** 開いている OverlayBox を開いた順に持つ。Esc では最後に開いたものだけを閉じる */
+export declare const openedOverlayBoxes: symbol[];
 /** showOverlayBox が中身のコンポーネントに props として渡す関数 */
 export type OverlayBoxContentProps = MovableWindowContentProps;
 /** showOverlayBox が返す、表示中のボックスを操作するためのハンドル */

package/lib/helpers/{show-overlay-box.d.cts → overlay-box.d.ts}

@@ -1,5 +1,7 @@
 import { AppContext, ClassValue, Component, StyleValue } from 'vue';
-import { MovableWindowContentProps, MovableWindowDragMode, MovableWindowHandle } from '../types/movable-window.cjs';
+import { MovableWindowContentProps, MovableWindowDragMode, MovableWindowHandle } from '../internal/window-control';
+/** 開いている OverlayBox を開いた順に持つ。Esc では最後に開いたものだけを閉じる */
+export declare const openedOverlayBoxes: symbol[];
 /** showOverlayBox が中身のコンポーネントに props として渡す関数 */
 export type OverlayBoxContentProps = MovableWindowContentProps;
 /** showOverlayBox が返す、表示中のボックスを操作するためのハンドル */

package/lib/helpers/{show-snackbar.d.cts → snackbar.d.cts}

@@ -1,5 +1,20 @@
 import { ClassValue, StyleValue } from 'vue';
-import { SnackbarDirection, SnackbarPlacement } from '../internal/snackbar-item.cjs';
+/** snackbar を表示する画面上の位置 */
+export type SnackbarPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+/** 同じ表示領域に並べる向き。overlap は同じ位置に重ねて新しいものを前面に出し、column は縦に積み、row は横に並べて端で折り返す */
+export type SnackbarDirection = 'overlap' | 'column' | 'row';
+/** 表示領域に並べる snackbar 1件分の内容 */
+export interface SnackbarItem {
+    id: number;
+    message: string;
+    title?: string;
+    label?: string;
+    timestamp?: string;
+    clearable: boolean;
+    clearLabel: string;
+    class?: ClassValue;
+    style?: StyleValue;
+}
 /** snackbar が閉じた理由。click はクリック、duration は表示時間の経過、clear は一括消去ボタンと closeAllSnackbars()、handle は SnackbarHandle の close() */
 export type SnackbarCloseReason = 'click' | 'duration' | 'clear' | 'handle';
 export interface ShowSnackbarOptions {

package/lib/helpers/{show-snackbar.d.ts → snackbar.d.ts}

@@ -1,5 +1,20 @@
 import { ClassValue, StyleValue } from 'vue';
-import { SnackbarDirection, SnackbarPlacement } from '../internal/snackbar-item';
+/** snackbar を表示する画面上の位置 */
+export type SnackbarPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+/** 同じ表示領域に並べる向き。overlap は同じ位置に重ねて新しいものを前面に出し、column は縦に積み、row は横に並べて端で折り返す */
+export type SnackbarDirection = 'overlap' | 'column' | 'row';
+/** 表示領域に並べる snackbar 1件分の内容 */
+export interface SnackbarItem {
+    id: number;
+    message: string;
+    title?: string;
+    label?: string;
+    timestamp?: string;
+    clearable: boolean;
+    clearLabel: string;
+    class?: ClassValue;
+    style?: StyleValue;
+}
 /** snackbar が閉じた理由。click はクリック、duration は表示時間の経過、clear は一括消去ボタンと closeAllSnackbars()、handle は SnackbarHandle の close() */
 export type SnackbarCloseReason = 'click' | 'duration' | 'clear' | 'handle';
 export interface ShowSnackbarOptions {

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

@@ -0,0 +1,17 @@
+import { InjectionKey } 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'>>;
+/** アプリ全体の設定 */
+export type VueCoreOptions = {
+    /** DataTable のアプリ既定の設定 */
+    dataTable?: DataTableOptions;
+};
+/**
+ * アプリ全体の設定を provide/inject するためのキー
+ * provide は任意。画面の上位または app.provide で使う
+ */
+export declare const vueCoreOptionsKey: InjectionKey<VueCoreOptions>;

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

@@ -0,0 +1,17 @@
+import { InjectionKey } 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'>>;
+/** アプリ全体の設定 */
+export type VueCoreOptions = {
+    /** DataTable のアプリ既定の設定 */
+    dataTable?: DataTableOptions;
+};
+/**
+ * アプリ全体の設定を provide/inject するためのキー
+ * provide は任意。画面の上位または app.provide で使う
+ */
+export declare const vueCoreOptionsKey: InjectionKey<VueCoreOptions>;

package/lib/index.cjs

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

package/lib/index.d.cts

@@ -2,13 +2,14 @@ export * from './components.cjs';
 export type { Props as AccordionFieldsetProps, Slots as AccordionFieldsetSlots } from './accordion-fieldset.cjs';
 export type { Props as AccordionSectionProps, Slots as AccordionSectionSlots } from './accordion-section.cjs';
 export type { Props as CopyButtonProps, Emits as CopyButtonEmits, Slots as CopyButtonSlots } from './copy-button.cjs';
+export type { Props as DataTableProps, Emits as DataTableEmits, Slots as DataTableSlots } from './data-table.cjs';
 export type { Props as DarkModeSelectorProps, Emits as DarkModeSelectorEmits, Slots as DarkModeSelectorSlots } from './dark-mode-selector.cjs';
 export type { Props as HelpButtonProps, Emits as HelpButtonEmits, Slots as HelpButtonSlots } from './help-button.cjs';
 export type { Props as HelpPopperProps, Emits as HelpPopperEmits, Slots as HelpPopperSlots } from './help-popper.cjs';
 export type { Props as HourglassLoadingProps } from './hourglass-loading.cjs';
 export type { Props as IntersectionLazyComponentProps, Emits as IntersectionLazyComponentEmits, Slots as IntersectionLazyComponentSlots } from './intersection-lazy-component.cjs';
 export type { Props as LabelButtonProps, Slots as LabelButtonSlots } from './label-button.cjs';
-export type { Props as LabelIconProps, Slots as LabelIconSlots } from './label-icon.cjs';
+export type { Props as LabelIconProps, Slots as LabelIconSlots, LabelPreset } from './label-icon.cjs';
 export type { Props as ModalDialogProps, Emits as ModalDialogEmits, Slots as ModalDialogSlots } from './modal-dialog.cjs';
 export type { Props as OverlayBoxProps, Emits as OverlayBoxEmits, Slots as OverlayBoxSlots } from './overlay-box.cjs';
 export type { Props as PageSectionProps, Slots as PageSectionSlots } from './page-section.cjs';
@@ -17,21 +18,20 @@ export type { Props as ScreenLoadingProps } from './screen-loading.cjs';
 export type { Props as TabContentProps, Slots as TabContentSlots } from './tab-content.cjs';
 export type { Props as TabGroupProps, Slots as TabGroupSlots } from './tab-group.cjs';
 export type { Props as WarningPopperProps, Emits as WarningPopperEmits, Slots as WarningPopperSlots } from './warning-popper.cjs';
-export { headersToCsvColumns, rowToCsvColumns } from './helpers/data-table-csv.cjs';
-export type { DataTableControlsPlacement, DataTableCsvColumn, DataTableEmits, DataTableHeader, DataTableLabels, DataTableProps, DataTableResolvedLabels, DataTableSlots, DataTableSortContext, DataTableSortMode, DataTableValueType } from './types/data-table.cjs';
-export { closeAllFloatingComponents, showFloatingComponent, showFloatingMessage, useFloatingComponent } from './helpers/show-floating-component.cjs';
-export type { FloatingComponentContentProps, FloatingComponentHandle, ShowFloatingComponentOptions, ShowFloatingMessageOptions } from './helpers/show-floating-component.cjs';
-export { showConfirmationDialog, showErrorDialog, showInformationDialog, showModalDialog, showWarningDialog } from './helpers/show-modal-dialog.cjs';
-export type { ShowModalDialogOptions } from './helpers/show-modal-dialog.cjs';
-export type { ModalDialogButton, ModalDialogImage, ModalDialogResult, ModalDialogType } from './types/modal-dialog.cjs';
-export { closeAllOverlayBoxes, showOverlayBox, useOverlayBox } from './helpers/show-overlay-box.cjs';
-export type { OverlayBoxContentProps, OverlayBoxHandle, ShowOverlayBoxOptions } from './helpers/show-overlay-box.cjs';
-export { showScreenLoading } from './helpers/show-screen-loading.cjs';
-export type { ScreenLoadingHandle, ShowScreenLoadingOptions } from './helpers/show-screen-loading.cjs';
-export { closeAllSnackbars, showSnackbar } from './helpers/show-snackbar.cjs';
-export type { ShowSnackbarOptions, SnackbarCloseReason, SnackbarHandle } from './helpers/show-snackbar.cjs';
-export type { SnackbarDirection, SnackbarPlacement } from './internal/snackbar-item.cjs';
-export type { LabelPreset } from './types/label-preset.cjs';
-export type { MovableWindowContentProps, MovableWindowDragMode, MovableWindowHandle } from './types/movable-window.cjs';
-export type { TabContentStatus } from './internal/tab-group-context.cjs';
+export { headersToCsvColumns, rowToCsvColumns } from './helpers/data-table.cjs';
+export type { DataTableControlsPlacement, DataTableCsvColumn, DataTableHeader, DataTableLabels, DataTableResolvedLabels, DataTableSortContext, DataTableSortMode, DataTableValueType } from './helpers/data-table.cjs';
+export { closeAllFloatingComponents, showFloatingComponent, showFloatingMessage, useFloatingComponent } from './helpers/floating-component.cjs';
+export type { FloatingComponentContentProps, FloatingComponentHandle, ShowFloatingComponentOptions, ShowFloatingMessageOptions } from './helpers/floating-component.cjs';
+export { showConfirmationDialog, showErrorDialog, showInformationDialog, showModalDialog, showWarningDialog } from './helpers/modal-dialog.cjs';
+export type { ModalDialogButton, ModalDialogImage, ModalDialogResult, ModalDialogType, ShowModalDialogOptions } from './helpers/modal-dialog.cjs';
+export { closeAllOverlayBoxes, showOverlayBox, useOverlayBox } from './helpers/overlay-box.cjs';
+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 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 { PopoverPlacement } from './internal/anchored-position.cjs';

package/lib/index.d.ts

@@ -2,13 +2,14 @@ export * from './components';
 export type { Props as AccordionFieldsetProps, Slots as AccordionFieldsetSlots } from './accordion-fieldset';
 export type { Props as AccordionSectionProps, Slots as AccordionSectionSlots } from './accordion-section';
 export type { Props as CopyButtonProps, Emits as CopyButtonEmits, Slots as CopyButtonSlots } from './copy-button';
+export type { Props as DataTableProps, Emits as DataTableEmits, Slots as DataTableSlots } from './data-table';
 export type { Props as DarkModeSelectorProps, Emits as DarkModeSelectorEmits, Slots as DarkModeSelectorSlots } from './dark-mode-selector';
 export type { Props as HelpButtonProps, Emits as HelpButtonEmits, Slots as HelpButtonSlots } from './help-button';
 export type { Props as HelpPopperProps, Emits as HelpPopperEmits, Slots as HelpPopperSlots } from './help-popper';
 export type { Props as HourglassLoadingProps } from './hourglass-loading';
 export type { Props as IntersectionLazyComponentProps, Emits as IntersectionLazyComponentEmits, Slots as IntersectionLazyComponentSlots } from './intersection-lazy-component';
 export type { Props as LabelButtonProps, Slots as LabelButtonSlots } from './label-button';
-export type { Props as LabelIconProps, Slots as LabelIconSlots } from './label-icon';
+export type { Props as LabelIconProps, Slots as LabelIconSlots, LabelPreset } from './label-icon';
 export type { Props as ModalDialogProps, Emits as ModalDialogEmits, Slots as ModalDialogSlots } from './modal-dialog';
 export type { Props as OverlayBoxProps, Emits as OverlayBoxEmits, Slots as OverlayBoxSlots } from './overlay-box';
 export type { Props as PageSectionProps, Slots as PageSectionSlots } from './page-section';
@@ -17,21 +18,20 @@ export type { Props as ScreenLoadingProps } from './screen-loading';
 export type { Props as TabContentProps, Slots as TabContentSlots } from './tab-content';
 export type { Props as TabGroupProps, Slots as TabGroupSlots } from './tab-group';
 export type { Props as WarningPopperProps, Emits as WarningPopperEmits, Slots as WarningPopperSlots } from './warning-popper';
-export { headersToCsvColumns, rowToCsvColumns } from './helpers/data-table-csv';
-export type { DataTableControlsPlacement, DataTableCsvColumn, DataTableEmits, DataTableHeader, DataTableLabels, DataTableProps, DataTableResolvedLabels, DataTableSlots, DataTableSortContext, DataTableSortMode, DataTableValueType } from './types/data-table';
-export { closeAllFloatingComponents, showFloatingComponent, showFloatingMessage, useFloatingComponent } from './helpers/show-floating-component';
-export type { FloatingComponentContentProps, FloatingComponentHandle, ShowFloatingComponentOptions, ShowFloatingMessageOptions } from './helpers/show-floating-component';
-export { showConfirmationDialog, showErrorDialog, showInformationDialog, showModalDialog, showWarningDialog } from './helpers/show-modal-dialog';
-export type { ShowModalDialogOptions } from './helpers/show-modal-dialog';
-export type { ModalDialogButton, ModalDialogImage, ModalDialogResult, ModalDialogType } from './types/modal-dialog';
-export { closeAllOverlayBoxes, showOverlayBox, useOverlayBox } from './helpers/show-overlay-box';
-export type { OverlayBoxContentProps, OverlayBoxHandle, ShowOverlayBoxOptions } from './helpers/show-overlay-box';
-export { showScreenLoading } from './helpers/show-screen-loading';
-export type { ScreenLoadingHandle, ShowScreenLoadingOptions } from './helpers/show-screen-loading';
-export { closeAllSnackbars, showSnackbar } from './helpers/show-snackbar';
-export type { ShowSnackbarOptions, SnackbarCloseReason, SnackbarHandle } from './helpers/show-snackbar';
-export type { SnackbarDirection, SnackbarPlacement } from './internal/snackbar-item';
-export type { LabelPreset } from './types/label-preset';
-export type { MovableWindowContentProps, MovableWindowDragMode, MovableWindowHandle } from './types/movable-window';
-export type { TabContentStatus } from './internal/tab-group-context';
+export { headersToCsvColumns, rowToCsvColumns } from './helpers/data-table';
+export type { DataTableControlsPlacement, DataTableCsvColumn, DataTableHeader, DataTableLabels, DataTableResolvedLabels, DataTableSortContext, DataTableSortMode, DataTableValueType } from './helpers/data-table';
+export { closeAllFloatingComponents, showFloatingComponent, showFloatingMessage, useFloatingComponent } from './helpers/floating-component';
+export type { FloatingComponentContentProps, FloatingComponentHandle, ShowFloatingComponentOptions, ShowFloatingMessageOptions } from './helpers/floating-component';
+export { showConfirmationDialog, showErrorDialog, showInformationDialog, showModalDialog, showWarningDialog } from './helpers/modal-dialog';
+export type { ModalDialogButton, ModalDialogImage, ModalDialogResult, ModalDialogType, ShowModalDialogOptions } from './helpers/modal-dialog';
+export { closeAllOverlayBoxes, showOverlayBox, useOverlayBox } from './helpers/overlay-box';
+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 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 { PopoverPlacement } from './internal/anchored-position';