@cloudbase/weda-ui-mp 0.2.20

package/components/wd-icon/wd-icon.wxss

@@ -0,0 +1,154 @@
+@charset "UTF-8";
+._B00_Xa {
+  /* 如果生成的wxss 为空文件似乎会导致IDE编译报错， 所以这里给他弄个占位 */
+  word-break: inherit;
+}
+
+.wd-icon {
+  --wd-icon-size-xxs: 0.875rem;
+  --wd-icon-size-xs: 1rem;
+  --wd-icon-size-sm: 1.25rem;
+  --wd-icon-size-md: 1.5rem;
+  --wd-icon-size-lg: 2rem;
+  --wd-icon-size-xl: 3rem;
+}
+
+.wd-mp-icon.size-self-adaptive,
+.wd-h5-icon.size-self-adaptive {
+  --wd-icon-size-xxs: 1rem;
+  --wd-icon-size-xs: 1.25rem;
+  --wd-icon-size-sm: 1.5rem;
+  --wd-icon-size-md: 2rem;
+  --wd-icon-size-lg: 2rem;
+  --wd-icon-size-xl: 3rem;
+}
+
+.wd-pc-icon.size-self-adaptive {
+  --wd-icon-size-xxs: 0.875rem;
+  --wd-icon-size-xs: 1rem;
+  --wd-icon-size-sm: 1.25rem;
+  --wd-icon-size-md: 1.5rem;
+  --wd-icon-size-lg: 2rem;
+  --wd-icon-size-xl: 3rem;
+}
+
+@font-face {
+  font-family: "wd-lcap-icon";
+  font-weight: normal;
+  font-style: normal;
+  src: url(data:application/font-woff2;charset=utf-8;base64,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) format("woff2");
+}
+.wd-icon--xxs,
+.wd-image.wd-icon.wd-icon--custom--xxs {
+  font-size: var(--wd-icon-size-xxs);
+  width: var(--wd-icon-size-xxs);
+  height: var(--wd-icon-size-xxs);
+}
+.wd-icon--xs,
+.wd-image.wd-icon.wd-icon--custom--xs {
+  font-size: var(--wd-icon-size-xs);
+  width: var(--wd-icon-size-xs);
+  height: var(--wd-icon-size-xs);
+}
+.wd-icon--sm,
+.wd-image.wd-icon.wd-icon--custom--sm {
+  font-size: var(--wd-icon-size-sm);
+  width: var(--wd-icon-size-sm);
+  height: var(--wd-icon-size-sm);
+}
+.wd-icon--md,
+.wd-image.wd-icon.wd-icon--custom--md {
+  font-size: var(--wd-icon-size-md);
+  width: var(--wd-icon-size-md);
+  height: var(--wd-icon-size-md);
+}
+.wd-icon--lg,
+.wd-image.wd-icon.wd-icon--custom--lg {
+  font-size: var(--wd-icon-size-lg);
+  width: var(--wd-icon-size-lg);
+  height: var(--wd-icon-size-lg);
+}
+.wd-icon--xl,
+.wd-image.wd-icon.wd-icon--custom--xl {
+  font-size: var(--wd-icon-size-xl);
+  width: var(--wd-icon-size-xl);
+  height: var(--wd-icon-size-xl);
+}
+.wd-icon--inherit,
+.wd-image.wd-icon.wd-icon--custom--inherit {
+  font-size: inherit;
+  width: auto;
+  height: auto;
+}
+
+.wd-image.wd-icon.wd-icon--custom {
+  max-width: unset;
+}
+
+.wd-lcap-icon {
+  font-family: "wd-lcap-icon" !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  text-rendering: auto;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: inline-block;
+  text-align: center;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  vertical-align: middle;
+  width: 1em;
+  height: 1em;
+}
+
+.t-icon {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: "t" !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  text-rendering: auto;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: inline-block;
+  text-align: center;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  vertical-align: middle;
+  width: 1em;
+  height: 1em;
+}
+
+@keyframes t-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.t-icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.t-icon::before {
+  font-family: unset;
+}
+
+.t-icon-loading {
+  animation: t-spin 1s linear infinite;
+}
+
+.t-icon {
+  fill: currentColor;
+}

package/components/wd-image/index.js

