@digitalwalletcorp/vue-core 1.2.0 → 1.3.0

package/src/tab-group.vue

@@ -10,28 +10,32 @@ TabContentを並べてタブで切り替える
     >
       <div
         class="dwui-tab-headers"
+        role="tablist"
         :class="props.headerClass"
         :style="props.headerStyle"
       >
         <template
           v-for="tab in tabs"
-          :key="tab.labelId"
+          :key="tab.tabId"
         >
           <input
-            :id="`${groupName}-${tab.labelId}`"
+            :id="`${groupName}-${tab.tabId}`"
             type="radio"
             class="dwui-tab-radio"
+            role="tab"
             :name="groupName"
             :disabled="tab.disabled"
-            :checked="tab.labelId === activeLabelId"
-            @change="onChangeTab(tab.labelId)"
+            :checked="tab.tabId === activeTabId"
+            :aria-selected="tab.tabId === activeTabId ? 'true' : 'false'"
+            :aria-controls="`${groupName}-${tab.tabId}-panel`"
+            @change="onChangeTab(tab.tabId)"
           >
           <label
-            :for="`${groupName}-${tab.labelId}`"
+            :for="`${groupName}-${tab.tabId}`"
             class="dwui-tab-item"
             :class="[tab.status != null ? `dwui-tab-${tab.status}` : undefined, tab.headerClass]"
             :style="tab.headerStyle"
-            :data-test-tab-content-control="tab.labelId"
+            :data-test-tab-content-control="tab.tabId"
           >
             <LabelIcon>
               <template
@@ -40,7 +44,7 @@ TabContentを並べてタブで切り替える
               >
                 <component :is="tab.icon" />
               </template>
-              {{ tab.description }}
+              {{ tab.label }}
             </LabelIcon>
           </label>
         </template>
@@ -60,10 +64,10 @@ import TabContent from '@/tab-content.vue';
 import { tabGroupContextKey } from '@/internal/tab-group-context';
 import type { TabContentStatus } from '@/internal/tab-group-context';
 
