sard 1.0.0 → 1.0.2

package/components/preview-image/index.d.ts

@@ -0,0 +1,6 @@
+import { type EnhancedComponent } from '../../utils';
+import _PreviewImage from './preview-image.vue';
+export declare const PreviewImage: EnhancedComponent<typeof _PreviewImage>;
+export default PreviewImage;
+export type { PreviewImageProps, PreviewImageSlots, PreviewImageEmits, PreviewImageExpose, } from './common';
+export * from './imperative';

package/components/preview-image/index.js

@@ -0,0 +1,7 @@
+import { enhanceComponent } from "../../utils/component.js";
+import preview_image_default from "./preview-image.js";
+import { createPreviewImage, previewImage } from "./imperative.js";
+//#region packages/sard/components/preview-image/index.ts
+const PreviewImage = enhanceComponent(preview_image_default);
+//#endregion
+export { PreviewImage, PreviewImage as default, createPreviewImage, previewImage };

package/components/preview-image/preview-image-item.d.ts

@@ -0,0 +1,4 @@
+import { type PreviewImageItemProps } from './common';
+declare const __VLS_export: import("vue").DefineComponent<PreviewImageItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PreviewImageItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/components/preview-image/preview-image-item.js

@@ -0,0 +1,256 @@
+import { createBem } from "../../utils/bem.js";
+import { loadImage } from "../../utils/file.js";
+import { getAspectFitSize } from "../../utils/geometry.js";
+import { createInertialAnimate } from "../../utils/inertialAnimate.js";
+import { usePointerDown } from "../../use/usePointerDown.js";
+import { useSimulatedDblClick } from "../../use/useSimulatedDblClick.js";
+import { useDragPinch } from "../../use/useDragPinch.js";
+import { previewImageContextKey } from "./common.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, inject, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, unref, watch, withModifiers } from "vue";
+//#region packages/sard/components/preview-image/preview-image-item.vue
+const BOUNCE_COEFF = 4;
+const MAX_SCALE = 5;
+const DBL_CLICK_SCALE = 2;
+var preview_image_item_default = /*@__PURE__*/ defineComponent({
+	__name: "preview-image-item",
+	props: { url: {
+		type: String,
+		required: true
+	} },
+	setup(__props) {
+		const props = __props;
+		const bem = createBem("preview-image");
+		const context = inject(previewImageContextKey);
+		const windowWidth = window.innerWidth;
+		const windowHeight = window.innerHeight;
+		const imgNaturalSize = ref([0, 0]);
+		watch(() => props.url, (url) => {
+			imgNaturalSize.value = [0, 0];
+			if (url) loadImage(url).then((img) => {
+				imgNaturalSize.value = [img.naturalWidth, img.naturalHeight];
+			});
+		}, { immediate: true });
+		const imgContainSize = computed(() => {
+			return getAspectFitSize(...imgNaturalSize.value, windowWidth, windowHeight);
+		});
+		const imgCurrLeft = ref(0);
+		const imgCurrTop = ref(0);
+		const imgCurrWidth = ref(0);
+		const imgCurrHeight = ref(0);
+		const isContainSize = computed(() => {
+			const [containWidth, containHeight] = imgContainSize.value;
+			return imgCurrWidth.value === containWidth && imgCurrHeight.value === containHeight;
+		});
+		const adjustToCenterX = () => {
+			imgCurrLeft.value = (windowWidth - imgCurrWidth.value) / 2;
+		};
+		const adjustToCenterY = () => {
+			imgCurrTop.value = (windowHeight - imgCurrHeight.value) / 2;
+		};
+		const adjustToCenterPosition = () => {
+			adjustToCenterX();
+			adjustToCenterY();
+		};
+		watch(imgContainSize, ([containWidth, containHeight]) => {
+			imgCurrWidth.value = containWidth;
+			imgCurrHeight.value = containHeight;
+			adjustToCenterPosition();
+		}, { immediate: true });
+		const isCaptured = ref(false);
+		const inInertiaMotion = ref(false);
+		const puppetStyle = computed(() => {
+			const [width, height] = imgContainSize.value;
+			const scale = imgCurrWidth.value / width || 1;
+			const x = imgCurrLeft.value;
+			const y = imgCurrTop.value;
+			return {
+				width: width + "px",
+				height: height + "px",
+				transform: `translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+				transition: context.visibleSwitching || isCaptured.value || inInertiaMotion.value ? "none" : "",
+				backgroundImage: `url(${props.url})`
+			};
+		});
+		let stopInertialAnimate = null;
+		onBeforeUnmount(() => {
+			stopInertialAnimate?.();
+		});
+		const handleScale = (originX, originY, nextWidth, nextHeight) => {
+			const originScaleX = (originX - imgCurrLeft.value) / imgCurrWidth.value;
+			const originScaleY = (originY - imgCurrTop.value) / imgCurrHeight.value;
+			imgCurrLeft.value += (imgCurrWidth.value - nextWidth) * originScaleX;
+			imgCurrTop.value += (imgCurrHeight.value - nextHeight) * originScaleY;
+			imgCurrWidth.value = nextWidth;
+			imgCurrHeight.value = nextHeight;
+		};
+		const [onDragPinchStart, onDragPinchMove, onDragPinchEnd] = useDragPinch({
+			onCapture() {
+				isCaptured.value = true;
+				stopInertialAnimate?.();
+			},
+			onOffset(offsetX, offsetY, event) {
+				if (isContainSize.value) return;
+				event.stopImmediatePropagation();
+				if (imgCurrWidth.value > windowWidth) {
+					if (imgCurrLeft.value > 0 || imgCurrLeft.value < windowWidth - imgCurrWidth.value) offsetX /= BOUNCE_COEFF;
+					imgCurrLeft.value += offsetX;
+				}
+				if (imgCurrHeight.value > windowHeight) {
+					if (imgCurrTop.value > 0 || imgCurrTop.value < windowHeight - imgCurrHeight.value) offsetY /= BOUNCE_COEFF;
+					imgCurrTop.value += offsetY;
+				}
+			},
+			onScale(originX, originY, scale) {
+				const [containWidth, containHeight] = imgContainSize.value;
+				let scaleDeltaX = imgCurrWidth.value * scale;
+				let scaleDeltaY = imgCurrHeight.value * scale;
+				if (imgCurrWidth.value < containWidth || imgCurrHeight.value < containHeight) {
+					scaleDeltaX /= BOUNCE_COEFF;
+					scaleDeltaY /= BOUNCE_COEFF;
+				} else if (imgCurrWidth.value > containWidth * MAX_SCALE && scaleDeltaX > 0) {
+					scaleDeltaX = 0;
+					scaleDeltaY = 0;
+				}
+				const nextWidth = imgCurrWidth.value + scaleDeltaX;
+				const nextHeight = imgCurrHeight.value + scaleDeltaY;
+				handleScale(originX, originY, nextWidth, nextHeight);
+			},
+			onRelease(v) {
+				isCaptured.value = false;
+				const [containWidth, containHeight] = imgContainSize.value;
+				const _currWidth = imgCurrWidth.value;
+				const _currHeight = imgCurrHeight.value;
+				const tooSmall = _currWidth < containWidth || _currHeight < containHeight;
+				const tooBig = _currWidth > containWidth * MAX_SCALE;
+				if (tooSmall || tooBig) {
+					const [edgeWidth, edgeHeight] = tooSmall ? imgContainSize.value : imgContainSize.value.map((item) => item * MAX_SCALE);
+					imgCurrWidth.value = edgeWidth;
+					imgCurrHeight.value = edgeHeight;
+					imgCurrLeft.value += (_currWidth - edgeWidth) / 2;
+					imgCurrTop.value += (_currHeight - edgeHeight) / 2;
+				}
+				context.immersive = !isContainSize.value;
+				if (isContainSize.value) {
+					adjustToCenterPosition();
+					return;
+				}
+				if (imgCurrWidth.value > windowWidth) {
+					const overLeft = imgCurrLeft.value > 0;
+					const overRight = imgCurrLeft.value < windowWidth - imgCurrWidth.value;
+					if (overLeft) imgCurrLeft.value = 0;
+					else if (overRight) imgCurrLeft.value = windowWidth - imgCurrWidth.value;
+				} else adjustToCenterX();
+				if (imgCurrHeight.value > windowHeight) {
+					const overTop = imgCurrTop.value > 0;
+					const overBottom = imgCurrTop.value < windowHeight - imgCurrHeight.value;
+					if (overTop) imgCurrTop.value = 0;
+					else if (overBottom) imgCurrTop.value = windowHeight - imgCurrHeight.value;
+				} else adjustToCenterY();
+				const overLeft = imgCurrLeft.value > 0;
+				const overRight = imgCurrLeft.value < windowWidth - imgCurrWidth.value;
+				const overTop = imgCurrTop.value > 0;
+				const overBottom = imgCurrTop.value < windowHeight - imgCurrHeight.value;
+				const animateList = [[
+					overLeft || overRight,
+					v.x,
+					imgCurrLeft,
+					windowWidth,
+					imgCurrWidth.value
+				], [
+					overTop || overBottom,
+					v.y,
+					imgCurrTop,
+					windowHeight,
+					imgCurrHeight.value
+				]].filter(([over, v]) => !over && v !== 0).map(([, v, translate, boxSize, elSize]) => {
+					const animate = createInertialAnimate(v, {
+						update(value) {
+							let next = translate.value + value;
+							const overStart = next > 0;
+							const overEnd = next < boxSize - elSize;
+							if (overStart) next = 0;
+							else if (overEnd) next = boxSize - elSize;
+							translate.value = next;
+							if (overStart || overEnd) {
+								animate.stop();
+								tryFinish();
+							}
+						},
+						complete() {
+							tryFinish();
+						}
+					});
+					animate.play();
+					return animate;
+				});
+				if (animateList.length === 0) return;
+				inInertiaMotion.value = true;
+				const tryFinish = () => {
+					if (animateList.every((animate) => !animate.isAnimating())) inInertiaMotion.value = false;
+				};
+				stopInertialAnimate = () => {
+					animateList.forEach((animate) => {
+						animate.stop();
+					});
+					inInertiaMotion.value = false;
+					stopInertialAnimate = null;
+				};
+			}
+		});
+		const [onDblClickStart, onDblClickEnd] = useSimulatedDblClick({
+			onDblClick(x, y) {
+				if (isContainSize.value) {
+					const nextWidth = imgCurrWidth.value * DBL_CLICK_SCALE;
+					const nextHeight = imgCurrHeight.value * DBL_CLICK_SCALE;
+					handleScale(x, y, nextWidth, nextHeight);
+				} else {
+					imgCurrWidth.value = imgContainSize.value[0];
+					imgCurrHeight.value = imgContainSize.value[1];
+					adjustToCenterPosition();
+				}
+			},
+			onClick() {
+				if (!context.sceneType) context.close();
+			}
+		});
+		const onTouchStart = (event) => {
+			if (context.sceneType !== "swipe") {
+				onDblClickStart(event);
+				onDragPinchStart(event);
+			}
+		};
+		const onTouchMove = (event) => {
+			if (!context.sceneType) if (event.touches.length > 1) context.sceneType = "dragPinch";
+			else context.sceneType = "swipe";
+			if (context.sceneType === "dragPinch") {
+				event.stopImmediatePropagation();
+				onDragPinchMove(event);
+			}
+		};
+		const onTouchEnd = (event) => {
+			if (context.sceneType !== "swipe") {
+				onDblClickEnd(event);
+				onDragPinchEnd(event);
+			}
+			if (isContainSize.value) {
+				if (event.touches.length === 0) context.sceneType = null;
+			} else context.sceneType = "dragPinch";
+		};
+		const onPointerDown = usePointerDown(onTouchStart, onTouchMove, onTouchEnd);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(unref(bem).e("item")),
+				onPointerdown: _cache[0] || (_cache[0] = (...args) => unref(onPointerDown) && unref(onPointerDown)(...args)),
+				onTouchstart: withModifiers(onTouchStart, ["prevent"]),
+				onTouchmove: onTouchMove,
+				onTouchend: onTouchEnd,
+				onTouchcancel: onTouchEnd
+			}, [createElementVNode("div", {
+				class: normalizeClass(unref(bem).e("puppet")),
+				style: normalizeStyle(puppetStyle.value)
+			}, null, 6)], 34);
+		};
+	}
+});
+//#endregion
+export { preview_image_item_default as default };

package/components/preview-image/preview-image.d.ts

@@ -0,0 +1,40 @@
+import { type PreviewImageProps, type PreviewImageSlots, type PreviewImageExpose } from './common';
+import type { MotionHookName } from '../motion/common';
+type __VLS_Slots = PreviewImageSlots;
+declare const __VLS_base: import("vue").DefineComponent<PreviewImageProps, PreviewImageExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "before-enter": (el: Element) => any;
+    enter: (el: Element) => any;
+    "after-enter": (el: Element) => any;
+    "enter-cancelled": (el: Element) => any;
+    "before-leave": (el: Element) => any;
+    leave: (el: Element) => any;
+    "after-leave": (el: Element) => any;
+    "leave-cancelled": (el: Element) => any;
+    "visible-hook": (name: MotionHookName, el: Element) => any;
+    "update:visible": (visible: boolean) => any;
+    "update:current": (current: number) => any;
+}, string, import("vue").PublicProps, Readonly<PreviewImageProps> & Readonly<{
+    "onBefore-enter"?: ((el: Element) => any) | undefined;
+    onEnter?: ((el: Element) => any) | undefined;
+    "onAfter-enter"?: ((el: Element) => any) | undefined;
+    "onEnter-cancelled"?: ((el: Element) => any) | undefined;
+    "onBefore-leave"?: ((el: Element) => any) | undefined;
+    onLeave?: ((el: Element) => any) | undefined;
+    "onAfter-leave"?: ((el: Element) => any) | undefined;
+    "onLeave-cancelled"?: ((el: Element) => any) | undefined;
+    "onVisible-hook"?: ((name: MotionHookName, el: Element) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    "onUpdate:current"?: ((current: number) => any) | undefined;
+}>, {
+    visible: boolean;
+    current: number;
+    urls: string[];
+}, {}, {}, {}, 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/preview-image/preview-image.js

@@ -0,0 +1,172 @@
+import { createBem } from "../../utils/bem.js";
+import { clamp } from "../../utils/number.js";
+import { useTimeout } from "../../use/useTimeout.js";
+import { usePointerDown } from "../../use/usePointerDown.js";
+import { useInitialVelocity } from "../../use/useInitialVelocity.js";
+import popup_default from "../popup/popup.js";
+import { defaultPreviewImageProps, previewImageContextKey } from "./common.js";
+import swiper_default from "../swiper/swiper.js";
+import swiper_item_default from "../swiper/swiper-item.js";
+import preview_image_item_default from "./preview-image-item.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, isRef, mergeDefaults, normalizeClass, normalizeStyle, openBlock, provide, reactive, ref, renderList, toDisplayString, unref, useModel, watch, withCtx } from "vue";
+//#region packages/sard/components/preview-image/preview-image.vue
+const CLOSE_THRESHOLD = 80;
+const SCALE_THRESHOLD = 300;
+var preview_image_default = /*@__PURE__*/ defineComponent({
+	__name: "preview-image",
+	props: /*@__PURE__*/ mergeDefaults({
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		current: {
+			type: Number,
+			required: false
+		},
+		urls: {
+			type: Array,
+			required: false
+		}
+	}, defaultPreviewImageProps),
+	emits: [
+		"update:visible",
+		"update:current",
+		"before-enter",
+		"enter",
+		"after-enter",
+		"enter-cancelled",
+		"before-leave",
+		"leave",
+		"after-leave",
+		"leave-cancelled",
+		"visible-hook"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		__expose({});
+		const bem = createBem("preview-image");
+		const innerVisible = useModel(props, "visible");
+		const visibleTimer = useTimeout();
+		const visibleSwitching = ref(false);
+		watch(innerVisible, () => {
+			visibleSwitching.value = true;
+			visibleTimer.set(() => {
+				visibleSwitching.value = false;
+			}, 150);
+		});
+		const onVisibleHook = (name, el) => {
+			if (name === "before-enter") resetSlideDown();
+			emit("visible-hook", name, el);
+			emit(name, el);
+		};
+		const close = () => {
+			innerVisible.value = false;
+		};
+		const isImmersive = ref(false);
+		provide(previewImageContextKey, reactive({
+			visibleSwitching,
+			immersive: isImmersive,
+			sceneType: ref(null),
+			close
+		}));
+		let startX = 0;
+		let startY = 0;
+		let lockDirection = "";
+		let downTranslateY = 0;
+		const translateY = ref(0);
+		const movable = ref(false);
+		let canResolveEnd = false;
+		const initVelocity = useInitialVelocity();
+		const resetSlideDown = () => {
+			translateY.value = 0;
+		};
+		const onTouchStart = (event) => {
+			if (isImmersive.value) return;
+			const { clientX, clientY } = event.touches[0];
+			startX = clientX;
+			startY = clientY;
+			initVelocity.start(clientX, clientY);
+			downTranslateY = translateY.value;
+			movable.value = true;
+		};
+		const onTouchMove = (event) => {
+			if (isImmersive.value || !movable.value || lockDirection && lockDirection !== "y") return;
+			const { clientX, clientY } = event.touches[0];
+			const deltaX = clientX - startX;
+			const deltaY = clientY - startY;
+			initVelocity.move(clientX, clientY);
+			if (!lockDirection) lockDirection = Math.abs(deltaX) >= Math.abs(deltaY) ? "x" : "y";
+			if (lockDirection !== "y") return;
+			let nextTranslateY = downTranslateY + deltaY;
+			translateY.value = nextTranslateY;
+			canResolveEnd = true;
+		};
+		const onTouchEnd = () => {
+			if (canResolveEnd) {
+				const velocity = initVelocity.end();
+				const y = translateY.value;
+				const dependsOnSpeed = Math.abs(velocity.y) > .5;
+				if (dependsOnSpeed && velocity.y > 0 || !dependsOnSpeed && y >= CLOSE_THRESHOLD) close();
+				else translateY.value = 0;
+			}
+			movable.value = false;
+			lockDirection = "";
+			canResolveEnd = false;
+		};
+		const onPointerDown = usePointerDown(onTouchStart, onTouchMove, onTouchEnd);
+		const immersiveStyle = computed(() => {
+			const scale = translateY.value === 0 ? 1 : clamp((SCALE_THRESHOLD - translateY.value) / SCALE_THRESHOLD, .1, 1);
+			return {
+				transform: `translate3d(0,${translateY.value}px,0) scale(${scale})`,
+				transition: movable.value ? "none" : `transform 300ms`,
+				opacity: scale
+			};
+		});
+		const current = useModel(props, "current");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(popup_default, {
+				effect: "full-fade",
+				"overlay-class": [
+					unref(bem).e("overlay"),
+					unref(bem).is("preview-image"),
+					unref(bem).is("immersive", isImmersive.value)
+				],
+				visible: unref(innerVisible),
+				onVisibleHook
+			}, {
+				default: withCtx(() => [createElementVNode("div", {
+					class: normalizeClass([unref(bem).b(), unref(bem).is("immersive", isImmersive.value)]),
+					style: normalizeStyle(immersiveStyle.value),
+					onTouchstart: onTouchStart,
+					onTouchmove: onTouchMove,
+					onTouchend: onTouchEnd,
+					onTouchcancel: onTouchEnd,
+					onPointerdown: _cache[1] || (_cache[1] = (...args) => unref(onPointerDown) && unref(onPointerDown)(...args))
+				}, [createVNode(unref(swiper_default), {
+					modelValue: unref(current),
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(current) ? current.value = $event : null),
+					loop: "",
+					duration: visibleSwitching.value ? 0 : 300,
+					"space-between": 20,
+					class: normalizeClass([unref(bem).e("swiper"), unref(bem).is("preview-image")])
+				}, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.urls, (url, index) => {
+						return openBlock(), createBlock(unref(swiper_item_default), { key: index }, {
+							default: withCtx(() => [createVNode(preview_image_item_default, { url }, null, 8, ["url"])]),
+							_: 2
+						}, 1024);
+					}), 128))]),
+					_: 1
+				}, 8, [
+					"modelValue",
+					"duration",
+					"class"
+				])], 38), createElementVNode("div", { class: normalizeClass(unref(bem).e("toolbar")) }, [createElementVNode("div", { class: normalizeClass(unref(bem).e("indicator")) }, toDisplayString(unref(current) + 1) + " / " + toDisplayString(__props.urls.length), 3)], 2)]),
+				_: 1
+			}, 8, ["overlay-class", "visible"]);
+		};
+	}
+});
+//#endregion
+export { preview_image_default as default };

package/components/progress-bar/common.d.ts

@@ -0,0 +1,16 @@
+import { type DefaultProps } from '../config';
+export interface ProgressBarProps {
+    percent?: number;
+    inside?: boolean;
+    color?: string;
+    trackColor?: string;
+    thickness?: string;
+    showText?: boolean;
+    striped?: boolean;
+    animated?: boolean;
+    status?: 'success' | 'warning' | 'error';
+}
+export declare const defaultProgressBarProps: DefaultProps<ProgressBarProps>;
+export interface ProgressBarSlots {
+    default?(props: Record<string, never>): any;
+}

package/components/progress-bar/common.js

@@ -0,0 +1,7 @@
+//#region packages/sard/components/progress-bar/common.ts
+const defaultProgressBarProps = {
+	percent: 0,
+	showText: true
+};
+//#endregion
+export { defaultProgressBarProps };

package/components/progress-bar/index.css

@@ -0,0 +1 @@
+:root{--s-progress-bar-height:4px;--s-progress-bar-border-radius:var(--s-border-radius-full);--s-progress-bar-track-bg:var(--s-fill-color-secondary);--s-progress-bar-fill-font-size:var(--s-font-size);--s-progress-bar-fill-color:var(--s-white);--s-progress-bar-fill-bg:var(--s-color-primary);--s-progress-bar-text-font-size:var(--s-font-size);--s-progress-bar-text-margin-start:var(--s-size-xs);--s-progress-bar-text-margin-end:var(--s-size-xs);--s-progress-bar-inside-height:var(--s-size);--s-progress-bar-inside-text-font-size:var(--s-font-size-sm);--s-progress-bar-striped-width:var(--s-size);--s-progress-bar-status-margin-start:var(--s-size-xs);--s-progress-bar-color-success:var(--s-color-success);--s-progress-bar-color-warning:var(--s-color-warning);--s-progress-bar-color-error:var(--s-color-danger)}.s-progress-bar{display:flex;align-items:center}.s-progress-bar__track{flex:1;height:var(--s-progress-bar-height);border-radius:var(--s-progress-bar-border-radius);background:var(--s-progress-bar-track-bg);overflow:hidden}.s-progress-bar__fill{display:flex;align-items:center;height:100%;border-radius:var(--s-progress-bar-border-radius);font-size:var(--s-progress-bar-fill-font-size);color:var(--s-progress-bar-fill-color);background:var(--s-progress-bar-fill-bg);transition:width var(--s-duration-slow)}.s-progress-bar__text{flex:none;font-size:var(--s-progress-bar-text-font-size);margin-inline-start:var(--s-progress-bar-text-margin-start)}.s-progress-bar__status{margin-inline-start:var(--s-progress-bar-status-margin-start);line-height:var(--s-line-height-none)}.s-progress-bar--inside .s-progress-bar__track{height:var(--s-progress-bar-inside-height)}.s-progress-bar--inside .s-progress-bar__text{margin-inline-start:auto;padding-inline-start:var(--s-progress-bar-text-margin-start);margin-inline-end:var(--s-progress-bar-text-margin-end);font-size:var(--s-progress-bar-inside-text-font-size)}.s-progress-bar--striped .s-progress-bar__fill{background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-size:var(--s-progress-bar-striped-width) var(--s-progress-bar-striped-width)}.s-progress-bar--animated .s-progress-bar__fill{animation:1s linear infinite s-progress-bar-stripes}@keyframes s-progress-bar-stripes{0%{background-position-x:var(--s-progress-bar-striped-width)}}.s-progress-bar--success .s-progress-bar__fill{background:var(--s-progress-bar-color-success)}.s-progress-bar--success .s-progress-bar__status{color:var(--s-progress-bar-color-success)}.s-progress-bar--warning .s-progress-bar__fill{background:var(--s-progress-bar-color-warning)}.s-progress-bar--warning .s-progress-bar__status{color:var(--s-progress-bar-color-warning)}.s-progress-bar--error .s-progress-bar__fill{background:var(--s-progress-bar-color-error)}.s-progress-bar--error .s-progress-bar__status{color:var(--s-progress-bar-color-error)}

package/components/progress-bar/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _ProgressBar from './progress-bar.vue';
+export declare const ProgressBar: EnhancedComponent<typeof _ProgressBar>;
+export default ProgressBar;
+export type { ProgressBarProps, ProgressBarSlots } from './common';

package/components/progress-bar/index.js

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

package/components/progress-bar/progress-bar.d.ts

@@ -0,0 +1,21 @@
+import { type ProgressBarProps, type ProgressBarSlots } from './common';
+type __VLS_Slots = ProgressBarSlots;
+declare const __VLS_base: import("vue").DefineComponent<ProgressBarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressBarProps> & Readonly<{}>, {
+    animated: boolean;
+    color: string;
+    status: "success" | "warning" | "error";
+    inside: boolean;
+    percent: number;
+    trackColor: string;
+    thickness: string;
+    showText: boolean;
+    striped: 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/progress-bar/progress-bar.js

@@ -0,0 +1,95 @@
+import { createBem } from "../../utils/bem.js";
+import { defaultProgressBarProps } from "./common.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString, unref } from "vue";
+import { CheckCircleFill, WarningFill, XCircleFill } from "@sard/icons";
+//#region packages/sard/components/progress-bar/progress-bar.vue
+var progress_bar_default = /*@__PURE__*/ defineComponent({
+	__name: "progress-bar",
+	props: /*@__PURE__*/ mergeDefaults({
+		percent: {
+			type: Number,
+			required: false
+		},
+		inside: {
+			type: Boolean,
+			required: false
+		},
+		color: {
+			type: String,
+			required: false
+		},
+		trackColor: {
+			type: String,
+			required: false
+		},
+		thickness: {
+			type: String,
+			required: false
+		},
+		showText: {
+			type: Boolean,
+			required: false
+		},
+		striped: {
+			type: Boolean,
+			required: false
+		},
+		animated: {
+			type: Boolean,
+			required: false
+		},
+		status: {
+			type: String,
+			required: false
+		}
+	}, defaultProgressBarProps),
+	setup(__props) {
+		const props = __props;
+		const bem = createBem("progress-bar");
+		const progressBarClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m("inside", props.inside),
+				bem.m("striped", props.striped),
+				bem.m("animated", props.animated),
+				bem.m(props.status, props.status)
+			];
+		});
+		const trackStyle = computed(() => {
+			return {
+				height: props.thickness,
+				backgroundColor: props.trackColor
+			};
+		});
+		const fillStyle = computed(() => {
+			return {
+				width: `${props.percent}%`,
+				backgroundColor: props.color
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(progressBarClass.value) }, [
+				createElementVNode("div", {
+					class: normalizeClass(unref(bem).e("track")),
+					style: normalizeStyle(trackStyle.value)
+				}, [createElementVNode("div", {
+					class: normalizeClass(unref(bem).e("fill")),
+					style: normalizeStyle(fillStyle.value)
+				}, [__props.showText && __props.inside ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(bem).e("text"))
+				}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.percent) + "%", 1)])], 2)) : createCommentVNode("v-if", true)], 6)], 6),
+				__props.showText && !__props.inside && !__props.status ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(bem).e("text"))
+				}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.percent) + "%", 1)])], 2)) : createCommentVNode("v-if", true),
+				__props.status ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(bem).e("status"))
+				}, [__props.status === "success" ? (openBlock(), createBlock(unref(CheckCircleFill), { key: 0 })) : __props.status === "warning" ? (openBlock(), createBlock(unref(WarningFill), { key: 1 })) : __props.status === "error" ? (openBlock(), createBlock(unref(XCircleFill), { key: 2 })) : createCommentVNode("v-if", true)], 2)) : createCommentVNode("v-if", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { progress_bar_default as default };

package/components/progress-circle/common.d.ts

@@ -0,0 +1,13 @@
+import { type DefaultProps } from '../config';
+export interface ProgressCircleProps {
+    percent?: number;
+    color?: string;
+    trackColor?: string;
+    thickness?: number;
+    size?: string;
+    status?: 'success' | 'warning' | 'error';
+}
+export declare const defaultProgressCircleProps: DefaultProps<ProgressCircleProps>;
+export interface ProgressCircleSlots {
+    default?(props: Record<string, never>): any;
+}