@king-design/intact 2.0.0-beta.0

package/components/timepicker/styles.ts

@@ -0,0 +1,58 @@
+import {css, cx} from '@emotion/css';
+import {theme, setDefault} from '../../styles/theme';
+import {deepDefaults, sizes, Sizes, getRight, getLeft, palette} from '../../styles/utils';
+import '../../styles/global';
+import {datepicker, makePanelStyles as makePanelStylesBase} from '../datepicker/styles';
+
+const defaults = {
+    get border() { return datepicker.border; },
+    padding: `16px`,
+    scrollHeight: `160px`,
+
+    // range
+    range: {
+        width: `200px`,
+        padding: `16px`,
+        titleGap: `8px`,
+        scrollHeight: `140px`,
+    },
+};
+
+let timepicker: any;
+setDefault(() => {
+    timepicker = deepDefaults(theme, {timepicker: defaults}).timepicker;
+});
+
+export function makePanelStyles() {
+    return cx(
+        makePanelStylesBase(),
+        css`
+            &.k-time-content {
+                .k-datepicker-time {
+                    padding: ${timepicker.padding};
+                }
+                .k-scroll-select {
+                    height: ${timepicker.scrollHeight};
+                }   
+            }
+            &.k-range {
+                .k-datepicker-time {
+                    width: auto;
+                    border: ${timepicker.border};
+                }
+                .k-scroll-select {
+                    height: ${timepicker.range.scrollHeight};
+                }
+                .k-datepicker-calendar-wrapper {
+                    padding: ${timepicker.range.padding};
+                    width: ${timepicker.range.width};
+                    border: none;
+                }
+                .k-timepicker-title {
+                    text-align: center;
+                    margin-bottom: ${timepicker.range.titleGap};
+                }
+            }
+        `,
+    );
+}

package/components/timepicker/useDisabled.ts

@@ -0,0 +1,13 @@
+import {useDisabled as useDisabledBase} from '../datepicker/useDisabled';
+import type {useFormats} from './useFormats';
+import {PanelFlags} from '../datepicker/usePanel';
+
+export function useDisabled(formats: ReturnType<typeof useFormats>) {
+    const {isDisabledTime, ...rest} = useDisabledBase(formats);
+
+    function isDisabledTimeByStep(value: string, flag: PanelFlags) {
+        return isDisabledTime(formats.createDateByValueFormat(value), flag);
+    } 
+
+    return {isDisabledTime, isDisabledTimeByStep, ...rest};
+}

package/components/timepicker/useFormats.ts

@@ -0,0 +1,45 @@
+import {useInstance, Component} from 'intact';
+import dayjs, {Dayjs} from '../datepicker/dayjs';
+import {isString} from 'intact-shared';
+import type {TimepickerProps} from './';
+import type {Value} from '../datepicker/basepicker';
+import {YEAR_FORMAT, TIME_FORMAT, PREFIX} from './constants'
+
+export function useFormats<T extends Component<TimepickerProps>>() {
+    const instance = useInstance() as T;
+
+    function getValueFormat() {
+        const {format, valueFormat} = instance.get();
+        return valueFormat || format || TIME_FORMAT;
+    }
+
+    function getShowFormat() {
+        const {format, showFormat} = instance.get();
+        return showFormat || format || TIME_FORMAT;
+    }
+
+    function createDateByValueFormat(value: Value) {
+        return dayjs(PREFIX + value, YEAR_FORMAT + getValueFormat());
+    }
+
+    function createDateByShowFormat(value: Value) {
+        return dayjs(PREFIX + value, YEAR_FORMAT + getShowFormat(), true); // strict parsing 
+    }
+
+    function getShowString(value: Dayjs) {
+        return value.format(getShowFormat());
+    }
+
+    function getValueString(value: Dayjs) {
+        return value.format(getValueFormat());
+    }
+
+    return {
+        getValueFormat,
+        getShowFormat,
+        createDateByValueFormat,
+        createDateByShowFormat,
+        getShowString,
+        getValueString,
+    };
+}

package/components/timepicker/useStep.ts

