@zhsz/cool-design-dv/es/packages/dv-adorn11/Adorn11.vue.mjs

import { defineComponent, getCurrentInstance, useAttrs, inject, onMounted, onBeforeUnmount, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, createElementVNode, renderSlot } from "vue";
import "./style.css";
import Box from "../dv-box/index.mjs";
import { dvPageSymbols } from "../../symbols/index.mjs";
import { addResizeListener, removeResizeListener } from "../../utils/resize-event.mjs";
import { useAdorn } from "../../hooks/useAdorn.mjs";
import { fade } from "../../utils/color.mjs";
import { baseConfig } from "../../hooks/useConfig.mjs";
const _hoisted_1 = ["width", "height"];
const _hoisted_2 = ["fill", "stroke"];
const _hoisted_3 = ["fill", "stroke", "points"];
const _hoisted_4 = ["fill", "stroke", "points"];
const _hoisted_5 = ["fill", "stroke", "points"];
const _hoisted_6 = ["fill", "stroke", "points"];
const _hoisted_7 = ["stroke", "points"];
const _hoisted_8 = ["stroke", "points"];
const _hoisted_9 = { class: "my-dv-adorn-11__content" };
const __default__ = defineComponent({
  name: "DvAdorn11"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    duration: {
      type: Number,
      default: 3
    },
    reverse: Boolean,
    opacity: {
      type: Number,
      default: 1
    }
  },
  emits: ["resize"],
  setup(__props, { emit: __emit }) {
    var _a, _b, _c;
    const props = __props;
    const instance = (_a = getCurrentInstance()) == null ? void 0 : _a.proxy;
    const emits = __emit;
    const $attrs = useAttrs();
    const page = inject(dvPageSymbols, null);
    const { resize, classes, styles, width, height, dark, light } = useAdorn(
      emits,
      ((_c = (_b = page == null ? void 0 : page.settings) == null ? void 0 : _b.value) == null ? void 0 : _c.color) ?? baseConfig.color,
      props,
      page
    );
    function fade$1(color, percent = 100) {
      const r = fade(color, percent);
      if (r === false) {
        return void 0;
      } else {
        return r;
      }
    }
    onMounted(() => {
      resize(instance == null ? void 0 : instance.$el);
      addResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
    });
    onBeforeUnmount(() => {
      removeResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(Box), mergeProps({
        class: ["my-dv-adorn-11", unref(classes)],
        style: unref(styles),
        "default-width": "300px",
        "default-height": "60px"
      }, unref($attrs)), {
        default: withCtx(() => [
          (openBlock(), createElementBlock("svg", {
            width: `${unref(width)}px`,
            height: `${unref(height)}px`
          }, [
            createElementVNode("polygon", {
              fill: fade$1(unref(dark), 10),
              stroke: unref(dark),
              points: `20 10, 25 4, 55 4 60 10`
            }, null, 8, _hoisted_2),
            createElementVNode("polygon", {
              fill: fade$1(unref(dark), 10),
              stroke: unref(dark),
              points: `20 ${unref(height) - 10}, 25 ${unref(height) - 4}, 55 ${unref(height) - 4} 60 ${unref(height) - 10}`
            }, null, 8, _hoisted_3),
            createElementVNode("polygon", {
              fill: fade$1(unref(dark), 10),
              stroke: unref(dark),
              points: `${unref(width) - 20} 10, ${unref(width) - 25} 4, ${unref(width) - 55} 4 ${unref(width) - 60} 10`
            }, null, 8, _hoisted_4),
            createElementVNode("polygon", {
              fill: fade$1(unref(dark), 10),
              stroke: unref(dark),
              points: `${unref(width) - 20} ${unref(height) - 10}, ${unref(width) - 25} ${unref(height) - 4}, ${unref(width) - 55} ${unref(height) - 4} ${unref(width) - 60} ${unref(height) - 10}`
            }, null, 8, _hoisted_5),
            createElementVNode("polygon", {
              fill: fade$1(unref(light), 20),
              stroke: unref(light),
              points: `
          20 10, 5 ${unref(height) / 2} 20 ${unref(height) - 10}
          ${unref(width) - 20} ${unref(height) - 10} ${unref(width) - 5} ${unref(height) / 2} ${unref(width) - 20} 10
        `
            }, null, 8, _hoisted_6),
            createElementVNode("polyline", {
              fill: "transparent",
              stroke: fade$1(unref(light), 70),
              points: `25 18, 15 ${unref(height) / 2} 25 ${unref(height) - 18}`
            }, null, 8, _hoisted_7),
            createElementVNode("polyline", {
              fill: "transparent",
              stroke: fade$1(unref(light), 70),
              points: `${unref(width) - 25} 18, ${unref(width) - 15} ${unref(height) / 2} ${unref(width) - 25} ${unref(height) - 18}`
            }, null, 8, _hoisted_8)
          ], 8, _hoisted_1)),
          createElementVNode("div", _hoisted_9, [
            renderSlot(_ctx.$slots, "default")
          ])
        ]),
        _: 3
      }, 16, ["class", "style"]);
    };
  }
});
export {
  _sfc_main as default
};