@didaoktv/didaoui-uniapp 1.0.0

package/components/dd-checkbox/dd-checkbox.vue

@@ -0,0 +1,145 @@
+<template>
+  <view
+    class="dd-checkbox"
+    :class="[
+      `dd-checkbox--${size}`,
+      {
+        'dd-checkbox--checked': isChecked,
+        'dd-checkbox--indeterminate': indeterminate,
+        'dd-checkbox--disabled': disabled,
+      },
+    ]"
+    @click="onToggle"
+  >
+    <view class="dd-checkbox__box">
+      <view v-if="indeterminate" class="dd-checkbox__dash"></view>
+      <dd-icon v-else-if="isChecked" name="success" class="dd-checkbox__check" />
+    </view>
+    <text v-if="label || $slots.default" class="dd-checkbox__label">
+      <slot>{{ label }}</slot>
+    </text>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface Props {
+  modelValue?: boolean | any[]
+  value?: any
+  indeterminate?: boolean
+  disabled?: boolean
+  size?: 'md' | 'sm'
+  label?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  value: null,
+  indeterminate: false,
+  disabled: false,
+  size: 'md',
+  label: '',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: boolean | any[]): void
+  (e: 'change', val: boolean | any[]): void
+}>()
+
+const isChecked = computed(() => {
+  if (Array.isArray(props.modelValue)) return props.modelValue.includes(props.value)
+  return !!props.modelValue
+})
+
+function onToggle() {
+  if (props.disabled) return
+  if (Array.isArray(props.modelValue)) {
+    const arr = props.modelValue.slice()
+    const idx = arr.indexOf(props.value)
+    if (idx >= 0) arr.splice(idx, 1)
+    else arr.push(props.value)
+    emit('update:modelValue', arr)
+    emit('change', arr)
+  } else {
+    const next = !props.modelValue
+    emit('update:modelValue', next)
+    emit('change', next)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 16rpx;
+  user-select: none;
+
+  &__box {
+    @include dd-flex-center;
+    flex-shrink: 0;
+    border-radius: $dd-radius-sm;
+    border: 3rpx solid $dd-neutral-700;
+    background: transparent;
+    box-sizing: border-box;
+    @include dd-transition(all 0.2s);
+  }
+
+  &__check {
+    color: #ffffff;
+    font-size: 24rpx;
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  &__dash {
+    width: 60%;
+    height: 4rpx;
+    background: $dd-primary-500;
+    border-radius: $dd-radius-full;
+  }
+
+  &__label {
+    font-size: 28rpx;
+    color: $dd-text-primary;
+  }
+
+  &--checked .dd-checkbox__box {
+    background: $dd-gradient-primary;
+    border-color: $dd-primary-500;
+    box-shadow: $dd-shadow-glow-gold-lg;
+  }
+
+  &--indeterminate .dd-checkbox__box {
+    background: rgba($dd-primary-500, 0.1);
+    border-color: $dd-primary-500;
+  }
+
+  &--disabled {
+    opacity: 0.4;
+    @include dd-no-touch;
+  }
+}
+
+.dd-checkbox--md .dd-checkbox__box {
+  width: 40rpx;
+  height: 40rpx;
+}
+.dd-checkbox--sm {
+  .dd-checkbox__box {
+    width: 32rpx;
+    height: 32rpx;
+  }
+  .dd-checkbox__check {
+    font-size: 20rpx;
+  }
+  .dd-checkbox__label {
+    font-size: 28rpx;
+  }
+}
+</style>

package/components/dd-collapse/dd-collapse.vue

@@ -0,0 +1,63 @@
+<template>
+  <view class="dd-collapse">
+    <slot></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+
+type Val = string | number
+type Model = Val | Val[]
+
+interface Props {
+  modelValue?: Model
+  accordion?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  accordion: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: Model): void
+  (e: 'change', val: Model): void
+}>()
+
+const normalized = computed<Val[]>(() => {
+  const v = props.modelValue
+  if (v === '' || v === null || v === undefined) return []
+  return Array.isArray(v) ? [...v] : [v as Val]
+})
+
+function isExpanded(name: Val): boolean {
+  return normalized.value.includes(name)
+}
+
+function toggle(name: Val) {
+  if (props.accordion) {
+    const next: Model = isExpanded(name) ? '' : name
+    emit('update:modelValue', next)
+    emit('change', next)
+  } else {
+    const set = new Set(normalized.value)
+    if (set.has(name)) set.delete(name)
+    else set.add(name)
+    const next = Array.from(set)
+    emit('update:modelValue', next)
+    emit('change', next)
+  }
+}
+
+provide('ddCollapse', { isExpanded, toggle })
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-collapse {
+  background: $dd-surface;
+}
+</style>

package/components/dd-collapse-item/dd-collapse-item.vue

@@ -0,0 +1,154 @@
+<template>
+  <view
+    class="dd-collapse-item"
+    :class="{
+      'dd-collapse-item--expanded': expanded,
+      'dd-collapse-item--disabled': disabled,
+      'dd-collapse-item--border': border,
+    }"
+  >
+    <view class="dd-collapse-item__header" @click="onToggle">
+      <text class="dd-collapse-item__title">
+        <slot name="title">{{ title }}</slot>
+      </text>
+      <text v-if="value" class="dd-collapse-item__value">{{ value }}</text>
+      <dd-icon name="arrow-down" class="dd-collapse-item__arrow" />
+    </view>
+    <view class="dd-collapse-item__wrap" :style="wrapStyle">
+      <view class="dd-collapse-item__content">
+        <slot></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, getCurrentInstance, inject, nextTick, onMounted, ref, watch } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface Props {
+  name?: string | number
+  title?: string
+  value?: string
+  disabled?: boolean
+  border?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  name: '',
+  title: '',
+  value: '',
+  disabled: false,
+  border: true,
+})
+
+const ctx = inject<any>('ddCollapse', null)
+
+const localActive = ref(false)
+const identity = computed(() => (props.name !== '' ? props.name : '__dd_ci_self__'))
+
+const expanded = computed(() => {
+  if (ctx) return ctx.isExpanded(identity.value)
+  return localActive.value
+})
+
+const contentHeight = ref(0)
+const wrapStyle = computed(() => ({
+  maxHeight: expanded.value && contentHeight.value ? contentHeight.value + 'px' : '0px',
+  opacity: expanded.value ? '1' : '0',
+}))
+
+const instance = getCurrentInstance()
+
+function measure() {
+  nextTick(() => {
+    const query = uni.createSelectorQuery().in(instance)
+    query
+      .select('.dd-collapse-item__content')
+      .boundingClientRect((rect) => {
+        const r = rect as UniApp.NodeInfo
+        if (r && r.height) contentHeight.value = r.height
+      })
+      .exec()
+  })
+}
+
+function onToggle() {
+  if (props.disabled) return
+  if (ctx) {
+    ctx.toggle(identity.value)
+  } else {
+    localActive.value = !localActive.value
+  }
+}
+
+watch(
+  () => expanded.value,
+  (val) => {
+    if (val) measure()
+  }
+)
+
+onMounted(() => {
+  if (expanded.value) measure()
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-collapse-item {
+  background: $dd-surface;
+
+  &--border {
+    @include dd-hairline-bottom($dd-border-subtle);
+  }
+
+  &--disabled {
+    opacity: 0.5;
+    @include dd-no-touch;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: $dd-space-2;
+    padding: 24rpx 32rpx;
+  }
+
+  &__title {
+    flex: 1;
+    font-size: $dd-font-size-lead;
+    color: $dd-text-primary;
+    @include dd-ellipsis(1);
+  }
+
+  &__value {
+    font-size: $dd-font-size-body;
+    color: $dd-text-tertiary;
+    @include dd-ellipsis(1);
+  }
+
+  &__arrow {
+    font-size: 28rpx;
+    color: $dd-text-tertiary;
+    @include dd-transition(transform 0.3s);
+  }
+
+  &--expanded &__arrow {
+    transform: rotate(180deg);
+  }
+
+  &__wrap {
+    overflow: hidden;
+    @include dd-transition(max-height 0.3s ease, opacity 0.3s ease);
+  }
+
+  &__content {
+    padding: 0 32rpx 24rpx;
+    font-size: $dd-font-size-body;
+    color: $dd-text-secondary;
+  }
+}
+</style>

package/components/dd-count-down/dd-count-down.vue

@@ -0,0 +1,163 @@
+<template>
+  <view class="dd-count-down">
+    <slot
+      :days="timeData.days"
+      :hours="timeData.hours"
+      :minutes="timeData.minutes"
+      :seconds="timeData.seconds"
+      :milliseconds="timeData.milliseconds"
+      :total="timeData.total"
+      :formatted="formattedText"
+    >
+      <text class="dd-count-down__text">{{ formattedText }}</text>
+    </slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+
+interface Props {
+  /** 倒计时总时长 (ms) */
+  time?: number
+  /** 格式: HH:mm:ss | DD天 HH:mm:ss | mm:ss | HH:mm:ss:SSS */
+  format?: string
+  /** 是否自动开始 */
+  autoStart?: boolean
+  /** 毫秒级精度 (30ms 节流渲染) */
+  millisecond?: boolean
+}
+
+interface TimeData {
+  days: number
+  hours: number
+  minutes: number
+  seconds: number
+  milliseconds: number
+  total: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  time: 0,
+  format: 'HH:mm:ss',
+  autoStart: true,
+  millisecond: false,
+})
+
+const emit = defineEmits<{
+  (e: 'change', data: TimeData): void
+  (e: 'finish'): void
+  (e: 'start'): void
+  (e: 'stop'): void
+}>()
+
+const remain = ref(props.time)
+// ponytail: 用 endTime + Date.now() 差值而非递减计数，避免 setInterval 漂移累积；ms 模式渲染节流到 30ms
+let endTime = 0
+let timer: ReturnType<typeof setInterval> | null = null
+let finished = false
+
+function parseTime(total: number): TimeData {
+  const t = Math.max(0, total)
+  return {
+    days: Math.floor(t / 86400000),
+    hours: Math.floor((t % 86400000) / 3600000),
+    minutes: Math.floor((t % 3600000) / 60000),
+    seconds: Math.floor((t % 60000) / 1000),
+    milliseconds: t % 1000,
+    total: t,
+  }
+}
+
+const timeData = computed<TimeData>(() => parseTime(remain.value))
+
+function pad(n: number, len = 2): string {
+  return String(n).padStart(len, '0')
+}
+
+const formattedText = computed(() => {
+  const d = timeData.value
+  return props.format
+    .replace('SSS', pad(d.milliseconds, 3))
+    .replace('DD', pad(d.days))
+    .replace('HH', pad(d.hours))
+    .replace('mm', pad(d.minutes))
+    .replace('ss', pad(d.seconds))
+})
+
+function tick() {
+  remain.value = Math.max(0, endTime - Date.now())
+  emit('change', timeData.value)
+  if (remain.value <= 0) {
+    if (!finished) {
+      finished = true
+      stop()
+      emit('finish')
+    }
+  }
+}
+
+function start() {
+  if (timer) return
+  if (remain.value <= 0) remain.value = props.time
+  endTime = Date.now() + remain.value
+  finished = false
+  emit('start')
+  tick()
+  const interval = props.millisecond ? 30 : 1000
+  timer = setInterval(tick, interval)
+}
+
+function stop() {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+    emit('stop')
+  }
+}
+
+function reset() {
+  stop()
+  remain.value = props.time
+  finished = false
+}
+
+defineExpose({ start, stop, reset })
+
+watch(
+  () => props.time,
+  (val) => {
+    remain.value = val
+    finished = false
+    if (timer) {
+      endTime = Date.now() + val
+    }
+  }
+)
+
+onMounted(() => {
+  if (props.autoStart && props.time > 0) start()
+})
+
+onUnmounted(() => {
+  stop()
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-count-down {
+  display: inline-flex;
+  align-items: center;
+}
+
+.dd-count-down__text {
+  font-size: $dd-font-size-body;
+  color: $dd-text-primary;
+  font-variant-numeric: tabular-nums;
+  font-weight: $dd-font-weight-body;
+  line-height: 1;
+}
+</style>