@fastkit/vui 0.7.14 → 0.7.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.7.14",
+  "version": "0.7.17",
   "description": "@fastkit/vui",
   "buildOptions": {
     "name": "Vui",
@@ -32,11 +32,11 @@
     "vue": "^3.2.26"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.7.14",
-    "@fastkit/icon-font": "0.7.14",
-    "@fastkit/tiny-logger": "0.7.14",
-    "@fastkit/vite-kit": "0.7.14",
-    "@fastkit/vue-kit": "0.7.14",
+    "@fastkit/color-scheme": "0.7.17",
+    "@fastkit/icon-font": "0.7.17",
+    "@fastkit/tiny-logger": "0.7.17",
+    "@fastkit/vite-kit": "0.7.17",
+    "@fastkit/vue-kit": "0.7.17",
     "@tiptap/extension-link": "^2.0.0-beta.35",
     "@tiptap/extension-underline": "^2.0.0-beta.22",
     "@tiptap/starter-kit": "^2.0.0-beta.168",

package/src/components/VFormControl/VFormControl.scss

@@ -19,12 +19,54 @@
   }
 
   &__label {
+    display: flex;
+    align-items: center;
     align-self: flex-start;
     font-size: var(--control-label-font-size);
     font-weight: var(--control-label-font-weight);
     line-height: var(--control-label-height);
     color: var(--my-label-color);
     letter-spacing: 0.00938em;
+
+    &__hinttip {
+      display: inline-flex;
+      align-items: center;
+      margin-top: -0.2em;
+      margin-left: 0.6em;
+      // font-size: calc(var(--root-em) * 0.5);
+      font-size: 80%;
+      line-height: 1;
+      color: inherit;
+      // color: var(--palette-muted);
+      text-decoration: none;
+      letter-spacing: normal;
+      cursor: pointer;
+
+      // &:hover,
+      // &:focus {
+      //   text-decoration: underline;
+      // }
+
+      &__icon {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 120%;
+        text-decoration: none !important;
+      }
+
+      &:hover &__icon,
+      &:focus &__icon {
+        &::before {
+          opacity: 0.1;
+        }
+      }
+
+      &__hint {
+        font-size: calc(var(--root-em) * 0.75);
+      }
+    }
   }
 
   // &--disabled &__body {

package/src/components/VFormControl/VFormControl.tsx

@@ -9,6 +9,8 @@ import {
   renderSlotOrEmpty,
 } from '@fastkit/vue-kit';
 import { useVuiColorProvider, useVui } from '../../injections';
+import { VIcon } from '../VIcon';
+import { VTooltip } from '../kits';
 
 const { props, emits } = createFormControlSettings();
 
@@ -24,10 +26,19 @@ export const VFormControl = defineComponent({
   },
   emits,
   setup(props, ctx) {
-    const control = useFormControl(props, ctx);
+    const vui = useVui();
+
+    const control = useFormControl(props, ctx, {
+      hinttipPrepend: () => (
+        <VIcon
+          class="v-form-control__label__hinttip__icon"
+          name={vui.icon('hinttip')}
+        />
+      ),
+    });
+
     ctx.expose(control.expose());
 
-    const vui = useVui();
     const colorProvider = useVuiColorProvider();
 
     const classes = computed(() => [
@@ -53,6 +64,8 @@ export const VFormControl = defineComponent({
       const label = control.renderLabel();
       const message = control.renderMessage();
       const appends = control.renderInfoAppends();
+      const hinttip = control.renderHinttip();
+
       return (
         <div class={['v-form-control', classes.value]}>
           {label && (
@@ -63,6 +76,25 @@ export const VFormControl = defineComponent({
               }}>
               {label}
               {control.required && vui.getRequiredChip()}
+              {hinttip && (
+                <VTooltip
+                  top
+                  openOnHover={false}
+                  v-slots={{
+                    activator: (ctx) => (
+                      <a
+                        class="v-form-control__label__hinttip"
+                        href="javascript:void(0)"
+                        {...ctx.attrs}>
+                        {hinttip.tip}
+                      </a>
+                    ),
+                  }}>
+                  <div class="v-form-control__label__hinttip__hint">
+                    {hinttip.hint}
+                  </div>
+                </VTooltip>
+              )}
             </label>
           )}
           <div class="v-form-control__body">

package/src/components/VSelect/VSelect.tsx

@@ -115,6 +115,7 @@ export const VSelect = defineComponent({
         class={['v-select', this.classes]}
         label={this.label}
         hint={this.hint}
+        hinttip={this.hinttip}
         hiddenInfo={this.hiddenInfo}
         onClickLabel={(ev) => {
           this.focus();

package/src/components/VTextField/VTextField.tsx

@@ -65,6 +65,7 @@ export const VTextField = defineComponent({
         class={['v-text-field', this.classes]}
         label={this.label}
         hint={this.hint}
+        hinttip={this.hinttip}
         onClickLabel={(ev) => {
           this.focus();
         }}

package/src/components/VTextarea/VTextarea.tsx

@@ -57,6 +57,7 @@ export const VTextarea = defineComponent({
         class={['v-textarea', this.classes]}
         label={this.label}
         hint={this.hint}
+        hinttip={this.hinttip}
         hiddenInfo={this.hiddenInfo}
         onClickLabel={(ev) => {
           this.focus();

package/src/components/VWysiwygEditor/VWysiwygEditor.tsx

@@ -235,6 +235,7 @@ export const VWysiwygEditor = defineComponent({
         ]}
         label={this.label}
         hint={this.hint}
+        hinttip={this.hinttip}
         hiddenInfo={this.hiddenInfo}
         onClickLabel={(ev) => {
           this.focus('start', { scrollIntoView: true });

package/src/components/kits.ts

@@ -1 +1 @@
-export { VDialog, VMenu, VSnackbar } from '@fastkit/vue-kit';
+export { VDialog, VMenu, VSnackbar, VTooltip } from '@fastkit/vue-kit';

package/src/composables/form-selector.tsx

@@ -75,6 +75,7 @@ export function defineFormSelectorComponent(
           ]}
           label={this.label}
           hint={this.hint}
+          hinttip={this.hinttip}
           v-slots={{
             ...this.$slots,
             default: () => (

package/src/service.tsx

@@ -68,6 +68,7 @@ export interface VuiServiceIconSettings {
   editorLinkOff: IconName;
   editorUndo: IconName;
   editorRedo: IconName;
+  hinttip: IconName;
 }
 
 export type VuiVNodeResolver = () => VNodeChild;

package/src/tool/vite-plugin.ts

@@ -170,6 +170,7 @@ export function viteVuiPlugin(
       editorLinkOff: 'mdi-link-off' as any,
       editorUndo: 'mdi-undo-variant' as any,
       editorRedo: 'mdi-redo-variant' as any,
+      hinttip: 'mdi-help-circle-outline' as any,
       // navigationExpand: (gen, active) => {
       //   return gen({
       //     name: 'mdi-menu-down' as any,