@fastkit/vui 0.16.79 → 0.16.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.16.79",
+  "version": "0.16.81",
   "description": "A simple, extensible UI kit for Vue applications.",
   "keywords": [
     "fastkit",
@@ -44,31 +44,31 @@
     "src"
   ],
   "dependencies": {
-    "@fastkit/dom": "0.1.6",
-    "@fastkit/helpers": "0.13.6",
+    "@fastkit/color-scheme": "1.0.14",
+    "@fastkit/dom": "0.1.7",
+    "@fastkit/helpers": "0.13.7",
+    "@fastkit/color-scheme-gen": "0.13.14",
     "@fastkit/icon-font": "1.0.9",
-    "@fastkit/color-scheme": "1.0.13",
+    "@fastkit/media-match-gen": "0.13.14",
     "@fastkit/media-match": "1.0.9",
-    "@fastkit/rules": "0.13.7",
-    "@fastkit/media-match-gen": "0.13.13",
-    "@fastkit/tiny-logger": "0.13.6",
-    "@fastkit/vue-action": "0.2.14",
-    "@fastkit/vue-app-layout": "0.14.16",
-    "@fastkit/vue-click-outside": "0.1.14",
-    "@fastkit/vue-body-scroll-lock": "0.1.13",
-    "@fastkit/vue-color-scheme": "0.14.13",
-    "@fastkit/vue-form-control": "0.15.45",
-    "@fastkit/color-scheme-gen": "0.13.13",
-    "@fastkit/vue-keyboard": "0.1.6",
-    "@fastkit/vue-loading": "0.14.14",
-    "@fastkit/vue-location": "0.1.20",
-    "@fastkit/vue-media-match": "0.13.13",
-    "@fastkit/vue-scroller": "0.14.15",
-    "@fastkit/vue-resize": "0.1.13",
+    "@fastkit/rules": "0.13.8",
+    "@fastkit/tiny-logger": "0.13.7",
+    "@fastkit/vue-app-layout": "0.14.17",
+    "@fastkit/vue-action": "0.2.15",
+    "@fastkit/vue-body-scroll-lock": "0.1.14",
+    "@fastkit/vue-click-outside": "0.1.15",
+    "@fastkit/vue-form-control": "0.17.0",
+    "@fastkit/vue-color-scheme": "0.14.14",
+    "@fastkit/vue-keyboard": "0.1.7",
+    "@fastkit/vue-loading": "0.14.15",
+    "@fastkit/vue-location": "0.1.21",
+    "@fastkit/vue-media-match": "0.13.14",
+    "@fastkit/vue-resize": "0.1.14",
+    "@fastkit/vue-scroller": "0.14.16",
     "@fastkit/stylebase": "0.13.1",
-    "@fastkit/vue-stack": "0.15.35",
-    "@fastkit/vue-utils": "0.14.11",
-    "@fastkit/vue-transitions": "0.1.14"
+    "@fastkit/vue-stack": "0.15.36",
+    "@fastkit/vue-transitions": "0.1.15",
+    "@fastkit/vue-utils": "0.14.12"
   },
   "peerDependencies": {
     "vue": "^3.3.0",

package/src/components/VCheckbox/VCheckbox.tsx

@@ -26,37 +26,44 @@ export const VCheckbox = defineComponent({
       nodeType: VUI_CHECKBOX_SYMBOL,
       parentNodeType: VUI_CHECKBOX_GROUP_SYMBOL,
     });
+
     const control = useControl(props);
     const isIndeterminate = computed(() => props.indeterminate);
-    return {
-      ...nodeControl.expose(),
-      ...control,
-      isIndeterminate,
+    const classes = computed(() => [
+      'v-checkbox',
+      {
+        'v-checkbox--selected': nodeControl.selected,
+        'v-checkbox--indeterminate': isIndeterminate.value,
+      },
+      control.classes.value,
+    ]);
+    const api = nodeControl.extend({
+      get isIndeterminate() {
+        return isIndeterminate.value;
+      },
+    });
+
+    ctx.expose({
+      control: api,
+    });
+
+    const slots = {
+      input: () => nodeControl.createInputElement({ type: 'checkbox' }),
+      faux: () => <span class="v-checkbox__faux"></span>,
+      label: () => ctx.slots.default?.(),
+    };
+
+    return () => {
+      return (
+        <VCheckable
+          class={classes.value}
+          checked={nodeControl.selected || isIndeterminate.value}
+          invalid={nodeControl.invalid}
+          disabled={nodeControl.isDisabled}
+          readonly={nodeControl.isReadonly}
+          v-slots={slots}
+        />
+      );
     };
-  },
-  render() {
-    const { selectorItemControl, isIndeterminate } = this;
-    return (
-      <VCheckable
-        class={[
-          'v-checkbox',
-          {
-            'v-checkbox--selected': selectorItemControl.selected,
-            'v-checkbox--indeterminate': isIndeterminate,
-          },
-          this.classes,
-        ]}
-        checked={this.selected || isIndeterminate}
-        invalid={this.invalid}
-        disabled={this.isDisabled}
-        readonly={this.isReadonly}
-        v-slots={{
-          input: () =>
-            selectorItemControl.createInputElement({ type: 'checkbox' }),
-          faux: () => <span class="v-checkbox__faux"></span>,
-          label: () => this.$slots.default?.(),
-        }}
-      />
-    );
   },
 });

