vuetify 3.5.8 → 3.5.10
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/_component-variables-labs.sass +1 -0
- package/dist/json/attributes.json +525 -13
- package/dist/json/importMap-labs.json +24 -8
- package/dist/json/importMap.json +130 -130
- package/dist/json/tags.json +148 -0
- package/dist/json/web-types.json +2021 -147
- package/dist/vuetify-labs.css +2819 -2760
- package/dist/vuetify-labs.d.ts +5860 -2816
- package/dist/vuetify-labs.esm.js +1286 -248
- package/dist/vuetify-labs.esm.js.map +1 -1
- package/dist/vuetify-labs.js +1286 -247
- package/dist/vuetify-labs.min.css +2 -2
- package/dist/vuetify.css +553 -547
- package/dist/vuetify.d.ts +2835 -2281
- package/dist/vuetify.esm.js +883 -408
- package/dist/vuetify.esm.js.map +1 -1
- package/dist/vuetify.js +882 -406
- package/dist/vuetify.js.map +1 -1
- package/dist/vuetify.min.css +2 -2
- package/dist/vuetify.min.js +1137 -1109
- package/dist/vuetify.min.js.map +1 -1
- package/lib/components/VAlert/index.d.mts +15 -15
- package/lib/components/VApp/index.d.mts +8 -8
- package/lib/components/VAppBar/index.d.mts +7 -7
- package/lib/components/VAutocomplete/VAutocomplete.mjs +9 -7
- package/lib/components/VAutocomplete/VAutocomplete.mjs.map +1 -1
- package/lib/components/VAutocomplete/index.d.mts +232 -100
- package/lib/components/VAvatar/index.d.mts +8 -8
- package/lib/components/VBadge/index.d.mts +7 -7
- package/lib/components/VBanner/index.d.mts +20 -20
- package/lib/components/VBreadcrumbs/VBreadcrumbs.mjs.map +1 -1
- package/lib/components/VBreadcrumbs/index.d.mts +27 -26
- package/lib/components/VBtnGroup/index.d.mts +8 -8
- package/lib/components/VCard/index.d.mts +32 -32
- package/lib/components/VCarousel/index.d.mts +6 -6
- package/lib/components/VCheckbox/index.d.mts +44 -44
- package/lib/components/VChip/index.d.mts +7 -7
- package/lib/components/VCode/index.d.mts +8 -8
- package/lib/components/VColorPicker/VColorPickerPreview.css +1 -0
- package/lib/components/VColorPicker/VColorPickerPreview.sass +1 -0
- package/lib/components/VColorPicker/_variables.scss +1 -0
- package/lib/components/VCombobox/VCombobox.mjs +10 -7
- package/lib/components/VCombobox/VCombobox.mjs.map +1 -1
- package/lib/components/VCombobox/index.d.mts +232 -100
- package/lib/components/VDataTable/index.d.mts +6 -6
- package/lib/components/VDatePicker/VDatePickerControls.mjs +1 -0
- package/lib/components/VDatePicker/VDatePickerControls.mjs.map +1 -1
- package/lib/components/VDatePicker/VDatePickerMonth.mjs +10 -4
- package/lib/components/VDatePicker/VDatePickerMonth.mjs.map +1 -1
- package/lib/components/VDatePicker/index.d.mts +10 -10
- package/lib/components/VDefaultsProvider/index.d.mts +8 -8
- package/lib/components/VDialog/index.d.mts +12 -6
- package/lib/components/VDivider/index.d.mts +8 -8
- package/lib/components/VExpansionPanel/index.d.mts +19 -19
- package/lib/components/VField/VField.css +2 -0
- package/lib/components/VField/VField.mjs +1 -1
- package/lib/components/VField/VField.mjs.map +1 -1
- package/lib/components/VField/VField.sass +2 -0
- package/lib/components/VField/index.d.mts +28 -28
- package/lib/components/VFileInput/index.d.mts +133 -133
- package/lib/components/VFooter/index.d.mts +8 -8
- package/lib/components/VGrid/index.d.mts +32 -32
- package/lib/components/VIcon/VIcon.css +4 -0
- package/lib/components/VIcon/VIcon.mjs +7 -3
- package/lib/components/VIcon/VIcon.mjs.map +1 -1
- package/lib/components/VIcon/VIcon.sass +4 -0
- package/lib/components/VIcon/_variables.scss +1 -0
- package/lib/components/VIcon/index.d.mts +25 -16
- package/lib/components/VImg/index.d.mts +4 -4
- package/lib/components/VInput/index.d.mts +21 -21
- package/lib/components/VKbd/index.d.mts +8 -8
- package/lib/components/VLabel/index.d.mts +8 -8
- package/lib/components/VLayout/index.d.mts +16 -16
- package/lib/components/VLazy/index.d.mts +8 -8
- package/lib/components/VList/VList.mjs +8 -2
- package/lib/components/VList/VList.mjs.map +1 -1
- package/lib/components/VList/VListGroup.mjs +3 -1
- package/lib/components/VList/VListGroup.mjs.map +1 -1
- package/lib/components/VList/VListItem.mjs +17 -4
- package/lib/components/VList/VListItem.mjs.map +1 -1
- package/lib/components/VList/index.d.mts +156 -54
- package/lib/components/VLocaleProvider/index.d.mts +12 -12
- package/lib/components/VMain/index.d.mts +8 -8
- package/lib/components/VMenu/VMenu.mjs +3 -0
- package/lib/components/VMenu/VMenu.mjs.map +1 -1
- package/lib/components/VMenu/index.d.mts +14 -8
- package/lib/components/VNavigationDrawer/VNavigationDrawer.css +1 -1
- package/lib/components/VNavigationDrawer/VNavigationDrawer.mjs +22 -8
- package/lib/components/VNavigationDrawer/VNavigationDrawer.mjs.map +1 -1
- package/lib/components/VNavigationDrawer/VNavigationDrawer.sass +2 -1
- package/lib/components/VNavigationDrawer/index.d.mts +11 -11
- package/lib/components/VOtpInput/VOtpInput.mjs +7 -2
- package/lib/components/VOtpInput/VOtpInput.mjs.map +1 -1
- package/lib/components/VOtpInput/index.d.mts +31 -31
- package/lib/components/VOverlay/VOverlay.mjs +8 -3
- package/lib/components/VOverlay/VOverlay.mjs.map +1 -1
- package/lib/components/VOverlay/index.d.mts +3 -0
- package/lib/components/VOverlay/scrollStrategies.mjs +2 -2
- package/lib/components/VOverlay/scrollStrategies.mjs.map +1 -1
- package/lib/components/VPagination/index.d.mts +7 -7
- package/lib/components/VProgressLinear/VProgressLinear.css +0 -1
- package/lib/components/VProgressLinear/VProgressLinear.sass +0 -1
- package/lib/components/VProgressLinear/index.d.mts +7 -7
- package/lib/components/VRadioGroup/index.d.mts +44 -44
- package/lib/components/VRangeSlider/index.d.mts +47 -47
- package/lib/components/VRating/index.d.mts +7 -7
- package/lib/components/VResponsive/index.d.mts +8 -8
- package/lib/components/VSelect/VSelect.mjs +5 -3
- package/lib/components/VSelect/VSelect.mjs.map +1 -1
- package/lib/components/VSelect/index.d.mts +232 -100
- package/lib/components/VSheet/index.d.mts +8 -8
- package/lib/components/VSkeletonLoader/index.d.mts +8 -8
- package/lib/components/VSlider/index.d.mts +47 -47
- package/lib/components/VSnackbar/index.d.mts +25 -19
- package/lib/components/VStepper/index.d.mts +41 -41
- package/lib/components/VSwitch/index.d.mts +39 -39
- package/lib/components/VSystemBar/index.d.mts +8 -8
- package/lib/components/VTabs/index.d.mts +15 -15
- package/lib/components/VTextField/index.d.mts +173 -173
- package/lib/components/VTextarea/index.d.mts +119 -119
- package/lib/components/VThemeProvider/index.d.mts +8 -8
- package/lib/components/VTimeline/index.d.mts +8 -8
- package/lib/components/VToolbar/index.d.mts +8 -8
- package/lib/components/VTooltip/index.d.mts +14 -8
- package/lib/components/VWindow/index.d.mts +10 -10
- package/lib/components/index.d.mts +2478 -1943
- package/lib/components/transitions/index.d.mts +128 -128
- package/lib/composables/date/adapters/vuetify.mjs +1 -1
- package/lib/composables/date/adapters/vuetify.mjs.map +1 -1
- package/lib/composables/nested/activeStrategies.mjs +121 -0
- package/lib/composables/nested/activeStrategies.mjs.map +1 -0
- package/lib/composables/nested/nested.mjs +50 -1
- package/lib/composables/nested/nested.mjs.map +1 -1
- package/lib/composables/nested/selectStrategies.mjs +4 -2
- package/lib/composables/nested/selectStrategies.mjs.map +1 -1
- package/lib/composables/theme.mjs +1 -1
- package/lib/composables/theme.mjs.map +1 -1
- package/lib/entry-bundler.mjs +3 -2
- package/lib/entry-bundler.mjs.map +1 -1
- package/lib/framework.mjs +1 -1
- package/lib/framework.mjs.map +1 -1
- package/lib/iconsets/fa.mjs +2 -0
- package/lib/iconsets/fa.mjs.map +1 -1
- package/lib/iconsets/fa4.mjs +2 -0
- package/lib/iconsets/fa4.mjs.map +1 -1
- package/lib/iconsets/md.mjs +2 -0
- package/lib/iconsets/md.mjs.map +1 -1
- package/lib/iconsets/mdi-svg.mjs +2 -0
- package/lib/iconsets/mdi-svg.mjs.map +1 -1
- package/lib/iconsets/mdi.mjs +2 -0
- package/lib/iconsets/mdi.mjs.map +1 -1
- package/lib/index.d.mts +48 -44
- package/lib/labs/VCalendar/index.d.mts +32 -32
- package/lib/labs/VFab/index.d.mts +15 -15
- package/lib/labs/VNumberInput/VNumberInput.css +38 -0
- package/lib/labs/VNumberInput/VNumberInput.mjs +209 -0
- package/lib/labs/VNumberInput/VNumberInput.mjs.map +1 -0
- package/lib/labs/VNumberInput/VNumberInput.sass +47 -0
- package/lib/labs/VNumberInput/_variables.scss +1 -0
- package/lib/labs/VNumberInput/index.d.mts +607 -0
- package/lib/labs/VNumberInput/index.mjs +2 -0
- package/lib/labs/VNumberInput/index.mjs.map +1 -0
- package/lib/labs/VPicker/index.d.mts +8 -8
- package/lib/labs/VSparkline/index.d.mts +7 -7
- package/lib/labs/VSpeedDial/VSpeedDial.mjs +9 -5
- package/lib/labs/VSpeedDial/VSpeedDial.mjs.map +1 -1
- package/lib/labs/VSpeedDial/index.d.mts +120 -24
- package/lib/labs/VTreeview/VTreeview.mjs +154 -0
- package/lib/labs/VTreeview/VTreeview.mjs.map +1 -0
- package/lib/labs/VTreeview/VTreeviewChildren.mjs +98 -0
- package/lib/labs/VTreeview/VTreeviewChildren.mjs.map +1 -0
- package/lib/labs/VTreeview/VTreeviewGroup.mjs +48 -0
- package/lib/labs/VTreeview/VTreeviewGroup.mjs.map +1 -0
- package/lib/labs/VTreeview/VTreeviewItem.css +17 -0
- package/lib/labs/VTreeview/VTreeviewItem.mjs +86 -0
- package/lib/labs/VTreeview/VTreeviewItem.mjs.map +1 -0
- package/lib/labs/VTreeview/VTreeviewItem.sass +19 -0
- package/lib/labs/VTreeview/index.d.mts +1975 -0
- package/lib/labs/VTreeview/index.mjs +4 -0
- package/lib/labs/VTreeview/index.mjs.map +1 -0
- package/lib/labs/VTreeview/shared.mjs +4 -0
- package/lib/labs/VTreeview/shared.mjs.map +1 -0
- package/lib/labs/VTreeview/variables.scss +8 -0
- package/lib/labs/components.d.mts +4553 -1925
- package/lib/labs/components.mjs +4 -2
- package/lib/labs/components.mjs.map +1 -1
- package/lib/locale/no.mjs +1 -1
- package/lib/locale/no.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,209 @@
|
|
|
1
|
+
import { Fragment as _Fragment, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
|
|
2
|
+
// Styles
|
|
3
|
+
import "./VNumberInput.css";
|
|
4
|
+
|
|
5
|
+
// Components
|
|
6
|
+
import { VBtn } from "../../components/VBtn/index.mjs";
|
|
7
|
+
import { VDefaultsProvider } from "../../components/VDefaultsProvider/index.mjs";
|
|
8
|
+
import { VDivider } from "../../components/VDivider/index.mjs";
|
|
9
|
+
import { filterFieldProps, makeVFieldProps, VField } from "../../components/VField/VField.mjs";
|
|
10
|
+
import { makeVInputProps, VInput } from "../../components/VInput/VInput.mjs"; // Composables
|
|
11
|
+
import { makeFocusProps, useFocus } from "../../composables/focus.mjs";
|
|
12
|
+
import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
|
|
13
|
+
import { computed, ref } from 'vue';
|
|
14
|
+
import { filterInputAttrs, genericComponent, only, propsFactory, useRender } from "../../util/index.mjs"; // Types
|
|
15
|
+
const makeVNumberInputProps = propsFactory({
|
|
16
|
+
controlVariant: {
|
|
17
|
+
type: String,
|
|
18
|
+
default: 'default'
|
|
19
|
+
},
|
|
20
|
+
inset: Boolean,
|
|
21
|
+
hideInput: Boolean,
|
|
22
|
+
min: Number,
|
|
23
|
+
max: Number,
|
|
24
|
+
step: Number,
|
|
25
|
+
...only(makeVInputProps(), ['density', 'disabled', 'focused', 'hideDetails', 'hint', 'label', 'persistentHint', 'readonly']),
|
|
26
|
+
...only(makeVFieldProps(), ['baseColor', 'bgColor', 'class', 'color', 'disabled', 'error', 'loading', 'reverse', 'rounded', 'style', 'theme', 'variant']),
|
|
27
|
+
...makeFocusProps()
|
|
28
|
+
}, 'VNumberInput');
|
|
29
|
+
export const VNumberInput = genericComponent()({
|
|
30
|
+
name: 'VNumberInput',
|
|
31
|
+
inheritAttrs: false,
|
|
32
|
+
props: {
|
|
33
|
+
...makeVNumberInputProps(),
|
|
34
|
+
modelValue: {
|
|
35
|
+
type: [Number, String],
|
|
36
|
+
default: 0
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
emits: {
|
|
40
|
+
'update:modelValue': val => true
|
|
41
|
+
},
|
|
42
|
+
setup(props, _ref) {
|
|
43
|
+
let {
|
|
44
|
+
attrs,
|
|
45
|
+
emit,
|
|
46
|
+
slots
|
|
47
|
+
} = _ref;
|
|
48
|
+
const model = useProxiedModel(props, 'modelValue');
|
|
49
|
+
const {
|
|
50
|
+
isFocused,
|
|
51
|
+
focus,
|
|
52
|
+
blur
|
|
53
|
+
} = useFocus(props);
|
|
54
|
+
const inputRef = ref();
|
|
55
|
+
function onFocus() {
|
|
56
|
+
if (!isFocused.value) focus();
|
|
57
|
+
}
|
|
58
|
+
const controlVariant = computed(() => {
|
|
59
|
+
return props.hideInput ? 'stacked' : props.controlVariant;
|
|
60
|
+
});
|
|
61
|
+
function toggleUpDown() {
|
|
62
|
+
let increment = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
|
63
|
+
if (increment) {
|
|
64
|
+
inputRef.value?.stepUp();
|
|
65
|
+
} else {
|
|
66
|
+
inputRef.value?.stepDown();
|
|
67
|
+
}
|
|
68
|
+
if (inputRef.value) model.value = parseInt(inputRef.value.value, 10);
|
|
69
|
+
}
|
|
70
|
+
function onClickUp() {
|
|
71
|
+
toggleUpDown();
|
|
72
|
+
}
|
|
73
|
+
function onClickDown() {
|
|
74
|
+
toggleUpDown(false);
|
|
75
|
+
}
|
|
76
|
+
const incrementSlotProps = computed(() => ({
|
|
77
|
+
click: onClickUp
|
|
78
|
+
}));
|
|
79
|
+
const decrementSlotProps = computed(() => ({
|
|
80
|
+
click: onClickDown
|
|
81
|
+
}));
|
|
82
|
+
useRender(() => {
|
|
83
|
+
const fieldProps = filterFieldProps(props);
|
|
84
|
+
const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
|
|
85
|
+
const {
|
|
86
|
+
modelValue: _,
|
|
87
|
+
...inputProps
|
|
88
|
+
} = VInput.filterProps(props);
|
|
89
|
+
function controlNode() {
|
|
90
|
+
const defaultHeight = controlVariant.value === 'stacked' ? 'auto' : '100%';
|
|
91
|
+
return _createVNode("div", {
|
|
92
|
+
"class": "v-number-input__control"
|
|
93
|
+
}, [!slots.decrement ? _createVNode(VBtn, {
|
|
94
|
+
"flat": true,
|
|
95
|
+
"key": "decrement-btn",
|
|
96
|
+
"height": defaultHeight,
|
|
97
|
+
"icon": "mdi-chevron-down",
|
|
98
|
+
"rounded": "0",
|
|
99
|
+
"size": "small",
|
|
100
|
+
"onClick": onClickDown
|
|
101
|
+
}, null) : _createVNode(VDefaultsProvider, {
|
|
102
|
+
"key": "decrement-defaults",
|
|
103
|
+
"defaults": {
|
|
104
|
+
VBtn: {
|
|
105
|
+
flat: true,
|
|
106
|
+
rounded: '0',
|
|
107
|
+
height: defaultHeight,
|
|
108
|
+
size: 'small',
|
|
109
|
+
icon: 'mdi-chevron-down'
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}, {
|
|
113
|
+
default: () => [slots.decrement(decrementSlotProps.value)]
|
|
114
|
+
}), _createVNode(VDivider, {
|
|
115
|
+
"vertical": controlVariant.value !== 'stacked'
|
|
116
|
+
}, null), !slots.increment ? _createVNode(VBtn, {
|
|
117
|
+
"flat": true,
|
|
118
|
+
"key": "increment-btn",
|
|
119
|
+
"height": defaultHeight,
|
|
120
|
+
"icon": "mdi-chevron-up",
|
|
121
|
+
"onClick": onClickUp,
|
|
122
|
+
"rounded": "0",
|
|
123
|
+
"size": "small"
|
|
124
|
+
}, null) : _createVNode(VDefaultsProvider, {
|
|
125
|
+
"key": "increment-defaults",
|
|
126
|
+
"defaults": {
|
|
127
|
+
VBtn: {
|
|
128
|
+
flat: true,
|
|
129
|
+
height: defaultHeight,
|
|
130
|
+
rounded: '0',
|
|
131
|
+
size: 'small',
|
|
132
|
+
icon: 'mdi-chevron-up'
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}, {
|
|
136
|
+
default: () => [slots.increment(incrementSlotProps.value)]
|
|
137
|
+
})]);
|
|
138
|
+
}
|
|
139
|
+
function dividerNode() {
|
|
140
|
+
return !props.hideInput && !props.inset ? _createVNode(VDivider, {
|
|
141
|
+
"vertical": true
|
|
142
|
+
}, null) : undefined;
|
|
143
|
+
}
|
|
144
|
+
return _createVNode(VInput, _mergeProps({
|
|
145
|
+
"class": ['v-number-input', {
|
|
146
|
+
'v-number-input--default': controlVariant.value === 'default',
|
|
147
|
+
'v-number-input--hide-input': props.hideInput,
|
|
148
|
+
'v-number-input--inset': props.inset,
|
|
149
|
+
'v-number-input--reverse': props.reverse,
|
|
150
|
+
'v-number-input--split': controlVariant.value === 'split',
|
|
151
|
+
'v-number-input--stacked': controlVariant.value === 'stacked'
|
|
152
|
+
}, props.class]
|
|
153
|
+
}, rootAttrs, inputProps, {
|
|
154
|
+
"focused": isFocused.value,
|
|
155
|
+
"style": props.style
|
|
156
|
+
}), {
|
|
157
|
+
...slots,
|
|
158
|
+
default: () => _createVNode(VField, _mergeProps(fieldProps, {
|
|
159
|
+
"active": true,
|
|
160
|
+
"focused": isFocused.value
|
|
161
|
+
}), {
|
|
162
|
+
...slots,
|
|
163
|
+
default: _ref2 => {
|
|
164
|
+
let {
|
|
165
|
+
props: {
|
|
166
|
+
class: fieldClass,
|
|
167
|
+
...slotProps
|
|
168
|
+
}
|
|
169
|
+
} = _ref2;
|
|
170
|
+
return _createVNode("input", _mergeProps({
|
|
171
|
+
"ref": inputRef,
|
|
172
|
+
"type": "number",
|
|
173
|
+
"value": model.value,
|
|
174
|
+
"class": fieldClass,
|
|
175
|
+
"max": props.max,
|
|
176
|
+
"min": props.min,
|
|
177
|
+
"step": props.step,
|
|
178
|
+
"onFocus": onFocus,
|
|
179
|
+
"onBlur": blur
|
|
180
|
+
}, inputAttrs), null);
|
|
181
|
+
},
|
|
182
|
+
'append-inner': controlVariant.value === 'split' ? () => _createVNode("div", {
|
|
183
|
+
"class": "v-number-input__control"
|
|
184
|
+
}, [_createVNode(VDivider, {
|
|
185
|
+
"vertical": true
|
|
186
|
+
}, null), _createVNode(VBtn, {
|
|
187
|
+
"flat": true,
|
|
188
|
+
"height": "100%",
|
|
189
|
+
"icon": "mdi-plus",
|
|
190
|
+
"tile": true,
|
|
191
|
+
"onClick": onClickUp
|
|
192
|
+
}, null)]) : !props.reverse ? () => _createVNode(_Fragment, null, [dividerNode(), controlNode()]) : undefined,
|
|
193
|
+
'prepend-inner': controlVariant.value === 'split' ? () => _createVNode("div", {
|
|
194
|
+
"class": "v-number-input__control"
|
|
195
|
+
}, [_createVNode(VBtn, {
|
|
196
|
+
"flat": true,
|
|
197
|
+
"height": "100%",
|
|
198
|
+
"icon": "mdi-minus",
|
|
199
|
+
"tile": true,
|
|
200
|
+
"onClick": onClickDown
|
|
201
|
+
}, null), _createVNode(VDivider, {
|
|
202
|
+
"vertical": true
|
|
203
|
+
}, null)]) : props.reverse ? () => _createVNode(_Fragment, null, [controlNode(), dividerNode()]) : undefined
|
|
204
|
+
})
|
|
205
|
+
});
|
|
206
|
+
});
|
|
207
|
+
}
|
|
208
|
+
});
|
|
209
|
+
//# sourceMappingURL=VNumberInput.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VNumberInput.mjs","names":["VBtn","VDefaultsProvider","VDivider","filterFieldProps","makeVFieldProps","VField","makeVInputProps","VInput","makeFocusProps","useFocus","useProxiedModel","computed","ref","filterInputAttrs","genericComponent","only","propsFactory","useRender","makeVNumberInputProps","controlVariant","type","String","default","inset","Boolean","hideInput","min","Number","max","step","VNumberInput","name","inheritAttrs","props","modelValue","emits","val","setup","_ref","attrs","emit","slots","model","isFocused","focus","blur","inputRef","onFocus","value","toggleUpDown","increment","arguments","length","undefined","stepUp","stepDown","parseInt","onClickUp","onClickDown","incrementSlotProps","click","decrementSlotProps","fieldProps","rootAttrs","inputAttrs","_","inputProps","filterProps","controlNode","defaultHeight","_createVNode","decrement","flat","rounded","height","size","icon","dividerNode","_mergeProps","reverse","class","style","_ref2","fieldClass","slotProps","_Fragment"],"sources":["../../../src/labs/VNumberInput/VNumberInput.tsx"],"sourcesContent":["// Styles\nimport './VNumberInput.sass'\n\n// Components\nimport { VBtn } from '../../components/VBtn'\nimport { VDefaultsProvider } from '../../components/VDefaultsProvider'\nimport { VDivider } from '../../components/VDivider'\nimport { filterFieldProps, makeVFieldProps, VField } from '@/components/VField/VField'\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\n\n// Composables\nimport { makeFocusProps, useFocus } from '@/composables/focus'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { filterInputAttrs, genericComponent, only, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { VFieldSlots } from '@/components/VField/VField'\nimport type { VInputSlots } from '@/components/VInput/VInput'\n\ntype ControlSlot = {\n click: () => void\n}\n\ntype VNumberInputSlots = Omit<VInputSlots & VFieldSlots, 'default'> & {\n increment: ControlSlot\n decrement: ControlSlot\n}\n\ntype ControlVariant = 'default' | 'stacked' | 'split'\n\nconst makeVNumberInputProps = propsFactory({\n controlVariant: {\n type: String as PropType<ControlVariant>,\n default: 'default',\n },\n inset: Boolean,\n hideInput: Boolean,\n min: Number,\n max: Number,\n step: Number,\n\n ...only(makeVInputProps(), [\n 'density',\n 'disabled',\n 'focused',\n 'hideDetails',\n 'hint',\n 'label',\n 'persistentHint',\n 'readonly',\n ]),\n ...only(makeVFieldProps(), [\n 'baseColor',\n 'bgColor',\n 'class',\n 'color',\n 'disabled',\n 'error',\n 'loading',\n 'reverse',\n 'rounded',\n 'style',\n 'theme',\n 'variant',\n ]),\n ...makeFocusProps(),\n}, 'VNumberInput')\n\nexport const VNumberInput = genericComponent<VNumberInputSlots>()({\n name: 'VNumberInput',\n\n inheritAttrs: false,\n\n props: {\n ...makeVNumberInputProps(),\n\n modelValue: {\n type: [Number, String],\n default: 0,\n },\n },\n\n emits: {\n 'update:modelValue': (val: number) => true,\n },\n\n setup (props, { attrs, emit, slots }) {\n const model = useProxiedModel(props, 'modelValue')\n const { isFocused, focus, blur } = useFocus(props)\n const inputRef = ref<HTMLInputElement>()\n\n function onFocus () {\n if (!isFocused.value) focus()\n }\n\n const controlVariant = computed(() => {\n return props.hideInput ? 'stacked' : props.controlVariant\n })\n\n function toggleUpDown (increment = true) {\n if (increment) {\n inputRef.value?.stepUp()\n } else {\n inputRef.value?.stepDown()\n }\n\n if (inputRef.value) model.value = parseInt(inputRef.value.value, 10)\n }\n\n function onClickUp () {\n toggleUpDown()\n }\n\n function onClickDown () {\n toggleUpDown(false)\n }\n\n const incrementSlotProps = computed(() => ({ click: onClickUp }))\n\n const decrementSlotProps = computed(() => ({ click: onClickDown }))\n\n useRender(() => {\n const fieldProps = filterFieldProps(props)\n const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)\n const { modelValue: _, ...inputProps } = VInput.filterProps(props)\n\n function controlNode () {\n const defaultHeight = controlVariant.value === 'stacked' ? 'auto' : '100%'\n return (\n <div class=\"v-number-input__control\">\n {\n !slots.decrement ? (\n <VBtn\n flat\n key=\"decrement-btn\"\n height={ defaultHeight }\n icon=\"mdi-chevron-down\"\n rounded=\"0\"\n size=\"small\"\n onClick={ onClickDown }\n />\n ) : (\n <VDefaultsProvider\n key=\"decrement-defaults\"\n defaults={{\n VBtn: {\n flat: true,\n rounded: '0',\n height: defaultHeight,\n size: 'small',\n icon: 'mdi-chevron-down',\n },\n }}\n >\n { slots.decrement(decrementSlotProps.value) }\n </VDefaultsProvider>\n )\n }\n\n <VDivider\n vertical={ controlVariant.value !== 'stacked' }\n />\n\n {\n !slots.increment ? (\n <VBtn\n flat\n key=\"increment-btn\"\n height={ defaultHeight }\n icon=\"mdi-chevron-up\"\n onClick={ onClickUp }\n rounded=\"0\"\n size=\"small\"\n />\n ) : (\n <VDefaultsProvider\n key=\"increment-defaults\"\n defaults={{\n VBtn: {\n flat: true,\n height: defaultHeight,\n rounded: '0',\n size: 'small',\n icon: 'mdi-chevron-up',\n },\n }}\n >\n { slots.increment(incrementSlotProps.value) }\n </VDefaultsProvider>\n )\n }\n </div>\n )\n }\n\n function dividerNode () {\n return !props.hideInput && !props.inset ? <VDivider vertical /> : undefined\n }\n\n return (\n <VInput\n class={[\n 'v-number-input',\n {\n 'v-number-input--default': controlVariant.value === 'default',\n 'v-number-input--hide-input': props.hideInput,\n 'v-number-input--inset': props.inset,\n 'v-number-input--reverse': props.reverse,\n 'v-number-input--split': controlVariant.value === 'split',\n 'v-number-input--stacked': controlVariant.value === 'stacked',\n },\n props.class,\n ]}\n { ...rootAttrs }\n { ...inputProps }\n focused={ isFocused.value }\n style={ props.style }\n >\n {{\n ...slots,\n default: () => (\n <VField\n { ...fieldProps }\n active\n focused={ isFocused.value }\n >\n {{\n ...slots,\n default: ({\n props: { class: fieldClass, ...slotProps },\n }) => (\n <input\n ref={ inputRef }\n type=\"number\"\n value={ model.value }\n class={ fieldClass }\n max={ props.max }\n min={ props.min }\n step={ props.step }\n onFocus={ onFocus }\n onBlur={ blur }\n { ...inputAttrs }\n />\n ),\n 'append-inner': controlVariant.value === 'split' ? () => (\n <div class=\"v-number-input__control\">\n <VDivider vertical />\n\n <VBtn\n flat\n height=\"100%\"\n icon=\"mdi-plus\"\n tile\n onClick={ onClickUp }\n />\n </div>\n ) : (!props.reverse\n ? () => <>{ dividerNode() }{ controlNode() }</>\n : undefined),\n 'prepend-inner': controlVariant.value === 'split' ? () => (\n <div class=\"v-number-input__control\">\n <VBtn\n flat\n height=\"100%\"\n icon=\"mdi-minus\"\n tile\n onClick={ onClickDown }\n />\n\n <VDivider vertical />\n </div>\n ) : (props.reverse\n ? () => <>{ controlNode() }{ dividerNode() }</>\n : undefined),\n }}\n </VField>\n ),\n }}\n </VInput>\n )\n })\n },\n})\n\nexport type VNumberInput = InstanceType<typeof VNumberInput>\n"],"mappings":"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"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
@use 'sass:selector'
|
|
2
|
+
@use './variables' as *
|
|
3
|
+
|
|
4
|
+
.v-number-input
|
|
5
|
+
$root: &
|
|
6
|
+
$control-root: #{selector.append($root, '__control')}
|
|
7
|
+
|
|
8
|
+
input[type="number"]
|
|
9
|
+
-moz-appearance: textfield
|
|
10
|
+
|
|
11
|
+
&::-webkit-outer-spin-button,
|
|
12
|
+
&::-webkit-inner-spin-button
|
|
13
|
+
-webkit-appearance: none
|
|
14
|
+
|
|
15
|
+
.v-field
|
|
16
|
+
padding-inline-end: 0
|
|
17
|
+
padding-inline-start: 0
|
|
18
|
+
|
|
19
|
+
&--inset
|
|
20
|
+
.v-divider
|
|
21
|
+
height: $number-input-inset-divider-size
|
|
22
|
+
width: $number-input-inset-divider-size
|
|
23
|
+
align-self: center
|
|
24
|
+
|
|
25
|
+
&--split
|
|
26
|
+
.v-field__input
|
|
27
|
+
text-align: center
|
|
28
|
+
|
|
29
|
+
&--stacked
|
|
30
|
+
#{$control-root}
|
|
31
|
+
flex-direction: column-reverse
|
|
32
|
+
.v-btn
|
|
33
|
+
flex: 1
|
|
34
|
+
|
|
35
|
+
&--hide-input
|
|
36
|
+
.v-field
|
|
37
|
+
flex: none
|
|
38
|
+
&__input
|
|
39
|
+
width: 0
|
|
40
|
+
padding-inline: 0
|
|
41
|
+
|
|
42
|
+
&__control
|
|
43
|
+
display: flex
|
|
44
|
+
height: 100%
|
|
45
|
+
|
|
46
|
+
.v-btn
|
|
47
|
+
background-color: transparent
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
$number-input-inset-divider-size: 55% !default;
|