增加测试用例。

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "@babel/env"
+    // ["env", { "modules": false }],
+    // "stage-3", 
+    // "es2015"
+  ]
+}

examples/App.vue

@@ -5,39 +5,34 @@
                 <router-view />
             </div>
 
-            <div class="col-md-3"
-                 role="complementary">
-                <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix-bottom"
-                     style="top: 55943.8px;">
-                    <ul class="nav bs-docs-sidenav">
-                        <li>
-                            <ul class="nav">
-                                <li>
-                                    <router-link :to="{ path: '/desktop/test'}">测试页面</router-link>
-                                </li>
-                                <li>
-                                    <router-link :to="{ path: '/desktop/hello'}">Hello</router-link>
-                                </li>
-                                <li>
-                                    <router-link :to="{ path: '/desktop/date-time'}">日期</router-link>
-                                </li>
-                            </ul>
-                        </li>
-                        <li>
-                            <ul class="nav">
-                               <li>
-                                    <a href="#/desktop/process-report/123456">流程报表</a>
-                                </li>
-                                <li>
-                                    <a href="#/desktop/info/123456">查询窗口</a>
-                                </li>
-                                <li>
-                                    <a href="#/doc-generator-selected">生单界面</a>
-                                </li>
-                            </ul>
-                        </li>
-                    </ul>
-                </nav>
+            <div class="col-md-3">
+                <ul class="nav nav-pills nav-stacked">
+                    <li>
+                        <router-link :to="{ path: '/desktop/check-box-example'}">复选框</router-link>
+                    </li>
+                    <li>
+                        <router-link :to="{ path: '/desktop/date-example'}">日期控件</router-link>
+                    </li>
+                    <li>
+                        <router-link :to="{ path: '/desktop/date-time-example'}">日期时间控件</router-link>
+                    </li>
+                    <li>
+                        <router-link :to="{ path: '/desktop/date-time-v2-example'}">日期时间V2控件</router-link>
+                    </li>
+                    <li>
+                        <router-link :to="{ path: '/desktop/modal-example'}">模态框</router-link>
+                    </li>
+                    <li>
+                        <a href="#/desktop/process-report/123456">流程报表</a>
+                    </li>
+                    <li>
+                        <a href="#/desktop/info/123456">查询窗口</a>
+                    </li>
+                    <li>
+                        <a href="#/doc-generator-selected">生单界面</a>
+                    </li>
+                </ul>
+
             </div>
         </div>
     </div>
