@atooyu/uxto-ui 1.0.0

package/src/components/u-datetime-picker/u-datetime-picker.vue

@@ -0,0 +1,377 @@
+<template>
+  <view v-if="visible" class="u-datetime-picker" @click="handleOverlayClick">
+    <view class="u-datetime-picker__popup" @click.stop>
+      <view class="u-datetime-picker__toolbar">
+        <text class="u-datetime-picker__action" @click="handleCancel">取消</text>
+        <text class="u-datetime-picker__title">{{ title }}</text>
+        <text class="u-datetime-picker__action u-datetime-picker__action--confirm" @click="handleConfirm">确定</text>
+      </view>
+
+      <picker-view
+        class="u-datetime-picker__view"
+        :value="indexes"
+        indicator-class="u-datetime-picker__indicator"
+        @change="handleChange"
+      >
+        <picker-view-column v-for="(column, columnIndex) in displayColumns" :key="columnIndex">
+          <view
+            v-for="option in column"
+            :key="option.value"
+            class="u-datetime-picker__option"
+          >
+            <text>{{ option.label }}</text>
+          </view>
+        </picker-view-column>
+      </picker-view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+type PickerType = 'datetime' | 'date' | 'year-month' | 'time'
+
+interface PickerOption {
+  label: string
+  value: string
+}
+
+interface DateTimeValues {
+  year: string
+  month: string
+  day: string
+  hour: string
+  minute: string
+}
+
+interface Props {
+  visible?: boolean
+  type?: PickerType
+  modelValue?: Date | string | null
+  title?: string
+  minDate?: Date
+  maxDate?: Date
+  filter?: (type: string, values: string[]) => string[]
+  formatter?: (type: string, value: string) => string
+  closeOnClickOverlay?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  type: 'datetime',
+  modelValue: null,
+  title: '时间选择',
+  minDate: () => new Date(2000, 0, 1, 0, 0),
+  maxDate: () => new Date(2035, 11, 31, 23, 59),
+  closeOnClickOverlay: false
+})
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  'update:modelValue': [value: Date | string]
+  change: [value: Date | string]
+  confirm: [value: Date | string]
+  cancel: []
+}>()
+
+const indexes = ref<number[]>([])
+const innerValues = ref<DateTimeValues>(getInitialValues())
+
+const columnTypes = computed(() => {
+  if (props.type === 'date') return ['year', 'month', 'day']
+  if (props.type === 'year-month') return ['year', 'month']
+  if (props.type === 'time') return ['hour', 'minute']
+  return ['year', 'month', 'day', 'hour', 'minute']
+})
+
+const displayColumns = computed(() => {
+  const values = innerValues.value
+  return columnTypes.value.map((type) => buildColumn(type, values))
+})
+
+watch(
+  () => props.modelValue,
+  () => {
+    innerValues.value = getInitialValues()
+    indexes.value = getIndexesByValues()
+  },
+  { immediate: true }
+)
+
+watch(
+  displayColumns,
+  () => {
+    alignValuesWithColumns()
+    indexes.value = getIndexesByValues()
+  },
+  { deep: true }
+)
+
+const currentValue = computed(() => formatOutput(innerValues.value))
+
+const handleChange = (event: any) => {
+  const nextIndexes = event.detail.value as number[]
+  const nextValues = { ...innerValues.value }
+
+  columnTypes.value.forEach((type, index) => {
+    nextValues[type as keyof DateTimeValues] = displayColumns.value[index][nextIndexes[index] || 0]?.value || nextValues[type as keyof DateTimeValues]
+  })
+
+  innerValues.value = fixValues(nextValues)
+  indexes.value = getIndexesByValues()
+  emit('update:modelValue', currentValue.value)
+  emit('change', currentValue.value)
+}
+
+const handleCancel = () => {
+  emit('update:visible', false)
+  emit('cancel')
+}
+
+const handleConfirm = () => {
+  emit('update:visible', false)
+  emit('confirm', currentValue.value)
+}
+
+const handleOverlayClick = () => {
+  if (props.closeOnClickOverlay) {
+    emit('update:visible', false)
+    emit('cancel')
+  }
+}
+
+function getInitialValues(): DateTimeValues {
+  const date = normalizeModelValue(props.modelValue)
+  return {
+    year: String(date.getFullYear()),
+    month: pad(date.getMonth() + 1),
+    day: pad(date.getDate()),
+    hour: pad(date.getHours()),
+    minute: pad(date.getMinutes())
+  }
+}
+
+function normalizeModelValue(value: Date | string | null | undefined) {
+  if (props.type === 'time' && typeof value === 'string' && value.includes(':')) {
+    const [hour = '00', minute = '00'] = value.split(':')
+    const date = new Date(props.minDate)
+    date.setHours(Number(hour), Number(minute), 0, 0)
+    return clampDate(date)
+  }
+
+  const date = value instanceof Date ? new Date(value) : value ? new Date(value) : new Date()
+  return clampDate(date)
+}
+
+function clampDate(date: Date) {
+  const time = date.getTime()
+  const minTime = props.minDate.getTime()
+  const maxTime = props.maxDate.getTime()
+
+  if (time < minTime) return new Date(props.minDate)
+  if (time > maxTime) return new Date(props.maxDate)
+  return date
+}
+
+function buildColumn(type: string, values: DateTimeValues) {
+  let options: string[] = []
+
+  if (type === 'year') {
+    for (let year = props.minDate.getFullYear(); year <= props.maxDate.getFullYear(); year += 1) {
+      options.push(String(year))
+    }
+  }
+
+  if (type === 'month') {
+    const year = Number(values.year)
+    const start = year === props.minDate.getFullYear() ? props.minDate.getMonth() + 1 : 1
+    const end = year === props.maxDate.getFullYear() ? props.maxDate.getMonth() + 1 : 12
+    for (let month = start; month <= end; month += 1) {
+      options.push(pad(month))
+    }
+  }
+
+  if (type === 'day') {
+    const year = Number(values.year)
+    const month = Number(values.month)
+    const total = new Date(year, month, 0).getDate()
+    const minDay = isSameYearMonth(year, month, props.minDate) ? props.minDate.getDate() : 1
+    const maxDay = isSameYearMonth(year, month, props.maxDate) ? props.maxDate.getDate() : total
+    for (let day = minDay; day <= maxDay; day += 1) {
+      options.push(pad(day))
+    }
+  }
+
+  if (type === 'hour') {
+    const year = Number(values.year)
+    const month = Number(values.month || '1')
+    const day = Number(values.day || '1')
+    const minHour = isSameDate(year, month, day, props.minDate) ? props.minDate.getHours() : 0
+    const maxHour = isSameDate(year, month, day, props.maxDate) ? props.maxDate.getHours() : 23
+    for (let hour = minHour; hour <= maxHour; hour += 1) {
+      options.push(pad(hour))
+    }
+  }
+
+  if (type === 'minute') {
+    const year = Number(values.year || String(props.minDate.getFullYear()))
+    const month = Number(values.month || '1')
+    const day = Number(values.day || '1')
+    const hour = Number(values.hour)
+    const minMinute = isSameDateTimeHour(year, month, day, hour, props.minDate) ? props.minDate.getMinutes() : 0
+    const maxMinute = isSameDateTimeHour(year, month, day, hour, props.maxDate) ? props.maxDate.getMinutes() : 59
+    for (let minute = minMinute; minute <= maxMinute; minute += 1) {
+      options.push(pad(minute))
+    }
+  }
+
+  const filtered = props.filter ? props.filter(type, options) : options
+  return filtered.map((value) => ({
+    value,
+    label: props.formatter ? props.formatter(type, value) : defaultFormatter(type, value)
+  }))
+}
+
+function getIndexesByValues() {
+  return columnTypes.value.map((type, index) => {
+    const value = innerValues.value[type as keyof DateTimeValues]
+    const column = displayColumns.value[index] || []
+    const foundIndex = column.findIndex((item) => item.value === value)
+    return foundIndex >= 0 ? foundIndex : 0
+  })
+}
+
+function alignValuesWithColumns() {
+  innerValues.value = fixValues(innerValues.value)
+}
+
+function fixValues(values: DateTimeValues) {
+  const nextValues = { ...values }
+  columnTypes.value.forEach((type, index) => {
+    const column = displayColumns.value[index] || []
+    const current = nextValues[type as keyof DateTimeValues]
+    if (!column.some((item) => item.value === current) && column[0]) {
+      nextValues[type as keyof DateTimeValues] = column[0].value
+    }
+  })
+  return nextValues
+}
+
+function formatOutput(values: DateTimeValues) {
+  if (props.type === 'time') {
+    return `${values.hour}:${values.minute}`
+  }
+
+  const date = new Date(
+    Number(values.year),
+    Number(values.month || '1') - 1,
+    Number(values.day || '1'),
+    Number(values.hour || '0'),
+    Number(values.minute || '0')
+  )
+
+  return props.type === 'year-month'
+    ? `${values.year}-${values.month}`
+    : props.type === 'date'
+      ? new Date(date.getFullYear(), date.getMonth(), date.getDate())
+      : date
+}
+
+function defaultFormatter(type: string, value: string) {
+  if (type === 'year') return `${value}年`
+  if (type === 'month') return `${value}月`
+  if (type === 'day') return `${value}日`
+  if (type === 'hour') return `${value}时`
+  if (type === 'minute') return `${value}分`
+  return value
+}
+
+function isSameYearMonth(year: number, month: number, date: Date) {
+  return year === date.getFullYear() && month === date.getMonth() + 1
+}
+
+function isSameDate(year: number, month: number, day: number, date: Date) {
+  return isSameYearMonth(year, month, date) && day === date.getDate()
+}
+
+function isSameDateTimeHour(year: number, month: number, day: number, hour: number, date: Date) {
+  return isSameDate(year, month, day, date) && hour === date.getHours()
+}
+
+function pad(value: number) {
+  return String(value).padStart(2, '0')
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-datetime-picker {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 1000;
+
+  &__popup {
+    width: 100%;
+    background: $--bg-color-2;
+    border-radius: $--border-radius-lg $--border-radius-lg 0 0;
+    overflow: hidden;
+  }
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 48px;
+    padding: 0 $--spacing-lg;
+    border-bottom: 1px solid $--border-color;
+  }
+
+  &__title {
+    font-size: $--font-size-md;
+    color: $--text-color;
+    font-weight: 600;
+  }
+
+  &__action {
+    font-size: $--font-size-md;
+    color: $--text-color-2;
+
+    &--confirm {
+      color: $--color-primary;
+    }
+  }
+
+  &__view {
+    width: 100%;
+    height: 240px;
+  }
+
+  &__indicator {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__option {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 48px;
+    font-size: $--font-size-lg;
+    color: $--text-color;
+  }
+}
+</style>

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

@@ -0,0 +1,71 @@
+<template>
+  <view class="u-divider" :class="{ 'u-divider--hairline': hairline, 'u-divider--dashed': dashed }">
+    <view v-if="$slots.default || content" class="u-divider__text">
+      <slot>{{ content }}</slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  content?: string
+  hairline?: boolean
+  dashed?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  content: '',
+  hairline: false,
+  dashed: false
+})
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-divider {
+  display: flex;
+  align-items: center;
+  margin: $--spacing-lg 0;
+  color: $--text-color-2;
+  font-size: $--font-size-sm;
+  line-height: 1;
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background-color: $--border-color;
+  }
+
+  &--hairline {
+    &::before,
+    &::after {
+      transform: scaleY(0.5);
+    }
+  }
+
+  &--dashed {
+    &::before,
+    &::after {
+      border-style: dashed;
+      background: transparent;
+      border-top: 1px dashed $--border-color;
+      border-bottom: none;
+      height: 0;
+    }
+  }
+
+  &__text {
+    padding: 0 $--spacing-md;
+  }
+}
+</style>

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

