lew-ui 1.0.2 → 1.0.3

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

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import DemoBox from '../../../components/demo/DemoBox.vue';
+import { ref } from 'vue';
+import { LewTitle, LewCheckboxGroup } from '../../../components';
+
+let options = ref([
+    { name: '宋朝', id: 1 },
+    { name: '唐朝', id: 2 },
+    { name: '明朝', id: 3 },
+    { name: '清朝', id: 4 },
+]);
+
+let value = ref([]);
+
+let pre1 = ref(`<script setup lang="ts">
+import { ref } from 'vue';
+import { LewCheckboxGroup } from '../../../components';
+// 定义选项
+let options = ref([
+    { name: '宋朝', id: 1 },
+    { name: '唐朝', id: 2 },
+    { name: '明朝', id: 3 },
+    { name: '清朝', id: 4 },
+]);
+// 值
+let value = ref([]);
+<\/script>
+
+<template>
+    <lew-checkbox-group
+        v-model="value"
+        direction="x"
+        :options="options"
+    ></lew-checkbox-group>
+</template>
+`);
+let pre2 = ref(`<script setup lang="ts">
+import { ref } from 'vue';
+import { LewCheckboxGroup } from '../../../components';
+// 定义选项
+let options = ref([
+    { name: '宋朝', id: 1 },
+    { name: '唐朝', id: 2 },
+    { name: '明朝', id: 3 },
+    { name: '清朝', id: 4 },
+]);
+// 值
+let value = ref([]);
+<\/script>
+
+<template>
+    <lew-checkbox-group
+        v-model="value"
+        direction="y"
+        round
+        :options="options"
+    ></lew-checkbox-group>
+</template>
+`);
+let pre3 = ref(`<script setup lang="ts">
+import { ref } from 'vue';
+import { LewCheckboxGroup } from '../../../components';
+// 定义选项
+let options = ref([
+    { name: '宋朝', id: 1 },
+    { name: '唐朝', id: 2 },
+    { name: '明朝', id: 3 },
+    { name: '清朝', id: 4 },
+]);
+// 值
+let value = ref([]);
+<\/script>
+
+<template>
+    <lew-checkbox-group
+        v-model="value"
+        block
+        direction="x"
+        :options="options"
+    ></lew-checkbox-group>
+</template>
+`);
+let pre4 = ref(`<script setup lang="ts">
+import { ref } from 'vue';
+import { LewCheckboxGroup } from '../../../components';
+// 定义选项
+let options = ref([
+    { name: '宋朝', id: 1 },
+    { name: '唐朝', id: 2 },
+    { name: '明朝', id: 3 },
+    { name: '清朝', id: 4 },
+]);
+// 值
+let value = ref([]);
+<\/script>
+
+<template>
+    <lew-checkbox-group
+        v-model="value"
+        block
+        round
+        direction="x"
+        :options="options"
+    ></lew-checkbox-group>
+</template>
+`);
+</script>
+
+<template>
+    <div class="demo-wrapper">
+        <lew-title>Checkbox</lew-title>
+        <demo-box title="x 布局" badge="方的" :code="pre1">
+            <lew-checkbox-group
+                v-model="value"
+                direction="x"
+                :options="options"
+            ></lew-checkbox-group>
+        </demo-box>
+
+        <demo-box title="y 布局" badge="圆的" :code="pre2">
+            <lew-checkbox-group
+                v-model="value"
+                direction="y"
+                round
+                :options="options"
+            ></lew-checkbox-group>
+        </demo-box>
+
+        <demo-box title="块" :code="pre3" badge="方的">
+            <lew-checkbox-group
+                v-model="value"
+                block
+                direction="x"
+                :options="options"
+            ></lew-checkbox-group>
+        </demo-box>
+        <demo-box title="块" :code="pre4" badge="圆的">
+            <lew-checkbox-group
+                v-model="value"
+                block
+                round
+                direction="x"
+                :options="options"
+            ></lew-checkbox-group>
+        </demo-box>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+    width: 100%;
+    margin: 0 auto;
+
+    > div {
+        margin: 30px 0px;
+    }
+}
+</style>

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

