bkui-vue 0.0.1-beta.39 → 0.0.1-beta.390

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<"normal" | "large" | "medium">;
+        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, ("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<{
+    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<"normal" | "large" | "medium">;
+        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;
+    "onUpdate:modelValue"?: (...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>;
+    behavior: "simplicity" | "normal";
+    type: import("./interface").PickerTypeType;
+    disabled: boolean;
+    width: number;
+    placeholder: string;
+    open: boolean;
+    multiple: boolean;
+    transfer: boolean;
+    fontSize: "normal" | "large" | "medium";
+    clearable: boolean;
+    readonly: boolean;
+    withValidate: boolean;
+    extPopoverCls: string;
+    editable: boolean;
+    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

@@ -0,0 +1,117 @@
+import type { InjectionKey } from 'vue';
+import type { IDatePickerCtx, ITimePickerCtx, PickerTypeType } from './interface';
+export declare const RANGE_SEPARATOR = " - ";
+export declare const typeValueResolver: {
+    default: {
+        formatter(value: any): string;
+        parser(text: any): any;
+    };
+    date: {
+        formatter: (value: any, format: any) => string;
+        parser: (text: any, format: any) => any;
+    };
+    datetime: {
+        formatter: (value: any, format: any) => string;
+        parser: (text: any, format: any) => any;
+    };
+    daterange: {
+        formatter: (value: any, format: any) => string;
+        parser: (text: any, format: any) => any[];
+    };
+    datetimerange: {
+        formatter: (value: any, format: any) => string;
+        parser: (text: any, format: any) => any[];
+    };
+    timerange: {
+        formatter: (value: any, format: any) => string;
+        parser: (text: any, format: any) => any[];
+    };
+    time: {
+        formatter: (value: any, format: any) => string;
+        parser: (text: any, format: any) => any;
+    };
+    month: {
+        formatter: (value: any, format: any) => string;
+        parser: (text: any, format: any) => any;
+    };
+    year: {
+        formatter: (value: any, format: any) => string;
+        parser: (text: any, format: any) => any;
+    };
+    multiple: {
+        formatter(value: any, format: any): any;
+        parser(v: any, format: any): any;
+    };
+    number: {
+        formatter(value: any): string;
+        parser(text: any): number;
+    };
+};
+/**
+ * 设置时间，当天的零点时间
+ *
+ * @return {Date} date 对象
+ */
+export declare const initTime: () => Date;
+/**
+ * 判断数组中的每个值是否为空
+ * 0, '', null, undefined 均判断为空
+ *
+ * @param {Array} arr 待判断的数组
+ *
+ * @return {boolean} 判断结果
+ */
+export declare const isAllEmptyArr: (arr: any[]) => boolean;
+export declare const keyValueMapper: {
+    40: string;
+    39: string;
+    38: string;
+    37: string;
+};
+export declare const mapPossibleValues: (key: string, horizontal: number, vertical: number) => number;
+export declare const extractTime: (date: Date) => number[];
+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>;
+/**
+ * 寻找子组件
+ *
+ * @param {Object} context 上下文
+ * @param {string} componentName 要找的组件类型名称
+ *
+ * @return {Array} 组件集合
+ */
+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;
+export declare const formatDateLabels: (locale: any, format: any, date: any) => {
+    separator: any;
+    labels: {
+        label: any;
+        type: string;
+    }[];
+};
+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

@@ -0,0 +1,190 @@
+.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;
+}
+.bk-modal-wrapper.bk-dialog-wrapper * {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.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;
+  right: 0;
+  left: 0;
+  height: 30px;
+}
+.bk-modal-wrapper.bk-dialog-wrapper .move {
+  cursor: move;
+}
+.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;
+}
+.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: #3fc06d;
+}
+.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;
+  color: #313238;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk-modal-wrapper.bk-dialog-wrapper .bk-modal-content {
+  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: 58px;
+}
+.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;
+  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;
+  width: 26px;
+  height: 26px;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 23px;
+  color: #979ba5;
+  text-align: center;
+  cursor: pointer;
+  border-radius: 50%;
+  transform: rotate(45deg);
+}
+.bk-modal-wrapper.bk-dialog-wrapper .bk-modal-close:hover {
+  background-color: #f0f1f5;
+}
+.bk-modal-wrapper.bk-dialog-wrapper .close-icon {
+  display: none;
+}