foucui 1.0.1

package/components/QiuSearchBar/index.vue

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

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

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