@@ -0,0 +1,71 @@
+import {useInstance, Component} from 'intact';
+import type {TimepickerProps} from './';
+import {useState} from '../../hooks/useState';
+import type {useDisabled} from '../datepicker/useDisabled';
+import type {useFormats} from './useFormats';
+import {NOW} from './constants'
+import {Dayjs} from 'dayjs';
+import {useReceive} from '../../hooks/useReceive';
+
+type Option = {
+    value: string,
+    label: string
+}
+
+type StepComponent = Component<TimepickerProps>
+
+export function useStep(
+    {maxDate, minDate}: ReturnType<typeof useDisabled>,
+    {getValueString, getShowString}: ReturnType<typeof useFormats>
+) {
+    const instance = useInstance() as StepComponent;
+    const options = useState<Option[] | null>(null);
+
+    useReceive<StepComponent>(['step', 'min', 'max'], generateOptions);
+
+    function generateOptions() {
+        const {step} = instance.get();
+
+        if (step) {
+            const data: Option[] = [];
+            const maxValue = maxDate.value || NOW.hour(23).minute(59).second(59);
+            const stepValue = parseTime(step);
+            let value = minDate.value || NOW;
+
+            const push = (value: Dayjs) => {
+                data.push({
+                    value: getValueString(value),
+                    label: getShowString(value),
+                });
+            }
+
+            for (; ; value = value.add(stepValue, 'second')) {
+                if (value <= maxValue) {
+                    push(value);
+                    if (+value === +maxValue) break;
+                } else if (data.length) {
+                    // it the last value is less than maxValue,
+                    // add the maxValue to the last
+                    push(maxValue);
+                    break;
+                } else {
+                    break;
+                }
+            }
+
+            options.set(data);
+        } else {
+            options.set(null);
+        }
+    }
+
+    function parseTime(time: string) {
+        const [hours, minutes, seconds] = time.split(':').map(item => {
+            return parseInt(item, 10);
+        });
+
+        return (hours * 60 + (minutes || 0)) * 60 + (seconds || 0);
+    }
+
+    return {options};
+}

package/components/timepicker/useValue.ts

@@ -0,0 +1,59 @@
+import {useInstance} from 'intact';
+import type {PanelPicker} from './panelPicker';
+import type {useFormats} from './useFormats';
+import {last} from '../utils';
+import {
+    useValue as useValueBase,
+    StateValueItem,
+    DayjsValueItem
+} from '../datepicker/basepicker';
+import type {useDisabled} from '../datepicker/useDisabled';
+import type {usePanel} from '../datepicker/usePanel';
+import {NOW} from './constants';
+import {PanelFlags} from '../datepicker/usePanel';
+
+export function useValue(
+    formats: ReturnType<typeof useFormats>,
+    disabled: ReturnType<typeof useDisabled>,
+    panel: ReturnType<typeof usePanel>,
+) {
+    const instance = useInstance() as PanelPicker;
+    const {value, getDayjsValue, setValue, onChangeTime, ...rest} = useValueBase(
+        formats,
+        disabled,
+        panel,
+        function(v: StateValueItem) {
+            return false;
+        },
+        function(v: DayjsValueItem) {
+            // pop the last value when input
+            // because it is a placeholder date
+            value.value.pop();
+            setValue(v, true);
+        },
+        function() {
+            return 'second';
+        },
+        function(dayjsValue, value) {
+            value.set(dayjsValue.slice(0));
+        }
+    );
+
+    setValue(getPlaceholderDates(), false);
+
+    instance.watch('value', value => {
+        const dayjsValue = getDayjsValue(); 
+        setValue(last(dayjsValue) || getPlaceholderDates(), false);
+    });
+
+    function getPlaceholderDates(): StateValueItem {
+        return instance.get('range') ? [NOW, NOW] : NOW;
+    }
+
+    function onChangeTimeByStep(v: string, flag: PanelFlags) {
+        const date = formats.createDateByValueFormat(v);
+        onChangeTime(date, flag);
+    }
+
+    return {value, setValue, getDayjsValue, onChangeTime, onChangeTimeByStep, ...rest};
+}

package/components/tip/demos/basic.md

@@ -0,0 +1,32 @@
+---
+title: 基础用法
+order: 0
+---
+
+标签类型：`default`, `primary`, `success`, `warning` `danger`
+
+```vdt
+import {Tip} from 'kpc';
+
+<div>
+    <Tip v-for={this.get('types')}
+        type={$value}
+    >{$value}</Tip>
+</div>
+```
+
+```styl
+.k-tip
+    margin-bottom 8px
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            types: ['default', 'primary', 'success', 'warning', 'danger'] as const
+        };
+    }
+}
+```

package/components/tip/demos/closable.md

@@ -0,0 +1,43 @@
+---
+title: 关闭按钮
+order: 1
+---
+
+给组件添加`closable`属性，可以关闭标签，关闭后会触发`close`事件；可以通过`close`扩展点来自定义
+关闭按钮的内容
+
+> 如果仅仅指定了`closable`属性，那么组件的开启和关闭是组件内部自己维护的状态，
+> 一旦组件被重新创建，那么又会回到默认开启状态，所以如果你需要维持组件的状态，
+> 需要自己维护`closed`属性，或者通过`v-if`来控制组件
+
+```vdt
+import {Tip} from 'kpc';
+
+<div>
+    <Tip v-for={this.get('types')}
+        key={$value}
+        type={$value}
+        closable
+    >{$value}</Tip>
+    <Tip closable>
+        custom closing content
+        <b:close>No longer show</b:close>
+    </Tip>
+</div>
+```
+
+```styl
+.k-tip
+    margin-bottom 8px
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            types: ['default', 'primary', 'success', 'warning', 'danger'] as const
+        };
+    }
+}
+```

