@fastkit/vui 0.7.11 → 0.7.17

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,6 +134,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 => 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
@@ -146,9 +211,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,
@@ -167,6 +237,7 @@ const VFormControl = defineComponent({
       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 +245,18 @@ const VFormControl = defineComponent({
         "onClick": ev => {
           ctx.emit('clickLabel', ev, control);
         }
-      }, [label, control.required && vui.getRequiredChip()]), createVNode("div", {
+      }, [label, control.required && vui.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 +316,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: () => createVNode("div", {
           "class": "v-form-selector__body"
@@ -562,71 +645,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, {
@@ -1379,12 +1397,13 @@ const VNavigationItem = 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 => {
@@ -2034,6 +2053,7 @@ const VSelect = defineComponent({
       "class": ['v-select', this.classes],
       "label": this.label,
       "hint": this.hint,
+      "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
       "onClickLabel": ev => {
         this.focus();
@@ -2168,6 +2188,7 @@ const VTextField = defineComponent({
       "class": ['v-text-field', this.classes],
       "label": this.label,
       "hint": this.hint,
+      "hinttip": this.hinttip,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -2228,6 +2249,7 @@ const VTextarea = defineComponent({
       "class": ['v-textarea', this.classes],
       "label": this.label,
       "hint": this.hint,
+      "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
       "onClickLabel": ev => {
         this.focus();
@@ -2450,6 +2472,7 @@ const VWysiwygEditor = defineComponent({
       }],
       "label": this.label,
       "hint": this.hint,
+      "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
       "onClickLabel": ev => {
         this.focus('start', {
@@ -4262,4 +4285,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, 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, 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.11",
+  "version": "0.7.17",
   "description": "@fastkit/vui",
   "buildOptions": {
     "name": "Vui",
@@ -32,11 +32,11 @@
     "vue": "^3.2.26"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.7.11",
-    "@fastkit/icon-font": "0.7.11",
-    "@fastkit/tiny-logger": "0.7.11",
-    "@fastkit/vite-kit": "0.7.11",
-    "@fastkit/vue-kit": "0.7.11",
+    "@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/VNavigation/VNavigationItem.tsx

@@ -192,7 +192,8 @@ export const VNavigationItem = defineComponent({
       if (!to.value) {
         return toggle();
       }
-      open();
+      // console.log('★');
+      // open();
       // if (!to.value) {
       //   toggle();
       // }

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/index.ts

@@ -11,6 +11,7 @@ export * from './VDrawerLayout';
 export * from './VHero';
 // export * from './VAccordion';
 export * from './VNavigation';
+export * from './VFormControl';
 export * from './VCheckbox';
 export * from './VCheckboxGroup';
 export * from './VRadio';

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,