@fastkit/vui 0.6.20 → 0.6.28

package/dist/vui.css

@@ -521,6 +521,16 @@ template {
   );
   --pagination-item-size-dense: calc(var(--pagination-item-size) * 0.8125);
   --pagination-item-margin-dense: calc(var(--pagination-item-margin) * 0.75);
+  --table-vertical-margin: calc(var(--root-em) * 1.25);
+  --table-font-size: calc(var(--root-em) * 0.75);
+  --table-caption-font-size: calc(var(--root-em) * 1);
+  --table-caption-font-weight: regular;
+  --table-caption-vertical-margin: calc(var(--root-em) * 0.625);
+  --table-cell-height: calc(var(--root-em) * 3.125);
+  --table-cell-vertial-padding: calc(var(--root-em) * 0.3125);
+  --table-cell-horizontal-padding: calc(var(--root-em) * 1);
+  --table-header-color: var(--palette-primary);
+  --table-header-font-weight: 500;
 }
 
 :root,
@@ -721,6 +731,45 @@ h6,
   box-shadow: var(--shadow-key-umbra-0), var(--shadow-key-penumbra-0), var(--shadow-key-ambient-0) !important;
 }
 
+table {
+  display: table;
+  max-width: 100%;
+  margin: var(--table-vertical-margin) 0;
+  font-size: var(--table-font-size);
+  border-collapse: collapse;
+  border: 0;
+  border-radius: 0;
+}
+
+caption {
+  display: table-caption;
+  width: 100%;
+  padding: 0;
+  margin: 0 0 var(--table-caption-vertical-margin);
+  font-size: var(--table-caption-font-size);
+  font-weight: var(--table-caption-font-weight);
+  text-align: center;
+}
+
+th,
+td {
+  height: var(--table-cell-height);
+  padding: var(--table-cell-vertial-padding) var(--table-cell-horizontal-padding);
+  text-align: left;
+  vertical-align: middle;
+  border: 0;
+}
+
+th {
+  font-weight: var(--table-header-font-weight);
+  color: var(--table-header-color);
+  white-space: nowrap;
+}
+
+thead th {
+  text-align: center;
+}
+
 .v-control--sm {
   --control-field-rem: var(--control-field-rem-sm);
   font-size: var(--control-field-rem);
@@ -1016,7 +1065,7 @@ h6,
 }
 .v-pagination__item .v-icon,
 .v-pagination a.v-pagination__item .v-icon {
-  font-size: 150%;
+  font-size: 125%;
 }
 .v-pagination--dense .v-pagination__item {
   --pagination-size: var(--pagination-item-size-dense);
@@ -1629,6 +1678,150 @@ h6,
   font-style: italic;
   color: var(--control-disabled-color);
 }
