@laser-ui/components 0.0.1

package/upload/UploadPictureList.js

@@ -0,0 +1,62 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useImmer } from '@laser-ui/hooks';
+import { ReactComponent as InsertDriveFileTwoTone } from '@material-design-icons/svg/two-tone/insert_drive_file.svg';
+import { isNumber, isUndefined } from 'lodash';
+import { Children, cloneElement, useContext } from 'react';
+import { UploadAction } from './UploadAction';
+import { PICTURE_LIST_CLASSES, UploadContext } from './vars';
+import { useComponentProps, useNextTick, useStyled } from '../hooks';
+import { Icon } from '../icon';
+import { CircularProgress } from '../internal/circular-progress';
+import { CollapseTransition } from '../internal/transition';
+import { Progress } from '../progress';
+import { mergeCS } from '../utils';
+import { TTANSITION_DURING_BASE } from '../vars';
+export function UploadPictureList(props) {
+    const _a = useComponentProps('UploadPictureList', props), { styleOverrides, styleProvider, actions, defaultActions } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "actions", "defaultActions"]);
+    const styled = useStyled(PICTURE_LIST_CLASSES, { 'upload-picture-list': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['upload-picture-list'] }, styleOverrides);
+    const { files, onRemove } = useContext(UploadContext);
+    const nextTick = useNextTick();
+    const [removeUIDs, setRemoveUIDs] = useImmer([]);
+    return (_jsx("ul", Object.assign({}, restProps, mergeCS(styled('upload-picture-list'), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { children: files.map((file, index) => (_jsx(CollapseTransition, { originalSize: {
+                height: 'auto',
+            }, collapsedSize: {
+                height: 0,
+            }, enter: !removeUIDs.includes(file.uid), during: TTANSITION_DURING_BASE, styles: {
+                entering: {
+                    transition: ['height', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
+                },
+                leaving: {
+                    transition: ['height', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
+                },
+                leaved: { display: 'none' },
+            }, skipFirstTransition: nextTick.current ? false : true, afterLeave: () => {
+                setRemoveUIDs((draft) => {
+                    draft.splice(draft.findIndex((uid) => uid === file.uid), 1);
+                });
+                onRemove(file);
+            }, children: (collapseRef, collapseStyle) => (_jsxs("li", Object.assign({}, mergeCS(styled('upload-picture-list__item', {
+                [`upload-picture-list__item--${file.state}`]: file.state,
+            }), {
+                style: collapseStyle,
+            }), { ref: collapseRef, children: [_jsx("div", Object.assign({}, styled('upload-picture-list__thumbnail'), { children: file.state === 'progress' ? (_jsx(Icon, { size: 28, children: _jsx(CircularProgress, {}) })) : file.thumbUrl ? (_jsx("img", Object.assign({}, styled('upload-picture-list__thumbnail-img'), { src: file.thumbUrl, alt: file.name }))) : (_jsx(Icon, { size: 28, theme: file.state === 'error' ? 'danger' : 'primary', children: _jsx(InsertDriveFileTwoTone, {}) })) })), _jsx("a", Object.assign({}, styled('upload-picture-list__link', {
+                        'upload-picture-list__link.is-active': file.state === 'load' && !isUndefined(file.url),
+                    }), { href: file.url, target: "_blank", rel: "noreferrer", title: file.name, onClick: (e) => {
+                            if (defaultActions && defaultActions.preview) {
+                                e.preventDefault();
+                                defaultActions.preview(file);
+                            }
+                        }, children: file.name })), _jsx("div", Object.assign({}, styled('upload-picture-list__actions'), { children: Children.map(actions ? actions(file, index) : [_jsx(UploadAction, { preset: "remove" })], (action) => cloneElement(action, {
+                            _file: file,
+                            _defaultActions: defaultActions,
+                            _onRemove: () => {
+                                setRemoveUIDs((draft) => {
+                                    draft.push(file.uid);
+                                });
+                            },
+                        })) })), _jsx("div", Object.assign({}, styled('upload-picture-list__progress-wrapper'), { children: isNumber(file.percent) && _jsx(Progress, { percent: file.percent, label: false, lineWidth: 2 }) }))] }))) }, file.uid))) })));
+}

package/upload/UploadPreviewAction.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { UploadPreviewActionProps } from './types';
+export declare const UploadPreviewAction: import("react").ForwardRefExoticComponent<UploadPreviewActionProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/upload/UploadPreviewAction.js

@@ -0,0 +1,32 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ReactComponent as VisibilityOutlinedIcon } from '@material-design-icons/svg/outlined/visibility.svg';
+import { isUndefined } from 'lodash';
+import { forwardRef } from 'react';
+import { ACTION_CLASSES } from './vars';
+import { useComponentProps, useStyled, useTranslation } from '../hooks';
+import { Icon } from '../icon';
+import { mergeCS } from '../utils';
+export const UploadPreviewAction = forwardRef((props, ref) => {
+    var _a, _b;
+    const _c = useComponentProps('UploadPreviewAction', props), { styleOverrides, styleProvider, children, disabled = false, _file, _defaultActions, _light, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _onRemove } = _c, restProps = __rest(_c, ["styleOverrides", "styleProvider", "children", "disabled", "_file", "_defaultActions", "_light", "_onRemove"]);
+    const styled = useStyled(ACTION_CLASSES, { 'upload-action': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['upload-action'] }, styleOverrides);
+    const { t } = useTranslation();
+    return (_jsx("a", Object.assign({}, restProps, mergeCS(styled('upload-action', 'upload-action--preview', {
+        'upload-action.is-disabled': disabled || isUndefined(_file.url),
+        'upload-action--light': _light,
+    }), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { ref: ref, href: _file.url, target: (_a = restProps['target']) !== null && _a !== void 0 ? _a : '_blank', title: (_b = restProps.title) !== null && _b !== void 0 ? _b : t('Upload', 'Preview file'), onClick: (e) => {
+            var _a;
+            (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            e.stopPropagation();
+            if (_defaultActions === null || _defaultActions === void 0 ? void 0 : _defaultActions.preview) {
+                e.preventDefault();
+                _defaultActions.preview(_file);
+            }
+        }, children: children !== null && children !== void 0 ? children : (_jsx(Icon, { children: _jsx(VisibilityOutlinedIcon, {}) })) })));
+});

package/upload/index.d.ts

@@ -0,0 +1,2 @@
+export type { UploadProps, UploadButtonProps, UploadActionProps, UploadPreviewActionProps, UploadListProps, UploadPictureProps, UploadPictureListProps, } from './types';
+export { Upload } from './Upload';

package/upload/index.js

@@ -0,0 +1 @@
+export { Upload } from './Upload';

package/upload/types.d.ts

@@ -0,0 +1,78 @@
+/// <reference types="react" />
+import type { ACTION_CLASSES, BUTTON_CLASSES, CLASSES, LIST_CLASSES, PICTURE_CLASSES, PICTURE_LIST_CLASSES } from './vars';
+import type { FormControlProvider } from '../form/types';
+import type { BaseProps, CloneHTMLElement } from '../types';
+export {};
+export type UploadFileState = 'load' | 'error' | 'progress' | null;
+export interface UploadFile {
+    uid: React.Key;
+    name: string;
+    state: UploadFileState;
+    url?: string;
+    thumbUrl?: string;
+    percent?: number;
+    originFile?: File;
+    response?: any;
+}
+export interface UploadProps extends BaseProps<'upload' | 'upload-list', typeof CLASSES>, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'children' | 'list'> {
+    children: React.ReactElement | ((render: CloneHTMLElement) => JSX.Element | null);
+    formControl?: FormControlProvider;
+    model?: UploadFile[];
+    defaultModel?: UploadFile[];
+    request?: {
+        url: string | URL;
+        method?: string;
+        responseType?: XMLHttpRequestResponseType;
+        header?: {
+            [index: string]: string;
+        };
+        body?: (file: string | Blob) => Document | XMLHttpRequestBodyInit | null | undefined;
+        custom?: (xhr: XMLHttpRequest) => void;
+    };
+    max?: number;
+    drag?: boolean;
+    customUpload?: (files: FileList) => void;
+    beforeUpload?: (file: File, files: FileList) => boolean | string | Blob | Promise<boolean | string | Blob>;
+    onModelChange?: (files: UploadFile[], data: {
+        type: 'add' | 'update' | 'remove';
+        files: UploadFile[];
+    }) => void;
+    onRemove?: (file: UploadFile) => void;
+}
+export interface UploadButtonProps extends BaseProps<'upload-button', typeof BUTTON_CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    file?: UploadFile;
+    actions?: React.ReactNode[];
+    defaultActions?: {
+        preview?: (file: UploadFile) => void;
+        download?: (file: UploadFile) => void;
+    };
+    onRemove?: () => void;
+}
+export interface UploadActionProps extends BaseProps<'upload-action', typeof ACTION_CLASSES>, React.HTMLAttributes<HTMLDivElement> {
+    preset?: 'download' | 'remove';
+    disabled?: boolean;
+}
+export interface UploadPreviewActionProps extends BaseProps<'upload-action', typeof ACTION_CLASSES>, React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    disabled?: boolean;
+}
+export interface UploadListProps extends BaseProps<'upload-list', typeof LIST_CLASSES>, Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {
+    actions?: (file: UploadFile, index: number) => React.ReactNode[];
+    defaultActions?: {
+        preview?: (file: UploadFile) => void;
+        download?: (file: UploadFile) => void;
+    };
+}
+export interface UploadPictureProps extends BaseProps<'upload-picture', typeof PICTURE_CLASSES>, React.HTMLAttributes<HTMLUListElement> {
+    actions?: (file: UploadFile, index: number) => React.ReactNode[];
+    defaultActions?: {
+        preview?: (file: UploadFile) => void;
+        download?: (file: UploadFile) => void;
+    };
+}
+export interface UploadPictureListProps extends BaseProps<'upload-picture-list', typeof PICTURE_LIST_CLASSES>, Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {
+    actions?: (file: UploadFile, index: number) => React.ReactNode[];
+    defaultActions?: {
+        preview?: (file: UploadFile) => void;
+        download?: (file: UploadFile) => void;
+    };
+}

package/upload/types.js

@@ -0,0 +1 @@
+export {};

package/upload/vars.d.ts

@@ -0,0 +1,65 @@
+/// <reference types="react" />
+import type { UploadFile } from './types';
+export declare const CLASSES: {
+    upload: string;
+};
+export declare const BUTTON_CLASSES: {
+    'upload-button': string;
+    'upload-button.is-disabled': string;
+    'upload-button--load': string;
+    'upload-button--error': string;
+    'upload-button--progress': string;
+    'upload-button__thumbnail': string;
+    'upload-button__name': string;
+    'upload-button__actions': string;
+    'upload-button__icon': string;
+    'upload-button__text': string;
+};
+export declare const ACTION_CLASSES: {
+    'upload-action': string;
+    'upload-action.is-disabled': string;
+    'upload-action--light': string;
+    'upload-action--preview': string;
+};
+export declare const LIST_CLASSES: {
+    'upload-list': string;
+    'upload-list__item': string;
+    'upload-list__item--load': string;
+    'upload-list__item--error': string;
+    'upload-list__item--progress': string;
+    'upload-list__icon': string;
+    'upload-list__link': string;
+    'upload-list__link.is-active': string;
+    'upload-list__actions': string;
+    'upload-list__progress-wrapper': string;
+};
+export declare const PICTURE_CLASSES: {
+    'upload-picture': string;
+    'upload-picture__row': string;
+    'upload-picture__item': string;
+    'upload-picture__item.is-disabled': string;
+    'upload-picture__item--load': string;
+    'upload-picture__item--error': string;
+    'upload-picture__item--progress': string;
+    'upload-picture__thumbnail': string;
+    'upload-picture__name': string;
+    'upload-picture__actions': string;
+    'upload-picture__progress-text': string;
+};
+export declare const PICTURE_LIST_CLASSES: {
+    'upload-picture-list': string;
+    'upload-picture-list__item': string;
+    'upload-picture-list__item--load': string;
+    'upload-picture-list__item--error': string;
+    'upload-picture-list__item--progress': string;
+    'upload-picture-list__thumbnail': string;
+    'upload-picture-list__thumbnail-img': string;
+    'upload-picture-list__link': string;
+    'upload-picture-list__link.is-active': string;
+    'upload-picture-list__actions': string;
+    'upload-picture-list__progress-wrapper': string;
+};
+export declare const UploadContext: import("react").Context<{
+    files: UploadFile[];
+    onRemove: (file: UploadFile) => void;
+}>;

package/upload/vars.js

@@ -0,0 +1,65 @@
+import { createContext } from 'react';
+export const CLASSES = {
+    upload: '^upload',
+};
+export const BUTTON_CLASSES = {
+    'upload-button': '^upload-button',
+    'upload-button.is-disabled': 'is-disabled',
+    'upload-button--load': '^upload-button--load',
+    'upload-button--error': '^upload-button--error',
+    'upload-button--progress': '^upload-button--progress',
+    'upload-button__thumbnail': '^upload-button__thumbnail',
+    'upload-button__name': '^upload-button__name',
+    'upload-button__actions': '^upload-button__actions',
+    'upload-button__icon': '^upload-button__icon',
+    'upload-button__text': '^upload-button__text',
+};
+export const ACTION_CLASSES = {
+    'upload-action': '^upload-action',
+    'upload-action.is-disabled': 'is-disabled',
+    'upload-action--light': '^upload-action--light',
+    'upload-action--preview': '^upload-action--preview',
+};
+export const LIST_CLASSES = {
+    'upload-list': '^upload-list',
+    'upload-list__item': '^upload-list__item',
+    'upload-list__item--load': '^upload-list__item--load',
+    'upload-list__item--error': '^upload-list__item--error',
+    'upload-list__item--progress': '^upload-list__item--progress',
+    'upload-list__icon': '^upload-list__icon',
+    'upload-list__link': '^upload-list__link',
+    'upload-list__link.is-active': 'is-active',
+    'upload-list__actions': '^upload-list__actions',
+    'upload-list__progress-wrapper': '^upload-list__progress-wrapper',
+};
+export const PICTURE_CLASSES = {
+    'upload-picture': '^upload-picture',
+    'upload-picture__row': '^upload-picture__row',
+    'upload-picture__item': '^upload-picture__item',
+    'upload-picture__item.is-disabled': 'is-disabled',
+    'upload-picture__item--load': '^upload-picture__item--load',
+    'upload-picture__item--error': '^upload-picture__item--error',
+    'upload-picture__item--progress': '^upload-picture__item--progress',
+    'upload-picture__thumbnail': '^upload-picture__thumbnail',
+    'upload-picture__name': '^upload-picture__name',
+    'upload-picture__actions': '^upload-picture__actions',
+    'upload-picture__progress-text': '^upload-picture__progress-text',
+};
+export const PICTURE_LIST_CLASSES = {
+    'upload-picture-list': '^upload-picture-list',
+    'upload-picture-list__item': '^upload-picture-list__item',
+    'upload-picture-list__item--load': '^upload-picture-list__item--load',
+    'upload-picture-list__item--error': '^upload-picture-list__item--error',
+    'upload-picture-list__item--progress': '^upload-picture-list__item--progress',
+    'upload-picture-list__thumbnail': '^upload-picture-list__thumbnail',
+    'upload-picture-list__thumbnail-img': '^upload-picture-list__thumbnail-img',
+    'upload-picture-list__link': '^upload-picture-list__link',
+    'upload-picture-list__link.is-active': 'is-active',
+    'upload-picture-list__actions': '^upload-picture-list__actions',
+    'upload-picture-list__progress-wrapper': '^upload-picture-list__progress-wrapper',
+};
+export const UploadContext = createContext({
+    files: [],
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onRemove: () => { },
+});

package/utils/handleModalKeyDown.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function handleModalKeyDown(e: React.KeyboardEvent<HTMLDivElement>): void;

package/utils/handleModalKeyDown.js

@@ -0,0 +1,17 @@
+export function handleModalKeyDown(e) {
+    if (e.code === 'Tab') {
+        const focusableEls = Array.from(e.currentTarget.querySelectorAll('a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])')).filter((el) => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
+        if (e.shiftKey) {
+            if (document.activeElement === focusableEls[0]) {
+                e.preventDefault();
+                focusableEls[focusableEls.length - 1].focus({ preventScroll: true });
+            }
+        }
+        else {
+            if (document.activeElement === focusableEls[focusableEls.length - 1]) {
+                e.preventDefault();
+                focusableEls[0].focus({ preventScroll: true });
+            }
+        }
+    }
+}

package/utils/index.d.ts

@@ -0,0 +1,6 @@
+export { getHorizontalSidePosition } from './position/getHorizontalSidePosition';
+export { getPopupPosition } from './position/getPopupPosition';
+export { getVerticalSidePosition } from './position/getVerticalSidePosition';
+export { handleModalKeyDown } from './handleModalKeyDown';
+export { isPrintableCharacter } from './isPrintableCharacter';
+export { mergeCS } from './mergeCS';

package/utils/index.js

@@ -0,0 +1,6 @@
+export { getHorizontalSidePosition } from './position/getHorizontalSidePosition';
+export { getPopupPosition } from './position/getPopupPosition';
+export { getVerticalSidePosition } from './position/getVerticalSidePosition';
+export { handleModalKeyDown } from './handleModalKeyDown';
+export { isPrintableCharacter } from './isPrintableCharacter';
+export { mergeCS } from './mergeCS';

package/utils/isPrintableCharacter.d.ts

@@ -0,0 +1 @@
+export declare function isPrintableCharacter(c: string): false | RegExpMatchArray | null;

package/utils/isPrintableCharacter.js

@@ -0,0 +1,3 @@
+export function isPrintableCharacter(c) {
+    return c.length === 1 && c.match(/\S| /);
+}

package/utils/mergeCS.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare function mergeCS(target: {
+    className: string;
+    style: React.CSSProperties;
+}, source: {
+    className?: string;
+    style?: React.CSSProperties;
+}): {
+    className: string;
+    style: React.CSSProperties;
+};

package/utils/mergeCS.js

@@ -0,0 +1,6 @@
+export function mergeCS(target, source) {
+    return {
+        className: target.className + (source.className ? ` ${source.className}` : ''),
+        style: Object.assign({}, target.style, source.style),
+    };
+}

package/utils/position/getHorizontalSidePosition.d.ts

@@ -0,0 +1,14 @@
+interface HorizontalSidePosition {
+    top: number;
+    left: number;
+    transformOrigin: string;
+}
+export declare function getHorizontalSidePosition(targetEl: HTMLElement, popupSize: {
+    width: number;
+    height: number;
+}, config: {
+    placement: 'right' | 'left';
+    gap?: number;
+    inWindow?: number | false;
+}): HorizontalSidePosition;
+export {};

package/utils/position/getHorizontalSidePosition.js

@@ -0,0 +1,22 @@
+import { ROOT_DATA } from '../../root/vars';
+export function getHorizontalSidePosition(targetEl, popupSize, config) {
+    const { width, height } = popupSize;
+    const { placement, gap = 10, inWindow = false } = config;
+    const targetRect = targetEl.getBoundingClientRect();
+    let top = targetRect.top;
+    if (inWindow !== false) {
+        top = Math.min(Math.max(top, inWindow), ROOT_DATA.windowSize.height - height - inWindow);
+    }
+    let left = placement === 'right' ? targetRect.left + targetRect.width + gap : targetRect.left - width - gap;
+    if (inWindow !== false) {
+        left = Math.min(Math.max(left, inWindow), ROOT_DATA.windowSize.width - width - inWindow);
+    }
+    const transformOrigin = placement === 'right'
+        ? `left ${Math.min(targetRect.top - top + targetRect.height / 2, height)}px`
+        : `right ${Math.min(targetRect.top - top + targetRect.height / 2, height)}px`;
+    return {
+        top,
+        left,
+        transformOrigin,
+    };
+}

package/utils/position/getPopupPosition.d.ts

@@ -0,0 +1,18 @@
+import type { PopupPlacement } from '../../types';
+interface PopupPosition {
+    top: number;
+    left: number;
+    transformOrigin: string;
+    placement: PopupPlacement;
+}
+export declare function getPopupPosition(targetEl: HTMLElement, popupSize: {
+    width: number;
+    height: number;
+}, options: {
+    placement: PopupPlacement;
+    placementFallback: PopupPlacement;
+    placementFixed?: boolean;
+    gap?: number;
+    inWindow?: number | false;
+}): PopupPosition;
+export {};

package/utils/position/getPopupPosition.js

@@ -0,0 +1,170 @@
+import { ROOT_DATA } from '../../root/vars';
+export function getPopupPosition(targetEl, popupSize, options) {
+    const { width, height } = popupSize;
+    const { placement, placementFallback, placementFixed = false, gap = 10, inWindow = false } = options;
+    const bound = inWindow === false ? 0 : inWindow;
+    const targetRect = targetEl.getBoundingClientRect();
+    const updatePosition = (position) => {
+        if (inWindow !== false) {
+            position.top = Math.min(Math.max(position.top, inWindow), ROOT_DATA.windowSize.height - height - inWindow);
+            position.left = Math.min(Math.max(position.left, inWindow), ROOT_DATA.windowSize.width - width - inWindow);
+        }
+        return position;
+    };
+    const getFixedPosition = (placement) => {
+        let top = 0;
+        let left = 0;
+        let transformOrigin = 'center bottom';
+        switch (placement) {
+            case 'top':
+                top = targetRect.top - height - gap;
+                left = targetRect.left + (targetRect.width - width) / 2;
+                transformOrigin = 'center bottom';
+                break;
+            case 'top-left':
+                top = targetRect.top - height - gap;
+                left = targetRect.left;
+                transformOrigin = '20px bottom';
+                break;
+            case 'top-right':
+                top = targetRect.top - height - gap;
+                left = targetRect.left + targetRect.width - width;
+                transformOrigin = 'calc(100% - 20px) bottom';
+                break;
+            case 'right':
+                top = targetRect.top + (targetRect.height - height) / 2;
+                left = targetRect.left + targetRect.width + gap;
+                transformOrigin = 'left center';
+                break;
+            case 'right-top':
+                top = targetRect.top;
+                left = targetRect.left + targetRect.width + gap;
+                transformOrigin = 'left 12px';
+                break;
+            case 'right-bottom':
+                top = targetRect.top + targetRect.height - height;
+                left = targetRect.left + targetRect.width + gap;
+                transformOrigin = 'left calc(100% - 12px)';
+                break;
+            case 'bottom':
+                top = targetRect.top + targetRect.height + gap;
+                left = targetRect.left + (targetRect.width - width) / 2;
+                transformOrigin = 'center top';
+                break;
+            case 'bottom-left':
+                top = targetRect.top + targetRect.height + gap;
+                left = targetRect.left;
+                transformOrigin = '20px top';
+                break;
+            case 'bottom-right':
+                top = targetRect.top + targetRect.height + gap;
+                left = targetRect.left + targetRect.width - width;
+                transformOrigin = 'calc(100% - 20px) top';
+                break;
+            case 'left':
+                top = targetRect.top + (targetRect.height - height) / 2;
+                left = targetRect.left - width - gap;
+                transformOrigin = 'right center';
+                break;
+            case 'left-top':
+                top = targetRect.top;
+                left = targetRect.left - width - gap;
+                transformOrigin = 'right 12px';
+                break;
+            case 'left-bottom':
+                top = targetRect.top + targetRect.height - height;
+                left = targetRect.left - width - gap;
+                transformOrigin = 'right calc(100% - 12px)';
+                break;
+            default:
+                break;
+        }
+        return { top, left, transformOrigin };
+    };
+    if (placementFixed) {
+        const position = getFixedPosition(placement);
+        return updatePosition(Object.assign(Object.assign({}, position), { placement }));
+    }
+    else {
+        const getPosition = (placements) => {
+            let position;
+            for (const placement of placements) {
+                const { top, left, transformOrigin } = getFixedPosition(placement);
+                if (placement === placementFallback) {
+                    position = { top, left, transformOrigin, placement };
+                }
+                const inBound = [top, ROOT_DATA.windowSize.width - left - width, ROOT_DATA.windowSize.height - top - height, left].every((num) => num >= bound);
+                if (inBound) {
+                    return { top, left, transformOrigin, placement };
+                }
+            }
+            return position;
+        };
+        let position;
+        if (placement.startsWith('top')) {
+            position = getPosition([
+                placement,
+                'right',
+                'right-top',
+                'right-bottom',
+                'left',
+                'left-top',
+                'left-bottom',
+                ...(placement === 'top'
+                    ? ['bottom', 'bottom-left', 'bottom-right']
+                    : placement === 'top-left'
+                        ? ['bottom-left', 'bottom', 'bottom-right']
+                        : ['bottom-right', 'bottom', 'bottom-left']),
+            ]);
+        }
+        else if (placement.startsWith('right')) {
+            position = getPosition([
+                placement,
+                'top',
+                'top-left',
+                'top-right',
+                'bottom',
+                'bottom-left',
+                'bottom-right',
+                ...(placement === 'right'
+                    ? ['left', 'left-top', 'left-bottom']
+                    : placement === 'right-top'
+                        ? ['left-top', 'left', 'left-bottom']
+                        : ['left-bottom', 'left', 'left-top']),
+            ]);
+        }
+        else if (placement.startsWith('bottom')) {
+            position = getPosition([
+                placement,
+                'right',
+                'right-top',
+                'right-bottom',
+                'left',
+                'left-top',
+                'left-bottom',
+                ...(placement === 'bottom'
+                    ? ['top', 'top-left', 'top-right']
+                    : placement === 'bottom-left'
+                        ? ['top-left', 'top', 'top-right']
+                        : ['top-right', 'top', 'top-left']),
+            ]);
+        }
+        else {
+            position = getPosition([
+                placement,
+                'top',
+                'top-left',
+                'top-right',
+                'bottom',
+                'bottom-left',
+                'bottom-right',
+                ...(placement === 'left'
+                    ? ['right', 'right-top', 'right-bottom']
+                    : placement === 'left-top'
+                        ? ['right-top', 'right', 'right-bottom']
+                        : ['right-bottom', 'right', 'right-top']),
+            ]);
+        }
+        return updatePosition(position);
+    }
+}

package/utils/position/getVerticalSidePosition.d.ts

@@ -0,0 +1,17 @@
+import type { VerticalSidePlacement } from '../../types';
+interface VerticalSidePosition {
+    top: number;
+    left: number;
+    transformOrigin: string;
+    placement: VerticalSidePlacement;
+}
+export declare function getVerticalSidePosition(targetEl: HTMLElement, popupSize: {
+    width: number;
+    height: number;
+}, config: {
+    placement: VerticalSidePlacement;
+    placementFixed?: boolean;
+    gap?: number;
+    inWindow?: number | false;
+}): VerticalSidePosition;
+export {};