@king-design/intact 3.5.1 → 3.6.0-beta.0

package/components/breadcrumb/demos/separator.md

@@ -10,16 +10,16 @@ import {Breadcrumb, BreadcrumbItem, Icon} from 'kpc';
 
 <Breadcrumb>
     <b:separator>
-        <Icon class="ion-ios-arrow-thin-right separator" size="large" />
+        <Icon class="ion-ios-arrow-thin-right separator" />
     </b:separator>
     <BreadcrumbItem to="/">
-        <Icon class="ion-home" /> item 1
+        <Icon class="ion-home" size="small"/> item 1
     </BreadcrumbItem>
     <BreadcrumbItem to="/components/breadcrumb/">
-        <Icon class="ion-earth" /> item 2
+        <Icon class="ion-earth"  size="small"/> item 2
     </BreadcrumbItem>
     <BreadcrumbItem>
-        <Icon class="ion-planet" /> item 3
+        <Icon class="ion-planet" size="small"/> item 3
     </BreadcrumbItem>
 </Breadcrumb>
 ```

package/components/breadcrumb/index.vdt

@@ -15,7 +15,7 @@ const classNameObj = {
 const separatorVNode = (
     <span class={`${k}-breadcrumb-separator`}>
         <template v-if={!$blocks.separator && !separator}>
-            <Icon class="k-icon-right" />
+            <Icon class="k-icon-right" size="small"/>
         </template>
         <b:separator v-else>{separator}</b:separator>
     </span>

package/components/breadcrumb/styles.ts

@@ -5,12 +5,12 @@ import '../../styles/global';
 import { cache } from '../utils';
 
 const defaults = {
-    fontSize: '14px',
+    fontSize: '12px',
     get color() { return theme.color.lightBlack },
     get hoverColor() {return theme.color.primary },
     gap: '6px',
     activeFontWeight: 'normal',
-    activeColor: `#262626`,
+    get activeColor() { return theme.color.title },
 };
 
 let breadcrumb: typeof defaults;
