oxy-uni-ui 1.0.1

package/components/oxy-divider/index.scss

@@ -0,0 +1,100 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.oxy-theme-dark {
+  @include b(divider) {
+    color: $-dark-color3;
+
+    @include e(line) {
+      background: $-dark-color-gray;
+    }
+  }
+}
+
+@include b(divider) {
+  position: relative;
+  display: flex;
+  padding: $-divider-padding;
+  margin: $-divider-margin;
+  align-items: center;
+  color: $-divider-color;
+  font-size: $-divider-fs;
+
+  &::after,
+  &::before {
+    flex: 1;
+    display: block;
+    box-sizing: border-box;
+    border-style: solid;
+    border-color: $-divider-line-color;
+    border-width: $-divider-line-height 0 0;
+  }
+
+  &::before {
+    content: '';
+  }
+
+  @include m(center, left, right) {
+    &::after {
+      content: '';
+      margin-left: $-divider-content-left-margin;
+    }
+
+    &::before {
+      margin-right: $-divider-content-right-margin;
+    }
+  }
+
+  @include m(left) {
+    &::before {
+      max-width: $-divider-content-left-width;
+    }
+  }
+
+  @include m(right) {
+    &::after {
+      max-width: $-divider-content-right-width;
+    }
+  }
+
+  @include when(hairline) {
+
+    &::before,
+    &::after {
+      transform: scaleY(0.5);
+    }
+  }
+
+  @include when(dashed) {
+
+    &::before,
+    &::after {
+      border-style: dashed;
+    }
+  }
+
+  @include m(vertical) {
+    display: inline-block;
+    width: $-divider-vertical-line-width;
+    height: $-divider-vertical-height;
+    margin: $-divider-vertical-content-margin;
+    padding: 0;
+    vertical-align: middle;
+
+    &::before {
+      height: 100%;
+      border-width: 0 0 0 $-divider-vertical-line-width;
+    }
+
+    &::after {
+      display: none;
+    }
+
+    @include when(hairline) {
+      &::before {
+        transform: scaleX(0.5);
+      }
+    }
+  }
+
+}

package/components/oxy-divider/oxy-divider.vue