package/components/tip/demos/title.md

@@ -0,0 +1,37 @@
+---
+title: 展示标题
+order: 2
+---
+
+通过`title`扩展点，可以自定义标题内容
+
+```vdt
+import {Tip} from 'kpc';
+
+<div>
+    <Tip v-for={this.get('types')}
+        key={$value}
+        type={$value}
+        closable
+    >
+        <b:title>{$value}</b:title>
+        This is a {$value} tip.
+    </Tip>
+</div>
+```
+
+```styl
+.k-tip
+    margin-bottom 8px
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            types: ['default', 'primary', 'success', 'warning', 'danger'] as const
+        };
+    }
+}
+```

package/components/tip/index.md

@@ -0,0 +1,29 @@
+---
+title: 警告提示
+category: 组件
+order: 89 
+sidebar: doc
+---
+
+> `Tip`组件继承`Tag`组件，所以很多属性都是一样的
+
+# 属性
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| type | 组件类型 | `"default"` | `"primary"` | `"success"` | `"warning"` | `"danger"` | `"default"` |
+| disabled | 是否展示禁用状态 | `Boolean` | `false` |
+| closable | 是否可关闭 | `Boolean` | `false` |
+
+# 扩展点
+
+| 名称 | 说明 |
+| --- | --- |
+| title | 自定义标题内容 |
+| close | 自定义关闭按钮内容 |
+
+# 事件
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| close | 标签关闭事件 | - |

package/components/tip/index.ts

@@ -0,0 +1,15 @@
+import template from './index.vdt';
+import {Tag, TagProps, TagEvents, TagBlocks} from '../tag/base';
+
+export interface TipProps extends TagProps { }
+
+export interface TipEvents extends TagEvents { }
+
+export interface TipBlocks extends TagBlocks {
+    title: null
+    close: null
+}
+
+export class Tip extends Tag<TipProps, TipEvents, TipBlocks> {
+    static template = template;
+}

package/components/tip/index.vdt

@@ -0,0 +1,38 @@
+import {Button} from '../button';
+import {Icon} from '../icon';
+import {makeStyles} from './styles';
+
+const {children, closable, type, disabled} = this.get();
+const classNameObj = {
+    'k-tip': true,
+    [makeStyles()]: true,
+};
+
+<t:super class={classNameObj} name="k-fade">
+    <b:body>
+        <div class="k-tip-wrapper">
+            <div v-if={$blocks.title} class="k-tip-title">
+                <b:title />
+            </div>
+            {children}
+        </div>
+    </b:body> 
+    <b:_close>
+        <Button v-if={closable}
+            type={!$blocks.close ? 'none' : 'link'}
+            icon={!$blocks.close}
+            ev-click={this.onClose}
+            class="k-tip-close"
+        >
+            <template>
+                <b:close>
+                    <Icon class="ion-ios-close-empty"
+                        size="large"
+                        color={type}
+                        hoverable={!disabled}
+                    />
+                </b:close>
+            </template>
+        </Button>
+    </b:_close>
+</t:super>

package/components/tip/styles.ts

@@ -0,0 +1,44 @@
+import {theme, setDefault} from '../../styles/theme';
+import {css} from '@emotion/css';
+import '../../styles/global';
+import {deepDefaults}  from '../../styles/utils';
+
+const defaults = {
+    title: {
+        fontSize: '14px',
+        gap: '8px'
+    },
+    get color() { return theme.color.text },
+    get padding() { return `6px ${theme.default.padding}` },
+};
+
+let tip: any;
+setDefault(() => {
+    tip = deepDefaults(theme, {tip: defaults}).tip;
+});
+
+export function makeStyles() {
+    return css`
+        // Tip extends Tag, so we add k-tip to increase the priority of class
+        &.k-tip {
+            display: flex;
+            height: auto;
+            padding: 0;
+            color: ${tip.color} !important;
+            align-items: flex-start;
+        }
+        .k-tip-wrapper {
+            flex: 1;
+            padding: ${tip.padding};
+        }
+
+        .k-tip-title {
+            font-size: ${tip.title.fontSize};
+            margin-bottom: ${tip.title.gap};
+        }
+
+        &.k-fade-leave-active {
+            position: relative;
+        }
+    `;
+}

