feat: initial commit - Phase 1 & 2 core features

This commit is contained in:
hiderfong
2026-04-22 17:07:33 +08:00
commit 1773bda06b
25005 changed files with 6252106 additions and 0 deletions
+9
View File
@@ -0,0 +1,9 @@
import { SFCWithInstall } from "../../utils/vue/typescript.js";
import "../../utils/index.js";
import { AffixEmits, AffixInstance, AffixProps, AffixPropsPublic, affixEmits, affixProps } from "./src/affix.js";
import { _default } from "./src/affix.vue.js";
//#region ../../packages/components/affix/index.d.ts
declare const ElAffix: SFCWithInstall<typeof _default>;
//#endregion
export { AffixEmits, AffixInstance, AffixProps, AffixPropsPublic, ElAffix, ElAffix as default, affixEmits, affixProps };
+14
View File
@@ -0,0 +1,14 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_install = require('../../utils/vue/install.js');
const require_affix = require('./src/affix.js');
const require_affix$1 = require('./src/affix2.js');
//#region ../../packages/components/affix/index.ts
const ElAffix = require_install.withInstall(require_affix$1.default);
//#endregion
exports.ElAffix = ElAffix;
exports.default = ElAffix;
exports.affixEmits = require_affix.affixEmits;
exports.affixProps = require_affix.affixProps;
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","names":["withInstall","Affix"],"sources":["../../../../../packages/components/affix/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils'\nimport Affix from './src/affix.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElAffix: SFCWithInstall<typeof Affix> = withInstall(Affix)\nexport default ElAffix\n\nexport * from './src/affix'\n"],"mappings":";;;;;;AAKA,MAAa,UAAwCA,4BAAYC,wBAAM"}
+63
View File
@@ -0,0 +1,63 @@
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import { ZIndexType } from "../../../utils/typescript.js";
import "../../../utils/index.js";
import { _default } from "./affix.vue.js";
import { ExtractPublicPropTypes } from "vue";
import * as csstype from "csstype";
//#region ../../packages/components/affix/src/affix.d.ts
interface AffixProps {
/**
* @description affix element zIndex value
* */
zIndex?: ZIndexType;
/**
* @description target container. (CSS selector)
*/
target?: string;
/**
* @description offset distance
* */
offset?: number;
/**
* @description position of affix
* */
position?: 'top' | 'bottom';
/**
* @description whether affix element is teleported, if `true` it will be teleported to where `append-to` sets
* */
teleported?: boolean;
/**
* @description which element the affix element appends to
* */
appendTo?: string | HTMLElement;
}
/**
* @deprecated Removed after 3.0.0, Use `AffixProps` instead.
*/
declare const affixProps: {
readonly zIndex: EpPropFinalized<(new (...args: any[]) => string | number) | (() => csstype.Property.ZIndex | undefined) | (((new (...args: any[]) => string | number) | (() => csstype.Property.ZIndex | undefined)) | null)[], unknown, unknown, 100, boolean>;
readonly target: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly offset: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly position: EpPropFinalized<StringConstructor, "top" | "bottom", unknown, "top", boolean>;
readonly teleported: BooleanConstructor;
readonly appendTo: EpPropFinalized<(new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>) | (((new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>)) | null)[], unknown, unknown, "body", boolean>;
};
/**
* @deprecated Removed after 3.0.0, Use `AffixProps` instead.
*/
type AffixPropsPublic = ExtractPublicPropTypes<typeof affixProps>;
declare const affixEmits: {
scroll: ({
scrollTop,
fixed
}: {
scrollTop: number;
fixed: boolean;
}) => boolean;
change: (fixed: boolean) => boolean;
};
type AffixEmits = typeof affixEmits;
type AffixInstance = InstanceType<typeof _default> & unknown;
//#endregion
export { AffixEmits, AffixInstance, AffixProps, AffixPropsPublic, affixEmits, affixProps };
+43
View File
@@ -0,0 +1,43 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_event = require('../../../constants/event.js');
const require_types = require('../../../utils/types.js');
const require_runtime = require('../../../utils/vue/props/runtime.js');
const require_teleport = require('../../teleport/src/teleport.js');
//#region ../../packages/components/affix/src/affix.ts
/**
* @deprecated Removed after 3.0.0, Use `AffixProps` instead.
*/
const affixProps = require_runtime.buildProps({
zIndex: {
type: require_runtime.definePropType([Number, String]),
default: 100
},
target: {
type: String,
default: ""
},
offset: {
type: Number,
default: 0
},
position: {
type: String,
values: ["top", "bottom"],
default: "top"
},
teleported: Boolean,
appendTo: {
type: require_teleport.teleportProps.to.type,
default: "body"
}
});
const affixEmits = {
scroll: ({ scrollTop, fixed }) => require_types.isNumber(scrollTop) && require_types.isBoolean(fixed),
[require_event.CHANGE_EVENT]: (fixed) => require_types.isBoolean(fixed)
};
//#endregion
exports.affixEmits = affixEmits;
exports.affixProps = affixProps;
//# sourceMappingURL=affix.js.map
@@ -0,0 +1 @@
{"version":3,"file":"affix.js","names":["buildProps","definePropType","teleportProps","isNumber","isBoolean","CHANGE_EVENT"],"sources":["../../../../../../packages/components/affix/src/affix.ts"],"sourcesContent":["import {\n buildProps,\n definePropType,\n isBoolean,\n isNumber,\n} from '@element-plus/utils'\nimport { CHANGE_EVENT } from '@element-plus/constants'\nimport { teleportProps } from '@element-plus/components/teleport'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type Affix from './affix.vue'\nimport type { ZIndexType } from '@element-plus/utils'\n\nexport interface AffixProps {\n /**\n * @description affix element zIndex value\n * */\n zIndex?: ZIndexType\n /**\n * @description target container. (CSS selector)\n */\n target?: string\n /**\n * @description offset distance\n * */\n offset?: number\n /**\n * @description position of affix\n * */\n position?: 'top' | 'bottom'\n /**\n * @description whether affix element is teleported, if `true` it will be teleported to where `append-to` sets\n * */\n teleported?: boolean\n /**\n * @description which element the affix element appends to\n * */\n appendTo?: string | HTMLElement\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `AffixProps` instead.\n */\nexport const affixProps = buildProps({\n /**\n * @description affix element zIndex value\n * */\n zIndex: {\n type: definePropType<ZIndexType>([Number, String]),\n default: 100,\n },\n /**\n * @description target container. (CSS selector)\n */\n target: {\n type: String,\n default: '',\n },\n /**\n * @description offset distance\n * */\n offset: {\n type: Number,\n default: 0,\n },\n /**\n * @description position of affix\n * */\n position: {\n type: String,\n values: ['top', 'bottom'],\n default: 'top',\n },\n /**\n * @description whether affix element is teleported, if `true` it will be teleported to where `append-to` sets\n * */\n teleported: Boolean,\n /**\n * @description which element the affix element appends to\n * */\n appendTo: {\n type: teleportProps.to.type,\n default: 'body',\n },\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `AffixProps` instead.\n */\nexport type AffixPropsPublic = ExtractPublicPropTypes<typeof affixProps>\n\nexport const affixEmits = {\n scroll: ({ scrollTop, fixed }: { scrollTop: number; fixed: boolean }) =>\n isNumber(scrollTop) && isBoolean(fixed),\n [CHANGE_EVENT]: (fixed: boolean) => isBoolean(fixed),\n}\nexport type AffixEmits = typeof affixEmits\n\nexport type AffixInstance = InstanceType<typeof Affix> & unknown\n"],"mappings":";;;;;;;;;;AA2CA,MAAa,aAAaA,2BAAW;CAInC,QAAQ;EACN,MAAMC,+BAA2B,CAAC,QAAQ,OAAO,CAAC;EAClD,SAAS;EACV;CAID,QAAQ;EACN,MAAM;EACN,SAAS;EACV;CAID,QAAQ;EACN,MAAM;EACN,SAAS;EACV;CAID,UAAU;EACR,MAAM;EACN,QAAQ,CAAC,OAAO,SAAS;EACzB,SAAS;EACV;CAID,YAAY;CAIZ,UAAU;EACR,MAAMC,+BAAc,GAAG;EACvB,SAAS;EACV;CACF,CAAU;AAOX,MAAa,aAAa;CACxB,SAAS,EAAE,WAAW,YACpBC,uBAAS,UAAU,IAAIC,wBAAU,MAAM;EACxCC,8BAAgB,UAAmBD,wBAAU,MAAM;CACrD"}
@@ -0,0 +1,40 @@
import { AffixProps } from "./affix.js";
import * as vue from "vue";
import * as csstype from "csstype";
//#region ../../packages/components/affix/src/affix.vue.d.ts
declare var __VLS_7: {};
type __VLS_Slots = {} & {
default?: (props: typeof __VLS_7) => any;
};
declare const __VLS_base: vue.DefineComponent<AffixProps, {
/** @description update affix status */update: () => void; /** @description update rootRect info */
updateRoot: () => Promise<void>;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
scroll: (args_0: {
scrollTop: number;
fixed: boolean;
}) => void;
change: (fixed: boolean) => void;
}, string, vue.PublicProps, Readonly<AffixProps> & Readonly<{
onChange?: ((fixed: boolean) => any) | undefined;
onScroll?: ((args_0: {
scrollTop: number;
fixed: boolean;
}) => any) | undefined;
}>, {
zIndex: csstype.Property.ZIndex;
target: string;
offset: number;
position: "top" | "bottom";
appendTo: string | HTMLElement;
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,132 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_event = require('../../../constants/event.js');
const require_error = require('../../../utils/error.js');
const require_style = require('../../../utils/dom/style.js');
const require_scroll = require('../../../utils/dom/scroll.js');
const require_index = require('../../teleport/index.js');
const require_affix = require('./affix.js');
const require_index$1 = require('../../../hooks/use-namespace/index.js');
let _vueuse_core = require("@vueuse/core");
let vue = require("vue");
//#region ../../packages/components/affix/src/affix.vue?vue&type=script&setup=true&lang.ts
const COMPONENT_NAME = "ElAffix";
var affix_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
name: COMPONENT_NAME,
__name: "affix",
props: require_affix.affixProps,
emits: require_affix.affixEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const ns = require_index$1.useNamespace("affix");
const target = (0, vue.shallowRef)();
const root = (0, vue.shallowRef)();
const scrollContainer = (0, vue.shallowRef)();
const { height: windowHeight } = (0, _vueuse_core.useWindowSize)();
const { height: rootHeight, width: rootWidth, top: rootTop, bottom: rootBottom, left: rootLeft, update: updateRoot } = (0, _vueuse_core.useElementBounding)(root, { windowScroll: false });
const targetRect = (0, _vueuse_core.useElementBounding)(target);
const fixed = (0, vue.ref)(false);
const scrollTop = (0, vue.ref)(0);
const transform = (0, vue.ref)(0);
const teleportDisabled = (0, vue.computed)(() => {
return !props.teleported || !fixed.value;
});
const rootStyle = (0, vue.computed)(() => {
return {
display: "flow-root",
height: fixed.value ? `${rootHeight.value}px` : "",
width: fixed.value ? `${rootWidth.value}px` : ""
};
});
const affixStyle = (0, vue.computed)(() => {
if (!fixed.value) return {};
const offset = require_style.addUnit(props.offset);
return {
height: `${rootHeight.value}px`,
width: `${rootWidth.value}px`,
top: props.position === "top" ? offset : "",
bottom: props.position === "bottom" ? offset : "",
left: props.teleported ? `${rootLeft.value}px` : "",
transform: transform.value ? `translateY(${transform.value}px)` : "",
zIndex: props.zIndex
};
});
const update = () => {
if (!scrollContainer.value) return;
scrollTop.value = scrollContainer.value instanceof Window ? document.documentElement.scrollTop : scrollContainer.value.scrollTop || 0;
const { position, target, offset } = props;
const rootHeightOffset = offset + rootHeight.value;
if (position === "top") if (target) {
const difference = targetRect.bottom.value - rootHeightOffset;
fixed.value = offset > rootTop.value && targetRect.bottom.value > 0;
transform.value = difference < 0 ? difference : 0;
} else fixed.value = offset > rootTop.value;
else if (target) {
const difference = windowHeight.value - targetRect.top.value - rootHeightOffset;
fixed.value = windowHeight.value - offset < rootBottom.value && windowHeight.value > targetRect.top.value;
transform.value = difference < 0 ? -difference : 0;
} else fixed.value = windowHeight.value - offset < rootBottom.value;
};
const updateRootRect = async () => {
if (!fixed.value) {
updateRoot();
return;
}
fixed.value = false;
await (0, vue.nextTick)();
updateRoot();
fixed.value = true;
};
const handleScroll = async () => {
updateRoot();
await (0, vue.nextTick)();
emit("scroll", {
scrollTop: scrollTop.value,
fixed: fixed.value
});
};
(0, vue.watch)(fixed, (val) => emit(require_event.CHANGE_EVENT, val));
(0, vue.onMounted)(() => {
if (props.target) {
target.value = document.querySelector(props.target) ?? void 0;
if (!target.value) require_error.throwError(COMPONENT_NAME, `Target does not exist: ${props.target}`);
} else target.value = document.documentElement;
scrollContainer.value = require_scroll.getScrollContainer(root.value, true);
updateRoot();
});
(0, vue.onActivated)(() => {
(0, vue.nextTick)(updateRootRect);
});
(0, vue.onDeactivated)(() => {
fixed.value = false;
});
(0, _vueuse_core.useEventListener)(scrollContainer, "scroll", handleScroll);
(0, vue.watchEffect)(update);
__expose({
update,
updateRoot: updateRootRect
});
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
ref_key: "root",
ref: root,
class: (0, vue.normalizeClass)((0, vue.unref)(ns).b()),
style: (0, vue.normalizeStyle)(rootStyle.value)
}, [(0, vue.createVNode)((0, vue.unref)(require_index.ElTeleport), {
disabled: teleportDisabled.value,
to: __props.appendTo
}, {
default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
class: (0, vue.normalizeClass)({ [(0, vue.unref)(ns).m("fixed")]: fixed.value }),
style: (0, vue.normalizeStyle)(affixStyle.value)
}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 6)]),
_: 3
}, 8, ["disabled", "to"])], 6);
};
}
});
//#endregion
exports.default = affix_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=affix.vue_vue_type_script_setup_true_lang.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,9 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_affix_vue_vue_type_script_setup_true_lang = require('./affix.vue_vue_type_script_setup_true_lang.js');
//#region ../../packages/components/affix/src/affix.vue
var affix_default = require_affix_vue_vue_type_script_setup_true_lang.default;
//#endregion
exports.default = affix_default;
//# sourceMappingURL=affix2.js.map
@@ -0,0 +1 @@
{"version":3,"file":"affix2.js","names":[],"sources":["../../../../../../packages/components/affix/src/affix.vue"],"sourcesContent":["<template>\n <div ref=\"root\" :class=\"ns.b()\" :style=\"rootStyle\">\n <el-teleport :disabled=\"teleportDisabled\" :to=\"appendTo\">\n <div :class=\"{ [ns.m('fixed')]: fixed }\" :style=\"affixStyle\">\n <slot />\n </div>\n </el-teleport>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n nextTick,\n onActivated,\n onDeactivated,\n onMounted,\n ref,\n shallowRef,\n watch,\n watchEffect,\n} from 'vue'\nimport {\n useElementBounding,\n useEventListener,\n useWindowSize,\n} from '@vueuse/core'\nimport ElTeleport from '@element-plus/components/teleport'\nimport { addUnit, getScrollContainer, throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { CHANGE_EVENT } from '@element-plus/constants'\nimport { affixEmits } from './affix'\n\nimport type { CSSProperties } from 'vue'\nimport type { AffixProps } from './affix'\n\nconst COMPONENT_NAME = 'ElAffix'\ndefineOptions({\n name: COMPONENT_NAME,\n})\nconst props = withDefaults(defineProps<AffixProps>(), {\n zIndex: 100,\n target: '',\n offset: 0,\n position: 'top',\n appendTo: 'body',\n})\nconst emit = defineEmits(affixEmits)\n\nconst ns = useNamespace('affix')\n\nconst target = shallowRef<HTMLElement>()\nconst root = shallowRef<HTMLDivElement>()\nconst scrollContainer = shallowRef<HTMLElement | Window>()\nconst { height: windowHeight } = useWindowSize()\nconst {\n height: rootHeight,\n width: rootWidth,\n top: rootTop,\n bottom: rootBottom,\n left: rootLeft,\n update: updateRoot,\n} = useElementBounding(root, { windowScroll: false })\nconst targetRect = useElementBounding(target)\n\nconst fixed = ref(false)\nconst scrollTop = ref(0)\nconst transform = ref(0)\n\nconst teleportDisabled = computed(() => {\n return !props.teleported || !fixed.value\n})\n\nconst rootStyle = computed<CSSProperties>(() => {\n return {\n display: 'flow-root', // https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Display/Formatting_contexts#explicitly_creating_a_bfc_using_display_flow-root\n height: fixed.value ? `${rootHeight.value}px` : '',\n width: fixed.value ? `${rootWidth.value}px` : '',\n }\n})\n\nconst affixStyle = computed<CSSProperties>(() => {\n if (!fixed.value) return {}\n\n const offset = addUnit(props.offset)\n return {\n height: `${rootHeight.value}px`,\n width: `${rootWidth.value}px`,\n top: props.position === 'top' ? offset : '',\n bottom: props.position === 'bottom' ? offset : '',\n left: props.teleported ? `${rootLeft.value}px` : '',\n transform: transform.value ? `translateY(${transform.value}px)` : '',\n zIndex: props.zIndex,\n }\n})\n\nconst update = () => {\n if (!scrollContainer.value) return\n\n scrollTop.value =\n scrollContainer.value instanceof Window\n ? document.documentElement.scrollTop\n : scrollContainer.value.scrollTop || 0\n\n const { position, target, offset } = props\n const rootHeightOffset = offset + rootHeight.value\n\n if (position === 'top') {\n if (target) {\n const difference = targetRect.bottom.value - rootHeightOffset\n fixed.value = offset > rootTop.value && targetRect.bottom.value > 0\n transform.value = difference < 0 ? difference : 0\n } else {\n fixed.value = offset > rootTop.value\n }\n } else if (target) {\n const difference =\n windowHeight.value - targetRect.top.value - rootHeightOffset\n fixed.value =\n windowHeight.value - offset < rootBottom.value &&\n windowHeight.value > targetRect.top.value\n transform.value = difference < 0 ? -difference : 0\n } else {\n fixed.value = windowHeight.value - offset < rootBottom.value\n }\n}\n\nconst updateRootRect = async () => {\n if (!fixed.value) {\n updateRoot()\n return\n }\n\n fixed.value = false\n await nextTick()\n updateRoot()\n fixed.value = true\n}\n\nconst handleScroll = async () => {\n updateRoot()\n await nextTick()\n emit('scroll', {\n scrollTop: scrollTop.value,\n fixed: fixed.value,\n })\n}\n\nwatch(fixed, (val) => emit(CHANGE_EVENT, val))\n\nonMounted(() => {\n if (props.target) {\n target.value =\n document.querySelector<HTMLElement>(props.target) ?? undefined\n if (!target.value)\n throwError(COMPONENT_NAME, `Target does not exist: ${props.target}`)\n } else {\n target.value = document.documentElement\n }\n scrollContainer.value = getScrollContainer(root.value!, true)\n updateRoot()\n})\n\nonActivated(() => {\n nextTick(updateRootRect)\n})\n\nonDeactivated(() => {\n fixed.value = false\n})\n\nuseEventListener(scrollContainer, 'scroll', handleScroll)\nwatchEffect(update)\n\ndefineExpose({\n /** @description update affix status */\n update,\n /** @description update rootRect info */\n updateRoot: updateRootRect,\n})\n</script>\n"],"mappings":""}
+3
View File
@@ -0,0 +1,3 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
require('../../base/style/css.js');
require("element-plus/theme-chalk/el-affix.css");
@@ -0,0 +1,3 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
require('../../base/style/index.js');
require("element-plus/theme-chalk/src/affix.scss");