109 lines
3.5 KiB
JavaScript
109 lines
3.5 KiB
JavaScript
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode } from "vue";
|
|
// Styles
|
|
import "./VSelectionControlGroup.css";
|
|
|
|
// Composables
|
|
import { makeComponentProps } from "../../composables/component.js";
|
|
import { provideDefaults } from "../../composables/defaults.js";
|
|
import { makeDensityProps } from "../../composables/density.js";
|
|
import { IconValue } from "../../composables/icons.js";
|
|
import { useProxiedModel } from "../../composables/proxiedModel.js";
|
|
import { makeThemeProps } from "../../composables/theme.js"; // Utilities
|
|
import { onScopeDispose, provide, toRef, useId } from 'vue';
|
|
import { deepEqual, genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
|
|
export const VSelectionControlGroupSymbol = Symbol.for('vuetify:selection-control-group');
|
|
export const makeSelectionControlGroupProps = propsFactory({
|
|
color: String,
|
|
disabled: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
defaultsTarget: String,
|
|
error: Boolean,
|
|
id: String,
|
|
inline: Boolean,
|
|
falseIcon: IconValue,
|
|
trueIcon: IconValue,
|
|
ripple: {
|
|
type: [Boolean, Object],
|
|
default: true
|
|
},
|
|
multiple: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
name: String,
|
|
readonly: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
modelValue: null,
|
|
type: String,
|
|
valueComparator: {
|
|
type: Function,
|
|
default: deepEqual
|
|
},
|
|
...makeComponentProps(),
|
|
...makeDensityProps(),
|
|
...makeThemeProps()
|
|
}, 'SelectionControlGroup');
|
|
export const makeVSelectionControlGroupProps = propsFactory({
|
|
...makeSelectionControlGroupProps({
|
|
defaultsTarget: 'VSelectionControl'
|
|
})
|
|
}, 'VSelectionControlGroup');
|
|
export const VSelectionControlGroup = genericComponent()({
|
|
name: 'VSelectionControlGroup',
|
|
props: makeVSelectionControlGroupProps(),
|
|
emits: {
|
|
'update:modelValue': value => true
|
|
},
|
|
setup(props, {
|
|
slots
|
|
}) {
|
|
const modelValue = useProxiedModel(props, 'modelValue');
|
|
const uid = useId();
|
|
const id = toRef(() => props.id || `v-selection-control-group-${uid}`);
|
|
const name = toRef(() => props.name || id.value);
|
|
const updateHandlers = new Set();
|
|
provide(VSelectionControlGroupSymbol, {
|
|
modelValue,
|
|
forceUpdate: () => {
|
|
updateHandlers.forEach(fn => fn());
|
|
},
|
|
onForceUpdate: cb => {
|
|
updateHandlers.add(cb);
|
|
onScopeDispose(() => {
|
|
updateHandlers.delete(cb);
|
|
});
|
|
}
|
|
});
|
|
provideDefaults({
|
|
[props.defaultsTarget]: {
|
|
color: toRef(() => props.color),
|
|
disabled: toRef(() => props.disabled),
|
|
density: toRef(() => props.density),
|
|
error: toRef(() => props.error),
|
|
inline: toRef(() => props.inline),
|
|
modelValue,
|
|
multiple: toRef(() => !!props.multiple || props.multiple == null && Array.isArray(modelValue.value)),
|
|
name,
|
|
falseIcon: toRef(() => props.falseIcon),
|
|
trueIcon: toRef(() => props.trueIcon),
|
|
readonly: toRef(() => props.readonly),
|
|
ripple: toRef(() => props.ripple),
|
|
type: toRef(() => props.type),
|
|
valueComparator: toRef(() => props.valueComparator)
|
|
}
|
|
});
|
|
useRender(() => _createElementVNode("div", {
|
|
"class": _normalizeClass(['v-selection-control-group', {
|
|
'v-selection-control-group--inline': props.inline
|
|
}, props.class]),
|
|
"style": _normalizeStyle(props.style),
|
|
"role": props.type === 'radio' ? 'radiogroup' : undefined
|
|
}, [slots.default?.()]));
|
|
return {};
|
|
}
|
|
});
|
|
//# sourceMappingURL=VSelectionControlGroup.js.map
|