oxy-uni-ui 1.2.3 → 2.0.0

package/components/oxy-number-keyboard/index.scss

@@ -1,78 +0,0 @@
-@import "./../common/abstracts/_mixin.scss";
-@import "./../common/abstracts/variable.scss";
-
-.oxy-theme-dark {
-  @include b(number-keyboard) {
-    background: $-dark-background5;
-
-    @include e(header){
-      color: $-dark-color;
-    }
-  }
-}
-
-@include b(number-keyboard) {
-  width: 100%;
-  background: $-number-keyboard-background;
-  color: $-color-black;
-  user-select: none;
-
-  @include m(with-title) {
-    border-radius: 20px 20px 0 0;
-  }
-
-  @include e(header) {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: content-box;
-    height: $-number-keyboard-title-height;
-    padding-top: 6px;
-    color: $-number-keyboard-title-color;
-    font-size: $-number-keyboard-title-font-size;
-  }
-
-  @include e(title) {
-    display: inline-block;
-    font-weight: normal;
-
-    &-left {
-      position: absolute;
-      left: 0;
-    }
-  }
-
-  @include e(body) {
-    display: flex;
-    padding: 6px 0 0 6px;
-  }
-
-  @include e(keys) {
-    display: flex;
-    flex: 3;
-    flex-wrap: wrap;
-  }
-
-  @include e(close) {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    right: 0;
-    height: 100%;
-    padding: $-number-keyboard-close-padding;
-    color: $-number-keyboard-close-color;
-    font-size: $-number-keyboard-close-font-size;
-    background-color: transparent;
-    border: none;
-    @include m(hover){
-      opacity: 0.6; 
-    }
-  }
-
-  @include e(sidebar) {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-  }
-}

package/components/oxy-number-keyboard/key/index.scss

@@ -1,81 +0,0 @@
-@import "./../../common/abstracts/_mixin.scss";
-@import "./../../common/abstracts/variable.scss";
-
-.oxy-theme-dark {
-  @include b(key) {
-    background: $-dark-background2;
-    color: $-dark-color;
-
-    &:active {
-      background-color: $-dark-background4;
-    }
-
-    @include m(active) {
-      background-color: $-dark-background4;
-    }
-
-  }
-}
-
-.oxy-key-wrapper {
-  position: relative;
-  flex: 1;
-  flex-basis: 33%;
-  box-sizing: border-box;
-  padding: 0 6px 6px 0;
-
-  @include m(wider) {
-    flex-basis: 66%;
-  }
-}
-
-@include b(key) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: $-number-keyboard-key-height;
-  font-size: $-number-keyboard-key-font-size;
-  line-height: 1.5;
-  background: $-number-keyboard-key-background;
-  border-radius: $-number-keyboard-key-border-radius;
-
-  &:active {
-    background-color: $-number-keyboard-key-active-color;
-  }
-
-  @include m(large) {
-    position: absolute;
-    top: 0;
-    right: 6px;
-    bottom: 6px;
-    left: 0;
-    height: auto;
-  }
-
-  @include m(delete, close) {
-    font-size: $-number-keyboard-delete-font-size;
-  }
-
-  @include m(active) {
-    background-color: $-number-keyboard-key-active-color;
-  }
-
-  @include m(close) {
-    color: $-number-keyboard-button-text-color;
-    background: $-number-keyboard-button-background;
-
-    &:active {
-      background: $-number-keyboard-button-background;
-      opacity: $-number-keyboard-button-active-opacity;
-    }
-  }
-
-  @include edeep(loading-icon) {
-    color: $-number-keyboard-button-text-color;
-  }
-
-  @include edeep(icon) {
-    font-size: $-number-keyboard-icon-size;
-  }
-
-}

package/components/oxy-number-keyboard/key/index.vue

