@varlet/ui
Version:
A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.
264 lines (263 loc) • 9.8 kB
JavaScript
import { computed, defineComponent, nextTick, ref } from "vue";
import { call, preventDefault } from "@varlet/shared";
import { useEventListener } from "@varlet/use";
import VarFormDetails from "../form-details/index.mjs";
import { useForm } from "../form/provide.mjs";
import Hover from "../hover/index.mjs";
import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
import Ripple from "../ripple/index.mjs";
import { createNamespace, formatElevation, useValidation } from "../utils/components.mjs";
import { multiplySizeUnit } from "../utils/elements.mjs";
import { props } from "./props.mjs";
const { name, n, classes } = createNamespace("switch");
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives } from "vue";
const _hoisted_1 = ["aria-checked"];
const _hoisted_2 = ["tabindex"];
function __render__(_ctx, _cache) {
const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
const _component_var_form_details = _resolveComponent("var-form-details");
const _directive_ripple = _resolveDirective("ripple");
const _directive_hover = _resolveDirective("hover");
return _withDirectives((_openBlock(), _createElementBlock("div", {
class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.variant, _ctx.n("--variant")])),
role: "switch",
"aria-checked": _ctx.modelValue
}, [
_createElementVNode(
"div",
{
ref: "switchRef",
class: _normalizeClass(_ctx.classes(_ctx.n("block"), [_ctx.disabled || _ctx.formDisabled, _ctx.n("--disabled")], [_ctx.isActive, _ctx.n("block--active")])),
style: _normalizeStyle(_ctx.styleComputed.switch),
onClick: _cache[2] || (_cache[2] = (...args) => _ctx.switchActive && _ctx.switchActive(...args))
},
[
_createElementVNode(
"div",
{
style: _normalizeStyle(_ctx.styleComputed.track),
class: _normalizeClass(_ctx.classes(_ctx.n("track"), [_ctx.isActive, _ctx.n("track--active")], [_ctx.errorMessage && !_ctx.variant, _ctx.n("track--error")]))
},
null,
6
/* CLASS, STYLE */
),
_withDirectives((_openBlock(), _createElementBlock("div", {
class: _normalizeClass(_ctx.classes(_ctx.n("ripple"), [_ctx.isActive, _ctx.n("ripple--active")])),
style: _normalizeStyle(_ctx.styleComputed.ripple),
tabindex: _ctx.disabled || _ctx.formDisabled ? void 0 : "0",
onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.isFocusing = true),
onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.isFocusing = false)
}, [
_createElementVNode(
"div",
{
style: _normalizeStyle(_ctx.styleComputed.handle),
class: _normalizeClass(
_ctx.classes(
_ctx.n("handle"),
_ctx.formatElevation(_ctx.buttonElevation, 2),
[_ctx.isActive, _ctx.n("handle--active")],
[_ctx.errorMessage && !_ctx.variant, _ctx.n("handle--error")],
[_ctx.hovering, _ctx.n("handle--hover")]
)
)
},
[
_ctx.loading ? (_openBlock(), _createElementBlock(
"span",
{
key: 0,
class: _normalizeClass(_ctx.n("loading")),
style: _normalizeStyle({
width: _ctx.radius,
height: _ctx.radius
})
},
_cache[3] || (_cache[3] = [
_createElementVNode(
"svg",
{ viewBox: "25 25 50 50" },
[
_createElementVNode("circle", {
cx: "50",
cy: "50",
r: "20",
fill: "none"
})
],
-1
/* HOISTED */
)
]),
6
/* CLASS, STYLE */
)) : _createCommentVNode("v-if", true)
],
6
/* CLASS, STYLE */
),
_createVNode(_component_var_hover_overlay, {
hovering: _ctx.hovering && !_ctx.disabled && !_ctx.formDisabled,
focusing: _ctx.isFocusing && !_ctx.disabled && !_ctx.formDisabled
}, null, 8, ["hovering", "focusing"])
], 46, _hoisted_2)), [
[_directive_ripple, {
disabled: !_ctx.ripple || _ctx.disabled || _ctx.loading || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly
}]
])
],
6
/* CLASS, STYLE */
),
_createVNode(_component_var_form_details, { "error-message": _ctx.errorMessage }, null, 8, ["error-message"])
], 10, _hoisted_1)), [
[_directive_hover, _ctx.hover, "desktop"]
]);
}
const __sfc__ = defineComponent({
name,
components: {
VarFormDetails,
VarHoverOverlay
},
directives: { Ripple, Hover },
props,
setup(props2) {
const switchRef = ref(null);
const isFocusing = ref(false);
const { bindForm, form } = useForm();
const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation();
const { hovering, handleHovering } = useHoverOverlay();
const isActive = computed(() => props2.modelValue === props2.activeValue);
const styleComputed = computed(() => {
const { size, color, closeColor, loadingColor, variant } = props2;
return {
handle: {
width: multiplySizeUnit(size),
height: multiplySizeUnit(size),
backgroundColor: isActive.value ? color : closeColor,
color: loadingColor
},
ripple: {
left: isActive.value ? multiplySizeUnit(size, 0.5) : `-${multiplySizeUnit(size, variant ? 1 / 3 : 0.5)}`,
color: isActive.value ? color : closeColor || "currentColor",
width: multiplySizeUnit(size, 2),
height: multiplySizeUnit(size, 2)
},
track: {
width: multiplySizeUnit(size, variant ? 13 / 6 : 1.9),
height: multiplySizeUnit(size, variant ? 4 / 3 : 0.72),
borderRadius: multiplySizeUnit(size, 2 / 3),
filter: isActive.value || (errorMessage == null ? void 0 : errorMessage.value) ? void 0 : `brightness(${variant ? 1 : 0.6})`,
backgroundColor: isActive.value ? color : closeColor,
borderWidth: variant && !isActive.value ? multiplySizeUnit(size, 1 / 12) : void 0
},
switch: {
width: multiplySizeUnit(size, variant ? 13 / 6 : 2),
height: multiplySizeUnit(size, variant ? 4 / 3 : 1.2)
}
};
});
const radius = computed(() => multiplySizeUnit(props2.size, 0.8));
const switchProvider = {
reset,
validate,
resetValidation
};
call(bindForm, switchProvider);
useEventListener(() => window, "keydown", handleKeydown);
useEventListener(() => window, "keyup", handleKeyup);
function handleKeydown(event) {
if (!isFocusing.value) {
return;
}
if (event.key === " " || event.key === "Enter") {
preventDefault(event);
}
if (event.key === "Enter") {
switchRef.value.click();
}
}
function handleKeyup(event) {
if (!isFocusing.value || event.key !== " ") {
return;
}
preventDefault(event);
switchRef.value.click();
}
function validate() {
return v(props2.rules, props2.modelValue);
}
function validateWithTrigger(trigger) {
nextTick(() => {
const { validateTrigger, rules, modelValue } = props2;
vt(validateTrigger, trigger, rules, modelValue);
});
}
function switchActive(event) {
const {
onClick,
onChange,
disabled,
loading,
readonly,
activeValue,
inactiveValue,
lazyChange,
"onUpdate:modelValue": updateModelValue,
onBeforeChange
} = props2;
if (disabled || (form == null ? void 0 : form.disabled.value)) {
return;
}
call(onClick, event);
if (loading || readonly || (form == null ? void 0 : form.readonly.value)) {
return;
}
const newValue = isActive.value ? inactiveValue : activeValue;
if (lazyChange) {
call(onBeforeChange, newValue, (value) => {
call(updateModelValue, value);
validateWithTrigger("onLazyChange");
});
} else {
call(onChange, newValue);
call(updateModelValue, newValue);
validateWithTrigger("onChange");
}
}
function hover(value) {
if (props2.disabled || (form == null ? void 0 : form.disabled.value)) {
return;
}
handleHovering(value);
}
function reset() {
call(props2["onUpdate:modelValue"], props2.inactiveValue);
resetValidation();
}
return {
isActive,
switchRef,
hovering,
isFocusing,
radius,
styleComputed,
errorMessage,
formDisabled: form == null ? void 0 : form.disabled,
formReadonly: form == null ? void 0 : form.readonly,
n,
classes,
formatElevation,
multiplySizeUnit,
switchActive,
hover
};
}
});
__sfc__.render = __render__;
var stdin_default = __sfc__;
export {
stdin_default as default
};