t-fighting-design
Version:
Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.
71 lines (70 loc) • 2.12 kB
JavaScript
import { defineComponent as f, ref as C, computed as r, unref as t, openBlock as l, createElementBlock as d, normalizeStyle as g, renderSlot as i, createCommentVNode as v, createElementVNode as c, normalizeClass as _, withModifiers as p, toDisplayString as b } from "vue";
import { Props as $ } from "./index3.js";
import { sizeChange as x } from "../../_utils/index3.js";
const E = {
key: 0,
class: "f-sticky-card__source"
}, S = { class: "f-sticky-card__content" }, z = ["onClick"], L = { class: "f-sticky-card__option-left" }, T = ["onClick"], B = { class: "f-sticky-card__option-right" }, N = f({
name: "FStickyCard"
}), F = /* @__PURE__ */ f({
...N,
props: $,
setup(k) {
const n = k, s = C(n.open), a = () => {
s.value = !t(s);
const { openEnd: o, closeEnd: e } = n;
t(s) ? o(!0) : e(!1);
}, u = r(() => {
const { openText: o, closeText: e } = n;
return `${t(s) ? o : e}`;
}), y = r(() => {
const { background: o, openHeight: e, borderColor: h } = n;
return {
"--sticky-card-content-background": o,
"--sticky-card-border-color": h,
"--sticky-card-max-height": x(e)
};
}), m = r(() => [
"f-sticky-card__box",
{
"f-sticky-card__box-open": t(s)
}
]);
return (o, e) => (l(), d("div", {
class: "f-sticky-card",
style: g(t(y))
}, [
o.$slots.source ? (l(), d("div", E, [
i(o.$slots, "source")
])) : v("", !0),
c("div", {
class: _(t(m))
}, [
c("div", S, [
i(o.$slots, "default")
])
], 2),
c("div", {
class: _([
"f-sticky-card__option",
{ "f-sticky-card__option-open": s.value }
]),
onClick: p(a, ["self"])
}, [
c("span", L, [
i(o.$slots, "optionLeft")
]),
c("span", {
class: "f-sticky-card__option-text",
onClick: p(a, ["self"])
}, b(t(u)), 9, T),
c("span", B, [
i(o.$slots, "optionRight")
])
], 10, z)
], 4));
}
});
export {
F as default
};