@ruixinkeji/prism-ui 1.0.14 → 1.0.16

package/dist/dev/mp-weixin/components/PrismLicensePlateInput/PrismLicensePlateInput.js

@@ -0,0 +1,449 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const store_app = require("../../store/app.js");
+const _sfc_main = {
+  __name: "PrismLicensePlateInput",
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue", "complete"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const appStore = store_app.useAppStore();
+    const isNewEnergy = common_vendor.ref(false);
+    const showKeyboard = common_vendor.ref(false);
+    const activeIndex = common_vendor.ref(-1);
+    const firstKeyboardMode = common_vendor.ref("province");
+    const provinces = [
+      "京",
+      "津",
+      "沪",
+      "渝",
+      "冀",
+      "豫",
+      "云",
+      "辽",
+      "黑",
+      "湘",
+      "皖",
+      "鲁",
+      "新",
+      "苏",
+      "浙",
+      "赣",
+      "鄂",
+      "桂",
+      "甘",
+      "晋",
+      "蒙",
+      "陕",
+      "吉",
+      "闽",
+      "贵",
+      "粤",
+      "川",
+      "青",
+      "藏",
+      "琼",
+      "宁"
+    ];
+    const provincePinyinMap = {
+      "京": "J",
+      "津": "J",
+      "沪": "H",
+      "渝": "Y",
+      "冀": "J",
+      "豫": "Y",
+      "云": "Y",
+      "辽": "L",
+      "黑": "H",
+      "湘": "X",
+      "皖": "W",
+      "鲁": "L",
+      "新": "X",
+      "苏": "S",
+      "浙": "Z",
+      "赣": "G",
+      "鄂": "E",
+      "桂": "G",
+      "甘": "G",
+      "晋": "J",
+      "蒙": "M",
+      "陕": "S",
+      "吉": "J",
+      "闽": "M",
+      "贵": "G",
+      "粤": "Y",
+      "川": "C",
+      "青": "Q",
+      "藏": "Z",
+      "琼": "Q",
+      "宁": "N"
+    };
+    const letterGroups = [
+      ["C", "E"],
+      // 川、鄂
+      ["G", "H"],
+      // 赣桂甘贵、沪黑
+      ["J", "L"],
+      // 京津冀晋吉、辽鲁
+      ["M", "N"],
+      // 蒙闽、宁
+      ["Q", "S"],
+      // 青琼、苏陕
+      ["W", "X"],
+      // 皖、新湘
+      ["Y", "Z"]
+      // 渝豫云粤、浙藏
+    ];
+    const selectedLetters = common_vendor.ref([]);
+    function selectLetterGroup(group) {
+      if (touchSelectedGroup && touchSelectedGroup.every((l) => group.includes(l))) {
+        return;
+      }
+      const isSelected = group.every((l) => selectedLetters.value.includes(l));
+      if (isSelected) {
+        selectedLetters.value = [];
+      } else {
+        selectedLetters.value = [...group];
+      }
+    }
+    function isGroupSelected(group) {
+      return group.every((l) => selectedLetters.value.includes(l));
+    }
+    function isProvinceHighlight(province) {
+      if (selectedLetters.value.length === 0) return false;
+      return selectedLetters.value.includes(provincePinyinMap[province]);
+    }
+    let isTouchingLetterIndex = false;
+    let touchSelectedGroup = null;
+    function onLetterIndexTouchStart(e) {
+      isTouchingLetterIndex = true;
+      touchSelectedGroup = null;
+      const touch = e.touches[0];
+      updateLetterIndexByTouch(touch);
+    }
+    function onLetterIndexTouchMove(e) {
+      if (!isTouchingLetterIndex) return;
+      const touch = e.touches[0];
+      updateLetterIndexByTouch(touch);
+    }
+    function onLetterIndexTouchEnd() {
+      isTouchingLetterIndex = false;
+      setTimeout(() => {
+        touchSelectedGroup = null;
+      }, 100);
+    }
+    function updateLetterIndexByTouch(touch) {
+      const x = touch.clientX;
+      const y = touch.clientY;
+      common_vendor.index.createSelectorQuery().selectAll(".letter-index").boundingClientRect((rects) => {
+        if (!rects) return;
+        for (let i = 0; i < rects.length; i++) {
+          const rect = rects[i];
+          if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+            const group = letterGroups[i];
+            if (group && !isGroupSelected(group)) {
+              selectedLetters.value = [...group];
+              touchSelectedGroup = group;
+            }
+            break;
+          }
+        }
+      }).exec();
+    }
+    const specialChars = [
+      { char: "警", type: "white" },
+      { char: "领", type: "black" },
+      { char: "港", type: "black" },
+      { char: "澳", type: "black" },
+      { char: "学", type: "yellow" },
+      { char: "挂", type: "yellow" },
+      { char: "使", type: "black" }
+    ];
+    const letterRows = [
+      ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
+      ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
+      ["Z", "X", "C", "V", "B", "N", "M"]
+    ];
+    const numberRow = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
+    const plateLength = common_vendor.computed(() => isNewEnergy.value ? 8 : 7);
+    function getSpecialCharType(char) {
+      if (!char) return null;
+      const found = specialChars.find((item) => item.char === char);
+      return found ? found.type : null;
+    }
+    const plateArray = common_vendor.computed(() => {
+      const value = props.modelValue;
+      if (!value) return [];
+      return value.split("").slice(0, plateLength.value);
+    });
+    const isFirstTwoLetters = common_vendor.computed(() => {
+      const arr = plateArray.value;
+      if (arr.length < 2) return false;
+      const letterRegex = /^[A-Z]$/;
+      return letterRegex.test(arr[0]) && letterRegex.test(arr[1]);
+    });
+    const keyboardTitle = common_vendor.computed(() => {
+      if (activeIndex.value === 0) {
+        return firstKeyboardMode.value === "province" ? "选择省份" : "选择字母";
+      }
+      if (activeIndex.value === 1) return "选择字母";
+      if (activeIndex.value === 2 && isFirstTwoLetters.value) return "选择省份";
+      return "输入字符";
+    });
+    const showLetterInFirst = common_vendor.computed(() => {
+      return activeIndex.value === 0 && firstKeyboardMode.value === "letter";
+    });
+    const showProvinceSection = common_vendor.computed(() => {
+      if (activeIndex.value === 0) return firstKeyboardMode.value === "province";
+      if (activeIndex.value === 2 && isFirstTwoLetters.value) return true;
+      return false;
+    });
+    const showLetterSection = common_vendor.computed(() => {
+      if (activeIndex.value === 0 && firstKeyboardMode.value === "letter") return true;
+      if (activeIndex.value === 1) return true;
+      if (activeIndex.value === 2 && isFirstTwoLetters.value) return false;
+      if (activeIndex.value >= 2) return true;
+      return false;
+    });
+    const showNumberSection = common_vendor.computed(() => {
+      if (activeIndex.value === 0 && firstKeyboardMode.value === "letter") return true;
+      if (activeIndex.value === 1) return true;
+      if (activeIndex.value === 2 && isFirstTwoLetters.value) return false;
+      return activeIndex.value >= 2;
+    });
+    const showSpecialSection = common_vendor.computed(() => {
+      if (activeIndex.value === 0 && firstKeyboardMode.value === "letter") return true;
+      if (activeIndex.value === 1) return true;
+      if (activeIndex.value === 2 && isFirstTwoLetters.value) return false;
+      return activeIndex.value >= 2;
+    });
+    const shouldDisableIO = common_vendor.computed(() => {
+      return activeIndex.value >= 2;
+    });
+    const showDoneButton = common_vendor.computed(() => {
+      if (!isNewEnergy.value && activeIndex.value === 6) return true;
+      if (isNewEnergy.value && activeIndex.value === 7) return true;
+      return false;
+    });
+    function showKeyboardAt(index) {
+      activeIndex.value = index;
+      if (index === 0) {
+        firstKeyboardMode.value = "province";
+      }
+      showKeyboard.value = true;
+    }
+    function toggleFirstKeyboard() {
+      firstKeyboardMode.value = firstKeyboardMode.value === "province" ? "letter" : "province";
+    }
+    function handleNewEnergyClick() {
+      if (!isNewEnergy.value) {
+        isNewEnergy.value = true;
+      }
+      showKeyboardAt(7);
+    }
+    function closeKeyboard() {
+      showKeyboard.value = false;
+      activeIndex.value = -1;
+    }
+    function inputChar(c) {
+      if (shouldDisableIO.value && (c === "I" || c === "O")) return;
+      const currentValue = props.modelValue;
+      let arr = currentValue.split("");
+      while (arr.length < activeIndex.value) {
+        arr.push("");
+      }
+      arr[activeIndex.value] = c;
+      emit("update:modelValue", arr.join(""));
+      if (activeIndex.value < 6) {
+        activeIndex.value = activeIndex.value + 1;
+      } else if (activeIndex.value === 6) {
+        isNewEnergy.value = true;
+        activeIndex.value = 7;
+      } else if (activeIndex.value === 7) {
+        closeKeyboard();
+        if (arr.join("").length === 8) {
+          emit("complete", arr.join(""));
+        }
+      }
+    }
+    function deleteChar() {
+      const currentValue = props.modelValue;
+      let arr = currentValue.split("");
+      if (activeIndex.value >= 0 && arr[activeIndex.value]) {
+        arr[activeIndex.value] = "";
+        while (arr.length > 0 && arr[arr.length - 1] === "") {
+          arr.pop();
+        }
+        emit("update:modelValue", arr.join(""));
+      } else if (activeIndex.value > 0) {
+        const prevIndex = activeIndex.value - 1;
+        arr[prevIndex] = "";
+        while (arr.length > 0 && arr[arr.length - 1] === "") {
+          arr.pop();
+        }
+        emit("update:modelValue", arr.join(""));
+        activeIndex.value = prevIndex;
+      } else if (activeIndex.value === 0 && arr[0]) {
+        emit("update:modelValue", "");
+      }
+    }
+    common_vendor.watch(isNewEnergy, (val) => {
+      if (!val && props.modelValue.length > 7) {
+        emit("update:modelValue", props.modelValue.slice(0, 7));
+      }
+    });
+    return (_ctx, _cache) => {
+      return common_vendor.e({
+        a: common_vendor.t(plateArray.value[0] || ""),
+        b: activeIndex.value === 0 ? 1 : "",
+        c: plateArray.value[0] ? 1 : "",
+        d: getSpecialCharType(plateArray.value[0]) === "white" ? 1 : "",
+        e: getSpecialCharType(plateArray.value[0]) === "black" ? 1 : "",
+        f: getSpecialCharType(plateArray.value[0]) === "yellow" ? 1 : "",
+        g: common_vendor.o(($event) => showKeyboardAt(0)),
+        h: common_vendor.t(plateArray.value[1] || ""),
+        i: activeIndex.value === 1 ? 1 : "",
+        j: plateArray.value[1] ? 1 : "",
+        k: getSpecialCharType(plateArray.value[1]) === "white" ? 1 : "",
+        l: getSpecialCharType(plateArray.value[1]) === "black" ? 1 : "",
+        m: getSpecialCharType(plateArray.value[1]) === "yellow" ? 1 : "",
+        n: common_vendor.o(($event) => showKeyboardAt(1)),
+        o: common_vendor.f(5, (i, k0, i0) => {
+          return {
+            a: common_vendor.t(plateArray.value[i + 1] || ""),
+            b: i,
+            c: activeIndex.value === i + 1 ? 1 : "",
+            d: plateArray.value[i + 1] ? 1 : "",
+            e: getSpecialCharType(plateArray.value[i + 1]) === "white" ? 1 : "",
+            f: getSpecialCharType(plateArray.value[i + 1]) === "black" ? 1 : "",
+            g: getSpecialCharType(plateArray.value[i + 1]) === "yellow" ? 1 : "",
+            h: common_vendor.o(($event) => showKeyboardAt(i + 1), i)
+          };
+        }),
+        p: getSpecialCharType(plateArray.value[7]) ? 1 : "",
+        q: isNewEnergy.value
+      }, isNewEnergy.value ? {
+        r: common_vendor.t(plateArray.value[7] || "")
+      } : {}, {
+        s: isNewEnergy.value && !getSpecialCharType(plateArray.value[7]) ? 1 : "",
+        t: !isNewEnergy.value ? 1 : "",
+        v: activeIndex.value === 7 ? 1 : "",
+        w: plateArray.value[7] ? 1 : "",
+        x: getSpecialCharType(plateArray.value[7]) === "white" ? 1 : "",
+        y: getSpecialCharType(plateArray.value[7]) === "black" ? 1 : "",
+        z: getSpecialCharType(plateArray.value[7]) === "yellow" ? 1 : "",
+        A: common_vendor.o(handleNewEnergyClick),
+        B: showKeyboard.value
+      }, showKeyboard.value ? common_vendor.e({
+        C: common_vendor.t(keyboardTitle.value),
+        D: activeIndex.value === 0
+      }, activeIndex.value === 0 ? {
+        E: common_vendor.t(firstKeyboardMode.value === "province" ? "切换字母" : "切换省份"),
+        F: common_vendor.o(toggleFirstKeyboard)
+      } : {}, {
+        G: common_vendor.o(closeKeyboard),
+        H: showProvinceSection.value && !showLetterInFirst.value
+      }, showProvinceSection.value && !showLetterInFirst.value ? {
+        I: common_vendor.f(letterGroups, (group, idx, i0) => {
+          return {
+            a: common_vendor.t(group.join("/")),
+            b: idx,
+            c: isGroupSelected(group) ? 1 : "",
+            d: idx,
+            e: common_vendor.o(($event) => selectLetterGroup(group), idx)
+          };
+        }),
+        J: common_vendor.o(onLetterIndexTouchStart),
+        K: common_vendor.o(onLetterIndexTouchMove),
+        L: common_vendor.o(onLetterIndexTouchEnd),
+        M: common_vendor.f(provinces.slice(0, 8), (p, k0, i0) => {
+          return {
+            a: common_vendor.t(p),
+            b: p,
+            c: isProvinceHighlight(p) ? 1 : "",
+            d: common_vendor.o(($event) => inputChar(p), p)
+          };
+        }),
+        N: common_vendor.f(provinces.slice(8, 16), (p, k0, i0) => {
+          return {
+            a: common_vendor.t(p),
+            b: p,
+            c: isProvinceHighlight(p) ? 1 : "",
+            d: common_vendor.o(($event) => inputChar(p), p)
+          };
+        }),
+        O: common_vendor.f(provinces.slice(16, 24), (p, k0, i0) => {
+          return {
+            a: common_vendor.t(p),
+            b: p,
+            c: isProvinceHighlight(p) ? 1 : "",
+            d: common_vendor.o(($event) => inputChar(p), p)
+          };
+        }),
+        P: common_vendor.f(provinces.slice(24, 31), (p, k0, i0) => {
+          return {
+            a: common_vendor.t(p),
+            b: p,
+            c: isProvinceHighlight(p) ? 1 : "",
+            d: common_vendor.o(($event) => inputChar(p), p)
+          };
+        }),
+        Q: common_vendor.o(deleteChar)
+      } : {}, {
+        R: showNumberSection.value
+      }, showNumberSection.value ? {
+        S: common_vendor.f(numberRow, (n, k0, i0) => {
+          return {
+            a: common_vendor.t(n),
+            b: n,
+            c: common_vendor.o(($event) => inputChar(n), n)
+          };
+        })
+      } : {}, {
+        T: showLetterSection.value || showLetterInFirst.value
+      }, showLetterSection.value || showLetterInFirst.value ? {
+        U: common_vendor.f(letterRows, (row, idx, i0) => {
+          return common_vendor.e({
+            a: common_vendor.f(row, (l, k1, i1) => {
+              return {
+                a: common_vendor.t(l),
+                b: l,
+                c: shouldDisableIO.value && (l === "I" || l === "O") ? 1 : "",
+                d: common_vendor.o(($event) => inputChar(l), l)
+              };
+            }),
+            b: idx === 2
+          }, idx === 2 ? {
+            c: common_vendor.o(deleteChar, idx)
+          } : {}, {
+            d: idx
+          });
+        })
+      } : {}, {
+        V: showSpecialSection.value
+      }, showSpecialSection.value ? common_vendor.e({
+        W: common_vendor.f(specialChars, (item, k0, i0) => {
+          return {
+            a: common_vendor.t(item.char),
+            b: item.char,
+            c: common_vendor.n(item.type),
+            d: common_vendor.o(($event) => inputChar(item.char), item.char)
+          };
+        }),
+        X: showDoneButton.value
+      }, showDoneButton.value ? {
+        Y: common_vendor.o(closeKeyboard)
+      } : {}) : {}) : {}, {
+        Z: common_vendor.unref(appStore).isDarkMode ? 1 : ""
+      });
+    };
+  }
+};
+wx.createComponent(_sfc_main);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/components/PrismLicensePlateInput/PrismLicensePlateInput.js.map

