npm - lew-ui - Versions diffs - 1.0.2 → 1.0.3 - Mend

lew-ui 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

package/.eslintignore +5 -0
package/.eslintrc.js +20 -0
package/README.md +16 -0
package/index.html +18 -0
package/package.json +19 -12
package/{components/base → packages/avatar}/LewAvatar.vue +0 -0
package/packages/avatar/index.ts +9 -0
package/{directives → packages/directives}/index.ts +0 -0
package/{directives → packages/directives}/tooltips.ts +0 -0
package/{hooks → packages/hooks}/index.ts +0 -0
package/{hooks → packages/hooks}/useDOMCreate.ts +0 -0
package/packages/index.ts +17 -0
package/prettier.config.js +38 -0
package/public/favicon.ico +0 -0
package/src/App.vue +251 -0
package/src/assets/logo.png +0 -0
package/src/assets/style/hljs.scss +86 -0
package/src/assets/style/main.scss +87 -0
package/src/assets/style/reset.scss +107 -0
package/src/assets/style/var.scss +90 -0
package/src/components/demo/DemoBox.vue +105 -0
package/src/components/directive/lewTooltips.ts +23 -0
package/{components → src/components}/feedback/LewAlert.vue +0 -0
package/{components → src/components}/feedback/LewMessage.vue +0 -0
package/{components → src/components}/feedback/LewModal.vue +1 -1
package/{components → src/components}/form/LewCheckbox.vue +0 -0
package/{components → src/components}/form/LewCheckboxGroup.vue +1 -1
package/{components/form/FormItem.vue → src/components/form/LewFormItem.vue} +0 -0
package/{components → src/components}/form/LewInput.vue +0 -0
package/{components → src/components}/form/LewRadio.vue +0 -0
package/{components → src/components}/form/LewRadioGroup.vue +1 -1
package/{components → src/components}/form/LewSelect.vue +1 -1
package/{components → src/components}/form/LewSwitch.vue +0 -0
package/{components → src/components}/form/LewTabs.vue +0 -0
package/{components → src/components}/form/LewTextarea.vue +0 -0
package/src/components/general/LewAvatar.vue +107 -0
package/{components/base → src/components/general}/LewBadge.vue +0 -0
package/{components/base → src/components/general}/LewButton.vue +0 -0
package/{components/base → src/components/general}/LewTitle.vue +0 -0
package/src/components/hooks/useDOMCreate.ts +13 -0
package/src/components/index.ts +37 -0
package/src/components/layout/LewSiderbar.vue +98 -0
package/src/env.d.ts +11 -0
package/src/main.ts +22 -0
package/src/router/index.ts +59 -0
package/src/views/demo/feedback/LewAlert.vue +194 -0
package/src/views/demo/feedback/LewDialog.vue +20 -0
package/src/views/demo/feedback/LewMessage.vue +20 -0
package/src/views/demo/feedback/LewModal.vue +127 -0
package/src/views/demo/feedback/LewPopover.vue +20 -0
package/src/views/demo/feedback/LewResult.vue +20 -0
package/src/views/demo/feedback/LewTooltip.vue +164 -0
package/src/views/demo/form/LewCascader.vue +24 -0
package/src/views/demo/form/LewCheckbox.vue +158 -0
package/src/views/demo/form/LewForm.vue +232 -0
package/src/views/demo/form/LewInput.vue +55 -0
package/src/views/demo/form/LewInputTag.vue +25 -0
package/src/views/demo/form/LewRadio.vue +104 -0
package/src/views/demo/form/LewSelect.vue +83 -0
package/src/views/demo/form/LewSwitch.vue +61 -0
package/src/views/demo/form/LewTabs.vue +75 -0
package/src/views/demo/form/LewTextarea.vue +56 -0
package/src/views/demo/general/LewAvatar copy.vue +58 -0
package/src/views/demo/general/LewAvatar.vue +79 -0
package/src/views/demo/general/LewBadge.vue +98 -0
package/src/views/demo/general/LewButton.vue +66 -0
package/src/views/demo/general/LewTitle.vue +47 -0
package/tsconfig.json +18 -0
package/tsconfig.node.json +8 -0
package/vite.config.ts +16 -0
package/vscode.setting.json +26 -0
package/components/index.ts +0 -35
package/index.ts +0 -3

package/.eslintignore ADDED Viewed

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+index.html
+prettier.config.js
+.eslintrc.js

package/.eslintrc.js ADDED Viewed

