@king-design/intact 3.4.0-beta.2 → 3.4.2

package/components/descriptions/demos/basic.md

@@ -0,0 +1,47 @@
+---
+title: 基本用法
+order: 0
+---
+
+常见于详情页的信息展示 默认自带超长省略, 可通过DescriptionItem形式渲染数据或者提供items属性。
+
+```vdt
+import {Descriptions, DescriptionItem} from 'kpc';
+
+<div>
+
+    <Descriptions title="基础信息" items={this.get('items')} columns={4}/>
+
+    <Descriptions title="基础信息">
+        <DescriptionItem label="测试1">测试1</DescriptionItem>
+        <DescriptionItem label="测试2">测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长</DescriptionItem>
+        <DescriptionItem label="测试3">测试3</DescriptionItem>
+        <DescriptionItem label="测试4">测试4</DescriptionItem>
+        <DescriptionItem label="测试5">测试5</DescriptionItem>
+    </Descriptions>
+</div>
+```
+
+```styl
+.k-descriptions
+    padding 10px
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            items: [
+                {label:'label1', content:'测试1'},
+                {label:'label2', content:'测试测试'},
+                {label:'label3', content: '测试3'},
+                {label:'label4', content:'测试4', append: 'option'},
+            ]
+        };
+    };
+}
+```
+
+
+

package/components/descriptions/demos/custom.md

@@ -0,0 +1,51 @@
+---
+title: 自定义内容
+order: 1
+---
+
+两种使用方式均支持自定义内容。DescriptionItem提供了append插槽便于自定义内容, 若通过items形式传入则需要配置append字段作为自定义渲染内容。
+
+```vdt
+import {Descriptions, DescriptionItem, Copy, Button, Tooltip, Icon} from 'kpc';
+
+<div>
+    <Descriptions title="基础信息">
+        <b:title>
+            <span>自定义标题</span>
+            <Tooltip content="custom title">
+                <Icon class="k-icon-question" />
+            </Tooltip>
+        </b:title>
+        <DescriptionItem label="label1">
+            测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
+            <b:append>
+                <Copy text="success" />
+            </b:append>
+        </DescriptionItem>
+        <DescriptionItem label="label2">
+            测试
+        </DescriptionItem>
+        <DescriptionItem label="label3">
+            <b:label>
+                <span>自定义label</span>
+                <Tooltip content="custom label">
+                    <Icon class="k-icon-question" />
+                </Tooltip>
+            </b:label>
+            测试
+        </DescriptionItem>
+        <DescriptionItem label="label4">
+            <span>测试4</span>
+            <Button type="link">分配项目</Button>
+        </DescriptionItem>
+        <DescriptionItem label="label5">测试5</DescriptionItem>
+        <DescriptionItem label="label6">测试6</DescriptionItem>
+    </Descriptions>
+</div>
+```
+
+```styl
+.k-descriptions
+    padding 10px
+```
+

package/components/descriptions/demos/vertical.md

@@ -0,0 +1,25 @@
+---
+title: 垂直展示
+order: 2
+---
+
+通过vertical属性控制是否垂直展示
+
+```vdt
+import {Descriptions, DescriptionItem} from 'kpc';
+
+<div>
+    <Descriptions title="基础信息" vertical>
+        <DescriptionItem label="测试1">测试1</DescriptionItem>
+        <DescriptionItem label="测试2">测试2</DescriptionItem>
+        <DescriptionItem label="测试3">测试3</DescriptionItem>
+        <DescriptionItem label="测试4">测试4</DescriptionItem>
+        <DescriptionItem label="测试5">测试5</DescriptionItem>
+    </Descriptions>
+</div>
+```
+
+```styl
+.k-descriptions
+    padding 10px
+```

package/components/descriptions/descriptions.ts

@@ -0,0 +1,42 @@
+import {Component, TypeDefs} from 'intact';
+import {DescriptionItemProps} from './item';
+import template from './descriptions.vdt';
+import { useConfigContext } from '../config';
+import { VNode } from "intact";
+
+export interface DescriptionsProps {
+    vertical?: boolean
+    columns?: number
+    items?: DescriptionItemProps[]
+    title?: string | number | VNode
+}
+
+export interface DescriptionsBlocks {
+    title: null
+}
+
+
+export interface DescriptionsEvents {}
+
+
+const typeDefs: Required<TypeDefs<DescriptionsProps>> = {
+    vertical: Boolean,
+    columns: Number,
+    items: Array,
+    title: [String, Number, VNode],
+};
+
+
+
+
+const defaults = (): Partial<DescriptionsProps> => ({
+    columns: 3,
+});
+
+export class Descriptions extends Component<DescriptionsProps, DescriptionsEvents, DescriptionsBlocks> {
+    static template = template;
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+    
+    private config = useConfigContext();
+}

