@element-plus/nightly 0.0.20240826 → 0.0.20240828

package/lib/components/table/src/table-column/index.js

@@ -110,7 +110,8 @@ var ElTableColumn = vue.defineComponent({
       columnIndex > -1 && owner.value.store.commit("insertColumn", columnConfig.value, isSubColumn.value ? parent2.columnConfig.value : null, updateColumnOrder);
     });
     vue.onBeforeUnmount(() => {
-      const columnIndex = columnConfig.value.getColumnIndex();
+      const getColumnIndex = columnConfig.value.getColumnIndex;
+      const columnIndex = getColumnIndex ? getColumnIndex() : -1;
       columnIndex > -1 && owner.value.store.commit("removeColumn", columnConfig.value, isSubColumn.value ? parent.columnConfig.value : null, updateColumnOrder);
     });
     instance.columnId = columnId.value;

package/lib/components/table/src/table-column/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../../packages/components/table/src/table-column/index.ts"],"sourcesContent":["// @ts-nocheck\nimport {\n  Fragment,\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  h,\n  onBeforeMount,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n} from 'vue'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport { isString, isUndefined } from '@element-plus/utils'\nimport { cellStarts } from '../config'\nimport { compose, mergeOptions } from '../util'\nimport useWatcher from './watcher-helper'\nimport useRender from './render-helper'\nimport defaultProps from './defaults'\nimport type { TableColumn, TableColumnCtx } from './defaults'\n\nimport type { DefaultRow } from '../table/defaults'\n\nlet columnIdSeed = 1\n\nexport default defineComponent({\n  name: 'ElTableColumn',\n  components: {\n    ElCheckbox,\n  },\n  props: defaultProps,\n  setup(props, { slots }) {\n    const instance = getCurrentInstance() as TableColumn<DefaultRow>\n    const columnConfig = ref<Partial<TableColumnCtx<DefaultRow>>>({})\n    const owner = computed(() => {\n      let parent = instance.parent as any\n      while (parent && !parent.tableId) {\n        parent = parent.parent\n      }\n      return parent\n    })\n\n    const { registerNormalWatchers, registerComplexWatchers } = useWatcher(\n      owner,\n      props\n    )\n    const {\n      columnId,\n      isSubColumn,\n      realHeaderAlign,\n      columnOrTableParent,\n      setColumnWidth,\n      setColumnForcedProps,\n      setColumnRenders,\n      getPropsData,\n      getColumnElIndex,\n      realAlign,\n      updateColumnOrder,\n    } = useRender(props as unknown as TableColumnCtx<unknown>, slots, owner)\n\n    const parent = columnOrTableParent.value\n    columnId.value = `${\n      parent.tableId || parent.columnId\n    }_column_${columnIdSeed++}`\n    onBeforeMount(() => {\n      isSubColumn.value = owner.value !== parent\n\n      const type = props.type || 'default'\n      const sortable = props.sortable === '' ? true : props.sortable\n      const showOverflowTooltip = isUndefined(props.showOverflowTooltip)\n        ? parent.props.showOverflowTooltip\n        : props.showOverflowTooltip\n      const defaults = {\n        ...cellStarts[type],\n        id: columnId.value,\n        type,\n        property: props.prop || props.property,\n        align: realAlign,\n        headerAlign: realHeaderAlign,\n        showOverflowTooltip,\n        // filter 相关属性\n        filterable: props.filters || props.filterMethod,\n        filteredValue: [],\n        filterPlacement: '',\n        filterClassName: '',\n        isColumnGroup: false,\n        isSubColumn: false,\n        filterOpened: false,\n        // sort 相关属性\n        sortable,\n        // index 列\n        index: props.index,\n        // <el-table-column key=\"xxx\" />\n        rawColumnKey: instance.vnode.key,\n      }\n\n      const basicProps = [\n        'columnKey',\n        'label',\n        'className',\n        'labelClassName',\n        'type',\n        'renderHeader',\n        'formatter',\n        'fixed',\n        'resizable',\n      ]\n      const sortProps = ['sortMethod', 'sortBy', 'sortOrders']\n      const selectProps = ['selectable', 'reserveSelection']\n      const filterProps = [\n        'filterMethod',\n        'filters',\n        'filterMultiple',\n        'filterOpened',\n        'filteredValue',\n        'filterPlacement',\n        'filterClassName',\n      ]\n\n      let column = getPropsData(basicProps, sortProps, selectProps, filterProps)\n\n      column = mergeOptions(defaults, column)\n      // 注意 compose 中函数执行的顺序是从右到左\n      const chains = compose(\n        setColumnRenders,\n        setColumnWidth,\n        setColumnForcedProps\n      )\n      column = chains(column)\n      columnConfig.value = column\n\n      // 注册 watcher\n      registerNormalWatchers()\n      registerComplexWatchers()\n    })\n    onMounted(() => {\n      const parent = columnOrTableParent.value\n      const children = isSubColumn.value\n        ? parent.vnode.el.children\n        : parent.refs.hiddenColumns?.children\n      const getColumnIndex = () =>\n        getColumnElIndex(children || [], instance.vnode.el)\n      columnConfig.value.getColumnIndex = getColumnIndex\n      const columnIndex = getColumnIndex()\n      columnIndex > -1 &&\n        owner.value.store.commit(\n          'insertColumn',\n          columnConfig.value,\n          isSubColumn.value ? parent.columnConfig.value : null,\n          updateColumnOrder\n        )\n    })\n    onBeforeUnmount(() => {\n      const columnIndex = columnConfig.value.getColumnIndex()\n      columnIndex > -1 &&\n        owner.value.store.commit(\n          'removeColumn',\n          columnConfig.value,\n          isSubColumn.value ? parent.columnConfig.value : null,\n          updateColumnOrder\n        )\n    })\n    instance.columnId = columnId.value\n\n    instance.columnConfig = columnConfig\n    return\n  },\n  render() {\n    try {\n      const renderDefault = this.$slots.default?.({\n        row: {},\n        column: {},\n        $index: -1,\n      })\n      const children = []\n      if (Array.isArray(renderDefault)) {\n        for (const childNode of renderDefault) {\n          if (\n            childNode.type?.name === 'ElTableColumn' ||\n            childNode.shapeFlag & 2\n          ) {\n            children.push(childNode)\n          } else if (\n            childNode.type === Fragment &&\n            Array.isArray(childNode.children)\n          ) {\n            childNode.children.forEach((vnode) => {\n              // No rendering when vnode is dynamic slot or text\n              if (vnode?.patchFlag !== 1024 && !isString(vnode?.children)) {\n                children.push(vnode)\n              }\n            })\n          }\n        }\n      }\n      const vnode = h('div', children)\n      return vnode\n    } catch {\n      return h('div', [])\n    }\n  },\n})\n"],"names":["defineComponent","ElCheckbox","defaultProps","getCurrentInstance","ref","computed","useWatcher","useRender","onBeforeMount","isUndefined","cellStarts","mergeOptions","compose","onMounted","onBeforeUnmount","Fragment","isString","h"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../../../packages/components/table/src/table-column/index.ts"],"sourcesContent":["// @ts-nocheck\nimport {\n  Fragment,\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  h,\n  onBeforeMount,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n} from 'vue'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport { isString, isUndefined } from '@element-plus/utils'\nimport { cellStarts } from '../config'\nimport { compose, mergeOptions } from '../util'\nimport useWatcher from './watcher-helper'\nimport useRender from './render-helper'\nimport defaultProps from './defaults'\nimport type { TableColumn, TableColumnCtx } from './defaults'\n\nimport type { DefaultRow } from '../table/defaults'\n\nlet columnIdSeed = 1\n\nexport default defineComponent({\n  name: 'ElTableColumn',\n  components: {\n    ElCheckbox,\n  },\n  props: defaultProps,\n  setup(props, { slots }) {\n    const instance = getCurrentInstance() as TableColumn<DefaultRow>\n    const columnConfig = ref<Partial<TableColumnCtx<DefaultRow>>>({})\n    const owner = computed(() => {\n      let parent = instance.parent as any\n      while (parent && !parent.tableId) {\n        parent = parent.parent\n      }\n      return parent\n    })\n\n    const { registerNormalWatchers, registerComplexWatchers } = useWatcher(\n      owner,\n      props\n    )\n    const {\n      columnId,\n      isSubColumn,\n      realHeaderAlign,\n      columnOrTableParent,\n      setColumnWidth,\n      setColumnForcedProps,\n      setColumnRenders,\n      getPropsData,\n      getColumnElIndex,\n      realAlign,\n      updateColumnOrder,\n    } = useRender(props as unknown as TableColumnCtx<unknown>, slots, owner)\n\n    const parent = columnOrTableParent.value\n    columnId.value = `${\n      parent.tableId || parent.columnId\n    }_column_${columnIdSeed++}`\n    onBeforeMount(() => {\n      isSubColumn.value = owner.value !== parent\n\n      const type = props.type || 'default'\n      const sortable = props.sortable === '' ? true : props.sortable\n      const showOverflowTooltip = isUndefined(props.showOverflowTooltip)\n        ? parent.props.showOverflowTooltip\n        : props.showOverflowTooltip\n      const defaults = {\n        ...cellStarts[type],\n        id: columnId.value,\n        type,\n        property: props.prop || props.property,\n        align: realAlign,\n        headerAlign: realHeaderAlign,\n        showOverflowTooltip,\n        // filter 相关属性\n        filterable: props.filters || props.filterMethod,\n        filteredValue: [],\n        filterPlacement: '',\n        filterClassName: '',\n        isColumnGroup: false,\n        isSubColumn: false,\n        filterOpened: false,\n        // sort 相关属性\n        sortable,\n        // index 列\n        index: props.index,\n        // <el-table-column key=\"xxx\" />\n        rawColumnKey: instance.vnode.key,\n      }\n\n      const basicProps = [\n        'columnKey',\n        'label',\n        'className',\n        'labelClassName',\n        'type',\n        'renderHeader',\n        'formatter',\n        'fixed',\n        'resizable',\n      ]\n      const sortProps = ['sortMethod', 'sortBy', 'sortOrders']\n      const selectProps = ['selectable', 'reserveSelection']\n      const filterProps = [\n        'filterMethod',\n        'filters',\n        'filterMultiple',\n        'filterOpened',\n        'filteredValue',\n        'filterPlacement',\n        'filterClassName',\n      ]\n\n      let column = getPropsData(basicProps, sortProps, selectProps, filterProps)\n\n      column = mergeOptions(defaults, column)\n      // 注意 compose 中函数执行的顺序是从右到左\n      const chains = compose(\n        setColumnRenders,\n        setColumnWidth,\n        setColumnForcedProps\n      )\n      column = chains(column)\n      columnConfig.value = column\n\n      // 注册 watcher\n      registerNormalWatchers()\n      registerComplexWatchers()\n    })\n    onMounted(() => {\n      const parent = columnOrTableParent.value\n      const children = isSubColumn.value\n        ? parent.vnode.el.children\n        : parent.refs.hiddenColumns?.children\n      const getColumnIndex = () =>\n        getColumnElIndex(children || [], instance.vnode.el)\n      columnConfig.value.getColumnIndex = getColumnIndex\n      const columnIndex = getColumnIndex()\n      columnIndex > -1 &&\n        owner.value.store.commit(\n          'insertColumn',\n          columnConfig.value,\n          isSubColumn.value ? parent.columnConfig.value : null,\n          updateColumnOrder\n        )\n    })\n    onBeforeUnmount(() => {\n      const getColumnIndex = columnConfig.value.getColumnIndex\n      const columnIndex = getColumnIndex ? getColumnIndex() : -1\n      columnIndex > -1 &&\n        owner.value.store.commit(\n          'removeColumn',\n          columnConfig.value,\n          isSubColumn.value ? parent.columnConfig.value : null,\n          updateColumnOrder\n        )\n    })\n    instance.columnId = columnId.value\n\n    instance.columnConfig = columnConfig\n    return\n  },\n  render() {\n    try {\n      const renderDefault = this.$slots.default?.({\n        row: {},\n        column: {},\n        $index: -1,\n      })\n      const children = []\n      if (Array.isArray(renderDefault)) {\n        for (const childNode of renderDefault) {\n          if (\n            childNode.type?.name === 'ElTableColumn' ||\n            childNode.shapeFlag & 2\n          ) {\n            children.push(childNode)\n          } else if (\n            childNode.type === Fragment &&\n            Array.isArray(childNode.children)\n          ) {\n            childNode.children.forEach((vnode) => {\n              // No rendering when vnode is dynamic slot or text\n              if (vnode?.patchFlag !== 1024 && !isString(vnode?.children)) {\n                children.push(vnode)\n              }\n            })\n          }\n        }\n      }\n      const vnode = h('div', children)\n      return vnode\n    } catch {\n      return h('div', [])\n    }\n  },\n})\n"],"names":["defineComponent","ElCheckbox","defaultProps","getCurrentInstance","ref","computed","useWatcher","useRender","onBeforeMount","isUndefined","cellStarts","mergeOptions","compose","onMounted","onBeforeUnmount","Fragment","isString","h"],"mappings":"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"}

