@fastkit/vui 0.7.19 → 0.7.23

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/components/VSelect/VSelect.tsx

@@ -25,6 +25,7 @@ import { VUI_SELECT_SYMBOL, useVui } from '../../injections';
 import { VIcon } from '../VIcon';
 import { VMenu } from '../kits';
 import { VOption } from '../VOption';
+import { VButton } from '..';
 
 const { props, emits } = createFormSelectorSettings();
 
@@ -184,11 +185,24 @@ export const VSelect = defineComponent({
                           </div>
                         </div>,
                       ],
-                      endAdornment: () => (
-                        <VIcon
-                          name={this.iconName}
-                          rotate={this.menuOpened ? 180 : 0}></VIcon>
-                      ),
+                      endAdornment: () =>
+                        (this.clearable && this.nodeControl.value != null && (
+                          <VButton
+                            key="clear"
+                            icon={this.$vui.icon('clear')}
+                            rounded
+                            onClick={(ev) => {
+                              ev.stopPropagation();
+                              this.nodeControl.clear();
+                            }}
+                          />
+                        )) || (
+                          <VIcon
+                            key="icon"
+                            name={this.iconName}
+                            rotate={this.menuOpened ? 180 : 0}
+                          />
+                        ),
                     }}
                   />,
                 ],

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 {
@@ -69,6 +91,27 @@ export interface VuiServiceIconSettings {
   editorUndo: IconName;
   editorRedo: IconName;
   hinttip: IconName;
+  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;
@@ -85,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;
@@ -171,6 +172,7 @@ export function viteVuiPlugin(
       editorUndo: 'mdi-undo-variant' as any,
       editorRedo: 'mdi-redo-variant' as any,
       hinttip: 'mdi-help-circle-outline' as any,
+      clear: 'mdi-close' as any,
       // navigationExpand: (gen, active) => {
       //   return gen({
       //     name: 'mdi-menu-down' as any,