sard 1.0.0 → 1.0.2

package/components/slide-verify/index.css

@@ -0,0 +1 @@
+:root{--s-slide-verify-height:var(--s-content-height-sm);--s-slide-verify-bg:var(--s-fill-color-secondary);--s-slide-verify-theme-color:var(--s-color-success);--s-slide-verify-border-radius:var(--s-border-radius-sm);--s-slide-verify-border-color:var(--s-text-color-fourth);--s-slide-verify-font-size:var(--s-font-size);--s-slide-verify-icon-size:var(--s-size-xl)}.s-slide-verify{position:relative;height:var(--s-slide-verify-height);border-radius:var(--s-slide-verify-border-radius);background:var(--s-slide-verify-bg);overflow:hidden;-webkit-user-select:none;user-select:none}.s-slide-verify__track{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center}.s-slide-verify__track-text{background-image:linear-gradient(90deg, var(--s-gray-800) 45%, var(--s-white) 50%, var(--s-gray-800) 55%);background-size:200% 100%;-webkit-bg-clip:text;background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);animation:s-slide-verify-light 2s infinite}@keyframes s-slide-verify-light{0%{background-position-x:100%}100%{background-position-x:0%}}.s-slide-verify__valid-track{position:absolute;top:0;inset-inline-start:0;bottom:0;width:calc(100% - var(--s-slide-verify-height))}.s-slide-verify__fill{position:absolute;top:0;inset-inline-start:0;bottom:0;display:flex;justify-content:center;align-items:center;width:var(--valid-track-x);white-space:nowrap;color:var(--s-white);background:var(--s-slide-verify-theme-color);transition:width var(--s-duration)}.s-slide-verify__fulfill{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;color:var(--s-white);clip-path:inset(0 calc(100% - var(--track-x)) 0 0);transition:clip-path var(--s-duration)}:root[dir=rtl] .s-slide-verify__fulfill{clip-path:inset(0 0 0 calc(100% - var(--track-x)))}.s-slide-verify__target{position:absolute;top:0;inset-inline-start:var(--target-x);width:var(--s-slide-verify-height);height:var(--s-slide-verify-height);border:1px dashed var(--s-slide-verify-border-color);pointer-events:none}.s-slide-verify__thumb{position:absolute;top:0;inset-inline-start:var(--valid-track-x);display:flex;justify-content:center;align-items:center;width:var(--s-slide-verify-height);height:var(--s-slide-verify-height);font-size:var(--s-font-size-lg);background-color:var(--s-bg-color-container);cursor:move;transition:var(--s-duration);touch-action:none;box-shadow:inset 0 0 0 2px var(--s-slide-verify-bg);border-radius:var(--s-border-radius)}:root[dir=rtl] .s-slide-verify__arrow{transform:rotateY(180deg)}.s-slide-verify--down .s-slide-verify__thumb,.s-slide-verify--down .s-slide-verify__fill,.s-slide-verify--down .s-slide-verify__fulfill{transition:none}.s-slide-verify--success .s-slide-verify__thumb{color:var(--s-slide-verify-theme-color)}.s-slide-verify--error .s-slide-verify__thumb{color:var(--s-color-danger)}.s-slide-verify--error .s-slide-verify__fill{background:var(--s-color-danger)}.s-slide-verify--success .s-slide-verify__track,.s-slide-verify--success .s-slide-verify__fulfill,.s-slide-verify--success .s-slide-verify__target,.s-slide-verify--error .s-slide-verify__track,.s-slide-verify--error .s-slide-verify__fulfill,.s-slide-verify--error .s-slide-verify__target{display:none}.s-slide-verify--success .s-slide-verify__track-text,.s-slide-verify--error .s-slide-verify__track-text,.s-slide-verify--loading .s-slide-verify__track-text{animation:none;background:none;-webkit-bg-clip:unset;background-clip:unset;-webkit-text-fill-color:unset}.s-slide-verify--success .s-slide-verify__thumb,.s-slide-verify--error .s-slide-verify__thumb,.s-slide-verify--loading .s-slide-verify__thumb{cursor:unset}

