├── .gitignore
├── public
    └── favicon.ico
├── src
    ├── assets
    │   ├── logo.png
    │   ├── homeBack.png
    │   ├── logo.svg
    │   └── menu.svg
    ├── App.vue
    ├── lib
    │   ├── Layout
    │   │   ├── Footer.vue
    │   │   ├── Header.vue
    │   │   ├── Side.vue
    │   │   ├── index.ts
    │   │   ├── Content.vue
    │   │   └── Layout.vue
    │   ├── Tab.vue
    │   ├── Icon.vue
    │   ├── Message
    │   │   ├── index.ts
    │   │   └── Message.vue
    │   ├── Radio
    │   │   ├── RadioGroup.vue
    │   │   └── Radio.vue
    │   ├── Spin.vue
    │   ├── index.ts
    │   ├── CheckBox
    │   │   ├── CheckBoxGroup.vue
    │   │   └── CheckBox.vue
    │   ├── Table.vue
    │   ├── Affix.vue
    │   ├── Carousel
    │   │   └── CarouselItem.vue
    │   ├── Collapse
    │   │   ├── Collapse.vue
    │   │   └── CollapseItem.vue
    │   ├── Dialog.vue
    │   ├── Switch.vue
    │   ├── Cascader
    │   │   ├── Cascader.vue
    │   │   └── CascaderItems.vue
    │   ├── Tabs.vue
    │   ├── Button.vue
    │   ├── Drawer.vue
    │   ├── Input.vue
    │   ├── Pager.vue
    │   └── Rate.vue
    ├── components
    │   ├── SpinDemos
    │   │   ├── BasicSpin.vue
    │   │   ├── TextSpin.vue
    │   │   └── SizeSpin.vue
    │   ├── ButtonDemos
    │   │   ├── BtnSize.vue
    │   │   ├── BtnType.vue
    │   │   ├── BtnLoading.vue
    │   │   ├── BtnDisabled.vue
    │   │   └── BtnLevel.vue
    │   ├── AffixDemos
    │   │   ├── BasicAffix.vue
    │   │   └── AssignAffix.vue
    │   ├── Other
    │   │   ├── Markdown.vue
    │   │   ├── Main.vue
    │   │   └── Aside.vue
    │   ├── SwitchDemos
    │   │   ├── Loading.vue
    │   │   ├── DefaultValue.vue
    │   │   ├── Disabled.vue
    │   │   └── Size.vue
    │   ├── CheckBoxDemos
    │   │   ├── BasicCheckBox.vue
    │   │   ├── DisabledCheckBox.vue
    │   │   ├── GroupCheckBox.vue
    │   │   └── IndeterminateCheckBox.vue
    │   ├── RateDemos
    │   │   ├── ClearRate.vue
    │   │   ├── DIsableRate.vue
    │   │   ├── HalfRate.vue
    │   │   ├── IconRate.vue
    │   │   ├── TextRate.vue
    │   │   └── BasicRate.vue
    │   ├── Popover
    │   │   ├── BasicPopover.vue
    │   │   ├── DirectionPopover.vue
    │   │   └── TriggerPopover.vue
    │   ├── InputDemos
    │   │   ├── BasicInput.vue
    │   │   ├── ShowPassword.vue
    │   │   ├── ClearableInput.vue
    │   │   ├── DisabledInput.vue
    │   │   ├── TextareaInput.vue
    │   │   └── IconInput.vue
    │   ├── PagerDemos
    │   │   ├── MorePager.vue
    │   │   ├── SizePager.vue
    │   │   ├── SimplePager.vue
    │   │   └── BasicPager.vue
    │   ├── RadioDemos
    │   │   ├── BasicRadio.vue
    │   │   ├── DisabledRadio.vue
    │   │   └── RadioGroup.vue
    │   ├── TabsDemos
    │   │   ├── BasicDemo.vue
    │   │   ├── VerticalTabs.vue
    │   │   └── DisabledTabs.vue
    │   ├── MessageDemos
    │   │   ├── BasicMessage.vue
    │   │   ├── TypeMessage.vue
    │   │   ├── CloseMessage.vue
    │   │   └── DurationMessage.vue
    │   ├── IconDemos
    │   │   └── basicIcon.vue
    │   ├── DrawerDemos
    │   │   ├── CustomDrawer.vue
    │   │   ├── BasicDrawer.vue
    │   │   └── PlacementDrawer.vue
    │   ├── IconDemo.vue
    │   ├── LayoutDemos
    │   │   ├── LayoutDemo1.vue
    │   │   ├── LayoutDemo2.vue
    │   │   ├── LayoutDemo3.vue
    │   │   └── LayoutDemo4.vue
    │   ├── CarouselDemos
    │   │   ├── BasicCarousel.vue
    │   │   ├── Duration.vue
    │   │   ├── SignCarousel.vue
    │   │   └── AnimationCarousel.vue
    │   ├── DialogDemos
    │   │   ├── BasicDialog.vue
    │   │   └── FooterDialog.vue
    │   ├── CascaderDemos
    │   │   ├── Multilayer.vue
    │   │   ├── BasicCascader.vue
    │   │   └── DisabledCascader.vue
    │   ├── AffixDemo.vue
    │   ├── SpinDemo.vue
    │   ├── PopoverDemo.vue
    │   ├── LayoutDemo.vue
    │   ├── TabsDemo.vue
    │   ├── RadioDemo.vue
    │   ├── Demo.vue
    │   ├── CollapseDemo.vue
    │   ├── CheckBoxDemo.vue
    │   ├── CollapseDemos
    │   │   ├── DisabledCollapse.vue
    │   │   ├── AccordionCollapse.vue
    │   │   └── BasicCollapse.vue
    │   ├── CascaderDemo.vue
    │   ├── CarouselDemo.vue
    │   ├── DrawerDemo.vue
    │   ├── ButtonDemo.vue
    │   ├── DialogDemo.vue
    │   ├── MessageDemo.vue
    │   ├── PagerDemo.vue
    │   ├── SwitchDemo.vue
    │   ├── RateDemo.vue
    │   └── InputDemo.vue
    ├── shims-vue.d.ts
    ├── main.ts
    ├── markdown
    │   ├── get-started.md
    │   └── intro.md
    ├── styles
    │   ├── index.scss
    │   └── le.scss
    ├── views
    │   ├── Doc.vue
    │   ├── TopNav.vue
    │   └── Home.vue
    └── router.ts
├── .vscode
    └── settings.json
├── deploy.sh
├── index.html
├── utils.ts
├── README.md
├── vite.config.ts
├── package.json
├── rollup.config.js
└── plugins
    └── md.ts


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | *.local
5 | .idea/*
6 | /dist


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mywebc/le-vue/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mywebc/le-vue/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/homeBack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mywebc/le-vue/HEAD/src/assets/homeBack.png


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "vue3snippets.enable-compile-vue-file-on-did-save-code": false
3 | }


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <router-view />
3 | </template>
4 | 
5 | <script>
6 | export default {};
7 | </script>
8 | 
9 | 


--------------------------------------------------------------------------------
/src/lib/Layout/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="le-layout-footer">
 3 |     <slot></slot>
 4 | </div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | export default {
 9 | 
10 | }
11 | </script>


--------------------------------------------------------------------------------
/src/lib/Layout/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="le-layout-header">
 3 |     <slot></slot>
 4 | </div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | export default {
 9 | 
10 | }
11 | </script>


--------------------------------------------------------------------------------
/src/lib/Layout/Side.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="le-layout-side">
 3 |     <slot></slot>
 4 | </div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | export default {
 9 | 
10 | }
11 | </script>
12 | 


--------------------------------------------------------------------------------
/src/components/SpinDemos/BasicSpin.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 基础用法
 3 | </demo>
 4 | 
 5 | <template>
 6 |   <Spin/>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import Spin from "../../lib/Spin.vue";
11 | export default {
12 |   components: { Spin },
13 | };
14 | </script>
15 | 


--------------------------------------------------------------------------------
/src/lib/Layout/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Content  } from "./Content.vue";
2 | export { default as Footer  } from "./Footer.vue";
3 | export { default as Header  } from "./Header.vue";
4 | export { default as Layout  } from "./Layout.vue";
5 | export { default as Side  } from "./Side.vue";
6 | 
7 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
 1 | declare module '*.vue' {
 2 |     //@ts-ignore
 3 |     import { ComponentOptions } from 'vue'
 4 |     const componentOptions: ComponentOptions
 5 |     export default componentOptions
 6 |   }
 7 | 
 8 |   declare module '*.md' {
 9 |    const str:string
10 |     export default str
11 |   }


--------------------------------------------------------------------------------
/src/lib/Layout/Content.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="le-layout-content">
 3 |     <slot></slot>
 4 | </div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | export default {
 9 | 
10 | }
11 | </script>
12 | 
13 | <style lang="scss" scoped>
14 | .le-layout-content {
15 |     flex-grow: 1;
16 | }
17 | </style>
18 | 


--------------------------------------------------------------------------------
/src/components/SpinDemos/TextSpin.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 自定义描述文案
 3 | </demo>
 4 | 
 5 | <template>
 6 |   <Spin tip="loading" />&nbsp;
 7 |   <Spin tip="加载中" />
 8 | </template>
 9 | 
10 | <script lang="ts">
11 | import Spin from "../../lib/Spin.vue";
12 | export default {
13 |   components: { Spin },
14 | };
15 | </script>
16 | 


--------------------------------------------------------------------------------
/src/components/SpinDemos/SizeSpin.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 各种大小
 3 | </demo>
 4 | 
 5 | <template>
 6 |   <Spin />
 7 |   <Spin size="small" />
 8 |   <Spin size="big" />
 9 | </template>
10 | 
11 | <script lang="ts">
12 | import Spin from "../../lib/Spin.vue";
13 | 
14 | export default {
15 |     components: { Spin }
16 | };
17 | </script>
18 | 


--------------------------------------------------------------------------------
/src/lib/Tab.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     :class="{
 4 |       'le-tabs-tab': true,
 5 |     }"
 6 |   >
 7 |     <slot />
 8 |   </div>
 9 | </template>
10 | 
11 | <script lang="ts">
12 | export default {
13 |   props: {
14 |     disabled: {
15 |       type: Boolean,
16 |       default: false,
17 |     },
18 |   },
19 | };
20 | </script>
21 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import "./styles/le.scss";
 2 | import "./styles/index.scss";
 3 | // @ts-ignore
 4 | import { createApp } from "vue";
 5 | // @ts-ignore
 6 | import App from "./App.vue";
 7 | // @ts-ignore
 8 | import { router } from "./router";
 9 | 
10 | import "github-markdown-css";
11 | 
12 | const app = createApp(App);
13 | app.use(router);
14 | app.mount("#app");


--------------------------------------------------------------------------------
/deploy.sh:
--------------------------------------------------------------------------------
 1 | rm -rf dist
 2 | yarn build
 3 | cd dist
 4 | git init
 5 | git add .
 6 | git commit -m "update"
 7 | git remote add gitee git@gitee.com:ChenXiaoLaNi/le-ui-docs.git
 8 | git remote add origin git@github.com:mywebc/le-vue.git
 9 | git push -f -u origin master:docs
10 | git push -f -u gitee master
11 | cd -
12 | echo https://chenxiaolani.com/le-vue/index.html#/


--------------------------------------------------------------------------------
/src/components/ButtonDemos/BtnSize.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | <demo>
 3 | 尺寸大小
 4 | </demo>
 5 | 
 6 | <template>
 7 |     <Button>normal</Button>
 8 |     <Button size="big">big</Button>
 9 |     <Button size="small">small</Button>
10 | </template>
11 | 
12 | <script lang="ts">
13 | import Button from "../../lib/Button.vue"
14 | 
15 | export default {
16 |     components: { Button }
17 | }
18 | </script>


--------------------------------------------------------------------------------
/src/components/ButtonDemos/BtnType.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | <demo>
 3 | 基础用法
 4 | </demo>
 5 | 
 6 | <template>
 7 |     <Button>default</Button>
 8 |     <Button theme="link">link</Button>
 9 |     <Button theme="text">text</Button>
10 | </template>
11 | 
12 | <script lang="ts">
13 | import Button from "../../lib/Button.vue"
14 | 
15 | export default {
16 |     components: { Button },
17 | }
18 | </script>


--------------------------------------------------------------------------------
/src/components/AffixDemos/BasicAffix.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 基础用法
 3 | </demo>
 4 | 
 5 | <template>
 6 |   <Affix>
 7 |     <Button level="main">Affix固定</Button>
 8 |   </Affix>
 9 | </template>
10 | 
11 | <script lang="ts">
12 | import Affix from "../../lib/Affix.vue";
13 | import Button from "../../lib/Button.vue";
14 | 
15 | export default {
16 |   components: { Affix, Button },
17 | };
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/components/ButtonDemos/BtnLoading.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | <demo>
 3 | 加载状态
 4 | </demo>
 5 | 
 6 | <template>
 7 |     <Button loading>normal loading</Button>
 8 |     <Button theme="text" level="danger" loading>danger text loading</Button>
 9 | </template>
10 | 
11 | <script lang="ts">
12 | import Button from "../../lib/Button.vue"
13 | 
14 | export default {
15 |     components: { Button }
16 | }
17 | </script>


--------------------------------------------------------------------------------
/src/components/AffixDemos/AssignAffix.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 指定距离
 3 | </demo>
 4 | 
 5 | <template>
 6 |   <Affix offsetTop="100">
 7 |     <Button level="main">Affix指定距离100</Button>
 8 |   </Affix>
 9 | </template>
10 | 
11 | <script lang="ts">
12 | import Affix from "../../lib/Affix.vue";
13 | import Button from "../../lib/Button.vue";
14 | 
15 | export default {
16 |   components: { Affix, Button },
17 | };
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/components/Other/Markdown.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <article class="markdown-body" v-html="content"></article>
 3 | </template>
 4 | 
 5 | <script lang="ts">
 6 | import { ref } from "vue";
 7 | import "github-markdown-css/github-markdown.css";
 8 | 
 9 | export default {
10 |   props: {
11 |     content: {
12 |       type: String,
13 |       required: true,
14 |     },
15 |   },
16 |   setup() {},
17 | };
18 | </script>
19 | 
20 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <link rel="icon" href="/favicon.ico" />
 6 |   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
 7 |   <title>Vite App</title>
 8 | </head>
 9 | <body>
10 |   <div id="app"></div>
11 |   <script type="module" src="/src/main.ts"></script>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/components/SwitchDemos/Loading.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 加载状态
 3 | </demo>
 4 | 
 5 | <template>
 6 |   <Switch v-model:value="value" :loading="true"/>&nbsp;
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import Switch from "../../lib/Switch.vue";
11 | import { ref } from "vue";
12 | export default {
13 |   components: { Switch },
14 |   setup() {
15 |     const value = ref(true);
16 |     return {
17 |       value
18 |     };
19 |   }
20 | };
21 | </script>
22 | 


--------------------------------------------------------------------------------
/src/components/CheckBoxDemos/BasicCheckBox.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 基本用法
 3 | </demo>
 4 | 
 5 | <template>
 6 |   <CheckBox v-model:value="checked" label="备选项A" />
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import CheckBox from "../../lib/CheckBox/CheckBox.vue";
11 | import { ref } from "vue";
12 | export default {
13 |   components: { CheckBox },
14 |   setup() {
15 |     const checked = ref(true);
16 |     return {
17 |       checked,
18 |     };
19 |   },
20 | };
21 | </script>
22 | 


--------------------------------------------------------------------------------
/src/components/RateDemos/ClearRate.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 可清除
 3 | </demo>
 4 | 
 5 | <template>
 6 | <Rate v-model:value="value" allowClear/>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import Rate from "../../lib/Rate.vue";
11 | import {
12 |     ref
13 | } from "vue";
14 | export default {
15 |     components: {
16 |         Rate
17 |     },
18 |     setup() {
19 |         const value = ref(1);
20 |         return {
21 |             value
22 |         }
23 |     }
24 | }
25 | </script>
26 | 


--------------------------------------------------------------------------------
/src/components/RateDemos/DIsableRate.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 只读
 3 | </demo>
 4 | 
 5 | <template>
 6 | <Rate v-model:value="value" disabled/>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import Rate from "../../lib/Rate.vue";
11 | import {
12 |     ref
13 | } from "vue";
14 | export default {
15 |     components: {
16 |         Rate
17 |     },
18 |     setup() {
19 |         const value = ref(1);
20 |         return {
21 |             value
22 |         }
23 |     }
24 | }
25 | </script>
26 | 


--------------------------------------------------------------------------------
/src/components/RateDemos/HalfRate.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 支持半选
 3 | </demo>
 4 | 
 5 | <template>
 6 | <Rate v-model:value="value" allowHalf/>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import Rate from "../../lib/Rate.vue";
11 | import {
12 |     ref
13 | } from "vue";
14 | export default {
15 |     components: {
16 |         Rate
17 |     },
18 |     setup() {
19 |         const value = ref(3.5);
20 |         return {
21 |             value
22 |         }
23 |     }
24 | }
25 | </script>
26 | 


--------------------------------------------------------------------------------
/src/components/RateDemos/IconRate.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 替换icon
 3 | </demo>
 4 | 
 5 | <template>
 6 | <Rate v-model:value="value" iconName="smile"/>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import Rate from "../../lib/Rate.vue";
11 | import {
12 |     ref
13 | } from "vue";
14 | export default {
15 |     components: {
16 |         Rate
17 |     },
18 |     setup() {
19 |         const value = ref(2);
20 |         return {
21 |             value
22 |         }
23 |     }
24 | }
25 | </script>
26 | 


--------------------------------------------------------------------------------
/src/components/SwitchDemos/DefaultValue.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 基础用法
 3 | </demo>
 4 | 
 5 | <template>
 6 |   <Switch v-model:value="on" />&nbsp;
 7 |   <Switch v-model:value="off" />
 8 | </template>
 9 | 
10 | <script lang="ts">
11 | import Switch from "../../lib/Switch.vue";
12 | import { ref } from "vue";
13 | export default {
14 |   components: { Switch },
15 |   setup() {
16 |     const on = ref(true);
17 |     const off = ref(false);
18 |     return { on, off };
19 |   }
20 | };
21 | </script>
22 | 


--------------------------------------------------------------------------------
/src/components/Popover/BasicPopover.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 基本用法
 3 | </demo>
 4 | 
 5 | <template>
 6 |   <popover>
 7 |     <template v-slot:content>
 8 |       <div>popover内容</div>
 9 |     </template>
10 |     <Button>click me</Button>
11 |   </popover>
12 | </template>
13 | 
14 | <script lang="ts">
15 | import Popover from "../../lib/Popover.vue";
16 | import Button from "../../lib/Button.vue";
17 | import { ref } from "vue";
18 | 
19 | export default {
20 |   components: { Popover, Button },
21 | };
22 | </script>
23 | 


--------------------------------------------------------------------------------
/src/components/ButtonDemos/BtnDisabled.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | <demo>
 3 | 禁用状态
 4 | </demo>
 5 | 
 6 | <template>
 7 |     <Button disabled>normal disabled</Button>
 8 |     <Button level="main" disabled>main normal</Button>
 9 |     <Button level="danger" disabled>danger normal</Button>
10 |     <Button theme="text" level="danger" disabled>danger text</Button>
11 | </template>
12 | 
13 | <script lang="ts">
14 | import Button from "../../lib/Button.vue"
15 | 
16 | export default {
17 |     components: { Button }
18 | }
19 | </script>


--------------------------------------------------------------------------------
/src/components/InputDemos/BasicInput.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 基本用法
 3 | </demo>
 4 | 
 5 | <template>
 6 | <Input placeholder="请输入内容" v-model:value="value" />
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import Input from "../../lib/Input.vue";
11 | import {
12 |     ref
13 | } from "vue";
14 | 
15 | export default {
16 |     components: {
17 |         Input
18 |     },
19 |     setup() {
20 |         const value = ref("123")
21 |         return {
22 |             value
23 |         }
24 |     }
25 | }
26 | </script>
27 | 


--------------------------------------------------------------------------------
/src/components/InputDemos/ShowPassword.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 密码框
 3 | </demo>
 4 | 
 5 | <template>
 6 |     <Input placeholder="请输入内容" show-password v-model:value="value"/>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import Input from "../../lib/Input.vue";
11 | import { ref } from "vue";
12 | export default {
13 |     components: {
14 |         Input
15 |     },
16 |      setup() {
17 |         const value = ref("")
18 |         return {
19 |             value
20 |         }
21 |     }
22 | }
23 | </script>
24 | 
25 | 


--------------------------------------------------------------------------------
/utils.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 判断两个字符串数组是否相等
 3 |  */
 4 | export const isSameStringArr = (arr1:string[], arr2:string[]) => {
 5 |     let hash = JSON.parse(JSON.stringify(arr2))
 6 |     if (arr1.length === arr2.length) {
 7 |       for(let i = 0; i < arr1.length;i++) {
 8 |         const index = hash.indexOf(arr1[i]);
 9 |         if (index > -1) {
10 |           hash.splice(index, 1);
11 |         } else {
12 |           return false;
13 |         }
14 |       }
15 |       return true;
16 |     }
17 |     return false;
18 | }


--------------------------------------------------------------------------------
/src/components/InputDemos/ClearableInput.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 可清空
 3 | </demo>
 4 | 
 5 | <template>
 6 |     <Input placeholder="请输入内容" clearable v-model:value="value"/>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import Input from "../../lib/Input.vue"
11 | import { ref } from "vue";
12 | 
13 | export default {
14 |     components: {
15 |         Input
16 |     },
17 |      setup() {
18 |         const value = ref("")
19 |         return {
20 |             value
21 |         }
22 |     }
23 | }
24 | </script>
25 | 
26 | 


--------------------------------------------------------------------------------
/src/components/InputDemos/DisabledInput.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 禁用状态
 3 | </demo>
 4 | 
 5 | <template>
 6 |     <Input placeholder="请输入内容" disabled v-model:value="value"/>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import Input from "../../lib/Input.vue";
11 | import { ref } from "vue";
12 | 
13 | export default {
14 |     components: {
15 |         Input
16 |     },
17 |      setup() {
18 |         const value = ref("")
19 |         return {
20 |             value
21 |         }
22 |     }
23 | }
24 | </script>
25 | 
26 | 


--------------------------------------------------------------------------------
/src/components/InputDemos/TextareaInput.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 文本域
 3 | </demo>
 4 | 
 5 | <template>
 6 |     <Input placeholder="请输入内容" type="textarea" v-model:value="value"/>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import Input from "../../lib/Input.vue";
11 | import { ref } from "vue";
12 | export default {
13 |     components: {
14 |         Input
15 |     },
16 |      setup() {
17 |         const value = ref("")
18 |         return {
19 |             value
20 |         }
21 |     }
22 | }
23 | </script>
24 | 
25 | 


--------------------------------------------------------------------------------
/src/components/RateDemos/TextRate.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 辅助文字
 3 | </demo>
 4 | 
 5 | <template>
 6 | <Rate v-model:value="value" :tooltips="['极差', '失望', '一般', '满意', '惊喜']"/>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import Rate from "../../lib/Rate.vue";
11 | import {
12 |     ref
13 | } from "vue";
14 | export default {
15 |     components: {
16 |         Rate
17 |     },
18 |     setup() {
19 |         const value = ref(2);
20 |         return {
21 |             value
22 |         }
23 |     }
24 | }
25 | </script>
26 | 


--------------------------------------------------------------------------------
/src/components/PagerDemos/MorePager.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 更多
 3 | </demo>
 4 | <template>
 5 |   <Pager :totalPage="100" v-model:currentPage="currentPage" />
 6 | </template>
 7 | 
 8 | <script lang="ts">
 9 | import Pager from "../../lib/Pager.vue";
10 | import Button from "../../lib/Button.vue";
11 | import { ref } from "vue";
12 | 
13 | export default {
14 |   components: { Button, Pager },
15 |   setup() {
16 |     const currentPage = ref(1);
17 |     return {
18 |       currentPage,
19 |     };
20 |   },
21 | };
22 | </script>
23 | 


--------------------------------------------------------------------------------
/src/components/SwitchDemos/Disabled.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 禁用状态
 3 | </demo>
 4 | 
 5 | <template>
 6 |   <Switch v-model:value="off" :disabled="true" />&nbsp;
 7 |   <Switch v-model:value="on" :disabled="true" />
 8 | </template>
 9 | 
10 | <script lang="ts">
11 | import Switch from "../../lib/Switch.vue";
12 | import { ref } from "vue";
13 | export default {
14 |   components: { Switch },
15 |   setup() {
16 |     const off = ref(false);
17 |     const on = ref(true);
18 |     return { off, on };
19 |   }
20 | };
21 | </script>
22 | 


--------------------------------------------------------------------------------
/src/components/PagerDemos/SizePager.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 迷你模式
 3 | </demo>
 4 | <template>
 5 |   <Pager :totalPage="100" v-model:currentPage="currentPage" size="small"/>
 6 | </template>
 7 | 
 8 | <script lang="ts">
 9 | import Pager from "../../lib/Pager.vue";
10 | import Button from "../../lib/Button.vue";
11 | import { ref } from "vue";
12 | 
13 | export default {
14 |   components: { Button, Pager },
15 |   setup() {
16 |     const currentPage = ref(1);
17 |     return {
18 |       currentPage,
19 |     };
20 |   },
21 | };
22 | </script>
23 | 


--------------------------------------------------------------------------------
/src/components/PagerDemos/SimplePager.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 简洁模式
 3 | </demo>
 4 | <template>
 5 |   <Pager :totalPage="100" v-model:currentPage="currentPage" :simple="true"/>
 6 | </template>
 7 | 
 8 | <script lang="ts">
 9 | import Pager from "../../lib/Pager.vue";
10 | import Button from "../../lib/Button.vue";
11 | import { ref } from "vue";
12 | 
13 | export default {
14 |   components: { Button, Pager },
15 |   setup() {
16 |     const currentPage = ref(1);
17 |     return {
18 |       currentPage,
19 |     };
20 |   },
21 | };
22 | </script>
23 | 


--------------------------------------------------------------------------------
/src/components/RadioDemos/BasicRadio.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 基本用法
 3 | </demo>
 4 | 
 5 | <template>
 6 |   <Radio v-model:value="radio" label="aaa" name="a">备选项A</Radio>
 7 |   <Radio v-model:value="radio" label="bbb" name="a">备选项B</Radio>
 8 | </template>
 9 | 
10 | <script lang="ts">
11 | import Radio from "../../lib/Radio/Radio.vue";
12 | import { ref } from "vue";
13 | 
14 | export default {
15 |   components: { Radio },
16 |   setup() {
17 |     const radio = ref("bbb");
18 |     return {
19 |       radio,
20 |     };
21 |   },
22 | };
23 | </script>
24 | 


--------------------------------------------------------------------------------
/src/components/SwitchDemos/Size.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 尺寸大小
 3 | </demo>
 4 | 
 5 | <template>
 6 |   <Switch v-model:value="value" />&nbsp;
 7 |   <Switch v-model:value="value" size="small" />&nbsp;
 8 |   <Switch v-model:value="value" size="large" />
 9 | </template>
10 | 
11 | <script lang="ts">
12 | import Switch from "../../lib/Switch.vue";
13 | import { ref } from "vue";
14 | export default {
15 |   components: { Switch },
16 |   setup() {
17 |     const value = ref(true);
18 |     return {
19 |       value
20 |     };
21 |   }
22 | };
23 | </script>
24 | 


--------------------------------------------------------------------------------
/src/markdown/get-started.md:
--------------------------------------------------------------------------------
 1 | ## 安装
 2 | 
 3 | 打开终端运行下列命令：
 4 | 
 5 | ```js
 6 | npm install le-vue-ui
 7 | // 或者
 8 | yarn add le-vue-ui
 9 | ```
10 | 
11 | ## 引入组件
12 | 
13 | ```js
14 | import { Button, Switch, Radio } from "le-vue-ui"
15 | import "le-vue-ui/dist/lib/leUI.esm.css"
16 | ```
17 | 
18 | ## Vue 单文件组件
19 | 
20 | ```html
21 | <template>
22 |   <div>
23 |     <Button>按钮</Button>
24 |   </div>
25 | </template>
26 | <script>
27 | import { Button } from "le-vue-ui"
28 | export default {
29 |   components: { Button }
30 | }
31 | </script>
32 | ```


--------------------------------------------------------------------------------
/src/components/RadioDemos/DisabledRadio.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 禁用
 3 | </demo>
 4 | 
 5 | <template>
 6 |   <Radio v-model:value="radio" label="xxx" name="b" disabled>备选项</Radio> 
 7 |   <Radio v-model:value="radio" label="yyy" name="b" disabled>备选项</Radio>
 8 | </template>
 9 | 
10 | <script lang="ts">
11 | import Radio from "../../lib/Radio/Radio.vue";
12 | import { ref } from "vue";
13 | 
14 | export default {
15 |   components: { Radio },
16 |   setup() {
17 |     const radio = ref("yyy");
18 |     return {
19 |       radio,
20 |     };
21 |   },
22 | };
23 | </script>
24 | 


--------------------------------------------------------------------------------
/src/components/Other/Main.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="main">
 3 |     <div class="doc-wrapper">
 4 |         <router-view></router-view>
 5 |     </div>
 6 | </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {};
11 | </script>
12 | 
13 | <style lang="scss" scoped>
14 | .main {
15 |     width: 100%;
16 |     // height: calc(100vh - 80px);
17 |     display: flex;
18 |     // overflow: hidden;
19 | 
20 |     .doc-wrapper {
21 |         width: 100%;
22 |         // overflow: auto;
23 |         padding: 20px 40px 40px 40px;
24 |     }
25 | }
26 | </style>
27 | 


--------------------------------------------------------------------------------
/src/lib/Icon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <svg class="le-icon">
 3 |     <use :xlink:href="`#icon-${name}`" :class="name"></use>
 4 | </svg>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import  "../assets/js/iconFont.js";
 9 | 
