ono-react-element 0.0.0

package/dist/types/components/Waterfall/types.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties, ReactElement } from 'react';
+export interface WaterfallProps {
+    options: number | {
+        gap: number;
+        columns: number;
+    };
+    pageSize: number;
+    bottomThreshold?: number;
+    className?: string;
+    style?: CSSProperties;
+    reloadData?: string | number;
+    updateData?: boolean;
+    loading?: boolean | ReactElement | (() => ReactElement);
+    children: (item: ImageItem, index: number) => ReactElement;
+    request: (page: number, pageSize: number) => Promise<ImageItem[]>;
+}
+export interface ImageItem {
+    id: string | number;
+    url: string;
+    width: number;
+    height: number;
+    [key: string]: any;
+}

package/dist/types/components/index.d.ts

@@ -0,0 +1,21 @@
+export * from './AutoSliderList';
+export * from './AvatarCrop';
+export * from './Button';
+export * from './Card3D';
+export * from './Checkbox';
+export * from './Input';
+export * from './List';
+export * from './MenuButton';
+export * from './Message';
+export * from './Modal';
+export * from './Pagination';
+export * from './PortalRenderer';
+export * from './Radio';
+export * from './Select';
+export * from './SvgImg';
+export * from './Switch';
+export * from './TemplateDialog';
+export * from './Toast';
+export * from './Tooltip';
+export * from './VirtualList';
+export * from './Waterfall';

package/dist/types/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export * from './useClickOutSide';
+export * from './useCountdown';
+export * from './useEventListener';
+export * from './useGetElementSize';
+export * from './useKeyPress';
+export * from './useTheme';
+export * from './useThemePro';

package/dist/types/hooks/useClickOutSide.d.ts

@@ -0,0 +1,9 @@
+import { DependencyList, RefObject } from 'react';
+type OutsideElementTypes = RefObject<HTMLElement | null> | HTMLElement | (RefObject<HTMLElement | null> | HTMLElement)[] | null;
+type ClickEventTypes = 'click' | 'contextmenu' | 'mousedown' | 'mouseup' | 'mousemove' | 'touchstart' | 'touchend';
+type OutsideOptions = {
+    event?: ClickEventTypes | ClickEventTypes[];
+    deps?: DependencyList;
+};
+export declare const useClickOutSide: (outsideElement: OutsideElementTypes, handler: (e: MouseEvent) => void, options?: OutsideOptions) => (() => void) | undefined;
+export {};

package/dist/types/hooks/useCountdown.d.ts

@@ -0,0 +1 @@
+export declare const useCountdown: (initialTime?: number, onFinish?: () => void) => readonly [number, () => void, () => void];

package/dist/types/hooks/useEventListener.d.ts

@@ -0,0 +1,8 @@
+import { DependencyList } from 'react';
+type EventListenerOptions = {
+    isDeferred?: boolean;
+    target?: EventTarget;
+    deps?: DependencyList;
+};
+export declare const useEventListener: (event: string | string[], handler: (e: Event) => void, options?: EventListenerOptions) => (() => void) | undefined;
+export {};

package/dist/types/hooks/useGetElementSize.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from 'react';
+export declare const useGetElementSize: (target?: HTMLElement | RefObject<HTMLElement | null> | (() => HTMLElement | RefObject<HTMLElement | null>) | null) => {
+    w: number;
+    h: number;
+};

package/dist/types/hooks/useKeyPress.d.ts

@@ -0,0 +1,12 @@
+import { DependencyList } from 'react';
+type KeyType = number | string | FunctionKey;
+type KeyEvent = 'keydown' | 'keyup';
+type Options = {
+    events?: KeyEvent | KeyEvent[];
+    target?: Element;
+    deps?: DependencyList;
+    exactMatch?: boolean;
+};
+type FunctionKey = 'Ctrl' | 'Shift' | 'Alt' | 'Meta' | 'CommandOrControl';
+export declare const useKeyPress: (keyFilter: KeyType | KeyType[], eventHandler: (event: KeyboardEvent, key: KeyType) => void, options?: Options) => void;
+export {};

package/dist/types/hooks/useTheme.d.ts

@@ -0,0 +1,8 @@
+export type ThemeType = 'light' | 'dark' | 'system';
+type useThemeProps = {
+    theme: ThemeType;
+    onDark: () => void;
+    onLight: () => void;
+};
+export declare const useTheme: ({ theme, onDark, onLight }: useThemeProps) => void;
+export {};

package/dist/types/hooks/useThemePro.d.ts

