181 lines
6.4 KiB
JavaScript
181 lines
6.4 KiB
JavaScript
|
import { mergeProps as _mergeProps, Fragment as _Fragment, createVNode as _createVNode } from "vue";
|
||
|
// Styles
|
||
|
import "./VSwitch.css";
|
||
|
|
||
|
// Components
|
||
|
import { VScaleTransition } from "../transitions/index.mjs";
|
||
|
import { VDefaultsProvider } from "../VDefaultsProvider/VDefaultsProvider.mjs";
|
||
|
import { VIcon } from "../VIcon/index.mjs";
|
||
|
import { makeVInputProps, VInput } from "../VInput/VInput.mjs";
|
||
|
import { VProgressCircular } from "../VProgressCircular/index.mjs";
|
||
|
import { makeVSelectionControlProps, VSelectionControl } from "../VSelectionControl/VSelectionControl.mjs"; // Composables
|
||
|
import { useFocus } from "../../composables/focus.mjs";
|
||
|
import { LoaderSlot, useLoader } from "../../composables/loader.mjs";
|
||
|
import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
|
||
|
import { computed, ref } from 'vue';
|
||
|
import { filterInputAttrs, genericComponent, getUid, propsFactory, useRender } from "../../util/index.mjs"; // Types
|
||
|
export const makeVSwitchProps = propsFactory({
|
||
|
indeterminate: Boolean,
|
||
|
inset: Boolean,
|
||
|
flat: Boolean,
|
||
|
loading: {
|
||
|
type: [Boolean, String],
|
||
|
default: false
|
||
|
},
|
||
|
...makeVInputProps(),
|
||
|
...makeVSelectionControlProps()
|
||
|
}, 'VSwitch');
|
||
|
export const VSwitch = genericComponent()({
|
||
|
name: 'VSwitch',
|
||
|
inheritAttrs: false,
|
||
|
props: makeVSwitchProps(),
|
||
|
emits: {
|
||
|
'update:focused': focused => true,
|
||
|
'update:modelValue': value => true,
|
||
|
'update:indeterminate': value => true
|
||
|
},
|
||
|
setup(props, _ref) {
|
||
|
let {
|
||
|
attrs,
|
||
|
slots
|
||
|
} = _ref;
|
||
|
const indeterminate = useProxiedModel(props, 'indeterminate');
|
||
|
const model = useProxiedModel(props, 'modelValue');
|
||
|
const {
|
||
|
loaderClasses
|
||
|
} = useLoader(props);
|
||
|
const {
|
||
|
isFocused,
|
||
|
focus,
|
||
|
blur
|
||
|
} = useFocus(props);
|
||
|
const control = ref();
|
||
|
const loaderColor = computed(() => {
|
||
|
return typeof props.loading === 'string' && props.loading !== '' ? props.loading : props.color;
|
||
|
});
|
||
|
const uid = getUid();
|
||
|
const id = computed(() => props.id || `switch-${uid}`);
|
||
|
function onChange() {
|
||
|
if (indeterminate.value) {
|
||
|
indeterminate.value = false;
|
||
|
}
|
||
|
}
|
||
|
function onTrackClick(e) {
|
||
|
e.stopPropagation();
|
||
|
e.preventDefault();
|
||
|
control.value?.input?.click();
|
||
|
}
|
||
|
useRender(() => {
|
||
|
const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
|
||
|
const inputProps = VInput.filterProps(props);
|
||
|
const controlProps = VSelectionControl.filterProps(props);
|
||
|
return _createVNode(VInput, _mergeProps({
|
||
|
"class": ['v-switch', {
|
||
|
'v-switch--inset': props.inset
|
||
|
}, {
|
||
|
'v-switch--indeterminate': indeterminate.value
|
||
|
}, loaderClasses.value, props.class]
|
||
|
}, rootAttrs, inputProps, {
|
||
|
"modelValue": model.value,
|
||
|
"onUpdate:modelValue": $event => model.value = $event,
|
||
|
"id": id.value,
|
||
|
"focused": isFocused.value,
|
||
|
"style": props.style
|
||
|
}), {
|
||
|
...slots,
|
||
|
default: _ref2 => {
|
||
|
let {
|
||
|
id,
|
||
|
messagesId,
|
||
|
isDisabled,
|
||
|
isReadonly,
|
||
|
isValid
|
||
|
} = _ref2;
|
||
|
const slotProps = {
|
||
|
model,
|
||
|
isValid
|
||
|
};
|
||
|
return _createVNode(VSelectionControl, _mergeProps({
|
||
|
"ref": control
|
||
|
}, controlProps, {
|
||
|
"modelValue": model.value,
|
||
|
"onUpdate:modelValue": [$event => model.value = $event, onChange],
|
||
|
"id": id.value,
|
||
|
"aria-describedby": messagesId.value,
|
||
|
"type": "checkbox",
|
||
|
"aria-checked": indeterminate.value ? 'mixed' : undefined,
|
||
|
"disabled": isDisabled.value,
|
||
|
"readonly": isReadonly.value,
|
||
|
"onFocus": focus,
|
||
|
"onBlur": blur
|
||
|
}, controlAttrs), {
|
||
|
...slots,
|
||
|
default: _ref3 => {
|
||
|
let {
|
||
|
backgroundColorClasses,
|
||
|
backgroundColorStyles
|
||
|
} = _ref3;
|
||
|
return _createVNode("div", {
|
||
|
"class": ['v-switch__track', ...backgroundColorClasses.value],
|
||
|
"style": backgroundColorStyles.value,
|
||
|
"onClick": onTrackClick
|
||
|
}, [slots['track-true'] && _createVNode("div", {
|
||
|
"key": "prepend",
|
||
|
"class": "v-switch__track-true"
|
||
|
}, [slots['track-true'](slotProps)]), slots['track-false'] && _createVNode("div", {
|
||
|
"key": "append",
|
||
|
"class": "v-switch__track-false"
|
||
|
}, [slots['track-false'](slotProps)])]);
|
||
|
},
|
||
|
input: _ref4 => {
|
||
|
let {
|
||
|
inputNode,
|
||
|
icon,
|
||
|
backgroundColorClasses,
|
||
|
backgroundColorStyles
|
||
|
} = _ref4;
|
||
|
return _createVNode(_Fragment, null, [inputNode, _createVNode("div", {
|
||
|
"class": ['v-switch__thumb', {
|
||
|
'v-switch__thumb--filled': icon || props.loading
|
||
|
}, props.inset ? undefined : backgroundColorClasses.value],
|
||
|
"style": props.inset ? undefined : backgroundColorStyles.value
|
||
|
}, [slots.thumb ? _createVNode(VDefaultsProvider, {
|
||
|
"defaults": {
|
||
|
VIcon: {
|
||
|
icon,
|
||
|
size: 'x-small'
|
||
|
}
|
||
|
}
|
||
|
}, {
|
||
|
default: () => [slots.thumb({
|
||
|
...slotProps,
|
||
|
icon
|
||
|
})]
|
||
|
}) : _createVNode(VScaleTransition, null, {
|
||
|
default: () => [!props.loading ? icon && _createVNode(VIcon, {
|
||
|
"key": String(icon),
|
||
|
"icon": icon,
|
||
|
"size": "x-small"
|
||
|
}, null) : _createVNode(LoaderSlot, {
|
||
|
"name": "v-switch",
|
||
|
"active": true,
|
||
|
"color": isValid.value === false ? undefined : loaderColor.value
|
||
|
}, {
|
||
|
default: slotProps => slots.loader ? slots.loader(slotProps) : _createVNode(VProgressCircular, {
|
||
|
"active": slotProps.isActive,
|
||
|
"color": slotProps.color,
|
||
|
"indeterminate": true,
|
||
|
"size": "16",
|
||
|
"width": "2"
|
||
|
}, null)
|
||
|
})]
|
||
|
})])]);
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
});
|
||
|
});
|
||
|
return {};
|
||
|
}
|
||
|
});
|
||
|
//# sourceMappingURL=VSwitch.mjs.map
|