sard 1.0.0 → 1.0.2

package/components/image/image.js

@@ -0,0 +1,163 @@
+import { createBem } from "../../utils/bem.js";
+import { useResizeObserver } from "../../use/useResizeObserver.js";
+import { IMAGE_MODES, defaultImageProps } from "./common.js";
+import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, useSlots, useTemplateRef, watch } from "vue";
+import { Image, ImageError } from "@sard/icons";
+//#region packages/sard/components/image/image.vue
+const _hoisted_1 = ["src", "loading"];
+var STATUS = /* @__PURE__ */ function(STATUS) {
+	STATUS[STATUS["UNSTATED"] = 0] = "UNSTATED";
+	STATUS[STATUS["FIRST_LOADING"] = 1] = "FIRST_LOADING";
+	STATUS[STATUS["LATER_LOADING"] = 4] = "LATER_LOADING";
+	STATUS[STATUS["LOADED"] = 8] = "LOADED";
+	STATUS[STATUS["ERROR"] = 16] = "ERROR";
+	return STATUS;
+}(STATUS || {});
+var image_default = /*@__PURE__*/ defineComponent({
+	__name: "image",
+	props: /*@__PURE__*/ mergeDefaults({
+		src: {
+			type: String,
+			required: false
+		},
+		mode: {
+			type: String,
+			required: false
+		},
+		loading: {
+			type: String,
+			required: false
+		},
+		width: {
+			type: String,
+			required: false
+		},
+		height: {
+			type: String,
+			required: false
+		},
+		shape: {
+			type: String,
+			required: false
+		},
+		radius: {
+			type: String,
+			required: false
+		},
+		showLoading: {
+			type: Boolean,
+			required: false
+		},
+		showError: {
+			type: Boolean,
+			required: false
+		},
+		background: {
+			type: String,
+			required: false
+		},
+		fade: {
+			type: Boolean,
+			required: false
+		},
+		customLoad: {
+			type: Function,
+			required: false
+		}
+	}, defaultImageProps),
+	emits: [
+		"click",
+		"load",
+		"error"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		useSlots();
+		const emit = __emit;
+		const bem = createBem("image");
+		const status = ref(STATUS.UNSTATED);
+		const isLoaded = ref(false);
+		const isAnimationEnd = ref(false);
+		const sensorSize = useResizeObserver(useTemplateRef("root"));
+		const aspectRatio = ref(0);
+		const loadedUrl = ref("");
+		const imageRef = useTemplateRef("image");
+		const doLoad = (event) => {
+			const img = imageRef.value;
+			if (!img) return;
+			const { naturalWidth, naturalHeight } = img;
+			aspectRatio.value = naturalWidth / naturalHeight;
+			status.value = STATUS.LOADED;
+			isLoaded.value = true;
+			loadedUrl.value = props.src;
+			emit("load", event);
+		};
+		const onLoad = async (event) => {
+			if (!props.customLoad) doLoad(event);
+		};
+		const onError = (event) => {
+			status.value = STATUS.ERROR;
+			emit("error", event);
+		};
+		const onClick = (event) => {
+			emit("click", event);
+		};
+		watch(() => props.src, async () => {
+			if (props.src) status.value = isLoaded.value && !(status.value & STATUS.ERROR) ? STATUS.LATER_LOADING : STATUS.FIRST_LOADING;
+			if (props.customLoad) props.customLoad((event) => {
+				doLoad(event);
+			});
+		}, { immediate: true });
+		__expose({});
+		const imageClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m(props.shape),
+				bem.m("animated", props.fade && !isAnimationEnd.value)
+			];
+		});
+		const imageStyle = computed(() => {
+			return {
+				width: status.value & STATUS.LOADED && props.mode === "heightFix" ? aspectRatio.value * sensorSize.height + "px" : props.width,
+				height: status.value & STATUS.LOADED && props.mode === "widthFix" ? sensorSize.width / aspectRatio.value + "px" : props.height,
+				borderRadius: props.shape === "square" ? props.radius : void 0,
+				background: status.value & STATUS.LOADED ? "transparent" : props.background
+			};
+		});
+		const displayStyle = computed(() => {
+			return {
+				backgroundImage: loadedUrl.value ? `url(${loadedUrl.value})` : "none",
+				backgroundPosition: IMAGE_MODES[props.mode][0],
+				backgroundSize: IMAGE_MODES[props.mode][1]
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref: "root",
+				class: normalizeClass(imageClass.value),
+				style: normalizeStyle(imageStyle.value),
+				onClick
+			}, [__props.showLoading && status.value & STATUS.FIRST_LOADING ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(bem).e("loading"))
+			}, [renderSlot(_ctx.$slots, "loading", {}, () => [createVNode(unref(Image))])], 2)) : __props.showError && status.value & STATUS.ERROR ? (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass(unref(bem).e("error"))
+			}, [renderSlot(_ctx.$slots, "error", {}, () => [createVNode(unref(ImageError))])], 2)) : (openBlock(), createElementBlock("div", {
+				key: 2,
+				class: normalizeClass(unref(bem).e("display")),
+				style: normalizeStyle(displayStyle.value),
+				onAnimationend: _cache[0] || (_cache[0] = ($event) => isAnimationEnd.value = true)
+			}, null, 38)), createElementVNode("img", {
+				ref: "image",
+				src: __props.src,
+				loading: __props.loading,
+				class: normalizeClass(unref(bem).e("interaction")),
+				onLoad,
+				onError
+			}, null, 42, _hoisted_1)], 6);
+		};
+	}
+});
+//#endregion
+export { image_default as default };

