This commit is contained in:
2025-09-19 14:25:20 +08:00
parent 269893a435
commit fbf3f77229
24949 changed files with 2839404 additions and 0 deletions

View File

@@ -0,0 +1,9 @@
import Anchor from './src/anchor.vue';
import AnchorLink from './src/anchor-link.vue';
import type { SFCWithInstall } from 'element-plus/es/utils';
export declare const ElAnchor: SFCWithInstall<typeof Anchor> & {
AnchorLink: typeof AnchorLink;
};
export declare const ElAnchorLink: SFCWithInstall<typeof AnchorLink>;
export default ElAnchor;
export * from './src/anchor';

View File

@@ -0,0 +1,12 @@
import Anchor from './src/anchor2.mjs';
import AnchorLink from './src/anchor-link2.mjs';
export { anchorEmits, anchorProps } from './src/anchor.mjs';
import { withInstall, withNoopInstall } from '../../utils/vue/install.mjs';
const ElAnchor = withInstall(Anchor, {
AnchorLink
});
const ElAnchorLink = withNoopInstall(AnchorLink);
export { ElAnchor, ElAnchorLink, ElAnchor as default };
//# sourceMappingURL=index.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/anchor/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils'\nimport Anchor from './src/anchor.vue'\nimport AnchorLink from './src/anchor-link.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElAnchor: SFCWithInstall<typeof Anchor> & {\n AnchorLink: typeof AnchorLink\n} = withInstall(Anchor, {\n AnchorLink,\n})\nexport const ElAnchorLink: SFCWithInstall<typeof AnchorLink> =\n withNoopInstall(AnchorLink)\nexport default ElAnchor\n\nexport * from './src/anchor'\n"],"names":[],"mappings":";;;;;AAGY,MAAC,QAAQ,GAAG,WAAW,CAAC,MAAM,EAAE;AAC5C,EAAE,UAAU;AACZ,CAAC,EAAE;AACS,MAAC,YAAY,GAAG,eAAe,CAAC,UAAU;;;;"}

View File

@@ -0,0 +1,7 @@
import type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue';
export declare const anchorLinkProps: {
title: StringConstructor;
href: StringConstructor;
};
export type AnchorLinkProps = ExtractPropTypes<typeof anchorLinkProps>;
export type AnchorLinkPropsPublic = __ExtractPublicPropTypes<typeof anchorLinkProps>;

View File

@@ -0,0 +1,9 @@
import { buildProps } from '../../../utils/vue/props/runtime.mjs';
const anchorLinkProps = buildProps({
title: String,
href: String
});
export { anchorLinkProps };
//# sourceMappingURL=anchor-link.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"anchor-link.mjs","sources":["../../../../../../packages/components/anchor/src/anchor-link.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\n\nimport type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue'\n\nexport const anchorLinkProps = buildProps({\n /**\n * @description the text content of the anchor link\n */\n title: String,\n /**\n * @description The address of the anchor link\n */\n href: String,\n})\n\nexport type AnchorLinkProps = ExtractPropTypes<typeof anchorLinkProps>\nexport type AnchorLinkPropsPublic = __ExtractPublicPropTypes<\n typeof anchorLinkProps\n>\n"],"names":[],"mappings":";;AACY,MAAC,eAAe,GAAG,UAAU,CAAC;AAC1C,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,IAAI,EAAE,MAAM;AACd,CAAC;;;;"}

View File

@@ -0,0 +1,18 @@
declare function __VLS_template(): {
default?(_: {}): any;
"sub-link"?(_: {}): any;
};
declare const __VLS_component: import("vue").DefineComponent<{
title: StringConstructor;
href: StringConstructor;
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
title: StringConstructor;
href: StringConstructor;
}>>, {}>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};

View File

