@fastkit/vui 0.7.13 → 0.7.20

package/dist/vui.mjs

@@ -1,7 +1,7 @@
-import { createPropsOptions, createFormControlSettings, defineSlotsProps, useFormControl, renderSlotOrEmpty, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, resolveVNodeChildOrSlots, useParentFormNode, VMenu, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm, getDocumentScroller, useVScrollerRef, VScroller, useInjectTheme, VStackRoot, resolveVStackDynamicInput, VueColorSchemePlugin, installVueStackPlugin } from '@fastkit/vue-kit';
+import { createPropsOptions, createFormControlSettings, defineSlotsProps, useFormControl, VTooltip, renderSlotOrEmpty, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, resolveVNodeChildOrSlots, useParentFormNode, VMenu, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm, getDocumentScroller, useVScrollerRef, VScroller, useInjectTheme, VStackRoot, resolveVStackDynamicInput, VueColorSchemePlugin, installVueStackPlugin } from '@fastkit/vue-kit';
 export * from '@fastkit/vue-kit';
-export { VDialog, VMenu, VSnackbar } from '@fastkit/vue-kit';
-import { inject, computed, provide, defineComponent, createVNode, mergeProps, isVNode, cloneVNode, ref, watch, withDirectives, createTextVNode, Fragment, vShow, onBeforeUpdate, vModelSelect, onMounted, onBeforeUnmount, Transition } from 'vue';
+export { VDialog, VMenu, VSnackbar, VTooltip } from '@fastkit/vue-kit';
+import { inject, computed, provide, createVNode, mergeProps, defineComponent, isVNode, cloneVNode, ref, watch, withDirectives, createTextVNode, Fragment, vShow, onBeforeUpdate, vModelSelect, onMounted, onBeforeUnmount, Transition } from 'vue';
 import { useRouter, RouterLink, useLink, useRoute } from 'vue-router';
 import { createPropsOptions as createPropsOptions$1, htmlAttributesPropOptions, defineSlotsProps as defineSlotsProps$1, renderSlotOrEmpty as renderSlotOrEmpty$1, navigationableInheritProps, VLink, isFragment, rawNumberPropType, resolveNumberish, resizeDirectiveArgument, VExpandTransition, LocationService, setDefaultRouterLink } from '@fastkit/vue-utils';
 import { getDocumentScroller as getDocumentScroller$1 } from '@fastkit/vue-scroller';
@@ -134,10 +134,99 @@ function useControlField(props, opts = {}) {
     return provider;
 }
 
+//   prop: RawIconProp<T>,
+//   payload: () => T,
+// ): RawIconProp {
+//   if (!prop || typeof prop !== 'function') {
+//     return prop;
+//   }
+//   const fn = (gen: IconGenerator): VNodeChild => {
+//     const t = payload();
+//     return prop(gen, t);
+//   };
+//   return fn;
+// }
+// export const rawRawIconProp = [String, Function] as PropType<RawIconProp>;
+
+const _rawIconProp = [String, Function];
+function rawIconProp() {
+  return _rawIconProp;
+}
+function resolveRawIconProp(payload, prop, extraProps) {
+  if (!prop) return;
+  return typeof prop === 'function' ? prop(input => createVNode(VIcon, mergeProps(input, extraProps), null), payload) : createVNode(VIcon, mergeProps(extraProps, {
+    "name": prop
+  }), null);
+}
+const iconProps = createPropsOptions$1({
+  name: {
+    type: String,
+    required: true
+  },
+  rotate: {
+    type: Number
+  }
+});
+const VIcon = defineComponent({
+  name: 'VIcon',
+  props: { ...iconProps
+  },
+  emits: {},
+
+  setup(props, ctx) {
+    const iconName = computed(() => props.name);
+    const clickable = computed(() => typeof ctx.attrs.onClick !== 'undefined');
+    const classes = computed(() => [{
+      'v-icon--clickable': clickable.value
+    }]);
+    const bodyClasses = computed(() => `icon-${iconName.value}`);
+    const bodyStyles = computed(() => {
+      const {
+        rotate
+      } = props;
+      if (!rotate) return;
+      return {
+        transform: `rotate(${rotate}deg)`
+      };
+    });
+    return () => createVNode("span", {
+      "class": [`v-icon notranslate`, classes.value]
+    }, [createVNode("i", {
+      "class": ['v-icon__body icon', bodyClasses.value],
+      "style": bodyStyles.value
+    }, null)]);
+  }
+
+});
+
 const {
   props: props$8,
   emits: emits$8
 } = createFormControlSettings();