package/components/descriptions/descriptions.vdt

@@ -0,0 +1,31 @@
+import {DescriptionItem} from './item';
+import {makeStyles} from './styles';
+import {getRestProps} from '../utils';
+
+
+const {children, className, columns, title, vertical, items} = this.get();
+const { k } = this.config;
+
+const classNameObj = {
+    [`${k}-descriptions`]: true,
+    [`${k}-vertical`]: vertical,
+    [className]: className,
+    [makeStyles(k, columns)]: true,
+};
+
+
+<div {...getRestProps(this)} class={classNameObj}>
+    <div v-if={$blocks.title || title} class={`${k}-descriptions-title`}>
+        <b:title>
+             <template v-if={title}>{title}</template>
+        </b:title>
+    </div>
+    <div class={`${k}-descriptions-content`}>
+        <template v-if={items}>
+             <DescriptionItem v-for={items} label={$value.label} content={$value.content} append={$value.append} />
+        </template>
+        <template v-else>
+            {children}
+        </template>
+    </div>
+</div>

package/components/descriptions/index.md

@@ -0,0 +1,50 @@
+---
+title: 描述列表
+category: 组件
+order: 30
+sidebar: doc
+---
+
+# 属性
+
+## Descriptions
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| vertical | 垂直排列 | `boolean` | `false` |
+| title | 描述列表的标题，显示在最顶部 | `string` | `number` | `VNode` | `undefined` |
+| items | 描述列表项内容 | `DescriptionItemProps[]` | `[]` |
+| columns | 一行的 DescriptionItem 数量 | `number` | `3` |
+
+```ts
+import {VNode} from 'intact';
+
+export interface DescriptionItemProps {
+    label?: string | number | VNode
+    content?: string | number | VNode
+    option?: string | number | VNode
+}
+```
+
+## DescriptionItem
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| label | 内容的标题 | `string` | `number` | `VNode` | `undefined` |
+| content | 包含内容 | `string` | `number` | `VNode` | `undefined` |
+| append | 自定义内容 | `string` | `number` | `VNode` | `undefined` |
+
+# 拓展点
+
+## Descriptions
+
+| 名称 | 说明 
+| --- | --- | 
+| title | 自定义title | 
+
+## DescriptionItem
+
+| 名称 | 说明 
+| --- | --- | 
+| append | 用于超长省略后的操作区自定义内容 | 
+| label | 自定义label | 

package/components/descriptions/index.ts

@@ -0,0 +1,2 @@
+export * from './descriptions';
+export * from './item';

package/components/descriptions/item.ts

@@ -0,0 +1,31 @@
+
+import { Component, TypeDefs, VNode } from "intact";
+import template from './item.vdt';
+import { useConfigContext } from '../config';
+
+export interface DescriptionItemProps {
+    label?: string | number | VNode
+    content?: string | number | VNode
+    append?: string | number | VNode
+}
+
+export interface DescriptionItemBlocks {
+    append: null
+    label: null
+}
+
+export interface DescriptionItemEvents {}
+
+const typeDefs: Required<TypeDefs<DescriptionItemProps>> = {
+    label: [String, Number, VNode],
+    content: [String, Number, VNode],
+    append: [String, Number, VNode]
+};
+
+
+export class DescriptionItem extends Component<DescriptionItemProps, DescriptionItemEvents, DescriptionItemBlocks> {
+    static template = template;
+    static typeDefs = typeDefs;
+
+    private config = useConfigContext();
+}

package/components/descriptions/item.vdt

