foucui 1.0.1 → 1.0.2

package/components/QiuRadio/index.vue

@@ -1,191 +0,0 @@
-<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

@@ -1,9 +0,0 @@
-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

@@ -1,184 +0,0 @@
-<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

@@ -1,32 +0,0 @@
-<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

@@ -1,103 +0,0 @@
-<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

@@ -1,60 +0,0 @@
-<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

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

package/components/QiuScrollbar/index.vue

@@ -1,107 +0,0 @@
-<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>