@@ -0,0 +1,85 @@
import { defineComponent, ref, inject, computed, watch, nextTick, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
import { anchorLinkProps } from './anchor-link.mjs';
import { anchorKey } from './constants.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
const __default__ = defineComponent({
name: "ElAnchorLink"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: anchorLinkProps,
setup(__props) {
const props = __props;
const linkRef = ref(null);
const {
ns,
direction,
currentAnchor,
addLink,
removeLink,
handleClick: contextHandleClick
} = inject(anchorKey);
const cls = computed(() => [
ns.e("link"),
ns.is("active", currentAnchor.value === props.href)
]);
const handleClick = (e) => {
contextHandleClick(e, props.href);
};
watch(() => props.href, (val, oldVal) => {
nextTick(() => {
if (oldVal)
removeLink(oldVal);
if (val) {
addLink({
href: val,
el: linkRef.value
});
}
});
});
onMounted(() => {
const { href } = props;
if (href) {
addLink({
href,
el: linkRef.value
});
}
});
onBeforeUnmount(() => {
const { href } = props;
if (href) {
removeLink(href);
}
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(unref(ns).e("item"))
}, [
createElementVNode("a", {
ref_key: "linkRef",
ref: linkRef,
class: normalizeClass(unref(cls)),
href: _ctx.href,
onClick: handleClick
}, [
renderSlot(_ctx.$slots, "default", {}, () => [
createTextVNode(toDisplayString(_ctx.title), 1)
])
], 10, ["href"]),
_ctx.$slots["sub-link"] && unref(direction) === "vertical" ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(unref(ns).e("list"))
}, [
renderSlot(_ctx.$slots, "sub-link")
], 2)) : createCommentVNode("v-if", true)
], 2);
};
}
});
var AnchorLink = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "anchor-link.vue"]]);
export { AnchorLink as default };
//# sourceMappingURL=anchor-link2.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"anchor-link2.mjs","sources":["../../../../../../packages/components/anchor/src/anchor-link.vue"],"sourcesContent":["<template>\n <div :class=\"ns.e('item')\">\n <a ref=\"linkRef\" :class=\"cls\" :href=\"href\" @click=\"handleClick\">\n <slot>{{ title }}</slot>\n </a>\n <div\n v-if=\"$slots['sub-link'] && direction === 'vertical'\"\n :class=\"ns.e('list')\"\n >\n <slot name=\"sub-link\" />\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n inject,\n nextTick,\n onBeforeUnmount,\n onMounted,\n ref,\n watch,\n} from 'vue'\nimport { anchorLinkProps } from './anchor-link'\nimport { anchorKey } from './constants'\n\ndefineOptions({\n name: 'ElAnchorLink',\n})\n\nconst props = defineProps(anchorLinkProps)\n\nconst linkRef = ref<HTMLElement | null>(null)\n\nconst {\n ns,\n direction,\n currentAnchor,\n addLink,\n removeLink,\n handleClick: contextHandleClick,\n} = inject(anchorKey)!\n\nconst cls = computed(() => [\n ns.e('link'),\n ns.is('active', currentAnchor.value === props.href),\n])\n\nconst handleClick = (e: MouseEvent) => {\n contextHandleClick(e, props.href)\n}\n\nwatch(\n () => props.href,\n (val, oldVal) => {\n nextTick(() => {\n if (oldVal) removeLink(oldVal)\n if (val) {\n addLink({\n href: val,\n el: linkRef.value!,\n })\n }\n })\n }\n)\n\nonMounted(() => {\n const { href } = props\n if (href) {\n addLink({\n href,\n el: linkRef.value!,\n })\n }\n})\n\nonBeforeUnmount(() => {\n const { href } = props\n if (href) {\n removeLink(href)\n }\n})\n</script>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;;;;mCA2Bc,CAAA;AAAA,EACZ,IAAM,EAAA,cAAA;AACR,CAAA,CAAA,CAAA;;;;;;AAIA,IAAM,MAAA,OAAA,GAAU,IAAwB,IAAI,CAAA,CAAA;AAE5C,IAAM,MAAA;AAAA,MACJ,EAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAa,EAAA,kBAAA;AAAA,KACf,GAAI,OAAO,SAAS,CAAA,CAAA;AAEpB,IAAM,MAAA,GAAA,GAAM,SAAS,MAAM;AAAA,MACzB,EAAA,CAAG,EAAE,MAAM,CAAA;AAAA,MACX,GAAG,EAAG,CAAA,QAAA,EAAU,aAAc,CAAA,KAAA,KAAU,MAAM,IAAI,CAAA;AAAA,KACnD,CAAA,CAAA;AAED,IAAM,MAAA,WAAA,GAAc,CAAC,CAAkB,KAAA;AACrC,MAAmB,kBAAA,CAAA,CAAA,EAAG,MAAM,IAAI,CAAA,CAAA;AAAA,KAClC,CAAA;AAEA,IAAA,KAAA,CAAA,MAAA,KAAA,CAAA,IAAA,EAAA,CAAA,GAAA,EAAA,MAAA,KAAA;AAAA,MACE,QAAY,CAAA,MAAA;AAAA,YACN,MAAW;AACf,UAAA,UAAe,CAAA,MAAA,CAAA,CAAA;AACb,QAAI,IAAA,GAAA,EAAA;AACJ,UAAA,OAAS,CAAA;AACP,YAAQ,IAAA,EAAA,GAAA;AAAA,YAAA,EACN,EAAM,OAAA,CAAA,KAAA;AAAA,WAAA,CAAA,CAAA;AACM,SAAA;AACb,OACH,CAAA,CAAA;AAAA,KAAA,CAAA,CAAA;AACD,IACH,SAAA,CAAA,MAAA;AAAA,MACF,MAAA,EAAA,IAAA,EAAA,GAAA,KAAA,CAAA;AAEA,MAAA,IAAA,IAAU,EAAM;AACd,QAAM;AACN,UAAI,IAAM;AACR,UAAQ,EAAA,EAAA,OAAA,CAAA,KAAA;AAAA,SACN,CAAA,CAAA;AAAA,OAAA;AACY,KAAA,CAAA,CAAA;AACb,IACH,eAAA,CAAA,MAAA;AAAA,MACD,MAAA,EAAA,IAAA,EAAA,GAAA,KAAA,CAAA;AAED,MAAA,IAAA,IAAA,EAAA;AACE,QAAM,WAAO,IAAI,CAAA,CAAA;AACjB,OAAA;AACE,KAAA,CAAA,CAAA;AAAe,IACjB,OAAA,CAAA,IAAA,EAAA,MAAA,KAAA;AAAA,MACD,OAAAA,SAAA,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

