@tuya-miniapp/smart-ui 2.3.8-beta-3 → 2.3.8-beta-5

package/packages/custom-keyboard/demo/index.wxml

@@ -0,0 +1,34 @@
+<demo-block title="{{I18n.t('customKeyboardBasic1')}}">
+  <smart-custom-keyboard
+    input-container-style="margin-left: 56rpx; margin-yop: 16rpx; margin-bottom: 56rpx"
+    bind:change="onChange"
+    bind:confirm="onConfirm"
+  />
+</demo-block>
+<demo-block title="{{I18n.t('customizeInputStyleText')}}">
+  <smart-custom-keyboard
+    input-container-style="marginLeft: 56rpx; marginTop: 16rpx; marginBottom: 56rpx; width: 560rpx; height: 120rpx;"
+    placeholder="{{I18n.t('pleaseEnter')}}"
+    confirm-text="{{I18n.t('confirm')}}"
+    value="{{value}}"
+    confirm-color="#123321"
+    bind:change="handleValueChange"
+    bind:confirm="onConfirm"
+  >
+    <view slot="custom-button" bind:tap="handleBtn" style="border: 1px solid blue; borderRadius: 4px; marginRight: 4px">{{I18n.t('click')}}</view>
+  </smart-custom-keyboard>
+</demo-block>
+
+<demo-block title="{{I18n.t('hideZeroAndBaseIs6')}}">
+  <smart-custom-keyboard
+    input-container-style="marginLeft: 56rpx; marginTop: 16rpx; marginBottom: 56rpx;"
+    is-hide-zero="{{true}}"
+    digital-base="{{6}}"
+  />
+</demo-block>
+<demo-block title="{{I18n.t('doNotHideZeroAndTheRadixIs6')}}">
+  <smart-custom-keyboard
+    input-container-style="marginLeft: 56rpx; marginTop: 16rpx; marginBottom: 56rpx;"
+    digital-base="{{6}}"
+  />
+</demo-block>

package/packages/custom-keyboard/index.json

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-popup": "../popup/index",
+    "smart-image": "../image/index",
+    "smart-button": "../button/index",
+    "smart-icon": "../icon/index"
+  }
+}

package/packages/custom-keyboard/index.less

@@ -0,0 +1,125 @@
+@import '../common/style/var.less';
+
+:root {
+  text {
+    white-space: normal;
+  }
+}
+
+.keyboard {
+  &-container {
+    align-items: center;
+    background-color: var(--custom-keyboard-bg-color, @custom-keyboard-bg-color);
+    border-color: var(--custom-keyboard-border-color, @custom-keyboard-border-color);
+    border-radius: 16rpx;
+    border-width: 1rpx;
+    flex-direction: row;
+    height: 80rpx;
+    justify-content: space-between;
+    padding: 24rpx 0rpx 24rpx 24rpx;
+    width: 500rpx;
+    display: flex;
+    box-sizing: border-box;
+    overflow: hidden;
+    border-style: solid;
+  }
+
+  &-button {
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+  }
+
+  &-textView {
+    display: flex;
+    flex: 1;
+  }
+
+  &-pwdText {
+    font-size: 40rpx;
+    color: var(--custom-keyboard-placeholder-color, @custom-keyboard-placeholder-color);
+  }
+
+  &-password {
+    color: var(--custom-keyboard-text-color, @custom-keyboard-text-color);;
+    letter-spacing: 16rpx;
+  }
+
+  &-randomText {
+    font-size: 24rpx;
+    font-weight: 500;
+  }
+
+  &-popup-container {
+    background-color: @custom-keyboard-popup-bg-color;
+    flex-direction: row;
+    height: 464rpx;
+    padding: 8rpx;
+    width: 100%;
+    display: flex;
+  }
+
+  &-number-wrap {
+    flex: 1;
+    background-color: transparent;
+    flex-direction: row;
+    flex-wrap: wrap;
+    display: flex;
+    width: 570rpx;
+  }
+
+  &-operate-wrap {
+    background-color: transparent;
+    width: 180rpx;
+    padding-top: 8rpx;
+    padding-right: 4rpx;
+  }
+
+  &-number-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: @custom-keyboard-popup-item-color;
+    border-radius: 8rpx;
+    width: 166rpx;
+    height: 96rpx;
+    margin: 8rpx;
+  }
+
+  &-number-text {
+    color: @custom-keyboard-popup-text-color;
+    font-size: 48rpx;
+    font-weight: bold;
+  }
+
+  &-hidden-image {
+    height: 80rpx;
+    width: 80rpx;
+    background: @custom-keyboard-popup-text-color;
+  }
+
+  &-confirm-btn {
+    border-radius: 8rpx;
+    height: 210rpx;
+    width: 168rpx;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: @custom-keyboard-popup-item-color;
+  }
+
+  &-confirm-color {
+    background-color: @custom-keyboard-popup-confirm-color;
+  }
+
+  &-confirm-text {
+    color: #fff;
+    font-size: 40rpx;
+    font-weight: bold;
+  }
+
+  &-hover-class {
+    background-color: @custom-keyboard-popup-hover-color;
+  }
+}

