oxy-uni-ui 1.1.0 → 1.2.3

package/components/oxy-select/types.ts

@@ -0,0 +1,71 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
+
+export const selectProps = {
+  ...baseProps,
+  /**
+   * 选中项
+   */
+  modelValue: makeRequiredProp([String, Number, Array]),
+  /**
+   * 是否多选
+   */
+  multiple: makeBooleanProp(false),
+  /**
+   * 是否禁用
+   */
+  disabled: makeBooleanProp(false),
+  /** 只读 */
+  readonly: makeBooleanProp(false),
+  /**
+   * 多作为 key 唯一标识的键名
+   */
+  labelKey: makeStringProp('label'),
+  /**
+   * 多作为 value 唯一标识的键名
+   */
+  valueKey: makeStringProp('value'),
+  /**
+   * 是否开启搜索
+   */
+  filterable: makeBooleanProp(false),
+  /**
+   * 是否折叠显示标签
+   */
+  collapseTags: makeBooleanProp(false),
+  /**
+   * 超过多少个标签才折叠
+   */
+  collapseTagsNum: makeNumberProp(1),
+  /**
+   * 选择器数据
+   */
+  columns: makeArrayProp<Record<string, any>>(),
+  /**
+   * 左侧标题
+   */
+  label: makeStringProp(''),
+  /** 设置左侧标题宽度 */
+  labelWidth: makeStringProp(''),
+  /** 选择器的值靠右展示 */
+  alignRight: makeBooleanProp(false),
+  /**
+   * 输入框的提示文字
+   */
+  placeholder: makeStringProp('请选择'),
+  /**
+   * 无选项提示
+   */
+  emptyTips: makeStringProp('无选项'),
+  /**
+   * 是否可清除
+   */
+  clear: makeBooleanProp(true),
+  /**
+   * 格式化输出
+   */
+  format: makeStringProp(''),
+  defItem: makeNumberProp(0)
+}
+
+export type SelectProps = ExtractPropTypes<typeof selectProps>

package/components/oxy-select-picker/oxy-select-picker.vue

