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

package/lib/styles/themes/themes.less

@@ -1,12 +1,15 @@
-@import './variables.less';
 @bk-prefix: bk;
 
 
-@primary-color: var(--primary-color);
+@primary-color: #3a84ff;
 @success-color: #2dcb56;
 @warning-color: #ff9c01;
 @danger-color: #ea3636;
 @default-color: #63656e;
+@gray-color: #979ba5;
+@light-gray: #c4c6cc;
+@white-color: white;
+@disable-color: #dcdee5;
 
 @font-size-base: 12px;
 @font-size-medium: 14px;
@@ -21,8 +24,6 @@
 @component-size-base: 32px;
 @component-size-large: 38px;
 
-@border-color-base: #dcdee5;
-@border-color-disable: #dcdee5;
 @border-width-base: 1px;
 @border-style-base: solid;
 @border-radius-base: 2px;
@@ -30,286 +31,85 @@
 
 // input theme
 @input-disabled-bg: #fafbfd;
-@input-disabled-border: @border-color-disable;
+@input-disabled-border: @disable-color;
 @input-height-base: @component-size-base;
 @input-color: @default-color;
 @input-bg: white;
-@input-border-color: @border-color-base;
-
-
-
-/* 存放常用变量 */
-
-/********************** 字体 **********************/
-@newFontFamilyMac: -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft Yahei, Helvetica, Aria;
-@newFontFamilyWin: Microsoft Yahei, PingFang SC, Helvetica, Aria;
-
-/********************** 主题色 **********************/
-
-/* 重点表示、强调、链接以及带有明确指示性 */
-@newMainColor: #3a84ff;
-@newMainColor1: #699df4;
-
-/* 描边使用 */
-@newMainColor2: #a3c5fd;
-
-/* 背景色 */
-@newMainColor3: #e1ecff;
-@newMainColor4: #2761dd;
-@newMainColor5: #f0f8ff;
-@newMainColor6: #e1e8f4;
-
-/********************** 辅助色 **********************/
-
-/* 退出、删除、错误、严重警告等否定类标识 */
-@newRedColor: #ea3636;
-@newRedColor1: #ff5656;
-
-/* 描边使用 */
-@newRedColor2: #fd9c9c;
-
-/* 背景色 */
-@newRedColor3: #ffdddd;
-@newRedColor4: #db2626;
-@newRedColor5: #ffeded;
-@newRedColor6: #f6dada;
-
-/* 警示灯引起注意类标识 */
-@newOrangeColor: #ff9c01;
-@newOrangeColor1: #ffb848;
-
-/* 描边使用 */
-@newOrangeColor2: #ffd695;
-
-/* 背景色 */
-@newOrangeColor3: #ffe8c3;
-@newOrangeColor4: #eb9000;
-@newOrangeColor5: #fff4e2;
-@newOrangeColor6: #ede6db;
-
-/* 成功、完成、进行等肯定类标识 */
-@newGreenColor: #2dcb56;
-@newGreenColor1: #45e35f;
-
-/* 描边使用 */
-@newGreenColor2: #94f5a4;
-
-/* 背景色 */
-@newGreenColor3: #dcffe2;
-@newGreenColor4: #1ab943;
-@newGreenColor5: #eaffed;
-@newGreenColor6: #cef0d7;
-
-/********************** 中性色 **********************/
-
-/* 重要级文字信息、内容标题信息 */
-@newBlackColor: #000;
-
-/* 次级标题、内容文字 主要文字使用颜色 */
-@newBlackColor1: #313238;
-
-/* 三级文字标题、内容文字 */
-@newBlackColor2: #63656e;
-
-/* 边框内说明文字 */
-@newBlackColor3: #979ba5;
-
-/* 按钮、表单边框颜色、禁用时文本颜色 */
-@newGreyColor: #c4c6cc;
-
-/* 表格线颜色区别表单，大描边颜色、线性色 */
-@newGreyColor1: #dcdee5;
-
-/* 表格头部背景色、禁用底色 */
-@newGreyColor2: #f0f1f5;
-
-/* 大面积背景色 */
-@newGreyColor3: #fafbfd;
-
-/********************** 基础颜色 **********************/
-
-/* 默认 */
-@defaultColor: #fff;
-
-/* 主要 */
-@primaryColor: #3c96ff;
-
-/* 信息 */
-@infoColor: #88c3ff;
-
-/* 成功 */
-@successColor: #2dcb56;
-
-/* 警告 */
-@warningColor: #ffb848;
-
-/* 危险 */
-@dangerColor: #ff5656;
-
-/********************** 基础颜色-鼠标移上 **********************/
-
-/* 默认 */
-@defaultHoverColor: #fafafa;
-
-/* 主要 */
-@primaryHoverColor: #0082ff;
-
-/* 信息 */
-@infoHoverColor: #7ab9fa;
-
-/* 成功 */
-@successHoverColor: #00c873;
-
-/* 警告 */
-@warningHoverColor: #ff9600;
-
-/* 危险 */
-@dangerHoverColor: #f72239;
-
-/********************** 基础颜色-激活 **********************/
-
-/* 默认 */
-@defaultActiveColor: #eee;
-
-/* 主要 */
-@primaryActiveColor: #0978e2;
-
-/* 信息 */
-@infoActiveColor: #6eb5fe;
-
-/* 成功 */
-@successActiveColor: #00ae64;
-
-/* 警告 */
-@warningActiveColor: #e38601;
-
-/* 危险 */
-@dangerActiveColor: #cb2537;
-
-/********************** 基础颜色-相应谈色 **********************/
-
-/* 默认 */
-@defaultLightColor: #fff;
-
-/* 主要 */
-@primaryLightColor: #e1f3ff;
-
-/* 信息 */
-@infoLightColor: #6eb5fe;
-
-/* 成功 */
-@successLightColor: #d5fde5;
-
-/* 警告 */
-@warningLightColor: #fff3da;
-
-/* 危险 */
-@dangerLightColor: #ffe0e0;
-
-/********************** 图标大小 **********************/
-
-/* 最小尺寸图标 */
-@iconSmallestSize: 14px;
-
-/* 更小尺寸图标 */
-@iconSmallerSize: 16px;
-
-/* 小尺寸图标 */
-@iconSmallSize: 20px;
-
-/* 正常尺寸图标 */
-@iconNormalSize: 22px;
-
-/* 大尺寸图标 */
-@iconLargeSize: 24px;
-
-/* 最大尺寸图标 */
-@iconLargerSize: 26px;
-
-/********************** 文案 **********************/
-
-/* 字体 */
-@fnFamily: 'Microsoft Yahei';
-
-/* 正常尺寸 */
-@fnNormalSize: 14px;
-
-/* 小尺寸 */
-@fnSmallSize: 12px;
-
-/* 大尺寸 */
-@fnLargeSize: 16px;
-
-/* 主要颜色 */
-@fnMainColor: #63656e;
-
-/* 次要颜色 用于 plaeholder 等 */
-@fnMinorColor: #c3cdd7;
-
-/********************** 边框 **********************/
-
-/* 边框色 */
-@borderColor: #c3cdd7;
-@borderLightColor: #e6e6e6;
-@borderInlineColor: #dde4eb;
-
-/* 表单输入框色 */
-@formBorderColor: #c4c6cc;
-
-/* 表单输入框激活色 */
-@formBorderFocusColor: #3c96ff;
-
-/********************** 其它 **********************/
-@defaultBackgroundColor: #fafafa;
-@mainBorderColor: #ccc;
-@subBorderColor: #ddd;
-
-/* 滚动条背景色 */
-@scrollbarColor: #dde4eb;
-
-/********************** 层级管理 **********************/
-
-/* 下拉菜单层 */
-
-/* @dropdownMenuZIndex: 50; */
-@dropdownMenuZIndex: 2500;
-
-/* 下拉选框层 */
-
-/* @selectorZIndex: 100; */
-@selectorZIndex: 2500;
-
-/* 日期选框层 */
-
-/* @dateZIndex: 200; */
-@dateZIndex: 2500;
-
-/* 文字提示层 */
-
-/* @tooltipZIndex: 500; */
-@tooltipZIndex: 2500;
-
-/* 确认提示层 */
-
-/* @toolboxZIndex: 700; */
-@toolboxZIndex: 2500;
-
-/* 加载层 */
-
-/* @loadingZIndex: 1000; */
-@loadingZIndex: 100;
-
-/* 消息提示层 */
-
-/* @messageZIndex: 2000; */
-@messageZIndex: 2500;
-
-/* 侧弹层 */
-
-/* @sideSliderZIndex: 1500; */
-@sideSliderZIndex: 2500;
-
-/* 对话框层 */
-
-/* @dialogZIndex: 2000; */
-@dialogZIndex: 2500;
+@input-border-color: @light-gray;
+@input-broder-radius: 3px;
+@input-shadow-color: #a3c5fd;
+@input-horizontal-padding: 10px;
+@input-block-color: #f4f6fa;
+@input-icon-size: @font-size-large;
+@input-maxlength-color: #979ba5;
+
+//button theme
+@button-primary-hover-color: #5594fa;
+@button-danger-hover-color: #ff5656;
+@button-success-hover-color: #45e35f;
+@button-warning-hover-color: #ffb848;
+@button-default-hover-border-color: #979ba5;
+@button-primary-active-color: #2c77f4;
+@button-danger-active-color: #db2626;
+@button-success-active-color: #1ab943;
+@button-warning-active-color: #eb9000;
+
+// fixed-navbar theme
+@fixed-navbar-background: #fff;
+@fixed-navbar-boxshadow-color: rgba(0,0,0,.1);
+
+// switch theme
+@switch-default-color: #fff;
+@switch-grey-color: #c4c6cc;
+
+// breadcrumb theme
+@breadcrumb-black-color: #979ba5;
+@breadcrumb-primary-hover-color: #0082ff;
+@breadcrumb-fn-main-color: #63656e;
+
+// link theme
+@link-default-hover-color: #979ba5;
+@link-primary-hover-color: #699df4;
+@link-success-hover-color: #45e35f;
+@link-warning-hover-color: #ffb848;
+@link-danger-hover-color: #ff5656;
+@link-default-disabled-color: #dcdee5;
+@link-primary-disabled-color: #a3c5fd;
+@link-success-disabled-color: #94f5a4;
+@link-warning-disabled-color: #ffd695;
+@link-danger-disabled-color: #fd9c9c;
+
+// message theme
+@message-color: @default-color;
+@message-primary-bg-color: #f0f8ff;
+@message-primary-border-color: #e1ecff;
+@message-warning-bg-color: #fff4e2;
+@message-warning-border-color: #ffe8c3;
+@message-success-bg-color: #f2fff4;
+@message-success-border-color: #dcffe2;
+@message-danger-bg-color: #ffeded;
+@message-danger-border-color: #ffdddd;
+
+// slider theme
+@slider-default-bg: #dcdee5;
+@slider-disable-bar-bg: #979ba5;
+
+
+// menu theme
+@menu-bg-color: #182132;
+@submenu-bg-color: #151d2c;
+@menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
+@menu-color: #96a2b9;
+@menu-group-color: @default-color;
+@menu-width: 260px;
+@menu-collapse-width: 60px;
+@menu-active-color: white;
+
+// navigation theme
+@nav-header-bg-color: #182132;
+@nav-bg-color: #182132;
+
+// date-picker theme
+@date-picker-disabled-bg: #fafbfd;
+@date-picker-dropdown-mb: 4px;
+@date-picker-dropdown-bg: #fff;

