@zhsz/cool-design-dv
Version:
171 lines (170 loc) • 6.83 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("./style.css");
const index$1 = require("../dv-box/index.js");
const index$2 = require("../dv-content/index.js");
const index = require("../../symbols/index.js");
const resizeEvent = require("../../utils/resize-event.js");
const useBorder = require("../../hooks/useBorder.js");
const useConfig = require("../../hooks/useConfig.js");
const _hoisted_1 = ["width", "height"];
const _hoisted_2 = ["fill", "points"];
const _hoisted_3 = ["stroke", "points"];
const _hoisted_4 = ["stroke", "points"];
const _hoisted_5 = ["stroke", "points"];
const _hoisted_6 = ["stroke"];
const _hoisted_7 = ["stroke"];
const _hoisted_8 = ["stroke"];
const _hoisted_9 = ["stroke"];
const _hoisted_10 = ["stroke"];
const _hoisted_11 = ["stroke", "points"];
const _hoisted_12 = ["stroke", "points"];
const __default__ = vue.defineComponent({
name: "DvBorder3"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: {
fill: {
type: String,
default() {
return "transparent";
}
},
reverse: Boolean,
opacity: {
type: Number,
default: 1
}
},
emits: ["resize"],
setup(__props, { emit: __emit }) {
var _a, _b, _c;
const instance = (_a = vue.getCurrentInstance()) == null ? void 0 : _a.proxy;
const emits = __emit;
const $attrs = vue.useAttrs();
const props = __props;
const page = vue.inject(index.dvPageSymbols, null);
const fill = vue.computed(() => {
var _a2, _b2;
return props.fill || ((_b2 = (_a2 = page == null ? void 0 : page.settings) == null ? void 0 : _a2.value) == null ? void 0 : _b2.fill);
});
const { resize, classes, styles, width, height, dark, light } = useBorder.useBorder(
emits,
((_c = (_b = page == null ? void 0 : page.settings) == null ? void 0 : _b.value) == null ? void 0 : _c.color) ?? useConfig.baseConfig.color,
props,
page
);
vue.onMounted(() => {
resize(instance == null ? void 0 : instance.$el);
resizeEvent.addResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
});
vue.onBeforeUnmount(() => {
resizeEvent.removeResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(index$1.default), vue.mergeProps({
class: ["my-dv-border-3", vue.unref(classes)],
"default-width": "400px",
"default-height": "300px",
padding: "0"
}, { ...vue.unref($attrs), ...props }), {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createElementBlock("svg", {
class: vue.normalizeClass(`my-dv-border__svg ${__props.reverse && "is-reverse"}`),
style: vue.normalizeStyle(vue.unref(styles)),
width: vue.unref(width),
height: vue.unref(height)
}, [
vue.createElementVNode("polygon", {
fill: fill.value,
points: `
${vue.unref(width) - 15}, 22 170, 22 150, 7 40, 7 28, 21 32, 24
16, 42 16, ${vue.unref(height) - 32} 41, ${vue.unref(height) - 7} ${vue.unref(width) - 15}, ${vue.unref(height) - 7}
`
}, null, 8, _hoisted_2),
vue.createElementVNode("polyline", {
class: "dv-bb4-line-1",
stroke: vue.unref(light),
fill: "transparent",
points: `145, ${vue.unref(height) - 5} 40, ${vue.unref(height) - 5} 10, ${vue.unref(height) - 35}
10, 40 40, 5 150, 5 170, 20 ${vue.unref(width) - 15}, 20`
}, null, 8, _hoisted_3),
vue.createElementVNode("polyline", {
stroke: vue.unref(dark),
fill: "transparent",
class: "dv-bb4-line-2",
points: `245, ${vue.unref(height) - 1} 36, ${vue.unref(height) - 1} 14, ${vue.unref(height) - 23}
14, ${vue.unref(height) - 100}`
}, null, 8, _hoisted_4),
vue.createElementVNode("polyline", {
class: "dv-bb4-line-3",
fill: "transparent",
stroke: vue.unref(light),
"stroke-width": "3",
points: `7, ${vue.unref(height) - 40} 7, ${vue.unref(height) - 75}`
}, null, 8, _hoisted_5),
vue.createElementVNode("polyline", {
class: "dv-bb4-line-4",
fill: "transparent",
stroke: vue.unref(light),
"stroke-width": "3",
points: `28, 24 13, 41 13, 64`
}, null, 8, _hoisted_6),
vue.createElementVNode("polyline", {
class: "dv-bb4-line-5",
fill: "transparent",
stroke: vue.unref(light),
points: `5, 45 5, 140`
}, null, 8, _hoisted_7),
vue.createElementVNode("polyline", {
class: "dv-bb4-line-6",
fill: "transparent",
stroke: vue.unref(light),
points: `14, 75 14, 180`
}, null, 8, _hoisted_8),
vue.createElementVNode("polyline", {
class: "dv-bb4-line-7",
fill: "transparent",
stroke: vue.unref(light),
points: `55, 11 147, 11 167, 26 250, 26`
}, null, 8, _hoisted_9),
vue.createElementVNode("polyline", {
class: "dv-bb4-line-8",
fill: "transparent",
stroke: vue.unref(light),
"stroke-width": "3",
points: `158, 5 173, 16`
}, null, 8, _hoisted_10),
vue.createElementVNode("polyline", {
class: "dv-bb4-line-9",
fill: "transparent",
stroke: vue.unref(light),
"stroke-width": "3",
"stroke-dasharray": "100 250",
points: `200, 17 ${vue.unref(width) - 10}, 17`
}, null, 8, _hoisted_11),
vue.createElementVNode("polyline", {
class: "dv-bb4-line-10",
fill: "transparent",
stroke: vue.unref(light),
"stroke-dasharray": "80 270",
points: `385, 17 ${vue.unref(width) - 10}, 17`
}, null, 8, _hoisted_12)
], 14, _hoisted_1)),
vue.createVNode(vue.unref(index$2.default), {
padding: vue.unref($attrs).padding
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["padding"])
]),
_: 3
}, 16, ["class"]);
};
}
});
exports.default = _sfc_main;