@fastkit/vui 0.7.17 → 0.7.19

package/dist/vui.cjs.js

@@ -208,6 +208,30 @@ const {
   props: props$8,
   emits: emits$8
 } = vueKit.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 = vue.defineComponent({
   name: 'VFormControl',
   props: { ...props$8,
@@ -238,6 +262,7 @@ const VFormControl = vue.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();
@@ -250,7 +275,7 @@ const VFormControl = vue.defineComponent({
         "onClick": ev => {
           ctx.emit('clickLabel', ev, control);
         }
-      }, [label, control.required && vui.getRequiredChip(), hinttip && vue.createVNode(vueKit.VTooltip, {
+      }, [label, getRequiredChip(), hinttip && vue.createVNode(vueKit.VTooltip, {
         "top": true,
         "openOnHover": false
       }, {
@@ -322,7 +347,8 @@ function defineFormSelectorComponent(opts) {
         }],
         "label": this.label,
         "hint": this.hint,
-        "hinttip": this.hinttip
+        "hinttip": this.hinttip,
+        "requiredChip": this.requiredChip
       }, { ...this.$slots,
         default: () => vue.createVNode("div", {
           "class": "v-form-selector__body"
@@ -2060,6 +2086,7 @@ const VSelect = vue.defineComponent({
       "hint": this.hint,
       "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
+      "requiredChip": this.requiredChip,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -2194,6 +2221,7 @@ const VTextField = vue.defineComponent({
       "label": this.label,
       "hint": this.hint,
       "hinttip": this.hinttip,
+      "requiredChip": this.requiredChip,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -2256,6 +2284,7 @@ const VTextarea = vue.defineComponent({
       "hint": this.hint,
       "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
+      "requiredChip": this.requiredChip,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -2479,6 +2508,7 @@ const VWysiwygEditor = vue.defineComponent({
       "hint": this.hint,
       "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
+      "requiredChip": this.requiredChip,
       "onClickLabel": ev => {
         this.focus('start', {
           scrollIntoView: true
@@ -4371,6 +4401,7 @@ exports.createListTileProps = createListTileProps;
 exports.createNavigationItemProps = createNavigationItemProps;
 exports.createPaperBaseProps = createPaperBaseProps;
 exports.createPaperProps = createPaperProps;
+exports.createRequiredChipRenderer = createRequiredChipRenderer;
 exports.defineFormSelectorComponent = defineFormSelectorComponent;
 exports.iconProps = iconProps;
 exports.installVuiPlugin = installVuiPlugin;

package/dist/vui.cjs.prod.js

@@ -208,6 +208,30 @@ const {
   props: props$8,
   emits: emits$8
 } = vueKit.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 = vue.defineComponent({
   name: 'VFormControl',
   props: { ...props$8,
@@ -238,6 +262,7 @@ const VFormControl = vue.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();
@@ -250,7 +275,7 @@ const VFormControl = vue.defineComponent({
         "onClick": ev => {
           ctx.emit('clickLabel', ev, control);
         }
-      }, [label, control.required && vui.getRequiredChip(), hinttip && vue.createVNode(vueKit.VTooltip, {
+      }, [label, getRequiredChip(), hinttip && vue.createVNode(vueKit.VTooltip, {
         "top": true,
         "openOnHover": false
       }, {
@@ -322,7 +347,8 @@ function defineFormSelectorComponent(opts) {
         }],
         "label": this.label,
         "hint": this.hint,
-        "hinttip": this.hinttip
+        "hinttip": this.hinttip,
+        "requiredChip": this.requiredChip
       }, { ...this.$slots,
         default: () => vue.createVNode("div", {
           "class": "v-form-selector__body"
@@ -2060,6 +2086,7 @@ const VSelect = vue.defineComponent({
       "hint": this.hint,
       "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
+      "requiredChip": this.requiredChip,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -2194,6 +2221,7 @@ const VTextField = vue.defineComponent({
       "label": this.label,
       "hint": this.hint,
       "hinttip": this.hinttip,
+      "requiredChip": this.requiredChip,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -2256,6 +2284,7 @@ const VTextarea = vue.defineComponent({
       "hint": this.hint,
       "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
+      "requiredChip": this.requiredChip,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -2479,6 +2508,7 @@ const VWysiwygEditor = vue.defineComponent({
       "hint": this.hint,
       "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
+      "requiredChip": this.requiredChip,
       "onClickLabel": ev => {
         this.focus('start', {
           scrollIntoView: true
@@ -4371,6 +4401,7 @@ exports.createListTileProps = createListTileProps;
 exports.createNavigationItemProps = createNavigationItemProps;
 exports.createPaperBaseProps = createPaperBaseProps;
 exports.createPaperProps = createPaperProps;
+exports.createRequiredChipRenderer = createRequiredChipRenderer;
 exports.defineFormSelectorComponent = defineFormSelectorComponent;
 exports.iconProps = iconProps;
 exports.installVuiPlugin = installVuiPlugin;

package/dist/vui.d.ts

@@ -48,6 +48,7 @@ import { RawTextareaAutosizeSettings } from '@fastkit/vue-kit';
 import { Ref } from 'vue';
 import { RendererElement } from 'vue';
 import { RendererNode } from 'vue';
+import { RequiredChipSource } from '@fastkit/vue-kit';
 import { ResolvedFormSelectorItemData } from '@fastkit/vue-kit';
 import { ResolveRawSlots } from '@fastkit/vue-kit';
 import { ResolveRawSlots as ResolveRawSlots_2 } from '@fastkit/vue-utils';
@@ -805,6 +806,10 @@ export declare function createPaperProps(): {
     elevation: PropType<VuiElevationValue>;
 };
 
+export declare function createRequiredChipRenderer(required: () => boolean, props: {
+    requiredChip?: RequiredChipSource;
+}, vui?: VuiService): () => VNodeChild;
+
 declare function createTextFieldProps(): {
     'v-slots': PropType<ResolveRawSlots<FormControlSlots & InputBoxSlots>>;
     size: {
@@ -843,6 +848,7 @@ declare function createTextFieldProps(): {
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
     hiddenInfo: BooleanConstructor;
+    requiredChip: PropType<RequiredChipSource>;
     type: {
         type: PropType<"number" | "search" | "email" | "tel" | "url" | "color" | "date" | "datetime-local" | "month" | "password" | "text" | "time">;
         default: string;
@@ -959,6 +965,7 @@ export declare function defineFormSelectorComponent(opts: DefineFormSelectorComp
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
     hiddenInfo: BooleanConstructor;
+    requiredChip: PropType<RequiredChipSource>;
     multiple: {
         type: BooleanConstructor;
         default: boolean;
@@ -1067,6 +1074,7 @@ export declare function defineFormSelectorComponent(opts: DefineFormSelectorComp
     invalid?: unknown;
     valid?: unknown;
     hiddenInfo?: unknown;
+    requiredChip?: unknown;
     multiple?: unknown;
     items?: unknown;
     name?: unknown;
@@ -1113,6 +1121,7 @@ export declare function defineFormSelectorComponent(opts: DefineFormSelectorComp
     hint?: VNodeChildOrSlot<any>;
     hinttip?: string | boolean | (() => VNodeChild) | undefined;
     infoAppends?: VNodeChildOrSlot<any>;
+    requiredChip?: RequiredChipSource | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     "v-slots"?: ResolveRawSlots<FormControlSlots> | undefined;
 }> & {
@@ -3595,6 +3604,7 @@ export declare const VCheckboxGroup: DefineComponent<{
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
     hiddenInfo: BooleanConstructor;
+    requiredChip: PropType<RequiredChipSource>;
     multiple: {
         type: BooleanConstructor;
         default: boolean;
@@ -3703,6 +3713,7 @@ export declare const VCheckboxGroup: DefineComponent<{
     invalid?: unknown;
     valid?: unknown;
     hiddenInfo?: unknown;
+    requiredChip?: unknown;
     multiple?: unknown;
     items?: unknown;
     name?: unknown;
@@ -3749,6 +3760,7 @@ export declare const VCheckboxGroup: DefineComponent<{
     hint?: VNodeChildOrSlot<any>;
     hinttip?: string | boolean | (() => VNodeChild) | undefined;
     infoAppends?: VNodeChildOrSlot<any>;
+    requiredChip?: RequiredChipSource | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     "v-slots"?: ResolveRawSlots<FormControlSlots> | undefined;
 }> & {
@@ -4661,6 +4673,7 @@ export declare const VFormControl: DefineComponent<{
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
     hiddenInfo: BooleanConstructor;
+    requiredChip: PropType<RequiredChipSource>;
 }, () => JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     clickLabel: (ev: MouseEvent, formControl: FormControl) => boolean;
 }, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{
@@ -4684,6 +4697,7 @@ export declare const VFormControl: DefineComponent<{
     invalid?: unknown;
     valid?: unknown;
     hiddenInfo?: unknown;
+    requiredChip?: unknown;
 } & {
     validating: boolean;
     pending: boolean;
@@ -4705,6 +4719,7 @@ export declare const VFormControl: DefineComponent<{
     hint?: VNodeChildOrSlot<any>;
     hinttip?: string | boolean | (() => VNodeChild) | undefined;
     infoAppends?: VNodeChildOrSlot<any>;
+    requiredChip?: RequiredChipSource | undefined;
     "v-slots"?: ResolveRawSlots<FormControlSlots & {
         default: FormControl;
     }> | undefined;
@@ -7595,6 +7610,7 @@ export declare const VRadioGroup: DefineComponent<{
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
     hiddenInfo: BooleanConstructor;
+    requiredChip: PropType<RequiredChipSource>;
     multiple: {
         type: BooleanConstructor;
         default: boolean;
@@ -7703,6 +7719,7 @@ export declare const VRadioGroup: DefineComponent<{
     invalid?: unknown;
     valid?: unknown;
     hiddenInfo?: unknown;
+    requiredChip?: unknown;
     multiple?: unknown;
     items?: unknown;
     name?: unknown;
@@ -7749,6 +7766,7 @@ export declare const VRadioGroup: DefineComponent<{
     hint?: VNodeChildOrSlot<any>;
     hinttip?: string | boolean | (() => VNodeChild) | undefined;
     infoAppends?: VNodeChildOrSlot<any>;
+    requiredChip?: RequiredChipSource | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     "v-slots"?: ResolveRawSlots<FormControlSlots> | undefined;
 }> & {
@@ -7823,6 +7841,7 @@ export declare const VSelect: DefineComponent<{
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
     hiddenInfo: BooleanConstructor;
+    requiredChip: PropType<RequiredChipSource>;
     multiple: {
         type: BooleanConstructor;
         default: boolean;
@@ -7937,6 +7956,7 @@ export declare const VSelect: DefineComponent<{
     invalid?: unknown;
     valid?: unknown;
     hiddenInfo?: unknown;
+    requiredChip?: unknown;
     multiple?: unknown;
     items?: unknown;
     name?: unknown;
@@ -7981,6 +8001,7 @@ export declare const VSelect: DefineComponent<{
     hint?: VNodeChildOrSlot<any>;
     hinttip?: string | boolean | (() => VNodeChild) | undefined;
     infoAppends?: VNodeChildOrSlot<any>;
+    requiredChip?: RequiredChipSource | undefined;
     startAdornment?: VNodeChildOrSlot<any>;
     endAdornment?: VNodeChildOrSlot<any>;
     variant?: "flat" | "outlined" | "filled" | undefined;
@@ -8184,6 +8205,7 @@ export declare const VSwitchGroup: DefineComponent<{
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
     hiddenInfo: BooleanConstructor;
+    requiredChip: PropType<RequiredChipSource>;
     multiple: {
         type: BooleanConstructor;
         default: boolean;
@@ -8292,6 +8314,7 @@ export declare const VSwitchGroup: DefineComponent<{
     invalid?: unknown;
     valid?: unknown;
     hiddenInfo?: unknown;
+    requiredChip?: unknown;
     multiple?: unknown;
     items?: unknown;
     name?: unknown;
@@ -8338,6 +8361,7 @@ export declare const VSwitchGroup: DefineComponent<{
     hint?: VNodeChildOrSlot<any>;
     hinttip?: string | boolean | (() => VNodeChild) | undefined;
     infoAppends?: VNodeChildOrSlot<any>;
+    requiredChip?: RequiredChipSource | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     "v-slots"?: ResolveRawSlots<FormControlSlots> | undefined;
 }> & {
@@ -8483,6 +8507,7 @@ export declare const VTextarea: DefineComponent<{
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
     hiddenInfo: BooleanConstructor;
+    requiredChip: PropType<RequiredChipSource>;
     autosize: PropType<RawTextareaAutosizeSettings>;
     rows: {
         default: number | undefined;
@@ -8596,6 +8621,7 @@ export declare const VTextarea: DefineComponent<{
     invalid?: unknown;
     valid?: unknown;
     hiddenInfo?: unknown;
+    requiredChip?: unknown;
     autosize?: unknown;
     rows?: unknown;
     mask?: unknown;
@@ -8661,6 +8687,7 @@ export declare const VTextarea: DefineComponent<{
     hint?: VNodeChildOrSlot<any>;
     hinttip?: string | boolean | (() => VNodeChild) | undefined;
     infoAppends?: VNodeChildOrSlot<any>;
+    requiredChip?: RequiredChipSource | undefined;
     startAdornment?: VNodeChildOrSlot<any>;
     endAdornment?: VNodeChildOrSlot<any>;
     variant?: "flat" | "outlined" | "filled" | undefined;
@@ -8737,6 +8764,7 @@ export declare const VTextField: DefineComponent<{
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
     hiddenInfo: BooleanConstructor;
+    requiredChip: PropType<RequiredChipSource>;
     type: {
         type: PropType<"number" | "search" | "email" | "tel" | "url" | "color" | "date" | "datetime-local" | "month" | "password" | "text" | "time">;
         default: string;
@@ -8854,6 +8882,7 @@ export declare const VTextField: DefineComponent<{
     invalid?: unknown;
     valid?: unknown;
     hiddenInfo?: unknown;
+    requiredChip?: unknown;
     type?: unknown;
     masked?: unknown;
     typed?: unknown;
@@ -8923,6 +8952,7 @@ export declare const VTextField: DefineComponent<{
     hint?: VNodeChildOrSlot<any>;
     hinttip?: string | boolean | (() => VNodeChild) | undefined;
     infoAppends?: VNodeChildOrSlot<any>;
+    requiredChip?: RequiredChipSource | undefined;
     startAdornment?: VNodeChildOrSlot<any>;
     endAdornment?: VNodeChildOrSlot<any>;
     variant?: "flat" | "outlined" | "filled" | undefined;
@@ -10107,6 +10137,7 @@ export declare const VWysiwygEditor: DefineComponent<{
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
     hiddenInfo: BooleanConstructor;
+    requiredChip: PropType<RequiredChipSource>;
     minlength: (StringConstructor | NumberConstructor)[];
     maxlength: (StringConstructor | NumberConstructor)[];
     pattern: (StringConstructor | RegExpConstructor)[];
@@ -10215,6 +10246,7 @@ export declare const VWysiwygEditor: DefineComponent<{
     invalid?: unknown;
     valid?: unknown;
     hiddenInfo?: unknown;
+    requiredChip?: unknown;
     minlength?: unknown;
     maxlength?: unknown;
     pattern?: unknown;
@@ -10279,6 +10311,7 @@ export declare const VWysiwygEditor: DefineComponent<{
     hint?: VNodeChildOrSlot<any>;
     hinttip?: string | boolean | (() => VNodeChild) | undefined;
     infoAppends?: VNodeChildOrSlot<any>;
+    requiredChip?: RequiredChipSource | undefined;
     startAdornment?: VNodeChildOrSlot<any>;
     endAdornment?: VNodeChildOrSlot<any>;
     variant?: "flat" | "outlined" | "filled" | undefined;

package/dist/vui.mjs

@@ -203,6 +203,30 @@ 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,
@@ -233,6 +257,7 @@ 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();
@@ -245,7 +270,7 @@ const VFormControl = defineComponent({
         "onClick": ev => {
           ctx.emit('clickLabel', ev, control);
         }
-      }, [label, control.required && vui.getRequiredChip(), hinttip && createVNode(VTooltip, {
+      }, [label, getRequiredChip(), hinttip && createVNode(VTooltip, {
         "top": true,
         "openOnHover": false
       }, {
@@ -317,7 +342,8 @@ function defineFormSelectorComponent(opts) {
         }],
         "label": this.label,
         "hint": this.hint,
-        "hinttip": this.hinttip
+        "hinttip": this.hinttip,
+        "requiredChip": this.requiredChip
       }, { ...this.$slots,
         default: () => createVNode("div", {
           "class": "v-form-selector__body"
@@ -2055,6 +2081,7 @@ const VSelect = defineComponent({
       "hint": this.hint,
       "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
+      "requiredChip": this.requiredChip,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -2189,6 +2216,7 @@ const VTextField = defineComponent({
       "label": this.label,
       "hint": this.hint,
       "hinttip": this.hinttip,
+      "requiredChip": this.requiredChip,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -2251,6 +2279,7 @@ const VTextarea = defineComponent({
       "hint": this.hint,
       "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
+      "requiredChip": this.requiredChip,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -2474,6 +2503,7 @@ const VWysiwygEditor = defineComponent({
       "hint": this.hint,
       "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
+      "requiredChip": this.requiredChip,
       "onClickLabel": ev => {
         this.focus('start', {
           scrollIntoView: true
@@ -4285,4 +4315,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.17",
+  "version": "0.7.19",
   "description": "@fastkit/vui",
   "buildOptions": {
     "name": "Vui",
@@ -32,11 +32,11 @@
     "vue": "^3.2.26"
   },
   "dependencies": {
-    "@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",
+    "@fastkit/color-scheme": "0.7.19",
+    "@fastkit/icon-font": "0.7.19",
+    "@fastkit/tiny-logger": "0.7.19",
+    "@fastkit/vite-kit": "0.7.19",
+    "@fastkit/vue-kit": "0.7.19",
     "@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.tsx

@@ -1,5 +1,5 @@
 import './VFormControl.scss';
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, VNodeChild } from 'vue';
 import {
   createFormControlSettings,
   useFormControl,
@@ -7,13 +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: {
@@ -27,7 +55,6 @@ export const VFormControl = defineComponent({
   emits,
   setup(props, ctx) {
     const vui = useVui();
-
     const control = useFormControl(props, ctx, {
       hinttipPrepend: () => (
         <VIcon
@@ -60,6 +87,12 @@ export const VFormControl = defineComponent({
       ),
     ]);
 
+    const getRequiredChip = createRequiredChipRenderer(
+      () => control.required,
+      props,
+      vui,
+    );
+
     return () => {
       const label = control.renderLabel();
       const message = control.renderMessage();
@@ -75,7 +108,7 @@ export const VFormControl = defineComponent({
                 ctx.emit('clickLabel', ev, control);
               }}>
               {label}
-              {control.required && vui.getRequiredChip()}
+              {getRequiredChip()}
               {hinttip && (
                 <VTooltip
                   top

package/src/components/VSelect/VSelect.tsx

@@ -117,6 +117,7 @@ export const VSelect = defineComponent({
         hint={this.hint}
         hinttip={this.hinttip}
         hiddenInfo={this.hiddenInfo}
+        requiredChip={this.requiredChip}
         onClickLabel={(ev) => {
           this.focus();
         }}

package/src/components/VTextField/VTextField.tsx

@@ -66,6 +66,7 @@ export const VTextField = defineComponent({
         label={this.label}
         hint={this.hint}
         hinttip={this.hinttip}
+        requiredChip={this.requiredChip}
         onClickLabel={(ev) => {
           this.focus();
         }}

package/src/components/VTextarea/VTextarea.tsx

@@ -59,6 +59,7 @@ export const VTextarea = defineComponent({
         hint={this.hint}
         hinttip={this.hinttip}
         hiddenInfo={this.hiddenInfo}
+        requiredChip={this.requiredChip}
         onClickLabel={(ev) => {
           this.focus();
         }}

package/src/components/VWysiwygEditor/VWysiwygEditor.tsx

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

package/src/composables/form-selector.tsx

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