@yqg/slimfit 0.0.1 → 0.0.2

package/lib/esm/tree/style.less

@@ -0,0 +1,84 @@
+@import '../style/theme-vars.css';
+@import '../checkbox/style.less';
+
+.slimfit-tree-common (@prefix: ant-tree) {
+  color: var(--color-text-blod);
+
+  .@{prefix}-switcher {
+    height: auto;
+    width: auto;
+    min-width: 16px;
+    margin-inline-end: 8px;
+
+    &:before {
+      display: none;
+    }
+
+    .@{prefix}-switcher-icon {
+      vertical-align: text-top !important;
+    }
+  }
+
+  .@{prefix}-treenode {
+    width: 100%;
+    padding-left: 20px;
+    height: 40px;
+    line-height: 40px !important;
+    margin: 0;
+
+    .@{prefix}-iconEle {
+      width: auto !important;
+      margin-right: 8px;
+    }
+
+    &:hover {
+      background-color: var(--color-fill-300);
+    }
+
+    &.@{prefix}-treenode-selected {
+      background-color: var(--color-fi-100);
+
+      &:before {
+        content: '';
+        position: absolute;
+        width: 2px;
+        background-color: var(--color-fi-600);
+        top: 0;
+        height: 100%;
+      }
+    }
+
+    &:not(.@{prefix}-treenode-disabled) {
+      .@{prefix}-node-content-wrapper:hover {
+        color: var(--color-text-blod) !important;
+      }
+    }
+
+    .@{prefix}-node-content-wrapper {
+      flex: 1;
+      display: flex;
+      overflow: hidden;
+      white-space: nowrap;
+      padding-inline: 0;
+
+      &:hover {
+        background-color: unset;
+      }
+
+      .@{prefix}-title {
+        flex: 1;
+        overflow: hidden;
+      }
+    }
+
+    .slimfit-checkbox-common(@prefix: ant-tree-checkbox);
+
+    .ant-tree-checkbox {
+      margin-inline-end: 8px;
+    }
+  }
+}
+
+.slimfit-tree {
+  .slimfit-tree-common(@prefix: ant-tree);
+}

package/lib/esm/tree/tree.d.ts

@@ -0,0 +1,6 @@
+import { type TreeProps as AntTreeProps } from 'antd';
+import React from 'react';
+import './style.less';
+export type TreeProps = AntTreeProps;
+declare const Tree: React.FC<TreeProps>;
+export default Tree;

package/lib/esm/tree/tree.js

@@ -0,0 +1,33 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "switcherIcon"];
+import { Tree as AntTree } from 'antd';
+import classNames from 'classnames';
+import React from 'react';
+import colors from "../constant/colors";
+import { Dropdown, Icon } from "../icon";
+import "./style.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DefaultSwitcherIcon = function DefaultSwitcherIcon() {
+  return (
+    /*#__PURE__*/
+    // TODO: 需要支持主题定制
+    _jsx(Icon, {
+      component: Dropdown,
+      style: {
+        color: colors.neutral[800]
+      }
+    })
+  );
+};
+var Tree = function Tree(_ref) {
+  var className = _ref.className,
+    _ref$switcherIcon = _ref.switcherIcon,
+    switcherIcon = _ref$switcherIcon === void 0 ? DefaultSwitcherIcon : _ref$switcherIcon,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(AntTree, _objectSpread({
+    className: classNames('slimfit-tree', className),
+    switcherIcon: switcherIcon
+  }, props));
+};
+export default Tree;

package/lib/esm/tree-select/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TreeSelect } from './treeSelect';
+export type { TreeSelectProps } from './treeSelect';

package/lib/esm/tree-select/index.js

@@ -0,0 +1 @@
+export { default as TreeSelect } from "./treeSelect";

package/lib/esm/tree-select/style.less

@@ -0,0 +1,16 @@
+@import '../style/theme-vars.css';
+@import '../tree/style.less';
+@import '../select/style.less';
+
+.slimfit-tree-select-popup {
+  padding: 0;
+
+  .slimfit-tree-common(@prefix: ant-select-tree);
+
+  &.ant-tree-select-dropdown
+    .ant-select-tree
+    .ant-select-tree-treenode-active
+    .ant-select-tree-node-content-wrapper.ant-select-tree-node-content-wrapper {
+    background-color: transparent;
+  }
+}

