oxy-uni-ui 1.0.1

package/components/oxy-swiper-nav/index.scss

@@ -0,0 +1,159 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(swiper-nav) {
+
+  @include e(btn) {
+    @include m(prev, next) {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: $-swiper-nav-btn-size;
+      height: $-swiper-nav-btn-size;
+      border-radius: 50%;
+      background: $-swiper-nav-btn-bg-color;
+
+      &::after {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        display: block;
+        content: '';
+        width: 12rpx;
+        height: 12rpx;
+        border-color: $-swiper-nav-btn-color;
+        border-style: solid;
+      }
+    }
+
+    @include m(prev) {
+      left: 30rpx;
+
+      &::after {
+        margin-left: 4rpx;
+        border-width: 2rpx 0 0 2rpx;
+        transform: translate(-50%, -50%) rotateZ(-45deg);
+      }
+    }
+
+    @include m(next) {
+      right: 30rpx;
+
+      &::after {
+        margin-left: -4rpx;
+        border-width: 2rpx 2rpx 0 0;
+        transform: translate(-50%, -50%) rotateZ(45deg);
+      }
+    }
+  }
+
+  @include m(dots, dots-bar) {
+    display: flex;
+    flex-direction: row;
+  }
+
+  @include m(fraction) {
+    padding: 0 16rpx;
+    height: $-swiper-nav-fraction-height;
+    line-height: $-swiper-nav-fraction-height;
+    border-radius: calc($-swiper-nav-fraction-height / 2);
+    background: $-swiper-nav-fraction-bg-color;
+    color: $-swiper-nav-fraction-color;
+    font-size: $-swiper-nav-fraction-font-size;
+  }
+
+
+  @include e(item) {
+    @include m(dots, dots-bar) {
+      width: $-swiper-nav-dot-size;
+      height: $-swiper-nav-dot-size;
+      background: $-swiper-nav-dot-color;
+      border-radius: 50%;
+      margin: 0 10rpx;
+      transition: all 0.4s ease-in;
+
+      @include when(vertical) {
+        margin: 10rpx 0;
+      }
+
+      @include when(active) {
+        background-color: $-swiper-nav-dot-active-color;
+      }
+    }
+
+    @include m(dots-bar) {
+
+      @include when(vertical) {
+        @include when(active) {
+          width: $-swiper-nav-dot-size;
+          height: $-swiper-nav-dots-bar-active-width;
+        }
+      }
+
+      @include when(active) {
+        width: $-swiper-nav-dots-bar-active-width;
+        border-radius: calc($-swiper-nav-dot-size / 2);
+        background-color: $-swiper-nav-dot-active-color;
+      }
+    }
+
+  }
+
+
+  @include m(left) {
+    position: absolute;
+    left: 24rpx;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  @include m(right) {
+    position: absolute;
+    right: 24rpx;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  @include m(top-left) {
+    position: absolute;
+    top: 24rpx;
+    left: 24rpx;
+  }
+
+  @include m(top) {
+    position: absolute;
+    left: 50%;
+    top: 24rpx;
+    transform: translateX(-50%);
+  }
+
+  @include m(top-right) {
+    position: absolute;
+    top: 24rpx;
+    right: 24rpx;
+  }
+
+  @include m(bottom-left) {
+    position: absolute;
+    left: 24rpx;
+    bottom: 24rpx;
+  }
+
+  @include m(bottom) {
+    position: absolute;
+    left: 50%;
+    bottom: 24rpx;
+    transform: translateX(-50%);
+  }
+
+  @include m(bottom-right) {
+    position: absolute;
+    right: 24rpx;
+    bottom: 24rpx;
+  }
+
+  @include m(vertical) {
+    flex-direction: column;
+  }
+
+}

package/components/oxy-swiper-nav/oxy-swiper-nav.vue

@@ -0,0 +1,37 @@
+<template>
+  <view v-if="showControls" class="oxy-swiper-nav__btn">
+    <view class="oxy-swiper-nav__btn--prev" @click="handleNav('prev')" />
+    <view class="oxy-swiper-nav__btn--next" @click="handleNav('next')" />
+  </view>
+  <view
+    v-if="total >= minShowNum"
+    :style="customStyle"
+    :class="`oxy-swiper-nav oxy-swiper-nav--${direction} oxy-swiper-nav--${type} oxy-swiper-nav--${indicatorPosition} ${customClass}`"
+  >
+    <block v-if="type === 'dots' || type === 'dots-bar'">
+      <view
+        v-for="(_, index) in total"
+        :key="index"
+        :class="`oxy-swiper-nav__item--${type} ${current === index ? 'is-active' : ''} is-${direction}`"
+      ></view>
+    </block>
+    <block v-if="type === 'fraction'">{{ current + 1 }}/{{ total }}</block>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { swiperNavprops } from './types'
+
+defineProps(swiperNavprops)
+
+const emit = defineEmits(['change'])
+
+function handleNav(dir: 'prev' | 'next') {
+  const source: string = 'nav'
+  emit('change', { dir, source })
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-swiper-nav/types.ts

@@ -0,0 +1,42 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import type { DirectionType, IndicatorPositionType } from '../oxy-swiper/types'
+
+/**
+ * 指示器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等
+ */
+export type SwiperIndicatorType = 'dots' | 'dots-bar' | 'fraction'
+
+export const swiperNavprops = {
+  ...baseProps,
+  /**
+   * 当前轮播在哪一项（下标）
+   */
+  current: makeNumberProp(0),
+  /**
+   * 轮播滑动方向，包括横向滑动和纵向滑动两个方向
+   */
+  direction: makeStringProp<DirectionType>('horizontal'),
+  /**
+   * 小于这个数字不会显示导航器
+   */
+  minShowNum: makeNumberProp(2),
+  /**
+   * 指示器位置
+   */
+  indicatorPosition: makeStringProp<IndicatorPositionType>('bottom'),
+  /**
+   * 是否显示两侧的控制按钮
+   */
+  showControls: makeBooleanProp(false),
+  /**
+   * 总共的项数
+   */
+  total: makeNumberProp(0),
+  /**
+   * 指示器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等
+   */
+  type: makeStringProp<SwiperIndicatorType>('dots')
+}
+
+export type SwiperNavProps = ExtractPropTypes<typeof swiperNavprops>

package/components/oxy-switch/index.scss

@@ -0,0 +1,58 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(switch) {
+  display: inline-block;
+  position: relative;
+  width: $-switch-width;
+  height: $-switch-height;
+  border-radius: $-switch-circle-size;
+  background: $-switch-inactive-color;
+  font-size: $-switch-size;
+  transition: all .3s;
+
+  @include e(checkbox) {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    margin: 0;
+  }
+  @include e(circle) {
+    box-sizing: border-box;
+    position: absolute;
+    display: inline-block;
+    width: $-switch-circle-size;
+    height: $-switch-circle-size;
+    top: 2px;
+    left: 2px;
+    background: #fff;
+    border-radius: 50%;
+    transition: left .3s ease-out;
+    box-shadow: 0 2px 4px 0 $-switch-inactive-shadow-color;
+
+    &::after {
+      position: absolute;
+      content: '';
+      width: calc(200% - 2px);
+      height: calc(200% - 2px);
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0.5);
+      border: 1px solid $-switch-border-color;
+      border-radius: 50%;
+    }
+  }
+  @include when(checked) {
+    background: $-switch-active-color;
+    border-color: $-switch-active-color;
+
+    .oxy-switch__circle {
+      left: calc($-switch-width - $-switch-circle-size - 2px);
+      box-shadow: 0 2px 4px 0 $-switch-active-shadow-color
+    }
+  }
+  @include when(disabled) {
+    opacity: 0.5;
+  }
+}

package/components/oxy-switch/oxy-switch.vue

@@ -0,0 +1,83 @@
+<template>
+  <view :class="rootClass" :style="rootStyle" @click="switchValue">
+    <view class="oxy-switch__circle" :style="circleStyle"></view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-switch',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, type CSSProperties, onBeforeMount } from 'vue'
+import { addUnit, isFunction, objToStyle } from '../common/util'
+import { switchProps } from './types'
+
+const props = defineProps(switchProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const rootClass = computed(() => {
+  return `oxy-switch ${props.customClass} ${props.disabled ? 'is-disabled' : ''} ${props.modelValue === props.activeValue ? 'is-checked' : ''}`
+})
+
+const rootStyle = computed(() => {
+  const rootStyle: CSSProperties = {
+    background: props.modelValue === props.activeValue ? props.activeColor : props.inactiveColor,
+    'border-color': props.modelValue === props.activeValue ? props.activeColor : props.inactiveColor
+  }
+  if (props.size) {
+    rootStyle['font-size'] = addUnit(props.size)
+  }
+  return `${objToStyle(rootStyle)}${props.customStyle}`
+})
+
+const circleStyle = computed(() => {
+  const circleStyle: string =
+    (props.modelValue === props.activeValue && props.activeColor) || (props.modelValue !== props.activeValue && props.inactiveColor)
+      ? 'box-shadow: none;'
+      : ''
+  return circleStyle
+})
+
+function switchValue() {
+  if (props.disabled) return
+  const newVal = props.modelValue === props.activeValue ? props.inactiveValue : props.activeValue
+
+  if (props.beforeChange && isFunction(props.beforeChange)) {
+    props.beforeChange({
+      value: newVal,
+      resolve: (pass: boolean) => {
+        if (pass) {
+          emit('update:modelValue', newVal)
+          emit('change', {
+            value: newVal
+          })
+        }
+      }
+    })
+  } else {
+    emit('update:modelValue', newVal)
+    emit('change', {
+      value: newVal
+    })
+  }
+}
+
+onBeforeMount(() => {
+  if ([props.activeValue, props.inactiveValue].indexOf(props.modelValue) === -1) {
+    emit('update:modelValue', props.inactiveValue)
+    emit('change', {
+      value: props.inactiveValue
+    })
+  }
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-switch/types.ts

@@ -0,0 +1,58 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, numericProp } from '../common/props'
+
+export type SwitchBeforeChangeOption = {
+  value: number | string | boolean
+  resolve: (pass: boolean) => void
+}
+
+export type SwitchBeforeChange = (option: SwitchBeforeChangeOption) => void
+
+export const switchProps = {
+  ...baseProps,
+  /**
+   * 绑定值
+   */
+  modelValue: {
+    type: [Boolean, String, Number],
+    required: true,
+    default: false
+  },
+  /**
+   * 是否禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 激活值
+   */
+  activeValue: {
+    type: [Boolean, String, Number],
+    default: true
+  },
+  /**
+   * 非激活值
+   */
+  inactiveValue: {
+    type: [Boolean, String, Number],
+    default: false
+  },
+  /**
+   * 激活颜色
+   */
+  activeColor: String,
+  /**
+   * 非激活颜色
+   */
+  inactiveColor: String,
+  /**
+   * 大小
+   */
+  size: {
+    type: numericProp
+  },
+  /**
+   * 在改变前执行的函数
+   */
+  beforeChange: Function as PropType<SwitchBeforeChange>
+}
+export type SwitchProps = ExtractPropTypes<typeof switchProps>

package/components/oxy-tab/index.scss

@@ -0,0 +1,16 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+
+@include b(tab) {
+  width: 100%;
+  flex-shrink: 0;
+  box-sizing: border-box;
+
+  @include e(body) {
+    @include m(inactive) {
+      height: 0;
+      transition: height 0.3s ease-in-out;
+    }
+  }
+}

package/components/oxy-tab/oxy-tab.vue

@@ -0,0 +1,88 @@
+<template>
+  <view :class="`oxy-tab ${customClass}`" :style="customStyle">
+    <view :class="['oxy-tab__body', { 'oxy-tab__body--inactive': !active }]" v-if="shouldBeRender" :style="tabBodyStyle">
+      <slot />
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-tab',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { getCurrentInstance, ref, watch, type CSSProperties } from 'vue'
+import { isDef, isNumber, isString, objToStyle } from '../common/util'
+import { useParent } from '../composables/useParent'
+import { TABS_KEY } from '../oxy-tabs/types'
+import { computed } from 'vue'
+import { tabProps } from './types'
+
+const props = defineProps(tabProps)
+
+const { proxy } = getCurrentInstance() as any
+const { parent: tabs, index } = useParent(TABS_KEY)
+
+// 激活项下标
+const active = computed(() => {
+  return isDef(tabs) ? tabs.state.activeIndex === index.value : false
+})
+
+const painted = ref<boolean>(active.value) // 初始状态tab不会渲染，必须通过tabs来设置painted使tab渲染
+
+const tabBodyStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (!active.value && (!isDef(tabs) || !tabs.props.animated)) {
+    style.display = 'none'
+  }
+  return objToStyle(style)
+})
+
+const shouldBeRender = computed(() => !props.lazy || painted.value || active.value)
+
+watch(active, (val) => {
+  if (val) painted.value = true
+})
+
+watch(
+  () => props.name,
+  (newValue) => {
+    if (isDef(newValue) && !isNumber(newValue) && !isString(newValue)) {
+      console.error('[Oxy ui] error(oxy-tab): the type of name should be number or string')
+      return
+    }
+    if (tabs) {
+      checkName(proxy)
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+/**
+ * @description 检测tab绑定的name是否和其它tab的name冲突
+ * @param {Object} self 自身
+ */
+function checkName(self: any) {
+  const { name: myName } = props
+  if (myName === undefined || myName === null || myName === '') {
+    return
+  }
+  tabs &&
+    tabs.children.forEach((child: any) => {
+      if (child.$.uid !== self.$.uid && child.name === myName) {
+        console.error(`The tab's bound value: ${myName} has been used`)
+      }
+    })
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-tab/types.ts

@@ -0,0 +1,30 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, numericProp } from '../common/props'
+import type { BadgeProps } from '../oxy-badge/types'
+
+export const tabProps = {
+  ...baseProps,
+  /**
+   * 唯一标识符
+   */
+  name: numericProp,
+  /**
+   * tab的标题
+   */
+  title: String,
+  /**
+   *  是否禁用，无法点击
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 是否懒加载，切换到该tab时才加载内容
+   * @default true
+   */
+  lazy: makeBooleanProp(true),
+  /**
+   * 徽标属性，透传给 Badge 组件
+   */
+  badgeProps: Object as PropType<Partial<BadgeProps>>
+}
+
+export type TabProps = ExtractPropTypes<typeof tabProps>

package/components/oxy-tabbar/index.scss

@@ -0,0 +1,62 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.oxy-theme-dark {
+  @include b(tabbar) {
+    background: $-dark-background;
+  }
+}
+
+@include b(tabbar) {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  position: relative;
+  background: $-color-white;
+  height: $-tabbar-height;
+
+  @include e(placeholder) {
+    box-sizing: content-box;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  @include m(round) {
+    margin-left: 32rpx;
+    margin-right: 32rpx;
+    border-radius: 999px;
+    box-shadow: $-tabbar-box-shadow;
+
+    @include when(fixed) {
+      @include when(safe) {
+        bottom: constant(safe-area-inset-bottom);
+        bottom: env(safe-area-inset-bottom);
+      }
+    }
+
+  }
+
+  @include m(default) {
+
+    @include when(fixed) {
+      @include when(safe) {
+        box-sizing: content-box;
+        padding-bottom: constant(safe-area-inset-bottom);
+        padding-bottom: env(safe-area-inset-bottom);
+      }
+    }
+
+
+    @include when(border) {
+      @include halfPixelBorder('top');
+    }
+  }
+
+  @include when(fixed) {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 500;
+  }
+}