oxy-uni-ui 1.2.0 → 1.2.3

package/components/oxy-select/index.scss

@@ -0,0 +1,255 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(select) {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  flex: 1;
+  box-sizing: border-box;
+  position: relative;
+  .oxy-select__label {
+    margin: auto 0;
+    margin-right: $-input-cell-padding;
+  }
+  .oxy-select__icon {
+    position: absolute;
+    right: 0;
+    font-size: $-input-icon-size;
+    color: $-input-icon-color;
+  }
+  .oxy-select__icon-clear {
+    color: $-input-clear-color;
+  }
+  .oxy-select__icon-arrow {
+    transition: transform .2s;
+  }
+  .oxy-select__icon-arrow.is-open {
+    transform: rotate(180deg);
+  }
+  .oxy-select__box {
+    width: 100%;
+    flex: 1;
+  }
+  .oxy-select__wrapper {
+    font-size: $-input-fs;
+    border: 1px solid $-input-border-color;
+    box-sizing: border-box;
+    border-radius: 4px;
+    padding: 0 5px;
+    padding-left: $-input-cell-padding;
+    position: relative;
+    /* #ifndef APP-NVUE */
+    display: flex;
+    user-select: none;
+    /* #endif */
+    flex-direction: row;
+    align-items: center;
+    border-bottom: solid 1px $-input-border-color;
+    width: 100%;
+    flex: 1;
+    min-height: $-input-inner-height;
+
+    &.is-disabled {
+      background-color: $-input-disabled-color;
+      cursor: not-allowed;
+    }
+  }
+  .oxy-select__input-box {
+    width: 100%;
+    // height: $-input-inner-height;
+    position: relative;
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .oxy-select__tags {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    &-item {
+      font-size: 12px;
+      border: 1px solid #d9ecff;
+      border-radius: 4px;
+      white-space: nowrap;
+      height: 24px;
+      padding: 0 4px;
+      line-height: 22px;
+      box-sizing: border-box;
+      margin: 2px 2px;
+      display: flex;
+      max-width: 100%;
+      align-items: center;
+      background-color: #f4f4f5;
+      border-color: #e9e9eb;
+      color: #909399;
+      &:first-child {
+        margin-left: 0;
+      }
+      &-text {
+        font-size: 12px;
+        white-space: nowrap;
+        line-height: 22px;
+        color: #909399;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+    .oxy-select__icon-error{
+      margin-left: 4px;
+    }
+  }
+
+  .oxy-select__input {
+    flex: 1;
+    font-size: 14px;
+    height: 22px;
+    line-height: 22px;
+  }
+
+  .oxy-select__input-plac {
+    color: $-input-placeholder-color;
+  }
+
+  .oxy-select__selector__down {
+    top: calc(100% + 12px);
+
+    .oxy-select__selector-arrow {
+      transform: rotateX(0deg);
+      top: -6px;
+    }
+  }
+
+  .oxy-select__selector__upwards {
+    bottom: calc(100% + 12px);
+
+    .oxy-select__selector-arrow {
+      transform: rotateX(180deg);
+      bottom: -6px;
+    }
+  }
+
+  .oxy-select__selector {
+    /* #ifndef APP-NVUE */
+    box-sizing: border-box;
+    /* #endif */
+    position: absolute;
+    left: 0;
+    width: 100%;
+    background-color: #FFFFFF;
+    border: 1px solid #EBEEF5;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    z-index: 3;
+    padding: 4px 0;
+  }
+
+  .oxy-select__selector-scroll {
+    /* #ifndef APP-NVUE */
+    max-height: 200px;
+    box-sizing: border-box;
+    /* #endif */
+  }
+
+  .oxy-select__selector-empty,
+  .oxy-select__selector-item {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    // cursor: pointer;
+    /* #endif */
+    line-height: $-input-inner-height;
+    font-size: 14px;
+    text-align: center;
+    padding: 0px 10px;
+  }
+
+  .oxy-select__selector-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .oxy-select__selector-empty:last-child,
+  .oxy-select__selector-item:last-child {
+    /* #ifndef APP-NVUE */
+    border-bottom: none;
+    /* #endif */
+  }
+
+  .oxy-select_selector-item_active {
+    color: $-color-theme;
+    font-weight: bold;
+    border-radius: 3px;
+  }
+
+  .oxy-select__selector__disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  /* picker 弹出层通用的指示小三角 */
+  .oxy-select__selector-arrow,
+  .oxy-select__selector-arrow::after {
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 6px;
+  }
+
+  .oxy-select__selector-arrow {
+    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
+
+    left: 10%;
+    margin-right: 3px;
+    border-top-width: 0;
+    border-bottom-color: #EBEEF5;
+  }
+
+  .oxy-select__selector-arrow::after {
+    content: " ";
+    top: 1px;
+    margin-left: -6px;
+    border-top-width: 0;
+    border-bottom-color: #fff;
+  }
+
+  .oxy-select__input-text {
+    // width: 280px;
+    width: 90%;
+    color: $-input-color;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .oxy-select__input-selector {
+    position: absolute;
+    z-index: 1;
+  }
+
+  .oxy-select__input-filter {
+    width: auto;
+    margin-left: 6px;
+  }
+
+  .oxy-select__input-placeholder {
+    color: $-input-placeholder-color;
+  }
+
+  .oxy-select--mask {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    z-index: 2;
+  }
+}

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

@@ -0,0 +1,421 @@
+<template>
+  <view :class="`oxy-select ${customClass}`" :style="rootStyle">
+    <view v-if="label" class="oxy-select__label" :style="labelStyle">
+      <slot name="label">{{ label }}</slot>
+    </view>
+    <view class="oxy-select__box">
+      <view :class="['oxy-select__wrapper', { 'is-disabled': disabled, 'is-readonly': readonly }]">
+        <view class="oxy-select__input-box" @click="toggleSelector">
+          <view class="oxy-select__tags" v-if="multiple && currentList.length > 0">
+            <view class="oxy-select__tags-item" v-for="item in displayTags" :key="item[valueKey]">
+              <span class="oxy-select__tags-item-text">{{ item[labelKey] }}</span>
+              <view v-if="!disabled && !readonly" @click.stop="delItem(item)">
+                <oxy-icon custom-class="oxy-select__icon-error" name="error-fill" />
+              </view>
+            </view>
+            <view v-if="currentList.length > collapseTagsNum && collapseTags" class="oxy-select__tags-item">
+              <span class="oxy-select__tags-item-text">+{{ currentList.length - collapseTagsNum }}</span>
+            </view>
+            <input
+              v-if="filterable && (!disabled || !readonly)"
+              @input="inputChange"
+              class="oxy-select__input-text oxy-select__input-filter"
+              type="text"
+              placeholder="请输入"
+              v-model="filterInput"
+            />
+          </view>
+          <view v-else-if="current && current.length > 0 && !showSelector" class="oxy-select__input-text">
+            {{ current }}
+          </view>
+          <input
+            v-else-if="filterable && showSelector"
+            :focus="isFocus"
+            @input="inputChange"
+            :disabled="disabled"
+            :readonly="readonly"
+            class="oxy-select__input-text oxy-select__input-selector"
+            type="text"
+            :placeholder="placeholderOld"
+            v-model="filterInput"
+          />
+          <view v-else-if="!disabled && !readonly" class="oxy-select__input-text oxy-select__input-placeholder">{{ typePlaceholder }}</view>
+          <oxy-icon
+            v-if="(current.length > 0 && clear && !disabled && !readonly) || (currentArr.length > 0 && clear && !disabled && !readonly)"
+            custom-class="oxy-select__icon oxy-select__icon-clear"
+            name="error-fill"
+            @click="clearVal"
+          />
+          <oxy-icon
+            :custom-class="`oxy-select__icon oxy-select__icon-arrow ${showSelector ? 'is-open' : ''}`"
+            v-else-if="!disabled && !readonly"
+            name="arrow-down"
+          />
+        </view>
+        <oxy-transition :show="showSelector" name="fade" :duration="duration">
+          <view class="oxy-select--mask" @click="toggleSelector" />
+          <view class="oxy-select__selector" :class="isDown ? 'oxy-select__selector__down' : 'oxy-select__selector__upwards'">
+            <view class="oxy-select__selector-arrow"></view>
+            <scroll-view :scroll-y="true" class="oxy-select__selector-scroll">
+              <view class="oxy-select__selector-empty" v-if="filterMixinDatacomResData.length === 0">
+                <span>{{ emptyTips }}</span>
+              </view>
+              <view
+                v-else
+                :class="['oxy-select__selector-item', { 'oxy-select_selector-item_active': multiple && currentArr.includes(item[valueKey]) }]"
+                v-for="(item, index) in filterMixinDatacomResData"
+                :key="index"
+                @click="change(item)"
+              >
+                <span :class="{ 'oxy-select__selector__disabled': item.disabled }">{{ formatItemName(item) }}</span>
+                <oxy-icon v-if="multiple && currentArr.includes(item[valueKey])" name="check" />
+              </view>
+            </scroll-view>
+          </view>
+        </oxy-transition>
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-select',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { getCurrentInstance, ref, watch, onMounted, computed } from 'vue'
+import { objToStyle } from '../common/util'
+import { selectProps, type SelectProps } from './types'
+import OxyTransition from '../oxy-transition/oxy-transition.vue'
+
+type SelectOption = Record<string, any>
+type SelectModelValue = SelectProps['modelValue']
+
+const props = defineProps(selectProps)
+const emit = defineEmits(['inputChange', 'input', 'change', 'update:modelValue'])
+
+const instance = getCurrentInstance() as any
+const showSelector = ref<boolean>(false)
+const current = ref<string | SelectOption[]>('')
+const mixinDatacomResData = ref<SelectOption[]>([])
+const placeholderOld = ref<string>('')
+const currentArr = ref<Array<string | number | boolean>>([])
+const filterInput = ref<string>('')
+const isFocus = ref<boolean>(false)
+const windowHeight = ref<number>(0)
+const isDown = ref<boolean>(true)
+const rootStyle = ref('')
+const duration = ref<number>(200)
+let overlayTimer: ReturnType<typeof setTimeout> | null
+
+onMounted(() => {
+  windowHeight.value = uni.getSystemInfoSync().windowHeight
+})
+
+const labelStyle = computed(() => {
+  const labelStyle: Record<string, any> = {}
+  if (props.labelWidth) {
+    labelStyle['min-width'] = props.labelWidth
+    labelStyle['max-width'] = props.labelWidth
+  }
+  return objToStyle(labelStyle)
+})
+
+const currentList = computed(() => {
+  if (props.multiple && Array.isArray(current.value)) {
+    return current.value
+  }
+  return []
+})
+
+const displayTags = computed(() => {
+  if (props.collapseTags) {
+    return currentList.value.slice(0, props.collapseTagsNum)
+  }
+  return currentList.value
+})
+
+const filterMixinDatacomResData = computed(() => {
+  if (props.filterable && filterInput.value) {
+    return mixinDatacomResData.value.filter((e) => e[props.labelKey].includes(filterInput.value))
+  } else {
+    return mixinDatacomResData.value
+  }
+})
+
+const typePlaceholder = computed(() => {
+  return props.placeholder
+})
+
+const valueCom = computed(() => {
+  return props.modelValue
+})
+
+watch(
+  () => props.columns,
+  (newValue, oldValue) => {
+    if (Array.isArray(newValue) && oldValue !== newValue) {
+      mixinDatacomResData.value = newValue || []
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+watch(
+  () => valueCom.value,
+  () => {
+    initDefVal()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => mixinDatacomResData.value,
+  (val) => {
+    if (val.length) {
+      initDefVal()
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+watch(
+  () => showSelector.value,
+  (val) => {
+    if (overlayTimer) {
+      clearTimeout(overlayTimer)
+    }
+    if (val) {
+      rootStyle.value = `z-index: 1;${props.customStyle}`
+    } else {
+      overlayTimer = setTimeout(() => {
+        rootStyle.value = `${props.customStyle}`
+      }, duration.value)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+function getIsDown() {
+  const query = uni.createSelectorQuery().in(instance)
+  query
+    .select('.oxy-select__box')
+    .boundingClientRect((data) => {
+      const rect = data as UniApp.NodeInfo
+      if (rect && windowHeight.value - (rect.top || 0) > 200) {
+        isDown.value = true
+      } else {
+        isDown.value = false
+      }
+    })
+    .exec()
+}
+
+function initDefVal() {
+  let defValue: SelectModelValue | '' = ''
+  if ((valueCom.value || valueCom.value === 0) && !isDisabled(valueCom.value)) {
+    defValue = valueCom.value as SelectModelValue
+  } else {
+    let strogeValue: SelectModelValue | '' | undefined
+    if (strogeValue || strogeValue === 0) {
+      defValue = strogeValue
+    } else {
+      let defItem = ''
+      if (props.defItem > 0 && props.defItem <= mixinDatacomResData.value.length) {
+        defItem = mixinDatacomResData.value[props.defItem - 1][props.valueKey] as string
+      }
+      defValue = defItem as SelectModelValue
+    }
+    if (defValue || defValue === 0) {
+      handleEmit(defValue)
+    }
+  }
+  if (props.multiple) {
+    const _mixinDatacomResData = mixinDatacomResData.value || []
+    const defArray = Array.isArray(defValue) ? defValue : []
+    const list: SelectOption[] = defArray.map((item) => {
+      const found = _mixinDatacomResData.find((e) => {
+        return e[props.valueKey] == item
+      })
+      return {
+        ...found
+      }
+    })
+    current.value = list
+    currentArr.value = list.map((e) => e[props.valueKey] as string | number | boolean)
+    if (defArray.length < 1) {
+      currentArr.value = []
+    }
+  } else {
+    const def = mixinDatacomResData.value.find((item) => item[props.valueKey] === defValue)
+    current.value = def ? formatItemName(def) : ''
+  }
+}
+
+/**
+ * @param {[String, Number]} value
+ * 判断用户给的 value 是否同时为禁用状态
+ */
+function isDisabled(value: any) {
+  let isDisabled = false
+
+  mixinDatacomResData.value.forEach((item) => {
+    if (item[props.valueKey] === value) {
+      isDisabled = item.disabled
+    }
+  })
+  return isDisabled
+}
+
+function inputChange(e: any) {
+  emit('inputChange', e.detail.value)
+}
+
+function clearVal() {
+  if (props.disabled || props.readonly) {
+    return
+  }
+  if (props.multiple) {
+    current.value = []
+    currentArr.value = []
+    handleEmit([])
+  } else {
+    current.value = ''
+    currentArr.value = []
+    handleEmit('')
+  }
+  placeholderOld.value = props.placeholder
+  filterInput.value = ''
+}
+
+function change(item: any) {
+  if (!item.disabled) {
+    if (props.multiple) {
+      if (!Array.isArray(current.value)) {
+        current.value = []
+      } else {
+        current.value = [...current.value]
+      }
+      const currentList = current.value as SelectOption[]
+      const value = item[props.valueKey] as string | number | boolean
+      if (!currentArr.value) {
+        currentArr.value = []
+      }
+      const index = currentArr.value.indexOf(value)
+      if (index !== -1) {
+        currentList.splice(index, 1)
+        currentArr.value.splice(index, 1)
+        handleEmit(currentList)
+      } else {
+        currentList.push(item)
+        currentArr.value.push(value)
+        handleEmit(currentList)
+      }
+      filterInput.value = ''
+    } else {
+      showSelector.value = false
+      current.value = formatItemName(item)
+      if (props.filterable) {
+        filterInput.value = item[props.labelKey]
+      }
+      handleEmit(item[props.valueKey])
+    }
+  }
+}
+function delItem(item: any) {
+  if (props.disabled || props.readonly) {
+    return
+  }
+  if (currentArr.value.includes(item[props.valueKey])) {
+    if (!Array.isArray(current.value)) {
+      return
+    }
+    const currentList = current.value as SelectOption[]
+    const index = currentList.findIndex((e) => {
+      return e[props.valueKey] == item[props.valueKey]
+    })
+    currentList.splice(index, 1)
+    currentArr.value.splice(index, 1)
+    handleEmit(currentList)
+  }
+}
+function handleEmit(val: any) {
+  if (props.multiple) {
+    emit('input', currentArr.value)
+    emit('update:modelValue', currentArr.value)
+    const _currentArr = mixinDatacomResData.value.filter((item) => currentArr.value.includes(item[props.valueKey]))
+    emit('change', _currentArr)
+  } else {
+    emit('input', val)
+    emit('update:modelValue', val)
+    const _current = mixinDatacomResData.value.find((item) => val == item[props.valueKey])
+    emit('change', _current)
+  }
+}
+function toggleSelector() {
+  if (props.disabled || props.readonly) {
+    return
+  }
+  getIsDown()
+  showSelector.value = !showSelector.value
+  isFocus.value = showSelector.value
+  if (props.filterable && current.value && showSelector.value) {
+    if (!props.multiple) {
+      if (typeof current.value === 'string') {
+        placeholderOld.value = current.value
+      }
+    }
+  } else if (props.filterable && !current.value && !showSelector.value) {
+    if (placeholderOld.value != props.placeholder) {
+      if (!props.multiple) {
+        current.value = placeholderOld.value
+      }
+    }
+  }
+  filterInput.value = ''
+}
+
+function formatItemName(item: any) {
+  if (!item) {
+    return ''
+  }
+  let text = item[props.labelKey]
+  let value = item[props.valueKey]
+  let { channel_code } = item
+  channel_code = channel_code ? `(${channel_code})` : ''
+  if (props.format) {
+    // 格式化输出
+    let str = ''
+    str = props.format
+    for (let key in item) {
+      str = str.replace(new RegExp(`{${key}}`, 'g'), item[key])
+    }
+    return str
+  } else {
+    return text ? text : `未命名${channel_code}`
+  }
+}
+
+// 获取当前加载的数据
+function getLoadData() {
+  return mixinDatacomResData.value
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>