@fastkit/vui 0.7.22 → 0.7.23

package/dist/tool/index.js

@@ -35,20 +35,21 @@ import './setup.scss';
 import type { App } from 'vue';
 import type { Router } from 'vue-router';
 import { VPageLink } from '@fastkit/vue-page';
-import { installVuiPlugin as _installVuiPlugin, VuiPluginOptions } from '@fastkit/vui';
+import { installVuiPlugin as _installVuiPlugin, RawVuiPluginOptions, mergeVuiPluginOptions } from '@fastkit/vui';
 import { colorScheme } from '<%~ it.colorScheme %>';
 import '<%~ it.mediaMatch %>';
 import './icon-font';
 import '${STYLE_AFTER_EFFECTS_PATH}';
 
-export function installVui(settings: { app: App, router: Router }) {
-  _installVuiPlugin(settings.app, {
+export function installVui(settings: { app: App, router: Router }, options?: RawVuiPluginOptions) {
+  const merged = mergeVuiPluginOptions({
     RouterLink: VPageLink,
     colorScheme,
     uiSettings: <%~ it.uiSettings %>,
     icons: <%~ it.icons %>,
     ...settings,
-  });
+  }, options);
+  _installVuiPlugin(settings.app, merged);
 }
 
 export default installVui;

package/dist/tool/vite-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vite-plugin.d.ts","sourceRoot":"","sources":["../../../../../../../packages/vui/src/tool/vite-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAK9B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AA+F/C,MAAM,WAAW,oBACf,SAAQ,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IACzE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAGD,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC;IACvD,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,2BAA2B,CAAC;IACtC,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,EAAE,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAC3B,OAAO,GAAE,oBAAyB,GACjC,mBAAmB,CAyJrB"}
+{"version":3,"file":"vite-plugin.d.ts","sourceRoot":"","sources":["../../../../../../../packages/vui/src/tool/vite-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAK9B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAgG/C,MAAM,WAAW,oBACf,SAAQ,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IACzE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAGD,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC;IACvD,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,2BAA2B,CAAC;IACtC,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,EAAE,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAC3B,OAAO,GAAE,oBAAyB,GACjC,mBAAmB,CAyJrB"}

package/dist/vui.cjs.js

@@ -3432,6 +3432,11 @@ const VDataTable = vue.defineComponent({
       default: () => DATA_TABLE_DEFAULTS.orderQuery
     },
 
+    /**
+     * 検索クエリ名
+     */
+    searchQuery: [String, Array],
+
     /**
      * リミット件数クエリ名
      */
@@ -3477,7 +3482,11 @@ const VDataTable = vue.defineComponent({
     },
     selectable: Boolean,
     fixedHeader: Boolean,
-    maxHeight: [Number, String]
+    maxHeight: [Number, String],
+    // eslint-disable-next-line vue/require-prop-types
+    noDataMessage: {},
+    // eslint-disable-next-line vue/require-prop-types
+    noResultsMessage: {}
   },
   emits: {
     input: selecteds => true
@@ -3506,6 +3515,46 @@ const VDataTable = vue.defineComponent({
       ret.push(...headers.filter(h => !h.hidden));
       return ret;
     });
+    const searchQueryValues = vue.computed(() => {
+      let {
+        searchQuery
+      } = props;
+
+      if (!searchQuery) {
+        return [];
+      }
+
+      if (!Array.isArray(searchQuery)) {
+        searchQuery = [searchQuery];
+      }
+
+      const values = [];
+      searchQuery.forEach(query => {
+        const value = vui.location.getQuery(query);
+
+        if (value == null || value === '') {
+          return;
+        }
+
+        if (typeof value === 'object' && !Object.keys(value).length) {
+          return;
+        }
+
+        values.push(value);
+      });
+      return values;
+    });
+    const emptyMessage = vue.computed(() => {
+      let message;
+
+      if (searchQueryValues.value.length) {
+        message = props.noResultsMessage || vui.setting('noResultsMessage') || 'No search results found.'; // 検索結果が見つかりませんでした。
+      } else {
+        message = props.noDataMessage || vui.setting('noDataMessage') || 'No data was available.'; // データはありませんでした。
+      }
+
+      return typeof message === 'function' ? message() : message;
+    });
     const classesRef = vue.computed(() => [{
       'v-data-table--fixed-header': props.fixedHeader
     }]);
@@ -3972,7 +4021,7 @@ const VDataTable = vue.defineComponent({
         "class": "v-data-table__body container-pull"
       }, [isEmpty ? vue.createVNode("div", {
         "class": "v-data-table__empty--message"
-      }, null) : vue.createVNode(VPaper, {
+      }, [emptyMessage.value]) : vue.createVNode(VPaper, {
         "class": "v-data-table__body__inner",
         "style": bodyInnerStylesRef.value
       }, {
@@ -4136,6 +4185,51 @@ const VToolbarTitle = vue.defineComponent({
 
 const DEFAULT_AUTO_SCROLL_TO_ELEMENT_OFFSET_TOP = -20;
 const DEFAULT_TEXTAREA_ROWS = 3;
+function mergeVuiServiceUISettings(base, overrides) {
+  if (!overrides) {
+    return base;
+  }
+
+  const merged = { ...base
+  };
+  Object.entries(overrides).forEach(([key, value]) => {
+    if (value) {
+      merged[key] = value;
+    }
+  });
+  return merged;
+}
+function mergeVuiServiceIconSettings(base, overrides) {
+  if (!overrides) {
+    return base;
+  }
+
+  const merged = { ...base
+  };
+  Object.entries(overrides).forEach(([key, value]) => {
+    if (value) {
+      merged[key] = value;
+    }
+  });
+  return merged;
+}
+function mergeVuiServiceOptions(base, overrides) {
+  if (!overrides) {
+    return base;
+  }
+
+  const merged = { ...base,
+    uiSettings: mergeVuiServiceUISettings(base.uiSettings, overrides.uiSettings),
+    icons: mergeVuiServiceIconSettings(base.icons, overrides.icons)
+  };
+  const excludes = ['uiSettings', 'icons'];
+  Object.entries(overrides).forEach(([key, value]) => {
+    if (value && !excludes.includes(key)) {
+      merged[key] = value;
+    }
+  });
+  return merged;
+}
 class VuiService {
   get scroller() {
     return vueScroller.getDocumentScroller();
@@ -4272,6 +4366,18 @@ class VuiService {
 
 }
 
+function mergeVuiPluginOptions(base, override) {
+  if (!override) return base;
+  const merged = mergeVuiServiceOptions(base, override);
+
+  if (override.stack) {
+    merged.stack = { ...merged.stack,
+      ...override.stack
+    };
+  }
+
+  return merged;
+}
 class VuiPlugin {
   static installedApps = new Set();
 
@@ -4415,6 +4521,10 @@ exports.defineFormSelectorComponent = defineFormSelectorComponent;
 exports.iconProps = iconProps;
 exports.installVuiPlugin = installVuiPlugin;
 exports.listTileEmits = listTileEmits;
+exports.mergeVuiPluginOptions = mergeVuiPluginOptions;
+exports.mergeVuiServiceIconSettings = mergeVuiServiceIconSettings;
+exports.mergeVuiServiceOptions = mergeVuiServiceOptions;
+exports.mergeVuiServiceUISettings = mergeVuiServiceUISettings;
 exports.paginationProps = paginationProps;
 exports.rawIconProp = rawIconProp;
 exports.renderNavigationItemInput = renderNavigationItemInput;

package/dist/vui.cjs.prod.js

@@ -3432,6 +3432,11 @@ const VDataTable = vue.defineComponent({
       default: () => DATA_TABLE_DEFAULTS.orderQuery
     },
 
+    /**
+     * 検索クエリ名
+     */
+    searchQuery: [String, Array],
+
     /**
      * リミット件数クエリ名
      */
@@ -3477,7 +3482,11 @@ const VDataTable = vue.defineComponent({
     },
     selectable: Boolean,
     fixedHeader: Boolean,
-    maxHeight: [Number, String]
+    maxHeight: [Number, String],
+    // eslint-disable-next-line vue/require-prop-types
+    noDataMessage: {},
+    // eslint-disable-next-line vue/require-prop-types
+    noResultsMessage: {}
   },
   emits: {
     input: selecteds => true
@@ -3506,6 +3515,46 @@ const VDataTable = vue.defineComponent({
       ret.push(...headers.filter(h => !h.hidden));
       return ret;
     });
+    const searchQueryValues = vue.computed(() => {
+      let {
+        searchQuery
+      } = props;
+
+      if (!searchQuery) {
+        return [];
+      }
+
+      if (!Array.isArray(searchQuery)) {
+        searchQuery = [searchQuery];
+      }
+
+      const values = [];
+      searchQuery.forEach(query => {
+        const value = vui.location.getQuery(query);
+
+        if (value == null || value === '') {
+          return;
+        }
+
+        if (typeof value === 'object' && !Object.keys(value).length) {
+          return;
+        }
+
+        values.push(value);
+      });
+      return values;
+    });
+    const emptyMessage = vue.computed(() => {
+      let message;
+
+      if (searchQueryValues.value.length) {
+        message = props.noResultsMessage || vui.setting('noResultsMessage') || 'No search results found.'; // 検索結果が見つかりませんでした。
+      } else {
+        message = props.noDataMessage || vui.setting('noDataMessage') || 'No data was available.'; // データはありませんでした。
+      }
+
+      return typeof message === 'function' ? message() : message;
+    });
     const classesRef = vue.computed(() => [{
       'v-data-table--fixed-header': props.fixedHeader
     }]);
@@ -3972,7 +4021,7 @@ const VDataTable = vue.defineComponent({
         "class": "v-data-table__body container-pull"
       }, [isEmpty ? vue.createVNode("div", {
         "class": "v-data-table__empty--message"
-      }, null) : vue.createVNode(VPaper, {
+      }, [emptyMessage.value]) : vue.createVNode(VPaper, {
         "class": "v-data-table__body__inner",
         "style": bodyInnerStylesRef.value
       }, {
@@ -4136,6 +4185,51 @@ const VToolbarTitle = vue.defineComponent({
 
 const DEFAULT_AUTO_SCROLL_TO_ELEMENT_OFFSET_TOP = -20;
 const DEFAULT_TEXTAREA_ROWS = 3;
+function mergeVuiServiceUISettings(base, overrides) {
+  if (!overrides) {
+    return base;
+  }
+
+  const merged = { ...base
+  };
+  Object.entries(overrides).forEach(([key, value]) => {
+    if (value) {
+      merged[key] = value;
+    }
+  });
+  return merged;
+}
+function mergeVuiServiceIconSettings(base, overrides) {
+  if (!overrides) {
+    return base;
+  }
+
+  const merged = { ...base
+  };
+  Object.entries(overrides).forEach(([key, value]) => {
+    if (value) {
+      merged[key] = value;
+    }
+  });
+  return merged;
+}
+function mergeVuiServiceOptions(base, overrides) {
+  if (!overrides) {
+    return base;
+  }
+
+  const merged = { ...base,
+    uiSettings: mergeVuiServiceUISettings(base.uiSettings, overrides.uiSettings),
+    icons: mergeVuiServiceIconSettings(base.icons, overrides.icons)
+  };
+  const excludes = ['uiSettings', 'icons'];
+  Object.entries(overrides).forEach(([key, value]) => {
+    if (value && !excludes.includes(key)) {
+      merged[key] = value;
+    }
+  });
+  return merged;
+}
 class VuiService {
   get scroller() {
     return vueScroller.getDocumentScroller();
@@ -4272,6 +4366,18 @@ class VuiService {
 
 }
 
+function mergeVuiPluginOptions(base, override) {
+  if (!override) return base;
+  const merged = mergeVuiServiceOptions(base, override);
+
+  if (override.stack) {
+    merged.stack = { ...merged.stack,
+      ...override.stack
+    };
+  }
+
+  return merged;
+}
 class VuiPlugin {
   static installedApps = new Set();
 
@@ -4415,6 +4521,10 @@ exports.defineFormSelectorComponent = defineFormSelectorComponent;
 exports.iconProps = iconProps;
 exports.installVuiPlugin = installVuiPlugin;
 exports.listTileEmits = listTileEmits;
+exports.mergeVuiPluginOptions = mergeVuiPluginOptions;
+exports.mergeVuiServiceIconSettings = mergeVuiServiceIconSettings;
+exports.mergeVuiServiceOptions = mergeVuiServiceOptions;
+exports.mergeVuiServiceUISettings = mergeVuiServiceUISettings;
 exports.paginationProps = paginationProps;
 exports.rawIconProp = rawIconProp;
 exports.renderNavigationItemInput = renderNavigationItemInput;

package/dist/vui.d.ts

@@ -1241,6 +1241,14 @@ export declare const listTileEmits: {
     changeActive: (isActive: boolean) => boolean;
 };
 
+export declare function mergeVuiPluginOptions(base: VuiPluginOptions, override?: RawVuiPluginOptions): VuiPluginOptions;
+
+export declare function mergeVuiServiceIconSettings(base: VuiServiceIconSettings, overrides?: RawVuiServiceIconSettings): VuiServiceIconSettings;
+
+export declare function mergeVuiServiceOptions(base: VuiServiceOptions, overrides?: RawVuiServiceOptions): VuiServiceOptions;
+
+export declare function mergeVuiServiceUISettings(base: VuiServiceUISettings, overrides?: RawVuiServiceUISettings): VuiServiceUISettings;
+
 export declare interface NavigationItemInput extends ExtractPropInput<ReturnType<typeof createNavigationItemProps>> {
     key: string | number;
     label: VNodeChild | (() => VNodeChild);
@@ -1299,8 +1307,21 @@ export declare type RawVButtonIcon = IconName | VButtonIcon;
 
 export declare type RawVButtonSpacer = boolean | VButtonSpacer;
 
+export declare interface RawVuiPluginOptions extends RawVuiServiceOptions {
+    stack?: VuiPluginStackOptions;
+}
+
 export declare type RawVuiPromptOptions = string | VuiPromptOptions;
 
+export declare type RawVuiServiceIconSettings = Partial<VuiServiceIconSettings>;
+
+export declare interface RawVuiServiceOptions extends Omit<Partial<VuiServiceOptions>, 'uiSettings' | 'icons'> {
+    uiSettings?: RawVuiServiceUISettings;
+    icons?: RawVuiServiceIconSettings;
+}
+
+export declare type RawVuiServiceUISettings = Partial<VuiServiceUISettings>;
+
 declare type RawWysiwygEditorTool = WysiwygEditorTool | WysiwygEditorToolFactory<any>;
 
 declare type RecursiveArray<T> = T | RecursiveArray<T>[];
@@ -3864,6 +3885,10 @@ export declare const VDataTable: DefineComponent<{
         type: StringConstructor;
         default: () => string;
     };
+    /**
+     * 検索クエリ名
+     */
+    searchQuery: PropType<string | string[]>;
     /**
      * リミット件数クエリ名
      */
@@ -3910,6 +3935,8 @@ export declare const VDataTable: DefineComponent<{
     selectable: BooleanConstructor;
     fixedHeader: BooleanConstructor;
     maxHeight: (StringConstructor | NumberConstructor)[];
+    noDataMessage: PropType<VNodeChild | (() => VNodeChild)>;
+    noResultsMessage: PropType<VNodeChild | (() => VNodeChild)>;
 }, () => JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     input: (selecteds: string[]) => true;
 }, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{
@@ -3918,6 +3945,7 @@ export declare const VDataTable: DefineComponent<{
     pageQuery?: unknown;
     sortQuery?: unknown;
     orderQuery?: unknown;
+    searchQuery?: unknown;
     limitQuery?: unknown;
     defaultOrder?: unknown;
     ascQueryValue?: unknown;
@@ -3931,6 +3959,8 @@ export declare const VDataTable: DefineComponent<{
     selectable?: unknown;
     fixedHeader?: unknown;
     maxHeight?: unknown;
+    noDataMessage?: unknown;
+    noResultsMessage?: unknown;
 } & {
     itemKey: string;
     pageQuery: string;
@@ -3951,6 +3981,9 @@ export declare const VDataTable: DefineComponent<{
     fixedHeader: boolean;
 } & {
     maxHeight?: string | number | undefined;
+    searchQuery?: string | string[] | undefined;
+    noDataMessage?: VNodeChild | (() => VNodeChild);
+    noResultsMessage?: VNodeChild | (() => VNodeChild);
 }> & {
     onInput?: ((selecteds: string[]) => any) | undefined;
 }, {
@@ -10138,6 +10171,8 @@ export declare interface VuiServiceUISettings {
         color?: ScopeName;
         variant?: ColorVariant;
     };
+    noDataMessage?: VNodeChild | (() => VNodeChild);
+    noResultsMessage?: VNodeChild | (() => VNodeChild);
 }
 
 export declare type VuiVNodeResolver = () => VNodeChild;

package/dist/vui.mjs

@@ -3427,6 +3427,11 @@ const VDataTable = defineComponent({
       default: () => DATA_TABLE_DEFAULTS.orderQuery
     },
 
+    /**
+     * 検索クエリ名
+     */
+    searchQuery: [String, Array],
+
     /**
      * リミット件数クエリ名
      */
@@ -3472,7 +3477,11 @@ const VDataTable = defineComponent({
     },
     selectable: Boolean,
     fixedHeader: Boolean,
-    maxHeight: [Number, String]
+    maxHeight: [Number, String],
+    // eslint-disable-next-line vue/require-prop-types
+    noDataMessage: {},
+    // eslint-disable-next-line vue/require-prop-types
+    noResultsMessage: {}
   },
   emits: {
     input: selecteds => true
@@ -3501,6 +3510,46 @@ const VDataTable = defineComponent({
       ret.push(...headers.filter(h => !h.hidden));
       return ret;
     });
+    const searchQueryValues = computed(() => {
+      let {
+        searchQuery
+      } = props;
+
+      if (!searchQuery) {
+        return [];
+      }
+
+      if (!Array.isArray(searchQuery)) {
+        searchQuery = [searchQuery];
+      }
+
+      const values = [];
+      searchQuery.forEach(query => {
+        const value = vui.location.getQuery(query);
+
+        if (value == null || value === '') {
+          return;
+        }
+
+        if (typeof value === 'object' && !Object.keys(value).length) {
+          return;
+        }
+
+        values.push(value);
+      });
+      return values;
+    });
+    const emptyMessage = computed(() => {
+      let message;
+
+      if (searchQueryValues.value.length) {
+        message = props.noResultsMessage || vui.setting('noResultsMessage') || 'No search results found.'; // 検索結果が見つかりませんでした。
+      } else {
+        message = props.noDataMessage || vui.setting('noDataMessage') || 'No data was available.'; // データはありませんでした。
+      }
+
+      return typeof message === 'function' ? message() : message;
+    });
     const classesRef = computed(() => [{
       'v-data-table--fixed-header': props.fixedHeader
     }]);
@@ -3967,7 +4016,7 @@ const VDataTable = defineComponent({
         "class": "v-data-table__body container-pull"
       }, [isEmpty ? createVNode("div", {
         "class": "v-data-table__empty--message"
-      }, null) : createVNode(VPaper, {
+      }, [emptyMessage.value]) : createVNode(VPaper, {
         "class": "v-data-table__body__inner",
         "style": bodyInnerStylesRef.value
       }, {
@@ -4131,6 +4180,51 @@ const VToolbarTitle = defineComponent({
 
 const DEFAULT_AUTO_SCROLL_TO_ELEMENT_OFFSET_TOP = -20;
 const DEFAULT_TEXTAREA_ROWS = 3;
+function mergeVuiServiceUISettings(base, overrides) {
+  if (!overrides) {
+    return base;
+  }
+
+  const merged = { ...base
+  };
+  Object.entries(overrides).forEach(([key, value]) => {
+    if (value) {
+      merged[key] = value;
+    }
+  });
+  return merged;
+}
+function mergeVuiServiceIconSettings(base, overrides) {
+  if (!overrides) {
+    return base;
+  }
+
+  const merged = { ...base
+  };
+  Object.entries(overrides).forEach(([key, value]) => {
+    if (value) {
+      merged[key] = value;
+    }
+  });
+  return merged;
+}
+function mergeVuiServiceOptions(base, overrides) {
+  if (!overrides) {
+    return base;
+  }
+
+  const merged = { ...base,
+    uiSettings: mergeVuiServiceUISettings(base.uiSettings, overrides.uiSettings),
+    icons: mergeVuiServiceIconSettings(base.icons, overrides.icons)
+  };
+  const excludes = ['uiSettings', 'icons'];
+  Object.entries(overrides).forEach(([key, value]) => {
+    if (value && !excludes.includes(key)) {
+      merged[key] = value;
+    }
+  });
+  return merged;
+}
 class VuiService {
   get scroller() {
     return getDocumentScroller$1();
@@ -4267,6 +4361,18 @@ class VuiService {
 
 }
 
+function mergeVuiPluginOptions(base, override) {
+  if (!override) return base;
+  const merged = mergeVuiServiceOptions(base, override);
+
+  if (override.stack) {
+    merged.stack = { ...merged.stack,
+      ...override.stack
+    };
+  }
+
+  return merged;
+}
 class VuiPlugin {
   static installedApps = new Set();
 
@@ -4324,4 +4430,4 @@ function installVuiPlugin(app, opts) {
   return app.use(VuiPlugin, opts);
 }
 
-export { CONTROL_FIELD_VARIANTS, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VBreadcrumbs, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, WysiwygBulletListTool, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygOrderedListTool, WysiwygTextColorTool, configureDataTableDefaults, createCardProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };
+export { CONTROL_FIELD_VARIANTS, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VBreadcrumbs, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, WysiwygBulletListTool, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygOrderedListTool, WysiwygTextColorTool, configureDataTableDefaults, createCardProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.7.22",
+  "version": "0.7.23",
   "description": "@fastkit/vui",
   "buildOptions": {
     "name": "Vui",
@@ -32,11 +32,11 @@
     "vue": "^3.2.26"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.7.22",
-    "@fastkit/icon-font": "0.7.22",
-    "@fastkit/tiny-logger": "0.7.22",
-    "@fastkit/vite-kit": "0.7.22",
-    "@fastkit/vue-kit": "0.7.22",
+    "@fastkit/color-scheme": "0.7.23",
+    "@fastkit/icon-font": "0.7.23",
+    "@fastkit/tiny-logger": "0.7.23",
+    "@fastkit/vite-kit": "0.7.23",
+    "@fastkit/vue-kit": "0.7.23",
     "@tiptap/extension-link": "^2.0.0-beta.35",
     "@tiptap/extension-underline": "^2.0.0-beta.22",
     "@tiptap/starter-kit": "^2.0.0-beta.168",

package/src/components/VDataTable/VDataTable.tsx

@@ -126,6 +126,11 @@ export const VDataTable = defineComponent({
       default: () => DATA_TABLE_DEFAULTS.orderQuery,
     },
 
+    /**
+     * 検索クエリ名
+     */
+    searchQuery: [String, Array] as PropType<string | string[]>,
+
     /**
      * リミット件数クエリ名
      */
@@ -172,6 +177,10 @@ export const VDataTable = defineComponent({
     selectable: Boolean,
     fixedHeader: Boolean,
     maxHeight: [Number, String],
+    // eslint-disable-next-line vue/require-prop-types
+    noDataMessage: {} as PropType<VNodeChild | (() => VNodeChild)>,
+    // eslint-disable-next-line vue/require-prop-types
+    noResultsMessage: {} as PropType<VNodeChild | (() => VNodeChild)>,
   },
   emits: {
     input: (selecteds: string[]) => true,
@@ -196,6 +205,45 @@ export const VDataTable = defineComponent({
       ret.push(...headers.filter((h) => !h.hidden));
       return ret;
     });
+
+    const searchQueryValues = computed<string[]>(() => {
+      let { searchQuery } = props;
+      if (!searchQuery) {
+        return [];
+      }
+      if (!Array.isArray(searchQuery)) {
+        searchQuery = [searchQuery];
+      }
+      const values: string[] = [];
+      searchQuery.forEach((query) => {
+        const value = vui.location.getQuery(query);
+        if (value == null || value === '') {
+          return;
+        }
+        if (typeof value === 'object' && !Object.keys(value).length) {
+          return;
+        }
+        values.push(value);
+      });
+      return values;
+    });
+
+    const emptyMessage = computed(() => {
+      let message: VNodeChild | (() => VNodeChild);
+      if (searchQueryValues.value.length) {
+        message =
+          props.noResultsMessage ||
+          vui.setting('noResultsMessage') ||
+          'No search results found.'; // 検索結果が見つかりませんでした。
+      } else {
+        message =
+          props.noDataMessage ||
+          vui.setting('noDataMessage') ||
+          'No data was available.'; // データはありませんでした。
+      }
+      return typeof message === 'function' ? message() : message;
+    });
+
     const classesRef = computed(() => [
       {
         'v-data-table--fixed-header': props.fixedHeader,
@@ -724,7 +772,7 @@ export const VDataTable = defineComponent({
           <div class="v-data-table__body container-pull">
             {isEmpty ? (
               <div class="v-data-table__empty--message">
-                {/* {this.computedEmptyMessage} */}
+                {emptyMessage.value}
               </div>
             ) : (
               <VPaper

package/src/plugin.tsx

@@ -1,5 +1,11 @@
 import { App } from 'vue';
-import { VuiService, VuiServiceOptions, VuiInjectionKey } from './service';
+import {
+  VuiService,
+  VuiServiceOptions,
+  RawVuiServiceOptions,
+  mergeVuiServiceOptions,
+  VuiInjectionKey,
+} from './service';
 import {
   installVueStackPlugin,
   VueStackServiceOptions,
@@ -14,6 +20,25 @@ export interface VuiPluginOptions extends VuiServiceOptions {
   stack?: VuiPluginStackOptions;
 }
 
+export interface RawVuiPluginOptions extends RawVuiServiceOptions {
+  stack?: VuiPluginStackOptions;
+}
+
+export function mergeVuiPluginOptions(
+  base: VuiPluginOptions,
+  override?: RawVuiPluginOptions,
+): VuiPluginOptions {
+  if (!override) return base;
+  const merged: VuiPluginOptions = mergeVuiServiceOptions(base, override);
+  if (override.stack) {
+    merged.stack = {
+      ...merged.stack,
+      ...override.stack,
+    };
+  }
+  return merged;
+}
+
 declare module '@vue/runtime-core' {
   export interface ComponentCustomProperties {
     $vui: VuiService;

package/src/service.tsx

@@ -50,6 +50,28 @@ export interface VuiServiceUISettings {
     color?: ScopeName;
     variant?: ColorVariant;
   };
+  noDataMessage?: VNodeChild | (() => VNodeChild);
+  noResultsMessage?: VNodeChild | (() => VNodeChild);
+}
+
+export type RawVuiServiceUISettings = Partial<VuiServiceUISettings>;
+
+export function mergeVuiServiceUISettings(
+  base: VuiServiceUISettings,
+  overrides?: RawVuiServiceUISettings,
+): VuiServiceUISettings {
+  if (!overrides) {
+    return base;
+  }
+  const merged: VuiServiceUISettings = {
+    ...base,
+  };
+  Object.entries(overrides).forEach(([key, value]) => {
+    if (value) {
+      (merged as any)[key] = value;
+    }
+  });
+  return merged;
 }
 
 export interface VuiServiceIconSettings {
@@ -72,6 +94,26 @@ export interface VuiServiceIconSettings {
   clear: IconName;
 }
 
+export type RawVuiServiceIconSettings = Partial<VuiServiceIconSettings>;
+
+export function mergeVuiServiceIconSettings(
+  base: VuiServiceIconSettings,
+  overrides?: RawVuiServiceIconSettings,
+): VuiServiceIconSettings {
+  if (!overrides) {
+    return base;
+  }
+  const merged: VuiServiceIconSettings = {
+    ...base,
+  };
+  Object.entries(overrides).forEach(([key, value]) => {
+    if (value) {
+      (merged as any)[key] = value;
+    }
+  });
+  return merged;
+}
+
 export type VuiVNodeResolver = () => VNodeChild;
 
 export interface VuiServiceOptions {
@@ -86,6 +128,36 @@ export interface VuiServiceOptions {
   requiredChip?: VuiVNodeResolver;
 }
 
+export interface RawVuiServiceOptions
+  extends Omit<Partial<VuiServiceOptions>, 'uiSettings' | 'icons'> {
+  uiSettings?: RawVuiServiceUISettings;
+  icons?: RawVuiServiceIconSettings;
+}
+
+export function mergeVuiServiceOptions(
+  base: VuiServiceOptions,
+  overrides?: RawVuiServiceOptions,
+): VuiServiceOptions {
+  if (!overrides) {
+    return base;
+  }
+  const merged: VuiServiceOptions = {
+    ...base,
+    uiSettings: mergeVuiServiceUISettings(
+      base.uiSettings,
+      overrides.uiSettings,
+    ),
+    icons: mergeVuiServiceIconSettings(base.icons, overrides.icons),
+  };
+  const excludes = ['uiSettings', 'icons'];
+  Object.entries(overrides).forEach(([key, value]) => {
+    if (value && !excludes.includes(key)) {
+      (merged as any)[key] = value;
+    }
+  });
+  return merged;
+}
+
 export class VuiService {
   readonly options: VuiServiceOptions;
 

package/src/tool/vite-plugin.ts

@@ -30,20 +30,21 @@ import './setup.scss';
 import type { App } from 'vue';
 import type { Router } from 'vue-router';
 import { VPageLink } from '@fastkit/vue-page';
-import { installVuiPlugin as _installVuiPlugin, VuiPluginOptions } from '@fastkit/vui';
+import { installVuiPlugin as _installVuiPlugin, RawVuiPluginOptions, mergeVuiPluginOptions } from '@fastkit/vui';
 import { colorScheme } from '<%~ it.colorScheme %>';
 import '<%~ it.mediaMatch %>';
 import './icon-font';
 import '${STYLE_AFTER_EFFECTS_PATH}';
 
-export function installVui(settings: { app: App, router: Router }) {
-  _installVuiPlugin(settings.app, {
+export function installVui(settings: { app: App, router: Router }, options?: RawVuiPluginOptions) {
+  const merged = mergeVuiPluginOptions({
     RouterLink: VPageLink,
     colorScheme,
     uiSettings: <%~ it.uiSettings %>,
     icons: <%~ it.icons %>,
     ...settings,
-  });
+  }, options);
+  _installVuiPlugin(settings.app, merged);
 }
 
 export default installVui;