+.v-data-table {
+  --controls-vertial-margin: 0.625em;
+}
+.v-card-content .v-data-table {
+  margin-right: calc(var(--card-content-padding) * -1);
+  margin-left: calc(var(--card-content-padding) * -1);
+}
+.v-data-table__controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+}
+.v-data-table__controls__info {
+  display: flex;
+  align-items: center;
+}
+.v-data-table__controls__info__length {
+  margin-right: 20px;
+}
+.v-data-table__controls__select-limit {
+  display: flex;
+  align-items: center;
+}
+.v-data-table__controls__select-limit__prefix {
+  margin-right: 0.5em;
+  font-size: 0.75em;
+  color: var(--palette-muted);
+  white-space: nowrap;
+}
+.v-data-table__controls__select-limit .v-select {
+  width: 5em;
+  margin-left: 0.5em;
+}
+.v-data-table__controls__pagination {
+  flex: 1 1 100%;
+  margin-left: auto;
+}
+@media screen and (min-width: 320px) {
+  .v-data-table__controls__pagination {
+    flex: 0 0 50%;
+    width: 50%;
+  }
+}
+.v-data-table__header {
+  margin-bottom: var(--controls-vertial-margin);
+}
+.v-data-table__footer {
+  margin-top: var(--controls-vertial-margin);
+}
+.v-data-table__body {
+  position: relative;
+}
+.v-data-table__body__inner {
+  overflow-x: auto;
+}
+.v-data-table__table-wrapper {
+  display: flex;
+}
+.v-data-table__table-wrapper::before, .v-data-table__table-wrapper::after {
+  display: block;
+  height: 1px;
+  content: "";
+}
+.v-data-table__loading {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--palette-background);
+  opacity: 0.5;
+}
+.v-data-table__table {
+  width: 100%;
+  margin: 0;
+  background: var(--palette-background);
+  border-radius: var(--control-field-radius);
+}
+.v-data-table__table__cell {
+  position: relative;
+  text-align: left;
+  white-space: nowrap;
+  vertical-align: middle;
+  border-bottom: thin solid rgba(0, 0, 0, 0.12);
+  transition: background 0.2s;
+}
+.v-data-table__table__cell:first-child {
+  padding-left: calc(var(--table-cell-horizontal-padding) * 2);
+}
+.v-data-table__table__cell:last-child {
+  padding-right: calc(var(--table-cell-horizontal-padding) * 2);
+}
+.v-data-table__table__cell--left {
+  text-align: left;
+}
+.v-data-table__table__cell--center {
+  text-align: center;
+}
+.v-data-table__table__cell--center .v-data-table__table__sort-icon--empty {
+  display: flex;
+}
+.v-data-table__table__cell--right {
+  text-align: right;
+}
+.v-data-table__table__cell[tabindex="0"] {
+  cursor: pointer;
+}
+.v-data-table__table__cell__tile {
+  display: flex;
+  align-items: center;
+}
+.v-data-table__table__sort-icon {
+  width: 25px;
+  font-size: 1.25em;
+  opacity: 0;
+  transition: transform 0.2s, opacity 0.2s;
+}
+.v-data-table__table__sort-icon--empty {
+  display: none;
+}
+.v-data-table__table__header .v-data-table__table__cell {
+  user-select: none;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(3px);
+}
+.v-data-table__table__header .v-data-table__table__cell--active .v-data-table__table__sort-icon {
+  opacity: 1;
+}
+.v-data-table__table__cell[tabindex="0"]:hover .v-data-table__table__sort-icon, .v-data-table__table__cell[tabindex="0"]:focus .v-data-table__table__sort-icon {
+  opacity: 1;
+}
+.v-data-table__table__body tr:last-child .v-data-table__table__cell {
+  border-bottom: none;
+}
+.v-data-table--fixed-header .v-data-table__table__header .v-data-table__table__cell {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
 .v-toolbar {
   --height: var(--toolbar-height);
   display: flex;

package/dist/vui.d.ts

@@ -23,6 +23,7 @@ import { IconName } from '@fastkit/icon-font';
 import { IMaskEvent } from '@fastkit/vue-kit';
 import { IMaskTypedValue } from '@fastkit/vue-kit';
 import { InjectionKey } from 'vue';
+import { LocationService } from '@fastkit/vue-utils';
 import { Numberish } from '@fastkit/vue-kit';
 import { Prop } from 'vue';
 import { PropType } from 'vue';
@@ -33,6 +34,7 @@ import { ResolvedFormSelectorItemData } from '@fastkit/vue-kit';
 import { ResolveRawSlots } from '@fastkit/vue-kit';
 import { ResolveRawSlots as ResolveRawSlots_2 } from '@fastkit/vue-utils';
 import { RouteLocationRaw } from 'vue-router';
+import type { Router } from 'vue-router';
 import { ScopeName } from '@fastkit/color-scheme';
 import { TextableCounterResult } from '@fastkit/vue-kit';
 import { TextableCounterSettings } from '@fastkit/vue-kit';
@@ -55,6 +57,8 @@ import { WritableComputedRef } from 'vue';
 
 declare type ARGS = Record<string, unknown> & VNodeProps;
 
+export declare function configureDataTableDefaults(defaults: Partial<DataTableDefaults>): void;
+
 export declare const CONTROL_FIELD_VARIANTS: readonly ["outlined", "filled", "flat"];
 
 export declare const CONTROL_SIZES: readonly ["sm", "md", "lg"];
@@ -214,6 +218,55 @@ export declare function createPaperProps(): {
     elevation: PropType<VuiElevationValue>;
 };
 
+declare const DATA_TABLE_DEFAULTS: {
+    itemKey: string;
+    pageQuery: string;
+    sortQuery: string;
+    orderQuery: string;
+    limitQuery: string;
+    defaultOrder: string;
+    ascQueryValue: string;
+    descQueryValue: string;
+    limits: number[];
+    limitDefault: number;
+    contorolThreshold: number;
+};
+
+export declare interface DataTableCellSlotPayload<T extends DataTableItem = DataTableItem> {
+    vui: VuiService;
+    item: T;
+    /**
+     * 選択されている場合true
+     */
+    selected: boolean;
+}
+
+export declare type DataTableDefaults = typeof DATA_TABLE_DEFAULTS;
+
+export declare interface DataTableHeader {
+    key: number | string;
+    label?: VNodeChild | ((vui: VuiService) => VNodeChild);
+    sortQuery?: string;
+    hidden?: boolean;
+    align?: DataTableHeaderAlign;
+    cell?: (payload: DataTableCellSlotPayload) => VNodeChild;
+}
+
+export declare type DataTableHeaderAlign = 'left' | 'center' | 'right';
+
+export declare interface DataTableItem {
+    [key: string]: any;
+}
+
+export declare interface DataTableItemSlotPayload<T extends DataTableItem = DataTableItem> {
+    key: string;
+    item: T;
+    /**
+     * 選択されている場合true
+     */
+    selected: boolean;
+}
+
 export declare function defineFormSelectorComponent(opts: DefineFormSelectorComponentOptions): DefineComponent<{
     'v-slots': PropType<ResolveRawSlots<FormControlSlots>>;
     stacked: {
@@ -244,6 +297,7 @@ export declare function defineFormSelectorComponent(opts: DefineFormSelectorComp
     required: BooleanConstructor;
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
+    hiddenInfo: BooleanConstructor;
     multiple: {
         type: BooleanConstructor;
         default: boolean;
@@ -350,6 +404,7 @@ export declare function defineFormSelectorComponent(opts: DefineFormSelectorComp
     required?: unknown;
     invalid?: unknown;
     valid?: unknown;
+    hiddenInfo?: unknown;
     multiple?: unknown;
     items?: unknown;
     name?: unknown;
@@ -384,6 +439,7 @@ export declare function defineFormSelectorComponent(opts: DefineFormSelectorComp
     untouched: boolean;
     invalid: boolean;
     valid: boolean;
+    hiddenInfo: boolean;
     errors: FormNodeError[];
     stacked: boolean;
 } & {
@@ -424,6 +480,7 @@ export declare function defineFormSelectorComponent(opts: DefineFormSelectorComp
     untouched: boolean;
     invalid: boolean;
     valid: boolean;
+    hiddenInfo: boolean;
     errors: FormNodeError[];
     stacked: boolean;
 }>;
@@ -986,6 +1043,7 @@ export declare const VCheckboxGroup: DefineComponent<{
     required: BooleanConstructor;
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
+    hiddenInfo: BooleanConstructor;
     multiple: {
         type: BooleanConstructor;
         default: boolean;
@@ -1092,6 +1150,7 @@ export declare const VCheckboxGroup: DefineComponent<{
     required?: unknown;
     invalid?: unknown;
     valid?: unknown;
+    hiddenInfo?: unknown;
     multiple?: unknown;
     items?: unknown;
     name?: unknown;
@@ -1126,6 +1185,7 @@ export declare const VCheckboxGroup: DefineComponent<{
     untouched: boolean;
     invalid: boolean;
     valid: boolean;
+    hiddenInfo: boolean;
     errors: FormNodeError[];
     stacked: boolean;
 } & {
@@ -1166,10 +1226,150 @@ export declare const VCheckboxGroup: DefineComponent<{
     untouched: boolean;
     invalid: boolean;
     valid: boolean;
+    hiddenInfo: boolean;
     errors: FormNodeError[];
     stacked: boolean;
 }>;
 
+export declare const VDataTable: DefineComponent<{
+    /** 選択中のkeyの配列 */
+    modelValue: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    itemKey: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    /**
+     * ページネーションクエリ名
+     */
+    pageQuery: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    /**
+     * ソートクエリ名
+     */
+    sortQuery: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    /**
+     * 表示順クエリ名
+     */
+    orderQuery: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    /**
+     * リミット件数クエリ名
+     */
+    limitQuery: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    defaultOrder: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    ascQueryValue: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    descQueryValue: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    limits: {
+        type: PropType<number[]>;
+        default: () => number[];
+    };
+    limitDefault: {
+        type: NumberConstructor;
+        default: () => number;
+    };
+    contorolThreshold: {
+        type: NumberConstructor;
+        default: () => number;
+    };
+    headers: {
+        type: PropType<DataTableHeader[]>;
+        required: true;
+    };
+    items: {
+        type: PropType<DataTableItem[]>;
+        default: () => never[];
+    };
+    total: {
+        type: NumberConstructor;
+        default: number;
+    };
+    selectable: BooleanConstructor;
+    fixedHeader: BooleanConstructor;
+    maxHeight: (StringConstructor | NumberConstructor)[];
+}, () => JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    input: (selecteds: string[]) => true;
+}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{
+    modelValue?: unknown;
+    itemKey?: unknown;
+    pageQuery?: unknown;
+    sortQuery?: unknown;
+    orderQuery?: unknown;
+    limitQuery?: unknown;
+    defaultOrder?: unknown;
+    ascQueryValue?: unknown;
+    descQueryValue?: unknown;
+    limits?: unknown;
+    limitDefault?: unknown;
+    contorolThreshold?: unknown;
+    headers?: unknown;
+    items?: unknown;
+    total?: unknown;
+    selectable?: unknown;
+    fixedHeader?: unknown;
+    maxHeight?: unknown;
+} & {
+    itemKey: string;
+    pageQuery: string;
+    sortQuery: string;
+    orderQuery: string;
+    limitQuery: string;
+    defaultOrder: string;
+    ascQueryValue: string;
+    descQueryValue: string;
+    limits: number[];
+    limitDefault: number;
+    contorolThreshold: number;
+    modelValue: string[];
+    headers: DataTableHeader[];
+    items: DataTableItem[];
+    total: number;
+    selectable: boolean;
+    fixedHeader: boolean;
+} & {
+    maxHeight?: string | number | undefined;
+}> & {
+    onInput?: ((selecteds: string[]) => any) | undefined;
+}, {
+    itemKey: string;
+    pageQuery: string;
+    sortQuery: string;
+    orderQuery: string;
+    limitQuery: string;
+    defaultOrder: string;
+    ascQueryValue: string;
+    descQueryValue: string;
+    limits: number[];
+    limitDefault: number;
+    contorolThreshold: number;
+    modelValue: string[];
+    items: DataTableItem[];
+    total: number;
+    selectable: boolean;
+    fixedHeader: boolean;
+}>;
+
 export { VDialog }
 
 export declare const VDrawerLayout: DefineComponent<{
@@ -2077,6 +2277,7 @@ export declare const VRadioGroup: DefineComponent<{
     required: BooleanConstructor;
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
+    hiddenInfo: BooleanConstructor;
     multiple: {
         type: BooleanConstructor;
         default: boolean;
@@ -2183,6 +2384,7 @@ export declare const VRadioGroup: DefineComponent<{
     required?: unknown;
     invalid?: unknown;
     valid?: unknown;
+    hiddenInfo?: unknown;
     multiple?: unknown;
     items?: unknown;
     name?: unknown;
@@ -2217,6 +2419,7 @@ export declare const VRadioGroup: DefineComponent<{
     untouched: boolean;
     invalid: boolean;
     valid: boolean;
+    hiddenInfo: boolean;
     errors: FormNodeError[];
     stacked: boolean;
 } & {
@@ -2257,6 +2460,7 @@ export declare const VRadioGroup: DefineComponent<{
     untouched: boolean;
     invalid: boolean;
     valid: boolean;
+    hiddenInfo: boolean;
     errors: FormNodeError[];
     stacked: boolean;
 }>;
@@ -2298,6 +2502,7 @@ export declare const VSelect: DefineComponent<{
     required: BooleanConstructor;
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
+    hiddenInfo: BooleanConstructor;
     multiple: {
         type: BooleanConstructor;
         default: boolean;
@@ -2410,6 +2615,7 @@ export declare const VSelect: DefineComponent<{
     required?: unknown;
     invalid?: unknown;
     valid?: unknown;
+    hiddenInfo?: unknown;
     multiple?: unknown;
     items?: unknown;
     name?: unknown;
@@ -2443,6 +2649,7 @@ export declare const VSelect: DefineComponent<{
     untouched: boolean;
     invalid: boolean;
     valid: boolean;
+    hiddenInfo: boolean;
     errors: FormNodeError[];
 } & {
     name?: string | undefined;
@@ -2486,6 +2693,7 @@ export declare const VSelect: DefineComponent<{
     untouched: boolean;
     invalid: boolean;
     valid: boolean;
+    hiddenInfo: boolean;
     errors: FormNodeError[];
 }>;
 
@@ -2652,6 +2860,7 @@ export declare const VSwitchGroup: DefineComponent<{
     required: BooleanConstructor;
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
+    hiddenInfo: BooleanConstructor;
     multiple: {
         type: BooleanConstructor;
         default: boolean;
@@ -2758,6 +2967,7 @@ export declare const VSwitchGroup: DefineComponent<{
     required?: unknown;
     invalid?: unknown;
     valid?: unknown;
+    hiddenInfo?: unknown;
     multiple?: unknown;
     items?: unknown;
     name?: unknown;
@@ -2792,6 +3002,7 @@ export declare const VSwitchGroup: DefineComponent<{
     untouched: boolean;
     invalid: boolean;
     valid: boolean;
+    hiddenInfo: boolean;
     errors: FormNodeError[];
     stacked: boolean;
 } & {
@@ -2832,6 +3043,7 @@ export declare const VSwitchGroup: DefineComponent<{
     untouched: boolean;
     invalid: boolean;
     valid: boolean;
+    hiddenInfo: boolean;
     errors: FormNodeError[];
     stacked: boolean;
 }>;
@@ -2872,6 +3084,7 @@ export declare const VTextarea: DefineComponent<{
     required: BooleanConstructor;
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
+    hiddenInfo: BooleanConstructor;
     autosize: PropType<RawTextareaAutosizeSettings>;
     rows: {
         default: number | undefined;
@@ -2983,6 +3196,7 @@ export declare const VTextarea: DefineComponent<{
     required?: unknown;
     invalid?: unknown;
     valid?: unknown;
+    hiddenInfo?: unknown;
     autosize?: unknown;
     rows?: unknown;
     mask?: unknown;
@@ -3027,6 +3241,7 @@ export declare const VTextarea: DefineComponent<{
     untouched: boolean;
     invalid: boolean;
     valid: boolean;
+    hiddenInfo: boolean;
     errors: FormNodeError[];
 } & {
     name?: string | undefined;
@@ -3080,6 +3295,7 @@ export declare const VTextarea: DefineComponent<{
     untouched: boolean;
     invalid: boolean;
     valid: boolean;
+    hiddenInfo: boolean;
     errors: FormNodeError[];
 }>;
 
@@ -3119,6 +3335,7 @@ export declare const VTextField: DefineComponent<{
     required: BooleanConstructor;
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
+    hiddenInfo: BooleanConstructor;
     type: {
         type: PropType<"number" | "search" | "email" | "tel" | "url" | "color" | "date" | "datetime-local" | "month" | "password" | "text" | "time">;
         default: string;
@@ -3234,6 +3451,7 @@ export declare const VTextField: DefineComponent<{
     required?: unknown;
     invalid?: unknown;
     valid?: unknown;
+    hiddenInfo?: unknown;
     type?: unknown;
     masked?: unknown;
     typed?: unknown;
@@ -3280,6 +3498,7 @@ export declare const VTextField: DefineComponent<{
     untouched: boolean;
     invalid: boolean;
     valid: boolean;
+    hiddenInfo: boolean;
     errors: FormNodeError[];
 } & {
     name?: string | undefined;
@@ -3340,6 +3559,7 @@ export declare const VTextField: DefineComponent<{
     untouched: boolean;
     invalid: boolean;
     valid: boolean;
+    hiddenInfo: boolean;
     errors: FormNodeError[];
 }>;
 
@@ -3608,6 +3828,8 @@ export declare class VuiService {
     readonly autoScrollToElementOffsetTop?: number | (() => number | undefined);
     readonly textareaRows?: number;
     readonly requiredChip?: VuiVNodeResolver;
+    readonly router: Router;
+    readonly location: LocationService;
     constructor(options: VuiServiceOptions);
     setting<K extends keyof VuiServiceUISettings>(key: K): VuiServiceUISettings[K];
     icon<K extends keyof VuiServiceIconSettings>(iconType: K): VuiServiceIconSettings[K];
@@ -3618,9 +3840,13 @@ export declare class VuiService {
 export declare interface VuiServiceIconSettings {
     menuDown: IconName;
     navigationExpand: RawIconProp;
+    prev: RawIconProp;
+    next: RawIconProp;
+    sort: RawIconProp;
 }
 
 export declare interface VuiServiceOptions {
+    router: Router;
     colorScheme: VueColorSchemePluginSettings;
     uiSettings: VuiServiceUISettings;
     icons: VuiServiceIconSettings;