@fastkit/vui 0.7.54 → 0.7.57

package/dist/vui.mjs

@@ -1,13 +1,13 @@
-import { createPropsOptions, createFormControlSettings, defineSlotsProps, useFormControl, VTooltip, renderSlotOrEmpty, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, resolveVNodeChildOrSlots, useParentFormNode, VMenu, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm, getDocumentScroller, useVScrollerRef, VScroller, useInjectTheme, VStackRoot, resolveVStackDynamicInput, VueColorSchemePlugin, installVueStackPlugin } from '@fastkit/vue-kit';
+import { createPropsOptions, createFormControlSettings, defineSlotsProps, useFormControl, VTooltip, renderSlotOrEmpty, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, resolveVNodeChildOrSlots, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, useParentFormNode, VMenu, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm, getDocumentScroller, useVScrollerRef, VScroller, useInjectTheme, VStackRoot, resolveVStackDynamicInput, VueColorSchemePlugin, installVueStackPlugin } from '@fastkit/vue-kit';
 export * from '@fastkit/vue-kit';
 export { VDialog, VMenu, VSnackbar, VTooltip } from '@fastkit/vue-kit';
 import { inject, computed, provide, createVNode, mergeProps, defineComponent, isVNode, ref, watch, onMounted, onBeforeUnmount, cloneVNode, withDirectives, createTextVNode, Fragment, vShow, onBeforeUpdate, vModelSelect, Transition, reactive } from 'vue';
 import { useRouter, RouterLink, useLink, useRoute } from 'vue-router';
 import { createPropsOptions as createPropsOptions$1, renderSlotOrEmpty as renderSlotOrEmpty$1, defineSlotsProps as defineSlotsProps$1, htmlAttributesPropOptions, navigationableInheritProps, useNavigationable, VLink, isFragment, rawNumberPropType, resolveNumberish, resizeDirectiveArgument, VExpandTransition, LocationService, setDefaultRouterLink } from '@fastkit/vue-utils';
 import { getDocumentScroller as getDocumentScroller$1 } from '@fastkit/vue-scroller';
-import { useScopeColorClass, colorSchemeProps, useColorClasses, toScopeColorClass } from '@fastkit/vue-color-scheme';
 import { VProgressCircular } from '@fastkit/vue-loading';
 export * from '@fastkit/vue-loading';
+import { useScopeColorClass, colorSchemeProps, useColorClasses, toScopeColorClass } from '@fastkit/vue-color-scheme';
 import { loadImage, IN_WINDOW, isPromise } from '@fastkit/helpers';
 export { ICON_NAMES } from '@fastkit/icon-font';
 import { VAppContainer, VAppLayoutControl } from '@fastkit/vue-app-layout';
@@ -24,7 +24,12 @@ import { validateIf, url } from '@fastkit/rules';
 import { OrderedList } from '@tiptap/extension-ordered-list';
 
 const CONTROL_SIZES = ['sm', 'md', 'lg'];
-const CONTROL_FIELD_VARIANTS = ['outlined', 'filled', 'flat'];
+const CONTROL_FIELD_VARIANTS = ['outlined', 'filled', 'flat'];
+const CONTROL_LOADING_SPINNER_SIZES = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+};
 
 const VuiInjectionKey = Symbol();
 const VuiControlInjectionKey = Symbol();
@@ -79,6 +84,7 @@ function createControlProps() {
                 return CONTROL_SIZES.includes(value);
             },
         },
+        loading: Boolean,
     });
 }
 function useControl(props, opts = {}) {
@@ -230,7 +236,8 @@ function createRequiredChipRenderer(required, props, vui = useVui()) {
 const VFormControl = defineComponent({
   name: 'VFormControl',
   props: { ...props$8,
-    ...defineSlotsProps()
+    ...defineSlotsProps(),
+    error: Boolean
   },
   emits: emits$8,
 
@@ -271,7 +278,7 @@ const VFormControl = defineComponent({
       'v-form-control--untouched': control.untouched,
       'v-form-control--invalid': control.invalid,
       'v-form-control--valid': control.valid
-    }, colorProvider.className(control.invalid && !control.readonly ? 'error' : 'primary')]);
+    }, colorProvider.className(props.error ? 'error' : control.invalid && !control.readonly ? 'error' : 'primary')]);
     const getRequiredChip = createRequiredChipRenderer(() => control.required, props, vui);
     return () => {
       const label = control.renderLabel();
@@ -334,6 +341,10 @@ function defineFormSelectorComponent(opts) {
         type: Boolean,
         default: true
       },
+      // eslint-disable-next-line vue/require-prop-types
+      loadingMessage: {},
+      // eslint-disable-next-line vue/require-prop-types
+      failedToLoadItemsMessage: {},
       ...defineSlotsProps()
     },
     emits,
