@xlui/xux-ui 0.2.0 → 0.3.0

package/src/components/Score/index.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="x-score" :class="[`score-${size}`, { 'score-disabled': disabled }]">
+    <div class="rating">
+      <label
+        v-for="star in maxStars"
+        :key="star"
+        :class="{ 'star-filled': star <= modelValue }"
+        :title="getStarTitle(star)"
+        @click="handleChange(star)"
+      >
+        <input
+          type="radio"
+          :name="`star-radio-${uniqueId}`"
+          :value="star"
+          :disabled="disabled"
+          :checked="modelValue === star"
+          style="display: none;"
+        />
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path
+            pathLength="360"
+            d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
+          ></path>
+        </svg>
+      </label>
+    </div>
+    
+    <!-- 显示评分文字 -->
+    <div v-if="showText" class="score-text">
+      {{ getScoreText() }}
+    </div>
+    
+    <!-- 显示数值 -->
+    <div v-if="showValue" class="score-value">
+      {{ modelValue }}/{{ maxStars }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export interface ScoreProps {
+  /** 当前评分值 */
+  modelValue?: number
+  /** 最大星数 */
+  maxStars?: number
+  /** 组件尺寸 */
+  size?: 'small' | 'medium' | 'large'
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 是否显示评分文字 */
+  showText?: boolean
+  /** 是否显示数值 */
+  showValue?: boolean
+  /** 自定义评分文字 */
+  texts?: string[]
+  /** 是否允许半星评分 */
+  allowHalf?: boolean
+  /** 自定义颜色 */
+  color?: string
+}
+
+const props = withDefaults(defineProps<ScoreProps>(), {
+  modelValue: 0,
+  maxStars: 5,
+  size: 'medium',
+  disabled: false,
+  showText: false,
+  showValue: false,
+  texts: () => ['极差', '差', '一般', '好', '极好'],
+  allowHalf: false,
+  color: '#ffc73a'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+  change: [value: number]
+}>()
+
+// 生成唯一ID避免多个组件冲突
+const uniqueId = computed(() => Math.random().toString(36).substr(2, 9))
+
+// 处理评分变化
+const handleChange = (value: number) => {
+  if (props.disabled) return
+  
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+
+// 获取星星标题
+const getStarTitle = (star: number) => {
+  if (props.texts && props.texts[star - 1]) {
+    return `${star}星 - ${props.texts[star - 1]}`
+  }
+  return `${star}星`
+}
+
+// 获取评分文字
+const getScoreText = () => {
+  if (props.modelValue === 0) return '未评分'
+  if (props.texts && props.texts[props.modelValue - 1]) {
+    return props.texts[props.modelValue - 1]
+  }
+  return `${props.modelValue}星`
+}
+</script>
+
+
+<style scoped>
+.x-score {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.rating {
+  display: flex;
+  gap: 0.3rem;
+  --stroke: #666;
+  --fill: v-bind(color);
+}
+
+.rating label {
+  cursor: pointer;
+  transition: transform 0.2s ease;
+  position: relative;
+}
+
+.rating label:hover {
+  transform: scale(1.1);
+}
+
+.rating svg {
+  width: 2rem;
+  height: 2rem;
+  overflow: visible;
+  fill: transparent;
+  stroke: var(--stroke);
+  stroke-linejoin: bevel;
+  stroke-dasharray: 12;
+  animation: idle 4s linear infinite;
+  transition: stroke 0.2s, fill 0.5s;
+}
+
+@keyframes idle {
+  from {
+    stroke-dashoffset: 24;
+  }
+}
+
+.rating label:hover svg {
+  stroke: var(--fill);
+}
+
+/* 填充的星星样式 */
+.rating label.star-filled svg {
+  transition: 0s;
+  animation: idle 4s linear infinite, yippee 0.75s backwards;
+  fill: var(--fill);
+  stroke: var(--fill);
+  stroke-opacity: 0;
+  stroke-dasharray: 0;
+  stroke-linejoin: miter;
+  stroke-width: 8px;
+}
+
+@keyframes yippee {
+  0% {
+    transform: scale(1);
+    fill: var(--fill);
+    fill-opacity: 0;
+    stroke-opacity: 1;
+    stroke: var(--stroke);
+    stroke-dasharray: 10;
+    stroke-width: 1px;
+    stroke-linejoin: bevel;
+  }
+
+  30% {
+    transform: scale(0);
+    fill: var(--fill);
+    fill-opacity: 0;
+    stroke-opacity: 1;
+    stroke: var(--stroke);
+    stroke-dasharray: 10;
+    stroke-width: 1px;
+    stroke-linejoin: bevel;
+  }
+
+  30.1% {
+    stroke: var(--fill);
+    stroke-dasharray: 0;
+    stroke-linejoin: miter;
+    stroke-width: 8px;
+  }
+
+  60% {
+    transform: scale(1.2);
+    fill: var(--fill);
+  }
+}
+
+/* 尺寸变体 */
+.score-small .rating svg {
+  width: 1.2rem;
+  height: 1.2rem;
+}
+
+.score-medium .rating svg {
+  width: 2rem;
+  height: 2rem;
+}
+
+.score-large .rating svg {
+  width: 2.8rem;
+  height: 2.8rem;
+}
+
+/* 禁用状态 */
+.score-disabled .rating label {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.score-disabled .rating label:hover {
+  transform: none;
+}
+
+.score-disabled .rating label:hover svg {
+  stroke: var(--stroke);
+}
+
+/* 文字样式 */
+.score-text {
+  font-size: 0.875rem;
+  color: #666;
+  font-weight: 500;
+}
+
+.score-value {
+  font-size: 0.75rem;
+  color: #999;
+  font-weight: 400;
+}
+
+.score-small .score-text {
+  font-size: 0.75rem;
+}
+
+.score-small .score-value {
+  font-size: 0.625rem;
+}
+
+.score-large .score-text {
+  font-size: 1rem;
+}
+
+.score-large .score-value {
+  font-size: 0.875rem;
+}
+</style>

package/src/components/Switch/index.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="switch" :class="[`size-${size}`, { 'disabled': disabled }]" :style="colorStyle">
+    <input 
+      :id="switchId"
+      :checked="modelValue"
+      @change="handleChange"
+      :disabled="disabled"
+      type="checkbox"
+    >
+    <label :for="switchId" class="slider"></label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+/**
+ * Switch 开关组件
+ * @displayName XSwitch
+ */
+
+interface Props {
+  modelValue: boolean
+  disabled?: boolean
+  size?: 'small' | 'medium' | 'large'
+  color?: string
+  shadowColor?: string
+  thumbColor?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  size: 'medium',
+  color: '#0974f1',
+  shadowColor: '#0974f1',
+  thumbColor: '#ffffff'
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+// 生成唯一的 ID 避免冲突
+const switchId = computed(() => `switch-${Math.random().toString(36).substr(2, 9)}`)
+
+// 计算颜色相关的样式
+const colorStyle = computed(() => {
+  const color = props.color || '#0974f1'
+  const shadowColor = props.shadowColor || color
+  const thumbColor = props.thumbColor || '#ffffff'
+  
+  // 计算浅色背景
+  const lightBackgroundColor = lightenColor(color, 0.9)
+  // 计算激活状态的浅色版本
+  const activeColor = lightenColor(color, 0.2)
+  
+  return {
+    '--switch-color': color,
+    '--switch-color-rgb': hexToRgb(color),
+    '--switch-shadow-color': shadowColor,
+    '--switch-shadow-color-rgb': hexToRgb(shadowColor),
+    '--switch-thumb-color': thumbColor,
+    '--switch-bg-color': lightBackgroundColor,
+    '--switch-active-color': activeColor
+  }
+})
+
+// 将十六进制颜色转换为 RGB
+const hexToRgb = (hex: string) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  if (result) {
+    const r = parseInt(result[1], 16)
+    const g = parseInt(result[2], 16)
+    const b = parseInt(result[3], 16)
+    return `${r}, ${g}, ${b}`
+  }
+  return '9, 117, 241' // 默认蓝色
+}
+
+// 将颜色变浅
+const lightenColor = (hex: string, factor: number) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  if (result) {
+    const r = parseInt(result[1], 16)
+    const g = parseInt(result[2], 16)
+    const b = parseInt(result[3], 16)
+    
+    // 计算浅色版本
+    const lightR = Math.round(r + (255 - r) * factor)
+    const lightG = Math.round(g + (255 - g) * factor)
+    const lightB = Math.round(b + (255 - b) * factor)
+    
+    return `#${lightR.toString(16).padStart(2, '0')}${lightG.toString(16).padStart(2, '0')}${lightB.toString(16).padStart(2, '0')}`
+  }
+  return '#e5e7eb' // 默认浅灰色
+}
+
+const handleChange = () => {
+  if (!props.disabled) {
+    emit('update:modelValue', !props.modelValue)
+  }
+}
+</script>
+
+<style scoped>
+/* The switch - the box around the slider */
+.switch {
+  font-size: 17px;
+  position: relative;
+  display: inline-block;
+  width: 3.5em;
+  height: 2em;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  border: none;
+  border-radius: 50px;
+  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  background-color: var(--switch-bg-color);
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 1.4em;
+  width: 1.4em;
+  left: 0.2em;
+  bottom: 0.2em;
+  background-color: var(--switch-thumb-color);
+  border-radius: inherit;
+  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
+}
+
+.switch input:checked + .slider {
+  box-shadow: 0 0 20px rgba(var(--switch-shadow-color-rgb), 0.8);
+  border: 2px solid var(--switch-active-color);
+  background-color: var(--switch-active-color);
+}
+
+.switch input:checked + .slider:before {
+  transform: translateX(1.5em);
+}
+
+/* 尺寸变体 */
+.switch.size-small {
+  width: 2.5em;
+  height: 1.4em;
+  font-size: 14px;
+}
+
+.switch.size-small .slider:before {
+  height: 1em;
+  width: 1em;
+}
+
+.switch.size-small input:checked + .slider:before {
+  transform: translateX(1.1em);
+}
+
+.switch.size-medium {
+  width: 3.5em;
+  height: 2em;
+  font-size: 17px;
+}
+
+.switch.size-large {
+  width: 4.5em;
+  height: 2.6em;
+  font-size: 20px;
+}
+
+.switch.size-large .slider:before {
+  height: 1.8em;
+  width: 1.8em;
+}
+
+.switch.size-large input:checked + .slider:before {
+  transform: translateX(1.9em);
+}
+
+/* 禁用状态 */
+.switch.disabled .slider {
+  cursor: not-allowed;
+  opacity: 0.5;
+  border-color: #9ca3af;
+}
+
+.switch.disabled .slider:before {
+  background-color: #9ca3af;
+}
+
+.switch.disabled input:checked + .slider {
+  border-color: #9ca3af;
+  box-shadow: none;
+}
+
+/* 悬停效果 */
+.switch:not(.disabled):hover .slider {
+  box-shadow: 0 0 20px rgba(var(--switch-shadow-color-rgb), 0.8);
+}
+
+.switch:not(.disabled) input:checked + .slider:hover {
+  box-shadow: 0 0 20px rgba(var(--switch-shadow-color-rgb), 0.8);
+}
+
+/* 点击后移除边框 */
+.switch input:active + .slider {
+  box-shadow: none;
+}
+
+.switch input:checked:active + .slider {
+  box-shadow: 0 0 20px rgba(var(--switch-shadow-color-rgb), 0.8);
+}
+
+/* 焦点状态 */
+.switch input:focus-visible + .slider {
+  box-shadow: 0 0 0 3px rgba(var(--switch-shadow-color-rgb), 0.3);
+}
+
+.switch input:checked:focus-visible + .slider {
+  box-shadow: 0 0 20px rgba(var(--switch-shadow-color-rgb), 0.8), 0 0 0 3px rgba(var(--switch-shadow-color-rgb), 0.3);
+}
+</style>