View File

@@ -0,0 +1,25 @@
import type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue';
import type Anchor from './anchor.vue';
export declare const anchorProps: {
container: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement | Window) | (() => string | HTMLElement | Window | null) | ((new (...args: any[]) => string | HTMLElement | Window) | (() => string | HTMLElement | Window | null))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
offset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
bound: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
duration: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
marker: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
type: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "default" | "underline") | (() => "default" | "underline") | ((new (...args: any[]) => "default" | "underline") | (() => "default" | "underline"))[], unknown, unknown, string, boolean>;
direction: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical") | ((new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical"))[], unknown, unknown, string, boolean>;
selectScrollTop: BooleanConstructor;
};
export type AnchorProps = ExtractPropTypes<typeof anchorProps>;
export type AnchorPropsPublic = __ExtractPublicPropTypes<typeof anchorProps>;
export type AnchorInstance = InstanceType<typeof Anchor> & unknown;
export declare const anchorEmits: {
change: (href: string) => boolean;
click: (e: MouseEvent, href?: string) => boolean;
};
export type AnchorEmits = typeof anchorEmits;

View File

@@ -0,0 +1,44 @@
import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
import { isString } from '@vue/shared';
import { isUndefined } from '../../../utils/types.mjs';
const anchorProps = buildProps({
container: {
type: definePropType([
String,
Object
])
},
offset: {
type: Number,
default: 0
},
bound: {
type: Number,
default: 15
},
duration: {
type: Number,
default: 300
},
marker: {
type: Boolean,
default: true
},
type: {
type: definePropType(String),
default: "default"
},
direction: {
type: definePropType(String),
default: "vertical"
},
selectScrollTop: Boolean
});
const anchorEmits = {
change: (href) => isString(href),
click: (e, href) => e instanceof MouseEvent && (isString(href) || isUndefined(href))
};
export { anchorEmits, anchorProps };
//# sourceMappingURL=anchor.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"anchor.mjs","sources":["../../../../../../packages/components/anchor/src/anchor.ts"],"sourcesContent":["import {\n buildProps,\n definePropType,\n isString,\n isUndefined,\n} from '@element-plus/utils'\n\nimport type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue'\nimport type Anchor from './anchor.vue'\n\nexport const anchorProps = buildProps({\n /**\n * @description scroll container\n */\n container: {\n type: definePropType<string | HTMLElement | Window | null>([\n String,\n Object,\n ]),\n },\n /**\n * @description Set the offset of the anchor scroll\n */\n offset: {\n type: Number,\n default: 0,\n },\n /**\n * @description The offset of the element starting to trigger the anchor\n */\n bound: {\n type: Number,\n default: 15,\n },\n /**\n * @description Set the scroll duration of the container when the anchor is clicked, in milliseconds\n */\n duration: {\n type: Number,\n default: 300,\n },\n /**\n * @description Whether to show the marker\n */\n marker: {\n type: Boolean,\n default: true,\n },\n /**\n * @description Set Anchor type\n */\n type: {\n type: definePropType<'default' | 'underline'>(String),\n default: 'default',\n },\n /**\n * @description Set Anchor direction\n */\n direction: {\n type: definePropType<'vertical' | 'horizontal'>(String),\n default: 'vertical',\n },\n /**\n * @description Scroll whether link is selected at the top\n */\n selectScrollTop: Boolean,\n})\n\nexport type AnchorProps = ExtractPropTypes<typeof anchorProps>\nexport type AnchorPropsPublic = __ExtractPublicPropTypes<typeof anchorProps>\nexport type AnchorInstance = InstanceType<typeof Anchor> & unknown\n\nexport const anchorEmits = {\n change: (href: string) => isString(href),\n click: (e: MouseEvent, href?: string) =>\n e instanceof MouseEvent && (isString(href) || isUndefined(href)),\n}\nexport type AnchorEmits = typeof anchorEmits\n"],"names":[],"mappings":";;;;AAMY,MAAC,WAAW,GAAG,UAAU,CAAC;AACtC,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,cAAc,CAAC;AACzB,MAAM,MAAM;AACZ,MAAM,MAAM;AACZ,KAAK,CAAC;AACN,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,IAAI,OAAO,EAAE,SAAS;AACtB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,IAAI,OAAO,EAAE,UAAU;AACvB,GAAG;AACH,EAAE,eAAe,EAAE,OAAO;AAC1B,CAAC,EAAE;AACS,MAAC,WAAW,GAAG;AAC3B,EAAE,MAAM,EAAE,CAAC,IAAI,KAAK,QAAQ,CAAC,IAAI,CAAC;AAClC,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,CAAC,YAAY,UAAU,KAAK,QAAQ,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,IAAI,CAAC,CAAC;AACtF;;;;"}