@@ -1,78 +0,0 @@
-<template>
-  <view
-    :class="`oxy-key-wrapper ${wider ? 'oxy-key-wrapper--wider' : ''}`"
-    @touchstart="onTouchStart"
-    @touchmove="onTouchMove"
-    @touchend="onTouchEnd"
-  >
-    <view :class="keyClass">
-      <oxy-loading custom-class="oxy-key__loading-icon" v-if="props.loading" />
-      <template v-if="type === 'delete'">
-        <template v-if="text">
-          {{ text }}
-        </template>
-        <oxy-icon v-else custom-class="oxy-key__icon" name="keyboard-delete" size="22px"></oxy-icon>
-      </template>
-      <template v-else-if="type === 'extra'">
-        <template v-if="text">
-          {{ text }}
-        </template>
-        <oxy-icon v-else custom-class="oxy-key__icon" name="keyboard-collapse" size="22px"></oxy-icon>
-      </template>
-      <template v-else>{{ text }}</template>
-    </view>
-  </view>
-</template>
-<script lang="ts">
-export default {
-  name: 'oxy-key',
-  options: {
-    virtualHost: true,
-    addGlobalClass: true,
-    styleIsolation: 'shared'
-  }
-}
-</script>
-
-<script lang="ts" setup>
-import OxyLoading from '../../oxy-loading/oxy-loading.vue'
-import OxyIcon from '../../oxy-icon/oxy-icon.vue'
-import { computed, ref } from 'vue'
-import { useTouch } from '../../composables/useTouch'
-import { keyProps } from './types'
-
-const props = defineProps(keyProps)
-const emit = defineEmits(['press'])
-
-const touch = useTouch()
-const active = ref<boolean>(false)
-
-const keyClass = computed(() => {
-  return `oxy-key ${props.large ? 'oxy-key--large' : ''} ${props.type === 'delete' ? 'oxy-key--delete' : ''} ${
-    props.type === 'close' ? 'oxy-key--close' : ''
-  }`
-})
-
-function onTouchStart(event: TouchEvent) {
-  touch.touchStart(event)
-  active.value = true
-}
-
-function onTouchMove(event: TouchEvent) {
-  touch.touchMove(event)
-  if (touch.direction.value) {
-    active.value = false
-  }
-}
-
-function onTouchEnd() {
-  if (active.value) {
-    active.value = false
-    emit('press', props.text, props.type)
-  }
-}
-</script>
-
-<style lang="scss">
-@import './index.scss';
-</style>

package/components/oxy-number-keyboard/key/types.ts

@@ -1,11 +0,0 @@
-import { makeBooleanProp, makeNumericProp, makeStringProp } from '../../common/props'
-
-export type NumberKeyType = '' | 'delete' | 'extra' | 'close'
-
-export const keyProps = {
-  type: makeStringProp<NumberKeyType>(''),
-  text: makeNumericProp(''),
-  wider: makeBooleanProp(false),
-  large: makeBooleanProp(false),
-  loading: makeBooleanProp(false)
-}

package/components/oxy-number-keyboard/oxy-number-keyboard.vue

