@rao2126340634/yt-ui 1.2.20

package/src/components/yt-notice-bar/yt-notice-bar.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+  import { computed, useSlots } from 'vue'
+  import { ThemeColor } from '../../types/theme-types'
+
+  const slots = useSlots()
+
+  interface Props {
+    theme?: ThemeColor | 'none'
+    width?: number | string
+    height?: number | string
+    textSize?: number
+    animation?: boolean
+    duration?: number
+    prefixFlex?: number // 0-1
+    suffixFlex?: number // 0-1
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    theme: 'none',
+    width: '100%',
+    height: 45,
+    textSize: 12,
+    animation: true,
+    duration: 12000,
+    prefixFlex: 0.3,
+    suffixFlex: 0.3
+  })
+
+  const noticeBarClass = computed(() => {
+    return ['yt-notice-bar', `yt-notice-bar--theme-${props.theme}`]
+  })
+  const noticeBarStyle = computed(() => {
+    return {
+      width: typeof props.width === 'number' ? `${props.width}px` : props.width,
+      height: typeof props.height === 'number' ? `${props.height}px` : props.height
+    }
+  })
+  const noticeTextStyle = computed(() => {
+    return {
+      fontSize: `${props.textSize}px`,
+      animationPlayState: props.animation ? 'running' : 'paused',
+      animationDuration: `${props.duration}ms`
+    }
+  })
+
+  const hasSlots = computed(() => {
+    return {
+      hasPrefix: !!slots.prefix,
+      hasSuffix: !!slots.suffix
+    }
+  })
+
+  defineOptions({
+    name: 'YtNoticeBar'
+  })
+</script>
+
+<template>
+  <view
+    :class="noticeBarClass"
+    :style="noticeBarStyle"
+  >
+    <view
+      v-if="hasSlots.hasPrefix"
+      class="yt-notice-bar--prefix"
+      :style="{ flex: prefixFlex }"
+    >
+      <slot name="prefix" />
+    </view>
+    <view class="yt-notice-bar--text-container">
+      <span
+        class="yt-notice-bar--text"
+        :style="noticeTextStyle"
+      >
+        <slot />
+      </span>
+    </view>
+    <view
+      v-if="hasSlots.hasSuffix"
+      class="yt-notice-bar--suffix"
+      :style="{ flex: suffixFlex }"
+    >
+      <slot name="suffix" />
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  @use '../../styles/components/_notice-bar.scss';
+  @use '../../styles/themes';
+</style>

package/src/components/yt-overlay/yt-overlay.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+
+  interface Props {
+    visible?: boolean
+    duration?: number
+    zIndex?: number
+    bgColor?: string
+    width?: number | string
+    height?: number | string
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    visible: false,
+    duration: 200,
+    zIndex: 500,
+    bgColor: '#00000080',
+    width: '100%',
+    height: '100%'
+  })
+
+  const emit = defineEmits<{
+    click: [e: Event]
+  }>()
+
+  const overlayStyle = computed(() => {
+    return {
+      width: typeof props.width === 'number' ? `${props.width}px` : props.width,
+      height: typeof props.height === 'number' ? `${props.height}px` : props.height,
+      '--overlay-background-color': props.bgColor,
+      '--overlay-transition': `opacity ${props.duration}ms ease-out, visibility ${props.duration}ms linear`,
+      '--overlay-z-index': props.zIndex
+    }
+  })
+  const overlayClass = computed(() => ({
+    'yt-overlay': true,
+    'yt-overlay--visible': props.visible
+  }))
+
+  function handleClick(e: Event) {
+    emit('click', e)
+  }
+
+  defineOptions({
+    name: 'YtOverlay'
+  })
+</script>
+
+<template>
+  <view
+    @click="handleClick"
+    :class="overlayClass"
+    :style="overlayStyle"
+    @touchmove.stop
+  />
+</template>
+
+<style lang="scss" scoped>
+  @use '../../styles/components/_overlay.scss';
+</style>

