foucui 1.0.1 → 2.0.0

package/components/QiuBadgeDot/index.vue

@@ -1,87 +0,0 @@
-<template>
-  <span class="qiu-badge-dot" :class="{ 'is-dot': isDot }">
-    <slot />
-    <sup
-      v-if="!hidden && (isDot || displayValue !== null)"
-      class="qiu-badge-dot__content"
-      :class="{
-        'is-dot': isDot,
-        'is-fixed': !!$slots.default,
-      }"
-    >
-      <template v-if="!isDot">{{ displayValue }}</template>
-    </sup>
-  </span>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'QiuBadgeDot' })
-
-const props = withDefaults(
-  defineProps<{
-    value?: string | number
-    max?: number
-    isDot?: boolean
-    hidden?: boolean
-  }>(),
-  {
-    value: '',
-    max: 99,
-    isDot: false,
-    hidden: false,
-  }
-)
-
-const displayValue = computed(() => {
-  if (props.isDot) return null
-  const raw = props.value
-  if (raw === '' || raw === undefined || raw === null) return null
-  const num = Number(raw)
-  if (!Number.isNaN(num) && num > props.max) return `${props.max}+`
-  return String(raw)
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-badge-dot {
-  position: relative;
-  display: inline-flex;
-  vertical-align: middle;
-}
-
-.qiu-badge-dot__content {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 6px;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 18px;
-  color: #fff;
-  white-space: nowrap;
-  background: var(--qiu-color-danger, var(--qiu-color-danger, #f56c6c));
-  border: 1px solid var(--qiu-bg-color, var(--qiu-bg-color, #fff));
-  border-radius: 10px;
-  box-sizing: border-box;
-  transform: translate(50%, -50%);
-  transform-origin: 100% 0;
-
-  &.is-fixed {
-    position: absolute;
-  }
-
-  &.is-dot {
-    min-width: 8px;
-    width: 8px;
-    height: 8px;
-    padding: 0;
-    border-radius: 50%;
-  }
-}
-</style>

package/components/QiuButton/index.vue

@@ -1,247 +0,0 @@
-<template>
-  <component
-    :is="tag"
-    class="qiu-button"
-    :class="buttonClass"
-    :type="tag === 'button' ? nativeType : undefined"
-    :disabled="disabled || loading"
-    :style="colorStyle"
-    v-bind="$attrs"
-    @click="onClick"
-  >
-    <span v-if="loading" class="qiu-button__loading" aria-hidden="true" />
-    <span v-if="!loading && (icon || $slots.icon)" class="qiu-button__icon">
-      <slot name="icon">
-        <qiu-icon v-if="icon" :icon="icon" />
-      </slot>
-    </span>
-    <span v-if="$slots.default" class="qiu-button__label"><slot /></span>
-    <span v-if="iconRight || $slots.iconRight" class="qiu-button__icon-right">
-      <slot name="iconRight">
-        <qiu-icon v-if="iconRight" :icon="iconRight" />
-      </slot>
-    </span>
-  </component>
-</template>
-
-<script lang="ts" setup>
-/**
- * QiuButton — 纯自研多色按钮（无 Element Plus）
- */
-defineOptions({
-  name: 'QiuButton',
-  inheritAttrs: false,
-})
-
-const QIU_BUTTON_COLORS: Record<string, string> = {
-  primary: 'var(--qiu-color-primary, var(--qiu-color-primary, #0f766e))',
-  success: 'var(--qiu-color-success, var(--qiu-color-success, #67c23a))',
-  warning: 'var(--qiu-color-warning, var(--qiu-color-warning, #e6a23c))',
-  danger: 'var(--qiu-color-danger, var(--qiu-color-danger, #f56c6c))',
-  info: 'var(--qiu-color-info, var(--qiu-color-info, #909399))',
-  cyan: '#0ea5e9',
-  orange: '#f97316',
-  pink: '#ec4899',
-  teal: '#14b8a6',
-  gray: '#64748b',
-  magenta: '#d946ef',
-  lime: '#84cc16',
-  brown: '#a16207',
-}
-
-type QiuButtonType = 'default' | keyof typeof QIU_BUTTON_COLORS | string
-
-const props = withDefaults(
-  defineProps<{
-    type?: QiuButtonType
-    color?: string
-    size?: 'large' | 'default' | 'small'
-    plain?: boolean
-    text?: boolean
-    link?: boolean
-    round?: boolean
-    circle?: boolean
-    disabled?: boolean
-    loading?: boolean
-    nativeType?: 'button' | 'submit' | 'reset'
-    tag?: string
-    icon?: string
-    iconRight?: string
-  }>(),
-  {
-    type: 'default',
-    plain: false,
-    text: false,
-    link: false,
-    round: false,
-    circle: false,
-    disabled: false,
-    loading: false,
-    nativeType: 'button',
-    tag: 'button',
-  }
-)
-
-const emit = defineEmits<{ click: [e: MouseEvent] }>()
-
-const groupSize = inject<Ref<'large' | 'default' | 'small'> | null>('qiuButtonGroupSize', null)
-const resolvedSize = computed(() => props.size || groupSize?.value || 'default')
-
-const resolvedHue = computed(() => {
-  if (props.color) return props.color
-  if (props.type && props.type !== 'default' && QIU_BUTTON_COLORS[props.type]) {
-    return QIU_BUTTON_COLORS[props.type]
-  }
-  return ''
-})
-
-const colorStyle = computed(() => {
-  if (!resolvedHue.value) return undefined
-  return { '--qiu-btn-color': resolvedHue.value } as Record<string, string>
-})
-
-const buttonClass = computed(() => [
-  `qiu-button--${resolvedSize.value}`,
-  {
-    'qiu-button--default': props.type === 'default' && !props.color,
-    'qiu-button--colored': !!resolvedHue.value,
-    'qiu-button--plain': props.plain,
-    'qiu-button--text': props.text,
-    'qiu-button--link': props.link,
-    'qiu-button--round': props.round,
-    'qiu-button--circle': props.circle,
-    'is-disabled': props.disabled || props.loading,
-    'is-loading': props.loading,
-  },
-])
-
-const onClick = (e: MouseEvent) => {
-  if (props.disabled || props.loading) {
-    e.preventDefault()
-    return
-  }
-  emit('click', e)
-}
-</script>
-
-<style lang="scss" scoped>
-.qiu-button {
-  --qiu-btn-color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
-  display: inline-flex;
-  gap: 6px;
-  align-items: center;
-  justify-content: center;
-  margin: 0;
-  font-weight: 500;
-  font-size: var(--qiu-font-size, 14px);
-  line-height: 1;
-  white-space: nowrap;
-  text-align: center;
-  vertical-align: middle;
-  appearance: none;
-  cursor: pointer;
-  user-select: none;
-  border: 1px solid var(--qiu-border-color, var(--qiu-border-color, #dcdfe6));
-  border-radius: var(--qiu-border-radius, 4px);
-  background: var(--qiu-fill-color-blank, #fff);
-  color: var(--qiu-text-color-regular, #606266);
-  transition:
-    color var(--qiu-transition, 0.2s),
-    background var(--qiu-transition, 0.2s),
-    border-color var(--qiu-transition, 0.2s);
-
-  &--large {
-    height: var(--qiu-component-size-large, 40px);
-    padding: 0 18px;
-    font-size: 15px;
-  }
-  &--default {
-    height: var(--qiu-component-size, 32px);
-    padding: 0 14px;
-  }
-  &--small {
-    height: var(--qiu-component-size-small, 24px);
-    padding: 0 10px;
-    font-size: var(--qiu-font-size-small, 13px);
-  }
-
-  &--colored:not(.qiu-button--plain):not(.qiu-button--text):not(.qiu-button--link) {
-    color: #fff;
-    background: var(--qiu-btn-color);
-    border-color: var(--qiu-btn-color);
-    &:hover:not(.is-disabled) {
-      filter: brightness(1.08);
-    }
-  }
-
-  &--colored.qiu-button--plain {
-    color: var(--qiu-btn-color);
-    background: color-mix(in srgb, var(--qiu-btn-color) 10%, #fff);
-    border-color: color-mix(in srgb, var(--qiu-btn-color) 45%, #fff);
-    &:hover:not(.is-disabled) {
-      color: #fff;
-      background: var(--qiu-btn-color);
-      border-color: var(--qiu-btn-color);
-    }
-  }
-
-  &--text,
-  &--link {
-    height: auto;
-    padding: 0 4px;
-    border-color: transparent;
-    background: transparent;
-    color: var(--qiu-btn-color, var(--qiu-text-color-regular, #606266));
-    &:hover:not(.is-disabled) {
-      opacity: 0.8;
-    }
-  }
-
-  &--link {
-    padding: 0;
-  }
-
-  &--round {
-    border-radius: var(--qiu-border-radius-round, 20px);
-  }
-
-  &--circle {
-    width: var(--qiu-component-size, 32px);
-    padding: 0;
-    border-radius: 50%;
-    &.qiu-button--large {
-      width: var(--qiu-component-size-large, 40px);
-    }
-    &.qiu-button--small {
-      width: var(--qiu-component-size-small, 24px);
-    }
-  }
-
-  &.is-disabled {
-    cursor: not-allowed;
-    opacity: 0.55;
-  }
-
-  &__loading {
-    width: 1em;
-    height: 1em;
-    border: 2px solid currentColor;
-    border-right-color: transparent;
-    border-radius: 50%;
-    animation: qiu-btn-spin 0.7s linear infinite;
-  }
-
-  &__icon,
-  &__icon-right {
-    display: inline-flex;
-    align-items: center;
-    line-height: 1;
-  }
-}
-
-@keyframes qiu-btn-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-</style>

package/components/QiuButtonGroup/index.vue

@@ -1,63 +0,0 @@
-<template>
-  <div class="qiu-button-group" :class="groupClass" role="group" v-bind="$attrs">
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'QiuButtonGroup' })
-
-const props = withDefaults(
-  defineProps<{
-    size?: 'large' | 'default' | 'small'
-    vertical?: boolean
-  }>(),
-  { size: 'default', vertical: false }
-)
-
-const groupClass = computed(() => ({
-  'qiu-button-group--vertical': props.vertical,
-  [`qiu-button-group--${props.size}`]: true,
-}))
-
-provide('qiuButtonGroupSize', toRef(props, 'size'))
-</script>
-
-<style lang="scss" scoped>
-.qiu-button-group {
-  display: inline-flex;
-  vertical-align: middle;
-
-  :deep(.qiu-button) {
-    border-radius: 0;
-    & + .qiu-button {
-      margin-left: -1px;
-    }
-    &:first-child {
-      border-top-left-radius: var(--qiu-border-radius, 4px);
-      border-bottom-left-radius: var(--qiu-border-radius, 4px);
-    }
-    &:last-child {
-      border-top-right-radius: var(--qiu-border-radius, 4px);
-      border-bottom-right-radius: var(--qiu-border-radius, 4px);
-    }
-  }
-
-  &--vertical {
-    flex-direction: column;
-    :deep(.qiu-button) {
-      width: 100%;
-      & + .qiu-button {
-        margin-left: 0;
-        margin-top: -1px;
-      }
-      &:first-child {
-        border-radius: var(--qiu-border-radius, 4px) var(--qiu-border-radius, 4px) 0 0;
-      }
-      &:last-child {
-        border-radius: 0 0 var(--qiu-border-radius, 4px) var(--qiu-border-radius, 4px);
-      }
-    }
-  }
-}
-</style>