package/components/slide-verify/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _SlideVerify from './slide-verify.vue';
+export declare const SlideVerify: EnhancedComponent<typeof _SlideVerify>;
+export default SlideVerify;
+export type { SlideVerifyProps, SlideVerifySlots, SlideVerifyEmits, SlideVerifyExpose, SlideVerifyResult, } from './common';

package/components/slide-verify/index.js

@@ -0,0 +1,6 @@
+import { enhanceComponent } from "../../utils/component.js";
+import slide_verify_default from "./slide-verify.js";
+//#region packages/sard/components/slide-verify/index.ts
+const SlideVerify = enhanceComponent(slide_verify_default);
+//#endregion
+export { SlideVerify, SlideVerify as default };

package/components/slide-verify/slide-verify.d.ts

@@ -0,0 +1,30 @@
+import { type SlideVerifyProps, type SlideVerifySlots, type SlideVerifyExpose, type SlideVerifyResult } from './common';
+type __VLS_Slots = SlideVerifySlots;
+declare const __VLS_base: import("vue").DefineComponent<SlideVerifyProps, SlideVerifyExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    start: (event: any) => any;
+    end: (event: any) => any;
+    change: (percent: number) => any;
+    move: (event: any) => any;
+}, string, import("vue").PublicProps, Readonly<SlideVerifyProps> & Readonly<{
+    onStart?: ((event: any) => any) | undefined;
+    onEnd?: ((event: any) => any) | undefined;
+    onChange?: ((percent: number) => any) | undefined;
+    onMove?: ((event: any) => any) | undefined;
+}>, {
+    text: string;
+    disabled: boolean;
+    errorText: string;
+    targetPos: number;
+    successText: string;
+    resetWhenError: boolean;
+    showTarget: boolean;
+    verify: (result: SlideVerifyResult) => Promise<boolean> | boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/slide-verify/slide-verify.js

@@ -0,0 +1,200 @@
+import { createBem } from "../../utils/bem.js";
+import { clamp } from "../../utils/number.js";
+import { usePointerDown } from "../../use/usePointerDown.js";
+import { useRtl } from "../../use/useRtl.js";
+import loading_default from "../loading/loading.js";
+import { defaultSlideVerifyProps } from "./common.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, ref, toDisplayString, unref, useTemplateRef, watch, withModifiers } from "vue";
+import { CheckCircleFill, DoubleRight, XCircleFill } from "@sard/icons";
+//#region packages/sard/components/slide-verify/slide-verify.vue
+var STATUS = /* @__PURE__ */ function(STATUS) {
+	STATUS[STATUS["INITIAL"] = 1] = "INITIAL";
+	STATUS[STATUS["LOADING"] = 2] = "LOADING";
+	STATUS[STATUS["SUCCESS"] = 4] = "SUCCESS";
+	STATUS[STATUS["ERROR"] = 8] = "ERROR";
+	return STATUS;
+}(STATUS || {});
+const MIN_DISTANCE = 10;
+var slide_verify_default = /*@__PURE__*/ defineComponent({
+	__name: "slide-verify",
+	props: /*@__PURE__*/ mergeDefaults({
+		targetPos: {
+			type: Number,
+			required: false
+		},
+		text: {
+			type: String,
+			required: false
+		},
+		successText: {
+			type: String,
+			required: false
+		},
+		errorText: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		resetWhenError: {
+			type: Boolean,
+			required: false
+		},
+		showTarget: {
+			type: Boolean,
+			required: false
+		},
+		verify: {
+			type: Function,
+			required: false
+		}
+	}, defaultSlideVerifyProps),
+	emits: [
+		"start",
+		"move",
+		"end",
+		"change"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("slide-verify");
+		const status = ref(STATUS.INITIAL);
+		const fillText = computed(() => {
+			switch (status.value) {
+				case STATUS.SUCCESS: return props.successText;
+				case STATUS.ERROR: return props.errorText;
+				default: return "";
+			}
+		});
+		const percent = ref(0);
+		const trackPercent = ref(0);
+		const targetPos = computed(() => {
+			return clamp(props.targetPos ?? 100, 0, 100);
+		});
+		const reset = () => {
+			status.value = STATUS.INITIAL;
+			percent.value = 0;
+			trackPercent.value = 0;
+		};
+		const trackRef = useTemplateRef("track");
+		const isRtl = useRtl(trackRef);
+		const isDown = ref(false);
+		let startX = 0;
+		let trackRect;
+		let trajectory = [];
+		let startTime = 0;
+		const onTouchStart = async (event) => {
+			if (props.disabled || !(status.value & STATUS.INITIAL)) return;
+			isDown.value = true;
+			const { clientX, clientY } = event.touches[0];
+			startTime = Date.now();
+			trajectory.push([
+				clientX,
+				clientY,
+				startTime
+			]);
+			startX = clientX;
+			emit("start", event);
+			trackRect = trackRef.value.getBoundingClientRect();
+		};
+		const onTouchMove = (event) => {
+			if (props.disabled || !(status.value & STATUS.INITIAL)) return;
+			if (!trackRect) return;
+			const { clientX, clientY } = event.touches[0];
+			trajectory.push([
+				clientX,
+				clientY,
+				Date.now()
+			]);
+			let deltaX = clientX - startX;
+			if (isRtl.value) deltaX = -deltaX;
+			const { width, height } = trackRect;
+			const total = width - height;
+			const x = clamp(deltaX, 0, total);
+			percent.value = x / total * 100;
+			trackPercent.value = x / width * 100;
+			emit("move", event);
+		};
+		const onTouchEnd = async (event) => {
+			if (props.disabled || !(status.value & STATUS.INITIAL)) return;
+			if (Math.abs(event.changedTouches[0].clientX - startX) < MIN_DISTANCE) {
+				reset();
+				return;
+			}
+			isDown.value = false;
+			const data = {
+				actualPos: percent.value,
+				targetPos: targetPos.value,
+				startTime,
+				endTime: Date.now(),
+				trajectory
+			};
+			trajectory = [];
+			emit("end", event);
+			try {
+				status.value = STATUS.LOADING;
+				if (!await props.verify?.(data)) throw new Error();
+				status.value = STATUS.SUCCESS;
+			} catch {
+				status.value = STATUS.ERROR;
+				if (props.resetWhenError) reset();
+			}
+		};
+		const onPointerDown = usePointerDown(onTouchStart, onTouchMove, onTouchEnd);
+		watch(percent, () => {
+			emit("change", percent.value);
+		});
+		__expose({ reset });
+		const slideVerifyClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m("down", isDown.value),
+				bem.m("success", status.value & STATUS.SUCCESS),
+				bem.m("error", status.value & STATUS.ERROR),
+				bem.m("loading", status.value & STATUS.LOADING)
+			];
+		});
+		const slideVerifyStyle = computed(() => {
+			return {
+				"--valid-track-x": percent.value + "%",
+				"--track-x": trackPercent.value + "%",
+				"--target-x": targetPos.value + "%"
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(slideVerifyClass.value),
+				style: normalizeStyle(slideVerifyStyle.value)
+			}, [
+				createElementVNode("div", {
+					ref: "track",
+					class: normalizeClass(unref(bem).e("track"))
+				}, [createElementVNode("span", { class: normalizeClass(unref(bem).e("track-text")) }, toDisplayString(__props.text), 3)], 2),
+				createElementVNode("div", { class: normalizeClass(unref(bem).e("valid-track")) }, [
+					createElementVNode("div", { class: normalizeClass(unref(bem).e("fill")) }, toDisplayString(fillText.value), 3),
+					createElementVNode("div", {
+						class: normalizeClass(unref(bem).e("thumb")),
+						onTouchstart: onTouchStart,
+						onTouchmove: withModifiers(onTouchMove, ["stop", "prevent"]),
+						onTouchend: onTouchEnd,
+						onTouchcancel: onTouchEnd,
+						onPointerdown: _cache[0] || (_cache[0] = (...args) => unref(onPointerDown) && unref(onPointerDown)(...args))
+					}, [status.value & STATUS.INITIAL ? (openBlock(), createBlock(unref(DoubleRight), {
+						key: 0,
+						class: normalizeClass(unref(bem).e("arrow"))
+					}, null, 8, ["class"])) : status.value & STATUS.LOADING ? (openBlock(), createBlock(loading_default, { key: 1 })) : status.value & STATUS.SUCCESS ? (openBlock(), createBlock(unref(CheckCircleFill), { key: 2 })) : status.value & STATUS.ERROR ? (openBlock(), createBlock(unref(XCircleFill), { key: 3 })) : createCommentVNode("v-if", true)], 34),
+					__props.showTarget ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(unref(bem).e("target"))
+					}, null, 2)) : createCommentVNode("v-if", true)
+				], 2),
+				createElementVNode("div", { class: normalizeClass(unref(bem).e("fulfill")) }, [createElementVNode("span", null, toDisplayString(__props.text), 1)], 2)
+			], 6);
+		};
+	}
+});
+//#endregion
+export { slide_verify_default as default };