package/src/components/VForm/VForm.tsx

@@ -5,9 +5,8 @@ import {
   useForm,
 } from '@fastkit/vue-form-control';
 import { DefineSlotsType, defineSlots } from '@fastkit/vue-utils';
-import { getDocumentScroller } from '@fastkit/vue-scroller';
 import { createControlProps, useControl } from '../../composables';
-import { VUI_FORM_SYMBOL, useVui } from '../../injections';
+import { VUI_FORM_SYMBOL } from '../../injections';
 
 const { props, emits } = createFormSettings({
   nodeType: VUI_FORM_SYMBOL,
@@ -24,7 +23,6 @@ export function createVFormProps() {
     ...props,
     ...createControlProps(),
     ...formSlots(),
-    // disableAutoScroll: Boolean,
   };
 }
 
@@ -34,15 +32,8 @@ export const VForm = defineComponent({
   emits,
   slots: formSlots,
   setup(props, ctx) {
-    const vui = useVui();
     const nodeControl = useForm(props, ctx as any, {
       nodeType: VUI_FORM_SYMBOL,
-      scrollToElement: (el) => {
-        const scroller = getDocumentScroller();
-        return scroller.toElement(el, {
-          offset: vui.getAutoScrollToElementOffsetTop(),
-        });
-      },
     });
     const classes = computed(() => {
       return [
@@ -59,21 +50,18 @@ export const VForm = defineComponent({
     });
     useControl(props);
 
-    return {
-      ...nodeControl.expose(),
-      classes,
-    };
-  },
-  render() {
-    const { form } = this;
-    return (
+    ctx.expose({
+      control: nodeControl,
+    });
+
+    return () => (
       <form
-        ref={this.formRef()}
-        class={this.classes}
-        action={this.nativeAction}
-        spellcheck={this.spellcheck}
-        onSubmit={form.handleSubmit}>
-        {this.$slots.default?.(form)}
+        ref={nodeControl.formRef()}
+        class={classes.value}
+        action={nodeControl.nativeAction}
+        spellcheck={nodeControl.spellcheck}
+        onSubmit={nodeControl.handleSubmit}>
+        {ctx.slots.default?.(nodeControl)}
       </form>
     );
   },

package/src/components/VFormControl/VFormControl.tsx

@@ -78,11 +78,14 @@ export const VFormControl = defineComponent({
       return hinttipDelay;
     });
 
-    ctx.expose(control.expose());
+    ctx.expose({
+      control,
+    });
 
     const colorProvider = useVuiColorProvider();
 
     const classes = computed(() => [
+      'v-form-control',
       {
         'v-form-control--validating': control.validating,
         'v-form-control--pending': control.pending,
@@ -121,7 +124,7 @@ export const VFormControl = defineComponent({
       const _hinttipDelay = hinttipDelay.value;
 
       return (
-        <div class={['v-form-control', classes.value]}>
+        <div class={classes.value}>
           {label && (
             <label class="v-form-control__label" onClick={handleClick}>
               {label}
@@ -136,11 +139,11 @@ export const VFormControl = defineComponent({
                       : undefined
                   }
                   v-slots={{
-                    activator: (ctx) => (
+                    activator: (tooltip) => (
                       <a
                         class="v-form-control__label__hinttip"
                         href="javascript:void(0)"
-                        {...ctx.attrs}>
+                        {...tooltip.attrs}>
                         {hinttip.tip}
                       </a>
                     ),

package/src/components/VFormGroup/VFormGroup.tsx

@@ -0,0 +1,45 @@
+import { defineComponent } from 'vue';
+import {
+  FormGroupControl,
+  createFormGroupSettings,
+  useFormGroup,
+} from '@fastkit/vue-form-control';
+import { DefineSlotsType, defineSlots } from '@fastkit/vue-utils';
+import { createControlProps, useControl } from '../../composables';
+import { VUI_FORM_GROUP_SYMBOL } from '../../injections';
+
+const { props, emits } = createFormGroupSettings();
+
+export type VFormGroupSlots = DefineSlotsType<{
+  default?: (form: FormGroupControl) => any;
+}>;
+
+export const formGroupSlots = defineSlots<VFormGroupSlots>();
+
+export function createVFormGroupProps() {
+  return {
+    ...props,
+    ...createControlProps(),
+    ...formGroupSlots(),
+  };
+}
+
+export const VFormGroup = defineComponent({
+  name: 'VFormGroup',
+  inheritAttrs: false,
+  props: createVFormGroupProps(),
+  emits,
+  slots: formGroupSlots,
+  setup(props, ctx) {
+    const nodeControl = useFormGroup(props, ctx as any, {
+      nodeType: VUI_FORM_GROUP_SYMBOL,
+    });
+    useControl(props);
+
+    ctx.expose({
+      control: nodeControl,
+    });
+
+    return () => ctx.slots.default?.(nodeControl);
+  },
+});

package/src/components/VFormGroup/index.ts

@@ -0,0 +1 @@
+export * from './VFormGroup';

package/src/components/VOption/VOption.tsx

@@ -33,24 +33,18 @@ export const VOption = defineComponent({
         control.classes.value,
       ];
     });
-    return {
-      ...nodeControl.expose(),
-      classes,
+
+    return () => {
+      return (
+        <label
+          class={classes.value}
+          onClick={nodeControl.handleClickElement}
+          tabindex={nodeControl.tabindex}
+          data-value={nodeControl.propValue}
+          aria-disabled={nodeControl.isDisabled}>
+          <span class="v-option__label">{ctx.slots.default?.()}</span>
+        </label>
+      );
     };
   },
-  render() {
-    const { selectorItemControl, classes } = this;
-    return (
-      <label
-        class={classes}
-        onClick={selectorItemControl.handleClickElement}
-        tabindex={selectorItemControl.tabindex}
-        data-value={selectorItemControl.propValue}
-        {...({
-          'aria-disabled': selectorItemControl.isDisabled,
-        } as any)}>
-        <span class="v-option__label">{this.$slots.default?.()}</span>
-      </label>
-    );
-  },
 });

package/src/components/VOptionGroup/VOptionGroup.tsx

@@ -41,20 +41,19 @@ export const VOptionGroup = defineComponent({
         },
       ];
     });
-    return {
-      ...groupControl.expose(),
-      classes,
-      labelSlot,
+
+    ctx.expose({
+      control: groupControl,
+    });
+
+    return () => {
+      const label = labelSlot.value?.(groupControl);
+      return (
+        <div class={classes}>
+          {!!label && <div class="v-option-group__label">{label}</div>}
+          {ctx.slots.default?.()}
+        </div>
+      );
     };
   },
-  render() {
-    const { labelSlot, classes, groupControl } = this;
-    const label = labelSlot ? labelSlot(groupControl) : undefined;
-    return (
-      <div class={classes}>
-        {!!label && <div class="v-option-group__label">{label}</div>}
-        {this.$slots.default?.()}
-      </div>
-    );
-  },
 });

package/src/components/VRadio/VRadio.tsx

@@ -1,5 +1,5 @@
 import './VRadio.scss';
-import { defineComponent } from 'vue';
+import { defineComponent, computed } from 'vue';
 import {
   createFormSelectorItemSettings,
   useFormSelectorItemControl,
@@ -23,33 +23,30 @@ export const VRadio = defineComponent({
       parentNodeType: VUI_RADIO_GROUP_SYMBOL,
     });
     const control = useControl(props);
-    return {
-      ...nodeControl.expose(),
-      ...control,
+    const classes = computed(() => [
+      'v-radio',
+      {
+        'v-radio--selected': nodeControl.selected,
+      },
+      control.classes.value,
+    ]);
+    const slots = {
+      input: () => nodeControl.createInputElement({ type: 'radio' }),
+      faux: () => <span class="v-radio__faux"></span>,
+      label: () => ctx.slots.default?.(),
+    };
+
+    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-radio',
-          {
-            'v-radio--selected': selectorItemControl.selected,
-          },
-          this.classes,
-        ]}
-        checked={this.selected}
-        invalid={this.invalid}
-        disabled={this.isDisabled}
-        readonly={this.isReadonly}
-        v-slots={{
-          input: () =>
-            selectorItemControl.createInputElement({ type: 'radio' }),
-          faux: () => <span class="v-radio__faux"></span>,
-          label: () => this.$slots.default?.(),
-        }}
-      />
-    );
   },
 });