├── .npmignore
├── packages
    ├── style
    │   ├── base.less
    │   ├── css-variables.less
    │   ├── var.less
    │   ├── border.less
    │   └── animation.less
    ├── utils
    │   ├── index.ts
    │   ├── format.ts
    │   ├── types.ts
    │   ├── with-install.ts
    │   ├── touch.ts
    │   ├── tools.ts
    │   └── vant-emulator.js
    ├── dialog
    │   ├── index.ts
    │   ├── types.ts
    │   ├── dialogfn.tsx
    │   ├── index.less
    │   └── doalog.tsx
    ├── toast
    │   ├── index.ts
    │   ├── types.ts
    │   ├── toastfn.tsx
    │   ├── index.less
    │   └── toast.tsx
    ├── popup
    │   ├── index.ts
    │   ├── index.less
    │   └── popup.tsx
    ├── cell
    │   ├── index.ts
    │   ├── cell.less
    │   └── cell.tsx
    ├── rate
    │   ├── index.ts
    │   ├── rate.less
    │   ├── rate.tsx
    │   └── star.tsx
    ├── icons
    │   ├── index.ts
    │   ├── icon.tsx
    │   ├── icon.less
    │   ├── heart.tsx
    │   └── star.tsx
    ├── calendar
    │   ├── index.ts
    │   ├── index.less
    │   ├── date.ts
    │   └── calendar.tsx
    ├── button
    │   ├── index.ts
    │   ├── button.tsx
    │   └── button.less
    ├── picker
    │   ├── index.ts
    │   ├── picker.less
    │   ├── picker.tsx
    │   └── columns.tsx
    ├── slider
    │   ├── index.ts
    │   ├── slider.less
    │   ├── slider.tsx
    │   └── slider copy.tsx
    └── index.ts
├── README.md
└── package.json


/.npmignore:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/packages/style/base.less:
--------------------------------------------------------------------------------
1 | @import './border.less';
2 | 
3 | @import './var.less';
4 | @import './css-variables.less';
5 | @import './animation.less';


--------------------------------------------------------------------------------
/packages/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './format';
2 | export * from './with-install';
3 | export * from './types';
4 | export * from './tools';
5 | 


--------------------------------------------------------------------------------
/packages/utils/format.ts:
--------------------------------------------------------------------------------
1 | const camelizeRE = /-(\w)/g;
2 | 
3 | // 将横线转成大写 例如 lan-button -> lanButton
4 | export const camelize = (str: string): string =>
5 |   str.replace(camelizeRE, (_, c) => c.toUpperCase());
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # lanli-ui
 2 | 
 3 | 
 4 | ## install
 5 | ```js
 6 | npm i --save lanli-ui
 7 | ```
 8 | 
 9 | ##  use
