@fastkit/vui 0.7.11 → 0.7.17

package/dist/tool/index.js

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

package/dist/tool/vite-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vite-plugin.d.ts","sourceRoot":"","sources":["../../../../../../../packages/vui/src/tool/vite-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAK9B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AA+F/C,MAAM,WAAW,oBACf,SAAQ,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IACzE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAGD,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC;IACvD,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,2BAA2B,CAAC;IACtC,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,EAAE,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAC3B,OAAO,GAAE,oBAAyB,GACjC,mBAAmB,CAuJrB"}
+{"version":3,"file":"vite-plugin.d.ts","sourceRoot":"","sources":["../../../../../../../packages/vui/src/tool/vite-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAK9B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AA+F/C,MAAM,WAAW,oBACf,SAAQ,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IACzE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAGD,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC;IACvD,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,2BAA2B,CAAC;IACtC,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,EAAE,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAC3B,OAAO,GAAE,oBAAyB,GACjC,mBAAmB,CAwJrB"}

package/dist/vui.cjs.js

@@ -139,6 +139,71 @@ 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 => vue.createVNode(VIcon, vue.mergeProps(input, extraProps), null), payload) : vue.createVNode(VIcon, vue.mergeProps(extraProps, {
+    "name": prop
+  }), null);
+}
+const iconProps = vueUtils.createPropsOptions({
+  name: {
+    type: String,
+    required: true
+  },
+  rotate: {
+    type: Number
+  }
+});
+const VIcon = vue.defineComponent({
+  name: 'VIcon',
+  props: { ...iconProps
+  },
+  emits: {},
+
+  setup(props, ctx) {
+    const iconName = vue.computed(() => props.name);
+    const clickable = vue.computed(() => typeof ctx.attrs.onClick !== 'undefined');
+    const classes = vue.computed(() => [{
+      'v-icon--clickable': clickable.value
+    }]);
+    const bodyClasses = vue.computed(() => `icon-${iconName.value}`);
+    const bodyStyles = vue.computed(() => {
+      const {
+        rotate
+      } = props;
+      if (!rotate) return;
+      return {
+        transform: `rotate(${rotate}deg)`
+      };
+    });
+    return () => vue.createVNode("span", {
+      "class": [`v-icon notranslate`, classes.value]
+    }, [vue.createVNode("i", {
+      "class": ['v-icon__body icon', bodyClasses.value],
+      "style": bodyStyles.value
+    }, null)]);
+  }
+
+});
+
 const {
   props: props$8,
   emits: emits$8
@@ -151,9 +216,14 @@ const VFormControl = vue.defineComponent({
   emits: emits$8,
 
   setup(props, ctx) {
-    const control = vueKit.useFormControl(props, ctx);
-    ctx.expose(control.expose());
     const vui = useVui();
+    const control = vueKit.useFormControl(props, ctx, {
+      hinttipPrepend: () => vue.createVNode(VIcon, {
+        "class": "v-form-control__label__hinttip__icon",
+        "name": vui.icon('hinttip')
+      }, null)
+    });
+    ctx.expose(control.expose());
     const colorProvider = useVuiColorProvider();
     const classes = vue.computed(() => [{
       'v-form-control--validating': control.validating,
@@ -172,6 +242,7 @@ const VFormControl = vue.defineComponent({
       const label = control.renderLabel();
       const message = control.renderMessage();
       const appends = control.renderInfoAppends();
+      const hinttip = control.renderHinttip();
       return vue.createVNode("div", {
         "class": ['v-form-control', classes.value]
       }, [label && vue.createVNode("label", {
@@ -179,7 +250,18 @@ const VFormControl = vue.defineComponent({
         "onClick": ev => {
           ctx.emit('clickLabel', ev, control);
         }
-      }, [label, control.required && vui.getRequiredChip()]), vue.createVNode("div", {
+      }, [label, control.required && vui.getRequiredChip(), hinttip && vue.createVNode(vueKit.VTooltip, {
+        "top": true,
+        "openOnHover": false
+      }, {
+        default: () => [vue.createVNode("div", {
+          "class": "v-form-control__label__hinttip__hint"
+        }, [hinttip.hint])],
+        activator: ctx => vue.createVNode("a", vue.mergeProps({
+          "class": "v-form-control__label__hinttip",
+          "href": "javascript:void(0)"
+        }, ctx.attrs), [hinttip.tip])
+      })]), vue.createVNode("div", {
         "class": "v-form-control__body"
       }, [vueKit.renderSlotOrEmpty(ctx.slots, 'default', control), !props.hiddenInfo && vue.createVNode("div", {
         "class": "v-form-control__info"
@@ -239,7 +321,8 @@ function defineFormSelectorComponent(opts) {
           'v-form-selector--stacked': this.stacked
         }],
         "label": this.label,
-        "hint": this.hint
+        "hint": this.hint,
+        "hinttip": this.hinttip
       }, { ...this.$slots,
         default: () => vue.createVNode("div", {
           "class": "v-form-selector__body"
@@ -567,71 +650,6 @@ const VCardActions = vue.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 => vue.createVNode(VIcon, vue.mergeProps(input, extraProps), null), payload) : vue.createVNode(VIcon, vue.mergeProps(extraProps, {
-    "name": prop
-  }), null);
-}
-const iconProps = vueUtils.createPropsOptions({
-  name: {
-    type: String,
-    required: true
-  },
-  rotate: {
-    type: Number
-  }
-});
-const VIcon = vue.defineComponent({
-  name: 'VIcon',
-  props: { ...iconProps
-  },
-  emits: {},
-
-  setup(props, ctx) {
-    const iconName = vue.computed(() => props.name);
-    const clickable = vue.computed(() => typeof ctx.attrs.onClick !== 'undefined');
-    const classes = vue.computed(() => [{
-      'v-icon--clickable': clickable.value
-    }]);
-    const bodyClasses = vue.computed(() => `icon-${iconName.value}`);
-    const bodyStyles = vue.computed(() => {
-      const {
-        rotate
-      } = props;
-      if (!rotate) return;
-      return {
-        transform: `rotate(${rotate}deg)`
-      };
-    });
-    return () => vue.createVNode("span", {
-      "class": [`v-icon notranslate`, classes.value]
-    }, [vue.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 : () => vue.createVNode(VIcon, {
@@ -1384,12 +1402,13 @@ const VNavigationItem = vue.defineComponent({
     const onClick = ev => {
       if (!to.value) {
         return toggle();
-      }
-
-      open(); // if (!to.value) {
+      } // console.log('★');
+      // open();
+      // if (!to.value) {
       //   toggle();
       // }
       // ctx.emit('click', ev);
+
     };
 
     const onChangeActive = isActive => {
@@ -2039,6 +2058,7 @@ const VSelect = vue.defineComponent({
       "class": ['v-select', this.classes],
       "label": this.label,
       "hint": this.hint,
+      "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
       "onClickLabel": ev => {
         this.focus();
@@ -2173,6 +2193,7 @@ const VTextField = vue.defineComponent({
       "class": ['v-text-field', this.classes],
       "label": this.label,
       "hint": this.hint,
+      "hinttip": this.hinttip,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -2233,6 +2254,7 @@ const VTextarea = vue.defineComponent({
       "class": ['v-textarea', this.classes],
       "label": this.label,
       "hint": this.hint,
+      "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
       "onClickLabel": ev => {
         this.focus();
@@ -2455,6 +2477,7 @@ const VWysiwygEditor = vue.defineComponent({
       }],
       "label": this.label,
       "hint": this.hint,
+      "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
       "onClickLabel": ev => {
         this.focus('start', {
@@ -4270,6 +4293,7 @@ function installVuiPlugin(app, opts) {
 exports.VDialog = vueKit.VDialog;
 exports.VMenu = vueKit.VMenu;
 exports.VSnackbar = vueKit.VSnackbar;
+exports.VTooltip = vueKit.VTooltip;
 exports.ICON_NAMES = iconFont.ICON_NAMES;
 exports.CONTROL_FIELD_VARIANTS = CONTROL_FIELD_VARIANTS;
 exports.CONTROL_SIZES = CONTROL_SIZES;
@@ -4287,6 +4311,7 @@ exports.VContentSwitcher = VContentSwitcher;
 exports.VDataTable = VDataTable;
 exports.VDrawerLayout = VDrawerLayout;
 exports.VForm = VForm;
+exports.VFormControl = VFormControl;
 exports.VGridContainer = VGridContainer;
 exports.VGridItem = VGridItem;
 exports.VHero = VHero;

package/dist/vui.cjs.prod.js

@@ -139,6 +139,71 @@ 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 => vue.createVNode(VIcon, vue.mergeProps(input, extraProps), null), payload) : vue.createVNode(VIcon, vue.mergeProps(extraProps, {
+    "name": prop
+  }), null);
+}
+const iconProps = vueUtils.createPropsOptions({
+  name: {
+    type: String,
+    required: true
+  },
+  rotate: {
+    type: Number
+  }
+});
+const VIcon = vue.defineComponent({
+  name: 'VIcon',
+  props: { ...iconProps
+  },
+  emits: {},
+
+  setup(props, ctx) {
+    const iconName = vue.computed(() => props.name);
+    const clickable = vue.computed(() => typeof ctx.attrs.onClick !== 'undefined');
+    const classes = vue.computed(() => [{
+      'v-icon--clickable': clickable.value
+    }]);
+    const bodyClasses = vue.computed(() => `icon-${iconName.value}`);
+    const bodyStyles = vue.computed(() => {
+      const {
+        rotate
+      } = props;
+      if (!rotate) return;
+      return {
+        transform: `rotate(${rotate}deg)`
+      };
+    });
+    return () => vue.createVNode("span", {
+      "class": [`v-icon notranslate`, classes.value]
+    }, [vue.createVNode("i", {
+      "class": ['v-icon__body icon', bodyClasses.value],
+      "style": bodyStyles.value
+    }, null)]);
+  }
+
+});
+
 const {
   props: props$8,
   emits: emits$8
@@ -151,9 +216,14 @@ const VFormControl = vue.defineComponent({
   emits: emits$8,
 
   setup(props, ctx) {
-    const control = vueKit.useFormControl(props, ctx);
-    ctx.expose(control.expose());
     const vui = useVui();
+    const control = vueKit.useFormControl(props, ctx, {
+      hinttipPrepend: () => vue.createVNode(VIcon, {
+        "class": "v-form-control__label__hinttip__icon",
+        "name": vui.icon('hinttip')
+      }, null)
+    });
+    ctx.expose(control.expose());
     const colorProvider = useVuiColorProvider();
     const classes = vue.computed(() => [{
       'v-form-control--validating': control.validating,
@@ -172,6 +242,7 @@ const VFormControl = vue.defineComponent({
       const label = control.renderLabel();
       const message = control.renderMessage();
       const appends = control.renderInfoAppends();
+      const hinttip = control.renderHinttip();
       return vue.createVNode("div", {
         "class": ['v-form-control', classes.value]
       }, [label && vue.createVNode("label", {
@@ -179,7 +250,18 @@ const VFormControl = vue.defineComponent({
         "onClick": ev => {
           ctx.emit('clickLabel', ev, control);
         }
-      }, [label, control.required && vui.getRequiredChip()]), vue.createVNode("div", {
+      }, [label, control.required && vui.getRequiredChip(), hinttip && vue.createVNode(vueKit.VTooltip, {
+        "top": true,
+        "openOnHover": false
+      }, {
+        default: () => [vue.createVNode("div", {
+          "class": "v-form-control__label__hinttip__hint"
+        }, [hinttip.hint])],
+        activator: ctx => vue.createVNode("a", vue.mergeProps({
+          "class": "v-form-control__label__hinttip",
+          "href": "javascript:void(0)"
+        }, ctx.attrs), [hinttip.tip])
+      })]), vue.createVNode("div", {
         "class": "v-form-control__body"
       }, [vueKit.renderSlotOrEmpty(ctx.slots, 'default', control), !props.hiddenInfo && vue.createVNode("div", {
         "class": "v-form-control__info"
@@ -239,7 +321,8 @@ function defineFormSelectorComponent(opts) {
           'v-form-selector--stacked': this.stacked
         }],
         "label": this.label,
-        "hint": this.hint
+        "hint": this.hint,
+        "hinttip": this.hinttip
       }, { ...this.$slots,
         default: () => vue.createVNode("div", {
           "class": "v-form-selector__body"
@@ -567,71 +650,6 @@ const VCardActions = vue.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 => vue.createVNode(VIcon, vue.mergeProps(input, extraProps), null), payload) : vue.createVNode(VIcon, vue.mergeProps(extraProps, {
-    "name": prop
-  }), null);
-}
-const iconProps = vueUtils.createPropsOptions({
-  name: {
-    type: String,
-    required: true
-  },
-  rotate: {
-    type: Number
-  }
-});
-const VIcon = vue.defineComponent({
-  name: 'VIcon',
-  props: { ...iconProps
-  },
-  emits: {},
-
-  setup(props, ctx) {
-    const iconName = vue.computed(() => props.name);
-    const clickable = vue.computed(() => typeof ctx.attrs.onClick !== 'undefined');
-    const classes = vue.computed(() => [{
-      'v-icon--clickable': clickable.value
-    }]);
-    const bodyClasses = vue.computed(() => `icon-${iconName.value}`);
-    const bodyStyles = vue.computed(() => {
-      const {
-        rotate
-      } = props;
-      if (!rotate) return;
-      return {
-        transform: `rotate(${rotate}deg)`
-      };
-    });
-    return () => vue.createVNode("span", {
-      "class": [`v-icon notranslate`, classes.value]
-    }, [vue.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 : () => vue.createVNode(VIcon, {
@@ -1384,12 +1402,13 @@ const VNavigationItem = vue.defineComponent({
     const onClick = ev => {
       if (!to.value) {
         return toggle();
-      }
-
-      open(); // if (!to.value) {
+      } // console.log('★');
+      // open();
+      // if (!to.value) {
       //   toggle();
       // }
       // ctx.emit('click', ev);
+
     };
 
     const onChangeActive = isActive => {
@@ -2039,6 +2058,7 @@ const VSelect = vue.defineComponent({
       "class": ['v-select', this.classes],
       "label": this.label,
       "hint": this.hint,
+      "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
       "onClickLabel": ev => {
         this.focus();
@@ -2173,6 +2193,7 @@ const VTextField = vue.defineComponent({
       "class": ['v-text-field', this.classes],
       "label": this.label,
       "hint": this.hint,
+      "hinttip": this.hinttip,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -2233,6 +2254,7 @@ const VTextarea = vue.defineComponent({
       "class": ['v-textarea', this.classes],
       "label": this.label,
       "hint": this.hint,
+      "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
       "onClickLabel": ev => {
         this.focus();
@@ -2455,6 +2477,7 @@ const VWysiwygEditor = vue.defineComponent({
       }],
       "label": this.label,
       "hint": this.hint,
+      "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
       "onClickLabel": ev => {
         this.focus('start', {
@@ -4270,6 +4293,7 @@ function installVuiPlugin(app, opts) {
 exports.VDialog = vueKit.VDialog;
 exports.VMenu = vueKit.VMenu;
 exports.VSnackbar = vueKit.VSnackbar;
+exports.VTooltip = vueKit.VTooltip;
 exports.ICON_NAMES = iconFont.ICON_NAMES;
 exports.CONTROL_FIELD_VARIANTS = CONTROL_FIELD_VARIANTS;
 exports.CONTROL_SIZES = CONTROL_SIZES;
@@ -4287,6 +4311,7 @@ exports.VContentSwitcher = VContentSwitcher;
 exports.VDataTable = VDataTable;
 exports.VDrawerLayout = VDrawerLayout;
 exports.VForm = VForm;
+exports.VFormControl = VFormControl;
 exports.VGridContainer = VGridContainer;
 exports.VGridItem = VGridItem;
 exports.VHero = VHero;

package/dist/vui.css

@@ -866,6 +866,8 @@ thead th {
   --my-message-color: var(--control-disabled-color);
 }
 .v-form-control__label {
+  display: flex;
+  align-items: center;
   align-self: flex-start;
   font-size: var(--control-label-font-size);
   font-weight: var(--control-label-font-weight);
@@ -873,6 +875,32 @@ thead th {
   color: var(--my-label-color);
   letter-spacing: 0.00938em;
 }
+.v-form-control__label__hinttip {
+  display: inline-flex;
+  align-items: center;
+  margin-top: -0.2em;
+  margin-left: 0.6em;
+  font-size: 80%;
+  line-height: 1;
+  color: inherit;
+  text-decoration: none;
+  letter-spacing: normal;
+  cursor: pointer;
+}
+.v-form-control__label__hinttip__icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 120%;
+  text-decoration: none !important;
+}
+.v-form-control__label__hinttip:hover .v-form-control__label__hinttip__icon::before, .v-form-control__label__hinttip:focus .v-form-control__label__hinttip__icon::before {
+  opacity: 0.1;
+}
+.v-form-control__label__hinttip__hint {
+  font-size: calc(var(--root-em) * 0.75);
+}
 .v-form-control__info {
   display: flex;
   padding-top: 3px;
@@ -890,6 +918,23 @@ thead th {
   flex: 0 1;
   margin-left: auto;
 }
+.v-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25em;
+  user-select: none;
+  aspect-ratio: 1/1;
+}
+.v-icon--clickable {
+  cursor: pointer;
+}
+.v-icon__body {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 150ms linear;
+}
 .v-grid-item {
   display: block;
 }
@@ -983,23 +1028,6 @@ thead th {
   margin-top: 0;
   margin-bottom: 0;
 }
-.v-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.25em;
-  user-select: none;
-  aspect-ratio: 1/1;
-}
-.v-icon--clickable {
-  cursor: pointer;
-}
-.v-icon__body {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 150ms linear;
-}
 .v-button {
   --padding: 1em;
   --height: 2.5714285714em;