package/components/tooltip/content.ts

@@ -0,0 +1,76 @@
+import {createRef, Children, VNode} from 'intact';
+import {
+    DropdownMenu,
+    DropdownMenuProps,
+    DropdownMenuEvents,
+    DropdownMenuBlocks,
+} from '../dropdown/menu';
+import template from './content.vdt';
+import {bind} from '../utils';
+import {Tooltip} from './tooltip';
+import {useArrow} from './useArrow';
+
+export interface TooltipContentProps extends DropdownMenuProps { } 
+export interface TooltipContentEvents extends DropdownMenuEvents { }
+export interface TooltipContentBlocks extends DropdownMenuBlocks {
+    buttons: null
+}
+
+export class TooltipContent extends DropdownMenu<
+    TooltipContentProps,
+    TooltipContentEvents,
+    TooltipContentBlocks
+> {
+    static template = template;
+
+    private isEmptyChildren: boolean = true;
+    private arrow = useArrow();
+
+    init() {
+        super.init();
+
+        this.on('$receive:children', (vNodes: Children) => {
+            this.isEmptyChildren = isEmptyChildren(vNodes);
+        });
+    }
+
+    @bind
+    private onEnter() {
+        this.dropdown!.position();
+    }
+
+    @bind
+    protected onMouseEnter(e: MouseEvent) {
+        const dropdown = this.dropdown as Tooltip; 
+        if (dropdown.get('hoverable')) {
+            dropdown!.show();
+        }
+        dropdown.trigger('mouseenter', e);
+    }
+
+    @bind
+    private ok() {
+        const dropdown = this.dropdown as Tooltip; 
+        dropdown.hide(true);
+        dropdown.trigger('ok');
+    }
+
+    @bind
+    private cancel() {
+        const dropdown = this.dropdown as Tooltip; 
+        dropdown.hide(true);
+        dropdown.trigger('cancel');
+    }
+}
+
+function isEmptyChildren(vNodes: Children): boolean {
+    if (!vNodes) return true;
+    if (Array.isArray(vNodes)) {
+        return vNodes.every(vNode => isEmptyChildren(vNode));
+    }
+    if ((vNodes as VNode).type === 1) {
+        return !(vNodes as VNode).children;
+    }
+
+    return false;
+};

package/components/tooltip/content.vdt

@@ -0,0 +1,44 @@
+import {Button} from '../button';
+import makeStyles from './styles';
+
+const {
+    showArrow, confirm, className,
+    theme, hoverable, trigger,
+    value, cancelText, okText,
+    size, always,
+} = this.dropdown.get();
+const {children} = this.get();
+const {arrowRef, arrowType} = this.arrow;
+
+const classNameObj = {
+    'k-tooltip-content': true,
+    'k-hoverable': hoverable || trigger === 'click',
+    'k-always': always,
+    [`k-${theme}`]: true,
+    [`k-${size}`]: size !== 'default',
+    [className]: className,
+    [makeStyles()]: true,
+};
+
+<t:super
+    value={!!value && !this.isEmptyChildren}
+    transition={{name: 'k-fade', onEnter: this.onEnter}}
+    class={classNameObj}
+>
+    <b:children>
+        {children}
+        <i v-if={showArrow}
+            class={{
+                "k-tooltip-arrow": true,
+                [`k-${arrowType.value}`]: arrowType.value,
+            }}
+            ref={arrowRef}
+        ></i>
+        <div class="k-tooltip-buttons" v-if={confirm}>
+            <b:buttons>
+                <Button type="primary" ev-click={this.ok} size="small">{okText}</Button>
+                <Button ev-click={this.cancel} size="small">{cancelText}</Button>
+            </b:buttons>
+        </div>
+    </b:children>
+</t:super>

package/components/tooltip/demos/always.md

@@ -0,0 +1,35 @@
+---
+title: 一直展示弹层 
+order: 5
+---
+
+如果你给组件添加`always`属性，那么那将一直保持当前展示/隐藏状态，除非你通过`value`改变它的状态，此时`trigger`
+触发方式没有效果
+
+> 当`content`内容为空时，依然不会展示弹层
+
+```vdt
+import {Tooltip} from 'kpc';
+
+<div style={{position: 'relative'}}>
+    <Tooltip content="hello" always value={true} 
+        container={this.container}
+    >
+        always show this tootip 
+    </Tooltip>
+    <br /><br />
+    <Tooltip content="" always value={true}>
+        don't show if content is empty
+    </Tooltip>
+</div>
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+
+    container(dom: Element) {
+        return dom.parentElement!; 
+    }
+}
+```