+function createRequiredChipRenderer(required, props, vui = useVui()) {
+  return () => {
+    if (!required()) return;
+    let chip;
+    const {
+      requiredChip
+    } = props;
+    if (requiredChip === false) return;
+
+    if (requiredChip) {
+      if (typeof requiredChip === 'string') {
+        chip = requiredChip;
+      } else if (typeof requiredChip === 'function') {
+        chip = requiredChip();
+      }
+    }
+
+    if (chip === undefined) {
+      chip = vui.getRequiredChip();
+    }
+
+    return chip;
+  };
+}
 const VFormControl = defineComponent({
   name: 'VFormControl',
   props: { ...props$8,
@@ -146,9 +235,14 @@ const VFormControl = defineComponent({
   emits: emits$8,
 
   setup(props, ctx) {
-    const control = useFormControl(props, ctx);
-    ctx.expose(control.expose());
     const vui = useVui();
+    const control = useFormControl(props, ctx, {
+      hinttipPrepend: () => createVNode(VIcon, {
+        "class": "v-form-control__label__hinttip__icon",
+        "name": vui.icon('hinttip')
+      }, null)
+    });
+    ctx.expose(control.expose());
     const colorProvider = useVuiColorProvider();
     const classes = computed(() => [{
       'v-form-control--validating': control.validating,
@@ -163,10 +257,12 @@ const VFormControl = defineComponent({
       'v-form-control--invalid': control.invalid,
       'v-form-control--valid': control.valid
     }, colorProvider.className(control.invalid && !control.readonly ? 'error' : 'primary')]);
+    const getRequiredChip = createRequiredChipRenderer(() => control.required, props, vui);
     return () => {
       const label = control.renderLabel();
       const message = control.renderMessage();
       const appends = control.renderInfoAppends();
+      const hinttip = control.renderHinttip();
       return createVNode("div", {
         "class": ['v-form-control', classes.value]
       }, [label && createVNode("label", {
@@ -174,7 +270,18 @@ const VFormControl = defineComponent({
         "onClick": ev => {
           ctx.emit('clickLabel', ev, control);
         }
-      }, [label, control.required && vui.getRequiredChip()]), createVNode("div", {
+      }, [label, getRequiredChip(), hinttip && createVNode(VTooltip, {
+        "top": true,
+        "openOnHover": false
+      }, {
+        default: () => [createVNode("div", {
+          "class": "v-form-control__label__hinttip__hint"
+        }, [hinttip.hint])],
+        activator: ctx => createVNode("a", mergeProps({
+          "class": "v-form-control__label__hinttip",
+          "href": "javascript:void(0)"
+        }, ctx.attrs), [hinttip.tip])
+      })]), createVNode("div", {
         "class": "v-form-control__body"
       }, [renderSlotOrEmpty(ctx.slots, 'default', control), !props.hiddenInfo && createVNode("div", {
         "class": "v-form-control__info"
@@ -234,7 +341,9 @@ function defineFormSelectorComponent(opts) {
           'v-form-selector--stacked': this.stacked
         }],
         "label": this.label,
-        "hint": this.hint
+        "hint": this.hint,
+        "hinttip": this.hinttip,
+        "requiredChip": this.requiredChip
       }, { ...this.$slots,
         default: () => createVNode("div", {
           "class": "v-form-selector__body"
@@ -562,71 +671,6 @@ const VCardActions = defineComponent({
 
 });
 
-//   prop: RawIconProp<T>,
-//   payload: () => T,
-// ): RawIconProp {
-//   if (!prop || typeof prop !== 'function') {
-//     return prop;
-//   }
-//   const fn = (gen: IconGenerator): VNodeChild => {
-//     const t = payload();
-//     return prop(gen, t);
-//   };
-//   return fn;
-// }
-// export const rawRawIconProp = [String, Function] as PropType<RawIconProp>;
-
-const _rawIconProp = [String, Function];
-function rawIconProp() {
-  return _rawIconProp;
-}
-function resolveRawIconProp(payload, prop, extraProps) {
-  if (!prop) return;
-  return typeof prop === 'function' ? prop(input => createVNode(VIcon, mergeProps(input, extraProps), null), payload) : createVNode(VIcon, mergeProps(extraProps, {
-    "name": prop
-  }), null);
-}
-const iconProps = createPropsOptions$1({
-  name: {
-    type: String,
-    required: true
-  },
-  rotate: {
-    type: Number
-  }
-});
-const VIcon = defineComponent({
-  name: 'VIcon',
-  props: { ...iconProps
-  },
-  emits: {},
-
-  setup(props, ctx) {
-    const iconName = computed(() => props.name);
-    const clickable = computed(() => typeof ctx.attrs.onClick !== 'undefined');
-    const classes = computed(() => [{
-      'v-icon--clickable': clickable.value
-    }]);
-    const bodyClasses = computed(() => `icon-${iconName.value}`);
-    const bodyStyles = computed(() => {
-      const {
-        rotate
-      } = props;
-      if (!rotate) return;
-      return {
-        transform: `rotate(${rotate}deg)`
-      };
-    });
-    return () => createVNode("span", {
-      "class": [`v-icon notranslate`, classes.value]
-    }, [createVNode("i", {
-      "class": ['v-icon__body icon', bodyClasses.value],
-      "style": bodyStyles.value
-    }, null)]);
-  }
-
-});
-
 function resolveRawVButtonIcon(raw, type = 'main') {
   if (!raw) return;
   return typeof raw === 'function' ? raw : () => createVNode(VIcon, {
@@ -2035,7 +2079,9 @@ const VSelect = defineComponent({
       "class": ['v-select', this.classes],
       "label": this.label,
       "hint": this.hint,
+      "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
+      "requiredChip": this.requiredChip,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -2098,7 +2144,16 @@ const VSelect = defineComponent({
           }, [createVNode("div", {
             "class": "v-select__selections__inner"
           }, [this.renderSelections(selectedItems)])])],
-          endAdornment: () => createVNode(VIcon, {
+          endAdornment: () => this.clearable && this.nodeControl.value != null && createVNode(VButton, {
+            "key": "clear",
+            "icon": this.$vui.icon('clear'),
+            "rounded": true,
+            "onClick": ev => {
+              ev.stopPropagation();
+              this.nodeControl.clear();
+            }
+          }, null) || createVNode(VIcon, {
+            "key": "icon",
             "name": this.iconName,
             "rotate": this.menuOpened ? 180 : 0
           }, null)
@@ -2169,6 +2224,8 @@ const VTextField = defineComponent({
       "class": ['v-text-field', this.classes],
       "label": this.label,
       "hint": this.hint,
+      "hinttip": this.hinttip,
+      "requiredChip": this.requiredChip,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -2229,7 +2286,9 @@ const VTextarea = defineComponent({
       "class": ['v-textarea', this.classes],
       "label": this.label,
       "hint": this.hint,
+      "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
+      "requiredChip": this.requiredChip,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -2451,7 +2510,9 @@ const VWysiwygEditor = defineComponent({
       }],
       "label": this.label,
       "hint": this.hint,
+      "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
+      "requiredChip": this.requiredChip,
       "onClickLabel": ev => {
         this.focus('start', {
           scrollIntoView: true
@@ -4263,4 +4324,4 @@ function installVuiPlugin(app, opts) {
   return app.use(VuiPlugin, opts);
 }
 
-export { CONTROL_FIELD_VARIANTS, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VBreadcrumbs, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, WysiwygBulletListTool, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygOrderedListTool, WysiwygTextColorTool, configureDataTableDefaults, createCardProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };
+export { CONTROL_FIELD_VARIANTS, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VBreadcrumbs, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, WysiwygBulletListTool, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygOrderedListTool, WysiwygTextColorTool, configureDataTableDefaults, createCardProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.7.13",
+  "version": "0.7.20",
   "description": "@fastkit/vui",
   "buildOptions": {
     "name": "Vui",
@@ -32,11 +32,11 @@
     "vue": "^3.2.26"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.7.13",
-    "@fastkit/icon-font": "0.7.13",
-    "@fastkit/tiny-logger": "0.7.13",
-    "@fastkit/vite-kit": "0.7.13",
-    "@fastkit/vue-kit": "0.7.13",
+    "@fastkit/color-scheme": "0.7.20",
+    "@fastkit/icon-font": "0.7.20",
+    "@fastkit/tiny-logger": "0.7.20",
+    "@fastkit/vite-kit": "0.7.20",
+    "@fastkit/vue-kit": "0.7.20",
     "@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

@@ -1,5 +1,5 @@
 import './VFormControl.scss';
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, VNodeChild } from 'vue';
 import {
   createFormControlSettings,
   useFormControl,
@@ -7,11 +7,41 @@ import {
   defineSlotsProps,
   FormControl,
   renderSlotOrEmpty,
+  RequiredChipSource,
 } from '@fastkit/vue-kit';
 import { useVuiColorProvider, useVui } from '../../injections';
+import type { VuiService } from '../../service';
+import { VIcon } from '../VIcon';
+import { VTooltip } from '../kits';
 
 const { props, emits } = createFormControlSettings();
 
+export function createRequiredChipRenderer(
+  required: () => boolean,
+  props: {
+    requiredChip?: RequiredChipSource;
+  },
+  vui: VuiService = useVui(),
+) {
+  return () => {
+    if (!required()) return;
+    let chip: VNodeChild;
+    const { requiredChip } = props;
+    if (requiredChip === false) return;
+    if (requiredChip) {
+      if (typeof requiredChip === 'string') {
+        chip = requiredChip;
+      } else if (typeof requiredChip === 'function') {
+        chip = requiredChip();
+      }
+    }
+    if (chip === undefined) {
+      chip = vui.getRequiredChip();
+    }
+    return chip;
+  };
+}
+
 export const VFormControl = defineComponent({
   name: 'VFormControl',
   props: {
@@ -24,10 +54,18 @@ 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(() => [
@@ -49,10 +87,18 @@ export const VFormControl = defineComponent({
       ),
     ]);
 
+    const getRequiredChip = createRequiredChipRenderer(
+      () => control.required,
+      props,
+      vui,
+    );
+
     return () => {
       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 && (
@@ -62,7 +108,26 @@ export const VFormControl = defineComponent({
                 ctx.emit('clickLabel', ev, control);
               }}>
               {label}
-              {control.required && vui.getRequiredChip()}
+              {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

@@ -25,6 +25,7 @@ import { VUI_SELECT_SYMBOL, useVui } from '../../injections';
 import { VIcon } from '../VIcon';
 import { VMenu } from '../kits';
 import { VOption } from '../VOption';
+import { VButton } from '..';
 
 const { props, emits } = createFormSelectorSettings();
 
@@ -115,7 +116,9 @@ export const VSelect = defineComponent({
         class={['v-select', this.classes]}
         label={this.label}
         hint={this.hint}
+        hinttip={this.hinttip}
         hiddenInfo={this.hiddenInfo}
+        requiredChip={this.requiredChip}
         onClickLabel={(ev) => {
           this.focus();
         }}
@@ -182,11 +185,24 @@ export const VSelect = defineComponent({
                           </div>
                         </div>,
                       ],
-                      endAdornment: () => (
-                        <VIcon
-                          name={this.iconName}
-                          rotate={this.menuOpened ? 180 : 0}></VIcon>
-                      ),
+                      endAdornment: () =>
+                        (this.clearable && this.nodeControl.value != null && (
+                          <VButton
+                            key="clear"
+                            icon={this.$vui.icon('clear')}
+                            rounded
+                            onClick={(ev) => {
+                              ev.stopPropagation();
+                              this.nodeControl.clear();
+                            }}
+                          />
+                        )) || (
+                          <VIcon
+                            key="icon"
+                            name={this.iconName}
+                            rotate={this.menuOpened ? 180 : 0}
+                          />
+                        ),
                     }}
                   />,
                 ],

package/src/components/VTextField/VTextField.tsx

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

package/src/components/VTextarea/VTextarea.tsx

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

package/src/components/VWysiwygEditor/VWysiwygEditor.tsx

@@ -235,7 +235,9 @@ export const VWysiwygEditor = defineComponent({
         ]}
         label={this.label}
         hint={this.hint}
+        hinttip={this.hinttip}
         hiddenInfo={this.hiddenInfo}
+        requiredChip={this.requiredChip}
         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,8 @@ export function defineFormSelectorComponent(
           ]}
           label={this.label}
           hint={this.hint}
+          hinttip={this.hinttip}
+          requiredChip={this.requiredChip}
           v-slots={{
             ...this.$slots,
             default: () => (

package/src/service.tsx

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

package/src/tool/vite-plugin.ts

@@ -170,6 +170,8 @@ 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,
+      clear: 'mdi-close' as any,
       // navigationExpand: (gen, active) => {
       //   return gen({
       //     name: 'mdi-menu-down' as any,