@@ -0,0 +1,20 @@
+module.exports = {
+    parser: 'vue-eslint-parser',
+    parserOptions: {
+        parser: '@typescript-eslint/parser',
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        ecmaFeatures: {
+            jsx: true,
+        },
+    },
+    extends: [
+        'plugin:vue/vue3-recommended',
+        'plugin:@typescript-eslint/recommended',
+        'prettier',
+        'plugin:prettier/recommended',
+    ],
+    rules: {
+        // override/add rules settings here, such as:
+    },
+};

package/README.md ADDED Viewed

@@ -0,0 +1,16 @@
+# Vue 3 + TypeScript + Vite
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+## Recommended IDE Setup
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
+## Type Support For `.vue` Imports in TS
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:
+1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
+2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
+You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).

package/index.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="https://cdn.bootcss.com/highlight.js/11.5.1/styles/atom-one-dark.min.css" rel="stylesheet" />
+    <script src="https://cdn.bootcss.com/highlight.js/11.5.1/highlight.min.js"></script>
+    <title>Lew Design</title>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+</body>
+</html>

package/package.json CHANGED Viewed

@@ -1,25 +1,32 @@
 {
     "name": "lew-ui",
-    "version": "1.0.2",
-    "description": "A Component Library for Vue 3",
-    "keywords": [
-        "component library",
-        "ui framework",
-        "ui",
-        "vue3",
-        "mini"
-    ],
-    "homepage": "https://lew.kamtao.com",
-    "main": "lib/index.js",
+    "version": "1.0.3",
+    "description": "A Component Library for Vue3.js.",
+    "main": "./dist/lew.umd.min.js",
+    "scripts": {
+        "dev": "vite",
+        "build": "vue-tsc --noEmit && vite build",
+        "preview": "vite preview",
+        "eslint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
+        "prettier": "prettier --write"
+    },
     "dependencies": {
         "tippy.js": "^6.3.7",
-        "vue": "^3.2.25"
+        "vue": "^3.2.25",
+        "vue-router": "^4.0.13"
     },
     "devDependencies": {
         "@types/node": "^17.0.35",
+        "@typescript-eslint/eslint-plugin": "^5.26.0",
+        "@typescript-eslint/parser": "^5.26.0",
         "@vicons/fluent": "^0.12.0",
         "@vicons/utils": "^0.1.4",
         "@vitejs/plugin-vue": "^2.3.3",
+        "eslint": "^8.16.0",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-prettier": "^4.0.0",
+        "eslint-plugin-vue": "^9.0.1",
+        "prettier": "^2.6.2",
         "sass": "^1.52.1",
         "typescript": "^4.5.4",
         "vite": "^2.9.9",

package/{components/base → packages/avatar}/LewAvatar.vue RENAMED Viewed

File without changes

package/packages/avatar/index.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { App } from 'vue';
+import LewAvatar from './LewAvatar.vue'; // 导入组件
+LewAvatar.install = (app: App) => {
+    // 组件install属性
+    app.component(LewAvatar.name, LewAvatar); // 定义组件-vue3的写法
+};
+export default LewAvatar;

package/{directives → packages/directives}/index.ts RENAMED Viewed

File without changes

package/{directives → packages/directives}/tooltips.ts RENAMED Viewed

File without changes

package/{hooks → packages/hooks}/index.ts RENAMED Viewed

File without changes

package/{hooks → packages/hooks}/useDOMCreate.ts RENAMED Viewed

File without changes

package/packages/index.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import { App } from 'vue';
+import LewButton from './avatar/';
+const components = [LewButton];
+const install = (app: App) => {
+    components.forEach((item) => {
+        app.component(item.name, item);
+    });
+};
+export default {
+    // 全局导出
+    version: '1.0.1',
+    install,
+    LewButton,
+};

package/prettier.config.js ADDED Viewed

@@ -0,0 +1,38 @@
+module.exports = {
+    // 一行最多 80 字符
+    printWidth: 80,
+    // 使用 4 个空格缩进
+    tabWidth: 4,
+    // 不使用 tab 缩进，而使用空格
+    useTabs: false,
+    // 行尾需要有分号
+    semi: true,
+    // 使用单引号代替双引号
+    singleQuote: true,
+    // 对象的 key 仅在必要时用引号
+    quoteProps: 'as-needed',
+    // jsx 不使用单引号，而使用双引号
+    jsxSingleQuote: false,
+    // 末尾使用逗号
+    trailingComma: 'all',
+    // 大括号内的首尾需要空格 { foo: bar }
+    bracketSpacing: true,
+    // jsx 标签的反尖括号需要换行
+    jsxBracketSameLine: false,
+    // 箭头函数，只有一个参数的时候，也需要括号
+    arrowParens: 'always',
+    // 每个文件格式化的范围是文件的全部内容
+    rangeStart: 0,
+    rangeEnd: Infinity,
+    // 不需要写文件开头的 @prettier
+    requirePragma: false,
+    // 不需要自动在文件开头插入 @prettier
+    insertPragma: false,
+    // 使用默认的折行标准
+    proseWrap: 'preserve',
+    // 根据显示样式决定 html 要不要折行
+    htmlWhitespaceSensitivity: 'css',
+    // 换行符使用 lf
+    endOfLine: 'auto',
+};

package/public/favicon.ico ADDED Viewed

Binary file

package/src/App.vue ADDED Viewed

@@ -0,0 +1,251 @@
+<script setup lang="ts">
+import TheSiderbar from './components/layout/LewSiderbar.vue';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+const router = useRouter();
+type Item = {
+    name: string;
+    path: string;
+    label: string;
+    type: string;
+};
+type Group = {
+    title: string;
+    items: Item[];
+};
+let group = ref<Group[]>([]);
+group.value = [
+    {
+        title: '通用',
+        items: [
+            {
+                name: 'Avatar',
+                path: '/Avatar',
+                label: '',
+                type: 'success',
+            },
+            {
+                name: 'Button',
+                path: '/Button',
+                label: '',
+                type: 'success',
+            },
+            {
+                name: 'Badge',
+                path: '/Badge',
+                label: '',
+                type: 'success',
+            },
+            {
+                name: 'Title',
+                path: '/Title',
+                label: '',
+                type: 'success',
+            },
+        ],
+    },
+    {
+        title: '表单',
+        items: [
+            {
+                name: 'Form',
+                path: '/Form',
+                label: '',
+                type: 'success',
+            },
+            {
+                name: 'Input',
+                path: '/Input',
+                label: '',
+                type: 'success',
+            },
+            {
+                name: 'Textarea',
+                path: '/Textarea',
+                label: '',
+                type: 'success',
+            },
+            {
+                name: 'Checkbox',
+                path: '/Checkbox',
+                label: '',
+                type: 'success',
+            },
+            {
+                name: 'Radio',
+                path: '/Radio',
+                label: '',
+                type: 'success',
+            },
+            {
+                name: 'Tabs',
+                path: '/Tabs',
+                label: '',
+                type: 'success',
+            },
+            {
+                name: 'Select',
+                path: '/Select',
+                label: '',
+                type: 'success',
+            },
+            // {
+            //     name: 'Cascader',
+            //     path: '/Cascader',
+            //     label: '',
+            //     type: 'danger',
+            // },
+            {
+                name: 'Switch',
+                path: '/Switch',
+                label: '',
+                type: 'success',
+            },
+            // {
+            //     name: 'InputTag',
+            //     path: '/InputTag',
+            //     label: '',
+            //     type: 'danger',
+            // },
+        ],
+    },
+    {
+        title: '反馈',
+        items: [
+            {
+                name: 'Alert',
+                path: '/Alert',
+                label: '',
+                type: 'success',
+            },
+            {
+                name: 'Dialog',
+                path: '/Dialog',
+                label: '',
+                type: 'danger',
+            },
+            {
+                name: 'Message',
+                path: '/Message',
+                label: '',
+                type: 'danger',
+            },
+            {
+                name: 'Modal',
+                path: '/Modal',
+                label: '',
+                type: 'success',
+            },
+            {
+                name: 'Popover',
+                path: '/Popover',
+                label: '',
+                type: 'danger',
+            },
+            {
+                name: 'Tooltip',
+                path: '/Tooltip',
+                label: '',
+                type: 'success',
+            },
+            {
+                name: 'Result',
+                path: '/Result',
+                label: '',
+                type: 'danger',
+            },
+        ],
+    },
+];
+const toPath = (path: string) => {
+    router.push(path);
+};
+</script>
+<template>
+    <div class="wrapper">
+        <div class="Header">
+            <div class="logo">Lew Design</div>
+            <div class="menu">
+                <div @click="toPath(`/`)">组件库</div>
+                <a target="_blank" href="https://github.com/lewkamtao/Lew-UI"
+                    >Github</a
+                >
+            </div>
+        </div>
+        <div class="container">
+            <div class="sider">
+                <TheSiderbar :group="group" />
+            </div>
+            <div class="app-main btf-scrollbar">
+                <router-view></router-view>
+            </div>
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+.wrapper {
+    max-width: 1280px;
+    margin: 0 auto;
+    overflow: hidden;
+    background: var(--body-bgcolor);
+    border-left: 1px #eee solid;
+    border-right: 1px #eee solid;
+    .container {
+        height: calc(100vh - 60px);
+        display: flex;
+    }
+    .sider {
+        position: fixed;
+        height: calc(100vh - 60px);
+    }
+    .app-main {
+        margin-left: 250px;
+        width: calc(100% - 250px);
+        height: calc(100vh - 60px);
+        overflow-y: scroll;
+        box-sizing: border-box;
+        padding: 50px;
+        background-color: rgb(242, 242, 242);
+    }
+    .Header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0px 30px;
+        width: 100%;
+        height: 60px;
+        box-sizing: border-box;
+        border-bottom: 1px #eee solid;
+        background: var(--body-bgcolor);
+        .logo {
+            font-size: 20px;
+            font-weight: bold;
+        }
+        .menu {
+            a,
+            div {
+                display: inline-block;
+                margin: 10px;
+                padding: 10px;
+                opacity: 0.6;
+                cursor: pointer;
+            }
+            a:hover,
+            div:hover {
+                opacity: 1;
+            }
+        }
+    }
+}
+</style>

package/src/assets/logo.png ADDED Viewed

Binary file

package/src/assets/style/hljs.scss ADDED Viewed

@@ -0,0 +1,86 @@
+/*
+Atom One Light by Daniel Gamage
+Original One Light Syntax theme from https://github.com/atom/one-light-syntax
+*/
+.hljs {
+    color: #b3b3b3;
+    background: #333;
+    padding: 35px !important;
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    letter-spacing: 0.5px;
+}
+.hljs-tag {
+    line-height: 22px;
+}
+.hljs-comment,
+.hljs-quote {
+    color: #84b081;
+    font-style: italic;
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-formula {
+    color: #a626a4;
+}
+.hljs-section,
+.hljs-name,
+.hljs-selector-tag,
+.hljs-deletion,
+.hljs-subst {
+    color: rgb(78, 207, 176);
+}
+.hljs-literal {
+    color: #0184bb;
+}
+.hljs-string,
+.hljs-regexp,
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta .hljs-string {
+    color: #ef8a7f;
+}
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-type,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-number {
+    color: #00c3ff;
+}
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-title {
+    color: #4078f2;
+}
+.hljs-built_in,
+.hljs-title .class_,
+.hljs-class .hljs-title {
+    color: #c18401;
+}
+.hljs-emphasis {
+    font-style: italic;
+}
+.hljs-strong {
+    font-weight: bold;
+}
+.hljs-link {
+    text-decoration: underline;
+}

package/src/assets/style/main.scss ADDED Viewed

@@ -0,0 +1,87 @@
+body {
+    color: var(--text-color);
+    background-color: rgb(214, 214, 214);
+    overflow: hidden;
+}
+#alert-box {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    z-index: 99;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 20px;
+    transition: all 0.1s;
+    .alert {
+        width: auto;
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: flex-start;
+        height: 40px;
+        line-height: 40px;
+        padding: 15px 25px;
+        transition: all 0.2s;
+        opacity: 0;
+        margin-top: 0px;
+        transform: translateY(-5px);
+        white-space: nowrap;
+        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.05);
+        font-size: 14px;
+        border-radius: 7px;
+        box-sizing: border-box;
+        border: var(--border-width) rgb(230, 230, 230) solid;
+        margin-bottom: 10px;
+    }
+    .alert-danger {
+        background-color: #fceded;
+        color: rgb(141, 47, 47);
+    }
+    .alert-success {
+        background-color: rgb(245, 253, 248);
+        color: rgb(52, 71, 46);
+    }
+    .alert-warning {
+        background-color: rgb(255, 253, 247);
+        color: rgb(206, 131, 69);
+    }
+    .icon {
+        width: 20px;
+        height: 20px;
+        margin-right: 10px;
+    }
+    .alert-show {
+        opacity: 1;
+        transform: translateY(0px);
+        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
+    }
+    .alert-hidden {
+        opacity: 0;
+        margin-top: -60px;
+    }
+}
+.btf-scrollbar::-webkit-scrollbar {
+    background-color: rgb(126, 126, 126, 0);
+    width: 5px;
+    height: 5px;
+}
+.btf-scrollbar::-webkit-scrollbar-thumb:hover {
+    background-color: rgb(126, 126, 126);
+}
+.btf-scrollbar::-webkit-scrollbar-thumb {
+    background-color: rgb(209 213 219 / 0);
+    opacity: 0;
+    border-radius: 5px;
+}
+.btf-scrollbar:hover::-webkit-scrollbar-thumb {
+    background-color: rgb(209 213 219 / 0.3);
+    opacity: 1;
+    border-radius: 5px;
+}