lew-ui 1.0.2 → 1.0.3

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

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import DemoBox from '../../../components/demo/DemoBox.vue';
+import { LewTitle, LewSwitch } from '../../../components';
+
+let value = ref(false);
+
+const change = (e: unknown) => {
+    console.log(e);
+    console.log(value.value);
+};
+
+let pre1 = ref(`<script setup lang="ts">
+import { ref } from 'vue';
+import { LewSwitch } from '../../../components';
+
+let value = ref(false);
+
+const change = (e: any) => {
+    console.log(e);
+    console.log(value.value);
+};
+<\/script>
+
+<template>
+    <LewSwitch v-model="value" @change="change"></LewSwitch>
+</template>
+`);
+let pre2 = ref(`<script setup lang="ts">
+import { ref } from 'vue';
+import { LewSwitch } from '../../../components';
+
+let value = ref(false);
+
+const change = (e: any) => {
+    console.log(e);
+    console.log(value.value);
+};
+<\/script>
+
+<template>
+    <LewSwitch v-model="value" :round="false" @change="change"></LewSwitch>
+</template>
+`);
+</script>
+
+<template>
+    <div class="demo-wrapper">
+        <lew-title>Switch</lew-title>
+        <demo-box title="圆的" :code="pre1">
+            <LewSwitch v-model="value" @change="change"></LewSwitch>
+        </demo-box>
+        <demo-box title="方的" :code="pre2">
+            <LewSwitch
+                v-model="value"
+                :round="false"
+                @change="change"
+            ></LewSwitch>
+        </demo-box>
+    </div>
+</template>

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

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import DemoBox from '../../../components/demo/DemoBox.vue';
+import { LewTitle, LewTabs } from '../../../components';
+
+const options = ref([
+    { label: '北京', value: '1' },
+    { label: '上海', value: '2' },
+    { label: '广州', value: '3' },
+    { label: '深圳', value: '4' },
+    { label: '乌鲁木齐', value: '5' },
+]);
+
+let value = ref('');
+
+type Options = {
+    label: string;
+    value: string;
+    activeIndex: number;
+};
+
+const change = (e: Options) => {
+    console.log(e);
+};
+
+let pre1 = ref(`<script setup lang="ts">
+import { ref } from 'vue';
+import { LewTabs } from '../../../components';
+
+const options = ref([
+    { label: '北京', value: '1' },
+    { label: '上海', value: '2' },
+    { label: '广州', value: '3' },
+    { label: '深圳', value: '4' },
+    { label: '乌鲁木齐', value: '5' },
+]);
+
+let value = ref('');
+
+type Options = {
+    label: string;
+    value: string;
+    activeIndex: number;
+};
+
+const change = (e: Options) => {
+    console.log(e);
+};
+<\/script>
+
+<template>
+    <div style="width: 450px">
+        <lew-tabs
+            v-model="value"
+            :options="options"
+            @update:change="change"
+        ></lew-tabs>
+    </div>
+</template>
+`);
+</script>
+
+<template>
+    <div class="demo-wrapper">
+        <lew-title>Tabs</lew-title>
+        <demo-box title="常规" :code="pre1">
+            <div style="width: 450px">
+                <lew-tabs
+                    v-model="value"
+                    :options="options"
+                    @update:change="change"
+                ></lew-tabs></div
+        ></demo-box>
+    </div>
+</template>

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import DemoBox from '../../../components/demo/DemoBox.vue';
+import { ref } from 'vue';
+import { LewTitle, LewFormItem, LewTextarea } from '../../../components';
+let pre1 = ref(`<template>
+    <div style="width: 300px">
+        <lew-form-item title="账号">
+            <LewTextarea resize="vertical"/>
+        </lew-form-item>
+    </div>
+</template>
+`);
+let pre2 = ref(`<template>
+    <div style="width: 300px">
+        <lew-form-item title="账号">
+            <LewTextarea resize="vertical" />
+        </lew-form-item>
+    </div>
+</template>
+`);
+let pre3 = ref(`<template>
+    <div style="width: 300px">
+        <lew-form-item title="账号">
+            <LewTextarea resize="none" />
+        </lew-form-item>
+    </div>
+</template>
+`);
+</script>
+
+<template>
+    <div class="demo-wrapper">
+        <lew-title>Textera</lew-title>
+        <demo-box title="x 布局" :code="pre1">
+            <div style="width: 300px">
+                <lew-form-item title="账号">
+                    <LewTextarea resize="vertical" />
+                </lew-form-item>
+            </div>
+        </demo-box>
+        <demo-box title="y 布局" :code="pre2">
+            <div style="width: 300px">
+                <lew-form-item title="账号" direction="y">
+                    <LewTextarea resize="vertical" />
+                </lew-form-item>
+            </div>
+        </demo-box>
+        <demo-box title="禁止缩放" :code="pre3">
+            <div style="width: 300px">
+                <lew-form-item title="账号">
+                    <LewTextarea resize="none" />
+                </lew-form-item>
+            </div>
+        </demo-box>
+    </div>
+</template>

