@fastkit/vui 0.7.54 → 0.7.57

package/src/components/VWysiwygEditor/VWysiwygEditor.tsx

@@ -100,8 +100,12 @@ export const VWysiwygEditor = defineComponent({
       () => 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();
       },
     );
@@ -255,6 +259,7 @@ export const VWysiwygEditor = defineComponent({
                     autoHeight
                     startAdornment={this.startAdornment}
                     endAdornment={this.endAdornment}
+                    size={this.size}
                     // onClickHost={(ev) => {
                     //   this.focus();
                     // }}

package/src/composables/control.ts

@@ -27,6 +27,7 @@ export function createControlProps() {
         return CONTROL_SIZES.includes(value);
       },
     },
+    loading: Boolean,
   });
 }
 

package/src/composables/form-selector.scss

@@ -3,6 +3,19 @@
     display: block;
   }
 
+  &__placeholder {
+    display: flex;
+    align-items: center;
+    margin-top: 8px;
+    font-style: italic;
+    opacity: 0.5;
+
+    &--error {
+      color: var(--main-color);
+      opacity: 1;
+    }
+  }
+
   &--stacked &__body {
     display: flex;
     flex-direction: column;

package/src/composables/form-selector.tsx

@@ -1,5 +1,5 @@
 import './form-selector.scss';
-import { VNodeChild, defineComponent } from 'vue';
+import { VNodeChild, defineComponent, PropType, computed } from 'vue';
 import {
   defineSlotsProps,
   TypedSlot,
@@ -11,9 +11,14 @@ import {
   ResolvedFormSelectorItemData,
   FormNodeControl,
   renderSlotOrEmpty,
+  VNodeChildOrSlot,
+  resolveVNodeChildOrSlots,
 } from '@fastkit/vue-kit';
 import { createControlProps, useControl } from './control';
 import { VFormControl } from '../components/VFormControl';
+import { useVui } from '../injections';
+import { VProgressCircular } from '../components/loading';
+import { CONTROL_LOADING_SPINNER_SIZES } from '../schemes';
 
 export interface DefineFormSelectorComponentOptions {
   name: string;
@@ -51,6 +56,10 @@ export function defineFormSelectorComponent(
         type: Boolean,
         default: true,
       },
+      // eslint-disable-next-line vue/require-prop-types
+      loadingMessage: {} as PropType<VNodeChildOrSlot>,
+      // eslint-disable-next-line vue/require-prop-types
+      failedToLoadItemsMessage: {} as PropType<VNodeChildOrSlot>,
       ...defineSlotsProps<FormControlSlots>(),
     },
     emits,
@@ -60,9 +69,28 @@ export function defineFormSelectorComponent(
         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,
+        loadingMessageRef,
+        failedToLoadItemsMessageRef,
       };
     },
     render() {
@@ -84,10 +112,29 @@ export function defineFormSelectorComponent(
           hint={this.hint}
           hinttip={this.hinttip}
           requiredChip={this.requiredChip}
+          error={selectorControl.itemsLoadFailed}
           v-slots={{
             ...this.$slots,
             default: () => (
               <div class="v-form-selector__body">
+                {selectorControl.itemsLoadFailed && (
+                  <div
+                    key="failed"
+                    class="v-form-selector__placeholder v-form-selector__placeholder--error">
+                    {this.failedToLoadItemsMessageRef}
+                  </div>
+                )}
+                {selectorControl.itemsLoading && (
+                  <div key="loading" class="v-form-selector__placeholder">
+                    <VProgressCircular
+                      indeterminate
+                      class="mr-1"
+                      size={CONTROL_LOADING_SPINNER_SIZES[this.size || 'md']}
+                    />
+
+                    {this.loadingMessageRef}
+                  </div>
+                )}
                 {this.propItems.map((attrs) => {
                   const selected = selectorControl.isSelected(attrs.value);
                   return itemRenderer({

package/src/schemes/control.ts

@@ -5,3 +5,9 @@ export type ControlSize = typeof CONTROL_SIZES[number];
 export const CONTROL_FIELD_VARIANTS = ['outlined', 'filled', 'flat'] as const;
 
 export type ControlFieldVariant = typeof CONTROL_FIELD_VARIANTS[number];
+
+export const CONTROL_LOADING_SPINNER_SIZES: Record<ControlSize, number> = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+};

package/src/service.tsx

@@ -8,6 +8,7 @@ import {
   type VueStackService,
   type VDialogProps,
   type VStackControl,
+  type VNodeChildOrSlot,
   resolveVStackDynamicInput,
 } from '@fastkit/vue-kit';
 import type { Router } from 'vue-router';
@@ -60,8 +61,10 @@ export interface VuiServiceUISettings {
     variant?: ColorVariant;
   };
   hinttipDelay?: FormControlHinttipDelay;
-  noDataMessage?: VNodeChild | (() => VNodeChild);
-  noResultsMessage?: VNodeChild | (() => VNodeChild);
+  noDataMessage?: VNodeChildOrSlot;
+  noResultsMessage?: VNodeChildOrSlot;
+  loadingMessage?: VNodeChildOrSlot;
+  failedToLoadDataMessage?: VNodeChildOrSlot;
 }
 
 export type RawVuiServiceUISettings = Partial<VuiServiceUISettings>;
@@ -102,6 +105,7 @@ export interface VuiServiceIconSettings {
   editorRedo: IconName;
   hinttip: IconName;
   clear: IconName;
+  reload: IconName;
 }
 
 export type RawVuiServiceIconSettings = Partial<VuiServiceIconSettings>;

package/src/tool/vite-plugin.ts

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