@fastkit/vui 0.7.54 → 0.7.57

package/dist/tool/index.js

@@ -125,6 +125,7 @@ function viteVuiPlugin(options = {}) {
         editorRedo: 'mdi-redo-variant',
         hinttip: 'mdi-help-circle-outline',
         clear: 'mdi-close',
+        reload: 'mdi-reload',
         // navigationExpand: (gen, active) => {
         //   return gen({
         //     name: 'mdi-menu-down' as any,

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;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"}
+{"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,CA0JrB"}

package/dist/vui.cjs.js

@@ -7,8 +7,8 @@ var vue = require('vue');
 var vueRouter = require('vue-router');
 var vueUtils = require('@fastkit/vue-utils');
 var vueScroller = require('@fastkit/vue-scroller');
-var vueColorScheme = require('@fastkit/vue-color-scheme');
 var vueLoading = require('@fastkit/vue-loading');
+var vueColorScheme = require('@fastkit/vue-color-scheme');
 var helpers = require('@fastkit/helpers');
 var iconFont = require('@fastkit/icon-font');
 var vueAppLayout = require('@fastkit/vue-app-layout');
@@ -29,7 +29,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var StarterKit__default = /*#__PURE__*/_interopDefaultLegacy(StarterKit);
 
 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();
@@ -84,6 +89,7 @@ function createControlProps() {
                 return CONTROL_SIZES.includes(value);
             },
         },
