@fastkit/vui 0.7.17 → 0.7.22

package/dist/tool/index.js

@@ -123,6 +123,7 @@ function viteVuiPlugin(options = {}) {
         editorUndo: 'mdi-undo-variant',
         editorRedo: 'mdi-redo-variant',
         hinttip: 'mdi-help-circle-outline',
+        clear: 'mdi-close',
         // 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,CAwJrB"}
+{"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,CAyJrB"}

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();
       }
@@ -2122,7 +2149,16 @@ const VSelect = vue.defineComponent({
           }, [vue.createVNode("div", {
             "class": "v-select__selections__inner"
           }, [this.renderSelections(selectedItems)])])],
-          endAdornment: () => vue.createVNode(VIcon, {
+          endAdornment: () => this.clearable && this.nodeControl.value != null && vue.createVNode(VButton, {
+            "key": "clear",
+            "icon": this.$vui.icon('clear'),
+            "rounded": true,
+            "onClick": ev => {
+              ev.stopPropagation();
+              this.nodeControl.clear();
+            }
+          }, null) || vue.createVNode(VIcon, {
+            "key": "icon",
             "name": this.iconName,
             "rotate": this.menuOpened ? 180 : 0
           }, null)
@@ -2194,6 +2230,7 @@ const VTextField = vue.defineComponent({
       "label": this.label,
       "hint": this.hint,
       "hinttip": this.hinttip,
+      "requiredChip": this.requiredChip,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -2256,6 +2293,7 @@ const VTextarea = vue.defineComponent({
       "hint": this.hint,
       "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
+      "requiredChip": this.requiredChip,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -2479,6 +2517,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 +4410,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();
       }
@@ -2122,7 +2149,16 @@ const VSelect = vue.defineComponent({
           }, [vue.createVNode("div", {
             "class": "v-select__selections__inner"
           }, [this.renderSelections(selectedItems)])])],
-          endAdornment: () => vue.createVNode(VIcon, {
+          endAdornment: () => this.clearable && this.nodeControl.value != null && vue.createVNode(VButton, {
+            "key": "clear",
+            "icon": this.$vui.icon('clear'),
+            "rounded": true,
+            "onClick": ev => {
+              ev.stopPropagation();
+              this.nodeControl.clear();
+            }
+          }, null) || vue.createVNode(VIcon, {
+            "key": "icon",
             "name": this.iconName,
             "rotate": this.menuOpened ? 180 : 0
           }, null)
@@ -2194,6 +2230,7 @@ const VTextField = vue.defineComponent({
       "label": this.label,
       "hint": this.hint,
       "hinttip": this.hinttip,
+      "requiredChip": this.requiredChip,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -2256,6 +2293,7 @@ const VTextarea = vue.defineComponent({
       "hint": this.hint,
       "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
+      "requiredChip": this.requiredChip,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -2479,6 +2517,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 +4410,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;
@@ -866,6 +872,7 @@ declare function createTextFieldProps(): {
     autofocus: BooleanConstructor;
     spellcheck: BooleanConstructor;
     viewonly: BooleanConstructor;
+    clearable: BooleanConstructor;
     validateTiming: {
         type: PropType<ValidateTiming>;
         default: ValidateTiming;
@@ -959,6 +966,7 @@ export declare function defineFormSelectorComponent(opts: DefineFormSelectorComp
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
     hiddenInfo: BooleanConstructor;
+    requiredChip: PropType<RequiredChipSource>;
     multiple: {
         type: BooleanConstructor;
         default: boolean;
@@ -976,6 +984,7 @@ export declare function defineFormSelectorComponent(opts: DefineFormSelectorComp
     autofocus: BooleanConstructor;
     spellcheck: BooleanConstructor;
     viewonly: BooleanConstructor;
+    clearable: BooleanConstructor;
     validateTiming: {
         type: PropType<ValidateTiming>;
         default: ValidateTiming;
@@ -1067,6 +1076,7 @@ export declare function defineFormSelectorComponent(opts: DefineFormSelectorComp
     invalid?: unknown;
     valid?: unknown;
     hiddenInfo?: unknown;
+    requiredChip?: unknown;
     multiple?: unknown;
     items?: unknown;
     name?: unknown;
@@ -1075,6 +1085,7 @@ export declare function defineFormSelectorComponent(opts: DefineFormSelectorComp
     autofocus?: unknown;
     spellcheck?: unknown;
     viewonly?: unknown;
+    clearable?: unknown;
     validateTiming?: unknown;
     rules?: unknown;
     error?: unknown;
@@ -1086,6 +1097,7 @@ export declare function defineFormSelectorComponent(opts: DefineFormSelectorComp
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -1113,6 +1125,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;
 }> & {
@@ -1128,6 +1141,7 @@ export declare function defineFormSelectorComponent(opts: DefineFormSelectorComp
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -3449,6 +3463,7 @@ export declare const VCheckbox: DefineComponent<{
     spellcheck: BooleanConstructor;
     viewonly: BooleanConstructor;
     required: BooleanConstructor;
+    clearable: BooleanConstructor;
     validateTiming: {
         type: PropType<ValidateTiming>;
         default: ValidateTiming;
@@ -3520,6 +3535,7 @@ export declare const VCheckbox: DefineComponent<{
     spellcheck?: unknown;
     viewonly?: unknown;
     required?: unknown;
+    clearable?: unknown;
     validateTiming?: unknown;
     rules?: unknown;
     error?: unknown;
@@ -3531,6 +3547,7 @@ export declare const VCheckbox: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -3556,6 +3573,7 @@ export declare const VCheckbox: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -3595,6 +3613,7 @@ export declare const VCheckboxGroup: DefineComponent<{
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
     hiddenInfo: BooleanConstructor;
+    requiredChip: PropType<RequiredChipSource>;
     multiple: {
         type: BooleanConstructor;
         default: boolean;
@@ -3612,6 +3631,7 @@ export declare const VCheckboxGroup: DefineComponent<{
     autofocus: BooleanConstructor;
     spellcheck: BooleanConstructor;
     viewonly: BooleanConstructor;
+    clearable: BooleanConstructor;
     validateTiming: {
         type: PropType<ValidateTiming>;
         default: ValidateTiming;
@@ -3703,6 +3723,7 @@ export declare const VCheckboxGroup: DefineComponent<{
     invalid?: unknown;
     valid?: unknown;
     hiddenInfo?: unknown;
+    requiredChip?: unknown;
     multiple?: unknown;
     items?: unknown;
     name?: unknown;
@@ -3711,6 +3732,7 @@ export declare const VCheckboxGroup: DefineComponent<{
     autofocus?: unknown;
     spellcheck?: unknown;
     viewonly?: unknown;
+    clearable?: unknown;
     validateTiming?: unknown;
     rules?: unknown;
     error?: unknown;
@@ -3722,6 +3744,7 @@ export declare const VCheckboxGroup: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -3749,6 +3772,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;
 }> & {
@@ -3764,6 +3788,7 @@ export declare const VCheckboxGroup: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -4509,6 +4534,7 @@ export declare const VForm: DefineComponent<{
     spellcheck: BooleanConstructor;
     viewonly: BooleanConstructor;
     required: BooleanConstructor;
+    clearable: BooleanConstructor;
     validateTiming: {
         type: PropType<ValidateTiming>;
         default: ValidateTiming;
@@ -4586,6 +4612,7 @@ export declare const VForm: DefineComponent<{
     spellcheck?: unknown;
     viewonly?: unknown;
     required?: unknown;
+    clearable?: unknown;
     validateTiming?: unknown;
     rules?: unknown;
     error?: unknown;
@@ -4597,6 +4624,7 @@ export declare const VForm: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -4626,6 +4654,7 @@ export declare const VForm: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -4661,6 +4690,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 +4714,7 @@ export declare const VFormControl: DefineComponent<{
     invalid?: unknown;
     valid?: unknown;
     hiddenInfo?: unknown;
+    requiredChip?: unknown;
 } & {
     validating: boolean;
     pending: boolean;
@@ -4705,6 +4736,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;
@@ -6660,6 +6692,7 @@ export declare const VOption: DefineComponent<{
     spellcheck: BooleanConstructor;
     viewonly: BooleanConstructor;
     required: BooleanConstructor;
+    clearable: BooleanConstructor;
     validateTiming: {
         type: PropType<ValidateTiming>;
         default: ValidateTiming;
@@ -6727,6 +6760,7 @@ export declare const VOption: DefineComponent<{
     spellcheck?: unknown;
     viewonly?: unknown;
     required?: unknown;
+    clearable?: unknown;
     validateTiming?: unknown;
     rules?: unknown;
     error?: unknown;
@@ -6738,6 +6772,7 @@ export declare const VOption: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -6762,6 +6797,7 @@ export declare const VOption: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -7453,6 +7489,7 @@ export declare const VRadio: DefineComponent<{
     spellcheck: BooleanConstructor;
     viewonly: BooleanConstructor;
     required: BooleanConstructor;
+    clearable: BooleanConstructor;
     validateTiming: {
         type: PropType<ValidateTiming>;
         default: ValidateTiming;
@@ -7522,6 +7559,7 @@ export declare const VRadio: DefineComponent<{
     spellcheck?: unknown;
     viewonly?: unknown;
     required?: unknown;
+    clearable?: unknown;
     validateTiming?: unknown;
     rules?: unknown;
     error?: unknown;
@@ -7533,6 +7571,7 @@ export declare const VRadio: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -7557,6 +7596,7 @@ export declare const VRadio: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -7595,6 +7635,7 @@ export declare const VRadioGroup: DefineComponent<{
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
     hiddenInfo: BooleanConstructor;
+    requiredChip: PropType<RequiredChipSource>;
     multiple: {
         type: BooleanConstructor;
         default: boolean;
@@ -7612,6 +7653,7 @@ export declare const VRadioGroup: DefineComponent<{
     autofocus: BooleanConstructor;
     spellcheck: BooleanConstructor;
     viewonly: BooleanConstructor;
+    clearable: BooleanConstructor;
     validateTiming: {
         type: PropType<ValidateTiming>;
         default: ValidateTiming;
@@ -7703,6 +7745,7 @@ export declare const VRadioGroup: DefineComponent<{
     invalid?: unknown;
     valid?: unknown;
     hiddenInfo?: unknown;
+    requiredChip?: unknown;
     multiple?: unknown;
     items?: unknown;
     name?: unknown;
@@ -7711,6 +7754,7 @@ export declare const VRadioGroup: DefineComponent<{
     autofocus?: unknown;
     spellcheck?: unknown;
     viewonly?: unknown;
+    clearable?: unknown;
     validateTiming?: unknown;
     rules?: unknown;
     error?: unknown;
@@ -7722,6 +7766,7 @@ export declare const VRadioGroup: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -7749,6 +7794,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;
 }> & {
@@ -7764,6 +7810,7 @@ export declare const VRadioGroup: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -7823,6 +7870,7 @@ export declare const VSelect: DefineComponent<{
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
     hiddenInfo: BooleanConstructor;
+    requiredChip: PropType<RequiredChipSource>;
     multiple: {
         type: BooleanConstructor;
         default: boolean;
@@ -7836,6 +7884,7 @@ export declare const VSelect: DefineComponent<{
     autofocus: BooleanConstructor;
     spellcheck: BooleanConstructor;
     viewonly: BooleanConstructor;
+    clearable: BooleanConstructor;
     validateTiming: {
         type: PropType<ValidateTiming>;
         default: ValidateTiming;
@@ -7937,6 +7986,7 @@ export declare const VSelect: DefineComponent<{
     invalid?: unknown;
     valid?: unknown;
     hiddenInfo?: unknown;
+    requiredChip?: unknown;
     multiple?: unknown;
     items?: unknown;
     name?: unknown;
@@ -7944,6 +7994,7 @@ export declare const VSelect: DefineComponent<{
     autofocus?: unknown;
     spellcheck?: unknown;
     viewonly?: unknown;
+    clearable?: unknown;
     validateTiming?: unknown;
     rules?: unknown;
     error?: unknown;
@@ -7955,6 +8006,7 @@ export declare const VSelect: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -7981,6 +8033,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;
@@ -8000,6 +8053,7 @@ export declare const VSelect: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -8042,6 +8096,7 @@ export declare const VSwitch: DefineComponent<{
     spellcheck: BooleanConstructor;
     viewonly: BooleanConstructor;
     required: BooleanConstructor;
+    clearable: BooleanConstructor;
     validateTiming: {
         type: PropType<ValidateTiming>;
         default: ValidateTiming;
@@ -8111,6 +8166,7 @@ export declare const VSwitch: DefineComponent<{
     spellcheck?: unknown;
     viewonly?: unknown;
     required?: unknown;
+    clearable?: unknown;
     validateTiming?: unknown;
     rules?: unknown;
     error?: unknown;
@@ -8122,6 +8178,7 @@ export declare const VSwitch: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -8146,6 +8203,7 @@ export declare const VSwitch: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -8184,6 +8242,7 @@ export declare const VSwitchGroup: DefineComponent<{
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
     hiddenInfo: BooleanConstructor;
+    requiredChip: PropType<RequiredChipSource>;
     multiple: {
         type: BooleanConstructor;
         default: boolean;
@@ -8201,6 +8260,7 @@ export declare const VSwitchGroup: DefineComponent<{
     autofocus: BooleanConstructor;
     spellcheck: BooleanConstructor;
     viewonly: BooleanConstructor;
+    clearable: BooleanConstructor;
     validateTiming: {
         type: PropType<ValidateTiming>;
         default: ValidateTiming;
@@ -8292,6 +8352,7 @@ export declare const VSwitchGroup: DefineComponent<{
     invalid?: unknown;
     valid?: unknown;
     hiddenInfo?: unknown;
+    requiredChip?: unknown;
     multiple?: unknown;
     items?: unknown;
     name?: unknown;
@@ -8300,6 +8361,7 @@ export declare const VSwitchGroup: DefineComponent<{
     autofocus?: unknown;
     spellcheck?: unknown;
     viewonly?: unknown;
+    clearable?: unknown;
     validateTiming?: unknown;
     rules?: unknown;
     error?: unknown;
@@ -8311,6 +8373,7 @@ export declare const VSwitchGroup: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -8338,6 +8401,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;
 }> & {
@@ -8353,6 +8417,7 @@ export declare const VSwitchGroup: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -8483,6 +8548,7 @@ export declare const VTextarea: DefineComponent<{
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
     hiddenInfo: BooleanConstructor;
+    requiredChip: PropType<RequiredChipSource>;
     autosize: PropType<RawTextareaAutosizeSettings>;
     rows: {
         default: number | undefined;
@@ -8504,6 +8570,7 @@ export declare const VTextarea: DefineComponent<{
     autofocus: BooleanConstructor;
     spellcheck: BooleanConstructor;
     viewonly: BooleanConstructor;
+    clearable: BooleanConstructor;
     validateTiming: {
         type: PropType<ValidateTiming>;
         default: ValidateTiming;
@@ -8596,6 +8663,7 @@ export declare const VTextarea: DefineComponent<{
     invalid?: unknown;
     valid?: unknown;
     hiddenInfo?: unknown;
+    requiredChip?: unknown;
     autosize?: unknown;
     rows?: unknown;
     mask?: unknown;
@@ -8614,6 +8682,7 @@ export declare const VTextarea: DefineComponent<{
     autofocus?: unknown;
     spellcheck?: unknown;
     viewonly?: unknown;
+    clearable?: unknown;
     validateTiming?: unknown;
     rules?: unknown;
     error?: unknown;
@@ -8625,6 +8694,7 @@ export declare const VTextarea: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -8661,6 +8731,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;
@@ -8680,6 +8751,7 @@ export declare const VTextarea: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -8737,6 +8809,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;
@@ -8760,6 +8833,7 @@ export declare const VTextField: DefineComponent<{
     autofocus: BooleanConstructor;
     spellcheck: BooleanConstructor;
     viewonly: BooleanConstructor;
+    clearable: BooleanConstructor;
     validateTiming: {
         type: PropType<ValidateTiming>;
         default: ValidateTiming;
@@ -8854,6 +8928,7 @@ export declare const VTextField: DefineComponent<{
     invalid?: unknown;
     valid?: unknown;
     hiddenInfo?: unknown;
+    requiredChip?: unknown;
     type?: unknown;
     masked?: unknown;
     typed?: unknown;
@@ -8874,6 +8949,7 @@ export declare const VTextField: DefineComponent<{
     autofocus?: unknown;
     spellcheck?: unknown;
     viewonly?: unknown;
+    clearable?: unknown;
     validateTiming?: unknown;
     rules?: unknown;
     error?: unknown;
@@ -8886,6 +8962,7 @@ export declare const VTextField: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -8923,6 +9000,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;
@@ -8948,6 +9026,7 @@ export declare const VTextField: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -10020,6 +10099,7 @@ export declare interface VuiServiceIconSettings {
     editorUndo: IconName;
     editorRedo: IconName;
     hinttip: IconName;
+    clear: IconName;
 }
 
 export declare interface VuiServiceOptions {
@@ -10107,6 +10187,7 @@ export declare const VWysiwygEditor: DefineComponent<{
     invalid: BooleanConstructor;
     valid: BooleanConstructor;
     hiddenInfo: BooleanConstructor;
+    requiredChip: PropType<RequiredChipSource>;
     minlength: (StringConstructor | NumberConstructor)[];
     maxlength: (StringConstructor | NumberConstructor)[];
     pattern: (StringConstructor | RegExpConstructor)[];
@@ -10122,6 +10203,7 @@ export declare const VWysiwygEditor: DefineComponent<{
     autofocus: BooleanConstructor;
     spellcheck: BooleanConstructor;
     viewonly: BooleanConstructor;
+    clearable: BooleanConstructor;
     validateTiming: {
         type: PropType<ValidateTiming>;
         default: ValidateTiming;
@@ -10215,6 +10297,7 @@ export declare const VWysiwygEditor: DefineComponent<{
     invalid?: unknown;
     valid?: unknown;
     hiddenInfo?: unknown;
+    requiredChip?: unknown;
     minlength?: unknown;
     maxlength?: unknown;
     pattern?: unknown;
@@ -10230,6 +10313,7 @@ export declare const VWysiwygEditor: DefineComponent<{
     autofocus?: unknown;
     spellcheck?: unknown;
     viewonly?: unknown;
+    clearable?: unknown;
     validateTiming?: unknown;
     rules?: unknown;
     error?: unknown;
@@ -10241,6 +10325,7 @@ export declare const VWysiwygEditor: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;
@@ -10279,6 +10364,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;
@@ -10297,6 +10383,7 @@ export declare const VWysiwygEditor: DefineComponent<{
     spellcheck: boolean;
     viewonly: boolean;
     required: boolean;
+    clearable: boolean;
     error: boolean;
     tabindex: string | number;
     validateTiming: ValidateTiming;

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();
       }
@@ -2117,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)
@@ -2189,6 +2225,7 @@ const VTextField = defineComponent({
       "label": this.label,
       "hint": this.hint,
       "hinttip": this.hinttip,
+      "requiredChip": this.requiredChip,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -2251,6 +2288,7 @@ const VTextarea = defineComponent({
       "hint": this.hint,
       "hinttip": this.hinttip,
       "hiddenInfo": this.hiddenInfo,
+      "requiredChip": this.requiredChip,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -2474,6 +2512,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 +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.17",
+  "version": "0.7.22",
   "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.22",
+    "@fastkit/icon-font": "0.7.22",
+    "@fastkit/tiny-logger": "0.7.22",
+    "@fastkit/vite-kit": "0.7.22",
+    "@fastkit/vue-kit": "0.7.22",
     "@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

@@ -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();
 
@@ -117,6 +118,7 @@ export const VSelect = defineComponent({
         hint={this.hint}
         hinttip={this.hinttip}
         hiddenInfo={this.hiddenInfo}
+        requiredChip={this.requiredChip}
         onClickLabel={(ev) => {
           this.focus();
         }}
@@ -183,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

@@ -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: () => (

package/src/service.tsx

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

package/src/tool/vite-plugin.ts

@@ -171,6 +171,7 @@ export function viteVuiPlugin(
       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,