package/lib/esm/tree-select/treeSelect.d.ts

@@ -0,0 +1,10 @@
+import { TreeSelect as AntTreeSelect, TreeSelectProps as AntTreeSelectProps } from 'antd';
+import React from 'react';
+import { type WithFormModeProps } from '../form-mode';
+import './style.less';
+export type TreeSelectProps = AntTreeSelectProps & WithFormModeProps;
+type TreeSelectType = typeof AntTreeSelect & {
+    (props: TreeSelectProps & React.RefAttributes<any>): React.ReactElement;
+};
+declare const TreeSelect: TreeSelectType;
+export default TreeSelect;

package/lib/esm/tree-select/treeSelect.js

@@ -0,0 +1,48 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "popupClassName", "switcherIcon"];
+import { TreeSelect as AntTreeSelect } from 'antd';
+import React from 'react';
+import colors from "../constant/colors";
+import { withFormMode } from "../form-mode";
+import { IconDropdown } from "../icon";
+import classNames from 'classnames';
+import { withCustomSelect } from "../hooks/withCustomSelect";
+import "./style.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DefaultSwitcherIcon = function DefaultSwitcherIcon() {
+  return (
+    /*#__PURE__*/
+    // TODO: 需要支持主题定制
+    _jsx(IconDropdown, {
+      style: {
+        color: colors.neutral[800]
+      }
+    })
+  );
+};
+var CustomTreeSelect = withCustomSelect(function (_ref) {
+  var className = _ref.className,
+    popupClassName = _ref.popupClassName,
+    _ref$switcherIcon = _ref.switcherIcon,
+    switcherIcon = _ref$switcherIcon === void 0 ? DefaultSwitcherIcon : _ref$switcherIcon,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(AntTreeSelect, _objectSpread({
+    switcherIcon: switcherIcon,
+    className: classNames('slimfit-select', className),
+    popupClassName: classNames('slimfit-tree-select-popup', popupClassName)
+  }, props));
+}, 'tree-select');
+
+// 使用 HOC 包装
+var TreeSelectComponent = withFormMode(CustomTreeSelect, 'tree-select');
+
+// 组合类型：保留 AntTreeSelect 静态属性 + 添加 formMode 支持
+
+var TreeSelect = TreeSelectComponent;
+TreeSelect.TreeNode = AntTreeSelect.TreeNode;
+TreeSelect.SHOW_ALL = AntTreeSelect.SHOW_ALL;
+TreeSelect.SHOW_PARENT = AntTreeSelect.SHOW_PARENT;
+TreeSelect.SHOW_CHILD = AntTreeSelect.SHOW_CHILD;
+TreeSelect._InternalPanelDoNotUseOrYouWillBeFired = AntTreeSelect._InternalPanelDoNotUseOrYouWillBeFired;
+export default TreeSelect;

package/lib/esm/upload/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Upload } from './upload';
+export type { UploadProps } from './upload';

package/lib/esm/upload/index.js

@@ -0,0 +1 @@
+export { default as Upload } from "./upload";

package/lib/esm/upload/style.less