View File

@@ -0,0 +1,55 @@
declare function __VLS_template(): {
default?(_: {}): any;
};
declare const __VLS_component: import("vue").DefineComponent<{
container: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement | Window) | (() => string | HTMLElement | Window | null) | ((new (...args: any[]) => string | HTMLElement | Window) | (() => string | HTMLElement | Window | null))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
offset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
bound: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
duration: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
marker: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
type: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "default" | "underline") | (() => "default" | "underline") | ((new (...args: any[]) => "default" | "underline") | (() => "default" | "underline"))[], unknown, unknown, string, boolean>;
direction: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical") | ((new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical"))[], unknown, unknown, string, boolean>;
selectScrollTop: BooleanConstructor;
}, {
scrollTo: (href?: string) => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
click: (e: MouseEvent, href?: string | undefined) => void;
change: (href: string) => void;
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
container: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement | Window) | (() => string | HTMLElement | Window | null) | ((new (...args: any[]) => string | HTMLElement | Window) | (() => string | HTMLElement | Window | null))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
offset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
bound: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
duration: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
marker: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
type: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "default" | "underline") | (() => "default" | "underline") | ((new (...args: any[]) => "default" | "underline") | (() => "default" | "underline"))[], unknown, unknown, string, boolean>;
direction: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical") | ((new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical"))[], unknown, unknown, string, boolean>;
selectScrollTop: BooleanConstructor;
}>> & {
onChange?: ((href: string) => any) | undefined;
onClick?: ((e: MouseEvent, href?: string | undefined) => any) | undefined;
}, {
marker: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
direction: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical") | ((new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical"))[], unknown, unknown>;
offset: number;
type: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "default" | "underline") | (() => "default" | "underline") | ((new (...args: any[]) => "default" | "underline") | (() => "default" | "underline"))[], unknown, unknown>;
duration: number;
bound: number;
selectScrollTop: boolean;
}>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};

