foucui 1.0.1

package/components/QiuInput/index.vue

@@ -0,0 +1,328 @@
+<template>
+  <div
+    class="qiu-input"
+    :class="[
+      `qiu-input--${resolvedSize}`,
+      {
+        'is-disabled': disabled,
+        'is-focused': focused,
+        'is-clearable': clearable,
+        'has-value': hasValue,
+        'has-prefix': $slots.prefix || prefixIcon,
+        'has-suffix': $slots.suffix || suffixIcon || clearable || showPassword,
+        'is-textarea': isTextarea,
+      },
+    ]"
+  >
+    <div v-if="$slots.prepend" class="qiu-input__prepend">
+      <slot name="prepend" />
+    </div>
+
+    <div class="qiu-input__wrapper">
+      <span v-if="$slots.prefix || prefixIcon" class="qiu-input__prefix">
+        <slot name="prefix">
+          <qiu-icon v-if="prefixIcon" :icon="prefixIcon" />
+        </slot>
+      </span>
+
+      <textarea
+        v-if="isTextarea"
+        ref="textareaRef"
+        class="qiu-input__inner qiu-input__textarea"
+        :value="modelValue ?? ''"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+        :rows="rows"
+        :maxlength="maxlength"
+        v-bind="inputAttrs"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @change="emit('change', ($event.target as HTMLTextAreaElement).value)"
+      />
+      <input
+        v-else
+        ref="inputRef"
+        class="qiu-input__inner"
+        :type="nativeType"
+        :value="modelValue ?? ''"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+        :maxlength="maxlength"
+        v-bind="inputAttrs"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @change="emit('change', ($event.target as HTMLInputElement).value)"
+        @keyup.enter="emit('keyup', $event)"
+      />
+
+      <span
+        v-if="$slots.suffix || suffixIcon || (clearable && hasValue) || showPassword"
+        class="qiu-input__suffix"
+      >
+        <button
+          v-if="clearable && hasValue && !disabled"
+          type="button"
+          class="qiu-input__clear"
+          tabindex="-1"
+          @mousedown.prevent
+          @click="clear"
+        >
+          ×
+        </button>
+        <button
+          v-if="showPassword"
+          type="button"
+          class="qiu-input__password"
+          tabindex="-1"
+          @mousedown.prevent
+          @click="passwordVisible = !passwordVisible"
+        >
+          <qiu-icon :icon="passwordVisible ? 'eye-line' : 'eye-off-line'" />
+        </button>
+        <slot name="suffix">
+          <qiu-icon v-if="suffixIcon" :icon="suffixIcon" />
+        </slot>
+      </span>
+    </div>
+
+    <div v-if="$slots.append" class="qiu-input__append">
+      <slot name="append" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'QiuInput',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number
+    type?: string
+    placeholder?: string
+    clearable?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    size?: 'large' | 'default' | 'small'
+    showPassword?: boolean
+    prefixIcon?: string
+    suffixIcon?: string
+    rows?: number
+    maxlength?: number | string
+  }>(),
+  {
+    modelValue: '',
+    type: 'text',
+    placeholder: '',
+    clearable: false,
+    disabled: false,
+    readonly: false,
+    size: 'default',
+    showPassword: false,
+    rows: 3,
+  }
+)
+
+const attrs = useAttrs()
+const inputAttrs = computed(() => {
+  const { class: _c, style: _s, ...rest } = attrs as Record<string, unknown>
+  return rest
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [string | number]
+  input: [string | number]
+  change: [string | number]
+  focus: [FocusEvent]
+  blur: [FocusEvent]
+  clear: []
+  keyup: [KeyboardEvent]
+}>()
+
+const inputRef = ref<HTMLInputElement | null>(null)
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+const focused = ref(false)
+const passwordVisible = ref(false)
+
+const resolvedSize = computed(() => props.size || 'default')
+const isTextarea = computed(() => props.type === 'textarea')
+const nativeType = computed(() => {
+  if (props.showPassword) return passwordVisible.value ? 'text' : 'password'
+  return props.type || 'text'
+})
+
+const hasValue = computed(() => {
+  const v = props.modelValue
+  return v !== '' && v !== undefined && v !== null
+})
+
+const onInput = (e: Event) => {
+  const v = (e.target as HTMLInputElement | HTMLTextAreaElement).value
+  emit('update:modelValue', v)
+  emit('input', v)
+}
+
+const onFocus = (e: FocusEvent) => {
+  focused.value = true
+  emit('focus', e)
+}
+
+const onBlur = (e: FocusEvent) => {
+  focused.value = false
+  emit('blur', e)
+}
+
+const clear = () => {
+  emit('update:modelValue', '')
+  emit('input', '')
+  emit('clear')
+  emit('change', '')
+}
+
+const focus = () => {
+  ;(inputRef.value || textareaRef.value)?.focus()
+}
+
+const blur = () => {
+  ;(inputRef.value || textareaRef.value)?.blur()
+}
+
+defineExpose({ focus, blur, inputRef, textareaRef })
+</script>
+
+<style lang="scss" scoped>
+.qiu-input {
+  box-sizing: border-box;
+  display: inline-flex;
+  width: 100%;
+  vertical-align: middle;
+  border: 1px solid var(--qiu-border-color, var(--qiu-border-color, #dcdfe6));
+  border-radius: var(--qiu-border-radius-base, 4px);
+  background: #fff;
+  transition: border-color 0.15s;
+
+  &:hover:not(.is-disabled) {
+    border-color: var(--qiu-color-primary-light-3, #66b1ff);
+  }
+
+  &.is-focused {
+    border-color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    background: var(--qiu-disabled-bg-color, #f5f7fa);
+    opacity: 0.85;
+  }
+
+  &--large {
+    --qiu-input-height: 40px;
+    font-size: 14px;
+  }
+
+  &--default {
+    --qiu-input-height: 32px;
+    font-size: 14px;
+  }
+
+  &--small {
+    --qiu-input-height: 24px;
+    font-size: 12px;
+  }
+
+  &.is-textarea {
+    height: auto;
+  }
+}
+
+.qiu-input__wrapper {
+  position: relative;
+  display: inline-flex;
+  flex: 1;
+  align-items: center;
+  min-width: 0;
+  height: var(--qiu-input-height, 32px);
+}
+
+.qiu-input.is-textarea .qiu-input__wrapper {
+  height: auto;
+  align-items: stretch;
+}
+
+.qiu-input__inner {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 0 11px;
+  color: var(--qiu-text-color-primary, #303133);
+  background: transparent;
+  border: 0;
+  outline: none;
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--qiu-disabled-text-color, #a8abb2);
+  }
+}
+
+.qiu-input__textarea {
+  display: block;
+  min-height: 60px;
+  padding: 8px 11px;
+  line-height: 1.5;
+  resize: vertical;
+}
+
+.qiu-input__prefix,
+.qiu-input__suffix {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 4px;
+  align-items: center;
+  padding: 0 8px;
+  color: var(--qiu-text-color-secondary, #909399);
+}
+
+.qiu-input__clear,
+.qiu-input__password {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+}
+
+.qiu-input__prepend,
+.qiu-input__append {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  padding: 0 12px;
+  color: var(--qiu-text-color-regular, #606266);
+  background: var(--qiu-fill-color-light, #f5f7fa);
+  border-right: 1px solid var(--qiu-border-color, #dcdfe6);
+  white-space: nowrap;
+}
+
+.qiu-input__append {
+  border-right: 0;
+  border-left: 1px solid var(--qiu-border-color, #dcdfe6);
+}
+
+.has-prefix .qiu-input__inner {
+  padding-left: 0;
+}
+
+.has-suffix .qiu-input__inner {
+  padding-right: 0;
+}
+</style>

package/components/QiuInputNumber/index.vue

@@ -0,0 +1,295 @@
+<template>
+  <div
+    class="qiu-input-number"
+    :class="[
+      `qiu-input-number--${resolvedSize}`,
+      {
+        'is-disabled': disabled,
+        'is-controls-right': controlsPosition === 'right',
+        'is-without-controls': !controls,
+      },
+    ]"
+  >
+    <button
+      v-if="controls && controlsPosition !== 'right'"
+      type="button"
+      class="qiu-input-number__decrease"
+      :disabled="disabled || isMin"
+      tabindex="-1"
+      @mousedown.prevent
+      @click="decrease"
+    >
+      −
+    </button>
+    <input
+      ref="inputRef"
+      class="qiu-input-number__inner"
+      type="text"
+      :value="displayValue"
+      :disabled="disabled"
+      :readonly="readonly"
+      @input="onInput"
+      @blur="onBlur"
+      @keydown.up.prevent="increase"
+      @keydown.down.prevent="decrease"
+    />
+    <button
+      v-if="controls"
+      type="button"
+      class="qiu-input-number__increase"
+      :disabled="disabled || isMax"
+      tabindex="-1"
+      @mousedown.prevent
+      @click="increase"
+    >
+      +
+    </button>
+    <button
+      v-if="controls && controlsPosition === 'right'"
+      type="button"
+      class="qiu-input-number__decrease qiu-input-number__decrease--right"
+      :disabled="disabled || isMin"
+      tabindex="-1"
+      @mousedown.prevent
+      @click="decrease"
+    >
+      −
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuInputNumber' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number | null
+    min?: number
+    max?: number
+    step?: number
+    stepStrictly?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    controls?: boolean
+    controlsPosition?: '' | 'right'
+    size?: 'large' | 'default' | 'small'
+    precision?: number
+  }>(),
+  {
+    modelValue: null,
+    min: -Infinity,
+    max: Infinity,
+    step: 1,
+    stepStrictly: false,
+    disabled: false,
+    readonly: false,
+    controls: true,
+    controlsPosition: '',
+    size: 'default',
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [number | null]
+  change: [number | null]
+  blur: [FocusEvent]
+}>()
+
+const inputRef = ref<HTMLInputElement | null>(null)
+
+const resolvedSize = computed(() => props.size || 'default')
+
+const clamp = (val: number) => Math.min(props.max, Math.max(props.min, val))
+
+const roundToStep = (val: number) => {
+  if (!props.stepStrictly) return val
+  const steps = Math.round((val - props.min) / props.step)
+  return clamp(props.min + steps * props.step)
+}
+
+const formatValue = (val: number | null | undefined): number | null => {
+  if (val === null || val === undefined || Number.isNaN(val)) return null
+  let n = roundToStep(val)
+  n = clamp(n)
+  if (props.precision !== undefined) {
+    n = Number(n.toFixed(props.precision))
+  }
+  return n
+}
+
+const displayValue = computed(() => {
+  if (props.modelValue === null || props.modelValue === undefined) return ''
+  return String(props.modelValue)
+})
+
+const isMin = computed(() => props.modelValue !== null && props.modelValue <= props.min)
+const isMax = computed(() => props.modelValue !== null && props.modelValue >= props.max)
+
+const setValue = (val: number | null) => {
+  emit('update:modelValue', val)
+  emit('change', val)
+}
+
+const getCurrent = () => props.modelValue ?? (props.min === -Infinity ? 0 : props.min)
+
+const increase = () => {
+  if (props.disabled) return
+  setValue(formatValue(getCurrent() + props.step))
+}
+
+const decrease = () => {
+  if (props.disabled) return
+  setValue(formatValue(getCurrent() - props.step))
+}
+
+const onInput = (e: Event) => {
+  const raw = (e.target as HTMLInputElement).value
+  if (raw === '' || raw === '-') {
+    emit('update:modelValue', null)
+    return
+  }
+  const num = Number(raw)
+  if (!Number.isNaN(num)) {
+    emit('update:modelValue', num)
+  }
+}
+
+const onBlur = (e: FocusEvent) => {
+  const formatted = formatValue(props.modelValue ?? null)
+  if (formatted !== props.modelValue) {
+    setValue(formatted)
+  }
+  emit('blur', e)
+}
+
+defineExpose({ focus: () => inputRef.value?.focus() })
+</script>
+
+<style lang="scss" scoped>
+.qiu-input-number {
+  display: inline-flex;
+  align-items: stretch;
+  width: 150px;
+  overflow: hidden;
+  line-height: 1;
+  vertical-align: middle;
+  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, var(--qiu-border-radius-base, 4px));
+  transition: border-color 0.2s ease;
+
+  &:hover:not(.is-disabled) {
+    border-color: var(--qiu-border-color-hover, var(--qiu-border-color-hover, #c0c4cc));
+  }
+
+  &:focus-within:not(.is-disabled) {
+    border-color: var(--qiu-color-primary, var(--qiu-color-primary));
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--qiu-color-primary, var(--qiu-color-primary)) 25%, transparent);
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    background: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
+    opacity: 0.7;
+  }
+
+  &--large .qiu-input-number__inner {
+    height: 40px;
+    font-size: 16px;
+  }
+
+  &--default .qiu-input-number__inner {
+    height: 32px;
+    font-size: 14px;
+  }
+
+  &--small .qiu-input-number__inner {
+    height: 24px;
+    font-size: 12px;
+  }
+
+  &.is-controls-right {
+    .qiu-input-number__increase {
+      order: 3;
+      border-left: 1px solid var(--qiu-border-color, var(--qiu-border-color, #dcdfe6));
+    }
+
+    .qiu-input-number__decrease--right {
+      order: 2;
+      border-left: 1px solid var(--qiu-border-color, var(--qiu-border-color, #dcdfe6));
+    }
+
+    .qiu-input-number__inner {
+      order: 1;
+    }
+  }
+}
+
+.qiu-input-number__inner {
+  flex: 1;
+  min-width: 0;
+  padding: 0 8px;
+  color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
+  text-align: center;
+  background: transparent;
+  border: 0;
+  outline: none;
+  appearance: textfield;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    margin: 0;
+    appearance: none;
+  }
+}
+
+.qiu-input-number__decrease,
+.qiu-input-number__increase {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  padding: 0;
+  font-size: 14px;
+  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
+  cursor: pointer;
+  background: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
+  border: 0;
+  outline: none;
+  transition: color 0.15s ease, background 0.15s ease;
+
+  &:hover:not(:disabled) {
+    color: var(--qiu-color-primary, var(--qiu-color-primary));
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.qiu-input-number__decrease {
+  border-right: 1px solid var(--qiu-border-color, var(--qiu-border-color, #dcdfe6));
+}
+
+.qiu-input-number__increase {
+  border-left: 1px solid var(--qiu-border-color, var(--qiu-border-color, #dcdfe6));
+}
+
+.qiu-input-number--small {
+  .qiu-input-number__decrease,
+  .qiu-input-number__increase {
+    width: 24px;
+    font-size: 12px;
+  }
+}
+
+.qiu-input-number--large {
+  .qiu-input-number__decrease,
+  .qiu-input-number__increase {
+    width: 40px;
+    font-size: 16px;
+  }
+}
+</style>