package/components/image/index.css

@@ -0,0 +1 @@
+:root{--s-image-bg:var(--s-fill-color-tertiary);--s-image-width:320px;--s-image-height:240px;--s-image-loading-font-size:var(--s-size-xl);--s-image-loading-color:var(--s-text-color-fourth);--s-image-error-font-size:var(--s-size-xl);--s-image-error-color:var(--s-text-color-fourth);--s-image-duration:var(--s-duration-slow)}.s-image{position:relative;display:inline-block;width:var(--s-image-width);height:var(--s-image-height);overflow:hidden;background:var(--s-image-bg)}.s-image--circle{border-radius:9999px}.s-image__display{position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat}.s-image--animated .s-image__display{animation:s-image-fade var(--s-image-duration)}@keyframes s-image-fade{from{opacity:0}to{opacity:1}}.s-image__interaction{position:absolute;top:0;left:0;display:block;width:100%;height:100%;opacity:0;-webkit-touch-callout:none;user-select:none}.s-image__loading{display:flex;justify-content:center;align-items:center;width:100%;height:100%;font-size:var(--s-image-loading-font-size);color:var(--s-image-loading-color)}.s-image__error{display:flex;justify-content:center;align-items:center;width:100%;height:100%;font-size:var(--s-image-error-font-size);color:var(--s-image-error-color)}

package/components/image/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Image from './image.vue';
+export declare const Image: EnhancedComponent<typeof _Image>;
+export default Image;
+export type { ImageProps, ImageSlots, ImageEmits, ImageExpose } from './common';

package/components/image/index.js

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

package/components/index.d.ts

