oxy-uni-ui 1.2.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

@@ -23,6 +23,22 @@
     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 {
@@ -80,4 +96,4 @@
   .oxy-tree-node {
     flex: 1;
   }
-}
+}

package/components/oxy-tree/oxy-tree.vue

@@ -1,5 +1,20 @@
 <template>
   <view class="oxy-tree" :class="customClass" :style="customStyle">
+    <slot name="search-button" v-if="showFilter">
+      <view class="oxy-tree__search">
+        <oxy-input
+          type="text"
+          no-border
+          class="oxy-tree__search-input"
+          prefix-icon="search"
+          :placeholder="filterPlaceholder"
+          v-model="searchValue"
+          @confirm="handleFilter"
+        />
+        <oxy-button :round="false" @click="handleFilter">筛选</oxy-button>
+      </view>
+    </slot>
+
     <view v-if="data.length" class="oxy-tree__virtual-scroll" :style="{ height: height }">
       <scroll-view class="oxy-tree__view" scroll-y :scroll-x="true" :scroll-top="scrollTop" @scroll="handleScroll">
         <view class="oxy-tree__container" :style="{ height: totalHeight + 'px' }">
@@ -82,11 +97,12 @@ const emit = defineEmits<{
 
 const { getDisabled, getChildren, getLabel, getKey } = useTreeMethods(props)
 const expandedKeySet = ref<Set<string>>(new Set())
+const bakExpandedKeySet = ref<Set<string> | null>(null)
 const hiddenNodeKeySet = ref<Set<string>>(new Set())
 const checkedKeys = ref<Set<string>>(new Set())
 const immediateKeySet = ref<Set<string>>(new Set())
 const currentNode = ref<TreeNode>()
-
+const searchValue = ref('')
 const tree = ref<Tree>() as Ref<Tree>
 const flattenTree = computed<TreeNode[]>(() => {
   const expandedKeys = expandedKeySet.value
@@ -169,7 +185,6 @@ const createTree = (data: RawTreeNode[]) => {
         node.checked = checkedKeys.value.has(value)
       }
       if (expandAll.value) {
-        node.expanded = true
         expandedKeySet.value.add(value)
       }
       const children = getChildren(rawNode)
@@ -202,9 +217,8 @@ const createTree = (data: RawTreeNode[]) => {
 }
 
 const toggleExpand = (node: TreeNode, flag: boolean) => {
-  node.expanded = flag
   const key = node.key
-  if (node.expanded) {
+  if (flag) {
     expandedKeySet.value.add(key)
     emit('node-expand', node)
   } else {
@@ -279,7 +293,6 @@ const updateNode = (node: TreeNode | undefined) => {
 const expandNode = (node: TreeNode | undefined) => {
   if (!node) return
   !node.isLeaf && expandedKeySet.value.add(node.key)
-  node.expanded = true
   if (node.parent) {
     expandNode(node.parent)
   }
@@ -287,6 +300,12 @@ const expandNode = (node: TreeNode | undefined) => {
 const initValue = () => {
   if (showCheckbox.value) {
     if (isSetsEqual(checkedKeys.value, new Set(modelValue.value as string[]))) return
+    Array.from(checkedKeys.value).map((value) => {
+      const node = tree.value?.treeNodeMap.get(value as string)
+      if (node) {
+        toggleChecked(node, false)
+      }
+    })
     checkedKeys.value = new Set(modelValue.value as string[])
 
     Array.isArray(modelValue.value) &&
@@ -322,7 +341,7 @@ const getNodeStyle = (item: TreeNode) => {
 const getNodeClass = (item: TreeNode) => {
   const currentValue = currentNode?.value
   return {
-    expanded: item.expanded,
+    expanded: expandedKeySet.value.has(item.key),
     checked: item.checked,
     'is-leaf': item.isLeaf,
     immediate: item.immediate,
@@ -335,7 +354,7 @@ const handleNodeClick = (item: TreeNode) => {
   handleClick(item)
 }
 const handleClickExpand = (item: TreeNode) => {
-  toggleExpand(item, !item.expanded)
+  toggleExpand(item, !expandedKeySet.value.has(item.key))
 }
 watch(
   () => data.value,
@@ -387,17 +406,79 @@ const scrollToElementById = (id: string | number) => {
     })
   }
 }
+const getCheckedNodes = (): (TreeNode | any)[] => {
+  const checkNodes = Array.from(checkedKeys.value).map((key) => {
+    return tree.value?.treeNodeMap.get(key as string) || { [props.nodeKey]: key }
+  })
+  return checkNodes
+}
+
+const filter = (query: string) => {
+  if (bakExpandedKeySet.value === null) {
+    bakExpandedKeySet.value = new Set(expandedKeySet.value)
+  }
+  const keys = doFilter(query)
+  if (query && keys) {
+    expandedKeySet.value = keys
+  } else if (!query) {
+    bakExpandedKeySet.value && (expandedKeySet.value = new Set(bakExpandedKeySet.value))
+    bakExpandedKeySet.value = null
+  }
+}
+
+const doFilter = (query: string) => {
+  if (typeof props.filterMethod !== 'function') {
+    return
+  }
+  const expandKeySet = new Set<string>()
+  const hiddenKeys = hiddenNodeKeySet.value
+  const family: TreeNode[] = []
+  const nodes = tree.value.treeNodes || []
+  const filter = props.filterMethod
+  hiddenKeys.clear()
+  function traverse(nodes: TreeNode[]) {
+    nodes.forEach((node: TreeNode) => {
+      family.push(node)
+      if (filter(query, node.data)) {
+        family.forEach((member) => {
+          expandKeySet.add(member.key)
+        })
+      } else if (node.isLeaf) {
+        hiddenKeys.add(node.key)
+      }
+      const children = node.children
+      if (children) {
+        traverse(children)
+      }
+      if (!node.isLeaf) {
+        if (!expandKeySet.has(node.key)) {
+          hiddenKeys.add(node.key)
+        }
+      }
+      family.pop()
+    })
+  }
+  traverse(nodes)
+  return expandKeySet
+}
+const handleFilter = () => {
+  filter(searchValue.value)
+}
+
 defineExpose<TreeExpose>({
   toggleExpand,
   toggleChecked,
   getNodeById,
+  getCheckedNodes,
+  getCurrentNode: () => currentNode.value,
   useTree: () => tree.value,
   getTree: () => tree,
   scrollToTop,
   scrollToBottom,
   scrollToPosition,
   scrollToElement,
-  scrollToElementById
+  scrollToElementById,
+  filter
 })
 </script>
 

package/components/oxy-tree/types.ts

@@ -1,5 +1,6 @@
 import type { ComponentPublicInstance, ExtractPropTypes, Ref } from 'vue'
 import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+import { type PropType } from 'vue'
 
 // 树结构类型定义
 export type Tree = {
@@ -67,12 +68,20 @@ export const treeProps = {
    */
   itemHeight: makeStringProp('44px'),
   indent: makeNumberProp(16),
-  selectionLeafOnly: makeBooleanProp(false)
+  selectionLeafOnly: makeBooleanProp(false),
+  filterMethod: {
+    type: Function as PropType<(keyword: string, node: RawTreeNode) => boolean>,
+    default: null
+  },
+  showFilter: makeBooleanProp(false),
+  filterPlaceholder: makeStringProp('请输入节点名称')
 }
 export type TreeExpose = {
   toggleExpand: (node: TreeNode, flag: boolean) => void
   toggleChecked: (node: TreeNode, flag: boolean, isClick: boolean) => void
   getNodeById: (id: string | number) => TreeNode | undefined
+  getCheckedNodes: () => TreeNode[] | any
+  getCurrentNode: () => TreeNode | undefined
   useTree: () => Tree
   getTree: () => Ref<Tree>
   scrollToTop: () => void
@@ -80,6 +89,7 @@ export type TreeExpose = {
   scrollToPosition: (position: number | string) => void
   scrollToElement: (item: any) => void
   scrollToElementById: (id: string | number) => void
+  filter: (keyword: string) => void
 }
 export type TreeProps = ExtractPropTypes<typeof treeProps>
 export type TreeInstance = ComponentPublicInstance<TreeProps, TreeExpose>

package/components/oxy-waterfall/index.scss

@@ -0,0 +1,18 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(waterfall) {
+  overflow: hidden;
+  @include e(wrapper) {
+    height: 100%;
+    overflow: hidden;
+  }
+  @include e(container) {
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+  }
+  @include e(column) {
+    flex: 1;
+  }
+}