@@ -1,151 +0,0 @@
-<template>
-  <oxy-popup
-    v-model="show"
-    position="bottom"
-    :z-index="zIndex"
-    :safe-area-inset-bottom="safeAreaInsetBottom"
-    :modal-style="modal ? '' : 'opacity: 0;'"
-    :modal="hideOnClickOutside"
-    :lockScroll="lockScroll"
-    :root-portal="rootPortal"
-    @click-modal="handleClose"
-  >
-    <view :class="`oxy-number-keyboard ${customClass}`" :style="customStyle">
-      <view class="oxy-number-keyboard__header" v-if="showHeader">
-        <slot name="title" v-if="showTitle">
-          <text class="oxy-number-keyboard__title">{{ title }}</text>
-        </slot>
-        <view class="oxy-number-keyboard__close" hover-class="oxy-number-keyboard__close--hover" v-if="showClose" @click="handleClose">
-          <text>{{ closeText }}</text>
-        </view>
-      </view>
-      <view class="oxy-number-keyboard__body">
-        <view class="oxy-number-keyboard__keys">
-          <oxy-key v-for="key in keys" :key="key.text" :text="key.text" :type="key.type" :wider="key.wider" @press="handlePress"></oxy-key>
-        </view>
-        <view class="oxy-number-keyboard__sidebar" v-if="mode === 'custom'">
-          <oxy-key v-if="showDeleteKey" large :text="deleteText" type="delete" @press="handlePress"></oxy-key>
-          <oxy-key large :text="closeText" type="close" :loading="closeButtonLoading" @press="handlePress"></oxy-key>
-        </view>
-      </view>
-    </view>
-  </oxy-popup>
-</template>
-<script lang="ts">
-export default {
-  name: 'oxy-number-keyboard',
-  options: {
-    virtualHost: true,
-    addGlobalClass: true,
-    styleIsolation: 'shared'
-  }
-}
-</script>
-
-<script lang="ts" setup>
-import OxyPopup from '../oxy-popup/oxy-popup.vue'
-import { computed, ref, useSlots, watch } from 'vue'
-import OxyKey from './key/index.vue'
-import { numberKeyboardProps, type Key } from './types'
-import type { NumberKeyType } from './key/types'
-
-const props = defineProps(numberKeyboardProps)
-const emit = defineEmits(['update:visible', 'input', 'close', 'delete', 'update:modelValue'])
-const slots = useSlots()
-const show = ref(props.visible)
-watch(
-  () => props.visible,
-  (newValue) => {
-    show.value = newValue
-  }
-)
-
-const keys = computed(() => (props.mode === 'custom' ? genCustomKeys() : genDefaultKeys()))
-
-const showClose = computed(() => {
-  return props.closeText && props.mode === 'default'
-})
-
-const showTitle = computed(() => {
-  return !!props.title || !!slots.title
-})
-
-const showHeader = computed(() => {
-  return showTitle.value || showClose.value
-})
-
-/**
- * 随机打乱数组的顺序
- * @param arr 要打乱顺序的数组
- * @returns 打乱顺序后的数组
- */
-function shuffleArray<T>(arr: T[]): T[] {
-  const newArr = [...arr]
-  for (let i = newArr.length - 1; i > 0; i--) {
-    // 生成一个随机索引 j，范围是 [0, i]
-    const j = Math.floor(Math.random() * (i + 1))
-
-    // 交换索引 i 和 j 处的元素
-    ;[newArr[i], newArr[j]] = [newArr[j], newArr[i]]
-  }
-  return newArr
-}
-function genBasicKeys(): Key[] {
-  const keys = Array.from({ length: 9 }, (_, i) => ({ text: i + 1 }))
-
-  // 如果需要随机顺序，则调用 shuffleArray 方法打乱数组顺序
-  return props.randomKeyOrder ? shuffleArray(keys) : keys
-}
-
-function genDefaultKeys(): Key[] {
-  return [
-    ...genBasicKeys(),
-    { text: props.extraKey as string, type: 'extra' },
-    { text: 0 },
-    {
-      // 根据条件是否显示删除键的文本和类型
-      text: props.showDeleteKey ? props.deleteText : '',
-      type: props.showDeleteKey ? 'delete' : ''
-    }
-  ]
-}
-
-function genCustomKeys(): Key[] {
-  const keys = genBasicKeys()
-  const extraKeys = Array.isArray(props.extraKey) ? props.extraKey : [props.extraKey]
-  if (extraKeys.length === 1) {
-    // 如果只有一个额外按键，则添加一个宽度较大的数字0和一个额外按键
-    keys.push({ text: 0, wider: true }, { text: extraKeys[0], type: 'extra' })
-  } else if (extraKeys.length === 2) {
-    // 如果有两个额外按键，则添加两个额外按键和一个数字0
-    keys.push({ text: extraKeys[0], type: 'extra' }, { text: 0 }, { text: extraKeys[1], type: 'extra' })
-  }
-
-  return keys
-}
-
-const handleClose = () => {
-  emit('close')
-  emit('update:visible', false)
-}
-
-const handlePress = (text: string, type: NumberKeyType) => {
-  if (text === '' && type === 'extra') {
-    return handleClose()
-  }
-  const value = props.modelValue
-  if (type === 'delete') {
-    emit('delete')
-    emit('update:modelValue', value.slice(0, value.length - 1))
-  } else if (type === 'close') {
-    handleClose()
-  } else if (value.length < +props.maxlength) {
-    emit('input', text)
-    emit('update:modelValue', value + text)
-  }
-}
-</script>
-
-<style lang="scss">
-@import './index.scss';
-</style>

package/components/oxy-number-keyboard/types.ts

@@ -1,83 +0,0 @@
-import type { PropType } from 'vue'
-import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
-
-export type KeyboardMode = 'default' | 'custom'
-export type KeyType = '' | 'delete' | 'extra' | 'close'
-
-export interface Key {
-  text?: number | string // key文本
-  type?: KeyType // key的类型
-  wider?: boolean // 是否占2个key的宽度
-}
-
-export const numberKeyboardProps = {
-  ...baseProps,
-  /**
-   * 是否可见
-   */
-  visible: makeBooleanProp(false),
-  /**
-   * 绑定的值
-   */
-  modelValue: makeStringProp(''),
-  /**
-   * 标题
-   */
-  title: String,
-  /**
-   * 键盘模式
-   */
-  mode: makeStringProp<KeyboardMode>('default'),
-  /**
-   * 层级
-   */
-  zIndex: makeNumberProp(100),
-  /**
-   * 最大长度
-   */
-  maxlength: makeNumberProp(Infinity),
-  /**
-   * 是否显示删除键
-   */
-  showDeleteKey: makeBooleanProp(true),
-  /**
-   * 是否随机键盘按键顺序
-   */
-  randomKeyOrder: makeBooleanProp(false),
-  /**
-   * 确认按钮文本
-   */
-  closeText: String,
-  /**
-   * 删除按钮文本
-   */
-  deleteText: String,
-  /**
-   * 关闭按钮是否显示加载状态
-   */
-  closeButtonLoading: makeBooleanProp(false),
-  /**
-   * 是否显示蒙层
-   */
-  modal: makeBooleanProp(false),
-  /**
-   * 是否在点击外部时收起键盘
-   */
-  hideOnClickOutside: makeBooleanProp(true),
-  /**
-   * 是否锁定滚动
-   */
-  lockScroll: makeBooleanProp(true),
-  /**
-   * 是否在底部安全区域内
-   */
-  safeAreaInsetBottom: makeBooleanProp(true),
-  /**
-   * 额外按键
-   */
-  extraKey: [String, Array] as PropType<string | Array<string>>,
-  /**
-   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
-   */
-  rootPortal: makeBooleanProp(false)
-}

