lew-ui 1.0.2 → 1.0.3

package/src/router/index.ts

@@ -0,0 +1,59 @@
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
+const LewAvatar = () => import('../views/demo/general/LewAvatar.vue');
+const LewBadge = () => import('../views/demo/general/LewBadge.vue');
+const LewButton = () => import('../views/demo/general/LewButton.vue');
+
+const LewTitle = () => import('../views/demo/general/LewTitle.vue');
+
+const LewCascader = () => import('../views/demo/form/LewCascader.vue');
+const LewCheckbox = () => import('../views/demo/form/LewCheckbox.vue');
+const LewInputTag = () => import('../views/demo/form/LewInputTag.vue');
+const LewRadio = () => import('../views/demo/form/LewRadio.vue');
+const LewSelect = () => import('../views/demo/form/LewSelect.vue');
+const LewSwitch = () => import('../views/demo/form/LewSwitch.vue');
+const LewTextarea = () => import('../views/demo/form/LewTextarea.vue');
+const LewInput = () => import('../views/demo/form/LewInput.vue');
+const LewForm = () => import('../views/demo/form/LewForm.vue');
+const LewTabs = () => import('../views/demo/form/LewTabs.vue');
+const LewAlert = () => import('../views/demo/feedback/LewAlert.vue');
+
+const LewDialog = () => import('../views/demo/feedback/LewDialog.vue');
+const LewMessage = () => import('../views/demo/feedback/LewMessage.vue');
+const LewModal = () => import('../views/demo/feedback/LewModal.vue');
+const LewPopover = () => import('../views/demo/feedback/LewPopover.vue');
+const LewResult = () => import('../views/demo/feedback/LewResult.vue');
+const LewTooltip = () => import('../views/demo/feedback/LewTooltip.vue');
+
+const routes: Array<RouteRecordRaw> = [
+    { path: '/', name: 'Home', component: LewAvatar },
+    { path: '/Avatar', name: 'LewAvatar', component: LewAvatar },
+    { path: '/Badge', name: 'LewBadge', component: LewBadge },
+    { path: '/Title', name: 'LewTitle', component: LewTitle },
+    { path: '/Button', name: 'LewButton', component: LewButton },
+    { path: '/Tabs', name: 'LewTabs', component: LewTabs },
+
+    { path: '/Form', name: 'LewForm', component: LewForm },
+    { path: '/Cascader', name: 'LewCascader', component: LewCascader },
+    { path: '/Checkbox', name: 'LewCheckbox', component: LewCheckbox },
+    { path: '/Input', name: 'LewInput', component: LewInput },
+    { path: '/Radio', name: 'LewRadio', component: LewRadio },
+    { path: '/Select', name: 'LewSelect', component: LewSelect },
+    { path: '/Switch', name: 'LewSwitch', component: LewSwitch },
+    { path: '/Textarea', name: 'LewTextarea', component: LewTextarea },
+    { path: '/InputTag', name: 'LewInputTag', component: LewInputTag },
+
+    { path: '/Alert', name: 'LewAlert', component: LewAlert },
+    { path: '/Result', name: 'LewResult', component: LewResult },
+    { path: '/Dialog', name: 'LewDialog', component: LewDialog },
+    { path: '/Popover', name: 'LewPopover', component: LewPopover },
+    { path: '/Tooltip', name: 'LewTooltip', component: LewTooltip },
+
+    { path: '/Modal', name: 'LewModal', component: LewModal },
+    { path: '/Message', name: 'LewMessage', component: LewMessage },
+];
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes,
+});
+
+export default router;