@@ -0,0 +1,11 @@
+import { ThemeType } from './useTheme';
+interface useThemeProps {
+    initTheme?: ThemeType;
+    themeRules?: (isDark: boolean) => void;
+}
+export declare const useThemePro: (options?: useThemeProps) => readonly [ThemeType, ({ targetTheme, element, onChange }: {
+    targetTheme: ThemeType;
+    element?: HTMLElement;
+    onChange?: () => void;
+}) => void];
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,8 @@
+import { AutoSliderList, AvatarCrop, AwaitList, Button, Card3D, Checkbox, createDataSource, Direction, EstimatedVirtualList, ImageItem, List, MenuButton, message, Modal, OnoInput, OnoSelect, OnoTextarea, Pagination, portalRenderer, Radio, RadioGroup, SvgImg, Switch, TemplateDialog, toast, Tooltip, Waterfall } from './components';
+import { useClickOutSide, useCountdown, useEventListener, useGetElementSize, useKeyPress, useTheme, useThemePro } from './hooks';
+import { default as colorUtils, adjustingColors } from './utils/colorUtils';
+import { default as common, calculateAspectRatio, checkDeviceIsMobile, checkStatusCode, copy2Clipboard, createIntersectionObserver, deepCopy, downloadFile, formatFileSize, formatSecondes, getFileName, getFileSuffix, getImageSIze, getPointDistance, getURLSearchParams, printStr, quickSort, randomString, safeCapitalizeWord, singleton } from './utils/common';
+import { base64ToBlob, base64ToFile, blobToBase64, blobToFile, fileToBase64, fileToBlob, urlToBase64, urlToBlob, urlToFile } from './utils/fileFormatConversion';
+import { convertSecondToOtherTime, formatTime, localFormat, second2Day } from './utils/formatTimeUtils';
+export { adjustingColors, AutoSliderList, AvatarCrop, AwaitList, base64ToBlob, base64ToFile, blobToBase64, blobToFile, Button, calculateAspectRatio, Card3D, Checkbox, checkDeviceIsMobile, checkStatusCode, colorUtils, common, convertSecondToOtherTime, copy2Clipboard, createDataSource, createIntersectionObserver, deepCopy, Direction, downloadFile, EstimatedVirtualList, fileToBase64, fileToBlob, formatFileSize, formatSecondes, formatTime, getFileName, getFileSuffix, getImageSIze, getPointDistance, getURLSearchParams, List, localFormat, MenuButton, message, Modal, OnoInput, OnoSelect, OnoTextarea, Pagination, portalRenderer, printStr, quickSort, Radio, RadioGroup, randomString, safeCapitalizeWord, second2Day, singleton, SvgImg, Switch, TemplateDialog, toast, Tooltip, urlToBase64, urlToBlob, urlToFile, useClickOutSide, useCountdown, useEventListener, useGetElementSize, useKeyPress, useTheme, useThemePro, Waterfall };
+export type { ImageItem };

package/dist/types/utils/colorUtils.d.ts

@@ -0,0 +1,33 @@
+export type ColorType = 'rgb' | 'hsl' | 'hex' | 'hsv' | 'rgba';
+export declare const reg: RegExp;
+export declare const formatColor: (rgb: string, a: number, type?: ColorType) => string;
+/**
+ *
+ * @param clr 颜色值 16进制 / rgb / hsl
+ * @param type 类型（light / dark）
+ * @param percentage 百分比值（0 - 100）
+ * @returns 颜色值 16进制
+ */
+export declare const adjustingColors: (clr: string, type: "light" | "dark", percentage: number) => string;
+declare const _default: {
+    randomColor: () => string;
+    rgb2hex: (rgb: string) => string;
+    hex2rgb: (hex: string) => string;
+    rgb2rgba: (bg: string, op?: number) => string | undefined;
+    rgb2hsl: (rgb: string) => string;
+    hsl2rgb: (hsl: string) => string;
+    hex2hsl: (hex: string) => string;
+    hsl2hex: (hsl: string) => string;
+    rgb2hsv: (rgb: string) => string;
+    hsv2rgb: (hsv: string) => string;
+    hex2hsv: (hex: string) => string;
+    hsv2hex: (hsv: string) => string;
+    formatColor: (rgb: string, a: number, type?: ColorType) => string;
+    getContrastColor: (backgroundColor: string) => "#000" | "#fff" | null;
+    adjustColor: (color: string, type: "lighten" | "darken", percent: number) => string;
+    isValidColor: (clr: string) => boolean;
+    getColorType: (clr: string) => "rgb" | "hex" | "unknown";
+    hex3To6: (hex: string) => string;
+    adjustingColors: (clr: string, type: "light" | "dark", percentage: number) => string;
+};
+export default _default;

package/dist/types/utils/common.d.ts