10 |  [document](https://slailcp.github.io/lanli-ui/index.html)
11 | 
12 | ## 源码
13 |  [源码](https://github.com/slailcp/lanli-ui)


--------------------------------------------------------------------------------
/packages/utils/types.ts:
--------------------------------------------------------------------------------
1 | import { ComponentPublicInstance } from 'vue'
2 | 
3 | export type Interceptor = (
4 |   ...args: any[]
5 | ) => Promise<boolean> | boolean | undefined | void;
6 | 
7 | export type ComponentInstance = ComponentPublicInstance<{}, any>;


--------------------------------------------------------------------------------
/packages/dialog/index.ts:
--------------------------------------------------------------------------------
 1 | import { Dialog} from './dialogfn';
 2 | import "./index.less"
 3 | export default Dialog;
 4 | export { Dialog };
 5 | 
 6 | declare module 'vue' {
 7 |   export interface GlobalComponents {
 8 |     LanDialog: typeof Dialog.Component;
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/packages/toast/index.ts:
--------------------------------------------------------------------------------
 1 | import { Toast } from './toastfn';
 2 | import "./index.less"
 3 | export default Toast;
 4 | export { Toast };
 5 | export * from "./types"
 6 | 
 7 | declare module 'vue' {
 8 |   export interface GlobalComponents {
 9 |     LanToast: typeof Toast.Component;
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/packages/popup/index.ts:
--------------------------------------------------------------------------------
 1 | import { withInstall } from '../utils';
 2 | import popupCom from './popup';
 3 | import "./index.less"
 4 | 
 5 | export const Popup = withInstall(popupCom);
 6 | export default Popup;
 7 | 
 8 | declare module 'vue' {
 9 |   export interface GlobalComponents {
10 |     LanPopup: typeof Popup;
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/packages/cell/index.ts:
--------------------------------------------------------------------------------
 1 | export * from './cell';
 2 | 
 3 | import { withInstall } from '../utils';
 4 | import CellCom from './cell';
 5 | import "./cell.less"
 6 | 
 7 | export const Cell = withInstall(CellCom);
 8 | export default Cell;
 9 | 
10 | 
11 | declare module 'vue' {
12 |   export interface GlobalComponents {
13 |     LanCell: typeof Cell;
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/packages/rate/index.ts:
--------------------------------------------------------------------------------
 1 | export * from './rate';
 2 | 
 3 | import { withInstall } from '../utils';
 4 | import RateCom from './rate';
 5 | import "./rate.less"
 6 | 
 7 | export const Rate = withInstall(RateCom);
 8 | export default Rate;
 9 | 
10 | 
11 | declare module 'vue' {
12 |   export interface GlobalComponents {
13 |     LanRate: typeof Rate;
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/packages/icons/index.ts:
--------------------------------------------------------------------------------
 1 | export * from './icon';
 2 | 
 3 | import { withInstall } from '../utils';
 4 | import IconCom from './icon';
 5 | import "./icon.less"
 6 | 
 7 | export const Icon = withInstall(IconCom);
 8 | export default Icon;
 9 | 
10 | 
11 | declare module 'vue' {
12 |   export interface GlobalComponents {
13 |     LanIcon: typeof Icon;
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/packages/calendar/index.ts:
--------------------------------------------------------------------------------
 1 | export * from './date';
 2 | import { withInstall } from '../utils';
 3 | import _Calendar from './calendar';
 4 | import "./index.less"
 5 | 
 6 | export const Calendar = withInstall(_Calendar);
 7 | export default Calendar;
 8 | 
 9 | declare module 'vue' {
10 |   export interface GlobalComponents {
11 |     LanCalendar: typeof Calendar;
12 |   }
13 | }


--------------------------------------------------------------------------------
/packages/button/index.ts:
--------------------------------------------------------------------------------
 1 | export * from './button';
 2 | 
 3 | import { withInstall } from '../utils';
 4 | import ButtonCom from './button';
 5 | import "./button.less"
 6 | 
 7 | export const Button = withInstall(ButtonCom);
 8 | export default Button;
 9 | 
10 | 
11 | declare module 'vue' {
12 |   export interface GlobalComponents {
13 |     LanButton: typeof Button;
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/packages/picker/index.ts:
--------------------------------------------------------------------------------
 1 | export * from './picker';
 2 | 
 3 | import { withInstall } from '../utils';
 4 | import PickerCom from './picker';
 5 | import "./picker.less"
 6 | 
 7 | export const Picker = withInstall(PickerCom);
 8 | export default Picker;
 9 | 
10 | 
11 | declare module 'vue' {
12 |   export interface GlobalComponents {
13 |     LanPicker: typeof Picker;
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/packages/slider/index.ts:
--------------------------------------------------------------------------------
 1 | export * from './slider';
 2 | 
 3 | import { withInstall } from '../utils';
 4 | import SliderCom from './slider';
 5 | import "./slider.less"
 6 | 
 7 | export const Slider = withInstall(SliderCom);
 8 | export default Slider;
 9 | 
10 | 
11 | declare module 'vue' {
12 |   export interface GlobalComponents {
13 |     LanSlider: typeof Slider;
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/packages/index.ts:
--------------------------------------------------------------------------------
 1 | import "./style/base.less"
 2 | import "./utils/vant-emulator.js"
 3 | 
 4 | 
 5 | export * from "./button"
 6 | export * from "./icons"
 7 | export * from "./popup"
 8 | export * from "./toast"
 9 | export * from "./dialog"
10 | 
11 | export * from "./cell"
12 | export * from "./rate"
13 | export * from "./slider"
14 | export * from "./picker"
15 | export * from "./calendar"
16 | 


--------------------------------------------------------------------------------
/packages/style/css-variables.less:
--------------------------------------------------------------------------------
 1 | @import './var.less';
 2 | 
 3 | :root {
 4 |   // Color Palette
 5 |   --lan-black: @black;
 6 |   --lan-animation-duration-base: @animation-duration-base;
 7 |   --lan-animation-duration-fast: @animation-duration-fast;
 8 |   --lan-animation-timing-function-enter: @animation-timing-function-enter;
 9 |   --lan-animation-timing-function-leave: @animation-timing-function-leave;
10 | }
11 | 


--------------------------------------------------------------------------------
/packages/style/var.less:
--------------------------------------------------------------------------------
 1 | // Color Palette
 2 | @black: #000;
 3 | @orange:#ff6e00;
 4 | 
 5 | 
 6 | @primary:#42e2f7;
 7 | @success:#3d91eb;
 8 | @warning:#f1ca1c;
 9 | @danger:rgb(245, 122, 122);
10 | @default:#fff;
11 | @gray:#999999;
12 | 
13 | // Animation
14 | @animation-duration-base: 0.3s;
15 | @animation-duration-fast: 0.2s;
16 | @animation-timing-function-enter: ease-out;
17 | @animation-timing-function-leave: ease-in;
18 | 
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "lanli-ui",
 3 |   "version": "0.0.3",
 4 |   "description": "lanli-ui",
 5 |   "main": "./package/index.ts",
 6 |   "keywords":["lanli-ui"],
 7 |   "author":"shenlanlan",
 8 |   "private": false,
 9 |   "license":"MIT",
10 | "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/slailcp/lanli-ui.git"
13 |   },
14 |   "scripts": {
15 |   },
16 |   "dependencies": {
17 |    
18 |   },
19 |   "devDependencies": {
20 |    
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/packages/dialog/types.ts:
--------------------------------------------------------------------------------
 1 | import { Interceptor } from "../utils"
 2 | 
 3 | export type DialogOptions = {
 4 |   title?: string;
 5 |   width?: string | number;
 6 |   message?: string;
 7 |   callback?: Interceptor
 8 |   className?: unknown;
 9 |   allowHtml?: boolean;
10 |   lockScroll?: boolean;
11 |   beforeClose?: Interceptor;
12 |   cancelButtonText?: string;
13 |   confirmButtonText?: string;
14 |   showCancelButton?: boolean;
15 |   showConfirmButton?: boolean;
16 | };
17 | 
18 | export type DialogAction = 'confirm' | 'cancel';


--------------------------------------------------------------------------------
/packages/toast/types.ts:
--------------------------------------------------------------------------------
 1 | import { Interceptor, ComponentInstance } from "../utils"
 2 | 
 3 | export type ToastOptions = {
 4 |   type?: 'loading' | 'success' | 'fail' | 'text';
 5 |   width?: string | number;
 6 |   message?: string;
 7 |   duration?: number;
 8 |   shade?: boolean;
 9 |   shadeClassName?: string;
10 |   className?: string;
11 |   allowHtml?: boolean;
12 |   position?: 'top' | 'bottom' | 'center'; // 'top' 'bottom' 'center'
13 |   onOpened?: Interceptor;
14 |   onClose?: Interceptor;
15 | };
16 | 
17 | export type ToastAction = 'open' | 'close'
18 | 
19 | export type mountComponentVoid = {
20 |   instance: ComponentInstance;
21 |   unmount: Interceptor | null | undefined
22 | }  | null | undefined


--------------------------------------------------------------------------------
/packages/utils/with-install.ts:
--------------------------------------------------------------------------------
 1 | import { App } from 'vue';
 2 | import { camelize } from './format';
 3 | 
 4 | type EventShim = {
 5 |   new (...args: any[]): {
 6 |     $props: {
 7 |       onClick?: (...args: any[]) => void;
 8 |     };
 9 |   };
10 | };
11 | 
12 | export type WithInstall<T> = T & {
13 |   install(app: App): void;
14 | } & EventShim;
15 | 
16 | // 封装组件的install,全局调用
17 | export function withInstall<T>(options: T) {
18 |   (options as Record<string, unknown>).install = (app: App) => {
19 |     const { name } = options as unknown as { name: string };
20 |     app.component(name, options);
21 |     app.component(camelize(`-${name}`), options);
22 |   };
23 | 
24 |   return options as WithInstall<T>;
25 | }
26 | 


--------------------------------------------------------------------------------
/packages/rate/rate.less:
--------------------------------------------------------------------------------
 1 | @import '../style/base.less';
 2 | 
 3 | 
 4 | :root {
 5 |   --lan-cell-padding: 10px 0 10px 0;
 6 | 
 7 | }
 8 | 
 9 | .lan-rate-box{position: relative; 
10 |   .lan-rate{display: inline-block;cursor: pointer; vertical-align: middle;box-sizing: border-box;}
11 |   &.lan-rate-disabled{
12 |     .lan-rate{cursor: no-drop;   }
13 |     opacity: .8;
14 |   }
15 |   &.lan-rate-readonly{
16 |     .lan-rate{cursor: no-drop;}
17 |   }
18 |   &.lan-rate-move{
19 |     &::after{position: absolute;top:0;bottom:0;right:0;left:0;bottom: 0;z-index: 10;content: "";cursor: pointer;}
20 |     &.lan-rate-readonly,&.lan-rate-disabled{
21 |       &::after{cursor: no-drop;}
22 |     }
23 |   }
24 | 
25 |   .lan-rate-span{display: inline-block;}
26 | }


--------------------------------------------------------------------------------
/packages/style/border.less:
--------------------------------------------------------------------------------
 1 | .borderbot1px(@c: #C7C7C7) {
 2 |   content: " ";
 3 |   position: absolute;
 4 |   left: 0;
 5 |   bottom: 0;
 6 |   width: 200%;
 7 |   height: 1px;
 8 |   border-bottom: 1px solid @c;
 9 |   color: @c;
10 |   // height: 200%;
11 |   transform-origin: left top;
12 |   transform: scale(0.5);pointer-events: none;
13 | }
14 | 
15 | .bordertop1px(@c: #C7C7C7) {
16 |   content: " ";
17 |   position: absolute;
18 |   left: 0;
19 |   top: 0;
20 |   width: 200%;
21 |   height: 1px;
22 |   border-top: 1px solid @c;
23 |   color: @c;
24 |   // height: 200%;
25 |   transform-origin: left top;
26 |   transform: scale(0.5);pointer-events: none;
27 | }
28 | 
29 | .border1px(@c: #C7C7C7,@radius:0) {
30 |   content: " ";
31 |   position: absolute;
32 |   left: 0;
33 |   top: 0;
34 |   width: 200%;
35 |   border: 1px solid @c;
36 |   border-radius:@radius;
37 |   color: @c;
38 |   height: 200%;
39 |   transform-origin: left top;
40 |   transform: scale(0.5);pointer-events: none;
41 | }
42 | 


--------------------------------------------------------------------------------
/packages/calendar/index.less:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --lan-calendar-choose-bgcolor: rgb(245, 223, 181);
 3 |   --lan-calendar-choose-color: #333;
 4 | 
 5 |   --lan-calendar-pass-bgcolor: #fafafa;
 6 |   --lan-calendar-pass-color: #999;
 7 | 
 8 |   --lan-calendar-active-bgcolor: #409eff;
 9 |   --lan-calendar-active-color: #fff;
10 | 
11 |   --lan-calendar-fontsize: 14px;
12 | }
13 | 
14 | .lan-calendar-month {
15 |   text-align: center;
16 |   padding: 15px 0;
17 | }
18 | 
19 | .lan-calendar-con {
20 |   display: flex;
21 |   flex-wrap: wrap;
22 | }
23 | 
24 | .lan-calendar-con-date {
25 |   flex: 1;
26 |   min-width: 14.28%;
27 |   max-width: 14.28%;
28 |   height: 60px;
29 |   line-height: 60px;
30 |   text-align: center;
31 |   cursor: pointer;
32 |   font-size: var(--lan-calendar-fontsize);
33 |   &.lan-calendar-pass,
34 |   &.lan-calendar-future {
35 |     background-color: var(--lan-calendar-pass-bgcolor);
36 |     color: var(--lan-calendar-pass-color);
37 |   }
38 | }
39 | 
40 | .lan-calendar-date-active {
41 |   background-color: var(--lan-calendar-active-bgcolor);
42 |   color: var(--lan-calendar-active-color);
43 | }
44 | .lan-calendar-date-choose {
45 |   background-color: var(--lan-calendar-choose-bgcolor);
46 |   color: var(--lan-calendar-choose-color);
47 | }


--------------------------------------------------------------------------------
/packages/popup/index.less:
--------------------------------------------------------------------------------
 1 | 
 2 | @import '../style/base.less';
 3 | 
 4 | :root {
 5 |   --lan-popup-background-color: #fff;
 6 | }
 7 | 
 8 | 
 9 | .lan-popup-left {
10 |   position: fixed;
11 |   top: 0;
12 |   left: 0;
13 |   bottom: 0;
14 |   width: 50%;
15 |   background-color: var(--lan-popup-background-color);
16 |   z-index: 2;
17 |   overflow-y: auto;
18 | }
19 | 
20 | .lan-popup-right {
21 |   position: fixed;
22 |   top: 0;
23 |   right: 0;
24 |   bottom: 0;
25 |   width: 50%;
26 |   background-color: var(--lan-popup-background-color);
27 |   z-index: 200;
28 |   overflow-y: auto;
29 | }
30 | 
31 | .lan-popup-bottom {
32 |   position: fixed;
33 |   bottom: 0;
34 |   right: 0;
35 |   left: 0;
36 |   height: 50%;
37 |   background-color: var(--lan-popup-background-color);
38 |   z-index: 2;
39 |   overflow-y: auto;
40 | }
41 | 
42 | .lan-popup-top {
43 |   position: fixed;
44 |   top: 0;
45 |   right: 0;
46 |   left: 0;
47 |   height: 50%;
48 |   background-color: var(--lan-popup-background-color);
49 |   z-index: 2;
50 |   overflow-y: auto;
51 | }
52 | 
53 | .lan-popup-center {
54 |   position: fixed;
55 |   top: 50%;
56 |   left: 50%;
57 |   transform: translate(-50%, -50%);
58 |   background-color: var(--lan-popup-background-color);
59 |   z-index: 200;
60 | }
61 | 
62 | .lan-mask-popup {
63 |   position: fixed;
64 |   top: 0;
65 |   left: 0;
66 |   bottom: 0;
67 |   right: 0;
68 |   background-color: rgba(0, 0, 0, 0.7);
69 |   z-index: 199;
70 | }


--------------------------------------------------------------------------------
/packages/slider/slider.less:
--------------------------------------------------------------------------------
 1 | @import '../style/base.less';
 2 | 
 3 | @corfff: #fff;
 4 | @cor333: #333;
 5 | @font14: 14px;
 6 | 
 7 | 
 8 | :root {
 9 |   --lan-slider-item-width:30px;
10 |   --lan-slider-item-bg:rgba(255,255,255,.9);
11 |   --lan-slider-height:10px;
12 | }
13 | 
14 | 
15 | .lan-slider-container{
16 |   position: relative;
17 |   height:var(--lan-slider-item-width);
18 |   &::after{
19 |     content: "";
20 |     position: absolute;
21 |     left:0;
22 |     right:0;
23 |     top:50%;
24 |     margin-top:calc(var(--lan-slider-height) / -2);
25 |     height:var(--lan-slider-height);
26 |     background-color: #ccc;
27 |     z-index: 1;    
28 |     border-radius: 5px;
29 |   }
30 |   .lan-slider-item-left,.lan-slider-item-right{
31 |     position: absolute;
32 |     width:var(--lan-slider-item-width);
33 |     height:var(--lan-slider-item-width);
34 |     border-radius: 50%;
35 |     background-color: var(--lan-slider-item-bg);box-shadow: 0 0 3px #999;
36 |     z-index: 3;
37 |     top:50%;user-select: none;
38 |   }
39 |   .lan-slider-item-left{left:0;transform: translate3d(-50%,-50%,0);}
40 |   .lan-slider-item-right{right:0;transform: translate3d(50%,-50%,0);}
41 |   .lan-slider-fill{
42 |     position: absolute;left:0;width:100%;
43 |     height:var(--lan-slider-item-width);
44 |    &::after{
45 |     content: "";
46 |     position: absolute;
47 |     left:0;
48 |     right:0;
49 |     top:50%;border-radius: 5px;
50 |     margin-top:calc(var(--lan-slider-height) / -2);
51 |     height:var(--lan-slider-height);
52 |     background-color: #1989fa;
53 |     z-index: 2;
54 |    }
55 |   }
56 |   
57 | }
58 | 
59 | 
60 | 
61 | 
62 | 
63 | 
64 | 
65 | 


--------------------------------------------------------------------------------
/packages/picker/picker.less:
--------------------------------------------------------------------------------
 1 | @import '../style/base.less';
 2 | 
 3 | :root {
 4 |   --lan-pciker-bgcolor: rgb(245, 223, 181);
 5 |   --lan-picker-mask-color: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)), linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4));
 6 |   --lan-pciker-title-confirm-color: @primary;
 7 |   --lan-pciker-title-cancel-color: @gray;
 8 |   --lan-pciker-column-height: 175px;
 9 |   --lan-pciker-column-item-height: 35px;
10 | 
11 | 
12 | }
13 | 
14 | .lan-pciker-container{}
15 | 
16 | .lan-pciker-columns {
17 |   display: flex;
18 |   width: 100%;
19 |   
20 | }
21 | .lan-pciker-columns>div{ flex: 1;position: relative;}
22 | .lan-pciker-column {
23 |   height:var(--lan-pciker-column-height);
24 |   overflow:hidden;
25 | 
26 |   .lan-pciker-column-item {
27 |     line-height: var(--lan-pciker-column-item-height);
28 |     text-align: center;
29 |     cursor: grab;
30 |     user-select:none;
31 |   }
32 | }
33 | 
34 | 
35 | .van-picker-mask {
36 |   position: absolute;
37 |   top: 0;
38 |   left: 0;
39 |   z-index: 1;
40 |   width: 100%;
41 |   height: 100%;
42 |   background-image:var(--lan-picker-mask-color);
43 |   background-repeat: no-repeat;
44 |   background-position: top,bottom;
45 |   transform: translateZ(0);
46 |   pointer-events: none;
47 | 
48 |   background-size: 100% 77px;
49 | }
50 | 
51 | .lan-picker-title{display: flex;line-height: 35px;margin-bottom:20px;
52 |   .lan-picker-title-cancel{width:100px;color:var(--lan-pciker-title-cancel-color);cursor: pointer;}
53 |   .lan-picker-title-con{flex:1;text-align: center;}
54 |   .lan-picker-title-enter{width:100px;text-align: right;color:var(--lan-pciker-title-confirm-color);cursor: pointer;}
55 | }
56 | 


--------------------------------------------------------------------------------
/packages/calendar/date.ts:
--------------------------------------------------------------------------------
 1 | import moment, { Moment } from "moment"
 2 | 
 3 | export type DateItem = {
 4 |   date: Moment | null;
 5 |   pass?: string;
 6 |   future?: string;
 7 | }
 8 | export type DateMon = {
 9 |   month: Moment;
10 |   date: Array<DateItem>
11 | }
12 | 
13 | export type DateObj = {
14 |   [propName in string | number]: DateMon;
15 | }
16 | 
17 | // const startWeek = 1; // 从周一开始
18 | 
19 | export function getAllDate(start = moment(), end = moment().add(1, 'months'), startWeek = 1) { // 获取两个日期间的所有日期数据
20 |   const startDate = start.clone();
21 |   const endDate = end.clone();
22 | 
23 |   const dataObject: DateObj = {};
24 |   const diff = Math.abs(startDate.startOf('month').diff(endDate.endOf('month'), 'days')); // 两个日期相差多少天(start的月初,到end的月末)
25 | 
26 |   for (let i = 0; i < diff; i++) {
27 |     const date = startDate.clone().add(i, 'days')
28 |     const isfirst = date.format('DD') == '01' // 月初第一天
29 |     const firstX = date.clone().startOf('month').format('x')
30 | 
31 |     if (!dataObject[firstX]) { dataObject[firstX] = { month: date, date: [] } }
32 | 
33 |     if (isfirst) {
34 |       const weekday = date.weekday() === 0 ? 7 : date.weekday()
35 |       dataObject[firstX].date.push(...fillEmpty(weekday - startWeek))// 初始第一个月
36 |     }
37 | 
38 |     dataObject[firstX].date.push({
39 |       date: date,
40 |       pass: start.diff(date) > 0 ? 'lan-calendar-pass' : '',
41 |       future: end.diff(date) < 0 ? 'lan-calendar-future' : ''
42 |     })
43 |   }
44 | 
45 |   return dataObject
46 | }
47 | 
48 | function fillEmpty(num: number) {
49 |   const ret: DateItem[] = []
50 |   for (let i = 0; i < num; i++) {
51 |     ret.push({
52 |       date: null,
53 |       pass: 'pass'
54 |     })
55 |   }
56 |   return ret
57 | }


--------------------------------------------------------------------------------
/packages/icons/icon.tsx:
--------------------------------------------------------------------------------
 1 | import * as icon from './com'
 2 | import * as star from './star'
 3 | import * as heart from './heart'
 4 | import { setIcon } from "../utils"
 5 | 
 6 | const icons = { ...icon, ...star, ...heart }
 7 | 
 8 | 
 9 | import { defineComponent, Fragment } from "vue"
10 | 
11 | export const IconProps = {
12 |     name: { default: "user", type: String },
13 |     size: { default: "", type: String },
14 |     color: { default: "", type: String },
15 |     dot: { default: false, type: Boolean },
16 |     badge: { default: "", type: String },
17 |     iconIndex: { default: "0", type: [String, Number] },
18 | }
19 | export default defineComponent({
20 |     name: 'lan-icon',
21 |     props: Object.assign({}, IconProps),
22 |     emits: ['click'],
23 |     setup(props, { emit, slots }) {
24 |         const IsUrl = /\//g.test(props.name);
25 |         const style: any = {}
26 |         if(props.size){style.width = props.size}
27 |         if(props.color){style.color = props.color}
28 | 
29 | 
30 |         function iconRender() {
31 |             const iconCom = setIcon(icons, props.name)
32 |             return (
33 |                 <iconCom style={style} />
34 |                 // <span style="display:inline-block;min-width:40px;">{name}</span>
35 |             )
36 |         }
37 |         function imageRender() {
38 |             return (
39 |                 <img src={props.name} style={style} />
40 |             )
41 |         }
42 | 
43 |         function onClick(event: MouseEvent) {
44 |             emit('click', event)
45 |         }
46 |         return () => (
47 |             <div class="lan-icon-wraper" onClick={onClick}>
48 |                 {IsUrl ? imageRender() : iconRender()}
49 |                 {props.dot ? <i class={`lan-icon-dot`}></i> : null}
50 |                 {props.badge ? <i class={`lan-icon-badge ${!props.badge ? 'lan-icon-badge-empty' : ''}`}>{props.badge}</i> : null}
51 |             </div>
52 |         )
53 |     }
54 | })


--------------------------------------------------------------------------------
/packages/icons/icon.less:
--------------------------------------------------------------------------------
 1 | @import '../style/base.less';
 2 | 
 3 | 
 4 | :root {
 5 |    --lan-icon-badge-bgcolor:red;
 6 |    --lan-icon-badge-top: 0;
 7 |    --lan-icon-badge-right: 0;
 8 |    --lan-icon-badge-bottom: auto;
 9 |    --lan-icon-badge-left: auto;
10 |    --lan-icon-badge-fontsize: 12px;
11 |    --lan-icon-dot-width: 5px;
12 | }
13 |   
14 | 
15 | .lan-icon-wraper{
16 |     display: inline-block;
17 |     position: relative;vertical-align: middle;
18 |     &::after{position: absolute;top:0;bottom:0;right:0;left:0;bottom: 0;z-index: 9;content: "";}
19 |     svg{display: block;}
20 |     img{width:20px;}
21 |     .lan-icon-dot{
22 |         position: absolute;
23 |         display: block;
24 |         background-color: var(--lan-icon-badge-bgcolor);
25 |         box-sizing:border-box;
26 |         right: var(--lan-icon-badge-right);
27 |         top: var(--lan-icon-badge-top);
28 |         left: var(--lan-icon-badge-left);
29 |         bottom: var(--lan-icon-badge-bottom);
30 |         border-radius: 50%;
31 |         width:var(--lan-icon-dot-width);
32 |         height:var(--lan-icon-dot-width);
33 |         transform: translateX(50%) translateY(-50%);;
34 |     }
35 |     .lan-icon-badge{
36 |         position: absolute;
37 |         display: block;
38 |         background-color: var(--lan-icon-badge-bgcolor);
39 |         box-sizing:border-box;
40 |         min-width: 20px;
41 |         text-align: center;
42 |         color: #fff;
43 |         right: var(--lan-icon-badge-right);
44 |         top: var(--lan-icon-badge-top);
45 |         left: var(--lan-icon-badge-left);
46 |         bottom: var(--lan-icon-badge-bottom);
47 |         border-radius: 999px;
48 |         font-style: normal;
49 |         line-height: 1.2;padding:1px 2px;
50 |         font-size: var(--lan-icon-badge-fontsize);transform: translateX(85%) translateY(-50%);;
51 |     }
52 | }
53 | 
54 | 
55 | 
56 | 
57 | 
58 | 
59 | 
60 | 
61 | 
62 | 
63 | 
64 | 
65 | 
66 | 
67 | 
68 | 
69 | 
70 | 
71 | 
72 | 
73 | 
74 | 
75 | 
76 | 
77 | 


--------------------------------------------------------------------------------
/packages/cell/cell.less:
--------------------------------------------------------------------------------
 1 | @import '../style/base.less';
 2 | 
 3 | @corfff: #fff;
 4 | @cor333: #333;
 5 | @font14: 14px;
 6 | 
 7 | :root {
 8 |   --lan-cell-padding: 10px 0 10px 0;
 9 |   --lan-cell-title-width: 80px;
10 |   --lan-cell-titicon-width: 30px;
11 |   --lan-cell-valicon-width: 20px;
12 |   --lan-cell-border-color: #d8d8d8;
13 |   --lan-cell-icon-size: 17px;
14 |   --lan-cell-icon-color: #bbb;
15 | }
16 | 
17 | 
18 | 
19 | 
20 | .lan-cell-style {
21 |   display: flex;
22 |   flex-wrap: wrap;
23 |   padding: var(--lan-cell-padding);
24 |   font-size: 14px;
25 |   position: relative;
26 | 
27 |   &::before {
28 |     .borderbot1px(var(--lan-cell-border-color))
29 |   }
30 | 
31 |   &:last-child {
32 |     &::before {
33 |       display: none;
34 |     }
35 |   }
36 | 
37 |   // &:active{background-color: #e9fdfd;}
38 | 
39 |   
40 |   .lan-cell-tit-icon {
41 |     width: var(--lan-cell-titicon-width);
42 |     display: flex;
43 |     align-items: center;
44 |     justify-content: flex-start;
45 |   }
46 | 
47 |   .lan-cell-title {
48 |     width: var(--lan-cell-title-width);
49 |     display: flex;
50 | 
51 |     &.lan-cell-tit-ver-top {
52 |       align-items: start;
53 |     }
54 | 
55 |     &.lan-cell-tit-ver-middle {
56 |       align-items: center;
57 |     }
58 | 
59 |     &.lan-cell-tit-ver-bottom {
60 |       align-items: end;
61 |     }
62 |   }
63 | 
64 | 
65 | 
66 |   .lan-cell-value {
67 |     flex: 1;
68 |     .lan-cell-h4{padding-bottom:5px;}
69 |     .lan-cell-label {line-height: 24px;}
70 | 
71 |   }
72 | 
73 |   .lan-cell-right-icon {
74 |     width: var(--lan-cell-valicon-width);
75 |     display: flex;
76 |     align-items: center;
77 |     justify-content: flex-end;
78 |   }
79 | 
80 |   .lan-cell-icon {
81 |     vertical-align: middle;
82 |     width: var(--lan-cell-icon-size);
83 |     color: var(--lan-cell-icon-color)
84 |   }
85 |   
86 | 
87 |  
88 | 
89 | 
90 |   &.lan-cell-default {
91 |     .lan-cell-value {
92 |       text-align: right;
93 |     }
94 |   }
95 | 
96 | 
97 | 
98 | }


--------------------------------------------------------------------------------
/packages/toast/toastfn.tsx:
--------------------------------------------------------------------------------
 1 | import { withInstall } from '../utils';
 2 | import { createApp, Component, App } from 'vue'
 3 | import LanToast from './toast'
 4 | import { ToastOptions, ToastAction, mountComponentVoid } from "./types"
 5 | import { ComponentInstance } from "../utils"
 6 | 
 7 | const inBrowser = typeof window !== 'undefined'
 8 | let instance: ComponentInstance;
 9 | 
10 | function mountComponent(RootComponent: Component, obj: ToastOptions) {
11 |   const app = createApp(RootComponent, obj);
12 |   const root = document.createElement('div');
13 | 
14 |   const toastRandom = `lan${Math.floor(Math.random() * 100000000000000000)}`
15 |   root.setAttribute('lan-toast-random', toastRandom)
16 | 
17 |   document.body.appendChild(root);
18 |   return {
19 |     instance: app.mount(root),
20 |     toastRandom: toastRandom
21 |   };
22 | }
23 | 
24 | function Toast(options: ToastOptions) {
25 |   let toastRandom: any
26 |   if (!inBrowser) {
27 |     return;
28 |   }
29 |   const props: ToastOptions = Object.assign({}, Toast.defaultOptions, options, {
30 |     onClose: (action: ToastAction) => {
31 |       const root = document.querySelector('[lan-toast-random=' + toastRandom + ']')
32 |       if (root) {
33 |         document.body.removeChild(root);
34 |       }
35 |       options.onClose?.()
36 |     }
37 |   });
38 | 
39 |   ({ instance, toastRandom } = mountComponent(<LanToast />, props));
40 |   return toastRandom;
41 | }
42 | 
43 | Toast.defaultOptions = {
44 |   type: 'text',
45 |   width: "",
46 |   message: "",
47 |   duration: 2000,
48 |   shade: false,
49 |   shadeClassName: "",
50 |   className: "",
51 |   allowHtml: false,
52 |   position: 'center',
53 |   onOpened: null,
54 |   onClose: null
55 | };
56 | 
57 | Toast.currentOptions = Object.assign({}, Toast.defaultOptions);
58 | 
59 | Toast.close = (toastRandom: string) => {
60 |   const root = document.querySelector('[lan-toast-random=' + toastRandom + ']')
61 |   if (root) {
62 |     document.body.removeChild(root);
63 |   }
64 | };
65 | 
66 | Toast.Component = withInstall(LanToast);
67 | 
68 | Toast.install = (app: App) => {
69 |   app.use(Toast.Component);
70 |   app.config.globalProperties.$toast = Toast;
71 | };
72 | 
73 | 
74 | export { Toast }


--------------------------------------------------------------------------------
/packages/utils/touch.ts:
--------------------------------------------------------------------------------
 1 | type Direction = '' | 'vertical' | 'horizontal';
 2 | 
 3 | function getDirection(x: number, y: number) {
 4 |     if (x > y) {
 5 |         return 'horizontal';
 6 |     }
 7 |     if (y > x) {
 8 |         return 'vertical';
 9 |     }
10 |     return '';
11 | }
12 | 
13 | export class Touch {
14 |     initX = 0;
15 |     initY = 0;
16 |     parentOffsetX = 0;
17 |     parentOffsetY = 0;
18 |     deltaX = 0;
19 |     deltaY = 0;
20 |     offsetX = 0;
21 |     offsetY = 0;
22 |     direction = '';
23 |     isLockDirection = false;
24 | 
25 | 
26 |     isVertical() { return this.direction === 'vertical'; }
27 |     isHorizontal() { return this.direction === 'horizontal'; }
28 | 
29 |     reset() {
30 |         this.deltaX = 0;
31 |         this.deltaY = 0;
32 |         this.parentOffsetX = 0;
33 |         this.parentOffsetY = 0;
34 |         this.offsetX = 0;
35 |         this.offsetY = 0;
36 |         this.direction = '';
37 |         this.isLockDirection = false;
38 |     }
39 | 
40 |     start(event: TouchEvent) {
41 |         this.reset()
42 |         this.initX = event.touches[0].clientX;
43 |         this.initY = event.touches[0].clientY;
44 |         if (event.target) {
45 |             const bound = (event.target as HTMLElement).getBoundingClientRect();
46 |             this.parentOffsetX = Math.floor(bound.x);
47 |             this.parentOffsetY = Math.floor(bound.y);
48 |         }
49 |     }
50 | 
51 |     move(event: TouchEvent) {
52 |         const touch = event.touches[0];
53 |         this.deltaX = (touch.clientX < 0 ? 0 : touch.clientX) - this.initX;
54 |         this.deltaY = touch.clientY - this.initY;
55 |         this.offsetX = Math.abs(this.deltaX);
56 |         this.offsetY = Math.abs(this.deltaY);
57 | 
58 | 
59 |         const DIRECTION_DISTANCE = 10; // 超过这个距离就锁定方向。
60 |         
61 |         if (!this.isLockDirection && (this.offsetX > DIRECTION_DISTANCE || this.offsetY > DIRECTION_DISTANCE)) {
62 |             this.isLockDirection = true;
63 |             this.direction = getDirection(this.offsetX, this.offsetY);
64 |         }
65 | 
66 |         if (this.offsetX < DIRECTION_DISTANCE && this.offsetX < DIRECTION_DISTANCE) {
67 |             this.direction = getDirection(this.offsetX, this.offsetY);
68 |         }
69 |     }
70 | }
71 | 
72 | 


--------------------------------------------------------------------------------
/packages/dialog/dialogfn.tsx:
--------------------------------------------------------------------------------
 1 | import { withInstall, ComponentInstance } from '../utils';
 2 | import { createApp,  Component, App } from 'vue'
 3 | import LanDialog from './doalog'
 4 | import {DialogOptions, DialogAction} from "./types"
 5 | 
 6 | const inBrowser = typeof window !== 'undefined'
 7 | let instance: ComponentInstance;
 8 | 
 9 | function mountComponent(RootComponent: Component, obj: DialogOptions) {
10 |   const app = createApp(RootComponent, obj);
11 |   const root = document.createElement('div');
12 | 
13 |   document.body.appendChild(root);
14 |   const bodyoverflow = document.body.style.overflow;
15 | 
16 |   if (obj.lockScroll) {
17 |     document.body.style.overflow = "hidden"
18 |   }
19 | 
20 |   return {
21 |     instance: app.mount(root),
22 |     unmount() {
23 |       app.unmount();
24 |       document.body.removeChild(root);
25 |       if (obj.lockScroll) {
26 |         document.body.style.overflow = bodyoverflow
27 |       }
28 |     },
29 |   };
30 | }
31 | 
32 | function Dialog(options: DialogOptions) {
33 |   let unmount: any
34 |   if (!inBrowser) {
35 |     return Promise.resolve();
36 |   }
37 |   return new Promise((resolve, reject) => {
38 |     const props = Object.assign({}, Dialog.defaultOptions, options, {
39 |       callback: (action: DialogAction) => {
40 |         (action === 'confirm' ? resolve : reject)(action);
41 |         setTimeout(() => { unmount() }, 300)
42 |       },
43 | 
44 |     });
45 | 
46 |     ({ instance, unmount } = mountComponent(<LanDialog />, props));
47 |   });
48 | }
49 | 
50 | Dialog.defaultOptions = {
51 |   title: '提示',
52 |   width: '',
53 |   message: '',
54 |   callback: null,
55 |   className: '',
56 |   allowHtml: false,
57 |   lockScroll: false,
58 |   beforeClose: null,
59 |   cancelButtonText: '取消',
60 |   confirmButtonText: '确认',
61 |   showConfirmButton: true,
62 |   showCancelButton: false,
63 | };
64 | 
65 | Dialog.currentOptions = Object.assign({}, Dialog.defaultOptions);
66 | 
67 | Dialog.alert = Dialog;
68 | 
69 | Dialog.confirm = (options: DialogOptions) =>
70 |   Dialog(Object.assign({ showCancelButton: true }, options));
71 | 
72 | Dialog.close = () => {
73 |   if (instance) {
74 |     instance.toggle(false);
75 |   }
76 | };
77 | 
78 | 
79 | Dialog.Component = withInstall(LanDialog);
80 | 
81 | Dialog.install = (app: App) => {
82 |   app.use(Dialog.Component);
83 |   app.config.globalProperties.$dialog = Dialog;
84 | };
85 | 
86 | 
87 | export { Dialog }


--------------------------------------------------------------------------------
/packages/toast/index.less:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --lan-toast-background-color: rgba(0, 0, 0, 0.7);
  3 |   --lan-toast-button-active-color: orange;
  4 |   --lan-toast-spinner-size: 50px;
  5 |   --lan-loading-color-primary: #fff;
  6 | }
  7 | 
  8 | 
  9 | @keyframes loading-rotate {
 10 |   to {
 11 |     transform: rotate(360deg)
 12 |   }
 13 | }
 14 | 
 15 | @keyframes loading-dash {
 16 |   0% {
 17 |     stroke-dasharray: 1, 200;
 18 |     stroke-dashoffset: 0
 19 |   }
 20 | 
 21 |   50% {
 22 |     stroke-dasharray: 90, 150;
 23 |     stroke-dashoffset: -40px
 24 |   }
 25 | 
 26 |   to {
 27 |     stroke-dasharray: 90, 150;
 28 |     stroke-dashoffset: -120px
 29 |   }
 30 | }
 31 | 
 32 | 
 33 | .lan-toast-center {
 34 |   border-radius: 12px;
 35 |   overflow: hidden;
 36 |   position: fixed;
 37 |   top: 50%;
 38 |   left: 50%;
 39 |   transform: translate(-50%, -50%);
 40 |   background-color: var(--lan-toast-background-color);
 41 |   z-index: 200;
 42 | 
 43 |   &.top {
 44 |     top: 30%
 45 |   }
 46 | 
 47 |   &.bottom {
 48 |     bottom: 30%;
 49 |     top: auto
 50 |   }
 51 | 
 52 | }
 53 | 
 54 | .lan-mask-toast {
 55 |   position: fixed;
 56 |   top: 0;
 57 |   left: 0;
 58 |   bottom: 0;
 59 |   right: 0;
 60 |   background-color: rgba(0, 0, 0, 0);
 61 |   z-index: 199;
 62 | }
 63 | 
 64 | .lan-toast-content {
 65 |   padding: 10px 15px;
 66 |   overflow-y: auto;
 67 |   font-size: 14px;
 68 |   color: #fff;
 69 |   text-align: center;
 70 | }
 71 | 
 72 | 
 73 | 
 74 | 
 75 | 
 76 | 
 77 | 
 78 | /*loading*/
 79 | .lan-toast-icon {
 80 |   min-height: 50px;
 81 | 
 82 |   .toastcircular {
 83 |     display: inline;
 84 |     height: var(--lan-toast-spinner-size);
 85 |     width: var(--lan-toast-spinner-size);
 86 |     animation: loading-rotate 2s linear infinite;
 87 |   }
 88 | 
 89 |   .toastcircular .path {
 90 |     animation: loading-dash 1.5s ease-in-out infinite;
 91 |     stroke-dasharray: 90, 150;
 92 |     stroke-dashoffset: 0;
 93 |     stroke-width: 2;
 94 |     stroke: var(--lan-loading-color-primary);
 95 |     stroke-linecap: round;
 96 |   }
 97 | }
 98 | 
 99 | 
100 | 
101 | /*lan-success-fail*/
102 | .lan-toast-icon {
103 |   text-align: center;padding-top:5px;
104 |   color: var(--lan-loading-color-primary);
105 |   .successfail-svg svg {
106 |     height: 70px;
107 |     width: 70px;color:#fff;
108 |   }
109 | }
110 | 
111 | .lan-toast-loading-wraper,.lan-toast-success-wraper,.lan-toast-fail-wraper{
112 |   width:30%;max-width: 200px;
113 |   .lan-toast-content{padding-top:0;}
114 | }


--------------------------------------------------------------------------------
/packages/dialog/index.less:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --lan-dialog-background-color: #fff;
  3 |   --lan-dialog-button-active-color: orange;
  4 |   --lan-loading-spinner-size: 20px;
  5 |   --lan-color-primary: #409eff;
  6 | }
  7 | 
  8 | 
  9 | @keyframes loading-rotate {
 10 |   to {
 11 |     transform: rotate(360deg)
 12 |   }
 13 | }
 14 | 
 15 | @keyframes loading-dash {
 16 |   0% {
 17 |     stroke-dasharray: 1, 200;
 18 |     stroke-dashoffset: 0
 19 |   }
 20 | 
 21 |   50% {
 22 |     stroke-dasharray: 90, 150;
 23 |     stroke-dashoffset: -40px
 24 |   }
 25 | 
 26 |   to {
 27 |     stroke-dasharray: 90, 150;
 28 |     stroke-dashoffset: -120px
 29 |   }
 30 | }
 31 | 
 32 | .lan-dialog .circular {
 33 |   display: inline;
 34 |   height: var(--lan-loading-spinner-size);
 35 |   width: var(--lan-loading-spinner-size);
 36 |   animation: loading-rotate 2s linear infinite;
 37 | }
 38 | 
 39 | .lan-dialog .circular .path {
 40 |   animation: loading-dash 1.5s ease-in-out infinite;
 41 |   stroke-dasharray: 90, 150;
 42 |   stroke-dashoffset: 0;
 43 |   stroke-width: 2;
 44 |   stroke: var(--lan-color-primary);
 45 |   stroke-linecap: round;
 46 | }
 47 | 
 48 | .lan-dialog-center {
 49 |   position: fixed;
 50 |   top: 50%;
 51 |   left: 50%;
 52 |   width: 340px;
 53 |   transform: translate(-50%, -50%);
 54 |   background-color: var(--lan-dialog-background-color);
 55 |   z-index: 200;
 56 | }
 57 | 
 58 | .lan-mask-dialog {
 59 |   position: fixed;
 60 |   top: 0;
 61 |   left: 0;
 62 |   bottom: 0;
 63 |   right: 0;
 64 |   background-color: rgba(0, 0, 0, 0.7);
 65 |   z-index: 199;
 66 | }
 67 | 
 68 | .lan-dialog-title {
 69 |   height: 23px;
 70 |   padding: 10px 15px 5px 15px;
 71 |   font-size: 14px;
 72 | }
 73 | 
 74 | .lan-dialog-content {
 75 |   max-height: 100px;
 76 |   min-height: 50px;
 77 |   padding: 10px 15px;
 78 |   overflow-y: auto;
 79 |   font-size: 14px;
 80 | }
 81 | 
 82 | .lan-dialog-buttons {
 83 |   padding: 0 15px;
 84 |   display: flex;
 85 |   text-align: center;
 86 |   font-size: 14px;
 87 |   line-height: 48px;
 88 | 
 89 |   .lan-dialog-btn {
 90 |     flex: 1;
 91 |     cursor: pointer;
 92 |     &.disable{cursor: no-drop;}
 93 |     &:last-child {
 94 |       color: var(--lan-dialog-button-active-color)
 95 |     }
 96 |   }
 97 | }
 98 | 
 99 | .lan-dialog {
100 |   border-radius: 12px;
101 |   overflow: hidden;
102 | }
103 | 
104 | .lan-dialogbound {
105 |   &-enter-from {
106 |     transform: translate3d(-50%, -50%, 0) scale(0.7);
107 |     opacity: 0;
108 |   }
109 | 
110 |   &-enter-active,
111 |   &-leave-active {
112 |     transition: all .3s;
113 |   }
114 | 
115 |   &-leave-active {
116 |     transform: translate3d(-50%, -50%, 0) scale(0.9);
117 |     opacity: 0;
118 |   }
119 | }


--------------------------------------------------------------------------------
/packages/button/button.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   defineComponent,
 3 |   PropType
 4 | } from "vue";
 5 | import {setIcon} from "../utils"
 6 | 
 7 | import * as icons from '../icons'
 8 | 
 9 | export type ButtonType = "primary" | "success" | "warning" | "danger" | "default"
10 | export type ButtonSize = "large" | "small" | "mini" | "normal"
11 | 
12 | const IconsTem: any = icons
13 | 
14 | export const ButtonProps = {
15 |   type: { default: "default", type: String as PropType<ButtonType> },
16 |   icon: { default: "", type: String },
17 |   size: { default: "normal", type: String as PropType<ButtonSize> },
18 |   text: { default: "", type: String },
19 |   bgColor: { default: "", type: String },
20 |   borderColor: { default: "", type: String },
21 |   color: { default: "", type: String },
22 |   disabled: { default: false, type: Boolean },
23 |   radius: { default: "", type: String },
24 |   width: { default: "", type: String },
25 |   style: { default() { return {} }, type: Object },
26 | }
27 | 
28 | export default defineComponent({
29 |   name: "lan-button",
30 |   props: ButtonProps,
31 |   emits: ['click'],
32 |   setup(props, { emit, slots }) {
33 |     const { type, size, disabled, radius, bgColor, borderColor, color, width, icon } = props
34 | 
35 |     const classname = `lan-button-${type} lan-button-size-${size} ${disabled ? "disabled" : ''}`
36 |     const style: any = {
37 |       ...props.style
38 |     }
39 |     if (radius) { style.borderRadius = radius }
40 |     if (bgColor) {
41 |       style["background"] = bgColor;
42 | 
43 |     }
44 |     if (color) {
45 |       style["color"] = color;
46 |     }
47 |     if (width) {
48 |       style["width"] = width;
49 |     }
50 | 
51 |     const afterStyle: any = {}
52 |     if (type === 'default') {
53 | 
54 |       if (radius) {
55 |         const unit = (radius.match(/[^0-9]/g) || []).join("")
56 |         const num = (radius.match(/\d/g) || []).join("")
57 |         afterStyle.borderRadius = `${Number(num) * 2}${unit}`
58 |       }
59 |       if (borderColor) {
60 |         afterStyle.borderColor = borderColor
61 |       }
62 |     }
63 | 
64 |     let iconTag: any = null
65 |     if (icon) {
66 |       iconTag = setIcon(icons,icon)
67 |     }
68 | 
69 |     const onClick = (event: MouseEvent) => {
70 |       emit('click', event);
71 |     }
72 | 
73 | 
74 |     return () => {
75 |       return (
76 |         <div class={`lan-button-style ${classname}`} style={style} onClick={onClick}>
77 |           {iconTag ? <iconTag class="lan-button-icon" /> : null}
78 |           <span class="lan-button-text">{slots.default ? slots.default() : props.text}</span>
79 |           {type === 'default' ? <i class="lan-button-after" style={afterStyle}></i> : null}
80 |         </div>
81 |       )
82 |     }
83 |   }
84 | })
85 | 


--------------------------------------------------------------------------------
/packages/utils/tools.ts:
--------------------------------------------------------------------------------
  1 | import { ref, Ref } from 'vue';
  2 | 
  3 | 
  4 | export function setIcon(IconsTem: any, IconN: string) {
  5 |   const iconName = IconN.replace(/-(\w)/g, (_, c) => c.toUpperCase());
  6 |   const IconName = iconName.charAt(0).toUpperCase() + iconName.substr(1, iconName.length - 1)
  7 |   return IconsTem[iconName] || IconsTem[IconName] || ""
  8 | }
  9 | 
 10 | export function isInteger(num: number) {
 11 |   return num % 1 === 0
 12 | }
 13 | 
 14 | 
 15 | export function calNum(num: number) {
 16 |   const BL = 1000
 17 |   let decimal = num * BL % BL;
 18 | 
 19 |   let isInteger = num * BL - decimal;
 20 | 
 21 |   decimal = decimal / BL;
 22 |   isInteger = isInteger / BL;
 23 |   return { decimal, isInteger }
 24 | }
 25 | 
 26 | 
 27 | export function rateCom(decimal: number) {
 28 |   decimal = decimal * 100;
 29 |   const n = Math.floor(decimal / 10) * 10;
 30 | 
 31 |   return n
 32 | }
 33 | 
 34 | export function deepclone(target: any) {
 35 |   target = target === undefined ? {} : target
 36 |   if (typeof target !== 'object' || typeof target == null) {
 37 |     return target
 38 |   }
 39 |   let ret: any | any[];
 40 |   if (target instanceof Array) {
 41 |     ret = []
 42 |   } else {
 43 |     ret = {}
 44 |   }
 45 | 
 46 |   for (const key in target) {
 47 |     if (target.hasOwnProperty(key)) {
 48 |       ret[key] = deepclone(target[key])
 49 |     }
 50 |   }
 51 |   return ret;
 52 | }
 53 | 
 54 | export function getZIndex() {
 55 |   const els: NodeListOf<Element> = document.querySelectorAll('[class^=lan-mask]')
 56 |   if (!els || !els.length) {
 57 |     return -1;
 58 |   }
 59 | 
 60 |   const zArr: number[] = [];
 61 |   els.forEach(item => {
 62 |     if (window.getComputedStyle(item).position != 'static') {
 63 |       zArr.push(parseInt(window.getComputedStyle(item).zIndex) || -1)
 64 |     }
 65 |   })
 66 |   const ret = Number(Math.max.apply(null, zArr) || 0)
 67 |   return ret > 500 ? ret : 501
 68 | }
 69 | 
 70 | 
 71 | export function scrollToDistance(toXDistance:number, toYDistance:number) {
 72 |   let disX = toXDistance - Number(document.documentElement && document.documentElement.scrollLeft);
 73 |   let disY = toYDistance - Number(document.documentElement && document.documentElement.scrollTop);
 74 | 
 75 |   animateScrollToTop()
 76 | 
 77 |   function animateScrollToTop() {
 78 | 
 79 |     disX = Math.abs(disX) > 1 ? disX - disX / 8 : 1;
 80 |     disY = Math.abs(disY) > 1 ? disY - disY / 8 : 1;
 81 | 
 82 |     const retX = toXDistance - disX
 83 |     const retY = toYDistance - disY
 84 | 
 85 |     if (Math.abs(disX) > 1 || Math.abs(disY) > 1) {
 86 |       window.requestAnimationFrame(animateScrollToTop);
 87 |       window.scrollTo(retX, retY);
 88 |     }
 89 |   }
 90 | }
 91 | 
 92 | 
 93 | 
 94 | 
 95 | 
 96 | 
 97 | 
 98 | 
 99 | 
100 | 
101 | 
102 | 
103 | 
104 | 
105 | 
106 | 
107 | 
108 | 
109 | 


--------------------------------------------------------------------------------
/packages/popup/popup.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   defineComponent,
 3 |   Transition,
 4 |   watch, ref, PropType
 5 | } from 'vue';
 6 | import { getZIndex } from '../utils';
 7 | 
 8 | export type PopupPosition = "center" | "top" | "bottom" | "left" | "right"
 9 | 
10 | export default defineComponent({
11 |   name: "lan-popup",
12 |   emits: [
13 |     'opened',
14 |     'closed',
15 |     'open',
16 |     'close',
17 |     'update:show',
18 |   ],
19 |   props: {
20 |     position: { Type: String as PropType<PopupPosition>, default: 'bottom' },
21 |     transition: { Type: String, default: '' },
22 |     transitionAppear: { type: Boolean, default: true },
23 |     show: { type: Boolean, default: false },
24 |     maskIsClick: { type: Boolean, default: true },
25 |     style: { type: Object, default: () => { return {} } },
26 |   },
27 | 
28 |   setup(props, { emit, attrs, slots }) {
29 |     const popupRef = ref<HTMLElement>();
30 |     watch(
31 |       () => props.show,
32 |       (show) => {
33 |         if (show) {
34 |           emit('open');
35 |         }
36 |         if (!show) {
37 |           emit('close');
38 |         }
39 |       }
40 |     );
41 | 
42 |     const onOpened = () => emit('opened');
43 |     const onClosed = () => emit('closed');
44 | 
45 |     const onCloseMask = () => {
46 |       if(!props.maskIsClick) return;
47 |       emit('update:show', false)
48 |     };
49 | 
50 |     const renderPopup = () => {
51 |       const name =
52 |         (position === 'center' || position === '') ? 'lan-popup-center' : `lan-popup-${position}`;
53 | 
54 |       return (
55 |         <div v-show={props.show} class={name} style={{...props.style,'z-index':getZIndex() + 2}} ref={popupRef}>
56 |           {slots.default?.()}
57 |         </div>
58 |       )
59 |     }
60 |     
61 |     const renderPopupMask = () => {
62 |       return (
63 |         <Transition name="lan-fade" appear={true}>
64 |           <div v-show={props.show} class="lan-mask-popup" style={{'z-index':getZIndex() + 1}} onClick={onCloseMask}> </div>
65 |         </Transition>
66 |       )
67 |     }
68 | 
69 |     const { position, transition, transitionAppear } = props;
70 | 
71 |     const name =
72 |       (position === 'center' || position === '') ? 'lan-fade' : `lan-slide-${position === 'top' ? 'down' : position === 'bottom' ? 'up' : position}`;
73 | 
74 | 
75 |     const renderTransition = () => {
76 |       return (
77 |         <div>
78 |           <Transition
79 |             v-slots={{ default: renderPopup }}
80 |             name={transition || name}
81 |             appear={transitionAppear}
82 |             onAfterEnter={onOpened}
83 |             onAfterLeave={onClosed}
84 |           />
85 |         </div>
86 |       )
87 |     }
88 | 
89 |     return () => {
90 |       return (
91 |         <>
92 |           {renderTransition()}
93 |           {renderPopupMask()}
94 |         </>
95 |       );
96 |     };
97 |   },
98 | });
99 | 


--------------------------------------------------------------------------------
/packages/picker/picker.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   defineComponent,
 3 |   PropType, watch
 4 | } from "vue";
 5 | 
 6 | import Columns, { ColType } from "./columns"
 7 | 
 8 | export type PickerColumnsViod = {
 9 |   value: string;
10 |   defaultIndex: number | string;
11 | }
12 | 
13 | export type PickerType = "selector" | "multiSelector" | "linkage";
14 | export type PickerMode = "selector" | "multiSelector";
15 | 
16 | export const PcikerProps = {
17 |   className: { type: String, default: "" },
18 |   title: { type: String, default: "请选择" },
19 |   type: { type: String as PropType<PickerType>, default: "base" },
20 | 
21 |   mode: { type: String as PropType<PickerMode>, default: 'selector' },
22 |   value: { default: 2 },
23 |   range: { type: Array as PropType<ColType[]>, default: () => { return [] } },
24 |   rangeKey: { type: String, default: "name" },
25 | }
26 | 
27 | export default defineComponent({
28 |   name: "lan-picker",
29 |   props: PcikerProps,
30 |   emits: ['confirm', 'cancel', 'change'],
31 |   setup(props, { emit, slots }) {
32 |     let retBaseData: any = typeof props.value !== 'object' ? props.value : props.value;
33 |     const retMultiData: any = typeof props.value !== 'object' ? props.value : props.value;
34 | 
35 |     const onEnter = () => {
36 |       if (props.mode === 'selector') {
37 |         emit('confirm', retBaseData)
38 |       }
39 |       if (props.mode === 'multiSelector') {
40 |         emit('confirm', retMultiData)
41 |       }
42 |     }
43 |     const onCancel = () => {
44 |       if (props.mode === 'selector') {
45 |         emit('cancel', retBaseData)
46 |       }
47 |       if (props.mode === 'multiSelector') {
48 |         emit('cancel', retMultiData)
49 |       }
50 |     }
51 | 
52 | 
53 |     const onChange = (e: number | string, index: number) => {
54 |       if (props.mode === 'selector') {
55 |         retBaseData = e;
56 |         emit('change', e)
57 |       } else if (props.mode === 'multiSelector') {
58 |         retMultiData[index] = e;
59 |         emit('change', retMultiData)
60 |       }
61 |     }
62 | 
63 |     return () => {
64 |       return (
65 |         <div class={`lan-pciker-container ${props.className}`}>
66 |           <div class="lan-picker-title">
67 |             <span class="lan-picker-title-cancel" onClick={onCancel}>取消</span>
68 |             <span class="lan-picker-title-con">{props.title}</span>
69 |             <span class="lan-picker-title-enter" onClick={onEnter}>确定</span>
70 |           </div>
71 |           <div class="lan-pciker-columns">
72 | 
73 |             {
74 |               props.mode === 'selector' ?
75 |                 <Columns
76 |                   columns={props.range}
77 |                   defaultIndex={props.value}
78 |                   rangeKey={props.rangeKey}
79 |                   onChange={(e: number | string) => { onChange(e, 0) }} /> :
80 | 
81 |                 null
82 |             }
83 |             {props.mode === 'multiSelector' ?
84 |               (props.range as ColType[]).map((item: any, index: number) => (
85 |                 <Columns
86 |                   columns={item}
87 |                   defaultIndex={(props.value as any)[index]}
88 |                   rangeKey={props.rangeKey}
89 |                   key={index}
90 |                   onChange={(e: number | string) => { onChange(e, index) }}
91 |                 />
92 |               )) : null}
93 |           </div>
94 |         </div>
95 |       );
96 |     }
97 |   }
98 | })
99 | 


--------------------------------------------------------------------------------
/packages/toast/toast.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   defineComponent, onMounted, PropType, reactive, Transition
  3 | } from 'vue';
  4 | import { ToastAction } from "./types"
  5 | import Icon from '../icons';
  6 | import { getZIndex } from '../utils';
  7 | 
  8 | const ToastPropsOptions = {
  9 |   type: String, // 'loading' 'success' 'fail' 'html'
 10 |   width: [String, Number],
 11 |   allowHtml: Boolean,
 12 |   message: String,
 13 |   duration: Number,
 14 |   shade: Boolean,
 15 |   shadeClassName: String,
 16 |   className: String,
 17 |   position: String, // 'top' 'bottom'
 18 |   onOpened: Function as PropType<(action?: ToastAction) => void | Boolean>,
 19 |   onClose: Function as PropType<(action?: ToastAction) => void | Boolean>,
 20 | }
 21 | 
 22 | export default defineComponent({
 23 |   name: "lan-toast",
 24 |   props: ToastPropsOptions,
 25 | 
 26 |   setup(props, { emit, attrs, slots }) {
 27 |     const state = reactive({
 28 |       show: true,
 29 |     })
 30 | 
 31 |     onMounted(() => {
 32 |       props.onOpened?.('open')
 33 |       if (props.type === 'text' || props.type === 'success' || props.type === 'fail') {
 34 |         setTimeout(() => {
 35 |           state.show = false;
 36 |           props.onClose?.('close')
 37 |         }, props.duration)
 38 |       }
 39 |     })
 40 | 
 41 |     const loadingRender = () => {
 42 |       const ren = props.allowHtml ? <div class="lan-toast-content" v-html={props.message}></div> : <div class="lan-toast-content">{props.message}</div>;
 43 |       return (
 44 |         <>
 45 |           <div class="lan-toast-icon">
 46 |             <svg class="toastcircular" viewBox="25 25 50 50"><circle class="path" cx="50" cy="50" r="20" fill="none"></circle>
 47 |             </svg>
 48 |           </div>
 49 |           {ren}
 50 |         </>
 51 |       )
 52 |     }
 53 | 
 54 |     const successRender = () => {
 55 |       return <Icon name="Select" class="successfail-svg"/>
 56 |     }
 57 | 
 58 |     const failRender = () => {
 59 |       return <Icon name="CloseBold" class="successfail-svg" />
 60 |     }
 61 | 
 62 |     const renderTransition = () => {
 63 |       let Ren = props.allowHtml ? <div class="lan-toast-content" v-html={props.message}></div> : <div class="lan-toast-content">{props.message}</div>
 64 |       if (props.type === 'loading') {
 65 |         Ren = loadingRender()
 66 |       }
 67 | 
 68 |       const successRen = props.type === 'success' ? <div class="lan-toast-icon">{successRender()}</div> : ""
 69 |       const failRen = props.type === 'fail' ? <div class="lan-toast-icon">{failRender()}</div> : ""
 70 |       return (
 71 |         <Transition
 72 |           name="lan-fade"
 73 |           appear={true}
 74 |         >
 75 |           <div
 76 |             style={{ 'width': typeof props.width === 'string' ? props.width : `${props.width}px`,'z-index':getZIndex() + 2 }}
 77 |             class={`lan-toast-center ${props.className} ${props.position} lan-toast-${props.type}-wraper`} v-show={state.show}>
 78 |             {successRen}
 79 |             {failRen}
 80 |             {Ren}
 81 |           </div>
 82 |         </Transition>
 83 |       )
 84 |     }
 85 | 
 86 |     const renderToastMask = () => {
 87 |       return (
 88 |         <Transition name="lan-fade" appear={true}>
 89 |           <div v-show={state.show} class={`lan-mask-toast ${props.shadeClassName}`} style={{'z-index':getZIndex() + 1}}> </div>
 90 |         </Transition>
 91 |       )
 92 |     }
 93 | 
 94 |     return () => {
 95 |       return (
 96 |         <>
 97 |           {renderTransition()}
 98 |           {props.shade ? renderToastMask() : ''}
 99 |         </>
100 |       );
101 |     };
102 |   },
103 | });
104 | 


--------------------------------------------------------------------------------
/packages/button/button.less:
--------------------------------------------------------------------------------
  1 | @import '../style/base.less';
  2 | 
  3 | @corfff: #fff;
  4 | @cor333: #333;
  5 | @font14: 14px;
  6 | 
  7 | :root {
  8 |   --lan-button-primary-bg: @primary;
  9 |   --lan-button-success-bg: @success;
 10 |   --lan-button-warning-bg: @warning;
 11 |   --lan-button-danger-bg: @danger;
 12 |   --lan-button-default-bg: @default;
 13 | 
 14 |   --lan-button-primary-color: @corfff;
 15 |   --lan-button-success-color: @corfff;
 16 |   --lan-button-warning-color: @corfff;
 17 |   --lan-button-danger-color: @corfff;
 18 |   --lan-button-default-color: @cor333;
 19 | 
 20 |   --lan-button-default-border-color: #d8d8d8;
 21 | 
 22 |   --lan-button-border-radius: 2px;
 23 |   --lan-button-padding-tb: 2px;
 24 |   --lan-button-padding-lr: 15px;
 25 | 
 26 |   --lan-button-size-large: 32px;
 27 |   --lan-button-size-normal: 30px;
 28 |   --lan-button-size-small: 28px;
 29 |   --lan-button-size-mini: 24px;
 30 | 
 31 |   --lan-button-margin-r: 10px;
 32 | 
 33 |   --lan-button-icon-r: 5px;
 34 |   --lan-button-icon-size: 17px;
 35 | }
 36 | 
 37 | .lan-button-style {
 38 |   margin-bottom: 10px;box-shadow: 0 0 5px #ccc;
 39 |   padding: var(--lan-button-padding-tb) var(--lan-button-padding-lr);
 40 |   color: var(--lan-button-default-color);
 41 |   border-radius: var(--lan-button-border-radius);
 42 |   text-align: center;
 43 |   font-size: @font14;
 44 |   display: inline-block;
 45 |   // border: 0.5px solid var(--lan-button-default-border-color);
 46 |   background-color: var(--lan-button-default-bg);
 47 |   line-height: var(--lan-button-size-normal);
 48 |   cursor: pointer;
 49 |   min-width: 40px;
 50 |   margin-right: var(--lan-button-margin-r);
 51 |   position: relative;
 52 |   vertical-align: middle;
 53 | 
 54 |   &:last-child {
 55 |     margin-right: 0;
 56 |   }
 57 | 
 58 |   .lan-button-after {
 59 |     position: absolute;
 60 |     left: 0;
 61 |     top: 0;
 62 |     width: 200%;
 63 |     height: 1px;
 64 |     border: 1px solid var(--lan-button-default-border-color);
 65 |     border-radius: var(--lan-button-border-radius);
 66 |     color: var(--lan-button-default-border-color);
 67 |     height: 200%;
 68 |     transform-origin: left top;
 69 |     transform: scale(0.5);
 70 |   }
 71 | 
 72 |   &.lan-button-size-large {
 73 |     line-height: var(--lan-button-size-large);
 74 |   }
 75 | 
 76 |   &.lan-button-size-small {
 77 |     line-height: var(--lan-button-size-small);
 78 |   }
 79 | 
 80 |   &.lan-button-size-mini {
 81 |     line-height: var(--lan-button-size-mini);
 82 |   }
 83 | 
 84 |   &.lan-button-primary {
 85 |     background-color: var(--lan-button-primary-bg);
 86 |     color: var(--lan-button-primary-color);
 87 |     border-color: var(--lan-button-primary-bg);
 88 |   }
 89 | 
 90 |   &.lan-button-success {
 91 |     background-color: var(--lan-button-success-bg);
 92 |     color: var(--lan-button-success-color);
 93 |     border-color: var(--lan-button-success-bg);
 94 |   }
 95 | 
 96 |   &.lan-button-warning {
 97 |     background-color: var(--lan-button-warning-bg);
 98 |     color: var(--lan-button-warning-color);
 99 |     border-color: var(--lan-button-warning-bg);
100 |   }
101 | 
102 |   &.lan-button-danger {
103 |     background-color: var(--lan-button-danger-bg);
104 |     color: var(--lan-button-danger-color);
105 |     border-color: var(--lan-button-danger-bg);
106 |   }
107 | 
108 |   &:hover {
109 |     opacity: .7;
110 |   }
111 | 
112 |   &:active {
113 |     opacity: .9;
114 |   }
115 | 
116 |   &.disabled {
117 |     opacity: .8;
118 |     cursor: no-drop;
119 |   }
120 | 
121 |   .lan-button-icon {
122 |     vertical-align: middle;
123 |     width: var(--lan-button-icon-size);
124 |     margin-right: var(--lan-button-icon-r)
125 |   }
126 | 
127 |   .lan-button-text{vertical-align: middle;}
128 | 
129 | 
130 | }


--------------------------------------------------------------------------------
/packages/cell/cell.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   defineComponent,
  3 |   Fragment,
  4 |   PropType
  5 | } from "vue";
  6 | import {setIcon} from "../utils"
  7 | import * as icons from '../icons'
  8 | 
  9 | export type CelltitVerAlignType = "top" | "middle" | "bottom"
 10 | export type CelltypeType = "1" | "default"
 11 | export type CellvalueAlignType = "left" | "center" | "right"
 12 | 
 13 | 
 14 | export const CellProps = {
 15 |   type: { default: "default", type: String as PropType<CelltypeType> },
 16 |   title: { default: "", type: String },
 17 |   titleIcon: { default: "", type: String },
 18 |   titVerAlign: { default: "middle", type: String as PropType<CelltitVerAlignType> },
 19 |   titleWidth: { default: "", type: String },
 20 | 
 21 |   value: { default: "", type: String },
 22 |   valueIcon: { default: "", type: String },
 23 | 
 24 |   label: { default: "", type: String },
 25 | 
 26 |   alowHtml: { default: false, type: Boolean },
 27 |   border: { default: false, type: Boolean },
 28 |   isLink: { default: false, type: Boolean },
 29 |   required: { default: false, type: Boolean },
 30 |   style: { default() { return {} }, type: Object },
 31 | }
 32 | 
 33 | 
 34 | export default defineComponent({
 35 |   name: "lan-cell",
 36 |   props: CellProps,
 37 |   emits: ['click'],
 38 |   setup(props, { emit, slots }) {
 39 |     const { type, titleIcon, valueIcon, titleWidth } = props
 40 | 
 41 |     const titleStyle: any = {}
 42 |     if (props.titleWidth) { titleStyle["width"] = titleWidth }
 43 | 
 44 |     function onClick() {
 45 |       emit('click')
 46 |     }
 47 | 
 48 |     function titleIconRender() {
 49 |       let titIconTag: any = null
 50 |       if (titleIcon) { titIconTag = setIcon(icons,titleIcon) }
 51 | 
 52 |       return (
 53 |         <Fragment>
 54 |           {titIconTag ?
 55 |             <div class="lan-cell-tit-icon"><titIconTag class="lan-cell-icon" /></div>
 56 |             : null}
 57 |         </Fragment>
 58 |       )
 59 |     }
 60 | 
 61 |     function valueIconRender() {
 62 |       let valIconTag: any = null
 63 |       if (valueIcon) { valIconTag = setIcon(icons,valueIcon) }
 64 | 
 65 |       return (
 66 |         <Fragment>
 67 |           {valIconTag ?
 68 |             <div class="lan-cell-right-icon"><valIconTag class="lan-cell-icon" /></div>
 69 |             : null}
 70 |         </Fragment>
 71 |       )
 72 |     }
 73 | 
 74 |     function titleRender() {
 75 |       return (
 76 |         <Fragment>
 77 |           {props.title ?
 78 |             <div class={`lan-cell-title lan-cell-tit-ver-${props.titVerAlign}`} style={titleStyle}>{props.title}</div> : null
 79 |           }
 80 |         </Fragment>
 81 |       )
 82 |     }
 83 |     function valueRender() {
 84 |       return (
 85 |         <Fragment>
 86 |           {props.value ?
 87 |             props.alowHtml ?
 88 |               <div class="lan-cell-h4" v-html={props.value}></div> :
 89 |               <div class="lan-cell-h4">{props.value}</div> :
 90 |             null
 91 |           }
 92 |         </Fragment>
 93 |       )
 94 |     }
 95 |     function labelRender() {
 96 |       return (
 97 |         <Fragment>
 98 |           {props.label ?
 99 |             props.alowHtml ?
100 |               <div class="lan-cell-label" v-html={props.label}></div> :
101 |               <div class="lan-cell-label">{props.label}</div>
102 |             : null}
103 |         </Fragment>
104 |       )
105 |     }
106 | 
107 | 
108 |     return () => {
109 |       return <div class={`lan-cell-style ${props.border ? 'border' : ''} ${type === 'default' ? 'lan-cell-default' : ''}`}
110 |         style={props.style}
111 |         onClick={onClick}>
112 |         {titleIconRender()}
113 |         {titleRender()}
114 |         <div class="lan-cell-value">
115 |           {valueRender()}
116 | 
117 |           {labelRender()}
118 |         </div>
119 |         {valueIconRender()}
120 |       </div>
121 |     }
122 |   }
123 | })
124 | 


--------------------------------------------------------------------------------
/packages/slider/slider.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   defineComponent,
  3 |   Fragment,
  4 |   nextTick,
  5 |   onMounted,
  6 |   PropType,
  7 |   ref, watch
  8 | } from "vue";
  9 | import { setIcon } from "../utils"
 10 | import * as icons from '../icons'
 11 | import { Touch } from "../utils/touch"
 12 | 
 13 | const touch = new Touch();
 14 | 
 15 | export const SliderProps = {
 16 |   fillMaxValue: {
 17 |     type: Number,
 18 |     default: 1000,
 19 |   },
 20 |   fillMinValue: {
 21 |     type: Number,
 22 |     default: 1000,
 23 |   },
 24 |   min: {
 25 |     type: Number,
 26 |     default: 0,
 27 |   },
 28 |   max: {
 29 |     type: Number,
 30 |     default: 1000,
 31 |   },
 32 |   step: {
 33 |     type: Number,
 34 |     default: 50,
 35 |   },
 36 | }
 37 | 
 38 | 
 39 | export default defineComponent({
 40 |   name: "lan-slider",
 41 |   props: SliderProps,
 42 |   emits: ['down', 'move', 'up'],
 43 |   setup(props, { emit, slots }) {
 44 | 
 45 |     const sliderHeight = 30;
 46 |     let sliderBoxWidth = 0;
 47 |     let initXLeft = 0;
 48 |     let initRight = 0;
 49 | 
 50 |     const left = ref(0)
 51 |     const width = ref(100)
 52 | 
 53 |     // let percentage = 0;
 54 | 
 55 |     onMounted(() => {
 56 |       sliderBoxWidth = Number(document.querySelector('.lan-slider-container')?.getBoundingClientRect().width);
 57 |       // initWidth = sliderBoxWidth;
 58 |       // percentage = props.fillMaxValue / sliderBoxWidth;
 59 |     })
 60 | 
 61 | 
 62 |     const onTouchStart = (e: TouchEvent, type: string) => {
 63 |       touch.start(e)
 64 |       if (type === 'min') {
 65 |         left.value = initXLeft;
 66 |       }
 67 | 
 68 |       if (type === 'max') {
 69 |         width.value = sliderBoxWidth - left.value - initRight
 70 |       }
 71 | 
 72 |     }
 73 |     const onTouchMove = (e: TouchEvent, type: string) => {
 74 |       touch.move(e)
 75 | 
 76 |       if (left.value < 0 || left.value > sliderBoxWidth) return;
 77 |       if (width.value < 0 || (width.value + left.value) > sliderBoxWidth) return;
 78 | 
 79 | 
 80 |       if (type === 'min') {
 81 |         left.value = initXLeft + touch.deltaX;
 82 |       }
 83 | 
 84 |       const w = sliderBoxWidth - initRight - left.value
 85 |       width.value = w;
 86 | 
 87 | 
 88 |       if (type === 'max') {
 89 |         width.value = w + touch.deltaX;
 90 |       }
 91 |     }
 92 |     const onTouchEnd = (e: TouchEvent, type: string) => {
 93 |       left.value = left.value <= 0 ? 0 : left.value;
 94 |       left.value = left.value >= sliderBoxWidth ? sliderBoxWidth : left.value;
 95 |       width.value = width.value <= 0 ? 0 : width.value;
 96 |       width.value = (width.value + left.value) >= sliderBoxWidth ? sliderBoxWidth - left.value - initRight : width.value;
 97 | 
 98 | 
 99 |       initXLeft = left.value;
100 |       initRight = sliderBoxWidth - left.value - width.value
101 | 
102 | 
103 |     }
104 |     const onTouchCancel = (e: TouchEvent, type: string) => {
105 |       console.log('onTouchCancel');
106 | 
107 |     }
108 | 
109 |     return () => {
110 |       return <div class="lan-slider-container">
111 |         <div class="lan-slider-fill" style={{ left: `${left.value / sliderBoxWidth * 100}%`, width: `${width.value / sliderBoxWidth * 100}%` }}>
112 |           <div class="lan-slider-item-left"
113 |             onTouchstart={(e) => { onTouchStart(e, 'min') }}
114 |             onTouchmove={(e) => { onTouchMove(e, 'min') }}
115 |             onTouchend={(e) => { onTouchEnd(e, 'min') }}
116 |             onTouchcancel={(e) => { onTouchCancel(e, 'min') }}
117 |           ></div>
118 |           <div class="lan-slider-item-right"
119 |             onTouchstart={(e) => { onTouchStart(e, 'max') }}
120 |             onTouchmove={(e) => { onTouchMove(e, 'max') }}
121 |             onTouchend={(e) => { onTouchEnd(e, 'max') }}
122 |             onTouchcancel={(e) => { onTouchCancel(e, 'max') }}
123 |           ></div>
124 |         </div>
125 |       </div>
126 |     }
127 |   }
128 | })
129 | 


--------------------------------------------------------------------------------
/packages/style/animation.less:
--------------------------------------------------------------------------------
  1 | @import './var';
  2 | 
  3 | 
  4 | 
  5 | @keyframes lan-slide-height-enter {
  6 |   from {
  7 |     height: 0;
  8 |   }
  9 | }
 10 | @keyframes lan-slide-height-leave {
 11 |   to {
 12 |     height: 0;
 13 |   }
 14 | }
 15 | 
 16 | 
 17 | 
 18 | @keyframes lan-slide-up-enter {
 19 |   from {
 20 |     transform: translate3d(0, 100%, 0);
 21 |   }
 22 | }
 23 | 
 24 | @keyframes lan-slide-up-leave {
 25 |   to {
 26 |     transform: translate3d(0, 100%, 0);
 27 |   }
 28 | }
 29 | 
 30 | @keyframes lan-slide-down-enter {
 31 |   from {
 32 |     transform: translate3d(0, -100%, 0);
 33 |   }
 34 | }
 35 | 
 36 | @keyframes lan-slide-down-leave {
 37 |   to {
 38 |     transform: translate3d(0, -100%, 0);
 39 |   }
 40 | }
 41 | 
 42 | @keyframes lan-slide-left-enter {
 43 |   from {
 44 |     transform: translate3d(-100%, 0, 0);
 45 |   }
 46 | }
 47 | 
 48 | @keyframes lan-slide-left-leave {
 49 |   to {
 50 |     transform: translate3d(-100%, 0, 0);
 51 |   }
 52 | }
 53 | 
 54 | @keyframes lan-slide-right-enter {
 55 |   from {
 56 |     transform: translate3d(100%, 0, 0);
 57 |   }
 58 | }
 59 | 
 60 | @keyframes lan-slide-right-leave {
 61 |   to {
 62 |     transform: translate3d(100%, 0, 0);
 63 |   }
 64 | }
 65 | 
 66 | @keyframes lan-fade-in {
 67 |   from {
 68 |     opacity: 0;
 69 |   }
 70 | 
 71 |   to {
 72 |     opacity: 1;
 73 |   }
 74 | }
 75 | 
 76 | @keyframes lan-fade-out {
 77 |   from {
 78 |     opacity: 1;
 79 |   }
 80 | 
 81 |   to {
 82 |     opacity: 0;
 83 |   }
 84 | }
 85 | 
 86 | @keyframes lan-rotate {
 87 |   from {
 88 |     transform: rotate(0deg);
 89 |   }
 90 | 
 91 |   to {
 92 |     transform: rotate(360deg);
 93 |   }
 94 | }
 95 | 
 96 | .lan-fade {
 97 |   &-enter-active {
 98 |     animation: var(--lan-animation-duration-base) lan-fade-in both
 99 |       var(--lan-animation-timing-function-enter);
100 |   }
101 | 
102 |   &-leave-active {
103 |     animation: var(--lan-animation-duration-base) lan-fade-out both
104 |       var(--lan-animation-timing-function-leave);
105 |   }
106 | }
107 | 
108 | .lan-slide-height {
109 |   &-enter-active {
110 |     animation: lan-slide-height-enter var(--lan-animation-duration-base) both
111 |       var(--lan-animation-timing-function-enter);
112 |   }
113 | 
114 |   &-leave-active {
115 |     animation: lan-slide-height-leave var(--lan-animation-duration-base) both
116 |       var(--lan-animation-timing-function-leave);
117 |   }
118 | }
119 | 
120 | 
121 | .lan-slide-up {
122 |   &-enter-active {
123 |     animation: lan-slide-up-enter var(--lan-animation-duration-base) both
124 |       var(--lan-animation-timing-function-enter);
125 |   }
126 | 
127 |   &-leave-active {
128 |     animation: lan-slide-up-leave var(--lan-animation-duration-base) both
129 |       var(--lan-animation-timing-function-leave);
130 |   }
131 | }
132 | 
133 | .lan-slide-down {
134 |   &-enter-active {
135 |     animation: lan-slide-down-enter var(--lan-animation-duration-base) both
136 |       var(--lan-animation-timing-function-enter);
137 |   }
138 | 
139 |   &-leave-active {
140 |     animation: lan-slide-down-leave var(--lan-animation-duration-base) both
141 |       var(--lan-animation-timing-function-leave);
142 |   }
143 | }
144 | 
145 | .lan-slide-left {
146 |   &-enter-active {
147 |     animation: lan-slide-left-enter var(--lan-animation-duration-base) both
148 |       var(--lan-animation-timing-function-enter);
149 |   }
150 | 
151 |   &-leave-active {
152 |     animation: lan-slide-left-leave var(--lan-animation-duration-base) both
153 |       var(--lan-animation-timing-function-leave);
154 |   }
155 | }
156 | 
157 | .lan-slide-right {
158 |   &-enter-active {
159 |     animation: lan-slide-right-enter var(--lan-animation-duration-base) both
160 |       var(--lan-animation-timing-function-enter);
161 |   }
162 | 
163 |   &-leave-active {
164 |     animation: lan-slide-right-leave var(--lan-animation-duration-base) both
165 |       var(--lan-animation-timing-function-leave);
166 |   }
167 | }


--------------------------------------------------------------------------------
/packages/calendar/calendar.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   defineComponent, watch,
  3 | } from 'vue';
  4 | import moment from "moment";
  5 | import { getAllDate, DateObj, DateItem } from "./date"
  6 | 
  7 | export default defineComponent({
  8 |   name: "lan-calendar",
  9 |   props: {
 10 |     minDate: { Type: String, default: moment().format("YYYY-MM-DD") },
 11 |     maxDate: { Type: String, default: moment().add(1, 'months').format("YYYY-MM-DD") },
 12 |     defaultDate: { Type: [String, Array], default: moment().format("YYYY-MM-DD") },
 13 |     isShowSectionBg: { Type: Boolean, default: true },
 14 |     style: { type: Object, default: () => { return {} } },
 15 |     monthFormatter: { type: String, default: "YYYY年MM月" },
 16 |     dateFormatter: { type: String, default: "DD" },
 17 |     startWeek: { type: Number, default: 1 }, // 从周几开始1,2,3,4,5,6,0
 18 |     className: { type: String, default: "" },
 19 |   },
 20 |   emits: ['choose'],
 21 |   setup(props, { emit, attrs, slots }) {
 22 |     const calendarObj: DateObj = getAllDate(moment(props.minDate), moment(props.maxDate), props.startWeek)
 23 | 
 24 |     const dateChooseFn = (DateItem: DateItem) => {
 25 |       if (DateItem.pass || DateItem.future) { return; }
 26 |       emit('choose', moment(DateItem.date).format("YYYY-MM-DD"))
 27 |     }
 28 | 
 29 |     let chooseDatelist: string[] = [];
 30 | 
 31 |     watch(
 32 |       () => props.defaultDate,
 33 |       (val) => {
 34 |         chooseDatelist = [];
 35 |         const defaultDate = val;
 36 |         if (typeof defaultDate === 'object' && Array.isArray(defaultDate)) {
 37 |           if ((defaultDate as any[]).length === 2) {
 38 |             const diffnum = Math.abs(moment(defaultDate[0]).diff(moment(defaultDate[1]), 'days'))
 39 |             for (let i = 1; i < diffnum; i++) {
 40 |               const first = moment(defaultDate[0]).clone();
 41 |               chooseDatelist.push(first.add(i, 'days').format('YYYY-MM-DD'))
 42 |             }
 43 |           }
 44 |         }
 45 |       },
 46 |       { deep: true }
 47 |     )
 48 | 
 49 |     const renderDate = () => {
 50 |       const calendarRen = [];
 51 |       for (const key in calendarObj) {
 52 |         calendarRen.push(<div class="lan-calendar-month">{moment(calendarObj[key].month).format(props.monthFormatter)}</div>)
 53 | 
 54 |         if (calendarObj[key].date.length) {
 55 |           const cren: any = []
 56 | 
 57 |           calendarObj[key].date.forEach(item => {
 58 |             let hasDefault;
 59 | 
 60 |             if (typeof props.defaultDate === 'string') {
 61 |               hasDefault = moment(item.date).format("YYYY-MM-DD") === moment(props.defaultDate).format("YYYY-MM-DD")
 62 |             } else {
 63 |               hasDefault = (props.defaultDate as string[]).includes(moment(item.date).format("YYYY-MM-DD"))
 64 |             }
 65 | 
 66 |             let hasChoose = props.isShowSectionBg;
 67 |             if (props.isShowSectionBg) {
 68 |               hasChoose = (chooseDatelist as string[]).includes(moment(item.date).format("YYYY-MM-DD"))
 69 |             }
 70 | 
 71 |             cren.push(
 72 |               <div onClick={() => dateChooseFn(item)}
 73 |                 class={`lan-calendar-con-date 
 74 |               ${hasDefault ? 'lan-calendar-date-active' : ''} 
 75 |               ${item.pass || ''} ${item.future || ''} 
 76 |               ${hasChoose ? 'lan-calendar-date-choose' : ''}`}>
 77 |                 {item.date ? moment(item.date).format(props.dateFormatter) : ""}
 78 |               </div>
 79 |             )
 80 |           })
 81 |           calendarRen.push(<div class="lan-calendar-con">{...cren}</div>)
 82 |         }
 83 |       }
 84 |       return <>
 85 |         <div class="lan-calendar-con lan-calendar-week">
 86 |         <span class="lan-calendar-con-date" v-show={props.startWeek === 0}>日</span>
 87 |           <span class="lan-calendar-con-date">一</span>
 88 |           <span class="lan-calendar-con-date">二</span>
 89 |           <span class="lan-calendar-con-date">三</span>
 90 |           <span class="lan-calendar-con-date">四</span>
 91 |           <span class="lan-calendar-con-date">五</span>
 92 |           <span class="lan-calendar-con-date">六</span>
 93 |           <span class="lan-calendar-con-date" v-show={props.startWeek === 1}>日</span>
 94 | 
 95 |         </div>
 96 |         <div>{calendarRen}</div>
 97 |       </>
 98 |     }
 99 | 
100 |     return () => {
101 |       return (
102 |         <>
103 |           <div class={props.className} style={props.style}>{renderDate()}</div>
104 |         </>
105 |       );
106 |     };
107 |   },
108 | });


--------------------------------------------------------------------------------
/packages/dialog/doalog.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   defineComponent, PropType, reactive, Transition
  3 | } from 'vue';
  4 | import { getZIndex } from '../utils';
  5 | import { DialogAction } from "./types"
  6 | 
  7 | 
  8 | 
  9 | const DialogPropsOptions = {
 10 |   title: String,
 11 |   width: [String, Number],
 12 |   message: String,
 13 |   callback: Function as PropType<(action?: DialogAction) => void>,
 14 |   className: String,
 15 |   allowHtml: Boolean,
 16 |   lockScroll: Boolean,
 17 |   beforeClose: Function as PropType<(action?: DialogAction) => void | Boolean>,
 18 |   cancelButtonText: String,
 19 |   confirmButtonText: String,
 20 |   showCancelButton: Boolean,
 21 |   showConfirmButton: Boolean
 22 | }
 23 | 
 24 | export default defineComponent({
 25 |   name: "lan-dialog",
 26 |   emits: ['confirm', 'cancel', 'close'],
 27 |   props: DialogPropsOptions,
 28 | 
 29 |   setup(props, { emit, attrs, slots }) {
 30 |     console.log(props);
 31 | 
 32 |     const state = reactive({
 33 |       show: true,
 34 |       isloadconfirm: false,
 35 |       isloadcancel: false
 36 |     })
 37 | 
 38 |     const cancelFn = async () => {
 39 |       if(state.isloadconfirm) return
 40 |       state.isloadcancel = true;
 41 |       const isclose = await props.beforeClose?.('cancel')
 42 |       state.isloadcancel = false;
 43 |       if (isclose !== false) {
 44 |         props.callback?.('cancel');
 45 |         emit('cancel')
 46 |         state.show = false;
 47 |       }
 48 |     }
 49 | 
 50 |     const confirmFn = async () => {
 51 |       if(state.isloadcancel) return
 52 |       state.isloadconfirm = true;
 53 |       const isclose = await props.beforeClose?.('confirm')
 54 |       state.isloadconfirm = false;
 55 | 
 56 | 
 57 |       if (isclose !== false) {
 58 |         props.callback?.('confirm');
 59 |         emit('confirm')
 60 |         state.show = false;
 61 |       }
 62 |     }
 63 | 
 64 |     const loadingRender = (type?: string) => {
 65 |       if(type) return `<svg class="circular" viewBox="25 25 50 50"><circle class="path" cx="50" cy="50" r="20" fill="none"></circle></svg>`
 66 |       return <svg class="circular" viewBox="25 25 50 50"><circle class="path" cx="50" cy="50" r="20" fill="none"></circle></svg>
 67 |     }
 68 | 
 69 |     const renderTransition = () => {
 70 |       if (props.allowHtml) {
 71 |         return (
 72 |           <Transition
 73 |             name="lan-dialogbound"
 74 |             appear={true}
 75 |           >
 76 |             <div
 77 |               style={{ 'width': typeof props.width === 'string' ? props.width : `${props.width}px`,'z-index':getZIndex() + 2 }}
 78 |               class={`lan-dialog lan-dialog-center ${props.className}`}
 79 |               v-show={state.show}>
 80 |               <div class="lan-dialog-title" v-html={props.title}></div>
 81 |               <div class="lan-dialog-content" v-html={props.message}></div>
 82 |               <div class="lan-dialog-buttons" v-show={props.showConfirmButton || props.showCancelButton}>
 83 |                 <span class={`lan-dialog-btn ${state.isloadconfirm || state.isloadcancel?'disable':'' }`}
 84 |                   v-show={props.showCancelButton}
 85 |                   onClick={cancelFn}
 86 |                   v-html={state.isloadcancel ? loadingRender('string') : props.cancelButtonText}></span>
 87 |                 <span class={`lan-dialog-btn ${state.isloadconfirm || state.isloadcancel?'disable':'' }`}
 88 |                   v-show={props.showConfirmButton}
 89 |                   onClick={confirmFn}
 90 |                   v-html={state.isloadconfirm ? loadingRender('string') : props.confirmButtonText}></span>
 91 |               </div>
 92 |             </div>
 93 |           </Transition>
 94 |         )
 95 |       }
 96 |       return (
 97 |         <Transition
 98 |           name="lan-dialogbound"
 99 |           appear={true}
100 |         >
101 |           <div
102 |             style={{ 'width': typeof props.width === 'string' ? props.width : `${props.width}px`,'z-index':getZIndex() + 2 }}
103 |             class={`lan-dialog lan-dialog-center ${props.className}`} v-show={state.show}>
104 |             <div class="lan-dialog-title">{props.title}</div>
105 |             <div class="lan-dialog-content">{props.message}</div>
106 |             <div class="lan-dialog-buttons" v-show={props.showConfirmButton || props.showCancelButton}>
107 |               <span class={`lan-dialog-btn ${state.isloadconfirm || state.isloadcancel?'disable':'' }`}
108 |                 v-show={props.showCancelButton}
109 |                 onClick={cancelFn}>{state.isloadcancel ? loadingRender() : props.cancelButtonText}</span>
110 |               <span class={`lan-dialog-btn ${state.isloadconfirm || state.isloadcancel?'disable':'' }`}
111 |                 v-show={props.showConfirmButton}
112 |                 onClick={confirmFn}>{state.isloadconfirm ? loadingRender() : props.confirmButtonText}</span>
113 |             </div>
114 |           </div>
115 |         </Transition>
116 |       )
117 |     }
118 | 
119 |     const renderDialogMask = () => {
120 |       return (
121 |         <Transition name="lan-fade" appear={true}>
122 |           <div v-show={state.show} class="lan-mask-dialog" style={{'z-index':getZIndex() + 1}}> </div>
123 |         </Transition>
124 |       )
125 |     }
126 | 
127 |     return () => {
128 |       return (
129 |         <>
130 |           {renderTransition()}
131 |           {renderDialogMask()}
132 |         </>
133 |       );
134 |     };
135 |   },
136 | });
137 | 


--------------------------------------------------------------------------------
/packages/picker/columns.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   computed,
  3 |   defineComponent,
  4 |   nextTick,
  5 |   ref, unref, Ref, PropType
  6 | } from "vue";
  7 | import { Touch } from "../utils/touch"
  8 | const touch = new Touch();
  9 | 
 10 | export type ColType = {
 11 |   [key: string]: any
 12 | }
 13 | export type columnsListType = { defaultIndex: number; list: ColType }
 14 | export const ColumnsProps = {
 15 |   columns: { type: Array as PropType<ColType[]>, default: [] },
 16 |   defaultIndex: { type: [Number, String], default: 2 },
 17 |   rangeKey: { type: String, default: "name" },
 18 | 
 19 |   onChange: {
 20 |     type: Function, default() {
 21 |       return 'Default function'
 22 |     }
 23 |   },
 24 | }
 25 | 
 26 | export default defineComponent({
 27 |   name: "lan-columns",
 28 |   props: ColumnsProps,
 29 |   setup(props, { emit, slots }) {
 30 |     const columnWraperRef = ref<HTMLElement>();
 31 |     const columnConRef = ref<HTMLElement>();
 32 |     const columnRef = ref<HTMLElement>();
 33 |     const columnWraperH = 175;
 34 |     const columnH = 35;
 35 |     const columnConH = columnH * props.columns.length;
 36 | 
 37 |     let disY = 0;
 38 |     let isTouchend = false;
 39 | 
 40 |     const deltaY = ref(0)
 41 | 
 42 |     const TODISTANCE = 30; // 距离上下的拉扯距离
 43 | 
 44 |     let moveMinValue = 0
 45 |     let moveMaxValue = 0
 46 | 
 47 |     let defaultIndex = props.defaultIndex;
 48 |     let zoomIndex = props.defaultIndex;
 49 | 
 50 |     let deltaYTime = 0;
 51 |     let deltaDistance = 0;
 52 |     let MoveY = 0;
 53 | 
 54 |     
 55 |     const initH = () => {
 56 |       // columnWraperH = columnWraperRef.value?.getBoundingClientRect().height || 0;
 57 |       // columnConH = columnConRef.value?.getBoundingClientRect().height || 0;
 58 |       // columnH = columnRef.value?.getBoundingClientRect().height || 0;
 59 |       moveMinValue = columnH * 2;
 60 |       moveMaxValue = -columnConH + columnWraperH - columnH * 2;
 61 |       deltaY.value = (2 - Number(props.defaultIndex)) * columnH;
 62 |     }
 63 | 
 64 | 
 65 |     const columnsList = computed(() => {
 66 |       nextTick(() => { initH() })
 67 | 
 68 |       return Array(props.columns.length).fill("").map((_, index) => {
 69 |         return {
 70 |           defaultIndex: index,
 71 |           list: props.columns[index]
 72 |         } as columnsListType
 73 |       })
 74 |     })
 75 | 
 76 |     const onTouchStart = (e: any) => {
 77 |       touch.start(e)
 78 |       disY = deltaY.value;
 79 | 
 80 |       isTouchend = false;
 81 |       deltaYTime = Date.now()
 82 |       deltaDistance = 0;
 83 |     }
 84 |     const onTouchMove = (e: any) => {
 85 |       if (deltaY.value > moveMinValue + TODISTANCE || deltaY.value < moveMaxValue - TODISTANCE) {
 86 |         return
 87 |       }
 88 |       touch.move(e)
 89 |       deltaY.value = disY + touch.deltaY;
 90 |       MoveY = e.touches[0].clientY
 91 |       const now = Date.now(); // 滑动的过程中,如果超过200毫秒就重置deltaDistance,deltaDistance越小,滑动的越快.
 92 |       if (now - deltaYTime > 200) {
 93 |         deltaYTime = now;
 94 |         deltaDistance = e.touches[0].clientY;
 95 |       }
 96 |       zoomIndex = Math.round(Math.abs(deltaY.value / columnH - 2))
 97 |     }
 98 |     function onTouchEnd(e: any) {
 99 |       const speed = Math.abs(MoveY - deltaDistance) / (Date.now() - deltaYTime) || 0
100 |       deltaY.value = disY + (touch.deltaY) * (speed > 2 ? Math.floor(speed) : 1);
101 | 
102 |       if (deltaY.value > moveMinValue) {
103 |         deltaY.value = moveMinValue;
104 |         setIndex()
105 |         changeEmit()
106 |         return
107 |       }
108 |       if (deltaY.value < moveMaxValue) {
109 |         deltaY.value = moveMaxValue;
110 |         setIndex()
111 |         changeEmit()
112 |         return
113 |       }
114 | 
115 |       isTouchend = true;
116 | 
117 |       deltaY.value = Math.round(deltaY.value / columnH) * columnH
118 |       setIndex()
119 |       changeEmit()
120 |     }
121 |     const changeEmit = () => {
122 |       props.onChange(defaultIndex)
123 |     }
124 | 
125 |     const setIndex = () => {
126 |       defaultIndex = Math.round(Math.abs(deltaY.value / columnH - 2))
127 |       zoomIndex = Math.round(Math.abs(deltaY.value / columnH - 2))
128 |     }
129 | 
130 |     function columnRender() {
131 |       const z = Number(zoomIndex)
132 | 
133 |       return columnsList.value.map((item: { defaultIndex: number; list: ColType }, index) => <div class={`lan-pciker-column-item`}
134 |         key={index}
135 |         target-index={index}
136 |         ref={columnRef}>
137 |         <span style={`transform: scale(${Number((1.2 - Math.abs(index - z) / 4).toFixed(2))});display:block;transition:.1s all`}>
138 |           {item.list[props.rangeKey]}
139 |         </span>
140 |       </div >)
141 |     }
142 | 
143 |     return () => {
144 |       const columnstyle = {
145 |         transform: `translate3d(0px, ${deltaY.value}px, 0px)`,
146 |         transitionDuration: `${isTouchend ? 500 : 0}ms`,
147 |         transitionProperty: `${isTouchend ? 'all' : 'none'}`,
148 |         transitionTimingFunction: 'ease-out'
149 |       }
150 | 
151 |       return (
152 |         <div>
153 |           <div class="lan-pciker-column"
154 |             ref={columnWraperRef}
155 |             onTouchstart={onTouchStart}
156 |             onTouchmove={onTouchMove}
157 |             onTouchend={onTouchEnd}
158 |             onTouchcancel={onTouchEnd}
159 |           >
160 |             <div
161 |               ref={columnConRef}
162 |               style={columnstyle}>
163 |               {columnRender()}
164 |             </div>
165 |           </div>
166 |           <div class="van-picker-mask"></div>
167 |         </div>
168 |       );
169 |     }
170 |   }
171 | })
172 | 


--------------------------------------------------------------------------------
/packages/utils/vant-emulator.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable */
  2 | /**
  3 |  * Emulate touch event
  4 |  * Source：https://github.com/hammerjs/touchemulator
  5 |  */
  6 | 
  7 |  (function () {
  8 |   if (typeof window === 'undefined') {
  9 |     return;
 10 |   }
 11 |   var eventTarget;
 12 |   var supportTouch = 'ontouchstart' in window;
 13 | 
 14 |   // polyfills
 15 |   if (!document.createTouch) {
 16 |     document.createTouch = function (
 17 |       view,
 18 |       target,
 19 |       identifier,
 20 |       pageX,
 21 |       pageY,
 22 |       screenX,
 23 |       screenY
 24 |     ) {
 25 |       // auto set
 26 |       return new Touch(
 27 |         target,
 28 |         identifier,
 29 |         {
 30 |           pageX: pageX,
 31 |           pageY: pageY,
 32 |           screenX: screenX,
 33 |           screenY: screenY,
 34 |           clientX: pageX - window.pageXOffset,
 35 |           clientY: pageY - window.pageYOffset,
 36 |         },
 37 |         0,
 38 |         0
 39 |       );
 40 |     };
 41 |   }
 42 | 
 43 |   if (!document.createTouchList) {
 44 |     document.createTouchList = function () {
 45 |       var touchList = TouchList();
 46 |       for (var i = 0; i < arguments.length; i++) {
 47 |         touchList[i] = arguments[i];
 48 |       }
 49 |       touchList.length = arguments.length;
 50 |       return touchList;
 51 |     };
 52 |   }
 53 | 
 54 |   if (!Element.prototype.matches) {
 55 |     Element.prototype.matches =
 56 |       Element.prototype.msMatchesSelector ||
 57 |       Element.prototype.webkitMatchesSelector;
 58 |   }
 59 | 
 60 |   if (!Element.prototype.closest) {
 61 |     Element.prototype.closest = function (s) {
 62 |       var el = this;
 63 | 
 64 |       do {
 65 |         if (el.matches(s)) return el;
 66 |         el = el.parentElement || el.parentNode;
 67 |       } while (el !== null && el.nodeType === 1);
 68 | 
 69 |       return null;
 70 |     };
 71 |   }
 72 | 
 73 |   /**
 74 |    * create an touch point
 75 |    * @constructor
 76 |    * @param target
 77 |    * @param identifier
 78 |    * @param pos
 79 |    * @param deltaX
 80 |    * @param deltaY
 81 |    * @returns {Object} touchPoint
 82 |    */
 83 | 
 84 |   var Touch = function Touch(target, identifier, pos, deltaX, deltaY) {
 85 |     deltaX = deltaX || 0;
 86 |     deltaY = deltaY || 0;
 87 | 
 88 |     this.identifier = identifier;
 89 |     this.target = target;
 90 |     this.clientX = pos.clientX + deltaX;
 91 |     this.clientY = pos.clientY + deltaY;
 92 |     this.screenX = pos.screenX + deltaX;
 93 |     this.screenY = pos.screenY + deltaY;
 94 |     this.pageX = pos.pageX + deltaX;
 95 |     this.pageY = pos.pageY + deltaY;
 96 |   };
 97 | 
 98 |   /**
 99 |    * create empty touchlist with the methods
100 |    * @constructor
101 |    * @returns touchList
102 |    */
103 |   function TouchList() {
104 |     var touchList = [];
105 | 
106 |     touchList['item'] = function (index) {
107 |       return this[index] || null;
108 |     };
109 | 
110 |     // specified by Mozilla
111 |     touchList['identifiedTouch'] = function (id) {
112 |       return this[id + 1] || null;
113 |     };
114 | 
115 |     return touchList;
116 |   }
117 | 
118 |   /**
119 |    * only trigger touches when the left mousebutton has been pressed
120 |    * @param touchType
121 |    * @returns {Function}
122 |    */
123 | 
124 |   var initiated = false;
125 |   function onMouse(touchType) {
126 |     return function (ev) {
127 |       // prevent mouse events
128 | 
129 |       if (ev.type === 'mousedown') {
130 |         initiated = true;
131 |       }
132 | 
133 |       if (ev.type === 'mouseup') {
134 |         initiated = false;
135 |       }
136 | 
137 |       if (ev.type === 'mousemove' && !initiated) {
138 |         return;
139 |       }
140 | 
141 |       // The EventTarget on which the touch point started when it was first placed on the surface,
142 |       // even if the touch point has since moved outside the interactive area of that element.
143 |       // also, when the target doesnt exist anymore, we update it
144 |       if (
145 |         ev.type === 'mousedown' ||
146 |         !eventTarget ||
147 |         (eventTarget && !eventTarget.dispatchEvent)
148 |       ) {
149 |         eventTarget = ev.target;
150 |       }
151 | 
152 |       if (eventTarget.closest('[data-no-touch-simulate]') == null) {
153 |         triggerTouch(touchType, ev);
154 |       }
155 | 
156 |       // reset
157 |       if (ev.type === 'mouseup') {
158 |         eventTarget = null;
159 |       }
160 |     };
161 |   }
162 | 
163 |   /**
164 |    * trigger a touch event
165 |    * @param eventName
166 |    * @param mouseEv
167 |    */
168 |   function triggerTouch(eventName, mouseEv) {
169 |     var touchEvent = document.createEvent('Event');
170 |     touchEvent.initEvent(eventName, true, true);
171 | 
172 |     touchEvent.altKey = mouseEv.altKey;
173 |     touchEvent.ctrlKey = mouseEv.ctrlKey;
174 |     touchEvent.metaKey = mouseEv.metaKey;
175 |     touchEvent.shiftKey = mouseEv.shiftKey;
176 | 
177 |     touchEvent.touches = getActiveTouches(mouseEv);
178 |     touchEvent.targetTouches = getActiveTouches(mouseEv);
179 |     touchEvent.changedTouches = createTouchList(mouseEv);
180 | 
181 |     eventTarget.dispatchEvent(touchEvent);
182 |   }
183 | 
184 |   /**
185 |    * create a touchList based on the mouse event
186 |    * @param mouseEv
187 |    * @returns {TouchList}
188 |    */
189 |   function createTouchList(mouseEv) {
190 |     var touchList = TouchList();
191 |     touchList.push(new Touch(eventTarget, 1, mouseEv, 0, 0));
192 |     return touchList;
193 |   }
194 | 
195 |   /**
196 |    * receive all active touches
197 |    * @param mouseEv
198 |    * @returns {TouchList}
199 |    */
200 |   function getActiveTouches(mouseEv) {
201 |     // empty list
202 |     if (mouseEv.type === 'mouseup') {
203 |       return TouchList();
204 |     }
205 |     return createTouchList(mouseEv);
206 |   }
207 | 
208 |   /**
209 |    * TouchEmulator initializer
210 |    */
211 |   function TouchEmulator() {
212 |     window.addEventListener('mousedown', onMouse('touchstart'), true);
213 |     window.addEventListener('mousemove', onMouse('touchmove'), true);
214 |     window.addEventListener('mouseup', onMouse('touchend'), true);
215 |   }
216 | 
217 |   // start distance when entering the multitouch mode
218 |   TouchEmulator['multiTouchOffset'] = 75;
219 | 
220 |   if (!supportTouch) {
221 |     new TouchEmulator();
222 |   }
223 | })();


--------------------------------------------------------------------------------
/packages/rate/rate.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   defineComponent,
  3 |   Fragment, Ref, ref
  4 | } from "vue";
  5 | import { calNum, rateCom } from "../utils"
  6 | import { Touch } from "../utils/touch"
  7 | 
  8 | import Icon from '../icons'
  9 | const touch = new Touch();
 10 | 
 11 | /**
 12 |  * 整数的话会向上取整， 2.4就是3
 13 |  */
 14 | 
 15 | 
 16 | export const RateProps = {
 17 |   modelValue: { default: 0, type: Number }, //
 18 |   count: { default: 5, type: Number }, //图标个数
 19 |   size: { default: "20px", type: String }, // 图标大小
 20 |   space: { default: "5px", type: String }, // 间距
 21 |   initColor: { default: "#999", type: String }, // 颜色-未选中
 22 |   color: { default: "#ff6600", type: String }, // 颜色-选中
 23 |   disabledColor: { default: "#c8c9cc", type: String }, // 禁用颜色
 24 |   initIcon: { default: "", type: String }, // 图标-未选中
 25 |   icon: { default: "star-filled", type: String }, // 图标-选中
 26 |   disabled: { default: false, type: Boolean }, // 是否禁用
 27 |   readonly: { default: false, type: Boolean }, // 只读状态,可以设置小数
 28 |   ismove: { default: false, type: Boolean }, // 只读状态,可以设置小数
 29 |   allowHalf: { default: false, type: Boolean }, // 半星
 30 |   decimal: { default: false, type: Boolean }, // 小数
 31 | }
 32 | 
 33 | 
 34 | export default defineComponent({
 35 |   name: "lan-score",
 36 |   props: RateProps,
 37 |   emits: ['click', 'update:modelValue'],
 38 |   setup(props, { emit, slots }) {
 39 |     const { disabled, disabledColor, color, initColor, readonly, icon, initIcon, size, ismove, decimal, allowHalf } = props;
 40 |     const isStar = icon.toUpperCase().indexOf('STAR') === 0;
 41 |     const isHeart = icon.toUpperCase().indexOf('heart') === 0;
 42 | 
 43 |     const untouch = disabled || readonly || !ismove;
 44 | 
 45 |     const _color = disabled ? disabledColor || color : color;
 46 | 
 47 |     let modelValue = props.modelValue;
 48 |     const count = [...Array(props.count).keys()]
 49 | 
 50 |     const RateRefs = count.map(item => ref<HTMLElement>());
 51 |     const RateSpanRefs = count.map(item => ref<HTMLElement>());
 52 | 
 53 |     const rateStyle = {
 54 |       marginRight: props.space,
 55 |     }
 56 | 
 57 |     let offsetXList: number[] = [];
 58 |     function updateRate(type?: string) {
 59 |       if (type === 'start') {
 60 |         offsetXList = [];
 61 |         const halfIconW = (RateSpanRefs[0].value as HTMLElement).getBoundingClientRect().width / 2
 62 | 
 63 |         RateRefs.reduce((preVal, curVal: Ref) => {
 64 |           const sum = preVal + curVal.value.getBoundingClientRect().width
 65 |           if (allowHalf) {
 66 | 
 67 |             offsetXList.push(preVal + halfIconW)
 68 |           }
 69 |           offsetXList.push(sum)
 70 |           return sum;
 71 |         }, 0)
 72 |       }
 73 | 
 74 |       const toParentX = (touch.initX - touch.parentOffsetX + touch.deltaX);
 75 | 
 76 |       for (let i = 0; i < offsetXList.length; i++) {
 77 |         const item = offsetXList[i]
 78 |         if (item > toParentX) {
 79 |           const nX = allowHalf ? (i + 1) / 2 : (i + 1)
 80 |           if (nX !== modelValue) {
 81 |             modelValue = nX
 82 |             emit('update:modelValue', modelValue)
 83 |           }
 84 |           break
 85 |         }
 86 |       }
 87 |     }
 88 | 
 89 |     // 整数
 90 |     function integerRender(index: number) {
 91 |       return <Fragment>
 92 |         {index < modelValue ?
 93 |           <Icon name={icon} color={_color} size={size} key={1} />
 94 |           :
 95 |           <Icon name={initIcon || icon} color={initColor} size={size} key={2} />
 96 |         }
 97 |       </Fragment>
 98 |     }
 99 | 
100 |     // 半星
101 |     function allowHalfRender(index: number) {
102 |       const isdecima = /\./g.test(`${modelValue}`)
103 | 
104 |       const { isInteger } = calNum(modelValue);
105 |       const cname = isStar ? 'star' : 'heart'
106 |       const rateICON = `${cname}50`
107 |       return <Fragment>
108 |         {index < isInteger ?
109 |           <Icon name={icon} color={_color} size={size} key={1} /> :
110 |           index <= isInteger && isdecima ?
111 |             <Icon name={rateICON} color={_color} size={size} key={2} /> :
112 |             <Icon name={initIcon || icon} color={initColor} size={size} key={3} />
113 |         }
114 |       </Fragment>
115 |     }
116 | 
117 |     // 小数
118 |     function decimalRender(index: number) {
119 |       const { decimal, isInteger } = calNum(modelValue);
120 |       const cname = isStar ? 'star' : 'heart'
121 |       const rateICON = `${cname}${rateCom(decimal)}`
122 |       return <Fragment>
123 |         {index < isInteger ?
124 |           <Icon name={icon} color={_color} size={size} /> :
125 |           index <= isInteger ?
126 |             <Icon name={rateICON} color={_color} size={size} /> :
127 |             <Icon name={initIcon || icon} color={initColor} size={size} />
128 |         }
129 |       </Fragment>
130 |     }
131 | 
132 |     function renderType(index: number) {
133 |       if (decimal) {
134 |         return decimalRender(index)
135 |       }
136 |       if (allowHalf) {
137 |         return allowHalfRender(index)
138 |       }
139 | 
140 |       return integerRender(index)
141 |     }
142 | 
143 |     const changeValue = (index: number) => {
144 |       if (disabled || readonly || ismove) return;
145 |       modelValue = index + 1;
146 |       emit('update:modelValue', modelValue)
147 |     }
148 | 
149 |     const onTouchStart = (event: TouchEvent) => {
150 |       if (untouch) return;
151 |       touch.start(event);
152 |       updateRate('start');
153 |     }
154 | 
155 |     // TODO由于ICON组件更改导致onTouchMove移动过程中不运行，在css里面加个after防止鼠标滑动到icon上面
156 |     function onTouchMove(event: any) {
157 |       if (untouch) return;
158 |       touch.move(event);
159 | 
160 |       if (!touch.isHorizontal()) return;
161 |       updateRate();
162 |     }
163 | 
164 | 
165 |     return () => {
166 |       return <div
167 |         class={`lan-rate-box ${disabled ? 'lan-rate-disabled' : ''}  ${readonly ? 'lan-rate-readonly' : ''} ${ismove ? 'lan-rate-move' : ''}`}
168 |         onTouchstart={onTouchStart}
169 |         onTouchmove={onTouchMove}
170 |       >
171 |         {
172 |           count.map((num, index) => <div class="lan-rate" target-index={index} onClick={() => { changeValue(index) }} key={index} ref={RateRefs[index]}>
173 |             <div class="lan-rate-span" style={rateStyle} ref={RateSpanRefs[index]}> {renderType(index)}</div>
174 |           </div>)
175 |         }
176 |       </div>
177 |     }
178 |   }
179 | })
180 | 
181 | 


--------------------------------------------------------------------------------
/packages/slider/slider copy.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   defineComponent,
  3 |   Fragment,
  4 |   nextTick,
  5 |   onMounted,
  6 |   PropType,
  7 |   ref, watch
  8 | } from "vue";
  9 | import { setIcon } from "../utils"
 10 | import * as icons from '../icons'
 11 | 
 12 | 
 13 | 
 14 | export const SliderProps = {
 15 |   fillValue: {
 16 |     type: Number,
 17 |     default: 1000,
 18 |   },
 19 |   minValue: {
 20 |     type: Number,
 21 |     default: 0,
 22 |   },
 23 |   maxValue: {
 24 |     type: Number,
 25 |     default: 1000,
 26 |   },
 27 |   step: {
 28 |     type: Number,
 29 |     default: 50,
 30 |   },
 31 | }
 32 | 
 33 | 
 34 | export default defineComponent({
 35 |   name: "lan-slider",
 36 |   props: SliderProps,
 37 |   emits: ['down', 'move', 'up'],
 38 |   setup(props, { emit, slots }) {
 39 | 
 40 |     const tipShow = ref(false)
 41 |     const tipLeft = ref(0)
 42 |     const minLeft = ref(0);
 43 |     const maxLeft = ref(0);
 44 | 
 45 |     const touchWidth = ref(25);
 46 | 
 47 |     let lineWidth = 0;
 48 |     let lineLeft = 0;
 49 | 
 50 |     const curValue = ref(0);
 51 |     const sMinValue = ref(0);
 52 |     const sMaxValue = ref(0);
 53 | 
 54 |     let percentage = 0;
 55 |     const multiple = 1;
 56 | 
 57 |     watch(() => props.minValue, (newVal, oldVal) => {
 58 |       sMinValue.value = props.minValue;
 59 |       minLeft.value = sMinValue.value / percentage;
 60 |     })
 61 |     watch(() => props.maxValue, (newVal, oldVal) => {
 62 |       sMaxValue.value = props.maxValue;
 63 |       maxLeft.value = sMaxValue.value / percentage;
 64 |     })
 65 | 
 66 |     onMounted(() => {
 67 |       nextTick(() => {
 68 |         // @ts-ignore
 69 |         touchWidth.value = document.querySelector('.fj-touch-left').getBoundingClientRect().width;
 70 |         // @ts-ignore
 71 |         const fjLine = document.querySelector('.fj-line').getBoundingClientRect()
 72 |         lineWidth = fjLine.width;
 73 |         lineLeft = fjLine.left
 74 |         maxLeft.value = lineWidth;
 75 |         percentage = (props.fillValue / lineWidth) * multiple;
 76 |         sMinValue.value = props.minValue;
 77 |         sMaxValue.value = props.maxValue;
 78 |         minLeft.value = sMinValue.value * multiple / percentage;
 79 |         maxLeft.value = sMaxValue.value * multiple / percentage;
 80 |       })
 81 |     })
 82 | 
 83 | 
 84 |     const touchstart = (e: TouchEvent, type: string) => {
 85 | 
 86 |       emit('down', {
 87 |         ...e,
 88 |         custom: {
 89 |           type,
 90 |           minValue: sMinValue.value,
 91 |           maxValue: sMaxValue.value
 92 |         }
 93 |       })
 94 |     }
 95 |     function touchmove(e: TouchEvent, type: string) {
 96 |       const disX = e.touches[0].clientX - lineLeft
 97 |       if (disX < 0 || disX > lineWidth) { return; }
 98 |       if (type === 'min') {
 99 |         minLeft.value = Math.floor(disX);
100 |         if (minLeft.value < 0) { minLeft.value = 0; return; }
101 |         if (maxLeft.value - minLeft.value <= touchWidth.value) { minLeft.value = maxLeft.value - touchWidth.value; return; }
102 |         curValue.value = Math.floor(minLeft.value * percentage / multiple);
103 |       }
104 | 
105 |       if (type === 'max') {
106 |         maxLeft.value = Math.ceil(disX);
107 |         if (maxLeft.value > lineWidth) { maxLeft.value = lineWidth; return; }
108 |         if (maxLeft.value - minLeft.value <= touchWidth.value) { maxLeft.value = minLeft.value + touchWidth.value; return; }
109 |         curValue.value = Math.round(maxLeft.value * percentage / multiple);
110 |       }
111 |       tipShow.value = true;
112 |       tipLeft.value = Math.round(curValue.value * multiple / percentage - 15);
113 |       emit('move', {
114 |         ...e,
115 |         custom: {
116 |           type,
117 |           minValue: sMinValue.value,
118 |           maxValue: sMaxValue.value,
119 |           curValue: curValue.value,
120 |         }
121 |       })
122 |     }
123 |     function touchend(e: TouchEvent, type: string) {
124 |       if (type === 'min') {
125 |         if (props.step === 1) {
126 |           sMinValue.value = curValue.value;
127 |         } else {
128 |           const stepnum = Math.round((minLeft.value * percentage / multiple) / props.step);
129 |           sMinValue.value = stepnum * props.step;
130 |           minLeft.value = sMinValue.value * multiple / percentage;
131 |         }
132 |       }
133 |       if (type === 'max') {
134 |         if (props.step === 1) {
135 |           sMaxValue.value = curValue.value;
136 |         } else {
137 |           const stepnum = Math.round((maxLeft.value * percentage / multiple) / props.step);
138 |           sMaxValue.value = stepnum * props.step;
139 |           if (props.fillValue - sMaxValue.value < props.step) { sMaxValue.value = props.fillValue }
140 |           maxLeft.value = sMaxValue.value * multiple / percentage;
141 |         }
142 |       }
143 |       tipShow.value = false;
144 |       emit('up', {
145 |         ...e,
146 |         custom: {
147 |           type,
148 |           minValue: sMinValue.value,
149 |           maxValue: sMaxValue.value
150 |         }
151 |       })
152 |     }
153 | 
154 | 
155 |     return () => {
156 |       const s = {}
157 |       return <div>
158 | 
159 |         <div class="fj-slider-box">
160 |           <div class="fj-slider">
161 |             <div class="fj-value">
162 |               <div class="fj-v-l">¥{sMinValue.value}</div>
163 |               <div class="fj-v-r">¥{sMaxValue.value}</div>
164 |             </div>
165 |             <div
166 |               class="fj-touch-left"
167 |               onTouchstart={(e: TouchEvent): void => { touchstart(e, 'min') }}
168 |               onTouchmove={(e: TouchEvent) => { touchmove(e, 'min') }}
169 |               onTouchend={(e: TouchEvent) => { touchend(e, 'min') }}
170 |               onTouchcancel={(e: TouchEvent) => { touchend(e, 'min') }}
171 |               style={{ left: `${minLeft.value}px` }}
172 |             ></div>
173 |             <div
174 |               class="fj-touch-right"
175 |               onTouchstart={(e: TouchEvent): void => { touchstart(e, 'max') }}
176 |               onTouchmove={(e: TouchEvent) => { touchmove(e, 'max') }}
177 |               onTouchend={(e: TouchEvent) => { touchend(e, 'max') }}
178 |               onTouchcancel={(e: TouchEvent) => { touchend(e, 'max') }}
179 |               style={{ left: `${maxLeft.value}px` }}
180 |             ></div>
181 |             <div class="tip" style="{left:`${tipLeft.value}px`,display: tipShow.value ? 'block' : 'none'}">{curValue.value}</div>
182 |             <div class="fj-line-pull" style="{left: `${minLeft.value + touchWidth.value/2}px`, width:`${maxLeft.value - minLeft.value}px`}"></div>
183 |             <div class="fj-line"></div>
184 |           </div>
185 |         </div>
186 |       </div>
187 |     }
188 |   }
189 | })
190 | 


--------------------------------------------------------------------------------
/packages/icons/heart.tsx:
--------------------------------------------------------------------------------
  1 | import { defineComponent } from "vue";
  2 | 
  3 | const heartLimProp = {
  4 |   color: { Type: String, default: "#000000" },
  5 |   defaultColor: { Type: String, default: "#ffffff" },
  6 | }
  7 | 
  8 | export const  heart = defineComponent({
  9 |   name: 'heart',
 10 |   setup(props) {
 11 |     return () => {
 12 |       return (
 13 |         <svg viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
 14 |           <path  fill="currentColor" stroke-width="7" d="M502.64519202218054,204.42177777141214 C708.3804600743439,-290.86683132034346 1514.4579857213062,204.42177777141214 502.64519202218054,841.221418032255 C-509.1676016769345,204.42177777141214 296.9099239700281,-290.86683132034346 502.64519202218054,204.42177777141214 z" stroke="#000"></path>
 15 |         </svg>
 16 |       )
 17 |     }
 18 |   }
 19 | })
 20 | 
 21 | 
 22 | 
 23 | export const  heart10 = defineComponent({
 24 |   name: 'heart10',
 25 |   setup(props) {
 26 |     return () => {
 27 |       return (
 28 |         <svg viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
 29 |           <path  fill="#999999" stroke-width="7" d="M502.64519202218054,204.42177777141214 C708.3804600743439,-290.86683132034346 1514.4579857213062,204.42177777141214 502.64519202218054,841.221418032255 C-509.1676016769345,204.42177777141214 296.9099239700281,-290.86683132034346 502.64519202218054,204.42177777141214 z" stroke="#000"></path>
 30 |           <path  fill="currentColor" stroke="#000" opacity="NaN" d="M100.42553,40.004420431137085 C100.42553,40.004420431137085 -8.14652,114.29056043113708 1.8535400000000002,241.43415043113708 C-19.57516,314.29171043113706 98.99695,491.4355804311371 98.99695,491.4355804311371 C98.99695,491.4355804311371 100.42553,40.004420431137085 100.42553,40.004420431137085 z" ></path>
 31 |         </svg>
 32 |       )
 33 |     }
 34 |   }
 35 | })
 36 | 
 37 | export const  heart20 = defineComponent({
 38 |   name: 'heart20',
 39 |   setup(props) {
 40 |     return () => {
 41 |       return (
 42 |         <svg viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
 43 |           <path  fill="#999999" stroke-width="7" d="M502.64519202218054,204.42177777141214 C708.3804600743439,-290.86683132034346 1514.4579857213062,204.42177777141214 502.64519202218054,841.221418032255 C-509.1676016769345,204.42177777141214 296.9099239700281,-290.86683132034346 502.64519202218054,204.42177777141214 z" stroke="#000"></path>
 44 | 
 45 |           <path  fill="currentColor" d="M 197.5689303736713 5.718534987983798 C 197.5689303736713 5.718534987983798 -9.54769199380711 22.554065817851576 4.340844767129254 272.1666988910467 C 2.334955702917512 409.9703730569879 194.76852248360242 602.8647641500336 194.76852248360242 602.8647641500336 C 194.76852248360242 602.8647641500336 197.5689303736713 5.718534987983798 197.5689303736713 5.718534987983798 z" stroke="#000"></path>
 46 | 
 47 |         </svg>
 48 |       )
 49 |     }
 50 |   }
 51 | })
 52 | export const  heart30 = defineComponent({
 53 |   name: 'heart30',
 54 |   setup(props) {
 55 |     return () => {
 56 |       return (
 57 |         <svg viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
 58 |           <path  fill="#999999" stroke-width="7" d="M502.64519202218054,204.42177777141214 C708.3804600743439,-290.86683132034346 1514.4579857213062,204.42177777141214 502.64519202218054,841.221418032255 C-509.1676016769345,204.42177777141214 296.9099239700281,-290.86683132034346 502.64519202218054,204.42177777141214 z" stroke="#000"></path>
 59 | 
 60 |           <path  fill="currentColor" d="M 300.426671119237 5.718534994543084 C 300.426671119237 5.718534994543084 -29.417831396357215 -63.35962884920186 4.6954751999707005 314.2374599474003 C 60.19727186303862 508.08551893431985 296.1407104536733 697.1510071197913 296.1407104536733 697.1510071197913 C 296.1407104536733 697.1510071197913 300.426671119237 5.718534994543084 300.426671119237 5.718534994543084 z" stroke="#000"></path>
 61 | 
 62 | 
 63 |         </svg>
 64 |       )
 65 |     }
 66 |   }
 67 | })
 68 | export const  heart40 = defineComponent({
 69 |   name: 'heart40',
 70 |   setup(props) {
 71 |     return () => {
 72 |       return (
 73 |         <svg viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
 74 |           <path  fill="#999999" stroke-width="7" d="M502.64519202218054,204.42177777141214 C708.3804600743439,-290.86683132034346 1514.4579857213062,204.42177777141214 502.64519202218054,841.221418032255 C-509.1676016769345,204.42177777141214 296.9099239700281,-290.86683132034346 502.64519202218054,204.42177777141214 z" stroke="#000"></path>
 75 | 
 76 |           <path  fill="currentColor" d="M 401.8650772861072 61.71891543544763 C 401.8650772861072 61.71891543544763 353.29337029496617 3.1471511226012296 227.57836396495458 0.2899918878282507 C -10.994432138590469 24.5758453833987 3.2913640352745688 233.14846952182722 3.2913640352745688 233.14846952182722 C -16.708750608136427 488.86422103401003 403.29365690349357 777.4373037460825 403.29365690349357 777.4373037460825 C 403.29365690349357 777.4373037460825 401.8650772861072 61.71891543544763 401.8650772861072 61.71891543544763 z"></path>
 77 | 
 78 |         </svg>
 79 |       )
 80 |     }
 81 |   }
 82 | })
 83 | export const  heart50 = defineComponent({
 84 |   name: 'heart50',
 85 |   setup(props) {
 86 |     return () => {
 87 |       return (
 88 |         <svg viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
 89 |           <path  fill="#999999" stroke-width="7" d="M502.64519202218054,204.42177777141214 C708.3804600743439,-290.86683132034346 1514.4579857213062,204.42177777141214 502.64519202218054,841.221418032255 C-509.1676016769345,204.42177777141214 296.9099239700281,-290.86683132034346 502.64519202218054,204.42177777141214 z" stroke="#000"></path>
 90 |           <path  fill="currentColor" d="M 500.86605347908426 202.0059718199389 C 500.86605347908426 202.0059718199389 436.5799706966919 -2.2809134663301336 223.72160770610384 2.004825385829349 C -7.708290310508687 24.8620992640133 -0.5653922235761686 249.14909919369336 -0.5653922235761686 249.14909919369336 C 46.57773515017823 590.579627749066 498.00889424431125 839.1524811743163 498.00889424431125 839.1524811743163 C 498.00889424431125 839.1524811743163 500.86605347908426 202.0059718199389 500.86605347908426 202.0059718199389 z"></path>
 91 |         </svg>
 92 |       )
 93 |     }
 94 |   }
 95 | })
 96 | export const  heart60 = defineComponent({
 97 |   name: 'heart60',
 98 |   setup(props) {
 99 |     return () => {
100 |       return (
101 |         <svg viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
102 |           <path  fill="#999999" stroke-width="7" d="M502.64519202218054,204.42177777141214 C708.3804600743439,-290.86683132034346 1514.4579857213062,204.42177777141214 502.64519202218054,841.221418032255 C-509.1676016769345,204.42177777141214 296.9099239700281,-290.86683132034346 502.64519202218054,204.42177777141214 z" stroke="#000"></path>
103 | 
104 |           <path  fill="currentColor"  stroke="#000" opacity="NaN" d="M 601.8482523958994 59.46254658996713 C 601.8482523958994 59.46254658996713 526.4635452511086 122.53954644581268 500.3096672620994 205.6165706461946 C 406.46339918389003 -22.076014199296644 217.23239961635346 2.53940037859428 217.23239961635346 2.53940037859428 C 217.23239961635346 2.53940037859428 6.462912293162162 16.38557107865799 1.8475220598076012 244.0781559241493 C -5.844794995783332 531.7708138032497 500.3096672620994 845.6173496713594 500.3096672620994 845.6173496713594 C 500.3096672620994 845.6173496713594 600.3097889847813 773.3095693488049 600.3097889847813 773.3095693488049 C 600.3097889847813 773.3095693488049 604.9251792181358 57.924083178848946 601.8482523958994 59.46254658996713 z"></path>
105 |         </svg>
106 |       )
107 |     }
108 |   }
109 | })
110 | export const  heart70 = defineComponent({
111 |   name: 'heart70',
112 |   setup(props) {
113 |     return () => {
114 |       return (
115 |         <svg viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
116 |           <path  fill="#999999" stroke-width="7" d="M502.64519202218054,204.42177777141214 C708.3804600743439,-290.86683132034346 1514.4579857213062,204.42177777141214 502.64519202218054,841.221418032255 C-509.1676016769345,204.42177777141214 296.9099239700281,-290.86683132034346 502.64519202218054,204.42177777141214 z" stroke="#000"></path>
117 | 
118 |           <path  fill="currentColor"  opacity="NaN" d="M 701.8483741185814 10.231717434185214 C 686.4637400073996 -2.0759898547602873 532.6173988955813 84.07796116785806 500.3096672620994 205.6165706461946 C 406.46339918389003 -22.076014199296644 217.23239961635346 2.53940037859428 217.23239961635346 2.53940037859428 C 217.23239961635346 2.53940037859428 6.462912293162162 16.38557107865799 1.8475220598076012 244.0781559241493 C -5.844794995783332 531.7708138032497 500.3096672620994 845.6173496713594 500.3096672620994 845.6173496713594 C 500.3096672620994 845.6173496713594 684.9252765962815 725.6172036041407 700.3099107074634 696.3863987928955 C 697.232983885227 701.0017890262501 698.7714472963448 8.69325402306697 701.8483741185814 10.231717434185214 z" stroke="#000"></path>
119 |         </svg>
120 |       )
121 |     }
122 |   }
123 | })
124 | export const  heart80 = defineComponent({
125 |   name: 'heart80',
126 |   setup(props) {
127 |     return () => {
128 |       return (
129 |         <svg viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
130 |           <path  fill="#999999" stroke-width="7" d="M502.64519202218054,204.42177777141214 C708.3804600743439,-290.86683132034346 1514.4579857213062,204.42177777141214 502.64519202218054,841.221418032255 C-509.1676016769345,204.42177777141214 296.9099239700281,-290.86683132034346 502.64519202218054,204.42177777141214 z" stroke="#000"></path>
131 | 
132 |           <path  fill="currentColor"  opacity="NaN" d="M 800.3100324301453 1.0009369674760935 C 666.463715662863 -18.999087377060285 552.6174232401177 70.23179046779438 500.3096672620994 205.6165706461946 C 406.46339918389003 -22.076014199296644 217.23239961635346 2.53940037859428 217.23239961635346 2.53940037859428 C 217.23239961635346 2.53940037859428 6.462912293162162 16.38557107865799 1.8475220598076012 244.0781559241493 C -5.844794995783332 531.7708138032497 500.3096672620994 845.6173496713594 500.3096672620994 845.6173496713594 C 500.3096672620994 845.6173496713594 775.6946178522544 651.7709598704678 800.3100324301453 607.1555209480407 C 798.7715690190271 607.1555209480408 797.2331056079087 1.0009369674760524 800.3100324301453 1.0009369674760935 z" stroke="#000"></path>
133 |         </svg>
134 |       )
135 |     }
136 |   }
137 | })
138 | export const  heart90 = defineComponent({
139 |   name: 'heart90',
140 |   setup(props) {
141 |     return () => {
142 |       return (
143 |         <svg viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
144 |           <path  fill="#999999" stroke-width="7" d="M502.64519202218054,204.42177777141214 C708.3804600743439,-290.86683132034346 1514.4579857213062,204.42177777141214 502.64519202218054,841.221418032255 C-509.1676016769345,204.42177777141214 296.9099239700281,-290.86683132034346 502.64519202218054,204.42177777141214 z" stroke="#000"></path>
145 | 
146 |           <path  fill="currentColor"  opacity="NaN" d="M 900.3101541528274 37.92405883431252 C 704.9253009408177 -66.69145312172401 552.6174232401177 70.23179046779438 500.3096672620994 205.6165706461946 C 406.46339918389003 -22.076014199296644 217.23239961635346 2.53940037859428 217.23239961635346 2.53940037859428 C 217.23239961635346 2.53940037859428 6.462912293162162 16.38557107865799 1.8475220598076012 244.0781559241493 C -5.844794995783332 531.7708138032497 500.3096672620994 845.6173496713594 500.3096672620994 845.6173496713594 C 500.3096672620994 845.6173496713594 846.4639347636909 611.7709111813949 903.3870809750637 491.77076511417687 C 900.3101541528275 496.38615534753166 900.3101541528272 34.8471320120761 900.3101541528274 37.92405883431252 z" stroke="#000"></path>
147 |         </svg>
148 |       )
149 |     }
150 |   }
151 | })
152 | export const  heartFilled = defineComponent({
153 |   name: 'heart-filled',
154 |   setup(props) {
155 |     return () => {
156 |       return (
157 |         <svg viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
158 |           <path  fill="currentColor" stroke-width="7" d="M502.64519,204.42178C708.38046,-290.86683 1514.45798,204.42178 502.64519,841.22142C-509.1676,204.42178 296.90992,-290.86683 502.64519,204.42178z"></path>
159 |         </svg>
160 |       )
161 |     }
162 |   }
163 | })
164 | 


--------------------------------------------------------------------------------
/packages/icons/star.tsx:
--------------------------------------------------------------------------------
  1 | import { defineComponent } from "vue";
  2 | 
  3 | export const star0 = defineComponent({
  4 |   name: 'star0',
  5 |    setup(props) {
  6 |     return () => {
  7 |       return (
  8 |         <svg viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
  9 |           <path fill="#999999" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path>
 10 |         </svg>
 11 |       )
 12 |     }
 13 |   }
 14 | })
 15 | 
 16 | 
 17 | 
 18 | export const star10 = defineComponent({
 19 |   name: 'star10',
 20 |    setup(props) {
 21 |     return () => {
 22 |       return (
 23 |         <svg viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
 24 |           <path fill="#999999" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path>
 25 |           <path fill="currentColor" stroke="#000" opacity="NaN" d="M 155.7778396930281 348.00007973777656 C 155.7778396930281 348.00007973777656 39.111162209221206 346.8889685236451 77.77778524443225 462.2222665954831 C 108.00005748537387 495.77787121726533 153.55561726476512 536.8889861401306 153.33334805330932 536.6667181865826 C 153.55561726476512 536.8889861401306 155.7778396930281 348.00007973777656 155.7778396930281 348.00007973777656 z" id="svg_3"></path>
 26 | 
 27 |        
 28 |         </svg>
 29 |       )
 30 |     }
 31 |   }
 32 | })
 33 | 
 34 | export const star20 = defineComponent({
 35 |   name: 'star20',
 36 |    setup(props) {
 37 |     return () => {
 38 |       return (
 39 |         <svg viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
 40 |           <path fill="#999999" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path>
 41 |           <path fill="currentColor" stroke="#000" opacity="NaN" d="M 242.44451439528464 336.8889675964616 C 242.44451439528464 336.8889675964616 124.66672569734621 352.44452459430255 124.44445639109162 352.2222560355004 C 11.333381855933794 398.00008437369377 99.11116777232186 484.6667590759504 98.88889838220673 484.4444909510352 C 99.11116777232186 483.55564786181895 242.44451439528464 621.3334384141242 242.44451439528464 621.3334384141242 C 242.44451439528464 621.3334384141242 242.44451439528464 336.8889675964616 242.44451439528464 336.8889675964616 z" id="svg_8"></path>
 42 | <path fill="currentColor" stroke="#000" opacity="NaN" d="M 240.17392863758604 678.43480728885 L 210.43477638543848 852.1738878418583 C 210.60871063333408 852.3478543726849 203.65218874998055 899.3043770853201 241.0434938730052 920.1739427353805 C 240.1739286375861 919.3043774999613 241.04351024250042 677.565229998582 240.17392863758604 678.43480728885 z" id="svg_10"></path>
 43 | 
 44 |         </svg>
 45 |       )
 46 |     }
 47 |   }
 48 | })
 49 | 
 50 | export const star30 = defineComponent({
 51 |   name: 'star30',
 52 |    setup(props) {
 53 |     return () => {
 54 |       return (
 55 |         <svg viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
 56 |           <path fill="#999999" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path>
 57 |           <path fill="currentColor" stroke="#000" opacity="NaN" d="M 332.04764540003634 321.3333593512346 C 332.04764540003634 321.3333593512346 154.6666874809878 347.52383635941635 153.571428644726 346.42857159391684 C 18.952397529501038 360.6190748635071 78.47620891173204 474.90479271739076 96.4285714745954 482.14285737297706 C 98.7143047816906 484.42860253854775 251.09526192020206 628.4762260835469 250.0000001193214 627.3809526803924 C 251.09526192020206 628.4762260835469 211.8095464079296 841.571470831934 210.71428581485662 840.4761908773378 C 204.66668904206188 974.9048083281317 332.04764540003634 914.1905207182559 330.9523811103398 913.0952385310454 C 332.04764540003634 914.1905207182559 332.04764540003634 321.3333593512346 332.04764540003634 321.3333593512346 z" id="svg_12"></path>
 58 | 
 59 |         </svg>
 60 |       )
 61 |     }
 62 |   }
 63 | })
 64 | 
 65 | export const star40 = defineComponent({
 66 |   name: 'star40',
 67 |    setup(props) {
 68 |     return () => {
 69 |       return (
 70 |         <svg viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
 71 |           <path fill="#999999" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path>
 72 |           <path fill="currentColor" stroke="#000" opacity="NaN" d="M 421.33336247338286 173.71430712330167 L 348.8095239760056 321.42857158198467 C 349.90478881470557 322.5238355788793 152.2857350256985 349.90478881470557 152.2857350256985 349.90478881470557 C 34.42858848888102 357.0476461805733 68.95239909057503 460.61907798565534 86.9047619462403 471.42857165357754 C 88.00001873288898 472.52384026210154 249.90478569255743 628.4762260835469 248.80952392827703 627.3809526803924 C 249.90478569255743 628.4762260835469 209.4285939526403 863.0000429295372 208.33333343276786 861.9047623161367 C 227.28573736730965 972.5238558728423 323.714311806524 926.0952829947022 326.19047634616226 915.4761909131341 C 326.09526426181316 917.7619494011898 421.33336247338286 867.7619478401157 420.2380954386689 866.6666670803143 C 421.33336247338286 867.7619478401157 421.33336247338286 867.7619478401157 421.33336247338286 173.71430712330167 z" id="svg_14"></path>
 73 | 
 74 |         </svg>
 75 |       )
 76 |     }
 77 |   }
 78 | })
 79 | 
 80 | 
 81 | export const star50 = defineComponent({
 82 |   name: 'star50',
 83 |   
 84 |   setup(props) {
 85 |     return () => {
 86 |       return (
 87 |         <svg viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
 88 |           <path fill="#999999" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path>
 89 |           <path fill="currentColor" stroke="#000" opacity="NaN" d="M 509.17651355308 80.94120141791741 C 509.17651355308 80.94120141791741 469.1765118701253 72.70590695377967 440.0000062444175 132.9411783572705 C 439.7647459267762 133.88238011594575 351.52944809672886 319.7647408779119 350.58824026961605 318.8235339364629 C 351.52944809672886 319.7647408779119 124.47061501407407 352.7059187344629 123.52941351781773 351.76471087454763 C 22.117669531219263 390.35297914194973 86.82355460658718 488.0000420738686 92.9411777895962 475.2941243923654 C 90.35296651978902 476.23533569652886 250.35297325160812 631.5294598774121 249.41176824549868 630.5882442433362 C 250.35297325160812 631.5294598774121 208.0000302931854 863.2941755110029 207.05882646796115 862.352953414861 C 223.2941485837269 957.41182652972 312.7059170515081 926.8235899486369 311.7647103068733 925.8823660811672 C 312.7059170515081 926.8235899486369 510.3529841908139 819.7647619148463 509.4117719353817 818.8235410323919 C 510.3529841908139 819.7647619148463 509.17651355308 80.94120141791741 509.17651355308 80.94120141791741 z" id="svg_3"></path>
 90 | 
 91 |         </svg>
 92 |       )
 93 |     }
 94 |   }
 95 | })
 96 | 
 97 | export const star60 = defineComponent({
 98 |   name: 'star60',
 99 |    setup(props) {
100 |     return () => {
101 |       return (
102 |         <svg viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
103 |           <path fill="#999999" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path>
104 |           <path fill="currentColor" stroke="#000" opacity="NaN" d="M 599.7647526585951 169.1764992479646 C 599.7647526585951 169.1764992479646 558.5882803379063 16.235316342549417 454.1176535035966 108.23529565370697 C 453.88239357958366 106.82355544806464 348.00003618352696 323.2941527911138 347.05882845482125 322.3529457512577 C 348.00003618352696 323.2941527911138 130.35296820274388 351.5294480967289 129.41176654247573 350.58824026961605 C 12.705904429347555 385.64709659101385 92.70590779525699 490.3529833493365 100.00000141918578 483.5294186268866 C 100.94120225939483 483.2941595229329 248.00003197614015 628.0000479642102 247.05882703563546 627.0588324285415 C 248.00003197614015 628.0000479642102 211.5294422063873 857.4118223223329 210.58823828275595 856.470600390203 C 213.88238348185521 968.0000622693254 326.82356470431563 929.1765312241049 325.8823575660525 918.8235424515776 C 329.17650597978354 919.7647661222331 509.17651355308 822.1177031903142 508.2353013304501 821.176482242255 C 509.17651355308 822.1177031903142 599.7647526585951 868.0000580619386 598.8235379101831 867.0588358345873 C 599.7647526585951 868.0000580619386 599.7647526585951 169.1764992479646 599.7647526585951 169.1764992479646 z" id="svg_7"></path>
105 | 
106 |         </svg>
107 |       )
108 |     }
109 |   }
110 | })
111 | 
112 | export const star70 = defineComponent({
113 |   name: 'star70',
114 |    setup(props) {
115 |     return () => {
116 |       return (
117 |         <svg viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
118 |           <path fill="#999999" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path>
119 |           <path fill="currentColor" opacity="NaN" d="M 675.05886 319.76474 C 675.05886 319.76474 588.02275 143.00003 586.19191 141.11767 C 554.9493 67.47061 495.9708 65.17649 453.26249 108.2353 C 453.02775 106.82356 347.37898 323.29415 346.43985 322.35295 C 347.37898 323.29415 130.21208 351.52945 129.27295 350.58824 C 12.82456 385.6471 92.64807 490.35298 99.92607 483.52942 C 100.8652 483.29416 247.59959 628.00005 246.66047 627.05883 C 247.59959 628.00005 211.20946 857.41182 210.27034 856.4706 C 213.55721 968.00006 326.24923 929.17653 325.3101 918.82354 C 328.59698 919.76477 508.19988 822.1177 507.26075 821.17648 C 508.19988 822.1177 598.58827 868.00006 597.64913 867.05884 C 597.88392 867.29415 686.5894167848265 909.93385441113 687.0156102037436 910.8566624449207 C 686.2653229849265 912.9559311164453 686.6474808679809 323.9264955888697 689.05912 323.1765 C 690.35298 325.20592 675.05886 319.17651 675.05886 319.76474 z" id="svg_7" stroke="#000"></path>
120 | 
121 |         </svg>
122 |       )
123 |     }
124 |   }
125 | })
126 | 
127 | export const star80 = defineComponent({
128 |   name: 'star80',
129 |    setup(props) {
130 |     return () => {
131 |       return (
132 |         <svg viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
133 |           <path fill="#999999" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path>
134 |           <path fill="currentColor" opacity="NaN" d="M 675.05886 319.76474 C 675.05886 319.76474 588.02275 143.00003 586.19191 141.11767 C 554.9493 67.47061 495.9708 65.17649 453.26249 108.2353 C 453.02775 106.82356 347.37898 323.29415 346.43985 322.35295 C 347.37898 323.29415 130.21208 351.52945 129.27295 350.58824 C 12.82456 385.6471 92.64807 490.35298 99.92607 483.52942 C 100.8652 483.29416 247.59959 628.00005 246.66047 627.05883 C 247.59959 628.00005 211.20946 857.41182 210.27034 856.4706 C 213.55721 968.00006 326.24923 929.17653 325.3101 918.82354 C 328.59698 919.76477 508.19988 822.1177 507.26075 821.17648 C 508.19988 822.1177 598.58827 868.00006 597.64913 867.05884 C 597.88392 867.29415 686.58942 909.93385 687.01561 910.85666 C 686.64047 911.9063 723.0190255358623 948.7031687245319 776.41047 926.61448 C 775.9948546943847 924.8778159615665 774.6326840566509 335.7169468113302 774.94148 334.94121 C 775.0588714792111 335.79414913201884 675.05886 319.17651 675.05886 319.76474 z" id="svg_7" stroke="#000"></path>
135 | 
136 |         </svg>
137 |       )
138 |     }
139 |   }
140 | })
141 | 
142 | export const star90 = defineComponent({
143 |   name: 'star90',
144 |    setup(props) {
145 |     return () => {
146 |       return (
147 |         <svg viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
148 |           <path fill="#999999" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path>
149 |           <path fill="currentColor" opacity="NaN" d="M 675.05886 319.76474 C 675.05886 319.76474 588.02275 143.00003 586.19191 141.11767 C 554.9493 67.47061 495.9708 65.17649 453.26249 108.2353 C 453.02775 106.82356 347.37898 323.29415 346.43985 322.35295 C 347.37898 323.29415 130.21208 351.52945 129.27295 350.58824 C 12.82456 385.6471 92.64807 490.35298 99.92607 483.52942 C 100.8652 483.29416 247.59959 628.00005 246.66047 627.05883 C 247.59959 628.00005 211.20946 857.41182 210.27034 856.4706 C 213.55721 968.00006 326.24923 929.17653 325.3101 918.82354 C 328.59698 919.76477 508.19988 822.1177 507.26075 821.17648 C 508.19988 822.1177 598.58827 868.00006 597.64913 867.05884 C 597.88392 867.29415 686.214279362266 909.8070200000001 687.01561 910.85666 C 798.4051805847265 978.9651263508357 815.3379010452212 861.1662942868983 814.057530407487 863.0850655623661 C 812.7771597697528 865.003836837834 776.7317223471924 630.649769468281 775.6496715057151 630.0493053851263 C 774.5676206642378 629.4488413019717 868.699398494285 536.257047068081 869.37491 536.00573 C 870.050421505715 535.754412931919 868.3165023471925 350.62319979625664 867.88266 349.05886 C 867.4488176528075 347.4945202037433 675.05886 319.17651 675.05886 319.76474 z" id="svg_7" stroke="#000"></path>
150 | 
151 | 
152 |         </svg>
153 |       )
154 |     }
155 |   }
156 | })
157 | 
158 | export const star100 = defineComponent({
159 |   name: 'star100',
160 |    setup(props) {
161 |     return () => {
162 |       return (
163 |         <svg viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
164 |         <path fill="#999999" d="M 313.6 924.48 A 70.4 70.4 0 0 1 211.456 850.24 L 249.344 629.312 L 88.96 472.96 A 70.4 70.4 0 0 1 128 352.896 L 349.76 320.64 L 448.96 119.68 A 70.4 70.4 0 0 1 575.168 119.68 L 674.368 320.64 L 896.192 352.896 A 70.4 70.4 0 0 1 935.232 472.96 L 774.72 629.376 L 812.608 850.304 A 70.4 70.4 0 0 1 710.464 924.544 L 512 820.096 L 313.6 924.416 L 313.6 924.48 z"></path>
165 |           
166 |           </svg>
167 |       )
168 |     }
169 |   }
170 | })
171 | 
172 | 
173 | 
174 | 
175 | // const star10 = <path fill="currentColor" stroke="#000" opacity="NaN" d="M 155.7778396930281 348.00007973777656 C 155.7778396930281 348.00007973777656 39.111162209221206 346.8889685236451 77.77778524443225 462.2222665954831 C 108.00005748537387 495.77787121726533 153.55561726476512 536.8889861401306 153.33334805330932 536.6667181865826 C 153.55561726476512 536.8889861401306 155.7778396930281 348.00007973777656 155.7778396930281 348.00007973777656 z" id="svg_3"></path>
176 | 
177 | 
178 | 
179 | // const star20 =
180 | 
181 | {/* <path fill="currentColor" stroke="#000" opacity="NaN" d="M 242.44451439528464 336.8889675964616 C 242.44451439528464 336.8889675964616 124.66672569734621 352.44452459430255 124.44445639109162 352.2222560355004 C 11.333381855933794 398.00008437369377 99.11116777232186 484.6667590759504 98.88889838220673 484.4444909510352 C 99.11116777232186 483.55564786181895 242.44451439528464 621.3334384141242 242.44451439528464 621.3334384141242 C 242.44451439528464 621.3334384141242 242.44451439528464 336.8889675964616 242.44451439528464 336.8889675964616 z" id="svg_8"></path>
182 | <path fill="currentColor" stroke="#000" opacity="NaN" d="M 240.17392863758604 678.43480728885 L 210.43477638543848 852.1738878418583 C 210.60871063333408 852.3478543726849 203.65218874998055 899.3043770853201 241.0434938730052 920.1739427353805 C 240.1739286375861 919.3043774999613 241.04351024250042 677.565229998582 240.17392863758604 678.43480728885 z" id="svg_10"></path> */}
183 | 
184 | 
185 | // const star30 =
186 | //   <path fill="currentColor" stroke="#000" opacity="NaN" d="M 332.04764540003634 321.3333593512346 C 332.04764540003634 321.3333593512346 154.6666874809878 347.52383635941635 153.571428644726 346.42857159391684 C 18.952397529501038 360.6190748635071 78.47620891173204 474.90479271739076 96.4285714745954 482.14285737297706 C 98.7143047816906 484.42860253854775 251.09526192020206 628.4762260835469 250.0000001193214 627.3809526803924 C 251.09526192020206 628.4762260835469 211.8095464079296 841.571470831934 210.71428581485662 840.4761908773378 C 204.66668904206188 974.9048083281317 332.04764540003634 914.1905207182559 330.9523811103398 913.0952385310454 C 332.04764540003634 914.1905207182559 332.04764540003634 321.3333593512346 332.04764540003634 321.3333593512346 z" id="svg_12"></path>
187 | 
188 | 
189 | // const star40 =
190 | //   <path fill="currentColor" stroke="#000" opacity="NaN" d="M 421.33336247338286 173.71430712330167 L 348.8095239760056 321.42857158198467 C 349.90478881470557 322.5238355788793 152.2857350256985 349.90478881470557 152.2857350256985 349.90478881470557 C 34.42858848888102 357.0476461805733 68.95239909057503 460.61907798565534 86.9047619462403 471.42857165357754 C 88.00001873288898 472.52384026210154 249.90478569255743 628.4762260835469 248.80952392827703 627.3809526803924 C 249.90478569255743 628.4762260835469 209.4285939526403 863.0000429295372 208.33333343276786 861.9047623161367 C 227.28573736730965 972.5238558728423 323.714311806524 926.0952829947022 326.19047634616226 915.4761909131341 C 326.09526426181316 917.7619494011898 421.33336247338286 867.7619478401157 420.2380954386689 866.6666670803143 C 421.33336247338286 867.7619478401157 421.33336247338286 867.7619478401157 421.33336247338286 173.71430712330167 z" id="svg_14"></path>
191 | 
192 | 
193 | // const star50 =
194 | //   <path fill="currentColor" stroke="#000" opacity="NaN" d="M 509.17651355308 80.94120141791741 C 509.17651355308 80.94120141791741 469.1765118701253 72.70590695377967 440.0000062444175 132.9411783572705 C 439.7647459267762 133.88238011594575 351.52944809672886 319.7647408779119 350.58824026961605 318.8235339364629 C 351.52944809672886 319.7647408779119 124.47061501407407 352.7059187344629 123.52941351781773 351.76471087454763 C 22.117669531219263 390.35297914194973 86.82355460658718 488.0000420738686 92.9411777895962 475.2941243923654 C 90.35296651978902 476.23533569652886 250.35297325160812 631.5294598774121 249.41176824549868 630.5882442433362 C 250.35297325160812 631.5294598774121 208.0000302931854 863.2941755110029 207.05882646796115 862.352953414861 C 223.2941485837269 957.41182652972 312.7059170515081 926.8235899486369 311.7647103068733 925.8823660811672 C 312.7059170515081 926.8235899486369 510.3529841908139 819.7647619148463 509.4117719353817 818.8235410323919 C 510.3529841908139 819.7647619148463 509.17651355308 80.94120141791741 509.17651355308 80.94120141791741 z" id="svg_3"></path>
195 | 
196 | 
197 | // const star60 =
198 | //   <path fill="currentColor" stroke="#000" opacity="NaN" d="M 599.7647526585951 169.1764992479646 C 599.7647526585951 169.1764992479646 558.5882803379063 16.235316342549417 454.1176535035966 108.23529565370697 C 453.88239357958366 106.82355544806464 348.00003618352696 323.2941527911138 347.05882845482125 322.3529457512577 C 348.00003618352696 323.2941527911138 130.35296820274388 351.5294480967289 129.41176654247573 350.58824026961605 C 12.705904429347555 385.64709659101385 92.70590779525699 490.3529833493365 100.00000141918578 483.5294186268866 C 100.94120225939483 483.2941595229329 248.00003197614015 628.0000479642102 247.05882703563546 627.0588324285415 C 248.00003197614015 628.0000479642102 211.5294422063873 857.4118223223329 210.58823828275595 856.470600390203 C 213.88238348185521 968.0000622693254 326.82356470431563 929.1765312241049 325.8823575660525 918.8235424515776 C 329.17650597978354 919.7647661222331 509.17651355308 822.1177031903142 508.2353013304501 821.176482242255 C 509.17651355308 822.1177031903142 599.7647526585951 868.0000580619386 598.8235379101831 867.0588358345873 C 599.7647526585951 868.0000580619386 599.7647526585951 169.1764992479646 599.7647526585951 169.1764992479646 z" id="svg_7"></path>
199 | 
200 | 
201 | // const star70 =
202 | //   <path fill="currentColor" opacity="NaN" d="M 675.05886 319.76474 C 675.05886 319.76474 588.02275 143.00003 586.19191 141.11767 C 554.9493 67.47061 495.9708 65.17649 453.26249 108.2353 C 453.02775 106.82356 347.37898 323.29415 346.43985 322.35295 C 347.37898 323.29415 130.21208 351.52945 129.27295 350.58824 C 12.82456 385.6471 92.64807 490.35298 99.92607 483.52942 C 100.8652 483.29416 247.59959 628.00005 246.66047 627.05883 C 247.59959 628.00005 211.20946 857.41182 210.27034 856.4706 C 213.55721 968.00006 326.24923 929.17653 325.3101 918.82354 C 328.59698 919.76477 508.19988 822.1177 507.26075 821.17648 C 508.19988 822.1177 598.58827 868.00006 597.64913 867.05884 C 597.88392 867.29415 686.5894167848265 909.93385441113 687.0156102037436 910.8566624449207 C 686.2653229849265 912.9559311164453 686.6474808679809 323.9264955888697 689.05912 323.1765 C 690.35298 325.20592 675.05886 319.17651 675.05886 319.76474 z" id="svg_7" stroke="#000"></path>
203 | 
204 | 
205 | // const star80 =
206 | //   <path fill="currentColor" opacity="NaN" d="M 675.05886 319.76474 C 675.05886 319.76474 588.02275 143.00003 586.19191 141.11767 C 554.9493 67.47061 495.9708 65.17649 453.26249 108.2353 C 453.02775 106.82356 347.37898 323.29415 346.43985 322.35295 C 347.37898 323.29415 130.21208 351.52945 129.27295 350.58824 C 12.82456 385.6471 92.64807 490.35298 99.92607 483.52942 C 100.8652 483.29416 247.59959 628.00005 246.66047 627.05883 C 247.59959 628.00005 211.20946 857.41182 210.27034 856.4706 C 213.55721 968.00006 326.24923 929.17653 325.3101 918.82354 C 328.59698 919.76477 508.19988 822.1177 507.26075 821.17648 C 508.19988 822.1177 598.58827 868.00006 597.64913 867.05884 C 597.88392 867.29415 686.58942 909.93385 687.01561 910.85666 C 686.64047 911.9063 723.0190255358623 948.7031687245319 776.41047 926.61448 C 775.9948546943847 924.8778159615665 774.6326840566509 335.7169468113302 774.94148 334.94121 C 775.0588714792111 335.79414913201884 675.05886 319.17651 675.05886 319.76474 z" id="svg_7" stroke="#000"></path>
207 | 
208 | 
209 | // const star90 =
210 | //   <path fill="currentColor" opacity="NaN" d="M 675.05886 319.76474 C 675.05886 319.76474 588.02275 143.00003 586.19191 141.11767 C 554.9493 67.47061 495.9708 65.17649 453.26249 108.2353 C 453.02775 106.82356 347.37898 323.29415 346.43985 322.35295 C 347.37898 323.29415 130.21208 351.52945 129.27295 350.58824 C 12.82456 385.6471 92.64807 490.35298 99.92607 483.52942 C 100.8652 483.29416 247.59959 628.00005 246.66047 627.05883 C 247.59959 628.00005 211.20946 857.41182 210.27034 856.4706 C 213.55721 968.00006 326.24923 929.17653 325.3101 918.82354 C 328.59698 919.76477 508.19988 822.1177 507.26075 821.17648 C 508.19988 822.1177 598.58827 868.00006 597.64913 867.05884 C 597.88392 867.29415 686.214279362266 909.8070200000001 687.01561 910.85666 C 798.4051805847265 978.9651263508357 815.3379010452212 861.1662942868983 814.057530407487 863.0850655623661 C 812.7771597697528 865.003836837834 776.7317223471924 630.649769468281 775.6496715057151 630.0493053851263 C 774.5676206642378 629.4488413019717 868.699398494285 536.257047068081 869.37491 536.00573 C 870.050421505715 535.754412931919 868.3165023471925 350.62319979625664 867.88266 349.05886 C 867.4488176528075 347.4945202037433 675.05886 319.17651 675.05886 319.76474 z" id="svg_7" stroke="#000"></path>
211 | 
212 | 
213 | // const star100 =
214 | // <path fill="currentColor" stroke="#000" opacity="NaN" d="M 155.7778396930281 348.00007973777656 C 155.7778396930281 348.00007973777656 39.111162209221206 346.8889685236451 77.77778524443225 462.2222665954831 C 108.00005748537387 495.77787121726533 153.55561726476512 536.8889861401306 153.33334805330932 536.6667181865826 C 153.55561726476512 536.8889861401306 155.7778396930281 348.00007973777656 155.7778396930281 348.00007973777656 z" id="svg_3"></path>
215 | 
216 | // <path fill="#999999" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path>
217 | 
218 | 
219 | 
220 | 
221 | 
222 | 
223 | 
224 | 
225 | 


--------------------------------------------------------------------------------
/packages/rate/star.tsx:
--------------------------------------------------------------------------------
  1 | import { defineComponent } from "vue";
  2 | 
  3 | const RateLimProp = {
  4 |   color: { Type: String, default: "#000000" },
  5 |   defaultColor: { Type: String, default: "#ffffff" },
  6 | }
  7 | 
  8 | export const rate0 = defineComponent({
  9 |   name: 'rate0',
 10 |   props: RateLimProp, setup(props) {
 11 |     return () => {
 12 |       return (
 13 |         <svg viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
 14 |           <path fill="currentColor" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path>
 15 |         </svg>
 16 |       )
 17 |     }
 18 |   }
 19 | })
 20 | 
 21 | 
 22 | 
 23 | export const rate10 = defineComponent({
 24 |   name: 'rate10',
 25 |   props: RateLimProp, setup(props) {
 26 |     return () => {
 27 |       return (
 28 |         <svg viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
 29 |           <path fill="currentColor" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path>
 30 |           <path fill="#000000" stroke="#000" opacity="NaN" d="M 155.7778396930281 348.00007973777656 C 155.7778396930281 348.00007973777656 39.111162209221206 346.8889685236451 77.77778524443225 462.2222665954831 C 108.00005748537387 495.77787121726533 153.55561726476512 536.8889861401306 153.33334805330932 536.6667181865826 C 153.55561726476512 536.8889861401306 155.7778396930281 348.00007973777656 155.7778396930281 348.00007973777656 z" id="svg_3"></path>
 31 |         </svg>
 32 |       )
 33 |     }
 34 |   }
 35 | })
 36 | 
 37 | export const rate20 = defineComponent({
 38 |   name: 'rate20',
 39 |   props: RateLimProp, setup(props) {
 40 |     return () => {
 41 |       return (
 42 |         <svg viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
 43 |           <path fill="currentColor" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path>
 44 |           <path fill={props.defaultColor} stroke-width="7" d="M2.7056374921686173,403.0461809933538 L383.63458629458756,403.0461809933538 L501.3445626682144,41.16467576169576 L619.0546059732819,403.0461809933538 L999.9834878443443,403.0461809933538 L691.8060586221775,626.6986908990209 L809.5221257531576,988.5801961306754 L501.3445626682144,764.9215954576224 L193.1670665146788,988.5801961306754 L310.8831671113741,626.6986908990209 L2.7056374921686173,403.0461809933538 z" stroke="#000"></path>
 45 |           <path fill={props.color} d="M197.31117407454337,404.0534784171748 C197.31117407454337,404.0534784171748 0.6192559589990725,404.0534784171748 0,400.9708543958983 C0.6192559589990843,404.0534784171748 201.1649162124203,546.6419375186216 201.1649162124203,546.6419375186216 C201.1649162124203,546.6419375186216 197.31117407454337,404.0534784171748 197.31117407454337,404.0534784171748 z" stroke="#000"></path>
 46 | 
 47 |         </svg>
 48 |       )
 49 |     }
 50 |   }
 51 | })
 52 | 
 53 | export const rate30 = defineComponent({
 54 |   name: 'rate30',
 55 |   props: RateLimProp, setup(props) {
 56 |     return () => {
 57 |       return (
 58 |         <svg viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
 59 |           <path fill="currentColor" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path>
 60 | 
 61 |           <path fill="#000000" stroke="#000" opacity="NaN" d="M 332.04764540003634 321.3333593512346 C 332.04764540003634 321.3333593512346 154.6666874809878 347.52383635941635 153.571428644726 346.42857159391684 C 18.952397529501038 360.6190748635071 78.47620891173204 474.90479271739076 96.4285714745954 482.14285737297706 C 98.7143047816906 484.42860253854775 251.09526192020206 628.4762260835469 250.0000001193214 627.3809526803924 C 251.09526192020206 628.4762260835469 211.8095464079296 841.571470831934 210.71428581485662 840.4761908773378 C 204.66668904206188 974.9048083281317 332.04764540003634 914.1905207182559 330.9523811103398 913.0952385310454 C 332.04764540003634 914.1905207182559 332.04764540003634 321.3333593512346 332.04764540003634 321.3333593512346 z" id="svg_12"></path>
 62 | 
 63 |         </svg>
 64 |       )
 65 |     }
 66 |   }
 67 | })
 68 | 
 69 | export const rate40 = defineComponent({
 70 |   name: 'rate40',
 71 |   props: RateLimProp, setup(props) {
 72 |     return () => {
 73 |       return (
 74 |         <svg viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
 75 |           <path fill="currentColor" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path>
 76 | 
 77 |           <path fill="#000000" stroke="#000" opacity="NaN" d="M 421.33336247338286 173.71430712330167 L 348.8095239760056 321.42857158198467 C 349.90478881470557 322.5238355788793 152.2857350256985 349.90478881470557 152.2857350256985 349.90478881470557 C 34.42858848888102 357.0476461805733 68.95239909057503 460.61907798565534 86.9047619462403 471.42857165357754 C 88.00001873288898 472.52384026210154 249.90478569255743 628.4762260835469 248.80952392827703 627.3809526803924 C 249.90478569255743 628.4762260835469 209.4285939526403 863.0000429295372 208.33333343276786 861.9047623161367 C 227.28573736730965 972.5238558728423 323.714311806524 926.0952829947022 326.19047634616226 915.4761909131341 C 326.09526426181316 917.7619494011898 421.33336247338286 867.7619478401157 420.2380954386689 866.6666670803143 C 421.33336247338286 867.7619478401157 421.33336247338286 867.7619478401157 421.33336247338286 173.71430712330167 z" id="svg_14"></path>
 78 | 
 79 |         </svg>
 80 |       )
 81 |     }
 82 |   }
 83 | })
 84 | 
 85 | 
 86 | export const rate50 = defineComponent({
 87 |   name: 'rate50',
 88 |   props: RateLimProp,
 89 |   setup(props) {
 90 |     return () => {
 91 |       return (
 92 |         <svg viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
 93 |           <path fill="currentColor" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path>
 94 | 
 95 |           <path fill="#000000" stroke="#000" opacity="NaN" d="M 509.17651355308 80.94120141791741 C 509.17651355308 80.94120141791741 469.1765118701253 72.70590695377967 440.0000062444175 132.9411783572705 C 439.7647459267762 133.88238011594575 351.52944809672886 319.7647408779119 350.58824026961605 318.8235339364629 C 351.52944809672886 319.7647408779119 124.47061501407407 352.7059187344629 123.52941351781773 351.76471087454763 C 22.117669531219263 390.35297914194973 86.82355460658718 488.0000420738686 92.9411777895962 475.2941243923654 C 90.35296651978902 476.23533569652886 250.35297325160812 631.5294598774121 249.41176824549868 630.5882442433362 C 250.35297325160812 631.5294598774121 208.0000302931854 863.2941755110029 207.05882646796115 862.352953414861 C 223.2941485837269 957.41182652972 312.7059170515081 926.8235899486369 311.7647103068733 925.8823660811672 C 312.7059170515081 926.8235899486369 510.3529841908139 819.7647619148463 509.4117719353817 818.8235410323919 C 510.3529841908139 819.7647619148463 509.17651355308 80.94120141791741 509.17651355308 80.94120141791741 z" id="svg_3"></path>
 96 | 
 97 |         </svg>
 98 |       )
 99 |     }
100 |   }
101 | })
102 | 
103 | export const rate60 = defineComponent({
104 |   name: 'rate60',
105 |   props: RateLimProp, setup(props) {
106 |     return () => {
107 |       return (
108 |         <svg viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
109 |           <path fill="currentColor" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path>
110 | 
111 |           <path fill="#000000" stroke="#000" opacity="NaN" d="M 599.7647526585951 169.1764992479646 C 599.7647526585951 169.1764992479646 558.5882803379063 16.235316342549417 454.1176535035966 108.23529565370697 C 453.88239357958366 106.82355544806464 348.00003618352696 323.2941527911138 347.05882845482125 322.3529457512577 C 348.00003618352696 323.2941527911138 130.35296820274388 351.5294480967289 129.41176654247573 350.58824026961605 C 12.705904429347555 385.64709659101385 92.70590779525699 490.3529833493365 100.00000141918578 483.5294186268866 C 100.94120225939483 483.2941595229329 248.00003197614015 628.0000479642102 247.05882703563546 627.0588324285415 C 248.00003197614015 628.0000479642102 211.5294422063873 857.4118223223329 210.58823828275595 856.470600390203 C 213.88238348185521 968.0000622693254 326.82356470431563 929.1765312241049 325.8823575660525 918.8235424515776 C 329.17650597978354 919.7647661222331 509.17651355308 822.1177031903142 508.2353013304501 821.176482242255 C 509.17651355308 822.1177031903142 599.7647526585951 868.0000580619386 598.8235379101831 867.0588358345873 C 599.7647526585951 868.0000580619386 599.7647526585951 169.1764992479646 599.7647526585951 169.1764992479646 z" id="svg_7"></path>
112 | 
113 |         </svg>
114 |       )
115 |     }
116 |   }
117 | })
118 | 
119 | export const rate70 = defineComponent({
120 |   name: 'rate70',
121 |   props: RateLimProp, setup(props) {
122 |     return () => {
123 |       return (
124 |         <svg viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
125 |           <path fill="currentColor" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path>
126 | 
127 |           <path fill="#000000" opacity="NaN" d="M 675.05886 319.76474 C 675.05886 319.76474 588.02275 143.00003 586.19191 141.11767 C 554.9493 67.47061 495.9708 65.17649 453.26249 108.2353 C 453.02775 106.82356 347.37898 323.29415 346.43985 322.35295 C 347.37898 323.29415 130.21208 351.52945 129.27295 350.58824 C 12.82456 385.6471 92.64807 490.35298 99.92607 483.52942 C 100.8652 483.29416 247.59959 628.00005 246.66047 627.05883 C 247.59959 628.00005 211.20946 857.41182 210.27034 856.4706 C 213.55721 968.00006 326.24923 929.17653 325.3101 918.82354 C 328.59698 919.76477 508.19988 822.1177 507.26075 821.17648 C 508.19988 822.1177 598.58827 868.00006 597.64913 867.05884 C 597.88392 867.29415 686.5894167848265 909.93385441113 687.0156102037436 910.8566624449207 C 686.2653229849265 912.9559311164453 686.6474808679809 323.9264955888697 689.05912 323.1765 C 690.35298 325.20592 675.05886 319.17651 675.05886 319.76474 z" id="svg_7" stroke="#000"></path>
128 | 
129 |         </svg>
130 |       )
131 |     }
132 |   }
133 | })
134 | 
135 | export const rate80 = defineComponent({
136 |   name: 'rate80',
137 |   props: RateLimProp, setup(props) {
138 |     return () => {
139 |       return (
140 |         <svg viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
141 |           <path fill="currentColor" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path>
142 | 
143 |           <path fill="#000000" opacity="NaN" d="M 675.05886 319.76474 C 675.05886 319.76474 588.02275 143.00003 586.19191 141.11767 C 554.9493 67.47061 495.9708 65.17649 453.26249 108.2353 C 453.02775 106.82356 347.37898 323.29415 346.43985 322.35295 C 347.37898 323.29415 130.21208 351.52945 129.27295 350.58824 C 12.82456 385.6471 92.64807 490.35298 99.92607 483.52942 C 100.8652 483.29416 247.59959 628.00005 246.66047 627.05883 C 247.59959 628.00005 211.20946 857.41182 210.27034 856.4706 C 213.55721 968.00006 326.24923 929.17653 325.3101 918.82354 C 328.59698 919.76477 508.19988 822.1177 507.26075 821.17648 C 508.19988 822.1177 598.58827 868.00006 597.64913 867.05884 C 597.88392 867.29415 686.58942 909.93385 687.01561 910.85666 C 686.64047 911.9063 723.0190255358623 948.7031687245319 776.41047 926.61448 C 775.9948546943847 924.8778159615665 774.6326840566509 335.7169468113302 774.94148 334.94121 C 775.0588714792111 335.79414913201884 675.05886 319.17651 675.05886 319.76474 z" id="svg_7" stroke="#000"></path>
144 | 
145 |         </svg>
146 |       )
147 |     }
148 |   }
149 | })
150 | 
151 | export const rate90 = defineComponent({
152 |   name: 'rate90',
153 |   props: RateLimProp, setup(props) {
154 |     return () => {
155 |       return (
156 |         <svg viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
157 |           <path fill="currentColor" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path>
158 | 
159 |           <path fill="#000000" opacity="NaN" d="M 675.05886 319.76474 C 675.05886 319.76474 588.02275 143.00003 586.19191 141.11767 C 554.9493 67.47061 495.9708 65.17649 453.26249 108.2353 C 453.02775 106.82356 347.37898 323.29415 346.43985 322.35295 C 347.37898 323.29415 130.21208 351.52945 129.27295 350.58824 C 12.82456 385.6471 92.64807 490.35298 99.92607 483.52942 C 100.8652 483.29416 247.59959 628.00005 246.66047 627.05883 C 247.59959 628.00005 211.20946 857.41182 210.27034 856.4706 C 213.55721 968.00006 326.24923 929.17653 325.3101 918.82354 C 328.59698 919.76477 508.19988 822.1177 507.26075 821.17648 C 508.19988 822.1177 598.58827 868.00006 597.64913 867.05884 C 597.88392 867.29415 686.214279362266 909.8070200000001 687.01561 910.85666 C 798.4051805847265 978.9651263508357 815.3379010452212 861.1662942868983 814.057530407487 863.0850655623661 C 812.7771597697528 865.003836837834 776.7317223471924 630.649769468281 775.6496715057151 630.0493053851263 C 774.5676206642378 629.4488413019717 868.699398494285 536.257047068081 869.37491 536.00573 C 870.050421505715 535.754412931919 868.3165023471925 350.62319979625664 867.88266 349.05886 C 867.4488176528075 347.4945202037433 675.05886 319.17651 675.05886 319.76474 z" id="svg_7" stroke="#000"></path>
160 | 
161 |         </svg>
162 |       )
163 |     }
164 |   }
165 | })
166 | 
167 | export const rate100 = defineComponent({
168 |   name: 'rate100',
169 |   props: RateLimProp, setup(props) {
170 |     return () => {
171 |       return (
172 |         <svg viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
173 |           <path fill="#000000" stroke="#000" opacity="NaN" d="M 155.7778396930281 348.00007973777656 C 155.7778396930281 348.00007973777656 39.111162209221206 346.8889685236451 77.77778524443225 462.2222665954831 C 108.00005748537387 495.77787121726533 153.55561726476512 536.8889861401306 153.33334805330932 536.6667181865826 C 153.55561726476512 536.8889861401306 155.7778396930281 348.00007973777656 155.7778396930281 348.00007973777656 z" id="svg_3"></path>
174 | 
175 |           <path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path>
176 | 
177 | 
178 |         </svg>
179 |       )
180 |     }
181 |   }
182 | })
183 | 
184 | 
185 | 
186 | // const star10 = <path fill="#000000" stroke="#000" opacity="NaN" d="M 155.7778396930281 348.00007973777656 C 155.7778396930281 348.00007973777656 39.111162209221206 346.8889685236451 77.77778524443225 462.2222665954831 C 108.00005748537387 495.77787121726533 153.55561726476512 536.8889861401306 153.33334805330932 536.6667181865826 C 153.55561726476512 536.8889861401306 155.7778396930281 348.00007973777656 155.7778396930281 348.00007973777656 z" id="svg_3"></path>
187 | 
188 | 
189 | 
190 | // const star20 =
191 | 
192 | // <path fill="#000000" stroke="#000" opacity="NaN" d="M 242.44451439528464 336.8889675964616 C 242.44451439528464 336.8889675964616 124.66672569734621 352.44452459430255 124.44445639109162 352.2222560355004 C 11.333381855933794 398.00008437369377 99.11116777232186 484.6667590759504 98.88889838220673 484.4444909510352 C 99.11116777232186 483.55564786181895 242.44451439528464 621.3334384141242 242.44451439528464 621.3334384141242 C 242.44451439528464 621.3334384141242 242.44451439528464 336.8889675964616 242.44451439528464 336.8889675964616 z" id="svg_8"></path>
193 | // <path fill="#000000" stroke="#000" opacity="NaN" d="M 240.17392863758604 678.43480728885 L 210.43477638543848 852.1738878418583 C 210.60871063333408 852.3478543726849 203.65218874998055 899.3043770853201 241.0434938730052 920.1739427353805 C 240.1739286375861 919.3043774999613 241.04351024250042 677.565229998582 240.17392863758604 678.43480728885 z" id="svg_10"></path>
194 | 
195 | 
196 | // const star30 =
197 | //   <path fill="#000000" stroke="#000" opacity="NaN" d="M 332.04764540003634 321.3333593512346 C 332.04764540003634 321.3333593512346 154.6666874809878 347.52383635941635 153.571428644726 346.42857159391684 C 18.952397529501038 360.6190748635071 78.47620891173204 474.90479271739076 96.4285714745954 482.14285737297706 C 98.7143047816906 484.42860253854775 251.09526192020206 628.4762260835469 250.0000001193214 627.3809526803924 C 251.09526192020206 628.4762260835469 211.8095464079296 841.571470831934 210.71428581485662 840.4761908773378 C 204.66668904206188 974.9048083281317 332.04764540003634 914.1905207182559 330.9523811103398 913.0952385310454 C 332.04764540003634 914.1905207182559 332.04764540003634 321.3333593512346 332.04764540003634 321.3333593512346 z" id="svg_12"></path>
198 | 
199 | 
200 | // const star40 =
201 | //   <path fill="#000000" stroke="#000" opacity="NaN" d="M 421.33336247338286 173.71430712330167 L 348.8095239760056 321.42857158198467 C 349.90478881470557 322.5238355788793 152.2857350256985 349.90478881470557 152.2857350256985 349.90478881470557 C 34.42858848888102 357.0476461805733 68.95239909057503 460.61907798565534 86.9047619462403 471.42857165357754 C 88.00001873288898 472.52384026210154 249.90478569255743 628.4762260835469 248.80952392827703 627.3809526803924 C 249.90478569255743 628.4762260835469 209.4285939526403 863.0000429295372 208.33333343276786 861.9047623161367 C 227.28573736730965 972.5238558728423 323.714311806524 926.0952829947022 326.19047634616226 915.4761909131341 C 326.09526426181316 917.7619494011898 421.33336247338286 867.7619478401157 420.2380954386689 866.6666670803143 C 421.33336247338286 867.7619478401157 421.33336247338286 867.7619478401157 421.33336247338286 173.71430712330167 z" id="svg_14"></path>
202 | 
203 | 
204 | // const star50 =
205 | //   <path fill="#000000" stroke="#000" opacity="NaN" d="M 509.17651355308 80.94120141791741 C 509.17651355308 80.94120141791741 469.1765118701253 72.70590695377967 440.0000062444175 132.9411783572705 C 439.7647459267762 133.88238011594575 351.52944809672886 319.7647408779119 350.58824026961605 318.8235339364629 C 351.52944809672886 319.7647408779119 124.47061501407407 352.7059187344629 123.52941351781773 351.76471087454763 C 22.117669531219263 390.35297914194973 86.82355460658718 488.0000420738686 92.9411777895962 475.2941243923654 C 90.35296651978902 476.23533569652886 250.35297325160812 631.5294598774121 249.41176824549868 630.5882442433362 C 250.35297325160812 631.5294598774121 208.0000302931854 863.2941755110029 207.05882646796115 862.352953414861 C 223.2941485837269 957.41182652972 312.7059170515081 926.8235899486369 311.7647103068733 925.8823660811672 C 312.7059170515081 926.8235899486369 510.3529841908139 819.7647619148463 509.4117719353817 818.8235410323919 C 510.3529841908139 819.7647619148463 509.17651355308 80.94120141791741 509.17651355308 80.94120141791741 z" id="svg_3"></path>
206 | 
207 | 
208 | // const star60 =
209 | //   <path fill="#000000" stroke="#000" opacity="NaN" d="M 599.7647526585951 169.1764992479646 C 599.7647526585951 169.1764992479646 558.5882803379063 16.235316342549417 454.1176535035966 108.23529565370697 C 453.88239357958366 106.82355544806464 348.00003618352696 323.2941527911138 347.05882845482125 322.3529457512577 C 348.00003618352696 323.2941527911138 130.35296820274388 351.5294480967289 129.41176654247573 350.58824026961605 C 12.705904429347555 385.64709659101385 92.70590779525699 490.3529833493365 100.00000141918578 483.5294186268866 C 100.94120225939483 483.2941595229329 248.00003197614015 628.0000479642102 247.05882703563546 627.0588324285415 C 248.00003197614015 628.0000479642102 211.5294422063873 857.4118223223329 210.58823828275595 856.470600390203 C 213.88238348185521 968.0000622693254 326.82356470431563 929.1765312241049 325.8823575660525 918.8235424515776 C 329.17650597978354 919.7647661222331 509.17651355308 822.1177031903142 508.2353013304501 821.176482242255 C 509.17651355308 822.1177031903142 599.7647526585951 868.0000580619386 598.8235379101831 867.0588358345873 C 599.7647526585951 868.0000580619386 599.7647526585951 169.1764992479646 599.7647526585951 169.1764992479646 z" id="svg_7"></path>
210 | 
211 | 
212 | // const star70 =
213 | //   <path fill="#000000" opacity="NaN" d="M 675.05886 319.76474 C 675.05886 319.76474 588.02275 143.00003 586.19191 141.11767 C 554.9493 67.47061 495.9708 65.17649 453.26249 108.2353 C 453.02775 106.82356 347.37898 323.29415 346.43985 322.35295 C 347.37898 323.29415 130.21208 351.52945 129.27295 350.58824 C 12.82456 385.6471 92.64807 490.35298 99.92607 483.52942 C 100.8652 483.29416 247.59959 628.00005 246.66047 627.05883 C 247.59959 628.00005 211.20946 857.41182 210.27034 856.4706 C 213.55721 968.00006 326.24923 929.17653 325.3101 918.82354 C 328.59698 919.76477 508.19988 822.1177 507.26075 821.17648 C 508.19988 822.1177 598.58827 868.00006 597.64913 867.05884 C 597.88392 867.29415 686.5894167848265 909.93385441113 687.0156102037436 910.8566624449207 C 686.2653229849265 912.9559311164453 686.6474808679809 323.9264955888697 689.05912 323.1765 C 690.35298 325.20592 675.05886 319.17651 675.05886 319.76474 z" id="svg_7" stroke="#000"></path>
214 | 
215 | 
216 | // const star80 =
217 | //   <path fill="#000000" opacity="NaN" d="M 675.05886 319.76474 C 675.05886 319.76474 588.02275 143.00003 586.19191 141.11767 C 554.9493 67.47061 495.9708 65.17649 453.26249 108.2353 C 453.02775 106.82356 347.37898 323.29415 346.43985 322.35295 C 347.37898 323.29415 130.21208 351.52945 129.27295 350.58824 C 12.82456 385.6471 92.64807 490.35298 99.92607 483.52942 C 100.8652 483.29416 247.59959 628.00005 246.66047 627.05883 C 247.59959 628.00005 211.20946 857.41182 210.27034 856.4706 C 213.55721 968.00006 326.24923 929.17653 325.3101 918.82354 C 328.59698 919.76477 508.19988 822.1177 507.26075 821.17648 C 508.19988 822.1177 598.58827 868.00006 597.64913 867.05884 C 597.88392 867.29415 686.58942 909.93385 687.01561 910.85666 C 686.64047 911.9063 723.0190255358623 948.7031687245319 776.41047 926.61448 C 775.9948546943847 924.8778159615665 774.6326840566509 335.7169468113302 774.94148 334.94121 C 775.0588714792111 335.79414913201884 675.05886 319.17651 675.05886 319.76474 z" id="svg_7" stroke="#000"></path>
218 | 
219 | 
220 | // const star90 =
221 | //   <path fill="#000000" opacity="NaN" d="M 675.05886 319.76474 C 675.05886 319.76474 588.02275 143.00003 586.19191 141.11767 C 554.9493 67.47061 495.9708 65.17649 453.26249 108.2353 C 453.02775 106.82356 347.37898 323.29415 346.43985 322.35295 C 347.37898 323.29415 130.21208 351.52945 129.27295 350.58824 C 12.82456 385.6471 92.64807 490.35298 99.92607 483.52942 C 100.8652 483.29416 247.59959 628.00005 246.66047 627.05883 C 247.59959 628.00005 211.20946 857.41182 210.27034 856.4706 C 213.55721 968.00006 326.24923 929.17653 325.3101 918.82354 C 328.59698 919.76477 508.19988 822.1177 507.26075 821.17648 C 508.19988 822.1177 598.58827 868.00006 597.64913 867.05884 C 597.88392 867.29415 686.214279362266 909.8070200000001 687.01561 910.85666 C 798.4051805847265 978.9651263508357 815.3379010452212 861.1662942868983 814.057530407487 863.0850655623661 C 812.7771597697528 865.003836837834 776.7317223471924 630.649769468281 775.6496715057151 630.0493053851263 C 774.5676206642378 629.4488413019717 868.699398494285 536.257047068081 869.37491 536.00573 C 870.050421505715 535.754412931919 868.3165023471925 350.62319979625664 867.88266 349.05886 C 867.4488176528075 347.4945202037433 675.05886 319.17651 675.05886 319.76474 z" id="svg_7" stroke="#000"></path>
222 | 
223 | 
224 | // const star100 =
225 | // <path fill="#000000" stroke="#000" opacity="NaN" d="M 155.7778396930281 348.00007973777656 C 155.7778396930281 348.00007973777656 39.111162209221206 346.8889685236451 77.77778524443225 462.2222665954831 C 108.00005748537387 495.77787121726533 153.55561726476512 536.8889861401306 153.33334805330932 536.6667181865826 C 153.55561726476512 536.8889861401306 155.7778396930281 348.00007973777656 155.7778396930281 348.00007973777656 z" id="svg_3"></path>
226 | 
227 | // <path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path>
228 | 
229 | 
230 | 
231 | 
232 | 
233 | 
234 | 
235 | 
236 | 
237 | 
238 | 
239 | 
240 | 
241 | 
242 | 
243 | 
244 | 
245 | 
246 | 
247 | 
248 | // const star5 =  <path  fill={props.color} opacity="NaN" d="M 49.708625677687394 401.74744595861574 C 49.708625677687394 401.74744595861574 0.15600922151997723 401.74744595861574 0 400.9708401515833 C 0.1560092215199802 401.74744595861574 50.67949935622363 437.66977206445654 50.67949935622363 437.66977206445654 C 50.67949935622363 437.66977206445654 49.708625677687394 401.74744595861574 49.708625677687394 401.74744595861574 z" ></path>
249 | 
250 | // const star10 = <path  fill={props.color} d="M99.22689913214009,402.5210927614264 C99.22689913214009,402.5210927614264 0.31142102756614926,402.5210927614264 0,400.9708550505811 C0.3114210275661552,402.5210927614264 101.16492866437493,474.2281854541153 101.16492866437493,474.2281854541153 C101.16492866437493,474.2281854541153 99.22689913214009,402.5210927614264 99.22689913214009,402.5210927614264 z"  stroke="#000"></path>
251 | 
252 | // const star15 = <path  fill={props.color} d="M148.7451744296763,403.29472436351455 C148.7451744296763,403.29472436351455 0.4668328393967906,403.29472436351455 0,400.97085472006165 C0.46683283939679954,403.29472436351455 151.65035985160753,510.7865849749702 151.65035985160753,510.7865849749702 C151.65035985160753,510.7865849749702 148.7451744296763,403.29472436351455 148.7451744296763,403.29472436351455 z"  stroke="#000"></path>
253 | 
254 | // const star20 = <path  fill={props.color} d="M197.31117407454337,404.0534784171748 C197.31117407454337,404.0534784171748 0.6192559589990725,404.0534784171748 0,400.9708543958983 C0.6192559589990843,404.0534784171748 201.1649162124203,546.6419375186216 201.1649162124203,546.6419375186216 C201.1649162124203,546.6419375186216 197.31117407454337,404.0534784171748 197.31117407454337,404.0534784171748 z"  stroke="#000"></path>
255 | 
256 | // const star25 =
257 | //  <path  fill={props.color} d="M247.78172764123934,404.8419876085686 C247.78172764123934,404.8419876085686 0.777656471269861,404.8419876085686 0,400.97085405902266 C0.7776564712698758,404.8419876085686 252.6212248936668,583.9033859483851 252.6212248936668,583.9033859483851 C252.6212248936668,583.9033859483851 247.78172764123934,404.8419876085686 247.78172764123934,404.8419876085686 z"  stroke="#000"></path>
258 | //  <path  fill={props.color} opacity="NaN" d="M 250.67947713468874 809.5143909438357 C 250.67947713468874 809.5143909438357 192.42705642251445 990.0968951515758 192.23299358356778 989.3203053618968 C 192.42705642251445 990.0968951515758 251.650350813225 947.3784532959814 251.45628958658614 946.6018623433262 C 251.650350813225 947.3784532959814 250.67947713468874 809.5143909438357 250.67947713468874 809.5143909438357 z" ></path>
259 | 
260 | 
261 | // const star30 =
262 | {/*  <path  fill={props.color} d="M296.3477388194181,405.6007418424156 C296.3477388194181,405.6007418424156 0.93007962706914,405.6007418424156 0,400.97085373485925 C0.9300796270691578,405.6007418424156 302.13579301305174,619.7587470068609 302.13579301305174,619.7587470068609 C302.13579301305174,619.7587470068609 296.3477388194181,405.6007418424156 296.3477388194181,405.6007418424156 z"  stroke="#000"></path>
263 |  <path  fill={props.color} d="M300.48114047933126,656.2946912085845 C300.48114047933126,656.2946912085845 192.5924214823076,990.7497200993575 192.23299966184226,989.3114060075084 C192.5924214823076,990.7497200993575 302.27928579594834,911.6313261682071 301.919866961622,910.1930099224214 C302.27928579594834,911.6313261682071 300.48114047933126,656.2946912085845 300.48114047933126,656.2946912085845 z"  stroke="#000"></path> */}
264 | 
265 | 
266 | // const star35 =
267 | //  <path  fill={props.color} opacity="NaN" d="M 348.9761830686322 402.3090304771921 C 348.9761830686322 402.3090304771921 1.5397922396267631 403.59108357988214 1.282053059833718 402.5646607877875 C 1.5397922396267631 403.59108357988214 311.7966430906206 626.6683234479522 311.5388935395935 625.6418931988544 C 311.7966430906206 626.6683234479522 192.56570454044527 990.7714046119283 192.30795897505772 989.7449621916303 C 192.56570454044527 990.7714046119283 347.69412996594224 875.3866253698233 347.4363792149376 874.3601868065957 C 347.69412996594224 875.3866253698233 348.9761830686322 402.3090304771921 348.9761830686322 402.3090304771921 z" id="svg_22"></path>
268 | 
269 | 
270 | // const star40 =
271 | //  <path  fill={props.color} opacity="NaN" d="M 402.8224133816147 344.6166408561395 C 402.8224133816147 344.6166408561395 400.2583071762345 839.4891384945016 400.00055466812006 838.4627011312516 C 400.2583071762345 839.4891384945016 192.56570454044527 988.2072984065481 192.30795897505772 987.1808560719629 C 192.56570454044527 988.2072984065481 307.95048378255046 626.6683234479522 307.95048378255046 626.6683234479522 C 307.95048378255046 626.6683234479522 1.5397922396267631 403.59108357988214 1.282053059833718 402.5646607877875 C 1.5397922396267631 403.59108357988214 383.5916168412639 398.46287116912197 383.3338648902817 397.4364485484526 C 383.5916168412639 398.46287116912197 402.8224133816147 344.6166408561395 402.8224133816147 344.6166408561395 z" id="svg_25"></path>
272 | 
273 | // const star45 =
274 | //  <path  fill={props.color} opacity="NaN" d="M 450.2583781811468 192.0523216360227 L 382.051811830448 403.8467138476212 L 5.128212239334872 401.28260772795375 L 308.97478741992603 624.3598401390207 L 193.59001203489143 987.1808560719629 L 450.00062400163506 800.0011093362401 L 450.2583781811468 192.0523216360227 z" ></path>
275 | 
276 | 
277 | // const star50 =
278 | //  <path  fill={props.color} opacity="NaN" d="M 500.258449186059 42.052108621286024 L 382.051811830448 403.8467138476212 L 2.564106119667436 403.8467138476212 L 310.2568404797598 625.6418931988544 L 193.59001203489143 989.7449621916303 L 501.28274639498375 766.6677297805634 L 500.258449186059 42.052108621286024 z" ></path>
279 | 
280 | 
281 | // const star55 =
282 | //  <path  fill={props.color} opacity="NaN" d="M 548.9764670882812 184.36000301988236 C 548.9764670882812 184.36000301988236 502.8225553914392 39.48800241590591 502.8225553914392 39.48800241590591 C 502.8225553914392 39.48800241590591 383.5916168412639 403.59108357988214 383.3338648902817 402.5646607877875 C 383.5916168412639 403.59108357988214 4.103898445006905 402.3090304771921 3.846159179501154 401.28260772795375 C 4.103898445006905 402.3090304771921 310.51458998793055 627.9503765506422 310.2568404797598 626.9239462586881 C 310.51458998793055 627.9503765506422 193.8477576431353 989.4893515092383 193.59001203489143 988.4629091317967 C 193.8477576431353 989.4893515092383 502.8225553914392 765.1300585384784 502.5647994548175 764.103623660896 C 502.8225553914392 765.1300585384784 551.5405732936613 799.7454923111098 551.2828157284988 798.7190562764064 C 551.5405732936613 799.7454923111098 548.9764670882812 184.36000301988236 548.9764670882812 184.36000301988236 z" id="svg_28"></path>
283 | 
284 | 
285 | // const star60 =
286 | //  <path  fill={props.color} opacity="NaN" d="M 598.9765380931935 340.77048154806937 C 598.9765380931935 340.77048154806937 502.8225553914392 40.77005551859597 502.8225553914392 40.77005551859597 C 502.8225553914392 40.77005551859597 382.30956373857373 401.0269773745021 382.051811830448 400.00055466812006 C 382.30956373857373 401.0269773745021 -1.024313965753322 402.3090304771921 0 401.28260772795375 C -1.024313965753322 402.3090304771921 310.51458998793055 625.3862703452621 310.2568404797598 624.3598401390207 C 310.51458998793055 625.3862703452621 193.8477576431353 990.7714046119283 193.59001203489143 989.7449621916303 C 193.8477576431353 990.7714046119283 501.54050228874905 765.1300585384784 501.28274639498375 764.103623660896 C 501.54050228874905 765.1300585384784 598.9765380931935 838.2070853918116 598.7187789423464 837.1806480714179 C 598.9765380931935 838.2070853918116 598.9765380931935 340.77048154806937 598.9765380931935 340.77048154806937 z" id="svg_29"></path>
287 | 
288 | // const star65 =
289 | //  <path  fill={props.color} opacity="NaN" d="M 651.5407153034857 403.59108357988214 C 651.5407153034857 403.59108357988214 622.0534939416145 399.744924271812 621.7957340193533 398.7185016082863 C 622.0534939416145 399.744924271812 501.54050228874905 42.052108621286024 501.28274639498375 41.02569791467898 C 501.54050228874905 42.052108621286024 381.0275106358837 404.8731366825722 380.76975877061426 403.8467138476212 C 381.0275106358837 404.8731366825722 1.5397922396267631 404.8731366825722 1.282053059833718 403.8467138476212 C 1.5397922396267631 404.8731366825722 311.7966430906206 626.6683234479522 311.5388935395935 625.6418931988544 C 311.7966430906206 626.6683234479522 190.00159833506515 992.0534577146184 189.7438528553903 991.027015251464 C 190.00159833506515 992.0534577146184 498.9763960833689 767.6941647438584 498.7186402753163 766.6677297805634 C 498.9763960833689 767.6941647438584 602.8226974012637 840.7711915971918 602.5649381218475 839.7447541910853 C 602.8226974012637 840.7711915971918 651.5407153034857 874.1045722671331 651.2829543955288 873.078133746762 C 651.5407153034857 874.1045722671331 651.5407153034857 403.59108357988214 651.5407153034857 403.59108357988214 z" id="svg_30"></path>
290 | 
291 | // const star70 =
292 | //  <path  fill={props.color} opacity="NaN" d="M 700.2587332057079 401.0269773745021 C 700.2587332057079 401.0269773745021 701.5407863083981 621.5401110371919 701.2830237290437 620.5136809595195 C 701.5407863083981 621.5401110371919 693.8484676922576 630.5144827560223 693.5907053700415 629.4880523783555 C 693.8484676922576 630.5144827560223 698.976680103018 652.3093855017532 698.7189176093764 651.2829543955288 C 698.976680103018 652.3093855017532 701.5407863083981 912.566165347835 701.2830237290437 911.5397255417736 C 701.5407863083981 912.566165347835 502.8225553914392 765.1300585384784 502.5647994548175 764.103623660896 C 502.8225553914392 765.1300585384784 193.8477576431353 988.2072984065481 193.59001203489143 987.1808560719629 C 193.8477576431353 988.2072984065481 313.07869619331063 625.3862703452621 313.07869619331063 625.3862703452621 C 313.07869619331063 625.3862703452621 2.8218453423168057 403.59108357988214 2.564106119667436 402.5646607877875 C 2.8218453423168057 403.59108357988214 381.0275106358837 401.0269773745021 380.76975877061426 400.00055466812006 C 381.0275106358837 401.0269773745021 500.258449186059 40.77005551859597 500.00069333515006 39.74364485484526 C 500.258449186059 40.77005551859597 700.2587332057079 401.0269773745021 700.2587332057079 401.0269773745021 z" id="svg_32"></path>
293 | 
294 | 
295 | // const star75 =
296 | //  <path  fill={props.color} opacity="NaN" d="M 750.2588042106202 403.59108357988214 L 751.2830930625588 587.1803014038429 L 691.026599250374 628.2059993185219 L 751.2830930625588 806.4113746354087 L 751.2830930625588 948.7192642769513 L 501.28274639498375 766.6677297805634 C 501.54050228874905 767.6941647438584 186.15543902699505 993.3355108173085 188.71954523237514 993.3355108173085 C 191.28365143775522 993.3355108173085 311.7966430906206 626.6683234479522 311.5388935395935 625.6418931988544 C 311.7966430906206 626.6683234479522 1.5397922396267631 402.3090304771921 1.282053059833718 401.28260772795375 C 1.5397922396267631 402.3090304771921 381.0275106358837 403.59108357988214 380.76975877061426 402.5646607877875 C 381.0275106358837 403.59108357988214 501.54050228874905 39.48800241590591 501.54050228874905 39.48800241590591 C 501.54050228874905 39.48800241590591 620.7714408389245 399.744924271812 620.5136809595195 398.7185016082863 C 620.7714408389245 399.744924271812 663.0791932276964 406.1551897852622 750.2588042106202 403.59108357988214 z" id="svg_36"></path>
297 | 
298 | // const star80 =
299 | //  <path  fill={props.color} opacity="NaN" d="M 801.5409283182227 402.3090304771921 C 801.5409283182227 402.3090304771921 801.5409283182227 549.7451372865487 801.2831623960737 548.7187096088313 C 801.5409283182227 549.7451372865487 692.5664145895676 625.3862703452621 692.3086523102078 624.3598401390207 C 692.5664145895676 625.3862703452621 801.5409283182227 962.5662363527472 801.2831623960737 961.5397948752885 C 801.5409283182227 962.5662363527472 802.8229814209126 983.0790859957881 802.5652154559075 982.0526438326281 C 802.8229814209126 983.0790859957881 502.8225553914392 767.6941647438584 502.5647994548175 766.6677297805634 C 502.8225553914392 767.6941647438584 193.8477576431353 990.7714046119283 193.59001203489143 989.7449621916303 C 193.8477576431353 990.7714046119283 311.7966430906206 626.6683234479522 311.5388935395935 625.6418931988544 C 311.7966430906206 626.6683234479522 1.5397922396267631 402.3090304771921 1.282053059833718 401.28260772795375 C 1.5397922396267631 402.3090304771921 381.0275106358837 401.0269773745021 380.76975877061426 400.00055466812006 C 381.0275106358837 401.0269773745021 500.258449186059 44.61621482666613 500.00069333515006 43.589804034346415 C 500.258449186059 44.61621482666613 618.2073346335444 401.0269773745021 617.9495748398521 400.00055466812006 C 618.2073346335444 401.0269773745021 801.5409283182227 402.3090304771921 801.5409283182227 402.3090304771921 z" id="svg_39"></path>
300 | 
301 | 
302 | // const star85 =
303 | //  <path  fill={props.color} opacity="NaN" d="M 850.2589462204446 402.3090304771921 C 850.2589462204446 402.3090304771921 848.9768931177546 511.283544205847 848.7191256099213 510.2571178138198 C 848.9768931177546 511.283544205847 691.2843614868775 625.3862703452621 691.026599250374 624.3598401390207 C 691.2843614868775 625.3862703452621 809.2332469343628 986.9252453038583 808.9754807550761 985.8988030121292 C 809.2332469343628 986.9252453038583 501.54050228874905 766.4121116411685 501.28274639498375 765.3856767207296 C 501.54050228874905 766.4121116411685 192.56570454044527 990.7714046119283 192.30795897505772 989.7449621916303 C 192.56570454044527 990.7714046119283 309.2325368852405 625.3862703452621 308.97478741992603 624.3598401390207 C 309.2325368852405 625.3862703452621 2.8218453423168057 402.3090304771921 2.564106119667436 401.28260772795375 C 2.8218453423168057 402.3090304771921 378.4634044305036 403.59108357988214 378.20565265094683 402.5646607877875 C 378.4634044305036 403.59108357988214 501.54050228874905 44.61621482666613 501.28274639498375 43.589804034346415 C 501.54050228874905 44.61621482666613 616.9252815308541 403.59108357988214 616.6675217800184 402.5646607877875 C 616.9252815308541 403.59108357988214 850.2589462204446 402.3090304771921 850.2589462204446 402.3090304771921 z" id="svg_40"></path>
304 | 
305 | // const star90 =
306 | //  <path  fill={props.color} opacity="NaN" d="M 900.259017225357 403.59108357988214 L 901.2833010631037 475.6416851983094 L 691.026599250374 629.4880523783555 L 810.2575338149098 989.7449621916303 L 500.00069333515006 766.6677297805634 L 187.17974673572283 992.3090683112978 L 308.97478741992603 623.077787079187 L 0 400.00055466812006 L 380.76975877061426 401.28260772795375 L 502.5647994548175 37.17953873517782 L 617.9495748398521 394.87234242878515 L 900.259017225357 403.59108357988214 z" id="svg_45"></path>
307 | 
308 | // const star90 =
309 | //  <path  fill={props.color} opacity="NaN" d="M 951.5411413329591 401.0269773745021 L 948.7192642769513 442.3083056426327 L 689.7445461905403 626.9239462586881 L 811.5395868747436 988.4629091317967 L 498.7186402753163 764.103623660896 L 189.7438528553903 991.027015251464 L 308.97478741992603 623.077787079187 L 0 401.28260772795375 L 379.4877057107806 400.00055466812006 C 379.74545753319364 401.0269773745021 501.54050228874905 40.77005551859597 501.54050228874905 40.77005551859597 C 501.54050228874905 40.77005551859597 622.0534939416145 399.744924271812 621.7957340193533 398.7185016082863 C 622.0534939416145 399.744924271812 616.9252815308541 401.0269773745021 951.5411413329591 401.0269773745021 z" id="svg_48"></path>
310 | 
311 | // const star100 =
312 | //  <path  fill={props.color} d="M2.7056374921686173,403.0461809933538 L383.63458629458756,403.0461809933538 L501.3445626682144,41.16467576169576 L619.0546059732819,403.0461809933538 L999.9834878443443,403.0461809933538 L691.8060586221775,626.6986908990209 L809.5221257531576,988.5801961306754 L501.3445626682144,764.9215954576224 L193.1670665146788,988.5801961306754 L310.8831671113741,626.6986908990209 L2.7056374921686173,403.0461809933538 z"  stroke="#000"></path>
313 | 


--------------------------------------------------------------------------------