zydx-plus 1.1.17 → 1.2.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.1.17",
+  "version": "1.2.21",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/pagination/src/pagination.vue

@@ -2,32 +2,111 @@
   <useOffsetPagination :pageCount="pageCount"
                        :total="total"
                        :page="page"
+                       :isFinished="isFinished"
                        @page:change="pageChange"
                        v-slot="{
                          next,
                          prev,
                          isFirstPage,
-                         isLastPage
+                         isLastPage,
+                         isLoading,
+                         isPrevClicked,
+                         isNextClicked
                        }">
 
     <div class="paginator">
-      <button :disabled="isFirstPage"
+      <button :disabled="isFirstPage || isLoading"
               class="defaultButton"
               @click="prev">
-        上一页
+        <template v-if="isPrevClicked">
+          <svg xmlns="http://www.w3.org/2000/svg"
+               width="16"
+               height="16"
+               viewBox="0 0 24 24">
+            <g fill="none"
+               stroke="black"
+               stroke-linecap="round"
+               stroke-width="2">
+              <path stroke-dasharray="60"
+                    stroke-dashoffset="60"
+                    stroke-opacity=".3"
+                    d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z">
+                <animate fill="freeze"
+                         attributeName="stroke-dashoffset"
+                         dur="1.3s"
+                         values="60;0" />
+              </path>
+              <path stroke-dasharray="15"
+                    stroke-dashoffset="15"
+                    d="M12 3C16.9706 3 21 7.02944 21 12">
+                <animate fill="freeze"
+                         attributeName="stroke-dashoffset"
+                         dur="0.3s"
+                         values="15;0" />
+                <animateTransform attributeName="transform"
+                                  dur="1.5s"
+                                  repeatCount="indefinite"
+                                  type="rotate"
+                                  values="0 12 12;360 12 12" />
+              </path>
+            </g>
+          </svg>
+        </template>
+        <template v-else>
+          上一页
+        </template>
       </button>
       <div class="paginator_info">
-        <input type="input"
+        <input type="text"
+               @keyup="handleKeyup"
                class="paginator_input"
-               v-model.number="page" />
+               v-model.number="page"
+               @input="handleInput" />
         <span>/</span>
         <span>{{ pages }}</span>
       </div>
-      <button :disabled="isLastPage"
+      <button :disabled="isLastPage || isLoading"
               class="defaultButton"
               @click="next">
-        下一页
+        <template v-if="isNextClicked">
+          <svg xmlns="http://www.w3.org/2000/svg"
+               width="16"
+               height="16"
+               viewBox="0 0 24 24">
+            <g fill="none"
+               stroke="black"
+               stroke-linecap="round"
+               stroke-width="2">
+              <path stroke-dasharray="60"
+                    stroke-dashoffset="60"
+                    stroke-opacity=".3"
+                    d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z">
+                <animate fill="freeze"
+                         attributeName="stroke-dashoffset"
+                         dur="1.3s"
+                         values="60;0" />
+              </path>
+              <path stroke-dasharray="15"
+                    stroke-dashoffset="15"
+                    d="M12 3C16.9706 3 21 7.02944 21 12">
+                <animate fill="freeze"
+                         attributeName="stroke-dashoffset"
+                         dur="0.3s"
+                         values="15;0" />
+                <animateTransform attributeName="transform"
+                                  dur="1.5s"
+                                  repeatCount="indefinite"
+                                  type="rotate"
+                                  values="0 12 12;360 12 12" />
+              </path>
+            </g>
+          </svg>
+        </template>
+        <template v-else>
+          下一页
+        </template>
       </button>
+
     </div>
   </useOffsetPagination>
 </template>
@@ -35,6 +114,18 @@
 <script>
 import { defineComponent } from 'vue'
 import useOffsetPagination from './useOffsetPagination.vue';
