oxy-uni-ui 1.0.1

package/components/oxy-search/index.scss

@@ -0,0 +1,148 @@
+@import '../common/abstracts/_mixin.scss';
+@import '../common/abstracts/variable.scss';
+
+.oxy-theme-dark {
+  @include b(search) {
+    background: $-dark-background4;
+
+    @include e(block) {
+      background-color: $-dark-background;
+    }
+
+    @include e(input) {
+      color: $-dark-color;
+    }
+
+    @include e(cover) {
+      background-color: $-dark-background;
+    }
+
+    @include e(search-icon) {
+      color: $-dark-color;
+    }
+    @include e(search-left-icon) {
+      color: $-dark-color;
+    }
+    @include e(clear) {
+      color: $-dark-color;
+    }
+    @include e(cancel) {
+      color: $-dark-color;
+    }
+
+    @include when(light) {
+      background: $-dark-background4;
+  
+      .oxy-search__block {
+        background: $-dark-background7;
+      }
+  
+      .oxy-search__cover {
+        background: $-dark-background7;
+      }
+    }
+  }
+}
+
+@include b(search) {
+  display: flex;
+  padding: $-search-padding;
+  align-items: center;
+  background: #fff;
+
+  @include e(block) {
+    flex: 1;
+    background-color: $-search-input-bg;
+    border-radius: $-search-input-radius;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+  }
+  @include e(field) {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+  }
+  @include e(input) {
+    flex: 1;
+    height: $-search-input-height;
+    box-sizing: border-box;
+    padding: $-search-input-padding;
+    border: none;
+    background: transparent;
+    font-size: $-search-input-fs;
+    -webkit-appearance: none;
+    outline: none;
+    color: $-search-input-color;
+    z-index: 0;
+
+    @include lineEllipsis;
+
+    &::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+    }
+  }
+  @include e(cover) {
+    width: 100%;
+    height: $-search-input-height;
+    background-color: $-search-input-bg;
+    line-height: $-search-input-height;
+    font-size: $-search-input-fs;
+    border-radius: $-search-input-radius;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+  @include edeep(search-icon) {
+    margin-right: 8px;
+    color: $-search-icon-color;
+    font-size: $-search-icon-size;
+  }
+  @include edeep(search-left-icon) {
+    position: absolute;
+    font-size: $-search-icon-size;
+    top: 50%;
+    left: 16px;
+    transform: translateY(-50%);
+    color: $-search-icon-color;
+  }
+  @include e(placeholder-txt) {
+    color: $-search-placeholder-color;
+    font-size: $-search-input-fs;
+  }
+  @include edeep(clear) {
+    position: absolute;
+    right: 0;
+    padding: 6px 9px 6px 7px;
+    color: $-search-cancel-color;
+  }
+  @include edeep(clear-icon) {
+    vertical-align: middle;
+    font-size: $-search-clear-icon-size;
+  }
+  @include e(cancel) {
+    padding: $-search-cancel-padding;
+    height: $-search-input-height;
+    line-height: $-search-input-height;
+    font-size: $-search-cancel-fs;
+    color: $-search-cancel-color;
+    -webkit-tap-highlight-color: transparent;
+  }
+  @include when(light) {
+    background: $-search-light-bg;
+
+    .oxy-search__block {
+      background: #fff;
+    }
+
+    .oxy-search__cover {
+      background: #fff;
+    }
+  }
+  @include when(without-cancel) {
+    padding-right: $-search-side-padding;
+  }
+}

package/components/oxy-search/oxy-search.vue