@@ -320,6 +320,9 @@ function close() {
 
 function open() {
   if (props.disabled || props.readonly) return
+  if (isFunction(props.beforeOpen) && !props.beforeOpen()) {
+    return
+  }
   selectList.value = valueFormat(props.modelValue)
   pickerShow.value = true
   isConfirm.value = false

package/components/oxy-select-picker/types.ts

@@ -105,7 +105,11 @@ export const selectPickerProps = {
   /**
    * 必填标记位置，可选值：before、after
    */
-  markerSide: makeStringProp<'before' | 'after'>('before')
+  markerSide: makeStringProp<'before' | 'after'>('before'),
+  /**
+   * 打开pop之前的校验
+   */
+  beforeOpen: Function as PropType<() => boolean>
 }
 export type SelectPickerProps = ExtractPropTypes<typeof selectPickerProps>
 

package/components/oxy-stream-render/index.scss

@@ -0,0 +1,6 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(stream-render) {
+  display: none;
+}

package/components/oxy-stream-render/oxy-stream-render.vue

@@ -0,0 +1,204 @@
+<template>
+  <!-- #ifdef H5 || APP-PLUS -->
+  <view class="oxy-stream-render" :change:stream-request="appStreamHandler.handleStreamRequest" :stream-request="streamRequest" />
+  <!-- #endif -->
+</template>
+
+<script>
+export default {
+  name: 'oxy-stream-render',
+  props: {
+    streamRequest: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  },
+  data() {
+    return {
+      requestTask: null
+    }
+  },
+  watch: {
+    streamRequest: {
+      handler(newVal) {
+        // #ifndef H5 || APP-PLUS
+        this.handleStreamRequest(newVal)
+        // #endif
+      },
+      deep: true
+    }
+  },
+  methods: {
+    handleAppStreamData({ chunk, finished }) {
+      this.$emit('stream-data', { chunk, finished })
+    },
+    handleAppStreamError({ message, type }) {
+      this.$emit('stream-error', { message, type })
+    },
+    // #ifndef H5 || APP-PLUS
+    handleStreamRequest(newVal) {
+      if (newVal && newVal.cancel) {
+        if (this.requestTask) {
+          this.requestTask.abort()
+          this.requestTask = null
+        }
+        this.handleAppStreamData({
+          chunk: null,
+          finished: true
+        })
+        return
+      }
+
+      if (!newVal || !newVal.url) {
+        return
+      }
+
+      if (this.requestTask) {
+        this.requestTask.abort()
+        this.requestTask = null
+      }
+
+      const { url, method, headers, body } = newVal
+
+      this.requestTask = uni.request({
+        url,
+        method: method || 'GET',
+        header: headers || {},
+        data: body,
+        enableChunked: true,
+        success: (res) => {
+          this.handleAppStreamData({
+            chunk: null,
+            finished: true
+          })
+          this.requestTask = null
+        },
+        fail: (err) => {
+          this.handleAppStreamError({
+            message: err.errMsg || 'Request failed',
+            type: err.errMsg === 'request:fail abort' ? 'AbortError' : 'Error'
+          })
+          this.requestTask = null
+        }
+      })
+      // 这里监听消息
+      this.requestTask.onChunkReceived((res) => {
+        let decoder = new TextDecoder('utf-8')
+        let chunk = decoder.decode(new Uint8Array(res.data))
+        this.handleAppStreamData({
+          chunk,
+          finished: false
+        })
+      })
+    }
+    // #endif
+  }
+}
+</script>
+
+<script module="appStreamHandler" lang="renderjs">
+// #ifdef H5 || APP-PLUS
+module.exports = {
+  data() {
+    return {
+      abortController: null,
+    }
+  },
+  methods: {
+    handleStreamRequest(newVal, _oldVal, _ownerInstance) {
+      if (newVal && newVal.cancel) {
+        if (this.abortController) {
+          this.abortController.abort()
+          this.abortController = null
+        }
+        this.$ownerInstance.callMethod('handleAppStreamData', {
+          chunk: null,
+          finished: true,
+        })
+        return
+      }
+
+      if (!newVal || !newVal.url) {
+        return
+      }
+
+      if (this.abortController) {
+        this.abortController.abort()
+        this.abortController = null
+      }
+
+      this.abortController = new AbortController()
+
+      const { url, method, headers, body } = newVal
+
+      fetch(url, {
+        method,
+        headers,
+        body,
+        signal: this.abortController.signal,
+      })
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`)
+          }
+
+          if (!response.body || !response.body.getReader) {
+            throw new Error('ReadableStream not supported')
+          }
+          const reader = response.body.getReader()
+          const decoder = new TextDecoder()
+
+          const readStream = async () => {
+            try {
+              const { done, value } = await reader.read()
+
+              if (done) {
+                this.abortController = null
+                this.$ownerInstance.callMethod('handleAppStreamData', {
+                  chunk: null,
+                  finished: true,
+                })
+                return
+              }
+
+              const chunk = decoder.decode(value, { stream: true })
+
+              this.$ownerInstance.callMethod('handleAppStreamData', {
+                chunk,
+                finished: false,
+              })
+
+              return readStream()
+            }
+            catch (error) {
+              this.abortController = null
+              this.$ownerInstance.callMethod('handleAppStreamError', {
+                message: error.message,
+                type:error.name
+              })
+            }
+          }
+
+          return readStream()
+        })
+        .catch((error) => {
+          this.abortController = null
+          this.$ownerInstance.callMethod('handleAppStreamError', {
+            message: error.message,
+            type:error.name
+          })
+        })
+    },
+  },
+}
+// #endif
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-stream-render/types.ts

@@ -0,0 +1,5 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+
+export const streamRenderProps = {}
+
+export type StreamRenderProps = ExtractPropTypes<typeof streamRenderProps>

package/components/oxy-tree/index.scss

@@ -1,9 +1,47 @@
 @import '../common/abstracts/variable';
 @import '../common/abstracts/mixin';
+@import '../oxy-virtual-scroll/index.scss';
+
+.oxy-tree {
+  position: relative;
+  &__virtual-scroll {
+    position: relative;
+    overflow: hidden;
+  }
+
+  &__view {
+    height: 100%;
+  }
+
+  &__container {
+    position: relative;
+  }
+
+  &__items {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+  .oxy-tree__search{
+    display: flex;
+    :deep(.oxy-button){
+      min-width: 60px;
+    }
+    :deep(.oxy-tree__search-input) {
+      flex: 1;
+      background-color: $-tree-search-input-color;
+      padding: 6px 12px;
+      border-radius: 4px;
+      margin-bottom: 8px;
+      margin-right: 12px;
+    }
+  }
+
+
+}
 
 .oxy-tree-node-content {
-  line-height: 44px;
-  height: 44px;
   display: flex;
   width: fit-content;
   width: 100%;
@@ -11,13 +49,13 @@
   align-items: center;
 
   &.expanded {
-    .oxy-tree-node-icon {
+    :deep(.oxy-tree-node-icon) {
       transform: rotate(0deg);
     }
   }
 
   &.is-leaf {
-    .oxy-tree-node-icon {
+    :deep(.oxy-tree-node-icon) {
       opacity: 0;
     }
   }
@@ -51,7 +89,7 @@
     }
   }
 
-  .oxy-tree-node-icon {
+  :deep(.oxy-tree-node-icon) {
     transform: rotate(-90deg);
   }