UNPKG

@zhsz/cool-design-dv

Version:

143 lines (142 loc) 4.77 kB
"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 = { class: "my-dv-border-12__c1", width: "10", height: "10" }; const _hoisted_2 = ["stroke"]; const _hoisted_3 = { class: "my-dv-border-12__c2", width: "10", height: "10" }; const _hoisted_4 = ["stroke"]; const _hoisted_5 = { class: "my-dv-border-12__c3", width: "10", height: "10" }; const _hoisted_6 = ["stroke"]; const _hoisted_7 = { class: "my-dv-border-12__c4", width: "10", height: "10" }; const _hoisted_8 = ["stroke"]; const __default__ = vue.defineComponent({ name: "DvBorder12" }); 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, 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 ); const boxStyles = vue.computed(() => { return { "border-color": dark.value, backgroundColor: fill.value }; }); 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-12", vue.unref(classes)], "default-width": "400px", "default-height": "300px", padding: "0" }, { ...vue.unref($attrs), ...props }, { style: boxStyles.value }), { default: vue.withCtx(() => [ (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1, [ vue.createElementVNode("polyline", { class: "line1", points: "0,10 0,0 10,0", fill: "transparent", "stroke-width": "4", stroke: vue.unref(light) }, null, 8, _hoisted_2) ])), (vue.openBlock(), vue.createElementBlock("svg", _hoisted_3, [ vue.createElementVNode("polyline", { class: "line1", points: "0,10 0,0 10,0", fill: "transparent", "stroke-width": "4", stroke: vue.unref(light) }, null, 8, _hoisted_4) ])), (vue.openBlock(), vue.createElementBlock("svg", _hoisted_5, [ vue.createElementVNode("polyline", { class: "line1", points: "0,10 0,0 10,0", fill: "transparent", "stroke-width": "4", stroke: vue.unref(light) }, null, 8, _hoisted_6) ])), (vue.openBlock(), vue.createElementBlock("svg", _hoisted_7, [ vue.createElementVNode("polyline", { class: "line1", points: "0,10 0,0 10,0", fill: "transparent", "stroke-width": "4", stroke: vue.unref(light) }, null, 8, _hoisted_8) ])), 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", "style"]); }; } }); exports.default = _sfc_main;