@@ -0,0 +1,122 @@
+export * from './accordion';
+export * from './action-sheet';
+export * from './alert';
+export * from './avatar';
+export * from './back-top';
+export * from './badge';
+export * from './barcode';
+export * from './button';
+export * from './calendar';
+export * from './calendar-input';
+export * from './calendar-popout';
+export * from './card';
+export * from './cascader';
+export * from './cascader-input';
+export * from './cascader-popout';
+export * from './checkbox';
+export * from './checkbox-input';
+export * from './checkbox-popout';
+export * from './collapse';
+export * from './color-picker';
+export * from './color-picker-input';
+export * from './color-picker-popout';
+export * from './compact';
+export * from './config';
+export * from './cool-icon';
+export * from './count-down';
+export * from './count-to';
+export * from './crop-image';
+export * from './date-strip';
+export * from './datetime-picker';
+export * from './datetime-picker-input';
+export * from './datetime-picker-popout';
+export * from './datetime-range-picker';
+export * from './datetime-range-picker-input';
+export * from './datetime-range-picker-popout';
+export * from './descriptions';
+export * from './dialog';
+export * from './divider';
+export * from './dnd';
+export * from './dropdown';
+export * from './ellipsis';
+export * from './empty';
+export * from './fab';
+export * from './floating-bubble';
+export * from './floating-panel';
+export * from './form';
+export * from './form-plain';
+export * from './grid';
+export * from './image';
+export * from './indexes';
+export * from './infinite-list';
+export * from './input';
+export * from './keyboard';
+export * from './keyboard-popout';
+export * from './layout';
+export * from './list';
+export * from './load-more';
+export * from './loading';
+export * from './marquee';
+export * from './menu';
+export * from './motion';
+export * from './navbar';
+export * from './navbar-pit';
+export * from './notice-bar';
+export * from './notify';
+export * from './overlay';
+export * from './pagination';
+export * from './password-input';
+export * from './picker';
+export * from './picker-input';
+export * from './picker-popout';
+export * from './picker-view';
+export * from './popout';
+export * from './popout-input';
+export * from './popover';
+export * from './popup';
+export * from './preview-image';
+export * from './progress-bar';
+export * from './progress-circle';
+export * from './pull-down-refresh';
+export * from './puzzle-verify';
+export * from './qrcode';
+export * from './radio';
+export * from './radio-input';
+export * from './radio-popout';
+export * from './rate';
+export * from './read-more';
+export * from './result';
+export * from './rotate-verify';
+export * from './scroll-list';
+export * from './scroll-spy';
+export * from './search';
+export * from './segmented';
+export * from './select';
+export * from './select-input';
+export * from './select-popout';
+export * from './share-sheet';
+export * from './sidebar';
+export * from './signature';
+export * from './skeleton';
+export * from './slide-verify';
+export * from './slider';
+export * from './space';
+export * from './status-bar';
+export * from './stepper';
+export * from './steps';
+export * from './sticky';
+export * from './swipe-action';
+export * from './swiper';
+export * from './switch';
+export * from './tabbar';
+export * from './tabbar-pit';
+export * from './table';
+export * from './tabs';
+export * from './tag';
+export * from './text';
+export * from './timeline';
+export * from './toast';
+export * from './tree';
+export * from './upload';
+export * from './waterfall';
+export * from './watermark';

package/components/index.js

