ecomfe/santd

San UI Toolkit for Ant Design

Ant Design for San

San UI Toolkit for Ant Design

English | 简体中文

✨ Features

• An enterprise-class UI design system for desktop applications.
• A set of high-quality San components out of the box.
• Shared Ant Design of React design resources.

🖥 Environment Support

• Modern browsers and Internet Explorer 9+ (with polyfills)
• Server-side Rendering

IE / Edge	Firefox	Chrome	Safari	Opera
IE9, IE10, IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

📦 Install

We recommend using npm to install，it not only makes development easier，but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.

$ npm install santd --save

If you are in a bad network environment，you can try other registries and tools like cnpm.

🔨 Usage

import san from 'san';
import {DatePicker} from "santd";

const App = san.defineComponent({
    components: {
        's-datepicker': DatePicker
    },
    template: `<div><s-datepicker /></div>`
});

const myApp = new App();
myApp.attach(document.body);

And import style manually:

import "santd/dist/santd.css"; // or 'santd/dist/santd.less'

Or import components on demand.

🌍 Internationalization

See i18n.

🔗 Links

• Home page
• Components
• San
• Customize Theme

⌨️ Development

Use Gitpod, a free online dev environment for GitHub.

Or clone locally:

$ git clone [email protected]:ecomfe/santd.git
$ cd santd
$ npm install
$ npm start button

Open your browser and visit http://127.0.0.1:8822

🤝 Contributing

We welcome all contributions. You can submit any ideas as pull requests or as GitHub issues.

If you're new to posting issues, we ask that you read How To Ask Questions The Smart Way, How to Ask a Question in Open Source Community and How to Report Bugs Effectively prior to posting. Well written bug reports help us help you!

☀️ License

MIT

santd's Issues

Model的文档有误

文档中，Model组件的参数说明里的ButtonProps点击跳转链接有误：

upload组件照片删除之后再重新上传无法触发getValueFromEvent

导致Form当中拿到的一直是之前的数值

#bug Menu组件的 Item 动态增删无法触发二次刷新

能搞个FormModel 么？

能搞个antdesign vue一样的FormModel 么

tree组件能不能支持拖拽呢？

tree组件能不能支持拖拽呢？

当Tab.TabPane同时存在slot和非slot的情况时，渲染异常；当TabPane的slot中存在变量时渲染异常

version: 0.2.8
problem description:
1、当Tab.TabPane同时存在slot和非slot的情况时，渲染异常；

        <s-tabs
            defaultActiveKey="1"
            on-change="handleChange"
        >
            <s-tabpane key="1">
                <span slot="tab">Tab 1</span>
                <span>{{content2}}</span>
            </s-tabpane>
            <s-tabpane tab="Tab 2" key="2">Content of Tab Pane 2</s-tabpane>
            <s-tabpane tab="Tab 3" key="3">Content of Tab Pane 3</s-tabpane>
        </s-tabs>

这个问题是：如果tabpane有slot，就仅渲染了slot的部分，非slot的直接忽略了。

这个问题比较好解决，我提了一个PR: #10

2、当TabPane的slot中存在变量时渲染异常；

        <s-tabs
            defaultActiveKey="1"
            on-change="handleChange"
        >
            <s-tabpane key="0">
                <span slot="tab">{{tabTitle}}</span>
                <span>{{content1}}</span>
            </s-tabpane>
             <s-tabpane key="1">
                <span slot="tab">Tab 1</span>
                <span>{{content2}}</span>
            </s-tabpane>
            <s-tabpane key="1">
                <span slot="tab">Tab 1</span>
                <span>{{content2}}</span>
            </s-tabpane>
            <s-tabpane tab="Tab 2" key="2">Content of Tab Pane 2</s-tabpane>
            <s-tabpane tab="Tab 3" key="3">Content of Tab Pane 3</s-tabpane>
        </s-tabs>

详细描述：
（1）、key = 1 的 slot，chidrenl的aNode 类型为string，可以直接渲染；
（2）、key = 0 的 slot， chidrenl的aNode 类型为epr，需要通过data计算得出最终的字符；
这个问题，应该是和sourceSlots的data作用域有关系，用san直接测试了下：
（1）、将sourceSlot作为变量赋值时，内部的epr的aNode中的变量，取值的作用域为this.sourceSlot的this的parent。
app.san

