@fastkit/vui 0.7.14 → 0.7.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/dist/tool/index.js +2 -0
  2. package/dist/tool/vite-plugin.d.ts.map +1 -1
  3. package/dist/vui.cjs.js +133 -70
  4. package/dist/vui.cjs.prod.js +133 -70
  5. package/dist/vui.css +45 -17
  6. package/dist/vui.d.ts +119 -0
  7. package/dist/vui.min.css +1 -1
  8. package/dist/vui.min.css.map +1 -1
  9. package/dist/vui.mjs +135 -74
  10. package/package.json +6 -6
  11. package/src/components/VFormControl/VFormControl.scss +42 -0
  12. package/src/components/VFormControl/VFormControl.tsx +69 -4
  13. package/src/components/VSelect/VSelect.tsx +21 -5
  14. package/src/components/VTextField/VTextField.tsx +2 -0
  15. package/src/components/VTextarea/VTextarea.tsx +2 -0
  16. package/src/components/VWysiwygEditor/VWysiwygEditor.tsx +2 -0
  17. package/src/components/kits.ts +1 -1
  18. package/src/composables/form-selector.tsx +2 -0
  19. package/src/service.tsx +2 -0
  20. package/src/tool/vite-plugin.ts +2 -0
  21. package/dist/assets/.DS_Store +0 -0
  22. package/src/.DS_Store +0 -0
  23. package/src/assets/.DS_Store +0 -0
  24. package/src/components/.DS_Store +0 -0
  25. package/src/components/VButton/.DS_Store +0 -0
  26. package/src/components/VCheckboxGroup/.DS_Store +0 -0
  27. package/src/components/VHero/.DS_Store +0 -0
  28. package/src/components/VRadio/.DS_Store +0 -0
  29. package/src/components/VRadioGroup/.DS_Store +0 -0
  30. package/src/components/VSwitchGroup/.DS_Store +0 -0
  31. package/src/components/VTabs/.DS_Store +0 -0
  32. package/src/components/VToolbar/.DS_Store +0 -0
  33. package/src/components/VWysiwygEditor/.DS_Store +0 -0
  34. package/src/composables/.DS_Store +0 -0
  35. package/src/styles/.DS_Store +0 -0
  36. package/src/tool/.DS_Store +0 -0