@@ -0,0 +1,32 @@
+import {makeStyles} from './styles';
+import {getRestProps} from '../utils';
+import {Ellipsis} from '../ellipsis';
+
+const {
+    children, className, span, label, content, append
+} = this.get();
+const { k } = this.config;
+
+const classNameObj = {
+    [`${k}-description-item`]: true,
+    [className]: className,
+    [makeStyles(k)]: true,
+};
+
+<div {...getRestProps(this)} class={classNameObj}>
+    <div class={`${k}-description-item-label`}>
+        <b:label>
+             <template v-if={label}>{label}</template>
+        </b:label>
+    </div>
+    <div class={`${k}-description-centent`}>
+        <Ellipsis>
+            {content || children}
+        </Ellipsis>
+        <div class={`${k}-description-option`} v-if={$blocks.append || append}>
+            <b:append>
+                <template v-if={append}>{append}</template>
+            </b:append>
+        </div>
+    </div>
+</div>

package/components/descriptions/styles.ts

@@ -0,0 +1,83 @@
+import {css} from '@emotion/css';
+import {theme, setDefault} from '../../styles/theme';
+import {deepDefaults} from '../../styles/utils';
+import '../../styles/global';
+import { cache } from '../utils';
+
+
+const defaults = {
+    title: {
+        get color() { return theme.color.title },
+        weight: 500,
+        size: '14px',
+    },
+    label: {
+        get color() { return theme.color.lightBlack },
+        padding: '0 16px 0 0',
+    },
+ 
+};
+
+let descriptions: typeof defaults;
+setDefault(() => {
+    descriptions = deepDefaults(theme, {descriptions: defaults}).descriptions;
+    makeStyles?.clearCache();
+});
+
+export const makeStyles = cache(function makeStyles(k: string, column: number) {
+    const itemWidth = `${100 / column}%`;
+
+    return css`
+        &.${k}-vertical {
+            .${k}-description-item {
+                display: flex;
+                flex-direction: column;
+                align-items: baseline;
+
+                .${k}-description-centent {
+                    width: auto;
+                }
+            }
+        }
+
+        .${k}-descriptions-title {
+            color: ${descriptions.title.color};
+            font-weight: ${descriptions.title.weight};
+            font-size: ${descriptions.title.size};
+            display: flex;
+            align-items: center;
+        }
+
+        .${k}-descriptions-content {
+            display: flex;
+            flex-wrap: wrap;
+            padding-top: 16px;
+        }
+
+        .${k}-description-item {
+            display: flex;
+            align-items: center;
+            padding-bottom: 16px;
+            flex: 0 0 ${itemWidth};
+            width: ${itemWidth}; 
+        }
+        .${k}-description-centent {
+            display: flex;
+            align-items: center;
+            max-width: 60%;
+        }
+
+        .${k}-description-item-label {
+            color: ${descriptions.label.color};
+            padding: ${descriptions.label.padding};
+            display: flex;
+            align-items: center;
+        }
+
+        .${k}-description-option {
+            display: inline-block;
+            margin-left: 8px;
+            line-height: 0px;
+        }
+    `
+});

package/components/icon/demos/icons.md

@@ -136,6 +136,9 @@ export default class extends Component<Props> {
                 ['refresh'],
                 ['upload'],
                 ['download'],
+                ['start'],
+                ['stop'],
+                ['sortorder'],
             ],
         } as Props
     }

package/components/switch/demos/beforeChange.md

@@ -11,7 +11,7 @@ order: 8
 import {Switch} from 'kpc';
 
 <div>
