110 lines
3.4 KiB
JavaScript
110 lines
3.4 KiB
JavaScript
import { createVNode as _createVNode } from "vue";
|
|
// Styles
|
|
import "./VSelectionControlGroup.css";
|
|
|
|
// Composables
|
|
import { makeComponentProps } from "../../composables/component.mjs";
|
|
import { provideDefaults } from "../../composables/defaults.mjs";
|
|
import { makeDensityProps } from "../../composables/density.mjs";
|
|
import { IconValue } from "../../composables/icons.mjs";
|
|
import { useProxiedModel } from "../../composables/proxiedModel.mjs";
|
|
import { makeThemeProps } from "../../composables/theme.mjs"; // Utilities
|
|
import { computed, onScopeDispose, provide, toRef } from 'vue';
|
|
import { deepEqual, genericComponent, getUid, propsFactory, useRender } from "../../util/index.mjs"; // 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,
|
|
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, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
const modelValue = useProxiedModel(props, 'modelValue');
|
|
const uid = getUid();
|
|
const id = computed(() => props.id || `v-selection-control-group-${uid}`);
|
|
const name = computed(() => 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: computed(() => !!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(() => _createVNode("div", {
|
|
"class": ['v-selection-control-group', {
|
|
'v-selection-control-group--inline': props.inline
|
|
}, props.class],
|
|
"style": props.style,
|
|
"role": props.type === 'radio' ? 'radiogroup' : undefined
|
|
}, [slots.default?.()]));
|
|
return {};
|
|
}
|
|
});
|
|
//# sourceMappingURL=VSelectionControlGroup.mjs.map
|