@fastkit/vui 0.16.80 → 0.16.81

package/src/components/VTextarea/VTextarea.tsx

@@ -46,53 +46,59 @@ export const VTextarea = defineComponent({
     const control = useControl(props);
     useControlField(props);
 
-    return {
-      ...inputControl.expose(),
-      ...control,
+    ctx.expose({
+      control: inputControl,
+    });
+
+    const defaultSlot = () => {
+      return (
+        <VControlField
+          class="v-textarea__input"
+          size={control.size.value}
+          autoHeight
+          startAdornment={props.startAdornment}
+          endAdornment={props.endAdornment}
+          // onClickHost={(ev) => {
+          //   this.focus();
+          // }}
+          v-slots={{
+            ...ctx.slots,
+            default: () =>
+              inputControl.createInputElement({
+                class: 'v-textarea__input__element',
+              }),
+          }}
+        />
+      );
+    };
+
+    const infoAppendsSlot = () => {
+      const { counterResult } = inputControl;
+      if (!counterResult) return;
+      return <VTextCounter {...counterResult} />;
+    };
+
+    return () => {
+      return (
+        <VFormControl
+          nodeControl={inputControl}
+          focused={inputControl.focused}
+          class={['v-textarea', control.classes.value]}
+          label={props.label}
+          hint={props.hint}
+          hinttip={props.hinttip}
+          hiddenInfo={props.hiddenInfo}
+          requiredChip={props.requiredChip}
+          onClickLabel={(ev) => {
+            inputControl.focus();
+          }}
+          v-slots={{
+            ...ctx.slots,
+            default: defaultSlot,
+            infoAppends: infoAppendsSlot,
+          }}
+        />
+      );
     };
-  },
-  render() {
-    return (
-      <VFormControl
-        nodeControl={this.nodeControl}
-        focused={this.nodeControl.focused}
-        class={['v-textarea', this.classes]}
-        label={this.label}
-        hint={this.hint}
-        hinttip={this.hinttip}
-        hiddenInfo={this.hiddenInfo}
-        requiredChip={this.requiredChip}
-        onClickLabel={(ev) => {
-          this.focus();
-        }}
-        v-slots={{
-          ...this.$slots,
-          default: () => (
-            <VControlField
-              class="v-textarea__input"
-              size={this.size}
-              autoHeight
-              startAdornment={this.startAdornment}
-              endAdornment={this.endAdornment}
-              // onClickHost={(ev) => {
-              //   this.focus();
-              // }}
-              v-slots={{
-                ...this.$slots,
-                default: () =>
-                  this.textareaControl.createInputElement({
-                    class: 'v-textarea__input__element',
-                  }),
-              }}
-            />
-          ),
-          infoAppends: () => {
-            const { counterResult } = this;
-            if (!counterResult) return;
-            return <VTextCounter {...counterResult} />;
-          },
-        }}
-      />
-    );
   },
 });

package/src/components/index.ts

@@ -35,6 +35,7 @@ export * from './VTextField';
 export * from './VNumberField';
 export * from './VTextarea';
 // export * from './VWysiwygEditor';
+export * from './VFormGroup';
 export * from './VForm';
 export * from './VTabs';
 export * from './VBreadcrumbs';

package/src/composables/form-selector.tsx

@@ -77,6 +77,14 @@ export function defineFormSelectorComponent(
         defaultMultiple,
       });
       const control = useControl(props);