package/dist/dev/mp-weixin/components/PrismLicensePlateInput/PrismLicensePlateInput.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/dist/dev/mp-weixin/components/PrismLicensePlateInput/PrismLicensePlateInput.wxml

@@ -0,0 +1 @@
+<view class="{{['prism-license-plate-input', Z && 'dark-mode']}}"><view class="plate-boxes"><view class="{{['plate-box', 'province', b && 'active', c && 'filled', d && 'special-white', e && 'special-black', f && 'special-yellow']}}" bindtap="{{g}}"><text class="plate-text">{{a}}</text></view><view class="{{['plate-box', 'letter', i && 'active', j && 'filled', k && 'special-white', l && 'special-black', m && 'special-yellow']}}" bindtap="{{n}}"><text class="plate-text">{{h}}</text></view><view class="plate-dot"></view><view wx:for="{{o}}" wx:for-item="i" wx:key="b" class="{{['plate-box', i.c && 'active', i.d && 'filled', i.e && 'special-white', i.f && 'special-black', i.g && 'special-yellow']}}" bindtap="{{i.h}}"><text class="plate-text">{{i.a}}</text></view><view class="plate-box-wrapper new-energy-wrapper"><text class="{{['new-energy-label', p && 'hidden']}}">新能源</text><view class="{{['plate-box', s && 'new-energy', t && 'new-energy-optional', v && 'active', w && 'filled', x && 'special-white', y && 'special-black', z && 'special-yellow']}}" bindtap="{{A}}"><text wx:if="{{q}}" class="plate-text">{{r}}</text><text wx:else class="optional-icon fa fa-plus"></text></view></view></view><view wx:if="{{B}}" class="keyboard-modal"><view class="keyboard-content"><view class="keyboard-header"><view class="header-left"><text class="keyboard-title">{{C}}</text><view wx:if="{{D}}" class="switch-btn" bindtap="{{F}}"><text>{{E}}</text></view></view><text class="keyboard-close fa fa-times" bindtap="{{G}}"></text></view><scroll-view class="keyboard-body" scroll-y><view wx:if="{{H}}" class="keyboard-section"><view class="keyboard-row letter-index-row" bindtouchstart="{{J}}" bindtouchmove="{{K}}" bindtouchend="{{L}}"><view wx:for="{{I}}" wx:for-item="group" wx:key="b" class="{{['key-item', 'letter-index', group.c && 'active']}}" data-index="{{group.d}}" bindtap="{{group.e}}">{{group.a}}</view></view><view class="keyboard-qwerty province-qwerty"><view class="keyboard-row"><view wx:for="{{M}}" wx:for-item="p" wx:key="b" class="{{['key-item', p.c && 'highlight']}}" bindtap="{{p.d}}">{{p.a}}</view></view><view class="keyboard-row"><view wx:for="{{N}}" wx:for-item="p" wx:key="b" class="{{['key-item', p.c && 'highlight']}}" bindtap="{{p.d}}">{{p.a}}</view></view><view class="keyboard-row"><view wx:for="{{O}}" wx:for-item="p" wx:key="b" class="{{['key-item', p.c && 'highlight']}}" bindtap="{{p.d}}">{{p.a}}</view></view><view class="keyboard-row"><view wx:for="{{P}}" wx:for-item="p" wx:key="b" class="{{['key-item', p.c && 'highlight']}}" bindtap="{{p.d}}">{{p.a}}</view><view class="key-item delete" bindtap="{{Q}}"><text class="delete-text">删除</text></view></view></view></view><view wx:if="{{R}}" class="keyboard-section"><view class="keyboard-row number-row"><view wx:for="{{S}}" wx:for-item="n" wx:key="b" class="key-item" bindtap="{{n.c}}">{{n.a}}</view></view></view><view wx:if="{{T}}" class="keyboard-section"><view class="keyboard-qwerty"><view wx:for="{{U}}" wx:for-item="row" wx:key="d" class="keyboard-row"><view wx:for="{{row.a}}" wx:for-item="l" wx:key="b" class="{{['key-item', l.c && 'disabled']}}" bindtap="{{l.d}}">{{l.a}}</view><view wx:if="{{row.b}}" class="key-item delete" bindtap="{{row.c}}"><text class="delete-text">删除</text></view></view></view></view><view wx:if="{{V}}" class="keyboard-section"><view class="keyboard-row special-row"><view wx:for="{{W}}" wx:for-item="item" wx:key="b" class="{{['key-item', 'special', item.c]}}" bindtap="{{item.d}}">{{item.a}}</view><view wx:if="{{X}}" class="key-item done" bindtap="{{Y}}"><text class="done-text">完成</text></view></view></view></scroll-view></view></view></view>