View File

@@ -0,0 +1,211 @@
import { defineComponent, useSlots, ref, computed, watch, onMounted, provide, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createCommentVNode, createElementVNode, renderSlot, nextTick } from 'vue';
import { useEventListener } from '@vueuse/core';
import { anchorProps, anchorEmits } from './anchor.mjs';
import { anchorKey } from './constants.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { getElement } from '../../../utils/dom/element.mjs';
import { throttleByRaf } from '../../../utils/throttleByRaf.mjs';
import { getScrollElement, animateScrollTo, getScrollTop } from '../../../utils/dom/scroll.mjs';
import { getOffsetTopDistance } from '../../../utils/dom/position.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { isWindow, isUndefined } from '../../../utils/types.mjs';
import { CHANGE_EVENT } from '../../../constants/event.mjs';
const __default__ = defineComponent({
name: "ElAnchor"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: anchorProps,
emits: anchorEmits,
setup(__props, { expose, emit }) {
const props = __props;
const slots = useSlots();
const currentAnchor = ref("");
const markerStyle = ref({});
const anchorRef = ref(null);
const markerRef = ref(null);
const containerEl = ref();
const links = {};
let isScrolling = false;
let currentScrollTop = 0;
const ns = useNamespace("anchor");
const cls = computed(() => [
ns.b(),
props.type === "underline" ? ns.m("underline") : "",
ns.m(props.direction)
]);
const addLink = (state) => {
links[state.href] = state.el;
};
const removeLink = (href) => {
delete links[href];
};
const setCurrentAnchor = (href) => {
const activeHref = currentAnchor.value;
if (activeHref !== href) {
currentAnchor.value = href;
emit(CHANGE_EVENT, href);
}
};
let clearAnimate = null;
const scrollToAnchor = (href) => {
if (!containerEl.value)
return;
const target = getElement(href);
if (!target)
return;
if (clearAnimate)
clearAnimate();
isScrolling = true;
const scrollEle = getScrollElement(target, containerEl.value);
const distance = getOffsetTopDistance(target, scrollEle);
const max = scrollEle.scrollHeight - scrollEle.clientHeight;
const to = Math.min(distance - props.offset, max);
clearAnimate = animateScrollTo(containerEl.value, currentScrollTop, to, props.duration, () => {
setTimeout(() => {
isScrolling = false;
}, 20);
});
};
const scrollTo = (href) => {
if (href) {
setCurrentAnchor(href);
scrollToAnchor(href);
}
};
const handleClick = (e, href) => {
emit("click", e, href);
scrollTo(href);
};
const handleScroll = throttleByRaf(() => {
if (containerEl.value) {
currentScrollTop = getScrollTop(containerEl.value);
}
const currentHref = getCurrentHref();
if (isScrolling || isUndefined(currentHref))
return;
setCurrentAnchor(currentHref);
});
const getCurrentHref = () => {
if (!containerEl.value)
return;
const scrollTop = getScrollTop(containerEl.value);
const anchorTopList = [];
for (const href of Object.keys(links)) {
const target = getElement(href);
if (!target)
continue;
const scrollEle = getScrollElement(target, containerEl.value);
const distance = getOffsetTopDistance(target, scrollEle);
anchorTopList.push({
top: distance - props.offset - props.bound,
href
});
}
anchorTopList.sort((prev, next) => prev.top - next.top);
for (let i = 0; i < anchorTopList.length; i++) {
const item = anchorTopList[i];
const next = anchorTopList[i + 1];
if (i === 0 && scrollTop === 0) {
return props.selectScrollTop ? item.href : "";
}
if (item.top <= scrollTop && (!next || next.top > scrollTop)) {
return item.href;
}
}
};
const getContainer = () => {
const el = getElement(props.container);
if (!el || isWindow(el)) {
containerEl.value = window;
} else {
containerEl.value = el;
}
};
useEventListener(containerEl, "scroll", handleScroll);
const updateMarkerStyle = () => {
nextTick(() => {
if (!anchorRef.value || !markerRef.value || !currentAnchor.value) {
markerStyle.value = {};
return;
}
const currentLinkEl = links[currentAnchor.value];
if (!currentLinkEl) {
markerStyle.value = {};
return;
}
const anchorRect = anchorRef.value.getBoundingClientRect();
const markerRect = markerRef.value.getBoundingClientRect();
const linkRect = currentLinkEl.getBoundingClientRect();
if (props.direction === "horizontal") {
const left = linkRect.left - anchorRect.left;
markerStyle.value = {
left: `${left}px`,
width: `${linkRect.width}px`,
opacity: 1
};
} else {
const top = linkRect.top - anchorRect.top + (linkRect.height - markerRect.height) / 2;
markerStyle.value = {
top: `${top}px`,
opacity: 1
};
}
});
};
watch(currentAnchor, updateMarkerStyle);
watch(() => {
var _a;
return (_a = slots.default) == null ? void 0 : _a.call(slots);
}, updateMarkerStyle);
onMounted(() => {
getContainer();
const hash = decodeURIComponent(window.location.hash);
const target = getElement(hash);
if (target) {
scrollTo(hash);
} else {
handleScroll();
}
});
watch(() => props.container, () => {
getContainer();
});
provide(anchorKey, {
ns,
direction: props.direction,
currentAnchor,
addLink,
removeLink,
handleClick
});
expose({
scrollTo
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "anchorRef",
ref: anchorRef,
class: normalizeClass(unref(cls))
}, [
_ctx.marker ? (openBlock(), createElementBlock("div", {
key: 0,
ref_key: "markerRef",
ref: markerRef,
class: normalizeClass(unref(ns).e("marker")),
style: normalizeStyle(markerStyle.value)
}, null, 6)) : createCommentVNode("v-if", true),
createElementVNode("div", {
class: normalizeClass(unref(ns).e("list"))
}, [
renderSlot(_ctx.$slots, "default")
], 2)
], 2);
};
}
});
var Anchor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "anchor.vue"]]);
export { Anchor as default };
//# sourceMappingURL=anchor2.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,15 @@
import type { InjectionKey, Ref } from 'vue';
import type { UseNamespaceReturn } from 'element-plus/es/hooks';
export interface AnchorLinkState {
el: HTMLElement;
href: string;
}
export interface AnchorContext {
ns: UseNamespaceReturn;
direction: string;
currentAnchor: Ref<string>;
addLink(state: AnchorLinkState): void;
removeLink(href: string): void;
handleClick(e: MouseEvent, href?: string): void;
}
export declare const anchorKey: InjectionKey<AnchorContext>;

