Vulture/VApp/node_modules/vuetify/lib/components/VSwitch/VSwitch.mjs

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