lew-ui 1.0.2 → 1.0.3

package/src/assets/style/reset.scss

@@ -0,0 +1,107 @@
+body,
+dl,
+dt,
+dd,
+pre,
+form,
+fieldset,
+input,
+p,
+blockquote,
+th,
+td,
+a,
+button,
+select {
+    margin: 0;
+    padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h4,
+h5 {
+    margin: 0;
+    padding: 0;
+}
+
+select {
+    font-size: 14px;
+}
+
+table {
+    border-collapse: collapse;
+}
+
+fieldset,
+img {
+    border: 0 none;
+}
+
+fieldset {
+    margin: 0;
+    padding: 0;
+}
+
+fieldset p {
+    margin: 0;
+    padding: 0 0 0 8px;
+}
+
+legend {
+    display: none;
+}
+
+address,
+caption,
+em,
+th,
+i {
+    font-style: normal;
+    font-weight: 400;
+}
+
+table caption {
+    margin-left: -var(--border-width);
+}
+
+hr {
+    border-bottom: var(--border-width) solid #ffffff;
+    border-top: var(--border-width) solid #e4e4e4;
+    border-width: var(--border-width) 0;
+    clear: both;
+    height: 2px;
+    margin: 5px 0;
+    overflow: hidden;
+}
+
+ol,
+ul {
+    list-style-image: none;
+    list-style-position: outside;
+}
+
+caption,
+th {
+    text-align: left;
+}
+
+q:before,
+q:after,
+blockquote:before,
+blockquote:after {
+    content: '';
+}
+
+a {
+    color: #000;
+    text-decoration: none;
+    position: relative;
+}
+
+// 字体设置
+* {
+    font-family: 'PingFang SC', DFPKingGothicGB-Regular, sans-serif;
+}

package/src/assets/style/var.scss

@@ -0,0 +1,90 @@
+:root {
+    // 全局
+    --body-bgcolor: #fff; // body背景
+    --text-color: rgb(51, 54, 57); // 全局文字颜色
+    --text-color-invert: rgb(255, 255, 255);
+    --border-radius: 8px;
+    // 主题色
+    --primary-color: rgb(59, 121, 208);
+    --primary-color-light: rgb(59, 121, 208, 0.2);
+    --primary-text-color: rgb(47, 88, 146);
+    --primary-color-hover: rgb(54, 109, 187);
+    --primary-color-active: rgb(42, 94, 149);
+    //
+    --success-color: rgb(49, 196, 141);
+    --success-color-dark: rgb(35, 153, 110);
+    --success-color-light: rgb(108, 176, 119, 0.2);
+    --success-text-color: rgb(30, 107, 41);
+    --success-color-hover: rgb(40, 176, 126);
+    --success-color-active: rgb(28, 157, 110);
+    //
+    --danger-color: rgb(249, 128, 128);
+    --danger-color-dark: rgb(197, 88, 88);
+    --danger-color-light: rgb(249, 128, 128, 0.2);
+    --danger-text-color: #d10000;
+    --danger-color-hover: rgb(231, 113, 113);
+    --danger-color-active: rgb(204, 92, 92);
+    //
+    --warning-color: rgb(227, 179, 68);
+    --warning-color-dark: rgb(186, 132, 7);
+    --warning-color-light: rgb(227, 160, 8, 0.2);
+    --warning-text-color: rgb(187, 128, 9);
+    --warning-color-hover: rgb(211, 150, 8);
+    --warning-color-active: rgb(187, 133, 7);
+    //
+    --normal-color: rgb(236, 235, 235);
+    --normal-color-dark: rgb(177, 176, 176);
+    --normal-color-light: rgba(154, 154, 154, 0.2);
+    --normal-text-color: rgb(66, 66, 66);
+    --normal-color-hover: rgb(224, 223, 223);
+    --normal-color-active: rgb(165, 161, 161);
+    // 标题
+    --title-bold: 800;
+    --title-color: rgb(33, 33, 33); // 标题颜色
+    // 表单样式
+    --form-border: 1.5px rgba(0, 0, 0, 0.03) solid;
+    --form-border-hover: 1.5px rgba(0, 0, 0, 0.08) solid;
+    --form-border-active: 1.5px rgba(0, 0, 0, 0.12) solid;
+    --form-border-radius: 8px;
+    --form-border-focus: 1.5px solid var(--primary-color);
+    --form-bgcolor-focus: rgb(255, 255, 255);
+    --form-text-color: #333;
+    // 表单背景
+    --form-bgcolor: rgba(6, 57, 88, 0.022);
+    --form-bgcolor-hover: rgba(6, 57, 88, 0.06);
+    --form-bgcolor-active: rgba(6, 57, 88, 0.12);
+    // 表单背景2
+    --form-bgcolor-high: rgba(6, 57, 88, 0.1);
+    --form-bgcolor-high-hover: rgba(6, 57, 88, 0.16);
+    --form-bgcolor-high-active: rgba(6, 57, 88, 0.2);
+    // 按钮样式
+    --button-border-radius: 8px;
+    --button-bgcolor: rgba(0, 0, 0, 0.022);
+    --button-text-color: #000;
+    --button-border: 1px rgba(0, 0, 0, 0.05) solid;
+}
+
+.dark {
+    // 通用样式
+    --border: 1px #eee solid;
+    --border-radius: 8px;
+    --font-bold: 800;
+    // 颜色
+    --bgcolor-body: #fff; // body背景
+    --color-text: rgb(33, 33, 33); // 全局文字颜色
+    --color-title: rgb(33, 33, 33); // 标题颜色
+    // 主题色
+    --color-primary-1: rgb(30 66 159 / 0.6);
+    --color-primary-2: rgb(30 66 159 / 0.8);
+    --color-primary-3: rgb(30 66 159 / 1);
+    --color-primary-1-hover: rgb(30 66 159 / 0.6);
+    --color-primary-2-active: rgb(30 66 159 / 0.8);
+    --color-primary-3-foucs: rgb(30 66 159 / 1);
+    //
+    --color-danger-1: rgb(159, 30, 30, 0.6);
+    --color-danger-2: rgb(159, 30, 30, 0.8);
+    --color-danger-3: rgb(159, 30, 30, 1);
+    --color-danger-1-hover: rgb(159, 30, 30, 0.6);
+    --color-danger-2-active: rgb(159, 30, 30, 0.8);
+    --color-danger-3-foucs: rgb(159, 30, 30, 1);
+}

package/src/components/demo/DemoBox.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { ChevronUp24Regular, Code24Regular } from '@vicons/fluent';
+import { Icon } from '@vicons/utils';
+import { LewTitle, LewBadge } from '../../components';
+import { ref } from 'vue';
+defineProps({
+    title: {
+        type: String,
+        default() {
+            return '';
+        },
+    },
+    badge: {
+        type: String,
+        default() {
+            return '';
+        },
+    },
+    code: {
+        type: String,
+        default() {
+            return '';
+        },
+    },
+});
+
+let isShowCode = ref(false);
+</script>
+
+<template>
+    <div class="demo-box">
+        <lew-title size="16px"
+            >{{ title }}
+            <lew-badge v-if="badge" style="margin: 2px 0px 0px 5px">{{
+                badge
+            }}</lew-badge>
+        </lew-title>
+        <div class="demo-item">
+            <div class="demo-cp"><slot></slot></div>
+            <div v-show="isShowCode" v-highlight class="hl-pre">
+                <div class="pre-box">
+                    <pre><code v-text="code"></code></pre>
+                </div>
+            </div>
+            <div class="show-bar" @click="isShowCode = !isShowCode">
+                <div class="icon">
+                    <Icon v-if="!isShowCode" size="20">
+                        <Code24Regular />
+                    </Icon>
+                    <Icon v-if="isShowCode" size="20">
+                        <ChevronUp24Regular />
+                    </Icon>
+                </div>
+
+                {{ isShowCode ? '关闭' : '显示源码' }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+.demo-box {
+    margin: 50px 0px 50px 0px;
+    .demo-item {
+        margin: 10px 0px;
+        background-color: #fff;
+        box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.08);
+        border-radius: 8px;
+    }
+    .hl-pre {
+        position: relative;
+        .pre-box {
+            margin-top: 10px;
+            border-radius: 8px;
+        }
+    }
+    .show-bar {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-top: 2px rgb(236, 236, 236) solid;
+        width: 100%;
+        height: 30px;
+        border-radius: 0px 0px 8px 8px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: all 0.15s;
+        .icon {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-right: 5px;
+        }
+    }
+    .show-bar:hover {
+        background-color: rgb(244, 244, 244);
+    }
+    .show-bar:active {
+        background-color: rgb(236, 236, 236);
+    }
+    .demo-cp {
+        padding: 30px;
+    }
+}
+</style>

package/src/components/directive/lewTooltips.ts

@@ -0,0 +1,23 @@
+import tippy from 'tippy.js';
+import 'tippy.js/dist/tippy.css'; // optional for styling
+import 'tippy.js/animations/shift-away-subtle.css';
+import 'tippy.js/dist/svg-arrow.css';
+import 'tippy.js/themes/light.css';
+
+export default {
+    install(app: any) {
+        app.directive('tooltip', {
+            mounted(el: any, binding: any) {
+                tippy(el, {
+                    theme: 'dark',
+                    trigger: binding.value.trigger,
+                    content: binding.value.content,
+                    animation: 'shift-away-subtle',
+                    interactive: true,
+                    appendTo: 'parent',
+                    placement: binding.value.placement,
+                });
+            },
+        });
+    },
+};

package/{components → src/components}/feedback/LewModal.vue

@@ -15,7 +15,7 @@
     </teleport>
 </template>
 <script lang="ts" setup name="Modal">
-import { useDOMCreate } from '@/packages/lew';
+import useDOMCreate from '../hooks/useDOMCreate';
 useDOMCreate('lew-modal');
 
 defineProps({

package/{components → src/components}/form/LewCheckboxGroup.vue

@@ -14,7 +14,7 @@
 
 <script lang="ts" setup>
 import { PropType } from 'vue';
-import { LewCheckbox } from '@/packages/lew';
+import LewCheckbox from './LewCheckbox.vue';
 type Options = {
     name: string;
     id: string | number;

package/{components → src/components}/form/LewRadioGroup.vue

@@ -13,7 +13,7 @@
 
 <script lang="ts" setup>
 import { PropType } from 'vue';
-import { LewRadio } from '@/packages/lew';
+import LewRadio from './LewRadio.vue';
 type Options = {
     name: string;
     id: string | number;

package/{components → src/components}/form/LewSelect.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { LewInput } from '@/packages/lew';
+import LewInput from './LewInput.vue';
 import { ref, PropType, onMounted } from 'vue';
 
 type Options = {

package/src/components/general/LewAvatar.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+defineProps({
+    round: {
+        type: Boolean,
+        default: false,
+    },
+    status: {
+        type: String,
+        default: '',
+    },
+    statusPosition: {
+        type: String,
+        default: '',
+    },
+    src: {
+        type: String,
+        default: '',
+    },
+    alt: {
+        type: String,
+        default: '',
+    },
+});
+</script>
+
+<template>
+    <div class="lew-avatar">
+        <img :src="src" :class="{ round: round }" :alt="alt" />
+        <span
+            v-if="status"
+            class="dot"
+            :class="`dot-${status} dot-${statusPosition}`"
+        >
+        </span>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.lew-avatar {
+    position: relative;
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+
+    img {
+        width: 100%;
+        height: 100%;
+        border-radius: 5px;
+    }
+
+    .round {
+        border-radius: 50%;
+    }
+
+    .dot {
+        position: absolute;
+        top: -0.25rem;
+        left: -0.25rem;
+        content: '';
+        width: 0.6rem;
+        height: 0.6rem;
+        border-radius: 50%;
+        z-index: 99;
+        border: 2px #fff solid;
+    }
+
+    .dot-online {
+        background-color: var(--success-color);
+    }
+
+    .dot-busy {
+        background-color: var(--danger-color);
+    }
+
+    .dot-offline {
+        background-color: var(--normal-color-dark);
+    }
+
+    .dot-away {
+        background-color: var(--warning-color);
+    }
+
+    .dot-top-left {
+        top: -0.25rem;
+        left: -0.25rem;
+    }
+
+    .dot-top-right {
+        top: -0.25rem;
+        left: auto;
+        right: -0.25rem;
+    }
+
+    .dot-bottom-left {
+        top: auto;
+        bottom: -0.25rem;
+        left: -0.25rem;
+    }
+
+    .dot-bottom-right {
+        top: auto;
+        bottom: -0.25rem;
+        left: auto;
+        right: -0.25rem;
+    }
+}
+</style>

package/src/components/hooks/useDOMCreate.ts

@@ -0,0 +1,13 @@
+// hooks/useDOMCreate.ts
+import { onUnmounted } from 'vue';
+
+function useDOMCreate(nodeId: string): void {
+    const node = document.createElement('div');
+    node.id = nodeId;
+    document.body.appendChild(node);
+    onUnmounted(() => {
+        document.body.removeChild(node);
+    });
+}
+
+export default useDOMCreate;

package/src/components/index.ts

@@ -0,0 +1,37 @@
+import LewAvatar from './general/LewAvatar.vue';
+import LewButton from './general/LewButton.vue';
+import LewBadge from './general/LewBadge.vue';
+import LewTitle from './general/LewTitle.vue';
+
+import LewFormItem from './form/LewFormItem.vue';
+import LewInput from './form/LewInput.vue';
+import LewSelect from './form/LewSelect.vue';
+import LewSwitch from './form/LewSwitch.vue';
+import LewTextarea from './form/LewTextarea.vue';
+import LewCheckbox from './form/LewCheckbox.vue';
+import LewCheckboxGroup from './form/LewCheckboxGroup.vue';
+import LewRadiobox from './form/LewRadio.vue';
+import LewRadioboxGroup from './form/LewRadioGroup.vue';
+import LewTabs from './form/LewTabs.vue';
+
+import LewAlert from './feedback/LewAlert.vue';
+import LewModal from './feedback/LewModal.vue';
+
+export {
+    LewButton,
+    LewFormItem,
+    LewInput,
+    LewSelect,
+    LewSwitch,
+    LewTitle,
+    LewTabs,
+    LewBadge,
+    LewAvatar,
+    LewTextarea,
+    LewCheckbox,
+    LewCheckboxGroup,
+    LewRadiobox,
+    LewRadioboxGroup,
+    LewAlert,
+    LewModal,
+};

package/src/components/layout/LewSiderbar.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { PropType } from 'vue';
+import { LewBadge } from '../index';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+type Item = {
+    name: string;
+    path: string;
+    label: string;
+    type: string;
+};
+
+type Group = {
+    title: string;
+    items: Item[];
+};
+
+defineProps({
+    group: {
+        type: Array as PropType<Group[]>,
+        default() {
+            return [];
+        },
+    },
+});
+
+const toPath = (item: Item) => {
+    router.push(item.path);
+};
+</script>
+
+<template>
+    <div class="siderbar btf-scrollbar">
+        <div v-for="(list, i) in group" :key="`group${i}`" class="group">
+            <div v-if="list.title" class="title">{{ list.title }}</div>
+            <div
+                v-for="(item, j) in list.items"
+                :key="`siderbar${j}`"
+                class="item"
+                @click="toPath(item)"
+            >
+                {{ item.name }}
+                <LewBadge
+                    style="margin-left: 10px"
+                    dot
+                    :type="item.type"
+                ></LewBadge>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.siderbar {
+    width: 250px;
+    height: 100%;
+    overflow-y: scroll;
+    border-right: 1px #eee solid;
+    padding-top: 10px;
+    .group {
+        white-space: nowrap;
+
+        .title {
+            padding: 10px 20px;
+            font-size: 14px;
+            color: #999;
+        }
+
+        .item {
+            position: relative;
+            height: 40px;
+            line-height: 40px;
+            padding-left: 25px;
+            box-sizing: border-box;
+            list-style: none;
+            width: calc(100% - 30px);
+            margin-left: 17px;
+            border-radius: var(--border-radius);
+            cursor: pointer;
+            font-size: 16px;
+        }
+
+        .item:hover {
+            background: #eee;
+        }
+    }
+
+    .group:last-child {
+        padding-bottom: 100px;
+    }
+}
+
+.title {
+    color: var(--text-color);
+}
+</style>

package/src/env.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue';
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+    const component: DefineComponent<{}, {}, any>;
+    export default component;
+}
+
+declare module 'highlight.js';
+declare const hljs;

package/src/main.ts

@@ -0,0 +1,22 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router/index';
+import './assets/style/reset.scss';
+import './assets/style/var.scss';
+import './assets/style/main.scss';
+import './assets/style/hljs.scss';
+const app = createApp(App);
+// 安装tooltip
+import tooltip from './components/directive/lewTooltips';
+
+// 自定义一个代码高亮指令
+app.directive('highlight', {
+    mounted(el) {
+        const blocks = el.querySelectorAll('pre code');
+        blocks.forEach((block: unknown) => {
+            hljs.highlightBlock(block);
+        });
+    },
+});
+app.use(tooltip);
+app.use(router).mount('#app');