@@ -0,0 +1,52 @@
+<template>
+  <view :class="rootClass" :style="rootStyle">
+    <slot v-if="!vertical"></slot>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-divider',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, useSlots, type CSSProperties } from 'vue'
+import { dividerProps } from './types'
+import { objToStyle } from '../common/util'
+
+const props = defineProps(dividerProps)
+const slots = useSlots()
+
+const rootStyle = computed(() => {
+  const { color, customStyle } = props
+  const style: CSSProperties = {}
+  if (color) {
+    style.color = color
+  }
+  return `${objToStyle(style)}${customStyle}`
+})
+
+const rootClass = computed(() => {
+  const prefixCls = 'oxy-divider'
+  const classes: Record<string, boolean> = {
+    [prefixCls]: true,
+    ['is-dashed']: props.dashed,
+    ['is-hairline']: props.hairline,
+    [`${prefixCls}--vertical`]: props.vertical,
+    [`${prefixCls}--center`]: !props.vertical && props.contentPosition === 'center' && !!slots.default,
+    [`${prefixCls}--left`]: !props.vertical && props.contentPosition === 'left',
+    [`${prefixCls}--right`]: !props.vertical && props.contentPosition === 'right',
+    [props.customClass]: !!props.customClass
+  }
+  return classes
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-divider/types.ts

@@ -0,0 +1,35 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type DividerPosition = 'center' | 'left' | 'right'
+export type DividerDirection = 'horizontal' | 'vertical'
+
+export const dividerProps = {
+  ...baseProps,
+  /**
+   * 自定义颜色
+   */
+  color: String,
+  /**
+   * 内容位置，可选值为 `left` `right` `center`
+   * 默认值：`center`
+   */
+  contentPosition: makeStringProp<DividerPosition>('center'),
+  /**
+   * 是否显示为虚线
+   * 默认值：`false`
+   */
+  dashed: Boolean,
+  /**
+   * 是否为垂直分割线
+   * 默认值：`false`
+   */
+  vertical: makeBooleanProp(false),
+  /**
+   * 是否显示为 0.5px 的线
+   * 默认值：`true`
+   */
+  hairline: makeBooleanProp(true)
+}
+
+export type DividerProps = ExtractPropTypes<typeof dividerProps>

package/components/oxy-drop-menu/index.scss

@@ -0,0 +1,86 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.oxy-theme-dark {
+  @include b(drop-menu) {
+    color: $-dark-color;
+    @include e(list) {
+      background-color: $-dark-background2;
+    }
+
+    @include e(item) {
+      @include when(disabled) {
+        color: $-dark-color-gray;
+      }
+    }
+  }
+}
+
+@include b(drop-menu) {
+  box-sizing: border-box;
+  color: $-drop-menu-color;
+  font-size: $-drop-menu-fs;
+  position: relative;
+
+  @include e(list) {
+    display: flex;
+    text-align: center;
+    background-color: #fff;
+  }
+  @include e(item) {
+    flex: 1;
+    min-width: 0;
+    height: $-drop-menu-height;
+    line-height: $-drop-menu-height;
+    text-align: center;
+
+    @include when(active) {
+      font-weight: $-fw-medium;
+
+      .oxy-drop-menu__item-title::after {
+        opacity: 1;
+      }
+      :deep(.oxy-drop-menu__arrow) {
+        transform: rotate(-180deg);
+        transform-origin: center center;
+      }
+    }
+    @include when(disabled) {
+      color: $-drop-menu-disabled-color;
+    }
+  }
+
+  @include e(item-title) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
+    padding: 0 $-drop-menu-side-padding;
+    box-sizing: border-box;
+
+    &::after {
+      position: absolute;
+      content: '';
+      width: 19px;
+      height: $-drop-menu-line-height;
+      bottom: 6px;
+      left: 50%;
+      transform: translate(-50%, 0);
+      background: $-drop-menu-line-color;
+      border-radius: $-drop-menu-line-height;
+      transition: opacity .15s;
+      opacity: 0;
+    }
+  }
+
+  @include e(item-title-text) {
+    position: relative;
+    @include lineEllipsis;
+  }
+
+  @include edeep(arrow) {
+    font-size: $-drop-menu-arrow-fs;
+    margin-left: 2px;
+  }
+}

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

@@ -0,0 +1,166 @@
+<template>
+  <view :style="customStyle" :class="`oxy-drop-menu ${customClass}`" @click.stop.prevent="noop" :id="dropMenuId">
+    <oxy-overlay
+      :show="overlayVisible"
+      :duration="duration"
+      :z-index="12"
+      :custom-style="modalStyle"
+      @click="handleClickOverlay"
+      @touchmove="noop"
+      v-if="modal"
+    />
+
+    <!-- #ifdef MP-DINGTALK -->
+    <view :id="dropMenuId">
+      <!-- #endif -->
+      <view class="oxy-drop-menu__list">
+        <view
+          v-for="(child, index) in children"
+          :key="index"
+          @click="toggle(child)"
+          :class="`oxy-drop-menu__item ${child.disabled ? 'is-disabled' : ''} ${child.$.exposed!.getShowPop() ? 'is-active' : ''}`"
+        >
+          <view class="oxy-drop-menu__item-title">
+            <view class="oxy-drop-menu__item-title-text">{{ getDisplayTitle(child) }}</view>
+            <oxy-icon :name="child.icon" :size="child.iconSize" custom-class="oxy-drop-menu__arrow" />
+          </view>
+        </view>
+      </view>
+      <slot />
+      <!-- #ifdef MP-DINGTALK -->
+    </view>
+    <!-- #endif -->
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-drop-menu',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, getCurrentInstance, inject, onBeforeMount, ref, watch } from 'vue'
+import { closeOther } from '../common/clickoutside'
+import { type Queue, queueKey } from '../composables/useQueue'
+import { getRect, uuid } from '../common/util'
+import { useChildren } from '../composables/useChildren'
+import { DROP_MENU_KEY, dropMenuProps } from './types'
+import OxyOverlay from '../oxy-overlay/oxy-overlay.vue'
+
+const props = defineProps(dropMenuProps)
+const queue = inject<Queue | null>(queueKey, null)
+const dropMenuId = ref<string>(`dropMenuId${uuid()}`)
+const offset = ref<number>(0)
+const windowHeight = ref<number>(0)
+const modalStyle = computed(() => {
+  return props.direction === 'down'
+    ? `top: calc(var(--window-top) + ${offset.value}px); bottom: 0;`
+    : `top: 0; bottom: calc(var(--window-bottom) + ${offset.value}px)`
+})
+
+const { proxy } = getCurrentInstance() as any
+
+const { linkChildren, children } = useChildren(DROP_MENU_KEY)
+
+const showOverlay = computed(() => {
+  return children.some((child) => child.$.exposed!.getShowPop())
+})
+
+const overlayVisible = ref(false)
+let overlayTimer: ReturnType<typeof setTimeout> | null
+
+// 延迟关闭遮罩层，避免闪烁
+// 小程序中，即使先 fold 再 closeOther 也会有闪烁，使用延迟关闭遮罩层处理
+watch(showOverlay, (newVal) => {
+  if (overlayTimer) {
+    clearTimeout(overlayTimer)
+  }
+  if (newVal) {
+    overlayVisible.value = true
+  } else {
+    overlayTimer = setTimeout(() => {
+      overlayVisible.value = false
+      overlayTimer = null
+    }, 16)
+  }
+})
+
+linkChildren({ props, fold, offset })
+
+watch(
+  () => props.direction,
+  (newValue) => {
+    if (!['up', 'down'].includes(newValue)) {
+      // eslint-disable-next-line quotes
+      console.error("[Oxy ui] warning(oxy-drop-menu): direction must be 'up' or 'down'")
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+onBeforeMount(() => {
+  windowHeight.value = uni.getSystemInfoSync().windowHeight
+})
+
+function noop() {}
+
+function getDisplayTitle(child: any) {
+  const { title, modelValue, options, valueKey, labelKey } = child
+
+  if (title) {
+    return title
+  }
+  for (let i = 0, len = options.length; i < len; i++) {
+    if (modelValue === options[i][valueKey]) {
+      return options[i][labelKey]
+    }
+  }
+  console.error('[oxy-design] warning(oxy-drop-menu-item): no value is matched in the options option.')
+}
+
+function toggle(child: any) {
+  // 点击当前 menu, 关闭其他 menu
+  if (child && !child.disabled) {
+    if (queue && queue.closeOther) {
+      queue.closeOther(child)
+    } else {
+      closeOther(child)
+    }
+    fold(child)
+  }
+}
+
+/**
+ * 控制菜单内容是否展开
+ */
+function fold(child: any) {
+  getRect(`#${dropMenuId.value}`, false, proxy).then((rect) => {
+    if (!rect) return
+    const { top, bottom } = rect
+    if (props.direction === 'down') {
+      offset.value = Number(bottom)
+    } else {
+      offset.value = windowHeight.value - Number(top)
+    }
+    child.$.exposed!.toggle()
+  })
+}
+
+function handleClickOverlay() {
+  if (props.closeOnClickModal) {
+    // 关闭所有打开的菜单项
+    children.forEach((child) => {
+      child.$.exposed!.close()
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

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

@@ -0,0 +1,38 @@
+import { type ExtractPropTypes, type InjectionKey, type Ref } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export type DropDirection = 'up' | 'down'
+
+export type DropMenuProvide = {
+  props: Partial<DropMenuProps>
+  fold: (child?: any) => void
+  offset: Ref<number>
+}
+
+export const DROP_MENU_KEY: InjectionKey<DropMenuProvide> = Symbol('oxy-drop-menu')
+
+export const dropMenuProps = {
+  ...baseProps,
+  /**
+   * 弹框层级
+   */
+  zIndex: makeNumberProp(12),
+  /**
+   * 菜单展开方向，可选值为up 或 down
+   */
+  direction: makeStringProp<DropDirection>('down'),
+  /**
+   * 是否展示蒙层
+   */
+  modal: makeBooleanProp(true),
+  /**
+   * 是否点击蒙层时关闭
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 菜单展开收起动画时间，单位 ms
+   */
+  duration: makeNumberProp(200)
+}
+
+export type DropMenuProps = ExtractPropTypes<typeof dropMenuProps>

package/components/oxy-drop-menu-item/index.scss

@@ -0,0 +1,66 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.oxy-theme-dark {
+  @include b(drop-item) {
+    color: $-dark-color;
+
+    @include e(tip) {
+      color: $-dark-color3;
+    }
+  }
+}
+
+@include b(drop-item) {
+  position: fixed;
+  right: 0;
+  left: 0;
+  overflow: hidden;
+  font-size: $-drop-menu-item-fs;
+  color: $-drop-menu-item-color;
+  width: 100%;
+  z-index: 101;
+  
+  @include e(popup){
+    position: absolute;
+    max-height: 80%;
+  }
+
+  @include e(option) {
+    display: flex;
+    height: $-drop-menu-item-height;
+    line-height: $-drop-menu-item-height;
+    padding: 0 $-drop-menu-side-padding;
+    justify-content: space-between;
+    align-items: center;
+    transition: color .2s;
+
+    @include when(active) {
+      color: $-drop-menu-item-color-active;
+    }
+  }
+
+  @include e(title){
+    display: block;
+  }
+
+  @include e(tip) {
+    display: inline-block;
+    color: $-drop-menu-item-color-tip;
+    font-size: $-drop-menu-item-fs-tip;
+    margin-left: 2px;
+  }
+
+  @include edeep(icon){
+    display: block;
+    font-size: $-drop-menu-option-check-size;
+  }
+
+  @include e(modal) {
+    position: fixed;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.7);
+    height: 100%;
+  }
+}