package/src/views/demo/general/LewAvatar copy.vue

@@ -0,0 +1,58 @@
+<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"
+        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>
+</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/general/LewAvatar.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import DemoBox from '../../../components/demo/DemoBox.vue';
+import { LewTitle, LewAvatar } from '../../../components';
+
+import { ref } from 'vue';
+
+let avatarUrl = ref(
+    'https://cdn.jsdelivr.net/gh/lewkamtao/PicHub-Cloud@master/PicHub/1fb3f5f5bf661efd985d940004b3642_pyapiq_.jpeg',
+);
+
+let pre1 = ref(`<template>
+    <lew-avatar style="margin-right: 20px" :src="avatarUrl" alt="avatar" />
+    <lew-avatar style="margin-right: 20px" round :src="avatarUrl" alt="avatar" />
+</template>`);
+
+let pre2 = ref(`<template> 
+    <lew-avatar :src="avatarUrl" status="online" status-position="top-left" />
+    <lew-avatar :src="avatarUrl" status="busy" status-position="top-right" />
+    <lew-avatar
+        :src="avatarUrl" 
+        round 
+        status="away"
+        status-position="bottom-left"
+    />
+    <lew-avatar
+        :src="avatarUrl"
+        round
+        status="offline"
+        status-position="bottom-right"
+    />
+</template>
+`);
+</script>
+
+<template>
+    <div class="demo-wrapper">
+        <lew-title>Avatar</lew-title>
+        <demo-box title="普通" :code="pre1">
+            <lew-avatar
+                style="margin-right: 20px"
+                :src="avatarUrl"
+                alt="avatar" />
+            <lew-avatar
+                style="margin-right: 20px"
+                round
+                :src="avatarUrl"
+                alt="avatar"
+        /></demo-box>
+        <demo-box title="普通" :code="pre2">
+            <lew-avatar
+                style="margin-right: 20px"
+                :src="avatarUrl"
+                status="online"
+                status-position="top-left" />
+            <lew-avatar
+                style="margin-right: 20px"
+                :src="avatarUrl"
+                status="busy"
+                status-position="top-right" />
+            <lew-avatar
+                style="margin-right: 20px"
+                :src="avatarUrl"
+                round
+                status="away"
+                status-position="bottom-left" />
+            <lew-avatar
+                :src="avatarUrl"
+                round
+                status="offline"
+                status-position="bottom-right"
+        /></demo-box>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.lew-avatar {
+    margin: 10px;
+}
+</style>