@@ -122,6 +122,8 @@ function viteVuiPlugin(options = {}) {
122
122
  editorLinkOff: 'mdi-link-off',
123
123
  editorUndo: 'mdi-undo-variant',
124
124
  editorRedo: 'mdi-redo-variant',
125
+ hinttip: 'mdi-help-circle-outline',
126
+ clear: 'mdi-close',
125
127
  // navigationExpand: (gen, active) => {
126
128
  // return gen({
127
129
  // name: 'mdi-menu-down' as any,
@@ -1 +1 @@
1
- {"version":3,"file":"vite-plugin.d.ts","sourceRoot":"","sources":["../../../../../../../packages/vui/src/tool/vite-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAK9B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AA+F/C,MAAM,WAAW,oBACf,SAAQ,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IACzE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAGD,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC;IACvD,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,2BAA2B,CAAC;IACtC,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,EAAE,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAC3B,OAAO,GAAE,oBAAyB,GACjC,mBAAmB,CAuJrB"}
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,CAyJrB"}
package/dist/vui.cjs.js CHANGED
@@ -139,10 +139,99 @@ function useControlField(props, opts = {}) {
139
139
  return provider;
140
140
  }
141
141
 
142
+ // prop: RawIconProp<T>,
143
+ // payload: () => T,
144
+ // ): RawIconProp {
145
+ // if (!prop || typeof prop !== 'function') {
146
+ // return prop;
147
+ // }
148
+ // const fn = (gen: IconGenerator): VNodeChild => {
149
+ // const t = payload();
150
+ // return prop(gen, t);
151
+ // };
152
+ // return fn;
153
+ // }
154
+ // export const rawRawIconProp = [String, Function] as PropType<RawIconProp>;
155
+
156
+ const _rawIconProp = [String, Function];
157
+ function rawIconProp() {
158
+ return _rawIconProp;
159
+ }
160
+ function resolveRawIconProp(payload, prop, extraProps) {
161
+ if (!prop) return;
162
+ return typeof prop === 'function' ? prop(input => vue.createVNode(VIcon, vue.mergeProps(input, extraProps), null), payload) : vue.createVNode(VIcon, vue.mergeProps(extraProps, {
163
+ "name": prop
164
+ }), null);
165
+ }
166
+ const iconProps = vueUtils.createPropsOptions({
167
+ name: {
168
+ type: String,
169
+ required: true
170
+ },
171
+ rotate: {
172
+ type: Number
173
+ }
174
+ });
175
+ const VIcon = vue.defineComponent({
176
+ name: 'VIcon',
177
+ props: { ...iconProps
178
+ },
179
+ emits: {},
180
+
181
+ setup(props, ctx) {
182
+ const iconName = vue.computed(() => props.name);
183
+ const clickable = vue.computed(() => typeof ctx.attrs.onClick !== 'undefined');
184
+ const classes = vue.computed(() => [{
185
+ 'v-icon--clickable': clickable.value
186
+ }]);
187
+ const bodyClasses = vue.computed(() => `icon-${iconName.value}`);
188
+ const bodyStyles = vue.computed(() => {
189
+ const {
190
+ rotate
191
+ } = props;
192
+ if (!rotate) return;
193
+ return {
194
+ transform: `rotate(${rotate}deg)`
195
+ };
196
+ });
197
+ return () => vue.createVNode("span", {
198
+ "class": [`v-icon notranslate`, classes.value]
199
+ }, [vue.createVNode("i", {
200
+ "class": ['v-icon__body icon', bodyClasses.value],
201
+ "style": bodyStyles.value
202
+ }, null)]);
203
+ }
204
+
205
+ });
206
+
142
207
  const {
143
208
  props: props$8,
144
209
  emits: emits$8
145
210
  } = vueKit.createFormControlSettings();
211
+ function createRequiredChipRenderer(required, props, vui = useVui()) {
212
+ return () => {
213
+ if (!required()) return;
214
+ let chip;
215
+ const {
216
+ requiredChip
217
+ } = props;
218
+ if (requiredChip === false) return;
219
+
220
+ if (requiredChip) {
221
+ if (typeof requiredChip === 'string') {
222
+ chip = requiredChip;
223
+ } else if (typeof requiredChip === 'function') {
224
+ chip = requiredChip();
225
+ }
226
+ }
227
+
228
+ if (chip === undefined) {
229
+ chip = vui.getRequiredChip();
230
+ }
231
+
232
+ return chip;
233
+ };
234
+ }
146
235
  const VFormControl = vue.defineComponent({
147
236
  name: 'VFormControl',
148
237
  props: { ...props$8,
@@ -151,9 +240,14 @@ const VFormControl = vue.defineComponent({
151
240
  emits: emits$8,
152
241
 
153
242
  setup(props, ctx) {
154
- const control = vueKit.useFormControl(props, ctx);
155
- ctx.expose(control.expose());
156
243
  const vui = useVui();
244
+ const control = vueKit.useFormControl(props, ctx, {
245
+ hinttipPrepend: () => vue.createVNode(VIcon, {
246
+ "class": "v-form-control__label__hinttip__icon",
247
+ "name": vui.icon('hinttip')
248
+ }, null)
249
+ });
250
+ ctx.expose(control.expose());
157
251
  const colorProvider = useVuiColorProvider();
158
252
  const classes = vue.computed(() => [{
159
253
  'v-form-control--validating': control.validating,
@@ -168,10 +262,12 @@ const VFormControl = vue.defineComponent({
168
262
  'v-form-control--invalid': control.invalid,
169
263
  'v-form-control--valid': control.valid
170
264
  }, colorProvider.className(control.invalid && !control.readonly ? 'error' : 'primary')]);
265
+ const getRequiredChip = createRequiredChipRenderer(() => control.required, props, vui);
171
266
  return () => {
172
267
  const label = control.renderLabel();
173
268
  const message = control.renderMessage();
174
269
  const appends = control.renderInfoAppends();
270
+ const hinttip = control.renderHinttip();
175
271
  return vue.createVNode("div", {
176
272
  "class": ['v-form-control', classes.value]
177
273
  }, [label && vue.createVNode("label", {
@@ -179,7 +275,18 @@ const VFormControl = vue.defineComponent({
179
275
  "onClick": ev => {
180
276
  ctx.emit('clickLabel', ev, control);
181
277
  }
182
- }, [label, control.required && vui.getRequiredChip()]), vue.createVNode("div", {
278
+ }, [label, getRequiredChip(), hinttip && vue.createVNode(vueKit.VTooltip, {
279
+ "top": true,
280
+ "openOnHover": false
281
+ }, {
282
+ default: () => [vue.createVNode("div", {
283
+ "class": "v-form-control__label__hinttip__hint"
284
+ }, [hinttip.hint])],
285
+ activator: ctx => vue.createVNode("a", vue.mergeProps({
286
+ "class": "v-form-control__label__hinttip",
287
+ "href": "javascript:void(0)"
288
+ }, ctx.attrs), [hinttip.tip])
289
+ })]), vue.createVNode("div", {
183
290
  "class": "v-form-control__body"
184
291
  }, [vueKit.renderSlotOrEmpty(ctx.slots, 'default', control), !props.hiddenInfo && vue.createVNode("div", {
185
292
  "class": "v-form-control__info"
@@ -239,7 +346,9 @@ function defineFormSelectorComponent(opts) {
239
346
  'v-form-selector--stacked': this.stacked
240
347
  }],
241
348
  "label": this.label,
242
- "hint": this.hint
349
+ "hint": this.hint,
350
+ "hinttip": this.hinttip,
351
+ "requiredChip": this.requiredChip
243
352
  }, { ...this.$slots,
244
353
  default: () => vue.createVNode("div", {
245
354
  "class": "v-form-selector__body"
@@ -567,71 +676,6 @@ const VCardActions = vue.defineComponent({
567
676
 
568
677
  });
569
678
 
570
- // prop: RawIconProp<T>,
571
- // payload: () => T,
572
- // ): RawIconProp {
573
- // if (!prop || typeof prop !== 'function') {
574
- // return prop;
575
- // }
576
- // const fn = (gen: IconGenerator): VNodeChild => {
577
- // const t = payload();
578
- // return prop(gen, t);
579
- // };
580
- // return fn;
581
- // }
582
- // export const rawRawIconProp = [String, Function] as PropType<RawIconProp>;
583
-
584
- const _rawIconProp = [String, Function];
585
- function rawIconProp() {
586
- return _rawIconProp;
587
- }
588
- function resolveRawIconProp(payload, prop, extraProps) {
589
- if (!prop) return;
590
- return typeof prop === 'function' ? prop(input => vue.createVNode(VIcon, vue.mergeProps(input, extraProps), null), payload) : vue.createVNode(VIcon, vue.mergeProps(extraProps, {
591
- "name": prop
592
- }), null);
593
- }
594
- const iconProps = vueUtils.createPropsOptions({
595
- name: {
596
- type: String,
597
- required: true
598
- },
599
- rotate: {
600
- type: Number
601
- }
602
- });
603
- const VIcon = vue.defineComponent({
604
- name: 'VIcon',
605
- props: { ...iconProps
606
- },
607
- emits: {},
608
-
609
- setup(props, ctx) {
610
- const iconName = vue.computed(() => props.name);
611
- const clickable = vue.computed(() => typeof ctx.attrs.onClick !== 'undefined');
612
- const classes = vue.computed(() => [{
613
- 'v-icon--clickable': clickable.value
614
- }]);
615
- const bodyClasses = vue.computed(() => `icon-${iconName.value}`);
616
- const bodyStyles = vue.computed(() => {
617
- const {
618
- rotate
619
- } = props;
620
- if (!rotate) return;
621
- return {
622
- transform: `rotate(${rotate}deg)`
623
- };
624
- });
625
- return () => vue.createVNode("span", {
626
- "class": [`v-icon notranslate`, classes.value]
627
- }, [vue.createVNode("i", {
628
- "class": ['v-icon__body icon', bodyClasses.value],
629
- "style": bodyStyles.value
630
- }, null)]);
631
- }
632
-
633
- });
634
-
635
679
  function resolveRawVButtonIcon(raw, type = 'main') {
636
680
  if (!raw) return;
637
681
  return typeof raw === 'function' ? raw : () => vue.createVNode(VIcon, {
@@ -2040,7 +2084,9 @@ const VSelect = vue.defineComponent({
2040
2084
  "class": ['v-select', this.classes],
2041
2085
  "label": this.label,
2042
2086
  "hint": this.hint,
2087
+ "hinttip": this.hinttip,
2043
2088
  "hiddenInfo": this.hiddenInfo,
2089
+ "requiredChip": this.requiredChip,
2044
2090
  "onClickLabel": ev => {
2045
2091
  this.focus();
2046
2092
  }
@@ -2103,7 +2149,16 @@ const VSelect = vue.defineComponent({
2103
2149
  }, [vue.createVNode("div", {
2104
2150
  "class": "v-select__selections__inner"
2105
2151
  }, [this.renderSelections(selectedItems)])])],
2106
- endAdornment: () => vue.createVNode(VIcon, {
2152
+ endAdornment: () => this.clearable && this.nodeControl.value != null && vue.createVNode(VButton, {
2153
+ "key": "clear",
2154
+ "icon": this.$vui.icon('clear'),
2155
+ "rounded": true,
2156
+ "onClick": ev => {
2157
+ ev.stopPropagation();
2158
+ this.nodeControl.clear();
2159
+ }
2160
+ }, null) || vue.createVNode(VIcon, {
2161
+ "key": "icon",
2107
2162
  "name": this.iconName,
2108
2163
  "rotate": this.menuOpened ? 180 : 0
2109
2164
  }, null)
@@ -2174,6 +2229,8 @@ const VTextField = vue.defineComponent({
2174
2229
  "class": ['v-text-field', this.classes],
2175
2230
  "label": this.label,
2176
2231
  "hint": this.hint,
2232
+ "hinttip": this.hinttip,
2233
+ "requiredChip": this.requiredChip,
2177
2234
  "onClickLabel": ev => {
2178
2235
  this.focus();
2179
2236
  }
@@ -2234,7 +2291,9 @@ const VTextarea = vue.defineComponent({
2234
2291
  "class": ['v-textarea', this.classes],
2235
2292
  "label": this.label,
2236
2293
  "hint": this.hint,
2294
+ "hinttip": this.hinttip,
2237
2295
  "hiddenInfo": this.hiddenInfo,
2296
+ "requiredChip": this.requiredChip,
2238
2297
  "onClickLabel": ev => {
2239
2298
  this.focus();
2240
2299
  }
@@ -2456,7 +2515,9 @@ const VWysiwygEditor = vue.defineComponent({
2456
2515
  }],
2457
2516
  "label": this.label,
2458
2517
  "hint": this.hint,
2518
+ "hinttip": this.hinttip,
2459
2519
  "hiddenInfo": this.hiddenInfo,
2520
+ "requiredChip": this.requiredChip,
2460
2521
  "onClickLabel": ev => {
2461
2522
  this.focus('start', {
2462
2523
  scrollIntoView: true
@@ -4271,6 +4332,7 @@ function installVuiPlugin(app, opts) {
4271
4332
  exports.VDialog = vueKit.VDialog;
4272
4333
  exports.VMenu = vueKit.VMenu;
4273
4334
  exports.VSnackbar = vueKit.VSnackbar;
4335
+ exports.VTooltip = vueKit.VTooltip;
4274
4336
  exports.ICON_NAMES = iconFont.ICON_NAMES;
4275
4337
  exports.CONTROL_FIELD_VARIANTS = CONTROL_FIELD_VARIANTS;
4276
4338
  exports.CONTROL_SIZES = CONTROL_SIZES;
@@ -4348,6 +4410,7 @@ exports.createListTileProps = createListTileProps;
4348
4410
  exports.createNavigationItemProps = createNavigationItemProps;
4349
4411
  exports.createPaperBaseProps = createPaperBaseProps;
4350
4412
  exports.createPaperProps = createPaperProps;
4413
+ exports.createRequiredChipRenderer = createRequiredChipRenderer;
4351
4414
  exports.defineFormSelectorComponent = defineFormSelectorComponent;
4352
4415
  exports.iconProps = iconProps;
4353
4416
  exports.installVuiPlugin = installVuiPlugin;
@@ -139,10 +139,99 @@ function useControlField(props, opts = {}) {
139
139
  return provider;
140
140
  }
141
141
 
142
+ // prop: RawIconProp<T>,
143
+ // payload: () => T,
144
+ // ): RawIconProp {
145
+ // if (!prop || typeof prop !== 'function') {
146
+ // return prop;
147
+ // }
148
+ // const fn = (gen: IconGenerator): VNodeChild => {
149
+ // const t = payload();
150
+ // return prop(gen, t);
151
+ // };
152
+ // return fn;
153
+ // }
154
+ // export const rawRawIconProp = [String, Function] as PropType<RawIconProp>;
155
+
156
+ const _rawIconProp = [String, Function];
157
+ function rawIconProp() {
158
+ return _rawIconProp;
159
+ }
160
+ function resolveRawIconProp(payload, prop, extraProps) {
161
+ if (!prop) return;
162
+ return typeof prop === 'function' ? prop(input => vue.createVNode(VIcon, vue.mergeProps(input, extraProps), null), payload) : vue.createVNode(VIcon, vue.mergeProps(extraProps, {
163
+ "name": prop
164
+ }), null);
165
+ }
166
+ const iconProps = vueUtils.createPropsOptions({
167
+ name: {
168
+ type: String,
169
+ required: true
170
+ },
171
+ rotate: {
172
+ type: Number
173
+ }
174
+ });
175
+ const VIcon = vue.defineComponent({
176
+ name: 'VIcon',
177
+ props: { ...iconProps
178
+ },
179
+ emits: {},
180
+
181
+ setup(props, ctx) {
182
+ const iconName = vue.computed(() => props.name);
183
+ const clickable = vue.computed(() => typeof ctx.attrs.onClick !== 'undefined');
184
+ const classes = vue.computed(() => [{
185
+ 'v-icon--clickable': clickable.value
186
+ }]);
187
+ const bodyClasses = vue.computed(() => `icon-${iconName.value}`);
188
+ const bodyStyles = vue.computed(() => {
189
+ const {
190
+ rotate
191
+ } = props;
192
+ if (!rotate) return;
193
+ return {
194
+ transform: `rotate(${rotate}deg)`
195
+ };
196
+ });
197
+ return () => vue.createVNode("span", {
198
+ "class": [`v-icon notranslate`, classes.value]
199
+ }, [vue.createVNode("i", {
200
+ "class": ['v-icon__body icon', bodyClasses.value],
201
+ "style": bodyStyles.value
202
+ }, null)]);
203
+ }
204
+
205
+ });
206
+
142
207
  const {
143
208
  props: props$8,
144
209
  emits: emits$8
145
210
  } = vueKit.createFormControlSettings();
211
+ function createRequiredChipRenderer(required, props, vui = useVui()) {
212
+ return () => {
213
+ if (!required()) return;
214
+ let chip;
215
+ const {
216
+ requiredChip
217
+ } = props;
218
+ if (requiredChip === false) return;
219
+
220
+ if (requiredChip) {
221
+ if (typeof requiredChip === 'string') {
222
+ chip = requiredChip;
223
+ } else if (typeof requiredChip === 'function') {
224
+ chip = requiredChip();
225
+ }
226
+ }
227
+
228
+ if (chip === undefined) {
229
+ chip = vui.getRequiredChip();
230
+ }
231
+
232
+ return chip;
233
+ };
234
+ }
146
235
  const VFormControl = vue.defineComponent({
147
236
  name: 'VFormControl',
148
237
  props: { ...props$8,
@@ -151,9 +240,14 @@ const VFormControl = vue.defineComponent({
151
240
  emits: emits$8,
152
241
 
153
242
  setup(props, ctx) {
154
- const control = vueKit.useFormControl(props, ctx);
155
- ctx.expose(control.expose());
156
243
  const vui = useVui();
244
+ const control = vueKit.useFormControl(props, ctx, {
245
+ hinttipPrepend: () => vue.createVNode(VIcon, {
246
+ "class": "v-form-control__label__hinttip__icon",
247
+ "name": vui.icon('hinttip')
248
+ }, null)
249
+ });
250
+ ctx.expose(control.expose());
157
251
  const colorProvider = useVuiColorProvider();
158
252
  const classes = vue.computed(() => [{
159
253
  'v-form-control--validating': control.validating,
@@ -168,10 +262,12 @@ const VFormControl = vue.defineComponent({
168
262
  'v-form-control--invalid': control.invalid,
169
263
  'v-form-control--valid': control.valid
170
264
  }, colorProvider.className(control.invalid && !control.readonly ? 'error' : 'primary')]);
265
+ const getRequiredChip = createRequiredChipRenderer(() => control.required, props, vui);
171
266
  return () => {
172
267
  const label = control.renderLabel();
173
268
  const message = control.renderMessage();
174
269
  const appends = control.renderInfoAppends();
270
+ const hinttip = control.renderHinttip();
175
271
  return vue.createVNode("div", {
176
272
  "class": ['v-form-control', classes.value]
177
273
  }, [label && vue.createVNode("label", {
@@ -179,7 +275,18 @@ const VFormControl = vue.defineComponent({
179
275
  "onClick": ev => {
180
276
  ctx.emit('clickLabel', ev, control);
181
277
  }
182
- }, [label, control.required && vui.getRequiredChip()]), vue.createVNode("div", {
278
+ }, [label, getRequiredChip(), hinttip && vue.createVNode(vueKit.VTooltip, {
279
+ "top": true,
280
+ "openOnHover": false
281
+ }, {
282
+ default: () => [vue.createVNode("div", {
283
+ "class": "v-form-control__label__hinttip__hint"
284
+ }, [hinttip.hint])],
285
+ activator: ctx => vue.createVNode("a", vue.mergeProps({
286
+ "class": "v-form-control__label__hinttip",
287
+ "href": "javascript:void(0)"
288
+ }, ctx.attrs), [hinttip.tip])
289
+ })]), vue.createVNode("div", {
183
290
  "class": "v-form-control__body"
184
291
  }, [vueKit.renderSlotOrEmpty(ctx.slots, 'default', control), !props.hiddenInfo && vue.createVNode("div", {
185
292
  "class": "v-form-control__info"
@@ -239,7 +346,9 @@ function defineFormSelectorComponent(opts) {
239
346
  'v-form-selector--stacked': this.stacked
240
347
  }],
241
348
  "label": this.label,
242
- "hint": this.hint
349
+ "hint": this.hint,
350
+ "hinttip": this.hinttip,
351
+ "requiredChip": this.requiredChip
243
352
  }, { ...this.$slots,
244
353
  default: () => vue.createVNode("div", {
245
354
  "class": "v-form-selector__body"
@@ -567,71 +676,6 @@ const VCardActions = vue.defineComponent({
567
676
 
568
677
  });
569
678
 
570
- // prop: RawIconProp<T>,
571
- // payload: () => T,
572
- // ): RawIconProp {
573
- // if (!prop || typeof prop !== 'function') {
574
- // return prop;
575
- // }
576
- // const fn = (gen: IconGenerator): VNodeChild => {
577
- // const t = payload();
578
- // return prop(gen, t);
579
- // };
580
- // return fn;
581
- // }
582
- // export const rawRawIconProp = [String, Function] as PropType<RawIconProp>;
583
-
584
- const _rawIconProp = [String, Function];
585
- function rawIconProp() {
586
- return _rawIconProp;
587
- }
588
- function resolveRawIconProp(payload, prop, extraProps) {
589
- if (!prop) return;
590
- return typeof prop === 'function' ? prop(input => vue.createVNode(VIcon, vue.mergeProps(input, extraProps), null), payload) : vue.createVNode(VIcon, vue.mergeProps(extraProps, {
591
- "name": prop
592
- }), null);
593
- }
594
- const iconProps = vueUtils.createPropsOptions({
595
- name: {
596
- type: String,
597
- required: true
598
- },
599
- rotate: {
600
- type: Number
601
- }
602
- });
603
- const VIcon = vue.defineComponent({
604
- name: 'VIcon',
605
- props: { ...iconProps
606
- },
607
- emits: {},
608
-
609
- setup(props, ctx) {
610
- const iconName = vue.computed(() => props.name);
611
- const clickable = vue.computed(() => typeof ctx.attrs.onClick !== 'undefined');
612
- const classes = vue.computed(() => [{
613
- 'v-icon--clickable': clickable.value
614
- }]);
615
- const bodyClasses = vue.computed(() => `icon-${iconName.value}`);
616
- const bodyStyles = vue.computed(() => {
617
- const {
618
- rotate
619
- } = props;
620
- if (!rotate) return;
621
- return {
622
- transform: `rotate(${rotate}deg)`
623
- };
624
- });
625
- return () => vue.createVNode("span", {
626
- "class": [`v-icon notranslate`, classes.value]
627
- }, [vue.createVNode("i", {
628
- "class": ['v-icon__body icon', bodyClasses.value],
629
- "style": bodyStyles.value
630
- }, null)]);
631
- }
632
-
633
- });
634
-
635
679
  function resolveRawVButtonIcon(raw, type = 'main') {
636
680
  if (!raw) return;
637
681
  return typeof raw === 'function' ? raw : () => vue.createVNode(VIcon, {
@@ -2040,7 +2084,9 @@ const VSelect = vue.defineComponent({
2040
2084
  "class": ['v-select', this.classes],
2041
2085
  "label": this.label,
2042
2086
  "hint": this.hint,
2087
+ "hinttip": this.hinttip,
2043
2088
  "hiddenInfo": this.hiddenInfo,
2089
+ "requiredChip": this.requiredChip,
2044
2090
  "onClickLabel": ev => {
2045
2091
  this.focus();
2046
2092
  }
@@ -2103,7 +2149,16 @@ const VSelect = vue.defineComponent({
2103
2149
  }, [vue.createVNode("div", {
2104
2150
  "class": "v-select__selections__inner"
2105
2151
  }, [this.renderSelections(selectedItems)])])],
2106
- endAdornment: () => vue.createVNode(VIcon, {
2152
+ endAdornment: () => this.clearable && this.nodeControl.value != null && vue.createVNode(VButton, {
2153
+ "key": "clear",
2154
+ "icon": this.$vui.icon('clear'),
2155
+ "rounded": true,
2156
+ "onClick": ev => {
2157
+ ev.stopPropagation();
2158
+ this.nodeControl.clear();
2159
+ }
2160
+ }, null) || vue.createVNode(VIcon, {
2161
+ "key": "icon",
2107
2162
  "name": this.iconName,
2108
2163
  "rotate": this.menuOpened ? 180 : 0
2109
2164
  }, null)
@@ -2174,6 +2229,8 @@ const VTextField = vue.defineComponent({
2174
2229
  "class": ['v-text-field', this.classes],
2175
2230
  "label": this.label,
2176
2231
  "hint": this.hint,
2232
+ "hinttip": this.hinttip,
2233
+ "requiredChip": this.requiredChip,
2177
2234
  "onClickLabel": ev => {
2178
2235
  this.focus();
2179
2236
  }
@@ -2234,7 +2291,9 @@ const VTextarea = vue.defineComponent({
2234
2291
  "class": ['v-textarea', this.classes],
2235
2292
  "label": this.label,
2236
2293
  "hint": this.hint,
2294
+ "hinttip": this.hinttip,
2237
2295
  "hiddenInfo": this.hiddenInfo,
2296
+ "requiredChip": this.requiredChip,
2238
2297
  "onClickLabel": ev => {
2239
2298
  this.focus();
2240
2299
  }
@@ -2456,7 +2515,9 @@ const VWysiwygEditor = vue.defineComponent({
2456
2515
  }],
2457
2516
  "label": this.label,
2458
2517
  "hint": this.hint,
2518
+ "hinttip": this.hinttip,
2459
2519
  "hiddenInfo": this.hiddenInfo,
2520
+ "requiredChip": this.requiredChip,
2460
2521
  "onClickLabel": ev => {
2461
2522
  this.focus('start', {
2462
2523
  scrollIntoView: true
@@ -4271,6 +4332,7 @@ function installVuiPlugin(app, opts) {
4271
4332
  exports.VDialog = vueKit.VDialog;
4272
4333
  exports.VMenu = vueKit.VMenu;
4273
4334
  exports.VSnackbar = vueKit.VSnackbar;
4335
+ exports.VTooltip = vueKit.VTooltip;
4274
4336
  exports.ICON_NAMES = iconFont.ICON_NAMES;
4275
4337
  exports.CONTROL_FIELD_VARIANTS = CONTROL_FIELD_VARIANTS;
4276
4338
  exports.CONTROL_SIZES = CONTROL_SIZES;
@@ -4348,6 +4410,7 @@ exports.createListTileProps = createListTileProps;
4348
4410
  exports.createNavigationItemProps = createNavigationItemProps;
4349
4411
  exports.createPaperBaseProps = createPaperBaseProps;
4350
4412
  exports.createPaperProps = createPaperProps;
4413
+ exports.createRequiredChipRenderer = createRequiredChipRenderer;
4351
4414
  exports.defineFormSelectorComponent = defineFormSelectorComponent;
4352
4415
  exports.iconProps = iconProps;
4353
4416
  exports.installVuiPlugin = installVuiPlugin;