aurora-admin/frameworks/Input.vue2.vue

<template>
  <div class="kole-field" :class="{ 'has-error': error }">
    <div class="kole-input" :class="classes">
      <span v-if="$slots.prefix" class="affix prefix"><slot name="prefix" /></span>

      <input
        ref="input"
        :type="resolvedType"
        :value="value"
        :placeholder="placeholder"
        :disabled="disabled"
        @input="onInput"
        @focus="$emit('focus', $event)"
        @blur="$emit('blur', $event)"
      >

      <button
        v-if="clearable && value && !disabled"
        class="action clear"
        type="button"
        aria-label="清除"
        @click="clear"
      >
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M18 6L6 18M6 6l12 12" />
        </svg>
      </button>

      <button
        v-if="type === 'password'"
        class="action toggle"
        type="button"
        :aria-label="showPassword ? '隐藏密码' : '显示密码'"
        @click="showPassword = !showPassword"
      >
        <svg v-if="!showPassword" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" />
          <circle cx="12" cy="12" r="3" />
        </svg>
        <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M17.94 17.94A10 10 0 0 1 12 19c-6.5 0-10-7-10-7a18 18 0 0 1 5.06-5.94M9.9 4.24A9 9 0 0 1 12 4c6.5 0 10 7 10 7a18 18 0 0 1-2.16 3.19M1 1l22 22" />
        </svg>
      </button>

      <span v-if="$slots.suffix" class="affix suffix"><slot name="suffix" /></span>
    </div>

    <span v-if="error && errorText" class="error-text">{{ errorText }}</span>
  </div>
</template>

<script>
export default {
  name: 'KoleInput',
  props: {
    value: { type: [String, Number], default: '' },
    size: { type: String, default: 'default', validator: v => ['large', 'default', 'small'].includes(v) },
    type: { type: String, default: 'text' },         // text | password | number ...
    placeholder: { type: String, default: '' },
    disabled: { type: Boolean, default: false },
    error: { type: Boolean, default: false },
    errorText: { type: String, default: '' },
    clearable: { type: Boolean, default: false }
  },
  data() {
    return { showPassword: false };
  },
  computed: {
    sizeMap() { return { large: 'kole-input-lg', default: 'kole-input-md', small: 'kole-input-sm' }; },
    classes() {
      return [
        this.sizeMap[this.size],
        { 'is-error': this.error, 'is-disabled': this.disabled }
      ];
    },
    resolvedType() {
      if (this.type === 'password') return this.showPassword ? 'text' : 'password';
      return this.type;
    }
  },
  methods: {
    onInput(e) {
      this.$emit('input', e.target.value);
    },
    clear() {
      this.$emit('input', '');
      this.$nextTick(() => this.$refs.input && this.$refs.input.focus());
    }
  }
};
</script>

<!-- 样式对齐 components.css 与 input.json 契约 -->
<style>
.kole-field { display: inline-flex; flex-direction: column; gap: 4px; }
.kole-input {
  display: inline-flex; align-items: center; gap: 8px; height: 32px;
  padding: 0 12px; background: #fff; border: 1px solid #E8ECF1;
  border-radius: 4px; transition: border-color .15s, box-shadow .15s; box-sizing: border-box;
}
.kole-input input {
  border: none; outline: none; background: transparent; font-size: 14px;
  color: #262626; min-width: 160px; flex: 1; font-family: "PingFang SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
}
.kole-input input::placeholder { color: #767676; }
.kole-input:focus-within { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
.kole-input.is-error { border-color: #CF1322; }
.kole-input.is-error:focus-within { border-color: #CF1322; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
.kole-input.is-disabled, .kole-input:disabled { background: #F5F5F5; border-color: transparent; }
.kole-input.is-disabled input, .kole-input:disabled input { color: #BFBFBF; cursor: not-allowed; }
.kole-input .affix { display: inline-flex; flex-shrink: 0; color: #6E6E6E; align-items: center; }
.kole-input .action {
  display: inline-flex; flex-shrink: 0; padding: 0; border: none; background: none;
  cursor: pointer; color: #6E6E6E; align-items: center;
}
.kole-input .action:hover { color: #2F54EB; }
.kole-input-lg { height: 40px; }
.kole-input-sm { height: 24px; }
.kole-input-sm input { font-size: 12px; min-width: 120px; }
.error-text { font-size: 12px; color: #CF1322; line-height: 20px; }
</style>