package/components/oxy-tree/components/tree-node-content.vue

@@ -1,72 +0,0 @@
-<template>
-  <view class="oxy-tree-node-content" :style="getNodeStyle()" :class="computedClass" @click="handleNodeClick">
-    <oxy-icon @click.stop="toggleExpand" name="fill-arrow-down" class="oxy-tree-node-icon" size="22px"></oxy-icon>
-    <oxy-checkbox
-      v-if="treeProps?.showCheckbox"
-      :modelValue="node.checked"
-      :disabled="node.disabled"
-      :indeterminate="node.immediate"
-      shape="square"
-    ></oxy-checkbox>
-    <view class="oxy-tree-node">
-      <slot :node="node" :data="node.data">
-        {{ node.label }}
-      </slot>
-    </view>
-  </view>
-</template>
-
-<script lang="ts">
-export default {
-  name: 'oxy-tree-node-content'
-}
-</script>
-
-<script lang="ts" setup>
-import { computed, toRefs, type Ref } from 'vue'
-import type { TextProps, TreeNode } from '../types'
-import { inject } from 'vue'
-// 获取组件的 props 和 emit 函数
-const emit = defineEmits<{
-  (e: 'click', node: TreeNode): void
-  (e: 'toggle-expand', node: TreeNode, flag: boolean): void
-  (e: 'toggle-checked', node: TreeNode, flag: boolean, isClick: boolean): void
-}>()
-
-const props = defineProps<{
-  node: TreeNode
-}>()
-const treeProps = inject<TextProps>('treeProps')
-const currentNode = inject<Ref<TreeNode | undefined>>('currentNode')
-
-function getNodeStyle() {
-  return {
-    paddingLeft: `${(props.node.level - 1) * (treeProps?.indent || 16)}px`
-  }
-}
-
-function toggleExpand() {
-  emit('toggle-expand', props.node, !props.node.expanded)
-}
-
-const computedClass = computed(() => {
-  const currentValue = currentNode?.value
-  return {
-    expanded: props.node.expanded,
-    checked: props.node.checked,
-    'is-leaf': props.node.isLeaf,
-    immediate: props.node.immediate,
-    'is-current': currentValue === props.node,
-    'is-disabled': props.node.disabled
-  }
-})
-
-const handleNodeClick = () => {
-  emit('click', props.node)
-  emit('toggle-checked', props.node, !props.node.checked, true)
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../index.scss';
-</style>

package/components/oxy-tree/index.ts

@@ -1,51 +0,0 @@
-import type { TextProps, RawTreeNode } from './types'
-
-export const useTreeMethods = (props: TextProps) => {
-  function getDisabled(node: RawTreeNode): boolean {
-    return node.disabled ?? false
-  }
-
-  function getChildren(node: RawTreeNode): RawTreeNode[] {
-    return node[props.childrenKey] ?? []
-  }
-
-  function getLabel(node: RawTreeNode): string {
-    return node[props.labelKey] ?? ''
-  }
-
-  function getKey(node: RawTreeNode | undefined): string {
-    if (!node) {
-      return ''
-    }
-    return (node[props.valueKey] ?? '') as string
-  }
-
-  return {
-    getDisabled,
-    getChildren,
-    getLabel,
-    getKey
-  }
-}
-/**
- * 判断两个 Set 中的元素是否完全相同（不考虑顺序）
- * @param {Set} setA - 第一个 Set
- * @param {Set} setB - 第二个 Set
- * @returns {boolean} 两个 Set 是否相同
- */
-export function isSetsEqual(setA: Set<any>, setB: Set<any>) {
-  // 步骤1：如果大小不同，直接返回 false
-  if (setA.size !== setB.size) {
-    return false
-  }
-
-  // 步骤2：遍历 setA 的所有元素，检查 setB 是否都包含
-  for (const item of setA) {
-    if (!setB.has(item)) {
-      return false // 有元素不匹配，返回 false
-    }
-  }
-
-  // 所有元素匹配，返回 true
-  return true
-}