@atooyu/uxto-ui 1.0.0

package/src/components/u-popup/u-popup.vue

@@ -0,0 +1,257 @@
+<template>
+  <view class="u-popup" :class="popupClass" @touchmove.stop.prevent>
+    <view
+      v-if="visible"
+      class="u-popup__overlay"
+      :class="{ 'u-popup__overlay--visible': overlayVisible }"
+      @click="handleOverlayClick"
+    />
+    <view v-if="visible" class="u-popup__content" :class="contentClass" :style="contentStyle">
+      <view v-if="closeable" class="u-popup__close" @click="handleClose">
+        <text class="u-popup__close-icon">✕</text>
+      </view>
+      <slot />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+type PopupPosition = 'top' | 'bottom' | 'left' | 'right' | 'center'
+
+interface Props {
+  visible?: boolean
+  position?: PopupPosition
+  overlay?: boolean
+  overlayClass?: string
+  closeable?: boolean
+  closeOnClickOverlay?: boolean
+  safeArea?: boolean
+  round?: boolean
+  duration?: number
+  zIndex?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  position: 'bottom',
+  overlay: true,
+  overlayClass: '',
+  closeable: false,
+  closeOnClickOverlay: true,
+  safeArea: true,
+  round: false,
+  duration: 300,
+  zIndex: 1000
+})
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  open: []
+  close: []
+}>()
+
+const overlayVisible = ref(false)
+const contentVisible = ref(false)
+
+let timer: ReturnType<typeof setTimeout> | null = null
+
+const popupClass = computed(() => [
+  {
+    'u-popup--safe-area': props.safeArea
+  }
+])
+
+const contentClass = computed(() => [
+  `u-popup__content--${props.position}`,
+  {
+    'u-popup__content--round': props.round,
+    'u-popup__content--visible': contentVisible.value
+  }
+])
+
+const contentStyle = computed(() => {
+  const style: Record<string, string> = {}
+  const positions: Record<string, string> = {
+    top: 'top: 0; left: 0; right: 0;',
+    bottom: 'bottom: 0; left: 0; right: 0;',
+    left: 'left: 0; top: 0; bottom: 0;',
+    right: 'right: 0; top: 0; bottom: 0;',
+    center: 'top: 50%; left: 50%;'
+  }
+
+  style.zIndex = String(props.zIndex + 1)
+
+  if (props.position === 'center') {
+    style.transitionDuration = `${props.duration}ms`
+  }
+
+  return style
+})
+
+watch(() => props.visible, (val) => {
+  if (val) {
+    overlayVisible.value = true
+    timer = setTimeout(() => {
+      contentVisible.value = true
+      emit('open')
+    }, 50)
+  } else {
+    contentVisible.value = false
+    timer = setTimeout(() => {
+      overlayVisible.value = false
+      emit('close')
+    }, props.duration)
+  }
+})
+
+const handleOverlayClick = () => {
+  if (props.closeOnClickOverlay) {
+    handleClose()
+  }
+}
+
+const handleClose = () => {
+  emit('update:visible', false)
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  pointer-events: none;
+
+  &--safe-area {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+    /* 鴻蒙兼容 */
+    padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
+  }
+
+  &__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    opacity: 0;
+    transition: opacity 0.3s;
+    pointer-events: auto;
+
+    &--visible {
+      opacity: 1;
+    }
+  }
+
+  &__content {
+    position: absolute;
+    background-color: $--bg-color-2;
+    transition: transform 0.3s ease-out;
+    pointer-events: auto;
+    overflow: hidden;
+
+    &--top {
+      transform: translateY(-100%);
+
+      &--visible {
+        transform: translateY(0);
+      }
+
+      &--round {
+        border-radius: 0 0 $--radius-lg $--radius-lg;
+      }
+    }
+
+    &--bottom {
+      transform: translateY(100%);
+
+      &--visible {
+        transform: translateY(0);
+      }
+
+      &--round {
+        border-radius: $--radius-lg $--radius-lg 0 0;
+      }
+    }
+
+    &--left {
+      width: 80%;
+      height: 100%;
+      transform: translateX(-100%);
+
+      &--visible {
+        transform: translateX(0);
+      }
+
+      &--round {
+        border-radius: 0 $--radius-lg $--radius-lg 0;
+      }
+    }
+
+    &--right {
+      width: 80%;
+      height: 100%;
+      transform: translateX(100%);
+
+      &--visible {
+        transform: translateX(0);
+      }
+
+      &--round {
+        border-radius: $--radius-lg 0 0 $--radius-lg;
+      }
+    }
+
+    &--center {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0.9);
+      opacity: 0;
+      min-width: 280px;
+      border-radius: $--radius-lg;
+
+      &--visible {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 1;
+      }
+
+      &--round {
+        border-radius: $--radius-lg;
+      }
+    }
+  }
+
+  &__close {
+    position: absolute;
+    top: $--spacing-base;
+    right: $--spacing-base;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+
+    &-icon {
+      font-size: 18px;
+      color: $--text-color-3;
+    }
+  }
+}
+</style>

