oxy-uni-ui 1.0.1

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

@@ -0,0 +1,81 @@
+@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

@@ -0,0 +1,78 @@
+<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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,151 @@
+<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

@@ -0,0 +1,83 @@
+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-overlay/index.scss

@@ -0,0 +1,17 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.oxy-theme-dark {
+  @include b(overlay) {
+    background: $-overlay-bg-dark;
+  }
+}
+
+@include b(overlay) {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: $-overlay-bg;
+}

package/components/oxy-overlay/oxy-overlay.vue

@@ -0,0 +1,47 @@
+<template>
+  <oxy-transition
+    :show="show"
+    name="fade"
+    custom-class="oxy-overlay"
+    :duration="duration"
+    :custom-style="`z-index: ${zIndex}; ${customStyle}`"
+    :disable-touch-move="lockScroll"
+    @click="handleClick"
+  >
+    <slot></slot>
+  </oxy-transition>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-overlay',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyTransition from '../oxy-transition/oxy-transition.vue'
+import { overlayProps } from './types'
+// #ifdef H5
+import { useLockScroll } from '../composables/useLockScroll'
+// #endif
+
+const props = defineProps(overlayProps)
+
+const emit = defineEmits(['click'])
+
+function handleClick() {
+  emit('click')
+}
+
+// #ifdef H5
+useLockScroll(() => props.show && props.lockScroll)
+// #endif
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/oxy-overlay/types.ts

@@ -0,0 +1,25 @@
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp } from '../common/props'
+
+export const overlayProps = {
+  ...baseProps,
+  /**
+   * 是否展示遮罩层
+   */
+  show: makeBooleanProp(false),
+  /**
+   * 动画时长，单位毫秒
+   */
+  duration: {
+    type: [Object, Number, Boolean] as PropType<Record<string, number> | number | boolean>,
+    default: 300
+  },
+  /**
+   * 是否锁定滚动
+   */
+  lockScroll: makeBooleanProp(true),
+  /**
+   * 层级
+   */
+  zIndex: makeNumberProp(10)
+}

package/components/oxy-pagination/index.scss

@@ -0,0 +1,57 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.oxy-theme-dark {
+  @include b(pager) {
+    background-color: $-dark-background;
+    @include e(message) {
+      color: $-dark-color3;
+    }
+  }
+}
+
+@include b(pager) {
+  user-select: none;
+  background-color: #fff;
+
+  @include edeep(icon) {
+    font-size: $-pagination-icon-size;
+  }
+
+  @include e(content) {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: $-pagination-content-padding;
+  }
+  @include e(message) {
+    text-align: center;
+    color:$-pagination-message-color;
+    font-size: $-pagination-message-fs;
+    padding: $-pagination-message-padding;
+  }
+  @include edeep(nav) {
+    min-width: $-pagination-nav-width;
+    @include m(active){
+      color: rgba(0,0,0,0.65)      
+    }
+    @include m(disabled){
+      color: rgba(0,0,0,0.15)      
+    }
+  }
+  @include e(size){
+    flex: 1;
+    text-align: center;
+    font-size: $-pagination-nav-content-fs;
+  }
+  @include e(separator){
+    padding: $-pagination-nav-sepatator-padding;
+  }
+  @include edeep(left){
+    transform: rotate(180deg) translateY(1px);
+    display: inline-block;
+  }
+  @include e(current){
+    color: $-pagination-nav-current-color;
+  }
+}

package/components/oxy-pagination/oxy-pagination.vue

@@ -0,0 +1,110 @@
+<template>
+  <view :class="`oxy-pager ${customClass}`" :style="customStyle" v-if="!(hideIfOnePage && totalPageNum === 1)">
+    <view class="oxy-pager__content">
+      <oxy-button :plain="modelValue > 1" type="info" size="small" :disabled="modelValue <= 1" custom-class="oxy-pager__nav" @click="sub">
+        <text v-if="!showIcon">{{ prevText || translate('prev') }}</text>
+        <oxy-icon
+          v-else
+          :custom-class="`oxy-pager__left oxy-pager__icon ${modelValue <= 1 ? 'oxy-pager__nav--disabled' : 'oxy-pager__nav--active'}`"
+          name="arrow-right"
+        ></oxy-icon>
+      </oxy-button>
+      <view class="oxy-pager__size">
+        <text class="oxy-pager__current">{{ modelValue }}</text>
+        <text class="oxy-pager__separator">/</text>
+        <text>{{ totalPageNum }}</text>
+      </view>
+      <oxy-button
+        :plain="modelValue < totalPageNum"
+        type="info"
+        size="small"
+        :disabled="modelValue >= totalPageNum"
+        custom-class="oxy-pager__nav"
+        @click="add"
+      >
+        <text v-if="!showIcon">{{ nextText || translate('next') }}</text>
+        <oxy-icon
+          v-else
+          :custom-class="`oxy-pager__icon ${modelValue >= totalPageNum ? 'oxy-pager__nav--disabled' : 'oxy-pager__nav--active'}`"
+          name="arrow-right"
+        ></oxy-icon>
+      </oxy-button>
+    </view>
+    <view class="oxy-pager__message" v-if="showMessage">
+      <text>{{ translate('page', modelValue) }}，</text>
+      <text v-if="total">{{ translate('total', total) }}，</text>
+      <text>{{ translate('size', pageSize) }}</text>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-pagination',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import OxyButton from '../oxy-button/oxy-button.vue'
+import { ref, watch } from 'vue'
+import { useTranslate } from '../composables/useTranslate'
+import { paginationProps } from './types'
+
+const { translate } = useTranslate('pagination')
+
+const props = defineProps(paginationProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const totalPageNum = ref<number>(0) // 总页数
+
+watch(
+  () => props.totalPage,
+  (newValue) => {
+    if (!totalPageNum.value && newValue) {
+      totalPageNum.value = newValue
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  () => props.total,
+  () => {
+    updateTotalPage()
+  },
+  { immediate: true, deep: true }
+)
+
+function add() {
+  const { modelValue } = props
+  if (modelValue > totalPageNum.value - 1) {
+    return
+  }
+  emit('change', { value: modelValue + 1 })
+  emit('update:modelValue', modelValue + 1)
+}
+
+function sub() {
+  const { modelValue } = props
+  if (modelValue < 2) {
+    return
+  }
+  emit('change', { value: modelValue - 1 })
+  emit('update:modelValue', modelValue - 1)
+}
+
+function updateTotalPage() {
+  const { total, pageSize } = props
+  totalPageNum.value = Math.ceil(total / pageSize)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>