sard 1.0.0 → 1.0.1

package/components/notify/notify.js

@@ -0,0 +1,133 @@
+import { createBem } from "../../utils/bem.js";
+import { useTimeout } from "../../use/useTimeout.js";
+import "../../use/index.js";
+import "../../utils/index.js";
+import popup_default from "../popup/popup.js";
+import status_bar_default from "../status-bar/status-bar.js";
+import { defaultNotifyProps } from "./common.js";
+import { computed, createBlock, createCommentVNode, createElementVNode, createTextVNode, defineComponent, mergeDefaults, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, useSlots, watch, withCtx } from "vue";
+//#region packages/sard/components/notify/notify.vue
+var notify_default = /*@__PURE__*/ defineComponent({
+	__name: "notify",
+	props: /*@__PURE__*/ mergeDefaults({
+		type: {
+			type: String,
+			required: false
+		},
+		message: {
+			type: String,
+			required: false
+		},
+		color: {
+			type: String,
+			required: false
+		},
+		background: {
+			type: String,
+			required: false
+		},
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		position: {
+			type: String,
+			required: false
+		},
+		timeout: {
+			type: Number,
+			required: false
+		},
+		statusBar: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultNotifyProps),
+	emits: [
+		"click",
+		"update:visible",
+		"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;
+		useSlots();
+		const emit = __emit;
+		const bem = createBem("notify");
+		const effect = computed(() => {
+			return {
+				top: "slide-top",
+				bottom: "slide-bottom"
+			}[props.position];
+		});
+		const innerVisible = ref(props.visible);
+		const hideTimer = useTimeout();
+		const hide = () => {
+			innerVisible.value = false;
+			emit("update:visible", false);
+		};
+		const reHideLater = () => {
+			hideTimer.clear();
+			nextTick(() => {
+				if (props.timeout > 0) hideTimer.set(hide, props.timeout);
+			});
+		};
+		watch(() => props.visible, () => {
+			innerVisible.value = props.visible;
+			if (props.visible) {
+				if (props.timeout > 0) hideTimer.set(hide, props.timeout);
+			}
+		});
+		const onVisibleHook = (name, el) => {
+			emit("visible-hook", name, el);
+			emit(name, el);
+		};
+		const onClick = (event) => {
+			emit("click", event);
+		};
+		__expose({
+			reHideLater,
+			cancelHide: () => {
+				hideTimer.clear();
+			}
+		});
+		const notifyClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m(props.type),
+				bem.m(props.position)
+			];
+		});
+		const notifyStyle = computed(() => {
+			return {
+				backgroundColor: props.background,
+				color: props.color
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(popup_default, {
+				visible: innerVisible.value,
+				overlay: false,
+				effect: effect.value,
+				"lock-scroll": false,
+				onVisibleHook
+			}, {
+				default: withCtx(() => [createElementVNode("div", {
+					class: normalizeClass(notifyClass.value),
+					style: normalizeStyle(notifyStyle.value),
+					onClick
+				}, [__props.position === "top" && __props.statusBar ? (openBlock(), createBlock(status_bar_default, { key: 0 })) : createCommentVNode("v-if", true), createElementVNode("div", { class: normalizeClass(unref(bem).e("content")) }, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.message), 1)])], 2)], 6)]),
+				_: 3
+			}, 8, ["visible", "effect"]);
+		};
+	}
+});
+//#endregion
+export { notify_default as default };

package/components/overlay/common.d.ts

@@ -0,0 +1,14 @@
+import { type DefaultProps } from '../config';
+export interface OverlayProps {
+    visible?: boolean;
+    zIndex?: number;
+    background?: string;
+    transparent?: boolean;
+}
+export declare const defaultOverlayProps: DefaultProps<OverlayProps>;
+export interface OverlaySlots {
+    default?(props: Record<string, never>): any;
+}
+export interface OverlayEmits {
+    (e: 'click', event: MouseEvent): void;
+}

package/components/overlay/common.js

@@ -0,0 +1,4 @@
+//#region packages/sard/components/overlay/common.ts
+const defaultOverlayProps = {};
+//#endregion
+export { defaultOverlayProps };

package/components/overlay/index.css