package/packages/custom-keyboard/index.ts

@@ -0,0 +1,174 @@
+import { SmartComponent } from '../common/component';
+
+SmartComponent({
+  props: {
+    /**
+     * @description.zh 当前值
+     * @description.en The current value
+     */
+    value: {
+      type: String,
+      value: '',
+      observer() {
+        this.setData({ currValue: this.data.value });
+      },
+    },
+    /**
+     * @description.zh 占位符文案
+     * @description.en The placeholder text
+     */
+    placeholder: {
+      type: String,
+      value: 'please input',
+    },
+    /**
+     * @description.zh 用于适配进制功能（取值范围1-10）
+     * @description.en Used to adapt the hexadecimal function (value range 1-9)
+     */
+    digitalBase: {
+      type: Number,
+      value: 10,
+      observer: 'init',
+    },
+    /**
+     * @description.zh 是否隐藏零
+     * @description.en Whether to hide zero
+     */
+    isHideZero: {
+      type: Boolean,
+      value: false,
+    },
+    /**
+     * @description.zh 数字键盘的确认按钮背景色
+     * @description.en The background color of the confirmation button of the numeric keypad
+     */
+    confirmColor: String,
+    /**
+     * @description.zh 确认按钮文案
+     * @description.en The text of the confirm button
+     */
+    confirmText: {
+      type: String,
+      value: 'Confirm',
+    },
+    /**
+     * @description.zh 输入框容器样式
+     * @description.en The style of confirm button
+     */
+    inputContainerStyle: String,
+    /**
+     * @description.zh 当前值的样式（适用于placeholder样式）
+     * @description.en The style of input box container
+     */
+    valueTextStyle: String,
+    /**
+     * @description.zh 确认按钮的样式
+     * @description.en The style of confirm button
+     */
+    confirmTextStyle: String,
+  },
+
+  data: {
+    currValue: '',
+    visible: false,
+    maxNum: 0,
+    numberArray: [1],
+    prefix: 'keyboard',
+    row: 1,
+    img_hidden_light: '',
+    img_delete_light: '',
+  },
+
+  created() {
+    this.init();
+    this.setData({
+      img_hidden_light: this.toSvgCssBackground(this.getHiddenLightSvgNode('#333')),
+      img_delete_light: this.toSvgCssBackground(this.getDeleteLightSvgNode('#333')),
+    });
+  },
+  methods: {
+    init() {
+      const { isHideZero, digitalBase } = this.data;
+      const maxNum = isHideZero ? +digitalBase : +digitalBase - 1; // 支持的最大数字
+      const numberArray = Array.from(Array(maxNum), (_, index) => index + 1);
+      !isHideZero && numberArray.push(0);
+      numberArray.push(-2);
+      this.setData({
+        maxNum,
+        numberArray,
+        row: Math.ceil(numberArray.length / 3),
+      });
+    },
+    confirm() {
+      this.setData({
+        visible: false,
+      });
+      this.$emit('confirm', this.data.currValue);
+    },
+
+    changeValue(item) {
+      const i = Number(item.currentTarget.dataset.item);
+      if (i === -2) {
+        this.setData({
+          visible: false,
+        });
+        return;
+      }
+      const { currValue } = this.data;
+      const newValue =
+        i === -1
+          ? currValue.length
+            ? currValue.slice(0, currValue.length - 1)
+            : ''
+          : `${currValue}${i}`;
+      this.setData({
+        currValue: newValue,
+      });
+      this.$emit('change', newValue);
+    },
+
+    handlePassword() {
+      this.setData({ visible: true });
+    },
+
+    onMaskPress() {
+      this.setData({ visible: false });
+    },
+    getHiddenLightSvgNode(color: string) {
+      return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="40" height="40" viewBox="0 0 40 40"><g><g><path d="M17.701,29.701C18.2554,30.2554,18.84116,30.84116,19.28266,31.28266C19.673189999999998,31.673189999999998,20.326810000000002,31.673189999999998,20.71734,31.28266C21.158839999999998,30.84116,21.7446,30.2554,22.299,29.701C22.92896,29.07103,22.44369,28,21.55278,28C20.56722,28,19.43278,28,18.44722,28C17.55631,28,17.07103,29.07103,17.701,29.701" fill="#333333" fill-opacity="1"/></g><g><rect x="15" y="20" width="10" height="2" rx="1" fill="#333333" fill-opacity="1"/></g><g><path d="M7,10L7,24Q7,24.0983,7.00963055,24.196Q7.0192611,24.2938,7.0384294,24.3902Q7.0575978,24.4865,7.0861193,24.5806Q7.114641,24.6746,7.152241,24.7654Q7.189841,24.8561,7.236157,24.9428Q7.282474,25.0294,7.337061,25.1111Q7.391648,25.1928,7.453979,25.2688Q7.516311,25.3447,7.585786,25.4142Q7.6552620000000005,25.4837,7.731213,25.546Q7.807164,25.6084,7.888859,25.6629Q7.970554,25.7175,8.05721,25.7638Q8.14386,25.8102,8.23463,25.8478Q8.32541,25.8854,8.41943,25.9139Q8.51345,25.9424,8.60982,25.9616Q8.70619,25.9807,8.80397,25.9904Q8.90175,26,9,26L31,26Q31.0983,26,31.196,25.9904Q31.2938,25.9807,31.3902,25.9616Q31.4865,25.9424,31.5806,25.9139Q31.6746,25.8854,31.7654,25.8478Q31.8561,25.8102,31.9428,25.7638Q32.029399999999995,25.7175,32.1111,25.6629Q32.1928,25.6084,32.2688,25.546Q32.3447,25.4837,32.4142,25.4142Q32.4837,25.3447,32.546,25.2688Q32.6083,25.1928,32.6629,25.1111Q32.7175,25.0294,32.7638,24.9428Q32.810199999999995,24.8561,32.8478,24.7654Q32.885400000000004,24.6746,32.9139,24.5806Q32.9424,24.4865,32.961600000000004,24.3902Q32.9807,24.2938,32.9904,24.196Q33,24.0983,33,24L33,10Q33,9.90175,32.9904,9.80397Q32.9807,9.70619,32.961600000000004,9.60982Q32.9424,9.51345,32.9139,9.41943Q32.885400000000004,9.32541,32.8478,9.23463Q32.810199999999995,9.14386,32.7638,9.05721Q32.7175,8.970554,32.6629,8.888859Q32.6083,8.807164,32.546,8.731213Q32.4837,8.655262,32.4142,8.585786Q32.3447,8.516311,32.2688,8.453979Q32.1928,8.391648,32.1111,8.337061Q32.029399999999995,8.282474,31.9428,8.236157Q31.8561,8.189841,31.7654,8.152241Q31.6746,8.114641,31.5806,8.0861193Q31.4865,8.0575978,31.3902,8.0384294Q31.2938,8.0192611,31.196,8.00963055Q31.0983,8,31,8L9,8Q8.90175,8,8.80397,8.00963055Q8.70619,8.0192611,8.60982,8.0384294Q8.51345,8.0575978,8.41943,8.0861193Q8.32541,8.114641,8.23463,8.152241Q8.14386,8.189841,8.05721,8.236157Q7.970554,8.282474,7.888859,8.337061Q7.807164,8.391648,7.731213,8.453979Q7.6552620000000005,8.516311,7.585786,8.585786Q7.516311,8.655262,7.453979,8.731213Q7.391648,8.807164,7.337061,8.888859Q7.282474,8.970554,7.236157,9.05721Q7.189841,9.14386,7.152241,9.23463Q7.114641,9.32541,7.0861193,9.41943Q7.0575978,9.51345,7.0384294,9.60982Q7.0192611,9.70619,7.00963055,9.80397Q7,9.90175,7,10ZM31,24L9,24L9,10L31,10L31,24Z" fill-rule="evenodd" fill="#333333" fill-opacity="1"/></g><g><rect x="12" y="16" width="4" height="2" rx="1" fill="#333333" fill-opacity="1"/></g><g><rect x="12" y="12" width="4" height="2" rx="1" fill="#333333" fill-opacity="1"/></g><g><rect x="18" y="16" width="4" height="2" rx="1" fill="#333333" fill-opacity="1"/></g><g><rect x="18" y="12" width="4" height="2" rx="1" fill="#333333" fill-opacity="1"/></g><g><rect x="24" y="16" width="4" height="2" rx="1" fill="#333333" fill-opacity="1"/></g><g><rect x="24" y="12" width="4" height="2" rx="1" fill="${color}" fill-opacity="1"/></g></g></svg>`;
+    },
+    getDeleteLightSvgNode(color: string) {
+      return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="40" height="40" viewBox="0 0 40 40"><g><g><g><path d="M31.139,10.88219Q32,11.753546,32,12.99L32,27.009999999999998Q32,28.2465,31.139,29.1178Q30.2674,30,29.0185,30L14.57953,30Q12.75566,30,11.53603,28.4241L11.45074,28.3139L7.55054,21.49416Q7.15474,20.80208,7.15474,20Q7.15474,19.19792,7.55054,18.50585L9.322711,15.4071L11.40802,11.760825L11.43692,11.716023Q12.54363,10,14.57953,10L29.0185,10Q30.1823,10,31.0185,10.76608Q31.0797,10.82209,31.139,10.88219ZM14.57953,12C13.97759,12,13.461649999999999,12.266667,13.11769,12.8L9.28667,19.498739999999998C9.110759,19.80633,9.110759,20.193669999999997,9.28667,20.501260000000002L13.11769,27.2C13.461649999999999,27.644399999999997,13.97759,28,14.57953,28L29.0185,28C29.5708,28,30,27.5623,30,27.009999999999998L30,12.99C30,12.437715,29.5708,12,29.0185,12L14.57953,12Z" fill-rule="evenodd" fill="#333333" fill-opacity="1"/></g><g><path d="M19.5859164704895,20.21865544288635L17.0745744704895,17.70731544288635L17.074336470489502,17.707085442886353Q16.933684470489503,17.566425442886352,16.857563770489502,17.382655442886353Q16.7814433668895,17.198885442886354,16.781443595889503,16.999975442886353Q16.7814433668895,16.801063442886353,16.8575636704895,16.617292442886352Q16.933683470489502,16.433521442886352,17.074336470489502,16.292868442886352Q17.2149884704895,16.152216442886353,17.3987594704895,16.07609594288635Q17.582530470489502,15.999975442886353,17.781443470489503,15.999975442886353Q17.980356470489504,15.999975442886353,18.164126470489503,16.076095842886353Q18.347896470489502,16.152216442886353,18.488546470489503,16.292868442886352L18.4887864704895,16.293105442886354L21.0001264704895,18.80444544288635L23.5116764704895,16.292891442886354Q23.652326470489502,16.15223944288635,23.8360964704895,16.076118842886352Q24.0198764704895,15.999998331086353,24.2187864704895,15.999998331086353Q24.417696470489503,15.999998331086353,24.601466470489502,16.07611874288635Q24.7852364704895,16.15223944288635,24.925886470489502,16.292891442886354Q25.066546470489502,16.433543442886354,25.1426664704895,16.617314442886354Q25.2187864704895,16.801085442886354,25.2187864704895,16.999995442886352Q25.2187864704895,17.198915442886353,25.1426664704895,17.382685442886352Q25.066546470489502,17.56645544288635,24.9258964704895,17.707105442886352L22.414336470489502,20.21865544288635L24.707186470489503,22.511505442886353Q24.8478464704895,22.652155442886354,24.923966470489503,22.835935442886353Q25.0000864704895,23.01970544288635,25.0000864704895,23.218615442886353Q25.0000864704895,23.41752544288635,24.923966470489503,23.601295442886354Q24.8478464704895,23.785065442886353,24.707186470489503,23.925725442886353Q24.566536470489503,24.066375442886354,24.3827664704895,24.14249544288635Q24.1989964704895,24.218615442886353,24.000086470489503,24.218615442886353Q23.801166470489502,24.218615442886353,23.617396470489503,24.14249544288635Q23.4336264704895,24.066375442886354,23.292976470489503,23.925725442886353L21.0001264704895,21.632875442886352L18.707486470489503,23.925505442886355L18.7072564704895,23.925745442886353Q18.5665964704895,24.066395442886353,18.3828264704895,24.142515442886353Q18.199056470489502,24.218635442886352,18.0001464704895,24.218635442886352Q17.801236470489503,24.218635442886352,17.617461470489502,24.142515442886353Q17.433690470489502,24.066395442886353,17.293038470489503,23.925745442886353Q17.152386470489503,23.78509544288635,17.0762664704895,23.601325442886353Q17.000145470489503,23.417555442886353,17.000145470489503,23.218635442886352Q17.000145470489503,23.019725442886354,17.076265470489503,22.835955442886352Q17.152386470489503,22.652185442886353,17.293038470489503,22.511535442886352L17.2932754704895,22.511295442886354L19.5859164704895,20.21865544288635Z" fill-rule="evenodd" fill="${color}" fill-opacity="1"/></g></g></g></svg>`;
+    },
+    toSvgCssBackground(svgString: string) {
+      let res = svgString;
+      res = svgString
+        .replace(
+          '<svg',
+          ~svgString.indexOf('xmlns') ? '<svg' : '<svg xmlns="http://www.w3.org/2000/svg"'
+        )
+        .replace(/"/g, "'")
+        .replace(/%/g, '%25')
+        .replace(/#/g, '%23')
+        .replace(/{/g, '%7B')
+        .replace(/}/g, '%7D')
+        .replace(/</g, '%3C')
+        .replace(/>/g, '%3E')
+
+        .replace(/\s+/g, ' ');
+
+      const imageBase64Src = `url("data:image/svg+xml,${res}")`;
+      const ret = `
+          -webkit-mask-image: ${imageBase64Src};
+          -webkit-mask-size: contain;
+          mask-image: ${imageBase64Src};
+          mask-size: contain;
+          width: 40px;
+          height: 40px;
+          background-repeat: no-repeat
+      `;
+      return ret;
+      // return `background-image: url("data:image/svg+xml,${res}"); width: 40px; height: 40px; background-repeat: no-repeat;`;
+    },
+  },
+});

package/packages/custom-keyboard/index.wxml

@@ -0,0 +1,48 @@
+<view class="{{prefix}} {{prefix}}-container" style="{{inputContainerStyle}}">
+  <view class="{{prefix}}-textView" bind:tap="handlePassword">
+    <text class="{{prefix}}-pwdText {{currValue !== '' ? prefix + '-password' : null}}" style="{{valueTextStyle}}">
+      {{currValue || placeholder}}
+    </text>
+  </view>
+  <slot name="custom-button" />
+</view>
+<smart-popup
+  show="{{visible}}"
+  bind:close="onMaskPress"
+  position="bottom"
+  overlay="{{true}}"
+>
+  <view class="{{prefix}}-popup-container">
+    <view class="{{prefix}}-number-wrap" style="height: {{row * 56}}px">
+      <view wx:for="{{numberArray}}" wx:key="index" bind:tap="changeValue" hover-class="{{prefix}}-hover-class" data-item="{{ item }}" class="{{prefix}}-number-item" style="{{(item === 0 || item === 10) && numberArray.length === 11 ? 'width: 175px' : ''}}">
+        <view
+          wx:if="{{item === -2}}"
+          class="{{prefix}}-hidden-image"
+          style="{{img_hidden_light}}"
+        />
+        <text wx:else class="{{prefix}}-number-text">{{ item <= -1 || item > maxNum ? '' : item }}</text>
+      </view>
+    </view>
+    <view class="{{prefix}}-operate-wrap">
+      <button 
+        bind:tap="changeValue" 
+        data-item="-1"
+        style="margin-bottom: 6px"
+        class="{{prefix}}-confirm-btn"
+        hover-class="{{prefix}}-hover-class"
+        >
+        <view style="{{img_delete_light}}" class="{{prefix}}-hidden-image" />
+      </button>
+      <button 
+        class="{{prefix}}-confirm-btn {{prefix}}-confirm-color"
+        style="background-color: {{confirmColor}}"
+        bind:tap="confirm"
+        hover-class="{{prefix}}-hover-class"
+      >
+        <text class="{{prefix}}-confirm-text" style="{{confirmTextStyle}}">
+          {{confirmText}}
+        </text>
+      </button >
+    </view>
+  </view>
+</smart-popup>

package/packages/custom-keyboard/test/__snapshots__/demo.spec.ts.snap

@@ -0,0 +1,167 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<main>
+  <demo-block
+    title=""
+  >
+    <smart-custom-keyboard
+      bind:change="onChange"
+      bind:confirm="onConfirm"
+    >
+      <wx-view
+        class="keyboard keyboard-container"
+        style="margin-left: 56rpx; margin-yop: 16rpx; margin-bottom: 56rpx"
+      >
+        <wx-view
+          class="keyboard-textView"
+          bind:tap="handlePassword"
+        >
+          <wx-text
+            class="keyboard-pwdText null"
+            style=""
+          >
+            
+      please input
+    
+          </wx-text>
+        </wx-view>
+      </wx-view>
+      <smart-popup
+        bind:close="onMaskPress"
+      >
+        <smart-overlay
+          bind:click="onClickOverlay"
+        >
+          <smart-transition
+            customClass="smart-overlay custom-class"
+            bind:tap="onClick"
+            catch:touchmove="noop"
+          />
+        </smart-overlay>
+      </smart-popup>
+    </smart-custom-keyboard>
+  </demo-block>
+  <demo-block
+    title=""
+  >
+    <smart-custom-keyboard
+      bind:change="handleValueChange"
+      bind:confirm="onConfirm"
+    >
+      <wx-view
+        class="keyboard keyboard-container"
+        style="marginLeft: 56rpx; marginTop: 16rpx; marginBottom: 56rpx; width: 560rpx; height: 120rpx;"
+      >
+        <wx-view
+          class="keyboard-textView"
+          bind:tap="handlePassword"
+        >
+          <wx-text
+            class="keyboard-pwdText keyboard-password"
+            style=""
+          >
+            
+      222
+    
+          </wx-text>
+        </wx-view>
+        <wx-view
+          slot="custom-button"
+          style="border: 1px solid blue; borderRadius: 4px; marginRight: 4px"
+          bind:tap="handleBtn"
+        >
+          
+        </wx-view>
+      </wx-view>
+      <smart-popup
+        bind:close="onMaskPress"
+      >
+        <smart-overlay
+          bind:click="onClickOverlay"
+        >
+          <smart-transition
+            customClass="smart-overlay custom-class"
+            bind:tap="onClick"
+            catch:touchmove="noop"
+          />
+        </smart-overlay>
+      </smart-popup>
+    </smart-custom-keyboard>
+  </demo-block>
+  <demo-block
+    title=""
+  >
+    <smart-custom-keyboard>
+      <wx-view
+        class="keyboard keyboard-container"
+        style="marginLeft: 56rpx; marginTop: 16rpx; marginBottom: 56rpx;"
+      >
+        <wx-view
+          class="keyboard-textView"
+          bind:tap="handlePassword"
+        >
+          <wx-text
+            class="keyboard-pwdText null"
+            style=""
+          >
+            
+      please input
+    
+          </wx-text>
+        </wx-view>
+      </wx-view>
+      <smart-popup
+        bind:close="onMaskPress"
+      >
+        <smart-overlay
+          bind:click="onClickOverlay"
+        >
+          <smart-transition
+            customClass="smart-overlay custom-class"
+            bind:tap="onClick"
+            catch:touchmove="noop"
+          />
+        </smart-overlay>
+      </smart-popup>
+    </smart-custom-keyboard>
+  </demo-block>
+  <demo-block
+    title=""
+  >
+    <smart-custom-keyboard>
+      <wx-view
+        class="keyboard keyboard-container"
+        style="marginLeft: 56rpx; marginTop: 16rpx; marginBottom: 56rpx;"
+      >
+        <wx-view
+          class="keyboard-textView"
+          bind:tap="handlePassword"
+        >
+          <wx-text
+            class="keyboard-pwdText null"
+            style=""
+          >
+            
+      please input
+    
+          </wx-text>
+        </wx-view>
+      </wx-view>
+      <smart-popup
+        bind:close="onMaskPress"
+      >
+        <smart-overlay
+          bind:click="onClickOverlay"
+        >
+          <smart-transition
+            customClass="smart-overlay custom-class"
+            bind:tap="onClick"
+            catch:touchmove="noop"
+          />
+        </smart-overlay>
+      </smart-popup>
+    </smart-custom-keyboard>
+  </demo-block>
+</main>
+`;

package/packages/custom-keyboard/test/demo.spec.ts

@@ -0,0 +1,11 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+test('should render demo and match snapshot', () => {
+  const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
+    rootPath: path.resolve(__dirname, '../../'),
+  });
+  const comp = simulate.render(id);
+  comp.attach(document.createElement('parent-wrapper'));
+  expect(comp.toJSON()).toMatchSnapshot();
+});