@@ -0,0 +1,293 @@
+@import '../style/theme-vars.css';
+
+.slimfit-upload-wrapper {
+  .slimfit-upload-input {
+    width: 320px;
+    height: 32px;
+    background-color: var(--color-fill-200);
+    border-color: var(--color-line-100);
+    box-shadow: none;
+    cursor: unset;
+
+    &:not(.slimfit-upload-input-error):not(.slimfit-disabled):hover {
+      border-color: var(--color-fi-600);
+    }
+
+    &-error {
+      border-color: var(--color-red-600);
+    }
+  }
+
+  .slimfit-upload-tip {
+    color: var(--color-neutral-500);
+
+    &-error {
+      color: var(--color-red-600);
+    }
+  }
+
+  .slimfit-upload-icon {
+    font-size: 20px !important;
+
+    &-uploading {
+      color: var(--color-fi-600);
+    }
+
+    &-error {
+      color: var(--color-red-600);
+    }
+
+    &-done {
+      color: var(--color-green-600);
+    }
+
+    &-pending {
+      color: var(--color-orange-600);
+    }
+
+    &-close {
+      color: var(--color-neutral-500);
+      cursor: pointer;
+    }
+  }
+
+  .slimfit-upload-single-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+}
+
+.slimfit-upload-single-input-wrapper {
+  display: inline-flex;
+  gap: 12px;
+
+  .slimfit-upload-single-content {
+    width: 320px;
+  }
+}
+
+.slimfit-upload-single-drag-wrapper {
+  .ant-upload {
+    display: inline-block;
+    width: auto;
+
+    .ant-upload-btn {
+      padding: 0;
+    }
+  }
+
+  .slimfit-upload-drag-error .ant-upload-drag {
+    border-color: var(--color-red-600) !important;
+  }
+
+  .slimfit-upload-single-content {
+    width: 334px;
+    gap: 0;
+  }
+
+  .slimfit-upload-single-drag-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 300px;
+    height: 106px;
+    padding: 16px;
+    color: var(--color-neutral-500);
+
+    &-initial {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+
+      & > span:first-child {
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--color-neutral-950);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    &-desc {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    &-operation {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 20px;
+    }
+  }
+
+  & .slimfit-upload-operation-btn {
+    padding: 0;
+  }
+}
+
+.slimfit-upload-multiple-basic-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .slimfit-upload-multiple-basic-file-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    .slimfit-upload-multiple-basic-file-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+  }
+}
+
+.slimfit-upload-multiple-drag-wrapper,
+.slimfit-upload-picture-drag-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .slimfit-upload-single-content {
+    flex-direction: row;
+    gap: 16px;
+    align-items: center;
+  }
+
+  .slimfit-upload-btns {
+    margin-top: 12px;
+    align-self: flex-end;
+  }
+}
+
+.slimfit-upload-multiple-drag-wrapper {
+  .ant-table-empty {
+    .ant-table-cell,
+    .ant-upload-btn {
+      color: var(--color-neutral-400);
+    }
+
+    .ant-table-tbody .ant-table-cell {
+      padding: 0;
+    }
+
+    .ant-upload-drag {
+      border: none;
+      background-color: transparent;
+      cursor: default;
+
+      .ant-upload-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 200px;
+      }
+    }
+  }
+}
+
+.slimfit-upload-picture-drag-wrapper {
+  .ant-upload-drag {
+    cursor: default;
+    background-color: var(--color-fill-100);
+    height: 256px;
+    overflow: auto;
+
+    .ant-upload-btn {
+      color: var(--color-neutral-400);
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      min-height: 200px;
+    }
+
+    .ant-upload-drag-container {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .slimfit-upload-picture-drag-list {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 8px;
+    row-gap: 16px;
+    padding-bottom: 16px;
+
+    .slimfit-upload-picture-drag-item {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      width: 100px;
+      cursor: pointer;
+
+      &-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 8px;
+        width: 100px;
+        height: 100px;
+        border-radius: 2px;
+        box-sizing: border-box;
+        border: 1px solid var(--color-line-200);
+        background-color: var(--color-fill-100);
+      }
+
+      &-filename {
+        color: var(--color-neutral-950);
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        width: 100px;
+      }
+
+      .ant-image-mask {
+        display: none;
+      }
+
+      .slimfit-upload-picture-drag-item-mask {
+        display: none;
+        align-items: center;
+        justify-content: center;
+        width: 100px;
+        height: 100px;
+        position: absolute;
+        color: var(--color-neutral-0);
+        gap: 10px;
+        font-size: 20px;
+        border-radius: 2px;
+        background-color: var(--color-fill-600);
+      }
+
+      &:hover {
+        .slimfit-upload-picture-drag-item-mask {
+          display: flex;
+        }
+      }
+    }
+  }
+
+  .slimfit-upload-picture-drag-placeholder {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}

package/lib/esm/upload/upload.d.ts

@@ -0,0 +1,17 @@
+import type { UploadProps as AntdUploadProps } from 'antd';
+import React from 'react';
+import './style.less';
+export interface UploadProps extends AntdUploadProps {
+    draggable?: boolean;
+    placeholder?: string;
+    tip?: string;
+}
+declare const Upload: React.ForwardRefExoticComponent<UploadProps & React.RefAttributes<any>>;
+declare const UploadDragger: React.ForwardRefExoticComponent<AntdUploadProps<any> & {
+    height?: number | undefined;
+} & React.RefAttributes<import("antd/es/upload/Upload").UploadRef<any>>>;
+export type UploadType = typeof Upload & {
+    Dragger: typeof UploadDragger;
+};
+declare const _default: UploadType;
+export default _default;