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

package/lib/components/Select/Tag/Tag.tsx

@@ -1,43 +0,0 @@
-import React, { FC, MouseEvent } from 'react';
-import { TargetProps } from '../../../types';
-import { CustomTagProps } from '../../../types/select';
-import { prefixClsSelect } from '../../../utils';
-import './style.css';
-
-const Tag: FC<CustomTagProps> = ({
-  prefixCls = prefixClsSelect,
-  style = {},
-  onClose,
-  value,
-  label,
-  closable,
-  color,
-  icon,
-  className = ''
-}) => {
-  const handleOnClick = (e: MouseEvent<HTMLSpanElement> & TargetProps) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    e.target.value = value;
-
-    onClose?.(e);
-  };
-
-  return (
-    <div
-      style={{ ...style, backgroundColor: color }}
-      className={`${prefixCls}-tag ${className}`}
-    >
-      <span>{label !== undefined ? label : value}</span>
-
-      {closable && (
-        <span className={`${prefixCls}-tag-close-icon`} onClick={handleOnClick}>
-          {icon || <>&#x2715;</>}
-        </span>
-      )}
-    </div>
-  );
-};
-
-export default Tag;

package/lib/components/Select/Tag/index.ts

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

package/lib/components/Select/Tag/style.css

@@ -1,87 +0,0 @@
-.xUi-select .xUi-select-tag-container {
-    gap: 4px;
-    flex: auto;
-    display: flex;
-    flex-wrap: wrap;
-    line-height: 12px;
-    position: relative;
-}
-
-.xUi-select .xUi-select-tag-container-fixHeight {
-    max-height: 32px !important;
-    overflow: hidden;
-}
-
-.xUi-select.middle .xUi-select-tag-container,
-.xUi-select.large .xUi-select-tag-container {
-    line-height: 22px;
-}
-
-.xUi-select .xUi-select-tag {
-    background: rgba(0, 0, 0, 0.06);
-    border: 1px solid transparent;
-    align-items: center;
-    align-self: center;
-    flex: none;
-    box-sizing: border-box;
-    max-width: 100%;
-    border-radius: var(--xui-border-radius-sm);
-    cursor: default;
-    padding: 2px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    display: flex;
-    height: 100%;
-    transition:
-        font-size 0.3s,
-        line-height 0.3s,
-        height 0.3s;
-}
-
-.xUi-select.middle .xUi-select-tag {
-    padding: 4px 8px;
-}
-
-.xUi-select.large .xUi-select-tag {
-    padding: 4px 8px;
-    font-size: var(--xui-font-size-lg);
-}
-
-.xUi-select .xUi-select-tag span {
-    margin: 0 2px;
-    font-size: var(--xui-font-size-sm);
-}
-
-.xUi-select .xUi-select-tag .xUi-select-tag-close-icon {
-    cursor: pointer;
-    font-size: var(--xui-font-size-xs);
-    color: rgba(0, 0, 0, 0.5);
-}
-
-.xUi-select .xUi-select-tag .xUi-select-tag-close-icon:hover {
-    color: var(--xui-text-color);
-}
-
-.xUi-select .xUi-select-tag:has([class="xUi-select-tag-input"]) {
-    padding: 0;
-    border: none;
-    outline: none;
-    color: var(--xui-text-color);
-    font-size: var(--xui-font-size-md);
-    background: transparent;
-}
-
-.xUi-select .xUi-select-tag:has([class="xUi-select-tag-input"]) input {
-    padding: 0;
-    border: none;
-    height: -webkit-fill-available;
-    background-color: transparent;
-    font-size: var(--xui-font-size-md);
-}
-
-.xUi-select .xUi-select-tag-input:focus {
-    border: none;
-    outline: none;
-    box-shadow: none;
-}

package/lib/components/Select/index.ts

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

package/lib/components/Select/style.css

