@fastkit/vui 0.16.0 → 0.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "description": "A simple, extensible UI kit for Vue applications.",
   "keywords": [
     "fastkit",
@@ -66,7 +66,7 @@
     "@fastkit/vue-media-match": "0.13.6",
     "@fastkit/vue-resize": "0.1.2",
     "@fastkit/vue-scroller": "0.14.0",
-    "@fastkit/vue-stack": "0.15.0",
+    "@fastkit/vue-stack": "0.15.1",
     "@fastkit/vue-transitions": "0.1.2",
     "@fastkit/vue-utils": "0.14.0"
   },

package/src/components/VApp/VApp.tsx

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import { VAppLayout } from '@fastkit/vue-app-layout';
-import { VStackRoot } from '@fastkit/vue-stack';
+import { VStackContainer } from '@fastkit/vue-stack';
 import { useInjectTheme } from '@fastkit/vue-color-scheme';
 
 export const VApp = defineComponent({
@@ -10,9 +10,9 @@ export const VApp = defineComponent({
 
     return () => {
       return (
-        <VStackRoot>
+        <VStackContainer>
           <VAppLayout v-slots={ctx.slots} />
-        </VStackRoot>
+        </VStackContainer>
       );
     };
   },

package/src/components/VControlField/VControlField.tsx

@@ -138,32 +138,20 @@ export const VControlField = defineComponent({
       );
     };
 
-    const handleClick = (ev: MouseEvent) => {
-      ctx.emit('click', ev);
-      // if (ev.target === hostElRef.value) {
-      //   ctx.emit('clickHost', ev);
-      // }
-    };
+    const handleClick = (ev: MouseEvent) => ctx.emit('click', ev);
 
-    return {
-      classes,
-      renderAdornment,
-      hostElRef: () => hostElRef,
-      handleClick,
-      // computedTabindex,
+    return () => {
+      return (
+        <div
+          class={classes.value}
+          onClick={handleClick}
+          // tabindex={this.computedTabindex}
+          ref={hostElRef}>
+          {renderAdornment('start')}
+          <div class="v-control-field__body">{ctx.slots.default?.()}</div>
+          {renderAdornment('end')}
+        </div>
+      );
     };
   },
-  render() {
-    return (
-      <div
-        class={this.classes}
-        onClick={this.handleClick}
-        // tabindex={this.computedTabindex}
-        ref={this.hostElRef()}>
-        {this.renderAdornment('start')}
-        <div class="v-control-field__body">{this.$slots.default?.()}</div>
-        {this.renderAdornment('end')}
-      </div>
-    );
-  },
 });

package/src/components/VFormControl/VFormControl.tsx

@@ -111,6 +111,8 @@ export const VFormControl = defineComponent({
       vui,
     );
 
+    const handleClick = (ev: MouseEvent) => ctx.emit('clickLabel', ev, control);
+
     return () => {
       const label = control.renderLabel();
       const message = control.renderMessage();
@@ -121,11 +123,7 @@ export const VFormControl = defineComponent({
       return (
         <div class={['v-form-control', classes.value]}>
           {label && (
-            <label
-              class="v-form-control__label"
-              onClick={(ev) => {
-                ctx.emit('clickLabel', ev, control);
-              }}>
+            <label class="v-form-control__label" onClick={handleClick}>
               {label}
               {getRequiredChip()}
               {hinttip && (

package/src/components/VSelect/VSelect.tsx

@@ -119,7 +119,7 @@ export const VSelect = defineComponent({
     });
 
     const focus = (opts?: FocusOptions): void => {
-      fieldRef.value && fieldRef.value.focus(opts);
+      fieldRef.value?.focus?.(opts);
     };
 
     const renderSelections = (selectedItems: FormSelectorItemControl[]) => {

package/src/components/VTooltip/VTooltip.scss

@@ -2,8 +2,12 @@
   --menu-shadow: var(--tooltip-shadow);
 
   font-size: var(--tooltip-font-size);
-  color: var(--tooltip-color) !important;
-  background: var(--tooltip-background) !important;
+
+  .v-menu__body {
+    color: var(--tooltip-color) !important;
+    background: var(--tooltip-background) !important;
+  }
+
   border-radius: var(--tooltip-radius);
   // opacity: var(--tooltip-opacity);