foucui 1.0.1 → 2.0.0

package/components/QiuIconPicker/index.vue

@@ -1,488 +0,0 @@
-<template>
-  <div class="qiu-icon-picker">
-    <div class="qiu-icon-picker__trigger" @click="openDialog">
-      <span class="qiu-icon-picker__preview-wrap" :class="{ 'is-on': !!modelValue }">
-        <qiu-icon v-if="modelValue" :icon="modelValue" class="qiu-icon-picker__preview" />
-        <span v-else class="qiu-icon-picker__placeholder">{{ translate('选择图标') }}</span>
-      </span>
-      <qiu-input
-        :model-value="modelValue"
-        class="qiu-icon-picker__input"
-        :placeholder="placeholder"
-        clearable
-        @update:model-value="onInput"
-        @focus="openDialog"
-        @click.stop="openDialog"
-      />
-      <qiu-button size="small" @click.stop="openDialog">
-        <qiu-icon icon="apps-2-line" />
-      </qiu-button>
-    </div>
-
-    <qiu-dialog
-      v-model="visible"
-      :title="translate('选择图标')"
-      width="920px"
-      :z-index="5300"
-      :show-minimize="false"
-      :show-fullscreen="false"
-      destroy-on-close
-      @opened="onDialogOpened"
-    >
-      <div class="qiu-icon-picker__body">
-        <qiu-loading-spinner v-if="loadingLib" class="qiu-icon-picker__loading" />
-        <aside class="qiu-icon-picker__libs">
-          <button
-            v-for="lib in libraryStats"
-            :key="lib.id"
-            type="button"
-            class="qiu-icon-picker__lib"
-            :class="{ 'is-active': activeLib === lib.id }"
-            @click="switchLib(lib.id)"
-          >
-            <strong>{{ lib.name }}</strong>
-            <span>{{ lib.count }} icons</span>
-            <em>{{ lib.license }}</em>
-          </button>
-          <p class="qiu-icon-picker__license-tip">
-            {{ translate('均为免费开源图标，可商用（按需懒加载）') }}
-          </p>
-        </aside>
-
-        <div class="qiu-icon-picker__main">
-          <qiu-input
-            v-model="keyword"
-            clearable
-            :placeholder="translate('搜索图标名')"
-            class="qiu-icon-picker__search"
-            @input="page = 1"
-          >
-            <template #prefix>
-              <qiu-icon icon="search-line" />
-            </template>
-          </qiu-input>
-
-          <div class="qiu-icon-picker__meta">
-            <span>{{ filteredIcons.length }} / {{ currentCatalog.length }}</span>
-            <span v-if="modelValue" class="qiu-icon-picker__current">
-              {{ translate('当前') }}：
-              <span class="qiu-icon-picker__current-icon">
-                <qiu-icon :icon="modelValue" />
-              </span>
-              <code>{{ modelValue }}</code>
-            </span>
-            <qiu-button v-if="modelValue" link type="danger" size="small" @click="clearIcon">
-              {{ translate('清除') }}
-            </qiu-button>
-          </div>
-
-          <div class="qiu-icon-picker__grid">
-            <button
-              type="button"
-              class="qiu-icon-picker__item is-clear"
-              :title="translate('清除图标')"
-              @click="clearIcon"
-            >
-              <qiu-icon icon="delete-bin-line" />
-              <span>{{ translate('清除') }}</span>
-            </button>
-            <button
-              v-for="name in pagedIcons"
-              :key="name"
-              type="button"
-              class="qiu-icon-picker__item"
-              :class="{ 'is-active': modelValue === toValue(name) }"
-              :title="toValue(name)"
-              @click="pick(name)"
-            >
-              <qiu-icon :icon="toValue(name)" />
-              <span>{{ name }}</span>
-            </button>
-          </div>
-
-          <qiu-empty v-if="!loadingLib && !filteredIcons.length" :description="translate('无匹配图标')" />
-
-          <div v-if="pageCount > 1" class="qiu-icon-picker__pager">
-            <qiu-pagination
-              v-model:current-page="page"
-              background
-              layout="prev, pager, next, jumper"
-              :page-size="pageSize"
-              :total="filteredIcons.length"
-              small
-            />
-          </div>
-        </div>
-      </div>
-    </qiu-dialog>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import QiuLoadingSpinner from '../QiuLoading/spinner.vue'
-import { translate } from '../../src/i18n'
-import { remixIconCatalog } from './icons.catalog'
-import {
-  detectLibraryId,
-  ensureIconifyLibrary,
-  iconifyLibraries,
-  toPickerValue,
-  type IconifyLibId,
-  type IconifyLibraryDef,
-} from './iconify.libraries'
-
-defineOptions({
-  name: 'QiuIconPicker',
-})
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string
-    placeholder?: string
-  }>(),
-  {
-    modelValue: '',
-    placeholder: 'home-2-line / mdi:home',
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-}>()
-
-const visible = ref(false)
-const keyword = ref('')
-const page = ref(1)
-const pageSize = 60
-const activeLib = ref<IconifyLibId>('remix')
-const loadingLib = ref(false)
-const catalogByLib = reactive<Record<string, string[]>>({
-  remix: remixIconCatalog,
-})
-const countByLib = reactive<Record<string, number>>({
-  remix: remixIconCatalog.length,
-})
-
-const currentLib = computed(
-  () => iconifyLibraries.find((l) => l.id === activeLib.value) || iconifyLibraries[0]
-)
-
-const libraryStats = computed(() =>
-  iconifyLibraries.map((lib) => ({
-    ...lib,
-    count: countByLib[lib.id] || (lib.localRemix ? remixIconCatalog.length : '…'),
-  }))
-)
-
-const currentCatalog = computed(() => catalogByLib[activeLib.value] || [])
-
-const filteredIcons = computed(() => {
-  const q = keyword.value.trim().toLowerCase()
-  if (!q) return currentCatalog.value
-  return currentCatalog.value.filter((name) => name.toLowerCase().includes(q))
-})
-
-const pageCount = computed(() => Math.max(1, Math.ceil(filteredIcons.value.length / pageSize)))
-
-const pagedIcons = computed(() => {
-  const start = (page.value - 1) * pageSize
-  return filteredIcons.value.slice(start, start + pageSize)
-})
-
-const toValue = (iconName: string) => toPickerValue(currentLib.value, iconName)
-
-const loadLib = async (lib: IconifyLibraryDef) => {
-  if (lib.localRemix) {
-    catalogByLib.remix = remixIconCatalog
-    countByLib.remix = remixIconCatalog.length
-    return
-  }
-  if (catalogByLib[lib.id]?.length) return
-  loadingLib.value = true
-  try {
-    const names = await ensureIconifyLibrary(lib)
-    catalogByLib[lib.id] = names
-    countByLib[lib.id] = names.length
-  } finally {
-    loadingLib.value = false
-  }
-}
-
-const switchLib = async (id: IconifyLibId) => {
-  activeLib.value = id
-  page.value = 1
-  keyword.value = ''
-  const lib = iconifyLibraries.find((l) => l.id === id)
-  if (lib) await loadLib(lib)
-}
-
-const openDialog = () => {
-  visible.value = true
-}
-
-const onDialogOpened = async () => {
-  activeLib.value = detectLibraryId(props.modelValue)
-  await loadLib(currentLib.value)
-}
-
-const pick = (name: string) => {
-  emit('update:modelValue', toValue(name))
-  visible.value = false
-}
-
-const clearIcon = () => {
-  emit('update:modelValue', '')
-}
-
-const onInput = (val: string) => {
-  emit('update:modelValue', val || '')
-  keyword.value = val?.includes(':') ? val.split(':')[1] || '' : val || ''
-  page.value = 1
-  visible.value = true
-}
-</script>
-
-<style lang="scss" scoped>
-.qiu-icon-picker {
-  width: 100%;
-
-  &__trigger {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    width: 100%;
-  }
-
-  &__preview-wrap {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    color: var(--qiu-text-color-secondary);
-    background: var(--qiu-fill-color-light);
-    border: 1px solid var(--qiu-border-color-lighter);
-    border-radius: 8px;
-
-    &.is-on {
-      color: var(--qiu-color-primary);
-      background: var(--qiu-color-primary-light-9);
-      border-color: color-mix(in srgb, var(--qiu-color-primary) 35%, transparent);
-    }
-  }
-
-  &__preview {
-    font-size: 20px;
-  }
-
-  &__placeholder {
-    font-size: 11px;
-    color: var(--qiu-text-color-placeholder);
-    text-align: center;
-  }
-
-  &__input {
-    flex: 1;
-    min-width: 0;
-  }
-
-  &__body {
-    position: relative;
-    display: grid;
-    grid-template-columns: 210px minmax(0, 1fr);
-    gap: 12px;
-    height: min(48vh, 420px);
-    max-height: min(48vh, 420px);
-    min-height: 280px;
-  }
-
-  &__loading {
-    position: absolute;
-    inset: 0;
-    z-index: 10;
-    pointer-events: auto;
-  }
-
-  &__libs {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    height: 100%;
-    min-height: 0;
-    padding: 4px;
-    overflow-x: hidden;
-    overflow-y: auto;
-    background: var(--qiu-fill-color-lighter);
-    border-radius: 8px;
-  }
-
-  &__lib {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    flex-shrink: 0;
-    align-items: flex-start;
-    padding: 10px 12px;
-    text-align: left;
-    cursor: pointer;
-    background: transparent;
-    border: 1px solid transparent;
-    border-radius: 8px;
-
-    strong {
-      font-size: 13px;
-      color: var(--qiu-text-color-primary);
-    }
-
-    span {
-      font-size: 12px;
-      color: var(--qiu-text-color-secondary);
-    }
-
-    em {
-      font-size: 11px;
-      font-style: normal;
-      color: var(--qiu-text-color-placeholder);
-    }
-
-    &:hover,
-    &.is-active {
-      background: var(--qiu-bg-color);
-      border-color: var(--qiu-color-primary-light-5);
-      box-shadow: 0 1px 4px rgb(0 0 0 / 6%);
-    }
-
-    &.is-active strong {
-      color: var(--qiu-color-primary);
-    }
-  }
-
-  &__license-tip {
-    flex-shrink: 0;
-    margin: 8px 4px 0;
-    font-size: 11px;
-    line-height: 1.4;
-    color: var(--qiu-text-color-placeholder);
-  }
-
-  &__main {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    min-width: 0;
-    min-height: 0;
-  }
-
-  &__search {
-    flex-shrink: 0;
-    margin-bottom: 8px;
-  }
-
-  &__meta {
-    display: flex;
-    flex-shrink: 0;
-    flex-wrap: wrap;
-    gap: 12px;
-    align-items: center;
-    margin-bottom: 8px;
-    font-size: 12px;
-    color: var(--qiu-text-color-secondary);
-  }
-
-  &__current {
-    display: inline-flex;
-    gap: 6px;
-    align-items: center;
-
-    code {
-      font-size: 12px;
-    }
-  }
-
-  &__current-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 26px;
-    height: 26px;
-    color: var(--qiu-color-primary);
-    background: var(--qiu-color-primary-light-9);
-    border-radius: 6px;
-  }
-
-  &__grid {
-    display: grid;
-    flex: 1 1 auto;
-    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
-    gap: 8px;
-    align-content: start;
-    min-height: 0;
-    max-height: none;
-    padding-right: 4px;
-    overflow: auto;
-  }
-
-  &__item {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    align-items: center;
-    padding: 10px 6px;
-    font-size: 11px;
-    line-height: 1.2;
-    color: var(--qiu-text-color-regular);
-    cursor: pointer;
-    background: var(--qiu-fill-color-blank);
-    border: 1px solid var(--qiu-border-color-lighter);
-    border-radius: 8px;
-    transition: border-color 0.15s, background 0.15s, color 0.15s;
-
-    :deep(.qiu-icon) {
-      font-size: 22px;
-    }
-
-    span {
-      width: 100%;
-      overflow: hidden;
-      text-align: center;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    &:hover,
-    &.is-active {
-      color: var(--qiu-color-primary);
-      background: var(--qiu-color-primary-light-9);
-      border-color: var(--qiu-color-primary);
-    }
-
-    &.is-clear {
-      color: var(--qiu-color-danger);
-      border-style: dashed;
-    }
-  }
-
-  &__pager {
-    display: flex;
-    flex-shrink: 0;
-    justify-content: center;
-    margin-top: 12px;
-  }
-}
-
-@media (width <= 720px) {
-  .qiu-icon-picker__body {
-    grid-template-columns: 1fr;
-    height: min(60vh, 480px);
-    max-height: min(60vh, 480px);
-  }
-
-  .qiu-icon-picker__libs {
-    flex-direction: row;
-    height: auto;
-    max-height: 120px;
-    overflow: auto;
-  }
-}
-</style>