@@ -0,0 +1,98 @@
+<template>
+  <view class="u-empty" :class="{ 'u-empty--inline': inline }">
+    <view class="u-empty__image">
+      <slot name="image">
+        <image v-if="image" class="u-empty__image-src" :src="image" mode="aspectFit" />
+        <view v-else class="u-empty__image-default">
+          <text class="u-empty__icon">📭</text>
+        </view>
+      </slot>
+    </view>
+    <view v-if="description || $slots.description" class="u-empty__description">
+      <slot name="description">{{ description }}</slot>
+    </view>
+    <view v-if="$slots.default" class="u-empty__bottom">
+      <slot />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  image?: string
+  description?: string
+  inline?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  image: '',
+  description: '暂无数据',
+  inline: false
+})
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: $--spacing-xl $--spacing-base;
+  box-sizing: border-box;
+
+  &--inline {
+    display: inline-flex;
+    padding: $--spacing-base;
+  }
+
+  &__image {
+    width: 160px;
+    height: 160px;
+    margin-bottom: $--spacing-base;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__image-src {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__image-default {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $--bg-color;
+    border-radius: $--radius-lg;
+  }
+
+  &__icon {
+    font-size: 64px;
+    color: $--text-color-3;
+  }
+
+  &__description {
+    font-size: $--font-size-base;
+    color: $--text-color-3;
+    line-height: 1.5;
+    text-align: center;
+    margin-bottom: $--spacing-base;
+  }
+
+  &__bottom {
+    margin-top: $--spacing-sm;
+  }
+}
+</style>

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

@@ -0,0 +1,63 @@
+<template>
+  <view class="u-grid">
+    <slot />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+
+interface Props {
+  column?: number
+  border?: boolean
+  clickable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  column: 4,
+  border: false,
+  clickable: false
+})
+
+const emit = defineEmits<{
+  click: [item: unknown, index: number]
+}>()
+
+const column = computed(() => Math.max(1, Number(props.column) || 1))
+let currentIndex = 0
+
+const registerItem = () => {
+  const index = currentIndex
+  currentIndex += 1
+  return index
+}
+
+const onItemClick = (payload: { item: unknown; index: number }) => {
+  emit('click', payload.item, payload.index)
+}
+
+provide('u-grid', {
+  column,
+  border: computed(() => props.border),
+  clickable: computed(() => props.clickable),
+  registerItem,
+  onItemClick
+})
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-grid {
+  display: flex;
+  flex-wrap: wrap;
+  background-color: $--bg-color-2;
+}
+</style>