@@ -0,0 +1,142 @@
+import { useInPopup, usePopupEnter, usePopupVisibleHookProvide } from "./popup/common.js";
+import { Accordion, AccordionItem } from "./accordion/index.js";
+import { actionSheet, createActionSheet } from "./action-sheet/imperative.js";
+import { ActionSheet, ActionSheetItem } from "./action-sheet/index.js";
+import { Alert } from "./alert/index.js";
+import { Avatar, AvatarGroup } from "./avatar/index.js";
+import { usePageBackTop } from "./back-top/usePageBackTop.js";
+import { useElementBackTop } from "./back-top/useElementBackTop.js";
+import { BackTop } from "./back-top/index.js";
+import { Badge } from "./badge/index.js";
+import { Barcode } from "./barcode/index.js";
+import { useFormContext, useFormItemContext } from "./form/common.js";
+import { Button } from "./button/index.js";
+import { Calendar } from "./calendar/index.js";
+import { omitFormPopoutProps, useFormPopout } from "./popout/useFormPopout.js";
+import { partitionPopoutInputProps, usePopoutInput } from "./popout-input/usePopoutInput.js";
+import { CalendarInput } from "./calendar-input/index.js";
+import { CalendarPopout } from "./calendar-popout/index.js";
+import { Card } from "./card/index.js";
+import { Cascader } from "./cascader/index.js";
+import { CascaderInput } from "./cascader-input/index.js";
+import { CascaderPopout } from "./cascader-popout/index.js";
+import { Checkbox, CheckboxGroup } from "./checkbox/index.js";
+import { CheckboxInput } from "./checkbox-input/index.js";
+import { CheckboxPopout } from "./checkbox-popout/index.js";
+import { Collapse } from "./collapse/index.js";
+import { ColorPicker } from "./color-picker/index.js";
+import { ColorPickerInput } from "./color-picker-input/index.js";
+import { ColorPickerPopout } from "./color-picker-popout/index.js";
+import { Compact } from "./compact/index.js";
+import { safeAreaInsets, windowInfo } from "./config/windowInfo.js";
+import { CoolIcon } from "./cool-icon/index.js";
+import { formatTime, getCurrentTime, useCountDown } from "./count-down/useCountDown.js";
+import { CountDown } from "./count-down/index.js";
+import { CountTo } from "./count-to/index.js";
+import { createCropImage, cropImage } from "./crop-image/imperative.js";
+import { CropImage } from "./crop-image/index.js";
+import { DateStrip } from "./date-strip/index.js";
+import { DatetimePicker } from "./datetime-picker/index.js";
+import { DatetimePickerInput } from "./datetime-picker-input/index.js";
+import { DatetimePickerPopout } from "./datetime-picker-popout/index.js";
+import { DatetimeRangePicker } from "./datetime-range-picker/index.js";
+import { DatetimeRangePickerInput } from "./datetime-range-picker-input/index.js";
+import { DatetimeRangePickerPopout } from "./datetime-range-picker-popout/index.js";
+import { Descriptions, DescriptionsItem } from "./descriptions/index.js";
+import { createDialog, dialog } from "./dialog/imperative.js";
+import { Dialog } from "./dialog/index.js";
+import { Divider } from "./divider/index.js";
+import { Dnd, DndHandle, DndItem } from "./dnd/index.js";
+import { Dropdown, DropdownItem } from "./dropdown/index.js";
+import { Ellipsis } from "./ellipsis/index.js";
+import { Empty } from "./empty/index.js";
+import { Fab, FabItem } from "./fab/index.js";
+import { FloatingBubble } from "./floating-bubble/index.js";
+import { FloatingPanel } from "./floating-panel/index.js";
+import { useFormItem } from "./form/useFormItem.js";
+import { Form, FormItem } from "./form/index.js";
+import { FormItemPlain, FormPlain } from "./form-plain/index.js";
+import { Grid, GridItem } from "./grid/index.js";
+import { Image } from "./image/index.js";
+import { Indexes, IndexesAnchor, IndexesNav } from "./indexes/index.js";
+import { useLoadMore } from "./load-more/useLoadMore.js";
+import { InfiniteList } from "./infinite-list/index.js";
+import { Input } from "./input/index.js";
+import { plateEnglishLetterKeys, plateProvinceKeys, plateSuffixKeys } from "./keyboard/common.js";
+import { Keyboard } from "./keyboard/index.js";
+import { KeyboardPopout } from "./keyboard-popout/index.js";
+import { Col, Row } from "./layout/index.js";
+import { List, ListItem } from "./list/index.js";
+import { LoadMore } from "./load-more/index.js";
+import { Loading } from "./loading/index.js";
+import { Marquee } from "./marquee/index.js";
+import { Menu, MenuItem } from "./menu/index.js";
+import { useMotioning } from "./motion/useMotioning.js";
+import { Motion } from "./motion/index.js";
+import { Navbar, NavbarItem } from "./navbar/index.js";
+import { NavbarPit } from "./navbar-pit/index.js";
+import { NoticeBar } from "./notice-bar/index.js";
+import { createNotify, notify } from "./notify/imperative.js";
+import { Notify } from "./notify/index.js";
+import { Overlay } from "./overlay/index.js";
+import { Pagination } from "./pagination/index.js";
+import { PasswordInput } from "./password-input/index.js";
+import { Picker } from "./picker/index.js";
+import { PickerInput } from "./picker-input/index.js";
+import { PickerPopout } from "./picker-popout/index.js";
+import { PickerView, PickerViewColumn } from "./picker-view/index.js";
+import { Popout } from "./popout/index.js";
+import { PopoutInput } from "./popout-input/index.js";
+import { Popover } from "./popover/index.js";
+import { Popup } from "./popup/index.js";
+import { ADD_SWIPER_CONTEXT_KEY, REMOVE_SWIPER_CONTEXT_KEY, SWIPER_AUTO_HEIGHT_KEY } from "./swiper/common.js";
+import { createPreviewImage, previewImage } from "./preview-image/imperative.js";
+import { PreviewImage } from "./preview-image/index.js";
+import { ProgressBar } from "./progress-bar/index.js";
+import { ProgressCircle } from "./progress-circle/index.js";
+import { PullDownRefresh } from "./pull-down-refresh/index.js";
+import { PuzzleVerify } from "./puzzle-verify/index.js";
+import { Qrcode } from "./qrcode/index.js";
+import { Radio, RadioGroup } from "./radio/index.js";
+import { RadioInput } from "./radio-input/index.js";
+import { RadioPopout } from "./radio-popout/index.js";
+import { Rate } from "./rate/index.js";
+import { ReadMore } from "./read-more/index.js";
+import { Result } from "./result/index.js";
+import { RotateVerify } from "./rotate-verify/index.js";
+import { ScrollList } from "./scroll-list/index.js";
+import { ScrollSpy, ScrollSpyAnchor } from "./scroll-spy/index.js";
+import { Search } from "./search/index.js";
+import { Segmented, SegmentedItem } from "./segmented/index.js";
+import { Select, SelectOption, SelectOptionGroup } from "./select/index.js";
+import { SelectInput } from "./select-input/index.js";
+import { SelectPopout } from "./select-popout/index.js";
+import { ShareSheet, ShareSheetIcon, ShareSheetItem, ShareSheetRow } from "./share-sheet/index.js";
+import { Sidebar, SidebarItem } from "./sidebar/index.js";
+import { Signature } from "./signature/index.js";
+import { Skeleton, SkeletonAvatar, SkeletonBlock, SkeletonParagraph, SkeletonTitle } from "./skeleton/index.js";
+import { SlideVerify } from "./slide-verify/index.js";
+import { Slider } from "./slider/index.js";
+import { spaceSizes } from "./space/common.js";
+import { Space } from "./space/index.js";
+import { StatusBar } from "./status-bar/index.js";
+import { Stepper } from "./stepper/index.js";
+import { Step, Steps } from "./steps/index.js";
+import { Sticky, StickyBox } from "./sticky/index.js";
+import { SwipeAction, SwipeActionGroup } from "./swipe-action/index.js";
+import { Swiper, SwiperItem } from "./swiper/index.js";
+import { Switch } from "./switch/index.js";
+import { Tabbar, TabbarItem } from "./tabbar/index.js";
+import { TabbarPit } from "./tabbar-pit/index.js";
+import { Table } from "./table/index.js";
+import { Tab, Tabs } from "./tabs/index.js";
+import { Tag } from "./tag/index.js";
+import { Text } from "./text/index.js";
+import { Timeline, TimelineItem } from "./timeline/index.js";
+import { createToast, toast } from "./toast/imperative.js";
+import { Toast } from "./toast/index.js";
+import { Tree, TreeBranch, TreeNode } from "./tree/index.js";
+import { Upload, UploadPreview } from "./upload/index.js";
+import { Waterfall, WaterfallItem, WaterfallLoad } from "./waterfall/index.js";
+import { Watermark } from "./watermark/index.js";
+export { ADD_SWIPER_CONTEXT_KEY, Accordion, AccordionItem, ActionSheet, ActionSheetItem, Alert, Avatar, AvatarGroup, BackTop, Badge, Barcode, Button, Calendar, CalendarInput, CalendarPopout, Card, Cascader, CascaderInput, CascaderPopout, Checkbox, CheckboxGroup, CheckboxInput, CheckboxPopout, Col, Collapse, ColorPicker, ColorPickerInput, ColorPickerPopout, Compact, CoolIcon, CountDown, CountTo, CropImage, DateStrip, DatetimePicker, DatetimePickerInput, DatetimePickerPopout, DatetimeRangePicker, DatetimeRangePickerInput, DatetimeRangePickerPopout, Descriptions, DescriptionsItem, Dialog, Divider, Dnd, DndHandle, DndItem, Dropdown, DropdownItem, Ellipsis, Empty, Fab, FabItem, FloatingBubble, FloatingPanel, Form, FormItem, FormItemPlain, FormPlain, Grid, GridItem, Image, Indexes, IndexesAnchor, IndexesNav, InfiniteList, Input, Keyboard, KeyboardPopout, List, ListItem, LoadMore, Loading, Marquee, Menu, MenuItem, Motion, Navbar, NavbarItem, NavbarPit, NoticeBar, Notify, Overlay, Pagination, PasswordInput, Picker, PickerInput, PickerPopout, PickerView, PickerViewColumn, Popout, PopoutInput, Popover, Popup, PreviewImage, ProgressBar, ProgressCircle, PullDownRefresh, PuzzleVerify, Qrcode, REMOVE_SWIPER_CONTEXT_KEY, Radio, RadioGroup, RadioInput, RadioPopout, Rate, ReadMore, Result, RotateVerify, Row, SWIPER_AUTO_HEIGHT_KEY, ScrollList, ScrollSpy, ScrollSpyAnchor, Search, Segmented, SegmentedItem, Select, SelectInput, SelectOption, SelectOptionGroup, SelectPopout, ShareSheet, ShareSheetIcon, ShareSheetItem, ShareSheetRow, Sidebar, SidebarItem, Signature, Skeleton, SkeletonAvatar, SkeletonBlock, SkeletonParagraph, SkeletonTitle, SlideVerify, Slider, Space, StatusBar, Step, Stepper, Steps, Sticky, StickyBox, SwipeAction, SwipeActionGroup, Swiper, SwiperItem, Switch, Tab, Tabbar, TabbarItem, TabbarPit, Table, Tabs, Tag, Text, Timeline, TimelineItem, Toast, Tree, TreeBranch, TreeNode, Upload, UploadPreview, Waterfall, WaterfallItem, WaterfallLoad, Watermark, actionSheet, createActionSheet, createCropImage, createDialog, createNotify, createPreviewImage, createToast, cropImage, dialog, formatTime, getCurrentTime, notify, omitFormPopoutProps, partitionPopoutInputProps, plateEnglishLetterKeys, plateProvinceKeys, plateSuffixKeys, previewImage, safeAreaInsets, spaceSizes, toast, useCountDown, useElementBackTop, useFormContext, useFormItem, useFormItemContext, useFormPopout, useInPopup, useLoadMore, useMotioning, usePageBackTop, usePopoutInput, usePopupEnter, usePopupVisibleHookProvide, windowInfo };

