oxy-uni-ui 1.0.1

package/components/oxy-drop-menu-item/oxy-drop-menu-item.vue

@@ -0,0 +1,221 @@
+<template>
+  <view
+    v-if="showWrapper"
+    :class="`oxy-drop-item  ${customClass}`"
+    :style="`pointer-events: none; z-index: ${zIndex}; ${positionStyle};${customStyle}`"
+  >
+    <oxy-popup
+      v-model="showPop"
+      :z-index="zIndex"
+      :duration="duration"
+      :position="position"
+      :custom-style="`position: absolute; pointer-events: auto; max-height: ${popupHeight ? popupHeight : '80%'}; ${customPopupStyle}`"
+      :custom-class="customPopupClass"
+      :modal="false"
+      :close-on-click-modal="false"
+      :root-portal="rootPortal"
+      @before-enter="beforeEnter"
+      @after-enter="afterEnter"
+      @before-leave="beforeLeave"
+      @after-leave="afterLeave"
+    >
+      <scroll-view v-if="options.length" :style="popupHeight ? { height: popupHeight } : ''" scroll-y scroll-with-animation :show-scrollbar="true">
+        <view
+          v-for="(item, index) in options"
+          :key="index"
+          @click="choose(index)"
+          :class="`oxy-drop-item__option ${(item[valueKey] !== '' ? item[valueKey] : item) === modelValue ? 'is-active' : ''}`"
+        >
+          <view :class="`oxy-drop-item__title ${customTitle}`">
+            <text>{{ item[labelKey] ? item[labelKey] : item }}</text>
+            <text v-if="item[tipKey]" class="oxy-drop-item__tip">{{ item[tipKey] }}</text>
+          </view>
+          <oxy-icon
+            v-if="(item[valueKey] !== '' ? item[valueKey] : item) === modelValue"
+            :name="iconName"
+            :custom-class="`oxy-drop-item__icon ${customIcon}`"
+          />
+        </view>
+      </scroll-view>
+      <slot v-else />
+    </oxy-popup>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-drop-menu-item',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyPopup from '../oxy-popup/oxy-popup.vue'
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import { computed, getCurrentInstance, inject, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
+import { pushToQueue, removeFromQueue } from '../common/clickoutside'
+import { type Queue, queueKey } from '../composables/useQueue'
+import type { PopupType } from '../oxy-popup/types'
+import { useParent } from '../composables/useParent'
+import { DROP_MENU_KEY } from '../oxy-drop-menu/types'
+import { isDef, isFunction } from '../common/util'
+import { dorpMenuItemProps, type DropMenuItemExpose } from './types'
+
+const props = defineProps(dorpMenuItemProps)
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | number): void
+  (e: 'change', event: { value: string | number; selectedItem: Record<string, any> }): void
+  (e: 'open'): void
+  (e: 'opened'): void
+  (e: 'close'): void
+  (e: 'closed'): void
+}>()
+
+const queue = inject<Queue | null>(queueKey, null)
+const showWrapper = ref<boolean>(false)
+const showPop = ref<boolean>(false)
+const position = ref<PopupType>()
+const zIndex = ref<number>(12)
+const duration = ref<number>(0)
+
+const { parent: dropMenu } = useParent(DROP_MENU_KEY)
+
+const { proxy } = getCurrentInstance() as any
+
+const positionStyle = computed(() => {
+  let style: string = ''
+  if (showWrapper.value && dropMenu) {
+    style =
+      dropMenu.props.direction === 'down'
+        ? `top: calc(var(--window-top) + ${dropMenu.offset.value}px); bottom: 0;`
+        : `top: 0; bottom: calc(var(--window-bottom) + ${dropMenu.offset.value}px)`
+  } else {
+    style = ''
+  }
+  return style
+})
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (isDef(newValue) && typeof newValue !== 'number' && typeof newValue !== 'string') {
+      console.error('[oxy-design] warning(oxy-drop-menu-item): the type of value should be a number or a string.')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+onBeforeMount(() => {
+  if (queue && queue.pushToQueue) {
+    queue.pushToQueue(proxy)
+  } else {
+    pushToQueue(proxy)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (queue && queue.removeFromQueue) {
+    queue.removeFromQueue(proxy)
+  } else {
+    removeFromQueue(proxy)
+  }
+})
+
+function getShowPop() {
+  return showPop.value
+}
+// 模拟单选操作 默认根据 value 选中操作
+function choose(index: number) {
+  if (props.disabled) return
+  const { valueKey } = props
+  const item = props.options[index]
+  const newValue = item[valueKey] !== undefined ? item[valueKey] : item
+  emit('update:modelValue', newValue)
+  emit('change', {
+    value: newValue,
+    selectedItem: item
+  })
+  close()
+}
+// 外部关闭弹出框
+function close() {
+  if (!showPop.value) {
+    return
+  }
+  if (isFunction(props.beforeToggle)) {
+    props.beforeToggle({
+      status: false,
+      resolve: (isPass: boolean) => {
+        isPass && handleClose()
+      }
+    })
+  } else {
+    handleClose()
+  }
+}
+
+function handleClose() {
+  if (showPop.value) {
+    showPop.value = false
+  }
+}
+
+function open() {
+  if (showPop.value) {
+    return
+  }
+  if (isFunction(props.beforeToggle)) {
+    props.beforeToggle({
+      status: true,
+      resolve: (isPass) => {
+        isPass && handleOpen()
+      }
+    })
+  } else {
+    handleOpen()
+  }
+}
+
+function handleOpen() {
+  showWrapper.value = true
+  showPop.value = true
+  if (dropMenu) {
+    duration.value = Number(dropMenu.props.duration)
+    position.value = dropMenu.props.direction === 'down' ? 'top' : 'bottom'
+  }
+}
+
+function toggle() {
+  if (showPop.value) {
+    close()
+  } else {
+    open()
+  }
+}
+
+function afterLeave() {
+  showWrapper.value = false
+  emit('closed')
+}
+function beforeEnter() {
+  emit('open')
+}
+function afterEnter() {
+  emit('opened')
+}
+function beforeLeave() {
+  emit('close')
+}
+
+defineExpose<DropMenuItemExpose>({ getShowPop, open, close, toggle })
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-drop-menu-item/types.ts

@@ -0,0 +1,94 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumericProp, makeStringProp, numericProp } from '../common/props'
+
+export type DropMenuItemBeforeToggleOption = {
+  // 操作状态：true 打开下拉菜单，false 关闭下拉菜单
+  status: boolean
+  // 回调函数，用于控制是否允许打开或关闭下拉菜单，true 允许打开或关闭，false 不允许打开或关闭
+  resolve: (isPass: boolean) => void
+}
+
+export type DropMenuItemBeforeToggle = (option: DropMenuItemBeforeToggleOption) => void
+
+export const dorpMenuItemProps = {
+  ...baseProps,
+  /**
+   * DropMenuItem 左侧文字样式
+   */
+  customTitle: makeStringProp(''),
+  /**
+   * DropMenuItem 右侧 icon 样式
+   */
+  customIcon: makeStringProp(''),
+  /**
+   * 当前选中项对应选中的 value
+   */
+  modelValue: [String, Number],
+  /**
+   * 列表数据，对应数据结构 [{label: '标题', value: '0', tip: '提示文字'}]
+   */
+  options: makeArrayProp<Record<string, any>>(),
+  /**
+   * 禁用菜单
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 选中的图标名称(可选名称在 oxy-icon 组件中)
+   */
+  iconName: makeStringProp('check'),
+  /**
+   * 菜单标题
+   */
+  title: String,
+  /**
+   * 菜单图标
+   */
+  icon: makeStringProp('arrow-down'),
+  /**
+   * 菜单图标大小
+   */
+  iconSize: numericProp,
+  /**
+   * 自定义点击事件
+   */
+  beforeToggle: Function as PropType<DropMenuItemBeforeToggle>,
+  /**
+   * 选项对象中，value 对应的 key
+   */
+  valueKey: makeStringProp('value'),
+  /**
+   * 选项对象中，展示的文本对应的 key
+   */
+  labelKey: makeStringProp('label'),
+  /**
+   * 选项对象中，选项说明对应的 key
+   */
+  tipKey: makeStringProp('tip'),
+  /**
+   * 自定义下拉菜单popup样式类
+   */
+  customPopupClass: makeStringProp(''),
+  /**
+   * 自定义下拉菜单popup样式
+   */
+  customPopupStyle: makeStringProp(''),
+  /**
+   * 弹出层高度  这里设置了 就取这里的
+   */
+  popupHeight: makeStringProp(''),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   */
+  rootPortal: makeBooleanProp(false)
+}
+
+export type DropMenuItemProps = ExtractPropTypes<typeof dorpMenuItemProps>
+
+export type DropMenuItemExpose = {
+  getShowPop: () => boolean
+  open: () => void
+  close: () => void
+  toggle: () => void
+}
+
+export type DropMenuItemInstance = ComponentPublicInstance<DropMenuItemProps, DropMenuItemExpose>

package/components/oxy-fab/index.scss

@@ -0,0 +1,116 @@
+@import "../common/abstracts/variable";
+@import "../common/abstracts/mixin";
+
+.oxy-theme-dark {
+  @include b(fab) {}
+}
+
+@include b(fab) {
+  position: fixed;
+  z-index: 99;
+
+  @include edeep(trigger) {
+    min-width: auto !important;
+    box-sizing: border-box;
+    width: $-fab-trigger-width !important;
+    height: $-fab-trigger-height !important;
+    border-radius: calc($-fab-trigger-height / 2) !important;
+  }
+
+  :deep() {
+    @include e(actions) {
+      position: absolute;
+      z-index: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: $-fab-actions-padding 0;
+
+      @include m(left, right) {
+        height: 100%;
+        top: 0;
+        padding: 0 $-fab-actions-padding;
+      }
+
+      @include m(left) {
+        flex-direction: row-reverse;
+        right: 100%;
+      }
+
+      @include m(right) {
+        flex-direction: row;
+        left: 100%;
+      }
+
+      @include m(top, bottom) {
+        width: 100%;
+        left: 0;
+      }
+
+      @include m(top) {
+        flex-direction: column-reverse;
+        bottom: 100%;
+      }
+
+      @include m(bottom) {
+        flex-direction: column;
+        top: 100%;
+      }
+    }
+
+    // 动画
+    @include e(transition-enter-active, transition-leave-active) {
+      transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    }
+
+
+    @include e(transition-enter) {
+      @include m(top) {
+        opacity: 0;
+        transform: translateY(40px);
+      }
+
+      @include m(bottom) {
+        opacity: 0;
+        transform: translateY(-40px);
+      }
+
+      @include m(left) {
+        opacity: 0;
+        transform: translateX(40px);
+      }
+
+      @include m(right) {
+        opacity: 0;
+        transform: translateX(-40px);
+      }
+    }
+
+    @include e(transition-leave-to) {
+      @include m(top) {
+        opacity: 0;
+        transform: translateY(40px);
+      }
+
+      @include m(bottom) {
+        opacity: 0;
+        transform: translateY(-40px);
+      }
+
+      @include m(left) {
+        opacity: 0;
+        transform: translateX(40px);
+      }
+
+      @include m(right) {
+        opacity: 0;
+        transform: translateX(-40px);
+      }
+    }
+
+  }
+
+  @include edeep(icon) {
+    font-size: $-fab-icon-fs;
+  }
+}

package/components/oxy-fab/oxy-fab.vue

@@ -0,0 +1,276 @@
+<template>
+  <view
+    @touchmove.stop.prevent="handleTouchMove"
+    @touchstart="handleTouchStart"
+    @touchend="handleTouchEnd"
+    :class="`oxy-fab ${customClass}`"
+    :style="rootStyle"
+    @click.stop=""
+  >
+    <view @click.stop="" :style="{ visibility: inited ? 'visible' : 'hidden' }" id="trigger">
+      <slot name="trigger" v-if="$slots.trigger"></slot>
+      <oxy-button v-else @click="handleClick" custom-class="oxy-fab__trigger" round :type="type" :disabled="disabled">
+        <oxy-icon custom-class="oxy-fab__icon" :name="isActive ? activeIcon : inactiveIcon"></oxy-icon>
+      </oxy-button>
+    </view>
+    <oxy-transition
+      v-if="expandable"
+      :enter-class="`oxy-fab__transition-enter--${fabDirection}`"
+      enter-active-class="oxy-fab__transition-enter-active"
+      :leave-to-class="`oxy-fab__transition-leave-to--${fabDirection}`"
+      leave-active-class="oxy-fab__transition-leave-active"
+      :custom-class="`oxy-fab__actions oxy-fab__actions--${fabDirection}`"
+      :show="isActive"
+      :duration="300"
+    >
+      <slot></slot>
+    </oxy-transition>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-fab',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyButton from '../oxy-button/oxy-button.vue'
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import OxyTransition from '../oxy-transition/oxy-transition.vue'
+import { type CSSProperties, computed, ref, watch, inject, getCurrentInstance, onBeforeUnmount, onMounted, nextTick } from 'vue'
+import { getRect, isDef, isH5, objToStyle } from '../common/util'
+import { type Queue, queueKey } from '../composables/useQueue'
+import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
+import { fabProps, type FabExpose } from './types'
+import { reactive } from 'vue'
+import { useRaf } from '../composables/useRaf'
+
+const props = defineProps(fabProps)
+const emit = defineEmits(['update:active', 'click'])
+const inited = ref<boolean>(false) // 是否初始化完成
+const isActive = ref<boolean>(false) // 是否激活状态
+const queue = inject<Queue | null>(queueKey, null)
+const { proxy } = getCurrentInstance() as any
+
+watch(
+  () => props.active,
+  (newValue) => {
+    isActive.value = newValue
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  () => isActive.value,
+  (newValue) => {
+    if (newValue) {
+      if (queue && queue.closeOther) {
+        queue.closeOther(proxy)
+      } else {
+        closeOther(proxy)
+      }
+    }
+  }
+)
+
+const fabDirection = ref(props.direction)
+
+watch(
+  () => props.direction,
+  (direction) => (fabDirection.value = direction)
+)
+
+watch(
+  () => props.position,
+  () => initPosition()
+)
+
+const top = ref<number>(0)
+const left = ref<number>(0)
+const screen = reactive({ width: 0, height: 0 })
+const fabSize = reactive({ width: 56, height: 56 })
+const bounding = reactive({
+  minTop: 0,
+  minLeft: 0,
+  maxTop: 0,
+  maxLeft: 0
+})
+
+async function getBounding() {
+  const sysInfo = uni.getSystemInfoSync()
+  try {
+    const trigerInfo = await getRect('#trigger', false, proxy)
+    fabSize.width = trigerInfo.width || 56
+    fabSize.height = trigerInfo.height || 56
+  } catch (error) {
+    console.log(error)
+  }
+
+  const { top = 16, left = 16, right = 16, bottom = 16 } = props.gap
+  screen.width = sysInfo.windowWidth
+  screen.height = isH5 ? sysInfo.windowTop + sysInfo.windowHeight : sysInfo.windowHeight
+  bounding.minTop = isH5 ? sysInfo.windowTop + top : top
+  bounding.minLeft = left
+  bounding.maxLeft = screen.width - fabSize.width - right
+  bounding.maxTop = screen.height - fabSize.height - bottom
+}
+
+function initPosition() {
+  const pos = props.position
+  const { minLeft, minTop, maxLeft, maxTop } = bounding
+  const centerY = (maxTop + minTop) / 2
+  const centerX = (maxLeft + minLeft) / 2
+
+  switch (pos) {
+    case 'left-top':
+      top.value = minTop
+      left.value = minLeft
+      break
+    case 'right-top':
+      top.value = minTop
+      left.value = maxLeft
+      break
+    case 'left-bottom':
+      top.value = maxTop
+      left.value = minLeft
+      break
+    case 'right-bottom':
+      top.value = maxTop
+      left.value = maxLeft
+      break
+    case 'left-center':
+      top.value = centerY
+      left.value = minLeft
+      break
+    case 'right-center':
+      top.value = centerY
+      left.value = maxLeft
+      break
+    case 'top-center':
+      top.value = minTop
+      left.value = centerX
+      break
+    case 'bottom-center':
+      top.value = maxTop
+      left.value = centerX
+      break
+  }
+}
+
+// 按下时坐标相对于元素的偏移量
+const touchOffset = reactive({ x: 0, y: 0 })
+const attractTransition = ref<boolean>(false)
+function handleTouchStart(e: TouchEvent) {
+  if (props.draggable === false) return
+
+  const touch = e.touches[0]
+  touchOffset.x = touch.clientX - left.value
+  touchOffset.y = touch.clientY - top.value
+  attractTransition.value = false
+}
+
+function handleTouchMove(e: TouchEvent) {
+  if (props.draggable === false) return
+
+  const touch = e.touches[0]
+  const { minLeft, minTop, maxLeft, maxTop } = bounding
+  let x = touch.clientX - touchOffset.x
+  let y = touch.clientY - touchOffset.y
+
+  if (x < minLeft) x = minLeft
+  else if (x > maxLeft) x = maxLeft
+
+  if (y < minTop) y = minTop
+  else if (y > maxTop) y = maxTop
+
+  top.value = y
+  left.value = x
+}
+
+function handleTouchEnd() {
+  if (props.draggable === false) return
+
+  const screenCenterX = screen.width / 2
+  const fabCenterX = left.value + fabSize.width / 2
+  attractTransition.value = true
+  if (fabCenterX < screenCenterX) {
+    left.value = bounding.minLeft
+    fabDirection.value = 'right'
+  } else {
+    left.value = bounding.maxLeft
+    fabDirection.value = 'left'
+  }
+}
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {
+    top: top.value + 'px',
+    left: left.value + 'px',
+    transition: attractTransition.value ? 'all ease 0.3s' : 'none'
+  }
+  if (isDef(props.zIndex)) {
+    style['z-index'] = props.zIndex
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+onMounted(() => {
+  if (queue && queue.pushToQueue) {
+    queue.pushToQueue(proxy)
+  } else {
+    pushToQueue(proxy)
+  }
+
+  const { start } = useRaf(async () => {
+    await getBounding()
+    initPosition()
+    inited.value = true
+  })
+  start()
+})
+
+onBeforeUnmount(() => {
+  if (queue && queue.removeFromQueue) {
+    queue.removeFromQueue(proxy)
+  } else {
+    removeFromQueue(proxy)
+  }
+})
+
+function handleClick() {
+  if (props.disabled) {
+    return
+  }
+  if (!props.expandable) {
+    emit('click')
+    return
+  }
+  isActive.value = !isActive.value
+  emit('update:active', isActive.value)
+}
+
+function open() {
+  isActive.value = true
+  emit('update:active', true)
+}
+
+function close() {
+  isActive.value = false
+  emit('update:active', false)
+}
+
+defineExpose<FabExpose>({
+  open,
+  close
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>