@@ -0,0 +1,96 @@
+export declare const passwordStrength: RegExp;
+export declare const randomString: (len: number) => string;
+/**
+ *
+ * @param { el: HTMLElement, str: string, speed?: number, isExtendStr?: boolean }
+ */
+export declare const printStr: ({ el, str, speed, isExtendStr, onDone }: {
+    el: HTMLElement;
+    str: string;
+    speed?: number;
+    isExtendStr?: boolean;
+    onDone?: () => void;
+}) => void;
+export declare const checkDeviceIsMobile: () => boolean;
+/**
+ * 下载文件工具函数，兼容夸克及其他主流浏览器
+ * @param file 文件路径（URL）或 Blob 对象
+ * @param fileName 下载时使用的文件名
+ */
+export declare const downloadFile: (file: string | Blob, fileName: string) => Promise<void>;
+export declare const checkStatusCode: (statusCode: number, options: {
+    onSuccess?: () => void;
+    onFail?: () => void;
+}) => void;
+export declare const getElementCenterPosition: (el: HTMLElement) => {
+    x: number;
+    y: number;
+};
+export declare const createIntersectionObserver: (observingEls: HTMLElement | HTMLElement[], callBack: (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void, options?: IntersectionObserverInit) => void;
+export declare const formatSecondes: (seconds: number) => string;
+export declare const quickSort: (arr: number[]) => number[];
+export declare const formatFileSize: (size: number, options?: {
+    unit?: "B" | "KB" | "MB" | "GB" | "TB";
+    decimalPlaces?: number;
+}) => string;
+export declare const calculateAspectRatio: (width: number, height: number) => string;
+export declare const mediaAutoplayPolicies: (media: HTMLVideoElement | HTMLAudioElement, onSuccess?: () => void, onFail?: () => void) => void;
+export declare const getURLSearchParams: (param: string) => string | null;
+export declare const singleton: <T extends new (...args: any[]) => any>(className: T) => T;
+export declare const safeCapitalizeWord: (str: string) => string;
+export declare const deepCopy: <T>(value: T) => T;
+export declare const getImageSIze: (image: string | Blob | File) => Promise<{
+    width: number;
+    height: number;
+}>;
+export declare const rafTimeout: (callback: () => void, delay: number) => void;
+export declare const addEventWithOriginHandler: (element: HTMLElement, event: "onclick" | "onmousemove", handler: (e: MouseEvent) => void) => void;
+export declare const addCommasToNumber: (num: number) => string;
+export declare const pureNumber: (str: string) => number;
+export declare const getPointDistance: (x1: number, y1: number, x2: number, y2: number) => number;
+export declare const copy2Clipboard: (text: string) => Promise<void>;
+export declare const dayOfYear: (date: Date) => number;
+export declare const grayColor: (r: number, g: number, b: number) => number;
+export declare const parseQuery: (url: string) => Record<string, string>;
+export declare const pick: (obj: Record<string, any>, ...props: string[]) => {
+    [k: string]: any;
+};
+export declare const getFileName: (fileName: string) => string;
+export declare const getFileSuffix: (fileName: string) => string;
+declare const _default: {
+    randomString: (len: number) => string;
+    printStr: ({ el, str, speed, isExtendStr, onDone }: {
+        el: HTMLElement;
+        str: string;
+        speed?: number;
+        isExtendStr?: boolean;
+        onDone?: () => void;
+    }) => void;
+    downloadFile: (file: string | Blob, fileName: string) => Promise<void>;
+    createIntersectionObserver: (observingEls: HTMLElement | HTMLElement[], callBack: (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void, options?: IntersectionObserverInit) => void;
+    checkDeviceIsMobile: () => boolean;
+    checkStatusCode: (statusCode: number, options: {
+        onSuccess?: () => void;
+        onFail?: () => void;
+    }) => void;
+    formatSecondes: (seconds: number) => string;
+    quickSort: (arr: number[]) => number[];
+    formatFileSize: (size: number, options?: {
+        unit?: "B" | "KB" | "MB" | "GB" | "TB";
+        decimalPlaces?: number;
+    }) => string;
+    calculateAspectRatio: (width: number, height: number) => string;
+    getURLSearchParams: (param: string) => string | null;
+    singleton: <T extends new (...args: any[]) => any>(className: T) => T;
+    safeCapitalizeWord: (str: string) => string;
+    deepCopy: <T>(value: T) => T;
+    getImageSIze: (image: string | Blob | File) => Promise<{
+        width: number;
+        height: number;
+    }>;
+    getPointDistance: (x1: number, y1: number, x2: number, y2: number) => number;
+    copy2Clipboard: (text: string) => Promise<void>;
+    getFileName: (fileName: string) => string;
+    getFileSuffix: (fileName: string) => string;
+};
+export default _default;

package/dist/types/utils/fileFormatConversion.d.ts

@@ -0,0 +1,10 @@
+declare const base64ToBlob: (data: string) => Blob;
+declare const base64ToFile: (base64: string, filename: string) => File;
+declare const blobToBase64: (blob: Blob) => Promise<string>;
+declare const blobToFile: (blob: Blob, filename?: string) => File;
+declare const fileToBase64: (file: File) => Promise<string>;
+declare const fileToBlob: (file: File) => Blob;
+declare const urlToBlob: (url: string) => Promise<Blob>;
+declare const urlToFile: (url: string) => Promise<File>;
+declare const urlToBase64: (url: string) => Promise<string>;
+export { base64ToBlob, base64ToFile, blobToBase64, blobToFile, fileToBase64, fileToBlob, urlToBase64, urlToBlob, urlToFile };

package/dist/types/utils/formatTimeUtils.d.ts

@@ -0,0 +1,6 @@
+type LanguageType = 'en' | 'cn';
+declare const formatTime: (number: number, format?: string) => string;
+declare const localFormat: (number: number, format?: string, language?: LanguageType) => string;
+declare const second2Day: (seconds: number, format: string) => string;
+declare const convertSecondToOtherTime: (seconds: number, type: "year" | "month" | "day" | "hour" | "minute" | "second") => number;
+export { convertSecondToOtherTime, formatTime, localFormat, second2Day };

package/dist/types/utils/viewTransitionUtils.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    changeThemeClipPathCircle: (options: {
+        element: HTMLElement;
+        duration?: number;
+        themeRules?: () => "light" | "dark";
+        onChangeTheme: (theme: "light" | "dark") => void;
+    }) => void;
+};
+export default _default;

package/dist/umd/index.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ono-auto-slider-list-container{display:flex;list-style:none;width:fit-content;position:relative;align-items:center}.ono-auto-slider-list-container .ono-auto-slider-list-slider{top:0;left:0;z-index:0;position:absolute;background:#ccc;transform-origin:top left}.ono-auto-slider-list-is-disable{cursor:not-allowed}.ono-avatar-canvas{aspect-ratio:1;overflow:hidden;position:relative}.ono-avatar-canvas .ono-avatar-mask{display:flex;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100%;position:absolute;pointer-events:none}.ono-btn-info,.ono-btn-danger,.ono-btn-warning,.ono-btn-success,.ono-btn-primary,.ono-btn-default{--btn-width: 0;--btn-height: 0;--delay: .3s;display:flex;justify-content:center;align-items:center;width:fit-content;border:none;outline:none;padding:2px 15px;font-size:16px;color:#fff;white-space:nowrap;border-radius:4px;gap:0;transition:gap .3s ease-in-out}.ono-btn-info:hover,.ono-btn-danger:hover,.ono-btn-warning:hover,.ono-btn-success:hover,.ono-btn-primary:hover,.ono-btn-default:hover{opacity:.9}.ono-btn-info:active,.ono-btn-danger:active,.ono-btn-warning:active,.ono-btn-success:active,.ono-btn-primary:active,.ono-btn-default:active{opacity:1.2}.ono-btn-default{color:#333;border:1px solid #333;background-color:transparent}.ono-btn-primary{background-color:#007bff}.ono-btn-success{background-color:#28a745}.ono-btn-warning{background-color:#ffc107}.ono-btn-danger{background-color:#dc3545}.ono-btn-info{background-color:#909399}.is-loading{opacity:.7}.is-loading .ono-btn-icon{display:grid;grid-template-columns:0fr}.is-round{border-radius:calc(var(--btn-height) / 2)}.is-icon{gap:8px}.is-circle{border-radius:50%}.is-disabled{opacity:.5;cursor:not-allowed!important}.ono-btn-icon span{overflow:hidden}.ono-loading-start{animation:loading 1s linear infinite,start var(--delay) ease-in-out forwards}.ono-loading-end{animation:loading 1s linear infinite,end var(--delay) ease-in-out forwards}@keyframes start{0%{grid-template-columns:0fr}to{grid-template-columns:1fr}}@keyframes end{0%{grid-template-columns:1fr}to{grid-template-columns:0fr}}.ono-card{overflow:hidden;transition:all .3s linear,width 0s,height 0s}.ono-card:hover{box-shadow:var(--sd)}.ono-checkbox-border,.ono-checkbox-line{--border-color: #333;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;width:20px;height:20px;position:relative;border:1px solid var(--border-color);background:transparent;transition:background .1s,border .1s}.ono-checkbox-border:checked,.ono-checkbox-line:checked{background:var(--checkedColor)}.ono-checkbox-border:checked:after,.ono-checkbox-line:checked:after{content:"";position:absolute;width:calc(var(--w) / 3 * 2);top:50%;left:50%;transform:translate(-50%,calc(-50% - var(--w) / 24 * 3)) rotate(-45deg);height:calc(var(--w) / 8 * 3);border:calc(var(--w) / 8) solid #fff;border-top:none;border-right:none}.ono-checkbox-border:indeterminate,.ono-checkbox-line:indeterminate{background:var(--indeterminateColor)}.ono-checkbox-border:indeterminate:after,.ono-checkbox-line:indeterminate:after{top:50%;left:50%;content:"";background:#fff;position:absolute;height:calc(var(--w) / 7);width:calc(var(--w) / 5 * 3.5);transform:translate(-50%,-50%);border-radius:calc(var(--w) / 10)}.ono-checkbox-border:indeterminate:after{content:"";width:100%;height:100%;background:transparent;border:calc(var(--w) / 8) solid #fff}.ono-input,.ono-textarea .ono-textarea-wrapper{color:#333;display:flex;font-size:16px;overflow:hidden;line-height:24px;border-radius:6px;align-items:center}.ono-input input[type=password],.ono-textarea .ono-textarea-wrapper input[type=password]{border:none;outline:none;background-color:transparent;font-family:inherit;font-size:inherit;padding:0;margin:0}.ono-input input[type=password]::-ms-reveal,.ono-textarea .ono-textarea-wrapper input[type=password]::-ms-reveal,.ono-input input[type=password]::-ms-clear,.ono-textarea .ono-textarea-wrapper input[type=password]::-ms-clear{display:none}.ono-input input[type=password]::-webkit-inner-spin-button,.ono-textarea .ono-textarea-wrapper input[type=password]::-webkit-inner-spin-button,.ono-input input[type=password]::-webkit-outer-spin-button,.ono-textarea .ono-textarea-wrapper input[type=password]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ono-input .ono-prepend,.ono-textarea .ono-textarea-wrapper .ono-prepend{flex-shrink:0;padding:4px 12px;background:#d9d9d9;border:1px solid #999;border-right:none;border-radius:6px 0 0 6px;color:inherit;font-size:inherit;line-height:inherit}.ono-input .ono-input-wrapper,.ono-textarea .ono-textarea-wrapper .ono-input-wrapper{gap:4px;width:100%;display:flex;padding:4px 12px;align-items:center;outline:none;color:inherit;font-size:inherit;line-height:inherit;background:#f5f5f5;cursor:text}.ono-input .ono-input-wrapper .ono-append,.ono-textarea .ono-textarea-wrapper .ono-input-wrapper .ono-append{display:flex;justify-content:center;align-items:center;flex-shrink:0;color:inherit;font-size:inherit;line-height:inherit}.ono-input .ono-input-wrapper .ono-input-inner,.ono-textarea .ono-textarea-wrapper .ono-input-wrapper .ono-input-inner{flex:1;border:none;outline:none;color:inherit;font-size:inherit;line-height:inherit;background:transparent;cursor:inherit}.ono-input .ono-input-wrapper .ono-suffix,.ono-textarea .ono-textarea-wrapper .ono-input-wrapper .ono-suffix{display:flex;justify-content:center;align-items:center;gap:8px;flex-shrink:0;color:inherit;font-size:inherit;line-height:inherit}.ono-input .ono-input-wrapper .ono-suffix .ono-clear-icon,.ono-textarea .ono-textarea-wrapper .ono-input-wrapper .ono-suffix .ono-clear-icon{width:12px;height:12px;cursor:pointer}.ono-input .ono-input-wrapper .ono-suffix .ono-clear-icon .ono-input-icon,.ono-textarea .ono-textarea-wrapper .ono-input-wrapper .ono-suffix .ono-clear-icon .ono-input-icon{width:100%;height:100%;color:#999;transition:color .3s}.ono-input .ono-input-wrapper .ono-suffix .ono-clear-icon .ono-input-icon:hover,.ono-textarea .ono-textarea-wrapper .ono-input-wrapper .ono-suffix .ono-clear-icon .ono-input-icon:hover{color:#666}.ono-input .ono-input-wrapper .ono-suffix .ono-eye-icon,.ono-textarea .ono-textarea-wrapper .ono-input-wrapper .ono-suffix .ono-eye-icon{width:16px;height:16px;cursor:pointer}.ono-input .ono-input-wrapper .ono-suffix .ono-eye-icon .icon,.ono-textarea .ono-textarea-wrapper .ono-input-wrapper .ono-suffix .ono-eye-icon .icon{width:100%;height:100%;color:#999;transition:color .3s}.ono-input .ono-input-wrapper .ono-suffix .ono-eye-icon .icon:hover,.ono-textarea .ono-textarea-wrapper .ono-input-wrapper .ono-suffix .ono-eye-icon .icon:hover{color:#333}.ono-input .ono-input-wrapper .ono-suffix .ono-count,.ono-textarea .ono-textarea-wrapper .ono-input-wrapper .ono-suffix .ono-count{color:#999;font-size:inherit;line-height:inherit}.ono-input .ono-append,.ono-textarea .ono-textarea-wrapper .ono-append{flex-shrink:0;padding:4px 12px;background:#d9d9d9;border:1px solid #999;border-left:none;border-radius:0 6px 6px 0;color:inherit;font-size:inherit;line-height:inherit}.ono-textarea{gap:4px;width:100%;display:flex;flex-direction:column}.ono-textarea .ono-textarea-wrapper{width:100%;min-height:100%;outline:none;flex-shrink:0;display:initial;padding:0;background:#f5f5f5;border:1px solid #999}.ono-textarea .ono-textarea-wrapper .ono-textarea-inner{width:100%;height:100%;outline:none;color:inherit;font-size:inherit;line-height:inherit;border-radius:inherit;padding:4px 12px;display:initial;overflow:initial;background:none;border:none}.ono-textarea .ono-count-bar{width:100%;color:#999;text-align:right;font-size:16px;line-height:24px}.ono-input-border .ono-input-wrapper{border-radius:inherit;border:1px solid #999}.ono-input-border:has(.ono-prepend) .ono-input-wrapper{border-top-left-radius:0;border-bottom-left-radius:0}.ono-input-border:has(.ono-append) .ono-input-wrapper{border-top-right-radius:0;border-bottom-right-radius:0}.ono-scrollbar{scrollbar-width:none}.ono-scrollbar::-webkit-scrollbar{width:0}.ono-input-is-focus{border:var(--ono-input-border)!important;box-shadow:var(--ono-input-box-shadow)}.ono-input-is-disabled{color:#999;-webkit-user-select:none;user-select:none;background:#d9d9d9;cursor:not-allowed}.ono-input-is-disabled .ono-input-wrapper,.ono-input-is-disabled .ono-textarea-wrapper{pointer-events:none}.ono-menu-button{display:flex;justify-content:center;align-items:center;flex-direction:column;border:none;padding:0;margin:0;outline:none;position:relative;overflow:hidden;cursor:pointer;z-index:10}.ono-menu-button span{position:absolute}.ono-message{top:0;gap:8px;left:50%;padding:8px;color:#333;display:flex;position:fixed;font-size:16px;line-height:24px;border-radius:6px;background:#fff;align-items:center;transform-origin:top left;box-shadow:0 4px 8px #0003}.ono-message .ono-type-icon{width:20px;height:20px}.ono-info-icon{width:18px;height:18px}.ono-message-enter{animation:enter var(--speed) ease-in-out forwards}.ono-message-leave{pointer-events:none;animation:leave var(--speed) ease-in-out forwards}.ono-message-success.ono-message-color{color:#52c41a;background:#f6ffed;border:1px solid #d9f7be}.ono-message-warning.ono-message-color{color:#faad14;background:#fffbe6;border:1px solid #fff1b8}.ono-message-error.ono-message-color{color:#ff4d4f;background:#fff1f0;border:1px solid #ffccc7}.ono-message-info.ono-message-color{color:#8c8c8c;background:#f5f5f5;border:1px solid #f0f0f0}.ono-clear-icon{width:16px;height:16px;color:#999}.ono-loading{animation:loading 1s linear infinite}@keyframes enter{0%{opacity:0}to{opacity:1}}@keyframes leave{0%{opacity:1}to{opacity:0}}.ono-modal{--width: 416px;--color: #333;--themeColor: #5644b8;--themeHoverColor: #8676de;--themeActiveColor: #352494;--themeDisabledClr: #9587e7;background:transparent}.ono-modal button{background:none;outline:none;border:none;padding:0}.ono-modal-box{--top: 0;--left: 0;top:50%;left:50%;gap:12px;display:flex;padding:24px;position:fixed;background:#fff;border-radius:6px;width:var(--width);color:var(--color);flex-direction:column;transform:translate(-50%,-50%)}.ono-modal-box-body{display:flex}.ono-modal-box-body-contentBar{gap:8px;display:flex;align-items:start;justify-content:start;flex-direction:column}.ono-modal-box-body-contentBar-title{font-weight:600;line-height:24px}.ono-modal-box-body-contentBar-content{font-size:14px;line-height:22px}.ono-modal-box-footer{display:flex;justify-content:start;align-items:center;margin-left:auto;gap:16px}.ono-modal-box-footer .ono-modal-box-footer-confirmBtn,.ono-modal-box-footer .ono-modal-box-footer-cancelBtn{display:flex;padding:4px 16px;-webkit-user-select:none;user-select:none;border-radius:6px;width:fit-content;align-items:center;justify-content:center;transition:all .2s ease-in-out}.ono-modal-box-footer-cancelBtn{color:#333;background:#fff;border:1px solid #ccc}.ono-modal-box-footer-cancelBtn:hover{color:var(--themeHoverColor);border:1px solid var(--themeHoverColor)}.ono-modal-box-footer-cancelBtn:active{color:var(--themeActiveColor);border:1px solid var(--themeActiveColor)}.ono-modal-box-footer-cancelBtn:disabled{color:#ccc;cursor:no-drop;border:1px solid #ccc}.ono-modal-box-footer-confirmBtn{gap:8px;color:#f5f5f5;background:var(--themeColor)}.ono-modal-box-footer-confirmBtn-loading{width:16px;height:16px;animation:loading 1s linear infinite}.ono-modal-box-footer-confirmBtn:hover{background:var(--themeHoverColor)}.ono-modal-box-footer-confirmBtn:active{background:var(--themeActiveColor)}.ono-modal-box-footer-confirmBtn:disabled{cursor:no-drop;background:var(--themeDisabledClr)}.ono-modal::backdrop{background:#00000080;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.ono-modal-enter{animation:enter .3s forwards}.ono-modal-leave{animation:leave .3s forwards}@keyframes enter{0%{opacity:0;top:var(--top);left:var(--left);transform:translate(-50%,-50%) scale(0)}to{top:50%;left:50%;opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes leave{0%{top:50%;left:50%;opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;top:var(--top);left:var(--left);transform:translate(-50%,-50%) scale(0)}}@keyframes loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ono-pagination{display:flex;justify-content:center;align-items:center;gap:16px}.ono-pagination-base,.ono-pagination-btn{list-style:none;-webkit-user-select:none;user-select:none;cursor:pointer}.ono-pagination-btn{display:flex;justify-content:center;align-items:center;background:#ccc;width:fit-content;padding:0 10px;aspect-ratio:2/1}.ono-pagination-btn-active{color:#fff;background:#07c}.ono-radio-group{gap:4px;display:flex;width:fit-content;align-items:flex-start;justify-content:flex-start}.ono-radio-box{display:flex;justify-content:center;align-items:center;gap:var(--gap);width:fit-content}.ono-radio-box .ono-radio{flex-shrink:0;width:var(--w);height:var(--w);border-radius:50%;position:relative;border:1px solid #424242;background:var(--unCheckedColor)}.ono-radio-box .ono-radio input[type=radio]{width:0;height:0;opacity:0}.ono-radio-box .ono-radio:has(input[type=radio]:checked){background:var(--checkedColor)}.ono-radio-box .ono-radio:has(input[type=radio]:checked):after{top:50%;left:50%;width:50%;height:50%;content:"";border-radius:50%;position:absolute;background-color:#fff;transform:translate(-50%,-50%)}.ono-select{width:100%}.ono-select .ono-select-arrow-down-icon{width:12px;height:12px;color:#666;transition:transform .2s linear}.ono-select .ono-select-arrow-down-active{transform:rotate(180deg)}.ono-option{padding:8px;background:#fff;box-shadow:0 4px 10px #0000001a;z-index:9999}.ono-option .ono-option-item{margin:0;padding:0;width:100%;border:none;outline:none;display:block;background:transparent}.ono-option .ono-option-item .ono-option-item-content,.ono-option .ono-option-item .ono-option-item-content-no-data{width:100%;padding:4px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:4px;font-weight:500;text-align:start}.ono-option .ono-option-item .ono-option-item-content:hover,.ono-option .ono-option-item .ono-option-item-content-no-data:hover{background:#ccc}.ono-option .ono-option-item .ono-option-item-content-active{color:#5644b8;font-weight:600}.ono-option .ono-option-item .ono-option-item-content-disabled{color:#ccc;cursor:not-allowed}.ono-option .ono-option-item .ono-option-item-content-disabled:hover,.ono-option .ono-option-item .ono-option-item-content-no-data:hover{background:transparent}.ono-select-readonly{cursor:pointer!important}.ono-tooltip-popper{background:#333;color:#fff;font-weight:700;padding:4px 8px;font-size:13px;border-radius:4px}.ono-tooltip-popper .ono-tooltip-popper-arrow,.ono-tooltip-popper .ono-tooltip-popper-arrow:before{position:absolute;width:8px;height:8px;background:inherit}.ono-tooltip-popper .ono-tooltip-popper-arrow{visibility:hidden}.ono-tooltip-popper .ono-tooltip-popper-arrow:before{visibility:visible;content:"";transform:rotate(45deg)}.ono-tooltip-popper[data-popper-placement^=top]>.ono-tooltip-popper-arrow{bottom:-4px}.ono-tooltip-popper[data-popper-placement^=bottom]>.ono-tooltip-popper-arrow{top:-4px}.ono-tooltip-popper[data-popper-placement^=left]>.ono-tooltip-popper-arrow{right:-4px}.ono-tooltip-popper[data-popper-placement^=right]>.ono-tooltip-popper-arrow{left:-4px}.ono-svg-img{--w: 24px;--h: 24px;--clr: #fff;width:var(--w);height:var(--h);overflow:hidden}.ono-svg-img img{width:100%;height:100%;position:relative;transform:translate(calc(-1 * var(--w)));filter:drop-shadow(var(--clr) var(--w) 0)}.ono-switch{--checkedClr: #342a7c;--uncheckedClr: rgba(0, 0, 0, .2)}.ono-switch input[type=checkbox]{width:0;height:0;margin:0;opacity:0;position:absolute}.ono-switch input[type=checkbox]:checked+.ono-switch-box{background-color:var(--checkedClr)}.ono-switch input[type=checkbox]:checked+.ono-switch-box:before{transform:translate(calc(var(--w) - var(--h)))}.ono-switch input[type=checkbox]:checked+.ono-switch-box>.ono-switch-children-bar{transform:translate(calc(var(--h) / 8))}.ono-switch.ono-switch-is-disabled .ono-switch-box{opacity:.6;cursor:not-allowed}.ono-switch .ono-switch-box{width:var(--w);height:var(--h);display:flex;flex-shrink:0;cursor:pointer;overflow:hidden;position:relative;border-radius:calc(var(--h) / 2);background-color:var(--uncheckedClr)}.ono-switch .ono-switch-box:before{top:calc(var(--h) / 8);left:calc(var(--h) / 8);width:calc(var(--h) * 3 / 4);content:"";display:block;aspect-ratio:1;border-radius:50%;background:#fff;position:absolute;transition:transform .3s}.ono-switch .ono-switch-children-bar{display:flex;position:absolute;top:calc(var(--h) / 8);transform:translate(calc((var(--w) - var(--h) * 9 / 8) * -1))}.ono-switch .ono-switch-children-bar .ono-switch-children{display:flex;justify-content:center;align-items:center;width:calc(var(--w) - var(--h));height:calc(var(--h) / 4 * 3);min-width:fit-content;text-wrap:nowrap}.ono-switch .ono-switch-children-bar .ono-switch-slider{width:calc(var(--h) * 3 / 4);aspect-ratio:1}.ono-mask{top:0;left:0;z-index:9999;width:100vw;height:100vh;position:fixed}.ono-mask .ono-dialog{top:50%;left:50%;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 10px #0000004d}.ono-mask-enter{animation:mask-enter var(--duration) forwards}.ono-mask-leave{animation:mask-leave var(--duration) forwards}.ono-zoom-enter{animation:zoom-enter var(--duration) forwards}.ono-zoom-leave{animation:zoom-leave var(--duration) forwards}.ono-fade-enter{animation:fade-enter var(--duration) forwards}.ono-fade-leave{animation:fade-leave var(--duration) forwards}@keyframes mask-enter{0%{opacity:0}to{opacity:1}}@keyframes mask-leave{0%{opacity:1}to{opacity:0}}@keyframes zoom-enter{0%{opacity:0;top:var(--top);left:var(--left);transform:translate(-50%,-50%) scale(0)}to{top:50%;left:50%;opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes zoom-leave{0%{top:50%;left:50%;opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;top:var(--top);left:var(--left);transform:translate(-50%,-50%) scale(0)}}@keyframes fade-enter{0%{opacity:0;top:var(--top);transform:translate(-50%,-100%)}to{top:50%;opacity:1;transform:translate(-50%,-50%)}}@keyframes fade-leave{0%{top:50%;opacity:1;transform:translate(-50%,-50%)}to{opacity:0;top:var(--top);transform:translate(-50%,-100%)}}._container_3s92l_1{top:0;left:0;gap:20px;width:100vw;height:100vh;padding:20px;display:flex;position:fixed;align-items:center;pointer-events:none;flex-direction:column}._base_3s92l_15,._promise_3s92l_15{--speed: .2s;gap:8px;display:flex;align-items:center;justify-content:center;width:fit-content;height:fit-content;padding:8px 10px;border-radius:6px;background-color:#fff;-webkit-user-select:none;user-select:none;transform:translateY(0) scale(1);box-shadow:0 4px 8px #0000001a;pointer-events:initial}._enter_3s92l_32{animation:_enter_3s92l_32 var(--speed) forwards}._leave_3s92l_36{animation:_leave_3s92l_36 var(--speed) forwards}._promise_3s92l_15 ._icon_3s92l_40{animation:_loading_3s92l_1 1s linear infinite}@keyframes _enter_3s92l_32{0%{opacity:0;transform:translateY(-80%) scale(.6)}60%{opacity:1;transform:translateY(0) scale(1.1)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes _leave_3s92l_36{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-80%) scale(.6)}}@keyframes _loading_3s92l_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ono-waterfall-container{width:100%;height:100%}.ono-waterfall-content{width:100%;height:100%;overflow-y:scroll}.ono-waterfall-wrapper{width:100%;position:relative}.ono-waterfall-item{top:0;left:0;position:absolute;transform-origin:top left;transition:transform .3s ease-in-out}.ono-waterfall-loading{display:flex;justify-content:center;align-items:center;left:0;bottom:0;width:100%;z-index:10;height:100%;color:#fff;position:absolute;background:#00000080}