@@ -22,6 +22,7 @@ setDefault(() => {
 export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         font-size: ${breadcrumb.fontSize};
+        line-height: 12px;
         display: flex;
         align-items: center;
         .${k}-breadcrumb-item {

package/components/button/index.md

@@ -35,6 +35,7 @@ sidebar: doc
 | fluid | 是否宽度100% | `boolean` | `false` |
 | seperate | 是否展示间隔，此属性为错别字，将会在下个版本被删除，请使用正确的属性 `separate`，若两个属性同时使用，则会优先使用`separate`属性 | `boolean` | `false` |
 | separate | 是否展示间隔 | `boolean` | `false` |
+| btnWidth | 指定按钮组每个按钮的固定宽度，默认根据内容撑开 | `number` | `string` | `undefined` |
 
 # 方法
 

package/components/datepicker/basepicker.ts

@@ -3,7 +3,7 @@
  */
 import {useInstance, Component, TypeDefs} from 'intact';
 import {useState, watchState, State} from '../../hooks/useState';
-import dayjs, {Dayjs, OpUnitType} from './dayjs';
+import dayjs, {Dayjs, OpUnitType, QUnitType} from './dayjs';
 import {findValueIndex} from './helpers';
 import type {useFormats} from './useFormats';
 import type {useDisabled} from './useDisabled';
@@ -44,7 +44,8 @@ export interface BasePickerProps<
 }
 
 export interface BasePickerEvents extends BaseSelectEvents {
-    selecting: [StateValueRange]
+    selecting: [StateValueRange],
+    togglePosition: []
 }
 
 export interface BasePickerBlocks<
@@ -74,6 +75,7 @@ const defaults = (): Partial<BasePickerProps<any>> => ({
 const events: Events<BasePickerEvents> = {
     ...BaseSelect.events,
     selecting: true,
+    togglePosition: true,
 };
 
 export abstract class BasePicker<
@@ -100,8 +102,8 @@ export abstract class BasePicker<
             multiple ?  '' : !range ?
                 value ? getShowString(value as Dayjs) : '' :
                 value ? [
-                    getShowString((value as DayjsValueRange)[0]),
-                    getShowString((value as DayjsValueRange)[1]),
+                    (value as DayjsValueRange)[0] ? getShowString((value as DayjsValueRange)[0]) : '',
+                    (value as DayjsValueRange)[1] ? getShowString((value as DayjsValueRange)[1]) : '',
                 ].join(' ~ ') : ''
         );
     }
@@ -124,7 +126,7 @@ export function useValue(
     panel: ReturnType<typeof usePanel>,
     shouldUpdateValue: (v: StateValueItem) => boolean,
     updateValueOnInput: (v: DayjsValueItem) => void,
-    getEqualType: () => OpUnitType,
+    getEqualType: () => OpUnitType | QUnitType,
     updateStateValue: (v: DayjsValue, value: State<StateValue>) => void,
 ) {
     // Normalize the value to multipe values, no matter it's multipe or not
@@ -133,11 +135,23 @@ export function useValue(
     let dayjsValue: DayjsValue = [];
 
     instance.watch('value', (newValue, oldValue) => {
+        
         if (isEqualArray(newValue, oldValue)) return;
-        dayjsValue = convertToDayjs(newValue);
-        updateStateValue(dayjsValue, value);
-        // should update keywords
+        
+        // 检查是否与当前 dayjsValue 对应的字符串相同，避免循环
+        const currentValueStr = convertToValueString(dayjsValue);
+        if (newValue === currentValueStr) {
+            return;
+        }
+        
+        // 只执行一次转换和更新逻辑
+        const _value = convertToDayjs(newValue);
+        
+        dayjsValue = _value;
+        updateStateValue(_value, value);
         instance.resetKeywords(instance.input.keywords);
+        
+
     });
 
     watchState(instance.input.keywords, v => {
@@ -157,6 +171,8 @@ export function useValue(
                 }
                 if (endDate.isAfter(startDate)) {
                     updateValueOnInput([startDate, endDate]);
+                } else {
+                    updateValueOnInput([endDate, startDate]);
                 }
             }
         } else {
@@ -212,7 +228,6 @@ export function useValue(
     }
 
     function setSingleDate(v: StateValueItem, fromInput: boolean) {
-        const {range}  = instance.get();
         value.set([v]);
         if (fromInput || shouldUpdateValue(v)) {
             updateValue();
@@ -267,15 +282,40 @@ export function useValue(
 
     function updateValue() {
         const _value = value.value as DayjsValue;
-        const valueStr = convertToValueString(_value); 
+        
+        const valueStr = convertToValueString(_value);
+        
+        // 检查是否需要更新，避免循环调用
+        if (instance.get('value') === valueStr) {
+            return;
+        }
+        
+        // 在设置 value 之前先更新 dayjsValue
+        dayjsValue = _value;
         instance.set('value', valueStr);
+        
         instance.resetKeywords(instance.input.keywords);
+
     }
 
     function onConfirm() {
-        // unique
-        if (!instance.get('multiple')) {
-            instance.hide();
+        const lastValue = last(instance.value.value.value);
+        const {multiple, range} = instance.get();
+        if (!multiple) {
+        
+            if (range) {
+                // 范围选择：需要开始和结束时间都选择完才关闭
+                if((lastValue as [Dayjs, Dayjs?]).length === 2) {
+                    instance.hide(); 
+                } 
+                instance.trigger('togglePosition');
+            } else {
+                // 单选：选择完时间就关闭
+                if (lastValue) {
+                    instance.hide();
+                } 
+            }
+
         } else {
             unique();
             panel.reset();
@@ -283,6 +323,12 @@ export function useValue(
         updateValue();
     }
 
+    function setMoment() {
+        const now = dayjs();
+        setValue(now, true);
+        instance.hide();
+    }
+
     function unique() {
         const _value = value.value;
         const map: Record<string, true> = {};
@@ -345,5 +391,6 @@ export function useValue(
         setValue,
         convertToDayjs,
         getDayjsValue,
+        setMoment,
     };
 }

package/components/datepicker/calendar.ts

@@ -10,6 +10,8 @@ import {useShowDate} from './useShowDate';
 import {bind} from '../utils';
 import {useYears} from './useYears';
 import {useMonths} from './useMonths';
+import {useWeeks} from './useWeeks';
+import {useQuarters} from './useQuarters';
 import {StateValue} from './basepicker';
 import {useStatus} from './useStatus';
 import {PanelFlags} from './usePanel';
@@ -17,7 +19,7 @@ import { useConfigContext } from '../config';
 
 export interface DatepickerCalendarProps {
     value: StateValue
-    type?: 'date' | 'year' | 'month'
+    type?: 'date' | 'year' | 'month' | 'week' | 'quarter'
     flag: PanelFlags
 }
 
@@ -40,6 +42,8 @@ export class DatepickerCalendar extends Component<DatepickerCalendarProps, Datep
     public days = useDays(this.showDate.date, this.status, this.datepicker.focusDate.focusDate);
     public years = useYears(this.showDate.date, this.status, this.datepicker.focusDate.focusDate);
     public months = useMonths(this.showDate.date, this.status, this.datepicker.focusDate.focusDate);
+    public weeks = useWeeks(this.showDate.date, this.status, this.datepicker.focusDate.focusDate);
+    public quarters = useQuarters(this.showDate.date, this.status, this.datepicker.focusDate.focusDate);
     private config = useConfigContext();
 
     @bind

package/components/datepicker/calendar.vdt

@@ -7,7 +7,12 @@ import {getNowDate} from './helpers';
 
 const type = this.type.value;
 const isYear = type === 'year';
+const isWeek = type === 'week';
+const isQuarter = type === 'quarter';
 const isYearOrMonth = isYear || type === 'month';
+const isDateOrDateTime = type === 'date' || type === 'datetime'
+// isDateOrDateTime & isWeek合并
+const showDateWeeks = isDateOrDateTime || isWeek
 const { k } = this.config;
 const classNameObj = {
     [`${k}-datepicker-calendar`]: true,
@@ -59,7 +64,7 @@ const {
             <Button icon type="none" size="small" class={`${k}-prev`}
                 tagName="div"
                 ev-click={prevMonth}
-                v-if={!isYearOrMonth}
+                v-if={showDateWeeks}
             >
                 <Icon class={`${k}-icon-left`} size="small" />
             </Button>
@@ -79,7 +84,7 @@ const {
             <Button icon type="none" size="small" class={`${k}-next`}
                 tagName="div"
                 ev-click={nextMonth}
-                v-if={!isYearOrMonth}
+                v-if={showDateWeeks}
             >
                 <Icon class={`${k}-icon-right`} size="small" />
             </Button>
@@ -92,20 +97,29 @@ const {
             </Button>
         </div>
     </div>
-    <template v-if={!isYearOrMonth}>
+    <template v-if={showDateWeeks}>
         <div class={`${k}-weekdays`}>
             <div class={`${k}-weekday`}
                 v-for={[_$('日'), _$('一'), _$('二'), _$('三'), _$('四'), _$('五'), _$('六')]}
             >{$value}</div>
         </div>
-        <div class={`${k}-days`} ev-mouseleave={resetFocusDate}>
+        <div v-if={isWeek} class={`${k}-weeks`} ev-mouseleave={resetFocusDate}>
+            <div v-for={this.weeks.getWeeks(now)} class="week-row">
+                <div class={`${k}-week-number`} ev-click={e => {onClickDay($value.days[0].value)}}
+                    ev-mouseenter={() => focusDate.set($value.days[0].value)}>{$value.week}</div>
+                {getItems($value.days, onClickDay)}
+            </div>
+        </div>
+        <div v-else class={`${k}-days`} ev-mouseleave={resetFocusDate}>
             {getItems(getDays(now), onClickDay)}
         </div>
     </template>
     <div v-else class={`${k}-years`} ev-mouseleave={resetFocusDate}>
         {isYear ?
-            getItems(this.years.getYears(now), this.years.onClick) :
-            getItems(this.months.getMonths(now), this.months.onClick)
+            getItems(this.years.getYears(now), this.years.onClick) :  
+            isQuarter ?
+                getItems(this.quarters.getQuarters(now), this.quarters.onClick) :
+                getItems(this.months.getMonths(now), this.months.onClick)
         }
     </div>
 </div>

package/components/datepicker/dayjs.ts

@@ -1,7 +1,27 @@
-import dayjs, {Dayjs, OpUnitType} from 'dayjs';
+import dayjs, {Dayjs, OpUnitType as DayjsOpUnitType, QUnitType as DayjsQUnitType} from 'dayjs';
+import weekOfYear from 'dayjs/plugin/weekOfYear'
+import quarterOfYear from 'dayjs/plugin/quarterOfYear';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
 
 dayjs.extend(customParseFormat);
+dayjs.extend(weekOfYear);
+dayjs.extend(quarterOfYear);
+dayjs.extend(advancedFormat);
+
+// 重新声明类型以避免私有名称错误
+export type OpUnitType = DayjsOpUnitType;
+export type QUnitType = DayjsQUnitType;
+
+declare module 'dayjs' {
+    interface Dayjs {
+        isSame(date?: dayjs.ConfigType, unit?: DayjsOpUnitType | DayjsQUnitType): boolean;
+        isBefore(date?: dayjs.ConfigType, unit?: DayjsOpUnitType | DayjsQUnitType): boolean;
+        isAfter(date?: dayjs.ConfigType, unit?: DayjsOpUnitType | DayjsQUnitType): boolean;
+        add(value: number, unit?: DayjsOpUnitType | DayjsQUnitType): dayjs.Dayjs;
+        subtract(value: number, unit?: DayjsOpUnitType | DayjsQUnitType): dayjs.Dayjs;
+    }
+}
 
 export default dayjs;
-export type {Dayjs, OpUnitType};
+export type {Dayjs};

package/components/datepicker/demos/multiple.md

@@ -24,9 +24,6 @@ import {Datepicker} from 'kpc';
     <Datepicker multiple range v-model="dateRange" />
     You selected: {JSON.stringify(this.get('dateRange'))}
     <br /><br />
-    <Datepicker multiple range v-model="datetimeRange" type="datetime" />
-    You selected: {JSON.stringify(this.get('datetimeRange'))}
-    <br /><br />
 </div>
 ```
 
@@ -37,7 +34,6 @@ interface Props {
     year?: string[]
     month?: string[]
     dateRange?: [string, string][]
-    datetimeRange?: [string, string][]
 }
 
 export default class extends Component<Props> {
@@ -49,7 +45,6 @@ export default class extends Component<Props> {
             year: [],
             month: [],
             dateRange: [],
-            datetimeRange: [],
         } as Props;
     }
 }

package/components/datepicker/demos/nowrap.md

@@ -0,0 +1,35 @@
+---
+title: 单行显示
+order: 7
+---
+`nowrap`属性可以控制是否换行显示，`isMerge`属性可以控制不换行显示时是否交叉自动合并
+
+```vdt
+import {Datepicker} from 'kpc';
+
+<div>
+    <Datepicker multiple nowrap range v-model="dateRange" />
+    You selected: {JSON.stringify(this.get('dateRange'))}
+    <br /><br />
+    <Datepicker multiple nowrap isMerge range v-model="mergeDateRange" />
+    You selected: {JSON.stringify(this.get('mergeDateRange'))}
+    <br /><br />
+</div>
+```
+
+```ts
+interface Props {
+    dateRange?: [string, string][]
+    mergeDateRange?: [string, string][]
+}
+
+export default class extends Component<Props> {
+    static template = template;
+    static defaults() {
+        return {  
+            dateRange: [],
+            mergeDateRange: [],
+        } as Props;
+    }
+}
+```

package/components/datepicker/demos/yearMonth.md

@@ -1,9 +1,9 @@
 ---
-title: 选择年或月
+title: 选择年、月、周、季度
 order: 5.1
 ---
 
-将`type`属性指定为`year`或`month`可以只选择“年”或“月”
+将`type`属性指定为`year`或`month``或`week``或`quarter`可以只选择“年”或“月””或“周””或“季度”
 
 ```vdt
 import {Datepicker} from 'kpc';
@@ -11,6 +11,8 @@ import {Datepicker} from 'kpc';
 <div>
     <Datepicker type="year" v-model="year" />
     <Datepicker type="month" v-model="month" clearable />
+    <Datepicker type="week" v-model="week" clearable />
+    <Datepicker type="quarter" v-model="quarter" clearable />
 </div>
 ```
 
@@ -23,6 +25,8 @@ import {Datepicker} from 'kpc';
 interface Props {
     year?: string | null
     month?: string | null
+    week?: string | null
+    quarter?: string | null
 }
 
 export default class extends Component<Props> {
@@ -31,6 +35,8 @@ export default class extends Component<Props> {
         return {
             year: null,
             month: null,
+            week: null,
+            quarter: null,
         } as Props;
     }
 }

package/components/datepicker/helpers.ts

@@ -1,4 +1,4 @@
-import dayjs, {Dayjs, OpUnitType} from 'dayjs';
+import dayjs, {Dayjs, OpUnitType, QUnitType} from 'dayjs';
 import {strPad, range} from '../utils';
 import {_$} from '../../i18n';
 import {StateValueItem} from './basepicker';
@@ -28,7 +28,7 @@ export function endTime(date: Date) {
 export function isEqual(
     a: Dayjs | undefined | null,
     b: Dayjs | undefined | null,
-    type: OpUnitType = 'date'
+    type: OpUnitType | QUnitType = 'date'
 ) {
     if (a && b) {
         return a.isSame(b, type);
@@ -39,7 +39,7 @@ export function isEqual(
 export function isLT(
     a: Dayjs | undefined | null,
     b: Dayjs | undefined | null,
-    type: OpUnitType = 'date'
+    type: OpUnitType | QUnitType = 'date'
 ) {
     if (a && b) {
         return a.isBefore(b, type);
@@ -51,7 +51,7 @@ export function isLT(
 export function isGT(
     a: Dayjs | undefined | null,
     b: Dayjs | undefined | null,
-    type: OpUnitType = 'date'
+    type: OpUnitType | QUnitType = 'date'
 ) {
     return isLT(b, a, type);
 }
@@ -70,7 +70,7 @@ export function createDate(date: string) {
     return new Date(date);
 }
 
-export function findValueIndex(values: StateValueItem[], value: StateValueItem, type: OpUnitType) {
+export function findValueIndex(values: StateValueItem[], value: StateValueItem, type: OpUnitType | QUnitType) {
     return values.findIndex(item => {
         if (Array.isArray(item)) {
             // is multipe range values

package/components/datepicker/index.md

@@ -28,13 +28,14 @@ sidebar: doc
 | max | 最大可选日期 | `Value` | `undefind` |
 | min | 最小可选日期 | `Value` | `undefind` |
 | disabledDate | 该属性值是一个函数，用于定义那些日期被禁止选择，函数参数为日期字符串，返回`true`则表示禁用该日期 | `(v: Dayjs) => boolean` | `undefined` |
-| type | 组件类型：`"date"` 只选择日期；`"datetime"` 选择日期和时间；`"year"` 选择年份；`"month"` 选择月份 | `"date"` | `"datetime"` | `"year"` | `"month"` | `"date"` |
+| type | 组件类型：`"date"` 只选择日期；`"datetime"` 选择日期和时间；`"year"` 选择年份；`"month"` 选择月份 `"quarter"` 选择季度；`"week` 选择周；|  | `"datetime"` | `"year"` | `"month"`  | `"quarter"`  | `"week"` | `"date"` |
 | shortcuts | 指定快捷方式 | `Shortcut[]` | `undefined` |
 | show | 是否展示菜单项 | `boolean` | `false` |
 | position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'left top+8', 'left bottom'}` |
 | flat | 是否展示扁平样式 | `boolean` | `false` |
 | draggable | 多选值是否支持拖动排序 | `boolean` | `false` |
-
+| nowrap | 日期多选时， 是否换行显示 | `boolean` | `false` |
+| isMerge | 日期范围多选时，在nowrap状态下是否交叉自动合并 | `boolean` | `false` |
 ```ts
 import {Dayjs} from 'dayjs';
 import {VNode} from 'intact';