@element-plus/nightly 0.0.20231028 → 0.0.20231030
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/attributes.json +1 -1
- package/dist/index.full.js +31 -11
- package/dist/index.full.min.js +13 -13
- package/dist/index.full.min.js.map +1 -1
- package/dist/index.full.min.mjs +13 -13
- package/dist/index.full.min.mjs.map +1 -1
- package/dist/index.full.mjs +31 -11
- package/dist/locale/af.js +1 -1
- package/dist/locale/af.min.js +1 -1
- package/dist/locale/af.min.mjs +1 -1
- package/dist/locale/af.mjs +1 -1
- package/dist/locale/ar.js +1 -1
- package/dist/locale/ar.min.js +1 -1
- package/dist/locale/ar.min.mjs +1 -1
- package/dist/locale/ar.mjs +1 -1
- package/dist/locale/az.js +1 -1
- package/dist/locale/az.min.js +1 -1
- package/dist/locale/az.min.mjs +1 -1
- package/dist/locale/az.mjs +1 -1
- package/dist/locale/bg.js +1 -1
- package/dist/locale/bg.min.js +1 -1
- package/dist/locale/bg.min.mjs +1 -1
- package/dist/locale/bg.mjs +1 -1
- package/dist/locale/bn.js +1 -1
- package/dist/locale/bn.min.js +1 -1
- package/dist/locale/bn.min.mjs +1 -1
- package/dist/locale/bn.mjs +1 -1
- package/dist/locale/ca.js +1 -1
- package/dist/locale/ca.min.js +1 -1
- package/dist/locale/ca.min.mjs +1 -1
- package/dist/locale/ca.mjs +1 -1
- package/dist/locale/ckb.js +1 -1
- package/dist/locale/ckb.min.js +1 -1
- package/dist/locale/ckb.min.mjs +1 -1
- package/dist/locale/ckb.mjs +1 -1
- package/dist/locale/cs.js +1 -1
- package/dist/locale/cs.min.js +1 -1
- package/dist/locale/cs.min.mjs +1 -1
- package/dist/locale/cs.mjs +1 -1
- package/dist/locale/da.js +1 -1
- package/dist/locale/da.min.js +1 -1
- package/dist/locale/da.min.mjs +1 -1
- package/dist/locale/da.mjs +1 -1
- package/dist/locale/de.js +1 -1
- package/dist/locale/de.min.js +1 -1
- package/dist/locale/de.min.mjs +1 -1
- package/dist/locale/de.mjs +1 -1
- package/dist/locale/el.js +1 -1
- package/dist/locale/el.min.js +1 -1
- package/dist/locale/el.min.mjs +1 -1
- package/dist/locale/el.mjs +1 -1
- package/dist/locale/en.js +1 -1
- package/dist/locale/en.min.js +1 -1
- package/dist/locale/en.min.mjs +1 -1
- package/dist/locale/en.mjs +1 -1
- package/dist/locale/eo.js +1 -1
- package/dist/locale/eo.min.js +1 -1
- package/dist/locale/eo.min.mjs +1 -1
- package/dist/locale/eo.mjs +1 -1
- package/dist/locale/es.js +1 -1
- package/dist/locale/es.min.js +1 -1
- package/dist/locale/es.min.mjs +1 -1
- package/dist/locale/es.mjs +1 -1
- package/dist/locale/et.js +1 -1
- package/dist/locale/et.min.js +1 -1
- package/dist/locale/et.min.mjs +1 -1
- package/dist/locale/et.mjs +1 -1
- package/dist/locale/eu.js +1 -1
- package/dist/locale/eu.min.js +1 -1
- package/dist/locale/eu.min.mjs +1 -1
- package/dist/locale/eu.mjs +1 -1
- package/dist/locale/fa.js +1 -1
- package/dist/locale/fa.min.js +1 -1
- package/dist/locale/fa.min.mjs +1 -1
- package/dist/locale/fa.mjs +1 -1
- package/dist/locale/fi.js +1 -1
- package/dist/locale/fi.min.js +1 -1
- package/dist/locale/fi.min.mjs +1 -1
- package/dist/locale/fi.mjs +1 -1
- package/dist/locale/fr.js +1 -1
- package/dist/locale/fr.min.js +1 -1
- package/dist/locale/fr.min.mjs +1 -1
- package/dist/locale/fr.mjs +1 -1
- package/dist/locale/he.js +1 -1
- package/dist/locale/he.min.js +1 -1
- package/dist/locale/he.min.mjs +1 -1
- package/dist/locale/he.mjs +1 -1
- package/dist/locale/hr.js +1 -1
- package/dist/locale/hr.min.js +1 -1
- package/dist/locale/hr.min.mjs +1 -1
- package/dist/locale/hr.mjs +1 -1
- package/dist/locale/hu.js +1 -1
- package/dist/locale/hu.min.js +1 -1
- package/dist/locale/hu.min.mjs +1 -1
- package/dist/locale/hu.mjs +1 -1
- package/dist/locale/hy-am.js +1 -1
- package/dist/locale/hy-am.min.js +1 -1
- package/dist/locale/hy-am.min.mjs +1 -1
- package/dist/locale/hy-am.mjs +1 -1
- package/dist/locale/id.js +1 -1
- package/dist/locale/id.min.js +1 -1
- package/dist/locale/id.min.mjs +1 -1
- package/dist/locale/id.mjs +1 -1
- package/dist/locale/it.js +1 -1
- package/dist/locale/it.min.js +1 -1
- package/dist/locale/it.min.mjs +1 -1
- package/dist/locale/it.mjs +1 -1
- package/dist/locale/ja.js +1 -1
- package/dist/locale/ja.min.js +1 -1
- package/dist/locale/ja.min.mjs +1 -1
- package/dist/locale/ja.mjs +1 -1
- package/dist/locale/kk.js +1 -1
- package/dist/locale/kk.min.js +1 -1
- package/dist/locale/kk.min.mjs +1 -1
- package/dist/locale/kk.mjs +1 -1
- package/dist/locale/km.js +1 -1
- package/dist/locale/km.min.js +1 -1
- package/dist/locale/km.min.mjs +1 -1
- package/dist/locale/km.mjs +1 -1
- package/dist/locale/ko.js +1 -1
- package/dist/locale/ko.min.js +1 -1
- package/dist/locale/ko.min.mjs +1 -1
- package/dist/locale/ko.mjs +1 -1
- package/dist/locale/ku.js +1 -1
- package/dist/locale/ku.min.js +1 -1
- package/dist/locale/ku.min.mjs +1 -1
- package/dist/locale/ku.mjs +1 -1
- package/dist/locale/ky.js +1 -1
- package/dist/locale/ky.min.js +1 -1
- package/dist/locale/ky.min.mjs +1 -1
- package/dist/locale/ky.mjs +1 -1
- package/dist/locale/lt.js +1 -1
- package/dist/locale/lt.min.js +1 -1
- package/dist/locale/lt.min.mjs +1 -1
- package/dist/locale/lt.mjs +1 -1
- package/dist/locale/lv.js +1 -1
- package/dist/locale/lv.min.js +1 -1
- package/dist/locale/lv.min.mjs +1 -1
- package/dist/locale/lv.mjs +1 -1
- package/dist/locale/mg.js +1 -1
- package/dist/locale/mg.min.js +1 -1
- package/dist/locale/mg.min.mjs +1 -1
- package/dist/locale/mg.mjs +1 -1
- package/dist/locale/mn.js +1 -1
- package/dist/locale/mn.min.js +1 -1
- package/dist/locale/mn.min.mjs +1 -1
- package/dist/locale/mn.mjs +1 -1
- package/dist/locale/nb-no.js +1 -1
- package/dist/locale/nb-no.min.js +1 -1
- package/dist/locale/nb-no.min.mjs +1 -1
- package/dist/locale/nb-no.mjs +1 -1
- package/dist/locale/nl.js +1 -1
- package/dist/locale/nl.min.js +1 -1
- package/dist/locale/nl.min.mjs +1 -1
- package/dist/locale/nl.mjs +1 -1
- package/dist/locale/pa.js +1 -1
- package/dist/locale/pa.min.js +1 -1
- package/dist/locale/pa.min.mjs +1 -1
- package/dist/locale/pa.mjs +1 -1
- package/dist/locale/pl.js +1 -1
- package/dist/locale/pl.min.js +1 -1
- package/dist/locale/pl.min.mjs +1 -1
- package/dist/locale/pl.mjs +1 -1
- package/dist/locale/pt-br.js +1 -1
- package/dist/locale/pt-br.min.js +1 -1
- package/dist/locale/pt-br.min.mjs +1 -1
- package/dist/locale/pt-br.mjs +1 -1
- package/dist/locale/pt.js +1 -1
- package/dist/locale/pt.min.js +1 -1
- package/dist/locale/pt.min.mjs +1 -1
- package/dist/locale/pt.mjs +1 -1
- package/dist/locale/ro.js +1 -1
- package/dist/locale/ro.min.js +1 -1
- package/dist/locale/ro.min.mjs +1 -1
- package/dist/locale/ro.mjs +1 -1
- package/dist/locale/ru.js +1 -1
- package/dist/locale/ru.min.js +1 -1
- package/dist/locale/ru.min.mjs +1 -1
- package/dist/locale/ru.mjs +1 -1
- package/dist/locale/sk.js +1 -1
- package/dist/locale/sk.min.js +1 -1
- package/dist/locale/sk.min.mjs +1 -1
- package/dist/locale/sk.mjs +1 -1
- package/dist/locale/sl.js +1 -1
- package/dist/locale/sl.min.js +1 -1
- package/dist/locale/sl.min.mjs +1 -1
- package/dist/locale/sl.mjs +1 -1
- package/dist/locale/sr.js +1 -1
- package/dist/locale/sr.min.js +1 -1
- package/dist/locale/sr.min.mjs +1 -1
- package/dist/locale/sr.mjs +1 -1
- package/dist/locale/sv.js +1 -1
- package/dist/locale/sv.min.js +1 -1
- package/dist/locale/sv.min.mjs +1 -1
- package/dist/locale/sv.mjs +1 -1
- package/dist/locale/sw.js +1 -1
- package/dist/locale/sw.min.js +1 -1
- package/dist/locale/sw.min.mjs +1 -1
- package/dist/locale/sw.mjs +1 -1
- package/dist/locale/ta.js +1 -1
- package/dist/locale/ta.min.js +1 -1
- package/dist/locale/ta.min.mjs +1 -1
- package/dist/locale/ta.mjs +1 -1
- package/dist/locale/th.js +1 -1
- package/dist/locale/th.min.js +1 -1
- package/dist/locale/th.min.mjs +1 -1
- package/dist/locale/th.mjs +1 -1
- package/dist/locale/tk.js +1 -1
- package/dist/locale/tk.min.js +1 -1
- package/dist/locale/tk.min.mjs +1 -1
- package/dist/locale/tk.mjs +1 -1
- package/dist/locale/tr.js +1 -1
- package/dist/locale/tr.min.js +1 -1
- package/dist/locale/tr.min.mjs +1 -1
- package/dist/locale/tr.mjs +1 -1
- package/dist/locale/ug-cn.js +1 -1
- package/dist/locale/ug-cn.min.js +1 -1
- package/dist/locale/ug-cn.min.mjs +1 -1
- package/dist/locale/ug-cn.mjs +1 -1
- package/dist/locale/uk.js +1 -1
- package/dist/locale/uk.min.js +1 -1
- package/dist/locale/uk.min.mjs +1 -1
- package/dist/locale/uk.mjs +1 -1
- package/dist/locale/uz-uz.js +1 -1
- package/dist/locale/uz-uz.min.js +1 -1
- package/dist/locale/uz-uz.min.mjs +1 -1
- package/dist/locale/uz-uz.mjs +1 -1
- package/dist/locale/vi.js +1 -1
- package/dist/locale/vi.min.js +1 -1
- package/dist/locale/vi.min.mjs +1 -1
- package/dist/locale/vi.mjs +1 -1
- package/dist/locale/zh-cn.js +1 -1
- package/dist/locale/zh-cn.min.js +1 -1
- package/dist/locale/zh-cn.min.mjs +1 -1
- package/dist/locale/zh-cn.mjs +1 -1
- package/dist/locale/zh-tw.js +1 -1
- package/dist/locale/zh-tw.min.js +1 -1
- package/dist/locale/zh-tw.min.mjs +1 -1
- package/dist/locale/zh-tw.mjs +1 -1
- package/es/components/dialog/src/use-dialog.mjs +6 -4
- package/es/components/dialog/src/use-dialog.mjs.map +1 -1
- package/es/components/tree-select/src/select.d.ts +2 -1
- package/es/components/tree-select/src/select.mjs +4 -1
- package/es/components/tree-select/src/select.mjs.map +1 -1
- package/es/components/watermark/index.d.ts +2 -0
- package/es/components/watermark/src/useClips.mjs +11 -3
- package/es/components/watermark/src/useClips.mjs.map +1 -1
- package/es/components/watermark/src/watermark.d.ts +2 -0
- package/es/components/watermark/src/watermark.mjs.map +1 -1
- package/es/components/watermark/src/watermark.vue.d.ts +2 -0
- package/es/components/watermark/src/watermark2.mjs +11 -1
- package/es/components/watermark/src/watermark2.mjs.map +1 -1
- package/es/version.d.ts +1 -1
- package/es/version.mjs +1 -1
- package/es/version.mjs.map +1 -1
- package/lib/components/dialog/src/use-dialog.js +6 -4
- package/lib/components/dialog/src/use-dialog.js.map +1 -1
- package/lib/components/tree-select/src/select.d.ts +2 -1
- package/lib/components/tree-select/src/select.js +4 -1
- package/lib/components/tree-select/src/select.js.map +1 -1
- package/lib/components/watermark/index.d.ts +2 -0
- package/lib/components/watermark/src/useClips.js +11 -3
- package/lib/components/watermark/src/useClips.js.map +1 -1
- package/lib/components/watermark/src/watermark.d.ts +2 -0
- package/lib/components/watermark/src/watermark.js.map +1 -1
- package/lib/components/watermark/src/watermark.vue.d.ts +2 -0
- package/lib/components/watermark/src/watermark2.js +11 -1
- package/lib/components/watermark/src/watermark2.js.map +1 -1
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/lib/version.js.map +1 -1
- package/package.json +2 -2
- package/web-types.json +1 -1
|
@@ -6,6 +6,8 @@ export interface WatermarkFontType {
|
|
|
6
6
|
fontWeight?: 'normal' | 'light' | 'weight' | number;
|
|
7
7
|
fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
|
|
8
8
|
fontFamily?: string;
|
|
9
|
+
textAlign?: 'start' | 'end' | 'left' | 'right' | 'center';
|
|
10
|
+
textBaseline?: 'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom';
|
|
9
11
|
}
|
|
10
12
|
export declare const watermarkProps: {
|
|
11
13
|
readonly zIndex: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 9, boolean>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"watermark.mjs","sources":["../../../../../../packages/components/watermark/src/watermark.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type Watermark from './watermark.vue'\n\nexport interface WatermarkFontType {\n color?: string\n fontSize?: number | string\n fontWeight?: 'normal' | 'light' | 'weight' | number\n fontStyle?: 'none' | 'normal' | 'italic' | 'oblique'\n fontFamily?: string\n}\n\nexport const watermarkProps = buildProps({\n /**\n * @description The z-index of the appended watermark element\n */\n zIndex: {\n type: Number,\n default: 9,\n },\n /**\n * @description The rotation angle of the watermark\n */\n rotate: {\n type: Number,\n default: -22,\n },\n /**\n * @description The width of the watermark\n */\n width: Number,\n /**\n * @description The height of the watermark\n */\n height: Number,\n /**\n * @description Image source, it is recommended to export 2x or 3x image, high priority (support base64 format)\n */\n image: String,\n /**\n * @description Watermark text content\n */\n content: {\n type: definePropType<string | string[]>([String, Array]),\n default: 'Element Plus',\n },\n /**\n * @description Text style\n */\n font: {\n type: definePropType<WatermarkFontType>(Object),\n },\n /**\n * @description The spacing between watermarks\n */\n gap: {\n type: definePropType<[number, number]>(Array),\n default: () => [100, 100],\n },\n /**\n * @description The offset of the watermark from the upper left corner of the container. The default is gap/2\n */\n offset: {\n type: definePropType<[number, number]>(Array),\n },\n} as const)\n\nexport type WatermarkProps = ExtractPropTypes<typeof watermarkProps>\nexport type WatermarkInstance = InstanceType<typeof Watermark>\n"],"names":[],"mappings":";;;AACY,MAAC,cAAc,GAAG,UAAU,CAAC;AACzC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC,EAAE;AAChB,GAAG;AACH,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AACzC,IAAI,OAAO,EAAE,cAAc;AAC3B,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC;AAC7B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,GAAG;AACH,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"watermark.mjs","sources":["../../../../../../packages/components/watermark/src/watermark.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type Watermark from './watermark.vue'\n\nexport interface WatermarkFontType {\n color?: string\n fontSize?: number | string\n fontWeight?: 'normal' | 'light' | 'weight' | number\n fontStyle?: 'none' | 'normal' | 'italic' | 'oblique'\n fontFamily?: string\n textAlign?: 'start' | 'end' | 'left' | 'right' | 'center'\n textBaseline?:\n | 'top'\n | 'hanging'\n | 'middle'\n | 'alphabetic'\n | 'ideographic'\n | 'bottom'\n}\n\nexport const watermarkProps = buildProps({\n /**\n * @description The z-index of the appended watermark element\n */\n zIndex: {\n type: Number,\n default: 9,\n },\n /**\n * @description The rotation angle of the watermark\n */\n rotate: {\n type: Number,\n default: -22,\n },\n /**\n * @description The width of the watermark\n */\n width: Number,\n /**\n * @description The height of the watermark\n */\n height: Number,\n /**\n * @description Image source, it is recommended to export 2x or 3x image, high priority (support base64 format)\n */\n image: String,\n /**\n * @description Watermark text content\n */\n content: {\n type: definePropType<string | string[]>([String, Array]),\n default: 'Element Plus',\n },\n /**\n * @description Text style\n */\n font: {\n type: definePropType<WatermarkFontType>(Object),\n },\n /**\n * @description The spacing between watermarks\n */\n gap: {\n type: definePropType<[number, number]>(Array),\n default: () => [100, 100],\n },\n /**\n * @description The offset of the watermark from the upper left corner of the container. The default is gap/2\n */\n offset: {\n type: definePropType<[number, number]>(Array),\n },\n} as const)\n\nexport type WatermarkProps = ExtractPropTypes<typeof watermarkProps>\nexport type WatermarkInstance = InstanceType<typeof Watermark>\n"],"names":[],"mappings":";;;AACY,MAAC,cAAc,GAAG,UAAU,CAAC;AACzC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC,EAAE;AAChB,GAAG;AACH,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AACzC,IAAI,OAAO,EAAE,cAAc;AAC3B,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC;AAC7B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,GAAG;AACH,CAAC;;;;"}
|
|
@@ -49,6 +49,8 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
49
49
|
fontWeight: import("vue").ComputedRef<number | "light" | "normal" | "weight">;
|
|
50
50
|
fontStyle: import("vue").ComputedRef<"none" | "normal" | "italic" | "oblique">;
|
|
51
51
|
fontFamily: import("vue").ComputedRef<string>;
|
|
52
|
+
textAlign: import("vue").ComputedRef<"center" | "right" | "left" | "end" | "start">;
|
|
53
|
+
textBaseline: import("vue").ComputedRef<"top" | "bottom" | "middle" | "alphabetic" | "hanging" | "ideographic">;
|
|
52
54
|
gapX: import("vue").ComputedRef<number>;
|
|
53
55
|
gapY: import("vue").ComputedRef<number>;
|
|
54
56
|
gapXCenter: import("vue").ComputedRef<number>;
|
|
@@ -36,6 +36,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
36
36
|
var _a, _b;
|
|
37
37
|
return (_b = (_a = props.font) == null ? void 0 : _a.fontFamily) != null ? _b : "sans-serif";
|
|
38
38
|
});
|
|
39
|
+
const textAlign = computed(() => {
|
|
40
|
+
var _a, _b;
|
|
41
|
+
return (_b = (_a = props.font) == null ? void 0 : _a.textAlign) != null ? _b : "center";
|
|
42
|
+
});
|
|
43
|
+
const textBaseline = computed(() => {
|
|
44
|
+
var _a, _b;
|
|
45
|
+
return (_b = (_a = props.font) == null ? void 0 : _a.textBaseline) != null ? _b : "top";
|
|
46
|
+
});
|
|
39
47
|
const gapX = computed(() => props.gap[0]);
|
|
40
48
|
const gapY = computed(() => props.gap[1]);
|
|
41
49
|
const gapXCenter = computed(() => gapX.value / 2);
|
|
@@ -139,7 +147,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
139
147
|
fontSize: fontSize.value,
|
|
140
148
|
fontStyle: fontStyle.value,
|
|
141
149
|
fontWeight: fontWeight.value,
|
|
142
|
-
fontFamily: fontFamily.value
|
|
150
|
+
fontFamily: fontFamily.value,
|
|
151
|
+
textAlign: textAlign.value,
|
|
152
|
+
textBaseline: textBaseline.value
|
|
143
153
|
}, gapX.value, gapY.value);
|
|
144
154
|
appendWatermark(textClips, clipWidth);
|
|
145
155
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"watermark2.mjs","sources":["../../../../../../packages/components/watermark/src/watermark.vue"],"sourcesContent":["<template>\n <div ref=\"containerRef\" :style=\"[style]\">\n <slot />\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n onBeforeUnmount,\n onMounted,\n ref,\n shallowRef,\n watch,\n} from 'vue'\nimport { useMutationObserver } from '@vueuse/core'\nimport { watermarkProps } from './watermark'\nimport { getPixelRatio, getStyleStr, reRendering } from './utils'\nimport useClips, { FontGap } from './useClips'\nimport type { WatermarkProps } from './watermark'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n name: 'ElWatermark',\n})\n\nconst style: CSSProperties = {\n position: 'relative',\n}\n\nconst props = defineProps(watermarkProps)\nconst color = computed(() => props.font?.color ?? 'rgba(0,0,0,.15)')\nconst fontSize = computed(() => props.font?.fontSize ?? 16)\nconst fontWeight = computed(() => props.font?.fontWeight ?? 'normal')\nconst fontStyle = computed(() => props.font?.fontStyle ?? 'normal')\nconst fontFamily = computed(() => props.font?.fontFamily ?? 'sans-serif')\n\nconst gapX = computed(() => props.gap[0])\nconst gapY = computed(() => props.gap[1])\nconst gapXCenter = computed(() => gapX.value / 2)\nconst gapYCenter = computed(() => gapY.value / 2)\nconst offsetLeft = computed(() => props.offset?.[0] ?? gapXCenter.value)\nconst offsetTop = computed(() => props.offset?.[1] ?? gapYCenter.value)\n\nconst getMarkStyle = () => {\n const markStyle: CSSProperties = {\n zIndex: props.zIndex,\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n pointerEvents: 'none',\n backgroundRepeat: 'repeat',\n }\n\n /** Calculate the style of the offset */\n let positionLeft = offsetLeft.value - gapXCenter.value\n let positionTop = offsetTop.value - gapYCenter.value\n if (positionLeft > 0) {\n markStyle.left = `${positionLeft}px`\n markStyle.width = `calc(100% - ${positionLeft}px)`\n positionLeft = 0\n }\n if (positionTop > 0) {\n markStyle.top = `${positionTop}px`\n markStyle.height = `calc(100% - ${positionTop}px)`\n positionTop = 0\n }\n markStyle.backgroundPosition = `${positionLeft}px ${positionTop}px`\n\n return markStyle\n}\n\nconst containerRef = shallowRef<HTMLDivElement | null>(null)\nconst watermarkRef = shallowRef<HTMLDivElement>()\nconst stopObservation = ref(false)\n\nconst destroyWatermark = () => {\n if (watermarkRef.value) {\n watermarkRef.value.remove()\n watermarkRef.value = undefined\n }\n}\nconst appendWatermark = (base64Url: string, markWidth: number) => {\n if (containerRef.value && watermarkRef.value) {\n stopObservation.value = true\n watermarkRef.value.setAttribute(\n 'style',\n getStyleStr({\n ...getMarkStyle(),\n backgroundImage: `url('${base64Url}')`,\n backgroundSize: `${Math.floor(markWidth)}px`,\n })\n )\n containerRef.value?.append(watermarkRef.value)\n // Delayed execution\n setTimeout(() => {\n stopObservation.value = false\n })\n }\n}\n\n/**\n * Get the width and height of the watermark. The default values are as follows\n * Image: [120, 64]; Content: It's calculated by content;\n */\nconst getMarkSize = (ctx: CanvasRenderingContext2D) => {\n let defaultWidth = 120\n let defaultHeight = 64\n const image = props.image\n const content = props.content\n const width = props.width\n const height = props.height\n if (!image && ctx.measureText) {\n ctx.font = `${Number(fontSize.value)}px ${fontFamily.value}`\n const contents = Array.isArray(content) ? content : [content]\n const sizes = contents.map((item) => {\n const metrics = ctx.measureText(item!)\n\n return [\n metrics.width,\n metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent,\n ]\n })\n defaultWidth = Math.ceil(Math.max(...sizes.map((size) => size[0])))\n defaultHeight =\n Math.ceil(Math.max(...sizes.map((size) => size[1]))) * contents.length +\n (contents.length - 1) * FontGap\n }\n return [width ?? defaultWidth, height ?? defaultHeight] as const\n}\n\nconst getClips = useClips()\n\nconst renderWatermark = () => {\n const canvas = document.createElement('canvas')\n const ctx = canvas.getContext('2d')\n const image = props.image\n const content = props.content\n const rotate = props.rotate\n\n if (ctx) {\n if (!watermarkRef.value) {\n watermarkRef.value = document.createElement('div')\n }\n\n const ratio = getPixelRatio()\n const [markWidth, markHeight] = getMarkSize(ctx)\n\n const drawCanvas = (\n drawContent?: NonNullable<WatermarkProps['content']> | HTMLImageElement\n ) => {\n const [textClips, clipWidth] = getClips(\n drawContent || '',\n rotate,\n ratio,\n markWidth,\n markHeight,\n {\n color: color.value,\n fontSize: fontSize.value,\n fontStyle: fontStyle.value,\n fontWeight: fontWeight.value,\n fontFamily: fontFamily.value,\n },\n gapX.value,\n gapY.value\n )\n\n appendWatermark(textClips, clipWidth)\n }\n\n if (image) {\n const img = new Image()\n img.onload = () => {\n drawCanvas(img)\n }\n img.onerror = () => {\n drawCanvas(content)\n }\n img.crossOrigin = 'anonymous'\n img.referrerPolicy = 'no-referrer'\n img.src = image\n } else {\n drawCanvas(content)\n }\n }\n}\n\nonMounted(() => {\n renderWatermark()\n})\n\nwatch(\n () => props,\n () => {\n renderWatermark()\n },\n {\n deep: true,\n flush: 'post',\n }\n)\n\nonBeforeUnmount(() => {\n destroyWatermark()\n})\n\nconst onMutate = (mutations: MutationRecord[]) => {\n if (stopObservation.value) {\n return\n }\n mutations.forEach((mutation) => {\n if (reRendering(mutation, watermarkRef.value)) {\n destroyWatermark()\n renderWatermark()\n }\n })\n}\n\nuseMutationObserver(containerRef, onMutate, {\n attributes: true,\n})\n</script>\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"watermark2.mjs","sources":["../../../../../../packages/components/watermark/src/watermark.vue"],"sourcesContent":["<template>\n <div ref=\"containerRef\" :style=\"[style]\">\n <slot />\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n onBeforeUnmount,\n onMounted,\n ref,\n shallowRef,\n watch,\n} from 'vue'\nimport { useMutationObserver } from '@vueuse/core'\nimport { watermarkProps } from './watermark'\nimport { getPixelRatio, getStyleStr, reRendering } from './utils'\nimport useClips, { FontGap } from './useClips'\nimport type { WatermarkProps } from './watermark'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n name: 'ElWatermark',\n})\n\nconst style: CSSProperties = {\n position: 'relative',\n}\n\nconst props = defineProps(watermarkProps)\nconst color = computed(() => props.font?.color ?? 'rgba(0,0,0,.15)')\nconst fontSize = computed(() => props.font?.fontSize ?? 16)\nconst fontWeight = computed(() => props.font?.fontWeight ?? 'normal')\nconst fontStyle = computed(() => props.font?.fontStyle ?? 'normal')\nconst fontFamily = computed(() => props.font?.fontFamily ?? 'sans-serif')\nconst textAlign = computed(() => props.font?.textAlign ?? 'center')\nconst textBaseline = computed(() => props.font?.textBaseline ?? 'top')\n\nconst gapX = computed(() => props.gap[0])\nconst gapY = computed(() => props.gap[1])\nconst gapXCenter = computed(() => gapX.value / 2)\nconst gapYCenter = computed(() => gapY.value / 2)\nconst offsetLeft = computed(() => props.offset?.[0] ?? gapXCenter.value)\nconst offsetTop = computed(() => props.offset?.[1] ?? gapYCenter.value)\n\nconst getMarkStyle = () => {\n const markStyle: CSSProperties = {\n zIndex: props.zIndex,\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n pointerEvents: 'none',\n backgroundRepeat: 'repeat',\n }\n\n /** Calculate the style of the offset */\n let positionLeft = offsetLeft.value - gapXCenter.value\n let positionTop = offsetTop.value - gapYCenter.value\n if (positionLeft > 0) {\n markStyle.left = `${positionLeft}px`\n markStyle.width = `calc(100% - ${positionLeft}px)`\n positionLeft = 0\n }\n if (positionTop > 0) {\n markStyle.top = `${positionTop}px`\n markStyle.height = `calc(100% - ${positionTop}px)`\n positionTop = 0\n }\n markStyle.backgroundPosition = `${positionLeft}px ${positionTop}px`\n\n return markStyle\n}\n\nconst containerRef = shallowRef<HTMLDivElement | null>(null)\nconst watermarkRef = shallowRef<HTMLDivElement>()\nconst stopObservation = ref(false)\n\nconst destroyWatermark = () => {\n if (watermarkRef.value) {\n watermarkRef.value.remove()\n watermarkRef.value = undefined\n }\n}\nconst appendWatermark = (base64Url: string, markWidth: number) => {\n if (containerRef.value && watermarkRef.value) {\n stopObservation.value = true\n watermarkRef.value.setAttribute(\n 'style',\n getStyleStr({\n ...getMarkStyle(),\n backgroundImage: `url('${base64Url}')`,\n backgroundSize: `${Math.floor(markWidth)}px`,\n })\n )\n containerRef.value?.append(watermarkRef.value)\n // Delayed execution\n setTimeout(() => {\n stopObservation.value = false\n })\n }\n}\n\n/**\n * Get the width and height of the watermark. The default values are as follows\n * Image: [120, 64]; Content: It's calculated by content;\n */\nconst getMarkSize = (ctx: CanvasRenderingContext2D) => {\n let defaultWidth = 120\n let defaultHeight = 64\n const image = props.image\n const content = props.content\n const width = props.width\n const height = props.height\n if (!image && ctx.measureText) {\n ctx.font = `${Number(fontSize.value)}px ${fontFamily.value}`\n const contents = Array.isArray(content) ? content : [content]\n const sizes = contents.map((item) => {\n const metrics = ctx.measureText(item!)\n\n return [\n metrics.width,\n metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent,\n ]\n })\n defaultWidth = Math.ceil(Math.max(...sizes.map((size) => size[0])))\n defaultHeight =\n Math.ceil(Math.max(...sizes.map((size) => size[1]))) * contents.length +\n (contents.length - 1) * FontGap\n }\n return [width ?? defaultWidth, height ?? defaultHeight] as const\n}\n\nconst getClips = useClips()\n\nconst renderWatermark = () => {\n const canvas = document.createElement('canvas')\n const ctx = canvas.getContext('2d')\n const image = props.image\n const content = props.content\n const rotate = props.rotate\n\n if (ctx) {\n if (!watermarkRef.value) {\n watermarkRef.value = document.createElement('div')\n }\n\n const ratio = getPixelRatio()\n const [markWidth, markHeight] = getMarkSize(ctx)\n\n const drawCanvas = (\n drawContent?: NonNullable<WatermarkProps['content']> | HTMLImageElement\n ) => {\n const [textClips, clipWidth] = getClips(\n drawContent || '',\n rotate,\n ratio,\n markWidth,\n markHeight,\n {\n color: color.value,\n fontSize: fontSize.value,\n fontStyle: fontStyle.value,\n fontWeight: fontWeight.value,\n fontFamily: fontFamily.value,\n textAlign: textAlign.value,\n textBaseline: textBaseline.value,\n },\n gapX.value,\n gapY.value\n )\n\n appendWatermark(textClips, clipWidth)\n }\n\n if (image) {\n const img = new Image()\n img.onload = () => {\n drawCanvas(img)\n }\n img.onerror = () => {\n drawCanvas(content)\n }\n img.crossOrigin = 'anonymous'\n img.referrerPolicy = 'no-referrer'\n img.src = image\n } else {\n drawCanvas(content)\n }\n }\n}\n\nonMounted(() => {\n renderWatermark()\n})\n\nwatch(\n () => props,\n () => {\n renderWatermark()\n },\n {\n deep: true,\n flush: 'post',\n }\n)\n\nonBeforeUnmount(() => {\n destroyWatermark()\n})\n\nconst onMutate = (mutations: MutationRecord[]) => {\n if (stopObservation.value) {\n return\n }\n mutations.forEach((mutation) => {\n if (reRendering(mutation, watermarkRef.value)) {\n destroyWatermark()\n renderWatermark()\n }\n })\n}\n\nuseMutationObserver(containerRef, onMutate, {\n attributes: true,\n})\n</script>\n"],"names":[],"mappings":"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"}
|
package/es/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const version = "0.0.
|
|
1
|
+
export declare const version = "0.0.20231030";
|
package/es/version.mjs
CHANGED
package/es/version.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.mjs","sources":["../../../packages/element-plus/version.ts"],"sourcesContent":["export const version = '0.0.
|
|
1
|
+
{"version":3,"file":"version.mjs","sources":["../../../packages/element-plus/version.ts"],"sourcesContent":["export const version = '0.0.20231030'\n"],"names":[],"mappings":"AAAY,MAAC,OAAO,GAAG;;;;"}
|
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var vue = require('vue');
|
|
6
6
|
var core = require('@vueuse/core');
|
|
7
|
+
var lodashUnified = require('lodash-unified');
|
|
7
8
|
require('../../../hooks/index.js');
|
|
8
9
|
require('../../../constants/index.js');
|
|
9
10
|
require('../../../utils/index.js');
|
|
@@ -17,6 +18,7 @@ var event = require('../../../constants/event.js');
|
|
|
17
18
|
var index$3 = require('../../../hooks/use-lockscreen/index.js');
|
|
18
19
|
|
|
19
20
|
const useDialog = (props, targetRef) => {
|
|
21
|
+
var _a;
|
|
20
22
|
const instance = vue.getCurrentInstance();
|
|
21
23
|
const emit = instance.emit;
|
|
22
24
|
const { nextZIndex } = index.useZIndex();
|
|
@@ -26,7 +28,7 @@ const useDialog = (props, targetRef) => {
|
|
|
26
28
|
const visible = vue.ref(false);
|
|
27
29
|
const closed = vue.ref(false);
|
|
28
30
|
const rendered = vue.ref(false);
|
|
29
|
-
const zIndex = vue.ref(props.zIndex
|
|
31
|
+
const zIndex = vue.ref((_a = props.zIndex) != null ? _a : nextZIndex());
|
|
30
32
|
let openTimer = void 0;
|
|
31
33
|
let closeTimer = void 0;
|
|
32
34
|
const namespace = useGlobalConfig.useGlobalConfig("namespace", index$2.defaultNamespace);
|
|
@@ -115,8 +117,8 @@ const useDialog = (props, targetRef) => {
|
|
|
115
117
|
emit("closeAutoFocus");
|
|
116
118
|
}
|
|
117
119
|
function onFocusoutPrevented(event) {
|
|
118
|
-
var
|
|
119
|
-
if (((
|
|
120
|
+
var _a2;
|
|
121
|
+
if (((_a2 = event.detail) == null ? void 0 : _a2.focusReason) === "pointer") {
|
|
120
122
|
event.preventDefault();
|
|
121
123
|
}
|
|
122
124
|
}
|
|
@@ -133,7 +135,7 @@ const useDialog = (props, targetRef) => {
|
|
|
133
135
|
closed.value = false;
|
|
134
136
|
open();
|
|
135
137
|
rendered.value = true;
|
|
136
|
-
zIndex.value = props.zIndex ? zIndex.value
|
|
138
|
+
zIndex.value = lodashUnified.isUndefined(props.zIndex) ? nextZIndex() : zIndex.value++;
|
|
137
139
|
vue.nextTick(() => {
|
|
138
140
|
emit("open");
|
|
139
141
|
if (targetRef.value) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-dialog.js","sources":["../../../../../../packages/components/dialog/src/use-dialog.ts"],"sourcesContent":["import {\n computed,\n getCurrentInstance,\n nextTick,\n onMounted,\n ref,\n watch,\n} from 'vue'\nimport { useTimeoutFn } from '@vueuse/core'\n\nimport {\n defaultNamespace,\n useId,\n useLockscreen,\n useZIndex,\n} from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { addUnit, isClient } from '@element-plus/utils'\nimport { useGlobalConfig } from '@element-plus/components/config-provider'\n\nimport type { CSSProperties, Ref, SetupContext } from 'vue'\nimport type { DialogEmits, DialogProps } from './dialog'\n\nexport const useDialog = (\n props: DialogProps,\n targetRef: Ref<HTMLElement | undefined>\n) => {\n const instance = getCurrentInstance()!\n const emit = instance.emit as SetupContext<DialogEmits>['emit']\n const { nextZIndex } = useZIndex()\n\n let lastPosition = ''\n const titleId = useId()\n const bodyId = useId()\n const visible = ref(false)\n const closed = ref(false)\n const rendered = ref(false) // when desctroyOnClose is true, we initialize it as false vise versa\n const zIndex = ref(props.zIndex || nextZIndex())\n\n let openTimer: (() => void) | undefined = undefined\n let closeTimer: (() => void) | undefined = undefined\n\n const namespace = useGlobalConfig('namespace', defaultNamespace)\n\n const style = computed<CSSProperties>(() => {\n const style: CSSProperties = {}\n const varPrefix = `--${namespace.value}-dialog` as const\n if (!props.fullscreen) {\n if (props.top) {\n style[`${varPrefix}-margin-top`] = props.top\n }\n if (props.width) {\n style[`${varPrefix}-width`] = addUnit(props.width)\n }\n }\n return style\n })\n\n const overlayDialogStyle = computed<CSSProperties>(() => {\n if (props.alignCenter) {\n return { display: 'flex' }\n }\n return {}\n })\n\n function afterEnter() {\n emit('opened')\n }\n\n function afterLeave() {\n emit('closed')\n emit(UPDATE_MODEL_EVENT, false)\n if (props.destroyOnClose) {\n rendered.value = false\n }\n }\n\n function beforeLeave() {\n emit('close')\n }\n\n function open() {\n closeTimer?.()\n openTimer?.()\n\n if (props.openDelay && props.openDelay > 0) {\n ;({ stop: openTimer } = useTimeoutFn(() => doOpen(), props.openDelay))\n } else {\n doOpen()\n }\n }\n\n function close() {\n openTimer?.()\n closeTimer?.()\n\n if (props.closeDelay && props.closeDelay > 0) {\n ;({ stop: closeTimer } = useTimeoutFn(() => doClose(), props.closeDelay))\n } else {\n doClose()\n }\n }\n\n function handleClose() {\n function hide(shouldCancel?: boolean) {\n if (shouldCancel) return\n closed.value = true\n visible.value = false\n }\n\n if (props.beforeClose) {\n props.beforeClose(hide)\n } else {\n close()\n }\n }\n\n function onModalClick() {\n if (props.closeOnClickModal) {\n handleClose()\n }\n }\n\n function doOpen() {\n if (!isClient) return\n visible.value = true\n }\n\n function doClose() {\n visible.value = false\n }\n\n function onOpenAutoFocus() {\n emit('openAutoFocus')\n }\n\n function onCloseAutoFocus() {\n emit('closeAutoFocus')\n }\n\n function onFocusoutPrevented(event: CustomEvent) {\n if (event.detail?.focusReason === 'pointer') {\n event.preventDefault()\n }\n }\n\n if (props.lockScroll) {\n useLockscreen(visible)\n }\n\n function onCloseRequested() {\n if (props.closeOnPressEscape) {\n handleClose()\n }\n }\n\n watch(\n () => props.modelValue,\n (val) => {\n if (val) {\n closed.value = false\n open()\n rendered.value = true // enables lazy rendering\n zIndex.value = props.zIndex ? zIndex.value++ : nextZIndex()\n // this.$el.addEventListener('scroll', this.updatePopper)\n nextTick(() => {\n emit('open')\n if (targetRef.value) {\n targetRef.value.scrollTop = 0\n }\n })\n } else {\n // this.$el.removeEventListener('scroll', this.updatePopper\n if (visible.value) {\n close()\n }\n }\n }\n )\n\n watch(\n () => props.fullscreen,\n (val) => {\n if (!targetRef.value) return\n if (val) {\n lastPosition = targetRef.value.style.transform\n targetRef.value.style.transform = ''\n } else {\n targetRef.value.style.transform = lastPosition\n }\n }\n )\n\n onMounted(() => {\n if (props.modelValue) {\n visible.value = true\n rendered.value = true // enables lazy rendering\n open()\n }\n })\n\n return {\n afterEnter,\n afterLeave,\n beforeLeave,\n handleClose,\n onModalClick,\n close,\n doClose,\n onOpenAutoFocus,\n onCloseAutoFocus,\n onCloseRequested,\n onFocusoutPrevented,\n titleId,\n bodyId,\n closed,\n style,\n overlayDialogStyle,\n rendered,\n visible,\n zIndex,\n }\n}\n"],"names":["getCurrentInstance","useZIndex","useId","ref","useGlobalConfig","defaultNamespace","style","computed","addUnit","UPDATE_MODEL_EVENT","useTimeoutFn","isClient","useLockscreen","watch","nextTick","onMounted"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-dialog.js","sources":["../../../../../../packages/components/dialog/src/use-dialog.ts"],"sourcesContent":["import {\n computed,\n getCurrentInstance,\n nextTick,\n onMounted,\n ref,\n watch,\n} from 'vue'\nimport { useTimeoutFn } from '@vueuse/core'\n\nimport { isUndefined } from 'lodash-unified'\nimport {\n defaultNamespace,\n useId,\n useLockscreen,\n useZIndex,\n} from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { addUnit, isClient } from '@element-plus/utils'\nimport { useGlobalConfig } from '@element-plus/components/config-provider'\n\nimport type { CSSProperties, Ref, SetupContext } from 'vue'\nimport type { DialogEmits, DialogProps } from './dialog'\n\nexport const useDialog = (\n props: DialogProps,\n targetRef: Ref<HTMLElement | undefined>\n) => {\n const instance = getCurrentInstance()!\n const emit = instance.emit as SetupContext<DialogEmits>['emit']\n const { nextZIndex } = useZIndex()\n\n let lastPosition = ''\n const titleId = useId()\n const bodyId = useId()\n const visible = ref(false)\n const closed = ref(false)\n const rendered = ref(false) // when desctroyOnClose is true, we initialize it as false vise versa\n const zIndex = ref(props.zIndex ?? nextZIndex())\n\n let openTimer: (() => void) | undefined = undefined\n let closeTimer: (() => void) | undefined = undefined\n\n const namespace = useGlobalConfig('namespace', defaultNamespace)\n\n const style = computed<CSSProperties>(() => {\n const style: CSSProperties = {}\n const varPrefix = `--${namespace.value}-dialog` as const\n if (!props.fullscreen) {\n if (props.top) {\n style[`${varPrefix}-margin-top`] = props.top\n }\n if (props.width) {\n style[`${varPrefix}-width`] = addUnit(props.width)\n }\n }\n return style\n })\n\n const overlayDialogStyle = computed<CSSProperties>(() => {\n if (props.alignCenter) {\n return { display: 'flex' }\n }\n return {}\n })\n\n function afterEnter() {\n emit('opened')\n }\n\n function afterLeave() {\n emit('closed')\n emit(UPDATE_MODEL_EVENT, false)\n if (props.destroyOnClose) {\n rendered.value = false\n }\n }\n\n function beforeLeave() {\n emit('close')\n }\n\n function open() {\n closeTimer?.()\n openTimer?.()\n\n if (props.openDelay && props.openDelay > 0) {\n ;({ stop: openTimer } = useTimeoutFn(() => doOpen(), props.openDelay))\n } else {\n doOpen()\n }\n }\n\n function close() {\n openTimer?.()\n closeTimer?.()\n\n if (props.closeDelay && props.closeDelay > 0) {\n ;({ stop: closeTimer } = useTimeoutFn(() => doClose(), props.closeDelay))\n } else {\n doClose()\n }\n }\n\n function handleClose() {\n function hide(shouldCancel?: boolean) {\n if (shouldCancel) return\n closed.value = true\n visible.value = false\n }\n\n if (props.beforeClose) {\n props.beforeClose(hide)\n } else {\n close()\n }\n }\n\n function onModalClick() {\n if (props.closeOnClickModal) {\n handleClose()\n }\n }\n\n function doOpen() {\n if (!isClient) return\n visible.value = true\n }\n\n function doClose() {\n visible.value = false\n }\n\n function onOpenAutoFocus() {\n emit('openAutoFocus')\n }\n\n function onCloseAutoFocus() {\n emit('closeAutoFocus')\n }\n\n function onFocusoutPrevented(event: CustomEvent) {\n if (event.detail?.focusReason === 'pointer') {\n event.preventDefault()\n }\n }\n\n if (props.lockScroll) {\n useLockscreen(visible)\n }\n\n function onCloseRequested() {\n if (props.closeOnPressEscape) {\n handleClose()\n }\n }\n\n watch(\n () => props.modelValue,\n (val) => {\n if (val) {\n closed.value = false\n open()\n rendered.value = true // enables lazy rendering\n zIndex.value = isUndefined(props.zIndex) ? nextZIndex() : zIndex.value++\n // this.$el.addEventListener('scroll', this.updatePopper)\n nextTick(() => {\n emit('open')\n if (targetRef.value) {\n targetRef.value.scrollTop = 0\n }\n })\n } else {\n // this.$el.removeEventListener('scroll', this.updatePopper\n if (visible.value) {\n close()\n }\n }\n }\n )\n\n watch(\n () => props.fullscreen,\n (val) => {\n if (!targetRef.value) return\n if (val) {\n lastPosition = targetRef.value.style.transform\n targetRef.value.style.transform = ''\n } else {\n targetRef.value.style.transform = lastPosition\n }\n }\n )\n\n onMounted(() => {\n if (props.modelValue) {\n visible.value = true\n rendered.value = true // enables lazy rendering\n open()\n }\n })\n\n return {\n afterEnter,\n afterLeave,\n beforeLeave,\n handleClose,\n onModalClick,\n close,\n doClose,\n onOpenAutoFocus,\n onCloseAutoFocus,\n onCloseRequested,\n onFocusoutPrevented,\n titleId,\n bodyId,\n closed,\n style,\n overlayDialogStyle,\n rendered,\n visible,\n zIndex,\n }\n}\n"],"names":["getCurrentInstance","useZIndex","useId","ref","useGlobalConfig","defaultNamespace","style","computed","addUnit","UPDATE_MODEL_EVENT","useTimeoutFn","isClient","useLockscreen","watch","isUndefined","nextTick","onMounted"],"mappings":"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"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import ElSelect from '@element-plus/nightly/es/components/select';
|
|
2
2
|
import type { Ref } from 'vue';
|
|
3
3
|
import type ElTree from '@element-plus/nightly/es/components/tree';
|
|
4
|
-
export declare const useSelect: (props: any, { attrs }: {
|
|
4
|
+
export declare const useSelect: (props: any, { attrs, emit }: {
|
|
5
5
|
attrs: any;
|
|
6
|
+
emit: any;
|
|
6
7
|
}, { tree, key, }: {
|
|
7
8
|
select: Ref<InstanceType<typeof ElSelect> | undefined>;
|
|
8
9
|
tree: Ref<InstanceType<typeof ElTree> | undefined>;
|
|
@@ -6,9 +6,11 @@ var vue = require('vue');
|
|
|
6
6
|
var lodashUnified = require('lodash-unified');
|
|
7
7
|
var index$1 = require('../../select/index.js');
|
|
8
8
|
require('../../../hooks/index.js');
|
|
9
|
+
require('../../../constants/index.js');
|
|
9
10
|
var index = require('../../../hooks/use-namespace/index.js');
|
|
11
|
+
var event = require('../../../constants/event.js');
|
|
10
12
|
|
|
11
|
-
const useSelect = (props, { attrs }, {
|
|
13
|
+
const useSelect = (props, { attrs, emit }, {
|
|
12
14
|
tree,
|
|
13
15
|
key
|
|
14
16
|
}) => {
|
|
@@ -16,6 +18,7 @@ const useSelect = (props, { attrs }, {
|
|
|
16
18
|
const result = {
|
|
17
19
|
...lodashUnified.pick(vue.toRefs(props), Object.keys(index$1.ElSelect.props)),
|
|
18
20
|
...attrs,
|
|
21
|
+
"onUpdate:modelValue": (value) => emit(event.UPDATE_MODEL_EVENT, value),
|
|
19
22
|
valueKey: key,
|
|
20
23
|
popperClass: vue.computed(() => {
|
|
21
24
|
const classes = [ns.e("popper")];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","sources":["../../../../../../packages/components/tree-select/src/select.ts"],"sourcesContent":["// @ts-nocheck\nimport { computed, nextTick, toRefs } from 'vue'\nimport { pick } from 'lodash-unified'\nimport ElSelect from '@element-plus/components/select'\nimport { useNamespace } from '@element-plus/hooks'\nimport type { Ref } from 'vue'\nimport type ElTree from '@element-plus/components/tree'\n\nexport const useSelect = (\n props,\n { attrs },\n {\n tree,\n key,\n }: {\n select: Ref<InstanceType<typeof ElSelect> | undefined>\n tree: Ref<InstanceType<typeof ElTree> | undefined>\n key: Ref<string>\n }\n) => {\n const ns = useNamespace('tree-select')\n\n const result = {\n ...pick(toRefs(props), Object.keys(ElSelect.props)),\n ...attrs,\n valueKey: key,\n popperClass: computed(() => {\n const classes = [ns.e('popper')]\n if (props.popperClass) classes.push(props.popperClass)\n return classes.join(' ')\n }),\n filterMethod: (keyword = '') => {\n if (props.filterMethod) props.filterMethod(keyword)\n\n nextTick(() => {\n // let tree node expand only, same with tree filter\n tree.value?.filter(keyword)\n })\n },\n // clear filter text when visible change\n onVisibleChange: (visible: boolean) => {\n attrs.onVisibleChange?.(visible)\n\n if (props.filterable && visible) {\n result.filterMethod()\n }\n },\n }\n\n return result\n}\n"],"names":["useNamespace","pick","toRefs","ElSelect","computed","nextTick"],"mappings":"
|
|
1
|
+
{"version":3,"file":"select.js","sources":["../../../../../../packages/components/tree-select/src/select.ts"],"sourcesContent":["// @ts-nocheck\nimport { computed, nextTick, toRefs } from 'vue'\nimport { pick } from 'lodash-unified'\nimport ElSelect from '@element-plus/components/select'\nimport { useNamespace } from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport type { Ref } from 'vue'\nimport type ElTree from '@element-plus/components/tree'\n\nexport const useSelect = (\n props,\n { attrs, emit },\n {\n tree,\n key,\n }: {\n select: Ref<InstanceType<typeof ElSelect> | undefined>\n tree: Ref<InstanceType<typeof ElTree> | undefined>\n key: Ref<string>\n }\n) => {\n const ns = useNamespace('tree-select')\n\n const result = {\n ...pick(toRefs(props), Object.keys(ElSelect.props)),\n ...attrs,\n // attrs is not reactive, when v-model binding source changes,\n // this listener is still old, see the bug(or test 'v-model source change'):\n // https://github.com/element-plus/element-plus/issues/14204\n 'onUpdate:modelValue': (value) => emit(UPDATE_MODEL_EVENT, value),\n valueKey: key,\n popperClass: computed(() => {\n const classes = [ns.e('popper')]\n if (props.popperClass) classes.push(props.popperClass)\n return classes.join(' ')\n }),\n filterMethod: (keyword = '') => {\n if (props.filterMethod) props.filterMethod(keyword)\n\n nextTick(() => {\n // let tree node expand only, same with tree filter\n tree.value?.filter(keyword)\n })\n },\n // clear filter text when visible change\n onVisibleChange: (visible: boolean) => {\n attrs.onVisibleChange?.(visible)\n\n if (props.filterable && visible) {\n result.filterMethod()\n }\n },\n }\n\n return result\n}\n"],"names":["useNamespace","pick","toRefs","ElSelect","UPDATE_MODEL_EVENT","computed","nextTick"],"mappings":";;;;;;;;;;;;AAKY,MAAC,SAAS,GAAG,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;AAClD,EAAE,IAAI;AACN,EAAE,GAAG;AACL,CAAC,KAAK;AACN,EAAE,MAAM,EAAE,GAAGA,kBAAY,CAAC,aAAa,CAAC,CAAC;AACzC,EAAE,MAAM,MAAM,GAAG;AACjB,IAAI,GAAGC,kBAAI,CAACC,UAAM,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,IAAI,CAACC,gBAAQ,CAAC,KAAK,CAAC,CAAC;AACvD,IAAI,GAAG,KAAK;AACZ,IAAI,qBAAqB,EAAE,CAAC,KAAK,KAAK,IAAI,CAACC,wBAAkB,EAAE,KAAK,CAAC;AACrE,IAAI,QAAQ,EAAE,GAAG;AACjB,IAAI,WAAW,EAAEC,YAAQ,CAAC,MAAM;AAChC,MAAM,MAAM,OAAO,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;AACvC,MAAM,IAAI,KAAK,CAAC,WAAW;AAC3B,QAAQ,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;AACxC,MAAM,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC/B,KAAK,CAAC;AACN,IAAI,YAAY,EAAE,CAAC,OAAO,GAAG,EAAE,KAAK;AACpC,MAAM,IAAI,KAAK,CAAC,YAAY;AAC5B,QAAQ,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;AACpC,MAAMC,YAAQ,CAAC,MAAM;AACrB,QAAQ,IAAI,EAAE,CAAC;AACf,QAAQ,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AAChE,OAAO,CAAC,CAAC;AACT,KAAK;AACL,IAAI,eAAe,EAAE,CAAC,OAAO,KAAK;AAClC,MAAM,IAAI,EAAE,CAAC;AACb,MAAM,CAAC,EAAE,GAAG,KAAK,CAAC,eAAe,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AAC9E,MAAM,IAAI,KAAK,CAAC,UAAU,IAAI,OAAO,EAAE;AACvC,QAAQ,MAAM,CAAC,YAAY,EAAE,CAAC;AAC9B,OAAO;AACP,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,OAAO,MAAM,CAAC;AAChB;;;;"}
|
|
@@ -48,6 +48,8 @@ export declare const ElWatermark: import("@element-plus/nightly/es/utils").SFCWi
|
|
|
48
48
|
fontWeight: import("vue").ComputedRef<number | "light" | "normal" | "weight">;
|
|
49
49
|
fontStyle: import("vue").ComputedRef<"none" | "normal" | "italic" | "oblique">;
|
|
50
50
|
fontFamily: import("vue").ComputedRef<string>;
|
|
51
|
+
textAlign: import("vue").ComputedRef<"center" | "right" | "left" | "end" | "start">;
|
|
52
|
+
textBaseline: import("vue").ComputedRef<"top" | "bottom" | "middle" | "alphabetic" | "hanging" | "ideographic">;
|
|
51
53
|
gapX: import("vue").ComputedRef<number>;
|
|
52
54
|
gapY: import("vue").ComputedRef<number>;
|
|
53
55
|
gapXCenter: import("vue").ComputedRef<number>;
|
|
@@ -19,12 +19,20 @@ function useClips() {
|
|
|
19
19
|
if (content instanceof HTMLImageElement) {
|
|
20
20
|
ctx.drawImage(content, 0, 0, contentWidth, contentHeight);
|
|
21
21
|
} else {
|
|
22
|
-
const {
|
|
22
|
+
const {
|
|
23
|
+
color,
|
|
24
|
+
fontSize,
|
|
25
|
+
fontStyle,
|
|
26
|
+
fontWeight,
|
|
27
|
+
fontFamily,
|
|
28
|
+
textAlign,
|
|
29
|
+
textBaseline
|
|
30
|
+
} = font;
|
|
23
31
|
const mergedFontSize = Number(fontSize) * ratio;
|
|
24
32
|
ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${height}px ${fontFamily}`;
|
|
25
33
|
ctx.fillStyle = color;
|
|
26
|
-
ctx.textAlign =
|
|
27
|
-
ctx.textBaseline =
|
|
34
|
+
ctx.textAlign = textAlign;
|
|
35
|
+
ctx.textBaseline = textBaseline;
|
|
28
36
|
const contents = Array.isArray(content) ? content : [content];
|
|
29
37
|
contents == null ? void 0 : contents.forEach((item, index) => {
|
|
30
38
|
ctx.fillText(item != null ? item : "", contentWidth / 2, index * (mergedFontSize + FontGap * ratio));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useClips.js","sources":["../../../../../../packages/components/watermark/src/useClips.ts"],"sourcesContent":["import type { WatermarkProps } from './watermark'\n\nexport const FontGap = 3\n\nfunction prepareCanvas(\n width: number,\n height: number,\n ratio = 1\n): [\n ctx: CanvasRenderingContext2D,\n canvas: HTMLCanvasElement,\n realWidth: number,\n realHeight: number\n] {\n const canvas = document.createElement('canvas')\n const ctx = canvas.getContext('2d')!\n const realWidth = width * ratio\n const realHeight = height * ratio\n canvas.setAttribute('width', `${realWidth}px`)\n canvas.setAttribute('height', `${realHeight}px`)\n ctx.save()\n\n return [ctx, canvas, realWidth, realHeight]\n}\n\n/**\n * Get the clips of text content.\n * This is a lazy hook function since SSR no need this\n */\nexport default function useClips() {\n // Get single clips\n function getClips(\n content: NonNullable<WatermarkProps['content']> | HTMLImageElement,\n rotate: number,\n ratio: number,\n width: number,\n height: number,\n font: Required<NonNullable<WatermarkProps['font']>>,\n gapX: number,\n gapY: number\n ): [dataURL: string, finalWidth: number, finalHeight: number] {\n // ================= Text / Image =================\n const [ctx, canvas, contentWidth, contentHeight] = prepareCanvas(\n width,\n height,\n ratio\n )\n\n if (content instanceof HTMLImageElement) {\n // Image\n ctx.drawImage(content, 0, 0, contentWidth, contentHeight)\n } else {\n // Text\n const {
|
|
1
|
+
{"version":3,"file":"useClips.js","sources":["../../../../../../packages/components/watermark/src/useClips.ts"],"sourcesContent":["import type { WatermarkProps } from './watermark'\n\nexport const FontGap = 3\n\nfunction prepareCanvas(\n width: number,\n height: number,\n ratio = 1\n): [\n ctx: CanvasRenderingContext2D,\n canvas: HTMLCanvasElement,\n realWidth: number,\n realHeight: number\n] {\n const canvas = document.createElement('canvas')\n const ctx = canvas.getContext('2d')!\n const realWidth = width * ratio\n const realHeight = height * ratio\n canvas.setAttribute('width', `${realWidth}px`)\n canvas.setAttribute('height', `${realHeight}px`)\n ctx.save()\n\n return [ctx, canvas, realWidth, realHeight]\n}\n\n/**\n * Get the clips of text content.\n * This is a lazy hook function since SSR no need this\n */\nexport default function useClips() {\n // Get single clips\n function getClips(\n content: NonNullable<WatermarkProps['content']> | HTMLImageElement,\n rotate: number,\n ratio: number,\n width: number,\n height: number,\n font: Required<NonNullable<WatermarkProps['font']>>,\n gapX: number,\n gapY: number\n ): [dataURL: string, finalWidth: number, finalHeight: number] {\n // ================= Text / Image =================\n const [ctx, canvas, contentWidth, contentHeight] = prepareCanvas(\n width,\n height,\n ratio\n )\n\n if (content instanceof HTMLImageElement) {\n // Image\n ctx.drawImage(content, 0, 0, contentWidth, contentHeight)\n } else {\n // Text\n const {\n color,\n fontSize,\n fontStyle,\n fontWeight,\n fontFamily,\n textAlign,\n textBaseline,\n } = font\n const mergedFontSize = Number(fontSize) * ratio\n\n ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${height}px ${fontFamily}`\n ctx.fillStyle = color\n ctx.textAlign = textAlign\n ctx.textBaseline = textBaseline\n const contents = Array.isArray(content) ? content : [content]\n contents?.forEach((item, index) => {\n ctx.fillText(\n item ?? '',\n contentWidth / 2,\n index * (mergedFontSize + FontGap * ratio)\n )\n })\n }\n\n // ==================== Rotate ====================\n const angle = (Math.PI / 180) * Number(rotate)\n const maxSize = Math.max(width, height)\n const [rCtx, rCanvas, realMaxSize] = prepareCanvas(maxSize, maxSize, ratio)\n\n // Copy from `ctx` and rotate\n rCtx.translate(realMaxSize / 2, realMaxSize / 2)\n rCtx.rotate(angle)\n if (contentWidth > 0 && contentHeight > 0) {\n rCtx.drawImage(canvas, -contentWidth / 2, -contentHeight / 2)\n }\n\n // Get boundary of rotated text\n function getRotatePos(x: number, y: number) {\n const targetX = x * Math.cos(angle) - y * Math.sin(angle)\n const targetY = x * Math.sin(angle) + y * Math.cos(angle)\n return [targetX, targetY]\n }\n\n let left = 0\n let right = 0\n let top = 0\n let bottom = 0\n\n const halfWidth = contentWidth / 2\n const halfHeight = contentHeight / 2\n const points = [\n [0 - halfWidth, 0 - halfHeight],\n [0 + halfWidth, 0 - halfHeight],\n [0 + halfWidth, 0 + halfHeight],\n [0 - halfWidth, 0 + halfHeight],\n ]\n points.forEach(([x, y]) => {\n const [targetX, targetY] = getRotatePos(x, y)\n left = Math.min(left, targetX)\n right = Math.max(right, targetX)\n top = Math.min(top, targetY)\n bottom = Math.max(bottom, targetY)\n })\n\n const cutLeft = left + realMaxSize / 2\n const cutTop = top + realMaxSize / 2\n const cutWidth = right - left\n const cutHeight = bottom - top\n\n // ================ Fill Alternate ================\n const realGapX = gapX * ratio\n const realGapY = gapY * ratio\n const filledWidth = (cutWidth + realGapX) * 2\n const filledHeight = cutHeight + realGapY\n\n const [fCtx, fCanvas] = prepareCanvas(filledWidth, filledHeight)\n\n function drawImg(targetX = 0, targetY = 0) {\n fCtx.drawImage(\n rCanvas,\n cutLeft,\n cutTop,\n cutWidth,\n cutHeight,\n targetX,\n targetY,\n cutWidth,\n cutHeight\n )\n }\n drawImg()\n drawImg(cutWidth + realGapX, -cutHeight / 2 - realGapY / 2)\n drawImg(cutWidth + realGapX, +cutHeight / 2 + realGapY / 2)\n\n return [fCanvas.toDataURL(), filledWidth / ratio, filledHeight / ratio]\n }\n\n return getClips\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -6,6 +6,8 @@ export interface WatermarkFontType {
|
|
|
6
6
|
fontWeight?: 'normal' | 'light' | 'weight' | number;
|
|
7
7
|
fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
|
|
8
8
|
fontFamily?: string;
|
|
9
|
+
textAlign?: 'start' | 'end' | 'left' | 'right' | 'center';
|
|
10
|
+
textBaseline?: 'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom';
|
|
9
11
|
}
|
|
10
12
|
export declare const watermarkProps: {
|
|
11
13
|
readonly zIndex: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 9, boolean>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"watermark.js","sources":["../../../../../../packages/components/watermark/src/watermark.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type Watermark from './watermark.vue'\n\nexport interface WatermarkFontType {\n color?: string\n fontSize?: number | string\n fontWeight?: 'normal' | 'light' | 'weight' | number\n fontStyle?: 'none' | 'normal' | 'italic' | 'oblique'\n fontFamily?: string\n}\n\nexport const watermarkProps = buildProps({\n /**\n * @description The z-index of the appended watermark element\n */\n zIndex: {\n type: Number,\n default: 9,\n },\n /**\n * @description The rotation angle of the watermark\n */\n rotate: {\n type: Number,\n default: -22,\n },\n /**\n * @description The width of the watermark\n */\n width: Number,\n /**\n * @description The height of the watermark\n */\n height: Number,\n /**\n * @description Image source, it is recommended to export 2x or 3x image, high priority (support base64 format)\n */\n image: String,\n /**\n * @description Watermark text content\n */\n content: {\n type: definePropType<string | string[]>([String, Array]),\n default: 'Element Plus',\n },\n /**\n * @description Text style\n */\n font: {\n type: definePropType<WatermarkFontType>(Object),\n },\n /**\n * @description The spacing between watermarks\n */\n gap: {\n type: definePropType<[number, number]>(Array),\n default: () => [100, 100],\n },\n /**\n * @description The offset of the watermark from the upper left corner of the container. The default is gap/2\n */\n offset: {\n type: definePropType<[number, number]>(Array),\n },\n} as const)\n\nexport type WatermarkProps = ExtractPropTypes<typeof watermarkProps>\nexport type WatermarkInstance = InstanceType<typeof Watermark>\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;;AACY,MAAC,cAAc,GAAGA,kBAAU,CAAC;AACzC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC,EAAE;AAChB,GAAG;AACH,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAEC,sBAAc,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AACzC,IAAI,OAAO,EAAE,cAAc;AAC3B,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAEA,sBAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAEA,sBAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC;AAC7B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAEA,sBAAc,CAAC,KAAK,CAAC;AAC/B,GAAG;AACH,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"watermark.js","sources":["../../../../../../packages/components/watermark/src/watermark.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type Watermark from './watermark.vue'\n\nexport interface WatermarkFontType {\n color?: string\n fontSize?: number | string\n fontWeight?: 'normal' | 'light' | 'weight' | number\n fontStyle?: 'none' | 'normal' | 'italic' | 'oblique'\n fontFamily?: string\n textAlign?: 'start' | 'end' | 'left' | 'right' | 'center'\n textBaseline?:\n | 'top'\n | 'hanging'\n | 'middle'\n | 'alphabetic'\n | 'ideographic'\n | 'bottom'\n}\n\nexport const watermarkProps = buildProps({\n /**\n * @description The z-index of the appended watermark element\n */\n zIndex: {\n type: Number,\n default: 9,\n },\n /**\n * @description The rotation angle of the watermark\n */\n rotate: {\n type: Number,\n default: -22,\n },\n /**\n * @description The width of the watermark\n */\n width: Number,\n /**\n * @description The height of the watermark\n */\n height: Number,\n /**\n * @description Image source, it is recommended to export 2x or 3x image, high priority (support base64 format)\n */\n image: String,\n /**\n * @description Watermark text content\n */\n content: {\n type: definePropType<string | string[]>([String, Array]),\n default: 'Element Plus',\n },\n /**\n * @description Text style\n */\n font: {\n type: definePropType<WatermarkFontType>(Object),\n },\n /**\n * @description The spacing between watermarks\n */\n gap: {\n type: definePropType<[number, number]>(Array),\n default: () => [100, 100],\n },\n /**\n * @description The offset of the watermark from the upper left corner of the container. The default is gap/2\n */\n offset: {\n type: definePropType<[number, number]>(Array),\n },\n} as const)\n\nexport type WatermarkProps = ExtractPropTypes<typeof watermarkProps>\nexport type WatermarkInstance = InstanceType<typeof Watermark>\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;;AACY,MAAC,cAAc,GAAGA,kBAAU,CAAC;AACzC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC,EAAE;AAChB,GAAG;AACH,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAEC,sBAAc,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AACzC,IAAI,OAAO,EAAE,cAAc;AAC3B,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAEA,sBAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAEA,sBAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC;AAC7B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAEA,sBAAc,CAAC,KAAK,CAAC;AAC/B,GAAG;AACH,CAAC;;;;"}
|
|
@@ -49,6 +49,8 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
49
49
|
fontWeight: import("vue").ComputedRef<number | "light" | "normal" | "weight">;
|
|
50
50
|
fontStyle: import("vue").ComputedRef<"none" | "normal" | "italic" | "oblique">;
|
|
51
51
|
fontFamily: import("vue").ComputedRef<string>;
|
|
52
|
+
textAlign: import("vue").ComputedRef<"center" | "right" | "left" | "end" | "start">;
|
|
53
|
+
textBaseline: import("vue").ComputedRef<"top" | "bottom" | "middle" | "alphabetic" | "hanging" | "ideographic">;
|
|
52
54
|
gapX: import("vue").ComputedRef<number>;
|
|
53
55
|
gapY: import("vue").ComputedRef<number>;
|
|
54
56
|
gapXCenter: import("vue").ComputedRef<number>;
|
|
@@ -40,6 +40,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
40
40
|
var _a, _b;
|
|
41
41
|
return (_b = (_a = props.font) == null ? void 0 : _a.fontFamily) != null ? _b : "sans-serif";
|
|
42
42
|
});
|
|
43
|
+
const textAlign = vue.computed(() => {
|
|
44
|
+
var _a, _b;
|
|
45
|
+
return (_b = (_a = props.font) == null ? void 0 : _a.textAlign) != null ? _b : "center";
|
|
46
|
+
});
|
|
47
|
+
const textBaseline = vue.computed(() => {
|
|
48
|
+
var _a, _b;
|
|
49
|
+
return (_b = (_a = props.font) == null ? void 0 : _a.textBaseline) != null ? _b : "top";
|
|
50
|
+
});
|
|
43
51
|
const gapX = vue.computed(() => props.gap[0]);
|
|
44
52
|
const gapY = vue.computed(() => props.gap[1]);
|
|
45
53
|
const gapXCenter = vue.computed(() => gapX.value / 2);
|
|
@@ -143,7 +151,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
143
151
|
fontSize: fontSize.value,
|
|
144
152
|
fontStyle: fontStyle.value,
|
|
145
153
|
fontWeight: fontWeight.value,
|
|
146
|
-
fontFamily: fontFamily.value
|
|
154
|
+
fontFamily: fontFamily.value,
|
|
155
|
+
textAlign: textAlign.value,
|
|
156
|
+
textBaseline: textBaseline.value
|
|
147
157
|
}, gapX.value, gapY.value);
|
|
148
158
|
appendWatermark(textClips, clipWidth);
|
|
149
159
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"watermark2.js","sources":["../../../../../../packages/components/watermark/src/watermark.vue"],"sourcesContent":["<template>\n <div ref=\"containerRef\" :style=\"[style]\">\n <slot />\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n onBeforeUnmount,\n onMounted,\n ref,\n shallowRef,\n watch,\n} from 'vue'\nimport { useMutationObserver } from '@vueuse/core'\nimport { watermarkProps } from './watermark'\nimport { getPixelRatio, getStyleStr, reRendering } from './utils'\nimport useClips, { FontGap } from './useClips'\nimport type { WatermarkProps } from './watermark'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n name: 'ElWatermark',\n})\n\nconst style: CSSProperties = {\n position: 'relative',\n}\n\nconst props = defineProps(watermarkProps)\nconst color = computed(() => props.font?.color ?? 'rgba(0,0,0,.15)')\nconst fontSize = computed(() => props.font?.fontSize ?? 16)\nconst fontWeight = computed(() => props.font?.fontWeight ?? 'normal')\nconst fontStyle = computed(() => props.font?.fontStyle ?? 'normal')\nconst fontFamily = computed(() => props.font?.fontFamily ?? 'sans-serif')\n\nconst gapX = computed(() => props.gap[0])\nconst gapY = computed(() => props.gap[1])\nconst gapXCenter = computed(() => gapX.value / 2)\nconst gapYCenter = computed(() => gapY.value / 2)\nconst offsetLeft = computed(() => props.offset?.[0] ?? gapXCenter.value)\nconst offsetTop = computed(() => props.offset?.[1] ?? gapYCenter.value)\n\nconst getMarkStyle = () => {\n const markStyle: CSSProperties = {\n zIndex: props.zIndex,\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n pointerEvents: 'none',\n backgroundRepeat: 'repeat',\n }\n\n /** Calculate the style of the offset */\n let positionLeft = offsetLeft.value - gapXCenter.value\n let positionTop = offsetTop.value - gapYCenter.value\n if (positionLeft > 0) {\n markStyle.left = `${positionLeft}px`\n markStyle.width = `calc(100% - ${positionLeft}px)`\n positionLeft = 0\n }\n if (positionTop > 0) {\n markStyle.top = `${positionTop}px`\n markStyle.height = `calc(100% - ${positionTop}px)`\n positionTop = 0\n }\n markStyle.backgroundPosition = `${positionLeft}px ${positionTop}px`\n\n return markStyle\n}\n\nconst containerRef = shallowRef<HTMLDivElement | null>(null)\nconst watermarkRef = shallowRef<HTMLDivElement>()\nconst stopObservation = ref(false)\n\nconst destroyWatermark = () => {\n if (watermarkRef.value) {\n watermarkRef.value.remove()\n watermarkRef.value = undefined\n }\n}\nconst appendWatermark = (base64Url: string, markWidth: number) => {\n if (containerRef.value && watermarkRef.value) {\n stopObservation.value = true\n watermarkRef.value.setAttribute(\n 'style',\n getStyleStr({\n ...getMarkStyle(),\n backgroundImage: `url('${base64Url}')`,\n backgroundSize: `${Math.floor(markWidth)}px`,\n })\n )\n containerRef.value?.append(watermarkRef.value)\n // Delayed execution\n setTimeout(() => {\n stopObservation.value = false\n })\n }\n}\n\n/**\n * Get the width and height of the watermark. The default values are as follows\n * Image: [120, 64]; Content: It's calculated by content;\n */\nconst getMarkSize = (ctx: CanvasRenderingContext2D) => {\n let defaultWidth = 120\n let defaultHeight = 64\n const image = props.image\n const content = props.content\n const width = props.width\n const height = props.height\n if (!image && ctx.measureText) {\n ctx.font = `${Number(fontSize.value)}px ${fontFamily.value}`\n const contents = Array.isArray(content) ? content : [content]\n const sizes = contents.map((item) => {\n const metrics = ctx.measureText(item!)\n\n return [\n metrics.width,\n metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent,\n ]\n })\n defaultWidth = Math.ceil(Math.max(...sizes.map((size) => size[0])))\n defaultHeight =\n Math.ceil(Math.max(...sizes.map((size) => size[1]))) * contents.length +\n (contents.length - 1) * FontGap\n }\n return [width ?? defaultWidth, height ?? defaultHeight] as const\n}\n\nconst getClips = useClips()\n\nconst renderWatermark = () => {\n const canvas = document.createElement('canvas')\n const ctx = canvas.getContext('2d')\n const image = props.image\n const content = props.content\n const rotate = props.rotate\n\n if (ctx) {\n if (!watermarkRef.value) {\n watermarkRef.value = document.createElement('div')\n }\n\n const ratio = getPixelRatio()\n const [markWidth, markHeight] = getMarkSize(ctx)\n\n const drawCanvas = (\n drawContent?: NonNullable<WatermarkProps['content']> | HTMLImageElement\n ) => {\n const [textClips, clipWidth] = getClips(\n drawContent || '',\n rotate,\n ratio,\n markWidth,\n markHeight,\n {\n color: color.value,\n fontSize: fontSize.value,\n fontStyle: fontStyle.value,\n fontWeight: fontWeight.value,\n fontFamily: fontFamily.value,\n },\n gapX.value,\n gapY.value\n )\n\n appendWatermark(textClips, clipWidth)\n }\n\n if (image) {\n const img = new Image()\n img.onload = () => {\n drawCanvas(img)\n }\n img.onerror = () => {\n drawCanvas(content)\n }\n img.crossOrigin = 'anonymous'\n img.referrerPolicy = 'no-referrer'\n img.src = image\n } else {\n drawCanvas(content)\n }\n }\n}\n\nonMounted(() => {\n renderWatermark()\n})\n\nwatch(\n () => props,\n () => {\n renderWatermark()\n },\n {\n deep: true,\n flush: 'post',\n }\n)\n\nonBeforeUnmount(() => {\n destroyWatermark()\n})\n\nconst onMutate = (mutations: MutationRecord[]) => {\n if (stopObservation.value) {\n return\n }\n mutations.forEach((mutation) => {\n if (reRendering(mutation, watermarkRef.value)) {\n destroyWatermark()\n renderWatermark()\n }\n })\n}\n\nuseMutationObserver(containerRef, onMutate, {\n attributes: true,\n})\n</script>\n"],"names":["computed","shallowRef","ref","getStyleStr","FontGap","useClips","getPixelRatio","onMounted","watch"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"watermark2.js","sources":["../../../../../../packages/components/watermark/src/watermark.vue"],"sourcesContent":["<template>\n <div ref=\"containerRef\" :style=\"[style]\">\n <slot />\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n onBeforeUnmount,\n onMounted,\n ref,\n shallowRef,\n watch,\n} from 'vue'\nimport { useMutationObserver } from '@vueuse/core'\nimport { watermarkProps } from './watermark'\nimport { getPixelRatio, getStyleStr, reRendering } from './utils'\nimport useClips, { FontGap } from './useClips'\nimport type { WatermarkProps } from './watermark'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n name: 'ElWatermark',\n})\n\nconst style: CSSProperties = {\n position: 'relative',\n}\n\nconst props = defineProps(watermarkProps)\nconst color = computed(() => props.font?.color ?? 'rgba(0,0,0,.15)')\nconst fontSize = computed(() => props.font?.fontSize ?? 16)\nconst fontWeight = computed(() => props.font?.fontWeight ?? 'normal')\nconst fontStyle = computed(() => props.font?.fontStyle ?? 'normal')\nconst fontFamily = computed(() => props.font?.fontFamily ?? 'sans-serif')\nconst textAlign = computed(() => props.font?.textAlign ?? 'center')\nconst textBaseline = computed(() => props.font?.textBaseline ?? 'top')\n\nconst gapX = computed(() => props.gap[0])\nconst gapY = computed(() => props.gap[1])\nconst gapXCenter = computed(() => gapX.value / 2)\nconst gapYCenter = computed(() => gapY.value / 2)\nconst offsetLeft = computed(() => props.offset?.[0] ?? gapXCenter.value)\nconst offsetTop = computed(() => props.offset?.[1] ?? gapYCenter.value)\n\nconst getMarkStyle = () => {\n const markStyle: CSSProperties = {\n zIndex: props.zIndex,\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n pointerEvents: 'none',\n backgroundRepeat: 'repeat',\n }\n\n /** Calculate the style of the offset */\n let positionLeft = offsetLeft.value - gapXCenter.value\n let positionTop = offsetTop.value - gapYCenter.value\n if (positionLeft > 0) {\n markStyle.left = `${positionLeft}px`\n markStyle.width = `calc(100% - ${positionLeft}px)`\n positionLeft = 0\n }\n if (positionTop > 0) {\n markStyle.top = `${positionTop}px`\n markStyle.height = `calc(100% - ${positionTop}px)`\n positionTop = 0\n }\n markStyle.backgroundPosition = `${positionLeft}px ${positionTop}px`\n\n return markStyle\n}\n\nconst containerRef = shallowRef<HTMLDivElement | null>(null)\nconst watermarkRef = shallowRef<HTMLDivElement>()\nconst stopObservation = ref(false)\n\nconst destroyWatermark = () => {\n if (watermarkRef.value) {\n watermarkRef.value.remove()\n watermarkRef.value = undefined\n }\n}\nconst appendWatermark = (base64Url: string, markWidth: number) => {\n if (containerRef.value && watermarkRef.value) {\n stopObservation.value = true\n watermarkRef.value.setAttribute(\n 'style',\n getStyleStr({\n ...getMarkStyle(),\n backgroundImage: `url('${base64Url}')`,\n backgroundSize: `${Math.floor(markWidth)}px`,\n })\n )\n containerRef.value?.append(watermarkRef.value)\n // Delayed execution\n setTimeout(() => {\n stopObservation.value = false\n })\n }\n}\n\n/**\n * Get the width and height of the watermark. The default values are as follows\n * Image: [120, 64]; Content: It's calculated by content;\n */\nconst getMarkSize = (ctx: CanvasRenderingContext2D) => {\n let defaultWidth = 120\n let defaultHeight = 64\n const image = props.image\n const content = props.content\n const width = props.width\n const height = props.height\n if (!image && ctx.measureText) {\n ctx.font = `${Number(fontSize.value)}px ${fontFamily.value}`\n const contents = Array.isArray(content) ? content : [content]\n const sizes = contents.map((item) => {\n const metrics = ctx.measureText(item!)\n\n return [\n metrics.width,\n metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent,\n ]\n })\n defaultWidth = Math.ceil(Math.max(...sizes.map((size) => size[0])))\n defaultHeight =\n Math.ceil(Math.max(...sizes.map((size) => size[1]))) * contents.length +\n (contents.length - 1) * FontGap\n }\n return [width ?? defaultWidth, height ?? defaultHeight] as const\n}\n\nconst getClips = useClips()\n\nconst renderWatermark = () => {\n const canvas = document.createElement('canvas')\n const ctx = canvas.getContext('2d')\n const image = props.image\n const content = props.content\n const rotate = props.rotate\n\n if (ctx) {\n if (!watermarkRef.value) {\n watermarkRef.value = document.createElement('div')\n }\n\n const ratio = getPixelRatio()\n const [markWidth, markHeight] = getMarkSize(ctx)\n\n const drawCanvas = (\n drawContent?: NonNullable<WatermarkProps['content']> | HTMLImageElement\n ) => {\n const [textClips, clipWidth] = getClips(\n drawContent || '',\n rotate,\n ratio,\n markWidth,\n markHeight,\n {\n color: color.value,\n fontSize: fontSize.value,\n fontStyle: fontStyle.value,\n fontWeight: fontWeight.value,\n fontFamily: fontFamily.value,\n textAlign: textAlign.value,\n textBaseline: textBaseline.value,\n },\n gapX.value,\n gapY.value\n )\n\n appendWatermark(textClips, clipWidth)\n }\n\n if (image) {\n const img = new Image()\n img.onload = () => {\n drawCanvas(img)\n }\n img.onerror = () => {\n drawCanvas(content)\n }\n img.crossOrigin = 'anonymous'\n img.referrerPolicy = 'no-referrer'\n img.src = image\n } else {\n drawCanvas(content)\n }\n }\n}\n\nonMounted(() => {\n renderWatermark()\n})\n\nwatch(\n () => props,\n () => {\n renderWatermark()\n },\n {\n deep: true,\n flush: 'post',\n }\n)\n\nonBeforeUnmount(() => {\n destroyWatermark()\n})\n\nconst onMutate = (mutations: MutationRecord[]) => {\n if (stopObservation.value) {\n return\n }\n mutations.forEach((mutation) => {\n if (reRendering(mutation, watermarkRef.value)) {\n destroyWatermark()\n renderWatermark()\n }\n })\n}\n\nuseMutationObserver(containerRef, onMutate, {\n attributes: true,\n})\n</script>\n"],"names":["computed","shallowRef","ref","getStyleStr","FontGap","useClips","getPixelRatio"],"mappings":"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"}
|
package/lib/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const version = "0.0.
|
|
1
|
+
export declare const version = "0.0.20231030";
|
package/lib/version.js
CHANGED
package/lib/version.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.js","sources":["../../../packages/element-plus/version.ts"],"sourcesContent":["export const version = '0.0.
|
|
1
|
+
{"version":3,"file":"version.js","sources":["../../../packages/element-plus/version.ts"],"sourcesContent":["export const version = '0.0.20231030'\n"],"names":[],"mappings":";;;;AAAY,MAAC,OAAO,GAAG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@element-plus/nightly",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.20231030",
|
|
4
4
|
"description": "A Component Library for Vue 3",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"element-plus",
|
|
@@ -112,5 +112,5 @@
|
|
|
112
112
|
"not ie 11",
|
|
113
113
|
"not op_mini all"
|
|
114
114
|
],
|
|
115
|
-
"gitHead": "
|
|
115
|
+
"gitHead": "c56968895bf7d4670efd8c6e54de292a5ce51951"
|
|
116
116
|
}
|