package/components/QiuImage/index.vue

@@ -1,177 +0,0 @@
-<template>
-  <div
-    class="qiu-image"
-    :class="{ 'is-preview': previewable }"
-    @click="onPreview"
-  >
-    <img
-      class="qiu-image__inner"
-      :src="src"
-      :alt="alt"
-      :loading="lazy ? 'lazy' : undefined"
-      :style="{ objectFit: fit }"
-    />
-    <div v-if="previewable" class="qiu-image__mask">
-      <qiu-icon icon="zoom-in-line" />
-    </div>
-
-    <Teleport to="body">
-      <Transition name="qiu-image-fade">
-        <div
-          v-if="previewVisible"
-          class="qiu-image__viewer"
-          @click.self="closePreview"
-        >
-          <button type="button" class="qiu-image__close" aria-label="关闭" @click="closePreview">
-            <qiu-icon icon="close-line" />
-          </button>
-          <img
-            class="qiu-image__preview"
-            :src="currentPreviewSrc"
-            :alt="alt"
-            @click.stop
-          />
-        </div>
-      </Transition>
-    </Teleport>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'QiuImage' })
-
-const props = withDefaults(
-  defineProps<{
-    src?: string
-    fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
-    alt?: string
-    lazy?: boolean
-    previewSrcList?: string[]
-    hideOnClickModal?: boolean
-  }>(),
-  {
-    src: '',
-    fit: 'fill',
-    alt: '',
-    lazy: false,
-    previewSrcList: () => [],
-    hideOnClickModal: true,
-  }
-)
-
-const previewVisible = ref(false)
-
-const previewable = computed(() => props.previewSrcList.length > 0 || !!props.src)
-
-const currentPreviewSrc = computed(() => {
-  if (props.previewSrcList.length > 0) return props.previewSrcList[0]
-  return props.src
-})
-
-const onPreview = () => {
-  if (!previewable.value) return
-  previewVisible.value = true
-}
-
-const closePreview = () => {
-  if (!props.hideOnClickModal) return
-  previewVisible.value = false
-}
-
-const onKeydown = (e: KeyboardEvent) => {
-  if (e.key === 'Escape' && previewVisible.value) {
-    previewVisible.value = false
-  }
-}
-
-onMounted(() => window.addEventListener('keydown', onKeydown))
-onUnmounted(() => window.removeEventListener('keydown', onKeydown))
-</script>
-
-<style lang="scss" scoped>
-.qiu-image {
-  position: relative;
-  display: inline-block;
-  overflow: hidden;
-  line-height: 0;
-  background: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
-  border-radius: var(--qiu-border-radius, var(--qiu-border-radius-base, 4px));
-
-  &.is-preview {
-    cursor: zoom-in;
-  }
-}
-
-.qiu-image__inner {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.qiu-image__mask {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
-  color: #fff;
-  background: rgb(0 0 0 / 35%);
-  opacity: 0;
-  transition: opacity 0.2s ease;
-
-  .qiu-image:hover & {
-    opacity: 1;
-  }
-}
-
-.qiu-image__viewer {
-  position: fixed;
-  inset: 0;
-  z-index: 3000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgb(0 0 0 / 75%);
-}
-
-.qiu-image__preview {
-  max-width: 90vw;
-  max-height: 90vh;
-  object-fit: contain;
-  border-radius: 4px;
-  box-shadow: 0 8px 32px rgb(0 0 0 / 40%);
-}
-
-.qiu-image__close {
-  position: absolute;
-  top: 24px;
-  right: 24px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  font-size: 20px;
-  color: #fff;
-  cursor: pointer;
-  background: rgb(255 255 255 / 15%);
-  border: 0;
-  border-radius: 50%;
-  transition: background 0.2s ease;
-
-  &:hover {
-    background: rgb(255 255 255 / 25%);
-  }
-}
-
-.qiu-image-fade-enter-active,
-.qiu-image-fade-leave-active {
-  transition: opacity 0.25s ease;
-}
-
-.qiu-image-fade-enter-from,
-.qiu-image-fade-leave-to {
-  opacity: 0;
-}
-</style>