@fastkit/vui 0.7.50 → 0.7.55

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);
             }
-          }, null) || createVNode(VIcon, {
-            "key": "icon",
-            "name": this.iconName,
-            "rotate": this.menuOpened ? 180 : 0
-          }, 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);
+            }
+
+            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'
@@ -2679,6 +2762,48 @@ const VTextField = defineComponent({
 
 });
 
+const VNumberField = defineComponent({
+  name: 'VNumberField',
+  props: { ...undefined,
+    modelValue: {
+      type: Number,
+      default: null
+    }
+  },
+  emits: { ...undefined,
+    'update:modelValue': value => true,
+    change: value => true
+  },
+
+  setup(props, ctx) {
+    const toString = value => {
+      if (value == null) return '';
+      return String(value);
+    };
+
+    const toNumber = value => {
+      if (value == null) return null;
+      if (typeof value === 'number') return value;
+      if (value.trim() === '') return null;
+      return Number(value);
+    };
+
+    return () => {
+      return createVNode(VTextField, mergeProps(ctx.attrs, {
+        "type": "number",
+        "modelValue": toString(props.modelValue),
+        "onUpdate:modelValue": value => {
+          ctx.emit('update:modelValue', toNumber(value));
+        },
+        "onChange": value => {
+          ctx.emit('change', toNumber(value));
+        }
+      }), ctx.slots);
+    };
+  }
+
+});
+
 const {
   props: props$1,
   emits: emits$1
@@ -2723,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
@@ -2838,7 +2964,6 @@ const VWysiwygEditor = defineComponent({
       onUpdate: ev => {
         inputControl.value = ev.editor.getHTML();
         textRef.value = ev.editor.getText();
-        console.log(textRef.value);
       },
       autofocus: props.autofocus,
       content: props.modelValue,
@@ -2963,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;
@@ -4010,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
@@ -4915,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, 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.50",
+  "version": "0.7.55",
   "description": "@fastkit/vui",
   "buildOptions": {
     "name": "Vui",
@@ -28,15 +28,15 @@
   },
   "homepage": "https://github.com/dadajam4/fastkit/tree/dev/packages/vui#readme",
   "peerDependencies": {
-    "vite": "^2.7.10",
+    "vite": "^2.9.1",
     "vue": "^3.2.26"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.7.50",
-    "@fastkit/icon-font": "0.7.50",
-    "@fastkit/tiny-logger": "0.7.50",
-    "@fastkit/vite-kit": "0.7.50",
-    "@fastkit/vue-kit": "0.7.50",
+    "@fastkit/color-scheme": "0.7.55",
+    "@fastkit/icon-font": "0.7.55",
+    "@fastkit/tiny-logger": "0.7.55",
+    "@fastkit/vite-kit": "0.7.55",
+    "@fastkit/vue-kit": "0.7.55",
     "@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/VNumberField/VNumberField.tsx

@@ -0,0 +1,55 @@
+import { defineComponent, PropType } from 'vue';
+import {
+  VTextField,
+  TextFieldPropsOptions,
+  TextFieldEmits,
+} from '../VTextField/VTextField';
+
+export const VNumberField = defineComponent({
+  name: 'VNumberField',
+  props: {
+    ...(undefined as unknown as Omit<TextFieldPropsOptions, 'type'>),
+    modelValue: {
+      type: Number as PropType<number | null>,
+      default: null,
+    },
+  },
+  emits: {
+    ...(undefined as unknown as Omit<
+      TextFieldEmits,
+      'update:modelValue' | 'change'
+    >),
+    'update:modelValue': (value: number | null) => true,
+    change: (value: number | null) => true,
+  },
+  setup(props, ctx) {
+    const toString = (value?: string | number | null): string => {
+      if (value == null) return '';
+      return String(value);
+    };
+
+    const toNumber = (value?: string | number | null): number | null => {
+      if (value == null) return null;
+      if (typeof value === 'number') return value;
+      if (value.trim() === '') return null;
+      return Number(value);
+    };
+
+    return () => {
+      return (
+        <VTextField
+          {...ctx.attrs}
+          type="number"
+          modelValue={toString(props.modelValue)}
+          onUpdate:modelValue={(value) => {
+            ctx.emit('update:modelValue', toNumber(value));
+          }}
+          onChange={(value) => {
+            ctx.emit('change', toNumber(value));
+          }}
+          v-slots={ctx.slots}
+        />
+      );
+    };
+  },
+});

package/src/components/VNumberField/index.ts

@@ -0,0 +1 @@
+export * from './VNumberField';