@vue-material/core
Version:
Yet another 'Material Design Components' library for Vue3.
39 lines (38 loc) • 2.29 kB
JavaScript
import $i from "../../attach-styles.js";
$i(".md-floater{position:relative;width:max-content;height:max-content}.md-floater-text{display:grid;position:absolute;place-items:center;pointer-events:none;min-height:var(--md);min-width:var(--md);padding-inline:var(--xxs);border-radius:999px;font-size:var(--font-sm);background:var(--primary);line-height:0;z-index:1;box-shadow:0 0 2px var(--shadow-1);color:var(--surface)}.md-floater-text:empty{min-height:var(--xs);min-width:var(--xs);padding-inline:0}.md-floater-text.top{top:var(--offset);left:50%;transform:translate(-50%)}.md-floater-text.left{left:var(--offset);top:50%;transform:translateY(-50%)}.md-floater-text.right{right:var(--offset);top:50%;transform:translateY(-50%)}.md-floater-text.center{top:50%;left:50%;transform:translate(-50%,-50%)}.md-floater-text.bottom{left:50%;bottom:var(--offset);transform:translate(-50%)}.md-floater-text.top-left{top:var(--offset);left:var(--offset)}.md-floater-text.top-right{top:var(--offset);right:var(--offset)}.md-floater-text.bottom-left{bottom:var(--offset);left:var(--offset)}.md-floater-text.bottom-right{bottom:var(--offset);right:var(--offset)}", "182d95f0");
import { defineComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, unref, createVNode, renderSlot } from "vue";
import _sfc_main$1 from "../Misc/hybrid-component.vue.js";
import { createStyle } from "../../utils/create-style/index.js";
const _hoisted_1 = { class: "md-floater" };
const _sfc_main = /* @__PURE__ */ defineComponent({
...{ name: "MdFloatingIndicator" },
__name: "floater",
props: {
text: {},
color: {},
offset: {},
size: {},
pos: {}
},
setup(__props) {
const props = __props;
const classes = createStyle(() => ({
$offset: props.offset || 0,
background: props.color,
fontSize: props.size
}));
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", {
class: normalizeClass(["md-floater-text", [_ctx.pos || "top-right", unref(classes)]])
}, [
createVNode(_sfc_main$1, { as: _ctx.text }, null, 8, ["as"])
], 2),
renderSlot(_ctx.$slots, "default")
]);
};
}
});
export {
_sfc_main as default
};