package/lib/components/tabs/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('../../utils/index.js');
 var tabs = require('./src/tabs.js');
 var tabPane$1 = require('./src/tab-pane2.js');
-var tabBar = require('./src/tab-bar2.js');
+var tabBar = require('./src/tab-bar.js');
 var tabNav = require('./src/tab-nav.js');
 var tabPane = require('./src/tab-pane.js');
 var constants = require('./src/constants.js');

package/lib/components/tabs/src/tab-bar.js

@@ -2,82 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
-var core = require('@vueuse/core');
 require('../../../utils/index.js');
-require('../../../hooks/index.js');
-var constants = require('./constants.js');
-var tabBar = require('./tab-bar2.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
-var error = require('../../../utils/error.js');
-var index = require('../../../hooks/use-namespace/index.js');
-var strings = require('../../../utils/strings.js');
+var runtime = require('../../../utils/vue/props/runtime.js');
+var typescript = require('../../../utils/typescript.js');
 
-const COMPONENT_NAME = "ElTabBar";
-const __default__ = vue.defineComponent({
-  name: COMPONENT_NAME
-});
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...__default__,
-  props: tabBar.tabBarProps,
-  setup(__props, { expose }) {
-    const props = __props;
-    const instance = vue.getCurrentInstance();
-    const rootTabs = vue.inject(constants.tabsRootContextKey);
-    if (!rootTabs)
-      error.throwError(COMPONENT_NAME, "<el-tabs><el-tab-bar /></el-tabs>");
-    const ns = index.useNamespace("tabs");
-    const barRef = vue.ref();
-    const barStyle = vue.ref();
-    const getBarStyle = () => {
-      let offset = 0;
-      let tabSize = 0;
-      const sizeName = ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "width" : "height";
-      const sizeDir = sizeName === "width" ? "x" : "y";
-      const position = sizeDir === "x" ? "left" : "top";
-      props.tabs.every((tab) => {
-        var _a, _b;
-        const $el = (_b = (_a = instance.parent) == null ? void 0 : _a.refs) == null ? void 0 : _b[`tab-${tab.uid}`];
-        if (!$el)
-          return false;
-        if (!tab.active) {
-          return true;
-        }
-        offset = $el[`offset${strings.capitalize(position)}`];
-        tabSize = $el[`client${strings.capitalize(sizeName)}`];
-        const tabStyles = window.getComputedStyle($el);
-        if (sizeName === "width") {
-          tabSize -= Number.parseFloat(tabStyles.paddingLeft) + Number.parseFloat(tabStyles.paddingRight);
-          offset += Number.parseFloat(tabStyles.paddingLeft);
-        }
-        return false;
-      });
-      return {
-        [sizeName]: `${tabSize}px`,
-        transform: `translate${strings.capitalize(sizeDir)}(${offset}px)`
-      };
-    };
-    const update = () => barStyle.value = getBarStyle();
-    vue.watch(() => props.tabs, async () => {
-      await vue.nextTick();
-      update();
-    }, { immediate: true });
-    core.useResizeObserver(barRef, () => update());
-    expose({
-      ref: barRef,
-      update
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
-        ref_key: "barRef",
-        ref: barRef,
-        class: vue.normalizeClass([vue.unref(ns).e("active-bar"), vue.unref(ns).is(vue.unref(rootTabs).props.tabPosition)]),
-        style: vue.normalizeStyle(barStyle.value)
-      }, null, 6);
-    };
+const tabBarProps = runtime.buildProps({
+  tabs: {
+    type: runtime.definePropType(Array),
+    default: () => typescript.mutable([])
   }
 });
-var TabBar = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "tab-bar.vue"]]);
 
