foucui 1.0.1

package/components/QiuRadio/index.vue

@@ -0,0 +1,191 @@
+<template>
+  <label
+    class="qiu-radio"
+    :class="{
+      'is-checked': isChecked,
+      'is-disabled': isDisabled,
+      'is-button': isButton,
+      'is-border': border,
+    }"
+  >
+    <span class="qiu-radio__input">
+      <input
+        type="radio"
+        class="qiu-radio__original"
+        :checked="isChecked"
+        :disabled="isDisabled"
+        :name="radioName"
+        :value="label"
+        @change="onChange"
+      />
+      <span class="qiu-radio__inner" />
+    </span>
+    <span v-if="$slots.default || label !== undefined" class="qiu-radio__label">
+      <slot>{{ label }}</slot>
+    </span>
+  </label>
+</template>
+
+<script lang="ts" setup>
+import type { QiuRadioGroupContext } from './types'
+
+defineOptions({ name: 'QiuRadio' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number | boolean
+    label?: string | number | boolean
+    disabled?: boolean
+    border?: boolean
+  }>(),
+  {
+    disabled: false,
+    border: false,
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [string | number | boolean]
+  change: [string | number | boolean]
+}>()
+
+const groupCtx = inject<QiuRadioGroupContext | null>('qiuRadioGroup', null)
+const fallbackName = `qiu-radio-${Math.random().toString(36).slice(2, 9)}`
+
+const isDisabled = computed(() => props.disabled || groupCtx?.disabled.value)
+const isButton = computed(() => groupCtx?.type?.value === 'button')
+
+const isChecked = computed(() => {
+  const current = groupCtx ? groupCtx.modelValue.value : props.modelValue
+  return current === props.label
+})
+
+const radioName = computed(() => groupCtx?.name.value || fallbackName)
+
+const onChange = () => {
+  if (isDisabled.value || props.label === undefined) return
+  if (groupCtx) {
+    groupCtx.changeEvent(props.label)
+  } else {
+    emit('update:modelValue', props.label)
+    emit('change', props.label)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.qiu-radio {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  height: 32px;
+  margin-right: 16px;
+  font-size: 14px;
+  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}
+
+.qiu-radio__input {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.qiu-radio__original {
+  position: absolute;
+  z-index: -1;
+  width: 0;
+  height: 0;
+  margin: 0;
+  opacity: 0;
+}
+
+.qiu-radio__inner {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  background: var(--qiu-bg-color, #fff);
+  border: 1px solid var(--qiu-border-color, #dcdfe6);
+  border-radius: 50% !important;
+  transition: border-color 0.2s ease;
+}
+
+.qiu-radio__inner::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  width: 6px;
+  height: 6px;
+  content: '';
+  background-color: #fff;
+  border-radius: 50% !important;
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out;
+}
+
+.qiu-radio.is-checked .qiu-radio__inner,
+.is-checked .qiu-radio__inner {
+  background-color: var(--qiu-color-primary, #409eff);
+  border-color: var(--qiu-color-primary, #409eff);
+}
+
+.qiu-radio.is-checked .qiu-radio__inner::after,
+.is-checked .qiu-radio__inner::after {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.qiu-radio__label {
+  line-height: 1;
+}
+
+.qiu-radio.is-border {
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid var(--qiu-border-color, #dcdfe6);
+  border-radius: 4px;
+
+  &.is-checked {
+    border-color: var(--qiu-color-primary, var(--qiu-color-primary));
+  }
+}
+
+.qiu-radio.is-button {
+  height: 32px;
+  padding: 0 16px;
+  margin: 0;
+  background: #fff;
+  border: 1px solid var(--qiu-border-color, #dcdfe6);
+  border-left-width: 0;
+
+  &:first-child {
+    border-left-width: 1px;
+    border-radius: 4px 0 0 4px;
+  }
+
+  &:last-child {
+    border-radius: 0 4px 4px 0;
+  }
+
+  .qiu-radio__input {
+    display: none;
+  }
+
+  &.is-checked {
+    color: #fff;
+    background: var(--qiu-color-primary, var(--qiu-color-primary));
+    border-color: var(--qiu-color-primary, var(--qiu-color-primary));
+  }
+}
+</style>

package/components/QiuRadio/types.ts

@@ -0,0 +1,9 @@
+import type { ComputedRef, Ref } from 'vue'
+
+export interface QiuRadioGroupContext {
+  modelValue: Ref<string | number | boolean | undefined>
+  disabled: Ref<boolean>
+  name: Ref<string>
+  type?: ComputedRef<'default' | 'button'>
+  changeEvent: (val: string | number | boolean) => void
+}

package/components/QiuRate/index.vue

@@ -0,0 +1,184 @@
+<template>
+  <div
+    class="qiu-rate"
+    :class="{ 'is-disabled': disabled, 'is-readonly': readonly }"
+    role="slider"
+    :aria-valuenow="modelValue"
+    :aria-valuemin="0"
+    :aria-valuemax="max"
+  >
+    <button
+      v-for="i in max"
+      :key="i"
+      type="button"
+      class="qiu-rate__item"
+      :class="{
+        'is-active': displayValue >= i,
+        'is-half': allowHalf && displayValue + 0.5 === i,
+      }"
+      :disabled="disabled || readonly"
+      @mousemove="onMove($event, i)"
+      @mouseleave="hoverValue = -1"
+      @click="onClick($event, i)"
+    >
+      <span class="qiu-rate__icon qiu-rate__icon--void">
+        <qiu-icon :icon="voidIcon" />
+      </span>
+      <span
+        class="qiu-rate__icon qiu-rate__icon--full"
+        :style="fullStyle(i)"
+      >
+        <qiu-icon :icon="icon" />
+      </span>
+    </button>
+    <span v-if="showScore || showText" class="qiu-rate__text">
+      {{ text }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuRate' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number
+    max?: number
+    disabled?: boolean
+    readonly?: boolean
+    allowHalf?: boolean
+    showScore?: boolean
+    showText?: boolean
+    texts?: string[]
+    colors?: string[]
+    voidColor?: string
+    icon?: string
+    voidIcon?: string
+  }>(),
+  {
+    modelValue: 0,
+    max: 5,
+    disabled: false,
+    readonly: false,
+    allowHalf: false,
+    showScore: false,
+    showText: false,
+    texts: () => ['极差', '失望', '一般', '满意', '惊喜'],
+    colors: () => ['#f7ba2a', '#f7ba2a', '#f7ba2a'],
+    voidColor: '#c0c4cc',
+    icon: 'star-fill',
+    voidIcon: 'star-line',
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [number]
+  change: [number]
+}>()
+
+const hoverValue = ref(-1)
+
+const voidColor = computed(() => props.voidColor)
+
+const displayValue = computed(() =>
+  hoverValue.value >= 0 ? hoverValue.value : props.modelValue
+)
+
+const activeColor = computed(() => {
+  const v = displayValue.value
+  const colors = props.colors
+  if (v <= props.max / 3) return colors[0] || '#f7ba2a'
+  if (v <= (props.max * 2) / 3) return colors[1] || colors[0] || '#f7ba2a'
+  return colors[2] || colors[1] || colors[0] || '#f7ba2a'
+})
+
+const text = computed(() => {
+  if (props.showScore) return String(displayValue.value)
+  if (!props.showText) return ''
+  const idx = Math.ceil(displayValue.value) - 1
+  return props.texts[Math.max(0, Math.min(props.texts.length - 1, idx))] || ''
+})
+
+const fullStyle = (i: number) => {
+  const v = displayValue.value
+  let width = '0%'
+  if (v >= i) width = '100%'
+  else if (props.allowHalf && v + 0.5 >= i && v < i) width = '50%'
+  return {
+    width,
+    color: activeColor.value,
+  }
+}
+
+const resolveHalf = (e: MouseEvent, i: number) => {
+  if (!props.allowHalf) return i
+  const el = e.currentTarget as HTMLElement
+  const rect = el.getBoundingClientRect()
+  return e.clientX - rect.left < rect.width / 2 ? i - 0.5 : i
+}
+
+const onMove = (e: MouseEvent, i: number) => {
+  if (props.disabled || props.readonly) return
+  hoverValue.value = resolveHalf(e, i)
+}
+
+const onClick = (e: MouseEvent, i: number) => {
+  if (props.disabled || props.readonly) return
+  const next = resolveHalf(e, i)
+  emit('update:modelValue', next)
+  emit('change', next)
+}
+</script>
+
+<style lang="scss" scoped>
+.qiu-rate {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  height: 32px;
+  line-height: 1;
+  vertical-align: middle;
+
+  &.is-disabled,
+  &.is-readonly {
+    .qiu-rate__item {
+      cursor: default;
+    }
+  }
+}
+
+.qiu-rate__item {
+  position: relative;
+  display: inline-flex;
+  padding: 0;
+  font-size: 18px;
+  color: v-bind(voidColor);
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+}
+
+.qiu-rate__icon {
+  display: inline-flex;
+  line-height: 1;
+
+  &--full {
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
+
+.qiu-rate__text {
+  margin-left: 6px;
+  font-size: 14px;
+  color: var(--qiu-text-color-regular, #606266);
+}
+</style>

package/components/QiuRefresh/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <qiu-icon :class="className" icon="refresh-line" @click="refreshRoute" />
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'QiuRefresh',
+})
+
+const className = ref<string>('')
+
+const $pub = inject<(...args: any[]) => void>('$pub')
+const $sub = inject<(...args: any[]) => void>('$sub')
+
+const rotate = () => {
+  className.value = 'rotate'
+  setTimeout(() => {
+    className.value = ''
+  }, 500)
+}
+
+const refreshRoute = () => {
+  $pub?.('reload-router-view')
+  rotate()
+}
+
+onBeforeMount(() => {
+  $sub?.('refresh-rotate', () => {
+    rotate()
+  })
+})
+</script>

package/components/QiuResult/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="qiu-result" :class="icon ? `qiu-result--${icon}` : ''">
+    <div class="qiu-result__icon">
+      <slot name="icon">
+        <qiu-icon v-if="resolvedIcon" :icon="resolvedIcon" />
+      </slot>
+    </div>
+    <div v-if="title || $slots.title" class="qiu-result__title">
+      <slot name="title">{{ title }}</slot>
+    </div>
+    <div v-if="subTitle || $slots['sub-title']" class="qiu-result__subtitle">
+      <slot name="sub-title">{{ subTitle }}</slot>
+    </div>
+    <div v-if="$slots.extra" class="qiu-result__extra">
+      <slot name="extra" />
+    </div>
+    <div v-if="$slots.default" class="qiu-result__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuResult' })
+
+const props = withDefaults(
+  defineProps<{
+    icon?: 'success' | 'warning' | 'info' | 'error' | ''
+    title?: string
+    subTitle?: string
+  }>(),
+  {
+    icon: '',
+    title: '',
+    subTitle: '',
+  }
+)
+
+const iconMap: Record<string, string> = {
+  success: 'checkbox-circle-line',
+  warning: 'error-warning-line',
+  info: 'information-line',
+  error: 'close-circle-line',
+}
+
+const resolvedIcon = computed(() => (props.icon ? iconMap[props.icon] || '' : ''))
+</script>
+
+<style lang="scss" scoped>
+.qiu-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 40px 24px;
+  text-align: center;
+}
+
+.qiu-result__icon {
+  font-size: 64px;
+  line-height: 1;
+  color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
+}
+
+.qiu-result--success .qiu-result__icon {
+  color: var(--qiu-color-success, var(--qiu-color-success, #67c23a));
+}
+
+.qiu-result--warning .qiu-result__icon {
+  color: var(--qiu-color-warning, var(--qiu-color-warning, #e6a23c));
+}
+
+.qiu-result--error .qiu-result__icon {
+  color: var(--qiu-color-danger, var(--qiu-color-danger, #f56c6c));
+}
+
+.qiu-result--info .qiu-result__icon {
+  color: var(--qiu-color-info, var(--qiu-color-info, #909399));
+}
+
+.qiu-result__title {
+  margin-top: 20px;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
+}
+
+.qiu-result__subtitle {
+  margin-top: 8px;
+  font-size: var(--qiu-font-size, 14px);
+  line-height: 1.6;
+  color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
+}
+
+.qiu-result__extra {
+  margin-top: 24px;
+}
+
+.qiu-result__content {
+  width: 100%;
+  margin-top: 24px;
+}
+</style>

package/components/QiuRow/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="qiu-row" :style="rowStyle">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { QIU_ROW_KEY, type QiuRowContext } from './types'
+
+defineOptions({ name: 'QiuRow' })
+
+const props = withDefaults(
+  defineProps<{
+    gutter?: number
+    justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'
+    align?: 'top' | 'middle' | 'bottom'
+    tag?: string
+  }>(),
+  {
+    gutter: 0,
+    justify: 'start',
+    align: 'top',
+    tag: 'div',
+  }
+)
+
+const gutterRef = computed(() => props.gutter || 0)
+
+provide<QiuRowContext>(QIU_ROW_KEY, {
+  gutter: gutterRef,
+})
+
+const rowStyle = computed(() => {
+  const g = props.gutter || 0
+  return {
+    marginLeft: g ? `${-g / 2}px` : undefined,
+    marginRight: g ? `${-g / 2}px` : undefined,
+    justifyContent:
+      props.justify === 'start'
+        ? 'flex-start'
+        : props.justify === 'end'
+          ? 'flex-end'
+          : props.justify === 'center'
+            ? 'center'
+            : props.justify,
+    alignItems:
+      props.align === 'top' ? 'flex-start' : props.align === 'bottom' ? 'flex-end' : 'center',
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-row {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  box-sizing: border-box;
+}
+</style>

package/components/QiuRow/types.ts

@@ -0,0 +1,5 @@
+export const QIU_ROW_KEY = Symbol('qiuRow')
+
+export interface QiuRowContext {
+  gutter: import('vue').Ref<number>
+}

package/components/QiuScrollbar/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div
+    ref="rootRef"
+    class="qiu-scrollbar"
+    :class="[wrapClass, { 'qiu-scrollbar--native': native }]"
+    :style="wrapStyle"
+    @scroll="onScroll"
+  >
+    <div class="qiu-scrollbar__view">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuScrollbar' })
+
+const props = withDefaults(
+  defineProps<{
+    maxHeight?: string | number
+    height?: string | number
+    native?: boolean
+    wrapClass?: string | string[] | Record<string, boolean>
+  }>(),
+  {
+    native: true,
+  }
+)
+
+const emit = defineEmits<{
+  scroll: [payload: { scrollTop: number; scrollLeft: number }]
+}>()
+
+const rootRef = ref<HTMLElement | null>(null)
+
+const toCssSize = (v?: string | number) => {
+  if (v === undefined || v === null || v === '') return undefined
+  return typeof v === 'number' ? `${v}px` : String(v)
+}
+
+const wrapStyle = computed(() => {
+  const style: Record<string, string> = {}
+  const maxH = toCssSize(props.maxHeight)
+  const h = toCssSize(props.height)
+  if (maxH) style.maxHeight = maxH
+  if (h) style.height = h
+  return style
+})
+
+const onScroll = (e: Event) => {
+  const t = e.target as HTMLElement
+  emit('scroll', { scrollTop: t.scrollTop, scrollLeft: t.scrollLeft })
+}
+
+const setScrollTop = (top: number) => {
+  if (rootRef.value) rootRef.value.scrollTop = top
+}
+
+const setScrollLeft = (left: number) => {
+  if (rootRef.value) rootRef.value.scrollLeft = left
+}
+
+defineExpose({
+  wrapRef: rootRef,
+  $el: rootRef,
+  setScrollTop,
+  setScrollLeft,
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-scrollbar {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+
+  scrollbar-width: thin;
+  scrollbar-color: var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #e4e7ed)) transparent;
+
+  &::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--qiu-border-color, var(--qiu-border-color, #dcdfe6));
+    border-radius: 2px;
+
+    &:hover {
+      background: var(--qiu-text-color-placeholder, var(--qiu-text-color-placeholder, #a8abb2));
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+
+.qiu-scrollbar__view {
+  min-height: 100%;
+  min-width: 100%;
+}
+</style>