zydx-plus 1.35.593 → 1.35.594

package/package.json

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

package/src/components/buttonGroup/index.js

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

package/src/components/buttonGroup/src/buttonGroup.vue

@@ -0,0 +1,264 @@
+
+<script lang="jsx">
+import { defineComponent, h } from 'vue';
+export const FILE_ERROR = {
+  SIZE: 'SIZE_ERROR',
+  TYPE: 'TYPE_ERROR'
+}
+export default defineComponent({
+  name: 'zydx-button-group',
+  props: {
+    buttons: {
+      type: Array,
+      default: () => []
+    },
+    accordian: {
+      type: Boolean,
+      default: false
+    },
+    reset: {
+      type: Boolean,
+      default: false
+    },
+    activeColor: {
+      type: String,
+      default: '#00ff00'
+    },
+  },
+  data() {
+    return {
+      active_state: [],
+      is_show_search: false,
+    }
+  },
+  mounted() {
+    this.active_state = this.buttons.map(() => false)
+  },
+  methods: {
+    trackClick(idx) {
+      if (this.accordian) {
+        this.active_state = this.active_state.map((_, i) => {
+          if (i === idx) {
+            return this.active_state[i] = !this.active_state[i]
+          } else {
+            return false
+          }
+        })
+      } else {
+        this.active_state[idx] = !this.active_state[idx]
+      }
+
+    },
+    onInputChange({ event, accept = [], onError = () => null, file_size = 2, cb, disabled }) {
+      if (disabled) return
+      let file = event.target.files[0]
+      if (file.size > file_size * 1024 * 1024) {
+        onError({ type: FILE_ERROR.SIZE })
+        return
+      }
+      if (accept.length && !accept.includes(file.type)) {
+        onError({ type: FILE_ERROR.TYPE })
+        return
+      }
+      cb(file)
+    },
+    showSearch: function () {
+      this.is_show_search = true
+    },
+    handleClose: function () {
+      this.is_show_search = false
+    },
+    handleSearch: function () {
+      this.$emit('search', this.$el.querySelector('.search_input').value)
+    },
+  },
+  watch: {
+    reset: function (v) {
+      if (v) {
+        this.active_state = this.buttons.map(() => false)
+        this.is_show_search = false
+      }
+    }
+  },
+  render() {
+    const { trackClick, onInputChange, showSearch, handleSearch, handleClose, is_show_search } = this
+    const render = ({ type, name, accept = '', file_size, flip = null, ignore = false, onClick, onError, disabled, idx, data_id }) => {
+      let active_name = flip ? flip : name
+      switch (type) {
+        case 'button': {
+          let curr_name = this.active_state[idx] ? active_name : name
+          let style = {color:this.active_state[idx] ? this.activeColor:disabled?'#717171': '#000000'}
+          let btn = h(
+            <button
+              class={this.active_state[idx] ?  'z-button z-active theme-text' : disabled ? 'z-button disabled' : 'z-button'}
+              data-id={data_id}
+              onClick={() => { onClick(); ignore ? () => null : trackClick(idx) }
+              }
+              disabled={disabled}
+              style={style}
+            >
+            </button>,
+            {
+              innerHTML: curr_name
+            }
+          )
+          return btn
+        }
+        case 'file': {
+          let btn = h('label', { class: disabled ? 'z-button disabled' : 'z-button' },
+            [
+              h('span', { innerHTML: name }),
+              disabled
+                ? null
+                : h('input', {
+                  type: 'file',
+                  class: 'hidden',
+                  accept: accept,
+                  'data-id': data_id,
+                  onClick: (e) => e.target.value = null,
+                  onChange: (e) => onInputChange({ event: e, accept, file_size, cb: onClick, onError, disabled })
+                })
+            ]
+          )
+          return btn
+        }
+        case 'search':
+          return is_show_search
+            ?
+            <div class="search_container">
+              <input type="text" class="search_input"></input>
+              <div class="icons">
+                <span class="search" onClick={handleSearch}>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="#333" d="m19.6 21l-6.3-6.3q-.75.6-1.725.95Q10.6 16 9.5 16q-2.725 0-4.612-1.887Q3 12.225 3 9.5q0-2.725 1.888-4.613Q6.775 3 9.5 3t4.613 1.887Q16 6.775 16 9.5q0 1.1-.35 2.075q-.35.975-.95 1.725l6.3 6.3ZM9.5 14q1.875 0 3.188-1.312Q14 11.375 14 9.5q0-1.875-1.312-3.188Q11.375 5 9.5 5Q7.625 5 6.312 6.312Q5 7.625 5 9.5q0 1.875 1.312 3.188Q7.625 14 9.5 14Z" /></svg>
+                </span>
+                <span class="separator"></span>
+                <span class="close" onClick={handleClose}>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="#333" d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6Z" /></svg>
+                </span>
+              </div>
+            </div>
+            : <button
+              class="z-button"
+              data-id={data_id}
+              onClick={showSearch}
+            >
+              {name}
+            </button>
+      }
+    }
+    return (
+      <div class="z-button-group">
+        {
+          this.buttons
+            .map(({ onClick, onError, disabled, file_size, accept, flip, ignore, type = "button", name, data_id = '' }, idx) => {
+              return render({ type, name, accept, file_size, flip, ignore, onClick, onError, disabled, idx, data_id })
+            }
+            )
+        }
+      </div>
+    )
+  }
+})
+</script>
+
+<style  scoped>
+.z-button-group {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  height: 30px;
+}
+
+.z-button {
+  margin: 1px;
+  width: auto;
+  min-width: 60px;
+  max-width: 60px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  height: 20px;
+  background-color: transparent;
+  color: #000000;
+  border: #000000 1px solid;
+  line-height: 18px;
+  border-radius: 3px;
+  font-size: 12px !important;
+  letter-spacing: 0px !important;
+  text-align: center;
+  cursor: pointer;
+  padding: 0 5px;
+  font-weight: normal;
+  box-sizing: border-box;
+}
+
+.z-button.disabled {
+  background-color: #ffffff;
+  color: #717171;
+  border: #717171 1px solid;
+}
+
+.search_container {
+  width: 180px;
+  height: 20px;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  padding-right: 40px;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+}
+
+.search_container .icons {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 18px;
+  width: 40px;
+  gap: 3px;
+  display: flex;
+  align-items: center;
+}
+
+.search_container .icons .separator {
+  width: 1px;
+  height: 14px;
+  background-color: #ccc;
+}
+
+.search_container .icons .search,
+.search_container .icons .close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.search_input {
+  width: 100%;
+  height: 18px;
+  border: none;
+}
+
+.z-button.active {
+  color: #00ff00 !important;
+}
+/*
+ */
+/* .z-button.textActivep {
+  color: rgba(75, 12, 119, 1) !important;
+}  */
+
+
+.z-button:disabled {
+  background-color: #ffffff;
+  color: #717171;
+  border: #717171 1px solid;
+}
+
+.hidden {
+  display: none;
+}
+</style>

package/src/index.js

@@ -89,7 +89,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.35.593',
+    version: '1.35.594',
     install,
     Calendar,
     Message,