@cloudbase/weda-ui-mp 3.6.0

package/components/form/select/dropdown-select/index.js

@@ -0,0 +1,262 @@
+Component({
+  properties: {
+    isActive: {
+      type: Boolean,
+      value: true,
+    },
+    mode: {
+      type: String,
+      value: 'selector',
+    },
+    option: {
+      type: Array,
+      value: [],
+    },
+    searchOption: {
+      type: Array,
+      value: [],
+    },
+    searchStatus: {
+      type: Number,
+      value: 0,
+    },
+    loadStatus: {
+      type: Number,
+      value: 0,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    chooseIndexValue: {
+      type: String,
+      value: '',
+    },
+    isTurnPages: {
+      type: Boolean,
+      isTurnPages: false,
+    },
+    pageNo: {
+      type: Number,
+      value: 1,
+    },
+    _needFetch: {
+      type: Boolean,
+      value: false,
+    },
+    ignoreCase: {
+      type: Boolean,
+      value: true,
+    },
+  },
+  data: {
+    height: '780rpx',
+    focus: false,
+    searchValue: '',
+    disabledIndex: -1, // 预留参数，暂时无用
+    clickIndex: 0,
+    index: 0,
+    status: 0,
+    showOption: [],
+    isFinish: false,
+    currentIndex: 0,
+    searchPageNo: 1,
+    timeId: '',
+  },
+
+  lifetimes: {
+    detached() {
+      const id = this.data.timeId;
+      if (id !== '') {
+        clearTimeout(id);
+      }
+    },
+  },
+  methods: {
+    cancelPicker: function (e) {
+      this.triggerEvent('onSelectPicker', e.currentTarget.dataset);
+    },
+    // 监听输入
+    bindinput: function (event) {
+      const value = event.detail.value;
+
+      const { option, loadStatus, isTurnPages, _needFetch, ignoreCase } =
+        this.properties;
+      if (value === '' || value === this.data.searchValue) {
+        this.setData({
+          searchValue: value,
+          searchPageNo: 1,
+          showOption: option,
+          status: loadStatus,
+        });
+      }
+      this.setData({
+        searchValue: value,
+        searchPageNo: 1,
+        showOption: [],
+        status: 1,
+      });
+      const id = this.data.timeId;
+      if (id !== '') {
+        clearTimeout(id);
+      }
+      // eslint-disable-next-line rulesdir/no-timer
+      const timeId = setTimeout(() => {
+        if (isTurnPages && _needFetch) {
+          // 接口搜索
+          this.triggerEvent('_childFetchData', {
+            isSearch: true,
+            searchValue: value,
+            pageNo: 1,
+          });
+        } else {
+          // 本地搜索
+          const searchOption = option.filter((item) => {
+            if (ignoreCase) {
+              return String(item.label)
+                .toLowerCase()
+                .includes(value.toLowerCase());
+            }
+            return item.label.includes(value);
+          });
+          this.setData({
+            showOption: searchOption,
+            status: searchOption.length === 0 ? 3 : 0,
+          });
+        }
+        this.triggerEvent('search', { value });
+      }, 1000);
+      this.setData({
+        timeId,
+      });
+    },
+    // 清空输入
+    clear: function () {
+      this.setData({
+        searchValue: '',
+        showOption: this.properties.option,
+        status: this.properties.loadStatus,
+      });
+      this.triggerEvent('search', { value: '' });
+    },
+    // 取消
+    shrink: function () {
+      this.setData({
+        height: '780rpx',
+        focus: false,
+        searchValue: '',
+        showOption: this.properties.option,
+        status: this.properties.loadStatus,
+        index: this.data.clickIndex,
+      });
+    },
+    // 获取焦点
+    onFocus: function () {
+      this.setData({
+        height: '1100rpx',
+        focus: true,
+        index: -1,
+      });
+    },
+    // 选中项
+    onItemClick: function (e) {
+      const item = e.currentTarget.dataset.value;
+      if (item.disabled) return;
+      this.triggerEvent('onSelectPicker', item);
+    },
+    // 滚动到底部
+    bindscrolltolower: function () {
+      if (!this.properties.isTurnPages) {
+        return;
+      }
+      const { isFinish, searchValue, searchPageNo } = this.data;
+      if (searchValue === '') {
+        if (this.properties.loadStatus === 1 && isFinish) {
+          this.setData({
+            pageNo: this.properties.pageNo + 1,
+            isFinish: false,
+          });
+          this.triggerEvent('_childFetchData', {
+            isSearch: false,
+            pageNo: this.properties.pageNo,
+          });
+        }
+      } else {
+        if (this.properties.searchStatus === 1 && isFinish) {
+          this.setData({
+            searchPageNo: this.data.searchPageNo + 1,
+            isFinish: false,
+          });
+          this.triggerEvent('_childFetchData', {
+            isSearch: true,
+            pageNo: searchPageNo + 1,
+            searchValue,
+          });
+        }
+      }
+    },
+    // 重试
+    onRetry: function () {
+      const { pageNo, searchValue, searchPageNo } = this.data;
+      if (searchValue === '') {
+        if (this.properties.loadStatus === 2) {
+          this.setData({
+            status: 1,
+          });
+          this.triggerEvent('_childFetchData', {
+            isSearch: false,
+            pageNo: pageNo,
+          });
+        }
+      } else {
+        if (this.properties.searchStatus === 2) {
+          this.setData({
+            status: 1,
+          });
+          this.triggerEvent('_childFetchData', {
+            isSearch: true,
+            pageNo: searchPageNo,
+            searchValue,
+          });
+        }
+      }
+    },
+  },
+  observers: {
+    'option, loadStatus, searchOption, searchStatus, _needFetch': function (
+      option,
+      loadStatus,
+      searchOption,
+      searchStatus
+    ) {
+      if (this.data.searchValue === '') {
+        const { chooseIndexValue } = this.properties;
+        let index = -1;
+        if (chooseIndexValue !== '') {
+          index = option.findIndex((item) => item.value === chooseIndexValue);
+        } else {
+          option.some((item, i) => {
+            if (!item?.disabled) {
+              index = i;
+              return true;
+            }
+          });
+        }
+        this.setData({
+          status: loadStatus,
+          showOption: option,
+          isFinish: true,
+          index: index,
+          clickIndex: index,
+        });
+      } else {
+        this.setData({
+          status: searchStatus,
+          showOption: searchOption,
+          isFinish: true,
+          index: -1,
+        });
+      }
+    },
+  },
+});

package/components/form/select/dropdown-select/index.json

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

package/components/form/select/dropdown-select/index.wxml

@@ -0,0 +1,35 @@
+<view class="weda-ui-custom-picker">
+  <view class="weda-ui-custom-mask" data-clear="false" bindtap="cancelPicker"></view>
+  <view class="weda-ui-custom-picker__inner" style="height: {{height}};">
+    <view wx:if="{{!focus}}" class="weda-ui-custom-picker__header">
+      <button class="weda-ui-custom-picker__header-btn" bindtap="cancelPicker" data-clear="false">取消</button>
+    </view>
+    <view class="weda-ui-custom-search {{focus?'is-focused':''}}" style="{{focus? 'margin: 34rpx 32rpx 16rpx 32rpx':'margin: 20rpx 32rpx'}}">
+      <view class="weda-ui-custom-search-box" bindtap="onFocus">
+        <input class="weda-ui-input" focus="{{focus}}" bindfocus="onFocus" bindblur="onBlur" bindinput="bindinput" value="{{searchValue}}" hold-keyboard="true" bindconfirm="bindconfirm" />
+        <view class="weda-ui-custom-search-box__label">
+          <span class="weda-ui-custom-search-box__search-icon"></span>
+          <span class="weda-ui-custom-search-box__search-placeholder"> 搜索 </span>
+        </view>
+        <span wx:if="{{focus && searchValue !== ''}}" class="weda-ui-custom-search-box__dismiss-icon" bindtap="clear"></span>
+      </view>
+      <text class="weda-ui-custom-search__btn-cancle" bindtap="shrink">取消</text>
+    </view>
+    <scroll-view wx:if="{{status !== -1}}" class="weda-ui-custom-picker__body" scroll-y="true" enhanced="true" bindscrolltolower="bindscrolltolower">
+      <view class="weda-ui-custom-picker__cloumns">
+        <view class="weda-ui-custom-picker__cloumn">
+          <view wx:for="{{showOption}}" wx:key="i" wx:for-index="i" class="weda-ui-custom-picker__cloumn-item {{ i === index ? 'is-selected':''}} {{ (i === disabledIndex || item.disabled) ? 'is-disabled':''}}" bindtap="onItemClick" data-value="{{item}}">
+            <text class="weda-ui-custom-picker__cloumn-item-text">{{item.label}}</text>
+          </view>
+          <view wx:if="{{status === 1}}" class="weda-ui-custom-picker__status weda-ui-custom-picker__status--loading"> <i class="weda-ui-custom-picker__loading-icon"></i>加载中... </view>
+          <view wx:if="{{status === 2}}" class="weda-ui-custom-picker__status">
+            加载失败
+            <text class="weda-ui-custom-picker__btn weda-ui-custom-picker__btn--link" bindtap="onRetry">重试</text>
+          </view>
+          <view wx:if="{{status === 3}}" class="weda-ui-custom-picker__status"> 暂无数据 </view>
+        </view>
+      </view>
+    </scroll-view>
+    <view wx:if="{{status === -1}}" class="weda-ui-custom-picker__empty">暂无数据</view>
+  </view>
+</view>

package/components/form/select/dropdown-select/index.wxss

@@ -0,0 +1,293 @@
+.weda-ui-custom-mask {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background: rgba(0, 0, 0, 0.4);
+  transition: all 0.4s ease-in-out 0;
+  pointer-events: none;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.weda-ui-custom-picker {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: 1001;
+}
+
+.weda-ui-custom-picker__inner {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #fff;
+  border-radius: 10px 10px 0 0;
+  height: 390px;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 30px;
+}
+
+.weda-ui-custom-picker__header {
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: space-between;
+  padding: 12px 20px;
+  border-bottom: 0.5px solid #e3e6eb;
+}
+
+.weda-ui-custom-picker__body {
+  padding: 5px 16px;
+  overflow: auto;
+  flex: 1 1 0px;
+  box-sizing: border-box;
+}
+
+.weda-ui-custom-picker__header-btn {
+  margin: 0;
+  background-color: transparent;
+  font-size: 16px;
+  padding: 0;
+  line-height: 24px;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.weda-ui-custom-picker__header-btn.is-primary {
+  color: var(--wd-color-brand, #0052d9);
+}
+
+.weda-ui-custom-picker__header-btn::after {
+  border: none;
+}
+
+.weda-ui-custom-picker__cloumns {
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+  /* padding: 0 16px; */
+  /* height: 200px; */
+  overflow: hidden;
+}
+
+.weda-ui-custom-picker__cloumn {
+  flex: 1 1 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: auto;
+  /* height: 199px; */
+}
+
+.weda-ui-custom-picker__cloumn::-webkit-scrollbar {
+  display: none;
+}
+
+.weda-ui-custom-picker__cloumn-item {
+  display: flex;
+  align-items: center;
+  white-space: pre-wrap;
+  height: 48px;
+  justify-content: flex-start;
+  color: rgba(0, 0, 0, 0.9);
+  position: relative;
+}
+
+.weda-ui-custom-picker__cloumn-item::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  background-color: #e7e7e7;
+  width: 100%;
+  height: 1px;
+  transform: scaleY(0.5);
+}
+
+/* theme */
+.weda-ui-custom-picker__cloumn-item.is-selected {
+  color: var(--wd-color-brand, #0052d9);
+}
+
+.weda-ui-custom-picker__cloumn-item.is-selected::after {
+  content: '';
+  display: block;
+  width: 8px;
+  height: 16px;
+  border-color: var(--wd-color-brand, #0052d9);
+  border-style: solid;
+  border-width: 0 1.5px 1.5px 0;
+  transform: rotate(45deg);
+  position: absolute;
+  right: 10px;
+}
+
+.weda-ui-custom-picker__cloumn-item.is-disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+.weda-ui-custom-picker__empty {
+  color: rgba(0, 0, 0, 0.4);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.weda-ui-custom-picker__status {
+  left: 16px;
+  color: rgba(0, 0, 0, 0.4);
+  font-size: 14px;
+  height: 48px;
+  line-height: 48px;
+  display: flex;
+  vertical-align: middle;
+}
+
+.weda-ui-custom-picker__status--loading {
+  color: var(--wd-color-brand, #0052d9);
+  display: flex;
+  align-items: center;
+}
+
+.weda-ui-custom-picker__status--empty {
+  color: #00000042;
+}
+
+.weda-ui-custom-picker__loading-icon {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  background-image: url(data:image/png;base64,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);
+  background-repeat: no-repeat;
+  background-size: contain;
+  animation: rotate360 0.8s linear infinite;
+}
+
+@keyframes rotate360 {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.weda-ui-custom-picker__status--loading .weda-ui-custom-picker__loading-icon {
+  margin-right: 8px;
+}
+
+.weda-ui-custom-picker__btn {
+  background-color: transparent;
+  border: none;
+  font-size: 14px;
+  margin-left: 8px;
+}
+
+.weda-ui-custom-picker__btn--link {
+  color: var(--wd-color-brand, #0052d9);
+}
+
+/* 搜索 */
+.weda-ui-custom-search {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  margin: 10px 16px;
+}
+
+.weda-ui-custom-search-box {
+  display: flex;
+  align-items: center;
+  flex: 1 1 0px;
+  background-color: #f1f2f5;
+
+  border-radius: 4px;
+  height: 100%;
+  position: relative;
+  transition: all 0.8s linear;
+}
+
+.weda-ui-custom-search .weda-ui-input {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  font-size: 16px;
+  line-height: 24px;
+  background-color: inherit;
+  padding: 0 40px 0 40px;
+  caret-color: var(--wd-color-brand, #0052d9);
+  color: rgba(0, 0, 0, 0.9);
+  border-radius: 4px;
+}
+
+.weda-ui-custom-search-box__label {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.weda-ui-custom-search-box__search-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 4px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0Ljc2NTUgMTUuMzI3OUMxMy41Mzc4IDE2LjMyMjEgMTEuOTc0MSAxNi45MTc2IDEwLjI3MTQgMTYuOTE3NkM2LjMyNDUzIDE2LjkxNzYgMy4xMjUgMTMuNzE4MSAzLjEyNSA5Ljc3MTMyQzMuMTI1IDUuODI0NTEgNi4zMjQ1MyAyLjYyNSAxMC4yNzE0IDIuNjI1QzE0LjIxODIgMi42MjUgMTcuNDE3NyA1LjgyNDUxIDE3LjQxNzcgOS43NzEzMkMxNy40MTc3IDExLjQ3NDEgMTYuODIyMSAxMy4wMzc4IDE1LjgyOCAxNC4yNjU1TDIxLjEyNSAxOS41NjI1TDIwLjA2MjYgMjAuNjI1TDE0Ljc2NTUgMTUuMzI3OVpNMTUuOTE1MiA5Ljc3MTMyQzE1LjkxNTIgNi42NTQzNCAxMy4zODg0IDQuMTI3NTIgMTAuMjcxNCA0LjEyNzUyQzcuMTU0MzUgNC4xMjc1MiA0LjYyNzUyIDYuNjU0MzQgNC42Mjc1MiA5Ljc3MTMyQzQuNjI3NTIgMTIuODg4MyA3LjE1NDM1IDE1LjQxNTEgMTAuMjcxNCAxNS40MTUxQzEzLjM4ODQgMTUuNDE1MSAxNS45MTUyIDEyLjg4ODMgMTUuOTE1MiA5Ljc3MTMyWiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC40Ii8+Cjwvc3ZnPgo=);
+  background-repeat: no-repeat;
+}
+
+.weda-ui-custom-search-box__dismiss-icon {
+  position: absolute;
+  right: 12px;
+  width: 24px;
+  height: 24px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIyLjUgMTJDMjIuNSA2LjIwMTAxIDE3Ljc5OSAxLjUgMTIgMS41QzYuMjAxMDEgMS41IDEuNSA2LjIwMTAxIDEuNSAxMkMxLjUgMTcuNzk5IDYuMjAxMDEgMjIuNSAxMiAyMi41QzE3Ljc5OSAyMi41IDIyLjUgMTcuNzk5IDIyLjUgMTJaTTguNTA2MzYgNy40MjEzMUwxMiAxMC45MzYxTDE1LjQ5MzcgNy40MjEzMUwxNi41NTc1IDguNDc4NzZMMTMuMDU3NSAxMkwxNi41NTc1IDE1LjUyMTJMMTUuNDkzNyAxNi41Nzg3TDEyIDEzLjA2MzlMOC41MDYzNyAxNi41Nzg3TDcuNDQyNTEgMTUuNTIxMkwxMC45NDI1IDEyTDcuNDQyNSA4LjQ3ODc2TDguNTA2MzYgNy40MjEzMVoiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuNCIvPgo8L3N2Zz4K);
+  background-repeat: no-repeat;
+}
+
+/* theme */
+.weda-ui-custom-search__btn-cancle {
+  flex: 0 0 auto;
+  display: none;
+  margin-left: 16px;
+  color: var(--wd-color-brand, #0052d9);
+  font-size: 32rxp;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+}
+
+.weda-ui-custom-search__btn-cancle::after {
+  border: none;
+}
+
+/* 获取焦点后 */
+.weda-ui-custom-search.is-focused .weda-ui-custom-search__btn-cancle {
+  display: inline-flex;
+}
+
+.weda-ui-custom-search.is-focused .weda-ui-custom-search-box__label {
+  left: 12px;
+  transform: translateX(0);
+}
+
+.weda-ui-custom-search.is-focused
+  .weda-ui-custom-search-box__search-placeholder {
+  display: none;
+}
+
+.weda-ui-custom-picker__cloumn-item-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-right: 50px;
+}

package/components/form/select/formats-util.js

@@ -0,0 +1,15 @@
+const SINGLE_FOREIGN_FORMATS = [
+  'father-son',
+  'related',
+  'many-one',
+  'one-one',
+  'one-one-r',
+];
+/** do NOT export this array */
+const formatNeedDataFetch = [...SINGLE_FOREIGN_FORMATS, 'x-enum'];
+export function isSingleForeignFormat(format) {
+  return SINGLE_FOREIGN_FORMATS.includes(format);
+}
+export function isFormatNeedFetch(format) {
+  return formatNeedDataFetch.includes(format);
+}