-    <Switch v-model="value1" beforeChange={this.beforeChange} />
+    <Switch v-model="value1" trueValue={1} falseValue={0} beforeChange={this.beforeChange} />
     <Switch v-model="value2" beforeChange={this.beforeChangeFalse} />
 </div>
 ```
@@ -27,21 +27,21 @@ export default class extends Component {
     static template = template;
     static defaults() {
         return {
-            value1: false,
+            value1: 0,
             value2: false,
         }
     }
 
-    beforeChange(value: any) {
+    beforeChange(from: any, to: any) {
         return new Promise<boolean>(resolve => {
-            Message.warning(`current value is ${value}`);
+            Message.warning(`current value is ${from}, to value is ${to}`);
             setTimeout(() => {
                 resolve(true);
             }, 1000);
         });
     }
-    beforeChangeFalse(value: any) {
-        Message.warning(`current value is ${value}`);
+    beforeChangeFalse(from: any, to: any) {
+        Message.warning(`current value is ${from}, to value is ${to}`);
         return new Promise<boolean>(resolve => {
             setTimeout(() => {
                 resolve(false);

package/components/switch/index.md

@@ -23,7 +23,7 @@ sidebar: doc
 | size | 尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
 | disabled | 控制禁用 | `boolean` | `false` |
 | loading | 开关loading属性 | `boolean` | `false` |
-| beforeChange | 切换`Switch`之前的拦截函数，如果该函数返回`false`则阻止本次切换，支持异步函数, 参数为当前value | <code>(value: any) => boolean &#124; Promise&lt;boolean&gt;</code> | `undefined` |
+| beforeChange | 切换`Switch`之前的拦截函数，如果该函数返回`false`则阻止本次切换，支持异步函数, 参数为当前值from，期望切换值to | <code>(from: any, to: any) => boolean &#124; Promise&lt;boolean&gt;</code> | `undefined` |
 
 # 扩展点
 

package/components/switch/index.spec.ts

@@ -126,7 +126,14 @@ describe('Switch', () => {
         el1.click();
         el2.click();
         await wait(1000);
-        expect(instance.get('value1')).to.be.true;
+        expect(instance.get('value1')).eql(1);
+        expect(instance.get('value2')).to.be.false;
+        await wait();
+        const [dragg1, dragg2] = element.querySelectorAll<HTMLElement>('.k-switch-handle');
+        dispatchEvent(dragg2, 'mousedown', {which: 1, clientX: 0});
+        dispatchEvent(document, 'mousemove', {clientX: 30});
+        dispatchEvent(document, 'mouseup', {clientX: 30});
+        await wait();
         expect(instance.get('value2')).to.be.false;
     });
 });

package/components/switch/index.ts

@@ -18,7 +18,7 @@ export interface SwitchProps<True = any, False = any> {
     size?: Sizes
     disabled?: boolean
     loading?: boolean
-    beforeChange?: (value: True | False | undefined) => boolean | Promise<boolean>;
+    beforeChange?: (from: True | False | undefined, to: True | False | undefined) => boolean | Promise<boolean>;
 }
 
 export interface SwitchEvents {
@@ -84,7 +84,8 @@ export class Switch<True = true, False = false> extends Component<SwitchProps<Tr
     @bind
     private onClickOnHandle(e: MouseEventWithIgnore) {
         // we can not stop propagation, otherwise the click can not be listen at outer
-        e._switchIgnore = true;
+        const {beforeChange} = this.get();
+        e._switchIgnore = !beforeChange;
     }
 
     @bind
@@ -96,7 +97,7 @@ export class Switch<True = true, False = false> extends Component<SwitchProps<Tr
     }
 
     public async toggle(isKeypress: boolean) {
-        const {disabled, beforeChange, value} = this.get();
+        const {disabled, beforeChange, value, trueValue, falseValue} = this.get();
         if (disabled) return;
 
         // if is not keypress, we blur it to remove focus style
@@ -110,7 +111,8 @@ export class Switch<True = true, False = false> extends Component<SwitchProps<Tr
                 loading: true
             });
             try {
-                const ret = await beforeChange(value);
+                const toValue = this.isChecked() ? falseValue : trueValue;
+                const ret = await beforeChange(value, toValue);
                 if (!ret) return;
             } finally {
                 this.set({

package/components/switch/useDraggable.ts

@@ -14,7 +14,8 @@ export function useDraggable(elementRef: RefObject<HTMLElement>) {
     let maxWidth: number;
 
     function onStart(e: MouseEvent) {
-        if (instance.get('disabled')) return;
+        const {disabled, beforeChange} = instance.get();
+        if (disabled || beforeChange) return;
 
         x = e.clientX;
         height = barRef.value!.clientHeight; 

package/components/table/column.ts

@@ -9,6 +9,7 @@ export interface TableColumnProps {
     sortable?: boolean
     width?: string | number
     group?: TableColumnGroupItem[]
+    hideGroupHeader?: boolean
     multiple?: boolean
     ignore?: boolean
     fixed?: 'left' | 'right'
@@ -48,6 +49,7 @@ const typeDefs: Required<TypeDefs<TableColumnProps>> = {
     sortable: Boolean,
     width: [String, Number],
     group: Array,
+    hideGroupHeader: Boolean,
     multiple: Boolean,
     ignore: Boolean,
     fixed: ['left', 'right'],

package/components/table/column.vdt

@@ -16,7 +16,7 @@ import {Input} from '../input';
 import {_$} from '../../i18n';
 import {ignoreSortable} from './useSortable';
 
-const {title, fixed, group, multiple, key, sortable, cols, rows, hidden} = this.get();
+const {title, fixed, group, multiple, key, sortable, cols, rows, hidden, hideGroupHeader} = this.get();
 const {
     onSelect, isChecked, keywords, filteredGroup,
     onShow, reset, confirm, dropdownRef,
@@ -66,7 +66,7 @@ const { k } = this.config;
                                                     <b:title>{title}</b:title>
                                                 </div>
                                                 <Dropdown v-if={group}
-                                                    position={{my: 'center top', at: 'center bottom+5', collision: 'flipfit'}}
+                                                    position={{my: 'left top', at: 'left bottom+5', collision: 'flipfit'}}
                                                     key="dropdown"
                                                     trigger="click"
                                                     ev-show={() => onShow(groupValue)}
@@ -78,7 +78,7 @@ const { k } = this.config;
                                                         color={isEmptyValue(groupValue) ? null : 'primary'}
                                                     />
                                                     <DropdownMenu class={{[`${k}-table-group-dropdown`]: true, [makeGroupMenuStyles(k)]: true}}>
-                                                        <div class={`${k}-table-group-header`}>
+                                                        <div class={`${k}-table-group-header`} v-if={!hideGroupHeader}>
                                                             <Input size="small" fluid
                                                                 placeholder={_$('请输入关键字')}
                                                                 value={keywords.value}
@@ -105,7 +105,6 @@ const { k } = this.config;
                                                             >{_$('全选')}</Button>
                                                             <Button size="small"
                                                                 disabled={isEmptyValue(localGroupValue.value)}
-                                                                type="secondary"
                                                                 ev-click={() => reset(onChange)}
                                                             >{_$('重置')}</Button>
                                                             <Button type="primary" size="small"

package/components/table/index.md

@@ -103,6 +103,7 @@ export interface PaginationProps {
 | sortable | 是否可排序 | `boolean` | `false` |
 | width | 列宽，可以指定百分比或像素(像素不需要加单位) | `string` | `undefined` |
 | group | 指定分组数组，每一项格式为`{value: '选中后的值', label: '展示的文案'}` | `TableColumnGroupItem[]` | `undefined` |
+| hideGroupHeader | 是否隐藏group下拉菜单中header区域 | `boolean` | `false` |
 | multiple | 分组是否支持多选 | `boolean` | `false` |
 | ignore | 是否忽略当前列的导出 | `boolean` | `false` |
 | fixed | 是否将列固定，`"left"`固定在左侧；`"right"`固定在右侧 | `"left"` | `"right"` | `undefined` |

package/es/components/descriptions/descriptions.d.ts

@@ -0,0 +1,20 @@
+import { Component, TypeDefs } from 'intact';
+import { DescriptionItemProps } from './item';
+import { VNode } from "intact";
+export interface DescriptionsProps {
+    vertical?: boolean;
+    columns?: number;
+    items?: DescriptionItemProps[];
+    title?: string | number | VNode;
+}
+export interface DescriptionsBlocks {
+    title: null;
+}
+export interface DescriptionsEvents {
+}
+export declare class Descriptions extends Component<DescriptionsProps, DescriptionsEvents, DescriptionsBlocks> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<DescriptionsProps>>;
+    static defaults: () => Partial<DescriptionsProps>;
+    private config;
+}

package/es/components/descriptions/descriptions.js

@@ -0,0 +1,34 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact';
+import template from './descriptions.vdt';
+import { useConfigContext } from '../config';
+import { VNode } from "intact";
+var typeDefs = {
+  vertical: Boolean,
+  columns: Number,
+  items: Array,
+  title: [String, Number, VNode]
+};
+var defaults = function defaults() {
+  return {
+    columns: 3
+  };
+};
+export var Descriptions = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Descriptions, _Component);
+  function Descriptions() {
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.config = useConfigContext();
+    return _this;
+  }
+  return Descriptions;
+}(Component);
+Descriptions.template = template;
+Descriptions.typeDefs = typeDefs;
+Descriptions.defaults = defaults;