package/src/views/demo/general/LewBadge.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import DemoBox from '../../../components/demo/DemoBox.vue';
+import { LewTitle, LewBadge } from '../../../components';
+import { ref } from 'vue';
+let pre1 = ref(`<template>
+    <lew-badge type="primary">primary</lew-badge>
+    <lew-badge type="success">success</lew-badge>
+    <lew-badge type="danger">danger</lew-badge>
+    <lew-badge type="warning">waning</lew-badge>
+    <lew-badge type="normal">normal</lew-badge>
+</template>
+`);
+let pre2 = ref(`<template>
+    <lew-badge round type="primary">primary</lew-badge>
+    <lew-badge round type="success">success</lew-badge>
+    <lew-badge round type="danger">danger</lew-badge>
+    <lew-badge round type="warning">waning</lew-badge>
+    <lew-badge round type="normal">normal</lew-badge>
+</template>
+`);
+let pre3 = ref(`<template>
+    <lew-badge round :bold="700" type="primary">primary</lew-badge>
+    <lew-badge round :bold="700" type="success">success</lew-badge>
+    <lew-badge round :bold="700" type="danger">danger</lew-badge>
+    <lew-badge round :bold="700" type="warning">waning</lew-badge>
+    <lew-badge round :bold="700" type="normal">normal</lew-badge> 
+    <lew-badge round :bold="700" type="primary">15</lew-badge>
+    <lew-badge round :bold="700" type="danger">99+</lew-badge>
+    <lew-badge round :bold="700" type="success">3</lew-badge>
+</template>
+`);
+let pre4 = ref(`<template>
+    <lew-badge round type="primary" href="/button">BUTTON</lew-badge>
+    <lew-badge round type="normal" href="https://vuejs.org/">Vue</lew-badge>
+</template>
+`);
+let pre5 = ref(`<template>
+    <lew-badge round dot type="normal"></lew-badge>
+    <lew-badge round dot type="primary"></lew-badge>
+    <lew-badge round dot type="success"></lew-badge>
+    <lew-badge round dot type="warning"></lew-badge>
+    <lew-badge round dot type="danger"></lew-badge>
+</template>
+`);
+</script>
+
+<template>
+    <div class="demo-wrapper">
+        <lew-title>Badge</lew-title>
+        <demo-box title="普通" :code="pre1">
+            <lew-badge type="primary">primary</lew-badge>
+            <lew-badge type="success">success</lew-badge>
+            <lew-badge type="danger">danger</lew-badge>
+            <lew-badge type="warning">waning</lew-badge>
+            <lew-badge type="normal">normal</lew-badge>
+        </demo-box>
+        <demo-box title="圆形" :code="pre2">
+            <lew-badge round type="primary">primary</lew-badge>
+            <lew-badge round type="success">success</lew-badge>
+            <lew-badge round type="danger">danger</lew-badge>
+            <lew-badge round type="warning">waning</lew-badge>
+            <lew-badge round type="normal">normal</lew-badge>
+        </demo-box>
+        <demo-box title="粗的" :code="pre3">
+            <lew-badge round :bold="700" type="primary">primary</lew-badge>
+            <lew-badge round :bold="700" type="success">success</lew-badge>
+            <lew-badge round :bold="700" type="danger">danger</lew-badge>
+            <lew-badge round :bold="700" type="warning">waning</lew-badge>
+            <lew-badge round :bold="700" type="normal">normal</lew-badge>
+            <lew-badge round :bold="700" type="primary">15</lew-badge>
+            <lew-badge round :bold="700" type="danger">99+</lew-badge>
+            <lew-badge round :bold="700" type="success">3</lew-badge>
+        </demo-box>
+        <demo-box title="链接" :code="pre4">
+            <lew-badge round type="primary" href="/button">BUTTON</lew-badge>
+            <lew-badge round type="normal" href="https://vuejs.org/"
+                >Vue</lew-badge
+            >
+        </demo-box>
+        <demo-box title="点" :code="pre5">
+            <lew-badge round dot type="normal"></lew-badge>
+            <lew-badge round dot type="primary"></lew-badge>
+            <lew-badge round dot type="success"></lew-badge>
+            <lew-badge round dot type="warning"></lew-badge>
+            <lew-badge round dot type="danger"></lew-badge>
+        </demo-box>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+    width: 100%;
+    margin: 0 auto;
+    > div {
+        margin-bottom: 40px;
+    }
+}
+</style>

package/src/views/demo/general/LewButton.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import DemoBox from '../../../components/demo/DemoBox.vue';
+import { LewTitle, LewButton } from '../../../components';
+import { ref } from 'vue';
+let pre1 = ref(`<template>
+    <lew-button type="primary">确定</lew-button>
+    <lew-button type="danger">危险</lew-button>
+    <lew-button type="warning">警告</lew-button>
+    <lew-button type="normal">这是一个长按钮</lew-button>
+    <lew-button type="success">确定</lew-button>
+</template>
+`);
+let pre2 = ref(`<template>
+    <lew-button round type="primary">确定</lew-button>
+    <lew-button round type="danger">危险</lew-button>
+    <lew-button round type="warning">警告</lew-button>
+    <lew-button round type="normal">这是一个长按钮</lew-button>
+    <lew-button round type="success">确定</lew-button>
+</template>
+`);
+let pre3 = ref(`<template>
+    <lew-button type="primary" loading>确定</lew-button>
+    <lew-button type="success" round loading>确定</lew-button>
+</template>
+`);
+let pre4 = ref(`<template>
+    <lew-button type="success" loading disabled>确定</lew-button>
+</template>
+`);
+</script>
+
+<template>
+    <div class="demo-wrapper">
+        <lew-title>Button</lew-title>
+
+        <demo-box title="普通" :code="pre1">
+            <lew-button type="primary">确定</lew-button>
+            <lew-button type="danger">危险</lew-button>
+            <lew-button type="warning">警告</lew-button>
+            <lew-button type="normal">这是一个长按钮</lew-button>
+            <lew-button type="success">确定</lew-button></demo-box
+        >
+        <demo-box title="圆型" :code="pre2">
+            <lew-button round type="primary">确定</lew-button>
+            <lew-button round type="danger">危险</lew-button>
+            <lew-button round type="warning">警告</lew-button>
+            <lew-button round type="normal">这是一个长按钮</lew-button>
+            <lew-button round type="success">确定</lew-button></demo-box
+        >
+        <demo-box title="加载" :code="pre3">
+            <lew-button type="primary" loading>确定</lew-button>
+            <lew-button type="success" round loading>确定</lew-button></demo-box
+        >
+        <demo-box title="禁用" :code="pre4">
+            <lew-button type="success" loading disabled
+                >确定</lew-button
+            ></demo-box
+        >
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.lew-button {
+    margin: 10px;
+}
+</style>