-exports["default"] = TabBar;
+exports.tabBarProps = tabBarProps;
 //# sourceMappingURL=tab-bar.js.map

package/lib/components/tabs/src/tab-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-bar.js","sources":["../../../../../../packages/components/tabs/src/tab-bar.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"barRef\"\n    :class=\"[ns.e('active-bar'), ns.is(rootTabs.props.tabPosition)]\"\n    :style=\"barStyle\"\n  />\n</template>\n\n<script lang=\"ts\" setup>\nimport { getCurrentInstance, inject, nextTick, ref, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { capitalize, throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { tabsRootContextKey } from './constants'\nimport { tabBarProps } from './tab-bar'\n\nimport type { CSSProperties } from 'vue'\n\nconst COMPONENT_NAME = 'ElTabBar'\ndefineOptions({\n  name: COMPONENT_NAME,\n})\nconst props = defineProps(tabBarProps)\n\nconst instance = getCurrentInstance()!\nconst rootTabs = inject(tabsRootContextKey)\nif (!rootTabs) throwError(COMPONENT_NAME, '<el-tabs><el-tab-bar /></el-tabs>')\n\nconst ns = useNamespace('tabs')\n\nconst barRef = ref<HTMLDivElement>()\nconst barStyle = ref<CSSProperties>()\n\nconst getBarStyle = (): CSSProperties => {\n  let offset = 0\n  let tabSize = 0\n\n  const sizeName = ['top', 'bottom'].includes(rootTabs.props.tabPosition)\n    ? 'width'\n    : 'height'\n  const sizeDir = sizeName === 'width' ? 'x' : 'y'\n  const position = sizeDir === 'x' ? 'left' : 'top'\n\n  props.tabs.every((tab) => {\n    const $el = instance.parent?.refs?.[`tab-${tab.uid}`] as HTMLElement\n    if (!$el) return false\n\n    if (!tab.active) {\n      return true\n    }\n\n    offset = $el[`offset${capitalize(position)}`]\n    tabSize = $el[`client${capitalize(sizeName)}`]\n\n    const tabStyles = window.getComputedStyle($el)\n\n    if (sizeName === 'width') {\n      tabSize -=\n        Number.parseFloat(tabStyles.paddingLeft) +\n        Number.parseFloat(tabStyles.paddingRight)\n      offset += Number.parseFloat(tabStyles.paddingLeft)\n    }\n    return false\n  })\n\n  return {\n    [sizeName]: `${tabSize}px`,\n    transform: `translate${capitalize(sizeDir)}(${offset}px)`,\n  }\n}\n\nconst update = () => (barStyle.value = getBarStyle())\n\nwatch(\n  () => props.tabs,\n  async () => {\n    await nextTick()\n    update()\n  },\n  { immediate: true }\n)\nuseResizeObserver(barRef, () => update())\n\ndefineExpose({\n  /** @description tab root html element */\n  ref: barRef,\n  /** @description method to manually update tab bar style */\n  update,\n})\n</script>\n"],"names":["getCurrentInstance","inject","tabsRootContextKey","throwError","useNamespace","ref","capitalize","watch","nextTick","useResizeObserver"],"mappings":"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"}
+{"version":3,"file":"tab-bar.js","sources":["../../../../../../packages/components/tabs/src/tab-bar.ts"],"sourcesContent":["import { buildProps, definePropType, mutable } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type { TabsPaneContext } from './constants'\nimport type TabBar from './tab-bar.vue'\n\nexport const tabBarProps = buildProps({\n  tabs: {\n    type: definePropType<TabsPaneContext[]>(Array),\n    default: () => mutable([] as const),\n  },\n} as const)\n\nexport type TabBarProps = ExtractPropTypes<typeof tabBarProps>\nexport type TabBarInstance = InstanceType<typeof TabBar>\n"],"names":["buildProps","definePropType","mutable"],"mappings":";;;;;;;;AACY,MAAC,WAAW,GAAGA,kBAAU,CAAC;AACtC,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAEC,sBAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAMC,kBAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,CAAC;;;;"}