package/src/components/yt-picker/yt-picker.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+  import { inject, onMounted, onUnmounted, ref } from 'vue'
+
+  interface Props {
+    name?: string
+    type?: 'single' | 'multi' | 'date' | 'region'
+    items?: any[]
+    itemKey?: string
+    start?: string
+    end?: string
+    disabled?: boolean
+    fields?: 'year' | 'month' | 'day'
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    name: '',
+    type: 'single',
+    items: () => [],
+    itemKey: '',
+    start: '',
+    end: '',
+    disabled: false,
+    fields: 'day'
+  })
+
+  if (
+    props.items.some(item => typeof item === 'object' && item !== null && !Array.isArray(item)) &&
+    !props.itemKey
+  ) {
+    console.warn('[yt-picker] 使用对象数组的选择器时，请设置itemKey以作为显示内容')
+  }
+  if (props.items.length && (props.type === 'date' || props.type === 'region')) {
+    console.warn('[yt-picker] 请使用正确的选择器类型')
+  }
+  if (props.type === 'multi' && props.items.some(item => !Array.isArray(item))) {
+    console.warn('[yt-picker] 使用多列选择器时，请传入二维数组items')
+  }
+
+  // 映射为uniapp selector的mode name
+  const typeMap = {
+    single: 'selector',
+    multi: 'multiSelector',
+    date: 'date',
+    region: 'region'
+  }
+
+  // 初始化传入的值
+  const currentValue = ref<any>()
+
+  const emit = defineEmits<{
+    change: [value: any]
+    cancel: []
+    columnChange: [{ column: number; value: any }]
+  }>()
+
+  // normal selector value changed
+  function handleChange(e: any) {
+    currentValue.value = e.detail.value
+    emit('change', e.detail.value)
+  }
+
+  // cancel event
+  function handleCancel() {
+    emit('cancel')
+  }
+
+  // multiselector value changed => return { columnIndex, index }
+  function handleColumnChange(e: any) {
+    emit('columnChange', e.detail)
+  }
+
+  defineOptions({
+    name: 'YtPicker'
+  })
+
+  const registerField: any = inject('registerField', () => {})
+  const unregisterField: any = inject('unregisterField', () => {})
+  const getValue = () => {
+    return currentValue.value
+  }
+  const setValue = (value: any) => {
+    currentValue.value = value
+  }
+  onMounted(() => {
+    if (registerField && props.name) {
+      registerField(props.name, getValue, setValue)
+    }
+  })
+  onUnmounted(() => {
+    if (unregisterField && props.name) {
+      unregisterField(props.name)
+    }
+  })
+</script>
+
+<template>
+  <picker
+    :mode="typeMap[type]"
+    :start="start"
+    :end="end"
+    @change="handleChange"
+    @cancel="handleCancel"
+    @columnchange="handleColumnChange"
+    :range="items"
+    :range-key="itemKey"
+    :disabled="disabled"
+    :fields="fields"
+  >
+    <slot />
+  </picker>
+</template>

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

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+  import { computed, CSSProperties, onUnmounted, watch } from 'vue'
+  interface HeaderProps {
+    title?: string
+    cancelName?: string
+    confirmName?: string
+    cancelFn?: () => void
+    confirmFn?: () => void
+    closeSide?: 'left' | 'right'
+  }
+  interface Props {
+    width?: number | string
+    height?: number | string
+    maxWidth?: number | string
+    maxHeight?: number | string
+    bgColor?: string
+    overlayColor?: string
+    visible?: boolean
+    zIndex?: number
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'center'
+    borderRadius?: number | string
+    duration?: number
+    closeOnOverlayClick?: boolean
+    destroyOnClose?: boolean
+    headerType?: 'close-only' | 'cancel-confirm' | 'none'
+    headerProps?: HeaderProps
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    width: '70vw',
+    height: '70vh',
+    maxWidth: 'none',
+    maxHeight: 'none',
+    bgColor: '#ffffff',
+    overlayColor: '#00000080',
+    visible: false,
+    zIndex: 1000,
+    placement: 'bottom',
+    borderRadius: 10,
+    duration: 200,
+    closeOnOverlayClick: true,
+    destroyOnClose: false,
+    headerType: 'none',
+    headerProps: () => ({
+      title: '',
+      cancelName: '取消',
+      confirmName: '确定',
+      cancelFn: () => {},
+      confirmFn: () => {},
+      closeSide: 'right'
+    })
+  })
+  const emit = defineEmits<{
+    overlayClick: [e: Event]
+    'update:visible': [value: boolean]
+    open: []
+    opened: []
+    close: []
+    closed: []
+  }>()
+
+  const shouldRender = computed(() => {
+    return props.visible || !props.destroyOnClose
+  })
+  const popupBorderRadius = computed(() => {
+    const borderRadius =
+      typeof props.borderRadius === 'number' ? `${props.borderRadius}px` : props.borderRadius
+    let tl = '0'
+    let tr = '0'
+    let bl = '0'
+    let br = '0'
+    if (props.placement === 'top') {
+      bl = borderRadius
+      br = borderRadius
+    }
+    if (props.placement === 'bottom') {
+      tl = borderRadius
+      tr = borderRadius
+    }
+    if (props.placement === 'center') {
+      tl = borderRadius
+      tr = borderRadius
+      bl = borderRadius
+      br = borderRadius
+    }
+    return {
+      '--popup-borderTopLeftRadius': tl,
+      '--popup-borderTopRightRadius': tr,
+      '--popup-borderBottomLeftRadius': bl,
+      '--popup-borderBottomRightRadius': br
+    }
+  })
+  const popupClass = computed(() => {
+    return [
+      'yt-popup',
+      `yt-popup--${props.placement}`,
+      {
+        'yt-popup--visible': props.visible
+      }
+    ]
+  })
+  const popupStyle = computed(() => {
+    const width = typeof props.width === 'number' ? `${props.width}px` : props.width
+    const height = typeof props.height === 'number' ? `${props.height}px` : props.height
+    const maxWidth = typeof props.maxWidth === 'number' ? `${props.maxWidth}px` : props.maxWidth
+    const maxHeight = typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight
+    return {
+      ...popupBorderRadius.value,
+      width: isCenter.value ? width : isHorizontal.value ? width : '100vw',
+      height: isCenter.value ? height : isHorizontal.value ? '100vh' : height,
+      '--popup-max-width': maxWidth,
+      '--popup-max-height': maxHeight,
+      '--popup-z-index': props.zIndex,
+      '--popup-transition': `transform ${props.duration}ms ease-out, opacity ${props.duration}ms ease-out`,
+      '--popup-background-color': props.bgColor,
+      '--popup-header-close-justify-content':
+        props.headerProps.closeSide === 'left' ? 'flex-start' : 'flex-end'
+    } as CSSProperties
+  })
+  const isHorizontal = computed(() => {
+    return props.placement === 'left' || props.placement === 'right'
+  })
+  const isCenter = computed(() => {
+    return props.placement === 'center'
+  })
+
+  function handleOverlayClick(e: Event) {
+    emit('overlayClick', e)
+    if (props.closeOnOverlayClick) {
+      emit('update:visible', false)
+    }
+  }
+
+  let stateTime: NodeJS.Timeout | null = null
+  watch(
+    () => props.visible,
+    newVal => {
+      if (stateTime) {
+        clearTimeout(stateTime)
+        stateTime = null
+      }
+      if (newVal) {
+        emit('open')
+        stateTime = setTimeout(() => emit('opened'), props.duration)
+      } else {
+        emit('close')
+        stateTime = setTimeout(() => emit('closed'), props.duration)
+      }
+    },
+    { immediate: true }
+  )
+
+  onUnmounted(() => {
+    if (stateTime) {
+      clearTimeout(stateTime)
+      stateTime = null
+    }
+  })
+
+  defineOptions({
+    name: 'YtPopup'
+  })
+</script>
+
+<template>
+  <view
+    v-if="shouldRender"
+    :class="popupClass"
+    :style="popupStyle"
+  >
+    <view
+      class="yt-popup--header"
+      v-if="headerType !== 'none'"
+    >
+      <view
+        v-if="headerType === 'cancel-confirm'"
+        class="yt-popup--header-cancel-confirm"
+      >
+        <span
+          class="yt-popup--text yt-popup--text-cancel"
+          @click="props.headerProps.cancelFn"
+        >
+          {{ props.headerProps.cancelName }}
+        </span>
+        <span class="yt-popup--text yt-popup--text-title">{{ props.headerProps.title }}</span>
+        <span
+          class="yt-popup--text yt-popup--text-confirm"
+          @click="props.headerProps.confirmFn"
+        >
+          {{ props.headerProps.confirmName }}
+        </span>
+      </view>
+
+      <view
+        v-if="headerType === 'close-only'"
+        class="yt-popup--header-close-only"
+      >
+        <span class="yt-popup--text yt-popup--text-title">{{ props.headerProps.title }}</span>
+        <yt-icon
+          name="Close"
+          :width="12"
+          :height="12"
+          :size="38"
+          @click="() => emit('update:visible', false)"
+        ></yt-icon>
+      </view>
+    </view>
+
+    <slot />
+  </view>
+
+  <yt-overlay
+    :visible="visible"
+    :zIndex="zIndex - 1"
+    :bgColor="overlayColor"
+    @click="handleOverlayClick"
+  />
+</template>
+
+<style lang="scss" scoped>
+  @use '../../styles/components/_popup.scss';
+  @use '../../styles/_themes.scss';
+</style>

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

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+  import { inject, onMounted, onUnmounted, ref, watch } from 'vue'
+
+  interface Props {
+    name?: string // form-name
+    list: {
+      label?: string | number
+      value?: string | number
+      checked?: boolean
+      disabled?: boolean
+    }[]
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    name: '',
+    list: () => []
+  })
+
+  const currentValue = ref<any>(null)
+
+  const emit = defineEmits<{
+    change: [value: any]
+  }>()
+
+  function handleChange(e: any) {
+    currentValue.value = e.detail.value
+    emit('change', e.detail.value)
+  }
+
+  watch(
+    () => props.list,
+    newList => {
+      const defaultItem = newList.find(item => item.checked)
+      if (defaultItem) {
+        currentValue.value = defaultItem.value
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  )
+
+  defineOptions({
+    name: 'YtRadioGroup'
+  })
+
+  const registerField: any = inject('registerField', () => {})
+  const unregisterField: any = inject('unregisterField', () => {})
+  const getValue = () => {
+    return currentValue.value
+  }
+  const setValue = (value: any) => {
+    currentValue.value = value
+  }
+  onMounted(() => {
+    if (registerField && props.name) {
+      registerField(props.name, getValue, setValue)
+    }
+  })
+  onUnmounted(() => {
+    if (unregisterField && props.name) {
+      unregisterField(props.name)
+    }
+  })
+</script>
+
+<template>
+  <radio-group @change="handleChange">
+    <label
+      v-for="item in list"
+      :key="item.value"
+      class="radio-label"
+    >
+      <radio
+        :value="item.value"
+        :checked="currentValue === item.value"
+        :disabled="item.disabled"
+      >
+        {{ item.label }}
+      </radio>
+    </label>
+  </radio-group>
+</template>
+
+<style lang="scss" scoped>
+.radio-label {
+  margin: 8px;
+}
+</style>

package/src/components/yt-result/yt-result.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+  interface Props {
+    type?: 'success' | 'fail' | 'info'
+    size?: number
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    type: 'success',
+    size: 24
+  })
+
+  const typeMap = {
+    success: 'SuccessResult',
+    fail: 'FailResult',
+    info: 'InfoResult'
+  }
+
+  defineOptions({
+    name: 'YtResult'
+  })
+</script>
+
+<template>
+  <view class="yt-result">
+    <yt-icon
+      :name="typeMap[props.type]"
+      :size="size"
+      :width="120"
+      :height="120"
+    />
+    <span class="yt-result--text"><slot /></span>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  .yt-result {
+    width: fit-content;
+    height: fit-content;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: inline-flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+
+    &--text {
+      color: #999;
+    }
+  }
+</style>