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

package/lib/radio/type.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { RadioProps } from './radio';
+import type { RadioGroupProps } from './radio-group';
+export declare type IRadioInstance = ComponentPublicInstance<RadioProps, {
+    isChecked: boolean;
+    label: string;
+    setChecked: (value: boolean) => void;
+}>;
+export interface IRadioGroupContext {
+    props: RadioGroupProps;
+    register: (radioInstance: IRadioInstance) => void;
+    unregister: (radioInstance: IRadioInstance) => void;
+    handleChange: (radioInstance: IRadioInstance) => void;
+}

package/lib/rate/index.d.ts

@@ -0,0 +1,136 @@
+declare const BkRate: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            modelValue: number;
+            withValidate: boolean;
+            editable: boolean;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            modelValue: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            size: import("vue-types").VueTypeDef<"small" | "default" | "large">;
+            editable: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            withValidate: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+        }>> & {
+            onChange?: (...args: any[]) => any;
+            "onUpdate:modelValue"?: (...args: any[]) => any;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "modelValue" | "withValidate" | "editable">;
+        $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<import("vue").ExtractPropTypes<{
+            modelValue: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            size: import("vue-types").VueTypeDef<"small" | "default" | "large">;
+            editable: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            withValidate: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+        }>> & {
+            onChange?: (...args: any[]) => any;
+            "onUpdate:modelValue"?: (...args: any[]) => any;
+        }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], string, {
+            modelValue: number;
+            withValidate: boolean;
+            editable: 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<import("vue").ExtractPropTypes<{
+        modelValue: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        size: import("vue-types").VueTypeDef<"small" | "default" | "large">;
+        editable: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        withValidate: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+    }>> & {
+        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<import("vue").ExtractPropTypes<{
+    modelValue: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    size: import("vue-types").VueTypeDef<"small" | "default" | "large">;
+    editable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    withValidate: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}>> & {
+    onChange?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", {
+    modelValue: number;
+    withValidate: boolean;
+    editable: boolean;
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin;
+export default BkRate;

package/lib/rate/index.js

@@ -0,0 +1,294 @@
+import * as __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__ from "../shared";
+import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
+/******/ // The require scope
+/******/ var __webpack_require__ = {};
+/******/ 
+/************************************************************************/
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ 	// define getter functions for harmony exports
+/******/ 	__webpack_require__.d = (exports, definition) => {
+/******/ 		for(var key in definition) {
+/******/ 			if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 			}
+/******/ 		}
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ 	__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/ 
+/************************************************************************/
+var __webpack_exports__ = {};
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "Z": () => (/* binding */ src)
+});
+
+;// CONCATENATED MODULE: external "../shared"
+var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var y = x => () => x
+const external_shared_namespaceObject = x({ ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.PropTypes, ["classes"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.classes, ["useFormItem"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.useFormItem, ["withInstall"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.withInstall });
+;// CONCATENATED MODULE: external "vue"
+var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_vue_y = x => () => x
+const external_vue_namespaceObject = external_vue_x({ ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["mergeProps"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.mergeProps, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch });
+;// CONCATENATED MODULE: ../../packages/rate/src/star.tsx
+
+
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+*/
+
+
+/* harmony default export */ const star = ((0,external_vue_namespaceObject.defineComponent)({
+  name: 'Star',
+  props: {
+    rate: external_shared_namespaceObject.PropTypes.number.def(0),
+    width: external_shared_namespaceObject.PropTypes.number.def(15),
+    height: external_shared_namespaceObject.PropTypes.number.def(16),
+    editable: external_shared_namespaceObject.PropTypes.bool.def(true),
+    hoverRate: external_shared_namespaceObject.PropTypes.number.def(0),
+    max: external_shared_namespaceObject.PropTypes.number.def(5)
+  },
+  emits: ['chooseRate', 'changeHover'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit;
+
+    var chooseRate = function chooseRate(index) {
+      if (!props.editable) return;
+      var rate = index + 1;
+      emit('chooseRate', rate);
+    };
+
+    var changeHover = function changeHover(index) {
+      if (!props.editable) return;
+      var rate = index + 1;
+      emit('changeHover', rate);
+    };
+
+    var starClass = function starClass(index) {
+      return (0,external_shared_namespaceObject.classes)({
+        'bk-is-select': index < Math.floor(displayRate.value),
+        'bk-is-edit': props.editable,
+        'bk-rate-star': true
+      });
+    };
+
+    var displayRate = (0,external_vue_namespaceObject.computed)(function () {
+      return props.hoverRate || props.rate;
+    });
+    var starStyle = {
+      width: "".concat(props.width, "px"),
+      height: "".concat(props.height, "px"),
+      minWidth: "".concat(props.width, "px")
+    };
+    return function () {
+      return (0,external_vue_namespaceObject.createVNode)("p", {
+        "class": "bk-rate-stars"
+      }, [Array(props.max).fill(1).map(function (_, index) {
+        return (0,external_vue_namespaceObject.createVNode)("svg", {
+          "class": starClass(index),
+          "style": starStyle,
+          "x": "0px",
+          "y": "0px",
+          "viewBox": "0 0 64 64",
+          "onClick": function onClick() {
+            return chooseRate(index);
+          },
+          "onMouseenter": function onMouseenter() {
+            return changeHover(index);
+          }
+        }, [(0,external_vue_namespaceObject.createVNode)("g", {
+          "transform": "translate(-143.000000, -635.000000)"
+        }, [(0,external_vue_namespaceObject.createVNode)("g", {
+          "transform": "translate(83.000000, 114.000000)"
+        }, [(0,external_vue_namespaceObject.createVNode)("g", {
+          "transform": "translate(15.000000, 384.000000)"
+        }, [(0,external_vue_namespaceObject.createVNode)("g", {
+          "transform": "translate(29.000000, 137.000000)"
+        }, [(0,external_vue_namespaceObject.createVNode)("polygon", {
+          "class": "st1",
+          "points": "48,53 28.2,63.9 32,40.8 16,24.4 38.1,21 48,-0.1 57.8,21 79.9,24.4 63.9,40.8 67.7,63.9"
+        }, null)])])])])]);
+      })]);
+    };
+  }
+}));
+;// CONCATENATED MODULE: ../../packages/rate/src/rate.tsx
+
+
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+*/
+
+
+
+/* harmony default export */ const rate = ((0,external_vue_namespaceObject.defineComponent)({
+  name: 'Rate',
+  components: {
+    star: star
+  },
+  props: {
+    modelValue: external_shared_namespaceObject.PropTypes.number.def(0),
+    size: external_shared_namespaceObject.PropTypes.size(),
+    editable: external_shared_namespaceObject.PropTypes.bool.def(true),
+    withValidate: external_shared_namespaceObject.PropTypes.bool.def(true)
+  },
+  emits: ['change', 'update:modelValue'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit;
+    var formItem = (0,external_shared_namespaceObject.useFormItem)();
+    var hoverRate = (0,external_vue_namespaceObject.ref)(0);
+
+    var chooseRate = function chooseRate(val) {
+      if (!props.editable) return;
+      emit('update:modelValue', val);
+      emit('change', val);
+    };
+
+    var changeHover = function changeHover(val) {
+      hoverRate.value = val;
+    };
+
+    var rateClass = (0,external_shared_namespaceObject.classes)({
+      'bk-rate': true
+    });
+    var sizeMap = {
+      small: {
+        width: 12,
+        height: 12
+      },
+      large: {
+        width: 18,
+        height: 18
+      }
+    };
+    var rateSize = sizeMap[props.size] || {
+      width: 15,
+      height: 16
+    };
+    var starStyle = (0,external_vue_namespaceObject.computed)(function () {
+      var integer = Math.floor(props.modelValue);
+      var fixWidth = (rateSize.width + 3) * integer;
+      var rateWidth = rateSize.width * (props.modelValue - integer);
+      return {
+        width: "".concat(fixWidth + rateWidth, "px")
+      };
+    });
+    var commonAttrs = {
+      width: rateSize.width,
+      height: rateSize.height
+    };
+    (0,external_vue_namespaceObject.watch)(function () {
+      return props.modelValue;
+    }, function () {
+      var _a;
+
+      if (props.withValidate) {
+        (_a = formItem === null || formItem === void 0 ? void 0 : formItem.validate) === null || _a === void 0 ? void 0 : _a.call(formItem, 'change');
+      }
+    });
+    return function () {
+      return (0,external_vue_namespaceObject.createVNode)("p", {
+        "class": rateClass
+      }, [props.editable ? (0,external_vue_namespaceObject.createVNode)(star, (0,external_vue_namespaceObject.mergeProps)({
+        "rate": props.modelValue,
+        "hover-rate": hoverRate.value,
+        "onChooseRate": chooseRate,
+        "onChangeHover": changeHover,
+        "onMouseleave": function onMouseleave() {
+          return changeHover(0);
+        }
+      }, commonAttrs), null) : [(0,external_vue_namespaceObject.createVNode)(star, (0,external_vue_namespaceObject.mergeProps)({
+        "rate": 5,
+        "style": starStyle.value,
+        "class": "bk-score-real",
+        "editable": false
+      }, commonAttrs), null), (0,external_vue_namespaceObject.createVNode)(star, (0,external_vue_namespaceObject.mergeProps)({
+        "rate": 0,
+        "editable": false
+      }, commonAttrs), null)]]);
+    };
+  }
+}));
+;// CONCATENATED MODULE: ../../packages/rate/src/index.ts
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+*/
+
+
+var BkRate = (0,external_shared_namespaceObject.withInstall)(rate);
+/* harmony default export */ const src = (BkRate);
+var __webpack_exports__default = __webpack_exports__.Z;
+export { __webpack_exports__default as default };

package/lib/rate/rate.css

@@ -0,0 +1,10 @@
+.bk-rate {
+  position: relative;
+}
+.bk-rate .bk-score-real {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  overflow: hidden;
+}

package/lib/rate/rate.d.ts

@@ -0,0 +1,43 @@
+declare const _default: import("vue").DefineComponent<{
+    modelValue: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    size: import("vue-types").VueTypeDef<"small" | "default" | "large">;
+    editable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    withValidate: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    size: import("vue-types").VueTypeDef<"small" | "default" | "large">;
+    editable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    withValidate: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}>> & {
+    onChange?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, {
+    modelValue: number;
+    withValidate: boolean;
+    editable: boolean;
+}>;
+export default _default;

package/lib/rate/rate.less

@@ -0,0 +1,11 @@
+.bk-rate {
+  position: relative;
+
+  .bk-score-real {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    overflow: hidden;
+  }
+}

package/lib/rate/rate.variable.css

@@ -0,0 +1,10 @@
+.bk-rate {
+  position: relative;
+}
+.bk-rate .bk-score-real {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  overflow: hidden;
+}

package/lib/rate/star.css

@@ -0,0 +1,24 @@
+.bk-rate-stars {
+  padding: 0;
+  margin: 0;
+}
+.bk-rate-stars .bk-is-edit {
+  cursor: pointer;
+}
+.bk-rate-stars:after {
+  display: table;
+  clear: both;
+  content: '';
+}
+.bk-rate-stars .bk-rate-star {
+  float: left;
+  margin-right: 3px;
+  enable-background: new 0 0 64 64;
+  fill: #c5c7d1;
+}
+.bk-rate-stars .bk-rate-star.bk-is-select {
+  fill: #ffb848;
+}
+.bk-rate-stars .bk-rate-star:last-child {
+  margin-right: 0;
+}

package/lib/rate/star.d.ts

@@ -0,0 +1,74 @@
+declare const _default: import("vue").DefineComponent<{
+    rate: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    width: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    height: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    editable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    hoverRate: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    max: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("chooseRate" | "changeHover")[], "chooseRate" | "changeHover", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    rate: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    width: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    height: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    editable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    hoverRate: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    max: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+}>> & {
+    onChooseRate?: (...args: any[]) => any;
+    onChangeHover?: (...args: any[]) => any;
+}, {
+    width: number;
+    height: number;
+    max: number;
+    editable: boolean;
+    rate: number;
+    hoverRate: number;
+}>;
+export default _default;

package/lib/rate/star.less

@@ -0,0 +1,29 @@
+.bk-rate-stars {
+  padding: 0;
+  margin: 0;
+
+  .bk-is-edit {
+    cursor: pointer;
+  }
+
+  &:after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+
+  .bk-rate-star {
+    float: left;
+    margin-right: 3px;
+    enable-background: new 0 0 64 64;
+    fill: #c5c7d1;
+
+    &.bk-is-select {
+      fill: #ffb848;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}

package/lib/rate/star.variable.css

@@ -0,0 +1,24 @@
+.bk-rate-stars {
+  padding: 0;
+  margin: 0;
+}
+.bk-rate-stars .bk-is-edit {
+  cursor: pointer;
+}
+.bk-rate-stars:after {
+  display: table;
+  clear: both;
+  content: '';
+}
+.bk-rate-stars .bk-rate-star {
+  float: left;
+  margin-right: 3px;
+  enable-background: new 0 0 64 64;
+  fill: #c5c7d1;
+}
+.bk-rate-stars .bk-rate-star.bk-is-select {
+  fill: #ffb848;
+}
+.bk-rate-stars .bk-rate-star:last-child {
+  margin-right: 0;
+}