package/src/views/demo/feedback/LewAlert.vue

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import DemoBox from '../../../components/demo/DemoBox.vue';
+import { ref } from 'vue';
+import { LewTitle, LewAlert, LewButton } from '../../../components';
+
+type Options = {
+    type: string;
+    title: string;
+    content: string;
+};
+
+let alertList = ref<Options[]>([]);
+
+const addAlert = (e: Options) => {
+    alertList.value.unshift(e);
+};
+const close = (e: number) => {
+    alertList.value.splice(e, 1);
+};
+
+let pre1 = ref(`<script setup lang="ts">
+import { ref } from 'vue';
+import { LewAlert, LewButton } from '../../../components';
+
+type Options = {
+    type: string;
+    title: string;
+    content: string;
+};
+
+let alertList = ref<Options[]>([]);
+
+const addAlert = (e: Options) => {
+    alertList.value.unshift(e);
+};
+const close = (e: number) => {
+    alertList.value.splice(e, 1);
+};
+
+<\/script>
+
+<template>
+    <LewButton
+        type="primary"
+        style="margin-right: 10px"
+        @click="
+            addAlert({
+                type: 'primary',
+                title: '成功发送一条消息',
+                content: '',
+            })
+        "
+        >点我</LewButton
+    >
+    <LewButton
+        type="danger"
+        style="margin-right: 10px"
+        @click="
+            addAlert({
+                type: 'danger',
+                title: '成功发送一条消息',
+                content: '',
+            })
+        "
+        >点我</LewButton
+    >
+    <LewButton
+        type="warning"
+        style="margin-right: 10px"
+        @click="
+            addAlert({
+                type: 'warning',
+                title: '成功发送一条消息',
+                content: '',
+            })
+        "
+        >点我</LewButton
+    >
+    <LewButton
+        type="success"
+        style="margin-right: 10px"
+        @click="
+            addAlert({
+                type: 'success',
+                title: '成功发送一条消息',
+                content: '',
+            })
+        "
+        >点我</LewButton
+    >
+    <LewButton
+        type="normal"
+        style="margin-right: 10px"
+        @click="
+            addAlert({
+                type: 'normal',
+                title: '成功发送一条消息',
+                content: 'Well the Ukraine girls really knock me out
+                                    They leave the West behind
+                                    And Moscow girls make me sing and shout
+                                    That Georgia's always on my mind
+                                    Aw come on!',
+            })
+        "
+        >点我</LewButton
+    >
+    <div style="margin-top: 20px">
+        <LewAlert :alert-list="alertList" @close="close"></LewAlert>
+    </div>
+</template>
+`);
+</script>
+
+<template>
+    <div class="demo-wrapper">
+        <lew-title>Alert</lew-title>
+        <demo-box title="警报" :code="pre1">
+            <LewButton
+                type="primary"
+                style="margin-right: 10px"
+                @click="
+                    addAlert({
+                        type: 'primary',
+                        title: '成功发送一条消息',
+                        content: '',
+                    })
+                "
+                >点我</LewButton
+            >
+            <LewButton
+                type="danger"
+                style="margin-right: 10px"
+                @click="
+                    addAlert({
+                        type: 'danger',
+                        title: '成功发送一条消息',
+                        content: '',
+                    })
+                "
+                >点我</LewButton
+            >
+            <LewButton
+                type="warning"
+                style="margin-right: 10px"
+                @click="
+                    addAlert({
+                        type: 'warning',
+                        title: '成功发送一条消息',
+                        content: '',
+                    })
+                "
+                >点我</LewButton
+            >
+            <LewButton
+                type="success"
+                style="margin-right: 10px"
+                @click="
+                    addAlert({
+                        type: 'success',
+                        title: '成功发送一条消息',
+                        content: '',
+                    })
+                "
+                >点我</LewButton
+            >
+            <LewButton
+                type="normal"
+                style="margin-right: 10px"
+                @click="
+                    addAlert({
+                        type: 'normal',
+                        title: '成功发送一条消息',
+                        content:
+                            'Well the Ukraine girls really knock me out They leave the West behind And Moscow girls make me sing and shout That Georgia s always on my mind Aw come on!',
+                    })
+                "
+                >点我</LewButton
+            >
+            <div style="margin-top: 20px">
+                <LewAlert :alert-list="alertList" @close="close"></LewAlert>
+            </div>
+        </demo-box>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+    width: 100%;
+    margin: 0 auto;
+    > div {
+        margin: 30px 0px;
+    }
+}
+</style>

package/src/views/demo/feedback/LewDialog.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { LewTitle } from '../../../components';
+</script>
+
+<template>
+    <div class="demo-wrapper">
+        <lew-title>Dialog</lew-title>
+        <div>开发中···</div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+    width: 100%;
+    margin: 0 auto;
+    > div {
+        margin: 30px 0px;
+    }
+}
+</style>

package/src/views/demo/feedback/LewMessage.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { LewTitle } from '../../../components';
+</script>
+
+<template>
+    <div class="demo-wrapper">
+        <lew-title>Message</lew-title>
+        <div>开发中···</div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+    width: 100%;
+    margin: 0 auto;
+    > div {
+        margin: 30px 0px;
+    }
+}
+</style>

