oxy-uni-ui 1.0.1

package/components/oxy-tabs/oxy-tabs.vue

@@ -0,0 +1,443 @@
+<template>
+  <template v-if="sticky">
+    <oxy-sticky-box>
+      <view
+        :class="`oxy-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''}`"
+        :style="customStyle"
+      >
+        <oxy-sticky :offset-top="offsetTop">
+          <view class="oxy-tabs__nav oxy-tabs__nav--sticky">
+            <view class="oxy-tabs__nav--wrap">
+              <scroll-view :scroll-x="innerSlidable" scroll-with-animation :scroll-left="state.scrollLeft">
+                <view class="oxy-tabs__nav-container">
+                  <view
+                    @click="handleSelect(index)"
+                    v-for="(item, index) in children"
+                    :key="index"
+                    :class="`oxy-tabs__nav-item  ${state.activeIndex === index ? 'is-active' : ''} ${item.disabled ? 'is-disabled' : ''}`"
+                    :style="state.activeIndex === index ? (color ? 'color:' + color : '') : inactiveColor ? 'color:' + inactiveColor : ''"
+                  >
+                    <oxy-badge v-if="item.badgeProps" v-bind="item.badgeProps">
+                      <text class="oxy-tabs__nav-item-text">{{ item.title }}</text>
+                    </oxy-badge>
+                    <text v-else class="oxy-tabs__nav-item-text">{{ item.title }}</text>
+
+                    <view class="oxy-tabs__line oxy-tabs__line--inner" v-if="state.activeIndex === index && state.useInnerLine"></view>
+                  </view>
+                  <view class="oxy-tabs__line" :style="state.lineStyle"></view>
+                </view>
+              </scroll-view>
+            </view>
+            <view class="oxy-tabs__map" v-if="mapNum < children.length && mapNum !== 0">
+              <view :class="`oxy-tabs__map-btn  ${state.animating ? 'is-open' : ''}`" @click="toggleMap">
+                <view :class="`oxy-tabs__map-arrow  ${state.animating ? 'is-open' : ''}`">
+                  <oxy-icon name="arrow-down" />
+                </view>
+              </view>
+              <view class="oxy-tabs__map-header" :style="`${state.mapShow ? '' : 'display:none;'}  ${state.animating ? 'opacity:1;' : ''}`">
+                {{ mapTitle || translate('all') }}
+              </view>
+              <view :class="`oxy-tabs__map-body  ${state.animating ? 'is-open' : ''}`" :style="state.mapShow ? '' : 'display:none'">
+                <view class="oxy-tabs__map-nav-item" v-for="(item, index) in children" :key="index" @click="handleSelect(index)">
+                  <view
+                    :class="`oxy-tabs__map-nav-btn ${state.activeIndex === index ? 'is-active' : ''}  ${item.disabled ? 'is-disabled' : ''}`"
+                    :style="
+                      state.activeIndex === index
+                        ? color
+                          ? 'color:' + color + ';border-color:' + color
+                          : ''
+                        : inactiveColor
+                        ? 'color:' + inactiveColor
+                        : ''
+                    "
+                  >
+                    {{ item.title }}
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </oxy-sticky>
+
+        <view class="oxy-tabs__container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" @touchcancel="onTouchEnd">
+          <view :class="['oxy-tabs__body', animated ? 'is-animated' : '']" :style="bodyStyle">
+            <slot />
+          </view>
+        </view>
+
+        <view
+          class="oxy-tabs__mask"
+          :style="`${state.mapShow ? '' : 'display:none;'} ${state.animating ? 'opacity:1;' : ''}`"
+          @click="toggleMap"
+        ></view>
+      </view>
+    </oxy-sticky-box>
+  </template>
+
+  <template v-else>
+    <view :class="`oxy-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''}`">
+      <view class="oxy-tabs__nav">
+        <view class="oxy-tabs__nav--wrap">
+          <scroll-view :scroll-x="innerSlidable" scroll-with-animation :scroll-left="state.scrollLeft">
+            <view class="oxy-tabs__nav-container">
+              <view
+                v-for="(item, index) in children"
+                @click="handleSelect(index)"
+                :key="index"
+                :class="`oxy-tabs__nav-item ${state.activeIndex === index ? 'is-active' : ''} ${item.disabled ? 'is-disabled' : ''}`"
+                :style="state.activeIndex === index ? (color ? 'color:' + color : '') : inactiveColor ? 'color:' + inactiveColor : ''"
+              >
+                <oxy-badge custom-class="oxy-tabs__nav-item-badge" v-if="item.badgeProps" v-bind="item.badgeProps">
+                  <text class="oxy-tabs__nav-item-text">{{ item.title }}</text>
+                </oxy-badge>
+                <text v-else class="oxy-tabs__nav-item-text">{{ item.title }}</text>
+                <view class="oxy-tabs__line oxy-tabs__line--inner" v-if="state.activeIndex === index && state.useInnerLine"></view>
+              </view>
+              <view class="oxy-tabs__line" :style="state.lineStyle"></view>
+            </view>
+          </scroll-view>
+        </view>
+        <view class="oxy-tabs__map" v-if="mapNum < children.length && mapNum !== 0">
+          <view class="oxy-tabs__map-btn" @click="toggleMap">
+            <view :class="`oxy-tabs__map-arrow ${state.animating ? 'is-open' : ''}`">
+              <oxy-icon name="arrow-down" />
+            </view>
+          </view>
+          <view class="oxy-tabs__map-header" :style="`${state.mapShow ? '' : 'display:none;'}  ${state.animating ? 'opacity:1;' : ''}`">
+            {{ mapTitle || translate('all') }}
+          </view>
+          <view :class="`oxy-tabs__map-body ${state.animating ? 'is-open' : ''}`" :style="state.mapShow ? '' : 'display:none'">
+            <view class="oxy-tabs__map-nav-item" v-for="(item, index) in children" :key="index" @click="handleSelect(index)">
+              <view :class="`oxy-tabs__map-nav-btn ${state.activeIndex === index ? 'is-active' : ''}  ${item.disabled ? 'is-disabled' : ''}`">
+                {{ item.title }}
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view class="oxy-tabs__container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" @touchcancel="onTouchEnd">
+        <view :class="['oxy-tabs__body', animated ? 'is-animated' : '']" :style="bodyStyle">
+          <slot />
+        </view>
+      </view>
+
+      <view
+        class="oxy-tabs__mask"
+        :style="`${state.mapShow ? '' : 'display:none;'}  ${state.animating ? 'opacity:1' : ''}`"
+        @click="toggleMap"
+      ></view>
+    </view>
+  </template>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-tabs',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import OxySticky from '../oxy-sticky/oxy-sticky.vue'
+import OxyStickyBox from '../oxy-sticky-box/oxy-sticky-box.vue'
+import { computed, getCurrentInstance, onMounted, watch, nextTick, reactive, type CSSProperties, type ComponentInstance } from 'vue'
+import { addUnit, checkNumRange, debounce, getRect, isDef, isNumber, isString, objToStyle } from '../common/util'
+import { useTouch } from '../composables/useTouch'
+import { TABS_KEY, tabsProps, type TabsExpose } from './types'
+import { useChildren } from '../composables/useChildren'
+import { useTranslate } from '../composables/useTranslate'
+
+const $item = '.oxy-tabs__nav-item'
+const $itemText = '.oxy-tabs__nav-item-text'
+const $container = '.oxy-tabs__nav-container'
+
+const props = defineProps(tabsProps)
+const emit = defineEmits(['change', 'disabled', 'click', 'update:modelValue'])
+
+const { translate } = useTranslate('tabs')
+
+const state = reactive({
+  activeIndex: 0, // 选中值的索引，默认第一个
+  lineStyle: 'display:none;', // 激活项边框线样式
+  useInnerLine: false, // 是否使用内部激活项边框线，当外部激活下划线未成功渲染时显示内部定位的
+  inited: false, // 是否初始化
+  animating: false, // 是否动画中
+  mapShow: false, // map的开关
+  scrollLeft: 0 // scroll-view偏移量
+})
+
+const { children, linkChildren } = useChildren(TABS_KEY)
+linkChildren({ state, props })
+
+const { proxy } = getCurrentInstance() as any
+
+const touch = useTouch()
+
+const innerSlidable = computed(() => {
+  return props.slidable === 'always' || children.length > props.slidableNum
+})
+
+const bodyStyle = computed(() => {
+  if (!props.animated) {
+    return ''
+  }
+
+  return objToStyle({
+    left: -100 * state.activeIndex + '%',
+    'transition-duration': props.duration + 'ms',
+    '-webkit-transition-duration': props.duration + 'ms'
+  })
+})
+
+const getTabName = (tab: ComponentInstance<any>, index: number) => {
+  return isDef(tab.name) ? tab.name : index
+}
+
+/**
+ * 更新激活项
+ * @param value 激活值
+ * @param init 是否已初始化
+ * @param setScroll // 是否设置scroll-view滚动
+ */
+const updateActive = (value: number | string = 0, init: boolean = false, setScroll: boolean = true) => {
+  // 没有tab子元素，不执行任何操作
+  if (children.length === 0) return
+
+  value = getActiveIndex(value)
+  // 被禁用，不执行任何操作
+  if (children[value].disabled) return
+  state.activeIndex = value
+  if (setScroll) {
+    updateLineStyle(init === false)
+    scrollIntoView()
+  }
+  setActiveTab()
+}
+
+/**
+ * @description 修改选中的tab Index
+ * @param {String |Number } value - radio绑定的value或者tab索引，默认值0
+ * @param {Boolean } init - 是否伴随初始化操作
+ */
+const setActive = debounce(updateActive, 100, { leading: true })
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (!isNumber(newValue) && !isString(newValue)) {
+      console.error('[Oxy ui] error(oxy-tabs): the type of value should be number or string')
+    }
+    // 保证不为非空字符串，小于0的数字
+    if (newValue === '' || !isDef(newValue)) {
+      // eslint-disable-next-line quotes
+      console.error("[Oxy ui] error(oxy-tabs): tabs's value cannot be '' null or undefined")
+    }
+    if (typeof newValue === 'number' && newValue < 0) {
+      // eslint-disable-next-line quotes
+      console.error("[Oxy ui] error(oxy-tabs): tabs's value cannot be less than zero")
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    const index = getActiveIndex(newValue)
+    setActive(newValue, false, index !== state.activeIndex)
+  },
+  {
+    immediate: false,
+    deep: true
+  }
+)
+
+watch(
+  () => children.length,
+  () => {
+    if (state.inited) {
+      nextTick(() => {
+        setActive(props.modelValue)
+      })
+    }
+  }
+)
+
+watch(
+  () => props.slidableNum,
+  (newValue) => {
+    checkNumRange(newValue, 'slidableNum')
+  }
+)
+
+watch(
+  () => props.mapNum,
+  (newValue) => {
+    checkNumRange(newValue, 'mapNum')
+  }
+)
+
+onMounted(() => {
+  state.inited = true
+  nextTick(() => {
+    updateActive(props.modelValue, true)
+    state.useInnerLine = true
+  })
+})
+
+function toggleMap() {
+  if (state.mapShow) {
+    state.animating = false
+    setTimeout(() => {
+      state.mapShow = false
+    }, 300)
+  } else {
+    state.mapShow = true
+    setTimeout(() => {
+      state.animating = true
+    }, 100)
+  }
+}
+
+/**
+ * 更新 underline的偏移量
+ * @param animation 是否开启动画
+ */
+async function updateLineStyle(animation: boolean = true) {
+  if (!state.inited) return
+  const { autoLineWidth, lineWidth, lineHeight } = props
+  try {
+    const lineStyle: CSSProperties = {}
+    if (isDef(lineWidth)) {
+      lineStyle.width = addUnit(lineWidth)
+    } else {
+      if (autoLineWidth) {
+        const textRects = await getRect($itemText, true, proxy)
+        const textWidth = Number(textRects[state.activeIndex].width)
+        lineStyle.width = addUnit(textWidth)
+      }
+    }
+    if (isDef(lineHeight)) {
+      lineStyle.height = addUnit(lineHeight)
+      lineStyle.borderRadius = `calc(${addUnit(lineHeight)} / 2)`
+    }
+    const rects = await getRect($item, true, proxy)
+    const rect = rects[state.activeIndex]
+    let left = rects.slice(0, state.activeIndex).reduce((prev, curr) => prev + Number(curr.width), 0) + Number(rect.width) / 2
+    if (left) {
+      lineStyle.transform = `translateX(${left}px) translateX(-50%)`
+      if (animation) {
+        lineStyle.transition = 'width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);'
+      }
+      state.useInnerLine = false
+      state.lineStyle = objToStyle(lineStyle)
+    }
+  } catch (error) {
+    console.error('[Oxy ui] error(oxy-tabs): update line style failed', error)
+  }
+}
+
+function setActiveTab() {
+  if (!state.inited) return
+  const name = getTabName(children[state.activeIndex], state.activeIndex)
+  if (name !== props.modelValue) {
+    emit('change', {
+      index: state.activeIndex,
+      name: name
+    })
+    emit('update:modelValue', name)
+  }
+}
+
+function scrollIntoView() {
+  if (!state.inited) return
+  Promise.all([getRect($item, true, proxy), getRect($container, false, proxy)]).then(([navItemsRects, navRect]) => {
+    // 选中元素
+    const selectItem = navItemsRects[state.activeIndex]
+    // 选中元素之前的节点的宽度总和
+    const offsetLeft = (navItemsRects as any).slice(0, state.activeIndex).reduce((prev: any, curr: any) => prev + curr.width, 0)
+    // scroll-view滑动到selectItem的偏移量
+    const left = offsetLeft - ((navRect as any).width - Number(selectItem.width)) / 2
+    if (left === state.scrollLeft) {
+      state.scrollLeft = left + Math.random() / 10000
+    } else {
+      state.scrollLeft = left
+    }
+  })
+}
+
+/**
+ * @description 单击tab的处理
+ * @param index
+ */
+function handleSelect(index: number) {
+  if (index === undefined) return
+  const { disabled } = children[index]
+  const name = getTabName(children[index], index)
+
+  if (disabled) {
+    emit('disabled', {
+      index,
+      name
+    })
+    return
+  }
+  state.mapShow && toggleMap()
+  setActive(index)
+  emit('click', {
+    index,
+    name
+  })
+}
+function onTouchStart(event: any) {
+  if (!props.swipeable) return
+  touch.touchStart(event)
+}
+function onTouchMove(event: any) {
+  if (!props.swipeable) return
+  touch.touchMove(event)
+}
+function onTouchEnd() {
+  if (!props.swipeable) return
+  const { direction, deltaX, offsetX } = touch
+  const minSwipeDistance = 50
+  if (direction.value === 'horizontal' && offsetX.value >= minSwipeDistance) {
+    if (deltaX.value > 0 && state.activeIndex !== 0) {
+      setActive(state.activeIndex - 1)
+    } else if (deltaX.value < 0 && state.activeIndex !== children.length - 1) {
+      setActive(state.activeIndex + 1)
+    }
+  }
+}
+function getActiveIndex(value: number | string) {
+  // name代表的索引超过了children长度的边界，自动用0兜底
+  if (isNumber(value) && value >= children.length) {
+    // eslint-disable-next-line prettier/prettier
+    console.error('[Oxy ui] warning(oxy-tabs): the type of tabs\' value is Number shouldn\'t be less than its children')
+    value = 0
+  }
+  // 如果是字符串直接匹配，匹配不到用0兜底
+  if (isString(value)) {
+    const index = children.findIndex((item) => item.name === value)
+    value = index === -1 ? 0 : index
+  }
+
+  return value
+}
+
+defineExpose<TabsExpose>({
+  setActive,
+  scrollIntoView,
+  updateLineStyle
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-tabs/types.ts

@@ -0,0 +1,107 @@
+import { type ComponentPublicInstance, type ExtractPropTypes, type InjectionKey } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp, numericProp } from '../common/props'
+
+export type TabsProvide = {
+  state: {
+    activeIndex: number
+    lineStyle: string // 激活项边框线样式
+    inited: boolean // 是否初始化
+    animating: boolean // 是否动画中
+    mapShow: boolean // map的开关
+    scrollLeft: number // scroll-view偏移量
+  }
+  props: Partial<TabsProps>
+}
+
+export type TabsSlidable = 'auto' | 'always'
+
+export const TABS_KEY: InjectionKey<TabsProvide> = Symbol('oxy-tabs')
+
+export const tabsProps = {
+  ...baseProps,
+  /**
+   * 绑定值
+   */
+  modelValue: makeNumericProp(0),
+  /**
+   * 标签数超过阈值可滑动
+   */
+  slidableNum: makeNumberProp(6),
+  /**
+   * 标签数超过阈值显示导航地图
+   */
+  mapNum: makeNumberProp(10),
+  /**
+   * 导航地图的标题
+   */
+  mapTitle: String,
+  /**
+   * 粘性布局
+   */
+  sticky: makeBooleanProp(false),
+  /**
+   * 粘性布局吸顶位置
+   */
+  offsetTop: makeNumberProp(0),
+  /**
+   * 开启手势滑动
+   */
+  swipeable: makeBooleanProp(false),
+  /**
+   * 自动调整底部条宽度，设置了 lineWidth 后无效
+   */
+  autoLineWidth: makeBooleanProp(false),
+  /**
+   * 底部条宽度，单位像素
+   */
+  lineWidth: numericProp,
+  /**
+   * 底部条高度，单位像素
+   */
+  lineHeight: numericProp,
+  /**
+   * 颜色
+   */
+  color: makeStringProp(''),
+  /**
+   * 非活动状态颜色
+   */
+  inactiveColor: makeStringProp(''),
+  /**
+   * 是否开启切换标签内容时的过渡动画
+   */
+  animated: makeBooleanProp(false),
+  /**
+   * 切换动画过渡时间，单位毫秒
+   */
+  duration: makeNumberProp(300),
+  /**
+   * 是否开启滚动导航
+   * 可选值：'auto' | 'always'
+   * @default auto
+   */
+  slidable: makeStringProp<TabsSlidable>('auto')
+}
+
+export type TabsExpose = {
+  /**
+   * 设置激活项
+   * @param value 激活值
+   * @param init 是否已初始化
+   * @param setScroll 是否设置scroll-view滚动
+   */
+  setActive: (value: number | string, init: boolean, setScroll: boolean) => void
+  /**
+   * 使选中项滚动到可视区域
+   */
+  scrollIntoView: () => void
+  /**
+   * 更新激活项边框线样式
+   * @param animation 是否开启动画，默认开启
+   */
+  updateLineStyle: (animation?: boolean) => void
+}
+
+export type TabsProps = ExtractPropTypes<typeof tabsProps>
+
+export type TabsInstance = ComponentPublicInstance<TabsProps, TabsExpose>

package/components/oxy-tag/index.scss

@@ -0,0 +1,115 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@mixin tag-type-style ($normalColor, $normalBg) {
+  background: $normalBg;
+
+  @include when(plain) {
+    background: transparent;
+    color: $normalColor;
+    border: 1px solid $normalColor;
+    padding: 0 4px;
+  }
+  @include when(round) {
+    line-height: 1.2;
+    font-size: $-tag-fs;
+    padding: 4px 11px;
+    background: transparent;
+    color: if($normalColor != $-tag-info-color, $normalColor, $-tag-round-color);
+    border: 1px solid if($normalColor != $-tag-info-color, $normalColor, $-tag-round-border-color);
+    border-radius: $-tag-round-radius;
+  }
+  @include when(mark) {
+    padding: 1px 6px;
+    border-radius: $-tag-mark-radius;
+
+    @include when(plain) {
+      padding: 0 6px;
+    }
+  }
+  @include when(active) {
+    color: $-tag-primary-color;
+    border-color: $-tag-primary-color;
+  }
+}
+@include b(tag) {
+  font-size: $-tag-small-fs;
+  display: inline-block;
+  color: $-tag-color;
+  padding: 0 3px;
+  border-radius: 2px;
+  transition: opacity .3s;
+  vertical-align: middle;
+  line-height: initial;
+
+  @include when(default) {
+    @include tag-type-style($-tag-info-color, $-tag-info-bg);
+  }
+  @include when(primary) {
+    @include tag-type-style($-tag-primary-color, $-tag-primary-bg);
+  }
+  @include when(danger) {
+    @include tag-type-style($-tag-danger-color, $-tag-danger-bg);
+  }
+  @include when(warning) {
+    @include tag-type-style($-tag-warning-color, $-tag-warning-bg);
+  }
+  @include when(success) {
+    @include tag-type-style($-tag-success-color, $-tag-success-bg);
+  }
+  @include when(icon) {
+    font-size: $-tag-fs;
+    line-height: 1.2;
+    padding: 2px 5px;
+  }
+  @include when(dynamic) {
+    box-sizing: border-box;
+    width: 88px;
+    transition: .3s;
+
+    &:active {
+      color: $-tag-primary-color;
+      border-color: $-tag-primary-color;
+    }
+  }
+  @include when(dynamic-input) {
+    border-color: $-tag-primary-color;
+  }
+  @include edeep(icon) {
+    display: inline-block;
+    margin-right: 4px;
+    font-size: $-tag-fs;
+    line-height: 1.2;
+    vertical-align: baseline;
+  }
+  @include e(text) {
+    display: inline-block;
+    vertical-align: text-top;
+  }
+  @include e(add-text) {
+    width: 60px;
+    height: 14px;
+    min-height: 14px;
+    display: inline-block;
+    font-size: $-tag-fs;
+    vertical-align: middle;
+    padding: 0;
+  }
+  @include e(close) {
+    display: inline-block;
+    margin-left: 24px;
+    margin-right: -4px;
+    font-size: $-tag-close-size;
+    height: 14px;
+    line-height: 1.1;
+    vertical-align: text-bottom;
+    color: $-tag-close-color;
+
+    &:active {
+      color: $-tag-close-active-color;
+    }
+  }
+  @include edeep(add) {
+    vertical-align: bottom;
+  }
+}