@@ -0,0 +1,244 @@
+import { getWedaAPI } from '../../utils/getWedaApi';
+import { commonCompBehavior } from '../../utils/common-behavior';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    id: {
+      type: String,
+      value: '',
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    src: {
+      type: String,
+      value: '',
+    },
+    alt: {
+      type: String,
+      value: '',
+    },
+    fit: {
+      type: String,
+      value: '',
+    },
+    mode: {
+      type: String,
+      value: 'scaleToFill',
+    },
+    lazyLoad: {
+      type: Boolean,
+      value: false,
+    },
+    showMenuByLongpress: {
+      type: Boolean,
+      value: true,
+    },
+    imgPreview: {
+      type: Boolean,
+      value: false,
+    },
+    maskClosable: {
+      type: Boolean,
+      value: true,
+    },
+  },
+  data: {
+    showImg: false,
+    realSrc: '',
+    imgMode: 'scaleToFill',
+    clsx: '',
+    isError: false,
+    zoom: 1,
+    previewTranslateX: 0,
+    previewTranslateY: 0,
+    realHeight: 0,
+    realWidth: 0,
+    offsetHeight: 0,
+    offsetWidth: 0,
+    showHeight: 0,
+    showWidth: 0,
+    propagation: false,
+  },
+  methods: {
+    load: function (e) {
+      this.triggerEvent('load', e.detail);
+      this.setData({
+        realHeight: e.detail.height,
+        realWidth: e.detail.width,
+        isError: false,
+        clsx: this.data.clsx.replace(/wd-image__error/g, ''),
+      });
+    },
+    error: function (e) {
+      this.setData({
+        isError: true,
+        clsx: this.properties.className + ' wd-image__error',
+      });
+      this.triggerEvent('error', e.detail);
+    },
+    onImgTap: function () {
+      const ASPECT_RASIO = 1;
+      const OFFSET_RASIO = 0.5;
+      const SCALE_RASIO_H5 = 1;
+      if (this.properties.imgPreview && !this.data.isError) {
+        // 计算图片预览展示高度
+        const { windowWidth, windowHeight } = wx.getSystemInfoSync();
+
+        const widthRasio = (windowWidth * SCALE_RASIO_H5) / this.data.realWidth;
+        const heightRasio =
+          (windowHeight * SCALE_RASIO_H5) / this.data.realHeight;
+        const scale =
+          Math.min(widthRasio, heightRasio, ASPECT_RASIO) || ASPECT_RASIO;
+        const offsetHeight =
+          (windowHeight - this.data.realHeight * scale) * OFFSET_RASIO;
+
+        const offsetWidth =
+          (windowWidth - this.data.realWidth * scale) * OFFSET_RASIO;
+        const showHeight = this.data.realHeight * scale;
+        const showWidth = this.data.realWidth * scale;
+        this.setData({
+          showImg: true,
+          zoom: 1,
+          previewTranslateY: 0,
+          previewTranslateX: 0,
+          showHeight,
+          showWidth,
+          offsetHeight,
+          offsetWidth,
+        });
+      }
+    },
+    onPinch: function (ev) {
+      const ZOOM_MAX = 5;
+      const ZOOM_MIN = 0.6;
+      let zoom = ev.detail.zoom;
+      if (zoom > ZOOM_MAX) {
+        zoom = ZOOM_MAX;
+      }
+      if (zoom < ZOOM_MIN) {
+        zoom = ZOOM_MIN;
+      }
+      this.setData({
+        zoom,
+      });
+    },
+    onPressMove: function (ev) {
+      this.setData({
+        previewTranslateX: this.data.previewTranslateX + ev.detail.deltaX,
+        previewTranslateY: this.data.previewTranslateY + ev.detail.deltaY,
+      });
+    },
+    onMaskClick: function () {
+      if (this.properties.maskClosable) {
+        this.setData({
+          showImg: false,
+        });
+      }
+    },
+    onCloseClick: function () {
+      this.setData({
+        showImg: false,
+      });
+    },
+    onTapImgPreview: function () {
+      this.onMaskClick();
+    },
+    updateWidgetAPI() {
+      const { fit, src, alt } = this.data;
+
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          fit,
+          src,
+          alt,
+        });
+    },
+  },
+  observers: {
+    className: function () {
+      const className = this.properties.className;
+      this.setData({
+        clsx: className,
+      });
+    },
+    src: function () {
+      const { src = '' } = this.properties;
+      let { app } = getWedaAPI();
+      if (/^cloud:\/\//.test(src)) {
+        app.cloud
+          .getTempFileURL(src)
+          .then((res) => {
+            this.setData({ realSrc: res || '' });
+          })
+          .catch(() => {
+            this.setData({
+              realSrc: src,
+            });
+          });
+      } else {
+        this.setData({
+          realSrc: src,
+        });
+      }
+    },
+    'fit, mode': function (fit, mode) {
+      if (fit) {
+        switch (fit) {
+          case 'cover':
+            this.setData({
+              imgMode: 'aspectFill',
+            });
+            break;
+          case 'contain':
+            this.setData({
+              imgMode: 'aspectFit',
+            });
+            break;
+          case 'fill':
+            this.setData({
+              imgMode: 'scaleToFill',
+            });
+            break;
+          case 'widthFix':
+            this.setData({
+              imgMode: 'widthFix',
+            });
+            break;
+          case 'heightFix':
+            this.setData({
+              imgMode: 'heightFix',
+            });
+            break;
+          default:
+            this.setData({
+              imgMode: 'scaleToFill',
+            });
+            break;
+        }
+      } else {
+        this.setData({
+          imgMode: mode,
+        });
+      }
+    },
+    'fit,src,alt': function () {
+      this.updateWidgetAPI();
+    },
+  },
+  lifetimes: {
+    attached() {
+      this.updateWidgetAPI();
+      this.setData({ id: this.id });
+    },
+  },
+});