-interface Props {
+export interface Props {
   /** ラジオボタンのname。未指定なら自動で採番する */
   tabGroupName?: string;
-  /** selectedTabLabelIdが未指定のとき、trueならdisabledでない最初のタブを選ぶ。falseなら先頭のタブ(disabledなら中身は空になる) */
+  /** selectedTabIdが未指定のとき、trueならdisabledでない最初のタブを選ぶ。falseなら先頭のタブ(disabledなら中身は空になる) */
   selectFirstEnabled?: boolean;
   /** タブの見出しを並べる部分に付けるclass */
   headerClass?: ClassValue;
@@ -74,18 +78,13 @@ interface Props {
 }
 const props = defineProps<Props>();
 
-interface Emits {
-  (e: 'emit:changeSelectedTab', labelId: string): void;
-}
-const emit = defineEmits<Emits>();
-
 /**
  * 選択するタブのlabelId。未指定なら先頭のタブ
- * 親がいつ代入しても選び直せるよう、v-model:selected-tab-label-idで同期する前提とする
+ * 親がいつ代入しても選び直せるよう、v-model:selected-tab-idで同期する前提とする
  */
-const selectedLabelId = defineModel<string>('selectedTabLabelId');
+const selectedTabId = defineModel<string>('selectedTabId');
 
-interface Slots {
+export interface Slots {
   default?(): VNode[];
   /** 読み込み中のTabContentに重ねて表示する内容。未指定なら既定の読み込み中表示 */
   loading?(): VNode[];
@@ -94,8 +93,8 @@ const slots = defineSlots<Slots>();
 
 /** タブの見出しの描画に使う、TabContentの指定 */
 interface TabHeader {
-  labelId: string;
-  description: string;
+  tabId: string;
+  label: string;
   disabled: boolean;
   status?: TabContentStatus;
   headerClass?: ClassValue;
@@ -107,7 +106,7 @@ const groupName = props.tabGroupName ?? useId();
 
 /**
  * TabContentのVNodeから見出しの指定を取り出す
- * propsのキーはテンプレートの書き方(label-id / labelId)のまま入っているため、両方を見る
+ * propsのキーはテンプレートの書き方(tab-id / tabId)のまま入っているため、両方を見る
  *
  * @param {VNode} vnode
  * @returns {TabHeader | undefined}
@@ -120,8 +119,8 @@ const toTabHeader = (vnode: VNode): TabHeader | undefined => {
   const vnodeProps = vnode.props ?? {};
   const disabled = vnodeProps.disabled;
   return {
-    labelId: String(vnodeProps['label-id'] ?? vnodeProps.labelId),
-    description: vnodeProps.description,
+    tabId: String(vnodeProps['tab-id'] ?? vnodeProps.tabId),
+    label: vnodeProps.label,
     // 属性だけを書いた場合(<TabContent disabled>)は空文字になる
     disabled: disabled === '' || !!disabled,
     status: vnodeProps.status,
@@ -148,51 +147,56 @@ const tabs = computed((): TabHeader[] => {
 });
 
 // 選ばれるまでは先頭のタブを選択中とする。スロットは描画中に読む必要があるため、setupの時点では先頭を確定しない
-const activeLabelId = computed((): string | undefined => {
-  if (selectedLabelId.value != null) {
-    return selectedLabelId.value;
+const activeTabId = computed((): string | undefined => {
+  if (selectedTabId.value != null) {
+    return selectedTabId.value;
   }
   const first = props.selectFirstEnabled ? tabs.value.find(tab => !tab.disabled) : tabs.value[0];
-  return first?.labelId;
+  return first?.tabId;
 });
 // タブの中身はactivatedを契機にAPIを呼ぶため、親の画面のonMountedで検索条件が整う前に通知しないよう、マウント後に通知を始める
 const mounted = ref(false);
-provide(tabGroupContextKey, { activeLabelId, mounted, loadingSlot: () => slots.loading });
+provide(tabGroupContextKey, { groupName, activeTabId, mounted, loadingSlot: () => slots.loading });
 
 onMounted(() => {
   mounted.value = true;
 });
 
-const onChangeTab = (labelId: string) => {
-  selectedLabelId.value = labelId;
-  emit('emit:changeSelectedTab', labelId);
+const onChangeTab = (tabId: string) => {
+  selectedTabId.value = tabId;
 };
 </script>
 
 <style>
 :where(.dwui-tab-group) {
-  margin-bottom: 8px;
+  margin-bottom: 0.67em;
 }
 
 :where(.dwui-tab-headers) {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  margin-top: 5px;
-  padding-bottom: 4px;
+  position: relative;
+  margin-top: 0.4em;
+  padding-bottom: 0.33em;
 }
 
 :where(.dwui-tab-radio) {
-  display: none;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
 }
 
 :where(.dwui-tab-item) {
   display: block;
   min-width: 100px;
-  padding: 0 4px;
-  border: 1px solid var(--dwui-border-color-tab, #565656);
+  padding: 0 0.33em;
+  border: 1px solid var(--dwui-border-color-tab, light-dark(#565656, #8a8a8a));
   border-bottom: 1px solid var(--dwui-border-color-tab-header-accent, #5ab4bd);
-  background: var(--dwui-background-tab-header, linear-gradient(#1313c7, navy));
+  background: var(--dwui-background-tab-header, linear-gradient(light-dark(#1313c7, #2a3a8f), light-dark(navy, #141c4d)));
   line-height: 2em;
   text-align: center;
   white-space: nowrap;
@@ -203,43 +207,48 @@ const onChangeTab = (labelId: string) => {
 }
 
 :where(.dwui-tab-radio:checked + .dwui-tab-item) {
-  background: var(--dwui-background-tab-header-selected, linear-gradient(#1313c7, rgb(149, 149, 234), #1313c7));
+  background: var(--dwui-background-tab-header-selected, linear-gradient(light-dark(#1313c7, #2a3a8f), light-dark(rgb(149, 149, 234), #5a62b8), light-dark(#1313c7, #2a3a8f)));
   color: var(--dwui-color-text-tab-header-selected, azure);
   /* 選択済みのタブは操作の対象ではないためカーソルを既定にする */
   cursor: default;
 }
 
 :where(.dwui-tab-radio:disabled + .dwui-tab-item) {
-  background: var(--dwui-background-tab-header-disabled, gray);
+  background: var(--dwui-background-tab-header-disabled, light-dark(gray, #4a4a4a));
   cursor: not-allowed;
 }
 
 :where(.dwui-tab-item.dwui-tab-warn) {
-  background: var(--dwui-background-tab-header-warn, #efef13);
-  color: var(--dwui-color-text-tab-header-warn, midnightblue);
+  background: var(--dwui-background-tab-header-warn, light-dark(#efef13, #8a8a10));
+  color: var(--dwui-color-text-tab-header-warn, light-dark(midnightblue, #fffbd0));
 }
 
 :where(.dwui-tab-radio:checked + .dwui-tab-item.dwui-tab-warn) {
-  background: var(--dwui-background-tab-header-warn-selected, linear-gradient(#fafa06, rgb(232, 238, 206), #fafa06));
+  background: var(--dwui-background-tab-header-warn-selected, linear-gradient(light-dark(#fafa06, #8a8a10), light-dark(rgb(232, 238, 206), #a8a860), light-dark(#fafa06, #8a8a10)));
 }
 
 :where(.dwui-tab-item.dwui-tab-error) {
-  background: var(--dwui-background-tab-header-error, red);
+  background: var(--dwui-background-tab-header-error, light-dark(red, #a01818));
   color: var(--dwui-color-text-tab-header-error, azure);
 }
 
 :where(.dwui-tab-radio:checked + .dwui-tab-item.dwui-tab-error) {
-  background: var(--dwui-background-tab-header-error-selected, linear-gradient(#ff0000, rgb(240, 136, 136), #ff0000));
+  background: var(--dwui-background-tab-header-error-selected, linear-gradient(light-dark(#ff0000, #a01818), light-dark(rgb(240, 136, 136), #c86060), light-dark(#ff0000, #a01818)));
 }
 
 :where(.dwui-tab-radio:not(:checked) + .dwui-tab-item:hover) {
   /* 背景の上に半透明の白を重ね、枠線と文字はそのままで背景だけを明るくする */
-  box-shadow: inset 0 0 0 999px var(--dwui-overlay-color-tab-header-hover, rgba(255, 255, 255, 0.35));
+  box-shadow: inset 0 0 0 999px var(--dwui-overlay-color-tab-header-hover, light-dark(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15)));
+}
+
+:where(.dwui-tab-radio:focus-visible + .dwui-tab-item) {
+  outline: var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);
+  outline-offset: var(--dwui-outline-offset-focus-ring, 2px);
 }
 
 :where(.dwui-tab-items) {
   height: 100%;
-  border: 1px solid var(--dwui-border-color-tab, #565656);
+  border: 1px solid var(--dwui-border-color-tab, light-dark(#565656, #8a8a8a));
   /* 中身を切り替えたときのスライドを枠内に収める */
   overflow: hidden;
 }

package/src/types/data-table.ts

@@ -0,0 +1,196 @@
+import type { ClassValue, StyleValue } from 'vue';
+
+/** 列の値の型。ソートの比較方法を決める */
+export type DataTableValueType = 'boolean' | 'string' | 'number' | 'object';
+
+/** ソートの方式。page は表示中の行を並べ替えて返し、remote はソート条件を通知するだけで利用側が再取得する */
+export type DataTableSortMode = 'page' | 'remote';
+
+/** コントロール(ページネーション・総件数・表示件数・ダウンロードボタン)を出す位置 */
+export type DataTableControlsPlacement = 'both' | 'top' | 'bottom' | 'none';
+
+/**
+ * CSV に出力する列の定義
+ */
+export interface DataTableCsvColumn<T = unknown> {
+  /** true なら出力しない */
+  disabled?: boolean;
+  /** 値を取り出すキー。ドット区切りで入れ子を辿る。未指定なら DataTableHeader.id。'$index' は行番号 */
+  key?: string;
+  /** 列名。未指定なら DataTableHeader.label。言語切替に追従させる場合は関数で渡す */
+  label?: string | (() => string);
+  /** 値の整形。指定したときは key を使わない */
+  format?: (row: T) => unknown;
+}
+
+/**
+ * ヘッダの定義
+ */
+export interface DataTableHeader<T = unknown> {
+  /** 列を識別するキー。ソートで値を取り出すキーにもなる */
+  id: string;
+  /** 見出し。言語切替に追従させる場合は関数で渡す */
+  label: string | (() => string);
+  /** true なら label を HTML として描画する */
+  html?: boolean;
+  /** ソートで値を取り出すキー。id と違うキーで並べるときに指定する。ドット区切りで入れ子を辿る */
+  sortKey?: string;
+  /** 値の型。ソートの比較方法を決める。未指定なら string */
+  type?: DataTableValueType;
+  /** 行同士を比較する関数。指定したときは sortKey と type を使わない。昇順の並びで a が前なら負の数を返す */
+  compare?: (a: T, b: T) => number;
+  /** 列の幅。数値は px */
+  width?: string | number;
+  /** 列の最小幅。数値は px */
+  minWidth?: string | number;
+  /** 列の最大幅。数値は px */
+  maxWidth?: string | number;
+  /** th の rowspan */
+  rowspan?: string | number;
+  /** th の colspan */
+  colspan?: string | number;
+  /** th の title 属性 */
+  title?: string;
+  /** CSV の出力定義。true なら id の値を label の列名で出力する。未指定なら出力しない */
+  csv?: boolean | DataTableCsvColumn<T>[];
+}
+
+/**
+ * 表示する文言。言語切替に追従させる場合は関数で渡す
+ */
+export interface DataTableLabels {
+  /** 総件数の見出し */
+  totalCount?: string | (() => string);
+  /** 総件数の後ろに付ける単位 */
+  totalUnit?: string | (() => string);
+  /** 1ページあたりの表示件数の見出し */
+  limit?: string | (() => string);
+  /** データが無いときの表示 */
+  noData?: string | (() => string);
+  /** ページ番号の選択の見出し。showPageSelect のときに表示する */
+  pageNumber?: string | (() => string);
+  /** ページダウンロードボタンの title */
+  downloadPage?: string | (() => string);
+  /** 全件ダウンロードボタンの title */
+  downloadAll?: string | (() => string);
+  /** 先頭ページへ移動するボタンの読み上げ名 */
+  firstPage?: string | (() => string);
+  /** 前のページへ移動するボタンの読み上げ名 */
+  previousPage?: string | (() => string);
+  /** 前のページ番号の組へ移動するボタンの読み上げ名 */
+  previousPages?: string | (() => string);
+  /** 次のページ番号の組へ移動するボタンの読み上げ名 */
+  nextPages?: string | (() => string);
+  /** 次のページへ移動するボタンの読み上げ名 */
+  nextPage?: string | (() => string);
+  /** 末尾ページへ移動するボタンの読み上げ名 */
+  lastPage?: string | (() => string);
+}
+
+/** 関数を評価した後の文言 */
+export type DataTableResolvedLabels = Record<keyof DataTableLabels, string>;
+
+/**
+ * DataTable の props
+ */
+export interface DataTableProps<T = unknown> {
+  /** 表示している行のデータ。スロットで描画する行と同じ順に並んでいること */
+  dataList: T[];
+  /** ヘッダ。id は一意であること */
+  headers: DataTableHeader<T>[];
+  /** 読み込み中。true の間は行を描画せず読み込み中の表示を出す */
+  loading?: boolean;
+  /** 総件数。未指定なら dataList の件数 */
+  totalCount?: number;
+  /** 現在ページ(1起点) */
+  current?: number;
+  /** 1ページあたりの表示件数 */
+  limit?: number;
+  /** 1ページあたりの表示件数の上限 */
+  maxLimit?: number;
+  /** ページネーションに並べるページ番号の最大数 */
+  maxPagination?: number;
+  /** 行をクリックで選択できるか */
+  selectable?: boolean;
+  /** コントロールを出す位置 */
+  controls?: DataTableControlsPlacement;
+  /** ページネーションを出す位置。controls が無い側には出ない */
+  pagination?: DataTableControlsPlacement;
+  /** ページダウンロードボタンを表示するか */
+  showDownloadPage?: boolean;
+  /** 全件ダウンロードボタンを表示するか */
+  showDownloadAll?: boolean;
+  /** 総件数を表示するか */
+  showTotal?: boolean;
+  /** 1ページあたりの表示件数の入力を表示するか */
+  showLimit?: boolean;
+  /** ページネーションにページ番号の選択を表示するか */
+  showPageSelect?: boolean;
+  /** dataList が空のときにデータが無い旨の行を表示するか */
+  showNoData?: boolean;
+  /** ヘッダの境界のドラッグで列幅を変えられるか */
+  resizable?: boolean;
+  /** ヘッダのクリックでソートできるか */
+  sortable?: boolean;
+  /** ソートの方式。未指定なら remote */
+  sortMode?: DataTableSortMode;
+  /** テーブルをスクロールする領域に付ける class */
+  contentClass?: ClassValue;
+  /** テーブルをスクロールする領域に付ける style */
+  contentStyle?: StyleValue;
+  /** table に付ける class */
+  tableClass?: ClassValue;
+  /** table に付ける style */
+  tableStyle?: StyleValue;
+  /** 表示する文言。未指定の項目は英語 */
+  labels?: DataTableLabels;
+  /** 総件数の整形。未指定なら en-US の桁区切り。SSR とクライアントで同じ文字列を返すこと */
+  formatTotalCount?: (count: number) => string;
+}
+
+/**
+ * DataTable が発行するイベント
+ */
+export interface DataTableEmits<T = unknown> {
+  /** 選択が変わった。クリックでの選択・解除、カーソルキーでの移動、読み込み完了時の解除で発行する。解除は undefined と -1 */
+  (e: 'emit:selectRow', value: T | undefined, index: number): void;
+  /** ソートの条件が変わった。sortMode に関わらず発行する */
+  (e: 'emit:changeSort', context: DataTableSortContext): void;
+  /** sortMode が page のとき、表示中の行を並べ替えた配列を発行する */
+  (e: 'emit:sortData', dataList: T[]): void;
+  (e: 'emit:updateHeader', headers: DataTableHeader<T>[]): void;
+  (e: 'emit:dblclickRow', value: T, index: number): void;
+  (e: 'emit:changeLimit', limit: number): void;
+  (e: 'emit:changePage', page: number): void;
+  (e: 'emit:downloadPage'): void;
+  (e: 'emit:downloadAll'): void;
+}
+
+/**
+ * DataTable のスロット
+ */
+export interface DataTableSlots<T = unknown> {
+  /** 行。tr を dataList と同じ順に並べ、tr の click で clickRow(row, index) を呼ぶ */
+  default?(props: {
+    /** 行を選択する。選択している行なら選択を解除する */
+    clickRow: (row: T, index: number) => void;
+    /** 行を選択してダブルクリックを通知する */
+    dblclickRow: (row: T, index: number) => void;
+    /** 行のインデックスから、ページをまたいだ1起点の行番号を返す */
+    rowNumber: (index: number) => number;
+    /** 選択している行のインデックス。選択していなければ -1 */
+    selectedIndex: number;
+  }): unknown;
+  /** 読み込み中の表示。未指定なら既定のスピナー */
+  loading?(): unknown;
+}
+
+/**
+ * ソートの状態
+ */
+export interface DataTableSortContext {
+  /** ソートしているヘッダの id。ソートしていなければ空文字 */
+  sortKey: string;
+  /** 降順なら true */
+  descending: boolean;
+}

package/src/types/modal-dialog.ts

@@ -0,0 +1,16 @@
+/** モーダルダイアログの種類 */
+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;
+};

package/src/types/movable-window.ts

@@ -0,0 +1,18 @@
+/** ドラッグで移動するときに掴む範囲。body はウィンドウ全体、header は見出しだけ */
+export type MovableWindowDragMode = 'body' | 'header';
+
+/** showOverlayBox / showFloatingComponent が中身のコンポーネントに props として渡す関数 */
+export interface MovableWindowContentProps {
+  /** ウィンドウを閉じる */
+  close: () => void;
+  /** ウィンドウのローディング表示を切り替える */
+  setLoading: (loading: boolean) => void;
+}
+
+/** showOverlayBox / showFloatingComponent が返す、表示中のウィンドウを操作するためのハンドル */
+export interface MovableWindowHandle {
+  /** ウィンドウを閉じ、閉じ終わったら取り外す */
+  close: () => void;
+  /** ウィンドウのローディング表示を切り替える */
+  setLoading: (loading: boolean) => void;
+}

package/src/warning-popper.vue

@@ -0,0 +1,70 @@
+<!--
+警告ポップアップ
+アイコンにマウスを載せている、またはフォーカスしている間だけ警告文を表示する。
+-->
+<template>
+  <IconPopper
+    class="dwui-warning-popper"
+    popover-class="dwui-warning-popper-popover"
+    :placement="props.placement"
+    :arrow="props.arrow"
+    :label="props.label"
+    @emit:open="emit('emit:open')"
+    @emit:close="emit('emit:close')"
+  >
+    <template #icon>
+      <slot name="icon">
+        <SvgWarningSign />
+      </slot>
+    </template>
+    <slot />
+  </IconPopper>
+</template>
+
+<script setup lang="ts">
+import { SvgWarningSign } from '@digitalwalletcorp/vue-svg-icons';
+import IconPopper from '@/internal/icon-popper.vue';
+import type { PopoverPlacement } from '@/internal/anchored-position';
+
+export interface Props {
+  /** アイコンに対するパネルの表示位置。収まらないときは反対側に出す */
+  placement?: PopoverPlacement;
+  /** アイコンを指す矢印をパネルに付ける */
+  arrow?: boolean;
+  /** アイコンの読み上げ名 */
+  label?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  placement: 'right',
+  arrow: true,
+  label: 'Warning'
+});
+
+export interface Emits {
+  (e: 'emit:open'): void;
+  (e: 'emit:close'): void;
+}
+const emit = defineEmits<Emits>();
+
+export interface Slots {
+  /** アイコン */
+  icon?(): unknown;
+  /** パネルに表示する中身 */
+  default?(): unknown;
+}
+defineSlots<Slots>();
+</script>
+
+<style>
+:where(.dwui-warning-popper-popover) {
+  --dwui-max-width-anchored-popover: var(--dwui-max-width-warning-popper, calc(100vw - 16px));
+  --dwui-max-height-anchored-popover: var(--dwui-max-height-warning-popper, calc(100vh - 16px));
+  --dwui-padding-anchored-popover: var(--dwui-padding-warning-popper, 0.67em 1em);
+  --dwui-border-color-anchored-popover: var(--dwui-border-color-warning-popper, light-dark(#8f8f8f, #6b6f76));
+  --dwui-radius-anchored-popover: var(--dwui-radius-warning-popper, 4px);
+  --dwui-background-anchored-popover: var(--dwui-background-warning-popper, Canvas);
+  --dwui-background-anchored-popover-arrow: var(--dwui-background-warning-popper-arrow, var(--dwui-background-warning-popper, Canvas));
+  --dwui-color-text-anchored-popover: var(--dwui-color-text-warning-popper, CanvasText);
+  --dwui-box-shadow-anchored-popover: var(--dwui-box-shadow-warning-popper, 0 2px 8px rgba(0, 0, 0, 0.25));
+}
+</style>

package/lib/accordion-fieldset.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./accordion-fieldset.vue_vue_type_style_index_0_lang-t9NqmoZW.cjs");exports.default=e._sfc_main;

package/lib/accordion-fieldset.js

@@ -1,4 +0,0 @@
-import { _ as f } from "./accordion-fieldset.vue_vue_type_style_index_0_lang-n-IZxUiu.js";
-export {
-  f as default
-};

package/lib/accordion-fieldset.vue_vue_type_style_index_0_lang-n-IZxUiu.js

@@ -1,66 +0,0 @@
-import { defineComponent as f, useSlots as m, ref as g, reactive as x, onMounted as _, openBlock as i, createElementBlock as k, createElementVNode as d, createVNode as C, unref as s, createBlock as b, createSlots as y, withCtx as r, renderSlot as l, createTextVNode as h, toDisplayString as w, createCommentVNode as B, normalizeClass as S } from "vue";
-import { SvgTriangleButton as v } from "@digitalwalletcorp/vue-svg-icons";
-import { _ as E } from "./label-icon.vue_vue_type_style_index_0_lang-me52HE2V.js";
-import { u as N } from "./use-shrinkable-CS2bmsJJ.js";
-const V = ["disabled"], $ = ["aria-expanded"], q = /* @__PURE__ */ f({
-  __name: "accordion-fieldset",
-  props: {
-    legend: {},
-    disabled: { type: Boolean },
-    initialExpand: { type: Boolean }
-  },
-  setup(c) {
-    const n = c, o = m(), a = g(), e = x({
-      expanded: !0
-    }), p = N(a), u = () => {
-      e.expanded = !e.expanded;
-    };
-    return _(() => {
-      e.expanded = !!n.initialExpand;
-    }), (t, T) => (i(), k("fieldset", {
-      class: "dwui-accordion-fieldset",
-      disabled: n.disabled
-    }, [
-      d("legend", null, [
-        d("button", {
-          type: "button",
-          class: "dwui-accordion-toggle",
-          "aria-expanded": e.expanded,
-          onClick: u
-        }, [
-          C(s(v), {
-            direction: e.expanded ? "up" : "down"
-          }, null, 8, ["direction"]),
-          n.legend != null || o.legend != null || o.icon != null ? (i(), b(E, { key: 0 }, y({ _: 2 }, [
-            o.icon != null ? {
-              name: "icon",
-              fn: r(() => [
-                l(t.$slots, "icon")
-              ]),
-              key: "0"
-            } : void 0,
-            n.legend != null || o.legend != null ? {
-              name: "default",
-              fn: r(() => [
-                l(t.$slots, "legend", {}, () => [
-                  h(w(n.legend), 1)
-                ])
-              ]),
-              key: "1"
-            } : void 0
-          ]), 1024)) : B("", !0)
-        ], 8, $)
-      ]),
-      d("div", {
-        ref_key: "refContents",
-        ref: a,
-        class: S(["dwui-accordion-contents", s(p) ? e.expanded ? "dwui-expanded" : "dwui-shrunk" : ""])
-      }, [
-        l(t.$slots, "default")
-      ], 2)
-    ], 8, V));
-  }
-});
-export {
-  q as _
-};

package/lib/accordion-fieldset.vue_vue_type_style_index_0_lang-t9NqmoZW.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),r=require("@digitalwalletcorp/vue-svg-icons"),c=require("./label-icon.vue_vue_type_style_index_0_lang-D9Cimu20.cjs"),u=require("./use-shrinkable-Cu9JQZll.cjs"),p=["disabled"],_=["aria-expanded"],f=e.defineComponent({__name:"accordion-fieldset",props:{legend:{},disabled:{type:Boolean},initialExpand:{type:Boolean}},setup(a){const t=a,o=e.useSlots(),l=e.ref(),n=e.reactive({expanded:!0}),i=u.useShrinkable(l),s=()=>{n.expanded=!n.expanded};return e.onMounted(()=>{n.expanded=!!t.initialExpand}),(d,g)=>(e.openBlock(),e.createElementBlock("fieldset",{class:"dwui-accordion-fieldset",disabled:t.disabled},[e.createElementVNode("legend",null,[e.createElementVNode("button",{type:"button",class:"dwui-accordion-toggle","aria-expanded":n.expanded,onClick:s},[e.createVNode(e.unref(r.SvgTriangleButton),{direction:n.expanded?"up":"down"},null,8,["direction"]),t.legend!=null||o.legend!=null||o.icon!=null?(e.openBlock(),e.createBlock(c._sfc_main,{key:0},e.createSlots({_:2},[o.icon!=null?{name:"icon",fn:e.withCtx(()=>[e.renderSlot(d.$slots,"icon")]),key:"0"}:void 0,t.legend!=null||o.legend!=null?{name:"default",fn:e.withCtx(()=>[e.renderSlot(d.$slots,"legend",{},()=>[e.createTextVNode(e.toDisplayString(t.legend),1)])]),key:"1"}:void 0]),1024)):e.createCommentVNode("",!0)],8,_)]),e.createElementVNode("div",{ref_key:"refContents",ref:l,class:e.normalizeClass(["dwui-accordion-contents",e.unref(i)?n.expanded?"dwui-expanded":"dwui-shrunk":""])},[e.renderSlot(d.$slots,"default")],2)],8,p))}});exports._sfc_main=f;

package/lib/accordion-section.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./accordion-section.vue_vue_type_style_index_0_lang-CFDdUEnn.cjs");exports.default=e._sfc_main;

package/lib/accordion-section.js

@@ -1,4 +0,0 @@
-import { _ as f } from "./accordion-section.vue_vue_type_style_index_0_lang-Gvjjx02P.js";
-export {
-  f as default
-};

package/lib/accordion-section.vue_vue_type_style_index_0_lang-CFDdUEnn.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),k=require("@digitalwalletcorp/vue-svg-icons"),v=require("./label-icon.vue_vue_type_style_index_0_lang-D9Cimu20.cjs"),x=require("./use-shrinkable-Cu9JQZll.cjs"),f={class:"dwui-accordion-section"},g={key:0,class:"dwui-accordion-section-control"},m=["disabled","aria-expanded"],b=e.defineComponent({__name:"accordion-section",props:{disabled:{type:Boolean},initialExpand:{type:Boolean},noGradient:{type:Boolean},openLabel:{},closeLabel:{},openPreset:{},closePreset:{}},setup(u){const o=u,l=e.useSlots(),r=e.ref(),n=e.reactive({expanded:!0}),d=x.useShrinkable(r),s=e.computed(()=>n.expanded?o.closePreset:o.openPreset),a=()=>(n.expanded?l["close-icon"]:l["open-icon"])??s.value?.icon,p=()=>(n.expanded?l["close-icon"]:l["open-icon"])==null?s.value?.iconProps:void 0,i=e.computed(()=>{const t=n.expanded?o.closeLabel:o.openLabel;if(t!=null)return t;const c=s.value?.label;return typeof c=="function"?c():c}),_=()=>{n.expanded=!n.expanded};return e.onMounted(()=>{n.expanded=!!o.initialExpand}),(t,c)=>(e.openBlock(),e.createElementBlock("div",f,[e.createElementVNode("div",{ref_key:"refContents",ref:r,class:e.normalizeClass(["dwui-accordion-section-contents",[e.unref(d)?n.expanded?"dwui-expanded":"dwui-shrunk":"",{"dwui-no-gradient":o.noGradient}]])},[e.renderSlot(t.$slots,"default")],2),e.unref(d)?(e.openBlock(),e.createElementBlock("div",g,[e.createElementVNode("button",{type:"button",class:"dwui-accordion-section-toggle",disabled:o.disabled,"aria-expanded":n.expanded,onClick:e.withModifiers(_,["stop"])},[a()!=null||i.value!=null?(e.openBlock(),e.createBlock(v._sfc_main,{key:0},e.createSlots({_:2},[a()!=null?{name:"icon",fn:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a()),e.normalizeProps(e.guardReactiveProps(p())),null,16))]),key:"0"}:void 0,i.value!=null?{name:"default",fn:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.value),1)]),key:"1"}:void 0]),1024)):(e.openBlock(),e.createBlock(e.unref(k.SvgTriangleButton),{key:1,direction:n.expanded?"up":"down"},null,8,["direction"]))],8,m)])):e.createCommentVNode("",!0)]))}});exports._sfc_main=b;