@@ -344,8 +355,19 @@ function defineFormSelectorComponent(opts) {
         defaultMultiple
       });
       const control = useControl(props);
+      const vui = useVui();
+      const loadingMessageRef = computed(() => {
+        const slot = resolveVNodeChildOrSlots(props.loadingMessage, vui.setting('loadingMessage'), 'Loading...');
+        return slot && slot(vui);
+      });
+      const failedToLoadItemsMessageRef = computed(() => {
+        const slot = resolveVNodeChildOrSlots(props.failedToLoadItemsMessage, vui.setting('failedToLoadDataMessage'), 'Failed to load data.');
+        return slot && slot(vui);
+      });
       return { ...selectorControl.expose(),
-        ...control
+        ...control,
+        loadingMessageRef,
+        failedToLoadItemsMessageRef
       };
     },
 
@@ -363,11 +385,22 @@ function defineFormSelectorComponent(opts) {
         "label": this.label,
         "hint": this.hint,
         "hinttip": this.hinttip,
-        "requiredChip": this.requiredChip
+        "requiredChip": this.requiredChip,
+        "error": selectorControl.itemsLoadFailed
       }, { ...this.$slots,
         default: () => createVNode("div", {
           "class": "v-form-selector__body"
-        }, [this.propItems.map(attrs => {
+        }, [selectorControl.itemsLoadFailed && createVNode("div", {
+          "key": "failed",
+          "class": "v-form-selector__placeholder v-form-selector__placeholder--error"
+        }, [this.failedToLoadItemsMessageRef]), selectorControl.itemsLoading && createVNode("div", {
+          "key": "loading",
+          "class": "v-form-selector__placeholder"
+        }, [createVNode(VProgressCircular, {
+          "indeterminate": true,
+          "class": "mr-1",
+          "size": CONTROL_LOADING_SPINNER_SIZES[this.size || 'md']
+        }, null), this.loadingMessageRef]), this.propItems.map(attrs => {
           const selected = selectorControl.isSelected(attrs.value);
           return itemRenderer({
             selected,
@@ -1107,7 +1140,6 @@ const vueButtonProps = createPropsOptions$1({ ...htmlAttributesPropOptions,
   ...colorSchemeProps(),
   ...navigationableInheritProps,
   spacer: [Boolean, String],
-  loading: Boolean,
   rounded: Boolean,
   icon: [String, Function],
   startIcon: [String, Function],
@@ -2333,7 +2365,8 @@ const VControlField = defineComponent({
   props: { ...createControlFieldProps(),
     focused: Boolean,
     autoHeight: Boolean,
-    ...defineSlotsProps()
+    ...defineSlotsProps(),
+    error: Boolean
   },
   // _slots: inputBoxSlots,
   emits: {
@@ -2357,11 +2390,11 @@ const VControlField = defineComponent({
     const classes = computed(() => {
       const classes = ['v-control-field', `v-control-field--${inputBox.variant.value}`, {
         'v-control-field--disabled': disabled.value,
-        'v-control-field--invalid': invalid.value,
+        'v-control-field--invalid': invalid.value || props.error,
         'v-control-field--readonly': readonly.value,
         'v-control-field--focused': props.focused,
         'v-control-field--auto-height': autoHeight.value
-      }, control.classes.value, colorProvider.className(invalid.value && !readonly.value ? 'error' : 'primary')];
+      }, control.classes.value, colorProvider.className(props.error ? 'error' : invalid.value && !readonly.value ? 'error' : 'primary')];
       return classes;
     });
     const resolvedSlots = computed(() => {
@@ -2374,11 +2407,21 @@ const VControlField = defineComponent({
     });
 
     const renderAdornment = position => {
-      const result = renderSlotOrEmpty(resolvedSlots.value, position);
-      if (!result) return;
+      let child;
+
+      if (position === 'end' && props.loading) {
+        child = createVNode(VProgressCircular, {
+          "indeterminate": true,
+          "size": CONTROL_LOADING_SPINNER_SIZES[props.size || 'md']
+        }, null);
+      } else {
+        child = renderSlotOrEmpty(resolvedSlots.value, position);
+      }
+
+      if (!child) return;
       return createVNode("div", {
         "class": ['v-control-field__adornment', `v-control-field__adornment--${position}`]
-      }, [result]);
+      }, [child]);
     };
 
     const handleClick = ev => {
@@ -2421,7 +2464,9 @@ const VSelect = defineComponent({
     ...createControlProps(),
     ...defineSlotsProps(),
     ...createPropsOptions({
-      placeholder: String
+      placeholder: String,
+      loadingMessage: {},
+      failedToLoadItemsMessage: {}
     })
   },
   emits: emits$3,
@@ -2448,6 +2493,14 @@ const VSelect = defineComponent({
     const vui = useVui();
     const iconName = vui.icon('menuDown');
     const fieldRef = ref(null);
+    const loadingMessageRef = computed(() => {
+      const slot = resolveVNodeChildOrSlots(props.loadingMessage, vui.setting('loadingMessage'), 'Loading...');
+      return slot && slot(vui);
+    });
+    const failedToLoadItemsMessageRef = computed(() => {
+      const slot = resolveVNodeChildOrSlots(props.failedToLoadItemsMessage, vui.setting('failedToLoadDataMessage'), 'Failed to load data.');
+      return slot && slot(vui);
+    });
 
     const focus = opts => {
       fieldRef.value && fieldRef.value.focus(opts);
@@ -2456,7 +2509,15 @@ const VSelect = defineComponent({
     const renderSelections = selectedItems => {
       const children = [];
 
-      if (selectedItems.length) {
+      if (inputControl.itemsLoadFailed) {
+        children.push(createVNode("span", {
+          "class": "v-select__placeholder"
+        }, [failedToLoadItemsMessageRef.value]));
+      } else if (inputControl.itemsLoading) {
+        children.push(createVNode("span", {
+          "class": "v-select__placeholder"
+        }, [loadingMessageRef.value]));
+      } else if (selectedItems.length) {
         selectedItems.forEach((item, index) => {
           if (index > 0) {
             children.push(vui.selectionSeparator());
@@ -2531,8 +2592,11 @@ const VSelect = defineComponent({
         }) => [createVNode(VControlField, {
           "class": "v-select__input",
           "ref": this.fieldRef(),
+          "loading": selectorControl.itemsLoading,
+          "error": selectorControl.itemsLoadFailed,
           "startAdornment": this.startAdornment,
           "endAdornment": this.endAdornment,
+          "size": this.size,
           "focused": this.menuOpened,
           "onClick": ev => {
             if (this.canOperation && !control.isActive) {
@@ -2572,19 +2636,37 @@ const VSelect = defineComponent({
           }, [createVNode("div", {
             "class": "v-select__selections__inner"
           }, [this.renderSelections(selectedItems)])])],
-          endAdornment: () => this.clearable && this.nodeControl.value != null && createVNode(VButton, {
-            "key": "clear",
-            "icon": this.$vui.icon('clear'),
-            "rounded": true,
-            "onClick": ev => {
-              ev.stopPropagation();
-              this.nodeControl.clear();
+          endAdornment: () => {
+            if (selectorControl.itemsLoadFailed) {
+              return createVNode(VButton, {
+                "key": "reload",
+                "icon": this.$vui.icon('reload'),
+                "rounded": true,
+                "onClick": ev => {
+                  ev.stopPropagation();
+                  selectorControl.loadItems();
+                }
+              }, null);
+            }
+
+            if (this.clearable && this.nodeControl.value != null) {
+              return createVNode(VButton, {
+                "key": "clear",
+                "icon": this.$vui.icon('clear'),
+                "rounded": true,
+                "onClick": ev => {
+                  ev.stopPropagation();
+                  this.nodeControl.clear();
+                }
+              }, null);
             }
-          }, null) || createVNode(VIcon, {
-            "key": "icon",
-            "name": this.iconName,
-            "rotate": this.menuOpened ? 180 : 0
-          }, null)
+
+            return createVNode(VIcon, {
+              "key": "icon",
+              "name": this.iconName,
+              "rotate": this.menuOpened ? 180 : 0
+            }, null);
+          }
         })]
       })
     });
@@ -2661,7 +2743,8 @@ const VTextField = defineComponent({
       default: () => createVNode(VControlField, {
         "class": "v-text-field__input",
         "startAdornment": this.startAdornment,
-        "endAdornment": this.endAdornment
+        "endAdornment": this.endAdornment,
+        "size": this.size
       }, { ...this.$slots,
         default: () => this.textInputControl.createInputElement({
           class: 'v-text-field__input__element'
@@ -2765,6 +2848,7 @@ const VTextarea = defineComponent({
     }, { ...this.$slots,
       default: () => createVNode(VControlField, {
         "class": "v-textarea__input",
+        "size": this.size,
         "autoHeight": true,
         "startAdornment": this.startAdornment,
         "endAdornment": this.endAdornment
@@ -2860,8 +2944,8 @@ const VWysiwygEditor = defineComponent({
     watch(() => inputControl.canOperation, updateEditable);
     watch(() => props.modelValue, modelValue => {
       const $editor = editor.value;
-      if (!$editor) return;
-      $editor.commands.setContent(modelValue == null ? '' : modelValue);
+      if (!$editor || $editor.getHTML() === modelValue) return;
+      $editor.commands.setContent(modelValue == null ? '' : modelValue, false);
       textRef.value = $editor.getText();
     });
     const editor = useEditor({
@@ -3004,7 +3088,8 @@ const VWysiwygEditor = defineComponent({
           "class": "v-wysiwyg-editor__input",
           "autoHeight": true,
           "startAdornment": this.startAdornment,
-          "endAdornment": this.endAdornment
+          "endAdornment": this.endAdornment,
+          "size": this.size
         }, { ...this.$slots,
           default: () => {
             let _slot2;
@@ -4051,7 +4136,7 @@ const VDataTable = defineComponent({
         message = props.noDataMessage || vui.setting('noDataMessage') || 'No data was available.'; // データはありませんでした。
       }
 
-      return typeof message === 'function' ? message() : message;
+      return typeof message === 'function' ? message(vui) : message;
     });
     const classesRef = computed(() => [{
       'v-data-table--fixed-header': props.fixedHeader
@@ -4956,4 +5041,4 @@ function installVuiPlugin(app, opts) {
   return app.use(VuiPlugin, opts);
 }
 
-export { AVATAR_SIZES, CHIP_SIZES, CONTROL_FIELD_VARIANTS, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VAvatar, VBreadcrumbs, VBusyImage, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VChip, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VNumberField, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSkeltonLoaderBone, 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, createAvatarProps, createCardProps, createChipProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, createVFormProps, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, resolveRawWysiwygEditorTools, splitAttrs, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };
+export { AVATAR_SIZES, CHIP_SIZES, CONTROL_FIELD_VARIANTS, CONTROL_LOADING_SPINNER_SIZES, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VAvatar, VBreadcrumbs, VBusyImage, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VChip, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VNumberField, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSkeltonLoaderBone, 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, createAvatarProps, createCardProps, createChipProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, createVFormProps, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, resolveRawWysiwygEditorTools, splitAttrs, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };

package/package.json

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

package/src/components/VButton/VButton.tsx

@@ -50,7 +50,6 @@ export const vueButtonProps = createPropsOptions({
   ...colorSchemeProps(),
   ...navigationableInheritProps,
   spacer: [Boolean, String] as PropType<RawVButtonSpacer>,
-  loading: Boolean,
   rounded: Boolean,
   icon: [String, Function] as PropType<RawVButtonIcon>,
   startIcon: [String, Function] as PropType<RawVButtonIcon>,

package/src/components/VControlField/VControlField.tsx

@@ -1,5 +1,5 @@
 import './VControlField.scss';
-import { computed, PropType, ref, defineComponent } from 'vue';
+import { computed, PropType, ref, defineComponent, VNodeChild } from 'vue';
 import {
   useParentFormNode,
   VNodeChildOrSlot,
@@ -16,6 +16,8 @@ import {
   useControlField,
 } from '../../composables';
 import { useVuiColorProvider } from '../../injections';
+import { VProgressCircular } from '../loading';
+import { CONTROL_LOADING_SPINNER_SIZES } from '../../schemes';
 
 const ADORNMENT_POSITIONS = ['start', 'end'] as const;
 
@@ -56,6 +58,7 @@ export const VControlField = defineComponent({
     focused: Boolean,
     autoHeight: Boolean,
     ...defineSlotsProps<InputBoxSlots>(),
+    error: Boolean,
   },
   // _slots: inputBoxSlots,
   emits: {
@@ -83,14 +86,18 @@ export const VControlField = defineComponent({
         `v-control-field--${inputBox.variant.value}`,
         {
           'v-control-field--disabled': disabled.value,
-          'v-control-field--invalid': invalid.value,
+          'v-control-field--invalid': invalid.value || props.error,
           'v-control-field--readonly': readonly.value,
           'v-control-field--focused': props.focused,
           'v-control-field--auto-height': autoHeight.value,
         },
         control.classes.value,
         colorProvider.className(
-          invalid.value && !readonly.value ? 'error' : 'primary',
+          props.error
+            ? 'error'
+            : invalid.value && !readonly.value
+            ? 'error'
+            : 'primary',
         ),
       ];
       return classes;
@@ -106,15 +113,25 @@ export const VControlField = defineComponent({
     });
 
     const renderAdornment = (position: AdornmentPosition) => {
-      const result = renderSlotOrEmpty(resolvedSlots.value, position);
-      if (!result) return;
+      let child: VNodeChild | undefined;
+      if (position === 'end' && props.loading) {
+        child = (
+          <VProgressCircular
+            indeterminate
+            size={CONTROL_LOADING_SPINNER_SIZES[props.size || 'md']}
+          />
+        );
+      } else {
+        child = renderSlotOrEmpty(resolvedSlots.value, position);
+      }
+      if (!child) return;
       return (
         <div
           class={[
             'v-control-field__adornment',
             `v-control-field__adornment--${position}`,
           ]}>
-          {result}
+          {child}
         </div>
       );
     };

package/src/components/VDataTable/VDataTable.tsx

@@ -20,7 +20,7 @@ import { VPagination } from '../VPagination';
 import { VCheckbox } from '../VCheckbox';
 import { VIcon, resolveRawIconProp } from '../VIcon';
 import { VProgressCircular } from '../loading';
-import { resizeDirectiveArgument } from '@fastkit/vue-utils';
+import { resizeDirectiveArgument, VNodeChildOrSlot } from '@fastkit/vue-utils';
 import { VAppLayoutControl } from '@fastkit/vue-app-layout';
 import { VPaper } from '../VPaper';
 
@@ -182,9 +182,9 @@ export const VDataTable = defineComponent({
     fixedHeader: Boolean,
     maxHeight: [Number, String],
     // eslint-disable-next-line vue/require-prop-types
-    noDataMessage: {} as PropType<VNodeChild | (() => VNodeChild)>,
+    noDataMessage: {} as PropType<VNodeChildOrSlot>,
     // eslint-disable-next-line vue/require-prop-types
-    noResultsMessage: {} as PropType<VNodeChild | (() => VNodeChild)>,
+    noResultsMessage: {} as PropType<VNodeChildOrSlot>,
   },
   emits: {
     input: (selecteds: string[]) => true,
@@ -233,7 +233,7 @@ export const VDataTable = defineComponent({
     });
 
     const emptyMessage = computed(() => {
-      let message: VNodeChild | (() => VNodeChild);
+      let message: VNodeChildOrSlot;
       if (searchQueryValues.value.length) {
         message =
           props.noResultsMessage ||
@@ -245,7 +245,7 @@ export const VDataTable = defineComponent({
           vui.setting('noDataMessage') ||
           'No data was available.'; // データはありませんでした。
       }
-      return typeof message === 'function' ? message() : message;
+      return typeof message === 'function' ? message(vui) : message;
     });
 
     const classesRef = computed(() => [

package/src/components/VFormControl/VFormControl.tsx

@@ -51,6 +51,7 @@ export const VFormControl = defineComponent({
         default: FormControl;
       }
     >(),
+    error: Boolean,
   },
   emits,
   setup(props, ctx) {
@@ -94,7 +95,11 @@ export const VFormControl = defineComponent({
         'v-form-control--valid': control.valid,
       },
       colorProvider.className(
-        control.invalid && !control.readonly ? 'error' : 'primary',
+        props.error
+          ? 'error'
+          : control.invalid && !control.readonly
+          ? 'error'
+          : 'primary',
       ),
     ]);
 

package/src/components/VSelect/VSelect.tsx

@@ -1,5 +1,5 @@
 import './VSelect.scss';
-import { ref, VNodeChild, defineComponent } from 'vue';
+import { ref, VNodeChild, defineComponent, PropType, computed } from 'vue';
 import {
   createFormSelectorSettings,
   useFormSelectorControl,
@@ -8,6 +8,8 @@ import {
   FormControlSlots,
   FormSelectorItemControl,
   createPropsOptions,
+  VNodeChildOrSlot,
+  resolveVNodeChildOrSlots,
 } from '@fastkit/vue-kit';
 import { VFormControl } from '../VFormControl';
 import {
@@ -40,6 +42,8 @@ export const VSelect = defineComponent({
     ...defineSlotsProps<FormControlSlots & InputBoxSlots>(),
     ...createPropsOptions({
       placeholder: String,
+      loadingMessage: {} as PropType<VNodeChildOrSlot>,
+      failedToLoadItemsMessage: {} as PropType<VNodeChildOrSlot>,
     }),
   },
   emits,
@@ -62,6 +66,22 @@ export const VSelect = defineComponent({
     const vui = useVui();
     const iconName = vui.icon('menuDown');
     const fieldRef = ref<HTMLElement | null>(null);
+    const loadingMessageRef = computed(() => {
+      const slot = resolveVNodeChildOrSlots(
+        props.loadingMessage,
+        vui.setting('loadingMessage'),
+        'Loading...',
+      );
+      return slot && slot(vui);
+    });
+    const failedToLoadItemsMessageRef = computed(() => {
+      const slot = resolveVNodeChildOrSlots(
+        props.failedToLoadItemsMessage,
+        vui.setting('failedToLoadDataMessage'),
+        'Failed to load data.',
+      );
+      return slot && slot(vui);
+    });
 
     const focus = (opts?: FocusOptions): void => {
       fieldRef.value && fieldRef.value.focus(opts);
@@ -69,7 +89,17 @@ export const VSelect = defineComponent({
 
     const renderSelections = (selectedItems: FormSelectorItemControl[]) => {
       const children: VNodeChild[] = [];
-      if (selectedItems.length) {
+      if (inputControl.itemsLoadFailed) {
+        children.push(
+          <span class="v-select__placeholder">
+            {failedToLoadItemsMessageRef.value}
+          </span>,
+        );
+      } else if (inputControl.itemsLoading) {
+        children.push(
+          <span class="v-select__placeholder">{loadingMessageRef.value}</span>,
+        );
+      } else if (selectedItems.length) {
         selectedItems.forEach((item, index) => {
           if (index > 0) {
             children.push(vui.selectionSeparator());
@@ -136,9 +166,12 @@ export const VSelect = defineComponent({
                   <VControlField
                     class="v-select__input"
                     ref={this.fieldRef()}
+                    loading={selectorControl.itemsLoading}
+                    error={selectorControl.itemsLoadFailed}
                     startAdornment={this.startAdornment}
                     endAdornment={this.endAdornment}
                     // tabindex={this.computedTabindex}
+                    size={this.size}
                     focused={this.menuOpened}
                     onClick={(ev) => {
                       if (this.canOperation && !control.isActive) {
@@ -185,24 +218,43 @@ export const VSelect = defineComponent({
                           </div>
                         </div>,
                       ],
-                      endAdornment: () =>
-                        (this.clearable && this.nodeControl.value != null && (
-                          <VButton
-                            key="clear"
-                            icon={this.$vui.icon('clear')}
-                            rounded
-                            onClick={(ev) => {
-                              ev.stopPropagation();
-                              this.nodeControl.clear();
-                            }}
-                          />
-                        )) || (
+                      endAdornment: () => {
+                        if (selectorControl.itemsLoadFailed) {
+                          return (
+                            <VButton
+                              key="reload"
+                              icon={this.$vui.icon('reload')}
+                              rounded
+                              onClick={(ev) => {
+                                ev.stopPropagation();
+                                selectorControl.loadItems();
+                              }}
+                            />
+                          );
+                        }
+
+                        if (this.clearable && this.nodeControl.value != null) {
+                          return (
+                            <VButton
+                              key="clear"
+                              icon={this.$vui.icon('clear')}
+                              rounded
+                              onClick={(ev) => {
+                                ev.stopPropagation();
+                                this.nodeControl.clear();
+                              }}
+                            />
+                          );
+                        }
+
+                        return (
                           <VIcon
                             key="icon"
                             name={this.iconName}
                             rotate={this.menuOpened ? 180 : 0}
                           />
-                        ),
+                        );
+                      },
                     }}
                   />,
                 ],

package/src/components/VTextField/VTextField.tsx

@@ -82,6 +82,7 @@ export const VTextField = defineComponent({
               class="v-text-field__input"
               startAdornment={this.startAdornment}
               endAdornment={this.endAdornment}
+              size={this.size}
               v-slots={{
                 ...this.$slots,
                 default: () =>

package/src/components/VTextarea/VTextarea.tsx

@@ -68,6 +68,7 @@ export const VTextarea = defineComponent({
           default: () => (
             <VControlField
               class="v-textarea__input"
+              size={this.size}
               autoHeight
               startAdornment={this.startAdornment}
               endAdornment={this.endAdornment}