package/src/views/demo/general/LewTitle.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import DemoBox from '../../../components/demo/DemoBox.vue';
+import { LewTitle } from '../../../components';
+import { ref } from 'vue';
+let pre1 = ref(`<template>
+    <lew-title :bold="400" size="14px">14px 常规</lew-title>
+    <lew-title :bold="400" size="16px">16px 常规</lew-title>
+    <lew-title :bold="400" size="18px">18px 常规</lew-title>
+    <lew-title :bold="400" size="22px">22px 常规</lew-title>
+    <lew-title :bold="400" size="26px">26px 常规</lew-title>
+</template>
+`);
+let pre2 = ref(`<template>
+    <lew-title size="14px" :bold="800">14px 粗体</lew-title>
+    <lew-title size="16px" :bold="800">16px 粗体</lew-title>
+    <lew-title size="18px" :bold="800">18px 粗体</lew-title>
+    <lew-title size="22px" :bold="800">22px 粗体</lew-title>
+    <lew-title size="26px" :bold="800">26px 粗体</lew-title>
+</template>
+`);
+</script>
+
+<template>
+    <div class="demo-wrapper">
+        <lew-title>Title</lew-title>
+        <demo-box title="普通" :code="pre1">
+            <lew-title :bold="400" size="14px">14px 常规</lew-title>
+            <lew-title :bold="400" size="16px">16px 常规</lew-title>
+            <lew-title :bold="400" size="18px">18px 常规</lew-title>
+            <lew-title :bold="400" size="22px">22px 常规</lew-title>
+            <lew-title :bold="400" size="26px">26px 常规</lew-title></demo-box
+        >
+        <demo-box title="粗体" :code="pre2">
+            <lew-title size="14px" :bold="800">14px 粗体</lew-title>
+            <lew-title size="16px" :bold="800">16px 粗体</lew-title>
+            <lew-title size="18px" :bold="800">18px 粗体</lew-title>
+            <lew-title size="22px" :bold="800">22px 粗体</lew-title>
+            <lew-title size="26px" :bold="800">26px 粗体</lew-title></demo-box
+        >
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.lew-title {
+    margin-bottom: 20px;
+}
+</style>

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/components/feedback/directive.js"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "module": "esnext",
+        "moduleResolution": "node"
+    },
+    "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import * as path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    resolve: {
+        //设置别名
+        alias: {
+            '@': path.resolve(__dirname, 'src'),
+        },
+        // 忽略后缀名的配置选项, 添加 .vue 选项时要记得原本默认忽略的选项也要手动写入
+        extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
+    },
+    plugins: [vue()],
+});

package/vscode.setting.json

@@ -0,0 +1,26 @@
+{
+    "[vue]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[json]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+
+    "editor.rulers": [],
+    "[jsonc]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "eslint.nodePath": "",
+    "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "eslint.nodeEnv": "",
+    "explorer.confirmDelete": false,
+    "workbench.iconTheme": "vscode-icons",
+    "[typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "settingsSync.ignoredSettings": [],
+    "git.enableSmartCommit": true,
+    "editor.codeActionsOnSave": {}
+}

package/components/index.ts

@@ -1,35 +0,0 @@
-import LewAvatar from './base/Avatar.vue';
-import LewButton from './base/Button.vue';
-import LewBadge from './base/Badge.vue';
-import LewTitle from './base/Title.vue';
-import LewFormItem from './form/FormItem.vue';
-import LewInput from './form/Input.vue';
-import LewSelect from './form/Select.vue';
-import LewSwitch from './form/Switch.vue';
-import LewTextarea from './form/Textarea.vue';
-import LewCheckbox from './form/Checkbox.vue';
-import LewCheckboxGroup from './form/CheckboxGroup.vue';
-import LewRadio from './form/Radio.vue';
-import LewRadioGroup from './form/RadioGroup.vue';
-import LewTabs from './form/Tabs.vue';
-import LewAlert from './feedback/Alert.vue';
-import LewModal from './feedback/Modal.vue';
-
-export {
-    LewButton,
-    LewFormItem,
-    LewInput,
-    LewSelect,
-    LewSwitch,
-    LewTitle,
-    LewTabs,
-    LewBadge,
-    LewAvatar,
-    LewTextarea,
-    LewCheckbox,
-    LewCheckboxGroup,
-    LewRadio,
-    LewRadioGroup,
-    LewAlert,
-    LewModal,
-};

package/index.ts

@@ -1,3 +0,0 @@
-export * from './components';
-export * from './directives';
-export * from './hooks';