x-ui-design 1.0.31-gamma.1 → 1.0.31

package/lib/components/DatePicker/style.css

@@ -0,0 +1,318 @@
+.xUi-datepicker-container {
+    position: relative;
+    font-family: Arial, sans-serif;
+    height: max-content;
+}
+
+.xUi-datepicker-input {
+    gap: 8px;
+    padding: 3px 7px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid var(--xui-border-color);
+    border-radius: 6px;
+    background-color: transparent;
+    color: var(--xui-text-color);
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.xUi-datepicker-input.noBordered {
+    border: none !important;
+}
+
+.xUi-datepicker-input input {
+    font-size: var(--xui-font-size-sm);
+    border: none;
+    outline: none;
+    padding: 0;
+    color: var(--xui-text-color);
+}
+
+.xUi-datepicker-input:placeholder-shown {
+    text-overflow: ellipsis;
+}
+
+.xUi-datepicker-input:hover {
+    border-color: var(--xui-primary-color);
+}
+
+.xUi-datepicker-icon {
+    cursor: pointer;
+    opacity: 0.6;
+    width: 16px;
+    height: 16px;
+    transition: .3s ease;
+    color: var(--xui-text-color);
+}
+
+.xUi-datepicker-icon:hover {
+    opacity: 1;
+    color: var(--xui-primary-color);
+}
+
+.xUi-datepicker-selected-date {
+    border: none;
+    outline: none;
+    letter-spacing: 0.8px;
+    font-size: var(--xui-font-size-md);
+    color: var(--xui-text-color);
+}
+
+.xUi-datepicker-disabled {
+    background-color: var(--xui-color-disabled);
+    cursor: not-allowed;
+    opacity: 0.5;
+    border-color: var(--xui-border-color) !important;
+}
+
+.xUi-datepicker-disabled .xUi-datepicker-selected-date {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.xUi-datepicker-disabled .xUi-datepicker-icon {
+    cursor: not-allowed;
+}
+
+.xUi-datepicker-icon {
+    font-size: 16px;
+    color: #8c8c8c;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.xUi-datepicker-error {
+    border-color: var(--xui-error-color);
+}
+
+.xUi-datepicker-error .xUi-datepicker-icon,
+.xUi-datepicker-icon .error-svg-icon,
+.xUi-datepicker-error .error-svg-icon {
+    color: var(--xui-error-color);
+}
+
+.xUi-datepicker-input.sm {
+    padding: 4px 8px;
+    font-size: var(--xui-font-size-sm);
+}
+
+.xUi-datepicker-input.md {
+    padding: 8px 12px;
+    font-size: var(--xui-font-size-md);
+}
+
+.xUi-datepicker-input.lg {
+    padding: 10px 16px;
+    font-size: var(--xui-font-size-lg);
+}
+
+.xUi-datepicker-dropdown-wrapper {
+    transition:
+        opacity 0.3s ease,
+        transform 0.01s ease;
+    position: absolute;
+    z-index: 1000;
+}
+
+.xUi-datepicker-dropdown-wrapper.bottomLeft {
+    top: 100%;
+    left: 0;
+    margin-top: 4px;
+}
+.xUi-datepicker-dropdown-wrapper.bottomRight {
+    top: 100%;
+    right: 0;
+    margin-top: 4px;
+}
+
+.xUi-datepicker-dropdown-wrapper.topLeft {
+    bottom: 100%;
+    left: 0;
+    margin-bottom: 4px;
+}
+
+.xUi-datepicker-dropdown-wrapper.topRight {
+    bottom: 100%;
+    right: 0;
+    margin-bottom: 4px;
+}
+
+.xUi-datepicker-dropdown {
+    min-width: 250px;
+    padding: 12px;
+    background: var(--xui-background-color);
+    border: 1px solid var(--xui-border-color);
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.xUi-datepicker-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--xui-border-color);
+}
+
+.xUi-datepicker-day-footer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 8px;
+    padding-top: 12px;
+    border-top: 1px solid var(--xui-border-color);
+}
+
+.xUi-datepicker-nav-buttons {
+    display: flex;
+    gap: 4px;
+}
+
+.xUi-datepicker-nav-buttons button {
+    padding: 2px 6px;
+    border: none;
+    background: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.3s;
+    font-size: 20px;
+    opacity: 0.7;
+    color: var(--xui-text-color);
+}
+
+.xUi-datepicker-nav-buttons button:not(:disabled):hover {
+    color: var(--xui-primary-color);
+}
+
+.xUi-datepicker-dropdown-selects {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+}
+
+.xUi-datepicker-select,
+.xUi-datepicker-dropdown-selects button {
+    padding: 4px 8px;
+    border-radius: 4px;
+    background: var(--xui-background-color);
+    color: var(--xui-text-color);
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s;
+    border: none;
+}
+
+.xUi-datepicker-select:not(:disabled):hover,
+.xUi-datepicker-dropdown-selects button:hover {
+    color: var(--xui-primary-color);
+}
+
+.xUi-datepicker-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2px;
+    text-align: center;
+}
+
+.xUi-datepicker-grid.day {
+    grid-template-columns: repeat(7, 1fr);
+}
+
+.xUi-datepicker-day-header {
+    font-size: 14px;
+    user-select: none;
+    margin: 4px 0;
+    color: var(--xui-text-color);
+}
+
+.xUi-datepicker-day,
+.xUi-datepicker-month,
+.xUi-datepicker-year {
+    height: 30px;
+    min-width: 30px;
+    line-height: 30px;
+    border-radius: 4px;
+    background: none;
+    border: none;
+    color: var(--xui-text-color);
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.xUi-datepicker-month,
+.xUi-datepicker-year {
+    margin: 7px;
+}
+
+.xUi-datepicker-select:disabled,
+.xUi-datepicker-day:disabled,
+.xUi-datepicker-month:disabled,
+.xUi-datepicker-year:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    background-color: var(--xui-color-disabled);
+}
+
+.xUi-datepicker-day:not(:disabled):hover,
+.xUi-datepicker-month:not(:disabled):hover,
+.xUi-datepicker-year:not(:disabled):hover {
+    background: var(--xui-primary-color-light);
+    color: #fff;
+}
+
+.xUi-datepicker-selected {
+    background: var(--xui-primary-color) !important;
+    color: #fff !important;
+    font-weight: bold;
+}
+
+.xUi-datepicker-other-month {
+    opacity: 0.4;
+    color: var(--xui-text-color);
+}
+
+.xUi-datepicker-other-month:not(:disabled):hover {
+    color: var(--xui-text-color);
+    user-select: none;
+    background-color: var(--xui-color-hover);
+}
+
+.xUi-datepicker-footer {
+    margin-top: 12px;
+    text-align: right;
+}
+
+.xUi-datepicker-footer-today-btn {
+    padding: 4px 8px;
+    font-size: 13px;
+    background: none;
+    border-radius: 4px;
+    border: 1px solid var(--xui-border-color);
+    color: var(--xui-primary-color);
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.xUi-datepicker-footer-today-btn:not(:disabled):hover {
+    background-color: var(--xui-primary-color-light);
+    color: white;
+}
+
+.xUi-datepicker-large .xUi-datepicker-selected-date {
+    font-size: 16px;
+}
+
+.xUi-datepicker-large .xUi-datepicker-input {
+    padding: 11px;
+}
+
+.xUi-datepicker-middle .xUi-datepicker-input {
+    padding: 6px 11px;
+}

package/lib/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,234 @@
+import React, {
+    useEffect,
+    useRef,
+    useState,
+} from 'react';
+import {
+    DropdownProps,
+    DropdownMenuInnerProps
+} from '../../types/dropdown';
+import { prefixClsDropdown } from '../../utils';
+import { clsx } from '../../helpers';
+import { usePosition } from '../../hooks/usePosition';
+import { ConditionalWrapper } from '../ConditionalWrapper';
+import { createPortal } from 'react-dom';
+import './style.css';
+
+const Dropdown = ({
+    children,
+    menu,
+    open: controlledOpen,
+    defaultOpen = false,
+    onVisibleChange,
+    trigger = 'hover',
+    placement = 'bottomLeft',
+    overlayClassName = '',
+    overlayStyle,
+    getPopupContainer,
+    destroyOnHidden = false,
+    disabled = false,
+    arrow = false,
+    autoFocus = false,
+    popupRender,
+    className = '',
+    overlay,
+    prefixCls = prefixClsDropdown,
+}: DropdownProps) => {
+    const [open, setOpen] = useState<boolean>(controlledOpen ?? defaultOpen);
+    const [_hover, setHover] = useState<boolean>(controlledOpen ?? defaultOpen);
+    const isControlled = controlledOpen !== undefined;
+
+    const triggerRef = useRef<HTMLDivElement | null>(null);
+    const popupRef = useRef<HTMLDivElement | null>(null);
+    const menuRef = useRef<HTMLUListElement | null>(null);
+
+    const { showPlacement, dropdownPosition } = usePosition({
+        popupRef,
+        placement,
+        offset: 8,
+        isOpen: open,
+        triggerRef,
+        getPopupContainer: getPopupContainer?.(triggerRef.current as HTMLElement)
+    })
+
+    useEffect(() => {
+        if (isControlled) {
+            setOpen(Boolean(controlledOpen));
+            onVisibleChange?.(Boolean(controlledOpen))
+        }
+    }, [controlledOpen]);
+
+    useEffect(() => {
+        if (open && autoFocus) {
+            requestAnimationFrame(() => {
+                const first = menuRef.current?.querySelector(
+                    "[role='menuitem']:not([aria-disabled='true'])"
+                ) as HTMLElement | null;
+
+                first?.focus();
+            });
+        }
+    }, [open]);
+
+    const setOpenInternal = (next: boolean) => {
+        if (disabled) {
+            return;
+        }
+
+        if (!isControlled) {
+            setOpen(next);
+        }
+
+        onVisibleChange?.(next);
+        onVisibleChange?.(next)
+    };
+
+    useEffect(() => {
+        const handleClick = (e: MouseEvent) => {
+            if (!open) {
+                return;
+            }
+
+            const target = e.target as Node;
+
+            if (
+                triggerRef.current &&
+                !triggerRef.current.contains(target) &&
+                !popupRef.current?.contains(target)
+            ) {
+                setOpenInternal(false);
+            }
+        };
+
+        document.addEventListener('mousedown', handleClick);
+
+        return () => document.removeEventListener('mousedown', handleClick);
+    }, [open]);
+
+    const triggers = Array.isArray(trigger) ? trigger : [trigger];
+
+    const onTriggerClick = () => {
+        if (triggers.includes('click')) {
+            setOpenInternal(!open);
+        }
+    };
+
+    const onTriggerMouseEnter = () => {
+        setHover(true);
+
+        if (triggers.includes('hover')) {
+            setOpenInternal(true);
+        }
+    };
+
+    const onTriggerMouseLeave = () => {
+        setHover(false);
+
+        if (triggers.includes('hover')) {
+            setOpenInternal(false);
+        }
+    };
+
+    const popup = (
+        <ConditionalWrapper
+            condition={getPopupContainer !== undefined}
+            wrapper={(element) => getPopupContainer ? createPortal(element, getPopupContainer(popupRef.current as HTMLElement)) : <>{element}</>}>
+            <div
+                ref={popupRef}
+                className={`${prefixCls}-overlay ${prefixCls}-${placement} ${overlayClassName}`}
+                style={{
+                    zIndex: _hover ? 1000 : 0,
+                    ...overlayStyle,
+                    ...dropdownPosition
+                }}
+            >
+                {arrow && <div className={`${prefixCls}-arrow ${showPlacement ? 'bottom' : ''}`} />}
+
+                {overlay ? typeof overlay === 'function' ? overlay() : overlay : popupRender ? (
+                    popupRender(
+                        menu ? (
+                            <MenuInner
+                                prefixCls={prefixCls}
+                                items={menu.items}
+                                menuRef={menuRef}
+                                onClose={() => setOpenInternal(false)}
+                            />
+                        ) : (
+                            <div style={{ padding: 8 }}>Empty menu</div>
+                        )
+                    )
+                ) : menu ? (
+                    <MenuInner
+                        prefixCls={prefixCls}
+                        items={menu.items}
+                        menuRef={menuRef}
+                        onClose={() => setOpenInternal(false)}
+                    />
+                ) : (
+                    <div style={{ padding: 8 }}>Empty menu</div>
+                )}
+            </div>
+        </ConditionalWrapper>
+    );
+
+    return (
+        <div
+            ref={triggerRef}
+            className={className}
+        >
+            <div
+                onClick={onTriggerClick}
+                onMouseEnter={onTriggerMouseEnter}
+                onMouseLeave={onTriggerMouseLeave}
+                tabIndex={disabled ? -1 : 0}
+                aria-haspopup='menu'
+                style={{ width: 'fit-content' }}
+                aria-expanded={open}
+            >
+                {children}
+
+                {open && popup}
+                {!open && !destroyOnHidden && null}
+            </div>
+        </div>
+    );
+};
+
+function MenuInner({
+    items,
+    menuRef,
+    onClose,
+    prefixCls,
+}: DropdownMenuInnerProps) {
+    return (
+        <ul className={`${prefixCls}-menu`} ref={menuRef} role='menu'>
+            {items.map((it) => (
+                <li
+                    key={it.key}
+                    role='menuitem'
+                    tabIndex={it.disabled ? -1 : 0}
+                    aria-disabled={it.disabled ?? false}
+                    onClick={(e) => {
+                        if (it.disabled) {
+                            return;
+                        }
+
+                        it.onClick?.(e as any);
+                        onClose();
+                    }}
+                    className={clsx([
+                        `${prefixCls}-item`,
+                        {
+                            'disabled': it.disabled,
+                            'danger': it.danger
+                        }
+                    ])}
+                >
+                    {it.label ?? it.key}
+                </li>
+            ))}
+        </ul>
+    );
+}
+
+export default Dropdown;

package/lib/components/Dropdown/index.ts

@@ -0,0 +1 @@
+export { default as Dropdown } from '../Dropdown/Dropdown'

package/lib/components/Dropdown/style.css

@@ -0,0 +1,124 @@
+.xUi-dropdown-overlay {
+    background: var(--xui-menu-inline-bg);
+    border-radius: 8px;
+    border: 1px solid var(--xui-border-color);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    padding: 4px 0;
+    min-width: 160px;
+    position: absolute;
+
+    &::before {
+        content: "";
+        position: absolute;
+        top: -15px;
+        width: 100%;
+        height: 10px;
+        z-index: 1;
+    }
+}
+
+.xUi-dropdown-overlay > ul,
+.xUi-dropdown-overlay > div,
+.xUi-dropdown-overlay > select {
+    box-shadow: unset;
+}
+
+.xUi-dropdown-overlay .xUi-dropdown-menu {
+    padding: 0 4px;
+    margin: 0;
+    position: relative;
+
+    &::before {
+        content: "";
+        position: absolute;
+        top: -15px;
+        width: 100%;
+        height: 10px;
+        z-index: 1;
+    }
+}
+
+.xUi-dropdown-overlay .xUi-dropdown-item {
+    padding: 8px 12px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    user-select: none;
+    list-style: none;
+    color: var(--xui-text-color);
+}
+
+.xUi-dropdown-overlay .xUi-dropdown-item:hover,
+.xUi-dropdown-overlay .xUi-dropdown-item:focus {
+    background: var(--xui-color-hover);
+    outline: none;
+}
+
+.xUi-dropdown-overlay .xUi-dropdown-item.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.xUi-dropdown-overlay .xUi-dropdown-item.danger {
+    color: var(--xui-error-color-light);
+
+    &:hover {
+        color: var(--xui-background-color);
+        background-color: var(--xui-error-color-light);
+    }
+}
+
+.xUi-dropdown-arrow {
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    top: -6px;
+    left: 12px;
+    background: var(--xui-background-color);
+    border-left: 0.5px solid var(--xui-border-color);
+    border-top: 0.5px solid var(--xui-border-color);
+    transform: rotate(45deg);
+}
+
+.xUi-dropdown-arrow.bottom {
+    top: unset;
+    bottom: -6px;
+    border-left: unset;
+    border-top: unset;
+    border-right: 0.5px solid var(--xui-border-color);
+    border-bottom: 0.5px solid var(--xui-border-color);
+}
+
+.xUi-dropdown-arrow {
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    top: -6px;
+    left: 12px;
+    background: var(--xui-background-color);
+    border-left: 0.5px solid var(--xui-border-color);
+    border-top: 0.5px solid var(--xui-border-color);
+    transform: rotate(45deg);
+}
+
+.xUi-dropdown-right .xUi-dropdown-arrow,
+.xUi-dropdown-topRight .xUi-dropdown-arrow,
+.xUi-dropdown-bottomRight .xUi-dropdown-arrow {
+    left: unset;
+    right: 12px;
+}
+
+.xUi-dropdown-arrow.bottom {
+    top: unset;
+    bottom: -6px;
+    border-left: unset;
+    border-top: unset;
+    border-right: 0.5px solid var(--xui-border-color);
+    border-bottom: 0.5px solid var(--xui-border-color);
+}
+
+.xUi-dropdown-arrow.center {
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+}

package/lib/components/Empty/Empty.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { EmptyContentProps } from '../../types/empty';
+import { prefixClsEmpty, prefixClsEmptyV3 } from '../../utils';
+import './style.css';
+
+const EmptyContent = ({
+  icon,
+  style = {},
+  className = '',
+  title = 'No Data',
+  description = 'No data',
+  prefixCls = prefixClsEmpty,
+  prefixClsV3 = prefixClsEmptyV3
+}: EmptyContentProps) => (
+  <div
+    style={style}
+    className={`${prefixCls} ${prefixClsV3} ${prefixCls}-normal ${prefixClsV3}--normal ${prefixCls}-small ${prefixClsV3}-small ${className}`}
+  >
+    <div className={`${prefixCls}-image`}>
+      {icon || (
+        <svg
+          width="64"
+          height="41"
+          viewBox="0 0 64 41"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>{title}</title>
+          <g transform="translate(0 1)" fill="none">
+            <ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7"></ellipse>
+            <g stroke="#d9d9d9">
+              <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
+              <path
+                d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                fill="#fafafa"
+              ></path>
+            </g>
+          </g>
+        </svg>
+      )}
+    </div>
+    <div className={`${prefixCls}-description`}>{description}</div>
+  </div>
+);
+
+export default EmptyContent;