package/lib/components/tabs/src/tab-bar2.js

@@ -2,16 +2,82 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var vue = require('vue');
+var core = require('@vueuse/core');
 require('../../../utils/index.js');
-var runtime = require('../../../utils/vue/props/runtime.js');
-var typescript = require('../../../utils/typescript.js');
+require('../../../hooks/index.js');
+var constants = require('./constants.js');
+var tabBar = require('./tab-bar.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var error = require('../../../utils/error.js');
+var index = require('../../../hooks/use-namespace/index.js');
+var strings = require('../../../utils/strings.js');
 
-const tabBarProps = runtime.buildProps({
-  tabs: {
-    type: runtime.definePropType(Array),
-    default: () => typescript.mutable([])
+const COMPONENT_NAME = "ElTabBar";
+const __default__ = vue.defineComponent({
+  name: COMPONENT_NAME
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: tabBar.tabBarProps,
+  setup(__props, { expose }) {
+    const props = __props;
+    const instance = vue.getCurrentInstance();
+    const rootTabs = vue.inject(constants.tabsRootContextKey);
+    if (!rootTabs)
+      error.throwError(COMPONENT_NAME, "<el-tabs><el-tab-bar /></el-tabs>");
+    const ns = index.useNamespace("tabs");
+    const barRef = vue.ref();
+    const barStyle = vue.ref();
+    const getBarStyle = () => {
+      let offset = 0;
+      let tabSize = 0;
+      const sizeName = ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "width" : "height";
+      const sizeDir = sizeName === "width" ? "x" : "y";
+      const position = sizeDir === "x" ? "left" : "top";
+      props.tabs.every((tab) => {
+        var _a, _b;
+        const $el = (_b = (_a = instance.parent) == null ? void 0 : _a.refs) == null ? void 0 : _b[`tab-${tab.uid}`];
+        if (!$el)
+          return false;
+        if (!tab.active) {
+          return true;
+        }
+        offset = $el[`offset${strings.capitalize(position)}`];
+        tabSize = $el[`client${strings.capitalize(sizeName)}`];
+        const tabStyles = window.getComputedStyle($el);
+        if (sizeName === "width") {
+          tabSize -= Number.parseFloat(tabStyles.paddingLeft) + Number.parseFloat(tabStyles.paddingRight);
+          offset += Number.parseFloat(tabStyles.paddingLeft);
+        }
+        return false;
+      });
+      return {
+        [sizeName]: `${tabSize}px`,
+        transform: `translate${strings.capitalize(sizeDir)}(${offset}px)`
+      };
+    };
+    const update = () => barStyle.value = getBarStyle();
+    vue.watch(() => props.tabs, async () => {
+      await vue.nextTick();
+      update();
+    }, { immediate: true });
+    core.useResizeObserver(barRef, () => update());
+    expose({
+      ref: barRef,
+      update
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "barRef",
+        ref: barRef,
+        class: vue.normalizeClass([vue.unref(ns).e("active-bar"), vue.unref(ns).is(vue.unref(rootTabs).props.tabPosition)]),
+        style: vue.normalizeStyle(barStyle.value)
+      }, null, 6);
+    };
   }
 });
+var TabBar = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "tab-bar.vue"]]);
 