@@ -0,0 +1 @@
+.s-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--s-overlay);touch-action:none}.s-overlay--transparent{background-color:rgba(0,0,0,0)}

package/components/overlay/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Overlay from './overlay.vue';
+export declare const Overlay: EnhancedComponent<typeof _Overlay>;
+export default Overlay;
+export type { OverlayProps, OverlaySlots, OverlayEmits } from './common';

package/components/overlay/index.js

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

package/components/overlay/overlay.d.ts

@@ -0,0 +1,20 @@
+import { type OverlayProps, type OverlaySlots } from './common';
+type __VLS_Slots = OverlaySlots;
+declare const __VLS_base: import("vue").DefineComponent<OverlayProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<OverlayProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    background: string;
+    visible: boolean;
+    transparent: boolean;
+    zIndex: number;
+}, {}, {}, {}, 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/overlay/overlay.js

@@ -0,0 +1,58 @@
+import { createBem } from "../../utils/bem.js";
+import "../../utils/index.js";
+import { defaultOverlayProps } from "./common.js";
+import motion_default from "../motion/motion.js";
+import { computed, createBlock, createElementVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, renderSlot, vShow, withCtx, withDirectives, withModifiers } from "vue";
+//#region packages/sard/components/overlay/overlay.vue
+var overlay_default = /*@__PURE__*/ defineComponent({
+	__name: "overlay",
+	props: /*@__PURE__*/ mergeDefaults({
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		zIndex: {
+			type: Number,
+			required: false
+		},
+		background: {
+			type: String,
+			required: false
+		},
+		transparent: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultOverlayProps),
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("overlay");
+		const onClick = (event) => {
+			emit("click", event);
+		};
+		const overlayClass = computed(() => {
+			return [bem.b(), bem.m("transparent", props.transparent)];
+		});
+		const overlayStyle = computed(() => {
+			return {
+				zIndex: props.zIndex,
+				backgroundColor: props.background
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(motion_default, { name: "fade" }, {
+				default: withCtx(() => [withDirectives(createElementVNode("div", {
+					class: normalizeClass(overlayClass.value),
+					style: normalizeStyle(overlayStyle.value),
+					onClick,
+					onTouchmove: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop", "prevent"]))
+				}, [renderSlot(_ctx.$slots, "default")], 38), [[vShow, __props.visible]])]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { overlay_default as default };

package/components/pagination/common.d.ts

@@ -0,0 +1,28 @@
+import { type DefaultProps } from '../config';
+export interface PaginationProps {
+    total?: number;
+    pageSize?: number;
+    current?: number;
+    pageCount?: number;
+    pageButtonCount?: number;
+    type?: 'simple' | 'multi';
+    ellipsis?: boolean;
+    multiCount?: number;
+}
+export declare const defaultPaginationProps: DefaultProps<PaginationProps>;
+export interface PaginationSlots {
+    prev?(props: Record<string, never>): any;
+    next?(props: Record<string, never>): any;
+}
+export interface PaginationEmits {
+    (e: 'update:current', page: number): void;
+    (e: 'change', page: number): void;
+}
+/**
+ * @description: 获取页面范围
+ * @param {number} current 当前页码
+ * @param {number} pageCount 总页数
+ * @param {number} pageItemCount 要展示的页数
+ * @return {[number, number]}
+ */
+export declare function getPageRange(current: number, pageCount: number, pageItemCount: number): number[];

package/components/pagination/common.js

@@ -0,0 +1,29 @@
+//#region packages/sard/components/pagination/common.ts
+const defaultPaginationProps = {
+	total: 0,
+	pageSize: 10,
+	current: 1,
+	pageButtonCount: 5,
+	type: "multi",
+	multiCount: 5
+};
+/**
+* @description: 获取页面范围
+* @param {number} current 当前页码
+* @param {number} pageCount 总页数
+* @param {number} pageItemCount 要展示的页数
+* @return {[number, number]}
+*/
+function getPageRange(current, pageCount, pageItemCount) {
+	let min = current - Math.ceil((pageItemCount - 1) / 2);
+	let max = current + Math.floor((pageItemCount - 1) / 2);
+	const minLack = 1 - min;
+	const maxLack = max - pageCount;
+	if (maxLack > 0) min -= maxLack;
+	if (min < 1) min = 1;
+	if (minLack > 0) max += minLack;
+	if (max > pageCount) max = pageCount;
+	return [min, max];
+}
+//#endregion
+export { defaultPaginationProps, getPageRange };

package/components/pagination/index.css

@@ -0,0 +1 @@
+:root{--s-pagination-radius:var(--s-border-radius);--s-pagination-border-color:var(--s-border-color);--s-pagination-item-height:var(--s-content-height-sm);--s-pagination-item-min-width:var(--s-content-height-sm);--s-pagination-item-padding-x:var(--s-size-xs);--s-pagination-item-font-size:var(--s-font-size);--s-pagination-item-color:var(--s-color-primary);--s-pagination-item-bg-active:var(--s-bg-color-active);--s-pagination-item-color-current:var(--s-white);--s-pagination-border-color-current:var(--s-color-primary);--s-pagination-item-bg-current:var(--s-color-primary);--s-pagination-ratio-height:var(--s-content-height-sm);--s-pagination-ratio-font-size:var(--s-font-size)}.s-pagination{display:flex;align-items:center;justify-content:flex-start}.s-pagination__item{position:relative;display:flex;flex:none;justify-content:center;align-items:center;height:var(--s-pagination-item-height);min-width:var(--s-pagination-item-min-width);padding:0 var(--s-pagination-item-padding-x);font-size:var(--s-pagination-item-font-size);color:var(--s-pagination-item-color);cursor:pointer}.s-pagination__item::after{position:absolute;top:0;left:0;z-index:1;width:200%;height:200%;border:var(--s-border-width) var(--s-border-style) rgba(0,0,0,0);transform:scale(0.5);transform-origin:0 0;pointer-events:none;touch-action:none;content:"";border-color:var(--s-pagination-border-color)}.s-pagination__item:is(.is-current){z-index:3;color:var(--s-pagination-item-color-current);background:var(--s-pagination-item-bg-current);border-color:var(--s-pagination-border-color-current)}.s-pagination__item:is(.is-disabled){color:var(--s-text-color-disabled);cursor:var(--s-cursor-disabled)}.s-pagination__item:not(.is-disabled,.is-current):active{background:var(--s-pagination-item-bg-active)}.s-pagination__prev,.s-pagination__next{display:flex;flex:1 0 auto}.s-pagination__ratio{flex:1;display:flex;align-items:center;justify-content:center;height:var(--s-pagination-ratio-height);font-size:var(--s-pagination-ratio-font-size)}.s-pagination--multi .s-pagination__item:not(:first-child)::after{border-inline-start-width:0}:root:not([dir=rtl]) .s-pagination--multi .s-pagination__item:first-child{border-top-left-radius:var(--s-pagination-radius);border-bottom-left-radius:var(--s-pagination-radius)}:root:not([dir=rtl]) .s-pagination--multi .s-pagination__item:first-child::after{border-top-left-radius:calc(var(--s-pagination-radius)*2);border-bottom-left-radius:calc(var(--s-pagination-radius)*2)}:root[dir=rtl] .s-pagination--multi .s-pagination__item:first-child{border-top-right-radius:var(--s-pagination-radius);border-bottom-right-radius:var(--s-pagination-radius)}:root[dir=rtl] .s-pagination--multi .s-pagination__item:first-child::after{border-top-right-radius:calc(var(--s-pagination-radius)*2);border-bottom-right-radius:calc(var(--s-pagination-radius)*2)}:root:not([dir=rtl]) .s-pagination--multi .s-pagination__item:last-child{border-top-right-radius:var(--s-pagination-radius);border-bottom-right-radius:var(--s-pagination-radius)}:root:not([dir=rtl]) .s-pagination--multi .s-pagination__item:last-child::after{border-top-right-radius:calc(var(--s-pagination-radius)*2);border-bottom-right-radius:calc(var(--s-pagination-radius)*2)}:root[dir=rtl] .s-pagination--multi .s-pagination__item:last-child{border-top-left-radius:var(--s-pagination-radius);border-bottom-left-radius:var(--s-pagination-radius)}:root[dir=rtl] .s-pagination--multi .s-pagination__item:last-child::after{border-top-left-radius:calc(var(--s-pagination-radius)*2);border-bottom-left-radius:calc(var(--s-pagination-radius)*2)}.s-pagination--simple .s-pagination__item{border-radius:var(--s-pagination-radius)}.s-pagination--simple .s-pagination__item::after{border-radius:calc(var(--s-pagination-radius)*2)}.s-pagination--simple .s-pagination__prev,.s-pagination--simple .s-pagination__next{flex:1;padding:0;border-radius:var(--s-pagination-radius)}

package/components/pagination/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Pagination from './pagination.vue';
+export declare const Pagination: EnhancedComponent<typeof _Pagination>;
+export default Pagination;
+export type { PaginationProps, PaginationSlots, PaginationEmits } from './common';

package/components/pagination/index.js

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

package/components/pagination/pagination.d.ts

@@ -0,0 +1,26 @@
+import { type PaginationProps, type PaginationSlots } from './common';
+type __VLS_Slots = PaginationSlots;
+declare const __VLS_base: import("vue").DefineComponent<PaginationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (page: number) => any;
+    "update:current": (page: number) => any;
+}, string, import("vue").PublicProps, Readonly<PaginationProps> & Readonly<{
+    onChange?: ((page: number) => any) | undefined;
+    "onUpdate:current"?: ((page: number) => any) | undefined;
+}>, {
+    type: "simple" | "multi";
+    total: number;
+    ellipsis: boolean;
+    current: number;
+    pageSize: number;
+    pageCount: number;
+    pageButtonCount: number;
+    multiCount: number;
+}, {}, {}, {}, 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/pagination/pagination.js

@@ -0,0 +1,130 @@
+import { createBem } from "../../utils/bem.js";
+import { clamp } from "../../utils/number.js";
+import "../../utils/index.js";
+import { useTranslateWithPrefix } from "../../locale/index.js";
+import { defaultPaginationProps, getPageRange } from "./common.js";
+import { Fragment, computed, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeDefaults, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, unref, watch } from "vue";
+//#region packages/sard/components/pagination/pagination.vue
+const _hoisted_1 = ["onClick"];
+var pagination_default = /*@__PURE__*/ defineComponent({
+	__name: "pagination",
+	props: /*@__PURE__*/ mergeDefaults({
+		total: {
+			type: Number,
+			required: false
+		},
+		pageSize: {
+			type: Number,
+			required: false
+		},
+		current: {
+			type: Number,
+			required: false
+		},
+		pageCount: {
+			type: Number,
+			required: false
+		},
+		pageButtonCount: {
+			type: Number,
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		ellipsis: {
+			type: Boolean,
+			required: false
+		},
+		multiCount: {
+			type: Number,
+			required: false
+		}
+	}, defaultPaginationProps),
+	emits: ["update:current", "change"],
+	setup(__props, { emit: __emit }) {
+		const { t } = useTranslateWithPrefix("pagination");
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("pagination");
+		const innerPageCount = computed(() => {
+			return (props.pageCount ?? Math.ceil(props.total / props.pageSize)) || 1;
+		});
+		const innerCurrent = ref(props.current);
+		watch(() => props.current, () => {
+			innerCurrent.value = props.current;
+		});
+		const range = computed(() => {
+			return getPageRange(innerCurrent.value, innerPageCount.value, props.pageButtonCount);
+		});
+		const onPrevClick = () => {
+			if (innerCurrent.value > 1) changeTo(innerCurrent.value - 1);
+		};
+		const onNextClick = () => {
+			if (innerCurrent.value < innerPageCount.value) changeTo(innerCurrent.value + 1);
+		};
+		const onItemClick = (page) => {
+			changeTo(page);
+		};
+		const changeTo = (page) => {
+			if (page !== innerCurrent.value) {
+				innerCurrent.value = page;
+				emit("update:current", page);
+				emit("change", page);
+			}
+		};
+		const multiItems = computed(() => {
+			if (props.type === "simple") return [];
+			const length = range.value[1] - range.value[0] + 1;
+			return Array(length).fill(0).map((_, i) => {
+				let page = i + range.value[0];
+				const isPrevMulti = i === 0 && page !== 1;
+				const isNextMulti = i === length - 1 && page !== innerPageCount.value;
+				const type = isPrevMulti ? -1 : isNextMulti ? 1 : 0;
+				page = type === 0 ? page : clamp(innerCurrent.value + type * props.multiCount, 1, innerPageCount.value);
+				return {
+					active: innerCurrent.value === page,
+					page,
+					key: i,
+					text: props.ellipsis && (isPrevMulti || isNextMulti) ? "..." : page
+				};
+			});
+		});
+		const paginationClass = computed(() => {
+			return [bem.b(), bem.m(props.type)];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(paginationClass.value) }, [
+				createElementVNode("div", {
+					class: normalizeClass([
+						unref(bem).e("item"),
+						unref(bem).is("disabled", innerCurrent.value === 1),
+						unref(bem).e("prev")
+					]),
+					onClick: onPrevClick
+				}, [renderSlot(_ctx.$slots, "prev", {}, () => [createTextVNode(toDisplayString(unref(t)("previous")), 1)])], 2),
+				__props.type === "simple" ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(bem).e("ratio"))
+				}, toDisplayString(innerCurrent.value) + "/" + toDisplayString(innerPageCount.value), 3)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(multiItems.value, (item) => {
+					return openBlock(), createElementBlock("div", {
+						key: item.key,
+						class: normalizeClass([unref(bem).e("item"), unref(bem).is("current", item.active)]),
+						onClick: ($event) => onItemClick(item.page)
+					}, toDisplayString(item.text), 11, _hoisted_1);
+				}), 128)),
+				createElementVNode("div", {
+					class: normalizeClass([
+						unref(bem).e("item"),
+						unref(bem).is("disabled", innerCurrent.value === innerPageCount.value),
+						unref(bem).e("next")
+					]),
+					onClick: onNextClick
+				}, [renderSlot(_ctx.$slots, "next", {}, () => [createTextVNode(toDisplayString(unref(t)("next")), 1)])], 2)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { pagination_default as default };

package/components/password-input/common.d.ts

@@ -0,0 +1,21 @@
+import { type DefaultProps } from '../config';
+export interface PasswordInputProps {
+    modelValue?: string;
+    length?: number;
+    type?: 'bordered' | 'underlined';
+    gap?: number | string;
+    plainText?: boolean;
+    focused?: boolean;
+    customKeyboard?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    validateEvent?: boolean;
+}
+export declare const defaultPasswordInputProps: DefaultProps<PasswordInputProps>;
+export interface PasswordInputEmits {
+    (e: 'update:modelValue', value: string): void;
+    (e: 'change', value: string): void;
+    (e: 'update:focused', focused: boolean): void;
+    (e: 'focus', event: FocusEvent): void;
+    (e: 'blur', event: FocusEvent): void;
+}

package/components/password-input/common.js

@@ -0,0 +1,8 @@
+//#region packages/sard/components/password-input/common.ts
+const defaultPasswordInputProps = {
+	length: 6,
+	type: "bordered",
+	validateEvent: true
+};
+//#endregion
+export { defaultPasswordInputProps };

package/components/password-input/index.css

@@ -0,0 +1 @@
+:root{--s-password-input-gap:10px;--s-password-input-border-color:var(--s-border-color);--s-password-input-radius:var(--s-border-radius);--s-password-input-border-color-active:var(--s-color-primary);--s-password-input-height:var(--s-content-height-lg);--s-password-input-ciphertext-size:10px;--s-password-input-ciphertext-bg:var(--s-text-color-primary);--s-password-input-plaintext-font-size:20px;--s-password-input-cursor-width:1px;--s-password-input-cursor-height:20px;--s-password-input-cursor-color:var(--s-text-color-primary)}.s-password-input{position:relative;display:flex;align-items:center;justify-content:center;height:var(--s-password-input-height);gap:var(--s-password-input-gap);-webkit-user-select:none;user-select:none}.s-password-input__item{position:relative;display:flex;align-items:center;justify-content:center;flex:1;height:100%}.s-password-input__plaintext{font-size:var(--s-password-input-plaintext-font-size)}.s-password-input__ciphertext{width:var(--s-password-input-ciphertext-size);height:var(--s-password-input-ciphertext-size);border-radius:var(--s-border-radius-full);background:var(--s-password-input-ciphertext-bg)}.s-password-input__cursor{width:var(--s-password-input-cursor-width);height:var(--s-password-input-cursor-height);background:var(--s-password-input-cursor-color);animation:1s s-password-input-cursor-flicker infinite}@keyframes s-password-input-cursor-flicker{0%{opacity:0}50%{opacity:1}100%{opacity:0}}.s-password-input__input-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;overflow:hidden}.s-password-input__input{position:absolute;top:0;left:-100%;width:200%;height:100%;margin:0;padding:0;border:0;opacity:0}.s-password-input--bordered .s-password-input__item{border-radius:var(--s-password-input-radius)}.s-password-input--bordered .s-password-input__item::after{position:absolute;top:0;left:0;z-index:1;width:200%;height:200%;border:var(--s-border-width) var(--s-border-style) rgba(0,0,0,0);transform:scale(0.5);transform-origin:0 0;pointer-events:none;touch-action:none;content:"";border-color:var(--s-password-input-border-color);border-radius:calc(var(--s-password-input-radius)*2)}.s-password-input--underlined .s-password-input__item::after{position:absolute;z-index:1;pointer-events:none;touch-action:none;opacity:1;content:"";left:0;right:0;transform:scaleY(0.5);bottom:0;border-bottom:var(--s-border-width) var(--s-border-style) var(--s-password-input-border-color);transform-origin:bottom center}.s-password-input--tight-bordered .s-password-input__item::after{position:absolute;top:0;left:0;z-index:1;width:200%;height:200%;border:var(--s-border-width) var(--s-border-style) rgba(0,0,0,0);transform:scale(0.5);transform-origin:0 0;pointer-events:none;touch-action:none;content:"";border-color:var(--s-password-input-border-color);border-inline-start-color:rgba(0,0,0,0)}.s-password-input--tight-bordered .s-password-input__item:first-child::after{border-inline-start-color:var(--s-password-input-border-color)}.s-password-input--bordered .s-password-input__item--active::after,.s-password-input--underlined .s-password-input__item--active::after,.s-password-input--tight-bordered .s-password-input__item--active::after{border-color:var(--s-password-input-border-color-active)}.s-password-input--tight-bordered .s-password-input__item--active:first-child::after{border-inline-start-color:var(--s-password-input-border-color-active)}.s-password-input--disabled{color:var(--s-text-color-disabled)}.s-password-input--disabled .s-password-input__item{background:var(--s-bg-color-disabled)}.s-password-input--disabled .s-password-input__ciphertext{background:var(--s-text-color-disabled)}

package/components/password-input/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _PasswordInput from './password-input.vue';
+export declare const PasswordInput: EnhancedComponent<typeof _PasswordInput>;
+export default PasswordInput;
+export type { PasswordInputProps, PasswordInputEmits } from './common';

package/components/password-input/index.js

@@ -0,0 +1,7 @@
+import { enhanceComponent } from "../../utils/component.js";
+import "../../utils/index.js";
+import password_input_default from "./password-input.js";
+//#region packages/sard/components/password-input/index.ts
+const PasswordInput = enhanceComponent(password_input_default);
+//#endregion
+export { PasswordInput, PasswordInput as default };

package/components/password-input/password-input.d.ts

@@ -0,0 +1,27 @@
+import { type PasswordInputProps } from './common';
+declare const __VLS_export: import("vue").DefineComponent<PasswordInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    blur: (event: FocusEvent) => any;
+    change: (value: string) => any;
+    focus: (event: FocusEvent) => any;
+    "update:modelValue": (value: string) => any;
+    "update:focused": (focused: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<PasswordInputProps> & Readonly<{
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
+}>, {
+    length: number;
+    readonly: boolean;
+    type: "bordered" | "underlined";
+    disabled: boolean;
+    modelValue: string;
+    gap: number | string;
+    focused: boolean;
+    validateEvent: boolean;
+    plainText: boolean;
+    customKeyboard: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;