+        loading: Boolean,
     });
 }
 function useControl(props, opts = {}) {
@@ -235,7 +241,8 @@ function createRequiredChipRenderer(required, props, vui = useVui()) {
 const VFormControl = vue.defineComponent({
   name: 'VFormControl',
   props: { ...props$8,
-    ...vueKit.defineSlotsProps()
+    ...vueKit.defineSlotsProps(),
+    error: Boolean
   },
   emits: emits$8,
 
@@ -276,7 +283,7 @@ const VFormControl = vue.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();
@@ -339,6 +346,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: {},
       ...vueKit.defineSlotsProps()
     },
     emits,
@@ -349,8 +360,19 @@ function defineFormSelectorComponent(opts) {
         defaultMultiple
       });
       const control = useControl(props);
+      const vui = useVui();
+      const loadingMessageRef = vue.computed(() => {
+        const slot = vueKit.resolveVNodeChildOrSlots(props.loadingMessage, vui.setting('loadingMessage'), 'Loading...');
+        return slot && slot(vui);
+      });
+      const failedToLoadItemsMessageRef = vue.computed(() => {
+        const slot = vueKit.resolveVNodeChildOrSlots(props.failedToLoadItemsMessage, vui.setting('failedToLoadDataMessage'), 'Failed to load data.');
+        return slot && slot(vui);
+      });
       return { ...selectorControl.expose(),
-        ...control
+        ...control,
+        loadingMessageRef,
+        failedToLoadItemsMessageRef
       };
     },
 
@@ -368,11 +390,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: () => vue.createVNode("div", {
           "class": "v-form-selector__body"
-        }, [this.propItems.map(attrs => {
+        }, [selectorControl.itemsLoadFailed && vue.createVNode("div", {
+          "key": "failed",
+          "class": "v-form-selector__placeholder v-form-selector__placeholder--error"
+        }, [this.failedToLoadItemsMessageRef]), selectorControl.itemsLoading && vue.createVNode("div", {
+          "key": "loading",
+          "class": "v-form-selector__placeholder"
+        }, [vue.createVNode(vueLoading.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,
@@ -1112,7 +1145,6 @@ const vueButtonProps = vueUtils.createPropsOptions({ ...vueUtils.htmlAttributesP
   ...vueColorScheme.colorSchemeProps(),
   ...vueUtils.navigationableInheritProps,
   spacer: [Boolean, String],
-  loading: Boolean,
   rounded: Boolean,
   icon: [String, Function],
   startIcon: [String, Function],
@@ -2338,7 +2370,8 @@ const VControlField = vue.defineComponent({
   props: { ...createControlFieldProps(),
     focused: Boolean,
     autoHeight: Boolean,
-    ...vueKit.defineSlotsProps()
+    ...vueKit.defineSlotsProps(),
+    error: Boolean
   },
   // _slots: inputBoxSlots,
   emits: {
@@ -2362,11 +2395,11 @@ const VControlField = vue.defineComponent({
     const classes = vue.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 = vue.computed(() => {
@@ -2379,11 +2412,21 @@ const VControlField = vue.defineComponent({
     });
 
     const renderAdornment = position => {
-      const result = vueKit.renderSlotOrEmpty(resolvedSlots.value, position);
-      if (!result) return;
+      let child;
+
+      if (position === 'end' && props.loading) {
+        child = vue.createVNode(vueLoading.VProgressCircular, {
+          "indeterminate": true,
+          "size": CONTROL_LOADING_SPINNER_SIZES[props.size || 'md']
+        }, null);
+      } else {
+        child = vueKit.renderSlotOrEmpty(resolvedSlots.value, position);
+      }
+
+      if (!child) return;
       return vue.createVNode("div", {
         "class": ['v-control-field__adornment', `v-control-field__adornment--${position}`]
-      }, [result]);
+      }, [child]);
     };
 
     const handleClick = ev => {
@@ -2426,7 +2469,9 @@ const VSelect = vue.defineComponent({
     ...createControlProps(),
     ...vueKit.defineSlotsProps(),
     ...vueKit.createPropsOptions({
-      placeholder: String
+      placeholder: String,
+      loadingMessage: {},
+      failedToLoadItemsMessage: {}
     })
   },
   emits: emits$3,
@@ -2453,6 +2498,14 @@ const VSelect = vue.defineComponent({
     const vui = useVui();
     const iconName = vui.icon('menuDown');
     const fieldRef = vue.ref(null);
+    const loadingMessageRef = vue.computed(() => {
+      const slot = vueKit.resolveVNodeChildOrSlots(props.loadingMessage, vui.setting('loadingMessage'), 'Loading...');
+      return slot && slot(vui);
+    });
+    const failedToLoadItemsMessageRef = vue.computed(() => {
+      const slot = vueKit.resolveVNodeChildOrSlots(props.failedToLoadItemsMessage, vui.setting('failedToLoadDataMessage'), 'Failed to load data.');
+      return slot && slot(vui);
+    });
 
     const focus = opts => {
       fieldRef.value && fieldRef.value.focus(opts);
@@ -2461,7 +2514,15 @@ const VSelect = vue.defineComponent({
     const renderSelections = selectedItems => {
       const children = [];
 
-      if (selectedItems.length) {
+      if (inputControl.itemsLoadFailed) {
+        children.push(vue.createVNode("span", {
+          "class": "v-select__placeholder"
+        }, [failedToLoadItemsMessageRef.value]));
+      } else if (inputControl.itemsLoading) {
+        children.push(vue.createVNode("span", {
+          "class": "v-select__placeholder"
+        }, [loadingMessageRef.value]));
+      } else if (selectedItems.length) {
         selectedItems.forEach((item, index) => {
           if (index > 0) {
             children.push(vui.selectionSeparator());
@@ -2536,8 +2597,11 @@ const VSelect = vue.defineComponent({
         }) => [vue.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) {
@@ -2577,19 +2641,37 @@ const VSelect = vue.defineComponent({
           }, [vue.createVNode("div", {
             "class": "v-select__selections__inner"
           }, [this.renderSelections(selectedItems)])])],
-          endAdornment: () => this.clearable && this.nodeControl.value != null && vue.createVNode(VButton, {
-            "key": "clear",
-            "icon": this.$vui.icon('clear'),
-            "rounded": true,
-            "onClick": ev => {
-              ev.stopPropagation();
-              this.nodeControl.clear();
+          endAdornment: () => {
+            if (selectorControl.itemsLoadFailed) {
+              return vue.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 vue.createVNode(VButton, {
+                "key": "clear",
+                "icon": this.$vui.icon('clear'),
+                "rounded": true,
+                "onClick": ev => {
+                  ev.stopPropagation();
+                  this.nodeControl.clear();
+                }
+              }, null);
             }
-          }, null) || vue.createVNode(VIcon, {
-            "key": "icon",
-            "name": this.iconName,
-            "rotate": this.menuOpened ? 180 : 0
-          }, null)
+
+            return vue.createVNode(VIcon, {
+              "key": "icon",
+              "name": this.iconName,
+              "rotate": this.menuOpened ? 180 : 0
+            }, null);
+          }
         })]
       })
     });
@@ -2666,7 +2748,8 @@ const VTextField = vue.defineComponent({
       default: () => vue.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'
@@ -2770,6 +2853,7 @@ const VTextarea = vue.defineComponent({
     }, { ...this.$slots,
       default: () => vue.createVNode(VControlField, {
         "class": "v-textarea__input",
+        "size": this.size,
         "autoHeight": true,
         "startAdornment": this.startAdornment,
         "endAdornment": this.endAdornment
@@ -2865,8 +2949,8 @@ const VWysiwygEditor = vue.defineComponent({
     vue.watch(() => inputControl.canOperation, updateEditable);
     vue.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 = vue3.useEditor({
@@ -3009,7 +3093,8 @@ const VWysiwygEditor = vue.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;
@@ -4056,7 +4141,7 @@ const VDataTable = vue.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 = vue.computed(() => [{
       'v-data-table--fixed-header': props.fixedHeader
@@ -4969,6 +5054,7 @@ exports.ICON_NAMES = iconFont.ICON_NAMES;
 exports.AVATAR_SIZES = AVATAR_SIZES;
 exports.CHIP_SIZES = CHIP_SIZES;
 exports.CONTROL_FIELD_VARIANTS = CONTROL_FIELD_VARIANTS;
+exports.CONTROL_LOADING_SPINNER_SIZES = CONTROL_LOADING_SPINNER_SIZES;
 exports.CONTROL_SIZES = CONTROL_SIZES;
 exports.PAGINATION_ALIGNS = PAGINATION_ALIGNS;
 exports.VApp = VApp;

package/dist/vui.cjs.prod.js

@@ -7,8 +7,8 @@ var vue = require('vue');
 var vueRouter = require('vue-router');
 var vueUtils = require('@fastkit/vue-utils');
 var vueScroller = require('@fastkit/vue-scroller');
-var vueColorScheme = require('@fastkit/vue-color-scheme');
 var vueLoading = require('@fastkit/vue-loading');
+var vueColorScheme = require('@fastkit/vue-color-scheme');
 var helpers = require('@fastkit/helpers');
 var iconFont = require('@fastkit/icon-font');
 var vueAppLayout = require('@fastkit/vue-app-layout');
@@ -29,7 +29,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var StarterKit__default = /*#__PURE__*/_interopDefaultLegacy(StarterKit);
 
 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();
@@ -84,6 +89,7 @@ function createControlProps() {
                 return CONTROL_SIZES.includes(value);
             },
         },
+        loading: Boolean,
     });
 }
 function useControl(props, opts = {}) {
@@ -235,7 +241,8 @@ function createRequiredChipRenderer(required, props, vui = useVui()) {
 const VFormControl = vue.defineComponent({
   name: 'VFormControl',
   props: { ...props$8,
-    ...vueKit.defineSlotsProps()
+    ...vueKit.defineSlotsProps(),
+    error: Boolean
   },
   emits: emits$8,
 
@@ -276,7 +283,7 @@ const VFormControl = vue.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();
@@ -339,6 +346,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: {},
       ...vueKit.defineSlotsProps()
     },
     emits,
@@ -349,8 +360,19 @@ function defineFormSelectorComponent(opts) {
         defaultMultiple
       });
       const control = useControl(props);
+      const vui = useVui();
+      const loadingMessageRef = vue.computed(() => {
+        const slot = vueKit.resolveVNodeChildOrSlots(props.loadingMessage, vui.setting('loadingMessage'), 'Loading...');
+        return slot && slot(vui);
+      });
+      const failedToLoadItemsMessageRef = vue.computed(() => {
+        const slot = vueKit.resolveVNodeChildOrSlots(props.failedToLoadItemsMessage, vui.setting('failedToLoadDataMessage'), 'Failed to load data.');
+        return slot && slot(vui);
+      });
       return { ...selectorControl.expose(),
-        ...control
+        ...control,
+        loadingMessageRef,
+        failedToLoadItemsMessageRef
       };
     },
 
@@ -368,11 +390,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: () => vue.createVNode("div", {
           "class": "v-form-selector__body"
-        }, [this.propItems.map(attrs => {
+        }, [selectorControl.itemsLoadFailed && vue.createVNode("div", {
+          "key": "failed",
+          "class": "v-form-selector__placeholder v-form-selector__placeholder--error"
+        }, [this.failedToLoadItemsMessageRef]), selectorControl.itemsLoading && vue.createVNode("div", {
+          "key": "loading",
+          "class": "v-form-selector__placeholder"
+        }, [vue.createVNode(vueLoading.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,
@@ -1112,7 +1145,6 @@ const vueButtonProps = vueUtils.createPropsOptions({ ...vueUtils.htmlAttributesP
   ...vueColorScheme.colorSchemeProps(),
   ...vueUtils.navigationableInheritProps,
   spacer: [Boolean, String],
-  loading: Boolean,
   rounded: Boolean,
   icon: [String, Function],
   startIcon: [String, Function],
@@ -2338,7 +2370,8 @@ const VControlField = vue.defineComponent({
   props: { ...createControlFieldProps(),
     focused: Boolean,
     autoHeight: Boolean,
-    ...vueKit.defineSlotsProps()
+    ...vueKit.defineSlotsProps(),
+    error: Boolean
   },
   // _slots: inputBoxSlots,
   emits: {
@@ -2362,11 +2395,11 @@ const VControlField = vue.defineComponent({
     const classes = vue.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 = vue.computed(() => {
@@ -2379,11 +2412,21 @@ const VControlField = vue.defineComponent({
     });
 
     const renderAdornment = position => {
-      const result = vueKit.renderSlotOrEmpty(resolvedSlots.value, position);
-      if (!result) return;
+      let child;
+
+      if (position === 'end' && props.loading) {
+        child = vue.createVNode(vueLoading.VProgressCircular, {
+          "indeterminate": true,
+          "size": CONTROL_LOADING_SPINNER_SIZES[props.size || 'md']
+        }, null);
+      } else {
+        child = vueKit.renderSlotOrEmpty(resolvedSlots.value, position);
+      }
+
+      if (!child) return;
       return vue.createVNode("div", {
         "class": ['v-control-field__adornment', `v-control-field__adornment--${position}`]
-      }, [result]);
+      }, [child]);
     };
 
     const handleClick = ev => {
@@ -2426,7 +2469,9 @@ const VSelect = vue.defineComponent({
     ...createControlProps(),
     ...vueKit.defineSlotsProps(),
     ...vueKit.createPropsOptions({
-      placeholder: String
+      placeholder: String,
+      loadingMessage: {},
+      failedToLoadItemsMessage: {}
     })
   },
   emits: emits$3,
@@ -2453,6 +2498,14 @@ const VSelect = vue.defineComponent({
     const vui = useVui();
     const iconName = vui.icon('menuDown');
     const fieldRef = vue.ref(null);
+    const loadingMessageRef = vue.computed(() => {
+      const slot = vueKit.resolveVNodeChildOrSlots(props.loadingMessage, vui.setting('loadingMessage'), 'Loading...');
+      return slot && slot(vui);
+    });
+    const failedToLoadItemsMessageRef = vue.computed(() => {
+      const slot = vueKit.resolveVNodeChildOrSlots(props.failedToLoadItemsMessage, vui.setting('failedToLoadDataMessage'), 'Failed to load data.');
+      return slot && slot(vui);
+    });
 
     const focus = opts => {
       fieldRef.value && fieldRef.value.focus(opts);
@@ -2461,7 +2514,15 @@ const VSelect = vue.defineComponent({
     const renderSelections = selectedItems => {
       const children = [];
 
-      if (selectedItems.length) {
+      if (inputControl.itemsLoadFailed) {
+        children.push(vue.createVNode("span", {
+          "class": "v-select__placeholder"
+        }, [failedToLoadItemsMessageRef.value]));
+      } else if (inputControl.itemsLoading) {
+        children.push(vue.createVNode("span", {
+          "class": "v-select__placeholder"
+        }, [loadingMessageRef.value]));
+      } else if (selectedItems.length) {
         selectedItems.forEach((item, index) => {
           if (index > 0) {
             children.push(vui.selectionSeparator());
@@ -2536,8 +2597,11 @@ const VSelect = vue.defineComponent({
         }) => [vue.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) {
@@ -2577,19 +2641,37 @@ const VSelect = vue.defineComponent({
           }, [vue.createVNode("div", {
             "class": "v-select__selections__inner"
           }, [this.renderSelections(selectedItems)])])],
-          endAdornment: () => this.clearable && this.nodeControl.value != null && vue.createVNode(VButton, {
-            "key": "clear",
-            "icon": this.$vui.icon('clear'),
-            "rounded": true,
-            "onClick": ev => {
-              ev.stopPropagation();
-              this.nodeControl.clear();
+          endAdornment: () => {
+            if (selectorControl.itemsLoadFailed) {
+              return vue.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 vue.createVNode(VButton, {
+                "key": "clear",
+                "icon": this.$vui.icon('clear'),
+                "rounded": true,
+                "onClick": ev => {
+                  ev.stopPropagation();
+                  this.nodeControl.clear();
+                }
+              }, null);
             }
-          }, null) || vue.createVNode(VIcon, {
-            "key": "icon",
-            "name": this.iconName,
-            "rotate": this.menuOpened ? 180 : 0
-          }, null)
+
+            return vue.createVNode(VIcon, {
+              "key": "icon",
+              "name": this.iconName,
+              "rotate": this.menuOpened ? 180 : 0
+            }, null);
+          }
         })]
       })
     });
@@ -2666,7 +2748,8 @@ const VTextField = vue.defineComponent({
       default: () => vue.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'
@@ -2770,6 +2853,7 @@ const VTextarea = vue.defineComponent({
     }, { ...this.$slots,
       default: () => vue.createVNode(VControlField, {
         "class": "v-textarea__input",
+        "size": this.size,
         "autoHeight": true,
         "startAdornment": this.startAdornment,
         "endAdornment": this.endAdornment
@@ -2865,8 +2949,8 @@ const VWysiwygEditor = vue.defineComponent({
     vue.watch(() => inputControl.canOperation, updateEditable);
     vue.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 = vue3.useEditor({
@@ -3009,7 +3093,8 @@ const VWysiwygEditor = vue.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;
@@ -4056,7 +4141,7 @@ const VDataTable = vue.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 = vue.computed(() => [{
       'v-data-table--fixed-header': props.fixedHeader
@@ -4969,6 +5054,7 @@ exports.ICON_NAMES = iconFont.ICON_NAMES;
 exports.AVATAR_SIZES = AVATAR_SIZES;
 exports.CHIP_SIZES = CHIP_SIZES;
 exports.CONTROL_FIELD_VARIANTS = CONTROL_FIELD_VARIANTS;
+exports.CONTROL_LOADING_SPINNER_SIZES = CONTROL_LOADING_SPINNER_SIZES;
 exports.CONTROL_SIZES = CONTROL_SIZES;
 exports.PAGINATION_ALIGNS = PAGINATION_ALIGNS;
 exports.VApp = VApp;

package/dist/vui.css

@@ -857,6 +857,17 @@ thead th {
 .v-form-selector__body {
   display: block;
 }
+.v-form-selector__placeholder {
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+  font-style: italic;
+  opacity: 0.5;
+}
+.v-form-selector__placeholder--error {
+  color: var(--main-color);
+  opacity: 1;
+}
 .v-form-selector--stacked .v-form-selector__body {
   display: flex;
   flex-direction: column;