-exports.tabBarProps = tabBarProps;
+exports["default"] = TabBar;
 //# sourceMappingURL=tab-bar2.js.map

package/lib/components/tabs/src/tab-bar2.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-bar2.js","sources":["../../../../../../packages/components/tabs/src/tab-bar.ts"],"sourcesContent":["import { buildProps, definePropType, mutable } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type { TabsPaneContext } from './constants'\nimport type TabBar from './tab-bar.vue'\n\nexport const tabBarProps = buildProps({\n  tabs: {\n    type: definePropType<TabsPaneContext[]>(Array),\n    default: () => mutable([] as const),\n  },\n} as const)\n\nexport type TabBarProps = ExtractPropTypes<typeof tabBarProps>\nexport type TabBarInstance = InstanceType<typeof TabBar>\n"],"names":["buildProps","definePropType","mutable"],"mappings":";;;;;;;;AACY,MAAC,WAAW,GAAGA,kBAAU,CAAC;AACtC,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAEC,sBAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAMC,kBAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,CAAC;;;;"}
+{"version":3,"file":"tab-bar2.js","sources":["../../../../../../packages/components/tabs/src/tab-bar.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"barRef\"\n    :class=\"[ns.e('active-bar'), ns.is(rootTabs.props.tabPosition)]\"\n    :style=\"barStyle\"\n  />\n</template>\n\n<script lang=\"ts\" setup>\nimport { getCurrentInstance, inject, nextTick, ref, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { capitalize, throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { tabsRootContextKey } from './constants'\nimport { tabBarProps } from './tab-bar'\n\nimport type { CSSProperties } from 'vue'\n\nconst COMPONENT_NAME = 'ElTabBar'\ndefineOptions({\n  name: COMPONENT_NAME,\n})\nconst props = defineProps(tabBarProps)\n\nconst instance = getCurrentInstance()!\nconst rootTabs = inject(tabsRootContextKey)\nif (!rootTabs) throwError(COMPONENT_NAME, '<el-tabs><el-tab-bar /></el-tabs>')\n\nconst ns = useNamespace('tabs')\n\nconst barRef = ref<HTMLDivElement>()\nconst barStyle = ref<CSSProperties>()\n\nconst getBarStyle = (): CSSProperties => {\n  let offset = 0\n  let tabSize = 0\n\n  const sizeName = ['top', 'bottom'].includes(rootTabs.props.tabPosition)\n    ? 'width'\n    : 'height'\n  const sizeDir = sizeName === 'width' ? 'x' : 'y'\n  const position = sizeDir === 'x' ? 'left' : 'top'\n\n  props.tabs.every((tab) => {\n    const $el = instance.parent?.refs?.[`tab-${tab.uid}`] as HTMLElement\n    if (!$el) return false\n\n    if (!tab.active) {\n      return true\n    }\n\n    offset = $el[`offset${capitalize(position)}`]\n    tabSize = $el[`client${capitalize(sizeName)}`]\n\n    const tabStyles = window.getComputedStyle($el)\n\n    if (sizeName === 'width') {\n      tabSize -=\n        Number.parseFloat(tabStyles.paddingLeft) +\n        Number.parseFloat(tabStyles.paddingRight)\n      offset += Number.parseFloat(tabStyles.paddingLeft)\n    }\n    return false\n  })\n\n  return {\n    [sizeName]: `${tabSize}px`,\n    transform: `translate${capitalize(sizeDir)}(${offset}px)`,\n  }\n}\n\nconst update = () => (barStyle.value = getBarStyle())\n\nwatch(\n  () => props.tabs,\n  async () => {\n    await nextTick()\n    update()\n  },\n  { immediate: true }\n)\nuseResizeObserver(barRef, () => update())\n\ndefineExpose({\n  /** @description tab root html element */\n  ref: barRef,\n  /** @description method to manually update tab bar style */\n  update,\n})\n</script>\n"],"names":["getCurrentInstance","inject","tabsRootContextKey","throwError","useNamespace","ref","capitalize","watch","nextTick","useResizeObserver"],"mappings":"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"}

package/lib/components/tabs/src/tab-nav.js

@@ -9,7 +9,7 @@ require('../../../constants/index.js');
 var index$1 = require('../../icon/index.js');
 var iconsVue = require('@element-plus/icons-vue');
 require('../../../hooks/index.js');
-var tabBar = require('./tab-bar.js');
+var tabBar = require('./tab-bar2.js');
 var constants = require('./constants.js');
 var runtime = require('../../../utils/vue/props/runtime.js');
 var typescript = require('../../../utils/typescript.js');

package/lib/components/tag/src/tag2.js

@@ -41,6 +41,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const handleClick = (event) => {
       emit("click", event);
     };
