@cloudbase/weda-ui-mp 3.15.7 → 3.16.0

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

@@ -0,0 +1,192 @@
+Component({
+  properties: {
+    isActive: {
+      type: Boolean,
+      value: true,
+    },
+    option: {
+      type: Array,
+      value: [],
+    },
+    searchStatus: {
+      type: Number,
+      value: 0,
+    },
+    loadStatus: {
+      type: Number,
+      value: 0,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    ignoreCase: {
+      type: Boolean,
+      value: true,
+    },
+    selectedValue: {
+      type: Array,
+      value: [],
+    },
+    searchable: {
+      type: Boolean,
+      value: true,
+    },
+    filterable: {
+      type: Boolean,
+      value: false,
+    },
+    multiple: {
+      type: Boolean,
+      value: false,
+    },
+    currentPageNo: {
+      type: Number,
+      value: 1,
+    },
+  },
+  data: {
+    height: '390px',
+    focus: false,
+    searchValue: '',
+    index: -1,
+    status: 0,
+    showOption: [],
+    pageNo: 1,
+    selectedCache: [], // 缓存当前选中值
+  },
+
+  methods: {
+    cancelPicker: function (e) {
+      if (this.data.multiple) {
+        const { option } = this.properties;
+        this.setData({ selectedCache: option.filter((item) => item.check) });
+      }
+      this.triggerEvent('onClosePicker');
+    },
+    // 监听输入
+    bindinput: function (event) {
+      const value = event.detail.value;
+      this.setData({
+        searchValue: value,
+        pageNo: 1,
+      });
+      this.triggerEvent('search', { value });
+    },
+    // 清空输入
+    clear: function () {
+      this.setData({
+        searchValue: '',
+        showOption: this.properties.option,
+        pageNo: 1,
+      });
+      this.triggerEvent('search', { value: '' });
+    },
+    // 取消
+    shrink: function () {
+      this.setData({
+        height: '390px',
+        focus: false,
+        searchValue: '',
+        pageNo: 1,
+        showOption: this.properties.option,
+      });
+      this.triggerEvent('search', { value: '', noEvent: true });
+    },
+    confirmModal: function () {
+      const { selectedCache } = this.data;
+      this.triggerEvent('onSelectPicker', selectedCache);
+    },
+    // 获取焦点
+    onFocus: function () {
+      this.setData({
+        height: '550px',
+        focus: true,
+      });
+    },
+    // 处理当前选中值
+    dealSelectedValue(item) {
+      const { selectedCache } = this.data;
+      const index = selectedCache.findIndex((v) => v.value === item.value);
+      if (index > -1) {
+        return [...selectedCache.slice(0, index), ...selectedCache.slice(index + 1)];
+      }
+
+      return [...selectedCache, item];
+    },
+    // 选中项
+    onItemClick: function (e) {
+      const item = e.currentTarget.dataset.value;
+      if (item.disabled) return;
+      if (this.data.multiple) {
+        this.setData({
+          selectedCache: this.dealSelectedValue(item),
+        });
+      } else {
+        this.triggerEvent('onSelectPicker', item);
+      }
+    },
+    // 滚动到底部
+    bindscrolltolower: function () {
+      if (this.properties.loadStatus === 0) {
+        const pageNo = this.data.pageNo + 1;
+        this.setData({ pageNo });
+        this.triggerEvent('_childFetchData', {
+          pageNo,
+          searchValue: this.data.searchValue,
+        });
+      }
+    },
+    // 重试
+    onRetry: function () {
+      const { pageNo } = this.data;
+      if (this.properties.loadStatus === 2) {
+        this.setData({
+          status: 1,
+        });
+        this.triggerEvent('_childFetchData', {
+          pageNo: pageNo,
+          searchValue: this.data.searchValue,
+        });
+      }
+    },
+  },
+  observers: {
+    'option,searchValue,filterable': function (option, searchValue, filterable) {
+      const { ignoreCase } = this.properties;
+      if (filterable) {
+        this.setData({
+          showOption: option,
+        });
+      } else {
+        const searchRange = option.filter((item) => {
+          if (ignoreCase) {
+            return String(item.label).toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
+          }
+          return item.label.indexOf(searchValue) !== -1;
+        });
+        this.setData({
+          showOption: searchRange,
+          status: searchRange.length > 0 ? 0 : 3,
+        });
+      }
+    },
+    'selectedValue,showOption': function (selectedValue, showOption) {
+      const data = Array.isArray(selectedValue) ? selectedValue : [selectedValue];
+      const optionMap = showOption.reduce((pre, cur) => {
+        pre[cur.value] = cur;
+        return pre;
+      }, {});
+      const selectedCache = data.map((d) => optionMap[d]).filter((item) => !!item);
+      this.setData({ selectedCache });
+    },
+    loadStatus: function (loadStatus) {
+      this.setData({
+        status: loadStatus,
+      });
+    },
+    currentPageNo: function (currentPageNo) {
+      this.setData({ pageNo: currentPageNo });
+    },
+  },
+});

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

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

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

@@ -0,0 +1,37 @@
+<wxs module="tools"> function includes(array, item) { return array.map(function (v) { return v.value }).indexOf(item.value) !== -1 } module.exports = { includes: includes } </wxs>
+<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>
+      <button wx:if="{{multiple}}" class="weda-ui-custom-picker__header-btn" bindtap="confirmModal">确定</button>
+    </view>
+    <view wx:if="{{searchable}}" 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 {{multiple?'multiple':''}}">
+          <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 {{multiple?'multiple':''}} {{ tools.includes(selectedCache, item) ? 'is-selected':''}} {{ (item.disabled) ? 'is-disabled':''}}" bindtap="onItemClick" data-value="{{item}}">
+            <text class="weda-ui-custom-picker__cloumn-item-text {{multiple?'multiple':''}}">{{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&&!showOption.length}}" 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/wd-select/select/dropdown-select/index.wxss

@@ -0,0 +1,329 @@
+.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);
+}
+
+.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.multiple.is-selected {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+/* theme */
+.weda-ui-custom-picker__cloumn-item.multiple.is-selected::after {
+  content: '';
+  width: 21px;
+  height: 21px;
+  border: none;
+  border-radius: 3px;
+  display: block;
+  position: absolute;
+  left: 0px;
+  background-color: var(--wd-color-brand, #0052d9);
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxNCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNDAxNDYgNy45NDI3QzMuNDAxNCA3Ljk0MjY0IDMuNDAxNTMgNy45NDI3NiAzLjQwMTQ2IDcuOTQyN0wwLjc1IDUuMjkxMjNMMi41NDM0OSAzLjU0OTE5TDUuMTcyMSA2LjE3NzhMMTEuMzY4NyAwTDEzLjEyNDQgMS43NTU3TDYuOTI3OCA3LjkzMzVMNi45MzcxOCA3Ljk0Mjg5TDYuOTExMDkgNy45NjgyM0M2Ljg1NyA4LjAyMDc3IDYuODAxMTQgOC4wNzAzNyA2Ljc0MzcxIDguMTE3MDRMNi4wNDEyMyA4LjgxNzM4QzUuNTUyODYgOS4zMDQyNyA0Ljc2MjQ0IDkuMzAzNjcgNC4yNzQ4MSA4LjgxNjA0TDMuNDAxNDYgNy45NDI3WiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC45Ii8+Cjwvc3ZnPg==);
+  background-repeat: no-repeat;
+  background-position: center;
+  transform: rotate(0);
+}
+
+.weda-ui-custom-picker__cloumn-item.multiple::after {
+  content: '';
+  width: 20px;
+  height: 20px;
+  border: 1px solid #dcdcdc;
+  border-radius: 3px;
+  display: block;
+  position: absolute;
+  left: 0px;
+}
+
+.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.multiple {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-left: 30px;
+}
+.weda-ui-custom-picker__cloumn-item-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-right: 50px;
+}

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

@@ -1,9 +1,20 @@
 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'];
+const formatNeedDataFetch = [...SINGLE_FOREIGN_FORMATS, 'x-enum',    'one-many',
+'many-many',];
 export function isSingleForeignFormat(format) {
   return SINGLE_FOREIGN_FORMATS.includes(format);
 }
 export function isFormatNeedFetch(format) {
   return formatNeedDataFetch.includes(format);
 }
+
+const formatWithFilterable = [
+    ...SINGLE_FOREIGN_FORMATS,
+    'one-many',
+    'many-many',
+  ] ;
+  
+export function isFormatWithFilterable(format) {
+    return formatWithFilterable.includes(format);
+}