oxy-uni-ui 1.0.1

package/components/oxy-segmented/types.ts

@@ -0,0 +1,71 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeRequiredProp, makeStringProp } from '../common/props'
+
+export type SegmentedType = 'large' | 'middle' | 'small'
+
+export interface SegmentedOption {
+  value: string | number // 选中值
+  disabled?: boolean // 是否禁用
+  payload?: any // 更多数据
+}
+
+export const segmentedProps = {
+  ...baseProps,
+
+  /**
+   * 当前选中的值
+   * 类型: string | number
+   * 最低版本: 0.1.23
+   */
+  value: makeRequiredProp([String, Number]),
+
+  /**
+   * 是否禁用分段器
+   * 类型: boolean
+   * 默认值: false
+   * 最低版本: 0.1.23
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 控件尺寸
+   * 类型: string
+   * 可选值: 'large' | 'middle' | 'small'
+   * 默认值: 'middle'
+   * 最低版本: 0.1.23
+   */
+  size: makeStringProp<SegmentedType>('middle'),
+
+  /**
+   * 数据集合
+   * 类型: string[] | number[] | SegmentedOption[]
+   * 必需: 是
+   * 默认值: []
+   * 最低版本: 0.1.23
+   */
+  options: {
+    type: Array as PropType<string[] | number[] | SegmentedOption[]>,
+    required: true,
+    default: () => []
+  },
+
+  /**
+   * 切换选项时是否振动
+   * 类型: boolean
+   * 默认值: false
+   * 最低版本: 0.1.23
+   */
+  vibrateShort: makeBooleanProp(false)
+}
+
+export type SegmentedExpose = {
+  /**
+   * 更新滑块偏移量
+   * @param animation 是否开启动画，默认开启
+   */
+  updateActiveStyle: (animation?: boolean) => void
+}
+
+export type SegmentedProps = ExtractPropTypes<typeof segmentedProps>
+
+export type SegmentedInstance = ComponentPublicInstance<SegmentedProps, SegmentedExpose>

package/components/oxy-select-picker/index.scss

@@ -0,0 +1,102 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.oxy-theme-dark {
+  @include b(select-picker) {
+    :deep(.oxy-select-picker__arrow),
+    :deep(.oxy-select-picker__close),
+    :deep(.oxy-select-picker__clear) {
+      color: $-dark-color;
+    }
+
+    :deep(.oxy-select-picker__cell--placeholder) {
+      .oxy-cell__value {
+        color: $-dark-color-gray;
+      }
+    }
+  }
+}
+
+@include b(select-picker) {
+   @include edeep(cell) {
+    @include when(disabled) {
+      .oxy-cell__value {
+        color: $-input-disabled-color;
+        cursor: not-allowed;
+      }
+    }
+    @include when(error) {
+      .oxy-cell__value {
+        color: $-input-error-color;
+      }
+      .oxy-select-picker__arrow {
+        color: $-input-error-color;
+      }
+    }
+
+    @include m(placeholder) {
+      .oxy-cell__value {
+        color: $-input-placeholder-color;
+      }
+    }
+
+    @include when(large) {
+      .oxy-select-picker__arrow,
+      .oxy-select-picker__clear {
+        font-size: $-cell-icon-size-large;
+      }
+    }
+  }
+  
+  @include edeep(arrow, clear) {
+    display: block;
+    font-size: $-cell-icon-size;
+    color: $-cell-arrow-color;
+    line-height: $-cell-line-height;
+  }
+
+  @include edeep(clear) {
+    color: $-cell-clear-color;
+  }
+ 
+  @include e(loading) {
+    position: absolute;
+    display: flex;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+    background: $-picker-loading-bg;
+  }
+  
+  @include edeep(header) {
+    height: 72px;
+    line-height: 72px;
+  }
+  @include e(wrapper) {
+    padding: 0 10px;
+    position: relative;
+    max-height: 356px;
+    box-sizing: border-box;
+    overflow: auto;
+
+    @include when(filterable) {
+      height: 314px;
+      max-height: 314px;
+    }
+
+    @include when(loading) {
+      overflow: hidden;
+    }
+  }
+  @include e(text-active) {
+    color: $-color-theme;
+  }
+
+  @include e(footer) {
+    padding: 24px 15px;
+  }
+}

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