10 | export default {
11 |     props: {
12 |         name: {
13 |             type: String,
14 |         }
15 |     }
16 | }
17 | </script>
18 | 
19 | <style lang="scss" scoped>
20 | .le-icon {
21 |     width: 1em;
22 |     height: 1em;
23 |     vertical-align: -0.15em;
24 |     fill: currentColor;
25 |     overflow: hidden;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/src/components/TabsDemos/BasicDemo.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 基础用法
 3 | </demo>
 4 | 
 5 | <template>
 6 |   <Tabs v-model:selected="current">
 7 |     <Tab title="导航一">tab1</Tab>
 8 |     <Tab title="导航二">tab2</Tab>
 9 |     <Tab title="导航三">tab3</Tab>
10 |   </Tabs>
11 | </template>
12 | 
13 | <script lang="ts">
14 | import Tabs from "../../lib/Tabs.vue";
15 | import Tab from "../../lib/Tab.vue";
16 | import { ref } from "vue";
17 | export default {
18 |   components: { Tabs, Tab },
19 |   setup() {
20 |     const current = ref("导航一");
21 | 
22 |     return { current };
23 |   },
24 | };
25 | </script>
26 | 


--------------------------------------------------------------------------------
/src/components/MessageDemos/BasicMessage.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 基本用法
 3 | </demo>
 4 | <template>
 5 |   <Button @click="openDefault">default</Button>
 6 | </template>
 7 | 
 8 | <script lang="ts">
 9 | import { Message } from "../../lib/Message/index";
10 | import Button from "../../lib/Button.vue";
11 | import { ref } from "vue";
12 | 
13 | export default {
14 |   components: { Button },
15 |   setup() {
16 |     const openDefault = () => {
17 |       Message({
18 |         message: "这是一条message",
19 |       });
20 |     };
21 |     return {
22 |       openDefault,
23 |     };
24 |   },
25 | };
26 | </script>
27 | 


--------------------------------------------------------------------------------
/src/components/TabsDemos/VerticalTabs.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 纵向
 3 | </demo>
 4 | 
 5 | <template>
 6 |   <Tabs v-model:selected="current" vertical>
 7 |     <Tab title="导航一">tab1</Tab>
 8 |     <Tab title="导航二">tab2</Tab>
 9 |     <Tab title="导航三">tab3</Tab>
10 |   </Tabs>
11 | </template>
12 | 
13 | <script lang="ts">
14 | import Tabs from "../../lib/Tabs.vue";
15 | import Tab from "../../lib/Tab.vue";
16 | import { ref } from "vue";
17 | export default {
18 |   components: { Tabs, Tab },
19 |   setup() {
20 |     const current = ref("导航一");
21 | 
22 |     return { current };
23 |   },
24 | };
25 | </script>
26 | 


--------------------------------------------------------------------------------
/src/components/TabsDemos/DisabledTabs.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 禁用
 3 | </demo>
 4 | 
 5 | <template>
 6 |   <Tabs v-model:selected="current">
 7 |     <Tab title="导航一">tab1</Tab>
 8 |     <Tab title="导航二" :disabled="true">tab2</Tab>
 9 |     <Tab title="导航三">tab3</Tab>
10 |   </Tabs>
11 | </template>
12 | 
13 | <script lang="ts">
14 | import Tabs from "../../lib/Tabs.vue";
15 | import Tab from "../../lib/Tab.vue";
16 | import { ref } from "vue";
17 | export default {
18 |   components: { Tabs, Tab },
19 |   setup() {
20 |     const current = ref("导航一");
21 | 
22 |     return { current };
23 |   },
24 | };
25 | </script>
26 | 


--------------------------------------------------------------------------------
/src/components/CheckBoxDemos/DisabledCheckBox.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 |     禁用状态
 3 | </demo>
 4 | 
 5 | <template>
 6 |   <CheckBox v-model:value="check_a" disabled label="备选项A"/>
 7 |   <CheckBox v-model:value="check_b" label="备选项B" indeterminate/>
 8 | </template>
 9 | <script lang="ts">
10 | import CheckBox from "../../lib/CheckBox/CheckBox.vue";
11 | import { ref } from "vue";
12 | 
13 | export default {
14 |   components: { CheckBox },
15 |   setup() {
16 |     const check_a = ref(true);
17 |     const check_b = ref(false);
18 |     return {
19 |       check_a,
20 |       check_b,
21 |     };
22 |   },
23 | };
24 | </script>
25 | 


--------------------------------------------------------------------------------
/src/components/PagerDemos/BasicPager.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 基本用法
 3 | </demo>
 4 | <template>
 5 |   <Pager :totalPage="5" v-model:currentPage="currentPage" @currentChange="aa"/>
 6 | </template>
 7 | 
 8 | <script lang="ts">
 9 | import Pager from "../../lib/Pager.vue";
10 | import Button from "../../lib/Button.vue";
11 | import { ref } from "vue";
12 | 
13 | export default {
14 |   components: { Button, Pager },
15 |   setup() {
16 |     const currentPage = ref(1);
17 |     const aa = (x) => {
18 |       console.log(x)
19 |     }
20 |     return {
21 |       currentPage,
22 |       aa
23 |     };
24 |   },
25 | };
26 | </script>
27 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # le-vue-ui
 2 | 一套基于Vue3和TypeScript的UI组件库。
 3 | > 本组件库旨在学习Vue3新特性以及熟悉TypeScript语法，可以作为学习项目，因此不建议在生产环境中使用。
 4 | ## 特性
 5 | * 基于最新的Vue3 Composition API 编写
 6 | * ES2015+的支持以及严格的使用TypeScript编写
 7 | * 采用Rollup配置打包
 8 | * 友好的 API ，自由灵活地使用空间
 9 | * 源码简单简洁，阅读无障碍
10 | * 细致、漂亮的 UI
11 | 
12 | ## 版本
13 | * 0.0.4 beta
14 | 
15 | ## 兼容性
16 | * 基于Vue js3.0
17 | * 现代浏览器及IE10+
18 | * ES2015+
19 | 
20 | ## 相关链接
21 | * [Vuejs官方](https://cn.vuejs.org/index.html)
22 | * [Vite官方](https://github.com/vitejs/vite)
23 | * [Rollup.js](https://www.rollupjs.com/)
24 | * [TypeScript](https://www.typescriptlang.org/)
25 | 
26 | ## License
27 | * MIT
28 | 


--------------------------------------------------------------------------------
/src/components/RateDemos/BasicRate.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 基本用法
 3 | </demo>
 4 | 
 5 | <template>
 6 | <Rate v-model:value="value" @onChange="handleChange" />
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import Rate from "../../lib/Rate.vue";
11 | import {
12 |     ref
13 | } from "vue";
14 | export default {
15 |     components: {
16 |         Rate
17 |     },
18 |     setup() {
19 |         const value = ref(2);
20 |         const handleChange = (i) => {
21 |             console.log("change", i)
22 |         };
23 |         return {
24 |             handleChange,
25 |             value
26 |         }
27 |     }
28 | }
29 | </script>
30 | 


--------------------------------------------------------------------------------
/src/markdown/intro.md:
--------------------------------------------------------------------------------
 1 | ## Le-UI
 2 | 
 3 | > Le-Vue-UI是一款基于 Vue 3.0 和 TypeScript 编写的 UI 组件库。
 4 | 
 5 | 本组件库旨在学习Vue3新特性以及熟悉TypeScript语法，可以作为学习项目，因此不建议在生产环境中使用。
 6 | 
 7 | ## 特性
 8 | * 基于最新的Vue3 Composition API 编写
 9 | * ES2015+的支持以及严格的使用TypeScript编写
10 | * 采用Rollup配置打包
11 | * 友好的 API ，自由灵活地使用空间
12 | * 源码简单简洁，阅读无障碍
13 | * 细致、漂亮的 UI
14 | 
15 | ## 版本
16 | * 0.0.4 beta
17 | 
18 | ## 兼容性
19 | * 基于Vue js3.0
20 | * 现代浏览器及IE10+
21 | * ES2015+
22 | 
23 | ## 相关链接
24 | * [Vuejs官方](https://cn.vuejs.org/index.html)
25 | * [Vite官方](https://github.com/vitejs/vite)
26 | * [Rollup.js](https://www.rollupjs.com/)
27 | * [TypeScript](https://www.typescriptlang.org/)
28 | 


--------------------------------------------------------------------------------
/src/components/ButtonDemos/BtnLevel.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | <demo>
 3 | 设置等级
 4 | </demo>
 5 | 
 6 | <template>
 7 |     <Button>normal</Button>
 8 |     <Button level="main">main normal</Button>
 9 |     <Button level="danger">danger normal</Button>
10 |     <Button theme="link" level="main">main link</Button>
11 |     <Button theme="link" level="danger">danger link</Button>
12 |     <Button theme="text" level="main">main text</Button>
13 |     <Button theme="text" level="danger">danger text</Button>
14 | </template>
15 | 
16 | <script lang="ts">
17 | import Button from "../../lib/Button.vue"
18 | 
19 | export default {
20 |     components: { Button }
21 | }
22 | </script>


--------------------------------------------------------------------------------
/src/styles/index.scss:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | h1,
 8 | h2,
 9 | h3,
10 | h4,
11 | h5,
12 | h6 {
13 |   font-weight: normal;
14 | }
15 | 
16 | a {
17 |   text-decoration: none;
18 | }
19 | 
20 | body {
21 |   font-size: 16px;
22 |   font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica,
23 |     "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB",
24 |     "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN",
25 |     "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti",
26 |     SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/InputDemos/IconInput.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 带 icon 的输入框
 3 | </demo>
 4 | 
 5 | <template>
 6 | <Input placeholder="请输入内容" prefixIcon="usercenter1" v-model:value="value1" /> &nbsp;
 7 | <Input placeholder="请输入内容" suffixIcon="search" v-model:value="value2" />
 8 | </template>
 9 | 
10 | <script lang="ts">
11 | import Input from "../../lib/Input.vue";
12 | import {
13 |     ref
14 | } from "vue";
15 | 
16 | export default {
17 |     components: {
18 |         Input
19 |     },
20 |     setup() {
21 |         const value1 = ref("");
22 |         const value2 = ref("");
23 |         return {
24 |             value1,
25 |             value2
26 |         }
27 |     }
28 | }
29 | </script>
30 | 


--------------------------------------------------------------------------------
/src/components/RadioDemos/RadioGroup.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 单选框组
 3 | </demo>
 4 | <template>
 5 |   <radio-group v-model:value="radio" @change="aa">
 6 |     <Radio label="aa">备忘录A</Radio>
 7 |     <Radio label="bb">备忘录B</Radio>
 8 |     <Radio label="cc">备忘录C</Radio>
 9 |   </radio-group>
10 | </template>
11 | 
12 | <script lang="ts">
13 | import RadioGroup from "../../lib/Radio/RadioGroup.vue";
14 | import Radio from "../../lib/Radio/Radio.vue";
15 | import { ref } from "vue";
16 | export default {
17 |   components: { RadioGroup, Radio },
18 |   setup() {
19 |     const radio = ref("cc");
20 |     const aa = (x: string) => {
21 |       console.log("change value", x);
22 |     };
23 |     return { radio, aa };
24 |   },
25 | };
26 | </script>
27 | 
28 | <style lang="scss" scoped></style>
29 | 


--------------------------------------------------------------------------------
/src/components/IconDemos/basicIcon.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 基本用法
 3 | </demo>
 4 | 
 5 | <template>
 6 | <Icon name='txt' />
 7 | <Icon name='pin' />
 8 | <Icon name='reeor' />
 9 | <Icon name='close' />
10 | <Icon name='share' />
11 | <Icon name='sorting' :style="{ fill: '#f56c6c' }" />
12 | <Icon name='flag' :style="{ fill: '#409eff' }" />
13 | <Icon name='Top' :style="{ fill: '#219c91' }" />
14 | <Icon name='video' :style="{ fill: '#67c23a' }" />
15 | <Icon name='vs' :style="{ fill: 'skyblue' }" />
16 | </template>
17 | 
18 | <script lang="ts">
19 | import Icon from "../../lib/Icon.vue"
20 | export default {
21 |     components: {
22 |         Icon
23 |     }
24 | }
25 | </script>
26 | 
27 | <style lang="scss" scoped>
28 | .le-icon {
29 |     width: 24px;
30 |     height: 24px;
31 | }
32 | </style>
33 | 


--------------------------------------------------------------------------------
/src/components/CheckBoxDemos/GroupCheckBox.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 多选框组
 3 | </demo>
 4 | <template>
 5 |   <check-box-group v-model:value="options">
 6 |     <CheckBox label="复选框A" />
 7 |     <CheckBox label="复选框B" />
 8 |     <CheckBox label="复选框C" />
 9 |     <CheckBox label="复选框D" />
10 |     <CheckBox label="复选框E" />
11 |   </check-box-group>
12 | </template>
13 | 
14 | <script lang="ts">
15 | import CheckBoxGroup from "../../lib/CheckBox/CheckBoxGroup.vue";
16 | import CheckBox from "../../lib/CheckBox/CheckBox.vue";
17 | import { reactive } from "vue";
18 | export default {
19 |   components: { CheckBoxGroup, CheckBox },
20 |   setup() {
21 |     const options = reactive(["复选框A", "复选框D"]);
22 | 
23 |     return { options };
24 |   },
25 | };
26 | </script>
27 | 
28 | <style lang="scss" scoped></style>
29 | 


--------------------------------------------------------------------------------
/src/components/MessageDemos/TypeMessage.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 不同的提示类型
 3 | </demo>
 4 | <template>
 5 |   <Button @click="openDefault('info')">info</Button>
 6 |   <Button @click="openDefault('error')">error</Button>
 7 |   <Button @click="openDefault('success')">success</Button>
 8 |   <Button @click="openDefault('warning')">warning</Button>
 9 | </template>
10 | 
11 | <script lang="ts">
12 | import { Message } from "../../lib/Message/index";
13 | import Button from "../../lib/Button.vue";
14 | import { ref } from "vue";
15 | 
16 | export default {
17 |   components: { Button },
18 |   setup() {
19 |     const openDefault = (type) => {
20 |       Message({
21 |         message: "这是一条message",
22 |         type,
23 |       });
24 |     };
25 |     return {
26 |       openDefault,
27 |     };
28 |   },
29 | };
30 | </script>
31 | 


--------------------------------------------------------------------------------
/src/components/MessageDemos/CloseMessage.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 可关闭
 3 | </demo>
 4 | <template>
 5 |   <Button @click="openDefault('info')">info</Button>
 6 |   <Button @click="openDefault('error')">error</Button>
 7 |   <Button @click="openDefault('success')">success</Button>
 8 |   <Button @click="openDefault('warning')">warning</Button>
 9 | </template>
10 | 
11 | <script lang="ts">
12 | import { Message } from "../../lib/Message/index";
13 | import Button from "../../lib/Button.vue";
14 | import { ref } from "vue";
15 | 
16 | export default {
17 |   components: { Button },
18 |   setup() {
19 |     const openDefault = (type) => {
20 |       Message({
21 |         message: "这是一条message",
22 |         showClose: true,
23 |         type,
24 |       });
25 |     };
26 |     return {
27 |       openDefault,
28 |     };
29 |   },
30 | };
31 | </script>
32 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | // @ts-nocheck
 2 | import { md } from "./plugins/md";
 3 | import fs from 'fs'
 4 | import {baseParse} from '@vue/compiler-core'
 5 | 
 6 | export default {
 7 |   base: "./",
 8 |   assetsDir: "",
 9 |   plugins: [md()],
10 |   vueCustomBlockTransforms: {
11 |     demo: (options) => {
12 |       const { code, path } = options
13 |       const file = fs.readFileSync(path).toString()
14 |       const parsed = baseParse(file).children.find(n => n.tag === 'demo')
15 |       const title = parsed.children[0].content
16 |       const main = file.split(parsed.loc.source).join('').trim()
17 |       return `export default function (Component) {
18 |         Component.__sourceCode = ${
19 |         JSON.stringify(main)
20 |         }
21 |         Component.__sourceCodeTitle = ${JSON.stringify(title)}
22 |       }`.trim()
23 |     }
24 |   }
25 | };


--------------------------------------------------------------------------------
/src/components/DrawerDemos/CustomDrawer.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 自定义内容
 3 | </demo>
 4 | <template>
 5 |   <Drawer v-model:visible="visible">
 6 |     <template v-slot:title>
 7 |       <strong>标题</strong>
 8 |     </template>
 9 |     <template v-slot:content>
10 |       <p>自定义的内容！！</p>
11 |     </template>
12 |   </Drawer>
13 |   <Button @click="drawerDeafult">custom</Button>
14 | </template>
15 | 
16 | <script lang="ts">
17 | import Button from "../../lib/Button.vue";
18 | import Drawer from "../../lib/Drawer.vue";
19 | import { ref } from "vue";
20 | export default {
21 |   components: { Button, Drawer },
22 |   setup() {
23 |     const visible = ref(false);
24 |     const drawerDeafult = () => {
25 |       visible.value = !visible.value;
26 |     };
27 |     return {
28 |       drawerDeafult,
29 |       visible,
30 |     };
31 |   },
32 | };
33 | </script>
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "le-vue-ui",
 3 |   "version": "0.0.4",
 4 |   "files": [
 5 |     "dist/lib/*"
 6 |   ],
 7 |   "main": "dist/lib/leUI.js",
 8 |   "module": "dist/lib/leUI.esm.js",
 9 |   "scripts": {
10 |     "dev": "vite",
11 |     "build": "vite build"
12 |   },
13 |   "resolutions": {
14 |     "node-sass": "npm:sass@^1.26.11"
15 |   },
16 |   "dependencies": {
17 |     "github-markdown-css": "^4.0.0",
18 |     "marked": "^1.1.1",
19 |     "prismjs": "^1.21.0",
20 |     "vue": "^3.0.0",
21 |     "vue-router": "4.0.0-beta.3"
22 |   },
23 |   "devDependencies": {
24 |     "@vue/compiler-sfc": "^3.0.0",
25 |     "rollup-plugin-esbuild": "^2.5.0",
26 |     "rollup-plugin-scss": "^2.6.0",
27 |     "rollup-plugin-terser": "^7.0.2",
28 |     "rollup-plugin-vue": "^6.0.0-beta.10",
29 |     "sass": "^1.26.11",
30 |     "vite": "^1.0.0-rc.1"
31 |   }
32 | }


--------------------------------------------------------------------------------
/src/components/MessageDemos/DurationMessage.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 自定义时长
 3 | </demo>
 4 | <template>
 5 |   <Button @click="openDefault">custom 1500ms</Button>
 6 |   <Button @click="openDefault2">custom 2000ms</Button>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import { Message } from "../../lib/Message/index";
11 | import Button from "../../lib/Button.vue";
12 | import { ref } from "vue";
13 | 
14 | export default {
15 |   components: { Button },
16 |   setup() {
17 |     const openDefault = () => {
18 |       Message({
19 |         message: "这是一条message",
20 |         duration: 1500,
21 |       });
22 |     };
23 |     const openDefault2 = () => {
24 |       Message({
25 |         message: "这是一条message",
26 |         duration: 2000,
27 |       });
28 |     };
29 |     return {
30 |       openDefault,
31 |       openDefault2,
32 |     };
33 |   },
34 | };
35 | </script>
36 | 


--------------------------------------------------------------------------------
/src/lib/Layout/Layout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div :class="{
 3 |     'le-layout': true,
 4 |     'hasSide': hasSide
 5 | }">
 6 |     <slot></slot>
 7 | </div>
 8 | </template>
 9 | 
10 | <script lang="ts">
11 | import { Side } from "./index";
12 | import { ref } from "vue";
13 | 
14 | export default {
15 |     setup(props, { slots }){
16 |         const hasSide  = ref(false);
17 |         const defaults = slots.default();
18 |         defaults.forEach(_ => {
19 |             if (_.type === Side) {
20 |                 hasSide.value = true
21 |             }
22 |         });
23 |         return {
24 |             hasSide
25 |         }
26 |     }
27 | }
28 | </script>
29 | 
30 | <style lang="scss" scoped>
31 | .le-layout {
32 |     display: flex;
33 |     flex-grow: 1;
34 |     flex-direction: column;
35 |     &.hasSide {
36 |     flex-direction: row;
37 |   }
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/components/IconDemo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="icon-doc">
 3 |     <h2>Icon 图标</h2>
 4 |     <Demo :component="BasicIcon" describe="直接通过设置name属性来使用即可。" />
 5 |     <h2>图标来源</h2>
 6 |     <p>目前图标来源均来自<a target="_blank" href="https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=19238">阿里巴巴国际站官方图标库</a>；
 7 |     name属性可以直接参考此图标库。
 8 |     </p>
 9 | </div>
10 | </template>
11 | 
12 | <script lang="ts">
13 | import Icon from "../lib/Icon.vue"
14 | import Demo from "./Demo.vue";
15 | import BasicIcon from "./IconDemos/BasicIcon.vue";
16 | 
17 | export default {
18 |     components: {
19 |         Icon,
20 |         Demo
21 |     },
22 |     setup() {
23 |         return {
24 |             BasicIcon
25 |         }
26 |     }
27 | 
28 | }
29 | </script>
30 | 
31 | <style lang="scss" scoped>
32 | .icon-doc {
33 |     width: 100%;
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import esbuild from 'rollup-plugin-esbuild'
 2 | import vue from 'rollup-plugin-vue'
 3 | import scss from 'rollup-plugin-scss'
 4 | import dartSass from 'sass';
 5 | import { terser } from "rollup-plugin-terser"
 6 | 
 7 | export default {
 8 |   input: 'src/lib/index.ts',
 9 |   output: [{
10 |     globals: {
11 |       vue: 'Vue'
12 |     },
13 |     name: 'leUI',
14 |     file: 'dist/lib/leUI.js',
15 |     format: 'umd',
16 |     plugins: [terser()]
17 |   }, {
18 |     name: 'leUI',
19 |     file: 'dist/lib/leUI.esm.js',
20 |     format: 'es',
21 |     plugins: [terser()]
22 |   }],
23 |   plugins: [
24 |     scss({ include: /\.scss$/, sass: dartSass }),
25 |     esbuild({
26 |       include: /\.[jt]s$/,
27 |       minify: process.env.NODE_ENV === 'production',
28 |       target: 'es2015' 
29 |     }),
30 |     vue({
31 |       include: /\.vue$/,
32 |     })
33 |   ],
34 | }


--------------------------------------------------------------------------------
/src/styles/le.scss:
--------------------------------------------------------------------------------
 1 | [class^="le-"],
 2 | [class*=" le-"] {
 3 |   margin: 0;
 4 |   padding: 0;
 5 |   box-sizing: border-box;
 6 |   font-size: 16px;
 7 |   // font-family  -> https://github.com/zenozeng/fonts.css/
 8 |   font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica,
 9 |     "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB",
10 |     "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN",
11 |     "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti",
12 |     SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
13 | }
14 | 
15 | @keyframes le-spin {
16 |   0% {
17 |     transform: rotate(0deg);
18 |   }
19 | 
20 |   100% {
21 |     transform: rotate(360deg);
22 |   }
23 | }
24 | .markdown-body {
25 |   width: 90%;
26 |   pre {
27 |     background-color: #2d2d2d !important;
28 |   }
29 | }
30 | 
31 | 
32 | // 全局scss变量
33 | 
34 | 
35 | 
36 | 
37 | 


--------------------------------------------------------------------------------
/plugins/md.ts:
--------------------------------------------------------------------------------
 1 | // @ts-nocheck
 2 | import path from 'path'
 3 | import fs from 'fs'
 4 | import marked from 'marked'
 5 | 
 6 | const mdToJs = str => {
 7 |   const content = JSON.stringify(marked(str))
 8 |   return `export default ${content}`
 9 | }
10 | 
11 | export function md() {
12 |   return {
13 |     configureServer: [ // 用于开发
14 |       async ({ app }) => {
15 |         app.use(async (ctx, next) => { // koa
16 |           if (ctx.path.endsWith('.md')) {
17 |             ctx.type = 'js'
18 |             const filePath = path.join(process.cwd(), ctx.path)
19 |             ctx.body = mdToJs(fs.readFileSync(filePath).toString())
20 |           } else {
21 |             await next()
22 |           }
23 |         })
24 |       },
25 |     ],
26 |     transforms: [{  // 用于 rollup // 插件
27 |       test: context => context.path.endsWith('.md'),
28 |       transform: ({ code }) => mdToJs(code) 
29 |     }]
30 |   }
31 | }


--------------------------------------------------------------------------------
/src/lib/Message/index.ts:
--------------------------------------------------------------------------------
 1 | import { default as MessageCom } from "./Message.vue";
 2 | import { createApp, h } from "vue";
 3 | export const Message = (options) => {
 4 |   const { message, type, duration, showClose, onClose } = options;
 5 |   const div = document.createElement("div");
 6 |   document.body.appendChild(div);
 7 |   const close = () => {
 8 |     app.unmount(div);
 9 |     div.remove();
10 |   };
11 |   const app = createApp({
12 |     render() {
13 |       return h(
14 |         MessageCom,
15 |         {
16 |           visible: true,
17 |           duration,
18 |           message,
19 |           type,
20 |           showClose,
21 |           onClose,
22 |           "onUpdate:visible": (newVisible) => {
23 |             if (newVisible === false) {
24 |               close();
25 |             }
26 |           },
27 |         },
28 |         {
29 |         }
30 |       );
31 |     },
32 |   });
33 |   app.mount(div);
34 | };
35 | 


--------------------------------------------------------------------------------
/src/components/LayoutDemos/LayoutDemo1.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 布局一
 3 | </demo>
 4 | 
 5 | <template>
 6 | <Layout>
 7 |     <Header>Header</Header>
 8 |     <Content>Content</Content>
 9 |     <Footer>Footer</Footer>
10 | </Layout>
11 | </template>
12 | 
13 | <script lang="ts">
14 | import {
15 |     Content,
16 |     Layout,
17 |     Footer,
18 |     Header,
19 | } from "../../lib/Layout"
20 | 
21 | export default {
22 |     components: {
23 |         Content,
24 |         Layout,
25 |         Footer,
26 |         Header,
27 |     }
28 | }
29 | </script>
30 | 
31 | <style lang="scss" scoped>
32 | .le-layout {
33 |     color: #fff;
34 |     font-size: 14px;
35 | 
36 |     .le-layout-header {
37 |         background-color: #7dbcea;
38 |         height: 80px;
39 |     }
40 | 
41 |     .le-layout-content {
42 |         background-color: rgba(16, 142, 233, 1);
43 |         height: 200px;
44 |     }
45 | 
46 |     .le-layout-footer {
47 |         background-color: #7dbcea;
48 |         height: 80px;
49 |     }
50 | }
51 | </style>
52 | 


--------------------------------------------------------------------------------
/src/components/DrawerDemos/BasicDrawer.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 基本用法
 3 | </demo>
 4 | <template>
 5 |   <Drawer v-model:visible="visible">
 6 |     <template v-slot:title>
 7 |       <strong>标题</strong>
 8 |     </template>
 9 |     <template v-slot:content>
10 |       <p>这是一段信息。</p>
11 |       <p>这是一段信息。</p>
12 |       <p>这是一段信息。</p>
13 |     </template>
14 |       <template v-slot:footer>
15 |         <Button @click="toggleDialog2" level="main">确认文本</Button>
16 |     </template>
17 |   </Drawer>
18 |   <Button @click="drawerDeafult">default</Button>
19 | </template>
20 | 
21 | <script lang="ts">
22 | import Button from "../../lib/Button.vue";
23 | import Drawer from "../../lib/Drawer.vue";
24 | import { ref } from "vue";
25 | export default {
26 |   components: { Button, Drawer },
27 |   setup() {
28 |     const visible = ref(false);
29 |     const drawerDeafult = () => {
30 |       visible.value = !visible.value;
31 |     };
32 |     return {
33 |       drawerDeafult,
34 |       visible,
35 |     };
36 |   },
37 | };
38 | </script>
39 | 


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 2267.72 2267.72" style="enable-background:new 0 0 2267.72 2267.72;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{display:none;}
 7 | 	.st1{display:none;fill:#FFFFFF;}
 8 | 	.st2{fill:#00A99D;}
 9 | 	.st3{fill:#35495E;}
10 | </style>
11 | <g id="图层_2" class="st0">
12 | </g>
13 | <rect x="-3.75" y="0.01" class="st1" width="2267.72" height="2267.72"/>
14 | <g>
15 | 	<polygon class="st2" points="750.13,1414.24 1132.49,2073.44 1261.82,1849.4 1007.26,1406.56 1129.81,1194.29 1384.43,1635.56 
16 | 		2216.5,195.57 1457.23,195.32 1254.84,545.87 1391.08,750.23 1594.11,390.77 1837.08,394.1 1374.44,1179.58 1130.74,755.55 	"/>
17 | 	<polygon class="st3" points="43.71,196.35 801.97,194.29 1122.6,742.46 362.09,746.19 	"/>
18 | </g>
19 | </svg>
20 | 


--------------------------------------------------------------------------------
/src/lib/Radio/RadioGroup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="le-radio-group">
 3 |     <div class="le-radio-group-content">
 4 |       <component class="le-radio-group-item" v-for="c in defaults" :is="c" :key="c" @change="handleGroupRadio" />
 5 |     </div>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import Radio from "./Radio.vue";
11 | export default {
12 |   props: {
13 |     value: {
14 |       type: String,
15 |     },
16 |   },
17 |   emits: ["update:value", "change"],
18 |   setup(props, ctx) {
19 |     const defaults = ctx.slots.default();
20 |     defaults.forEach((_) => {
21 |       if (_.type !== Radio) {
22 |         throw new Error("Radio-group的子组件必须是radio标签");
23 |       }
24 |       Object.assign(_.props, {
25 |         name: "group_radio",
26 |         value: props.value,
27 |       });
28 |     });
29 | 
30 |     const handleGroupRadio = (x) => {
31 |       ctx.emit("update:value", x);
32 |       ctx.emit("change", x);
33 |     };
34 | 
35 |     return {
36 |       defaults,
37 |       handleGroupRadio,
38 |     };
39 |   },
40 | };
41 | </script>


--------------------------------------------------------------------------------
/src/assets/menu.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1603031277211" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2488" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M128 469.333333m40.533333 0l686.933334 0q40.533333 0 40.533333 40.533334l0 4.266666q0 40.533333-40.533333 40.533334l-686.933334 0q-40.533333 0-40.533333-40.533334l0-4.266666q0-40.533333 40.533333-40.533334Z" p-id="2489"></path><path d="M128 682.666667m40.533333 0l686.933334 0q40.533333 0 40.533333 40.533333l0 4.266667q0 40.533333-40.533333 40.533333l-686.933334 0q-40.533333 0-40.533333-40.533333l0-4.266667q0-40.533333 40.533333-40.533333Z" p-id="2490"></path><path d="M128 256m40.533333 0l686.933334 0q40.533333 0 40.533333 40.533333l0 4.266667q0 40.533333-40.533333 40.533333l-686.933334 0q-40.533333 0-40.533333-40.533333l0-4.266667q0-40.533333 40.533333-40.533333Z" p-id="2491"></path></svg>


--------------------------------------------------------------------------------
/src/components/CarouselDemos/BasicCarousel.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 基础用法
 3 | </demo>
 4 | <template>
 5 |   <Carousel selected="1">
 6 |     <CarouselItem name="1">
 7 |       <div :style="{ backgroundColor: 'rgb(102,199,150)' }">1</div>
 8 |     </CarouselItem>
 9 |     <CarouselItem name="2">
10 |       <div :style="{ backgroundColor: 'rgb(88,148,183)' }">2</div>
11 |     </CarouselItem>
12 |     <CarouselItem name="3">
13 |       <div :style="{ backgroundColor: 'rgb(86,173,173)' }">3</div>
14 |     </CarouselItem>
15 |     <CarouselItem name="4">
16 |       <div :style="{ backgroundColor: 'rgb(165,193,135)' }">4</div>
17 |     </CarouselItem>
18 |   </Carousel>
19 | </template>
20 | 
21 | <script lang="ts">
22 | import Carousel from "../../lib/Carousel/Carousel.vue";
23 | import CarouselItem from "../../lib/Carousel/CarouselItem.vue";
24 | export default {
25 |   components: { Carousel, CarouselItem },
26 | };
27 | </script>
28 | 
29 | <style lang="scss" scoped>
30 | .le-carousel {
31 |   color: #fff;
32 |   .le-carousel-item {
33 |     & > div {
34 |       width: 100%;
35 |       height: 100%;
36 |     }
37 |   }
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/components/Popover/DirectionPopover.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 不同方向
 3 | </demo>
 4 | 
 5 | <template>
 6 |   <popover>
 7 |     <template v-slot:content>
 8 |       <div>popover内容</div>
 9 |     </template>
10 |     <Button>top</Button>
11 |   </popover>
12 | 
13 |   <popover position="bottom">
14 |     <template v-slot:content>
15 |       <div>popover内容</div>
16 |     </template>
17 |     <Button>bottom</Button>
18 |   </popover>
19 | 
20 |   <popover position="left">
21 |     <template v-slot:content>
22 |       <div>popover内容</div>
23 |     </template>
24 |     <Button>left</Button>
25 |   </popover>
26 | 
27 |   <popover position="right">
28 |     <template v-slot:content>
29 |       <div>popover内容</div>
30 |     </template>
31 |     <Button>right</Button>
32 |   </popover>
33 | </template>
34 | 
35 | <script lang="ts">
36 | import Popover from "../../lib/Popover.vue";
37 | import Button from "../../lib/Button.vue";
38 | import { ref } from "vue";
39 | 
40 | export default {
41 |   components: { Popover, Button },
42 | };
43 | </script>
44 | 
45 | <style lang="scss" scoped>
46 | .le-popover {
47 |   margin-right: 20px;
48 | }
49 | </style>
50 | 


--------------------------------------------------------------------------------
/src/components/CarouselDemos/Duration.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 自定义动画时间
 3 | </demo>
 4 | <template>
 5 |   <Carousel selected="1" :autoPlayDelay="2000">
 6 |     <CarouselItem name="1">
 7 |       <div :style="{ backgroundColor: 'rgb(102,199,150)' }">1</div>
 8 |     </CarouselItem>
 9 |     <CarouselItem name="2">
10 |       <div :style="{ backgroundColor: 'rgb(88,148,183)' }">2</div>
11 |     </CarouselItem>
12 |     <CarouselItem name="3">
13 |       <div :style="{ backgroundColor: 'rgb(86,173,173)' }">3</div>
14 |     </CarouselItem>
15 |     <CarouselItem name="4">
16 |       <div :style="{ backgroundColor: 'rgb(165,193,135)' }">4</div>
17 |     </CarouselItem>
18 |   </Carousel>
19 | </template>
20 | 
21 | <script lang="ts">
22 | import Carousel from "../../lib/Carousel/Carousel.vue";
23 | import CarouselItem from "../../lib/Carousel/CarouselItem.vue";
24 | export default {
25 |   components: { Carousel, CarouselItem },
26 | };
27 | </script>
28 | 
29 | <style lang="scss" scoped>
30 | .le-carousel {
31 |   color: #fff;
32 |   .le-carousel-item {
33 |     & > div {
34 |       width: 100%;
35 |       height: 100%;
36 |     }
37 |   }
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/components/CarouselDemos/SignCarousel.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 指示器的控制
 3 | </demo>
 4 | <template>
 5 |   <Carousel selected="1" :dots="false" :arrow="false">
 6 |     <CarouselItem name="1">
 7 |       <div :style="{ backgroundColor: 'rgb(102,199,150)' }">1</div>
 8 |     </CarouselItem>
 9 |     <CarouselItem name="2">
10 |       <div :style="{ backgroundColor: 'rgb(88,148,183)' }">2</div>
11 |     </CarouselItem>
12 |     <CarouselItem name="3">
13 |       <div :style="{ backgroundColor: 'rgb(86,173,173)' }">3</div>
14 |     </CarouselItem>
15 |     <CarouselItem name="4">
16 |       <div :style="{ backgroundColor: 'rgb(165,193,135)' }">4</div>
17 |     </CarouselItem>
18 |   </Carousel>
19 | </template>
20 | 
21 | <script lang="ts">
22 | import Carousel from "../../lib/Carousel/Carousel.vue";
23 | import CarouselItem from "../../lib/Carousel/CarouselItem.vue";
24 | export default {
25 |   components: { Carousel, CarouselItem },
26 | };
27 | </script>
28 | 
29 | <style lang="scss" scoped>
30 | .le-carousel {
31 |   color: #fff;
32 |   .le-carousel-item {
33 |     & > div {
34 |       width: 100%;
35 |       height: 100%;
36 |     }
37 |   }
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/components/CarouselDemos/AnimationCarousel.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 可关闭动画
 3 | </demo>
 4 | <template>
 5 |   <Carousel selected="1" :animationEnabled="false">
 6 |     <CarouselItem name="1">
 7 |       <div :style="{ backgroundColor: 'rgb(102,199,150)' }">1</div>
 8 |     </CarouselItem>
 9 |     <CarouselItem name="2">
10 |       <div :style="{ backgroundColor: 'rgb(88,148,183)' }">2</div>
11 |     </CarouselItem>
12 |     <CarouselItem name="3">
13 |       <div :style="{ backgroundColor: 'rgb(86,173,173)' }">3</div>
14 |     </CarouselItem>
15 |     <CarouselItem name="4">
16 |       <div :style="{ backgroundColor: 'rgb(165,193,135)' }">4</div>
17 |     </CarouselItem>
18 |   </Carousel>
19 | </template>
20 | 
21 | <script lang="ts">
22 | import Carousel from "../../lib/Carousel/Carousel.vue";
23 | import CarouselItem from "../../lib/Carousel/CarouselItem.vue";
24 | export default {
25 |   components: { Carousel, CarouselItem },
26 | };
27 | </script>
28 | 
29 | <style lang="scss" scoped>
30 | .le-carousel {
31 |   color: #fff;
32 |   .le-carousel-item {
33 |     & > div {
34 |       width: 100%;
35 |       height: 100%;
36 |     }
37 |   }
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/components/Popover/TriggerPopover.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 触发方式
 3 | </demo>
 4 | 
 5 | <template>
 6 |   <popover trigger="hover">
 7 |     <template v-slot:content>
 8 |       <div>popover内容</div>
 9 |     </template>
10 |     <Button>top hover</Button>
11 |   </popover>
12 | 
13 |   <popover position="top">
14 |     <template v-slot:content>
15 |       <div>popover内容</div>
16 |     </template>
17 |     <Button>top click</Button>
18 |   </popover>
19 | 
20 |   <popover position="bottom" trigger="hover">
21 |     <template v-slot:content>
22 |       <div>popover内容</div>
23 |     </template>
24 |     <Button>bottom hover</Button>
25 |   </popover>
26 | 
27 |   <popover position="bottom">
28 |     <template v-slot:content>
29 |       <div>popover内容</div>
30 |     </template>
31 |     <Button>bottom click</Button>
32 |   </popover>
33 | </template>
34 | 
35 | <script lang="ts">
36 | import Popover from "../../lib/Popover.vue";
37 | import Button from "../../lib/Button.vue";
38 | import { ref } from "vue";
39 | 
40 | export default {
41 |   components: { Popover, Button },
42 | };
43 | </script>
44 | 
45 | <style lang="scss" scoped>
46 | .le-popover {
47 |   margin-right: 20px;
48 | }
49 | </style>
50 | 


--------------------------------------------------------------------------------
/src/components/DialogDemos/BasicDialog.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 基本用法
 3 | </demo>
 4 | 
 5 | <template>
 6 | <Dialog v-model:visible="isShowDialog" :isCanClickOverlay="false" :mask="false">
 7 |     <template v-slot:title>
 8 |         <strong>提示</strong>
 9 |     </template>
10 |     <template v-slot:content>
11 |         <p>这是一段信息。</p>
12 |         <p>这是一段信息。</p>
13 |         <p>这是一段信息。</p>
14 |     </template>
15 |     <template v-slot:footer>
16 |         <Button @click="toggleDialog">确认</Button>
17 |         <Button @click="toggleDialog">取消</Button>
18 |     </template>
19 | </Dialog>
20 | <Button @click="toggleDialog">点击打开dialog </Button>
21 | </template>
22 | 
23 | <script lang="ts">
24 | import Dialog from "../../lib/Dialog.vue";
25 | import Button from "../../lib/Button.vue";
26 | import {
27 |     ref
28 | } from "vue";
29 | 
30 | export default {
31 |     components: {
32 |         Dialog,
33 |         Button
34 |     },
35 |     setup() {
36 |         const isShowDialog = ref(false);
37 |         const toggleDialog = () => {
38 |             isShowDialog.value = !isShowDialog.value;
39 |         };
40 |         return {
41 |             toggleDialog,
42 |             isShowDialog
43 |         };
44 |     }
45 | }
46 | </script>
47 | 


--------------------------------------------------------------------------------
/src/components/CascaderDemos/Multilayer.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 多层嵌套
 3 | </demo>
 4 | <template>
 5 |   <Cascader v-model:source="source" popover-height="100px" v-model:selected="selected" />
 6 | </template>
 7 | 
 8 | <script lang="ts">
 9 | import Cascader from "../../lib/Cascader/Cascader.vue";
10 | import { reactive } from "vue";
11 | export default {
12 |   components: { Cascader },
13 |   setup() {
14 |     const source = reactive([
15 |       {
16 |         name: "北京",
17 |         value: "beijing",
18 |         children: [
19 |           {
20 |             name: "大兴区",
21 |             value: "daxing",
22 |             children: [
23 |               {
24 |                 name: "西红门镇",
25 |                 value: "xihongmeng",
26 |                 children: [{ name: "理想城", value: "lixiangchen" }],
27 |               },
28 |             ],
29 |           },
30 |           { name: "朝阳区", value: "chaoyan" },
31 |         ],
32 |       },
33 |       {
34 |         name: "上海",
35 |         value: "shanghai",
36 |         children: [
37 |           { name: "黄浦区", value: "huangpu" },
38 |           { name: "徐汇区", value: "xuhui" },
39 |         ],
40 |       },
41 |     ]);
42 |     const selected = reactive([]);
43 | 
44 |     return { source, selected };
45 |   },
46 | };
47 | </script>
48 | 


--------------------------------------------------------------------------------
/src/components/LayoutDemos/LayoutDemo2.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 布局二
 3 | </demo>
 4 | 
 5 | <template>
 6 | <Layout>
 7 |     <Header>Header</Header>
 8 |     <Layout>
 9 |         <Side>Side</Side>
10 |         <Content>Content</Content>
11 |     </Layout>
12 |     <Footer>Footer</Footer>
13 | </Layout>
14 | </template>
15 | 
16 | <script lang="ts">
17 | import {
18 |     Content,
19 |     Layout,
20 |     Footer,
21 |     Header,
22 |     Side
23 | } from "../../lib/Layout"
24 | 
25 | export default {
26 |     components: {
27 |         Content,
28 |         Layout,
29 |         Footer,
30 |         Header,
31 |         Side
32 |     }
33 | }
34 | </script>
35 | 
36 | <style lang="scss" scoped>
37 | .le-layout {
38 |     color: #fff;
39 |     font-size: 14px;
40 | 
41 |     .le-layout-header {
42 |         background-color: #7dbcea;
43 |         height: 80px;
44 |     }
45 | 
46 |     &>.le-layout {
47 |         .le-layout-content {
48 |             background-color: rgba(16, 142, 233, 1);
49 |             height: 200px;
50 |         }
51 | 
52 |         .le-layout-side {
53 |             background-color: #3ba0e9;
54 |             height: 200px;
55 |             width: 100px;
56 |         }
57 |     }
58 | 
59 |     .le-layout-footer {
60 |         background-color: #7dbcea;
61 |         height: 80px;
62 |     }
63 | }
64 | </style>
65 | 


--------------------------------------------------------------------------------
/src/components/LayoutDemos/LayoutDemo3.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 布局三
 3 | </demo>
 4 | 
 5 | <template>
 6 | <Layout>
 7 |     <Header>Header</Header>
 8 |     <Layout>
 9 |         <Content>Content</Content>
10 |         <Side>Side</Side>
11 |     </Layout>
12 |     <Footer>Footer</Footer>
13 | </Layout>
14 | </template>
15 | 
16 | <script lang="ts">
17 | import {
18 |     Content,
19 |     Layout,
20 |     Footer,
21 |     Header,
22 |     Side
23 | } from "../../lib/Layout"
24 | 
25 | export default {
26 |     components: {
27 |         Content,
28 |         Layout,
29 |         Footer,
30 |         Header,
31 |         Side
32 |     }
33 | }
34 | </script>
35 | 
36 | <style lang="scss" scoped>
37 | .le-layout {
38 |     color: #fff;
39 |     font-size: 14px;
40 | 
41 |     .le-layout-header {
42 |         background-color: #7dbcea;
43 |         height: 80px;
44 |     }
45 | 
46 |     &>.le-layout {
47 |         .le-layout-content {
48 |             background-color: rgba(16, 142, 233, 1);
49 |             height: 200px;
50 |         }
51 | 
52 |         .le-layout-side {
53 |             background-color: #3ba0e9;
54 |             height: 200px;
55 |             width: 100px;
56 |         }
57 |     }
58 | 
59 |     .le-layout-footer {
60 |         background-color: #7dbcea;
61 |         height: 80px;
62 |     }
63 | }
64 | </style>
65 | 


--------------------------------------------------------------------------------
/src/components/LayoutDemos/LayoutDemo4.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 布局四
 3 | </demo>
 4 | 
 5 | <template>
 6 | <Layout>
 7 |     <Side>Side</Side>
 8 |     <Layout>
 9 |         <Header>Header</Header>
10 |         <Content>Content</Content>
11 |         <Footer>Footer</Footer>
12 |     </Layout>
13 | </Layout>
14 | </template>
15 | 
16 | <script lang="ts">
17 | import {
18 |     Content,
19 |     Layout,
20 |     Footer,
21 |     Header,
22 |     Side
23 | } from "../../lib/Layout"
24 | 
25 | export default {
26 |     components: {
27 |         Content,
28 |         Layout,
29 |         Footer,
30 |         Header,
31 |         Side
32 |     }
33 | }
34 | </script>
35 | 
36 | <style lang="scss" scoped>
37 | .le-layout {
38 |     color: #fff;
39 |     font-size: 14px;
40 | 
41 |     .le-layout-side {
42 |         background-color: #3ba0e9;
43 |         height: 360px;
44 |         width: 100px;
45 |     }
46 | 
47 |     &>.le-layout {
48 |         .le-layout-header {
49 |             background-color: #7dbcea;
50 |             height: 80px;
51 |         }
52 | 
53 |         .le-layout-content {
54 |             background-color: rgba(16, 142, 233, 1);
55 |             height: 200px;
56 |         }
57 | 
58 |         .le-layout-footer {
59 |             background-color: #7dbcea;
60 |             height: 80px;
61 |         }
62 |     }
63 | }
64 | </style>
65 | 


--------------------------------------------------------------------------------
/src/components/CascaderDemos/BasicCascader.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 基本用法
 3 | </demo>
 4 | <template>
 5 |   <Cascader
 6 |     v-model:source="source"
 7 |     popover-height="200px"
 8 |     v-model:selected="selected"
 9 |   />
10 | </template>
11 | 
12 | <script lang="ts">
13 | import Cascader from "../../lib/Cascader/Cascader.vue";
14 | import { reactive } from "vue";
15 | export default {
16 |   components: { Cascader },
17 |   setup() {
18 |     const source = reactive([
19 |       {
20 |         name: "北京",
21 |         value: "beijing",
22 |         children: [
23 |           { name: "大兴区", value: "daxing" },
24 |           { name: "朝阳区", value: "chaoyan" },
25 |           { name: "通州区", value: "tongzhou" },
26 |         ],
27 |       },
28 |       {
29 |         name: "上海",
30 |         value: "shanghai",
31 |         children: [
32 |           { name: "黄浦区", value: "huangpu" },
33 |           { name: "徐汇区", value: "xuhui" },
34 |           { name: "宝山区", value: "baoshang" },
35 |         ],
36 |       },
37 |       {
38 |         name: "江苏省",
39 |         value: "jiangsu",
40 |         children: [
41 |           { name: "南京市", value: "nanjing" },
42 |           { name: "苏州市", value: "suzhou" },
43 |           { name: "无锡市", value: "wuxi" },
44 |         ],
45 |       },
46 |     ]);
47 |     const selected = reactive([]);
48 | 
49 |     return { source, selected };
50 |   },
51 | };
52 | </script>
53 | 


--------------------------------------------------------------------------------
/src/components/CascaderDemos/DisabledCascader.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 禁用状态
 3 | </demo>
 4 | <template>
 5 |   <Cascader v-model:source="source" popover-height="200px" v-model:selected="selected" />
 6 | </template>
 7 | 
 8 | <script lang="ts">
 9 | import Cascader from "../../lib/Cascader/Cascader.vue";
10 | import { reactive } from "vue";
11 | export default {
12 |   components: { Cascader },
13 |   setup() {
14 |     const source = reactive([
15 |       {
16 |         name: "北京",
17 |         value: "beijing",
18 |         children: [
19 |           { name: "大兴区", value: "daxing" },
20 |           { name: "朝阳区", value: "chaoyan" },
21 |           { name: "通州区", value: "tongzhou", disabled: true },
22 |         ],
23 |       },
24 |       {
25 |         name: "上海",
26 |         value: "shanghai",
27 |         children: [
28 |           { name: "黄浦区", value: "huangpu" },
29 |           { name: "徐汇区", value: "xuhui" },
30 |           { name: "宝山区", value: "baoshang" },
31 |         ],
32 |       },
33 |       {
34 |         name: "江苏省",
35 |         value: "jiangsu",
36 |         disabled: true,
37 |         children: [
38 |           { name: "南京市", value: "nanjing" },
39 |           { name: "苏州市", value: "suzhou" },
40 |           { name: "无锡市", value: "wuxi" },
41 |         ],
42 |       },
43 |     ]);
44 |     const selected = reactive([]);
45 | 
46 |     return { source, selected };
47 |   },
48 | };
49 | </script>
50 | 


--------------------------------------------------------------------------------
/src/components/AffixDemo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="affix-doc">
 3 |     <h2>Button 按钮</h2>
 4 |     <Demo :component="BasicAffix" describe="基础用法" />
 5 |     <Demo :component="AssignAffix" describe="offsetTop指定距离顶部距离" />
 6 |     <h2>API</h2>
 7 |     <Table :columns="columns" :dataSource="dataSource" />
 8 |   </div>
 9 | </template>
10 | 
11 | <script lang="ts">
12 | import Demo from "./Demo.vue";
13 | import Table from "../lib/Table.vue";
14 | import BasicAffix from "./AffixDemos/BasicAffix.vue";
15 | import AssignAffix from "./AffixDemos/AssignAffix.vue";
16 | import { reactive } from "vue";
17 | 
18 | export default {
19 |   components: { Demo, Table },
20 |   setup() {
21 |     const columns = reactive([
22 |       {
23 |         text: "参数",
24 |         field: "params",
25 |       },
26 |       {
27 |         text: "说明",
28 |         field: "description",
29 |       },
30 |       {
31 |         text: "类型",
32 |         field: "type",
33 |       },
34 |       {
35 |         text: "默认值",
36 |         field: "default",
37 |       },
38 |     ]);
39 | 
40 |     const dataSource = reactive([
41 |       {
42 |         params: "offsetTop",
43 |         description: "指定距离顶部的距离",
44 |         type: "number",
45 |         default: "0",
46 |       },
47 |     ]);
48 |     return {
49 |       BasicAffix,
50 |       AssignAffix,
51 |       columns,
52 |       dataSource,
53 |     };
54 |   },
55 | };
56 | </script>
57 | 
58 | <style lang="scss" scoped>
59 | .affix-doc {
60 |   width: 100%;
61 | }
62 | </style>
63 | 


--------------------------------------------------------------------------------
/src/components/SpinDemo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="spin-doc">
 3 |     <h2>Spin 加载中</h2>
 4 |     <Demo :component="BasicSpin" describe="最基本的用法" />
 5 |     <Demo :component="SizeSpin" describe="各种大小。" />
 6 |     <Demo :component="TextSpin" describe="自定义描述文案。" />
 7 |     <h2>API</h2>
 8 |     <Table :columns="columns" :dataSource="dataSource" />
 9 |   </div>
10 | </template>
11 | 
12 | <script lang="ts">
13 | import BasicSpin from "./SpinDemos/BasicSpin.vue";
14 | import TextSpin from "./SpinDemos/TextSpin.vue";
15 | import SizeSpin from "./SpinDemos/SizeSpin.vue";
16 | import Demo from "./Demo.vue";
17 | import Table from "../lib/Table.vue";
18 | import { reactive } from "vue";
19 | export default {
20 |   components: {
21 |     Demo,
22 |     Table,
23 |   },
24 |   setup() {
25 |     const columns = reactive([
26 |       { text: "参数", field: "params" },
27 |       { text: "说明", field: "description" },
28 |       { text: "类型", field: "type" },
29 |       { text: "默认值", field: "default" },
30 |     ]);
31 | 
32 |     const dataSource = reactive([
33 |       { params: "size", description: "spin尺寸大小", type: "‘normal | 'big' | 'small'", default: "normal" },
34 |       { params: "tip", description: "文案描述", type: "string", default: "-" },
35 |     ]);
36 |     return {
37 |       BasicSpin,
38 |       TextSpin,
39 |       SizeSpin,
40 |       columns,
41 |       dataSource,
42 |     };
43 |   },
44 | };
45 | </script>
46 | 
47 | <style lang="scss" scoped>
48 | .spin-doc {
49 |   width: 100%;
50 | }
51 | </style>
52 | 


--------------------------------------------------------------------------------
/src/lib/Spin.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     :class="{
 4 |       'le-spin': true,
 5 |       'le-spin-normal': size === 'normal',
 6 |       'le-spin-small': size === 'small',
 7 |       'le-spin-big': size === 'big',
 8 |     }"
 9 |   >
10 |     <Icon name="loading" />
11 |     <div v-if="tip && tip !== ''" class="tip">{{ tip }}</div>
12 |   </div>
13 | </template>
14 | 
15 | <script lang="ts">
16 | import Icon from "./Icon.vue";
17 | import { PropType, computed } from "vue";
18 | 
19 | export default {
20 |   props: {
21 |     tip: {
22 |       type: String,
23 |     },
24 |     size: {
25 |       type: String as PropType<"small" | "big" | "normal">,
26 |       default: "normal",
27 |       validator: (val: string) => ["small", "big", "normal"].includes(val),
28 |     },
29 |   },
30 |   components: { Icon },
31 | };
32 | </script>
33 | 
34 | <style lang="scss" scoped>
35 | $primary: #409eff;
36 | 
37 | .le-spin {
38 |   display: inline-flex;
39 |   flex-direction: column;
40 |   align-items: center;
41 |   justify-content: center;
42 |   .le-icon {
43 |     fill: $primary;
44 |     animation: le-spin 1s infinite linear;
45 |   }
46 |   &.le-spin-small {
47 |     .le-icon {
48 |       width: 1em;
49 |       height: 1em;
50 |     }
51 |   }
52 |   &.le-spin-normal {
53 |     .le-icon {
54 |       width: 1.4em;
55 |       height: 1.4em;
56 |     }
57 |   }
58 | 
59 |   &.le-spin-big {
60 |     .le-icon {
61 |       width: 1.8em;
62 |       height: 1.8em;
63 |     }
64 |   }
65 |   .tip {
66 |     font-size: 14px;
67 |     color: $primary;
68 |   }
69 | }
70 | </style>
71 | 
72 | 


--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
 1 | export {default as Switch } from "./Switch.vue";
 2 | export {default as Button } from "./Button.vue";
 3 | export {default as Table } from "./Table.vue";
 4 | export {default as Tabs } from "./Tabs.vue";
 5 | export {default as Tab } from "./Tab.vue";
 6 | export {default as Dialog } from "./Dialog.vue";
 7 | export {default as Icon } from "./Icon.vue";
 8 | export {default as Input} from "./Input.vue";
 9 | export {default as Rate} from "./Rate.vue";
10 | export {Content, Footer, Header, Layout, Side} from "./Layout";
11 | export {default as Spin} from "./Spin.vue";
12 | export {default as Radio} from "./Radio/Radio.vue";
13 | export {default as RadioGroup} from "./Radio/RadioGroup.vue";
14 | export {default as CheckBox} from "./CheckBox/CheckBox.vue";
15 | export {default as CheckBoxGroup} from "./CheckBox/CheckBoxGroup.vue";
16 | export {default as Carousel} from "./Carousel/Carousel.vue";
17 | export {default as CarouselItem} from "./Carousel/CarouselItem.vue";
18 | export {default as Cascader} from "./Cascader/Cascader.vue";
19 | export {default as CascaderItems} from "./Cascader/CascaderItems.vue";
20 | export {default as Collapse} from "./Collapse/Collapse.vue";
21 | export {default as CollapseItem} from "./Collapse/CollapseItem.vue";
22 | export { Message } from "./Message/index";
23 | export {default as Affix} from "./Affix.vue";
24 | export {default as Drawer} from "./Drawer.vue";
25 | export {default as Pager} from "./Pager.vue";
26 | export {default as Popover} from "./Popover.vue";
27 | 
28 | 
29 | 
30 | 
31 | 
32 | 
33 | 
34 | 
35 | 
36 | 
37 | 
38 | 
39 | 
40 | 


--------------------------------------------------------------------------------
/src/components/DrawerDemos/PlacementDrawer.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 不同位置
 3 | </demo>
 4 | <template>
 5 |   <Drawer v-model:visible="visible" :placement="placement">
 6 |     <template v-slot:title>
 7 |       <strong>标题</strong>
 8 |     </template>
 9 |     <template v-slot:content>
10 |       <p>这是一段信息。</p>
11 |       <p>这是一段信息。</p>
12 |       <p>这是一段信息。</p>
13 |     </template>
14 |     <template v-slot:footer>
15 |       <Button @click="toggleDialog2" level="main">确认文本</Button>
16 |     </template>
17 |   </Drawer>
18 |   <Button @click="handleDrawerRight">right</Button>
19 |   <Button @click="handleDrawerLeft">left</Button>
20 |   <Button @click="handleDrawerTop">top</Button>
21 |   <Button @click="handleDrawerBottom">bottom</Button>
22 | </template>
23 | 
24 | <script lang="ts">
25 | import Button from "../../lib/Button.vue";
26 | import Drawer from "../../lib/Drawer.vue";
27 | import { ref } from "vue";
28 | export default {
29 |   components: { Button, Drawer },
30 |   setup() {
31 |     const visible = ref(false);
32 |     const placement = ref("right");
33 |     const handleDrawerRight = () => {
34 |       visible.value = !visible.value;
35 |       placement.value = "right";
36 |     };
37 |     const handleDrawerLeft = () => {
38 |       visible.value = !visible.value;
39 |       placement.value = "left";
40 |     };
41 |     const handleDrawerTop = () => {
42 |       visible.value = !visible.value;
43 |       placement.value = "top";
44 |     };
45 |     const handleDrawerBottom = () => {
46 |       visible.value = !visible.value;
47 |       placement.value = "bottom";
48 |     };
49 | 
50 |     return {
51 |       handleDrawerRight,
52 |       handleDrawerLeft,
53 |       handleDrawerTop,
54 |       handleDrawerBottom,
55 |       visible,
56 |       placement,
57 |     };
58 |   },
59 | };
60 | </script>
61 | 


--------------------------------------------------------------------------------
/src/components/DialogDemos/FooterDialog.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 自定义页脚
 3 | </demo>
 4 | 
 5 | <template>
 6 | <Dialog v-model:visible="isShowDialog" :isCanClickOverlay="false" :mask="false">
 7 |     <template v-slot:title>
 8 |         <strong>提示</strong>
 9 |     </template>
10 |     <template v-slot:content>
11 |         <p>这是一段信息。</p>
12 |         <p>这是一段信息。</p>
13 |         <p>这是一段信息。</p>
14 |     </template>
15 | </Dialog>
16 | <Dialog v-model:visible="isShowDialog2" :isCanClickOverlay="false" :mask="false">
17 |     <template v-slot:title>
18 |         <strong>提示</strong>
19 |     </template>
20 |     <template v-slot:content>
21 |         <p>这是一段信息。</p>
22 |         <p>这是一段信息。</p>
23 |         <p>这是一段信息。</p>
24 |     </template>
25 |     <template v-slot:footer>
26 |         <Button @click="toggleDialog2" level="main">确认文本</Button>
27 |     </template>
28 | </Dialog>
29 | <Button @click="toggleDialog1">without Footer </Button>
30 | <Button @click="toggleDialog2">custom Footer</Button>
31 | </template>
32 | 
33 | <script lang="ts">
34 | import Dialog from "../../lib/Dialog.vue";
35 | import Button from "../../lib/Button.vue";
36 | import {
37 |     ref
38 | } from "vue";
39 | 
40 | export default {
41 |     components: {
42 |         Dialog,
43 |         Button
44 |     },
45 |     setup() {
46 |         const isShowDialog = ref(false);
47 |         const isShowDialog2 = ref(false);
48 |         const toggleDialog1 = () => {
49 |             isShowDialog.value = !isShowDialog.value;
50 |         };
51 | 
52 |         const toggleDialog2 = () => {
53 |             isShowDialog2.value = !isShowDialog2.value;
54 |         }
55 |         return {
56 |             toggleDialog1,
57 |             isShowDialog,
58 |             isShowDialog2,
59 |             toggleDialog2
60 |         };
61 |     }
62 | }
63 | </script>
64 | 


--------------------------------------------------------------------------------
/src/lib/CheckBox/CheckBoxGroup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="le-checkBox-group">
 3 |     <div class="le-checkBox-group-content">
 4 |       <component class="le-checkBox-group-item" v-for="c in defaults" :is="c" :key="c" @change="handleGroupCheckBox" />
 5 |     </div>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import CheckBox from "./CheckBox.vue";
11 | import { PropType, computed, watch, watchEffect, reactive } from "vue";
12 | export default {
13 |   props: {
14 |     value: {
15 |       type: Array as PropType<String[]>,
16 |       default: [],
17 |     },
18 |   },
19 |   emits: ["update:value", "change"],
20 |   setup(props, ctx) {
21 |     const defaults = ctx.slots.default();
22 |     const checkedValue = reactive(props.value);
23 | 
24 |     watchEffect(() => {
25 |       defaults.forEach((_) => {
26 |         if (_.type !== CheckBox) {
27 |           throw new Error("CheckBox-group的子组件必须是radio标签");
28 |         }
29 |         Object.assign(_.props, {
30 |           value: props.value.includes(_.props.label),
31 |         });
32 |       });
33 |     });
34 | 
35 |     const handleGroupCheckBox = (x: { value: string; checked: boolean }) => {
36 |       if (x.checked) {
37 |         if (checkedValue.indexOf(x.value) === -1) {
38 |           checkedValue.push(x.value);
39 |         }
40 |       } else {
41 |         if (checkedValue.indexOf(x.value) !== -1) {
42 |           checkedValue.splice(
43 |             checkedValue.findIndex((_) => _ === x.value),
44 |             1
45 |           );
46 |         }
47 |       }
48 |       ctx.emit("update:value", checkedValue);
49 |       ctx.emit("change", checkedValue);
50 |     };
51 | 
52 |     return {
53 |       defaults,
54 |       handleGroupCheckBox,
55 |     };
56 |   },
57 | };
58 | </script>
59 | 
60 | <style lang="scss" scoped></style>
61 | 


--------------------------------------------------------------------------------
/src/lib/Radio/Radio.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     :class="{
 4 |       'le-radio': true,
 5 |       'le-radio-disabled': disabled,
 6 |     }"
 7 |   >
 8 |     <input type="radio" :id="label" :checked="value === label" :name="name" @change="handleChange" ref="inputRef" />
 9 |     <label :for="label">
10 |       <slot></slot>
11 |       <template v-if="!$slots.default">{{ label }}</template>
12 |     </label>
13 |   </div>
14 | </template>
15 | 
16 | <script lang="ts">
17 | import { ref } from "vue";
18 | export default {
19 |   props: {
20 |     label: {
21 |       type: String,
22 |       required: true,
23 |     },
24 |     value: {
25 |       type: String,
26 |       required: true,
27 |     },
28 |     name: {
29 |       type: String,
30 |     },
31 |     disabled: {
32 |       type: Boolean,
33 |       default: false,
34 |     },
35 |   },
36 |   emits: ["update:value", "change"],
37 |   setup(props, ctx) {
38 |     const inputRef = ref<HTMLInputElement>(null);
39 |     const handleChange = () => {
40 |       ctx.emit("update:value", inputRef.value.id);
41 |       ctx.emit("change", inputRef.value.id);
42 |     };
43 | 
44 |     return {
45 |       handleChange,
46 |       inputRef,
47 |     };
48 |   },
49 | };
50 | </script>
51 | 
52 | <style lang="scss" scoped>
53 | .le-radio {
54 |   display: inline-flex;
55 |   justify-content: center;
56 |   align-items: center;
57 |   cursor: pointer;
58 |   margin-right: 10px;
59 |   label {
60 |     display: inline-flex;
61 |     padding-left: 10px;
62 |     font-size: 14px;
63 |   }
64 |   &.le-radio-disabled {
65 |     cursor: not-allowed;
66 |     opacity: 0.4;
67 |     input {
68 |       cursor: not-allowed;
69 |       pointer-events: none;
70 |     }
71 |     label {
72 |       cursor: not-allowed;
73 |       pointer-events: none;
74 |     }
75 |   }
76 | }
77 | </style>
78 | 


--------------------------------------------------------------------------------
/src/lib/CheckBox/CheckBox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     :class="{
 4 |       'le-checkBox': true,
 5 |       'le-checkBox-disabled': disabled,
 6 |     }"
 7 |   >
 8 |     <input type="checkBox" :id="label" :checked="value" @change="handleChange" ref="inputRef" :indeterminate="indeterminate" />
 9 |     <label :for="label">
10 |       <slot></slot>
11 |       <template v-if="!$slots.default">{{ label }}</template>
12 |     </label>
13 |   </div>
14 | </template>
15 | 
16 | <script lang="ts">
17 | import { ref } from "vue";
18 | export default {
19 |   props: {
20 |     disabled: {
21 |       type: Boolean,
22 |       default: false,
23 |     },
24 |     value: {
25 |       type: Boolean,
26 |       required: true,
27 |     },
28 |     label: {
29 |       type: String,
30 |       required: true,
31 |     },
32 |     indeterminate: {
33 |       type: Boolean,
34 |       default: false,
35 |     },
36 |   },
37 |   emits: ["update:value", "change"],
38 |   setup(props, ctx) {
39 |     const inputRef = ref<HTMLInputElement>(null);
40 | 
41 |     const handleChange = () => {
42 |       ctx.emit("change", { value: props.label, checked: inputRef.value.checked });
43 |     };
44 |     return { handleChange, inputRef };
45 |   },
46 | };
47 | </script>
48 | 
49 | <style lang="scss" scoped>
50 | .le-checkBox {
51 |   display: inline-flex;
52 |   justify-content: center;
53 |   align-items: center;
54 |   cursor: pointer;
55 |   margin-right: 10px;
56 |   label {
57 |     display: inline-flex;
58 |     padding-left: 10px;
59 |     font-size: 14px;
60 |   }
61 |   &.le-checkBox-disabled {
62 |     cursor: not-allowed;
63 |     opacity: 0.4;
64 |     input {
65 |       cursor: not-allowed;
66 |       pointer-events: none;
67 |     }
68 |     label {
69 |       cursor: not-allowed;
70 |       pointer-events: none;
71 |     }
72 |   }
73 | }
74 | </style>
75 | 


--------------------------------------------------------------------------------
/src/lib/Table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="le-table">
 3 |     <table>
 4 |       <thead>
 5 |         <tr>
 6 |           <th v-for="(column, index) in columns" :key="index">
 7 |             <div>{{ column.text }}</div>
 8 |           </th>
 9 |         </tr>
10 |       </thead>
11 |       <tbody>
12 |         <tr v-for="(data, index) in dataSource" :key="index">
13 |           <td v-for="column in columns" :key="column.field">{{ data[column.field] }}</td>
14 |         </tr>
15 |       </tbody>
16 |     </table>
17 |   </div>
18 | </template>
19 | 
20 | <script lang="ts" setup="props, context">
21 | import { ref, computed, SetupContext } from "vue";
22 | 
23 | declare const props: {
24 |   columns: { text: string; field: string }[];
25 |   dataSource: any;
26 | };
27 | declare const context: SetupContext;
28 | 
29 | export default {};
30 | </script>
31 | 
32 | <style lang="scss" scoped>
33 | .le-table {
34 |   table {
35 |     border-collapse: collapse;
36 |     width: 100%;
37 |     border: 1px solid #d9d9d9 !important;
38 |     margin-bottom: 20px;
39 |     th {
40 |       border-collapse: collapse;
41 |       border-right: 1px solid #d9d9d9 !important;
42 |       border-bottom: 1px solid #d9d9d9 !important;
43 |       background: rgba(0, 0, 0, 0.02) !important;
44 |       padding: 8px 16px;
45 |       font-size: 14px;
46 |       font-weight: normal;
47 |       text-align: left;
48 |     }
49 |     td {
50 |       border-collapse: collapse;
51 |       border-right: 1px solid #d9d9d9 !important;
52 |       border-bottom: 1px solid #d9d9d9 !important;
53 |       padding: 8px 16px;
54 |       font-size: 14px;
55 |       font-weight: normal;
56 |       text-align: left;
57 |       word-break: break-all;
58 |     }
59 |     tr {
60 |       &:hover {
61 |         background: rgba(0, 0, 0, 0.02);
62 |       }
63 |     }
64 |   }
65 | }
66 | </style>
67 | 


--------------------------------------------------------------------------------
/src/components/PopoverDemo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="affix-doc">
 3 |     <h2>Popover 弹出层</h2>
 4 |     <Demo :component="BasicPopover" describe="基础用法" />
 5 |     <Demo :component="DirectionPopover" describe="支持四个不同方向" />
 6 |     <Demo :component="TriggerPopover" describe="支持click和hover" />
 7 |     <h2>API</h2>
 8 |     <Table :columns="columns" :dataSource="dataSource" />
 9 |   </div>
10 | </template>
11 | 
12 | <script lang="ts">
13 | import Demo from "./Demo.vue";
14 | import Table from "../lib/Table.vue";
15 | import BasicPopover from "./Popover/BasicPopover.vue";
16 | import DirectionPopover from "./Popover/DirectionPopover.vue";
17 | import TriggerPopover from "./Popover/TriggerPopover.vue";
18 | import { reactive } from "vue";
19 | 
20 | export default {
21 |   components: { Demo, Table },
22 |   setup() {
23 |     const columns = reactive([
24 |       {
25 |         text: "参数",
26 |         field: "params",
27 |       },
28 |       {
29 |         text: "说明",
30 |         field: "description",
31 |       },
32 |       {
33 |         text: "类型",
34 |         field: "type",
35 |       },
36 |       {
37 |         text: "默认值",
38 |         field: "default",
39 |       },
40 |     ]);
41 | 
42 |     const dataSource = reactive([
43 |       {
44 |         params: "position",
45 |         description: "触发方向,支持top,bottom,left,right",
46 |         type: "string",
47 |         default: "top",
48 |       },
49 |       {
50 |         params: "trigger",
51 |         description: "触发方式，支持click和hover",
52 |         type: "string",
53 |         default: "click",
54 |       },
55 |     ]);
56 |     return {
57 |       BasicPopover,
58 |       DirectionPopover,
59 |       TriggerPopover,
60 |       columns,
61 |       dataSource,
62 |     };
63 |   },
64 | };
65 | </script>
66 | 
67 | <style lang="scss" scoped>
68 | .affix-doc {
69 |   width: 100%;
70 | }
71 | </style>
72 | 


--------------------------------------------------------------------------------
/src/components/LayoutDemo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="layout-doc">
 3 |     <h2>Layout 布局</h2>
 4 |     <div class="des">
 5 |         <h3>组件概述</h3>
 6 |         <p>* Layout：布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。</p>
 7 |         <p>* Header：顶部布局，自带默认样式，其下可嵌套任何元素。</p>
 8 |         <p>* Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素。</p>
 9 |         <p>* Content：内容部分，自带默认样式，其下可嵌套任何元素。</p>
10 |         <p>* Footer：底部布局，自带默认样式，其下可嵌套任何元素。</p>
11 |         <span>注意：采用 flex 布局实现，请注意浏览器兼容性问题。</span>
12 |     </div>
13 |     <Demo :component="LayoutDemo1" describe="布局一" />
14 |     <Demo :component="LayoutDemo2" describe="布局二" />
15 |     <Demo :component="LayoutDemo3" describe="布局三" />
16 |     <Demo :component="LayoutDemo4" describe="布局四" />
17 | </div>
18 | </template>
19 | 
20 | <script lang="ts">
21 | import Table from "../lib/Table.vue";
22 | import LayoutDemo1 from "./LayoutDemos/LayoutDemo1.vue";
23 | import LayoutDemo2 from "./LayoutDemos/LayoutDemo2.vue";
24 | import LayoutDemo3 from "./LayoutDemos/LayoutDemo3.vue";
25 | import LayoutDemo4 from "./LayoutDemos/LayoutDemo4.vue";
26 | import Demo from "./Demo.vue";
27 | 
28 | export default {
29 |     components: {
30 |         Demo,
31 |         Table
32 |     },
33 |     setup() {
34 |         return {
35 |             LayoutDemo1,
36 |             LayoutDemo2,
37 |             LayoutDemo3,
38 |             LayoutDemo4
39 |         }
40 |     }
41 | }
42 | </script>
43 | 
44 | <style lang="scss" scoped>
45 | .layout-doc {
46 |     width: 100%;
47 | 
48 |     .des {
49 |         font-size: 16px;
50 |         margin: 10px 0;
51 |         p {
52 |             display: flex;
53 |             align-items: center;
54 |             margin: 6px 0;
55 |         }
56 |         span {
57 |             font-size: 14px;
58 |             font-style: italic;
59 |             color: #697b8c;
60 |         }
61 |     }
62 | }
63 | </style>
64 | 


--------------------------------------------------------------------------------
/src/components/TabsDemo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="tabs_doc">
 3 |     <h2>Tabs 标签页</h2>
 4 |     <Demo :component="BasicDemo" describe="最基本的用法" />
 5 |     <Demo :component="DisabledTabs" describe="指定禁用选项" />
 6 |     <Demo :component="VerticalTabs" describe="垂直排列。" />
 7 | 
 8 |     <h2>API</h2>
 9 |     <Table :columns="columns" :dataSource="dataSource" />
10 |     <h2>Methods</h2>
11 |     <Table :columns="columns2" :dataSource="dataSource2" />
12 |   </div>
13 | </template>
14 | 
15 | <script lang="ts">
16 | import { ref, reactive } from "vue";
17 | import Table from "../lib/Table.vue";
18 | import Demo from "./Demo.vue";
19 | import BasicDemo from "./TabsDemos/BasicDemo.vue";
20 | import DisabledTabs from "./TabsDemos/DisabledTabs.vue";
21 | import VerticalTabs from "./TabsDemos/VerticalTabs.vue";
22 | export default {
23 |   components: { Demo, Table },
24 |   setup() {
25 |     const columns = reactive([
26 |       {
27 |         text: "参数",
28 |         field: "params",
29 |       },
30 |       {
31 |         text: "说明",
32 |         field: "description",
33 |       },
34 |       {
35 |         text: "类型",
36 |         field: "type",
37 |       },
38 |       {
39 |         text: "默认值",
40 |         field: "default",
41 |       },
42 |     ]);
43 | 
44 |     const dataSource = reactive([
45 |       {
46 |         params: "v-model/selected",
47 |         description: "默认的绑定值",
48 |         type: "string",
49 |         default: "-",
50 |       },
51 |       {
52 |         params: "disabled",
53 |         description: "是否禁用",
54 |         type: "boolean",
55 |         default: "false",
56 |       },
57 |       {
58 |         params: "vertical",
59 |         description: "是否开启垂直",
60 |         type: "boolean",
61 |         default: "false",
62 |       },
63 |     ]);
64 |     return { BasicDemo, DisabledTabs, VerticalTabs, columns, dataSource };
65 |   },
66 | };
67 | </script>
68 | 
69 | <style lang="scss" scoped>
70 | .tabs_doc {
71 |   width: 100%;
72 | }
73 | </style>
74 | 


--------------------------------------------------------------------------------
/src/components/CheckBoxDemos/IndeterminateCheckBox.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 |     全选
 3 | </demo>
 4 | 
 5 | <template>
 6 |   <CheckBox v-model:value="checkAll" label="全选" :indeterminate="indeterminate" @change="handleCheckAll" />
 7 |   <check-box-group v-model:value="options">
 8 |     <CheckBox label="上海" />
 9 |     <CheckBox label="北京" />
10 |     <CheckBox label="广州" />
11 |     <CheckBox label="深圳" />
12 |   </check-box-group>
13 | </template>
14 | <script lang="ts">
15 | import CheckBox from "../../lib/CheckBox/CheckBox.vue";
16 | import CheckBoxGroup from "../../lib/CheckBox/CheckBoxGroup.vue";
17 | import { isSameStringArr } from "../../../utils";
18 | 
19 | import { reactive, toRefs, watchEffect, onMounted } from "vue";
20 | 
21 | const cityOptions = ["上海", "北京", "广州", "深圳"];
22 | 
23 | export default {
24 |   components: { CheckBox, CheckBoxGroup },
25 |   setup() {
26 |     const state = reactive({
27 |       options: ["上海"],
28 |       checkAll: false,
29 |       indeterminate: true,
30 |     });
31 |     const handleCheckAll = (check) => {
32 |       if (check.checked) {
33 |         state.indeterminate = false;
34 |         state.checkAll = true;
35 |         state.options = [...cityOptions];
36 |       } else {
37 |         state.checkAll = false;
38 |         state.indeterminate = false;
39 |         state.options = [];
40 |       }
41 |     };
42 | 
43 |     onMounted(() => {
44 |       watchEffect(() => {
45 |         const isSameArr = isSameStringArr(cityOptions, state.options);
46 |         if (isSameArr) {
47 |           state.checkAll = true;
48 |           state.indeterminate = false;
49 |         } else if (state.options.length === 0) {
50 |           state.indeterminate = false;
51 |           state.checkAll = false;
52 |         } else {
53 |           state.checkAll = false;
54 |           state.indeterminate = true;
55 |         }
56 |       });
57 |     });
58 | 
59 |     return {
60 |       ...toRefs(state),
61 |       handleCheckAll,
62 |     };
63 |   },
64 | };
65 | </script>
66 | 


--------------------------------------------------------------------------------
/src/components/RadioDemo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="radio-doc">
 3 |     <h2>Radio 单选框</h2>
 4 |     <Demo :component="BasicRadio" describe="最基本的用法" />
 5 |     <Demo :component="DisabledRadio" describe="设置disabled以禁用" />
 6 |     <Demo :component="RadioGroup" describe="使用radio-group可以实现单选组" />
 7 |     <h2>API</h2>
 8 |     <Table :columns="columns" :dataSource="dataSource" />
 9 |     <h2>Methods</h2>
10 |     <Table :columns="columns" :dataSource="dataSource2" />
11 |   </div>
12 | </template>
13 | 
14 | <script lang="ts">
15 | import BasicRadio from "./RadioDemos/BasicRadio.vue";
16 | import DisabledRadio from "./RadioDemos/DisabledRadio.vue";
17 | import RadioGroup from "./RadioDemos/RadioGroup.vue";
18 | import Demo from "./Demo.vue";
19 | import Table from "../lib/Table.vue";
20 | import { reactive } from "vue";
21 | 
22 | export default {
23 |   components: { Demo, Table },
24 | 
25 |   setup() {
26 |     const columns = reactive([
27 |       { text: "参数", field: "params" },
28 |       { text: "说明", field: "description" },
29 |       { text: "类型", field: "type" },
30 |       { text: "默认值", field: "default" },
31 |     ]);
32 | 
33 |     const dataSource = reactive([
34 |       { params: "v-model/value", description: "绑定值", type: "string", default: "-" },
35 |       { params: "label", description: "radio文本说明", type: "string", default: "-" },
36 |       { params: "name", description: "radio name 属性，用于分组", type: "string", default: "-" },
37 |       { params: "disabled", description: "是否禁用", type: "boolean", default: "false" },
38 |     ]);
39 |     const dataSource2 = reactive([
40 |       { params: "change", description: "radio/radio-group改变的回调", type: "(value: string) => void", default: "-" },
41 |     ]);
42 |     return {
43 |       BasicRadio,
44 |       DisabledRadio,
45 |       RadioGroup,
46 |       columns,
47 |       dataSource,
48 |       dataSource2
49 |     };
50 |   },
51 | };
52 | </script>
53 | 
54 | <style lang="scss" scoped>
55 | .radio-doc {
56 |   width: 100%;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/src/lib/Affix.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="le-affix" ref="affixRef">
 3 |     <slot></slot>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import { onMounted, onUnmounted, ref } from "vue";
 9 | export default {
10 |   props: {
11 |     offsetTop: {
12 |       type: Number,
13 |       default: 0,
14 |     },
15 |   },
16 |   setup(props, ctx) {
17 |     const affixRef = ref<HTMLDivElement>(null);
18 |     const originTopRef = ref(0);
19 | 
20 |     onMounted(() => {
21 |       originTopPosition();
22 |       console.log(originTopRef.value);
23 |       window.addEventListener("scroll", handleScroll, true);
24 |     });
25 | 
26 |     onUnmounted(() => {
27 |       window.removeEventListener("scroll", handleScroll, true);
28 |     });
29 | 
30 |     const originTopPosition = () => {
31 |       if (window.scrollY === 0) {
32 |         originTopRef.value = affixRef.value.getBoundingClientRect().top;
33 |       } else {
34 |         const { scrollX, scrollY } = window;
35 |         window.scrollTo(scrollX, 0);
36 |         originTopRef.value = affixRef.value.getBoundingClientRect().top;
37 |         window.scrollTo(scrollX, scrollY);
38 |       }
39 |     };
40 | 
41 |     const handleScroll = (e) => {
42 |       const { top, bottom, left, right } = affixRef.value.getBoundingClientRect();
43 |       if (
44 |         props.offsetTop !== undefined &&
45 |         e.srcElement.scrollTop >= originTopRef.value - props.offsetTop
46 |       ) {
47 |         affixRef.value.style.position = "fixed";
48 |         affixRef.value.style.width = right - left + "px";
49 |         affixRef.value.style.height = bottom - top + "px";
50 |         affixRef.value.style.left = left + "px";
51 |         affixRef.value.style.top = props.offsetTop + "px";
52 |       } else {
53 |         affixRef.value.style.position = "static";
54 |       }
55 |     };
56 | 
57 |     return { affixRef };
58 |   },
59 | };
60 | </script>
61 | 
62 | <style lang="scss" scoped>
63 | .le-affix {
64 |   z-index: 200;
65 | }
66 | </style>
67 | 


--------------------------------------------------------------------------------
/src/lib/Carousel/CarouselItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <template v-if="animationEnabled">
 3 |     <transition name="slide">
 4 |       <div class="le-carousel-item" v-if="visible" :class="{ reverse }">
 5 |         <slot></slot>
 6 |       </div>
 7 |     </transition>
 8 |   </template>
 9 |   <template v-else>
10 |     <div class="le-carousel-item" v-if="visible" :class="{ reverse }">
11 |       <slot></slot>
12 |     </div>
13 |   </template>
14 | </template>
15 | 
16 | <script lang="ts">
17 | import {
18 |   computed,
19 |   reactive,
20 |   onUpdated,
21 |   watch,
22 |   watchEffect,
23 |   toRefs,
24 |   inject,
25 |   ref,
26 |   nextTick,
27 | } from "vue";
28 | export default {
29 |   props: {
30 |     name: {
31 |       type: String,
32 |       required: true,
33 |     },
34 |     reverse: {
35 |       type: Boolean,
36 |     },
37 |   },
38 | 
39 |   setup(props, ctx) {
40 |     const state = toRefs(
41 |       inject("state") as {
42 |         currentSelectName: string;
43 |         animationEnabled: boolean;
44 |         lastIndex: number;
45 |         currentSelectIndex: number;
46 |         totalLength: number;
47 |       }
48 |     );
49 |     const visible = ref(state.currentSelectName.value == props.name);
50 | 
51 |     watchEffect(() => {
52 |       visible.value = state.currentSelectName.value == props.name;
53 |     });
54 | 
55 |     return {
56 |       ...toRefs(state),
57 |       visible,
58 |     };
59 |   },
60 | };
61 | </script>
62 | 
63 | <style lang="scss" scoped>
64 | .le-carousel-item {
65 |   width: 100%;
66 |   height: 100%;
67 | }
68 | .slide-leave-active {
69 |   position: absolute;
70 |   left: 0;
71 |   top: 0;
72 |   width: 100%;
73 |   height: 100%;
74 | }
75 | .slide-enter-active,
76 | .slide-leave-active {
77 |   transition: all 0.5s;
78 | }
79 | .slide-enter {
80 |   transform: translateX(100%);
81 | }
82 | .slide-enter.reverse {
83 |   transform: translateX(-100%);
84 | }
85 | .slide-leave-to {
86 |   transform: translateX(-100%);
87 | }
88 | .slide-leave-to.reverse {
89 |   transform: translateX(100%);
90 | }
91 | </style>
92 | 


--------------------------------------------------------------------------------
/src/views/Doc.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="doc">
 3 |     <TopNav :isShowAside="isShowAsideIcon" :toggleAisde="toggleAisde" />
 4 |     <div class="content">
 5 |       <Aside ref="asideRef" v-if="isShowAside" />
 6 |       <Main />
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script lang="ts">
12 | import TopNav from "./TopNav.vue";
13 | import Aside from "../components/Other/Aside.vue";
14 | import Main from "../components/Other/Main.vue";
15 | import { ref, onMounted, onUnmounted } from "vue";
16 | import { router } from "../router";
17 | 
18 | export default {
19 |   components: { TopNav, Aside, Main },
20 |   setup(props) {
21 |     const asideRef = ref(null);
22 |     const isShowAside = ref(true);
23 |     const isShowAsideIcon = ref(false);
24 |     const clientWidth = ref(document.body.clientWidth);
25 | 
26 |     const toggleAisde = () => {
27 |       isShowAside.value = !isShowAside.value;
28 |     };
29 | 
30 |     const handleClientResize = () => {
31 |       clientWidth.value = document.body.clientWidth;
32 |       isShowAside.value = clientWidth.value < 600 ? false : true;
33 |       isShowAsideIcon.value = clientWidth.value < 600 ? true : false;
34 |     };
35 | 
36 |     router.beforeEach((to, from, next) => {
37 |       handleClientResize();
38 |       next();
39 |     });
40 | 
41 |     onMounted(() => {
42 |       handleClientResize();
43 |       window.onresize = () => {
44 |         handleClientResize();
45 |       };
46 |     });
47 | 
48 |     onUnmounted(() => {
49 |       window.onresize = null;
50 |     });
51 | 
52 |     return {
53 |       toggleAisde,
54 |       isShowAside,
55 |       asideRef,
56 |       isShowAsideIcon
57 |     };
58 |   }
59 | };
60 | </script>
61 | 
62 | <style lang="scss" scoped>
63 | .doc {
64 |   width: 100%;
65 |   // height: 100vh;
66 |   display: flex;
67 |   flex-direction: column;
68 |   flex: 1;
69 |   position: relative;
70 |   overflow: hidden;
71 |   .content {
72 |     display: flex;
73 |     padding-top: 10px;
74 |     height: 100%;
75 |     overflow: auto;
76 |   }
77 |   @media screen and (max-width: 600px) {
78 |     .aside {
79 |       width: 110px;
80 |     }
81 |   }
82 | }
83 | </style>


--------------------------------------------------------------------------------
/src/components/Demo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="demo">
 3 |     <h2>{{component.__sourceCodeTitle}}</h2>
 4 |     <div class="demo-component">
 5 |       <component :is="component" />
 6 |     </div>
 7 |     <div class="demo-actions">
 8 |       <span>{{describe}}</span>
 9 |       <Button @click="toggleCode">Code</Button>
10 |     </div>
11 |     <div class="demo-code" v-if="codeVisible">
12 |       <pre class="language-html" v-html="html" />
13 |     </div>
14 |   </div>
15 | </template>
16 | 
17 | <script lang="ts">
18 | import Button from "../lib/Button.vue";
19 | import "prismjs";
20 | import "prismjs/themes/prism-tomorrow.css";
21 | import { computed, ref } from "vue";
22 | const Prism = (window as any).Prism;
23 | export default {
24 |   components: {
25 |     Button
26 |   },
27 |   props: {
28 |     component: Object,
29 |     describe: String
30 |   },
31 |   setup(props) {
32 |     const html = computed(() => {
33 |       return Prism.highlight(
34 |         props.component.__sourceCode,
35 |         Prism.languages.html,
36 |         "html"
37 |       );
38 |     });
39 |     const toggleCode = () => (codeVisible.value = !codeVisible.value);
40 |     const codeVisible = ref(false);
41 |     return {
42 |       Prism,
43 |       html,
44 |       codeVisible,
45 |       toggleCode
46 |     };
47 |   }
48 | };
49 | </script>
50 | 
51 | <style lang="scss" scoped>
52 | $border-color: #d9d9d9;
53 | $fontSize-color: rgba(0, 0, 0, 0.65);
54 | .demo {
55 |   border: 1px solid $border-color;
56 |   margin: 16px 0 32px;
57 |   > h2 {
58 |     font-size: 20px;
59 |     padding: 8px 16px;
60 |     border-bottom: 1px solid $border-color;
61 |   }
62 |   &-component {
63 |     padding: 16px;
64 |   }
65 |   &-actions {
66 |     display: flex;
67 |     align-items: center;
68 |     justify-content: space-between;
69 |     padding: 8px 16px;
70 |     border-top: 1px dashed $border-color;
71 |     font-size: 14px;
72 |     color: $fontSize-color;
73 |   }
74 |   &-code {
75 |     padding: 8px 16px;
76 |     border-top: 1px dashed $border-color;
77 |     > pre {
78 |       line-height: 1.1;
79 |       font-family: Consolas, "Courier New", Courier, monospace;
80 |       margin: 0;
81 |     }
82 |   }
83 | }
84 | </style>


--------------------------------------------------------------------------------
/src/components/CollapseDemo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="collapse-doc">
 3 |     <h2>Collapse 折叠面板</h2>
 4 |     <Demo :component="BasicCollapse" describe="最基本的用法" />
 5 |     <Demo :component="DisabledCollapse" describe="使用disabled禁用某一个面板" />
 6 |     <Demo :component="AccordionCollapse" describe="使用accordion设置为手风琴模式" />
 7 |     <h2>API</h2>
 8 |     <Table :columns="columns" :dataSource="dataSource" />
 9 |     <h2>Methods</h2>
10 |     <Table :columns="columns" :dataSource="dataSource2" />
11 |   </div>
12 | </template>
13 | 
14 | <script lang="ts">
15 | import Demo from "./Demo.vue";
16 | import BasicCollapse from "./CollapseDemos/BasicCollapse.vue";
17 | import DisabledCollapse from "./CollapseDemos/DisabledCollapse.vue";
18 | import AccordionCollapse from "./CollapseDemos/AccordionCollapse.vue";
19 | import Table from "../lib/Table.vue";
20 | import { reactive } from "vue";
21 | 
22 | export default {
23 |   components: { Demo, Table },
24 |   setup() {
25 |     const columns = reactive([
26 |       { text: "参数", field: "params" },
27 |       { text: "说明", field: "description" },
28 |       { text: "类型", field: "type" },
29 |       { text: "默认值", field: "default" },
30 |     ]);
31 | 
32 |     const dataSource = reactive([
33 |       {
34 |         params: "v-model/defaultSpread",
35 |         description: "绑定值",
36 |         type: "number/number[]",
37 |         default: "-",
38 |       },
39 |       {
40 |         params: "accordion",
41 |         description: "是否开启手风琴模式",
42 |         type: "boolean",
43 |         default: "false",
44 |       },
45 |       {
46 |         params: "disabled(collapseItem)",
47 |         description: "是否禁用某一块面板",
48 |         type: "boolean",
49 |         default: "false",
50 |       },
51 |     ]);
52 |     const dataSource2 = reactive([
53 |       {
54 |         params: "change",
55 |         description: "激活面板改变时触发的回调",
56 |         type: "(value: number[]) => void",
57 |         default: "-",
58 |       },
59 |     ]);
60 |     return {
61 |       BasicCollapse,
62 |       DisabledCollapse,
63 |       AccordionCollapse,
64 |       columns,
65 |       dataSource,
66 |       dataSource2,
67 |     };
68 |   },
69 | };
70 | </script>
71 | <style lang="scss" scoped>
72 | .collapse-doc {
73 |   width: 100%;
74 | }
75 | </style>
76 | 


--------------------------------------------------------------------------------
/src/components/CheckBoxDemo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="checkBox-doc">
 3 |     <h2>CheckBox 复选框</h2>
 4 |     <Demo :component="BasicCheckBox" describe="最基本的用法" />
 5 |     <Demo :component="DisabledCheckBox" describe="设置disabled可以禁用" />
 6 |     <Demo :component="GroupCheckBox" describe="使用check-box-group可以实现多选框组" />
 7 |     <Demo :component="IndeterminateCheckBox" describe="使用check-box-group可以实现多选框组" />
 8 |     <h2>API</h2>
 9 |     <Table :columns="columns" :dataSource="dataSource" />
10 |     <h2>Methods</h2>
11 |     <Table :columns="columns" :dataSource="dataSource2" />
12 |   </div>
13 | </template>
14 | 
15 | <script lang="ts">
16 | import BasicCheckBox from "./CheckBoxDemos/BasicCheckBox.vue";
17 | import DisabledCheckBox from "./CheckBoxDemos/DisabledCheckBox.vue";
18 | import GroupCheckBox from "./CheckBoxDemos/GroupCheckBox.vue";
19 | import IndeterminateCheckBox from "./CheckBoxDemos/IndeterminateCheckBox.vue";
20 | import Demo from "./Demo.vue";
21 | import Table from "../lib/Table.vue";
22 | import { reactive } from "vue";
23 | 
24 | export default {
25 |   components: { Demo, Table },
26 |   setup() {
27 |     const columns = reactive([
28 |       { text: "参数", field: "params" },
29 |       { text: "说明", field: "description" },
30 |       { text: "类型", field: "type" },
31 |       { text: "默认值", field: "default" },
32 |     ]);
33 | 
34 |     const dataSource = reactive([
35 |       { params: "v-model/value", description: "绑定值", type: "string", default: "-" },
36 |       { params: "label", description: "checkBox文本说明", type: "string", default: "-" },
37 |       { params: "indeterminate", description: "checkBox中间状态", type: "boolean", default: "false" },
38 |       { params: "disabled", description: "是否禁用", type: "boolean", default: "false" },
39 |     ]);
40 |     const dataSource2 = reactive([
41 |       { params: "change", description: "checkBox改变的回调", type: "(value: string) => void", default: "-" },
42 |       { params: "change", description: "check-box-group改变的回调", type: "(value: string[]) => void", default: "-" },
43 |       ]);
44 |     return {
45 |       BasicCheckBox,
46 |       DisabledCheckBox,
47 |       GroupCheckBox,
48 |       IndeterminateCheckBox,
49 |       columns,
50 |       dataSource,
51 |       dataSource2,
52 |     };
53 |   },
54 | };
55 | </script>
56 | 
57 | <style lang="scss" scoped>
58 | .checkBox-doc {
59 |   width: 100%;
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/src/lib/Collapse/Collapse.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="le-collapse">
 3 |     <component
 4 |       v-for="c in defaults"
 5 |       :is="c"
 6 |       :key="c"
 7 |       @currentSpreadEvent="handleCurrentSpread"
 8 |     />
 9 |   </div>
10 | </template>
11 | 
12 | <script lang="ts">
13 | import CollapseItem from "./CollapseItem.vue";
14 | import { watchEffect, ref, provide, PropType, reactive } from "vue";
15 | export default {
16 |   components: { CollapseItem },
17 |   props: {
18 |     accordion: {
19 |       type: Boolean,
20 |       default: false,
21 |     },
22 |     defaultSpread: {
23 |       type: [Array, Number] as PropType<number | number[]>,
24 |       default: [],
25 |     },
26 |   },
27 | 
28 |   emits: ["change"],
29 | 
30 |   setup(props, ctx) {
31 |     const state = reactive([].concat(props.defaultSpread));
32 |     if (props.accordion && state.length > 1) {
33 |       console.error("手风琴模式下请设置正确的初始值");
34 |       return;
35 |     }
36 | 
37 |     const defaults = ctx.slots.default();
38 |     const currentSpread = ref(-1);
39 |     const changeSpread = reactive([]);
40 | 
41 |     provide("currentSpreadStatus", {
42 |       currentSpread: currentSpread,
43 |       accordion: props.accordion,
44 |       defaultSpread: state,
45 |     }),
46 |       watchEffect(() => {
47 |         defaults.forEach((_, i) => {
48 |           if (_.type !== CollapseItem) {
49 |             throw new Error("Collapse的子组件必须是CollapseItem");
50 |           }
51 |           Object.assign(_.props, {
52 |             isLastChild: i === defaults.length - 1,
53 |             itemKey: i,
54 |           });
55 |         });
56 |       });
57 | 
58 |     const handleCurrentSpread = (state: { key: number; status: boolean }) => {
59 |       if (state.status) {
60 |         currentSpread.value = state.key;
61 |         if (!changeSpread.includes(state.key)) {
62 |           changeSpread.push(state.key);
63 |         }
64 |       } else {
65 |         if (changeSpread.includes(state.key)) {
66 |           changeSpread.splice(changeSpread.indexOf(state.key), 1);
67 |         }
68 |       }
69 |       ctx.emit("change", changeSpread);
70 |     };
71 | 
72 |     return { defaults, handleCurrentSpread, currentSpread };
73 |   },
74 | };
75 | </script>
76 | <style lang="scss" scoped>
77 | .le-collapse {
78 |   border: 1px solid rgba(0, 0, 0, 0.3);
79 |   border-radius: 8px;
80 |   overflow: hidden;
81 | }
82 | </style>
83 | 


--------------------------------------------------------------------------------
/src/components/CollapseDemos/DisabledCollapse.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 禁用状态
 3 | </demo>
 4 | <template>
 5 |   <Collapse>
 6 |     <collapse-item title="This is panel header 1">
 7 |       <p>
 8 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
 9 |         can be found as a welcome guest in many households across the world.
10 |       </p>
11 |       <p>
12 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
13 |         can be found as a welcome guest in many households across the world.
14 |       </p>
15 |       <p>
16 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
17 |         can be found as a welcome guest in many households across the world.
18 |       </p>
19 |     </collapse-item>
20 |     <collapse-item title="This is panel header 2">
21 |       <p>
22 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
23 |         can be found as a welcome guest in many households across the world.
24 |       </p>
25 |       <p>
26 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
27 |         can be found as a welcome guest in many households across the world.
28 |       </p>
29 |       <p>
30 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
31 |         can be found as a welcome guest in many households across the world.
32 |       </p>
33 |     </collapse-item>
34 |     <collapse-item title="This is panel header 3" disabled>
35 |       <p>
36 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
37 |         can be found as a welcome guest in many households across the world.
38 |       </p>
39 |       <p>
40 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
41 |         can be found as a welcome guest in many households across the world.
42 |       </p>
43 |       <p>
44 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
45 |         can be found as a welcome guest in many households across the world.
46 |       </p>
47 |     </collapse-item>
48 |   </Collapse>
49 | </template>
50 | 
51 | <script lang="ts">
52 | import Collapse from "../../lib/Collapse/Collapse.vue";
53 | import CollapseItem from "../../lib/Collapse/CollapseItem.vue";
54 | export default {
55 |   components: { Collapse, CollapseItem },
56 | };
57 | </script>
58 | 


--------------------------------------------------------------------------------
/src/components/CollapseDemos/AccordionCollapse.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 手风琴模式
 3 | </demo>
 4 | <template>
 5 |   <Collapse accordion>
 6 |     <collapse-item title="This is panel header 1" >
 7 |       <p>
 8 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
 9 |         can be found as a welcome guest in many households across the world.
10 |       </p>
11 |       <p>
12 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
13 |         can be found as a welcome guest in many households across the world.
14 |       </p>
15 |       <p>
16 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
17 |         can be found as a welcome guest in many households across the world.
18 |       </p>
19 |     </collapse-item>
20 |     <collapse-item title="This is panel header 2">
21 |       <p>
22 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
23 |         can be found as a welcome guest in many households across the world.
24 |       </p>
25 |       <p>
26 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
27 |         can be found as a welcome guest in many households across the world.
28 |       </p>
29 |       <p>
30 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
31 |         can be found as a welcome guest in many households across the world.
32 |       </p>
33 |     </collapse-item>
34 |     <collapse-item title="This is panel header 3">
35 |       <p>
36 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
37 |         can be found as a welcome guest in many households across the world.
38 |       </p>
39 |       <p>
40 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
41 |         can be found as a welcome guest in many households across the world.
42 |       </p>
43 |       <p>
44 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
45 |         can be found as a welcome guest in many households across the world.
46 |       </p>
47 |     </collapse-item>
48 |   </Collapse>
49 | </template>
50 | 
51 | <script lang="ts">
52 | import Collapse from "../../lib/Collapse/Collapse.vue";
53 | import CollapseItem from "../../lib/Collapse/CollapseItem.vue";
54 | export default {
55 |   components: { Collapse, CollapseItem },
56 | };
57 | </script>
58 | 


--------------------------------------------------------------------------------
/src/components/CascaderDemo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="cascader-doc">
 3 |     <h2>Cascader 级联选择器</h2>
 4 |     <Demo :component="BasicCascader" describe="基本用法" />
 5 |     <Demo :component="Multilayer" describe="支持无限多层嵌套" />
 6 |     <Demo :component="DisabledCascader" describe="只需要在某项加上disabled：true即可" />
 7 |     <h2>API</h2>
 8 |     <Table :columns="columns" :dataSource="dataSource" />
 9 |     <h2>Methods</h2>
10 |     <Table :columns="columns" :dataSource="dataSource2" />
11 |   </div>
12 | </template>
13 | 
14 | <script lang="ts">
15 | import Demo from "./Demo.vue";
16 | import BasicCascader from "./CascaderDemos/BasicCascader.vue";
17 | import Multilayer from "./CascaderDemos/Multilayer.vue";
18 | import DisabledCascader from "./CascaderDemos/DisabledCascader.vue";
19 | import { reactive } from "vue";
20 | import Table from "../lib/Table.vue";
21 | 
22 | export default {
23 |   components: {
24 |     Demo,
25 |   },
26 |   setup() {
27 |     const columns = reactive([
28 |       { text: "参数", field: "params" },
29 |       { text: "说明", field: "description" },
30 |       { text: "类型", field: "type" },
31 |       { text: "默认值", field: "default" },
32 |     ]);
33 | 
34 |     const dataSource = reactive([
35 |       {
36 |         params: "source",
37 |         description: "级联选择器的数据源",
38 |         type: "{name: string,value: string,disabled?: boolean,children?:[]}[]",
39 |         default: "-",
40 |       },
41 |       {
42 |         params: "popoverHeight",
43 |         description: "自定义高度",
44 |         type: "string",
45 |         default: "200px",
46 |       },
47 |       {
48 |         params: "selected",
49 |         description: "v-model/选中绑定值",
50 |         type: "{name: string,value: string,disabled?: boolean,children?:[]}[]",
51 |         default: "-",
52 |       },
53 |       {
54 |         params: "defaultSelected",
55 |         description: "默认选种值",
56 |         type: "string",
57 |         default: "-",
58 |       },
59 |     ]);
60 |     const dataSource2 = reactive([
61 |       {
62 |         params: "onChange",
63 |         description: "级联选择器选中时的回调",
64 |         type: "(value: string[]) => void",
65 |         default: "-",
66 |       },
67 |     ]);
68 |     return {
69 |       BasicCascader,
70 |       DisabledCascader,
71 |       Multilayer,
72 |       columns,
73 |       dataSource,
74 |       dataSource2,
75 |       Table,
76 |     };
77 |   },
78 | };
79 | </script>
80 | 
81 | <style lang="scss" scoped>
82 | .cascader-doc {
83 |   width: 100%;
84 | }
85 | </style>
86 | 


--------------------------------------------------------------------------------
/src/views/TopNav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="topnav">
 3 |     <div class="asideIcon" @click="handleClickTopMenu" v-if="isShowAside" />
 4 |     <div class="left_logo">
 5 |       <router-link to="/">
 6 |         <img src="../assets/logo.svg" alt />
 7 |       </router-link>
 8 |       <span>Le-Vue-UI</span>
 9 |     </div>
10 |     <div class="right_guide">
11 |       <div class="docs">
12 |         <router-link to="/doc">Docs</router-link>
13 |       </div>
14 |       <div class="guide">
15 |         <a href="https://github.com/mywebc/le-vue">Github</a>
16 |       </div>
17 |     </div>
18 |   </div>
19 | </template>
20 | <script lang="ts">
21 | export default {
22 |   props: {
23 |     isShowAside: {
24 |       default: false,
25 |       type: Boolean
26 |     },
27 |     toggleAisde: Function
28 |   },
29 |   setup(props) {
30 |     const { toggleAisde } = props;
31 |     const handleClickTopMenu = () => {
32 |       toggleAisde && toggleAisde();
33 |     };
34 |     return { handleClickTopMenu };
35 |   }
36 | };
37 | </script>
38 | 
39 | <style lang="scss" scoped>
40 | .topnav {
41 |   height: 60px;
42 |   display: flex;
43 |   align-items: center;
44 |   justify-content: space-between;
45 |   padding: 10px 40px;
46 |   border-bottom: 1px solid #eee;
47 |   box-shadow: 2px 2px 10px #eee;
48 |   .left_logo {
49 |     display: flex;
50 |     align-items: center;
51 |     img {
52 |       width: 32px;
53 |       height: 32px;
54 |     }
55 |     & > span {
56 |       display: inline-flex;
57 |       width: 100px;
58 |       color: rgba(0, 0, 0, 0.85);
59 |       font-size: 18px;
60 |       font-family: "Avenir,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji";
61 |       white-space: nowrap;
62 |       text-decoration: none;
63 |       justify-content: center;
64 |       align-items: center;
65 |     }
66 |   }
67 |   .right_guide {
68 |     display: flex;
69 |     > div {
70 |       margin: 0 1em;
71 |       cursor: pointer;
72 |       > a {
73 |         font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
74 |         font-size: 1rem;
75 |         color: #304455;
76 |         &:hover {
77 |           color: rgb(7 177 99);
78 |         }
79 |       }
80 |     }
81 |   }
82 |   .asideIcon {
83 |     position: absolute;
84 |     left: 0;
85 |     width: 32px;
86 |     height: 32px;
87 |     background: url("../assets/menu.svg");
88 |     background-size: 100% 100%;
89 |     cursor: pointer;
90 |   }
91 | }
92 | </style>


--------------------------------------------------------------------------------
/src/components/CarouselDemo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="carousel-doc">
 3 |     <h2>Carousel 走马灯</h2>
 4 |     <Demo :component="BasicCarousel" describe="最基本的用法" />
 5 |     <Demo :component="SignCarousel" describe="可以设置左右箭头和下标指示器" />
 6 |     <Demo :component="Duration" describe="可以自定义动画时间，单位为ms，默认3000" />
 7 |     <Demo :component="AnimationCarousel" describe="支持关闭动画" />
 8 |     <h2>API</h2>
 9 |     <Table :columns="columns" :dataSource="dataSource" />
10 |   </div>
11 | </template>
12 | 
13 | <script lang="ts">
14 | import BasicCarousel from "./CarouselDemos/BasicCarousel.vue";
15 | import SignCarousel from "./CarouselDemos/SignCarousel.vue";
16 | import Duration from "./CarouselDemos/Duration.vue";
17 | import AnimationCarousel from "./CarouselDemos/AnimationCarousel.vue";
18 | import Demo from "./Demo.vue";
19 | import Table from "../lib/Table.vue";
20 | import { reactive } from "vue";
21 | 
22 | export default {
23 |   components: { Demo, Table },
24 |   setup() {
25 |     const columns = reactive([
26 |       { text: "参数", field: "params" },
27 |       { text: "说明", field: "description" },
28 |       { text: "类型", field: "type" },
29 |       { text: "默认值", field: "default" },
30 |     ]);
31 | 
32 |     const dataSource = reactive([
33 |       { params: "selected", description: "默认name属性值", type: "string", default: "-" },
34 |       { params: "height", description: "自定义高度", type: "number", default: "200" },
35 |       {
36 |         params: "autoPlay",
37 |         description: "是否自动播放",
38 |         type: "boolean",
39 |         default: "true",
40 |       },
41 |       {
42 |         params: "autoPlayDelay",
43 |         description: "自动播放时间",
44 |         type: "number",
45 |         default: "300ms",
46 |       },
47 |       { params: "dots", description: "是否显示指示点", type: "boolean", default: "true" },
48 |       {
49 |         params: "arrow",
50 |         description: "是否显示左右箭头",
51 |         type: "boolean",
52 |         default: "false",
53 |       },
54 |       {
55 |         params: "animationEnabled",
56 |         description: "是否开启动画",
57 |         type: "boolean",
58 |         default: "true",
59 |       },
60 |       {
61 |         params: "name",
62 |         description: "每个item的唯一id",
63 |         type: "string",
64 |         default: "-",
65 |       },
66 |     ]);
67 |     return {
68 |       BasicCarousel,
69 |       SignCarousel,
70 |       Duration,
71 |       AnimationCarousel,
72 |       columns,
73 |       dataSource,
74 |     };
75 |   },
76 | };
77 | </script>
78 | 
79 | <style lang="scss" scoped>
80 | .carousel-doc {
81 |   width: 100%;
82 | }
83 | </style>
84 | 


--------------------------------------------------------------------------------
/src/components/CollapseDemos/BasicCollapse.vue:
--------------------------------------------------------------------------------
 1 | <demo>
 2 | 基本用法
 3 | </demo>
 4 | <template>
 5 |   <Collapse v-model:defaultSpread="defaultSpread">
 6 |     <collapse-item title="This is panel header 1">
 7 |       <p>
 8 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
 9 |         can be found as a welcome guest in many households across the world.
10 |       </p>
11 |       <p>
12 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
13 |         can be found as a welcome guest in many households across the world.
14 |       </p>
15 |       <p>
16 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
17 |         can be found as a welcome guest in many households across the world.
18 |       </p>
19 |     </collapse-item>
20 |     <collapse-item title="This is panel header 2">
21 |       <p>
22 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
23 |         can be found as a welcome guest in many households across the world.
24 |       </p>
25 |       <p>
26 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
27 |         can be found as a welcome guest in many households across the world.
28 |       </p>
29 |       <p>
30 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
31 |         can be found as a welcome guest in many households across the world.
32 |       </p>
33 |     </collapse-item>
34 |     <collapse-item title="This is panel header 3">
35 |       <p>
36 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
37 |         can be found as a welcome guest in many households across the world.
38 |       </p>
39 |       <p>
40 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
41 |         can be found as a welcome guest in many households across the world.
42 |       </p>
43 |       <p>
44 |         A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it
45 |         can be found as a welcome guest in many households across the world.
46 |       </p>
47 |     </collapse-item>
48 |   </Collapse>
49 | </template>
50 | 
51 | <script lang="ts">
52 | import Collapse from "../../lib/Collapse/Collapse.vue";
53 | import CollapseItem from "../../lib/Collapse/CollapseItem.vue";
54 | import { reactive, ref } from "vue";
55 | export default {
56 |   components: { Collapse, CollapseItem },
57 |   setup() {
58 |     const defaultSpread = ref([0]);
59 |     return { defaultSpread };
60 |   },
61 | };
62 | </script>
63 | 


--------------------------------------------------------------------------------
/src/components/DrawerDemo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="drawer-doc">
  3 |     <h2>Drawer 抽屉</h2>
  4 |     <Demo :component="BasicDrawer" describe="基础用法" />
  5 |     <Demo :component="CustomDrawer" describe="通过template来控制插入的内容,比如去除页脚" />
  6 |     <Demo :component="PlacementDrawer" describe="可以设置placement来控制在不同的位置出现" />
  7 |     <h2>API</h2>
  8 |     <Table :columns="columns" :dataSource="dataSource" />
  9 |      <h2>Methods</h2>
 10 |     <Table :columns="columns" :dataSource="dataSource2" />
 11 |   </div>
 12 | </template>
 13 | 
 14 | <script lang="ts">
 15 | import Demo from "./Demo.vue";
 16 | import Table from "../lib/Table.vue";
 17 | import BasicDrawer from "./DrawerDemos/BasicDrawer.vue";
 18 | import PlacementDrawer from "./DrawerDemos/PlacementDrawer.vue"
 19 | import CustomDrawer from "./DrawerDemos/CustomDrawer.vue"
 20 | import { reactive } from "vue";
 21 | 
 22 | export default {
 23 |   components: { Demo, Table },
 24 |   setup() {
 25 |     const columns = reactive([
 26 |       {
 27 |         text: "参数",
 28 |         field: "params",
 29 |       },
 30 |       {
 31 |         text: "说明",
 32 |         field: "description",
 33 |       },
 34 |       {
 35 |         text: "类型",
 36 |         field: "type",
 37 |       },
 38 |       {
 39 |         text: "默认值",
 40 |         field: "default",
 41 |       },
 42 |     ]);
 43 | 
 44 |     const dataSource = reactive([
 45 |       {
 46 |         params: "v-model/visible",
 47 |         description: "drawer是否可见",
 48 |         type: "boolean",
 49 |         default: "false",
 50 |       },
 51 |       {
 52 |         params: "title",
 53 |         description: "drawer标题",
 54 |         type: "string",
 55 |         default: "-",
 56 |       },
 57 |       {
 58 |         params: "isShowOverlay",
 59 |         description: "是否显示遮罩层",
 60 |         type: "boolean",
 61 |         default: "true",
 62 |       },
 63 |       {
 64 |         params: "isCanClickOverlay",
 65 |         description: "是否点击遮罩层可以关闭",
 66 |         type: "boolean",
 67 |         default: "true",
 68 |       },
 69 |       {
 70 |         params: "placement",
 71 |         description: "drawer出现的方位",
 72 |         type: "‘top’ | 'right' | 'bottom' | 'left'",
 73 |         default: "right",
 74 |       },
 75 |     ]);
 76 | 
 77 |     const dataSource2 = reactive([
 78 |       {
 79 |         params: "close",
 80 |         description: "drawer关闭时的回调",
 81 |         type: "() => void",
 82 |         default: "-",
 83 |       },
 84 |       
 85 |     ]);
 86 |     return {
 87 |       BasicDrawer,
 88 |       PlacementDrawer,
 89 |       columns,
 90 |       dataSource,
 91 |       dataSource2,
 92 |       CustomDrawer
 93 |     };
 94 |   },
 95 | };
 96 | </script>
 97 | 
 98 | <style lang="scss" scoped>
 99 | .drawer-doc {
100 |   width: 100%;
101 | }
102 | </style>
103 | 


--------------------------------------------------------------------------------
/src/components/ButtonDemo.vue:
--------------------------------------------------------------------------------
  1 | 
  2 | <template>
  3 |   <div class="button_doc">
  4 |     <h2>Button 按钮</h2>
  5 |      <Demo :component="BtnType" describe="设置theme有不同的显示" />
  6 |      <Demo :component="BtnSize" describe="设置size有不同的大小尺寸" />
  7 |      <Demo :component="BtnLevel" describe="设置level,以获得不同的等级" />
  8 |      <Demo :component="BtnDisabled" describe="使用disabled设置禁止状态" />
  9 |      <Demo :component="BtnLoading" describe="使用loading设置加载状态" />
 10 |      <h2>API</h2>
 11 |     <Table :columns="columns" :dataSource="dataSource" />
 12 |   </div>
 13 | </template>
 14 | <script lang="ts">
 15 | import Button from "../lib/Button.vue";
 16 | import BtnType from "./ButtonDemos/BtnType.vue";
 17 | import BtnSize from "./ButtonDemos/BtnSize.vue";
 18 | import BtnLevel from "./ButtonDemos/BtnLevel.vue";
 19 | import BtnDisabled from "./ButtonDemos/BtnDisabled.vue";
 20 | import BtnLoading from "./ButtonDemos/BtnLoading.vue";
 21 | import Table from "../lib/Table.vue";
 22 | import Demo from "./Demo.vue";
 23 | import { reactive } from "vue"
 24 | 
 25 | export default {
 26 |   components: { Button, Demo, Table },
 27 |   setup() {
 28 |     const onClick = () => {
 29 |       console.log("hi");
 30 |     };
 31 |     const columns = reactive([
 32 |       {
 33 |         text: "参数",
 34 |         field: "params"
 35 |       },
 36 |       {
 37 |         text: "说明",
 38 |         field: "description"
 39 |       },
 40 |       {
 41 |         text: "类型",
 42 |         field: "type"
 43 |       },
 44 |       {
 45 |         text: "默认值",
 46 |         field: "default"
 47 |       }
 48 |     ]);
 49 | 
 50 |     const dataSource = reactive([
 51 |       {
 52 |         params: "theme",
 53 |         description: "按钮主题",
 54 |         type: "link | text | button",
 55 |         default: "button"
 56 |       },
 57 |       {
 58 |         params: "size",
 59 |         description: "尺寸大小",
 60 |         type: "small | big | normal",
 61 |         default: "normal"
 62 |       },
 63 |        {
 64 |         params: "disabled",
 65 |         description: "是否禁用",
 66 |         type: "boolean",
 67 |         default: "false"
 68 |       },
 69 |        {
 70 |         params: "loading",
 71 |         description: "是否显示加载",
 72 |         type: "boolean",
 73 |         default: "false"
 74 |       },
 75 |        {
 76 |         params: "level",
 77 |         description: "按钮等级",
 78 |         type: "main | danger | normal",
 79 |         default: "normal"
 80 |       },
 81 |     ]);
 82 |     return { 
 83 |         onClick,
 84 |         BtnType,
 85 |         BtnSize,
 86 |         BtnLevel,
 87 |         BtnDisabled,
 88 |         BtnLoading,
 89 |         dataSource,
 90 |         columns
 91 |       };
 92 |   }
 93 | };
 94 | </script>
 95 | 
 96 | <style lang="scss" scoped>
 97 | .button_doc {
 98 |   width: 100%;
 99 |   min-width: 100px;
100 |   padding: 10px 40px;
101 | }    
102 | </style>


--------------------------------------------------------------------------------
/src/components/DialogDemo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="dialog-doc">
  3 |     <h2>Dialog 对话框</h2>
  4 |     <Demo :component="BasicDialog" describe="最基本的用法" />
  5 |     <Demo :component="FooterDialog" describe="Footer插槽允许你自定义页脚，不传即为不显示页脚" />
  6 |     <h2>API</h2>
  7 |     <Table :columns="columns" :dataSource="dataSource" />
  8 |     <h2>Slot</h2>
  9 |     <Table :columns="columns2" :dataSource="dataSource2" />
 10 |     <h2>Methods</h2>
 11 |     <Table :columns="columns2" :dataSource="dataSource3" />
 12 |   </div>
 13 | </template>
 14 | 
 15 | <script lang="ts">
 16 | import { ref, reactive } from "vue";
 17 | import Demo from "./Demo.vue";
 18 | import BasicDialog from "../components/DialogDemos/BasicDialog.vue";
 19 | import FooterDialog from "../components/DialogDemos/FooterDialog.vue";
 20 | import Table from "../lib/Table.vue";
 21 | 
 22 | export default {
 23 |   components: {
 24 |     Demo,
 25 |     Table,
 26 |   },
 27 |   setup() {
 28 |     const columns = reactive([
 29 |       {
 30 |         text: "参数",
 31 |         field: "params",
 32 |       },
 33 |       {
 34 |         text: "说明",
 35 |         field: "description",
 36 |       },
 37 |       {
 38 |         text: "类型",
 39 |         field: "type",
 40 |       },
 41 |       {
 42 |         text: "默认值",
 43 |         field: "default",
 44 |       },
 45 |     ]);
 46 | 
 47 |     const dataSource = reactive([
 48 |       {
 49 |         params: "v-model/visible",
 50 |         description: "帮定值",
 51 |         type: "boolean",
 52 |         default: "-",
 53 |       },
 54 |       {
 55 |         params: "isShowOverlay",
 56 |         description: "是否显示遮罩层",
 57 |         type: "boolean",
 58 |         default: "true",
 59 |       },
 60 |       {
 61 |         params: "isCanClickOverlay",
 62 |         description: "遮罩层点击是否可以关闭",
 63 |         type: "boolean",
 64 |         default: "true",
 65 |       },
 66 |       {
 67 |         params: "loading",
 68 |         description: "是否显示加载",
 69 |         type: "boolean",
 70 |         default: "false",
 71 |       },
 72 |       {
 73 |         params: "level",
 74 |         description: "按钮等级",
 75 |         type: "main | danger | normal",
 76 |         default: "normal",
 77 |       },
 78 |     ]);
 79 | 
 80 |     const columns2 = reactive([
 81 |       { text: "name", field: "name" },
 82 |       { text: "说明", field: "description" },
 83 |     ]);
 84 | 
 85 |     const dataSource2 = reactive([
 86 |       { name: "title", description: "Dialog标题的内容" },
 87 |       { name: "content", description: "Dialog主体的内容" },
 88 |       { name: "footer", description: "Dialog页脚的内容" },
 89 |     ]);
 90 | 
 91 |     const dataSource3 = reactive([{ name: "close", description: "Dialog关闭的回调" }]);
 92 | 
 93 |     return {
 94 |       BasicDialog,
 95 |       FooterDialog,
 96 |       dataSource,
 97 |       columns,
 98 |       columns2,
 99 |       dataSource2,
100 |       dataSource3,
101 |     };
102 |   },
103 | };
104 | </script>
105 | 
106 | <style lang="scss" scoped>
107 | .dialog-doc {
108 |   width: 100%;
109 | }
110 | </style>
111 | 


--------------------------------------------------------------------------------
/src/components/MessageDemo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="message-doc">
  3 |     <h2>Message 信息提示</h2>
  4 |     <Demo :component="BasicMessage" describe="基础用法" />
  5 |     <Demo
  6 |       :component="DurationMessage"
  7 |       describe="设置duration属性可以自定义时长，单位为毫秒，默认为1000ms"
  8 |     />
  9 |     <Demo :component="TypeMessage" describe="包括 info, success, error, warning。" />
 10 |     <Demo :component="CloseMessage" describe="可以添加关闭按钮" />
 11 |     <h4>
 12 |       组件可以通过正常方式引入使用，同时也提供静态方法，可以通过Message(Options)方式直接调用
 13 |     </h4>
 14 |     <br />
 15 |     <h2>Options</h2>
 16 |     <Table :columns="columns" :dataSource="dataSource" />
 17 |     <h2>Methods</h2>
 18 |     <Table :columns="columns" :dataSource="dataSource2" />
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script lang="ts">
 23 | import Demo from "./Demo.vue";
 24 | import Table from "../lib/Table.vue";
 25 | import BasicMessage from "./MessageDemos/BasicMessage.vue";
 26 | import DurationMessage from "./MessageDemos/DurationMessage.vue";
 27 | import TypeMessage from "./MessageDemos/TypeMessage.vue";
 28 | import CloseMessage from "./MessageDemos/CloseMessage.vue";
 29 | 
 30 | import { reactive } from "vue";
 31 | 
 32 | export default {
 33 |   components: { Demo, Table },
 34 |   setup() {
 35 |     const columns = reactive([
 36 |       {
 37 |         text: "参数",
 38 |         field: "params",
 39 |       },
 40 |       {
 41 |         text: "说明",
 42 |         field: "description",
 43 |       },
 44 |       {
 45 |         text: "类型",
 46 |         field: "type",
 47 |       },
 48 |       {
 49 |         text: "默认值",
 50 |         field: "default",
 51 |       },
 52 |     ]);
 53 | 
 54 |     const dataSource = reactive([
 55 |       {
 56 |         params: "v-model/visible",
 57 |         description: "绑定值",
 58 |         type: "boolean",
 59 |         default: "false",
 60 |       },
 61 |       {
 62 |         params: "message",
 63 |         description: "信息提示文本",
 64 |         type: "string",
 65 |         default: "-",
 66 |       },
 67 |       {
 68 |         params: "duration",
 69 |         description: "message自定义时长",
 70 |         type: "number",
 71 |         default: "1000ms",
 72 |       },
 73 |       {
 74 |         params: "type",
 75 |         description: "message类型。有info，success，error，warning",
 76 |         type: "string",
 77 |         default: "info",
 78 |       },
 79 |       {
 80 |         params: "showClose",
 81 |         description: "是否显示关闭按钮",
 82 |         type: "boolean",
 83 |         default: "false",
 84 |       },
 85 |     ]);
 86 | 
 87 |     const dataSource2 = reactive([
 88 |       {
 89 |         params: "onClose",
 90 |         description: "关闭message的回调",
 91 |         type: "() => void",
 92 |         default: "-",
 93 |       },
 94 |     ]);
 95 |     return {
 96 |       BasicMessage,
 97 |       columns,
 98 |       dataSource,
 99 |       dataSource2,
100 |       DurationMessage,
101 |       TypeMessage,
102 |       CloseMessage,
103 |     };
104 |   },
105 | };
106 | </script>
107 | 
108 | <style lang="scss" scoped>
109 | .message-doc {
110 |   width: 100%;
111 | }
112 | </style>
113 | 


--------------------------------------------------------------------------------
/src/components/PagerDemo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="pager-doc">
  3 |     <h2>Pager 页码</h2>
  4 |     <Demo :component="BasicPager" describe="基础用法" />
  5 |     <Demo :component="MorePager" describe="显示更多页码的情况" />
  6 |     <Demo :component="SizePager" describe="迷你版本" />
  7 |     <Demo :component="SimplePager" describe="使用simple属性支持简洁模式" />
  8 |     <h2>API</h2>
  9 |     <Table :columns="columns" :dataSource="dataSource" />
 10 |      <h2>Methods</h2>
 11 |     <Table :columns="columns" :dataSource="dataSource2" />
 12 |   </div>
 13 | </template>
 14 | 
 15 | <script lang="ts">
 16 | import Demo from "./Demo.vue";
 17 | import Table from "../lib/Table.vue";
 18 | import BasicPager from "./PagerDemos/BasicPager.vue";
 19 | import MorePager from "./PagerDemos/MorePager.vue";
 20 | import SimplePager from "./PagerDemos/SimplePager.vue";
 21 | import SizePager from "./PagerDemos/SizePager.vue";
 22 | import { reactive, isProxy } from "vue";
 23 | 
 24 | export default {
 25 |   components: { Demo, Table },
 26 |   setup() {
 27 |     const columns = reactive([
 28 |       {
 29 |         text: "参数",
 30 |         field: "params",
 31 |       },
 32 |       {
 33 |         text: "说明",
 34 |         field: "description",
 35 |       },
 36 |       {
 37 |         text: "类型",
 38 |         field: "type",
 39 |       },
 40 |       {
 41 |         text: "默认值",
 42 |         field: "default",
 43 |       },
 44 |     ]);
 45 | 
 46 |     const dataSource = reactive([
 47 |       {
 48 |         params: "v-model/currentPage",
 49 |         description: "Pager绑定值，当前页码数",
 50 |         type: "number",
 51 |         default: "-",
 52 |       },
 53 |       {
 54 |         params: "totalPage",
 55 |         description: "Pager总页码数",
 56 |         type: "number",
 57 |         default: "-",
 58 |       },
 59 |       {
 60 |         params: "simple",
 61 |         description: "是否开启简洁模式",
 62 |         type: "boolean",
 63 |         default: "false",
 64 |       },
 65 |       {
 66 |         params: "size",
 67 |         description: "Pager尺寸，small | default",
 68 |         type: "string",
 69 |         default: "default",
 70 |       },
 71 |       {
 72 |         params: "hidePager",
 73 |         description: "页码数为1时是否隐藏Pager",
 74 |         type: "boolean",
 75 |         default: "true",
 76 |       },
 77 |     ]);
 78 |     const dataSource2 = reactive([
 79 |       {
 80 |         params: "currentChange",
 81 |         description: "页码数改变的回调",
 82 |         type: "(currentPage: number) => void",
 83 |         default: "-",
 84 |       },
 85 |       {
 86 |         params: "prevClick",
 87 |         description: "点击上一页触发的回调",
 88 |         type: "(currentPage: number) => void",
 89 |         default: "-",
 90 |       },
 91 |       {
 92 |         params: "simple",
 93 |         description: "点击下一页触发的回调",
 94 |         type: "(currentPage: number) => void",
 95 |         default: "-",
 96 |       },
 97 |     ]);
 98 |     return {
 99 |       BasicPager,
100 |       MorePager,
101 |       SimplePager,
102 |       SizePager,
103 |       columns,
104 |       dataSource,
105 |       dataSource2
106 |     };
107 |   },
108 | };
109 | </script>
110 | 
111 | <style lang="scss" scoped>
112 | .pager-doc {
113 |   width: 100%;
114 | }
115 | </style>
116 | 


--------------------------------------------------------------------------------
/src/lib/Dialog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <Teleport to="body">
  3 |     <div v-if="visible">
  4 |       <div class="le-dialog-overlay" @click="handleOverlay" v-if="isShowOverlay"></div>
  5 |       <div class="le-dialog-wrapper">
  6 |         <div class="le-dialog">
  7 |           <header>
  8 |             <slot name="title" />
  9 |             <span @click="close" class="le-dialog-close"></span>
 10 |           </header>
 11 |           <main>
 12 |             <slot name="content" />
 13 |           </main>
 14 |           <footer>
 15 |             <slot name="footer" />
 16 |           </footer>
 17 |         </div>
 18 |       </div>
 19 |     </div>
 20 |   </Teleport>
 21 | </template>
 22 | 
 23 | <script lang="ts">
 24 | import Button from "./Button.vue";
 25 | export default {
 26 |   components: {
 27 |     Button,
 28 |   },
 29 |   props: {
 30 |     visible: {
 31 |       type: Boolean,
 32 |       default: false,
 33 |     },
 34 |     isCanClickOverlay: {
 35 |       type: Boolean,
 36 |       default: true,
 37 |     },
 38 |     isShowOverlay: {
 39 |       type: Boolean,
 40 |       default: true,
 41 |     },
 42 |   },
 43 |   emits: ["close", "update:visible"],
 44 |   setup(props, ctx) {
 45 |     const close = () => {
 46 |       ctx.emit("update:visible", false);
 47 |       ctx.emit("close");
 48 |     };
 49 |     const handleOverlay = () => {
 50 |       props.isCanClickOverlay && close();
 51 |       ctx.emit("close");
 52 |     };
 53 |     return {
 54 |       close,
 55 |       handleOverlay,
 56 |     };
 57 |   },
 58 | };
 59 | </script>
 60 | 
 61 | <style lang="scss" scoped>
 62 | $radius: 4px;
 63 | $border-color: #f0f0f0;
 64 | 
 65 | .le-dialog {
 66 |   background: white;
 67 |   border-radius: $radius;
 68 |   box-shadow: 0 0 3px fade_out(black, 0.8);
 69 |   min-width: 26em;
 70 |   max-width: 90%;
 71 | 
 72 |   &-overlay {
 73 |     position: fixed;
 74 |     top: 0;
 75 |     left: 0;
 76 |     width: 100%;
 77 |     height: 100%;
 78 |     background: fade_out(black, 0.5);
 79 |     z-index: 10;
 80 |   }
 81 | 
 82 |   &-wrapper {
 83 |     position: fixed;
 84 |     left: 50%;
 85 |     top: 50%;
 86 |     transform: translate(-50%, -100%);
 87 |     z-index: 11;
 88 |   }
 89 | 
 90 |   > header {
 91 |     padding: 12px 16px;
 92 |     border-bottom: 1px solid $border-color;
 93 |     display: flex;
 94 |     align-items: center;
 95 |     justify-content: space-between;
 96 |     font-size: 20px;
 97 |   }
 98 | 
 99 |   > main {
100 |     padding: 12px 16px;
101 |   }
102 | 
103 |   > footer {
104 |     border-top: 1px solid $border-color;
105 |     padding: 12px 16px;
106 |     text-align: right;
107 |   }
108 | 
109 |   &-close {
110 |     position: relative;
111 |     display: inline-block;
112 |     width: 16px;
113 |     height: 16px;
114 |     cursor: pointer;
115 | 
116 |     &::before,
117 |     &::after {
118 |       content: "";
119 |       position: absolute;
120 |       height: 1px;
121 |       background: black;
122 |       width: 100%;
123 |       top: 50%;
124 |       left: 50%;
125 |     }
126 | 
127 |     &::before {
128 |       transform: translate(-50%, -50%) rotate(-45deg);
129 |     }
130 | 
131 |     &::after {
132 |       transform: translate(-50%, -50%) rotate(45deg);
133 |     }
134 |   }
135 | }
136 | </style>
137 | 


--------------------------------------------------------------------------------
/src/lib/Switch.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <button class="le-switch" @click="handleClick" :class="classes">
  3 |     <span>
  4 |       <span v-if="loading"></span>
  5 |     </span>
  6 |   </button>
  7 | </template>
  8 | 
  9 | <script lang="ts" setup="props, context">
 10 | import { ref, computed, SetupContext } from "vue";
 11 | 
 12 | declare const props: {
 13 |   value: boolean;
 14 |   disabled?: boolean;
 15 |   size?: "small" | "large";
 16 |   loading?: boolean;
 17 | };
 18 | declare const context: SetupContext;
 19 | 
 20 | export default {};
 21 | 
 22 | export const handleClick = () => {
 23 |   if (props.disabled) return;
 24 |   context.emit("update:value", !props.value);
 25 |   context.emit("onChange", !props.value);
 26 | };
 27 | 
 28 | export const classes = computed(() => ({
 29 |   checked: props.value,
 30 |   disabled: props.disabled,
 31 |   large: props.size === "large",
 32 |   small: props.size === "small",
 33 |   loading: props.loading
 34 | }));
 35 | </script>
 36 | 
 37 | <style lang="scss" scoped>
 38 | $height: 22px;
 39 | $heightInner: $height - 4px;
 40 | 
 41 | $heightLarge: 26px;
 42 | $heightLargeInner: $heightLarge - 4px;
 43 | 
 44 | $heightSmall: 18px;
 45 | $heightSmallInner: $heightSmall - 4px;
 46 | 
 47 | $true-color: var(--true_color, #1890ff);
 48 | $false-color: var(--false_color, rgba(0, 0, 0, 0.4));
 49 | 
 50 | .le-switch {
 51 |   height: $height;
 52 |   width: $height * 2;
 53 |   border: none;
 54 |   border-radius: $height/2;
 55 |   background: $false-color;
 56 |   position: relative;
 57 |   > span {
 58 |     position: absolute;
 59 |     height: $heightInner;
 60 |     width: $heightInner;
 61 |     top: 2px;
 62 |     left: 2px;
 63 |     background: white;
 64 |     border-radius: $heightInner/2;
 65 |     transition: left 250ms;
 66 |   }
 67 | }
 68 | 
 69 | .le-switch.checked {
 70 |   background: $true-color;
 71 |   > span {
 72 |     left: calc(100% - #{$heightInner} - 2px);
 73 |   }
 74 | }
 75 | 
 76 | .le-switch.disabled {
 77 |   cursor: no-drop;
 78 |   opacity: 0.5;
 79 | }
 80 | 
 81 | .le-switch.large {
 82 |   height: $heightLarge;
 83 |   width: $heightLarge * 2;
 84 |   & > span {
 85 |     height: $heightLargeInner;
 86 |     width: $heightLargeInner;
 87 |     border-radius: $heightLargeInner/2;
 88 |   }
 89 |   &.checked.large {
 90 |     > span {
 91 |       left: calc(100% - #{$heightLargeInner} - 2px);
 92 |     }
 93 |   }
 94 | }
 95 | 
 96 | .le-switch.small {
 97 |   height: $heightSmall;
 98 |   width: $heightSmall * 2;
 99 |   & > span {
100 |     height: $heightSmallInner;
101 |     width: $heightSmallInner;
102 |     border-radius: $heightSmallInner/2;
103 |   }
104 |   &.checked.small {
105 |     > span {
106 |       left: calc(100% - #{$heightSmallInner} - 2px);
107 |     }
108 |   }
109 | }
110 | 
111 | .le-switch.loading {
112 |   > span {
113 |     display: inline-flex;
114 |     justify-content: center;
115 |     align-items: center;
116 |     > span {
117 |       width: 12px;
118 |       height: 12px;
119 |       display: inline-block;
120 |       border-radius: 8px;
121 |       border-color: $false-color $false-color $false-color transparent;
122 |       border-style: solid;
123 |       border-width: 2px;
124 |       animation: le-spin 1s infinite linear;
125 |     }
126 |   }
127 |   cursor: no-drop;
128 |   opacity: 0.5;
129 |   pointer-events: none;
130 | }
131 | 
132 | .le-switch:focus {
133 |   outline: none;
134 | }
135 | </style>


--------------------------------------------------------------------------------
/src/lib/Cascader/Cascader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="le-cascader" ref="cascaderRef">
  3 |     <div class="trigger" @click="toggle" ref="triggerRef">
  4 |       {{ result || defaultSelected }}
  5 |     </div>
  6 |     <div class="popover-wrapper" v-if="popoverVisible" ref="popoverRef">
  7 |       <cascader-items
  8 |         :items="source"
  9 |         class="popover"
 10 |         :height="popoverHeight"
 11 |         v-model:selected="selected"
 12 |       ></cascader-items>
 13 |     </div>
 14 |   </div>
 15 | </template>
 16 | 
 17 | <script lang="ts">
 18 | import CascaderItems from "./CascaderItems.vue";
 19 | import { onMounted, ref, computed, onUnmounted, PropType } from "vue";
 20 | export default {
 21 |   name: "LeCascader",
 22 |   components: { CascaderItems },
 23 |   props: {
 24 |     source: {
 25 |       type: Array as PropType<{ value: string; name: string; disabled?: boolean }[]>,
 26 |     },
 27 |     popoverHeight: {
 28 |       type: String,
 29 |       default: "200px",
 30 |     },
 31 |     selected: {
 32 |       type: Array,
 33 |       default: () => {
 34 |         return [];
 35 |       },
 36 |     },
 37 |     defaultSelected: {
 38 |       type: String,
 39 |       default: "",
 40 |     },
 41 |   },
 42 | 
 43 |   emits: ["onChange"],
 44 |   setup(props, ctx) {
 45 |     const popoverVisible = ref(false);
 46 |     const cascaderRef = ref(null);
 47 |     const popoverRef = ref(null);
 48 |     const triggerRef = ref(null);
 49 | 
 50 |     onMounted(() => {
 51 |       document.body.addEventListener("click", clickOutSide);
 52 |     });
 53 | 
 54 |     onUnmounted(() => {
 55 |       document.body.removeEventListener("click", clickOutSide);
 56 |     });
 57 | 
 58 |     const clickOutSide = (e) => {
 59 |       if (popoverRef.value?.contains(e.target) || e.target === triggerRef.value) {
 60 |         open();
 61 |       } else {
 62 |         close();
 63 |       }
 64 |     };
 65 | 
 66 |     const open = () => {
 67 |       popoverVisible.value = true;
 68 |     };
 69 |     const close = () => {
 70 |       popoverVisible.value = false;
 71 |     };
 72 | 
 73 |     const toggle = () => {
 74 |       if (popoverVisible.value === true) {
 75 |         close();
 76 |       } else {
 77 |         open();
 78 |       }
 79 |     };
 80 |     const result = computed(() => {
 81 |       ctx.emit(
 82 |         "onChange",
 83 |         JSON.parse(JSON.stringify(props.selected)).map((_) => _.value)
 84 |       );
 85 |       return props.selected.map((item) => (item as any).name).join("/");
 86 |     });
 87 | 
 88 |     return {
 89 |       popoverVisible,
 90 |       open,
 91 |       close,
 92 |       toggle,
 93 |       result,
 94 |       cascaderRef,
 95 |       popoverRef,
 96 |       triggerRef,
 97 |     };
 98 |   },
 99 | };
100 | </script>
101 | 
102 | <style scoped lang="scss">
103 | $input-height: 32px;
104 | $border-color: #999;
105 | $border-radius: 4px;
106 | 
107 | .box-shadow {
108 |   box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
109 | }
110 | 
111 | .le-cascader {
112 |   display: inline-block;
113 |   position: relative;
114 |   .trigger {
115 |     background: white;
116 |     height: $input-height;
117 |     display: inline-flex;
118 |     align-items: center;
119 |     padding: 0 1em;
120 |     min-width: 10em;
121 |     border: 1px solid $border-color;
122 |     border-radius: $border-radius;
123 |   }
124 |   .popover-wrapper {
125 |     position: absolute;
126 |     top: 100%;
127 |     left: 0;
128 |     background: white;
129 |     display: flex;
130 |     margin-top: 8px;
131 |     z-index: 999999;
132 |     @extend .box-shadow;
133 |   }
134 | }
135 | </style>
136 | 


--------------------------------------------------------------------------------
/src/components/SwitchDemo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="switch_doc">
  3 |     <h2>Switch 开关</h2>
  4 |     <Demo :component="DefaultValue" describe="设置switch默认初始状态" />
  5 |     <Demo :component="Disabled" describe="使用diasble禁用switch" />
  6 |     <Demo :component="Size" describe="可以通过size设置尺寸大小" />
  7 |     <Demo :component="Loading" describe="设置loading,显示加载状态" />
  8 |     <h2>API</h2>
  9 |     <Table :columns="columns" :dataSource="dataSource" />
 10 |     <h2>Methods</h2>
 11 |     <Table :columns="columns2" :dataSource="dataSource2" />
 12 |   </div>
 13 | </template>
 14 | 
 15 | <script lang="ts">
 16 | import Switch from "../lib/Switch.vue";
 17 | import DefaultValue from "./SwitchDemos/DefaultValue.vue";
 18 | import Disabled from "./SwitchDemos/Disabled.vue";
 19 | import Size from "./SwitchDemos/Size.vue";
 20 | import Loading from "./SwitchDemos/Loading.vue";
 21 | import Table from "../lib/Table.vue";
 22 | import Demo from "./Demo.vue";
 23 | import { ref, reactive } from "vue";
 24 | 
 25 | export default {
 26 |   components: {
 27 |     Switch,
 28 |     Demo,
 29 |     Table,
 30 |   },
 31 |   setup() {
 32 |     const switchVal = ref(false);
 33 |     const handleChange = (val) => {};
 34 |     const columns = reactive([
 35 |       {
 36 |         text: "参数",
 37 |         field: "params",
 38 |       },
 39 |       {
 40 |         text: "说明",
 41 |         field: "description",
 42 |       },
 43 |       {
 44 |         text: "类型",
 45 |         field: "type",
 46 |       },
 47 |       {
 48 |         text: "默认值",
 49 |         field: "default",
 50 |       },
 51 |     ]);
 52 | 
 53 |     const dataSource = reactive([
 54 |       {
 55 |         params: "v-model/value",
 56 |         description: "默认的绑定值",
 57 |         type: "string",
 58 |         default: "-",
 59 |       },
 60 |       {
 61 |         params: "size",
 62 |         description: "尺寸大小",
 63 |         type: "small | large | normal",
 64 |         default: "normal",
 65 |       },
 66 |       {
 67 |         params: "disabled",
 68 |         description: "是否禁用",
 69 |         type: "boolean",
 70 |         default: "false",
 71 |       },
 72 |       {
 73 |         params: "loading",
 74 |         description: "是否显示加载",
 75 |         type: "boolean",
 76 |         default: "false",
 77 |       },
 78 |     ]);
 79 |     const columns2 = reactive([
 80 |       { text: "name", field: "name" },
 81 |       { text: "说明", field: "description" },
 82 |     ]);
 83 | 
 84 |     const dataSource2 = reactive([{ name: "onChange", description: "Switch改变后的回调(value: boolean) => void" }]);
 85 | 
 86 |     return {
 87 |       switchVal,
 88 |       handleChange,
 89 |       DefaultValue,
 90 |       Disabled,
 91 |       Size,
 92 |       Loading,
 93 |       columns,
 94 |       dataSource,
 95 |       columns2,
 96 |       dataSource2,
 97 |     };
 98 |   },
 99 | };
100 | </script>
101 | 
102 | <style lang="scss" scoped>
103 | $border-color: #d9d9d9;
104 | 
105 | .switch_doc {
106 |   width: 100%;
107 | 
108 |   .demo {
109 |     border: 1px solid $border-color;
110 |     margin: 16px 0 32px;
111 | 
112 |     > h2 {
113 |       font-size: 20px;
114 |       padding: 8px 16px;
115 |       border-bottom: 1px solid $border-color;
116 |     }
117 | 
118 |     &-component {
119 |       padding: 16px;
120 |     }
121 | 
122 |     &-actions {
123 |       padding: 8px 16px;
124 |       border-top: 1px dashed $border-color;
125 |     }
126 | 
127 |     &-code {
128 |       padding: 8px 16px;
129 |       border-top: 1px dashed $border-color;
130 | 
131 |       > pre {
132 |         line-height: 1.1;
133 |         font-family: Consolas, "Courier New", Courier, monospace;
134 |         margin: 0;
135 |       }
136 |     }
137 |   }
138 | }
139 | </style>
140 | 


--------------------------------------------------------------------------------
/src/components/RateDemo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="rate-doc">
  3 |     <h2>Rate 评分</h2>
  4 |     <Demo :component="BasicRate" describe="最基本的用法" />
  5 |     <Demo :component="DIsableRate" describe="设置只读状态" />
  6 |     <Demo :component="HalfRate" describe="allowHalf属性可以支持半选" />
  7 |     <Demo :component="ClearRate" describe="可清除" />
  8 |     <Demo :component="IconRate" describe="当然你也可以自定义icon" />
  9 |     <Demo :component="TextRate" describe="用辅助文字直接地表达对应分数" />
 10 |     <h2>API</h2>
 11 |     <Table :columns="columns" :dataSource="dataSource" />
 12 |     <h2>Methods</h2>
 13 |     <Table :columns="columns" :dataSource="dataSource2" />
 14 | </div>
 15 | </template>
 16 | 
 17 | <script lang="ts">
 18 | import BasicRate from "./RateDemos/BasicRate.vue";
 19 | import DIsableRate from "./RateDemos/DIsableRate.vue";
 20 | import HalfRate from "./RateDemos/HalfRate.vue";
 21 | import ClearRate from "./RateDemos/ClearRate.vue";
 22 | import IconRate from "./RateDemos/IconRate.vue";
 23 | import TextRate from "./RateDemos/TextRate.vue";
 24 | import Demo from "./Demo.vue";
 25 | import Table from "../lib/Table.vue";
 26 | import {
 27 |     reactive
 28 | } from "vue";
 29 | 
 30 | export default {
 31 |     components: {
 32 |         Demo,
 33 |         Table
 34 |     },
 35 |     setup() {
 36 |         const columns = reactive([{
 37 |                 text: "参数",
 38 |                 field: "params"
 39 |             },
 40 |             {
 41 |                 text: "说明",
 42 |                 field: "description"
 43 |             },
 44 |             {
 45 |                 text: "类型",
 46 |                 field: "type"
 47 |             },
 48 |             {
 49 |                 text: "默认值",
 50 |                 field: "default"
 51 |             }
 52 |         ]);
 53 | 
 54 |         const dataSource = reactive([{
 55 |                 params: "v-model/value",
 56 |                 description: "绑定值",
 57 |                 type: "number",
 58 |                 default: "-"
 59 |             },
 60 |             {
 61 |                 params: "disabled",
 62 |                 description: "是否禁用",
 63 |                 type: "boolean",
 64 |                 default: "false"
 65 |             },
 66 |             {
 67 |                 params: "num",
 68 |                 description: "自定义rate个数",
 69 |                 type: "number",
 70 |                 default: "5"
 71 |             }, {
 72 |                 params: "allowHalf",
 73 |                 description: "是否支持半选",
 74 |                 type: "boolean",
 75 |                 default: "false"
 76 |             },
 77 |             {
 78 |                 params: "allowClear",
 79 |                 description: "是否可清除",
 80 |                 type: "boolean",
 81 |                 default: "false"
 82 |             },
 83 |             {
 84 |                 params: "iconName",
 85 |                 description: "自定义icon替换的name",
 86 |                 type: "string",
 87 |                 default: "-"
 88 |             },
 89 |             {
 90 |                 params: "tooltips",
 91 |                 description: "辅助文字的文案",
 92 |                 type: "string[]",
 93 |                 default: "[]"
 94 |             }
 95 |         ]);
 96 | 
 97 |         const dataSource2 = reactive([{
 98 |                 params: "onChange",
 99 |                 description: "rate值改变的回调",
100 |                 type: "(value: number) => void",
101 |                 default: "-"
102 |             },
103 |             {
104 |                 params: "onHoverChange",
105 |                 description: "hover Rate时的回调",
106 |                 type: "(onHoverChange) => void",
107 |                 default: "-"
108 |             },
109 |         ]);
110 |         return {
111 |             BasicRate,
112 |             DIsableRate,
113 |             HalfRate,
114 |             ClearRate,
115 |             IconRate,
116 |             TextRate,
117 |             dataSource,
118 |             dataSource2,
119 |             columns
120 |         }
121 |     }
122 | }
123 | </script>
124 | 
125 | <style lang="scss" scoped>
126 |     
127 | </style>
128 | 


--------------------------------------------------------------------------------
/src/lib/Message/Message.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <Teleport to="body">
  3 |     <div class="le-message-wrapper" v-if="visible">
  4 |       <div
  5 |         :class="{
  6 |           'le-message': true,
  7 |           'hasClose': showClose,
  8 |         }"
  9 |       >
 10 |         <main>
 11 |           <Icon :name="iconType" :class="iconType" />
 12 |           {{ message }}
 13 |           <span v-if="showClose" @click="close" class="le-message-close"></span>
 14 |         </main>
 15 |       </div>
 16 |     </div>
 17 |   </Teleport>
 18 | </template>
 19 | 
 20 | <script lang="ts">
 21 | import { reactive, onMounted, nextTick, PropType, ref } from "vue";
 22 | import Icon from "../Icon.vue";
 23 | export default {
 24 |   components: { Icon },
 25 |   props: {
 26 |     message: {
 27 |       type: String,
 28 |     },
 29 |     duration: {
 30 |       type: Number,
 31 |       default: 1000,
 32 |     },
 33 |     visible: {
 34 |       type: Boolean,
 35 |       default: false,
 36 |     },
 37 |     type: {
 38 |       type: String as PropType<"info" | "success" | "error" | "warning">,
 39 |       default: "info",
 40 |       validator: (val: string) => ["info", "success", "error", "warning"].includes(val),
 41 |     },
 42 |     showClose: {
 43 |       type: Boolean,
 44 |       default: false,
 45 |     },
 46 |   },
 47 |   emits: ["update:visible", "onClose"],
 48 |   setup(props, ctx) {
 49 |     const state = reactive({
 50 |       visible: false,
 51 |     });
 52 | 
 53 |     const handleIconType = (type: "info" | "success" | "error" | "warning") => {
 54 |       if (type === "info") return "prompt";
 55 |       if (type === "error") return "close";
 56 |       return type;
 57 |     };
 58 | 
 59 |     const iconType = ref<any>(handleIconType(props.type));
 60 | 
 61 |     const close = () => {
 62 |       nextTick(() => {
 63 |         ctx.emit("update:visible", false);
 64 |         ctx.emit("onClose");
 65 |       });
 66 |     };
 67 | 
 68 |     onMounted(() => {
 69 |       setTimeout(() => {
 70 |         close();
 71 |       }, props.duration);
 72 |     });
 73 | 
 74 |     return { state, close, iconType };
 75 |   },
 76 | };
 77 | </script>
 78 | 
 79 | <style lang="scss" scoped>
 80 | $radius: 4px;
 81 | $border-color: #f0f0f0;
 82 | $blue: #40a9ff;
 83 | $warning: #e69b2b;
 84 | $success: #67c23a;
 85 | $error: #f56c6c;
 86 | 
 87 | .le-message {
 88 |   background: white;
 89 |   border-radius: $radius;
 90 |   box-shadow: 0 0 3px fade_out(black, 0.8);
 91 |   min-width: 14em;
 92 |   max-width: 90%;
 93 | 
 94 |   &-wrapper {
 95 |     width: 100%;
 96 |     display: flex;
 97 |     justify-content: center;
 98 |     align-items: center;
 99 |     position: fixed;
100 |     top: 40px;
101 |     z-index: 100;
102 |     animation: fadeInRight linear 150ms;
103 |   }
104 | 
105 |   > main {
106 |     padding: 12px 16px;
107 |     display: flex;
108 |     align-items: center;
109 |     .le-icon {
110 |       width: 1.5em;
111 |       height: 1.5em;
112 |       &.prompt {
113 |         fill: $blue;
114 |       }
115 |       &.close {
116 |         fill: $error;
117 |       }
118 |       &.warning {
119 |         fill: $warning;
120 |       }
121 |       &.success {
122 |         fill: $success;
123 |       }
124 |     }
125 |   }
126 | 
127 |   &-close {
128 |     position: relative;
129 |     display: inline-block;
130 |     width: 12px;
131 |     height: 12px;
132 |     cursor: pointer;
133 | 
134 |     &::before,
135 |     &::after {
136 |       content: "";
137 |       position: absolute;
138 |       height: 1px;
139 |       background: black;
140 |       width: 100%;
141 |       top: 50%;
142 |       left: 50%;
143 |     }
144 | 
145 |     &::before {
146 |       transform: translate(-50%, -50%) rotate(-45deg);
147 |     }
148 | 
149 |     &::after {
150 |       transform: translate(-50%, -50%) rotate(45deg);
151 |     }
152 |   }
153 |   &.hasClose {
154 |     > main {
155 |       justify-content: space-between;
156 |     }
157 |   }
158 | }
159 | @keyframes fadeInRight {
160 |   0% {
161 |     transform: translateY(-100%);
162 |   }
163 | 
164 |   100% {
165 |     transform: translateY(0);
166 |   }
167 | }
168 | </style>
169 | 


--------------------------------------------------------------------------------
/src/router.ts:
--------------------------------------------------------------------------------
  1 | // @ts-ignore
  2 | import { createRouter, createWebHashHistory } from 'vue-router'
  3 | import Home from './views/Home.vue';
  4 | import Doc from './views/Doc.vue';
  5 | import Switch from './components/SwitchDemo.vue';
  6 | import Input from './components/InputDemo.vue';
  7 | import Button from "./components/ButtonDemo.vue";
  8 | import Dialog from "./components/DialogDemo.vue";
  9 | import Tabs from "./components/TabsDemo.vue";
 10 | import Icon from "./components/IconDemo.vue";
 11 | import Rate from "./components/RateDemo.vue";
 12 | import Layout from "./components/LayoutDemo.vue";
 13 | import Spin from "./components/SpinDemo.vue";
 14 | import Radio from "./components/RadioDemo.vue";
 15 | import CheckBox from "./components/CheckBoxDemo.vue";
 16 | import Collapse from "./components/CollapseDemo.vue";
 17 | import Affix from "./components/AffixDemo.vue";
 18 | import Drawer from "./components/DrawerDemo.vue"
 19 | import Message from "./components/MessageDemo.vue"
 20 | import Carousel from "./components/CarouselDemo.vue"
 21 | import Pager from "./components/PagerDemo.vue"
 22 | import Popover from "./components/PopoverDemo.vue"
 23 | // import DatePicker from "./components/DatePickerDemo.vue"
 24 | import Cascader from "./components/CascaderDemo.vue"
 25 | 
 26 | import intro from "./markdown/intro.md";
 27 | import getStarted from "./markdown/get-started.md"
 28 | 
 29 | import { h } from 'vue';
 30 | import Markdown from './components/Other/Markdown.vue';
 31 | 
 32 | const routerHistory = createWebHashHistory()
 33 | const md = filename => h(Markdown, { content: filename, key: filename })
 34 | export const router = createRouter({
 35 |   history: routerHistory,
 36 |   linkActiveClass: 'active',
 37 |   routes: [{
 38 |     path: '/',
 39 |     component: Home
 40 |   },
 41 |   {
 42 |     path: '/doc',
 43 |     component: Doc,
 44 |     children: [
 45 |       { path: "", redirect: '/doc/intro' },
 46 |       {
 47 |         path: "intro",
 48 |         component: md(intro)
 49 |       },
 50 |       {
 51 |         path: "get-started",
 52 |         component: md(getStarted)
 53 |       },
 54 |       {
 55 |         path: "switch",
 56 |         component: Switch
 57 |       },
 58 |       {
 59 |         path: "switch",
 60 |         component: Switch
 61 |       },
 62 |       {
 63 |         path: "input",
 64 |         component: Input
 65 |       },
 66 |       {
 67 |         path: "button",
 68 |         component: Button
 69 |       },
 70 |       {
 71 |         path: "dialog",
 72 |         component: Dialog
 73 |       },
 74 |       {
 75 |         path: "tabs",
 76 |         component: Tabs
 77 |       },
 78 |       {
 79 |         path: "icon",
 80 |         component: Icon
 81 |       },
 82 |       {
 83 |         path: "rate",
 84 |         component: Rate
 85 |       },
 86 |       {
 87 |         path: "layout",
 88 |         component: Layout
 89 |       },
 90 |       {
 91 |         path: "spin",
 92 |         component: Spin
 93 |       },
 94 |       {
 95 |         path: "radio",
 96 |         component: Radio
 97 |       },
 98 |       {
 99 |         path: "checkBox",
100 |         component: CheckBox
101 |       },
102 |       {
103 |         path: "collapse",
104 |         component: Collapse
105 |       },
106 |       {
107 |         path: "affix",
108 |         component: Affix
109 |       },
110 |       {
111 |         path: "drawer",
112 |         component: Drawer
113 |       },
114 |       {
115 |         path: "message",
116 |         component: Message
117 |       },
118 |       {
119 |         path: "carousel",
120 |         component: Carousel
121 |       },
122 |       {
123 |         path: 'pager',
124 |         component: Pager
125 |       },
126 |       {
127 |         path: 'popover',
128 |         component: Popover
129 |       },
130 |       // {
131 |       //   path: 'datePicker',
132 |       //   component: DatePicker
133 |       // },
134 |         {
135 |         path: 'cascader',
136 |         component: Cascader
137 |       }
138 |     ]
139 |   }
140 |   ]
141 | })
142 | 
143 | router.afterEach((to, from) => {
144 |   if (to.fullPath === '/doc/get-started') {
145 |     //   if(location.href.indexOf("#reloaded")==-1){
146 |     //     location.href=location.href+"#reloaded";
147 |     //     location.reload();
148 |     // }
149 |   }
150 | })
151 | 


--------------------------------------------------------------------------------
/src/lib/Cascader/CascaderItems.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="le-cascaderItem" :style="{ height: height }">
  3 |     <div class="left">
  4 |       <div
  5 |         class="label"
  6 |         v-for="item in items"
  7 |         @click="onClickLabel(item)"
  8 |         :class="{ disabled: item?.disabled }"
  9 |       >
 10 |         <span class="name">{{ item.name }}</span>
 11 |         <span class="icons">
 12 |           <template v-if="item.name === loadingItem.name">
 13 |             <icon class="loading" name="loading"></icon>
 14 |           </template>
 15 |           <template v-else>
 16 |             <icon class="next" v-if="rightArrowVisible(item)" name="arrow-right"></icon>
 17 |           </template>
 18 |         </span>
 19 |       </div>
 20 |     </div>
 21 |     <div class="right" v-if="rightItems">
 22 |       <cascader-items
 23 |         ref="right"
 24 |         :items="rightItems"
 25 |         :height="height"
 26 |         :loading-item="loadingItem"
 27 |         :load-data="loadData"
 28 |         :level="level + 1"
 29 |         :selected="selected"
 30 |         @update:selected="onUpdateSelected"
 31 |       ></cascader-items>
 32 |     </div>
 33 |   </div>
 34 | </template>
 35 | 
 36 | <script lang="ts">
 37 | import Icon from "../Icon.vue";
 38 | import { onMounted, PropType, computed, watch, watchEffect, reactive } from "vue";
 39 | export default {
 40 |   name: "CascaderItems",
 41 |   components: { Icon },
 42 |   props: {
 43 |     items: {
 44 |       type: Array as PropType<any[]>,
 45 |     },
 46 |     height: {
 47 |       type: String,
 48 |     },
 49 |     loadingItem: {
 50 |       type: Object,
 51 |       default: () => ({}),
 52 |     },
 53 |     selected: {
 54 |       type: Array as PropType<any[]>,
 55 |       default: () => [],
 56 |     },
 57 |     loadData: {
 58 |       type: Function,
 59 |     },
 60 |     level: {
 61 |       type: Number,
 62 |       default: 0,
 63 |     },
 64 |   },
 65 |   emits: ["update:selected"],
 66 | 
 67 |   setup(props, ctx) {
 68 |     const rightArrowVisible = (item) => {
 69 |       return props.loadData ? !item.isLeaf : item.children;
 70 |     };
 71 | 
 72 |     const onClickLabel = (item) => {
 73 |       if (item?.disabled) return;
 74 |       let copy = JSON.parse(JSON.stringify(props.selected));
 75 |       copy[props.level] = item;
 76 |       copy.splice(props.level + 1);
 77 |       ctx.emit("update:selected", copy);
 78 |     };
 79 | 
 80 |     const onUpdateSelected = (newSelected) => {
 81 |       ctx.emit("update:selected", newSelected);
 82 |     };
 83 | 
 84 |     const rightItems = computed(() => {
 85 |       if (props.selected[props.level]) {
 86 |         let selected = props.items.filter(
 87 |           (item) => item.name === props.selected[props.level].name
 88 |         );
 89 |         if (selected && selected[0].children && selected[0].children.length > 0) {
 90 |           return selected[0].children;
 91 |         }
 92 |       }
 93 |     });
 94 | 
 95 |     return {
 96 |       rightArrowVisible,
 97 |       onClickLabel,
 98 |       onUpdateSelected,
 99 |       rightItems,
100 |     };
101 |   },
102 | };
103 | </script>
104 | 
105 | <style scoped lang="scss">
106 | $border-color: #999;
107 | $border-color-light: lighten($border-color, 30%);
108 | $grey: #eee;
109 | .le-cascaderItem {
110 |   display: flex;
111 |   align-items: flex-start;
112 |   justify-content: flex-start;
113 |   height: 100px;
114 |   .left {
115 |     height: 100%;
116 |     padding: 0.3em 0;
117 |     overflow: auto;
118 |   }
119 |   .right {
120 |     height: 100%;
121 |     border-left: 1px solid $border-color-light;
122 |   }
123 |   .label {
124 |     padding: 0.5em 1em;
125 |     display: flex;
126 |     align-items: center;
127 |     cursor: pointer;
128 |     white-space: nowrap;
129 |     &:hover {
130 |       background: $grey;
131 |     }
132 |     > .name {
133 |       margin-right: 1em;
134 |       user-select: none;
135 |     }
136 |     .icons {
137 |       margin-left: auto;
138 |       .next {
139 |         transform: scale(0.5);
140 |       }
141 |       .loading {
142 |         animation: le-spin 2s infinite linear;
143 |       }
144 |     }
145 |     &.disabled {
146 |       cursor: not-allowed;
147 |       background-color: rgba(0, 0, 0, 0.03);
148 |       color:rgba(0, 0, 0, 0.25);
149 |     }
150 |   }
151 | }
152 | </style>
153 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="home">
  3 |     <div class="home_header">
  4 |       <img src="../assets/logo.svg" alt />
  5 |       <span>Le-Vue-UI</span>
  6 |     </div>
  7 |     <div class="home_main">
  8 |       <div class="home_left">
  9 |         <div class="intro">
 10 |           <h1>Le-Vue-UI</h1>
 11 |           <h3>一套基于Vue3和TypeScript的UI框架</h3>
 12 |           <div class="links">
 13 |             <router-link to="/doc" class="start">查看文档</router-link>
 14 |             <a href="https://github.com/mywebc/le-vue" class="github" target="_blank">Github</a>
 15 |           </div>
 16 |         </div>
 17 |       </div>
 18 |       <div class="home_right">
 19 |         <img src="../assets/homeRight.svg" alt="">
 20 |       </div>
 21 |     </div>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script lang="ts">
 26 | import TopNav from "./TopNav.vue";
 27 | import Svg from "./svg.vue";
 28 | 
 29 | export default {
 30 |   components: { TopNav, Svg }
 31 | };
 32 | </script>
 33 | 
 34 | <style lang="scss" scoped>
 35 | .home {
 36 |   width: 100%;
 37 |   height: 100vh;
 38 |   background: url('../assets/homeBack.png') no-repeat;
 39 |   background-size: 100% 100%;
 40 |   .home_header {
 41 |     height: 64px;
 42 |     padding-left: 10%;
 43 |     display: flex;
 44 |     align-items: center;
 45 |     img {
 46 |       width: 32px;
 47 |       height: 32px;
 48 |     }
 49 |     & > span {
 50 |       display: inline-flex;
 51 |       width: 100px;
 52 |       overflow: hidden;
 53 |       color: rgba(0, 0, 0, 0.85);
 54 |       font-size: 18px;
 55 |       font-family: "Avenir,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji";
 56 |       white-space: nowrap;
 57 |       text-decoration: none;
 58 |       line-height: 64px;
 59 |       justify-content: center;
 60 |       align-items: center;
 61 |     }
 62 |   }
 63 |   .home_main {
 64 |     display: flex;
 65 |     padding: 100px 100px;
 66 |     .home_left {
 67 |       display: flex;
 68 |       flex-direction: column;
 69 |       justify-content: center;
 70 |       align-items: center;
 71 |       padding-top: 60px;
 72 |       flex: 1;
 73 | 
 74 |       .intro {
 75 |         height: 100%;
 76 |         width: 100%;
 77 |         display: flex;
 78 |         flex-direction: column;
 79 |         justify-content: center;
 80 |         align-items: center;
 81 |         margin-bottom: 10px;
 82 |         h1 {
 83 |           // color: #42b983;
 84 |           color: #000;
 85 |         }
 86 |         h3 {
 87 |           text-align: center;
 88 |           margin: 20px 0px;
 89 |           color: #515a6e;
 90 |         }
 91 |         .links {
 92 |           width: 280px;
 93 |           display: flex;
 94 |           justify-content: center;
 95 |           align-content: center;
 96 |           flex-wrap: wrap;
 97 |           a {
 98 |             display: inline-block;
 99 |             width: 8rem;
100 |             text-align: center;
101 |             border-radius: 20px;
102 |             border: 1px solid #42b983;
103 |             padding: 6px 2px;
104 |           }
105 |           .start {
106 |             background-color: #42b983;
107 |             color: #fff;
108 |             &:hover {
109 |               opacity: 0.8;
110 |             }
111 |             margin-right: 20px;
112 |             margin-top: 10px;
113 |           }
114 |           .github {
115 |             margin-top: 10px;
116 |             background-color: #fff;
117 |             color: #42b983;
118 |           }
119 |         }
120 |       }
121 |     }
122 |     .home_right {
123 |       width: 500px;
124 |       height: 500px;
125 |       flex: 1;
126 |       display: flex;
127 |       justify-content: center;
128 |       align-items: center;
129 |       img {
130 |         width: 400px;
131 |         height: 400px;
132 |       }
133 |     }
134 |   }
135 |   @media screen and (max-width: 800px) {
136 |     .home_right {
137 |       display: none !important;
138 |     }
139 |   }
140 |   @media screen and (max-width: 480px) {
141 |     .home_left {
142 |       .intro {
143 |         .links {
144 |           width: 8rem !important;
145 |           flex-wrap: wrap !important;
146 |           .start {
147 |             margin-right: 0 !important;
148 |           }
149 |         }
150 |       }
151 |     }
152 |   }
153 | }
154 | </style>


--------------------------------------------------------------------------------
/src/lib/Collapse/CollapseItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="collapse-item">
  3 |     <div
  4 |       :class="{
  5 |         'collapse-item-title': true,
  6 |         isLastChild: isLastChild && !itemContentDisplay,
  7 |         'collapse-item-title-disabled': disabled,
  8 |       }"
  9 |     >
 10 |       <span class="collapse-icon">
 11 |         <Icon :name="itemContentDisplay ? `arrow-down` : `arrow-right`" @click="handleClickPanel" />
 12 |       </span>
 13 |       {{ title }}
 14 |     </div>
 15 |     <div
 16 |       :class="{
 17 |         'collapse-item-content': true,
 18 |         'collapse-item-content-active': itemContentDisplay,
 19 |         'collapse-item-content-leave': !itemContentDisplay,
 20 |       }"
 21 |     >
 22 |       <div
 23 |         class="collapse-item-content-box"
 24 |         :style="{
 25 |           borderBottom: `${
 26 |             itemContentDisplay && !isLastChild ? '1px solid rgba(0, 0, 0, 0.3)' : ''
 27 |           }`,
 28 |         }"
 29 |       >
 30 |         <slot></slot>
 31 |       </div>
 32 |     </div>
 33 |   </div>
 34 | </template>
 35 | 
 36 | <script lang="ts">
 37 | import { ref, inject, reactive, watch, onMounted } from "vue";
 38 | import Icon from "../../lib/Icon.vue";
 39 | export default {
 40 |   components: { Icon },
 41 |   props: {
 42 |     title: {
 43 |       type: String
 44 |     },
 45 |     isLastChild: {
 46 |       type: Boolean,
 47 |       default: false
 48 |     },
 49 |     disabled: {
 50 |       type: Boolean,
 51 |       default: false
 52 |     },
 53 |     itemKey: {
 54 |       type: Number
 55 |     }
 56 |   },
 57 |   emits: ["currentSpreadEvent"],
 58 |   setup(props, ctx) {
 59 |     const itemContentDisplay = ref(false);
 60 |     const currentSpreadStatus = reactive(
 61 |       inject("currentSpreadStatus") as {
 62 |         currentSpread: number;
 63 |         accordion: boolean;
 64 |         defaultSpread: number[];
 65 |       }
 66 |     );
 67 | 
 68 |     onMounted(() => {
 69 |       if (
 70 |         currentSpreadStatus.defaultSpread.length > 0 &&
 71 |         currentSpreadStatus.defaultSpread.includes(props.itemKey)
 72 |       ) {
 73 |         itemContentDisplay.value = true;
 74 |       }
 75 |     });
 76 | 
 77 |     watch(currentSpreadStatus, () => {
 78 |       if (currentSpreadStatus.accordion) {
 79 |         if (currentSpreadStatus.currentSpread === props.itemKey) {
 80 |           itemContentDisplay.value = true;
 81 |         } else {
 82 |           itemContentDisplay.value = false;
 83 |         }
 84 |       }
 85 |     });
 86 | 
 87 |     const handleClickPanel = () => {
 88 |       itemContentDisplay.value = !itemContentDisplay.value;
 89 |       ctx.emit("currentSpreadEvent", {
 90 |         key: props.itemKey,
 91 |         status: itemContentDisplay.value
 92 |       });
 93 |     };
 94 |     return { itemContentDisplay, handleClickPanel, currentSpreadStatus };
 95 |   }
 96 | };
 97 | </script>
 98 | 
 99 | <style lang="scss" scoped>
100 | .collapse-item {
101 |   .collapse-item-title {
102 |     display: flex;
103 |     justify-content: flex-start;
104 |     align-items: center;
105 |     line-height: 30px;
106 |     padding: 12px 16px 12px 40px;
107 |     background-color: rgba(0, 0, 0, 0.02);
108 |     position: relative;
109 |     border-bottom: 1px solid rgba(0, 0, 0, 0.3);
110 |     .collapse-icon {
111 |       position: absolute;
112 |       left: 10px;
113 |       display: inline-flex;
114 |       cursor: pointer;
115 |       & > svg {
116 |         width: 20px;
117 |         height: 20px;
118 |       }
119 |     }
120 |     &.isLastChild {
121 |       border-bottom: 0;
122 |     }
123 |     &.collapse-item-title-disabled {
124 |       cursor: not-allowed;
125 |       opacity: 0.4;
126 |       .collapse-icon {
127 |         cursor: not-allowed;
128 |         pointer-events: none;
129 |       }
130 |     }
131 |   }
132 |   .collapse-item-content {
133 |     overflow: hidden;
134 |     .collapse-item-content-box {
135 |       padding: 16px;
136 |       color: rgba(0, 0, 0, 0.65);
137 |       background-color: #fff;
138 |     }
139 |     &.collapse-item-content-active {
140 |       animation: collapseFadeIn ease-out 1000ms;
141 |     }
142 |     &.collapse-item-content-leave {
143 |       max-height: 0;
144 |     }
145 | 
146 |     @keyframes collapseFadeIn {
147 |       0% {
148 |         max-height: 0;
149 |       }
150 |       100% {
151 |         max-height: 500px;
152 |       }
153 |     }
154 |   }
155 | }
156 | </style>
157 | 


--------------------------------------------------------------------------------
/src/components/Other/Aside.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="aside">
  3 |     <ul class="aside_items">
  4 |       <li>
  5 |         <router-link to="/doc/intro" active-class="activeCurrent">介绍</router-link>
  6 |       </li>
  7 |       <!--
  8 |        <li>
  9 |         <router-link to="/doc/install" active-class="activeCurrent">安装</router-link>
 10 |       </li>
 11 |       -->
 12 |       <li>
 13 |         <router-link to="/doc/get-started" active-class="activeCurrent">快速上手</router-link>
 14 |       </li>
 15 | 
 16 |       <h4>components</h4>
 17 |       <br>
 18 |       <span>通用</span>
 19 |        <li>
 20 |         <router-link to="/doc/button" active-class="activeCurrent">Button 按钮</router-link>
 21 |       </li>
 22 |        <li>
 23 |         <router-link to="/doc/icon" active-class="activeCurrent">Icon</router-link>
 24 |       </li>
 25 |       <span>布局</span>
 26 |         <li>
 27 |         <router-link to="/doc/layout" active-class="activeCurrent">Layout 布局</router-link>
 28 |       </li>
 29 |       <span>导航</span>
 30 |        <li>
 31 |         <router-link to="/doc/affix" active-class="activeCurrent">Affix 固钉</router-link>
 32 |       </li>
 33 |       <li>
 34 |         <router-link to="/doc/pager" active-class="activeCurrent">Pager 页码</router-link>
 35 |       </li>
 36 |       <span>数据录入</span>
 37 |         <li>
 38 |         <router-link to="/doc/switch" active-class="activeCurrent">Switch 开关</router-link>
 39 |       </li>
 40 |        <li>
 41 |         <router-link to="/doc/input" active-class="activeCurrent">Input 输入框</router-link>
 42 |       </li>
 43 |        <li>
 44 |         <router-link to="/doc/radio" active-class="activeCurrent">Radio 单选框</router-link>
 45 |       </li>
 46 |       <li>
 47 |         <router-link to="/doc/checkBox" active-class="activeCurrent">CheckBox 复选框</router-link>
 48 |       </li>
 49 |       <li>
 50 |         <router-link to="/doc/rate" active-class="activeCurrent">Rate 评分</router-link>
 51 |       </li>
 52 |       <!-- <li>
 53 |         <router-link to="/doc/datepicker" active-class="activeCurrent">DatePicker 日期选择</router-link>
 54 |       </li> -->
 55 |        <li>
 56 |         <router-link to="/doc/cascader" active-class="activeCurrent">Cascader 级联选择</router-link>
 57 |       </li>
 58 |       <span>数据展示</span>
 59 |        <li>
 60 |         <router-link to="/doc/spin" active-class="activeCurrent">Spin 加载中</router-link>
 61 |       </li>
 62 |      
 63 |        <li>
 64 |         <router-link to="/doc/collapse" active-class="activeCurrent">Collapse 折叠面板</router-link>
 65 |       </li>
 66 |        <li>
 67 |         <router-link to="/doc/tabs" active-class="activeCurrent">Tabs 标签页</router-link>
 68 |       </li>
 69 |        <li>
 70 |         <router-link to="/doc/carousel" active-class="activeCurrent">Carousel 走马灯</router-link>
 71 |       </li>
 72 |       <span>信息反馈</span>
 73 |         <li>
 74 |         <router-link to="/doc/drawer" active-class="activeCurrent">Drawer 抽屉</router-link>
 75 |       </li>
 76 |       <li>
 77 |         <router-link to="/doc/message" active-class="activeCurrent">Message 信息提示</router-link>
 78 |       </li>
 79 |       <li>
 80 |         <router-link to="/doc/dialog" active-class="activeCurrent">Dialog 对话框</router-link>
 81 |       </li>
 82 |       <li>
 83 |         <router-link to="/doc/popover" active-class="activeCurrent">Popover 弹出层</router-link>
 84 |       </li>
 85 |     </ul>
 86 |   </div>
 87 | </template>
 88 | 
 89 | <script lang="ts">
 90 | export default {};
 91 | </script>
 92 | 
 93 | <style lang="scss" scoped>
 94 | .aside {
 95 |   width: 260px;
 96 |   border-right: 1px solid #eee;
 97 |   box-shadow: 2px 2px 10px #eee;
 98 |   padding-bottom: 100px;
 99 |   .aside_items {
100 |     li {
101 |       height: 40px;
102 |       cursor: pointer;
103 |       list-style: none;
104 |       a {
105 |         color: rgba(0,0,0,.7);
106 |         display: inline-block;
107 |         width: 100%;
108 |         height: 100%;
109 |         display: flex;
110 |         justify-content: start;
111 |         align-items: center;
112 |         padding-left: 50px;
113 |       }
114 |       
115 |       &:hover {
116 |         a {
117 |           color: rgb(7 177 99);
118 |         }
119 |       }
120 |       .activeCurrent {
121 |         border-right: 3px solid rgb(7 177 99);
122 |         background: rgb(236 253 245);
123 |       }
124 |     }
125 |     .activeCurrent {
126 |       color: rgb(7 177 99);
127 |     }
128 |     h4 {
129 |       padding-left: 50px;
130 |     }
131 |     span {
132 |         font-size: 14px;
133 |         color: rgba(0, 0, 0, 0.45);
134 |         padding-left: 50px;
135 |         display: inline-block;
136 |         height: 40px;
137 |         line-height: 40px;
138 |       }
139 |   }
140 | }
141 | </style>
142 | 


--------------------------------------------------------------------------------
/src/lib/Tabs.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     :class="{
  4 |       'le-tabs': true,
  5 |       vertical: vertical,
  6 |     }"
  7 |   >
  8 |     <div class="le-tabs-nav" ref="container">
  9 |       <div
 10 |         class="le-tabs-nav-item"
 11 |         v-for="(t, index) in titles"
 12 |         :ref="
 13 |           (el) => {
 14 |             if (t === selected) selectedItem = el;
 15 |           }
 16 |         "
 17 |         @click="select(t)"
 18 |         :class="{ selected: t === selected, disabled: disabledTabTitle().includes(t) }"
 19 |         :key="index"
 20 |       >
 21 |         {{ t }}
 22 |       </div>
 23 |       <div class="le-tabs-nav-indicator" ref="indicator"></div>
 24 |     </div>
 25 |     <div class="le-tabs-content">
 26 |       <component :is="current" :key="current.props.title" />
 27 |     </div>
 28 |   </div>
 29 | </template>
 30 | 
 31 | <script lang="ts" setup="props, context">
 32 | import Tab from "./Tab.vue";
 33 | import {
 34 |   computed,
 35 |   ref,
 36 |   watchEffect,
 37 |   onMounted,
 38 |   SetupContext,
 39 |   Component,
 40 |   ComputedRef,
 41 | } from "vue";
 42 | 
 43 | declare const props: { selected: string; vertical: boolean };
 44 | declare const context: SetupContext;
 45 | 
 46 | export default {
 47 |   props: {
 48 |     selected: {
 49 |       type: String,
 50 |     },
 51 |     vertical: {
 52 |       type: Boolean,
 53 |       default: false,
 54 |     },
 55 |   },
 56 | };
 57 | export const selectedItem = ref<HTMLDivElement>(null);
 58 | export const indicator = ref<HTMLDivElement>(null);
 59 | export const container = ref<HTMLDivElement>(null);
 60 | 
 61 | onMounted(() => {
 62 |   watchEffect(
 63 |     () => {
 64 |       if (props.vertical) {
 65 |         const { height } = selectedItem.value.getBoundingClientRect();
 66 |         indicator.value.style.height = height + "px";
 67 |         const { top: top1 } = container.value.getBoundingClientRect();
 68 |         const { top: top2 } = selectedItem.value.getBoundingClientRect();
 69 |         const top = top2 - top1;
 70 |         indicator.value.style.top = top + "px";
 71 |       } else {
 72 |         const { width } = selectedItem.value.getBoundingClientRect();
 73 |         indicator.value.style.width = width + "px";
 74 |         const { left: left1 } = container.value.getBoundingClientRect();
 75 |         const { left: left2 } = selectedItem.value.getBoundingClientRect();
 76 |         const left = left2 - left1;
 77 |         indicator.value.style.left = left + "px";
 78 |       }
 79 |     },
 80 |     {
 81 |       flush: "post",
 82 |     }
 83 |   );
 84 | });
 85 | 
 86 | export const defaults = context.slots.default();
 87 | defaults.forEach((tag) => {
 88 |   if ((tag.type as Component).name !== (Tab as any).name) {
 89 |     throw new Error("Tabs 子标签必须是 Tab");
 90 |   }
 91 | });
 92 | export const current = computed(() => {
 93 |   return defaults.find((tag) => tag.props.title === props.selected);
 94 | });
 95 | export const disabledTabTitle = () => {
 96 |   const newArr = [];
 97 |   defaults.forEach((_) => {
 98 |     if (_.props.disabled) {
 99 |       newArr.push(_.props.title);
100 |     }
101 |   });
102 |   return newArr;
103 | };
104 | 
105 | export const titles = defaults.map((tag) => {
106 |   return tag.props.title;
107 | });
108 | export const select = (title: string) => {
109 |   if (disabledTabTitle().includes(title)) return;
110 |   context.emit("update:selected", title);
111 | };
112 | </script>
113 | 
114 | <style lang="scss">
115 | $blue: #40a9ff;
116 | $color: #333;
117 | $border-color: #d9d9d9;
118 | 
119 | .le-tabs {
120 |   &-nav {
121 |     display: flex;
122 |     color: $color;
123 |     border-bottom: 1px solid $border-color;
124 |     position: relative;
125 | 
126 |     &-item {
127 |       padding: 8px 0;
128 |       margin: 0 16px;
129 |       cursor: pointer;
130 | 
131 |       &:first-child {
132 |         margin-left: 0;
133 |       }
134 | 
135 |       &.selected {
136 |         color: $blue;
137 |       }
138 |       &.disabled {
139 |         color: rgba(0, 0, 0, 0.25);
140 |         cursor: not-allowed;
141 |       }
142 |     }
143 | 
144 |     &-indicator {
145 |       position: absolute;
146 |       height: 3px;
147 |       background: $blue;
148 |       left: 0;
149 |       bottom: -1px;
150 |       width: 100px;
151 |       transition: all 250ms;
152 |     }
153 |   }
154 | 
155 |   &-content {
156 |     padding: 8px 0;
157 |   }
158 |   &.vertical {
159 |     display: flex;
160 |     .le-tabs {
161 |       &-nav {
162 |         flex-direction: column;
163 |         &-item {
164 |           margin: 0 8px;
165 |         }
166 |         &-indicator {
167 |           position: absolute;
168 |           height: 40px;
169 |           background: $blue;
170 |           left: 100%;
171 |           bottom: -1px;
172 |           width: 3px;
173 |           transition: all 250ms;
174 |         }
175 |       }
176 |       &-content {
177 |         padding: 0 16px;
178 |       }
179 |     }
180 |   }
181 | }
182 | </style>
183 | 


--------------------------------------------------------------------------------
/src/lib/Button.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <button class="le-button" :class="classes" :disabled="disabled">
  3 |     <span v-if="loading" class="le-loadingIndicator"></span>
  4 |     <slot />
  5 |   </button>
  6 | </template>
  7 | 
  8 | <script lang="ts">
  9 | import { computed, PropType } from "vue";
 10 | 
 11 | export default {
 12 |   props: {
 13 |     theme: {
 14 |       type: String as PropType<'link' | 'text' | 'button'>,
 15 |       default: "button",
 16 |       validator: (val: string) => ['link', 'text', 'button'].includes(val),
 17 |     },
 18 |     size: {
 19 |       type: String as PropType<'big' | 'small' | 'normal'>,
 20 |       default: "normal",
 21 |       validator: (val: string) => ['big', 'small', 'normal'].includes(val),
 22 |     },
 23 |     level: {
 24 |       type: String as PropType<'main' | 'danger' | 'normal'>,
 25 |       default: "normal",
 26 |       validator: (val: string) => ['main', 'danger', 'normal'].includes(val),
 27 |     },
 28 |     disabled: {
 29 |       type: Boolean,
 30 |       default: false
 31 |     },
 32 |     loading: {
 33 |       type: Boolean,
 34 |       default: false
 35 |     }
 36 |   },
 37 |   setup(props) {
 38 |     const { theme, size, level } = props;
 39 |     const classes = computed(() => {
 40 |       return {
 41 |         [`le-theme-${theme}`]: theme,
 42 |         [`le-size-${size}`]: size,
 43 |         [`le-level-${level}`]: level
 44 |       };
 45 |     });
 46 |     return { classes };
 47 |   }
 48 | };
 49 | </script>
 50 | 
 51 | <style lang="scss" scoped>
 52 | $h: 32px;
 53 | $border-color: #d9d9d9;
 54 | $color: #333;
 55 | $blue: #40a9ff;
 56 | $radius: 4px;
 57 | $red: red;
 58 | $grey: grey;
 59 | .le-button {
 60 |   box-sizing: border-box;
 61 |   height: $h;
 62 |   padding: 0 12px;
 63 |   cursor: pointer;
 64 |   display: inline-flex;
 65 |   justify-content: center;
 66 |   align-items: center;
 67 |   white-space: nowrap;
 68 |   background: white;
 69 |   color: $color;
 70 |   border: 1px solid $border-color;
 71 |   border-radius: $radius;
 72 |   box-shadow: 0 1px 0 fade-out(black, 0.95);
 73 |   transition: background 250ms;
 74 |   & + & {
 75 |     margin-left: 8px;
 76 |   }
 77 |   &:hover,
 78 |   &:focus {
 79 |     color: $blue;
 80 |     border-color: $blue;
 81 |   }
 82 |   &:focus {
 83 |     outline: none;
 84 |   }
 85 |   &::-moz-focus-inner {
 86 |     border: 0;
 87 |   }
 88 |   &.le-theme-link {
 89 |     border-color: transparent;
 90 |     box-shadow: none;
 91 |     color: $blue;
 92 |     &:hover,
 93 |     &:focus {
 94 |       color: lighten($blue, 10%);
 95 |     }
 96 |   }
 97 |   &.le-theme-text {
 98 |     border-color: transparent;
 99 |     box-shadow: none;
100 |     color: inherit;
101 |     &:hover,
102 |     &:focus {
103 |       background: darken(white, 5%);
104 |     }
105 |   }
106 |   &.le-size-big {
107 |     font-size: 24px;
108 |     height: 48px;
109 |     padding: 0 16px;
110 |   }
111 |   &.le-size-small {
112 |     font-size: 12px;
113 |     height: 20px;
114 |     padding: 0 4px;
115 |   }
116 |   &.le-theme-button {
117 |     &.le-level-main {
118 |       background: $blue;
119 |       color: white;
120 |       border-color: $blue;
121 |       &:hover,
122 |       &:focus {
123 |         background: darken($blue, 10%);
124 |         border-color: darken($blue, 10%);
125 |       }
126 |     }
127 |     &.le-level-danger {
128 |       background: $red;
129 |       border-color: $red;
130 |       color: white;
131 |       &:hover,
132 |       &:focus {
133 |         background: darken($red, 10%);
134 |         border-color: darken($red, 10%);
135 |       }
136 |     }
137 |   }
138 |   &.le-theme-link {
139 |     &.le-level-danger {
140 |       color: $red;
141 |       &:hover,
142 |       &:focus {
143 |         color: darken($red, 10%);
144 |       }
145 |     }
146 |   }
147 |   &.le-theme-text {
148 |     &.le-level-main {
149 |       color: $blue;
150 |       &:hover,
151 |       &:focus {
152 |         color: darken($blue, 10%);
153 |       }
154 |     }
155 |     &.le-level-danger {
156 |       color: $red;
157 |       &:hover,
158 |       &:focus {
159 |         color: darken($red, 10%);
160 |       }
161 |     }
162 |   }
163 |   &.le-theme-button {
164 |     &[disabled] {
165 |       cursor: not-allowed;
166 |       color: $grey;
167 |       &:hover {
168 |         border-color: $grey;
169 |       }
170 |     }
171 |   }
172 |   &.le-theme-link,
173 |   &.le-theme-text {
174 |     &[disabled] {
175 |       cursor: not-allowed;
176 |       color: $grey;
177 |     }
178 |   }
179 |   > .le-loadingIndicator {
180 |     width: 14px;
181 |     height: 14px;
182 |     display: inline-block;
183 |     margin-right: 4px;
184 |     border-radius: 8px;
185 |     border-color: $blue $blue $blue transparent;
186 |     border-style: solid;
187 |     border-width: 2px;
188 |     animation: le-spin 1s infinite linear;
189 |   }
190 | }
191 | @keyframes le-spin {
192 |   0% {
193 |     transform: rotate(0deg);
194 |   }
195 |   100% {
196 |     transform: rotate(360deg);
197 |   }
198 | }
199 | </style>


--------------------------------------------------------------------------------
/src/lib/Drawer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <Teleport to="body">
  3 |     <div v-if="visible">
  4 |       <div class="le-drawer-overlay" @click="handleOverlay" v-if="isShowOverlay"></div>
  5 |       <div
  6 |         :class="{
  7 |           'le-drawer-wrapper': true,
  8 |           [`le-drawer-${placement}`]: true,
  9 |         }"
 10 |       >
 11 |         <div
 12 |           :class="{
 13 |             'le-drawer': true,
 14 |           }"
 15 |         >
 16 |           <header>
 17 |             <slot name="title" />
 18 |             <span @click="close" class="le-drawer-close"></span>
 19 |           </header>
 20 |           <main>
 21 |             <slot name="content" />
 22 |           </main>
 23 |           <footer>
 24 |             <slot name="footer" />
 25 |           </footer>
 26 |         </div>
 27 |       </div>
 28 |     </div>
 29 |   </Teleport>
 30 | </template>
 31 | 
 32 | <script lang="ts">
 33 | import Button from "./Button.vue";
 34 | import { PropType } from "vue";
 35 | export default {
 36 |   components: { Button },
 37 |   props: {
 38 |     visible: {
 39 |       type: Boolean,
 40 |       default: false,
 41 |     },
 42 |     isCanClickOverlay: {
 43 |       type: Boolean,
 44 |       default: true,
 45 |     },
 46 |     isShowOverlay: {
 47 |       type: Boolean,
 48 |       default: true,
 49 |     },
 50 |     title: {
 51 |       type: String,
 52 |     },
 53 |     placement: {
 54 |       type: String as PropType<"top" | "right" | "bottom" | "left">,
 55 |       default: "right",
 56 |     },
 57 |   },
 58 |   emits: ["close", "update:visible"],
 59 |   setup(props, ctx) {
 60 |     const close = () => {
 61 |       ctx.emit("update:visible", false);
 62 |       ctx.emit("close");
 63 |     };
 64 |     const handleOverlay = () => {
 65 |       props.isCanClickOverlay && close();
 66 |     };
 67 |     return {
 68 |       close,
 69 |       handleOverlay,
 70 |     };
 71 |   },
 72 | };
 73 | </script>
 74 | 
 75 | <style lang="scss" scoped>
 76 | $radius: 4px;
 77 | $border-color: #f0f0f0;
 78 | 
 79 | .le-drawer {
 80 |   background: white;
 81 |   border-radius: $radius;
 82 |   box-shadow: 0 0 3px fade_out(black, 0.8);
 83 |   min-width: 26em;
 84 |   display: flex;
 85 |   flex-direction: column;
 86 |   height: 100%;
 87 | 
 88 |   &-right {
 89 |     animation: fadeInRight linear 300ms;
 90 |   }
 91 |   &-left {
 92 |     animation: fadeInLeft linear 300ms;
 93 |     &.le-drawer-wrapper {
 94 |       left: 0;
 95 |       right: auto;
 96 |       bottom: auto;
 97 |       .le-drawer {
 98 |         min-width: 26em;
 99 |         height: 100%;
100 |       }
101 |     }
102 |   }
103 |   &-top {
104 |     animation: fadeInTop linear 300ms;
105 |     &.le-drawer-wrapper {
106 |       top: 0;
107 |       bottom: auto;
108 |       width: 100%;
109 |       height: auto;
110 |       .le-drawer {
111 |         width: 100%;
112 |         height: 20em;
113 |       }
114 |     }
115 |   }
116 |   &-bottom {
117 |     animation: fadeInBottom linear 300ms;
118 |     &.le-drawer-wrapper {
119 |       bottom: 0;
120 |       top: auto;
121 |       right: auto;
122 |       width: 100%;
123 |       height: auto;
124 |       .le-drawer {
125 |         width: 100%;
126 |         height: 20em;
127 |       }
128 |     }
129 |   }
130 | 
131 |   &-overlay {
132 |     position: fixed;
133 |     top: 0;
134 |     left: 0;
135 |     width: 100%;
136 |     height: 100%;
137 |     background: fade_out(black, 0.5);
138 |     z-index: 10;
139 |   }
140 | 
141 |   &-wrapper {
142 |     height: 100%;
143 |     position: fixed;
144 |     right: 0;
145 |     top: 0;
146 |     z-index: 11;
147 |   }
148 | 
149 |   > header {
150 |     padding: 12px 16px;
151 |     border-bottom: 1px solid $border-color;
152 |     display: flex;
153 |     align-items: center;
154 |     justify-content: space-between;
155 |     font-size: 20px;
156 |   }
157 | 
158 |   > main {
159 |     padding: 12px 16px;
160 |     flex: 1;
161 |   }
162 | 
163 |   > footer {
164 |     border-top: 1px solid $border-color;
165 |     padding: 12px 16px;
166 |   }
167 | 
168 |   &-close {
169 |     position: relative;
170 |     display: inline-block;
171 |     width: 16px;
172 |     height: 16px;
173 |     cursor: pointer;
174 | 
175 |     &::before,
176 |     &::after {
177 |       content: "";
178 |       position: absolute;
179 |       height: 1px;
180 |       background: black;
181 |       width: 100%;
182 |       top: 50%;
183 |       left: 50%;
184 |     }
185 | 
186 |     &::before {
187 |       transform: translate(-50%, -50%) rotate(-45deg);
188 |     }
189 | 
190 |     &::after {
191 |       transform: translate(-50%, -50%) rotate(45deg);
192 |     }
193 |   }
194 | }
195 | 
196 | @keyframes fadeInRight {
197 |   0% {
198 |     transform: translateX(100%);
199 |   }
200 | 
201 |   100% {
202 |     transform: translateX(0);
203 |   }
204 | }
205 | @keyframes fadeInLeft {
206 |   0% {
207 |     transform: translateX(-100%);
208 |   }
209 | 
210 |   100% {
211 |     transform: translateX(0);
212 |   }
213 | }
214 | @keyframes fadeInTop {
215 |   0% {
216 |     transform: translateY(-100%);
217 |   }
218 | 
219 |   100% {
220 |     transform: translateY(0);
221 |   }
222 | }
223 | @keyframes fadeInBottom {
224 |   0% {
225 |     transform: translateY(100%);
226 |   }
227 | 
228 |   100% {
229 |     transform: translateY(0);
230 |   }
231 | }
232 | </style>
233 | 


--------------------------------------------------------------------------------
/src/components/InputDemo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="input-doc">
  3 |     <h2>Input 输入框</h2>
  4 |     <Demo :component="BasicInput" describe="最基本的用法" />
  5 |     <Demo :component="DisabledInput" describe="设置disabled,可以禁用" />
  6 |     <Demo :component="ClearableInput" describe="设置clearable属性，可清除" />
  7 |     <Demo :component="ShowPassword" describe="使用show-password,即可得到一个密码框" />
  8 |     <Demo :component="IconInput" describe="可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标" />
  9 |     <Demo :component="TextareaInput" describe="设置type属性指定为文本域" />
 10 |     <h2>API</h2>
 11 |     <Table :columns="columns" :dataSource="dataSource" />
 12 |     <h2>Methods</h2>
 13 |     <Table :columns="columns" :dataSource="dataSource2" />
 14 | </div>
 15 | </template>
 16 | 
 17 | <script lang="ts">
 18 | import Demo from "./Demo.vue";
 19 | import BasicInput from "./InputDemos/BasicInput.vue";
 20 | import DisabledInput from "./InputDemos/DisabledInput.vue";
 21 | import ClearableInput from "./InputDemos/ClearableInput.vue";
 22 | import ShowPassword from "./InputDemos/ShowPassword.vue";
 23 | import TextareaInput from "./InputDemos/TextareaInput.vue";
 24 | import IconInput from "./InputDemos/IconInput.vue";
 25 | import Table from "../lib/Table.vue"
 26 | import {
 27 |     reactive
 28 | } from "vue";
 29 | 
 30 | export default {
 31 |     components: {
 32 |         Demo, Table
 33 |     },
 34 |     setup() {
 35 |         const columns = reactive([{
 36 |                 text: "参数",
 37 |                 field: "params"
 38 |             },
 39 |             {
 40 |                 text: "说明",
 41 |                 field: "description"
 42 |             },
 43 |             {
 44 |                 text: "类型",
 45 |                 field: "type"
 46 |             },
 47 |             {
 48 |                 text: "默认值",
 49 |                 field: "default"
 50 |             }
 51 |         ]);
 52 | 
 53 |         const dataSource = reactive([
 54 |              {
 55 |                 params: "v-model/value",
 56 |                 description: "默认的绑定值",
 57 |                 type: "string",
 58 |                 default: "-"
 59 |             },
 60 |             {
 61 |                 params: "clearable",
 62 |                 description: "是否可清空",
 63 |                 type: "boolean",
 64 |                 default: "false"
 65 |             },
 66 |             {
 67 |                 params: "disabled",
 68 |                 description: "是否禁用",
 69 |                 type: "boolean",
 70 |                 default: "false"
 71 |             },
 72 |             {
 73 |                 params: "showPassword",
 74 |                 description: "是否为密码框",
 75 |                 type: "boolean",
 76 |                 default: "false"
 77 |             }, {
 78 |                 params: "prefixIcon",
 79 |                 description: "前缀图标",
 80 |                 type: "string",
 81 |                 default: "-"
 82 |             },
 83 |             {
 84 |                 params: "suffixIcon",
 85 |                 description: "后缀图标",
 86 |                 type: "string",
 87 |                 default: "-"
 88 |             },
 89 |             {
 90 |                 params: "placeholder",
 91 |                 description: "输入框占位文本",
 92 |                 type: "string",
 93 |                 default: "-"
 94 |             },
 95 |             {
 96 |                 params: "type",
 97 |                 description: "类型",
 98 |                 type: "string",
 99 |                 default: "text，textarea 和其他 原生 input 的 type 值"
100 |             }, {
101 |                 params: "row",
102 |                 description: "textarea指定行数",
103 |                 type: "string,number",
104 |                 default: "2"
105 |             },
106 |         ]);
107 | 
108 |         const dataSource2 = reactive([{
109 |                 params: "blur",
110 |                 description: "在 Input 失去焦点时触发",
111 |                 type: "(event: Event) => void",
112 |                 default: "-"
113 |             },
114 |             {
115 |                 params: "focus",
116 |                 description: "在 Input 获得焦点时触发",
117 |                 type: "(event: Event) => void",
118 |                 default: "-"
119 |             },
120 |             {
121 |                 params: "change",
122 |                 description: "仅在输入框失去焦点或用户按下回车时触发",
123 |                 type: "bool(value: string) => void",
124 |                 default: "-"
125 |             },
126 |             {
127 |                 params: "input",
128 |                 description: "在 Input 值改变时触发",
129 |                 type: "(value: string) => void",
130 |                 default: "-"
131 |             },
132 |             {
133 |                 params: "clear",
134 |                 description: "在点击由 clearable 属性生成的清空按钮时触发",
135 |                 type: "-",
136 |                 default: "-"
137 |             },
138 |         ]);
139 | 
140 |         return {
141 |             BasicInput,
142 |             DisabledInput,
143 |             ClearableInput,
144 |             ShowPassword,
145 |             IconInput,
146 |             TextareaInput,
147 |             dataSource2,
148 |             dataSource,
149 |             columns
150 |         }
151 |     }
152 | }
153 | </script>
154 | 
155 | <style lang="scss" scoped>
156 | .input-doc {
157 |     width: 100%;
158 | }
159 | </style>
160 | 


--------------------------------------------------------------------------------
/src/lib/Input.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div :class="{
  3 | 	'le-input': true,
  4 | 	'le-input-disabled': disabled ,
  5 | 	'clearable': clearable,
  6 | 	'show-password': showPassword,
  7 | 	'show-prefixIcon': prefixIcon,
  8 | 	'show-suffixIcon': suffixIcon
  9 | }
 10 | 	">
 11 |     <!-- 前缀 -->
 12 |     <div v-if="prefixIcon" class="prefixIcon">
 13 |         <Icon :name="prefixIcon" />
 14 |     </div>
 15 |     <!-- input -->
 16 |     <template v-if="inputType !== 'textarea'">
 17 |         <input :value="value" :type="inputType" :placeholder="placeholder" ref="inputRef" :readonly="disabled" @blur="handleBlur" @focus="handleFocus" @change="handleChange" @input="handleInput">
 18 |     </template>
 19 |     <!-- textarea -->
 20 |     <template v-if="inputType === 'textarea'">
 21 |         <textarea :rows="row"></textarea>
 22 |     </template>
 23 | 
 24 |     <!-- 后缀 -->
 25 |     <div v-if="suffixIcon && !clearable && !showPassword" class="suffixIcon">
 26 |         <Icon :name="suffixIcon" />
 27 |     </div>
 28 | 
 29 |     <div v-if="clearable && !showPassword && !suffixIcon" class="close" @click="clearInputVal">
 30 |         <Icon name="close" />
 31 |     </div>
 32 |     <div v-if="showPassword && !clearable && !suffixIcon" class="password" @click="togglePassword">
 33 |         <Icon :name="passwordVisible ? 'visible': 'not-visible'" :style="{ fill: 'rgba(0,0,0,0.45)' }" />
 34 |     </div>
 35 | </div>
 36 | </template>
 37 | 
 38 | <script lang="ts">
 39 | import {
 40 |     computed,
 41 |     ref
 42 | } from 'vue';
 43 | import Icon from "../lib/Icon.vue";
 44 | 
 45 | export default {
 46 |     components: {
 47 |         Icon
 48 |     },
 49 |     props: {
 50 |         value: {
 51 |             type: String,
 52 |             default: ""
 53 |         },
 54 |         disabled: {
 55 |             type: Boolean,
 56 |             default: false,
 57 |         },
 58 |         clearable: {
 59 |             type: Boolean,
 60 |             default: false
 61 |         },
 62 |         showPassword: {
 63 |             type: Boolean,
 64 |             default: false
 65 |         },
 66 |         prefixIcon: {
 67 |             type: String,
 68 |         },
 69 |         suffixIcon: {
 70 |             type: String,
 71 |         },
 72 |         placeholder: {
 73 |             type: String,
 74 |             default: "请输入内容"
 75 |         },
 76 |         type: {
 77 |             type: String,
 78 |             default: "text"
 79 |         },
 80 |         row: {
 81 |             type: [String, Number],
 82 |             default: 2
 83 |         }
 84 |     },
 85 |     emits: ['input', 'change', 'focus', 'blur', 'clear','update:value'],
 86 | 
 87 |     setup(props, ctx) {
 88 |         const inputRef = ref(null);
 89 |         const passwordVisible = ref(false);
 90 | 
 91 |         const clearInputVal = () => {
 92 |             inputRef.value.value = ""
 93 |             ctx.emit("clear")
 94 |         }
 95 | 
 96 |         const togglePassword = () => {
 97 |             passwordVisible.value = !passwordVisible.value
 98 |         }
 99 | 
100 |         const inputType = computed(() => {
101 |             return passwordVisible.value ? 'password' : props.type
102 |         })
103 | 
104 |         const handleBlur = (event) => {
105 |             ctx.emit('blur', event)
106 |         }
107 | 
108 |         const handleFocus = (event) => {
109 |             ctx.emit('focus', event)
110 |         }
111 | 
112 |         const handleChange = (event) => {
113 |             ctx.emit('change', inputRef.value.value)
114 |             ctx.emit("update:value", inputRef.value.value)
115 |         }
116 | 
117 |         const handleInput = (event) => {
118 |             ctx.emit('input', inputRef.value.value)
119 |         }
120 | 
121 |         return {
122 |             clearInputVal,
123 |             inputRef,
124 |             togglePassword,
125 |             passwordVisible,
126 |             inputType,
127 |             handleBlur,
128 |             handleFocus,
129 |             handleChange,
130 |             handleInput
131 |         }
132 |     }
133 | }
134 | </script>
135 | 
136 | <style lang="scss" scoped>
137 | .le-input {
138 |     position: relative;
139 |     display: inline-flex;
140 |     align-items: center;
141 | 
142 |     input {
143 |         font-size: 14px;
144 |         padding: 4px 11px;
145 |         line-height: 20px;
146 |         border-radius: 4px;
147 |         border: 1px solid rgba(0, 0, 0, 0.15);
148 |         transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
149 |         color: rgba(0, 0, 0, 0.65);
150 |         outline: none;
151 |         display: flex;
152 | 
153 |         &:focus {
154 |             border: 1px solid #5db2f7;
155 |         }
156 | 
157 |         &:hover {
158 |             border: 1px solid #5db2f7;
159 |         }
160 |     }
161 | 
162 |     &.clearable,
163 |     &.show-password,
164 |     &.show-suffixIcon {
165 |         input {
166 |             padding-right: 20px !important;
167 |         }
168 |     }
169 | 
170 |     &.show-prefixIcon {
171 |         input {
172 |             padding-left: 20px !important;
173 |         }
174 |     }
175 | 
176 |     & .close,
177 |     & .password,
178 |     & .suffixIcon {
179 |         position: absolute;
180 |         right: 4px;
181 |         cursor: pointer;
182 |     }
183 | 
184 |     & .prefixIcon {
185 |         position: absolute;
186 |         left: 4px;
187 |     }
188 | 
189 |     &.le-input-disabled {
190 |         input {
191 |             cursor: not-allowed;
192 |             color: rgba(0, 0, 0, 0.25);
193 |             border-color: #d9d9d9;
194 |             background-color: #e6e6e6;
195 |         }
196 |     }
197 | }
198 | </style>
199 | 


--------------------------------------------------------------------------------
/src/lib/Pager.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="le-pager"
  4 |     :class="{ hide: hidePager === true && totalPage <= 1, simple, [size]: size }"
  5 |   >
  6 |     <span class="le-pager-nav prev" :class="{ disabled: currentPage === 1 }">
  7 |       <icon name="arrow-left" @click="handlePrevClick"></icon>
  8 |     </span>
  9 | 
 10 |     <template v-for="page in pages">
 11 |       <template v-if="page === currentPage">
 12 |         <span class="le-pager-item current" :data-number="currentPage">{{ page }}</span>
 13 |       </template>
 14 | 
 15 |       <template v-else-if="page === '...'">
 16 |         <icon class="le-pager-separator" name="ellipsis"></icon>
 17 |       </template>
 18 | 
 19 |       <template v-else>
 20 |         <span class="le-pager-item other" @click="onClickPage(page)">{{ page }}</span>
 21 |       </template>
 22 |     </template>
 23 | 
 24 |     <span class="le-pager-nav next" :class="{ disabled: currentPage === totalPage }">
 25 |       <icon name="arrow-right" @click="handleNextClick"></icon>
 26 |     </span>
 27 |   </div>
 28 | </template>
 29 | <script lang="ts">
 30 | import Icon from "./Icon.vue";
 31 | import { computed, PropType } from "vue";
 32 | export default {
 33 |   components: { Icon },
 34 |   props: {
 35 |     totalPage: {
 36 |       type: Number,
 37 |       required: true,
 38 |     },
 39 |     currentPage: {
 40 |       type: Number,
 41 |       required: true,
 42 |     },
 43 |     hidePager: {
 44 |       type: Boolean,
 45 |       default: true,
 46 |     },
 47 |     simple: {
 48 |       type: Boolean,
 49 |       default: false,
 50 |     },
 51 |     size: {
 52 |       type: String as PropType<"small" | "default">,
 53 |       default: "default",
 54 |       validator: (val: string) => ["small", "default"].includes(val),
 55 |     },
 56 |   },
 57 |   emits: ["update:currentPage", "prevClick", "nextClick", "currentChange"],
 58 |   setup(props, ctx) {
 59 |     const unique = (array) => {
 60 |       const obj = {};
 61 |       // 去重
 62 |       array.map((i) => {
 63 |         obj[i] = true;
 64 |       });
 65 |       return Object.keys(obj).map((string) => parseInt(string, 10));
 66 |     };
 67 | 
 68 |     const onClickPage = (n: number) => {
 69 |       if (n >= 1 && n <= props.totalPage) {
 70 |         ctx.emit("update:currentPage", n);
 71 |         ctx.emit("currentChange", n)
 72 |       }
 73 |     };
 74 | 
 75 |     const pages = computed(() => {
 76 |       return unique(
 77 |         [
 78 |           1,
 79 |           props.currentPage - 1,
 80 |           props.currentPage,
 81 |           props.currentPage + 1,
 82 |           props.currentPage + 2,
 83 |           props.currentPage + 3,
 84 |           props.currentPage + 4,
 85 |           props.currentPage + 5,
 86 |           props.totalPage,
 87 |         ]
 88 |           .filter((n) => n >= 1 && n <= props.totalPage)
 89 |           .sort((a, b) => a - b)
 90 |       ).reduce((prev, current, index, array) => {
 91 |         prev.push(current);
 92 |         // 前后数字大于时截断
 93 |         let canAddSeparator =
 94 |           array[index + 1] !== undefined && array[index + 1] - array[index] > 1;
 95 |         if (canAddSeparator) {
 96 |           prev.push("...");
 97 |         }
 98 |         return prev;
 99 |       }, []);
100 |     });
101 | 
102 |     const handlePrevClick = () => {
103 |       onClickPage(props.currentPage - 1);
104 |       ctx.emit("prevClick", props.currentPage - 1);
105 |     };
106 | 
107 |     const handleNextClick = () => {
108 |       onClickPage(props.currentPage + 1);
109 |       ctx.emit("nextClick", props.currentPage + 1);
110 |     };
111 | 
112 |     return { pages, onClickPage, handlePrevClick, handleNextClick };
113 |   },
114 | };
115 | </script>
116 | <style scoped lang="scss">
117 | $width: 28px;
118 | $height: 28px;
119 | $widthSmall: 22px;
120 | $heightSmall: 22px;
121 | $font-size: 12px;
122 | $border-radius: 4px;
123 | $border-color1: #e1e1e1;
124 | $blue: #4a90e2;
125 | $grey: #eee;
126 | .le-pager {
127 |   display: flex;
128 |   justify-content: flex-start;
129 |   align-items: center;
130 |   user-select: none;
131 |   &.hide {
132 |     display: none;
133 |   }
134 |   &-separator {
135 |     width: $width;
136 |     font-size: 14px;
137 |   }
138 |   &-item {
139 |     min-width: $width;
140 |     height: $height;
141 |     font-size: 16px;
142 |     border: 1px solid $border-color1;
143 |     border-radius: 4px;
144 |     padding: 0 4px;
145 |     display: inline-flex;
146 |     justify-content: center;
147 |     align-items: center;
148 |     margin: 0 4px;
149 |     cursor: pointer;
150 |     &.current,
151 |     &:hover {
152 |       border-color: $blue;
153 |     }
154 |     &.current {
155 |       cursor: default;
156 |     }
157 |   }
158 |   &-nav {
159 |     margin: 0 4px;
160 |     display: inline-flex;
161 |     justify-content: center;
162 |     align-items: center;
163 |     background: $grey;
164 |     height: $height;
165 |     width: $width;
166 |     border-radius: $border-radius;
167 |     font-size: 14px;
168 |     cursor: pointer;
169 |     &.disabled {
170 |       cursor: default;
171 |       svg {
172 |         fill: darken($grey, 30%);
173 |       }
174 |     }
175 |   }
176 |   &.simple {
177 |     .prev {
178 |       background-color: #fff;
179 |     }
180 |     .le-pager-item {
181 |       border: none;
182 |       &.current,
183 |       &:hover {
184 |         color: $blue;
185 |       }
186 |     }
187 |     .next {
188 |       background-color: #fff;
189 |     }
190 |   }
191 |   &.small {
192 |     .le-pager-item {
193 |       font-size: 12px;
194 |       width: $widthSmall;
195 |       height: $heightSmall;
196 |     }
197 |     .prev {
198 |       width: $widthSmall;
199 |       height: $heightSmall;
200 |     }
201 |     .next {
202 |       width: $widthSmall;
203 |       height: $heightSmall;
204 |     }
205 |   }
206 | }
207 | </style>
208 | 


--------------------------------------------------------------------------------
/src/lib/Rate.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div :class="{
  3 | 'le-rate': true,
  4 | 'disabled': disabled
  5 | }">
  6 |     <ul class="le-rate-wrapper">
  7 |         <li v-for="i in num" @mouseenter="handleMouseEnter(i)" @mouseleave="handleMouseLeave" :class="{
  8 |             'selected': i<=currentSelect, 'currentHover': i<currentHover ,'halfSelected': i === halfSelect}">
  9 |             <div v-if="allowHalf" class="le-rate-first" @click="handleClick(i,'half')">
 10 |                 <Icon :name="iconName" />
 11 |             </div>
 12 |             <div class="le-rate-second" @click="handleClick(i,'whole')">
 13 |                 <Icon :name="iconName" />
 14 |             </div>
 15 |         </li>
 16 |     </ul>
 17 |     <span class="le-rate-tooltips" v-if="tooltips.length === num">{{tooltips[currentSelect-1]}}</span>
 18 | </div>
 19 | </template>
 20 | 
 21 | <script lang="ts">
 22 | import Icon from "./Icon.vue";
 23 | import {
 24 |     ref,
 25 |     PropType
 26 | } from "vue";
 27 | 
 28 | export default {
 29 |     props: {
 30 |         num: {
 31 |             type: Number,
 32 |             default: 5
 33 |         },
 34 |         value: {
 35 |             type: Number,
 36 |             default: 0
 37 |         },
 38 |         disabled: {
 39 |             type: Boolean,
 40 |             default: false
 41 |         },
 42 |         allowHalf: {
 43 |             type: Boolean,
 44 |             default: false
 45 |         },
 46 |         allowClear: {
 47 |             type: Boolean,
 48 |             default: false
 49 |         },
 50 |         iconName: {
 51 |             type: String,
 52 |             default: 'collection-fill'
 53 |         },
 54 |         tooltips: {
 55 |             type: Array as PropType < string[] > ,
 56 |             default: () => [],
 57 |         }
 58 |     },
 59 |     components: {
 60 |         Icon
 61 |     },
 62 |     emits: ['onChange', 'onHoverChange', 'update:value'],
 63 |     setup(props, ctx) {
 64 | 
 65 |         const halfSelect = ref(-1);
 66 | 
 67 |         let defaultValue = 0
 68 |         const tempValue = Math.floor(props.value)
 69 |         if (props.value - tempValue > 0 && props.allowHalf) {
 70 |             defaultValue = tempValue
 71 |             halfSelect.value = tempValue + 1
 72 |         } else {
 73 |             defaultValue = props.value
 74 |         }
 75 | 
 76 |         const currentHover = ref(0);
 77 |         const currentSelect = ref(defaultValue);
 78 | 
 79 |         const handleMouseEnter = (i: number) => {
 80 |             currentHover.value = i;
 81 |             onHoverChange(i)
 82 |         }
 83 | 
 84 |         const handleMouseLeave = () => {
 85 |             currentHover.value = 0;
 86 |             ctx.emit("onHoverChange", 0)
 87 |         }
 88 | 
 89 |         const handleClick = (i: number, type: string) => {
 90 |             if (type === "whole") {
 91 |                 const newIndex = props.allowClear && currentSelect.value === i ? 0 : i
 92 |                 currentSelect.value = newIndex
 93 |                 onChange(newIndex)
 94 |             } else {
 95 |                 const newIndex = props.allowClear && currentSelect.value === i ? 0 : i - 0.5
 96 |                 const halfIndex = props.allowClear && currentSelect.value === i ? 0 : i
 97 |                 currentSelect.value = newIndex
 98 |                 onChange(newIndex)
 99 |                 halfSelect.value = halfIndex
100 |             }
101 |         }
102 | 
103 |         const onHoverChange = (i: number) => {
104 |             ctx.emit("onHoverChange", i)
105 |         }
106 | 
107 |         const onChange = (i: number) => {
108 |             ctx.emit("update:value", i)
109 |             ctx.emit("onChange", i)
110 |         }
111 | 
112 |         return {
113 |             handleMouseEnter,
114 |             handleMouseLeave,
115 |             handleClick,
116 |             currentHover,
117 |             currentSelect,
118 |             halfSelect
119 |         }
120 |     }
121 | }
122 | </script>
123 | 
124 | <style lang="scss" scoped>
125 | $rateNormal: #dadada;
126 | $rateHighLight: #eae84f;
127 | 
128 | .le-rate {
129 |     display: flex;
130 |     align-items: flex-end;
131 | 
132 |     .le-rate-wrapper {
133 |         display: inline-flex;
134 | 
135 |         &>li {
136 |             list-style: none;
137 |             cursor: pointer;
138 |             position: relative;
139 | 
140 |             &>.le-icon {
141 |                 fill: $rateNormal;
142 |                 width: 1.5em;
143 |                 height: 1.5em;
144 |             }
145 | 
146 |             &>.le-rate-first {
147 |                 position: absolute;
148 |                 width: 1.5em;
149 |                 height: 1.5em;
150 |                 left: 0;
151 |                 top: 0;
152 |                 width: 50%;
153 |                 height: 100%;
154 |                 overflow: hidden;
155 | 
156 |                 &>.le-icon {
157 |                     fill: $rateNormal;
158 |                     width: 1.5em;
159 |                     height: 1.5em;
160 |                     opacity: 0;
161 |                 }
162 | 
163 |                 &:hover {
164 |                     &>.le-icon {
165 |                         fill: $rateHighLight;
166 |                         opacity: 1;
167 |                     }
168 | 
169 |                 }
170 |             }
171 | 
172 |             &>.le-rate-second {
173 | 
174 |                 &>.le-icon {
175 |                     fill: $rateNormal;
176 |                     width: 1.5em;
177 |                     height: 1.5em;
178 |                 }
179 | 
180 |                 &:hover {
181 |                     &>.le-icon {
182 |                         fill: $rateHighLight;
183 | 
184 |                     }
185 |                 }
186 |             }
187 | 
188 |             &.currentHover {
189 |                 .le-rate-first {
190 |                     .le-icon {
191 |                         fill: $rateHighLight;
192 |                     }
193 |                 }
194 | 
195 |                 .le-rate-second {
196 |                     .le-icon {
197 |                         fill: $rateHighLight;
198 |                     }
199 |                 }
200 |             }
201 | 
202 |             &.selected {
203 |                 &>.le-rate-second {
204 |                     &>.le-icon {
205 |                         fill: $rateHighLight;
206 |                     }
207 |                 }
208 |             }
209 | 
210 |             &.halfSelected {
211 |                 .le-rate-first {
212 |                     .le-icon {
213 |                         fill: $rateHighLight;
214 |                         opacity: 1;
215 |                     }
216 |                 }
217 |             }
218 |         }
219 |     }
220 | 
221 |     &.disabled {
222 |         .le-rate-wrapper {
223 |             pointer-events: none;
224 |             cursor: not-allowed;
225 |         }
226 |     }
227 | 
228 |     .le-rate-tooltips {
229 |         font-size: 14px;
230 |     }
231 | }
232 | </style>
233 | 


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