package/src/components/u-radio/u-radio.vue

@@ -0,0 +1,159 @@
+<template>
+  <view class="u-radio" :class="radioClass" @click="handleClick">
+    <view class="u-radio__icon" :class="iconClass" :style="iconStyle">
+      <view v-if="checked" class="u-radio__dot" />
+    </view>
+    <view v-if="label || $slots.default" class="u-radio__label">
+      <slot>{{ label }}</slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
+
+interface RadioGroupContext {
+  modelValue: Ref<any>
+  disabled: ComputedRef<boolean>
+  select: (value: any) => void
+}
+
+interface Props {
+  value?: any
+  label?: string
+  disabled?: boolean
+  checkedColor?: string
+  iconSize?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: '',
+  label: '',
+  disabled: false,
+  checkedColor: '',
+  iconSize: 20
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+  change: [value: any]
+}>()
+
+const group = inject<RadioGroupContext | null>('u-radio-group', null)
+
+const checked = computed(() => {
+  if (group) {
+    return group.modelValue.value === props.value
+  }
+  return false
+})
+
+const isDisabled = computed(() => {
+  if (group) {
+    return group.disabled.value || props.disabled
+  }
+  return props.disabled
+})
+
+const radioClass = computed(() => [
+  {
+    'u-radio--disabled': isDisabled.value,
+    'u-radio--checked': checked.value
+  }
+])
+
+const iconClass = computed(() => [
+  {
+    'u-radio__icon--checked': checked.value,
+    'u-radio__icon--disabled': isDisabled.value
+  }
+])
+
+const iconStyle = computed(() => {
+  const style: Record<string, string> = {}
+  style.width = `${props.iconSize}px`
+  style.height = `${props.iconSize}px`
+
+  if (checked.value && props.checkedColor) {
+    style.borderColor = props.checkedColor
+  }
+
+  return style
+})
+
+const handleClick = () => {
+  if (isDisabled.value) return
+
+  if (group) {
+    group.select(props.value)
+  } else {
+    emit('update:modelValue', props.value)
+    emit('change', props.value)
+  }
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-radio {
+  display: inline-flex;
+  align-items: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  &--disabled {
+    opacity: 0.5;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid $--border-color;
+    background-color: $--bg-color-2;
+    border-radius: 50%;
+    transition: all 0.2s;
+    flex-shrink: 0;
+
+    &--checked {
+      border-color: $--color-primary;
+      border-width: 6px;
+      background-color: $--bg-color-2;
+    }
+
+    &--disabled {
+      background-color: $--bg-color;
+      border-color: $--border-color;
+    }
+  }
+
+  &__dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: $--color-primary;
+  }
+
+  &__label {
+    margin-left: $--spacing-sm;
+    font-size: $--font-size-base;
+    color: $--text-color;
+    line-height: 1.5;
+  }
+
+  &--disabled &__label {
+    color: $--text-color-3;
+  }
+}
+</style>

package/src/components/u-radio-group/u-radio-group.vue

@@ -0,0 +1,61 @@
+<template>
+  <view class="u-radio-group">
+    <slot />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, provide, ref, watch } from 'vue'
+
+interface Props {
+  modelValue?: any
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  disabled: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+  change: [value: any]
+}>()
+
+const innerValue = ref(props.modelValue)
+
+watch(() => props.modelValue, (val) => {
+  innerValue.value = val
+})
+
+const select = (value: any) => {
+  if (innerValue.value === value) return
+
+  innerValue.value = value
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+
+provide('u-radio-group', {
+  modelValue: innerValue,
+  disabled: computed(() => props.disabled),
+  select
+})
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $--spacing-base;
+}
+</style>

