@atooyu/uxto-ui 1.0.0

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

@@ -0,0 +1,144 @@
+<template>
+  <view class="u-tag" :class="[`u-tag--${type}`, `u-tag--${size}`, { 'u-tag--plain': plain, 'u-tag--round': round }]" :style="tagStyle">
+    <text class="u-tag__text"><slot /></text>
+    <view v-if="closable" class="u-tag__close" @click="handleClose">
+      <text>×</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type TagType = 'primary' | 'success' | 'warning' | 'danger' | 'default'
+type TagSize = 'large' | 'medium' | 'small'
+
+interface Props {
+  type?: TagType
+  size?: TagSize
+  plain?: boolean
+  round?: boolean
+  closable?: boolean
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'default',
+  size: 'medium',
+  plain: false,
+  round: false,
+  closable: false
+})
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const tagStyle = computed(() => {
+  if (props.color) {
+    return {
+      backgroundColor: props.plain ? 'transparent' : props.color,
+      borderColor: props.color,
+      color: props.plain ? props.color : '#fff'
+    }
+  }
+  return {}
+})
+
+const handleClose = () => {
+  emit('close')
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 $--spacing-sm;
+  border-radius: 2px;
+  border: 1px solid transparent;
+  font-size: $--font-size-sm;
+
+  &--default {
+    color: $--text-color;
+    background-color: $--bg-color-3;
+    border-color: $--bg-color-3;
+  }
+
+  &--primary {
+    color: $--text-color-white;
+    background-color: $--color-primary;
+    border-color: $--color-primary;
+  }
+
+  &--success {
+    color: $--text-color-white;
+    background-color: $--color-success;
+    border-color: $--color-success;
+  }
+
+  &--warning {
+    color: $--text-color-white;
+    background-color: $--color-warning;
+    border-color: $--color-warning;
+  }
+
+  &--danger {
+    color: $--text-color-white;
+    background-color: $--color-danger;
+    border-color: $--color-danger;
+  }
+
+  &--large {
+    padding: $--spacing-sm $--spacing-md;
+    font-size: $--font-size-md;
+  }
+
+  &--small {
+    padding: 0 $--spacing-xs;
+    font-size: $--font-size-xs;
+  }
+
+  &--plain {
+    background-color: transparent;
+
+    &.u-tag--primary {
+      color: $--color-primary;
+    }
+
+    &.u-tag--success {
+      color: $--color-success;
+    }
+
+    &.u-tag--warning {
+      color: $--color-warning;
+    }
+
+    &.u-tag--danger {
+      color: $--color-danger;
+    }
+  }
+
+  &--round {
+    border-radius: 999px;
+  }
+
+  &__text {
+    line-height: 1.4;
+  }
+
+  &__close {
+    margin-left: 2px;
+    font-size: 12px;
+  }
+}
+</style>

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

