yc-design-vue 1.0.1

package/es/Watermark/index.js

@@ -0,0 +1,9 @@
+import _Watermark from "./index.vue.js";
+const Watermark = Object.assign(_Watermark, {
+  install: (app) => {
+    app.component("Yc" + _Watermark.name, _Watermark);
+  }
+});
+export {
+  Watermark as default
+};

package/es/Watermark/index.vue.d.ts

@@ -0,0 +1,35 @@
+import { WatermarkProps, WatermarkSlots } from './type';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<WatermarkSlots> & WatermarkSlots;
+    refs: {
+        containerRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<WatermarkProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<WatermarkProps> & Readonly<{}>, {
+    zIndex: number;
+    width: number;
+    height: number;
+    repeat: boolean;
+    content: string | string[];
+    alpha: number;
+    rotate: number;
+    image: string;
+    offset: number[];
+    gap: number[];
+    font: import('./type').WatermarkFont;
+    grayscale: boolean;
+    staggered: boolean;
+    antiTamper: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    containerRef: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/Watermark/index.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./index.vue2.js";
+/* empty css           */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const _Watermark = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2c1dbccf"]]);
+export {
+  _Watermark as default
+};

package/es/Watermark/index.vue2.js

@@ -0,0 +1,276 @@
+import { defineComponent, toRefs, ref, computed, watch, onMounted, createElementBlock, openBlock, renderSlot } from "vue";
+import { useMutationObserver } from "../node_modules/@vueuse/core/index.js";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import "../_shared/utils/dom.js";
+import { isArray } from "../_shared/utils/is.js";
+import "../_shared/utils/time.js";
+import "../Empty/index.js";
+/* empty css                         */
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "Watermark"
+  },
+  __name: "index",
+  props: {
+    content: { default: "" },
+    image: { default: "" },
+    width: { default: void 0 },
+    height: { default: void 0 },
+    gap: { default: () => [90, 90] },
+    offset: { default: () => [45, 45] },
+    rotate: { default: -22 },
+    font: { default: () => {
+      return {
+        color: "rgba(0, 0, 0, 0.15)",
+        fontSize: 16,
+        fontFamily: "sans-serif",
+        fontStyle: "normal",
+        textAlign: "center",
+        fontWeight: "normal"
+      };
+    } },
+    zIndex: { default: 6 },
+    alpha: { default: 1 },
+    grayscale: { type: Boolean, default: false },
+    repeat: { type: Boolean, default: true },
+    staggered: { type: Boolean, default: true },
+    antiTamper: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const {
+      width,
+      height,
+      alpha,
+      image,
+      grayscale,
+      rotate,
+      repeat,
+      staggered,
+      antiTamper,
+      zIndex
+    } = toRefs(props);
+    const containerRef = ref();
+    const ratio = window.devicePixelRatio || 1;
+    const watermarkMap = ref(/* @__PURE__ */ new Map());
+    const color = computed(() => {
+      var _a;
+      return (_a = props.font) == null ? void 0 : _a.color;
+    });
+    const fontSize = computed(() => {
+      var _a;
+      return ((_a = props.font) == null ? void 0 : _a.fontSize) ?? 16;
+    });
+    const fontWeight = computed(() => {
+      var _a;
+      return ((_a = props.font) == null ? void 0 : _a.fontWeight) ?? "normal";
+    });
+    const fontStyle = computed(() => {
+      var _a;
+      return ((_a = props.font) == null ? void 0 : _a.fontStyle) ?? "normal";
+    });
+    const fontFamily = computed(() => {
+      var _a;
+      return ((_a = props.font) == null ? void 0 : _a.fontFamily) ?? "sans-serif";
+    });
+    const textAlign = computed(() => {
+      var _a;
+      return ((_a = props.font) == null ? void 0 : _a.textAlign) ?? "center";
+    });
+    const contents = computed(
+      () => isArray(props.content) ? props.content : [props.content]
+    );
+    const gapX = computed(() => {
+      var _a;
+      return ((_a = props.gap) == null ? void 0 : _a[0]) ?? 90;
+    });
+    const gapY = computed(() => {
+      var _a;
+      return ((_a = props.gap) == null ? void 0 : _a[1]) ?? 90;
+    });
+    const gapXCenter = computed(() => gapX.value / 2);
+    const gapYCenter = computed(() => gapY.value / 2);
+    const offsetLeft = computed(() => {
+      var _a;
+      return ((_a = props.offset) == null ? void 0 : _a[0]) ?? gapXCenter.value;
+    });
+    const offsetTop = computed(() => {
+      var _a;
+      return ((_a = props.offset) == null ? void 0 : _a[1]) ?? gapYCenter.value;
+    });
+    const markStyle = computed(() => {
+      const left = offsetLeft.value - gapXCenter.value;
+      const top = offsetTop.value - gapYCenter.value;
+      return {
+        position: "absolute",
+        left: left > 0 ? `${left}px` : 0,
+        top: top > 0 ? `${top}px` : 0,
+        width: left > 0 ? `calc(100% - ${left}px)` : "100%",
+        height: top > 0 ? `calc(100% - ${top}px)` : "100%",
+        pointerEvents: "none",
+        backgroundRepeat: props.repeat ? "repeat" : "no-repeat",
+        backgroundPosition: `${left > 0 ? 0 : left}px ${top > 0 ? 0 : top}px`,
+        zIndex: zIndex.value ?? 6
+      };
+    });
+    const isStaggered = computed(() => staggered.value && repeat.value);
+    function camelToKebab(camelCase) {
+      return camelCase.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+    }
+    function styleToString(style) {
+      return Object.entries(style).map(([key, value]) => `${camelToKebab(key)}:${value}`).join(";");
+    }
+    function canvasToGray(canvas) {
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      const { data } = imageData;
+      for (let i = 0; i < data.length; i += 4) {
+        const brightness = (data[i] + data[i + 1] + data[i + 2]) / 3;
+        data[i] = brightness;
+        data[i + 1] = brightness;
+        data[i + 2] = brightness;
+      }
+      ctx.putImageData(imageData, 0, 0);
+    }
+    const appendWatermark = (base64, width2) => {
+      var _a;
+      if (containerRef.value) {
+        const watermarkEle = watermarkMap.value.get(containerRef.value);
+        if (watermarkEle) {
+          if (containerRef.value.contains(watermarkEle)) {
+            containerRef.value.removeChild(watermarkEle);
+          }
+          watermarkMap.value.delete(containerRef.value);
+        }
+        const newWatermarkEle = document.createElement("div");
+        newWatermarkEle.setAttribute(
+          "style",
+          styleToString({
+            ...markStyle.value,
+            backgroundImage: `url('${base64}')`,
+            backgroundSize: `${width2}px`
+          })
+        );
+        (_a = containerRef.value) == null ? void 0 : _a.append(newWatermarkEle);
+        watermarkMap.value.set(containerRef.value, newWatermarkEle);
+      }
+    };
+    const getMarkSize = (ctx) => {
+      let defaultWidth = 120;
+      let defaultHeight = 28;
+      if (!image.value && ctx.measureText) {
+        ctx.font = `${fontSize.value}px ${fontFamily.value}`;
+        const widths = contents.value.map((item) => ctx.measureText(item).width);
+        defaultWidth = Math.ceil(Math.max(...widths));
+        defaultHeight = fontSize.value * contents.value.length + (contents.value.length - 1) * 3;
+      }
+      return [width.value ?? defaultWidth, height.value ?? defaultHeight];
+    };
+    const renderWatermark = () => {
+      var _a;
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const [markWidth, markheight] = getMarkSize(ctx);
+      const realMarkWidth = markWidth * ratio;
+      const realMarkHeight = markheight * ratio;
+      const canvasWidth = (gapX.value + markWidth) * ratio;
+      const canvasHeight = (gapY.value + markheight) * ratio;
+      const drawX = gapX.value / 2 * ratio;
+      const drawY = gapY.value / 2 * ratio;
+      const rotateX = canvasWidth / 2;
+      const rotateY = canvasHeight / 2;
+      const baseSize = isStaggered.value ? 2 : 1;
+      const fillWidth = (gapX.value + markWidth) * baseSize;
+      canvas.width = canvasWidth * baseSize;
+      canvas.height = canvasHeight * baseSize;
+      ctx.globalAlpha = alpha.value;
+      ctx.save();
+      ctx.translate(rotateX, rotateY);
+      ctx.rotate(Math.PI / 180 * rotate.value);
+      ctx.translate(-rotateX, -rotateY);
+      const drawImage = () => {
+        ctx.restore();
+        if (isStaggered.value) {
+          ctx.drawImage(
+            canvas,
+            0,
+            0,
+            canvasWidth,
+            canvasHeight,
+            canvasWidth,
+            canvasHeight,
+            canvasWidth,
+            canvasHeight
+          );
+        }
+        grayscale.value && canvasToGray(canvas);
+        appendWatermark(canvas.toDataURL(), fillWidth);
+      };
+      if (image.value) {
+        const img = new Image();
+        img.onload = () => {
+          ctx.drawImage(img, drawX, drawY, realMarkWidth, realMarkHeight);
+          drawImage();
+        };
+        img.crossOrigin = "anonymous";
+        img.referrerPolicy = "no-referrer";
+        img.src = image.value;
+      } else {
+        const mergedFontSize = Number(fontSize.value) * ratio;
+        ctx.font = `${fontStyle.value} normal ${fontWeight.value} ${mergedFontSize}px/${markheight}px ${fontFamily.value}`;
+        ctx.fillStyle = color.value;
+        ctx.textAlign = textAlign.value;
+        ctx.textBaseline = "top";
+        ctx.translate(realMarkWidth / 2, 0);
+        (_a = contents.value) == null ? void 0 : _a.forEach((item, index) => {
+          ctx.fillText(
+            item ?? "",
+            drawX,
+            drawY + index * (mergedFontSize + 3 * ratio)
+          );
+        });
+        drawImage();
+      }
+    };
+    const isWatermarkEle = (ele) => {
+      return Array.from(watermarkMap.value.values()).includes(ele);
+    };
+    const handleMutations = (mutations) => {
+      if (!antiTamper.value) return;
+      for (const mutation of mutations) {
+        const isRemoved = Array.from(mutation.removedNodes).some(
+          (node) => isWatermarkEle(node)
+        );
+        const isModified = mutation.type === "attributes" && isWatermarkEle(mutation.target);
+        if (isRemoved || isModified) {
+          renderWatermark();
+          break;
+        }
+      }
+    };
+    watch(props, renderWatermark, { deep: true, flush: "post" });
+    useMutationObserver(containerRef, handleMutations, {
+      attributes: true,
+      childList: true,
+      characterData: true,
+      subtree: true
+    });
+    onMounted(() => {
+      renderWatermark();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "yc-watermark",
+        ref_key: "containerRef",
+        ref: containerRef
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 512);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/Watermark/type.d.ts

@@ -0,0 +1,27 @@
+export interface WatermarkProps {
+    content?: string | string[];
+    image?: string;
+    width?: number;
+    height?: number;
+    gap?: number[];
+    offset?: number[];
+    rotate?: number;
+    font?: WatermarkFont;
+    zIndex?: number;
+    alpha?: number;
+    grayscale?: boolean;
+    repeat?: boolean;
+    staggered?: boolean;
+    antiTamper?: boolean;
+}
+export interface WatermarkFont {
+    color?: string;
+    fontSize?: number;
+    fontFamily?: string;
+    fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
+    textAlign?: 'start' | 'end' | 'left' | 'right' | 'center';
+    fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | number;
+}
+export interface WatermarkSlots {
+    default(): void;
+}

package/es/_shared/components/ExpandTransition.vue.d.ts

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/_shared/components/ExpandTransition.vue2.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./ExpandTransition.vue3.js";
+/* empty css                     */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+const ExpandTransition = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6e588238"]]);
+export {
+  ExpandTransition as default
+};

package/es/_shared/components/ExpandTransition.vue3.js

@@ -0,0 +1,50 @@
+import { defineComponent, createBlock, openBlock, Transition, mergeProps, withCtx, renderSlot } from "vue";
+import "../../node_modules/tinycolor2/esm/tinycolor.js";
+import "../utils/dom.js";
+import { valueToPx } from "../utils/fn.js";
+import "../utils/time.js";
+import "../../Empty/index.js";
+/* empty css                 */
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ExpandTransition",
+  setup(__props) {
+    const transitions = {
+      onBeforeEnter(el) {
+        el.style.maxHeight = "0";
+        el.style.opacity = "0";
+      },
+      onEnter(el) {
+        el.style.maxHeight = valueToPx(el.scrollHeight);
+        el.style.opacity = "1";
+      },
+      onAfterEnter(el) {
+        el.style.maxHeight = "";
+        el.style.opacity = "";
+      },
+      // 收起的时候卡顿
+      onBeforeLeave(el) {
+        el.style.maxHeight = valueToPx(el.scrollHeight);
+        el.style.opacity = "1";
+      },
+      onLeave(el) {
+        el.style.maxHeight = "0";
+        el.style.opacity = "0";
+      },
+      onAfterLeave(el) {
+        el.style.maxHeight = "";
+        el.style.opacity = "";
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Transition, mergeProps({ name: "expand" }, transitions), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/_shared/components/IconButton.vue.d.ts

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    size?: number;
+    hoverColor?: string;
+    hoverSize?: number;
+    disabled?: boolean;
+    preventFocus?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number;
+    disabled: boolean;
+    preventFocus: boolean;
+    hoverColor: string;
+    hoverSize: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/_shared/components/IconButton.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./IconButton.vue3.js";
+/* empty css                */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+const IconButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8fb80b1e"]]);
+export {
+  IconButton as default
+};

package/es/_shared/components/IconButton.vue3.js

@@ -0,0 +1,45 @@
+import { defineComponent, useCssVars, computed, toRefs, createElementBlock, openBlock, normalizeClass, renderSlot, createVNode, unref } from "vue";
+import "../../node_modules/tinycolor2/esm/tinycolor.js";
+import "../utils/dom.js";
+import { valueToPx } from "../utils/fn.js";
+import "../utils/time.js";
+import "../../Empty/index.js";
+/* empty css                 */
+import _sfc_main$1 from "../icons/IconClose.vue.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "IconButton",
+  props: {
+    size: { default: 12 },
+    hoverColor: { default: "rgb(242, 243, 245)" },
+    hoverSize: { default: 20 },
+    disabled: { type: Boolean, default: false },
+    preventFocus: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    useCssVars((_ctx) => ({
+      "d42bb172": _ctx.hoverColor,
+      "ccfb48c6": hoverSize.value
+    }));
+    const props = __props;
+    const { hoverSize: _hoverSize } = toRefs(props);
+    const hoverSize = computed(() => valueToPx(_hoverSize.value));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "yc-icon-button",
+          {
+            "yc-icon-button-disabled": _ctx.disabled
+          }
+        ]),
+        onMousedown: _cache[0] || (_cache[0] = (e) => _ctx.preventFocus && e.preventDefault())
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          createVNode(unref(_sfc_main$1), { size: _ctx.size }, null, 8, ["size"])
+        ], true)
+      ], 34);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/_shared/components/PreventFocus.vue.d.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    preventFocus?: boolean;
+    tag?: string;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    preventFocus: boolean;
+    tag: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/_shared/components/PreventFocus.vue.js

@@ -0,0 +1,23 @@
+import { defineComponent, createBlock, openBlock, resolveDynamicComponent, withCtx, renderSlot } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "PreventFocus",
+  props: {
+    preventFocus: { type: Boolean, default: true },
+    tag: { default: "div" }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
+        onMousedown: _cache[0] || (_cache[0] = (e) => _ctx.preventFocus && e.preventDefault())
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 32);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/_shared/components/PreventFocus.vue2.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./PreventFocus.vue.js";
+export {
+  _sfc_main as default
+};

package/es/_shared/components/index.d.ts

@@ -0,0 +1,3 @@
+export { default as IconButton } from './IconButton.vue';
+export { default as PreventFocus } from './PreventFocus.vue';
+export { default as ExpandTransition } from './ExpandTransition.vue';

package/es/_shared/constants/index.d.ts

@@ -0,0 +1,8 @@
+import { SelectOptions } from '../../Select';
+import { ObjectData } from '../type';
+export declare const TYPE_ICON_MAP: ObjectData;
+export declare const TYPE_ICON_COLOR_MAP: Record<string, string>;
+export declare const SIZE_MAP: Record<string, number>;
+export declare const TAG_PRESET_COLORS: string[];
+export declare const COLOR_PICKER_PRESET_COLORS: string[];
+export declare const COLOR_PICKER_FORMAT_OPTIONS: SelectOptions;