@@ -1,186 +0,0 @@
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.xUi-select {
-    width: 100%;
-    position: relative;
-    display: inline-flex;
-    flex-direction: row-reverse;
-    color: var(--xui-text-color);
-    min-height: 24px;
-    background-color: transparent;
-    border-radius: var(--xui-border-radius-sm);
-    border: 1px solid var(--xui-border-color);
-    box-sizing: border-box;
-    padding: 2px 8px;
-
-    &:has([tabindex="0"]:focus-visible) {
-        border-color: var(--xui-primary-color);
-    }
-}
-
-.xUi-select-disabled {
-    background: rgba(0, 0, 0, 0.04);
-}
-
-.xUi-select-arrow {
-    margin: 0 4px;
-    display: flex;
-    gap: 6px;
-    align-items: center;
-    pointer-events: all !important;
-    color: var(--xui-text-color-light);
-}
-
-.xUi-select-arrow svg {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.xUi-select-loading {
-    margin: 0 8px;
-    animation: spin 1s linear infinite;
-    display: inline-block;
-    color: var(--xui-text-color-light);
-}
-
-.xUi-select .xUi-select-trigger {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    border-radius: var(--xui-border-radius-sm);
-    background: transparent;
-}
-
-.xUi-select .xUi-select-clear-btn {
-    margin: 0 8px;
-    background: none;
-    border: none;
-    color: #999;
-    cursor: pointer;
-    padding: 0;
-    line-height: 1;
-}
-
-.xUi-select .xUi-select-clear-btn {
-    font-size: var(--xui-font-size-lg);
-}
-
-.xUi-select .xUi-select-clear-btn:hover {
-    color: var(--xui-primary-color);
-}
-
-.xUi-select-dropdown {
-    top: 100%;
-    left: 0;
-    right: unset;
-    width: inherit;
-    z-index: 10;
-    margin-top: 5px;
-    overflow-y: auto;
-    max-height: 350px;
-    position: absolute;
-    border-radius: var(--xui-border-radius-sm);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    background-color: var(--xui-select-background-color);
-}
-
-.xUi-select-dropdown.topRight,
-.xUi-select-dropdown.bottomRight {
-    right: 0;
-    left: unset;
-}
-
-.xUi-select .xUi-select-loading-spinner {
-    padding: 10px;
-    text-align: center;
-    color: #999;
-}
-
-.xUi-select:focus-within {
-    border-color: var(--xui-primary-color-light);
-    box-shadow: none;
-}
-
-.xUi-select:hover:not(.xUi-select-disabled) {
-    border-color: var(--xui-primary-color);
-}
-
-.xUi-select-disabled .xUi-select-input,
-.xUi-select-disabled .xUi-select-trigger,
-.xUi-select-disabled {
-    cursor: not-allowed !important;
-    opacity: 0.6 !important;
-}
-
-.xUi-select-selected-icon {
-    color: var(--xui-primary-color-light);
-}
-
-.xUi-select-error {
-    border-color: var(--xui-error-color);
-}
-
-.xUi-select-arrow .error-svg-icon,
-.xUi-select-error .error-svg-icon {
-    color: var(--xui-error-color);
-}
-
-.xUi-select .xUi-select-input {
-    width: 100%;
-    padding: 0;
-    height: auto;
-    height: -webkit-fit-content;
-    border: none;
-    outline: none;
-    background: transparent;
-    font-size: var(--xui-font-size-md);
-    color: var(--xui-text-color);
-    user-select: none;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-}
-
-.xUi-select .xUi-select-input:focus {
-    border: none;
-    outline: none;
-    box-shadow: none;
-}
-
-.xUi-select.middle {
-    font-size: var(--xui-font-size-md);
-    min-height: 30px;
-    border-radius: var(--xui-border-radius-md);
-}
-
-.xUi-select.middle input {
-    font-size: var(--xui-font-size-md);
-}
-
-.xUi-select.middle .xUi-select-trigger {
-    border-radius: var(--xui-border-radius-md);
-}
-
-.xUi-select.large {
-    font-size: var(--xui-font-size-lg);
-    min-height: 44px;
-    border-radius: var(--xui-border-radius-lg);
-}
-
-.xUi-select.large .xUi-select-trigger {
-    border-radius: var(--xui-border-radius-lg);
-}
-
-.xUi-select input {
-    font-size: var(--xui-font-size-lg);
-}

package/lib/components/Skeleton/Avatar/Avatar.tsx

@@ -1,61 +0,0 @@
-import React, { FC, ReactElement } from 'react';
-import { clsx } from '../../../helpers';
-import { SkeletonAvatarProps } from '../../../types/skeleton';
-import { prefixClsSkeleton } from '../../../utils';
-import './style.css';
-
-export const AVATAR_DEFAULT_SIZE = 32;
-export const AVATAR_GLOBAL_SIZE = 40;
-
-export const GET_AVATAR_SKELETON_PROPS = (
-  avatar: SkeletonAvatarProps | boolean
-): SkeletonAvatarProps => {
-  return typeof avatar !== 'boolean'
-    ? {
-        shape: avatar?.shape || 'circle',
-        size: avatar?.size || AVATAR_GLOBAL_SIZE,
-        style: avatar?.style || {},
-        className: avatar?.className || ''
-      }
-    : {
-        shape: 'circle',
-        size: AVATAR_GLOBAL_SIZE
-      };
-};
-
-const SkeletonAvatar: FC<SkeletonAvatarProps> = ({
-  prefixCls = prefixClsSkeleton,
-  className,
-  shape = 'circle',
-  style,
-  wrapperStyle,
-  size = AVATAR_DEFAULT_SIZE,
-  active,
-  applyElementStyle = true,
-  ...props
-}): ReactElement => {
-  return (
-    <div
-      className={clsx([
-        `${prefixCls}`,
-        {
-          [`${prefixCls}-element`]: applyElementStyle,
-          [`${prefixCls}-active`]: active
-        },
-        className
-      ])}
-      style={wrapperStyle}
-      {...props}
-    >
-      <span
-        className={clsx([`${prefixCls}-avatar ${prefixCls}-avatar-${shape}`])}
-        style={{
-          ...(size ? { width: size, height: size, lineHeight: size } : {}),
-          ...(style || {})
-        }}
-      />
-    </div>
-  );
-};
-
-export default SkeletonAvatar

package/lib/components/Skeleton/Avatar/index.ts

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

package/lib/components/Skeleton/Avatar/style.css

@@ -1,27 +0,0 @@
-@keyframes xUi-skeleton-loading {
-    0% {
-        background-position: 100% 50%;
-    }
-
-    100% {
-        background-position: 0 50%;
-    }
-}
-
-.xUi-skeleton-avatar {
-    width: 40px;
-    height: 40px;
-    display: block;
-    line-height: 40px;
-    background: linear-gradient(90deg, rgba(190, 190, 190, 0.2) 25%, rgba(129, 129, 129, 0.24) 37%, rgba(190, 190, 190, 0.2) 63%);
-    background-size: 400% 100%;
-    animation: xUi-skeleton-loading 1.4s ease infinite;
-}
-
-.xUi-skeleton-avatar-circle {
-    border-radius: 50%;
-}
-
-.xUi-skeleton-avatar-square {
-    border-radius: 4px;
-}

package/lib/components/Skeleton/Button/Button.tsx

@@ -1,44 +0,0 @@
-import React, { FC, ReactElement } from 'react';
-import { clsx } from '../../../helpers';
-import { SkeletonButtonProps } from '../../../types/skeleton';
-import { prefixClsSkeleton } from '../../../utils';
-import './style.css';
-
-const BUTTON_SKELETON_SIZE = {
-  small: `${prefixClsSkeleton}-button-sm`,
-  large: `${prefixClsSkeleton}-button-lg`,
-  default: ''
-};
-
-const SkeletonButton: FC<SkeletonButtonProps> = ({
-  prefixCls = prefixClsSkeleton,
-  style = {},
-  active,
-  className,
-  size = 'default',
-  applyElementStyle = true
-}): ReactElement => {
-  return (
-    <div
-      className={clsx([
-        `${prefixCls}`,
-        {
-          [`${prefixCls}-element`]: applyElementStyle,
-          [`${prefixCls}-active`]: active
-        },
-        className
-      ])}
-    >
-      <span
-        className={clsx([
-          `${prefixCls}-button `,
-          BUTTON_SKELETON_SIZE[size],
-          className
-        ])}
-        style={style}
-      ></span>
-    </div>
-  );
-};
-
-export default SkeletonButton

package/lib/components/Skeleton/Button/index.ts

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

package/lib/components/Skeleton/Button/style.css

@@ -1,50 +0,0 @@
-@keyframes xUi-skeleton-loading {
-    0% {
-        background-position: 100% 50%;
-    }
-
-    100% {
-        background-position: 0 50%;
-    }
-}
-
-.xUi-skeleton-element {
-    display: inline-block !important;
-    width: auto !important;
-}
-
-.xUi-skeleton-button {
-    display: inline-block;
-    vertical-align: top;
-    background: rgba(190, 190, 190, 0.2);
-    border-radius: 4px;
-    width: 64px;
-    min-width: 64px;
-    height: 32px;
-    line-height: 32px;
-}
-
-.xUi-skeleton-button-sm {
-    width: 48px;
-    min-width: 48px;
-    height: 24px;
-    line-height: 24px;
-}
-
-.xUi-skeleton-button-lg {
-    width: 80px;
-    min-width: 80px;
-    height: 44px;
-    line-height: 44px;
-}
-
-.xUi-skeleton-active .xUi-skeleton-button {
-    background: linear-gradient(
-        90deg,
-        rgba(190, 190, 190, 0.2) 25%,
-        rgba(129, 129, 129, 0.24) 37%,
-        rgba(190, 190, 190, 0.2) 63%
-    );
-    background-size: 400% 100%;
-    animation: xUi-skeleton-loading 1.4s ease infinite;
-}

package/lib/components/Skeleton/Image/Image.tsx

@@ -1,45 +0,0 @@
-import React, { FC, ReactElement } from 'react';
-import { SkeletonImageProps } from '../../../types/skeleton';
-import { prefixClsSkeleton } from '../../../utils';
-import './style.css';
-
-const CUSTOm_ICON_SIZE = 48;
-
-const SkeletonImage: FC<SkeletonImageProps> = ({
-  prefixCls = prefixClsSkeleton,
-  className,
-  style = {}
-}): ReactElement => {
-  return (
-    <div className={`${prefixCls}-image ${className || ''}`} style={style}>
-      <span
-        className={`${prefixCls}-icon`}
-        style={{
-          fontSize: `${style?.width || CUSTOm_ICON_SIZE}px`,
-          color: '#bfbfbf',
-          position: 'relative',
-          width: '100%',
-          height: '100%',
-          ...(style?.backgroundColor
-            ? { backgroundColor: style?.backgroundColor }
-            : {})
-        }}
-      >
-        <svg
-          viewBox="0 0 1098 1024"
-          xmlns="http://www.w3.org/2000/svg"
-          width="1em"
-          height="1em"
-          fill="currentColor"
-        >
-          <path
-            d="M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z"
-            className={`${prefixCls}-image-path`}
-          ></path>
-        </svg>
-      </span>
-    </div>
-  );
-};
-
-export default SkeletonImage

package/lib/components/Skeleton/Image/index.ts

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

package/lib/components/Skeleton/Image/style.css

@@ -1,23 +0,0 @@
-.xUi-skeleton-image {
-    width: 96px;
-    height: 96px;
-    line-height: 96px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    vertical-align: top;
-    background: rgba(190, 190, 190, 0.2);
-}
-
-.xUi-skeleton-image .xUi-skeleton-icon {
-    font-size: inherit !important;
-}
-
-.xUi-skeleton-image svg {
-    width: 48px;
-    height: 100%;
-    max-width: 192px;
-    line-height: 48px;
-    display: flex;
-    margin: 0 auto;
-}

package/lib/components/Skeleton/Input/Input.tsx

@@ -1,42 +0,0 @@
-import React, { FC, ReactElement } from 'react';
-import { clsx } from '../../../helpers';
-import { SkeletonInputProps } from '../../../types/skeleton';
-import { prefixClsSkeleton } from '../../../utils';
-import './style.css';
-
-const INPUT_SKELETON_SIZE = {
-  small: `${prefixClsSkeleton}-input-sm`,
-  large: `${prefixClsSkeleton}-input-lg`,
-  default: ''
-};
-
-const SkeletonInput: FC<SkeletonInputProps> = ({
-  prefixCls = prefixClsSkeleton,
-  style,
-  block,
-  active,
-  className,
-  size = 'default'
-}): ReactElement => {
-  return (
-    <div
-      className={clsx([
-        `${prefixCls}-element`,
-        {
-          [`${prefixCls}-active`]: active,
-          [`${prefixCls}-block`]: block
-        },
-        className
-      ])}
-    >
-      <span
-        className={`${prefixCls}-input ${INPUT_SKELETON_SIZE[size]} ${
-          className || ''
-        }`}
-        style={style}
-      />
-    </div>
-  );
-};
-
-export default SkeletonInput

package/lib/components/Skeleton/Input/index.ts

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

package/lib/components/Skeleton/Input/style.css

@@ -1,56 +0,0 @@
-@keyframes xUi-skeleton-loading {
-    0% {
-        background-position: 100% 50%;
-    }
-    100% {
-        background-position: 0 50%;
-    }
-}
-
-.xUi-skeleton-element {
-    display: inline-block !important;
-    width: auto !important;
-}
-
-.xUi-skeleton-input {
-    display: inline-block;
-    vertical-align: top;
-    background: rgba(190, 190, 190, 0.2);
-    width: 160px;
-    min-width: 160px;
-    height: 32px;
-    line-height: 32px;
-}
-
-.xUi-skeleton-input-sm {
-    width: 120px;
-    min-width: 120px;
-    height: 24px;
-    line-height: 24px;
-}
-
-.xUi-skeleton-input-lg {
-    width: 200px;
-    min-width: 200px;
-    height: 44px;
-    line-height: 44px;
-}
-
-.xUi-skeleton-active .xUi-skeleton-input {
-    background: linear-gradient(
-        90deg,
-        rgba(190, 190, 190, 0.2) 25%,
-        rgba(129, 129, 129, 0.24) 37%,
-        rgba(190, 190, 190, 0.2) 63%
-    );
-    background-size: 400% 100%;
-    animation: xUi-skeleton-loading 1.4s ease infinite;
-}
-
-.xUi-skeleton-block {
-    width: 100%;
-}
-
-.xUi-skeleton-block .xUi-skeleton-input {
-    width: 100%;
-}