package/components/wd-image/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "gesture": "miniprogram-gesture/gesture"
+  }
+}

package/components/wd-image/index.wxml

@@ -0,0 +1,11 @@
+<image id="{{id}}" style="{{style}}" class="wd-image {{clsx}} wd-mp-image" src="{{realSrc}}" alt="{{alt}}" mode="{{imgMode}}" lazy-load="{{lazyLoad}}" show-menu-by-longpress="{{showMenuByLongpress}}" bindtap="onImgTap" bindload="load" binderror="error" />
+<root-portal>
+  <view wx:if="{{showImg}}" class="wd-image-preview-container wd-image-mask" bindtap="onMaskClick">
+    <view bindtap="onCloseClick" class="wd-image-mask__close-btn">
+      <icon class="wd-image-mask__icon-close"></icon>
+    </view>
+    <gesture class="gesture-test" bindpinch="onPinch" catchtap="onTapImgPreview" bindpressMove="onPressMove" propagation="{{propagation}}">
+      <view class="wd-image-preview" style="margin-top:{{offsetHeight}}px;margin-left:{{offsetWidth}}px;width: {{showWidth}}px;height:{{showHeight}}px;background-image: url('{{realSrc}}');transform: scale({{zoom}}) translateX({{previewTranslateX}}px) translateY({{previewTranslateY}}px);"></view>
+    </gesture>
+  </view>
+</root-portal>

package/components/wd-image/index.wxss

@@ -0,0 +1,11 @@
+@import '../../style/wd-design.wxss';
+@import './wd-image.wxss';
+
+.wd-image-preview-container {
+  background-color: #000;
+}
+
+.wd-image-mask__icon-close {
+  width: 1rem;
+  height: 1rem;
+}

package/components/wd-image/wd-image.wxss

