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

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

@@ -0,0 +1,43 @@
+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

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

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

@@ -0,0 +1,87 @@
+.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

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

package/lib/components/Select/style.css

@@ -0,0 +1,186 @@
+@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

@@ -0,0 +1,61 @@
+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

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

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

@@ -0,0 +1,27 @@
+@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

@@ -0,0 +1,44 @@
+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

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

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

@@ -0,0 +1,50 @@
+@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

@@ -0,0 +1,45 @@
+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

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

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

@@ -0,0 +1,23 @@
+.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

@@ -0,0 +1,42 @@
+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

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

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

@@ -0,0 +1,56 @@
+@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%;
+}