oxy-uni-ui 1.0.1

package/components/oxy-action-sheet/types.ts

@@ -0,0 +1,118 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
+
+export type Action = {
+  /**
+   * 选项名称
+   */
+  name: string
+  /**
+   * 描述信息
+   */
+  subname?: string
+  /**
+   * 颜色
+   */
+  color?: string
+  /**
+   * 禁用
+   */
+  disabled?: boolean
+  /**
+   * 加载中状态
+   */
+  loading?: boolean
+}
+
+export type Panel = {
+  /**
+   * 图片地址
+   */
+  iconUrl: string
+  /**
+   * 标题内容
+   */
+  title: string
+}
+
+export const actionSheetProps = {
+  ...baseProps,
+  /**
+   * header 头部样式
+   * @default ''
+   * @type {string}
+   */
+  customHeaderClass: makeStringProp(''),
+  /**
+   * 设置菜单显示隐藏
+   * @default false
+   * @type {boolean}
+   */
+  modelValue: { ...makeBooleanProp(false), ...makeRequiredProp(Boolean) },
+  /**
+   * 菜单选项
+   * @default []
+   * @type {Action[]}
+   */
+  actions: makeArrayProp<Action>(),
+  /**
+   * 自定义面板项,可以为字符串数组，也可以为对象数组，如果为二维数组，则为多行展示
+   * @default []
+   * @type {Array<Panel | Panel[]>}
+   */
+  panels: makeArrayProp<Panel | Panel[]>(),
+  /**
+   * 标题
+   * @type {string}
+   */
+  title: String,
+  /**
+   * 取消按钮文案
+   * @type {string}
+   */
+  cancelText: String,
+  /**
+   * 点击选项后是否关闭菜单
+   * @default true
+   * @type {boolean}
+   */
+  closeOnClickAction: makeBooleanProp(true),
+  /**
+   * 点击遮罩是否关闭
+   * @default true
+   * @type {boolean}
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 弹框动画持续时间
+   * @default 200
+   * @type {number}
+   */
+  duration: makeNumberProp(200),
+  /**
+   * 菜单层级
+   * @default 10
+   * @type {number}
+   */
+  zIndex: makeNumberProp(10),
+  /**
+   * 弹层内容懒渲染，触发展示时才渲染内容
+   * @default true
+   * @type {boolean}
+   */
+  lazyRender: makeBooleanProp(true),
+  /**
+   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   * @default true
+   * @type {boolean}
+   */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   * 类型：boolean
+   * 默认值：false
+   */
+  rootPortal: makeBooleanProp(false)
+}
+
+export type ActionSheetProps = ExtractPropTypes<typeof actionSheetProps>

package/components/oxy-backtop/index.scss

@@ -0,0 +1,25 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(backtop) {
+  position: fixed;
+  background-color: $-backtop-bg;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: $-color-gray-8;
+
+  @include edeep(backicon) {
+    font-size: $-backtop-icon-size;
+  }
+
+  @include when(circle) {
+    border-radius: 50%;
+  }
+
+  @include when(square) {
+    border-radius: 4px;
+  }
+}

package/components/oxy-backtop/oxy-backtop.vue

