@web-utils/component 2.7.36 → 2.8.0

package/dist/components/keyboard/index.js

@@ -1,469 +0,0 @@
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.js";
-let Keyboard$1 = class Keyboard {
-  constructor(obj) {
-    if (typeof obj !== "object") {
-      console.error('aKeyboard: The obj parameter needs to be an object <In "new aKeyboard()">');
-      return;
-    }
-    this.obj = obj;
-    const el = document.querySelector(obj.el);
-    let keyboardStyle = "";
-    if (typeof obj.style === "object") {
-      for (const i in obj.style) {
-        keyboardStyle += `${i}: ${obj.style[i]};`;
-      }
-    }
-    let html = `<div class="akeyboard-keyboard${obj.fixedBottomCenter ? " akeyboard-keyboard-fixedBottomCenter" : ""}" style="${keyboardStyle}">`;
-    const numberKeys = [];
-    for (let i = 1; i < 10; i++) {
-      numberKeys.push(i.toString());
-    }
-    numberKeys.push("0");
-    const keys = obj.keys || [
-      ["`"].concat(numberKeys).concat([
-        "-",
-        "=",
-        "Delete"
-      ]),
-      ["Tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
-      ["Caps", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],
-      ["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],
-      ["Space"]
-    ];
-    let thisKeys;
-    const shiftKey = [];
-    const capsKey = [];
-    for (let i = 0; i < keys.length; i++) {
-      shiftKey.push([]);
-      capsKey.push([]);
-      thisKeys = keys[i];
-      for (let a = 0; a < thisKeys.length; a++) {
-        if (thisKeys[a].length === 1) {
-          capsKey[i].push(thisKeys[a].toUpperCase());
-          switch (thisKeys[a]) {
-            case "`":
-              shiftKey[i].push("~");
-              continue;
-            case "1":
-              shiftKey[i].push("!");
-              continue;
-            case "2":
-              shiftKey[i].push("@");
-              continue;
-            case "3":
-              shiftKey[i].push("#");
-              continue;
-            case "4":
-              shiftKey[i].push("$");
-              continue;
-            case "5":
-              shiftKey[i].push("%");
-              continue;
-            case "6":
-              shiftKey[i].push("^");
-              continue;
-            case "7":
-              shiftKey[i].push("&");
-              continue;
-            case "8":
-              shiftKey[i].push("*");
-              continue;
-            case "9":
-              shiftKey[i].push("(");
-              continue;
-            case "0":
-              shiftKey[i].push(")");
-              continue;
-            case "-":
-              shiftKey[i].push("_");
-              continue;
-            case "=":
-              shiftKey[i].push("+");
-              continue;
-            case "[":
-              shiftKey[i].push("{");
-              continue;
-            case "]":
-              shiftKey[i].push("}");
-              continue;
-            case "\\":
-              shiftKey[i].push("|");
-              continue;
-            case ";":
-              shiftKey[i].push(":");
-              continue;
-            case "'":
-              shiftKey[i].push('"');
-              continue;
-            case ",":
-              shiftKey[i].push("<");
-              continue;
-            case ".":
-              shiftKey[i].push(">");
-              continue;
-            case "/":
-              shiftKey[i].push("?");
-              continue;
-          }
-          shiftKey[i].push(thisKeys[a].toUpperCase());
-          continue;
-        }
-        shiftKey[i].push(thisKeys[a]);
-        capsKey[i].push(thisKeys[a]);
-      }
-    }
-    for (let i = 0; i < keys.length; i++) {
-      thisKeys = keys[i];
-      html += '<div class="akeyboard-keyboard-innerKeys">';
-      for (let a = 0; a < thisKeys.length; a++) {
-        html += `<div class="akeyboard-keyboard-keys akeyboard-keyboard-keys-${thisKeys[a]}">${thisKeys[a]}</div>`;
-      }
-      html += "</div>";
-    }
-    html += "</div>";
-    el.innerHTML = html;
-    let containShift = false;
-    keys.forEach((key) => {
-      if (key.includes("Shift")) {
-        containShift = true;
-      }
-    });
-    if (containShift) {
-      const elKeysEl = document.querySelectorAll(`${obj.el} .akeyboard-keyboard-keys-Shift`);
-      elKeysEl.forEach((el2) => {
-        el2.onclick = function() {
-          if (!this.isShift) {
-            const caps = document.querySelector(`${obj.el} .akeyboard-keyboard-keys-Caps`);
-            if (caps && caps.isCaps) {
-              return;
-            }
-            el2.isShift = true;
-            el2.innerHTML = "SHIFT";
-            this.classList.add("keyboard-keyboard-keys-focus");
-            const keysInnerEl2 = document.querySelectorAll(`${obj.el} .akeyboard-keyboard-innerKeys`);
-            let thisEl2;
-            for (let i = 0; i < keysInnerEl2.length; i++) {
-              thisEl2 = keysInnerEl2[i];
-              for (let a = 0; a < thisEl2.childNodes.length; a++) {
-                if (shiftKey[i][a] === "Shift") {
-                  continue;
-                }
-                thisEl2.childNodes[a].innerHTML = shiftKey[i][a];
-              }
-            }
-            return;
-          }
-          el2.isShift = false;
-          el2.innerHTML = "Shift";
-          this.classList.remove("keyboard-keyboard-keys-focus");
-          const keysInnerEl = document.querySelectorAll(`${obj.el} .akeyboard-keyboard-innerKeys`);
-          let thisEl;
-          for (let i = 0; i < keysInnerEl.length; i++) {
-            thisEl = keysInnerEl[i];
-            for (let a = 0; a < thisEl.childNodes.length; a++) {
-              thisEl.childNodes[a].innerHTML = keys[i][a];
-            }
-          }
-        };
-      });
-    }
-    let containCaps = false;
-    keys.forEach((key) => {
-      if (key.includes("Caps")) {
-        containCaps = true;
-      }
-    });
-    if (containCaps) {
-      const elCapsEl = document.querySelectorAll(`${obj.el} .akeyboard-keyboard-keys-Caps`);
-      elCapsEl.forEach((el2) => {
-        el2.onclick = function() {
-          if (!this.isCaps) {
-            const shift = document.querySelector(`${obj.el} .akeyboard-keyboard-keys-Shift`);
-            if (shift && shift.isShift) {
-              return;
-            }
-            this.isCaps = true;
-            this.classList.add("keyboard-keyboard-keys-focus");
-            const keysInnerEl2 = document.querySelectorAll(`${obj.el} .akeyboard-keyboard-innerKeys`);
-            let thisEl2;
-            for (let i = 0; i < keysInnerEl2.length; i++) {
-              thisEl2 = keysInnerEl2[i];
-              for (let a = 0; a < thisEl2.childNodes.length; a++) {
-                thisEl2.childNodes[a].innerHTML = capsKey[i][a];
-              }
-            }
-            return;
-          }
-          this.isCaps = false;
-          this.classList.remove("keyboard-keyboard-keys-focus");
-          const keysInnerEl = document.querySelectorAll(`${obj.el} .akeyboard-keyboard-innerKeys`);
-          let thisEl;
-          for (let i = 0; i < keysInnerEl.length; i++) {
-            thisEl = keysInnerEl[i];
-            for (let a = 0; a < thisEl.childNodes.length; a++) {
-              thisEl.childNodes[a].innerHTML = keys[i][a];
-            }
-          }
-        };
-      });
-    }
-  }
-  inputOn(inputEle, type, fn, customClick) {
-    if (typeof inputEle !== "string") {
-      console.error('aKeyboard: The inputEle parameter needs to be a string <In "aKeyboard.inputOn()">');
-      return;
-    }
-    if (typeof type !== "string") {
-      console.error('aKeyboard: The type parameter needs to be a string <In "aKeyboard.inputOn()">');
-      return;
-    }
-    const inputEl = document.querySelector(inputEle);
-    const elKeysEl = document.querySelectorAll(`${this.obj.el} .akeyboard-keyboard-keys`);
-    for (let i = 0; i < elKeysEl.length; i++) {
-      if (["Shift", "Caps"].includes(elKeysEl[i].innerHTML)) {
-        continue;
-      }
-      if (elKeysEl[i].innerHTML === "Delete") {
-        elKeysEl[i].onclick = function() {
-          inputEl[type] = inputEl[type].substr(0, inputEl[type].length - 1);
-          fn("Delete", inputEl[type]);
-        };
-        continue;
-      }
-      if (elKeysEl[i].innerHTML === "Tab") {
-        elKeysEl[i].onclick = function() {
-          inputEl[type] += "  ";
-          fn("Tab", inputEl[type]);
-        };
-        continue;
-      }
-      if (elKeysEl[i].innerHTML === "Enter") {
-        elKeysEl[i].onclick = function() {
-          inputEl[type] += "\n";
-          fn("Enter", inputEl[type]);
-        };
-        continue;
-      }
-      if (elKeysEl[i].innerHTML === "Space") {
-        elKeysEl[i].onclick = function() {
-          inputEl[type] += " ";
-          fn("Space", inputEl[type]);
-        };
-        continue;
-      }
-      if (customClick && typeof customClick === "object" && Object.keys(customClick).length > 0 && customClick[elKeysEl[i].innerHTML]) {
-        elKeysEl[i].onclick = customClick[elKeysEl[i].innerHTML];
-      } else {
-        elKeysEl[i].onclick = function() {
-          inputEl[type] += this.innerText;
-          fn(this.innerText, inputEl[type]);
-        };
-      }
-    }
-  }
-  onclick(btn, fn) {
-    if (typeof btn !== "string") {
-      console.error('aKeyboard: The btn parameter needs to be a string <In "aKeyboard.onclick()">');
-      return;
-    }
-    if (typeof fn !== "function") {
-      console.error('aKeyboard: The fn parameter needs to be a function <In "aKeyboard.onclick()">');
-      return;
-    }
-    const elKeysEl = document.querySelector(`${this.obj.el} .akeyboard-keyboard-keys-${btn}`);
-    if (elKeysEl)
-      elKeysEl.onclick = fn;
-    else
-      console.error(`Can not find key: ${btn}`);
-  }
-};
-class NumberKeyboard {
-  constructor(obj) {
-    if (typeof obj !== "object") {
-      console.error('aKeyboard: The obj parameter needs to be an object <In "new aKeyboard()">');
-      return;
-    }
-    this.obj = obj;
-    const el = document.querySelector(obj.el);
-    let keyboardStyle = "";
-    if (typeof obj.style === "object") {
-      for (const i in obj.style) {
-        keyboardStyle += `${i}: ${obj.style[i]};`;
-      }
-    }
-    let html = `<div class="akeyboard-numberKeyboard${obj.fixedBottomCenter ? " akeyboard-keyboard-fixedBottomCenter" : ""}" style="${keyboardStyle}">`;
-    html += '<div class="akeyboard-keyboard-innerKeys">';
-    for (let i = 1; i < 10; i++) {
-      html += `<div class="akeyboard-keyboard-keys akeyboard-keyboard-keys-${i}">${i}</div>`;
-      if (i % 3 === 0) {
-        html += '</div><div class="akeyboard-keyboard-innerKeys">';
-      }
-    }
-    html += '<div class="akeyboard-keyboard-keys akeyboard-keyboard-keys-0">0</div><div class="akeyboard-keyboard-keys akeyboard-keyboard-keys-Delete">Delete</div></div><div class="akeyboard-keyboard-innerKeys"><div class="akeyboard-keyboard-keys akeyboard-numberKeyboard-keys-Enter">Enter</div></div>';
-    html += "</div>";
-    el.innerHTML = html;
-  }
-  inputOn(inputEle, type, fn, customClick) {
-    if (typeof inputEle !== "string") {
-      console.error('aKeyboard: The inputEle parameter needs to be a string <In "aKeyboard.inputOn()">');
-      return;
-    }
-    if (typeof type !== "string") {
-      console.error('aKeyboard: The type parameter needs to be a string <In "aKeyboard.inputOn()">');
-      return;
-    }
-    const inputEl = document.querySelector(inputEle);
-    const elKeysEl = document.querySelectorAll(`${this.obj.el} .akeyboard-keyboard-keys`);
-    for (let i = 0; i < elKeysEl.length; i++) {
-      if (elKeysEl[i].innerHTML === "Delete") {
-        elKeysEl[i].onclick = function() {
-          inputEl[type] = inputEl[type].substr(0, inputEl[type].length - 1);
-          fn("Delete", inputEl[type]);
-        };
-        continue;
-      }
-      if (elKeysEl[i].innerHTML === "Enter") {
-        elKeysEl[i].onclick = function() {
-          inputEl[type] += "\n";
-          fn("Enter", inputEl[type]);
-        };
-        continue;
-      }
-      if (customClick && typeof customClick === "object" && Object.keys(customClick).length > 0 && customClick[elKeysEl[i].innerHTML]) {
-        elKeysEl[i].onclick = customClick[elKeysEl[i].innerHTML];
-      } else {
-        elKeysEl[i].onclick = function() {
-          inputEl[type] += this.innerText;
-          fn(this.innerText, inputEl[type]);
-        };
-      }
-    }
-  }
-  onclick(btn, fn) {
-    if (typeof btn !== "string") {
-      console.error('aKeyboard: The btn parameter needs to be a string <In "aKeyboard.onclick()">');
-      return;
-    }
-    if (typeof fn !== "function") {
-      console.error('aKeyboard: The fn parameter needs to be a function <In "aKeyboard.onclick()">');
-      return;
-    }
-    const elKeysEl = document.querySelector(`${this.obj.el} .akeyboard-keyboard-keys-${btn}`);
-    if (elKeysEl)
-      elKeysEl.onclick = fn;
-    else
-      console.error(`Can not find key: ${btn}`);
-  }
-}
-var render = function() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", {
-    class: ["avue-keyboard", _vm.className]
-  }, [_c("div", {
-    attrs: {
-      "id": "keyboard"
-    }
-  })]);
-};
-var staticRenderFns = [];
-const Keyboard_vue_vue_type_style_index_0_lang = "";
-const __vue2_script = {
-  name: "Keyboard",
-  props: {
-    ele: {
-      type: String,
-      required: true
-    },
-    keys: Array,
-    theme: {
-      type: String,
-      default: "default",
-      validator: (value) => {
-        return ["default", "dark", "green", "classic"].includes(value);
-      }
-    },
-    type: {
-      type: String,
-      default: "default",
-      validator: (value) => {
-        return ["default", "number", "mobile"].includes(value);
-      }
-    },
-    fixedBottomCenter: {
-      type: Boolean,
-      default: false
-    },
-    rebind: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      customClick: {}
-    };
-  },
-  computed: {
-    className() {
-      return `avue-keyboard--${this.theme}`;
-    }
-  },
-  watch: {
-    ele() {
-      this.init();
-    }
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    init() {
-      if (!this.ele)
-        return;
-      let keyboard;
-      const config = {
-        el: "#keyboard",
-        style: {},
-        keys: this.keys,
-        fixedBottomCenter: this.fixedBottomCenter
-      };
-      if (this.type === "default")
-        keyboard = new Keyboard$1(config);
-      else if (this.type === "number")
-        keyboard = new NumberKeyboard(config);
-      const ele = this.ele.indexOf("#") === 0 ? this.ele.substring(1) : this.ele;
-      keyboard.inputOn(`#${ele}`, "value", (e, val) => {
-        this.$emit("click", e, val);
-      }, this.rebind ? this.customClick : null);
-      this.keyboard = keyboard;
-    },
-    bindClick(btn, fn) {
-      this.keyboard.onclick(btn, fn);
-      this.customClick[btn] = fn;
-    }
-  }
-};
-const __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  __vue2_script,
-  render,
-  staticRenderFns,
-  false,
-  __vue2_injectStyles,
-  null,
-  null,
-  null
-);
-function __vue2_injectStyles(context) {
-  for (let o in __cssModules) {
-    this[o] = __cssModules[o];
-  }
-}
-const Keyboard2 = /* @__PURE__ */ function() {
-  return __component__.exports;
-}();
-export {
-  Keyboard2 as default
-};