package/src/views/demo/feedback/LewModal.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+    LewTitle,
+    LewButton,
+    LewModal,
+    LewInput,
+    LewFormItem,
+} from '../../../components';
+import DemoBox from '../../../components/demo/DemoBox.vue';
+
+const modalVisible = ref(false);
+
+let pre1 = ref(`<script setup lang="ts">
+import { ref } from 'vue';
+import {
+    LewTitle,
+    LewButton,
+    LewModal,
+    LewInput,
+    LewFormItem,
+} from '../../../components';
+
+const modalVisible = ref(false);
+<\/script>
+
+<template>
+    <lew-button @click="modalVisible = true">登录</lew-button>
+    <lew-modal
+        :visible="modalVisible"
+        @mask-click="modalVisible = false"
+        width="350px"
+    >
+        <div class="modal-body">
+            <lew-title :bold="700" style="margin-bottom: 20px"
+                >登录你的账户</lew-title
+            >
+            <lew-form-item direction="y" title="账号">
+                <lew-input
+            /></lew-form-item>
+            <lew-form-item
+                style="margin-bottom: 30px"
+                direction="y"
+                title="密码"
+            >
+                <lew-input
+            /></lew-form-item>
+
+            <div>
+                <lew-button
+                    type="normal"
+                    style="margin-right: 20px"
+                    @click="modalVisible = false"
+                    >关闭</lew-button
+                >
+                <lew-button @click="modalVisible = false">立即登录</lew-button>
+            </div>
+        </div>
+    </lew-modal>
+</template>
+
+<style lang="scss" scoped>
+.modal-body {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 40px;
+    box-sizing: border-box;
+}
+</style>
+`);
+</script>
+
+<template>
+    <div class="demo-wrapper">
+        <lew-title>Modal</lew-title>
+
+        <demo-box title="模态框" :code="pre1">
+            <lew-button @click="modalVisible = true">登录</lew-button>
+            <lew-modal
+                :visible="modalVisible"
+                width="350px"
+                @mask-click="modalVisible = false"
+            >
+                <div class="modal-body">
+                    <lew-title :bold="700" style="margin-bottom: 20px"
+                        >登录你的账户</lew-title
+                    >
+                    <lew-form-item direction="y" title="账号">
+                        <lew-input
+                    /></lew-form-item>
+                    <lew-form-item
+                        style="margin-bottom: 30px"
+                        direction="y"
+                        title="密码"
+                    >
+                        <lew-input
+                    /></lew-form-item>
+
+                    <div>
+                        <lew-button
+                            type="normal"
+                            style="margin-right: 20px"
+                            @click="modalVisible = false"
+                            >关闭</lew-button
+                        >
+                        <lew-button @click="modalVisible = false"
+                            >立即登录</lew-button
+                        >
+                    </div>
+                </div>
+            </lew-modal></demo-box
+        >
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.modal-body {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 40px;
+    box-sizing: border-box;
+}
+</style>

package/src/views/demo/feedback/LewPopover.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { LewTitle } from '../../../components';
+</script>
+
+<template>
+    <div class="demo-wrapper">
+        <lew-title>Popover</lew-title>
+        <div>开发中···</div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+    width: 100%;
+    margin: 0 auto;
+    > div {
+        margin: 30px 0px;
+    }
+}
+</style>

package/src/views/demo/feedback/LewResult.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { LewTitle } from '../../../components';
+</script>
+
+<template>
+    <div class="demo-wrapper">
+        <lew-title>Result</lew-title>
+        <div>开发中···</div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+    width: 100%;
+    margin: 0 auto;
+    > div {
+        margin: 30px 0px;
+    }
+}
+</style>