@@ -0,0 +1,45 @@
+<template>
+  <oxy-transition :show="show" name="fade">
+    <view
+      :class="`oxy-backtop ${customClass} is-${shape}`"
+      :style="`z-index: ${zIndex}; bottom: ${bottom}px; right: ${right}px; ${customStyle}`"
+      @click="handleBacktop"
+    >
+      <slot v-if="$slots.default"></slot>
+      <oxy-icon v-else custom-class="oxy-backtop__backicon" name="backtop" :custom-style="iconStyle" />
+    </view>
+  </oxy-transition>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-backtop',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyTransition from '../oxy-transition/oxy-transition.vue'
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import { computed } from 'vue'
+import { backtopProps } from './types'
+
+const props = defineProps(backtopProps)
+
+const show = computed(() => props.scrollTop > props.top)
+
+function handleBacktop() {
+  uni.pageScrollTo({
+    scrollTop: 0,
+    duration: props.duration
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-backtop/types.ts

@@ -0,0 +1,37 @@
+import { baseProps, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
+
+export const backtopProps = {
+  ...baseProps,
+  /**
+   * 页面滚动距离
+   */
+  scrollTop: makeRequiredProp(Number),
+  /**
+   * 距离顶部多少距离时显示
+   */
+  top: makeNumberProp(300),
+  /**
+   * 返回顶部滚动时间
+   */
+  duration: makeNumberProp(100),
+  /**
+   * 层级
+   */
+  zIndex: makeNumberProp(10),
+  /**
+   * icon样式
+   */
+  iconStyle: makeStringProp(''),
+  /**
+   * 形状
+   */
+  shape: makeStringProp('circle'),
+  /**
+   * 距离屏幕底部距离
+   */
+  bottom: makeNumberProp(100),
+  /**
+   * 距离屏幕右边距离
+   */
+  right: makeNumberProp(20)
+}

package/components/oxy-badge/index.scss

@@ -0,0 +1,63 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
+.oxy-theme-dark {
+  @include b(badge) {
+    @include e(content) {
+      border-color: $-dark-background2;
+    }
+  }
+}
+
+
+@include b(badge) {
+  position: relative;
+  vertical-align: middle;
+  display: inline-block;
+
+  @include e(content) {
+    display: inline-block;
+    box-sizing: content-box;
+    height: $-badge-height;
+    line-height: $-badge-height;
+    padding: $-badge-padding;
+    background-color: $-badge-bg;
+    border-radius: calc($-badge-height / 2 + 2px);
+    color: $-badge-color;
+    font-size: $-badge-fs;
+    text-align: center;
+    white-space: nowrap;
+    border: $-badge-border;
+    font-weight: 500;
+
+    @include when(fixed) {
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      transform: translateY(-50%) translateX(50%);
+    }
+
+    @include when(dot) {
+      height: $-badge-dot-size;
+      width: $-badge-dot-size;
+      padding: 0;
+      border-radius: 50%;
+    }
+
+    @each $type in (primary, success, warning, info, danger) {
+      @include m($type) {
+        @if $type == primary {
+          background-color: $-badge-primary;
+        } @else if $type == success {
+          background-color: $-badge-success;
+        } @else if $type == warning {
+          background-color: $-badge-warning;
+        } @else if $type == info {
+          background-color: $-badge-info;
+        } @else {
+          background-color: $-badge-danger;
+        }
+      }
+    }
+  }
+}

package/components/oxy-badge/oxy-badge.vue

@@ -0,0 +1,61 @@
+<template>
+  <view :class="['oxy-badge', customClass]" :style="customStyle">
+    <slot></slot>
+    <view
+      v-if="shouldShowBadge"
+      :class="['oxy-badge__content', 'is-fixed', type ? 'oxy-badge__content--' + type : '', isDot ? 'is-dot' : '']"
+      :style="contentStyle"
+    >
+      {{ content }}
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-badge',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { computed, type CSSProperties } from 'vue'
+import { badgeProps } from './types'
+import { addUnit, isDef, isNumber, objToStyle } from '../common/util'
+
+const props = defineProps(badgeProps)
+const content = computed(() => {
+  const { modelValue, max, isDot } = props
+  if (isDot) return ''
+  let value = modelValue
+  if (value && max && isNumber(value) && !Number.isNaN(value) && !Number.isNaN(max)) {
+    value = max < value ? `${max}+` : value
+  }
+  return value
+})
+
+const contentStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(props.bgColor)) {
+    style.backgroundColor = props.bgColor
+  }
+
+  if (isDef(props.top)) {
+    style.top = addUnit(props.top)
+  }
+
+  if (isDef(props.right)) {
+    style.right = addUnit(props.right)
+  }
+  return objToStyle(style)
+})
+
+// 是否展示徽标数字
+const shouldShowBadge = computed(() => !props.hidden && (content.value || (content.value === 0 && props.showZero) || props.isDot))
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-badge/types.ts

@@ -0,0 +1,41 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp, numericProp } from '../common/props'
+
+export type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+
+export const badgeProps = {
+  ...baseProps,
+  /**
+   * 显示值
+   */
+  modelValue: numericProp,
+  /** 当数值为 0 时，是否展示徽标 */
+  showZero: makeBooleanProp(false),
+  bgColor: String,
+  /**
+   * 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型
+   */
+  max: Number,
+  /**
+   * 是否为红色点状标注
+   */
+  isDot: Boolean,
+  /**
+   * 是否隐藏 badge
+   */
+  hidden: Boolean,
+  /**
+   * badge类型，可选值primary / success / warning / danger / info
+   */
+  type: makeStringProp<BadgeType | undefined>(undefined),
+  /**
+   * 为正时，角标向下偏移对应的像素
+   */
+  top: numericProp,
+  /**
+   * 为正时，角标向左偏移对应的像素
+   */
+  right: numericProp
+}
+
+export type BadgeProps = ExtractPropTypes<typeof badgeProps>