package/components/indexes/common.d.ts

@@ -0,0 +1,39 @@
+import type { InjectionKey } from 'vue';
+import { type DefaultProps } from '../config';
+export interface IndexesProps {
+    current?: number | string;
+}
+export declare const defaultIndexesProps: DefaultProps<IndexesProps>;
+export interface IndexesSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface IndexesEmits {
+    (e: 'update:current', name: number | string): void;
+    (e: 'change', name: number | string): void;
+}
+export interface IndexesExpose {
+    scrollTo: (name: string | number) => void;
+    update: () => void;
+}
+export interface IndexesAnchorProps {
+    name?: string | number;
+}
+export interface IndexesAnchorSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface IndexesNavProps {
+    anchors: (string | number)[];
+    current?: string | number;
+}
+export interface IndexesNavSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface IndexesNavEmits {
+    (e: 'update:current', name: string | number): void;
+    (e: 'change', name: string | number): void;
+}
+export interface IndexesContext {
+    register: (name: string | number, getRect: () => DOMRect) => void;
+    unregister: (name: string | number) => void;
+}
+export declare const indexesContextKey: InjectionKey<IndexesContext>;

package/components/indexes/common.js

@@ -0,0 +1,5 @@
+//#region packages/sard/components/indexes/common.ts
+const defaultIndexesProps = {};
+const indexesContextKey = Symbol("indexesContext");
+//#endregion
+export { defaultIndexesProps, indexesContextKey };

