@varlet/ui
Version:
A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.
57 lines (56 loc) • 1.86 kB
JavaScript
import { computed, defineComponent, ref } from "vue";
import { createNamespace } from "../utils/components.mjs";
import { toSizeUnit } from "../utils/elements.mjs";
import { useSwipe } from "./provide.mjs";
const { name, n } = createNamespace("swipe-item");
import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
const _hoisted_1 = ["aria-hidden"];
function __render__(_ctx, _cache) {
return _openBlock(), _createElementBlock("div", {
class: _normalizeClass(_ctx.n()),
style: _normalizeStyle({
width: !_ctx.vertical ? _ctx.toSizeUnit(_ctx.size) : void 0,
height: _ctx.vertical ? _ctx.toSizeUnit(_ctx.size) : void 0,
transform: `translate${_ctx.vertical ? "Y" : "X"}(${_ctx.toSizeUnit(_ctx.translate)})`
}),
tabindex: "-1",
"aria-hidden": _ctx.currentIndex !== _ctx.index,
onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.isFocusing = true),
onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.isFocusing = false)
}, [
_renderSlot(_ctx.$slots, "default")
], 46, _hoisted_1);
}
const __sfc__ = defineComponent({
name,
setup() {
const translate = ref(0);
const isFocusing = ref(false);
const { swipe, bindSwipe, index } = useSwipe();
const { size, currentIndex, vertical } = swipe;
const swipeItemProvider = {
index,
isFocusing: computed(() => isFocusing.value),
setTranslate
};
bindSwipe(swipeItemProvider);
function setTranslate(x) {
translate.value = x;
}
return {
isFocusing,
size,
index,
currentIndex,
vertical,
translate,
n,
toSizeUnit
};
}
});
__sfc__.render = __render__;
var stdin_default = __sfc__;
export {
stdin_default as default
};