View File

@@ -0,0 +1,4 @@
const anchorKey = Symbol("anchor");
export { anchorKey };
//# sourceMappingURL=constants.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"constants.mjs","sources":["../../../../../../packages/components/anchor/src/constants.ts"],"sourcesContent":["import type { InjectionKey, Ref } from 'vue'\nimport type { UseNamespaceReturn } from '@element-plus/hooks'\n\nexport interface AnchorLinkState {\n el: HTMLElement\n href: string\n}\n\nexport interface AnchorContext {\n ns: UseNamespaceReturn\n direction: string\n currentAnchor: Ref<string>\n addLink(state: AnchorLinkState): void\n removeLink(href: string): void\n handleClick(e: MouseEvent, href?: string): void\n}\n\nexport const anchorKey: InjectionKey<AnchorContext> = Symbol('anchor')\n"],"names":[],"mappings":"AAAY,MAAC,SAAS,GAAG,MAAM,CAAC,QAAQ;;;;"}

View File

@@ -0,0 +1,2 @@
import 'element-plus/es/components/base/style/css';
import 'element-plus/theme-chalk/el-anchor.css';

View File

@@ -0,0 +1,3 @@
import '../../base/style/css.mjs';
import 'element-plus/theme-chalk/el-anchor.css';
//# sourceMappingURL=css.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

View File

@@ -0,0 +1,2 @@
import 'element-plus/es/components/base/style';
import 'element-plus/theme-chalk/src/anchor.scss';

View File

@@ -0,0 +1,3 @@
import '../../base/style/index.mjs';
import 'element-plus/theme-chalk/src/anchor.scss';
//# sourceMappingURL=index.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}