+    const handleVNodeMounted = (vnode) => {
+      vnode.component.subTree.component.bum = null;
+    };
     return (_ctx, _cache) => {
       return _ctx.disableTransitions ? (vue.openBlock(), vue.createElementBlock("span", {
         key: 0,
@@ -66,7 +69,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       ], 6)) : (vue.openBlock(), vue.createBlock(vue.Transition, {
         key: 1,
         name: `${vue.unref(ns).namespace.value}-zoom-in-center`,
-        appear: ""
+        appear: "",
+        onVnodeMounted: handleVNodeMounted
       }, {
         default: vue.withCtx(() => [
           vue.createElementVNode("span", {

package/lib/components/tag/src/tag2.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag2.js","sources":["../../../../../../packages/components/tag/src/tag.vue"],"sourcesContent":["<template>\n  <span\n    v-if=\"disableTransitions\"\n    :class=\"containerKls\"\n    :style=\"{ backgroundColor: color }\"\n    @click=\"handleClick\"\n  >\n    <span :class=\"ns.e('content')\">\n      <slot />\n    </span>\n    <el-icon v-if=\"closable\" :class=\"ns.e('close')\" @click.stop=\"handleClose\">\n      <Close />\n    </el-icon>\n  </span>\n  <transition v-else :name=\"`${ns.namespace.value}-zoom-in-center`\" appear>\n    <span\n      :class=\"containerKls\"\n      :style=\"{ backgroundColor: color }\"\n      @click=\"handleClick\"\n    >\n      <span :class=\"ns.e('content')\">\n        <slot />\n      </span>\n      <el-icon v-if=\"closable\" :class=\"ns.e('close')\" @click.stop=\"handleClose\">\n        <Close />\n      </el-icon>\n    </span>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport ElIcon from '@element-plus/components/icon'\nimport { Close } from '@element-plus/icons-vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useFormSize } from '@element-plus/components/form'\n\nimport { tagEmits, tagProps } from './tag'\n\ndefineOptions({\n  name: 'ElTag',\n})\nconst props = defineProps(tagProps)\nconst emit = defineEmits(tagEmits)\n\nconst tagSize = useFormSize()\nconst ns = useNamespace('tag')\nconst containerKls = computed(() => {\n  const { type, hit, effect, closable, round } = props\n  return [\n    ns.b(),\n    ns.is('closable', closable),\n    ns.m(type || 'primary'),\n    ns.m(tagSize.value),\n    ns.m(effect),\n    ns.is('hit', hit),\n    ns.is('round', round),\n  ]\n})\n\n// methods\nconst handleClose = (event: MouseEvent) => {\n  emit('close', event)\n}\n\nconst handleClick = (event: MouseEvent) => {\n  emit('click', event)\n}\n</script>\n"],"names":["useFormSize","useNamespace","computed"],"mappings":";;;;;;;;;;;;;;uCAuCc,CAAA;AAAA,EACZ,IAAM,EAAA,OAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAIA,IAAA,MAAM,UAAUA,8BAAY,EAAA,CAAA;AAC5B,IAAM,MAAA,EAAA,GAAKC,mBAAa,KAAK,CAAA,CAAA;AAC7B,IAAM,MAAA,YAAA,GAAeC,aAAS,MAAM;AAClC,MAAA,MAAM,EAAE,IAAA,EAAM,GAAK,EAAA,MAAA,EAAQ,UAAU,KAAU,EAAA,GAAA,KAAA,CAAA;AAC/C,MAAO,OAAA;AAAA,QACL,GAAG,CAAE,EAAA;AAAA,QACL,EAAA,CAAG,EAAG,CAAA,UAAA,EAAY,QAAQ,CAAA;AAAA,QAC1B,EAAA,CAAG,CAAE,CAAA,IAAA,IAAQ,SAAS,CAAA;AAAA,QACtB,EAAA,CAAG,CAAE,CAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,QAClB,EAAA,CAAG,EAAE,MAAM,CAAA;AAAA,QACX,EAAA,CAAG,EAAG,CAAA,KAAA,EAAO,GAAG,CAAA;AAAA,QAChB,EAAA,CAAG,EAAG,CAAA,OAAA,EAAS,KAAK,CAAA;AAAA,OACtB,CAAA;AAAA,KACD,CAAA,CAAA;AAGD,IAAM,MAAA,WAAA,GAAc,CAAC,KAAsB,KAAA;AACzC,MAAA,IAAA,CAAK,SAAS,KAAK,CAAA,CAAA;AAAA,KACrB,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,KAAsB,KAAA;AACzC,MAAA,IAAA,CAAK,SAAS,KAAK,CAAA,CAAA;AAAA,KACrB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"tag2.js","sources":["../../../../../../packages/components/tag/src/tag.vue"],"sourcesContent":["<template>\n  <span\n    v-if=\"disableTransitions\"\n    :class=\"containerKls\"\n    :style=\"{ backgroundColor: color }\"\n    @click=\"handleClick\"\n  >\n    <span :class=\"ns.e('content')\">\n      <slot />\n    </span>\n    <el-icon v-if=\"closable\" :class=\"ns.e('close')\" @click.stop=\"handleClose\">\n      <Close />\n    </el-icon>\n  </span>\n  <transition\n    v-else\n    :name=\"`${ns.namespace.value}-zoom-in-center`\"\n    appear\n    @vue:mounted=\"handleVNodeMounted\"\n  >\n    <span\n      :class=\"containerKls\"\n      :style=\"{ backgroundColor: color }\"\n      @click=\"handleClick\"\n    >\n      <span :class=\"ns.e('content')\">\n        <slot />\n      </span>\n      <el-icon v-if=\"closable\" :class=\"ns.e('close')\" @click.stop=\"handleClose\">\n        <Close />\n      </el-icon>\n    </span>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport ElIcon from '@element-plus/components/icon'\nimport { Close } from '@element-plus/icons-vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useFormSize } from '@element-plus/components/form'\n\nimport { tagEmits, tagProps } from './tag'\nimport type { VNode } from 'vue'\n\ndefineOptions({\n  name: 'ElTag',\n})\nconst props = defineProps(tagProps)\nconst emit = defineEmits(tagEmits)\n\nconst tagSize = useFormSize()\nconst ns = useNamespace('tag')\nconst containerKls = computed(() => {\n  const { type, hit, effect, closable, round } = props\n  return [\n    ns.b(),\n    ns.is('closable', closable),\n    ns.m(type || 'primary'),\n    ns.m(tagSize.value),\n    ns.m(effect),\n    ns.is('hit', hit),\n    ns.is('round', round),\n  ]\n})\n\n// methods\nconst handleClose = (event: MouseEvent) => {\n  emit('close', event)\n}\n\nconst handleClick = (event: MouseEvent) => {\n  emit('click', event)\n}\n\nconst handleVNodeMounted = (vnode: VNode) => {\n  // @ts-ignore\n  vnode.component.subTree.component.bum = null\n}\n</script>\n"],"names":["useFormSize","useNamespace","computed"],"mappings":";;;;;;;;;;;;;;uCA6Cc,CAAA;AAAA,EACZ,IAAM,EAAA,OAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAIA,IAAA,MAAM,UAAUA,8BAAY,EAAA,CAAA;AAC5B,IAAM,MAAA,EAAA,GAAKC,mBAAa,KAAK,CAAA,CAAA;AAC7B,IAAM,MAAA,YAAA,GAAeC,aAAS,MAAM;AAClC,MAAA,MAAM,EAAE,IAAA,EAAM,GAAK,EAAA,MAAA,EAAQ,UAAU,KAAU,EAAA,GAAA,KAAA,CAAA;AAC/C,MAAO,OAAA;AAAA,QACL,GAAG,CAAE,EAAA;AAAA,QACL,EAAA,CAAG,EAAG,CAAA,UAAA,EAAY,QAAQ,CAAA;AAAA,QAC1B,EAAA,CAAG,CAAE,CAAA,IAAA,IAAQ,SAAS,CAAA;AAAA,QACtB,EAAA,CAAG,CAAE,CAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,QAClB,EAAA,CAAG,EAAE,MAAM,CAAA;AAAA,QACX,EAAA,CAAG,EAAG,CAAA,KAAA,EAAO,GAAG,CAAA;AAAA,QAChB,EAAA,CAAG,EAAG,CAAA,OAAA,EAAS,KAAK,CAAA;AAAA,OACtB,CAAA;AAAA,KACD,CAAA,CAAA;AAGD,IAAM,MAAA,WAAA,GAAc,CAAC,KAAsB,KAAA;AACzC,MAAA,IAAA,CAAK,SAAS,KAAK,CAAA,CAAA;AAAA,KACrB,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,KAAsB,KAAA;AACzC,MAAA,IAAA,CAAK,SAAS,KAAK,CAAA,CAAA;AAAA,KACrB,CAAA;AAEA,IAAM,MAAA,kBAAA,GAAqB,CAAC,KAAiB,KAAA;AAE3C,MAAM,KAAA,CAAA,SAAA,CAAU,OAAQ,CAAA,SAAA,CAAU,GAAM,GAAA,IAAA,CAAA;AAAA,KAC1C,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/watermark/index.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('../../utils/index.js');
-var watermark$1 = require('./src/watermark.js');
-var watermark = require('./src/watermark2.js');
+var watermark$1 = require('./src/watermark2.js');
+var watermark = require('./src/watermark.js');
 var install = require('../../utils/vue/install.js');
 
 const ElWatermark = install.withInstall(watermark$1["default"]);

package/lib/components/watermark/src/watermark.js

@@ -2,217 +2,36 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
-var core = require('@vueuse/core');
-var watermark = require('./watermark2.js');
-var utils = require('./utils.js');
-var useClips = require('./useClips.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+require('../../../utils/index.js');
+var runtime = require('../../../utils/vue/props/runtime.js');
 
-const __default__ = vue.defineComponent({
-  name: "ElWatermark"
-});
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...__default__,
-  props: watermark.watermarkProps,
-  setup(__props) {
-    const props = __props;
-    const style = {
-      position: "relative"
-    };
-    const color = vue.computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.font) == null ? void 0 : _a.color) != null ? _b : "rgba(0,0,0,.15)";
-    });
-    const fontSize = vue.computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.font) == null ? void 0 : _a.fontSize) != null ? _b : 16;
-    });
-    const fontWeight = vue.computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.font) == null ? void 0 : _a.fontWeight) != null ? _b : "normal";
-    });
-    const fontStyle = vue.computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.font) == null ? void 0 : _a.fontStyle) != null ? _b : "normal";
-    });
-    const fontFamily = vue.computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.font) == null ? void 0 : _a.fontFamily) != null ? _b : "sans-serif";
-    });
-    const textAlign = vue.computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.font) == null ? void 0 : _a.textAlign) != null ? _b : "center";
-    });
-    const textBaseline = vue.computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.font) == null ? void 0 : _a.textBaseline) != null ? _b : "hanging";
-    });
-    const gapX = vue.computed(() => props.gap[0]);
-    const gapY = vue.computed(() => props.gap[1]);
-    const gapXCenter = vue.computed(() => gapX.value / 2);
-    const gapYCenter = vue.computed(() => gapY.value / 2);
-    const offsetLeft = vue.computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.offset) == null ? void 0 : _a[0]) != null ? _b : gapXCenter.value;
-    });
-    const offsetTop = vue.computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.offset) == null ? void 0 : _a[1]) != null ? _b : gapYCenter.value;
-    });
-    const getMarkStyle = () => {
-      const markStyle = {
-        zIndex: props.zIndex,
-        position: "absolute",
-        left: 0,
-        top: 0,
-        width: "100%",
-        height: "100%",
-        pointerEvents: "none",
-        backgroundRepeat: "repeat"
-      };
-      let positionLeft = offsetLeft.value - gapXCenter.value;
-      let positionTop = offsetTop.value - gapYCenter.value;
-      if (positionLeft > 0) {
-        markStyle.left = `${positionLeft}px`;
-        markStyle.width = `calc(100% - ${positionLeft}px)`;
-        positionLeft = 0;
-      }
-      if (positionTop > 0) {
-        markStyle.top = `${positionTop}px`;
-        markStyle.height = `calc(100% - ${positionTop}px)`;
-        positionTop = 0;
-      }
-      markStyle.backgroundPosition = `${positionLeft}px ${positionTop}px`;
-      return markStyle;
-    };
-    const containerRef = vue.shallowRef(null);
-    const watermarkRef = vue.shallowRef();
-    const stopObservation = vue.ref(false);
-    const destroyWatermark = () => {
-      if (watermarkRef.value) {
-        watermarkRef.value.remove();
-        watermarkRef.value = void 0;
-      }
-    };
-    const appendWatermark = (base64Url, markWidth) => {
-      var _a;
-      if (containerRef.value && watermarkRef.value) {
-        stopObservation.value = true;
-        watermarkRef.value.setAttribute("style", utils.getStyleStr({
-          ...getMarkStyle(),
-          backgroundImage: `url('${base64Url}')`,
-          backgroundSize: `${Math.floor(markWidth)}px`
-        }));
-        (_a = containerRef.value) == null ? void 0 : _a.append(watermarkRef.value);
-        setTimeout(() => {
-          stopObservation.value = false;
-        });
-      }
-    };
-    const getMarkSize = (ctx) => {
-      let defaultWidth = 120;
-      let defaultHeight = 64;
-      const image = props.image;
-      const content = props.content;
-      const width = props.width;
-      const height = props.height;
-      if (!image && ctx.measureText) {
-        ctx.font = `${Number(fontSize.value)}px ${fontFamily.value}`;
-        const contents = Array.isArray(content) ? content : [content];
-        const sizes = contents.map((item) => {
-          const metrics = ctx.measureText(item);
-          return [
-            metrics.width,
-            metrics.fontBoundingBoxAscent !== void 0 ? metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent : metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent
-          ];
-        });
-        defaultWidth = Math.ceil(Math.max(...sizes.map((size) => size[0])));
-        defaultHeight = Math.ceil(Math.max(...sizes.map((size) => size[1]))) * contents.length + (contents.length - 1) * useClips.FontGap;
-      }
-      return [width != null ? width : defaultWidth, height != null ? height : defaultHeight];
-    };
-    const getClips = useClips["default"]();
-    const renderWatermark = () => {
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      const image = props.image;
-      const content = props.content;
-      const rotate = props.rotate;
-      if (ctx) {
-        if (!watermarkRef.value) {
-          watermarkRef.value = document.createElement("div");
-        }
-        const ratio = utils.getPixelRatio();
-        const [markWidth, markHeight] = getMarkSize(ctx);
-        const drawCanvas = (drawContent) => {
-          const [textClips, clipWidth] = getClips(drawContent || "", rotate, ratio, markWidth, markHeight, {
-            color: color.value,
-            fontSize: fontSize.value,
-            fontStyle: fontStyle.value,
-            fontWeight: fontWeight.value,
-            fontFamily: fontFamily.value,
-            textAlign: textAlign.value,
-            textBaseline: textBaseline.value
-          }, gapX.value, gapY.value);
-          appendWatermark(textClips, clipWidth);
-        };
-        if (image) {
-          const img = new Image();
-          img.onload = () => {
-            drawCanvas(img);
-          };
-          img.onerror = () => {
-            drawCanvas(content);
-          };
-          img.crossOrigin = "anonymous";
-          img.referrerPolicy = "no-referrer";
-          img.src = image;
-        } else {
-          drawCanvas(content);
-        }
-      }
-    };
-    vue.onMounted(() => {
-      renderWatermark();
-    });
-    vue.watch(() => props, () => {
-      renderWatermark();
-    }, {
-      deep: true,
-      flush: "post"
-    });
-    vue.onBeforeUnmount(() => {
-      destroyWatermark();
-    });
-    const onMutate = (mutations) => {
-      if (stopObservation.value) {
-        return;
-      }
-      mutations.forEach((mutation) => {
-        if (utils.reRendering(mutation, watermarkRef.value)) {
-          destroyWatermark();
-          renderWatermark();
-        }
-      });
-    };
-    core.useMutationObserver(containerRef, onMutate, {
-      attributes: true,
-      subtree: true,
-      childList: true
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
-        ref_key: "containerRef",
-        ref: containerRef,
-        style: vue.normalizeStyle([style])
-      }, [
-        vue.renderSlot(_ctx.$slots, "default")
-      ], 4);
-    };
+const watermarkProps = runtime.buildProps({
+  zIndex: {
+    type: Number,
+    default: 9
+  },
+  rotate: {
+    type: Number,
+    default: -22
+  },
+  width: Number,
+  height: Number,
+  image: String,
+  content: {
+    type: runtime.definePropType([String, Array]),
+    default: "Element Plus"
+  },
+  font: {
+    type: runtime.definePropType(Object)
+  },
+  gap: {
+    type: runtime.definePropType(Array),
+    default: () => [100, 100]
+  },
+  offset: {
+    type: runtime.definePropType(Array)
   }
 });
-var Watermark = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "watermark.vue"]]);
 
-exports["default"] = Watermark;
+exports.watermarkProps = watermarkProps;
 //# sourceMappingURL=watermark.js.map