@@ -0,0 +1,187 @@
+<template>
+  <view :class="rootClass" :style="customStyle">
+    <view class="oxy-search__block">
+      <slot name="prefix"></slot>
+      <view class="oxy-search__field">
+        <view v-if="!placeholderLeft" :style="coverStyle" class="oxy-search__cover" @click="closeCover">
+          <oxy-icon name="search" custom-class="oxy-search__search-icon"></oxy-icon>
+          <text :class="`oxy-search__placeholder-txt ${placeholderClass}`">{{ placeholder || translate('search') }}</text>
+        </view>
+        <oxy-icon v-if="showInput || inputValue || placeholderLeft" name="search" custom-class="oxy-search__search-left-icon"></oxy-icon>
+        <input
+          v-if="showInput || inputValue || placeholderLeft"
+          :placeholder="placeholder || translate('search')"
+          :placeholder-class="`oxy-search__placeholder-txt ${placeholderClass}`"
+          :placeholder-style="placeholderStyle"
+          confirm-type="search"
+          v-model="inputValue"
+          :class="['oxy-search__input', customInputClass]"
+          @focus="handleFocus"
+          @input="handleInput"
+          @blur="handleBlur"
+          @confirm="handleConfirm"
+          :disabled="disabled"
+          :maxlength="maxlength"
+          :focus="isFocused"
+        />
+        <oxy-icon v-if="inputValue" custom-class="oxy-search__clear oxy-search__clear-icon" name="error-fill" @click="handleClear" />
+      </view>
+    </view>
+
+    <slot v-if="!hideCancel" name="suffix">
+      <view class="oxy-search__cancel" @click="handleCancel">
+        {{ cancelTxt || translate('cancel') }}
+      </view>
+    </slot>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-search',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import { type CSSProperties, computed, onMounted, ref, watch } from 'vue'
+import { objToStyle, pause } from '../common/util'
+import { useTranslate } from '../composables/useTranslate'
+import { searchProps } from './types'
+
+const props = defineProps(searchProps)
+const emit = defineEmits(['update:modelValue', 'change', 'clear', 'search', 'focus', 'blur', 'cancel'])
+
+const { translate } = useTranslate('search')
+
+const isFocused = ref<boolean>(false) // 是否聚焦中
+const showInput = ref<boolean>(false) // 是否显示输入框 用于实现聚焦的hack
+const inputValue = ref<string>('') // 输入框的值
+const showPlaceHolder = ref<boolean>(true)
+const clearing = ref<boolean>(false)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    inputValue.value = newValue
+    if (newValue) {
+      showInput.value = true
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.focus,
+  (newValue) => {
+    if (newValue) {
+      if (props.disabled) return
+      closeCover()
+    }
+  }
+)
+
+onMounted(() => {
+  if (props.focus) {
+    closeCover()
+  }
+})
+
+const rootClass = computed(() => {
+  return `oxy-search  ${props.light ? 'is-light' : ''}  ${props.hideCancel ? 'is-without-cancel' : ''} ${props.customClass}`
+})
+
+const coverStyle = computed(() => {
+  const coverStyle: CSSProperties = {
+    display: inputValue.value === '' && showPlaceHolder.value ? 'flex' : 'none'
+  }
+
+  return objToStyle(coverStyle)
+})
+
+async function hackFocus(focus: boolean) {
+  showInput.value = focus
+  await pause()
+  isFocused.value = focus
+}
+
+async function closeCover() {
+  if (props.disabled) return
+  await pause(100)
+  showPlaceHolder.value = false
+  hackFocus(true)
+}
+
+function handleInput(event: any) {
+  inputValue.value = event.detail.value
+  emit('update:modelValue', event.detail.value)
+  emit('change', {
+    value: event.detail.value
+  })
+}
+
+async function handleClear() {
+  inputValue.value = ''
+  if (props.focusWhenClear) {
+    clearing.value = true
+    isFocused.value = false
+  }
+  await pause()
+  if (props.focusWhenClear) {
+    showPlaceHolder.value = false
+    hackFocus(true)
+  } else {
+    showPlaceHolder.value = true
+    hackFocus(false)
+  }
+  emit('change', {
+    value: ''
+  })
+  emit('update:modelValue', '')
+  emit('clear')
+}
+
+function handleConfirm({ detail: { value } }: any) {
+  // 组件触发search事件
+  emit('search', {
+    value
+  })
+}
+
+function handleFocus() {
+  showPlaceHolder.value = false
+  emit('focus', {
+    value: inputValue.value
+  })
+}
+
+async function handleBlur() {
+  // 等待150毫秒，clear执行完毕
+  await pause(150)
+  if (clearing.value) {
+    clearing.value = false
+    return
+  }
+  // 组件触发blur事件
+  showPlaceHolder.value = !inputValue.value
+  showInput.value = !showPlaceHolder.value
+  isFocused.value = false
+  emit('blur', {
+    value: inputValue.value
+  })
+}
+
+function handleCancel() {
+  emit('cancel', {
+    value: inputValue.value
+  })
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-search/types.ts

@@ -0,0 +1,93 @@
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+
+export const searchProps = {
+  ...baseProps,
+  customInputClass: makeStringProp(''),
+  /**
+   * 输入框内容，双向绑定
+   * 类型: string
+   * 默认值: ''
+   */
+  modelValue: makeStringProp(''),
+
+  /**
+   * 是否使用输入框右侧插槽
+   * 类型: boolean
+   * 默认值: false
+   * @deprecated 该属性已废弃，将在下一个minor版本被移除，直接使用插槽即可
+   */
+  useSuffixSlot: makeBooleanProp(false),
+
+  /**
+   * 搜索框占位文本
+   * 类型: string
+   */
+  placeholder: String,
+
+  /**
+   * 搜索框右侧文本
+   * 类型: string
+   */
+  cancelTxt: String,
+
+  /**
+   * 搜索框亮色（白色）
+   * 类型: boolean
+   * 默认值: false
+   */
+  light: makeBooleanProp(false),
+
+  /**
+   * 是否隐藏右侧文本
+   * 类型: boolean
+   * 默认值: false
+   */
+  hideCancel: makeBooleanProp(false),
+
+  /**
+   * 是否禁用搜索框
+   * 类型: boolean
+   * 默认值: false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 原生属性，设置最大长度。-1 表示无限制
+   * 类型: string / number
+   * 默认值: -1
+   */
+  maxlength: makeNumberProp(-1),
+
+  /**
+   * placeholder 居左边
+   * 类型: boolean
+   * 默认值: false
+   */
+  placeholderLeft: makeBooleanProp(false),
+
+  /**
+   * 是否自动聚焦
+   * 类型: boolean
+   * 默认值: false
+   * 最低版本: 0.1.63
+   */
+  focus: makeBooleanProp(false),
+
+  /**
+   * 是否在点击清除按钮时聚焦输入框
+   * 类型: boolean
+   * 默认值: false
+   * 最低版本: 0.1.63
+   */
+  focusWhenClear: makeBooleanProp(false),
+
+  /**
+   * 原生属性，指定 placeholder 的样式，目前仅支持color,font-size和font-weight
+   */
+  placeholderStyle: String,
+
+  /**
+   * 原生属性，指定 placeholder 的样式类
+   */
+  placeholderClass: makeStringProp('')
+}

package/components/oxy-segmented/index.scss

@@ -0,0 +1,101 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
+.oxy-theme-dark {
+  @include b(segmented) {
+    background: $-dark-background2;
+
+    @include e(item) {
+      color: $-dark-color3;
+
+      @include when(active) {
+        color: $-dark-color;
+
+        @include when(disabled) {
+          color: $-dark-color3;
+        }
+      }
+
+      @include when(disabled) {
+        color: $-dark-color-gray;
+      }
+
+      @include m(active) {
+        background-color: $-color-theme;
+
+        @include when(disabled) {
+          opacity: 0.6;
+        }
+      }
+    }
+
+  }
+}
+
+@include b(segmented) {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  justify-items: flex-start;
+  width: 100%;
+  background-color: $-segmented-item-bg-color;
+  padding: $-segmented-padding;
+  border-radius: 4px;
+  box-sizing: border-box;
+
+
+  @include e(item) {
+    position: relative;
+    text-align: center;
+    border-radius: 4px;
+    flex: 1;
+    min-width: 0;
+    z-index: 1;
+    min-height: 28px;
+    line-height: 28px;
+    padding: 0 12px;
+    font-size: 14px;
+    color: $-segmented-item-color;
+    font-weight: 400;
+
+    @include when(active) {
+      font-weight: 550;
+    }
+
+    @include when(large) {
+      min-height: 32px;
+      line-height: 32px;
+      padding: 0 12px;
+      font-size: 16px;
+    }
+
+
+    @include when(small) {
+      min-height: 24px;
+      line-height: 24px;
+      padding: 0 7px;
+      font-size: 12px;
+    }
+
+    @include when(disabled) {
+      cursor: no-drop;
+      color: $-segmented-item-disabled-color;
+    }
+
+    @include m(active) {
+      background-color: $-segmented-item-acitve-bg;
+      border-radius: 4px;
+      height: calc(100% - $-segmented-padding * 2);
+      @include when(disabled) {
+        opacity: 0.8;
+      }
+    }
+  }
+
+  @include e(item-label) {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+}

package/components/oxy-segmented/oxy-segmented.vue

@@ -0,0 +1,143 @@
+<template>
+  <view :class="`oxy-segmented ${customClass}`" :style="customStyle">
+    <view
+      :class="`oxy-segmented__item is-${size} ${state.activeIndex === index ? 'is-active' : ''} ${
+        disabled || (isObj(option) ? option.disabled : false) ? 'is-disabled' : ''
+      }`"
+      @click="handleClick(option, index)"
+      v-for="(option, index) in options"
+      :key="index"
+    >
+      <view class="oxy-segmented__item-label">
+        <slot name="label" v-if="$slots.label" :option="isObj(option) ? option : { value: option }"></slot>
+        <template v-else>
+          {{ isObj(option) ? option.value : option }}
+        </template>
+      </view>
+    </view>
+    <view :class="`oxy-segmented__item--active ${activeDisabled ? 'is-disabled' : ''}`" :style="state.activeStyle"></view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-segmented',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { computed, getCurrentInstance, onMounted, reactive, watch } from 'vue'
+import { getRect, isObj, objToStyle, addUnit, pause, isEqual } from '../common/util'
+import type { CSSProperties } from 'vue'
+import { segmentedProps, type SegmentedExpose, type SegmentedOption } from './types'
+const $item = '.oxy-segmented__item'
+
+const props = defineProps(segmentedProps)
+const emit = defineEmits(['update:value', 'change', 'click'])
+
+const state = reactive({
+  activeIndex: 0, // 选中项
+  activeStyle: '' // 选中样式
+})
+
+const activeDisabled = computed(() => {
+  return props.disabled || (props.options[0] && isObj(props.options[0]) ? props.options[0].disabled : false)
+})
+
+watch(
+  () => props.value,
+  () => {
+    updateCurrentIndex()
+    updateActiveStyle()
+    if (props.vibrateShort) {
+      uni.vibrateShort({})
+    }
+  },
+  {
+    immediate: false
+  }
+)
+
+const { proxy } = getCurrentInstance() as any
+
+onMounted(async () => {
+  updateCurrentIndex()
+  await pause()
+  updateActiveStyle(false)
+})
+
+/**
+ * 更新滑块偏移量
+ *
+ */
+function updateActiveStyle(animation: boolean = true) {
+  getRect($item, true, proxy).then((rects) => {
+    const rect = rects[state.activeIndex]
+    const style: CSSProperties = {
+      position: 'absolute',
+      width: addUnit(rect.width!),
+      'z-index': 0
+    }
+    const left = rects.slice(0, state.activeIndex).reduce((prev, curr) => prev + Number(curr.width), 0)
+    if (left) {
+      style.transform = `translateX(${left}px)`
+    }
+    if (animation) {
+      style.transition = 'all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)'
+    }
+    state.activeStyle = objToStyle(style)
+  })
+}
+
+/**
+ * 更新值
+ */
+function updateValue(newValue: string | number, option: string | number | SegmentedOption) {
+  if (!isEqual(newValue, props.value)) {
+    emit('update:value', newValue)
+    emit('change', isObj(option) ? option : { value: newValue })
+  }
+}
+
+/**
+ * 更新当前下标
+ */
+function updateCurrentIndex() {
+  const index = props.options.findIndex((option: string | number | SegmentedOption) => {
+    const value = isObj(option) ? option.value : option
+    return isEqual(value, props.value)
+  })
+  if (index >= 0) {
+    state.activeIndex = index
+  } else {
+    const value = isObj(props.options[0]) ? props.options[0].value : props.options[0]
+    updateValue(value, props.options[0])
+  }
+}
+
+function handleClick(option: string | number | SegmentedOption, index: number) {
+  const disabled = props.disabled || (isObj(option) ? option.disabled : false)
+  if (disabled) {
+    return
+  }
+  const value = isObj(option) ? option.value : option
+
+  state.activeIndex = index
+  updateActiveStyle()
+  updateValue(value, option)
+  emit('click', isObj(option) ? option : { value })
+}
+
+defineExpose<SegmentedExpose>({
+  updateActiveStyle
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>