oxy-uni-ui 1.0.1

package/components/oxy-popover/oxy-popover.vue

@@ -0,0 +1,180 @@
+<template>
+  <view :class="`oxy-popover ${customClass}`" :style="customStyle" id="popover" @click.stop="popover.noop">
+    <!-- 使用插槽时无法获取正确宽高 -->
+    <view class="oxy-popover__pos oxy-popover__hidden" id="pos">
+      <view :class="`oxy-popover__container ${customPop}`">
+        <view v-if="!useContentSlot && mode === 'normal'" class="oxy-popover__inner">
+          {{ content }}
+        </view>
+        <view v-if="!useContentSlot && mode === 'menu' && typeof content === 'object'" class="oxy-popover__menu">
+          <view v-for="(item, index) in content" :key="index" class="oxy-popover__menu-inner" @click="menuClick(index)">
+            <oxy-icon v-if="item.iconClass" :name="item.iconClass" custom-class="oxy-popover__icon" />
+            <text>{{ item.content }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <oxy-transition custom-class="oxy-popover__pos" :custom-style="popover.popStyle.value" :show="showPopover" name="fade" :duration="200">
+      <view :class="`oxy-popover__container ${customPop}`">
+        <view
+          v-if="props.visibleArrow"
+          :class="`oxy-popover__arrow ${popover.arrowClass.value} ${customArrow}`"
+          :style="popover.arrowStyle.value"
+        ></view>
+        <!-- 普通模式 -->
+        <view v-if="!useContentSlot && mode === 'normal'" class="oxy-popover__inner">
+          {{ content }}
+        </view>
+        <!-- 列表模式 -->
+        <view v-if="!useContentSlot && mode === 'menu'" class="oxy-popover__menu">
+          <view
+            v-for="(item, index) in content"
+            :key="index"
+            class="oxy-popover__menu-inner"
+            @click="menuClick(index)"
+            :style="index === 0 ? 'border-top: none' : ''"
+          >
+            <oxy-icon v-if="typeof item === 'object' && item.iconClass" :name="item.iconClass" custom-class="oxy-popover__icon" />
+            <view style="display: inline-block">{{ typeof item === 'object' && item.content ? item.content : '' }}</view>
+          </view>
+        </view>
+        <!-- 用户自定义样式 -->
+        <slot name="content" v-else />
+      </view>
+      <oxy-icon v-if="showClose" name="close" custom-class="oxy-popover__close-icon" @click="toggle"></oxy-icon>
+    </oxy-transition>
+    <view @click="toggle" class="oxy-popover__target" id="target">
+      <slot />
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-popover',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import OxyTransition from '../oxy-transition/oxy-transition.vue'
+import { getCurrentInstance, inject, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { usePopover } from '../composables/usePopover'
+import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
+import { type Queue, queueKey } from '../composables/useQueue'
+import { popoverProps, type PopoverExpose } from './types'
+import { isArray } from '../common/util'
+
+const props = defineProps(popoverProps)
+const emit = defineEmits(['update:modelValue', 'menuclick', 'change', 'open', 'close'])
+
+const queue = inject<Queue | null>(queueKey, null)
+const selector: string = 'popover'
+const { proxy } = getCurrentInstance() as any
+const popover = usePopover(props.visibleArrow)
+
+const showPopover = ref<boolean>(false) // 控制popover显隐
+
+watch(
+  () => props.content,
+  (newVal) => {
+    const { mode } = props
+    if (mode === 'normal' && typeof newVal !== 'string') {
+      console.error('The value type must be a string type in normal mode')
+    } else if (mode === 'menu' && !isArray(newVal)) {
+      console.error('The value type must be a Array type in menu mode')
+    }
+  }
+)
+
+watch(
+  () => props.placement,
+  () => {
+    popover.init(props.placement, props.visibleArrow, selector)
+  }
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    showPopover.value = newValue
+  }
+)
+
+watch(
+  () => showPopover.value,
+  (newValue) => {
+    if (newValue) {
+      popover.control(props.placement, props.offset)
+      if (queue && queue.closeOther) {
+        queue.closeOther(proxy)
+      } else {
+        closeOther(proxy)
+      }
+    }
+    popover.showStyle.value = newValue ? 'display: inline-block;' : 'display: none;'
+    emit('change', { show: newValue })
+    emit(`${newValue ? 'open' : 'close'}`)
+  }
+)
+
+onMounted(() => {
+  popover.init(props.placement, props.visibleArrow, selector)
+})
+
+onBeforeMount(() => {
+  if (queue && queue.pushToQueue) {
+    queue.pushToQueue(proxy)
+  } else {
+    pushToQueue(proxy)
+  }
+  popover.showStyle.value = showPopover.value ? 'opacity: 1;' : 'opacity: 0;'
+})
+
+onBeforeUnmount(() => {
+  if (queue && queue.removeFromQueue) {
+    queue.removeFromQueue(proxy)
+  } else {
+    removeFromQueue(proxy)
+  }
+})
+
+function menuClick(index: number) {
+  updateModelValue(false)
+  emit('menuclick', {
+    item: (props.content as Array<Record<string, any>>)[index],
+    index
+  })
+}
+
+function toggle() {
+  if (props.disabled) return
+  updateModelValue(!showPopover.value)
+}
+
+function open() {
+  updateModelValue(true)
+}
+
+function close() {
+  updateModelValue(false)
+}
+
+function updateModelValue(value: boolean) {
+  showPopover.value = value
+  emit('update:modelValue', value)
+}
+
+defineExpose<PopoverExpose>({
+  open,
+  close
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-popover/types.ts

@@ -0,0 +1,69 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export type PlacementType =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+
+export type PopoverMode = 'menu' | 'normal'
+
+export const popoverProps = {
+  ...baseProps,
+  customArrow: makeStringProp(''),
+  customPop: makeStringProp(''),
+  /**
+   * 是否显示 popover 箭头
+   */
+  visibleArrow: makeBooleanProp(true),
+  /**
+   * 显示的内容，也可以通过 slot#content 传入
+   */
+  content: [String, Object] as PropType<string | Record<string, any>[]>,
+  /**
+   * 指定 popover 的放置位置：top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end
+   */
+  placement: makeStringProp<PlacementType>('bottom'),
+  /**
+   * 偏移量
+   */
+  offset: makeNumberProp(0),
+  /**
+   * 是否使用内容插槽
+   */
+  useContentSlot: makeBooleanProp(false),
+  /**
+   * 是否禁用 popover
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 是否显示关闭按钮
+   */
+  showClose: makeBooleanProp(false),
+  /**
+   * 控制 popover 的显示状态
+   */
+  modelValue: makeBooleanProp(false),
+  /**
+   * 当前显示的模式，决定内容的展现形式，可选值：normal（普通模式）/ menu（菜单模式）
+   */
+  mode: makeStringProp<PopoverMode>('normal')
+}
+
+export type PopoverProps = ExtractPropTypes<typeof popoverProps>
+
+export type PopoverExpose = {
+  // 打开popover
+  open: () => void
+  // 关闭popover
+  close: () => void
+}

package/components/oxy-popup/index.scss

@@ -0,0 +1,84 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
+.oxy-theme-dark {
+  @include b(popup-wrapper) {
+    :deep() {
+      .oxy-popup {
+        background: $-dark-background2;
+      }
+
+      .oxy-popup__close {
+        color: $-dark-color;
+      }
+    }
+  }
+}
+
+@include b(popup-wrapper) {
+  :deep() {
+    .oxy-popup {
+      position: fixed;
+      max-height: 100%;
+      overflow-y: auto;
+      background: #fff;
+    }
+  }
+}
+
+
+@include b(popup) {
+  @include edeep(close) {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    color: $-popup-close-color;
+    font-size: $-popup-close-size;
+    transform: rotate(-45deg);
+  }
+
+  @include mdeep(center) {
+    left: 50%;
+    top: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    transform-origin: 0% 0%;
+
+    &.oxy-zoom-in-enter,
+    &.oxy-zoom-in-leave-to {
+      transform: scale(0.8) translate3d(-50%, -50%, 0) !important;
+    }
+
+    @include when(deep) {
+
+      &.oxy-zoom-in-enter,
+      &.oxy-zoom-in-leave-to {
+        transform: scale(0.1) translate3d(-50%, -50%, 0) !important;
+      }
+    }
+
+  }
+
+  @include mdeep(left) {
+    top: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  @include mdeep(right) {
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  @include mdeep(top) {
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+
+  @include mdeep(bottom) {
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+}

package/components/oxy-popup/oxy-popup.vue

@@ -0,0 +1,169 @@
+<template>
+  <oxy-root-portal v-if="rootPortal">
+    <view class="oxy-popup-wrapper">
+      <oxy-overlay
+        v-if="modal"
+        :show="modelValue"
+        :z-index="zIndex"
+        :lock-scroll="lockScroll"
+        :duration="duration"
+        :custom-style="modalStyle"
+        @click="handleClickModal"
+        @touchmove="noop"
+      />
+      <oxy-transition
+        :lazy-render="lazyRender"
+        :custom-class="rootClass"
+        :custom-style="style"
+        :duration="duration"
+        :show="modelValue"
+        :name="transitionName"
+        :destroy="hideWhenClose"
+        @before-enter="emit('before-enter')"
+        @enter="emit('enter')"
+        @after-enter="emit('after-enter')"
+        @before-leave="emit('before-leave')"
+        @leave="emit('leave')"
+        @after-leave="emit('after-leave')"
+      >
+        <slot />
+        <oxy-icon v-if="closable" custom-class="oxy-popup__close" name="add" @click="close" />
+      </oxy-transition>
+    </view>
+  </oxy-root-portal>
+
+  <!-- 非传送模式 -->
+  <view v-else class="oxy-popup-wrapper">
+    <oxy-overlay
+      v-if="modal"
+      :show="modelValue"
+      :z-index="zIndex"
+      :lock-scroll="lockScroll"
+      :duration="duration"
+      :custom-style="modalStyle"
+      @click="handleClickModal"
+      @touchmove="noop"
+    />
+    <oxy-transition
+      :lazy-render="lazyRender"
+      :custom-class="rootClass"
+      :custom-style="style"
+      :duration="duration"
+      :show="modelValue"
+      :name="transitionName"
+      :destroy="hideWhenClose"
+      @before-enter="emit('before-enter')"
+      @enter="emit('enter')"
+      @after-enter="emit('after-enter')"
+      @before-leave="emit('before-leave')"
+      @leave="emit('leave')"
+      @after-leave="emit('after-leave')"
+    >
+      <slot />
+      <oxy-icon v-if="closable" custom-class="oxy-popup__close" name="add" @click="close" />
+    </oxy-transition>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-popup',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, onBeforeMount, ref } from 'vue'
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import OxyOverlay from '../oxy-overlay/oxy-overlay.vue'
+import OxyTransition from '../oxy-transition/oxy-transition.vue'
+import OxyRootPortal from '../oxy-root-portal/oxy-root-portal.vue'
+import { popupProps } from './types'
+import type { TransitionName } from '../oxy-transition/types'
+
+const props = defineProps(popupProps)
+const emit = defineEmits([
+  'update:modelValue',
+  'before-enter',
+  'enter',
+  'before-leave',
+  'leave',
+  'after-leave',
+  'after-enter',
+  'click-modal',
+  'close'
+])
+
+/**
+ * 弹出位置
+ */
+const transitionName = computed<TransitionName | TransitionName[]>(() => {
+  if (props.transition) {
+    return props.transition
+  }
+  if (props.position === 'center') {
+    return ['zoom-in', 'fade']
+  }
+  if (props.position === 'left') {
+    return 'slide-left'
+  }
+  if (props.position === 'right') {
+    return 'slide-right'
+  }
+  if (props.position === 'bottom') {
+    return 'slide-up'
+  }
+  if (props.position === 'top') {
+    return 'slide-down'
+  }
+  return 'slide-up'
+})
+
+const safeBottom = ref<number>(0)
+
+const style = computed(() => {
+  return `z-index:${props.zIndex}; padding-bottom: ${safeBottom.value}px;${props.customStyle}`
+})
+
+const rootClass = computed(() => {
+  return `oxy-popup oxy-popup--${props.position} ${!props.transition && props.position === 'center' ? 'is-deep' : ''} ${props.customClass || ''}`
+})
+
+onBeforeMount(() => {
+  if (props.safeAreaInsetBottom) {
+    const { safeArea, screenHeight, safeAreaInsets } = uni.getSystemInfoSync()
+
+    if (safeArea) {
+      // #ifdef MP-WEIXIN
+      safeBottom.value = screenHeight - (safeArea!.bottom || 0)
+      // #endif
+      // #ifndef MP-WEIXIN
+      safeBottom.value = safeAreaInsets ? safeAreaInsets.bottom : 0
+      // #endif
+    } else {
+      safeBottom.value = 0
+    }
+  }
+})
+
+function handleClickModal() {
+  emit('click-modal')
+  if (props.closeOnClickModal) {
+    close()
+  }
+}
+
+function close() {
+  emit('close')
+  emit('update:modelValue', false)
+}
+function noop() {}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-popup/types.ts

@@ -0,0 +1,95 @@
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import type { TransitionName } from '../oxy-transition/types'
+
+export type PopupType = 'center' | 'top' | 'right' | 'bottom' | 'left'
+
+export const popupProps = {
+  ...baseProps,
+  /**
+   * 动画类型，参见 oxy-transition 组件的name
+   * 类型：string
+   * 可选值：fade / fade-up / fade-down / fade-left / fade-right / slide-up / slide-down / slide-left / slide-right / zoom-in
+   */
+  transition: String as PropType<TransitionName>,
+  /**
+   * 关闭按钮
+   * 类型：boolean
+   * 默认值：false
+   */
+  closable: makeBooleanProp(false),
+  /**
+   * 弹出框的位置
+   * 类型：string
+   * 默认值：center
+   * 可选值：center / top / right / bottom / left
+   */
+  position: makeStringProp<PopupType>('center'),
+  /**
+   * 点击遮罩是否关闭
+   * 类型：boolean
+   * 默认值：true
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 动画持续时间
+   * 类型：number | boolean
+   * 默认值：300
+   */
+  duration: {
+    type: [Number, Boolean],
+    default: 300
+  },
+  /**
+   * 是否显示遮罩
+   * 类型：boolean
+   * 默认值：true
+   */
+  modal: makeBooleanProp(true),
+  /**
+   * 设置层级
+   * 类型：number
+   * 默认值：10
+   */
+  zIndex: makeNumberProp(10),
+  /**
+   * 是否当关闭时将弹出层隐藏（display: none)
+   * 类型：boolean
+   * 默认值：true
+   */
+  hideWhenClose: makeBooleanProp(true),
+  /**
+   * 遮罩样式
+   * 类型：string
+   * 默认值：''
+   */
+  modalStyle: makeStringProp(''),
+  /**
+   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   * 类型：boolean
+   * 默认值：false
+   */
+  safeAreaInsetBottom: makeBooleanProp(false),
+  /**
+   * 弹出层是否显示
+   */
+  modelValue: makeBooleanProp(false),
+  /**
+   * 弹层内容懒渲染，触发展示时才渲染内容
+   * 类型：boolean
+   * 默认值：true
+   */
+  lazyRender: makeBooleanProp(true),
+  /**
+   * 是否锁定滚动
+   * 类型：boolean
+   * 默认值：true
+   */
+  lockScroll: makeBooleanProp(true),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   * 类型：boolean
+   * 默认值：false
+   */
+  rootPortal: makeBooleanProp(false)
+}

package/components/oxy-progress/index.scss

@@ -0,0 +1,68 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.oxy-theme-dark {
+  @include b(progress) {
+    @include e(label) {
+      color: $-dark-color3;
+    }
+  }
+}
+
+@include b(progress) {
+  width: 100%;
+  height: $-progress-height;
+  display: flex;
+  align-items: center;
+  padding: $-progress-padding;
+
+  @include e(outer) {
+    display: block;
+    position: relative;
+    flex: 1;
+    height: $-progress-height;
+    border-radius: calc($-progress-height / 2);
+    background: $-progress-bg;
+  }
+  @include e(inner) {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    border-radius: calc($-progress-height / 2);
+    background: $-progress-color;
+    transition-property: width;
+    transition-timing-function: linear;
+    font-size: $-progress-icon-fs;
+
+    @include when(danger) {
+      background: $-progress-danger-color;
+    }
+    @include when(success) {
+      background: $-progress-success-color;
+    }
+    @include when(warning) {
+      background: $-progress-warning-color;
+    }
+  }
+  @include edeep(label) {
+    width: 30px;
+    margin-left: 9px;
+    color: $-progress-label-color;
+    font-size: $-progress-label-fs;
+  }
+  @include edeep(icon) {
+    font-size: $-progress-icon-fs;
+
+    @include when(danger) {
+      color: $-progress-danger-color;
+    }
+    @include when(success) {
+      color: $-progress-success-color;
+    }
+    @include when(warning) {
+      color: $-progress-warning-color;
+    }
+  }
+}