package/components/indexes/index.css

@@ -0,0 +1 @@
+:root{--s-indexes-anchor-padding:0 var(--s-content-padding-x);--s-indexes-anchor-font-size:var(--s-font-size);--s-indexes-anchor-height:var(--s-size-2xl);--s-indexes-anchor-color:var(--s-text-color-tertiary);--s-indexes-anchor-bg:var(--s-fill-color-fourth);--s-indexes-nav-padding-end:var(--s-size-2xs);--s-indexes-nav-item-font-size:var(--s-size-sm);--s-indexes-nav-item-size:var(--s-size-lg);--s-indexes-nav-item-color:var(--s-text-color-primary);--s-indexes-nav-item-color-active:var(--s-white);--s-indexes-nav-item-bg-active:var(--s-color-primary);--s-indexes-hint-size:var(--s-size-4xl);--s-indexes-hint-margin-end:var(--s-size-2xs);--s-indexes-hint-bg:var(--s-overlay);--s-indexes-hint-text-font-size:var(--s-size-xl);--s-indexes-hint-text-color:var(--s-white)}.s-indexes__scroll{height:100%;overflow-x:hidden;overflow-y:auto}.s-indexes__anchor{position:sticky;top:0;z-index:2;height:var(--s-indexes-anchor-height);padding:var(--s-indexes-anchor-padding);font-size:var(--s-indexes-anchor-font-size);line-height:var(--s-indexes-anchor-height);color:var(--s-indexes-anchor-color);background:var(--s-indexes-anchor-bg)}.s-indexes__nav{position:absolute;top:50%;inset-inline-end:0;z-index:10;padding-inline-end:var(--s-indexes-nav-padding-end);transform:translateY(-50%);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}.s-indexes__nav-item{display:flex;justify-content:center;align-items:center;width:var(--s-indexes-nav-item-size);height:var(--s-indexes-nav-item-size);border-radius:var(--s-border-radius-full);font-size:var(--s-indexes-nav-item-font-size);color:var(--s-indexes-nav-item-color)}.s-indexes__nav-item--active{color:var(--s-indexes-nav-item-color-active);background:var(--s-indexes-nav-item-bg-active)}.s-indexes__hint{position:absolute;inset-inline-end:100%;top:0;display:flex;align-items:center;justify-content:center;width:var(--s-indexes-hint-size);height:var(--s-indexes-hint-size);margin-inline-end:var(--s-indexes-hint-margin-end);border-radius:50% 0 50% 50%;background:var(--s-indexes-hint-bg);transform-origin:top right;transform:rotate(45deg);pointer-events:none}:root[dir=rtl] .s-indexes__hint{border-radius:0 50% 50% 50%;transform-origin:top left;transform:rotate(-45deg)}.s-indexes__hint-text{font-size:var(--s-indexes-hint-text-font-size);line-height:var(--s-line-height-none);font-weight:var(--s-font-weight-bold);transform:rotate(-45deg);color:var(--s-indexes-hint-text-color)}:root[dir=rtl] .s-indexes__hint-text{transform:rotate(45deg)}