@@ -0,0 +1,86 @@
+@charset "UTF-8";
+._B00_Xa {
+  /* 如果生成的wxss 为空文件似乎会导致IDE编译报错， 所以这里给他弄个占位 */
+  word-break: inherit;
+}
+
+.wd-image-mask,
+.wd-image {
+  --wd-image-mask-pc: var(--wd-bg-mask);
+  --wd-image-mask-h5: var(--wd-black);
+  --wd-image-close-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTUuOTk5NTkgNy4zNzg4NEwxMC42MTM0IDExLjk5MjdMMTEuOTkyMyAxMC42MTM4TDcuMzc4NDQgNS45OTk5OEwxMS45OTIzIDEuMzg2MTNMMTAuNjEzNCAwLjAwNzI3MjYyTDUuOTk5NTkgNC42MjExMkwxLjM4NTY5IDAuMDA3MjMyNjdMMC4wMDY4MzU5NCAxLjM4NjA5TDQuNjIwNzMgNS45OTk5OEwwLjAwNjgzNTk0IDEwLjYxMzlMMS4zODU2OSAxMS45OTI3TDUuOTk5NTkgNy4zNzg4NFoiIGZpbGw9IiNFRUVFRUUiLz4KPC9zdmc+");
+  --wd-image-error-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgwIiBoZWlnaHQ9IjE4MSIgdmlld0JveD0iMCAwIDE4MCAxODEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxODAiIGhlaWdodD0iMTgwLjAwMiIgZmlsbD0iI0UzRTZFQiIvPgo8cGF0aCBkPSJNNjYgNjkuNjIwNUM2NiA2Ny42MjEgNjcuNjIxIDY2IDY5LjYyMDUgNjZIMTEwLjM4QzExMi4zNzkgNjYgMTE0IDY3LjYyMSAxMTQgNjkuNjIwNVYxMTAuMzhDMTE0IDExMi4zNzkgMTEyLjM3OSAxMTQgMTEwLjM4IDExNEg2OS42MjA1QzY3LjYyMSAxMTQgNjYgMTEyLjM3OSA2NiAxMTAuMzhWNjkuNjIwNVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik02NiA2OS41NTU2QzY2IDY3LjU5MTkgNjcuNTkxOSA2NiA2OS41NTU2IDY2SDExMC40NDRDMTEyLjQwOCA2NiAxMTQgNjcuNTkxOSAxMTQgNjkuNTU1NlYxMTAuNDQ0QzExNCAxMTIuNDA4IDExMi40MDggMTE0IDExMC40NDQgMTE0SDY5LjU1NTZDNjcuNTkxOSAxMTQgNjYgMTEyLjQwOCA2NiAxMTAuNDQ0VjY5LjU1NTZaIiBmaWxsPSIjQkNDNEQwIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAwLjY2NiA4MS45OTk5QzEwMC42NjYgODMuNDcyNyA5OS40NzE5IDg0LjY2NjYgOTcuOTk5MiA4NC42NjY2Qzk2LjUyNjQgODQuNjY2NiA5NS4zMzI1IDgzLjQ3MjcgOTUuMzMyNSA4MS45OTk5Qzk1LjMzMjUgODAuNTI3MiA5Ni41MjY0IDc5LjMzMzMgOTcuOTk5MiA3OS4zMzMzQzk5LjQ3MTkgNzkuMzMzMyAxMDAuNjY2IDgwLjUyNzIgMTAwLjY2NiA4MS45OTk5Wk04Ny4wMTk5IDg2LjIxMTlDODYuNDU5OCA4NS41NDEyIDg1LjM4OTcgODUuNTgwOCA4NC44ODk4IDg2LjMzMDdMODQuMjIxNyA4Ny4zMzI4TDg4LjkwODQgOTQuNDI5N0M4OS40MjU2IDk1LjIxMyA4OS4yNDQ4IDk2LjI2MzUgODguNDk1NCA5Ni44Mjg3TDg0LjU1MjYgOTkuODAyNEw4NS4yNjU5IDEwMC42NjdIOTYuNjUzNEw4Ny4wMTk5IDg2LjIxMTlaTTgwLjY1NTUgMTAwLjY2N0w4MC42MjggMTAwLjYzM0M4MC4zMTkyIDEwMC4yNTkgODAuMTc2NyA5OS43NzUzIDgwLjIzMzUgOTkuMjkzNkM4MC4yOTAyIDk4LjgxMTkgODAuNTQxMyA5OC4zNzQzIDgwLjkyODUgOTguMDgyMkw4NS4wMjEyIDk0Ljk5NTZMODIuMDgxMiA5MC41NDM2TDc2LjcxNDUgOTguNTkzN0M3Ni4xMjM3IDk5LjQ3OTcgNzYuNzU4OSAxMDAuNjY3IDc3LjgyMzkgMTAwLjY2N0g4MC42NTU1Wk05OS4wNTY5IDEwMC42NjdMOTUuMTk1MyA5NC44NzI0TDk2Ljg4OTggOTIuMzMwN0M5Ny40MTc1IDkxLjUzOSA5OC41ODA4IDkxLjUzOSA5OS4xMDg2IDkyLjMzMDdMMTAzLjI4NCA5OC41OTM3QzEwMy44NzUgOTkuNDc5NyAxMDMuMjM5IDEwMC42NjcgMTAyLjE3NCAxMDAuNjY3SDk5LjA1NjlaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
+}
+
+.wd-image {
+  max-width: 100%;
+}
+
+@media screen and (max-width: 768px) {
+  .wd-image {
+    width: 11.25rem;
+    height: 11.25rem;
+  }
+}
+.wd-image-preview {
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.wd-image-mask {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: var(--wd-image-mask-pc);
+  z-index: 1001;
+}
+
+@media screen and (max-width: 768px) {
+  .wd-image-mask {
+    background-color: var(--wd-image-mask-h5);
+  }
+}
+.wd-image-mask__icon-close {
+  width: var(--wd-size-icon-md);
+  height: var(--wd-size-icon-md);
+  display: inline-block;
+  background-image: var(--wd-image-close-icon);
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+.wd-image-mask__close-btn {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  display: inline-block;
+  z-index: 1;
+  cursor: pointer;
+}
+
+.wd-image.wd-image__error,
+.wd-image:not([src]) {
+  position: relative;
+  display: inline-block;
+  width: 11.25rem;
+  height: 11.25rem;
+}
+
+.wd-image:not([src]):before,
+.wd-image__error::before {
+  content: "";
+  background: rgb(227, 230, 235) var(--wd-image-error-image) no-repeat center/100% 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}

package/components/wd-input/index.js

@@ -0,0 +1,62 @@
+import { commonCompBehavior } from '../../utils/common-behavior';
+import formFieldBehavior from '../form-field-behavior/form-field-behavior';
+import itemBehavior from '../form-field-behavior/item-behavior';
+
+/**
+ * 标准化：单行输入
+ */
+Component({
+  options: { virtualHost: true },
+  behaviors: [itemBehavior, commonCompBehavior, formFieldBehavior],
+  properties: {
+    classRoot: {
+      type: String,
+      value: 'input',
+    },
+    template: {
+      type: String,
+      value: '',
+    },
+    isConvert: {
+      type: Boolean,
+      value: true,
+    },
+  },
+  methods: {
+    updateWidgetAPI: function () {
+      const {
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+        before,
+        after,
+      } = this.data;
+      this.setReadonlyAttributes?.({
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+        before,
+        after,
+      });
+    },
+  },
+  observers: {
+    'name, value, label, required, visible, disabled, readOnly, before, after':
+      function () {
+        this.updateWidgetAPI();
+      },
+  },
+  lifetimes: {
+    attached: function () {
+      this.updateWidgetAPI();
+    },
+  },
+});

package/components/wd-input/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "inner-input": "./inner-input/index"
+  }
+}

