bkui-vue 0.0.1-beta.13 → 0.0.1-beta.130

package/lib/date-picker/date-picker.d.ts

@@ -1,9 +1,7 @@
-import { PropType } from 'vue';
-import type { ExtractPropTypes } from 'vue';
-import type { PickerTypeType, DatePickerShortcutsType, DatePickerValueType, DisableDateType, DatePickerPanelType, SelectionModeType } from './interface';
-declare const datePickerProps: {
+import type { DatePickerPanelType, SelectionModeType } from './interface';
+declare const _default: import("vue").DefineComponent<{
     readonly type: {
-        readonly type: PropType<PickerTypeType>;
+        readonly type: import("vue").PropType<import("./interface").PickerTypeType>;
         readonly default: "date";
         readonly validator: (value: any) => boolean;
     };
@@ -37,7 +35,7 @@ declare const datePickerProps: {
         readonly default: false;
     };
     readonly timePickerOptions: {
-        readonly type: PropType<Record<string, any>>;
+        readonly type: import("vue").PropType<Record<string, any>>;
         readonly default: () => {};
     };
     readonly splitPanels: {
@@ -50,7 +48,7 @@ declare const datePickerProps: {
         readonly default: "";
     };
     readonly placement: {
-        readonly type: PropType<import("@popperjs/core").ComputedPlacement>;
+        readonly type: import("vue").PropType<import("@popperjs/core").ComputedPlacement>;
         readonly default: "bottom-start";
         readonly validator: (value: any) => boolean;
     };
@@ -63,7 +61,7 @@ declare const datePickerProps: {
         readonly default: false;
     };
     readonly shortcuts: {
-        readonly type: PropType<DatePickerShortcutsType>;
+        readonly type: import("vue").PropType<import("./interface").DatePickerShortcutsType>;
         readonly default: () => any[];
     };
     readonly shortcutClose: {
@@ -71,14 +69,17 @@ declare const datePickerProps: {
         readonly default: false;
     };
     readonly modelValue: {
-        readonly type: PropType<DatePickerValueType>;
+        readonly type: import("vue").PropType<import("./interface").DatePickerValueType>;
+    };
+    readonly value: {
+        readonly type: import("vue").PropType<import("./interface").DatePickerValueType>;
     };
     readonly options: {
         readonly type: ObjectConstructor;
         readonly default: () => {};
     };
     readonly fontSize: {
-        readonly type: PropType<"large" | "normal" | "medium">;
+        readonly type: import("vue").PropType<"large" | "normal" | "medium">;
         readonly default: "normal";
     };
     readonly upToNow: {
@@ -93,6 +94,10 @@ declare const datePickerProps: {
         readonly type: NumberConstructor;
         readonly default: -1;
     };
+    readonly headerSlotCls: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
     readonly footerSlotCls: {
         readonly type: StringConstructor;
         readonly default: "";
@@ -102,16 +107,63 @@ declare const datePickerProps: {
         readonly default: false;
     };
     readonly behavior: {
-        readonly type: PropType<"normal" | "simplicity">;
+        readonly type: import("vue").PropType<"normal" | "simplicity">;
         readonly default: "normal";
         readonly validator: (v: any) => boolean;
     };
-    readonly disableDate: PropType<DisableDateType>;
-};
-export declare type DatePickerProps = Readonly<ExtractPropTypes<typeof datePickerProps>>;
-declare const _default: import("vue").DefineComponent<{
+    readonly disableDate: import("vue").PropType<import("./interface").DisableDateType>;
+}, {
+    panel: import("vue").ComputedRef<DatePickerPanelType>;
+    publicStringValue: import("vue").ComputedRef<any>;
+    opened: import("vue").ComputedRef<boolean>;
+    visualValue: import("vue").ComputedRef<any>;
+    displayValue: import("vue").ComputedRef<any>;
+    isConfirm: import("vue").ComputedRef<boolean>;
+    hasHeader: import("vue").ComputedRef<boolean>;
+    hasFooter: import("vue").ComputedRef<boolean>;
+    hasShortcuts: import("vue").ComputedRef<boolean>;
+    fontSizeCls: import("vue").ComputedRef<string>;
+    longWidthCls: import("vue").ComputedRef<string>;
+    localReadonly: import("vue").ComputedRef<boolean>;
+    allowCrossDayProp: import("vue").ComputedRef<boolean>;
+    pickerDropdownRef: any;
+    inputRef: any;
+    triggerRef: import("vue").Ref<HTMLElement>;
+    pickerPanelRef: any;
+    handleClose: (e?: Event) => boolean;
+    handleIconClick: () => void;
+    handleInputMouseenter: () => void;
+    handleInputMouseleave: (_e: any) => void;
+    handleFocus: (e: any) => void;
+    handleBlur: (e: any) => void;
+    handleKeydown: (e: KeyboardEvent) => void;
+    handleInputChange: (e: any) => void;
+    handleClear: () => void;
+    handleTransferClick: () => void;
+    onPick: (_dates: any, visible: boolean, type: any, shortcut: any) => void;
+    onPickSuccess: () => void;
+    showClose: import("vue").Ref<boolean>;
+    visible: import("vue").Ref<boolean>;
+    internalValue: import("vue").Ref<any>;
+    disableClickOutSide: import("vue").Ref<boolean>;
+    disableCloseUnderTransfer: import("vue").Ref<boolean>;
+    selectionMode: import("vue").Ref<SelectionModeType>;
+    forceInputRerender: import("vue").Ref<number>;
+    isFocused: import("vue").Ref<boolean>;
+    focusedDate: import("vue").Ref<any>;
+    focusedTime: import("vue").Ref<{
+        column: number;
+        picker: number;
+        time: any;
+        active: boolean;
+    }>;
+    internalFocus: import("vue").Ref<boolean>;
+    timeEnterMode: import("vue").Ref<boolean>;
+    shortcut: import("vue").Ref<any>;
+    onSelectionModeChange: import("vue").Ref<(_type: any) => SelectionModeType>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "change" | "clear" | "update:modelValue" | "pick-success" | "open-change" | "shortcut-change")[], "input" | "change" | "clear" | "update:modelValue" | "pick-success" | "open-change" | "shortcut-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly type: {
-        readonly type: PropType<PickerTypeType>;
+        readonly type: import("vue").PropType<import("./interface").PickerTypeType>;
         readonly default: "date";
         readonly validator: (value: any) => boolean;
     };
@@ -145,7 +197,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: false;
     };
     readonly timePickerOptions: {
-        readonly type: PropType<Record<string, any>>;
+        readonly type: import("vue").PropType<Record<string, any>>;
         readonly default: () => {};
     };
     readonly splitPanels: {
@@ -158,7 +210,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "";
     };
     readonly placement: {
-        readonly type: PropType<import("@popperjs/core").ComputedPlacement>;
+        readonly type: import("vue").PropType<import("@popperjs/core").ComputedPlacement>;
         readonly default: "bottom-start";
         readonly validator: (value: any) => boolean;
     };
@@ -171,7 +223,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: false;
     };
     readonly shortcuts: {
-        readonly type: PropType<DatePickerShortcutsType>;
+        readonly type: import("vue").PropType<import("./interface").DatePickerShortcutsType>;
         readonly default: () => any[];
     };
     readonly shortcutClose: {
@@ -179,14 +231,17 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: false;
     };
     readonly modelValue: {
-        readonly type: PropType<DatePickerValueType>;
+        readonly type: import("vue").PropType<import("./interface").DatePickerValueType>;
+    };
+    readonly value: {
+        readonly type: import("vue").PropType<import("./interface").DatePickerValueType>;
     };
     readonly options: {
         readonly type: ObjectConstructor;
         readonly default: () => {};
     };
     readonly fontSize: {
-        readonly type: PropType<"large" | "normal" | "medium">;
+        readonly type: import("vue").PropType<"large" | "normal" | "medium">;
         readonly default: "normal";
     };
     readonly upToNow: {
@@ -201,6 +256,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: -1;
     };
+    readonly headerSlotCls: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
     readonly footerSlotCls: {
         readonly type: StringConstructor;
         readonly default: "";
@@ -210,148 +269,44 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: false;
     };
     readonly behavior: {
-        readonly type: PropType<"normal" | "simplicity">;
+        readonly type: import("vue").PropType<"normal" | "simplicity">;
         readonly default: "normal";
         readonly validator: (v: any) => boolean;
     };
-    readonly disableDate: PropType<DisableDateType>;
-}, {
-    panel: import("vue").ComputedRef<DatePickerPanelType>;
-    publicStringValue: import("vue").ComputedRef<any>;
-    opened: import("vue").ComputedRef<boolean>;
-    visualValue: import("vue").ComputedRef<any>;
-    displayValue: import("vue").ComputedRef<any>;
-    isConfirm: import("vue").ComputedRef<boolean>;
-    fontSizeCls: import("vue").ComputedRef<string>;
-    longWidthCls: import("vue").ComputedRef<string>;
-    localReadonly: import("vue").ComputedRef<boolean>;
-    hasFooter: import("vue").ComputedRef<boolean>;
-    allowCrossDayProp: import("vue").ComputedRef<boolean>;
-    pickerDropdownRef: any;
-    inputRef: any;
-    triggerRef: import("vue").Ref<HTMLElement>;
-    pickerPanelRef: any;
-    handleClose: (e?: Event) => boolean;
-    handleIconClick: () => void;
-    handleInputMouseenter: () => void;
-    handleInputMouseleave: (e: any) => void;
-    handleFocus: (e: any) => void;
-    handleBlur: (e: any) => void;
-    handleKeydown: (e: KeyboardEvent) => void;
-    handleInputChange: (e: any) => void;
-    handleClear: () => void;
-    handleTransferClick: () => void;
-    onPick: (_dates: any, visible: boolean, type: any, shortcut: any) => void;
-    showClose: import("vue").Ref<boolean>;
-    visible: import("vue").Ref<boolean>;
-    internalValue: any;
-    disableClickOutSide: import("vue").Ref<boolean>;
-    disableCloseUnderTransfer: import("vue").Ref<boolean>;
-    selectionMode: import("vue").Ref<SelectionModeType>;
-    forceInputRerender: import("vue").Ref<number>;
-    isFocused: import("vue").Ref<boolean>;
-    focusedDate: any;
-    focusedTime: import("vue").Ref<{
-        column: number;
-        picker: number;
-        time: any;
-        active: boolean;
-    }>;
-    internalFocus: import("vue").Ref<boolean>;
-    timeEnterMode: import("vue").Ref<boolean>;
-    shortcut: any;
-    onSelectionModeChange: import("vue").Ref<(_type: any) => SelectionModeType>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "change" | "clear" | "update:modelValue" | "pick-success" | "open-change" | "shortcut-change")[], "input" | "change" | "clear" | "update:modelValue" | "pick-success" | "open-change" | "shortcut-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly type?: unknown;
-    readonly extPopoverCls?: unknown;
-    readonly format?: unknown;
-    readonly readonly?: unknown;
-    readonly disabled?: unknown;
-    readonly editable?: unknown;
-    readonly clearable?: unknown;
-    readonly open?: unknown;
-    readonly multiple?: unknown;
-    readonly timePickerOptions?: unknown;
-    readonly splitPanels?: unknown;
-    readonly startDate?: unknown;
-    readonly placeholder?: unknown;
-    readonly placement?: unknown;
-    readonly transfer?: unknown;
-    readonly appendToBody?: unknown;
-    readonly shortcuts?: unknown;
-    readonly shortcutClose?: unknown;
-    readonly modelValue?: unknown;
-    readonly options?: unknown;
-    readonly fontSize?: unknown;
-    readonly upToNow?: unknown;
-    readonly useShortcutText?: unknown;
-    readonly shortcutSelectedIndex?: unknown;
-    readonly footerSlotCls?: unknown;
-    readonly allowCrossDay?: unknown;
-    readonly behavior?: unknown;
-    readonly disableDate?: unknown;
-} & {
-    placement: import("@popperjs/core").ComputedPlacement;
-    options: Record<string, any>;
-    placeholder: string;
-    multiple: boolean;
-    disabled: boolean;
-    type: PickerTypeType;
-    extPopoverCls: string;
-    readonly: boolean;
-    editable: boolean;
-    clearable: boolean;
-    timePickerOptions: {};
-    splitPanels: boolean;
-    transfer: boolean;
-    appendToBody: boolean;
-    shortcuts: DatePickerShortcutsType;
-    shortcutClose: boolean;
-    fontSize: "large" | "normal" | "medium";
-    upToNow: boolean;
-    useShortcutText: boolean;
-    shortcutSelectedIndex: number;
-    footerSlotCls: string;
-    allowCrossDay: boolean;
-    behavior: "normal" | "simplicity";
-} & {
-    open?: boolean;
-    modelValue?: DatePickerValueType;
-    format?: string;
-    startDate?: Date;
-    disableDate?: DisableDateType;
-}> & {
+    readonly disableDate: import("vue").PropType<import("./interface").DisableDateType>;
+}>> & {
     onChange?: (...args: any[]) => any;
     onInput?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
-    "onPick-success"?: (...args: any[]) => any;
     onClear?: (...args: any[]) => any;
+    "onPick-success"?: (...args: any[]) => any;
     "onOpen-change"?: (...args: any[]) => any;
     "onShortcut-change"?: (...args: any[]) => any;
 }, {
     placement: import("@popperjs/core").ComputedPlacement;
     options: Record<string, any>;
+    type: import("./interface").PickerTypeType;
+    disabled: boolean;
     placeholder: string;
+    fontSize: "large" | "normal" | "medium";
     open: boolean;
     multiple: boolean;
-    disabled: boolean;
-    type: PickerTypeType;
-    extPopoverCls: string;
+    clearable: boolean;
     readonly: boolean;
+    behavior: "normal" | "simplicity";
+    extPopoverCls: string;
     editable: boolean;
-    clearable: boolean;
     timePickerOptions: {};
     splitPanels: boolean;
     transfer: boolean;
     appendToBody: boolean;
-    shortcuts: DatePickerShortcutsType;
+    shortcuts: import("./interface").DatePickerShortcutsType;
     shortcutClose: boolean;
-    fontSize: "large" | "normal" | "medium";
     upToNow: boolean;
     useShortcutText: boolean;
     shortcutSelectedIndex: number;
+    headerSlotCls: string;
     footerSlotCls: string;
     allowCrossDay: boolean;
-    behavior: "normal" | "simplicity";
 }>;
 export default _default;