package/lib/switcher/index.d.ts

@@ -0,0 +1,222 @@
+declare const BkSwitcher: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            theme: string;
+            value: string | number | boolean;
+            extCls: string;
+            disabled: boolean;
+            modelValue: string | number | boolean;
+            showText: boolean;
+            isOutline: boolean;
+            onText: string;
+            offText: string;
+            isSquare: boolean;
+            preCheck: (...args: any[]) => any;
+            trueValue: string | number | boolean;
+            falseValue: string | number | boolean;
+        }> & Omit<Readonly<{
+            theme?: unknown;
+            size?: unknown;
+            disabled?: unknown;
+            showText?: unknown;
+            isOutline?: unknown;
+            onText?: unknown;
+            offText?: unknown;
+            isSquare?: unknown;
+            extCls?: unknown;
+            preCheck?: unknown;
+            trueValue?: unknown;
+            falseValue?: unknown;
+            value?: unknown;
+            modelValue?: unknown;
+        } & {
+            theme: string;
+            value: string | number | boolean;
+            extCls: string;
+            disabled: boolean;
+            modelValue: string | number | boolean;
+            showText: boolean;
+            isOutline: boolean;
+            onText: string;
+            offText: string;
+            isSquare: boolean;
+            trueValue: string | number | boolean;
+            falseValue: string | number | boolean;
+        } & {
+            size?: string;
+            preCheck?: (...args: any[]) => any;
+        }> & {
+            onChange?: (...args: any[]) => any;
+            "onUpdate:modelValue"?: (...args: any[]) => any;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "theme" | "value" | "extCls" | "disabled" | "modelValue" | "showText" | "isOutline" | "onText" | "offText" | "isSquare" | "preCheck" | "trueValue" | "falseValue">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+        $emit: (event: "change" | "update:modelValue", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<{
+            theme?: unknown;
+            size?: unknown;
+            disabled?: unknown;
+            showText?: unknown;
+            isOutline?: unknown;
+            onText?: unknown;
+            offText?: unknown;
+            isSquare?: unknown;
+            extCls?: unknown;
+            preCheck?: unknown;
+            trueValue?: unknown;
+            falseValue?: unknown;
+            value?: unknown;
+            modelValue?: unknown;
+        } & {
+            theme: string;
+            value: string | number | boolean;
+            extCls: string;
+            disabled: boolean;
+            modelValue: string | number | boolean;
+            showText: boolean;
+            isOutline: boolean;
+            onText: string;
+            offText: string;
+            isSquare: boolean;
+            trueValue: string | number | boolean;
+            falseValue: string | number | boolean;
+        } & {
+            size?: string;
+            preCheck?: (...args: any[]) => any;
+        }> & {
+            onChange?: (...args: any[]) => any;
+            "onUpdate:modelValue"?: (...args: any[]) => any;
+        }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], string, {
+            theme: string;
+            value: string | number | boolean;
+            extCls: string;
+            disabled: boolean;
+            modelValue: string | number | boolean;
+            showText: boolean;
+            isOutline: boolean;
+            onText: string;
+            offText: string;
+            isSquare: boolean;
+            preCheck: (...args: any[]) => any;
+            trueValue: string | number | boolean;
+            falseValue: string | number | boolean;
+        }> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
+    } & Readonly<{
+        theme?: unknown;
+        size?: unknown;
+        disabled?: unknown;
+        showText?: unknown;
+        isOutline?: unknown;
+        onText?: unknown;
+        offText?: unknown;
+        isSquare?: unknown;
+        extCls?: unknown;
+        preCheck?: unknown;
+        trueValue?: unknown;
+        falseValue?: unknown;
+        value?: unknown;
+        modelValue?: unknown;
+    } & {
+        theme: string;
+        value: string | number | boolean;
+        extCls: string;
+        disabled: boolean;
+        modelValue: string | number | boolean;
+        showText: boolean;
+        isOutline: boolean;
+        onText: string;
+        offText: string;
+        isSquare: boolean;
+        trueValue: string | number | boolean;
+        falseValue: string | number | boolean;
+    } & {
+        size?: string;
+        preCheck?: (...args: any[]) => any;
+    }> & {
+        onChange?: (...args: any[]) => any;
+        "onUpdate:modelValue"?: (...args: any[]) => any;
+    } & import("vue").ShallowUnwrapRef<() => JSX.Element> & {} & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<{
+    theme?: unknown;
+    size?: unknown;
+    disabled?: unknown;
+    showText?: unknown;
+    isOutline?: unknown;
+    onText?: unknown;
+    offText?: unknown;
+    isSquare?: unknown;
+    extCls?: unknown;
+    preCheck?: unknown;
+    trueValue?: unknown;
+    falseValue?: unknown;
+    value?: unknown;
+    modelValue?: unknown;
+} & {
+    theme: string;
+    value: string | number | boolean;
+    extCls: string;
+    disabled: boolean;
+    modelValue: string | number | boolean;
+    showText: boolean;
+    isOutline: boolean;
+    onText: string;
+    offText: string;
+    isSquare: boolean;
+    trueValue: string | number | boolean;
+    falseValue: string | number | boolean;
+} & {
+    size?: string;
+    preCheck?: (...args: any[]) => any;
+}> & {
+    onChange?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", {
+    theme: string;
+    value: string | number | boolean;
+    extCls: string;
+    disabled: boolean;
+    modelValue: string | number | boolean;
+    showText: boolean;
+    isOutline: boolean;
+    onText: string;
+    offText: string;
+    isSquare: boolean;
+    preCheck: (...args: any[]) => any;
+    trueValue: string | number | boolean;
+    falseValue: string | number | boolean;
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin;
+export default BkSwitcher;

package/lib/switcher/index.js

@@ -0,0 +1 @@
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("vue"),require("../shared"),require("@bkui-vue/icon")):"function"==typeof define&&define.amd?define(["exports","vue","../shared","@bkui-vue/icon"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e.Shared,e["@bkui-vue/icon/icons"])}(this,(function(e,o,t,r){"use strict";function n(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var u={exports:{}};!function(e){e.exports=function(e,o,t){return o in e?Object.defineProperty(e,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[o]=t,e},e.exports.default=e.exports,e.exports.__esModule=!0}(u);var s=n(u.exports),i=o.defineComponent({name:"BkSwitcher",props:{theme:t.PropTypes.theme().def(""),size:t.PropTypes.size(),disabled:t.PropTypes.bool,showText:t.PropTypes.bool,isOutline:t.PropTypes.bool,onText:t.PropTypes.string.def("ON"),offText:t.PropTypes.string.def("OFF"),isSquare:t.PropTypes.bool,extCls:t.PropTypes.string,preCheck:t.PropTypes.func.def(void 0),trueValue:t.PropTypes.oneOfType([t.PropTypes.string,t.PropTypes.number,t.PropTypes.bool]).def(!0),falseValue:t.PropTypes.oneOfType([t.PropTypes.string,t.PropTypes.number,t.PropTypes.bool]).def(!1),value:t.PropTypes.oneOfType([t.PropTypes.string,t.PropTypes.number,t.PropTypes.bool]).def(!1),modelValue:t.PropTypes.oneOfType([t.PropTypes.string,t.PropTypes.number,t.PropTypes.bool]).def(!1)},emits:["update:modelValue","change"],setup:function(e,t){var n=t.emit,u=o.ref(!1),i=o.computed((function(){return e.trueValue===a.value})),l=o.ref(!1!==e.modelValue),a=o.computed((function(){return l.value?e.modelValue:e.value})),p=o.computed((function(){var o,t=(s(o={},e.extCls,!!e.extCls),s(o,"bk-switcher",!0),s(o,"bk-switcher-outline",e.isOutline),s(o,"bk-switcher-square",e.isSquare),s(o,"show-label",e.showText),s(o,"is-disabled",e.disabled),s(o,"is-checked",i.value),s(o,"is-unchecked",!i.value),s(o,"is-loading",u.value),s(o,"primary","primary"===e.theme),o);e.size&&!e.showText&&(t["bk-switcher-".concat(e.size)]=!0);return t}));o.watch((function(){return e.modelValue}),(function(){l.value=!0})),o.watch((function(){return e.value}),(function(){l.value=!1}));var c=function(o){if(o.stopPropagation(),o.preventDefault(),!e.disabled&&!u.value){var t=i.value?e.falseValue:e.trueValue,r=!i.value,s=function(){n("update:modelValue",t),n("change",r),console.log(t)},l=!0;if("function"==typeof e.preCheck&&"function"==typeof(l=e.preCheck(t)).then)return u.value=!0,l.then((function(){s()})).finally((function(){u.value=!1}));l&&s()}};return function(){return o.createVNode("div",{class:p.value,onClick:c,tabindex:"0",onKeydown:c},[o.createVNode("input",{type:"checkbox",disabled:e.disabled,tabindex:"-1"},null),e.showText?o.createVNode("label",{class:"switcher-label"},[o.createVNode("span",{class:"switcher-text on-text"},[e.onText]),o.createVNode("span",{class:"switcher-text off-text"},[e.offText])]):"",u.value?o.createVNode(r.SwitcherLoading,{class:"bk-switcher-loading"},null):""])}}}),l=t.withInstall(i);e.default=l,Object.defineProperty(e,"__esModule",{value:!0})}));