@@ -0,0 +1,432 @@
+<template>
+  <view :class="`oxy-select-picker ${customClass}`" :style="customStyle">
+    <oxy-cell
+      v-if="!$slots.default"
+      :title="label"
+      :value="showValue || placeholder || translate('placeholder')"
+      :required="required"
+      :size="size"
+      :title-width="labelWidth"
+      :prop="prop"
+      :rules="rules"
+      :clickable="!disabled && !readonly"
+      :value-align="alignRight ? 'right' : 'left'"
+      :center="center"
+      :custom-class="cellClass"
+      :custom-style="customStyle"
+      :custom-title-class="customLabelClass"
+      :custom-value-class="customValueClass"
+      :ellipsis="ellipsis"
+      :use-title-slot="!!$slots.label"
+      :marker-side="markerSide"
+      @click="open"
+    >
+      <template v-if="$slots.label" #title>
+        <slot name="label"></slot>
+      </template>
+      <template #right-icon>
+        <oxy-icon v-if="showArrow" custom-class="oxy-select-picker__arrow" name="arrow-right" />
+        <view v-else-if="showClear" @click.stop="handleClear">
+          <oxy-icon custom-class="oxy-select-picker__clear" name="error-fill" />
+        </view>
+      </template>
+    </oxy-cell>
+    <view v-else @click="open">
+      <slot></slot>
+    </view>
+    <oxy-action-sheet
+      v-model="pickerShow"
+      :duration="250"
+      :title="title || translate('title')"
+      :close-on-click-modal="closeOnClickModal"
+      :z-index="zIndex"
+      :safe-area-inset-bottom="safeAreaInsetBottom"
+      :root-portal="rootPortal"
+      @close="close"
+      @opened="scrollIntoView ? setScrollIntoView() : ''"
+      custom-header-class="oxy-select-picker__header"
+    >
+      <oxy-search
+        v-if="filterable"
+        v-model="filterVal"
+        :placeholder="filterPlaceholder || translate('filterPlaceholder')"
+        hide-cancel
+        placeholder-left
+        @change="handleFilterChange"
+      />
+      <scroll-view
+        :class="`oxy-select-picker__wrapper ${filterable ? 'is-filterable' : ''} ${loading ? 'is-loading' : ''} ${customContentClass}`"
+        :scroll-y="!loading"
+        :scroll-top="scrollTop"
+        :scroll-with-animation="true"
+      >
+        <!-- 多选 -->
+        <view v-if="type === 'checkbox' && isArray(selectList)" id="oxy-checkbox-group">
+          <oxy-checkbox-group v-model="selectList" cell :size="selectSize" :checked-color="checkedColor" :min="min" :max="max" @change="handleChange">
+            <view v-for="item in filterColumns" :key="item[valueKey]" :id="'check' + item[valueKey]">
+              <oxy-checkbox :modelValue="item[valueKey]" :disabled="item.disabled">
+                <block v-if="filterable && filterVal">
+                  <block v-for="text in item[labelKey]" :key="text.label">
+                    <text v-if="text.type === 'active'" class="oxy-select-picker__text-active">{{ text.label }}</text>
+                    <block v-else>{{ text.label }}</block>
+                  </block>
+                </block>
+                <block v-else>
+                  {{ item[labelKey] }}
+                </block>
+              </oxy-checkbox>
+            </view>
+          </oxy-checkbox-group>
+        </view>
+        <!-- 单选 -->
+        <view v-if="type === 'radio' && !isArray(selectList)" id="oxy-radio-group">
+          <oxy-radio-group v-model="selectList" cell :size="selectSize" :checked-color="checkedColor" @change="handleChange">
+            <view v-for="(item, index) in filterColumns" :key="index" :id="'radio' + item[valueKey]">
+              <oxy-radio :value="item[valueKey]" :disabled="item.disabled">
+                <block v-if="filterable && filterVal">
+                  <block v-for="text in item[labelKey]" :key="text.label">
+                    <text :class="`${text.type === 'active' ? 'oxy-select-picker__text-active' : ''}`">{{ text.label }}</text>
+                  </block>
+                </block>
+                <block v-else>
+                  {{ item[labelKey] }}
+                </block>
+              </oxy-radio>
+            </view>
+          </oxy-radio-group>
+        </view>
+        <view v-if="loading" class="oxy-select-picker__loading" @touchmove="noop">
+          <oxy-loading :color="loadingColor" />
+        </view>
+      </scroll-view>
+      <!-- 确认按钮 -->
+      <view v-if="showConfirm" class="oxy-select-picker__footer">
+        <oxy-button block size="large" @click="onConfirm" :disabled="loading">{{ confirmButtonText || translate('confirm') }}</oxy-button>
+      </view>
+    </oxy-action-sheet>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-select-picker',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyActionSheet from '../oxy-action-sheet/oxy-action-sheet.vue'
+import OxyCheckbox from '../oxy-checkbox/oxy-checkbox.vue'
+import OxyCheckboxGroup from '../oxy-checkbox-group/oxy-checkbox-group.vue'
+import OxyRadio from '../oxy-radio/oxy-radio.vue'
+import OxyRadioGroup from '../oxy-radio-group/oxy-radio-group.vue'
+import OxyButton from '../oxy-button/oxy-button.vue'
+import OxyLoading from '../oxy-loading/oxy-loading.vue'
+import OxyCell from '../oxy-cell/oxy-cell.vue'
+
+import { getCurrentInstance, onBeforeMount, ref, watch, nextTick, computed } from 'vue'
+import { getRect, isArray, isDef, isFunction, pause } from '../common/util'
+import { useTranslate } from '../composables/useTranslate'
+import { selectPickerProps, type SelectPickerExpose } from './types'
+
+const { translate } = useTranslate('select-picker')
+
+const props = defineProps(selectPickerProps)
+const emit = defineEmits(['change', 'cancel', 'confirm', 'clear', 'update:modelValue', 'open', 'close'])
+
+const pickerShow = ref<boolean>(false)
+const selectList = ref<Array<number | boolean | string> | number | boolean | string>([])
+const isConfirm = ref<boolean>(false)
+const lastSelectList = ref<Array<number | boolean | string> | number | boolean | string>([])
+const filterVal = ref<string>('')
+const filterColumns = ref<Array<Record<string, any>>>([])
+const scrollTop = ref<number>(0) // 滚动位置
+
+const showValue = computed(() => {
+  const value = valueFormat(props.modelValue)
+  let showValueTemp: string = ''
+
+  if (props.displayFormat) {
+    showValueTemp = props.displayFormat(value, props.columns)
+  } else {
+    const { type, labelKey } = props
+    if (type === 'checkbox') {
+      const selectedItems = (isArray(value) ? value : []).map((item) => {
+        return getSelectedItem(item)
+      })
+      showValueTemp = selectedItems
+        .map((item) => {
+          return item[labelKey]
+        })
+        .join(', ')
+    } else if (type === 'radio') {
+      const selectedItem = getSelectedItem(value as string | number | boolean)
+      showValueTemp = selectedItem[labelKey]
+    } else {
+      showValueTemp = value as string
+    }
+  }
+  return showValueTemp
+})
+
+const cellClass = computed(() => {
+  const classes = ['oxy-select-picker__cell']
+  if (props.disabled) classes.push('is-disabled')
+  if (props.readonly) classes.push('is-readonly')
+  if (props.error) classes.push('is-error')
+  if (!showValue.value) classes.push('oxy-select-picker__cell--placeholder')
+  return classes.join(' ')
+})
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue === selectList.value) return
+    selectList.value = valueFormat(newValue)
+    lastSelectList.value = valueFormat(newValue)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.columns,
+  (newValue) => {
+    if (props.filterable && filterVal.value) {
+      formatFilterColumns(newValue, filterVal.value)
+    } else {
+      filterColumns.value = newValue
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.displayFormat,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of displayFormat must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.beforeConfirm,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of beforeConfirm must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+onBeforeMount(() => {
+  selectList.value = valueFormat(props.modelValue)
+  filterColumns.value = props.columns
+})
+
+const { proxy } = getCurrentInstance() as any
+
+async function setScrollIntoView() {
+  let wraperSelector: string = ''
+  let selectorPromise: Promise<UniApp.NodeInfo>[] = []
+  if (isDef(selectList.value) && selectList.value !== '' && !isArray(selectList.value)) {
+    wraperSelector = '#oxy-radio-group'
+    selectorPromise = [getRect(`#radio${selectList.value}`, false, proxy)]
+  } else if (isArray(selectList.value) && selectList.value.length > 0) {
+    selectList.value.forEach((value) => {
+      selectorPromise.push(getRect(`#check${value}`, false, proxy))
+    })
+    wraperSelector = '#oxy-checkbox-group'
+  }
+  if (wraperSelector) {
+    await pause(2000 / 30)
+    Promise.all([getRect('.oxy-select-picker__wrapper', false, proxy), getRect(wraperSelector, false, proxy), ...selectorPromise]).then((res) => {
+      if (isDef(res) && isArray(res)) {
+        const scrollView = res[0]
+        const wraper = res[1]
+        const target = res.slice(2) || []
+        if (isDef(wraper) && isDef(scrollView)) {
+          const index = target.findIndex((item) => {
+            return item.bottom! > scrollView.top! && item.top! < scrollView.bottom!
+          })
+          if (index < 0) {
+            scrollTop.value = -1
+            nextTick(() => {
+              scrollTop.value = Math.max(0, target[0].top! - wraper.top! - scrollView.height! / 2)
+            })
+          }
+        }
+      }
+    })
+  }
+}
+
+function noop() {}
+
+function getSelectedItem(value: string | number | boolean) {
+  const { valueKey, labelKey, columns } = props
+
+  const selecteds = columns.filter((item) => {
+    return item[valueKey] === value
+  })
+
+  if (selecteds.length > 0) {
+    return selecteds[0]
+  }
+
+  return {
+    [valueKey]: value,
+    [labelKey]: ''
+  }
+}
+
+function valueFormat(value: string | number | boolean | (string | number | boolean)[]) {
+  return props.type === 'checkbox' ? (isArray(value) ? value : []) : value
+}
+
+function handleChange({ value }: { value: string | number | boolean | (string | number | boolean)[] }) {
+  selectList.value = value
+  emit('change', { value })
+  if (props.type === 'radio' && !props.showConfirm) {
+    onConfirm()
+  }
+}
+
+function close() {
+  pickerShow.value = false
+  // 未确定选项时，数据还原复位
+  if (!isConfirm.value) {
+    selectList.value = valueFormat(lastSelectList.value)
+  }
+  emit('cancel')
+  emit('close')
+}
+
+function open() {
+  if (props.disabled || props.readonly) return
+  selectList.value = valueFormat(props.modelValue)
+  pickerShow.value = true
+  isConfirm.value = false
+  emit('open')
+}
+
+function onConfirm() {
+  if (props.loading) {
+    pickerShow.value = false
+    emit('confirm')
+    emit('close')
+    return
+  }
+  if (props.beforeConfirm) {
+    props.beforeConfirm(selectList.value, (isPass: boolean) => {
+      isPass && handleConfirm()
+    })
+  } else {
+    handleConfirm()
+  }
+}
+
+function handleConfirm() {
+  isConfirm.value = true
+  pickerShow.value = false
+  lastSelectList.value = valueFormat(selectList.value)
+  let selectedItems: Record<string, any> = {}
+  if (props.type === 'checkbox') {
+    selectedItems = (isArray(lastSelectList.value) ? lastSelectList.value : []).map((item) => {
+      return getSelectedItem(item)
+    })
+  } else {
+    selectedItems = getSelectedItem(lastSelectList.value as string | number | boolean)
+  }
+  emit('update:modelValue', lastSelectList.value)
+  emit('confirm', {
+    value: lastSelectList.value,
+    selectedItems
+  })
+  emit('close')
+}
+
+function getFilterText(label: string, filterVal: string) {
+  const reg = new RegExp(`(${filterVal})`, 'g')
+
+  return label.split(reg).map((text) => {
+    return {
+      type: text === filterVal ? 'active' : 'normal',
+      label: text
+    }
+  })
+}
+
+function handleFilterChange({ value }: { value: string }) {
+  if (value === '') {
+    filterColumns.value = []
+    filterVal.value = value
+    nextTick(() => {
+      filterColumns.value = props.columns
+    })
+  } else {
+    filterVal.value = value
+    formatFilterColumns(props.columns, value)
+  }
+}
+
+function formatFilterColumns(columns: Record<string, any>[], filterVal: string) {
+  const filterColumnsTemp = columns.filter((item) => {
+    return item[props.labelKey].indexOf(filterVal) > -1
+  })
+
+  const formatFilterColumns = filterColumnsTemp.map((item) => {
+    return {
+      ...item,
+      [props.labelKey]: getFilterText(item[props.labelKey], filterVal)
+    }
+  })
+  filterColumns.value = []
+  nextTick(() => {
+    filterColumns.value = formatFilterColumns
+  })
+}
+
+const showConfirm = computed(() => {
+  return (props.type === 'radio' && props.showConfirm) || props.type === 'checkbox'
+})
+
+// 是否展示清除按钮
+const showClear = computed(() => {
+  return props.clearable && !props.disabled && !props.readonly && showValue.value.length
+})
+
+function handleClear() {
+  emit('update:modelValue', props.type === 'checkbox' ? [] : '')
+  emit('clear')
+}
+
+// 是否展示箭头
+const showArrow = computed(() => {
+  return !props.disabled && !props.readonly && !showClear.value
+})
+
+defineExpose<SelectPickerExpose>({
+  close,
+  open
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>