+export const debounceTimer = 500
+export function debounce(fn, delay = debounceTimer) {
+  var timeoutID = null
+  return function () {
+    clearTimeout(timeoutID)
+    var args = arguments
+    var that = this
+    timeoutID = setTimeout(function () {
+      fn.apply(that, args)
+    }, delay)
+  }
+}
 export default defineComponent({
   name: 'zydx-pagination',
   components: {
@@ -44,15 +135,19 @@ export default defineComponent({
   props: {
     total: {
       type: Number,
-      default: 0
+      default: 1
     },
     pageCount: {
       type: Number,
-      default: 10
+      default: 1
     },
     currentPage: {
       type: Number,
       default: 1
+    },
+    isFinished: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -64,6 +159,24 @@ export default defineComponent({
     pageChange: function (v) {
       this.$emit('page:change', v)
       this.page = v
+    },
+    handleInput: debounce(function (e) {
+      let input = Number(e.target.value)
+      if (input > this.pages) {
+        this.page = this.pages
+        this.$emit('page:change', this.page)
+        return
+      }
+      if (input < 1) {
+        this.page = 1
+        this.$emit('page:change', 1)
+        return
+      }
+      this.page = input
+      this.$emit('page:change', this.page)
+    }),
+    handleKeyup: function (e) {
+      this.page = e.target.value.replace(/[^\d]/, '')
     }
   },
   computed: {
@@ -73,16 +186,6 @@ export default defineComponent({
 
   },
   watch: {
-    page: {
-      handler: function (v) {
-        if (v >= this.pages) {
-          this.page = Number(String(this.page).slice(2))
-        }
-        if (v <= 1) {
-          this.page = 1
-        }
-      }
-    },
     currentPage: {
       handler: function (v) {
         if (v >= this.pages) {

package/src/components/pagination/src/useOffsetPagination.vue

@@ -1,17 +1,5 @@
 
 <script>
-export const debounceTimer = 500
-export function debounce(fn, delay = debounceTimer) {
-  var timeoutID = null
-  return function () {
-    clearTimeout(timeoutID)
-    var args = arguments
-    var that = this
-    timeoutID = setTimeout(function () {
-      fn.apply(that, args)
-    }, delay)
-  }
-}
 import { defineComponent } from 'vue';
 export default defineComponent({
   props: {
@@ -26,21 +14,34 @@ export default defineComponent({
     pageCount: {
       type: Number,
       default: 10
-    }
+    },
+    isFinished: {
+      type: Boolean,
+      default: false
+    },
   },
   inheritAttrs: false,
   data() {
     return {
-      currentPage: 1
+      currentPage: 1,
+      isNextClicked: false,
+      isPrevClicked: false,
+      isLoading: false,
     }
   },
   methods: {
     clamp: (num, min, max) => Math.min(Math.max(num, min), max),
     prev: function () {
+      this.isLoading = true
+      this.isPrevClicked = true
       this.currentPage = this.clamp(this.currentPage - 1, 1, this.pages)
+      this.$emit('page:change', this.currentPage)
     },
     next: function () {
+      this.isLoading = true
+      this.isNextClicked = true
       this.currentPage = this.clamp(this.currentPage + 1, 1, this.pages)
+      this.$emit('page:change', this.currentPage)
     },
   },
   computed: {
@@ -61,13 +62,16 @@ export default defineComponent({
       },
       immediate: true
     },
-    currentPage: {
-      handler: debounce(function (v) {
-        this.$emit('page:change', v)
-        if (v < 1) {
-          this.currentPage = 1
+    isFinished: {
+      handler: function (v) {
+        if (v) {
+          this.isLoading = false
+          this.isNextClicked = false
+          this.isPrevClicked = false
+        } else {
+          this.isLoading = true
         }
-      }),
+      },
       immediate: true
     }
   },
@@ -77,7 +81,10 @@ export default defineComponent({
       next: this.next,
       prev: this.prev,
       isFirstPage: this.isFirstPage,
-      isLastPage: this.isLastPage
+      isLastPage: this.isLastPage,
+      isLoading: this.isLoading,
+      isPrevClicked: this.isPrevClicked,
+      isNextClicked: this.isNextClicked,
     })
   }
 

package/src/components/select/index.js

@@ -0,0 +1,6 @@
+import main from './src/select';
+
+main.install = function(Vue) {
+    Vue.component(main.name, main);
+};
+export default main;

package/src/components/select/src/select.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="wrapper">
+    <!-- <div id='custom-select-status'
+         class='hidden-visually'
+         aria-live="polite"></div> -->
+    <div class="custom-select">
+      <input stype="text"
+             :value="selected"
+             :readonly="true"
+             @click="toggleDropDown"
+             class="select-css" />
+      <span class="custom-select-icons"
+            @click="toggleDropDown">
+        <svg xmlns="http://www.w3.org/2000/svg"
+             width="16"
+             height="16"
+             viewBox="0 0 24 24">
+          <g :transform="transform"
+             :style="style">
+            <path fill="#c0c4cc"
+                  d="M15.125 21.1L6.7 12.7q-.15-.15-.213-.325T6.425 12q0-.2.062-.375T6.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L9.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z" />
+          </g>
+        </svg>
+      </span>
+      <transition>
+        <ul v-if="isOpen"
+            class="custom-select-options">
+          <li v-for="(option, idx) in options"
+              :key="idx"
+              @click="handleClick(option)">{{ option.label }}</li>
+
+        </ul>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'zydx-select',
+  props: {
+    options: {
+      type: Array,
+      default: () => []
+    },
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      isOpen: false,
+      selected: null
+    }
+  },
+  methods: {
+    toggleDropDown: function () {
+      this.isOpen = !this.isOpen
+    },
+    handleClick: function (option) {
+      this.$emit('update:value', option.value)
+      this.selected = option.label
+      this.isOpen = false
+    }
+  },
+  computed: {
+    transform: function () {
+      return this.isOpen
+        ? 'rotate(90 12 12)'
+        : 'rotate(-90 12 12)'
+    },
+    style: function () {
+      return 'transition: all 0.2s ease;'
+    }
+  },
+  watch: {
+    value: {
+      handler: function (v) {
+        const { label } = this.options.find(option => option.value === v)
+        this.selected = label
+      },
+      immediate: true
+    }
+  }
+})
+
+</script>
+<style  scoped>
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+
+.wrapper {
+  text-align: left;
+}
+
+.sample {
+  border: 1px solid #eeeeee;
+  background: #ffffff;
+  max-width: 30em;
+  padding: 1em;
+  margin-bottom: 1em;
+}
+
+.custom-select {
+  position: relative;
+}
+
+.select-css {
+  display: block;
+  font-size: 14px;
+  font-family: inherit;
+  font-weight: 400;
+  color: #606266;
+  line-height: 30px;
+  padding: 0 30px 0 20px;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: 1px solid #aaa;
+  box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
+  border-radius: 3px;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: #fff;
+  position: relative;
+  z-index: 10;
+}
+
+.select-css::-ms-expand {
+  display: none;
+}
+
+.select-css:hover {
+  border-color: #888;
+}
+
+.select-css:focus {
+  border-color: #C64C10;
+}
+
+
+.custom-select-icons {
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+  z-index: 20;
+  border: 1px solid white;
+  background: transparent;
+}
+
+.custom-select-options {
+  border: 1px solid #aaa;
+  border-radius: 0 0 0.25em 0.25em;
+  line-height: 1.5;
+  margin: 0;
+  margin-top: 0.5em;
+  padding: 0;
+  list-style-type: none;
+  font-weight: normal;
+  cursor: pointer;
+  z-index: 2;
+  position: absolute;
+  width: calc(100% - 1px);
+  background-color: #ffffff;
+}
+
+.custom-select-options li {
+  padding: 0 20px;
+  font-size: 14px;
+  line-height: 30px;
+  letter-spacing: 0px;
+  text-align: left;
+  color: #606266;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.custom-select-options li:hover {
+  color: #C64C10;
+  border-width: 0 0 0 1px;
+}
+
+.custom-select-options li:focus {
+  color: #C64C10;
+}
+</style>

package/src/components/titleBox/index.js

@@ -0,0 +1,7 @@
+import publicTable from './src/zydxTopicDry';
+
+publicTable.install = function(Vue) {
+    Vue.component(publicTable.name, publicTable);
+};
+
+export default publicTable;

package/src/components/titleBox/src/zydxStyle.css

@@ -0,0 +1,39 @@
+.title_box {
+  display: flex;
+  flex-direction: row;
+}
+
+.title_box>div:first-child {
+  flex-grow: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  line-height: 30px;
+}
+
+.title_box>div:last-child {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  text-indent: 0em;
+}
+
+.title_box_a {
+  width: 100%;
+  text-align: left;
+  line-height: 30px;
+  overflow: hidden;
+}
+
+.title_box_a>div {
+  display: inline;
+}
+
+.title_box_a>div:last-child {
+  float: right;
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+  height: 30px;
+  text-indent: 0em;
+}

package/src/components/titleBox/src/zydxTopicDry.vue

@@ -0,0 +1,54 @@
+/**
+* @描述：  题干一类的通用样式（比如：左侧文字，右侧按钮）
+* @创建时间: 2022-08-12 11:19:00
+* @内容:
+必传值：名字/类型/默认值/作用
+非必传值：
+isHide 是否都在一行显示， true 超出一行的部分。。。。。
+* @回调事件：
+@组件内方法：
+*/
+<template>
+    <div>
+        <div :class="title_style" :style="text_indent">
+            <div>
+                <slot name="title_slot"></slot>
+            </div>
+            <div>
+                <slot name="button_slot"></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'zydx-topic-dry',
+    computed: { // 计算属性
+        title_style () {
+            if (this.is_hide) {
+                return 'title_box'
+            }
+            return 'title_box_a'
+        },
+        text_indent () {
+          return "text-indent: "+this.indent_em+"em;"
+        }
+    },
+    props: {
+        is_hide: { // 是否都在一行显示， true 超出一行的部分显示...
+            type: Boolean,
+            default: false
+        },
+        indent_em: { // 首行缩进em
+            type: Number,
+            default: 0
+        }
+    },
+    mounted() {
+    }
+}
+</script>
+
+<style scoped src="./zydxStyle.css">
+</style>

package/src/components/tree/src/tree.vue

@@ -47,6 +47,13 @@ export default {
     height: {
       type: String,
       default: '30px'
+    },
+    /**
+     **    
+     */
+    default_expand_key: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
@@ -55,8 +62,8 @@ export default {
     }
   },
   mounted() {
-
   },
+
   watch: {
     data: {
       handler: function (v) {
@@ -74,16 +81,17 @@ export default {
       }
       let output = []
       for (const leaf of array) {
+        const { id } = leaf
         let next = {
           ...leaf,
-          isOpen: false,
+          isOpen: this.default_expand_key.includes(id),
           children: leaf.children ? this.traverse(leaf.children) : []
         }
         output.push(next)
       }
       return output
     },
-    handleClick: function (tree) {
+    handleClick: async function (tree) {
       this.$emit('update:select', tree)
       const { id } = tree
       this.treeData = this.treeData.map((item) => {
@@ -115,7 +123,8 @@ export default {
   <div class="tree"
        :key="tree.id"
        v-for="(tree) in treeData">
-    <div class="tree_node"
+    <div :data-id="tree.id"
+         class="tree_node"
          :class="{ 'tree_node_active': tree.isOpen }"
          @click="handleClick(tree)">
       <template v-if="tree.level">
@@ -143,6 +152,7 @@ export default {
       <tree :data="tree.children"
             :active_color="active_color"
             :border="border"
+            :default_expand_key="default_expand_key"
             :key="tree.id"
             @update:select="updateSelect"
             :accordian="accordian"></tree>
@@ -168,7 +178,7 @@ export default {
   justify-content: flex-start;
   text-align: left;
   height: v-bind(height);
-  cursor: pointer;
+  cursor: grabbing;
   gap: 16px;
   border-bottom: v-bind(border)
 }

package/src/index.js

@@ -5,6 +5,7 @@ import menuTree from './components/menuTree/index';
 import coloring from './components/coloring/index';
 import tree from './components/tree/index';
 import Pagination from './components/pagination/index';
+import Select from './components/select/index';
 
 const components = [
     Calendar,
@@ -12,7 +13,8 @@ const components = [
     menuTree,
     coloring,
     tree,
-    Pagination
+    Pagination,
+    Select
 ];
 
 function install(app) {
@@ -23,7 +25,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.1.17',
+    version: '1.2.21',
     install,
     Calendar,
     Message,
@@ -31,6 +33,7 @@ export default {
     menuTree,
     coloring,
     tree,
-    Pagination
+    Pagination,
+    Select
 };