@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import DemoBox from '../../../components/demo/DemoBox.vue';
+import { ref } from 'vue';
+import {
+    LewTitle,
+    LewInput,
+    LewFormItem,
+    LewCheckboxGroup,
+    LewRadioboxGroup,
+    LewSwitch,
+    LewTextarea,
+    LewSelect,
+    LewTabs,
+} from '../../../components';
+
+let user = ref({
+    username: '',
+    password: '',
+    age: '',
+    sex: 0,
+    hobby: [],
+    school: '',
+    home: '',
+    dark: true,
+    pay: '',
+});
+
+let sex_options = ref([
+    { name: '未知', id: 0 },
+    { name: '男', id: 1 },
+    { name: '女', id: 2 },
+]);
+
+let pay_options = ref([
+    { label: '微信', value: '1' },
+    { label: '支付宝', value: '2' },
+    { label: 'Apple Pay', value: '3' },
+]);
+let hobby_options = ref([
+    { name: '唱歌', id: 1 },
+    { name: '跳舞', id: 2 },
+    { name: 'rap', id: 3 },
+    { name: '打篮球', id: 44 },
+]);
+let home_options = ref([
+    {
+        label: '广东',
+        value: '1',
+    },
+    {
+        label: '深圳',
+        value: '2',
+    },
+    {
+        label: '杭州',
+        value: '3',
+    },
+    {
+        label: '上海',
+        value: '4',
+    },
+    {
+        label: '北京',
+        value: '5',
+    },
+]);
+
+let pre1 = ref(`<script setup lang="ts">
+import { ref } from 'vue';
+import {
+    LewInput,
+    LewFormItem,
+    LewCheckboxGroup,
+    LewRadioboxGroup,
+    LewSwitch,
+    LewTextarea,
+    LewSelect,
+    LewTabs,
+} from '../../../components';
+
+let user = ref({
+    username: '',
+    password: '',
+    age: '',
+    sex: 0,
+    hobby: [],
+    school: '',
+    home: '',
+    dark: true,
+    pay: '',
+});
+
+let sex_options = ref([
+    { name: '未知', id: 0 },
+    { name: '男', id: 1 },
+    { name: '女', id: 2 },
+]);
+
+let pay_options = ref([
+    { label: '微信', value: '1' },
+    { label: '支付宝', value: '2' },
+    { label: 'Apple Pay', value: '3' },
+]);
+
+let hobby_options = ref([
+    { name: '唱歌', id: 1 },
+    { name: '跳舞', id: 2 },
+    { name: 'rap', id: 3 },
+    { name: '打篮球', id: 44 },
+]);
+
+let home_options = ref([
+    {
+        label: '广东',
+        value: '1',
+    },
+    {
+        label: '深圳',
+        value: '2',
+    },
+    {
+        label: '杭州',
+        value: '3',
+    },
+    {
+        label: '上海',
+        value: '4',
+    },
+    {
+        label: '北京',
+        value: '5',
+    },
+]);
+<\/script>
+
+<template>
+    <div class="form-box">
+        <lew-form-item direction="y" title="账号">
+            <LewInput 
+                v-tooltip="{
+                    content: "输入账号",
+                    placement: "top",
+                    trigger: "focus",
+                }" 
+                v-model="user.username" 
+            /> 
+        </lew-form-item>
+        <lew-form-item direction="y" title="密码">
+            <LewInput v-model="user.password" />
+        </lew-form-item>
+        <lew-form-item direction="y" title="简介">
+            <LewTextarea v-model="user.password" resize="none" />
+        </lew-form-item>
+        <lew-form-item direction="y" title="家地址">
+            <LewSelect v-model="user.home" :options="home_options" />
+        </lew-form-item>
+        <lew-form-item direction="y" title="性别">
+            <lew-radiobox-group v-model="user.sex" :options="sex_options" />
+        </lew-form-item>
+        <lew-form-item direction="y" title="爱好">
+            <lew-checkbox-group v-model="user.hobby" :options="hobby_options" />
+        </lew-form-item>
+        <lew-form-item direction="y" title="订阅">
+            <LewSwitch v-model="user.dark" />
+        </lew-form-item>
+        <lew-form-item direction="y" title="爱好">
+            <lew-tabs v-model="user.pay" :options="pay_options" />
+        </lew-form-item>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.form-box {
+    width: 500px;
+    margin: 50px auto;
+}
+</style>
+`);
+</script>
+
+<template>
+    <div class="demo-wrapper">
+        <lew-title>Form</lew-title>
+        <demo-box title="表单总览" :code="pre1">
+            <div class="form-box">
+                <lew-form-item direction="y" title="账号">
+                    <LewInput
+                        v-model="user.username"
+                        v-tooltip="{
+                            content: `输入账号`,
+                            placement: `top`,
+                            trigger: `focus`,
+                        }"
+                    />
+                </lew-form-item>
+                <lew-form-item direction="y" title="密码">
+                    <LewInput v-model="user.password" />
+                </lew-form-item>
+                <lew-form-item direction="y" title="简介">
+                    <LewTextarea v-model="user.password" resize="none" />
+                </lew-form-item>
+                <lew-form-item direction="y" title="家地址">
+                    <LewSelect v-model="user.home" :options="home_options" />
+                </lew-form-item>
+                <lew-form-item direction="y" title="性别">
+                    <lew-radiobox-group
+                        v-model="user.sex"
+                        :options="sex_options"
+                    />
+                </lew-form-item>
+                <lew-form-item direction="y" title="爱好">
+                    <lew-checkbox-group
+                        v-model="user.hobby"
+                        :options="hobby_options"
+                    />
+                </lew-form-item>
+                <lew-form-item direction="y" title="订阅">
+                    <LewSwitch v-model="user.dark" />
+                </lew-form-item>
+                <lew-form-item direction="y" title="爱好">
+                    <lew-tabs v-model="user.pay" :options="pay_options" />
+                </lew-form-item>
+            </div>
+        </demo-box>
+    </div>
+</template>
+<style scoped lang="scss">
+.form-box {
+    width: 500px;
+    margin: 50px auto;
+}
+</style>

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

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import DemoBox from '../../../components/demo/DemoBox.vue';
+import { ref } from 'vue';
+import { LewTitle, LewInput, LewFormItem } from '../../../components';
+
+let pre1 = ref(`<template>
+    <div style="width: 300px">
+        <lew-form-item title="账号">
+            <LewInput />
+        </lew-form-item>
+        <lew-form-item title="密码">
+            <LewInput />
+        </lew-form-item>
+    </div>
+</template>
+`);
+let pre2 = ref(`<template>
+    <div style="width: 300px">
+        <lew-form-item title="账号" direction="y">
+            <LewInput />
+        </lew-form-item>
+        <lew-form-item title="密码" direction="y">
+            <LewInput />
+        </lew-form-item>
+    </div>
+</template>
+`);
+</script>
+
+<template>
+    <div class="demo-wrapper">
+        <lew-title>Input</lew-title>
+
+        <demo-box title="x 布局" :code="pre1">
+            <div style="width: 300px">
+                <lew-form-item title="账号">
+                    <LewInput />
+                </lew-form-item>
+                <lew-form-item title="密码">
+                    <LewInput />
+                </lew-form-item>
+            </div>
+        </demo-box>
+        <demo-box title="x 布局" :code="pre2">
+            <div style="width: 300px">
+                <lew-form-item title="账号" direction="y">
+                    <LewInput />
+                </lew-form-item>
+                <lew-form-item title="密码" direction="y">
+                    <LewInput />
+                </lew-form-item>
+            </div>
+        </demo-box>
+    </div>
+</template>

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { LewTitle, LewBadge } from '../../../components';
+</script>
+
+<template>
+    <div class="demo-wrapper">
+        <lew-title>Tag</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 0;
+    }
+}
+</style>

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

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import DemoBox from '../../../components/demo/DemoBox.vue';
+import { ref } from 'vue';
+import { LewTitle, LewRadioboxGroup } from '../../../components/index';
+let value = ref();
+
+let options = ref([
+    { name: '宋朝', id: 1 },
+    { name: '唐朝', id: 2 },
+    { name: '明朝', id: 3 },
+    { name: '清朝', id: 4 },
+]);
+
+let pre1 = ref(`<script setup lang="ts">
+import { ref } from 'vue';
+import { LewRadioboxGroup } from '../../../components';
+let value = ref();
+
+let options = ref([
+    { name: '宋朝', id: 1 },
+    { name: '唐朝', id: 2 },
+    { name: '明朝', id: 3 },
+    { name: '清朝', id: 4 },
+]);
+<\/script>
+
+<template>
+    <lew-radiobox-group
+        v-model="value"
+        direction="x"
+        :options="options"
+    ></lew-radiobox-group>
+</template>
+`);
+let pre2 = ref(`<script setup lang="ts">
+import { ref } from 'vue';
+import { LewRadioboxGroup } from '../../../components';
+let value = ref();
+
+let options = ref([
+    { name: '宋朝', id: 1 },
+    { name: '唐朝', id: 2 },
+    { name: '明朝', id: 3 },
+    { name: '清朝', id: 4 },
+]);
+<\/script>
+
+<template>
+    <lew-radiobox-group
+        v-model="value"
+        direction="y"
+        :options="options"
+    ></lew-radiobox-group>
+</template>
+`);
+let pre3 = ref(`<script setup lang="ts">
+import { ref } from 'vue';
+import { LewRadioboxGroup } from '../../../components';
+let value = ref();
+
+let options = ref([
+    { name: '宋朝', id: 1 },
+    { name: '唐朝', id: 2 },
+    { name: '明朝', id: 3 },
+    { name: '清朝', id: 4 },
+]);
+<\/script>
+
+<template>
+    <lew-radiobox-group
+        v-model="value"
+        block
+        :options="options"
+    ></lew-radiobox-group>
+</template>
+`);
+</script>
+
+<template>
+    <div class="demo-wrapper">
+        <lew-title>Radio</lew-title>
+        <demo-box title="x 布局" :code="pre1">
+            <lew-radiobox-group
+                v-model="value"
+                direction="x"
+                :options="options"
+            ></lew-radiobox-group>
+        </demo-box>
+        <demo-box title="y 布局" :code="pre2">
+            <lew-radiobox-group
+                v-model="value"
+                direction="y"
+                :options="options"
+            ></lew-radiobox-group>
+        </demo-box>
+        <demo-box title="块" :code="pre3">
+            <lew-radiobox-group
+                v-model="value"
+                block
+                :options="options"
+            ></lew-radiobox-group>
+        </demo-box>
+    </div>
+</template>

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

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import DemoBox from '../../../components/demo/DemoBox.vue';
+import { LewTitle, LewFormItem, LewSelect } from '../../../components';
+
+let value = ref('');
+
+let options = ref([
+    {
+        label: '广东',
+        value: '1',
+    },
+    {
+        label: '深圳',
+        value: '2',
+    },
+    {
+        label: '杭州',
+        value: '3',
+    },
+    {
+        label: '上海',
+        value: '4',
+    },
+    {
+        label: '北京',
+        value: '5',
+    },
+]);
+
+let pre1 = ref(`<script setup lang="ts">
+import { ref } from 'vue';
+import { LewFormItem, LewSelect } from '../../../components';
+
+let value = ref('');
+
+let options = ref([
+    {
+        label: '广东',
+        value: '1',
+    },
+    {
+        label: '深圳',
+        value: '2',
+    },
+    {
+        label: '杭州',
+        value: '3',
+    },
+    {
+        label: '上海',
+        value: '4',
+    },
+    {
+        label: '北京',
+        value: '5',
+    },
+]);
+<\/script>
+
+<template>
+    <lew-form-item direction="y" title="选择城市">
+        <div style="width: 350px">
+            <LewSelect v-model="value" :options="options"></LewSelect></div
+    ></lew-form-item>
+</template>
+`);
+</script>
+
+<template>
+    <div class="demo-wrapper">
+        <lew-title>Select</lew-title>
+        <demo-box title="选择器" :code="pre1">
+            <lew-form-item direction="y" title="选择城市">
+                <div style="width: 350px">
+                    <LewSelect
+                        v-model="value"
+                        :options="options"
+                    ></LewSelect></div
+            ></lew-form-item>
+        </demo-box>
+    </div>
+</template>