foucui 1.0.1 → 2.0.0

package/components/QiuInput/index.vue

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

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