foucui 1.0.1 → 2.0.0

package/components/QiuSearchBar/index.vue

@@ -1,154 +0,0 @@
-<template>
-  <div class="qiu-search-bar" :class="[`qiu-search-bar--${size}`]">
-    <qiu-icon icon="search-line" class="qiu-search-bar__icon" />
-    <input
-      class="qiu-search-bar__input"
-      :value="modelValue"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      @input="onInput"
-      @keydown.enter="onSearch"
-    />
-    <button v-if="modelValue" type="button" class="qiu-search-bar__clear" aria-label="清除" @click="onClear">
-      ×
-    </button>
-    <button v-if="showButton" type="button" class="qiu-search-bar__btn" @click="onSearch">
-      <slot name="button">搜索</slot>
-    </button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'QiuSearchBar' })
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string
-    placeholder?: string
-    size?: 'small' | 'default' | 'large'
-    disabled?: boolean
-    showButton?: boolean
-  }>(),
-  {
-    modelValue: '',
-    placeholder: '请输入关键词',
-    size: 'default',
-    disabled: false,
-    showButton: false,
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [string]
-  search: [string]
-  clear: []
-}>()
-
-const onInput = (e: Event) => {
-  emit('update:modelValue', (e.target as HTMLInputElement).value)
-}
-
-const onSearch = () => {
-  emit('search', props.modelValue)
-}
-
-const onClear = () => {
-  emit('update:modelValue', '')
-  emit('clear')
-}
-</script>
-
-<style lang="scss" scoped>
-.qiu-search-bar {
-  display: inline-flex;
-  align-items: center;
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 100%;
-  background: var(--qiu-bg-color, #fff);
-  border: 1px solid var(--qiu-border-color, #dcdfe6);
-  border-radius: 999px;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-
-  &:focus-within {
-    border-color: var(--qiu-color-primary, #409eff);
-    box-shadow: 0 0 0 1px color-mix(in srgb, var(--qiu-color-primary, #409eff) 25%, transparent);
-  }
-}
-
-.qiu-search-bar__icon {
-  flex-shrink: 0;
-  margin-left: 12px;
-  color: var(--qiu-text-color-placeholder, #a8abb2);
-}
-
-.qiu-search-bar__input {
-  flex: 1;
-  min-width: 0;
-  height: 100%;
-  padding: 0 8px;
-  font-size: 14px;
-  color: var(--qiu-text-color-primary, #303133);
-  background: transparent;
-  border: 0;
-  outline: none;
-
-  &::placeholder {
-    color: var(--qiu-text-color-placeholder, #a8abb2);
-  }
-}
-
-.qiu-search-bar__clear {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  margin-right: 4px;
-  padding: 0;
-  font-size: 14px;
-  color: var(--qiu-text-color-placeholder, #a8abb2);
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  border-radius: 50%;
-
-  &:hover {
-    color: var(--qiu-text-color-regular, #606266);
-    background: var(--qiu-fill-color-light, #f5f7fa);
-  }
-}
-
-.qiu-search-bar__btn {
-  flex-shrink: 0;
-  height: 100%;
-  margin-left: 4px;
-  padding: 0 16px;
-  font-size: 14px;
-  color: #fff;
-  cursor: pointer;
-  background: var(--qiu-color-primary, #409eff);
-  border: 0;
-  border-radius: 999px;
-
-  &:hover {
-    opacity: 0.92;
-  }
-}
-
-.qiu-search-bar--small {
-  height: 30px;
-  font-size: 13px;
-  .qiu-search-bar__btn { padding: 0 12px; font-size: 13px; }
-}
-
-.qiu-search-bar--default {
-  height: 36px;
-}
-
-.qiu-search-bar--large {
-  height: 42px;
-  font-size: 15px;
-  .qiu-search-bar__btn { padding: 0 20px; font-size: 15px; }
-}
-</style>

package/components/QiuSegmented/index.vue

@@ -1,120 +0,0 @@
-<template>
-  <div
-    class="qiu-segmented"
-    :class="[`qiu-segmented--${size}`, { 'is-block': block }]"
-    role="tablist"
-  >
-    <button
-      v-for="opt in options"
-      :key="String(opt.value)"
-      type="button"
-      role="tab"
-      class="qiu-segmented__item"
-      :class="{ 'is-active': modelValue === opt.value, 'is-disabled': opt.disabled }"
-      :disabled="opt.disabled"
-      @click="onSelect(opt)"
-    >
-      <qiu-icon v-if="opt.icon" class="qiu-segmented__icon" :icon="opt.icon" />
-      <span>{{ opt.label }}</span>
-    </button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-export interface QiuSegmentedOption {
-  label: string
-  value: string | number
-  disabled?: boolean
-  icon?: string
-}
-
-defineOptions({ name: 'QiuSegmented' })
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string | number
-    options?: QiuSegmentedOption[]
-    size?: 'large' | 'default' | 'small'
-    block?: boolean
-  }>(),
-  {
-    modelValue: '',
-    options: () => [],
-    size: 'default',
-    block: false,
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [string | number]
-  change: [string | number]
-}>()
-
-const onSelect = (opt: QiuSegmentedOption) => {
-  if (opt.disabled || opt.value === props.modelValue) return
-  emit('update:modelValue', opt.value)
-  emit('change', opt.value)
-}
-</script>
-
-<style lang="scss" scoped>
-.qiu-segmented {
-  display: inline-flex;
-  padding: 3px;
-  background: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
-  border-radius: 6px;
-
-  &.is-block {
-    display: flex;
-    width: 100%;
-
-    .qiu-segmented__item {
-      flex: 1;
-    }
-  }
-
-  &--large .qiu-segmented__item {
-    padding: 8px 16px;
-    font-size: 15px;
-  }
-
-  &--small .qiu-segmented__item {
-    padding: 4px 10px;
-    font-size: 12px;
-  }
-}
-
-.qiu-segmented__item {
-  display: inline-flex;
-  gap: 6px;
-  align-items: center;
-  justify-content: center;
-  padding: 6px 14px;
-  font-size: 14px;
-  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  border-radius: 4px;
-  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
-
-  &:hover:not(.is-disabled):not(.is-active) {
-    color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
-  }
-
-  &.is-active {
-    color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
-    background: var(--qiu-bg-color, var(--qiu-bg-color, #fff));
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-  }
-
-  &.is-disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}
-
-.qiu-segmented__icon {
-  font-size: 1.1em;
-}
-</style>

package/components/QiuSelect/QiuOption.vue

@@ -1,93 +0,0 @@
-<template>
-  <div
-    class="qiu-option"
-    :class="{
-      'is-selected': isSelected,
-      'is-disabled': disabled,
-      'is-hover': isHover,
-    }"
-    @mouseenter="onHover"
-    @click="onClick"
-  >
-    <slot>{{ label }}</slot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { QiuSelectContext } from './types'
-
-defineOptions({ name: 'QiuOption' })
-
-const props = withDefaults(
-  defineProps<{
-    value: string | number | boolean
-    label?: string | number
-    disabled?: boolean
-  }>(),
-  {
-    disabled: false,
-  }
-)
-
-const selectCtx = inject<QiuSelectContext>('qiuSelect', null)
-
-const isHover = ref(false)
-
-const isSelected = computed(() => selectCtx?.modelValue.value === props.value)
-
-const onHover = () => {
-  if (props.disabled) return
-  isHover.value = true
-  selectCtx?.setHoverOption(props.value)
-}
-
-const onClick = () => {
-  if (props.disabled || !selectCtx) return
-  selectCtx.selectOption(props.value, props.label ?? String(props.value))
-}
-
-onMounted(() => {
-  selectCtx?.registerOption({
-    value: props.value,
-    label: props.label ?? String(props.value),
-    disabled: props.disabled,
-  })
-})
-
-onUnmounted(() => {
-  selectCtx?.unregisterOption(props.value)
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-option {
-  height: 34px;
-  padding: 0 12px;
-  overflow: hidden;
-  line-height: 34px;
-  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background 0.15s ease, color 0.15s ease;
-
-  &:hover,
-  &.is-hover {
-    background: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
-  }
-
-  &.is-selected {
-    font-weight: 600;
-    color: var(--qiu-color-primary, var(--qiu-color-primary));
-  }
-
-  &.is-disabled {
-    color: var(--qiu-text-color-placeholder, var(--qiu-text-color-placeholder, #a8abb2));
-    cursor: not-allowed;
-
-    &:hover {
-      background: transparent;
-    }
-  }
-}
-</style>