package/lib/date-picker/date-picker.less

@@ -33,6 +33,7 @@
     border: 1px solid @light-gray;
     border-radius: 2px;
     outline: none;
+    box-sizing: border-box;
 
     &.only-bottom-border {
       border-color: transparent transparent @light-gray transparent;
@@ -79,12 +80,14 @@
 
   .clear-action {
     position: absolute;
-    top: 50%;
+    // transform: translateY(-50%);
+    top: 0;
+    // top: 50%;
     right: 10px;
+    padding: 5px 0;
     font-size: 14px;
     color: @light-gray;
     cursor: pointer;
-    transform: translateY(-50%);
 
     &:hover {
       color: @gray-color;

package/lib/date-picker/date-picker.variable.css

@@ -1,5 +1,6 @@
 :root {
   --bk-prefix: bk;
+  --popover-max-height: 216px;
   --primary-color: #3a84ff;
   --success-color: #2dcb56;
   --warning-color: #ff9c01;
@@ -8,6 +9,7 @@
   --gray-color: #979ba5;
   --light-gray: #c4c6cc;
   --white-color: white;
+  --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
@@ -17,7 +19,7 @@
   --line-height-large: 18px;
   --component-size-small: 26px;
   --component-size-base: 32px;
-  --component-size-large: 38px;
+  --component-size-large: 40px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
@@ -30,8 +32,9 @@
   --input-broder-radius: 3px;
   --input-shadow-color: #a3c5fd;
   --input-horizontal-padding: 10px;
-  --input-block-color: #f4f6fa;
-  --input-icon-size: var(--font-size-large);
+  --input-block-color: #f5f7fa;
+  --input-block-hover-color: #eaebf0;
+  --input-icon-size: var(--font-size-medium);
   --input-maxlength-color: #979ba5;
   --button-primary-hover-color: #5594fa;
   --button-danger-hover-color: #ff5656;
@@ -42,6 +45,8 @@
   --button-danger-active-color: #db2626;
   --button-success-active-color: #1ab943;
   --button-warning-active-color: #eb9000;
+  --button-selected-bg-color: #e1ecff;
+  --button-disabled-selected-bg-color: #f0f1f5;
   --fixed-navbar-background: #fff;
   --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
   --switch-default-color: #fff;
@@ -83,6 +88,17 @@
   --date-picker-disabled-bg: #fafbfd;
   --date-picker-dropdown-mb: 4px;
   --date-picker-dropdown-bg: #fff;
+  --table-bg-color: var(--white-color);
+  --table-border-color: #dcdee5;
+  --table-head-bg-color: #fafbfd;
+  --table-head-font-color: #313238;
+  --table-body-font-color: #575961;
+  --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
+  --cascader-panel-border-color: #dcdee5;
+  --cascader-panel-hover: #eaf3ff;
+  --cascader-panel-active: #f4f6fa;
+  --cascader-panel-disabled-bg: #fff;
 }
 .bk-date-picker {
   display: inline-block;
@@ -113,6 +129,7 @@
   border: 1px solid var(--light-gray);
   border-radius: 2px;
   outline: none;
+  box-sizing: border-box;
 }
 .bk-date-picker-rel .bk-date-picker-editor.only-bottom-border {
   border-color: transparent transparent var(--light-gray) transparent;
@@ -149,12 +166,12 @@
 }
 .bk-date-picker-rel .clear-action {
   position: absolute;
-  top: 50%;
+  top: 0;
   right: 10px;
+  padding: 5px 0;
   font-size: 14px;
   color: var(--light-gray);
   cursor: pointer;
-  transform: translateY(-50%);
 }
 .bk-date-picker-rel .clear-action:hover {
   color: var(--gray-color);