@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.
- package/dist/tool/index.js +2 -0
- package/dist/tool/vite-plugin.d.ts.map +1 -1
- package/dist/vui.cjs.js +133 -70
- package/dist/vui.cjs.prod.js +133 -70
- package/dist/vui.css +45 -17
- package/dist/vui.d.ts +119 -0
- package/dist/vui.min.css +1 -1
- package/dist/vui.min.css.map +1 -1
- package/dist/vui.mjs +135 -74
- package/package.json +6 -6
- package/src/components/VFormControl/VFormControl.scss +42 -0
- package/src/components/VFormControl/VFormControl.tsx +69 -4
- package/src/components/VSelect/VSelect.tsx +21 -5
- package/src/components/VTextField/VTextField.tsx +2 -0
- package/src/components/VTextarea/VTextarea.tsx +2 -0
- package/src/components/VWysiwygEditor/VWysiwygEditor.tsx +2 -0
- package/src/components/kits.ts +1 -1
- package/src/composables/form-selector.tsx +2 -0
- package/src/service.tsx +2 -0
- package/src/tool/vite-plugin.ts +2 -0
- package/dist/assets/.DS_Store +0 -0
- package/src/.DS_Store +0 -0
- package/src/assets/.DS_Store +0 -0
- package/src/components/.DS_Store +0 -0
- package/src/components/VButton/.DS_Store +0 -0
- package/src/components/VCheckboxGroup/.DS_Store +0 -0
- package/src/components/VHero/.DS_Store +0 -0
- package/src/components/VRadio/.DS_Store +0 -0
- package/src/components/VRadioGroup/.DS_Store +0 -0
- package/src/components/VSwitchGroup/.DS_Store +0 -0
- package/src/components/VTabs/.DS_Store +0 -0
- package/src/components/VToolbar/.DS_Store +0 -0
- package/src/components/VWysiwygEditor/.DS_Store +0 -0
- package/src/composables/.DS_Store +0 -0
- package/src/styles/.DS_Store +0 -0
- package/src/tool/.DS_Store +0 -0
package/dist/tool/index.js
CHANGED
|
@@ -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,
|
|
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,
|
|
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(
|
|
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;
|
package/dist/vui.cjs.prod.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,
|
|
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(
|
|
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;
|