package/components/indexes/index.d.ts

@@ -0,0 +1,9 @@
+import { type EnhancedComponent } from '../../utils';
+import _Indexes from './indexes.vue';
+import _IndexesAnchor from './indexes-anchor.vue';
+import _IndexesNav from './indexes-nav.vue';
+export declare const Indexes: EnhancedComponent<typeof _Indexes>;
+export declare const IndexesAnchor: EnhancedComponent<typeof _IndexesAnchor>;
+export declare const IndexesNav: EnhancedComponent<typeof _IndexesNav>;
+export default Indexes;
+export type { IndexesProps, IndexesSlots, IndexesEmits, IndexesExpose, IndexesAnchorProps, IndexesAnchorSlots, IndexesNavProps, IndexesNavSlots, IndexesNavEmits, } from './common';

package/components/indexes/index.js

@@ -0,0 +1,10 @@
+import { enhanceComponent } from "../../utils/component.js";
+import indexes_nav_default from "./indexes-nav.js";
+import indexes_default from "./indexes.js";
+import indexes_anchor_default from "./indexes-anchor.js";
+//#region packages/sard/components/indexes/index.ts
+const Indexes = enhanceComponent(indexes_default);
+const IndexesAnchor = enhanceComponent(indexes_anchor_default);
+const IndexesNav = enhanceComponent(indexes_nav_default);
+//#endregion
+export { Indexes, Indexes as default, IndexesAnchor, IndexesNav };