@@ -49,7 +44,7 @@
 export default {
     name: 'desktop',
 
-    data: function () {
+    data() {
         return {
 
         }
@@ -64,131 +59,3 @@ export default {
 }
 </script>
 
-<style>
-.bs-docs-sidebar.affix {
-    position: static;
-}
-@media (min-width: 768px) {
-    .bs-docs-sidebar {
-        padding-left: 20px;
-    }
-}
-
-.bs-docs-search {
-    margin-bottom: 20px;
-    margin-left: 20px;
-}
-
-/** First level of nav */
-.bs-docs-sidenav {
-    margin-top: 20px;
-    margin-bottom: 20px;
-}
-
-/** All levels of nav */
-.bs-docs-sidebar .nav > li > a {
-    display: block;
-    padding: 4px 20px;
-    font-size: 13px;
-    font-weight: 500;
-    color: #767676;
-}
-.bs-docs-sidebar .nav > li > a:hover,
-.bs-docs-sidebar .nav > li > a:focus {
-    padding-left: 19px;
-    color: #563d7c;
-    text-decoration: none;
-    background-color: transparent;
-    border-left: 1px solid #563d7c;
-}
-.bs-docs-sidebar .nav > .active > a,
-.bs-docs-sidebar .nav > .active:hover > a,
-.bs-docs-sidebar .nav > .active:focus > a {
-    padding-left: 18px;
-    font-weight: 700;
-    color: #563d7c;
-    background-color: transparent;
-    border-left: 2px solid #563d7c;
-}
-
-/** Nav: second level (shown on .active) */
-.bs-docs-sidebar .nav .nav {
-    display: none; /** Hide by default, but at >768px, show it */
-    padding-bottom: 10px;
-}
-.bs-docs-sidebar .nav .nav > li > a {
-    padding-top: 1px;
-    padding-bottom: 1px;
-    padding-left: 30px;
-    font-size: 12px;
-    font-weight: 400;
-}
-.bs-docs-sidebar .nav .nav > li > a:hover,
-.bs-docs-sidebar .nav .nav > li > a:focus {
-    padding-left: 29px;
-}
-.bs-docs-sidebar .nav .nav > .active > a,
-.bs-docs-sidebar .nav .nav > .active:hover > a,
-.bs-docs-sidebar .nav .nav > .active:focus > a {
-    padding-left: 28px;
-    font-weight: 500;
-}
-
-/** Back to top (hidden on mobile) */
-.back-to-top,
-.bs-docs-theme-toggle {
-    display: none;
-    padding: 4px 10px;
-    margin-top: 10px;
-    margin-left: 10px;
-    font-size: 12px;
-    font-weight: 500;
-    color: #999;
-}
-.back-to-top:hover,
-.bs-docs-theme-toggle:hover {
-    color: #563d7c;
-    text-decoration: none;
-}
-.bs-docs-theme-toggle {
-    margin-top: 0;
-}
-
-@media (min-width: 768px) {
-    .back-to-top,
-    .bs-docs-theme-toggle {
-        display: block;
-    }
-}
-
-/** Show and affix the side nav when space allows it */
-@media (min-width: 992px) {
-    .bs-docs-sidebar .nav > .active > ul {
-        display: block;
-    }
-    /** Widen the fixed sidebar */
-    .bs-docs-sidebar.affix,
-    .bs-docs-sidebar.affix-bottom {
-        width: 213px;
-    }
-    .bs-docs-sidebar.affix {
-        position: fixed;
-        top: 20px;
-    }
-    .bs-docs-sidebar.affix-bottom {
-        position: absolute; 
-    }
-    .bs-docs-sidebar.affix-bottom .bs-docs-sidenav,
-    .bs-docs-sidebar.affix .bs-docs-sidenav {
-        margin-top: 0;
-        margin-bottom: 0;
-    }
-}
-@media (min-width: 1200px) {
-    /** Widen the fixed sidebar again */
-    .bs-docs-sidebar.affix-bottom,
-    .bs-docs-sidebar.affix {
-        width: 263px;
-    }
-}
-</style>

examples/checkbox/src/CheckBoxExample.vue

@@ -0,0 +1,77 @@
+<template>
+    <h1>复选框(默认值false)</h1>
+
+    <div>
+        <div>
+            <Checkbox v-model:value="value1"
+                      name="value1"></Checkbox>
+        </div>
+
+        <div>
+            {{ value1 }}
+        </div>
+    </div>
+
+
+    <h1>复选框(默认值true)</h1>
+
+    <div>
+        <div>
+            <Checkbox v-model:value="value2"
+                      name="value2"></Checkbox>
+        </div>
+
+        <div>
+            {{ value2 }}
+        </div>
+    </div>
+
+
+
+    <h1>复选框(只读)</h1>
+
+    <div>
+        <div>
+            <Checkbox :disabled="true"
+                      name="value2"></Checkbox>
+        </div>
+
+        <div>
+            {{ value2 }}
+        </div>
+    </div>
+
+    <h1>复选框(必填)</h1>
+
+    <div>
+        <div>
+            <Checkbox :required="true"
+                      name="value2"></Checkbox>
+        </div>
+
+        <div>
+            {{ value2 }}
+        </div>
+    </div>
+</template>
+
+
+<script>
+import { defineComponent, ref } from 'vue';
+
+import Checkbox from "@/checkbox/src/Checkbox.vue";
+
+export default defineComponent({
+    setup() {
+        const value1 = ref(false);
+        const value2 = ref(true);
+        return {
+            value1, value2
+        };
+    },
+
+    components: {
+        "Checkbox": Checkbox
+    }
+})
+</script>

examples/components/DateTimeExample.vue

@@ -1,109 +0,0 @@
-<template>
-    <div>
-
-        <h1>时间日期控件V2</h1>
-
-        <h2>基本表单</h2>
-        <div>
-            <div class="form-group">
-                <label for="exampleInputEmail1">Email address</label>
-                <input type="email"
-                       class="form-control"
-                       id="exampleInputEmail1"
-                       placeholder="Email">
-            </div>
-            <div class="form-group">
-                <label for="exampleInputPassword1">Password</label>
-                <input type="password"
-                       class="form-control"
-                       id="exampleInputPassword1"
-                       placeholder="Password">
-            </div>
-            <div class="form-group">
-                <label for="datetime">日期</label>
-                <DateTimeV2 :dateValue="dateValueV2"
-                            v-on:on-value-change="dateValueV2 = $event"></DateTimeV2>
-            </div>
-        </div>
-
-        {{ dateValueV2 }}
-
-        <h2>内联表单</h2>
-        <div class="form-inline">
-            <div class="form-group">
-                <label for="exampleInputName2">Name</label>
-                <input type="text"
-                       class="form-control"
-                       id="exampleInputName2"
-                       placeholder="Jane Doe">
-            </div>
-            <div class="form-group">
-                <label for="exampleInputEmail2">Email</label>
-                <input type="email"
-                       class="form-control"
-                       id="exampleInputEmail2"
-                       placeholder="jane.doe@example.com">
-            </div>
-            <div class="form-group">
-                <label class="sr-only"
-                       for="exampleInputAmount">Amount (in dollars)</label>
-                <div class="input-group">
-                    <div class="input-group-addon">$</div>
-                    <input type="text"
-                           class="form-control"
-                           id="exampleInputAmount"
-                           placeholder="Amount">
-                    <div class="input-group-addon">.00</div>
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label"
-                       for="inputGroupSuccess3">日期</label>
-                <DateTimeV2 :dateValue="dateValueV2"
-                            v-on:on-value-change="dateValueV2 = $event"></DateTimeV2>
-            </div>
-        </div>
-
-        {{ dateValueV2 }}
-
-        <h2>只读</h2>
-        <DateTimeV2 :dateValue="dateValueV2"
-                    :readonly="true"></DateTimeV2>
-        {{ dateValueV2 }}
-
-        <h2>复制/粘贴</h2>
-        <DateTimeV2 :dateValue="dateValueV2_1"
-                    v-on:on-value-change="dateValueV2_1 = $event"></DateTimeV2>
-        {{ dateValueV2_1 }}
-
-    </div>
-</template>
-
-<script>
-
-
-import DateTimeV2 from "../../packages/datetime-v2/index.js";
-
-export default {
-    name: 'app',
-
-    data: function () {
-        return {
-            dateValue: '2021-10-09',
-            dateValueV2: '2021-10-09 14:02:00',
-            dateValueV2_1: '',
-        }
-    },
-
-    components: {
-        DateTimeV2,
-    },
-
-    methods: {
-
-    }
-}
-</script>
-
-<style>
-</style>

examples/components/Hello.vue

@@ -1,229 +0,0 @@
-<template>
-    <div id="app"
-         class="container">
-        <h1>复选框</h1>
-        <Checkbox></Checkbox>
-        <h1>日期控件</h1>
-        <Date :dateValue="dateValue"
-              @on-value-change="dateValue = $event"></Date>
-        {{dateValue}}
-        <h1>日期+时间控件</h1>
-        <DateTime></DateTime>
-
-        <h1>时间日期控件V2</h1>
-
-        <div class="form-inline">
-            <div class="form-group">
-                <DateTimeV2 :dateValue="dateValueV2"
-                            v-on:on-value-change="dateValueV2 = $event"></DateTimeV2>
-            </div>
-        </div>
-
-        <div>
-            <div class="form-group">
-                <DateTimeV2 :dateValue="dateValueV2"
-                            v-on:on-value-change="dateValueV2 = $event"></DateTimeV2>
-            </div>
-        </div>
-
-        {{ dateValueV2 }}
-
-        <h1>时间日期控件V2-只读</h1>
-        <DateTimeV2 :dateValue="dateValueV2"
-                    :readonly="true"></DateTimeV2>
-        {{ dateValueV2 }}
-
-        <h1>时间日期控件V2-复制/粘贴</h1>
-        <DateTimeV2 :dateValue="dateValueV2_1"
-                    v-on:on-value-change="dateValueV2_1 = $event"></DateTimeV2>
-        {{ dateValueV2_1 }}
-
-        <h1>时间控件</h1>
-        <Time></Time>
-        <h1>加载中</h1>
-        <button @click="showHideLoading">打开加载中</button>
-        <Loading ref="loading"></Loading>
-
-        <h1>模态框</h1>
-        <button @click="$refs.modal.showModal()">打开模态框</button>
-        <Modal ref="modal"
-               @ok="closeModal">
-            <template #header>
-                hello1
-            </template>
-            <div>Hello World</div>
-        </Modal>
-
-        <h1>页面大小</h1>
-        <PageSizeSelect v-on:pageSizeChanged="gridSizeSelect"></PageSizeSelect>
-
-        <h1>复选框</h1>
-        <Switches></Switches>
-
-        <h1>上传控件</h1>
-        <UploadWidget></UploadWidget>
-
-        <h1>扫描仪</h1>
-        <Scanner></Scanner>
-
-        <h1>年份选择器</h1>
-        <YearPicker></YearPicker>
-
-        <h1>导航栏</h1>
-        <div style="border: 1px solid">
-            <NavBar :title="'导航栏1'"
-                    :isGoBack="true"></NavBar>
-        </div>
-
-        <div style="border: 1px solid">
-            <NavBar :title="'导航栏2'"
-                    :isGoBack="false"></NavBar>
-        </div>
-
-        <h1>分页组件</h1>
-
-        <Pagination v-model="pagination"
-                    @callback='pageChanged'></Pagination>
-        数据总数
-        <input type="number"
-               v-model.number="pagination.total" />
-        页面大小
-        <input type="number"
-               v-model.number="pagination.perPage" />
-        <div>
-            当前页数 {{ pagination.currentPage }}
-        </div>
-
-    </div>
-</template>
-
-<script>
-
-
-import Checkbox from "../../packages/checkbox/index.js";
-import Date from "../../packages/date/index.js";
-import DateTime from "../../packages/datetime/index.js";
-import DateTimeV2 from "../../packages/datetime-v2/index.js";
-import Time from "../../packages/time/index.js";
-import Loading from "../../packages/loading/index.js";
-import Modal from '../../packages/modal/index.js';
-import PageSizeSelect from '../../packages/page-size-select/index.js';
-import Scanner from '../../packages/scanner/index.js';
-import Switches from '../../packages/switches/index.js';
-import UploadWidget from '../../packages/upload-widget/index.js';
-import YearPicker from "../../packages/year-picker/index.js";
-import NavBar from '../../packages/navbar/index.js';
-import Pagination from "../../packages/pagination/index.js";
-
-export default {
-    name: 'app',
-
-    data: function () {
-        return {
-            msg: 'Welcome to Your Vue.js App',
-            users: [
-                {
-                    id: 1,
-                    name: "张三",
-                },
-                {
-                    id: 2,
-                    name: "李四",
-                }
-            ],
-            selectedUserId: null,
-            selectedUserName: null,
-            suggestStyles: {
-                "defaultInput": "form-control"
-            },
-
-            pagination: {
-                currentPage: 1, // 当前的页数
-                perPage: 12,    // 每页的显示数量
-                total: 100,     // 显示总数
-            },
-
-            paginationOptions: {
-                offset: 4,
-                previousText: 'Prev',
-                nextText: 'Next',
-                alwaysShowPrevNext: true
-            },
-            selectedMonth: null,
-            dateValue: '2021-10-09',
-
-            dateValueV2: '2021-10-09 14:02:00',
-            dateValueV2_1: '',
-        }
-    },
-
-    components: {
-        Checkbox,
-        Date,
-        DateTime,
-        DateTimeV2,
-        Time,
-        Loading,
-        Modal,
-        PageSizeSelect,
-        Scanner,
-        Switches,
-        UploadWidget,
-        YearPicker,
-        NavBar,
-        Pagination
-    },
-
-    methods: {
-        showHideLoading: function () {
-            let _self = this;
-            _self.$refs.loading.show();
-            window.setTimeout(function () {
-                _self.$refs.loading.hide();
-            }, 3000);
-        },
-
-
-        /**
-          * 修改页Size
-          */
-        gridSizeSelect: function (newPageSize) {
-            console.log("page size changed: " + newPageSize);
-        },
-
-
-        /**
-         * 选择了用户
-         */
-        selectUser: function (user) {
-            if (user) {
-                this.selectedUserId = user.id;
-            } else {
-                this.selectedUserId = null;
-            }
-        },
-
-        loadData: function () {
-
-        },
-
-        /**
-         * 关闭模态框
-         */
-        closeModal: function () {
-            alert("准备关闭模态框。");
-            this.$refs.modal.hideModal();
-        },
-
-        /**
-         * 页面发生了改变
-         */
-        pageChanged: function () {
-            console.log('页面发生了改变%o', this.pagination);
-        },
-    }
-}
-</script>
-
-<style>
-</style>

examples/components/Test.vue

@@ -1,28 +0,0 @@
-<template>
-    <div>
-        121212
-    </div>
-</template>
-
-<script>
-
-
-export default {
-
-    data: function () {
-        return {
-
-        }
-    },
-
-    components: {
-    },
-
-    methods: {
-
-    }
-}
-</script>
-
-<style>
-</style>

examples/date/src/DateExample.vue

@@ -0,0 +1,72 @@
+<template>
+    <div>
+        <h1>日期控件</h1>
+
+        <h2>基本表单</h2>
+        <div>
+            <div class="form-group">
+                <label for="datetime">日期</label>
+                <DateTime :dateValue="dateValueV2"
+                            v-on:on-value-change="dateValueV2 = $event"></DateTime>
+            </div>
+        </div>
+
+        {{ dateValueV2 }}
+
+        <h2>内联表单</h2>
+        <div class="form-inline">
+            <div class="form-group">
+                <label class="control-label"
+                       for="inputGroupSuccess3">日期</label>
+                <DateTime :dateValue="dateValueV2"
+                            v-on:on-value-change="dateValueV2 = $event"></DateTime>
+            </div>
+        </div>
+
+        {{ dateValueV2 }}
+
+        <h2>只读</h2>
+        
+        <div class="form-inline">
+            <div class="form-group">
+                <label class="control-label"
+                       for="inputGroupSuccess3">日期</label>
+                <DateTime :dateValue="dateValueV3"
+                        :readonly="true"></DateTime>
+            </div>
+        </div>
+
+        {{ dateValueV3 }}
+
+
+    </div>
+</template>
+
+<script>
+
+
+import DateTime from "@/date/index.js";
+
+export default {
+    name: 'date-example',
+
+    data: function () {
+        return {
+            dateValue: '2021-10-09',
+            dateValueV2: '2021-10-09 14:02:00',
+            dateValueV3: '2022-10-09 14:02:00',
+        }
+    },
+
+    components: {
+        DateTime,
+    },
+
+    methods: {
+
+    }
+}
+</script>
+
+<style>
+</style>

examples/datetime-v2/src/DateTimeV2Example.vue

@@ -0,0 +1,70 @@
+<template>
+    <div>
+
+        <h1>时间日期控件V2</h1>
+
+        <h2>基本表单</h2>
+        <div>
+            <div class="form-group">
+                <label for="datetime">日期</label>
+                <DateTimeV2 :dateValue="dateValue1"
+                            v-on:on-value-change="dateValue1 = $event"></DateTimeV2>
+            </div>
+        </div>
+
+        {{ dateValue1 }}
+
+        <h2>内联表单</h2>
+        <div class="form-inline">
+            <div class="form-group">
+                <label class="control-label"
+                       for="inputGroupSuccess3">日期</label>
+                <DateTimeV2 :dateValue="dateValue2"
+                            v-on:on-value-change="dateValue2 = $event"></DateTimeV2>
+            </div>
+        </div>
+
+        {{ dateValue2 }}
+
+        <h2>只读</h2>
+        <DateTimeV2 :dateValue="dateValue3"
+                    :readonly="true"></DateTimeV2>
+        {{ dateValue3 }}
+
+        <h2>复制/粘贴</h2>
+        <DateTimeV2 :dateValue="dateValue4"
+                    v-on:on-value-change="dateValue4 = $event"></DateTimeV2>
+        {{ dateValue4 }}
+
+    </div>
+</template>
+
+<script>
+
+
+import DateTimeV2 from "../../../packages/datetime-v2/index.js";
+
+export default {
+    name: 'app',
+
+    data: function () {
+        return {
+            dateValue1: '2021-10-09 14:02:01',
+            dateValue2: '2021-10-09 14:02:02',
+            dateValue3: '2021-10-09 14:02:03',
+            dateValue4: '2021-10-09 14:02:04',
+        }
+    },
+
+    components: {
+        DateTimeV2,
+    },
+
+    methods: {
+
+    }
+}
+</script>
+
+<style>
+</style>

examples/datetime/src/DateTimeExample.vue

@@ -0,0 +1,72 @@
+<template>
+    <div>
+        <h1>日期时间控件</h1>
+
+        <h2>基本表单</h2>
+        <div>
+            <div class="form-group">
+                <label for="datetime">日期时间</label>
+                <DateTime :dateValue="dateValue1"
+                            v-on:on-value-change="dateValue1 = $event"></DateTime>
+            </div>
+        </div>
+
+        {{ dateValue1 }}
+
+        <h2>内联表单</h2>
+        <div class="form-inline">
+            <div class="form-group">
+                <label class="control-label"
+                       for="inputGroupSuccess3">日期时间</label>
+                <DateTime :dateValue="dateValue2"
+                            v-on:on-value-change="dateValue2 = $event"></DateTime>
+            </div>
+        </div>
+
+        {{ dateValue2 }}
+
+        <h2>只读</h2>
+        
+        <div class="form-inline">
+            <div class="form-group">
+                <label class="control-label"
+                       for="inputGroupSuccess3">日期时间</label>
+                <DateTime :dateValue="dateValue3"
+                        :readonly="true"></DateTime>
+            </div>
+        </div>
+
+        {{ dateValue3 }}
+
+
+    </div>
+</template>
+
+<script>
+
+
+import DateTime from "@/datetime/index.js";
+
+export default {
+    name: 'date-example',
+
+    data: function () {
+        return {
+            dateValue1: '2021-10-09 12:00:01',
+            dateValue2: '2021-10-09 14:02:00',
+            dateValue3: '2022-10-09 14:02:00',
+        }
+    },
+
+    components: {
+        DateTime,
+    },
+
+    methods: {
+
+    }
+}
+</script>
+
+<style>
+</style>

examples/main.js

@@ -26,4 +26,8 @@ const router = createRouter({
 // 	render: h => h(App)
 // })
 
-createApp(App).use(i18n).use(router).use(VTooltip).mount('#app')
+let app = createApp(App);
+app.use(i18n);
+app.use(router);
+app.use(VTooltip);
+app.mount('#app');

examples/modal/src/ModalExample.vue

@@ -0,0 +1,38 @@
+<template>
+
+    <button @click="show">显示</button>
+    <Modal ref="modal" title="hello">
+        <div>hello</div>
+    </Modal>
+</template>
+
+<script>
+
+import Modal from "@/modal/src/Modal.vue";
+
+export default {
+    data: function(){
+        return {
+
+        }
+    },
+
+    components: {
+        "Modal": Modal
+    },
+
+    methods: {
+        show: function(){
+            this.$refs.modal.showModal();
+        }
+    },
+
+    mounted: function(){
+        
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

examples/route/index.js

@@ -1,12 +1,12 @@
 import Desktop from '../Desktop.vue'
-import Test from '../components/Test.vue'
-// import Hello from '../components/Hello.vue'
-// import DateTimeExample from '../components/DateTimeExample.vue'
-// const Hello = () => import(/* webpackChunkName: "group-user" */ '../components/Hello.vue')
-const DateTimeExample = () => import(/* webpackChunkName: "group-user" */ '../components/DateTimeExample.vue')
-const ProcessReport = () => import(/* webpackChunkName: "group-user" */ '../../packages/process/src/ProcessReport.vue')
-const InfoWindow = () => import(/* webpackChunkName: "group-user" */ '../../packages/info/src/InfoWindow.vue')
-const DocGeneratorSelected = () => import(/* webpackChunkName: "group-user" */ '../../packages/info/src/DocGeneratorSelected.vue')
+const CheckBoxExample = () => import(/* webpackChunkName: "check-box-example" */ '../checkbox/src/CheckBoxExample.vue')
+const DateExample = () => import(/* webpackChunkName: "date-example" */ '../date/src/DateExample.vue')
+const DateTimeExample = () => import(/* webpackChunkName: "date-time-example" */ '../datetime/src/DateTimeExample.vue')
+const DateTimeV2Example = () => import(/* webpackChunkName: "date-time-v2-example" */ '../datetime-v2/src/DateTimeV2Example.vue')
+const ModalExample = () => import(/* webpackChunkName: "modal-example" */ '../modal/src/ModalExample.vue')
+const ProcessReport = () => import(/* webpackChunkName: "process-report" */ '../../packages/process/src/ProcessReport.vue')
+const InfoWindow = () => import(/* webpackChunkName: "info-window" */ '../../packages/info/src/InfoWindow.vue')
+const DocGeneratorSelected = () => import(/* webpackChunkName: "doc-generator-selected" */ '../../packages/info/src/DocGeneratorSelected.vue')
 
 export default {
 	routes: [
@@ -14,22 +14,37 @@ export default {
 			path: '/desktop',
 			component: Desktop,
 			children: [
-				{ path: 'test', component: Test },
-				// { path: 'hello', component: Hello },
-				{ path: 'date-time', component: DateTimeExample },
-				// 流程报表
+
+				/** 复选框控件 */
+				{ path: 'check-box-example', component: CheckBoxExample },
+
+				/** 日期控件 */
+				{ path: 'date-example', component: DateExample },
+				
+				/** 日期时间控件 */
+				{ path: 'date-time-example', component: DateTimeExample },
+
+				/** 日期时间控件V2 */
+				{ path: 'date-time-v2-example', component: DateTimeV2Example },
+
+				/** 模态框控件 */
+				{ path: 'modal-example', component: ModalExample },
+
+				/** 流程报表 */
 				{ path: 'process-report/:no', component: ProcessReport },
-				// 查询窗口
+
+				/** 查询窗口 */
 				{ path: 'info/:infoWindowNo', component: InfoWindow },
-				// 查询窗口
+
+				/** 查询窗口 */
 				{ path: 'doc-generator-selected', component: DocGeneratorSelected },
 			],
 
 		},
-		{
-			path: "/:pathMatch(.*)*",
-			name: "notFound",
-			component: Test,  // 引入 组件
-		},
+		// {
+		// 	path: "/:pathMatch(.*)*",
+		// 	name: "notFound",
+		// 	component: Test,  // 引入 组件
+		// },
 	]
 }

package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "dist/pc-component-v3.js",
   "scripts": {
-    "dev": "webpack-dev-server --open --hot --config webpack.config.js",
+    "dev": "webpack serve --open --hot --config webpack.config.js",
     "build": "webpack --config webpack.prod.js",
     "lib": "webpack --progress --config webpack.lib.js"
   },
@@ -20,6 +20,8 @@
     "css-loader": "^6.7.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
+    "style-loader": "^3.3.1",
+    "vue-loader": "^17.0.0",
     "webpack": "^5.70.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4",
@@ -29,7 +31,6 @@
     "v-tooltip": "^4.0.0-beta.17",
     "vue": "^3.2.31",
     "vue-i18n": "^9.1.9",
-    "vue-loader": "^17.0.0",
     "vue-router": "^4.0.13",
     "vuedraggable": "^4.1.0"
   }

packages/checkbox/src/Checkbox.vue

@@ -3,12 +3,11 @@
         <input type="checkbox"
                :id="id"
                :name="name"
-               :value="value"
+               :checked="myValue"
                :class="className"
                :required="required"
                :disabled="disabled"
-               @change="onChange"
-               :checked="state">
+               @change="onChange">
         <label :for="id">
             <slot name="input-box">
                 <span class="input-box">
@@ -25,19 +24,18 @@
 </template>
 
 <script>
+import Uuid from "../../common/Uuid.js"
+
+
 export default {
-    name: "CheckBox",
-    
-    model: {
-        prop: 'modelValue',
-        event: 'input'
-    },
+    name: "Checkbox",
+
 
     props: {
         id: {
             type: String,
             default: function () {
-                return 'checkbox-id-' + this._uid;
+                return 'checkbox-id-' + Uuid.createUUID();
             },
         },
         name: {
@@ -45,19 +43,12 @@ export default {
             default: null,
         },
         value: {
-            default: null,
-        },
-        modelValue: {
             default: undefined,
         },
         className: {
             type: String,
             default: null,
         },
-        checked: {
-            type: Boolean,
-            default: false,
-        },
         required: {
             type: Boolean,
             default: false,
@@ -66,64 +57,37 @@ export default {
             type: Boolean,
             default: false,
         },
-        model: {}
     },
 
-    computed: {
-        state() {
-            if (this.modelValue === undefined) {
-                return this.checked;
-            }
+    data: function () {
+        return {
+            "myValue": false
+        }
+    },
 
-            if (Array.isArray(this.modelValue)) {
-                return this.modelValue.indexOf(this.value) > -1;
-            }
+    computed: {
 
-            return !!this.modelValue;
-        }
     },
 
     methods: {
         onChange() {
-            this.toggle();
-        },
-
-        toggle() {
-            let value;
-
-            if (Array.isArray(this.modelValue)) {
-                value = this.modelValue.slice(0);
-
-                if (this.state) {
-                    value.splice(value.indexOf(this.value), 1);
-                } else {
-                    value.push(this.value);
-                }
-            } else {
-                value = !this.state;
-            }
-
-            this.$emit('input', value);
+            // this.myValue = !this.myValue;
+            this.$emit('update:value', !this.myValue);
         }
     },
 
     watch: {
-        checked(newValue) {
-            if (newValue !== this.state) {
-                this.toggle();
-            }
-        }
-    },
-
-    mounted() {
-        if (this.checked && !this.state) {
-            this.toggle();
+        value: {
+            handler(newValue, oldValue) {
+                this.myValue = newValue;
+            },
+            immediate: true
         }
     },
 };
 </script>
 
-<style>
+<style scoped>
 /**
     .checkbox-component {
         > input {

packages/vue-datepicker/src/vue-datepicker.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="cov-vue-date">
     <div class="datepickbox">
-      <input type="text" title="input date" class="cov-datepicker" readonly="readonly" :placeholder="option.placeholder" v-model="date.time" :required="required" @click="showCheck" @foucus="showCheck" :style="option.inputStyle ? option.inputStyle : {}" />
-      <span class="glyphicon glyphicon-remove-circle btn-remove" @click="date.time = ''; $emit('change', '')"></span>
+      <input type="text" title="input date" class="cov-datepicker" :readonly="readonly" :disabled="readonly" :placeholder="option.placeholder" v-model="date.time" :required="required" @click="showCheck" @foucus="showCheck" :style="option.inputStyle ? option.inputStyle : {}" />
+      <span class="glyphicon glyphicon-remove-circle btn-remove" @click="date.time = ''; $emit('change', '')" v-if="readonly != true && readonly != 'true'"></span>
     </div>
-    <div class="datepicker-overlay" v-if="showInfo.check" @click="dismiss($event)" v-bind:style="{'background' : option.overlayOpacity? 'rgba(0,0,0,'+option.overlayOpacity+')' : 'rgba(0,0,0,0.5)'}">
+    <div class="datepicker-overlay" v-if="showInfo.check && readonly != true && readonly != 'true'" @click="dismiss($event)" v-bind:style="{'background' : option.overlayOpacity? 'rgba(0,0,0,'+option.overlayOpacity+')' : 'rgba(0,0,0,0.5)'}">
       <div class="cov-date-body" :style="{'background-color': option.color ? option.color.header : '#3f51b5'}">
         <div class="cov-date-monthly">
           <div class="cov-date-previous" @click="nextMonth('pre')">«</div>
@@ -80,6 +80,10 @@ exports.default = {
       type: Object,
       required: true
     },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
     option: {
       type: Object,
       default: function _default() {
@@ -838,4 +842,12 @@ table {
     cursor: pointer;
     padding: 9px;
 }
+
+.cov-datepicker[disabled]{
+    cursor: not-allowed;
+    background-color: #eee !important;
+    opacity: 1;
+}
+
+
 </style>

webpack.base.js

@@ -8,6 +8,7 @@ module.exports = {
       {
         test: /\.css$/,
         use: [
+          'style-loader',
           'css-loader'
         ],
       },
@@ -15,8 +16,6 @@ module.exports = {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
-          loaders: {
-          }
           // other vue-loader options go here
         }
       },
@@ -25,10 +24,10 @@ module.exports = {
         test: /\.js$/,    // 处理后缀名为js的文件
         loader: 'babel-loader',     // 使用babel-loader进行处理
         exclude: /node_modules/,    //排除node_modules下的文件
-        include: [path.resolve(__dirname,'packages')],
-        // options: {
-        //   presets: ["es2015"]
-        // }
+        include: [path.resolve(__dirname,'packages'), path.resolve(__dirname,'examples')],
+        options: {
+          presets: ["@babel/env"]
+        }
       },
       {
         test: /\.(png|jpg|gif|svg)$/,
@@ -40,9 +39,10 @@ module.exports = {
     ]
   },
   resolve: {
-    // alias: {
-    //   'vue$': 'vue/dist/vue.esm.js'
-    // },
+    alias: {
+      '@': path.resolve(__dirname,'packages'),
+      // 'vue$': 'vue/dist/vue.esm.js'
+    },
     extensions: ['*', '.js', '.vue', '.json']
   },
   performance: {
@@ -56,6 +56,5 @@ module.exports = {
   },
   plugins: [
     new VueLoaderPlugin()
-  ],
-  devtool: 'eval-source-map'
+  ]
 }

webpack.config.js

@@ -15,11 +15,9 @@ module.exports = WebpackMerge.merge(baseConfig, {
     port: 8086,
     historyApiFallback: true,
   },
+  devtool: 'source-map',
   plugins: (module.exports.plugins || []).concat([
-    new webpack.DefinePlugin({
-      __VUE_OPTIONS_API__: false,
-      __VUE_PROD_DEVTOOLS__: false,
-    }),
+   
 
     new HtmlWebpackPlugin({		      // html-webpack-plugin 插件对象
       template: path.join(__dirname, './index.html'),     // 指定模板文件