+      const classes = computed(() => [
+        'v-form-selector',
+        className,
+        {
+          ...control.classes.value,
+          'v-form-selector--stacked': props.stacked,
+        },
+      ]);
       const vui = useVui();
       const loadingMessageRef = computed<VNodeChild | undefined>(() => {
         const slot = resolveVNodeChildOrSlots(
@@ -94,85 +102,80 @@ export function defineFormSelectorComponent(
         );
         return slot && slot(vui);
       });
-      return {
-        ...selectorControl.expose(),
-        ...control,
-        loadingMessageRef,
-        failedToLoadItemsMessageRef,
-      };
-    },
-    render() {
-      const { selectorControl } = this;
-      return (
-        <VFormControl
-          nodeControl={this.nodeControl}
-          focused={this.nodeControl.focused}
-          hiddenInfo={this.hiddenInfo}
-          class={[
-            'v-form-selector',
-            className,
-            {
-              ...this.classes,
-              'v-form-selector--stacked': this.stacked,
-            },
-          ]}
-          label={this.label}
-          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.propGroups.map((group) => {
-                  const { items } = group;
-                  return (
-                    <>
-                      {items.map((attrs) => {
-                        const selected = selectorControl.isSelected(
-                          attrs.value,
-                        );
-                        return itemRenderer({
-                          selected,
-                          control: selectorControl,
-                          attrs: {
-                            ...attrs,
-                            modelValue: selected,
-                            key: attrs.value,
-                          },
-                          slots: {
-                            default: () => attrs.label(this.selectorControl),
-                          },
-                        });
-                      })}
-                    </>
-                  );
-                })}
-                {this.$slots.default?.()}
+      const defaultSlot = () => {
+        return (
+          <div class="v-form-selector__body">
+            {selectorControl.itemsLoadFailed && (
+              <div
+                key="failed"
+                class="v-form-selector__placeholder v-form-selector__placeholder--error">
+                {failedToLoadItemsMessageRef.value}
+              </div>
+            )}
+            {selectorControl.itemsLoading && (
+              <div key="loading" class="v-form-selector__placeholder">
+                <VProgressCircular
+                  indeterminate
+                  class="mr-1"
+                  size={
+                    CONTROL_LOADING_SPINNER_SIZES[control.size.value || 'md']
+                  }
+                />
+
+                {loadingMessageRef.value}
               </div>
-            ),
-          }}
-        />
-      );
+            )}
+            {selectorControl.propGroups.map((group) => {
+              const { items } = group;
+              return (
+                <>
+                  {items.map((attrs) => {
+                    const selected = selectorControl.isSelected(attrs.value);
+                    return itemRenderer({
+                      selected,
+                      control: selectorControl,
+                      attrs: {
+                        ...attrs,
+                        modelValue: selected,
+                        key: attrs.value,
+                      },
+                      slots: {
+                        default: () => attrs.label(selectorControl),
+                      },
+                    });
+                  })}
+                </>
+              );
+            })}
+            {ctx.slots.default?.()}
+          </div>
+        );
+      };
+
+      ctx.expose({
+        control: selectorControl,
+      });
+
+      return () => {
+        return (
+          <VFormControl
+            nodeControl={selectorControl}
+            focused={selectorControl.focused}
+            hiddenInfo={props.hiddenInfo}
+            class={classes.value}
+            label={props.label}
+            hint={props.hint}
+            hinttip={props.hinttip}
+            requiredChip={props.requiredChip}
+            error={selectorControl.itemsLoadFailed}
+            v-slots={{
+              ...ctx.slots,
+              default: defaultSlot,
+            }}
+          />
+        );
+      };
     },
   });
 }

package/src/injections.ts

@@ -27,6 +27,7 @@ export const VUI_RADIO_GROUP_SYMBOL = 'vui-radio-group';
 export const VUI_RADIO_SYMBOL = 'vui-radio';
 export const VUI_SWITCH_GROUP_SYMBOL = 'vui-switch-group';
 export const VUI_SWITCH_SYMBOL = 'vui-switch';
+export const VUI_FORM_GROUP_SYMBOL = 'vui-form-group';
 export const VUI_FORM_SYMBOL = 'vui-form';
 
 export function useVui() {

package/src/plugin.tsx

@@ -20,6 +20,9 @@ import { installResizeDirective } from '@fastkit/vue-resize';
 import { VueColorSchemePlugin } from '@fastkit/vue-color-scheme';
 import { installVueAppLayout } from '@fastkit/vue-app-layout';
 import { onAppUnmount } from '@fastkit/vue-utils';
+import { getDocumentScroller } from '@fastkit/vue-scroller';
+
+const scroller = getDocumentScroller();
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface VuiPluginStackOptions extends VueStackServiceOptions {}
@@ -70,7 +73,21 @@ export class VuiPlugin {
     app.use(vueColorSchemePlugin);
 
     installVueStackPlugin(app, stack);
-    installVueFormPlugin(app, form);
+    installVueFormPlugin(app, {
+      scroll: {
+        options: {
+          behavior: 'smooth',
+        },
+        fn: (el, opts) => {
+          const duration = opts?.behavior === 'smooth' ? undefined : 0;
+          return scroller.toElement(el, {
+            offset: $vui.getAutoScrollToElementOffsetTop(),
+            duration,
+          });
+        },
+      },
+      ...form,
+    });
     installVueAppLayout(app);
     installBodyScrollLockDirective(app);
     installClickOutsideDirective(app);