@@ -0,0 +1,189 @@
+<template>
+  <view
+    class="u-textarea"
+    :class="{
+      'u-textarea--disabled': disabled,
+      'u-textarea--error': error,
+      'u-textarea--focus': isFocus
+    }"
+  >
+    <textarea
+      class="u-textarea__control"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :placeholder-style="placeholderStyle"
+      :placeholder-class="'u-textarea__placeholder'"
+      :disabled="disabled"
+      :maxlength="maxlength"
+      :focus="focus"
+      :auto-height="autoHeight"
+      :fixed="fixed"
+      :cursor-spacing="cursorSpacing"
+      :show-confirm-bar="showConfirmBar"
+      :adjust-position="adjustPosition"
+      :style="textareaStyle"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @confirm="handleConfirm"
+      @linechange="handleLineChange"
+    />
+
+    <view v-if="showWordLimit && maxlength" class="u-textarea__limit">
+      <text class="u-textarea__limit-text">{{ currentLength }}/{{ maxlength }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+interface Props {
+  modelValue?: string
+  placeholder?: string
+  placeholderStyle?: string
+  disabled?: boolean
+  maxlength?: number
+  focus?: boolean
+  autoHeight?: boolean
+  fixed?: boolean
+  cursorSpacing?: number
+  showConfirmBar?: boolean
+  adjustPosition?: boolean
+  showWordLimit?: boolean
+  error?: boolean
+  rows?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  placeholder: '请输入内容',
+  disabled: false,
+  maxlength: -1,
+  focus: false,
+  autoHeight: false,
+  fixed: false,
+  cursorSpacing: 0,
+  showConfirmBar: true,
+  adjustPosition: true,
+  showWordLimit: false,
+  error: false,
+  rows: 3
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  input: [value: string]
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
+  confirm: [value: string]
+  linechange: [event: any]
+}>()
+
+const isFocus = ref(false)
+
+const currentLength = computed(() => {
+  return String(props.modelValue).length
+})
+
+const textareaStyle = computed(() => {
+  if (props.autoHeight) return {}
+  return {
+    minHeight: `calc($--font-size-md * $--textarea-line-height * ${props.rows})`
+  }
+})
+
+const handleInput = (event: any) => {
+  const value = event.detail.value
+  emit('update:modelValue', value)
+  emit('input', value)
+}
+
+const handleFocus = (event: FocusEvent) => {
+  isFocus.value = true
+  emit('focus', event)
+}
+
+const handleBlur = (event: FocusEvent) => {
+  isFocus.value = false
+  emit('blur', event)
+}
+
+const handleConfirm = (event: any) => {
+  emit('confirm', event.detail.value)
+}
+
+const handleLineChange = (event: any) => {
+  emit('linechange', event)
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-textarea {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: $--spacing-md;
+  background-color: $--bg-color-2;
+  border-radius: $--border-radius-md;
+  border: 1px solid $--border-color;
+  transition: all $--transition-duration;
+
+  &--focus {
+    border-color: $--color-primary;
+  }
+
+  &--error {
+    border-color: $--color-danger;
+  }
+
+  &--disabled {
+    background-color: $--bg-color;
+  }
+
+  &__control {
+    width: 100%;
+    min-height: calc($--font-size-md * $--textarea-line-height * 3);
+    font-size: $--font-size-md;
+    line-height: $--textarea-line-height;
+    color: $--text-color;
+    background: transparent;
+    resize: none;
+    outline: none;
+    border: none;
+  }
+
+  &__placeholder {
+    color: $--text-color-3;
+  }
+
+  &__limit {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: $--spacing-sm;
+  }
+
+  &__limit-text {
+    font-size: $--font-size-sm;
+    color: $--text-color-3;
+  }
+
+  &--disabled &__limit-text {
+    color: $--text-color-3;
+  }
+
+  &--error &__limit-text {
+    color: $--color-danger;
+  }
+}
+</style>

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

@@ -0,0 +1,186 @@
+<template>
+  <view v-if="visible" class="u-toast" :class="toastClass" :style="toastStyle">
+    <view class="u-toast__content">
+      <view v-if="type === 'loading'" class="u-toast__loading">
+        <view class="u-toast__loading-icon" />
+      </view>
+      <text v-else-if="icon" class="u-toast__icon">{{ icon }}</text>
+      <text v-if="message" class="u-toast__text">{{ message }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onUnmounted } from 'vue'
+
+type ToastType = 'text' | 'loading' | 'success' | 'fail' | 'info'
+
+interface Props {
+  message?: string
+  type?: ToastType
+  duration?: number
+  position?: 'top' | 'middle' | 'bottom'
+  icon?: string
+  forbidClick?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  message: '',
+  type: 'text',
+  duration: 2000,
+  position: 'middle',
+  icon: '',
+  forbidClick: false
+})
+
+const visible = ref(false)
+let timer: ReturnType<typeof setTimeout> | null = null
+
+const icons: Record<string, string> = {
+  success: '✓',
+  fail: '✗',
+  info: 'ℹ'
+}
+
+const displayIcon = computed(() => {
+  if (props.icon) return props.icon
+  if (props.type === 'loading') return ''
+  return icons[props.type] || ''
+})
+
+const toastClass = computed(() => [
+  `u-toast--${props.position}`,
+  {
+    'u-toast--forbid-click': props.forbidClick,
+    'u-toast--loading': props.type === 'loading'
+  }
+])
+
+const toastStyle = computed(() => ({
+  zIndex: 1000
+}))
+
+const show = () => {
+  visible.value = true
+
+  if (props.type !== 'loading' && props.duration > 0) {
+    timer = setTimeout(() => {
+      hide()
+    }, props.duration)
+  }
+}
+
+const hide = () => {
+  visible.value = false
+  if (timer) {
+    clearTimeout(timer)
+    timer = null
+  }
+}
+
+onUnmounted(() => {
+  if (timer) {
+    clearTimeout(timer)
+  }
+})
+
+defineExpose({
+  show,
+  hide
+})
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-toast {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+  pointer-events: none;
+
+  &--top {
+    top: 50px;
+  }
+
+  &--middle {
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &--bottom {
+    bottom: 50px;
+  }
+
+  &--forbid-click {
+    pointer-events: auto;
+    width: 100vw;
+    height: 100vh;
+    left: 0;
+    top: 0;
+    transform: none;
+    background-color: transparent;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: $--spacing-base $--spacing-lg;
+    background-color: rgba(0, 0, 0, 0.7);
+    border-radius: $--radius-lg;
+    min-width: 100px;
+    max-width: 280px;
+  }
+
+  &--loading &__content {
+    min-width: 80px;
+    min-height: 80px;
+    padding: $--spacing-lg;
+  }
+
+  &__icon {
+    font-size: 32px;
+    color: $--text-color-white;
+    margin-bottom: $--spacing-sm;
+  }
+
+  &__loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: $--spacing-sm;
+  }
+
+  &__loading-icon {
+    width: 24px;
+    height: 24px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-top-color: $--text-color-white;
+    border-radius: 50%;
+    animation: u-toast-loading 0.8s linear infinite;
+  }
+
+  @keyframes u-toast-loading {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  &__text {
+    font-size: $--font-size-base;
+    color: $--text-color-white;
+    line-height: 1.4;
+    text-align: center;
+  }
+}
+</style>