package/components/slider/common.d.ts

@@ -0,0 +1,39 @@
+import { type DefaultProps } from '../config';
+export interface SliderProps {
+    range?: boolean;
+    modelValue?: number | number[];
+    min?: number;
+    max?: number;
+    step?: number;
+    vertical?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    color?: string;
+    trackColor?: string;
+    trackSize?: string;
+    thumbColor?: string;
+    thumbSize?: string;
+    showValue?: boolean;
+    valuePosition?: 'top' | 'right' | 'bottom' | 'left';
+    valueBackground?: string;
+    valueColor?: string;
+    showScale?: boolean;
+    scalePosition?: 'top' | 'right' | 'bottom' | 'left';
+    validateEvent?: boolean;
+}
+export declare const defaultSliderProps: DefaultProps<SliderProps>;
+export interface SliderSlots {
+    'start-thumb'?(props: {
+        value: number;
+    }): any;
+    'end-thumb'?(props: {
+        value: number;
+    }): any;
+}
+export interface SliderEmits {
+    (e: 'update:modelValue', value: number | number[]): void;
+    (e: 'input', value: number | number[]): void;
+    (e: 'change', value: number | number[]): void;
+    (e: 'drag-start', event: TouchEvent): void;
+    (e: 'drag-end', event: TouchEvent): void;
+}