<template>
    <div class="app-wrapper">
        <div>
            <one-deep-component>
                <span slot="one-deep-tittle">I am a title~</span>
                <span slot="two-deep-content">I am content</span>
            </one-deep-component>
            <one-deep-component>
                <span slot="one-deep-tittle">{{title}}</span>
                <span slot="two-deep-content">{{content}}</span>
            </one-deep-component>
        </div>
    </div>
</template>

<script>
    import oneDeepComponent from './component/one-deep-component.san';
    export default {
        initData () {
            return {
                title: 'I am another title',
                content: 'I am content'
            }
        },
        components: {
            'one-deep-component': oneDeepComponent
        },
    }
</script>

one-deep-component.san

<template>
    <div class="one-deep">
        <slot name="one-deep-tittle" />
        <two-deep-component contentSlot="{{contentSlot}}" />
    </div>
</template>

<script>
    import twoDeepComponent from './two-deep-component.san';
    export default {
        components: {
            'two-deep-component': twoDeepComponent
        },
        initData() {
            return {
                content: 'I am the wrong content'
            };
        },
        created() {
            console.log(this.sourceSlots.named['two-deep-content']);
            this.data.set('contentSlot', this.sourceSlots.named['two-deep-content']);
        }
    }
</script>
<style>
    .one-deep {
        padding: 40px;
        font-size: 16px;
    }
</style>

two-deep-component.san

<template>
    <div class="two-deep-content">
        <slot name="content" />
    </div>
</template>

<script>
    export default {
        inited() {
            this.sourceSlots.named.content = this.data.get('contentSlot');
        }
    }
</script>
<style>
    .one-deep {
        padding: 40px;
        font-size: 16px;
    }
</style>

渲染结果为：

但是期望的值为app.san中的content('I am content')

input-number 组件 precision 属性为0时失效

<s-input-number precision="{{0}}" >

• 期望：正确设置数值精度为整数

• 实际现象：数值精度失效，可以输入任意小数
  

• santd版本：1.0.23

• 原因：
  在input-number 组件中，找到了如下代码
  
  precision = 0时候，进入了后面的分支。

希望能修复这里的precision判空逻辑

• 同时找到了一个可以临时绕过的方案：
  临时设置precision=0.1 来代替，原理：

目前 antd-icon 是全量引入的，造成包体积很大

文档里写的 tabs 组件的 renderTabBar 功能好像没有

#bug Upload.Dragger missing accept option.

Upload.Dragger 组件会错误的丢失 accept 属性
这会导致用户设置的 accept 属性无效，无法限制上传的文件类型。
这与 antd 中的相同组件行为不一致，从逻辑上看，可能是一个简单的模版属性丢失问题。

对应的 PR: #94

各位可以讨论下现状是否符合设计预期 / 或是修复此问题。

#next: 当select为单选时，onChange value应该为 string，而非 Array<string>

input框内容关联选择框，切换选择框，重置input框data时，再切换值又展示了

`

手机号
百度账号

            <std-formitem
            class="sbiz-h-9 sbiz-mb-6"
            label="{{accountMap[accountType]['label']}}"
            validateStatus="{{accountNameStatus}}"
            help="{{accountNameTips}}"
            >
                <std-input placeholder="{{accountMap[accountType]['placeholder']}}" value="{=accountName=}" autocomplete="off" decorator="{{accountType === 1 ? phoneDecorator : accountNameDecorator}}" on-blur="checkAccount">
                </std-input>
            </std-formitem>`

折叠面板组件collapse性能问题

折叠面板的显示与影藏用 s-if 不太合适，会导致插槽组件无谓的重复渲染，插槽组件逻辑过重的时候比较麻烦。

Table 组件

1. Table 组件自带的分页器属性支持不全
2. Table 无数据时，placeholder (空态) 内容会随着表头滑动，且 placeholder 宽度小于表头宽度，导致划到最右侧时 border-top 有"缺失"
   问题 2 修复方案参考 antd 的 sticky 定位 https://github.com/react-component/table/blob/master/src/Body/ExpandedRow.tsx#L44

