@fastkit/vui 0.7.50 → 0.7.55

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

@@ -6,6 +6,7 @@ import {
   createFormControlProps,
   FormControlSlots,
   defineSlotsProps,
+  TextInputEmits,
 } from '@fastkit/vue-kit';
 import { VFormControl } from '../VFormControl';
 import {
@@ -36,6 +37,10 @@ function createTextFieldProps() {
   };
 }
 
+export type TextFieldPropsOptions = ReturnType<typeof createTextFieldProps>;
+
+export type TextFieldEmits = TextInputEmits;
+
 export type TextFieldInput = ExtractPropInput<
   ReturnType<typeof createTextFieldProps>
 >;
@@ -77,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}

package/src/components/VWysiwygEditor/VWysiwygEditor.tsx

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

package/src/components/index.ts

@@ -26,6 +26,7 @@ export * from './VOption';
 export * from './VOptionGroup';
 export * from './VSelect';
 export * from './VTextField';
+export * from './VNumberField';
 export * from './VTextarea';
 export * from './VWysiwygEditor';
 export * from './VForm';

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,