package/components/slider/common.js

@@ -0,0 +1,9 @@
+//#region packages/sard/components/slider/common.ts
+const defaultSliderProps = {
+	min: 0,
+	max: 100,
+	step: 1,
+	validateEvent: true
+};
+//#endregion
+export { defaultSliderProps };

package/components/slider/index.css

@@ -0,0 +1 @@
+:root{--s-slider-vertical-height:150px;--s-slider-padding:calc(var(--s-slider-thumb-size)/2);--s-slider-padding-x-show-scale:34px;--s-slider-padding-y-show-scale:26px;--s-slider-track-main-axis-size:100%;--s-slider-track-cross-axis-size:4px;--s-slider-track-bg:var(--s-fill-color-secondary);--s-slider-fill-bg:var(--s-color-primary);--s-slider-thumb-size:24px;--s-slider-thumb-bg:var(--s-white);--s-slider-thumb-box-shadow:var(--s-box-shadow-tertiary);--s-slider-value-padding:4px;--s-slider-value-min-width:20px;--s-slider-value-min-width-horizontal:28px;--s-slider-value-font-size:var(--s-font-size-sm);--s-slider-value-color:var(--s-white);--s-slider-value-bg:var(--s-gray-800);--s-slider-value-box-shadow:var(--s-box-shadow-tertiary);--s-slider-value-arrow-size:6px;--s-slider-scale-size:8px;--s-slider-scale-text-font-size:var(--s-font-size-sm);--s-slider-scale-text-offset:20px}.dark{--s-slider-thumb-bg:var(--s-gray-200);--s-slider-value-bg:var(--s-gray-700)}.s-slider{display:flex;padding:var(--s-slider-padding);cursor:pointer;-webkit-user-select:none;user-select:none}.s-slider--vertical{width:auto;height:var(--s-slider-vertical-height)}.s-slider__track{position:relative;width:var(--s-slider-track-main-axis-size);height:var(--s-slider-track-cross-axis-size);border-radius:var(--s-border-radius-full);background:var(--s-slider-track-bg)}.s-slider--vertical .s-slider__track{width:var(--s-slider-track-cross-axis-size);height:var(--s-slider-track-main-axis-size)}.s-slider__fill{position:absolute;width:auto;height:100%;border-radius:var(--s-border-radius-full);background:var(--s-slider-fill-bg)}.s-slider--vertical .s-slider__fill{width:100%;height:auto}.s-slider__thumb-container{position:absolute;z-index:2;display:flex;justify-content:center;align-items:center;touch-action:none;transform:translate(-50%, -50%)}:root[dir=rtl] .s-slider__thumb-container{transform:translate(50%, -50%)}.s-slider__thumb-container--start{top:50%;inset-inline-start:0}.s-slider__thumb-container--end{top:50%;inset-inline-start:100%}.s-slider__thumb{flex:none;width:var(--s-slider-thumb-size);height:var(--s-slider-thumb-size);border-radius:var(--s-border-radius-full);background:var(--s-slider-thumb-bg);box-shadow:var(--s-slider-thumb-box-shadow)}.s-slider--vertical .s-slider__thumb-container{touch-action:auto}.s-slider--vertical .s-slider__thumb-container--start{top:0;inset-inline-start:50%}.s-slider--vertical .s-slider__thumb-container--end{top:100%;inset-inline-start:50%}.s-slider__value{position:absolute;display:flex;justify-content:center;align-items:center;padding:var(--s-slider-value-padding);font-size:var(--s-slider-value-font-size);line-height:var(--s-line-height-none);color:var(--s-slider-value-color);border-radius:var(--s-border-radius-sm);background:var(--s-slider-value-bg);box-shadow:var(--s-slider-value-box-shadow)}.s-slider__value::after{content:"";position:absolute;display:block;width:var(--s-slider-value-arrow-size);height:var(--s-slider-value-arrow-size);background-color:inherit}.s-slider__value--top{bottom:calc(100% + var(--s-slider-value-arrow-size))}.s-slider__value--top::after{top:100%;left:50%;transform:translate(-50%, -50%) rotate(45deg)}.s-slider__value--bottom{top:calc(100% + var(--s-slider-value-arrow-size))}.s-slider__value--bottom::after{bottom:100%;left:50%;transform:translate(-50%, 50%) rotate(45deg)}.s-slider__value--left{inset-inline-end:calc(100% + var(--s-slider-value-arrow-size))}.s-slider__value--left::after{top:50%;inset-inline-start:100%;transform:translate(-50%, -50%) rotate(45deg)}:root[dir=rtl] .s-slider__value--left::after{transform:translate(50%, -50%) rotate(45deg)}.s-slider__value--right{inset-inline-start:calc(100% + var(--s-slider-value-arrow-size))}.s-slider__value--right::after{top:50%;inset-inline-end:100%;transform:translate(50%, -50%) rotate(45deg)}:root[dir=rtl] .s-slider__value--right::after{transform:translate(-50%, -50%) rotate(45deg)}.s-slider__value--top,.s-slider__value--bottom{min-width:var(--s-slider-value-min-width)}.s-slider__value--left,.s-slider__value--right{min-width:var(--s-slider-value-min-width-horizontal)}.s-slider__scale{position:absolute;width:var(--s-slider-scale-size);height:var(--s-slider-scale-size);border-radius:50%;background:var(--s-slider-track-bg)}.s-slider__scale--active{background:var(--s-slider-fill-bg)}.s-slider--horizontal .s-slider__scale{top:50%;transform:translate(-50%, -50%)}:root[dir=rtl] .s-slider--horizontal .s-slider__scale{transform:translate(50%, -50%)}.s-slider--vertical .s-slider__scale{left:50%;transform:translate(-50%, -50%)}.s-slider__scale-text{position:absolute;font-size:var(--s-slider-scale-text-font-size);line-height:var(--s-line-height-none)}.s-slider--horizontal .s-slider__scale-text{left:50%;transform:translateX(-50%)}.s-slider--vertical .s-slider__scale-text{top:50%;transform:translateY(-50%)}.s-slider--scale-top{padding-top:var(--s-slider-padding-y-show-scale)}.s-slider--scale-top .s-slider__scale-text{bottom:var(--s-slider-scale-text-offset)}.s-slider--scale-bottom{padding-bottom:var(--s-slider-padding-y-show-scale)}.s-slider--scale-bottom .s-slider__scale-text{top:var(--s-slider-scale-text-offset)}.s-slider--scale-left{padding-inline-start:var(--s-slider-padding-x-show-scale)}.s-slider--scale-left .s-slider__scale-text{inset-inline-end:var(--s-slider-scale-text-offset)}.s-slider--scale-right{padding-inline-end:var(--s-slider-padding-x-show-scale)}.s-slider--scale-right .s-slider__scale-text{inset-inline-start:var(--s-slider-scale-text-offset)}.s-slider--readonly{cursor:unset}.s-slider--disabled{cursor:not-allowed}.s-slider--disabled .s-slider__fill{background:var(--s-text-color-disabled)}.s-slider--readonly .s-slider__thumb-container,.s-slider--disabled .s-slider__thumb-container{touch-action:auto}