package/components/indexes/indexes-anchor.d.ts

@@ -0,0 +1,11 @@
+import { type IndexesAnchorProps, type IndexesAnchorSlots } from './common';
+type __VLS_Slots = IndexesAnchorSlots;
+declare const __VLS_base: import("vue").DefineComponent<IndexesAnchorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IndexesAnchorProps> & Readonly<{}>, {}, {}, {}, {}, 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/indexes/indexes-anchor.js

@@ -0,0 +1,33 @@
+import { createBem } from "../../utils/bem.js";
+import { isNullish } from "../../utils/is.js";
+import { indexesContextKey } from "./common.js";
+import { createElementBlock, createTextVNode, defineComponent, inject, normalizeClass, onBeforeMount, openBlock, renderSlot, toDisplayString, unref, useTemplateRef } from "vue";
+//#region packages/sard/components/indexes/indexes-anchor.vue
+var indexes_anchor_default = /*@__PURE__*/ defineComponent({
+	__name: "indexes-anchor",
+	props: { name: {
+		type: [String, Number],
+		required: false
+	} },
+	setup(__props) {
+		const props = __props;
+		const bem = createBem("indexes");
+		const context = inject(indexesContextKey, null);
+		if (!context) throw new Error("IndexesAnchor must be included in Indexes.");
+		const anchorRef = useTemplateRef("anchor");
+		const getRect = () => {
+			return anchorRef.value.getBoundingClientRect();
+		};
+		onBeforeMount(() => {
+			if (!isNullish(props.name)) context.register(props.name, getRect);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref: "anchor",
+				class: normalizeClass(unref(bem).e("anchor"))
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.name), 1)])], 2);
+		};
+	}
+});
+//#endregion
+export { indexes_anchor_default as default };

package/components/indexes/indexes-nav.d.ts

@@ -0,0 +1,17 @@
+import { type IndexesNavProps, type IndexesNavSlots } from './common';
+type __VLS_Slots = IndexesNavSlots;
+declare const __VLS_base: import("vue").DefineComponent<IndexesNavProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (name: string | number) => any;
+    "update:current": (name: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<IndexesNavProps> & Readonly<{
+    onChange?: ((name: string | number) => any) | undefined;
+    "onUpdate:current"?: ((name: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, 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;
+    };
+};