package/components/wd-input/index.wxml

@@ -0,0 +1,58 @@
+<inner-input
+  id="{{id}}"
+  className="{{className}}"
+  style="{{style}}"
+  name="{{name}}"
+  inputValue="{{inputValue}}"
+  placeholder="{{placeholder}}"
+  size="{{size}}"
+  block="{{block}}"
+  label="{{label}}"
+  layout="{{actualLayout}}"
+  labelVisible="{{labelVisible}}"
+  labelAlign="{{labelAlign}}"
+  labelWrap="{{labelWrap}}"
+  labelWidth="{{labelWidth}}"
+  labelTips="{{labelTips}}"
+  clearable="{{clearable}}"
+  before="{{before}}"
+  after="{{after}}"
+  isUnionValue="{{isUnionValue}}"
+  prefixType="{{prefixType}}"
+  prefixIcon="{{prefixIcon}}"
+  prefixSrc="{{prefixSrc}}"
+  suffixType="{{suffixType}}"
+  suffixIcon="{{suffixIcon}}"
+  suffixSrc="{{suffixSrc}}"
+  extra="{{extra}}"
+  password="{{password}}"
+  type="{{type}}"
+  counterVisible="{{counterVisible}}"
+  focus="{{focus}}"
+  borderedH5="{{borderedH5}}"
+  borderedPc="{{borderedPc}}"
+  isNickNameType="{{isNickNameType}}"
+  maxLength="{{maxLength}}"
+  rules="{{rules}}"
+  status="{{status}}"
+  required="{{required}}"
+  requiredFlag="{{requiredFlag}}"
+  requiredMsg="{{requiredMsg}}"
+  bind:focus="handleEvent"
+  bind:blur="handleEvent"
+  bind:change="handleEvent"
+  bind:clear="handleEvent"
+  bind:confirm="handleEvent"
+  bind:changeForm="changeForm"
+  classRoot="{{classRoot}}"
+  visible="{{visible}}"
+  validateState="{{validateState}}"
+  validateErrorMsg="{{validateErrorMsg}}"
+  disabled="{{disabled}}"
+  readOnly="{{readOnly}}"
+  value="{{value}}"
+  template="{{template}}"
+  cursorSpacing="{{cursorSpacing}}"
+  isConvert="{{isConvert}}"
+  bind:inputAdornmentClick="handleEvent"
+></inner-input>