package/components/slider/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Slider from './slider.vue';
+export declare const Slider: EnhancedComponent<typeof _Slider>;
+export default Slider;
+export type { SliderProps, SliderSlots, SliderEmits } from './common';

package/components/slider/index.js

@@ -0,0 +1,6 @@
+import { enhanceComponent } from "../../utils/component.js";
+import slider_default from "./slider.js";
+//#region packages/sard/components/slider/index.ts
+const Slider = enhanceComponent(slider_default);
+//#endregion
+export { Slider, Slider as default };

package/components/slider/slider.d.ts

@@ -0,0 +1,44 @@
+import { type SliderProps, type SliderSlots } from './common';
+type __VLS_Slots = SliderSlots;
+declare const __VLS_base: import("vue").DefineComponent<SliderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    input: (value: number | number[]) => any;
+    change: (value: number | number[]) => any;
+    "update:modelValue": (value: number | number[]) => any;
+    "drag-start": (event: TouchEvent) => any;
+    "drag-end": (event: TouchEvent) => any;
+}, string, import("vue").PublicProps, Readonly<SliderProps> & Readonly<{
+    onInput?: ((value: number | number[]) => any) | undefined;
+    onChange?: ((value: number | number[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number | number[]) => any) | undefined;
+    "onDrag-start"?: ((event: TouchEvent) => any) | undefined;
+    "onDrag-end"?: ((event: TouchEvent) => any) | undefined;
+}>, {
+    vertical: boolean;
+    min: number;
+    max: number;
+    readonly: boolean;
+    disabled: boolean;
+    modelValue: number | number[];
+    color: string;
+    range: boolean;
+    validateEvent: boolean;
+    trackColor: string;
+    step: number;
+    trackSize: string;
+    thumbColor: string;
+    thumbSize: string;
+    showValue: boolean;
+    valuePosition: "top" | "right" | "bottom" | "left";
+    valueBackground: string;
+    valueColor: string;
+    showScale: boolean;
+    scalePosition: "top" | "right" | "bottom" | "left";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};