pr: #101

Safari 浏览器下 input 组件删除中间字符后光标自动移动后文末

官方示例可见
设备：Safari 版本 14.1.2 ，高版本好像不复现

input textarea自适应高度时循环update

cpu拉满，循环update导致过度rendering

Input 点击删除按钮，变为非编辑态，并且触发 blur 事件获取到的是旧的 value 值

Input 设置 allowClear属性后，点击删除按钮，变为非编辑态，并且触发 blur 事件获取到的是旧的 value 值。

Tabs 标签页 tabBarStyle 不生效

date-picker 组件中的日历单元格 title 错误

Safari 下 tab 组件没有设置初始滑动样式，导致如果自定义 link-bar 宽度时，没法让其居中

chrome 下后执行 setTimeout 中的逻辑，并正常赋值 样式https://github.com/ecomfe/santd/blob/master/src/tabs/ScrollableInkTabBar.js#L106

但在 Safari 下先执行的 setTimeout 中的 updateInkBar，没有赋值初始样式

待补充示例

修复 table 组件 scroll x 设置为 max-content 固定栏无阴影的问题

pr: #107
reference: https://github.com/react-component/table/blob/master/src/Table.tsx#L520

Typography 报错， san 3.7.6+ 版本

排版组件Typography报错，在 computed 中 this.data.get() 报错，提示参数不能为空。

需要修改为：
clientRendered, copyable, getEllipsis } = this.data.get(); // const clientRendered = this.data.get('clientRendered'); // const copyable = this.data.get('copyable'); // const getEllipsis = this.data.get('getEllipsis');

SelectOption 项添加 tooltip，但 hover 后没展示提示内容

代码片段：

<s-select defaultValue="lucy" style="width: 120px;" on-change="handleChange">
      <s-select-option value="jack">
            <s-tooltip title="prompt text">
                  <span>Jack</span>
            </s-tooltip>
      </s-select-option>
      <s-select-option value="lucy">
            <s-tooltip title="prompt text">
                  <span>Lucy</span>
            </s-tooltip>
      </s-select-option>
  </s-select>

在线示例：https://codesandbox.io/s/restless-frost-hcdt9v?file=/src/index.js

虚拟滚动的Tree组件，快速滚动时候渲染跟不上

在快速滑动时候，渲染跟不上滑动速度，不知可否参考 ant design的虚拟滚动，自己接管滚动事件来优化下

pagination 组件的 pageSizeOptions 设置不生效

pagination 组件的 pageSizeOptions 设置不生效，未按照设置的值展示，依然使用默认值

复现路径：

Table component "rowClassName" attribution did not work.

在源码中也无法找到该属性的实现。只能在源码 es/table/README.md 找到描述。

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

0.3.3

Environment

Mac Chrome86 San0.3.3

Reproduction link

Steps to reproduce

rowClassName | 表格行的类名 | Function(record, index):string | - |
did't work.

What is expected?

work

What is actually happening?

work

示例代码里面的路径引用需要调整

这是官网示例代码
import message from 'santd/message';

实际代码是
import message from 'santd/es/message';
import 'santd/es/message/style/index.css';

santd.min.css 文件大小没有被压缩。

dist里面的 santd.min.css 和santd.css 一样大，并没有压缩

table 完全铺开时仍然展现阴影

页面加载后（未滑动 table），table 表单完全展开仍然存在右侧的阴影，可见官方示例 10 (固定头和列) / 11 (固定列)

新增 image 组件

Tree组件能支持mouse事件么

比如mouseleave、mouseenter事件
其实也可以在slot=title中自己写on-mouse事件，但是在slot=title中，只可以拿到当前的title值，拿不到key等其他数据，所以也不能满足需求，最好在slot=title中，同时注入所有的当前item的数据

开发环境报错

日期选择组件的浮层容器 BUG

日期选择类组件的浮层容器设置属性是 getCalendarContainer，但是在 trigger 里面只用到了 getPopupContainer，没有 getCalendarContainer，现在日期选择类组件只能渲染在 body 上。
以下是 santd 的 master 分支代码：