bkui-vue 0.0.1-beta.46 → 0.0.1-beta.460

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

@@ -0,0 +1,381 @@
+import type { DatePickerPanelType, SelectionModeType } from './interface';
+declare const _default: import("vue").DefineComponent<{
+    disabledHours: {
+        readonly type: ArrayConstructor;
+        readonly default: () => any[];
+    };
+    disabledMinutes: {
+        readonly type: ArrayConstructor;
+        readonly default: () => any[];
+    };
+    disabledSeconds: {
+        readonly type: ArrayConstructor;
+        readonly default: () => any[];
+    };
+    hideDisabledOptions: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    width: {
+        readonly type: NumberConstructor;
+        readonly default: 261;
+    };
+    enterMode: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    type: {
+        type: import("vue").PropType<import("./interface").PickerTypeType>;
+        default: string;
+        validator(value: any): boolean;
+    };
+    allowCrossDay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    extPopoverCls: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    format: StringConstructor;
+    readonly: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    editable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    clearable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    open: {
+        readonly type: () => boolean;
+        readonly default: any;
+    };
+    multiple: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    timePickerOptions: {
+        readonly type: import("vue").PropType<Record<string, any>>;
+        readonly default: () => {};
+    };
+    splitPanels: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    startDate: DateConstructor;
+    placeholder: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    placement: {
+        readonly type: import("vue").PropType<import("@popperjs/core").ComputedPlacement>;
+        readonly default: "bottom-start";
+        readonly validator: (value: any) => boolean;
+    };
+    transfer: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    appendToBody: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    shortcuts: {
+        readonly type: import("vue").PropType<import("./interface").DatePickerShortcutsType>;
+        readonly default: () => any[];
+    };
+    shortcutClose: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    modelValue: {
+        readonly type: import("vue").PropType<import("./interface").DatePickerValueType>;
+    };
+    value: {
+        readonly type: import("vue").PropType<import("./interface").DatePickerValueType>;
+    };
+    options: {
+        readonly type: ObjectConstructor;
+        readonly default: () => {};
+    };
+    fontSize: {
+        readonly type: import("vue").PropType<"medium" | "large" | "normal">;
+        readonly default: "normal";
+    };
+    upToNow: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    useShortcutText: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    shortcutSelectedIndex: {
+        readonly type: NumberConstructor;
+        readonly default: -1;
+    };
+    headerSlotCls: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    footerSlotCls: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    behavior: {
+        readonly type: import("vue").PropType<"simplicity" | "normal">;
+        readonly default: "normal";
+        readonly validator: (v: any) => boolean;
+    };
+    disabledDate: import("vue").PropType<import("./interface").DisabledDateType>;
+    withValidate: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+}, {
+    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>;
+    ownPickerProps: import("vue").ComputedRef<{
+        disabledHours: unknown[];
+        disabledMinutes: unknown[];
+        disabledSeconds: unknown[];
+        hideDisabledOptions: 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, ("change" | "input" | "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<{
+    disabledHours: {
+        readonly type: ArrayConstructor;
+        readonly default: () => any[];
+    };
+    disabledMinutes: {
+        readonly type: ArrayConstructor;
+        readonly default: () => any[];
+    };
+    disabledSeconds: {
+        readonly type: ArrayConstructor;
+        readonly default: () => any[];
+    };
+    hideDisabledOptions: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    width: {
+        readonly type: NumberConstructor;
+        readonly default: 261;
+    };
+    enterMode: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    type: {
+        type: import("vue").PropType<import("./interface").PickerTypeType>;
+        default: string;
+        validator(value: any): boolean;
+    };
+    allowCrossDay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    extPopoverCls: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    format: StringConstructor;
+    readonly: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    editable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    clearable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    open: {
+        readonly type: () => boolean;
+        readonly default: any;
+    };
+    multiple: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    timePickerOptions: {
+        readonly type: import("vue").PropType<Record<string, any>>;
+        readonly default: () => {};
+    };
+    splitPanels: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    startDate: DateConstructor;
+    placeholder: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    placement: {
+        readonly type: import("vue").PropType<import("@popperjs/core").ComputedPlacement>;
+        readonly default: "bottom-start";
+        readonly validator: (value: any) => boolean;
+    };
+    transfer: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    appendToBody: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    shortcuts: {
+        readonly type: import("vue").PropType<import("./interface").DatePickerShortcutsType>;
+        readonly default: () => any[];
+    };
+    shortcutClose: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    modelValue: {
+        readonly type: import("vue").PropType<import("./interface").DatePickerValueType>;
+    };
+    value: {
+        readonly type: import("vue").PropType<import("./interface").DatePickerValueType>;
+    };
+    options: {
+        readonly type: ObjectConstructor;
+        readonly default: () => {};
+    };
+    fontSize: {
+        readonly type: import("vue").PropType<"medium" | "large" | "normal">;
+        readonly default: "normal";
+    };
+    upToNow: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    useShortcutText: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    shortcutSelectedIndex: {
+        readonly type: NumberConstructor;
+        readonly default: -1;
+    };
+    headerSlotCls: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    footerSlotCls: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    behavior: {
+        readonly type: import("vue").PropType<"simplicity" | "normal">;
+        readonly default: "normal";
+        readonly validator: (v: any) => boolean;
+    };
+    disabledDate: import("vue").PropType<import("./interface").DisabledDateType>;
+    withValidate: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+}>> & {
+    onChange?: (...args: any[]) => any;
+    onInput?: (...args: any[]) => any;
+    onClear?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+    "onPick-success"?: (...args: any[]) => any;
+    "onOpen-change"?: (...args: any[]) => any;
+    "onShortcut-change"?: (...args: any[]) => any;
+}, {
+    type: import("./interface").PickerTypeType;
+    transfer: boolean;
+    width: number;
+    behavior: "simplicity" | "normal";
+    disabled: boolean;
+    placement: import("@popperjs/core").ComputedPlacement;
+    options: Record<string, any>;
+    fontSize: "medium" | "large" | "normal";
+    open: boolean;
+    multiple: boolean;
+    placeholder: string;
+    clearable: boolean;
+    readonly: boolean;
+    withValidate: boolean;
+    editable: boolean;
+    extPopoverCls: string;
+    timePickerOptions: {};
+    splitPanels: boolean;
+    appendToBody: boolean;
+    shortcuts: import("./interface").DatePickerShortcutsType;
+    shortcutClose: boolean;
+    upToNow: boolean;
+    useShortcutText: boolean;
+    shortcutSelectedIndex: number;
+    headerSlotCls: string;
+    footerSlotCls: string;
+    allowCrossDay: boolean;
+    disabledHours: unknown[];
+    disabledMinutes: unknown[];
+    disabledSeconds: unknown[];
+    hideDisabledOptions: boolean;
+    enterMode: boolean;
+}>;
+export default _default;

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

@@ -1,5 +1,5 @@
 import type { InjectionKey } from 'vue';
-import type { IDatePickerCtx, PickerTypeType } from './interface';
+import type { IDatePickerCtx, ITimePickerCtx, PickerTypeType } from './interface';
 export declare const RANGE_SEPARATOR = " - ";
 export declare const typeValueResolver: {
     default: {
@@ -74,6 +74,7 @@ export declare const DEFAULT_FORMATS: Record<PickerTypeType, string>;
 export declare const parseDate: (val: any, type: any, multiple: any, format: any) => any;
 export declare const formatDate: (val: any, type: any, multiple: any, format: any) => any;
 export declare const datePickerKey: InjectionKey<IDatePickerCtx>;
+export declare const timePickerKey: InjectionKey<ITimePickerCtx>;
 /**
  * 寻找子组件
  *
@@ -82,7 +83,6 @@ export declare const datePickerKey: InjectionKey<IDatePickerCtx>;
  *
  * @return {Array} 组件集合
  */
-export declare function findChildComponents(context: any, componentName: any): any;
 export declare function iconBtnCls(direction: any, type?: string): string[];
 export declare const getDayCountOfMonth: (year: any, month: any) => number;
 export declare const siblingMonth: (src: any, diff: any) => Date;
@@ -95,3 +95,23 @@ export declare const formatDateLabels: (locale: any, format: any, date: any) =>
 };
 export declare const clearHours: (time: any) => number;
 export declare const isInRange: (time: any, a: any, b: any) => boolean;
+/**
+ * firstUpperCase
+ *
+ * @param {string} str str
+ *
+ * @return {string} str
+ */
+export declare function firstUpperCase(str: any): any;
+/**
+ * 根据 date 设置 h, m, s
+ *
+ * @param {Date} date date 对象
+ * @param {number} h 小时数
+ * @param {number} m 分钟数
+ * @param {number} s 秒数
+ *
+ * @return {Date} date 对象
+ */
+export declare const mergeDateHMS: (date: any, ...hms: any[]) => Date;
+export declare const capitalize: (str: any) => any;

package/lib/dialog/dialog.css

@@ -1,3 +1,76 @@
+.bk-modal-wrapper.bk-info-wrapper {
+  width: 440px;
+}
+.bk-modal-wrapper.bk-info-wrapper.normal {
+  width: 440px;
+}
+.bk-modal-wrapper.bk-info-wrapper.small {
+  width: 400px;
+}
+.bk-modal-wrapper.bk-info-wrapper .bk-modal-body {
+  border-radius: 2px;
+}
+.bk-modal-wrapper.bk-info-wrapper .bk-dialog-header {
+  padding: 24px 24px 0;
+}
+.bk-modal-wrapper.bk-info-wrapper .bk-dialog-header .bk-dialog-title {
+  height: 27px;
+  margin: 15px 0 10px;
+}
+.bk-modal-wrapper.bk-info-wrapper .bk-modal-content {
+  height: 100%;
+  max-height: 100%;
+  min-height: 100%;
+  padding: 0 50px 10px;
+}
+.bk-modal-wrapper.bk-info-wrapper .bk-modal-content .bk-info-sub-title {
+  margin-bottom: 10px;
+  text-align: center;
+}
+.bk-modal-wrapper.bk-info-wrapper .bk-modal-footer {
+  padding: 0 65px 33px;
+  background-color: #fff;
+  border-top: none;
+}
+.bk-modal-wrapper.bk-info-wrapper .bk-modal-footer .bk-dialog-footer button {
+  min-width: 88px;
+}
+.bk-modal-wrapper {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 480px;
+  border-radius: 2px;
+  transform: translate(-50%, -50%);
+}
+.bk-modal-wrapper .bk-modal-outside {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.bk-modal-wrapper.normal {
+  width: 480px;
+  height: 240px;
+}
+.bk-modal-wrapper.small {
+  width: 400px;
+  height: 200px;
+}
+.bk-modal-wrapper.medium {
+  width: 640px;
+  height: 400px;
+}
+.bk-modal-wrapper.large {
+  width: 960px;
+  height: 720px;
+}
+.bk-modal-wrapper .bk-modal-body {
+  height: 100%;
+  background: #fff;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
 .bk-modal-wrapper.bk-dialog-wrapper {
   position: relative;
 }
@@ -8,6 +81,9 @@
 .bk-modal-wrapper.bk-dialog-wrapper.scroll-able .bk-modal-content {
   overflow: auto;
 }
+.bk-modal-wrapper.bk-dialog-wrapper.multi-instance {
+  position: absolute;
+}
 .bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-tool {
   position: absolute;
   top: 0;
@@ -15,57 +91,90 @@
   left: 0;
   height: 30px;
 }
-.bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-tool .bk-dialog-close {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  display: flex;
-  width: 26px;
-  height: 26px;
-  font-size: 22px;
-  font-weight: 700;
-  line-height: 26px;
-  color: #979ba5;
-  text-align: center;
-  cursor: pointer;
-  border-radius: 50%;
-  transform: rotate(45deg);
-  justify-content: center;
-  align-items: center;
+.bk-modal-wrapper.bk-dialog-wrapper .move {
+  cursor: move;
 }
-.bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-tool .close-icon {
-  display: none;
+.bk-modal-wrapper.bk-dialog-wrapper .content-dragging {
+  user-select: none;
 }
 .bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header {
   padding: 24px;
   font-size: 20px;
-  line-height: 1;
+}
+.bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header .bk-header-icon {
+  text-align: center;
+}
+.bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon {
+  display: inline-block;
+  font-size: 48px;
+}
+.bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon.success {
+  color: #2dcb56;
+}
+.bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon.warning {
+  color: #ff9c01;
+}
+.bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon.danger {
+  color: #ea3636;
 }
 .bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header .bk-dialog-title {
   display: inline-block;
   width: 100%;
   overflow: hidden;
-  font-size: 24px;
   color: #313238;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .bk-modal-wrapper.bk-dialog-wrapper .bk-modal-content {
-  height: calc(100% - 132px);
-  padding: 3px 24px 26px;
-  margin-bottom: 58px;
+  height: calc(100% - 79px);
+  max-height: calc(100vh - 300px);
+  min-height: 100px;
+  padding: 3px 24px 0;
   font-size: 14px;
   line-height: 1.5;
   color: #63656e;
 }
+.bk-modal-wrapper.bk-dialog-wrapper.fullscreen .bk-modal-content {
+  max-height: calc(100vh - 137px);
+}
+.bk-modal-wrapper.bk-dialog-wrapper.fullscreen.no-footer {
+  max-height: calc(100vh - 79px);
+}
+.bk-modal-wrapper.bk-dialog-wrapper .bk-modal-body {
+  padding-bottom: 48px;
+}
+.bk-modal-wrapper.bk-dialog-wrapper.no-footer .bk-modal-body {
+  padding-bottom: 0;
+}
 .bk-modal-wrapper.bk-dialog-wrapper .bk-modal-footer {
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
-  height: 58px;
-  padding: 12px 24px;
+  height: 48px;
+  padding: 8px 24px;
   background-color: #fafbfd;
   border-top: 1px solid #dcdee5;
   border-radius: 2px;
 }
+.bk-modal-wrapper.bk-dialog-wrapper .bk-modal-footer .bk-dialog-perv {
+  float: left;
+  margin-right: 8px;
+}
+.bk-modal-wrapper.bk-dialog-wrapper .bk-modal-footer .bk-dialog-next {
+  float: left;
+}
+.bk-modal-wrapper.bk-dialog-wrapper .bk-modal-footer .bk-dialog-cancel {
+  margin-left: 8px;
+}
+.bk-modal-wrapper.bk-dialog-wrapper .bk-modal-close {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  font-size: 18px;
+  color: #c4c6cc;
+  cursor: pointer;
+}
+.bk-modal-wrapper.bk-dialog-wrapper .bk-modal-close:hover {
+  color: #979ba5;
+}