@fastkit/vui 0.16.80 → 0.16.81

package/src/components/VSelect/VSelect.tsx

@@ -37,6 +37,7 @@ import {
 import { VUI_SELECT_SYMBOL, useVui } from '../../injections';
 import { VIcon } from '../VIcon';
 import { VMenu } from '../VMenu';
+import { VStackActivatorPayload } from '@fastkit/vue-stack';
 import { VOptionGroup } from '../VOptionGroup';
 import { VOption } from '../VOption';
 import { VButton } from '../VButton';
@@ -46,12 +47,14 @@ export const ARROW_KEY_TYPES = useKeyboard.Key(['ArrowUp', 'ArrowDown']);
 
 export const CHOICE_KEY_TYPES = useKeyboard.Key(['Enter', ' ']);
 
-export const KEYBORD_EVENT_TYPES = useKeyboard.Key([
+export const KEYBOARD_EVENT_TYPES = useKeyboard.Key([
   ...ARROW_KEY_TYPES,
   ...CHOICE_KEY_TYPES,
 ]);
 
-const { props, emits } = createFormSelectorSettings();
+const { props, emits } = createFormSelectorSettings({
+  defaultValidateTiming: 'blur',
+});
 
 const slots = defineSlots<
   FormControlSlots &
@@ -265,189 +268,197 @@ export const VSelect = defineComponent({
     useKeyboard(
       [
         {
-          key: KEYBORD_EVENT_TYPES,
+          key: KEYBOARD_EVENT_TYPES,
           handler: keyboardEventHandler,
         },
       ],
       { autorun: true },
     );
 
-    return {
-      ...inputControl.expose(),
-      ...control,
-      iconName,
-      menuOpened,
-      fieldRef: () => fieldRef,
+    ctx.expose({
+      control: inputControl,
       focus,
       showMenu,
       closeMenu,
-      renderSelections,
-      menuRef: () => menuRef,
-      clearKeyFocused,
+    });
+
+    const handleClickLabel = (ev: MouseEvent) => {
+      focus();
     };
-  },
-  render() {
-    const { nodeControl, selectorControl, selectorItems, selectedItems } = this;
-    const children = this.$slots.default?.() || [];
-    const propGroups = this.propGroups.map((group) => {
-      return (
-        <VOptionGroup
-          key={group.id}
-          groupId={group.id}
-          label={group.label(selectorControl)}
-          disabled={group.disabled}>
-          {group.items.map((item) => (
-            <VOption
-              disabled={item.disabled}
-              value={item.value}
-              key={item.value}>
-              {{
-                default: () => item.label(selectorControl),
+
+    return () => {
+      const children = ctx.slots.default?.() || [];
+      const propGroups = inputControl.propGroups.map((group) => {
+        return (
+          <VOptionGroup
+            key={group.id}
+            groupId={group.id}
+            label={group.label(inputControl)}
+            disabled={group.disabled}>
+            {group.items.map((item) => (
+              <VOption
+                disabled={item.disabled}
+                value={item.value}
+                key={item.value}>
+                {item.label(inputControl)}
+              </VOption>
+            ))}
+          </VOptionGroup>
+        );
+      });
+
+      const classes = computed(() => [
+        'v-select',
+        control.classes.value,
+        {
+          'v-select--multiple': inputControl.multiple,
+        },
+      ]);
+
+      const controlDefaultSlot = () => {
+        return [
+          <select
+            class="v-select__input__element"
+            name={inputControl.name}
+            tabindex={inputControl.tabindex}
+            disabled={inputControl.isDisabled}
+            multiple={inputControl.multiple}
+            onFocus={inputControl.focusHandler}
+            onBlur={inputControl.blurHandler}
+            v-model={inputControl.value}>
+            {inputControl.items.map((item) => {
+              return (
+                <option value={item.propValue} key={item.propValue}>
+                  {item.renderDefaultSlot()}
+                </option>
+              );
+            })}
+          </select>,
+          <div class="v-select__selections">
+            <div class="v-select__selections__inner">
+              {renderSelections(inputControl.selectedItems)}
+            </div>
+          </div>,
+        ];
+      };
+
+      const endAdornmentSlot = () => {
+        if (inputControl.itemsLoadFailed) {
+          return (
+            <VButton
+              key="reload"
+              icon={vui.icon('reload')}
+              rounded
+              onClick={(ev) => {
+                ev.stopPropagation();
+                inputControl.loadItems();
               }}
-            </VOption>
-          ))}
-        </VOptionGroup>
-      );
-    });
+            />
+          );
+        }
 
-    return (
-      <VFormControl
-        nodeControl={nodeControl}
-        // focused={this.nodeControl.focused}
-        class={[
-          'v-select',
-          this.classes,
-          {
-            'v-select--multiple': this.multiple,
-          },
-        ]}
-        label={this.label}
-        hint={this.hint}
-        hinttip={this.hinttip}
-        hiddenInfo={this.hiddenInfo}
-        requiredChip={this.requiredChip}
-        onClickLabel={(ev) => {
-          this.focus();
-        }}
-        v-slots={{
-          ...this.$slots,
-          default: () => (
-            <VMenu
-              width="fit"
-              maxWidth="fit"
-              closeOnNavigation={this.closeOnNavigation}
-              distance={0}
-              alwaysRender
-              v-model={this.menuOpened}
-              ref={this.menuRef()}
-              onClose={this.clearKeyFocused}
-              v-slots={{
-                activator: ({ attrs, control }) => [
-                  <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}
-                    autoHeight={this.multiple}
-                    onClick={(ev) => {
-                      if (this.canOperation && !control.isActive) {
-                        let t = ev.target as HTMLElement;
-                        const count = 0;
-                        let hit = false;
-                        while (count < 5) {
-                          if (t.classList.contains('v-select__input')) {
-                            hit = true;
-                            break;
-                          }
-                          t = t.parentElement as HTMLElement;
-                        }
-                        control.setActivator(hit ? t : ev).show();
-                      }
-                    }}
-                    v-slots={{
-                      ...this.$slots,
-                      default: () => [
-                        <select
-                          class="v-select__input__element"
-                          name={this.name}
-                          tabindex={this.computedTabindex}
-                          disabled={this.isDisabled}
-                          multiple={this.multiple}
-                          onFocus={nodeControl.focusHandler}
-                          onBlur={nodeControl.blurHandler}
-                          v-model={this.currentValue}
-                          // value={nodeControl.value}
-                        >
-                          {selectorItems.map((item) => {
-                            return (
-                              <option
-                                value={item.propValue}
-                                key={item.propValue}>
-                                {item.renderDefaultSlot()}
-                              </option>
-                            );
-                          })}
-                        </select>,
-                        <div class="v-select__selections">
-                          <div class="v-select__selections__inner">
-                            {this.renderSelections(selectedItems)}
-                          </div>
-                        </div>,
-                      ],
-                      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}
-                          />
-                        );
-                      },
-                    }}
-                  />,
-                ],
-              }}>
-              <div class={['v-select__body', this.classes]}>
-                {children}
-                {propGroups}
-              </div>
-            </VMenu>
-          ),
-        }}
-      />
-    );
+        if (props.clearable && inputControl.value != null) {
+          return (
+            <VButton
+              key="clear"
+              icon={vui.icon('clear')}
+              rounded
+              onClick={(ev) => {
+                ev.stopPropagation();
+                inputControl.clear();
+              }}
+            />
+          );
+        }
+
+        return (
+          <VIcon
+            key="icon"
+            name={iconName}
+            rotate={menuOpened.value ? 180 : 0}
+          />
+        );
+      };
+
+      const menuActivatorSlot = ({ control: menu }: VStackActivatorPayload) => {
+        return (
+          <VControlField
+            class="v-select__input"
+            ref={fieldRef}
+            loading={inputControl.itemsLoading}
+            error={inputControl.itemsLoadFailed}
+            startAdornment={props.startAdornment}
+            endAdornment={props.endAdornment}
+            size={control.size.value}
+            focused={menuOpened.value}
+            autoHeight={inputControl.multiple}
+            onClick={(ev) => {
+              if (inputControl.canOperation && !menu.isActive) {
+                let t = ev.target as HTMLElement;
+                const count = 0;
+                let hit = false;
+                while (count < 5) {
+                  if (t.classList.contains('v-select__input')) {
+                    hit = true;
+                    break;
+                  }
+                  t = t.parentElement as HTMLElement;
+                }
+                menu.setActivator(hit ? t : ev).show();
+              }
+            }}
+            v-slots={{
+              ...ctx.slots,
+              default: controlDefaultSlot,
+              endAdornment: endAdornmentSlot,
+            }}
+          />
+        );
+      };
+
+      const menuSlots = {
+        activator: menuActivatorSlot,
+        default: () => (
+          <div class={['v-select__body', control.classes.value]}>
+            {children}
+            {propGroups}
+          </div>
+        ),
+      };
+
+      const defaultSlot = () => {
+        return (
+          <VMenu
+            width="fit"
+            maxWidth="fit"
+            closeOnNavigation={props.closeOnNavigation}
+            distance={0}
+            alwaysRender
+            v-model={menuOpened.value}
+            ref={menuRef}
+            onClose={clearKeyFocused}
+            v-slots={menuSlots}
+          />
+        );
+      };
+
+      return (
+        <VFormControl
+          nodeControl={inputControl}
+          // focused={this.nodeControl.focused}
+          class={classes.value}
+          label={props.label}
+          hint={props.hint}
+          hinttip={props.hinttip}
+          hiddenInfo={props.hiddenInfo}
+          requiredChip={props.requiredChip}
+          onClickLabel={handleClickLabel}
+          v-slots={{
+            ...ctx.slots,
+            default: defaultSlot,
+          }}
+        />
+      );
+    };
   },
 });

package/src/components/VSwitch/VSwitch.tsx

@@ -1,5 +1,5 @@
 import './VSwitch.scss';
-import { defineComponent } from 'vue';
+import { defineComponent, computed } from 'vue';
 import {
   createFormSelectorItemSettings,
   useFormSelectorItemControl,
@@ -27,38 +27,41 @@ export const VSwitch = defineComponent({
       (window as any).yy = {};
       (window as any).yy[String(Date.now())] = nodeControl;
     }
-    return {
-      ...nodeControl.expose(),
-      ...control,
+
+    const classes = computed(() => [
+      'v-switch',
+      {
+        'v-switch--selected': nodeControl.selected,
+        'v-switch--disabled': nodeControl.isDisabled,
+      },
+      control.classes.value,
+    ]);
+
+    const slots = {
+      input: () => nodeControl.createInputElement({ type: 'checkbox' }),
+      icon: () => (
+        <span class="v-switch__faux">
+          <span class="v-switch__faux__pin"></span>
+        </span>
+      ),
+      label: () => ctx.slots.default?.(),
+    };
+
+    ctx.expose({
+      control: nodeControl,
+    });
+
+    return () => {
+      return (
+        <VCheckable
+          class={classes.value}
+          checked={nodeControl.selected}
+          invalid={nodeControl.invalid}
+          disabled={nodeControl.isDisabled}
+          readonly={nodeControl.isReadonly}
+          v-slots={slots}
+        />
+      );
     };
-  },
-  render() {
-    const { selectorItemControl } = this;
-    return (
-      <VCheckable
-        class={[
-          'v-switch',
-          {
-            'v-switch--selected': selectorItemControl.selected,
-            'v-switch--disabled': selectorItemControl.isDisabled,
-          },
-          this.classes,
-        ]}
-        checked={this.selected}
-        invalid={this.invalid}
-        disabled={this.isDisabled}
-        readonly={this.isReadonly}
-        v-slots={{
-          input: () =>
-            selectorItemControl.createInputElement({ type: 'checkbox' }),
-          icon: () => (
-            <span class="v-switch__faux">
-              <span class="v-switch__faux__pin"></span>
-            </span>
-          ),
-          label: () => this.$slots.default?.(),
-        }}
-      />
-    );
   },
 });

package/src/components/VTextField/VTextField.tsx

@@ -1,5 +1,5 @@
 import './VTextField.scss';
-import { defineComponent } from 'vue';
+import { defineComponent, computed } from 'vue';
 import {
   createTextInputSettings,
   useTextInputControl,
@@ -58,49 +58,59 @@ export const VTextField = defineComponent({
     const control = useControl(props);
     useControlField(props);
 
-    return {
-      ...inputControl.expose(),
-      ...control,
+    const classes = computed(() => ['v-text-field', control.classes.value]);
+
+    const handleClickLabel = (ev: MouseEvent) => {
+      inputControl.focus();
+    };
+
+    const defaultSlot = () => {
+      return (
+        <VControlField
+          class="v-text-field__input"
+          startAdornment={props.startAdornment}
+          endAdornment={props.endAdornment}
+          size={control.size.value}
+          v-slots={{
+            ...ctx.slots,
+            default: () =>
+              inputControl.createInputElement({
+                class: 'v-text-field__input__element',
+              }),
+          }}
+        />
+      );
+    };
+
+    const infoAppendsSlot = () => {
+      const { counterResult } = inputControl;
+      if (!counterResult) return;
+      return <VTextCounter {...counterResult} />;
+    };
+
+    ctx.expose({
+      control: inputControl,
+    });
+
+    return () => {
+      return (
+        <VFormControl
+          nodeControl={inputControl}
+          focused={inputControl.focused}
+          hiddenInfo={props.hiddenInfo}
+          class={classes.value}
+          label={props.label}
+          hint={props.hint}
+          hinttip={props.hinttip}
+          requiredChip={props.requiredChip}
+          onClickLabel={handleClickLabel}
+          v-slots={{
+            ...ctx.slots,
+            default: defaultSlot,
+            infoAppends: infoAppendsSlot,
+          }}
+        />
+      );
     };
-  },
-  render() {
-    return (
-      <VFormControl
-        nodeControl={this.nodeControl}
-        focused={this.nodeControl.focused}
-        hiddenInfo={this.hiddenInfo}
-        class={['v-text-field', this.classes]}
-        label={this.label}
-        hint={this.hint}
-        hinttip={this.hinttip}
-        requiredChip={this.requiredChip}
-        onClickLabel={(ev) => {
-          this.focus();
-        }}
-        v-slots={{
-          ...this.$slots,
-          default: () => (
-            <VControlField
-              class="v-text-field__input"
-              startAdornment={this.startAdornment}
-              endAdornment={this.endAdornment}
-              size={this.size}
-              v-slots={{
-                ...this.$slots,
-                default: () =>
-                  this.textInputControl.createInputElement({
-                    class: 'v-text-field__input__element',
-                  }),
-              }}
-            />
-          ),
-          infoAppends: () => {
-            const { counterResult } = this;
-            if (!counterResult) return;
-            return <VTextCounter {...counterResult} />;
-          },
-        }}
-      />
-    );
   },
 });