foucui 1.0.1 → 2.0.0

package/components/QiuPagination/index.vue

@@ -1,421 +0,0 @@
-<template>
-  <div
-    v-if="!hideOnSinglePage || pageCount > 1"
-    class="qiu-pagination"
-    :class="[
-      `qiu-pagination--${type}`,
-      `qiu-pagination--${variant}`,
-      {
-        'is-background': background,
-        'is-small': small,
-        'is-disabled': disabled,
-      },
-    ]"
-    :style="colorStyle"
-  >
-    <span v-if="showTotal" class="qiu-pagination__total">
-      共 {{ total }} 条
-    </span>
-
-    <div v-if="showSizes" class="qiu-pagination__sizes">
-      <select
-        class="qiu-pagination__select"
-        :disabled="disabled"
-        :value="pageSize"
-        @change="onSizeChange"
-      >
-        <option v-for="size in pageSizes" :key="size" :value="size">
-          {{ size }} 条/页
-        </option>
-      </select>
-    </div>
-
-    <button
-      v-if="showPrev"
-      type="button"
-      class="qiu-pagination__btn qiu-pagination__prev"
-      :disabled="disabled || currentPage <= 1"
-      @click="goPrev"
-    >
-      ‹
-    </button>
-
-    <ul v-if="showPager" class="qiu-pagination__pager">
-      <li
-        v-for="page in pagerList"
-        :key="page.key"
-        class="qiu-pagination__page"
-        :class="{
-          'is-active': page.number === currentPage,
-          'is-ellipsis': page.ellipsis,
-        }"
-      >
-        <button
-          v-if="!page.ellipsis"
-          type="button"
-          class="qiu-pagination__page-btn"
-          :disabled="disabled"
-          @click="goPage(page.number!)"
-        >
-          {{ page.number }}
-        </button>
-        <span v-else class="qiu-pagination__ellipsis">…</span>
-      </li>
-    </ul>
-
-    <button
-      v-if="showNext"
-      type="button"
-      class="qiu-pagination__btn qiu-pagination__next"
-      :disabled="disabled || currentPage >= pageCount"
-      @click="goNext"
-    >
-      ›
-    </button>
-
-    <div v-if="showJumper" class="qiu-pagination__jumper">
-      <span>前往</span>
-      <input
-        v-model="jumperValue"
-        class="qiu-pagination__jumper-input"
-        type="text"
-        :disabled="disabled"
-        @keydown.enter="onJumperEnter"
-      />
-      <span>页</span>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-/**
- * QiuPagination / QiuPage — 自研分页（多色 + 多风格）
- */
-defineOptions({ name: 'QiuPagination' })
-
-const PAGE_COLORS: Record<string, string> = {
-  primary: 'var(--qiu-color-primary, #0f766e)',
-  success: 'var(--qiu-color-success, #67c23a)',
-  warning: 'var(--qiu-color-warning, #e6a23c)',
-  danger: 'var(--qiu-color-danger, #f56c6c)',
-  info: 'var(--qiu-color-info, #909399)',
-  cyan: '#0ea5e9',
-  orange: '#f97316',
-  pink: '#ec4899',
-  teal: '#14b8a6',
-}
-
-const props = withDefaults(
-  defineProps<{
-    total?: number
-    currentPage?: number
-    pageSize?: number
-    pageSizes?: number[]
-    layout?: string
-    background?: boolean
-    disabled?: boolean
-    hideOnSinglePage?: boolean
-    small?: boolean
-    pagerCount?: number
-    /** 主题色 */
-    type?: keyof typeof PAGE_COLORS | string
-    /** 任意色值，优先于 type */
-    color?: string
-    /** 风格 */
-    variant?: 'default' | 'plain' | 'pill' | 'outline' | 'soft'
-  }>(),
-  {
-    total: 0,
-    currentPage: 1,
-    pageSize: 10,
-    pageSizes: () => [10, 20, 50, 100],
-    layout: 'total, sizes, prev, pager, next, jumper',
-    background: true,
-    disabled: false,
-    hideOnSinglePage: false,
-    small: false,
-    pagerCount: 7,
-    type: 'primary',
-    variant: 'default',
-  }
-)
-
-const emit = defineEmits<{
-  'update:current-page': [number]
-  'update:page-size': [number]
-  'current-change': [number]
-  'size-change': [number]
-}>()
-
-const jumperValue = ref('')
-
-const colorStyle = computed(() => {
-  const hue = props.color || PAGE_COLORS[props.type] || PAGE_COLORS.primary
-  return { '--qiu-page-color': hue } as Record<string, string>
-})
-
-const layoutItems = computed(() =>
-  props.layout.split(',').map((s) => s.trim()).filter(Boolean)
-)
-
-const showTotal = computed(() => layoutItems.value.includes('total'))
-const showSizes = computed(() => layoutItems.value.includes('sizes'))
-const showPrev = computed(() => layoutItems.value.includes('prev'))
-const showPager = computed(() => layoutItems.value.includes('pager'))
-const showNext = computed(() => layoutItems.value.includes('next'))
-const showJumper = computed(() => layoutItems.value.includes('jumper'))
-
-const pageCount = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)))
-
-interface PagerItem {
-  key: string
-  number?: number
-  ellipsis?: boolean
-}
-
-const pagerList = computed((): PagerItem[] => {
-  const totalPages = pageCount.value
-  const current = props.currentPage
-  const count = props.pagerCount
-  const half = Math.floor(count / 2)
-
-  if (totalPages <= count) {
-    return Array.from({ length: totalPages }, (_, i) => ({
-      key: `p-${i + 1}`,
-      number: i + 1,
-    }))
-  }
-
-  const pages: PagerItem[] = []
-  pages.push({ key: 'p-1', number: 1 })
-
-  let start = Math.max(2, current - half)
-  let end = Math.min(totalPages - 1, current + half)
-
-  if (current <= half + 1) {
-    end = count - 2
-  } else if (current >= totalPages - half) {
-    start = totalPages - count + 2
-  }
-
-  if (start > 2) pages.push({ key: 'e-start', ellipsis: true })
-
-  for (let i = start; i <= end; i++) {
-    pages.push({ key: `p-${i}`, number: i })
-  }
-
-  if (end < totalPages - 1) pages.push({ key: 'e-end', ellipsis: true })
-
-  pages.push({ key: `p-${totalPages}`, number: totalPages })
-  return pages
-})
-
-const setCurrentPage = (page: number) => {
-  const next = Math.min(Math.max(1, page), pageCount.value)
-  if (next === props.currentPage) return
-  emit('update:current-page', next)
-  emit('current-change', next)
-}
-
-const setPageSize = (size: number) => {
-  if (size === props.pageSize) return
-  emit('update:page-size', size)
-  emit('size-change', size)
-  const maxPage = Math.max(1, Math.ceil(props.total / size))
-  if (props.currentPage > maxPage) {
-    setCurrentPage(maxPage)
-  }
-}
-
-const goPrev = () => setCurrentPage(props.currentPage - 1)
-const goNext = () => setCurrentPage(props.currentPage + 1)
-const goPage = (page: number) => setCurrentPage(page)
-
-const onSizeChange = (e: Event) => {
-  const val = Number((e.target as HTMLSelectElement).value)
-  if (!Number.isNaN(val)) setPageSize(val)
-}
-
-const onJumperEnter = () => {
-  const val = parseInt(jumperValue.value, 10)
-  if (!Number.isNaN(val)) {
-    setCurrentPage(val)
-    jumperValue.value = ''
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.qiu-pagination {
-  --qiu-page-color: var(--qiu-color-primary, #0f766e);
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-  font-size: 14px;
-  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
-
-  &.is-small {
-    font-size: 12px;
-
-    .qiu-pagination__btn,
-    .qiu-pagination__page-btn,
-    .qiu-pagination__select,
-    .qiu-pagination__jumper-input {
-      min-width: 24px;
-      height: 24px;
-    }
-  }
-
-  &.is-disabled {
-    opacity: 0.6;
-    pointer-events: none;
-  }
-
-  &__total {
-    display: inline-flex;
-    align-items: center;
-    height: 32px;
-    margin-right: 4px;
-    color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
-  }
-
-  &__select {
-    height: 32px;
-    padding: 0 8px;
-    color: inherit;
-    cursor: pointer;
-    background: var(--qiu-bg-color, var(--qiu-bg-color, #fff));
-    border: 1px solid var(--qiu-border-color, var(--qiu-border-color, #dcdfe6));
-    border-radius: var(--qiu-border-radius-base, 4px);
-    outline: none;
-  }
-
-  &__btn,
-  &__page-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 32px;
-    height: 32px;
-    padding: 0 6px;
-    font-size: inherit;
-    color: inherit;
-    cursor: pointer;
-    background: var(--qiu-bg-color, #fff);
-    border: 1px solid var(--qiu-border-color, #dcdfe6);
-    border-radius: var(--qiu-border-radius-base, 4px);
-    outline: none;
-    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
-
-    &:hover:not(:disabled) {
-      color: var(--qiu-page-color);
-      border-color: color-mix(in srgb, var(--qiu-page-color) 55%, #fff);
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-  }
-
-  &.is-background {
-    .qiu-pagination__btn,
-    .qiu-pagination__page-btn {
-      background: var(--qiu-fill-color-light, #f5f7fa);
-      border-color: transparent;
-    }
-  }
-
-  &__pager {
-    display: inline-flex;
-    gap: 4px;
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
-
-  &__page.is-active .qiu-pagination__page-btn {
-    color: #fff;
-    background: var(--qiu-page-color);
-    border-color: var(--qiu-page-color);
-  }
-
-  &__ellipsis {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 32px;
-    height: 32px;
-    color: var(--qiu-text-color-secondary, #909399);
-  }
-
-  &__jumper {
-    display: inline-flex;
-    gap: 6px;
-    align-items: center;
-    margin-left: 4px;
-  }
-
-  &__jumper-input {
-    width: 48px;
-    height: 32px;
-    padding: 0 6px;
-    text-align: center;
-    color: inherit;
-    background: var(--qiu-bg-color, #fff);
-    border: 1px solid var(--qiu-border-color, #dcdfe6);
-    border-radius: var(--qiu-border-radius-base, 4px);
-    outline: none;
-
-    &:focus {
-      border-color: var(--qiu-page-color);
-    }
-  }
-
-  /* variants */
-  &--pill {
-    .qiu-pagination__btn,
-    .qiu-pagination__page-btn,
-    .qiu-pagination__select,
-    .qiu-pagination__jumper-input {
-      border-radius: 999px;
-    }
-  }
-
-  &--plain {
-    .qiu-pagination__page.is-active .qiu-pagination__page-btn {
-      color: var(--qiu-page-color);
-      background: transparent;
-      border-color: var(--qiu-page-color);
-    }
-  }
-
-  &--outline {
-    .qiu-pagination__btn,
-    .qiu-pagination__page-btn {
-      background: transparent;
-    }
-
-    .qiu-pagination__page.is-active .qiu-pagination__page-btn {
-      color: var(--qiu-page-color);
-      background: transparent;
-      border-color: var(--qiu-page-color);
-      box-shadow: inset 0 0 0 1px var(--qiu-page-color);
-    }
-  }
-
-  &--soft {
-    .qiu-pagination__btn,
-    .qiu-pagination__page-btn {
-      background: color-mix(in srgb, var(--qiu-page-color) 10%, #fff);
-      border-color: transparent;
-    }
-
-    .qiu-pagination__page.is-active .qiu-pagination__page-btn {
-      color: #fff;
-      background: var(--qiu-page-color);
-    }
-  }
-}
-</style>

package/components/QiuPasswordStrength/index.vue

@@ -1,101 +0,0 @@
-<template>
-  <div class="qiu-pwd-strength" :class="[`qiu-pwd-strength--${level.label}`]">
-    <div class="qiu-pwd-strength__bars">
-      <span
-        v-for="i in 4"
-        :key="i"
-        class="qiu-pwd-strength__bar"
-        :class="{ 'is-on': i <= level.score }"
-      />
-    </div>
-    <span v-if="showLabel" class="qiu-pwd-strength__label">{{ level.text }}</span>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue'
-
-defineOptions({ name: 'QiuPasswordStrength' })
-
-const props = withDefaults(
-  defineProps<{
-    password?: string
-    showLabel?: boolean
-  }>(),
-  {
-    password: '',
-    showLabel: true,
-  }
-)
-
-interface Level {
-  score: number
-  label: 'weak' | 'fair' | 'good' | 'strong'
-  text: string
-}
-
-const level = computed<Level>(() => {
-  const pwd = String(props.password || '')
-  if (!pwd) return { score: 0, label: 'weak', text: '' }
-
-  let score = 0
-  if (pwd.length >= 8) score++
-  if (/[A-Z]/.test(pwd) && /[a-z]/.test(pwd)) score++
-  if (/\d/.test(pwd)) score++
-  if (/[^A-Za-z0-9]/.test(pwd)) score++
-
-  // 长度特别短直接判弱
-  if (pwd.length < 6) score = Math.min(score, 1)
-
-  const map: Level[] = [
-    { score: 0, label: 'weak', text: '' },
-    { score: 1, label: 'weak', text: '弱' },
-    { score: 2, label: 'fair', text: '中' },
-    { score: 3, label: 'good', text: '强' },
-    { score: 4, label: 'strong', text: '极强' },
-  ]
-  return map[score]
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-pwd-strength {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.qiu-pwd-strength__bars {
-  display: inline-flex;
-  gap: 4px;
-}
-
-.qiu-pwd-strength__bar {
-  width: 28px;
-  height: 4px;
-  border-radius: 2px;
-  background: var(--qiu-border-color-lighter, #ebeef5);
-  transition: background 0.2s ease;
-
-  &.is-on {
-    background: var(--qiu-color-danger, #f56c6c);
-  }
-}
-
-.qiu-pwd-strength--fair .qiu-pwd-strength__bar.is-on {
-  background: var(--qiu-color-warning, #e6a23c);
-}
-
-.qiu-pwd-strength--good .qiu-pwd-strength__bar.is-on {
-  background: var(--qiu-color-primary, #409eff);
-}
-
-.qiu-pwd-strength--strong .qiu-pwd-strength__bar.is-on {
-  background: var(--qiu-color-success, #67c23a);
-}
-
-.qiu-pwd-strength__label {
-  font-size: 12px;
-  color: var(--qiu-text-color-secondary, #909399);
-}
-</style>

package/components/QiuPopconfirm/index.vue

@@ -1,196 +0,0 @@
-<template>
-  <span class="qiu-popconfirm-host">
-    <span ref="triggerRef" class="qiu-popconfirm__trigger" @click="open">
-      <slot name="reference" />
-    </span>
-
-    <Teleport to="body">
-      <Transition name="qiu-popconfirm-fade">
-        <div v-show="visible" class="qiu-popconfirm-root" :style="{ zIndex: String(zIndex) }">
-          <div class="qiu-popconfirm__mask" @click="onCancel" />
-          <div ref="popperRef" class="qiu-popconfirm" :style="popperStyle" @click.stop>
-            <div class="qiu-popconfirm__body">
-              <qiu-icon class="qiu-popconfirm__icon" icon="error-warning-line" />
-              <div class="qiu-popconfirm__title">{{ title }}</div>
-            </div>
-            <div class="qiu-popconfirm__actions">
-              <slot name="actions">
-                <qiu-button size="small" @click="onCancel">{{ cancelButtonText }}</qiu-button>
-                <qiu-button size="small" :type="confirmButtonType" @click="onConfirm">
-                  {{ confirmButtonText }}
-                </qiu-button>
-              </slot>
-            </div>
-          </div>
-        </div>
-      </Transition>
-    </Teleport>
-  </span>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'QiuPopconfirm', inheritAttrs: false })
-
-const props = withDefaults(
-  defineProps<{
-    title?: string
-    confirmButtonText?: string
-    cancelButtonText?: string
-    confirmButtonType?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default'
-    width?: string | number
-    zIndex?: number
-  }>(),
-  {
-    title: '确定执行此操作？',
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    confirmButtonType: 'primary',
-    width: 240,
-    zIndex: 2000,
-  }
-)
-
-const emit = defineEmits<{ confirm: []; cancel: [] }>()
-
-const triggerRef = ref<HTMLElement | null>(null)
-const popperRef = ref<HTMLElement | null>(null)
-const visible = ref(false)
-const popperStyle = ref<Record<string, string>>({})
-
-const resolvedWidth = computed(() =>
-  typeof props.width === 'number' ? `${props.width}px` : String(props.width)
-)
-
-const updatePosition = () => {
-  const trigger = triggerRef.value
-  const popper = popperRef.value
-  if (!trigger || !popper) return
-
-  const rect = trigger.getBoundingClientRect()
-  const popRect = popper.getBoundingClientRect()
-  const gap = 8
-  let top = rect.bottom + gap
-  let left = rect.left + rect.width / 2 - popRect.width / 2
-
-  const vw = window.innerWidth
-  left = Math.min(Math.max(8, left), vw - popRect.width - 8)
-
-  popperStyle.value = {
-    position: 'fixed',
-    top: `${top}px`,
-    left: `${left}px`,
-    width: resolvedWidth.value,
-  }
-}
-
-const open = async () => {
-  visible.value = true
-  await nextTick()
-  updatePosition()
-}
-
-const close = () => {
-  visible.value = false
-}
-
-const onConfirm = () => {
-  emit('confirm')
-  close()
-}
-
-const onCancel = () => {
-  emit('cancel')
-  close()
-}
-
-const onScrollOrResize = () => {
-  if (visible.value) updatePosition()
-}
-
-watch(visible, (v) => {
-  if (v) {
-    window.addEventListener('scroll', onScrollOrResize, true)
-    window.addEventListener('resize', onScrollOrResize)
-  } else {
-    window.removeEventListener('scroll', onScrollOrResize, true)
-    window.removeEventListener('resize', onScrollOrResize)
-  }
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('scroll', onScrollOrResize, true)
-  window.removeEventListener('resize', onScrollOrResize)
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-popconfirm-host {
-  display: inline-flex;
-  vertical-align: middle;
-}
-
-.qiu-popconfirm__trigger {
-  display: inline-flex;
-  vertical-align: middle;
-}
-
-.qiu-popconfirm-root {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-}
-
-.qiu-popconfirm__mask {
-  position: absolute;
-  inset: 0;
-  pointer-events: auto;
-  background: transparent;
-}
-
-.qiu-popconfirm {
-  pointer-events: auto;
-  padding: 12px;
-  background: var(--qiu-bg-color, var(--qiu-bg-color, #fff));
-  border: 1px solid var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
-  border-radius: 4px;
-  box-shadow: var(--qiu-box-shadow-light, 0 4px 12px rgba(0, 0, 0, 0.1));
-  box-sizing: border-box;
-}
-
-.qiu-popconfirm__body {
-  display: flex;
-  gap: 8px;
-  align-items: flex-start;
-}
-
-.qiu-popconfirm__icon {
-  flex-shrink: 0;
-  margin-top: 2px;
-  font-size: 16px;
-  color: var(--qiu-color-warning, var(--qiu-color-warning, #e6a23c));
-}
-
-.qiu-popconfirm__title {
-  flex: 1;
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
-}
-
-.qiu-popconfirm__actions {
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-  margin-top: 12px;
-}
-
-.qiu-popconfirm-fade-enter-active,
-.qiu-popconfirm-fade-leave-active {
-  transition: opacity 0.15s ease;
-}
-
-.qiu-popconfirm-fade-enter-from,
-.qiu-popconfirm-fade-leave-to {
-  opacity: 0;
-}
-</style>