package/src/views/demo/feedback/LewTooltip.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import DemoBox from '../../../components/demo/DemoBox.vue';
+import { LewTitle, LewButton } from '../../../components';
+import { ref } from 'vue';
+let pre1 = ref(`<template>
+    <LewButton
+        v-tooltip="{
+            content: '西伯利亚雪橇犬',
+            placement: 'top',
+            trigger: 'mouseenter',
+        }"
+        >上方</LewButton
+    >
+    <LewButton
+        v-tooltip="{
+            content: '西伯利亚雪橇犬',
+            placement: 'bottom',
+            trigger: 'mouseenter',
+        }"
+        >下方</LewButton
+    >
+    <LewButton
+        v-tooltip="{
+            content: '西伯利亚雪橇犬',
+            placement: 'left',
+            trigger: 'mouseenter',
+        }"
+        >左方</LewButton
+    >
+    <LewButton
+        v-tooltip="{
+            content: '西伯利亚雪橇犬',
+            placement: 'right',
+            trigger: 'mouseenter',
+        }"
+        >右方</LewButton
+    >
+</template>
+`);
+
+let pre2 = ref(`<template>
+    <LewButton
+        v-tooltip="{
+            content:
+                '哈士奇一般指西伯利亚雪橇犬。哈士奇一般指西伯利亚雪橇犬。哈士奇一般指西伯利亚雪橇犬。',
+            placement: 'top',
+            trigger: 'click',
+        }"
+        >上方</LewButton
+    >
+    <LewButton
+        v-tooltip="{
+            content:
+                '哈士奇一般指西伯利亚雪橇犬。哈士奇一般指西伯利亚雪橇犬。哈士奇一般指西伯利亚雪橇犬。',
+            placement: 'bottom',
+            trigger: 'click',
+        }"
+        >下方</LewButton
+    >
+    <LewButton
+        v-tooltip="{
+            content:
+                '哈士奇一般指西伯利亚雪橇犬。哈士奇一般指西伯利亚雪橇犬。哈士奇一般指西伯利亚雪橇犬。',
+            placement: 'left',
+            trigger: 'click',
+        }"
+        >左方</LewButton
+    >
+    <LewButton
+        v-tooltip="{
+            content:
+                '哈士奇一般指西伯利亚雪橇犬。哈士奇一般指西伯利亚雪橇犬。哈士奇一般指西伯利亚雪橇犬。',
+            placement: 'right',
+            trigger: 'click',
+        }"
+        >右方</LewButton
+    >
+</template>
+`);
+</script>
+
+<template>
+    <div class="demo-wrapper">
+        <lew-title>Tooltip</lew-title>
+        <DemoBox title="悬浮显示" badge="推荐" :code="pre1">
+            <LewButton
+                v-tooltip="{
+                    content: '西伯利亚雪橇犬',
+                    placement: 'top',
+                    trigger: 'mouseenter',
+                }"
+                >上方</LewButton
+            >
+            <LewButton
+                v-tooltip="{
+                    content: '西伯利亚雪橇犬',
+                    placement: 'bottom',
+                    trigger: 'mouseenter',
+                }"
+                >下方</LewButton
+            >
+            <LewButton
+                v-tooltip="{
+                    content: '西伯利亚雪橇犬',
+                    placement: 'left',
+                    trigger: 'mouseenter',
+                }"
+                >左方</LewButton
+            >
+            <LewButton
+                v-tooltip="{
+                    content: '西伯利亚雪橇犬',
+                    placement: 'right',
+                    trigger: 'mouseenter',
+                }"
+                >右方</LewButton
+            ></DemoBox
+        >
+        <DemoBox title="点击事件触发" :code="pre2">
+            <LewButton
+                v-tooltip="{
+                    content:
+                        '哈士奇一般指西伯利亚雪橇犬。哈士奇一般指西伯利亚雪橇犬。哈士奇一般指西伯利亚雪橇犬。',
+                    placement: 'top',
+                    trigger: 'click',
+                }"
+                >上方</LewButton
+            >
+            <LewButton
+                v-tooltip="{
+                    content:
+                        '哈士奇一般指西伯利亚雪橇犬。哈士奇一般指西伯利亚雪橇犬。哈士奇一般指西伯利亚雪橇犬。',
+                    placement: 'bottom',
+                    trigger: 'click',
+                }"
+                >下方</LewButton
+            >
+            <LewButton
+                v-tooltip="{
+                    content:
+                        '哈士奇一般指西伯利亚雪橇犬。哈士奇一般指西伯利亚雪橇犬。哈士奇一般指西伯利亚雪橇犬。',
+                    placement: 'left',
+                    trigger: 'click',
+                }"
+                >左方</LewButton
+            >
+            <LewButton
+                v-tooltip="{
+                    content:
+                        '哈士奇一般指西伯利亚雪橇犬。哈士奇一般指西伯利亚雪橇犬。哈士奇一般指西伯利亚雪橇犬。',
+                    placement: 'right',
+                    trigger: 'click',
+                }"
+                >右方</LewButton
+            ></DemoBox
+        >
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.lew-button {
+    margin-right: 20px;
+}
+</style>

package/src/views/demo/form/LewCascader.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { LewTitle, LewBadge } from '../../../components';
+</script>
+
+<template>
+    <div class="demo-wrapper">
+        <lew-title>Cascader</lew-title>
+        <div>
+            <LewBadge type="primary">Github</LewBadge>
+            <LewBadge type="primary">Vue</LewBadge>
+            <LewBadge type="primary">Golang</LewBadge>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+    width: 100%;
+    margin: 0 auto;
+    > div {
+        margin: 30px 0px;
+    }
+}
+</style>