package/src/components/u-rate/u-rate.vue

@@ -0,0 +1,187 @@
+<template>
+  <view
+    class="u-rate"
+    :class="{
+      'u-rate--disabled': disabled,
+      'u-rate--readonly': readonly
+    }"
+  >
+    <view
+      v-for="(_, index) in normalizedCount"
+      :key="index"
+      class="u-rate__item"
+      :style="itemStyle"
+      @click="handleClick(index, $event)"
+    >
+      <text class="u-rate__icon u-rate__icon--void" :style="voidStyle">★</text>
+      <view
+        class="u-rate__icon-wrapper"
+        :style="getActiveWrapperStyle(index)"
+      >
+        <text class="u-rate__icon u-rate__icon--active" :style="activeStyle">★</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type RateValue = number
+
+interface Props {
+  modelValue?: RateValue
+  count?: number
+  size?: number | string
+  color?: string
+  voidColor?: string
+  readonly?: boolean
+  disabled?: boolean
+  allowHalf?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  count: 5,
+  size: 20,
+  color: '#ee0a24',
+  voidColor: '#c8c9cc',
+  readonly: false,
+  disabled: false,
+  allowHalf: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+  change: [value: number]
+}>()
+
+const normalizedCount = computed(() => Math.max(1, Math.floor(props.count)))
+const normalizedValue = computed(() => {
+  const value = Number(props.modelValue) || 0
+  return Math.max(0, Math.min(normalizedCount.value, value))
+})
+
+const itemStyle = computed(() => ({
+  width: addUnit(props.size),
+  height: addUnit(props.size)
+}))
+
+const activeStyle = computed(() => ({
+  color: props.color,
+  fontSize: addUnit(props.size)
+}))
+
+const voidStyle = computed(() => ({
+  color: props.voidColor,
+  fontSize: addUnit(props.size)
+}))
+
+const getActiveWrapperStyle = (index: number) => {
+  const diff = normalizedValue.value - index
+  const percent = diff >= 1 ? 100 : diff > 0 ? 50 : 0
+
+  return {
+    width: `${percent}%`
+  }
+}
+
+const handleClick = (index: number, event: any) => {
+  if (props.disabled || props.readonly) {
+    return
+  }
+
+  let value = index + 1
+
+  if (props.allowHalf) {
+    // 获取触摸位置相对于元素的位置
+    const touch = event.touches?.[0] || event
+    const clientX = touch.clientX || 0
+
+    // 使用 uni.createSelectorQuery 获取元素位置
+    uni.createSelectorQuery()
+      .select('.u-rate__item')
+      .boundingClientRect((rect: any) => {
+        if (rect) {
+          const itemWidth = rect.width
+          // 计算当前点击的item位置
+          const itemLeft = rect.left + index * (itemWidth + 4) // 4是gap
+          if (clientX - itemLeft <= itemWidth / 2) {
+            value = index + 0.5
+          }
+          emit('update:modelValue', value)
+          emit('change', value)
+        } else {
+          // fallback: 直接使用整星
+          emit('update:modelValue', value)
+          emit('change', value)
+        }
+      })
+      .exec()
+  } else {
+    emit('update:modelValue', value)
+    emit('change', value)
+  }
+}
+
+function addUnit(value: string | number) {
+  return typeof value === 'number' ? `${value}px` : value
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-rate {
+  display: inline-flex;
+  align-items: center;
+  gap: $--spacing-xs;
+
+  &--disabled,
+  &--readonly {
+    .u-rate__item {
+    }
+  }
+
+  &--disabled {
+    opacity: 0.5;
+  }
+
+  &__item {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__icon {
+    line-height: 1;
+
+    &--void {
+      position: relative;
+      z-index: 1;
+    }
+
+    &--active {
+      display: block;
+    }
+  }
+
+  &__icon-wrapper {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    z-index: 2;
+    overflow: hidden;
+    transform: translateY(-50%);
+    white-space: nowrap;
+  }
+}
+</style>