ChuFix UI v0.2.0
Preview Updated 2026-05-10

KVEditor

Editor for HTTP headers / query params / env vars and other key-value lists; supports enable toggle, description column, and auto-appending an empty row.

Basic usage

CfKVEditor renders a KVRow[] (each row { key, value, enabled?, description? }) as an editable table. The last row is always empty — once you type into its key or value, a new empty row is appended automatically, so there is always a row to fill. Click the trailing × to delete a row.

背景
参数名参数值
条目数：2
src/App.vue 
<script setup lang="ts">
import { ref } from 'vue';
import { CfKVEditor, type KVRow } from '@chufix-design/vue';

const params = ref<KVRow[]>([
  { key: 'page', value: '1', enabled: true },
  { key: 'pageSize', value: '20', enabled: true },
]);
</script>
<template>
  <div style="display:flex; flex-direction:column; gap: 12px;">
    <CfKVEditor
      v-model="params"
      key-placeholder="参数名"
      value-placeholder="参数值"
    />
    <span style="font-size: 12px; color: var(--fg-3);">
      条目数：<code>{{ params.filter((r) => r.key.trim()).length }}</code>
    </span>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { CfKVEditor } from '@chufix-design/vue';

const params = ref<KVRow[]>([
  { key: 'page', value: '1', enabled: true },
  { key: 'pageSize', value: '20', enabled: true },
]);
</script>
<template>
  <div style="display:flex; flex-direction:column; gap: 12px;">
    <CfKVEditor
      v-model="params"
      key-placeholder="参数名"
      value-placeholder="参数值"
    />
    <span style="font-size: 12px; color: var(--fg-3);">
      条目数：<code>{{ params.filter((r) => r.key.trim()).length }}</code>
    </span>
  </div>
</template>
import { useState } from 'react';
import { CfKVEditor, type KVRow } from '@chufix-design/react';

export default function Demo() {
const [params, setParams] = useState<KVRow[]>([
  { key: 'page', value: '1', enabled: true },
  { key: 'pageSize', value: '20', enabled: true },
]);
return (
  <CfKVEditor
    value={params}
    onChange={setParams}
    keyPlaceholder="Param name"
    valuePlaceholder="Param value"
  />
);
}
import { useState } from 'react';
import { CfKVEditor } from '@chufix-design/react';

export default function Demo() {
const [params, setParams] = useState<KVRow[]>([
  { key: 'page', value: '1', enabled: true },
  { key: 'pageSize', value: '20', enabled: true },
]);
return (
  <CfKVEditor
    value={params}
    onChange={setParams}
    keyPlaceholder="Param name"
    valuePlaceholder="Param value"
  />
);
}

Enable toggle and description column

Turn on showToggle to add a leftmost checkbox column — disabled rows keep enabled: false in the array so the consumer can filter on it. Turn on showDescription to add a trailing description column. Both are independent optional knobs.

背景
HeaderValue说明
已启用：2
src/App.vue 
<script setup lang="ts">
import { computed, ref } from 'vue';
import { CfKVEditor, type KVRow } from '@chufix-design/vue';

const headers = ref<KVRow[]>([
  { key: 'Authorization', value: 'Bearer xxx', enabled: true, description: '鉴权头，每次请求带上' },
  { key: 'Accept', value: 'application/json', enabled: true, description: '声明返回 JSON' },
  { key: 'X-Trace-Id', value: 'auto', enabled: false, description: '调试用，关掉就由网关生成' },
]);
const enabledCount = computed(() => headers.value.filter((r) => r.enabled !== false && r.key.trim()).length);
</script>
<template>
  <div style="display:flex; flex-direction:column; gap: 12px;">
    <CfKVEditor
      v-model="headers"
      key-placeholder="Header"
      value-placeholder="Value"
      show-toggle
      show-description
    />
    <span style="font-size: 12px; color: var(--fg-3);">
      已启用：<code>{{ enabledCount }}</code>
    </span>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue';
import { CfKVEditor } from '@chufix-design/vue';

const headers = ref<KVRow[]>([
  { key: 'Authorization', value: 'Bearer xxx', enabled, description: '鉴权头，每次请求带上' },
  { key: 'Accept', value: 'application/json', enabled, description: '声明返回 JSON' },
  { key: 'X-Trace-Id', value: 'auto', enabled, description: '调试用，关掉就由网关生成' },
]);
const enabledCount = computed(() => headers.value.filter((r) => r.enabled !== false && r.key.trim()).length);
</script>
<template>
  <div style="display:flex; flex-direction:column; gap: 12px;">
    <CfKVEditor
      v-model="headers"
      key-placeholder="Header"
      value-placeholder="Value"
      show-toggle
      show-description
    />
    <span style="font-size: 12px; color: var(--fg-3);">
      已启用：<code>{{ enabledCount }}</code>
    </span>
  </div>
</template>
import { useState } from 'react';
import { CfKVEditor } from '@chufix-design/react';

export default function Demo() {
  const [headers, setHeaders] = useState(ref<KVRow[]>([
    { key: 'Authorization', value: 'Bearer xxx', enabled: true, description: '鉴权头，每次请求带上' },
    { key: 'Accept', value: 'application/json', enabled: true, description: '声明返回 JSON' },
    { key: 'X-Trace-Id', value: 'auto', enabled: false, description: '调试用，关掉就由网关生成' },
  ]));
  return (
    <>
      <CfKVEditor
      value={headers}
      onChange={setHeaders}
      keyPlaceholder="Header"
      valuePlaceholder="Value"
      showToggle
      showDescription
      />
    </>
  );
}

Read-only / disabled

readonly — inputs are read-only but still focusable for copy; disabled — grayed out and not focusable. Neither state renders the delete button or auto-appends new empty rows.

背景
readonly
键值
disabled
键值
src/App.vue 
<script setup lang="ts">
import { ref } from 'vue';
import { CfKVEditor, type KVRow } from '@chufix-design/vue';

const env = ref<KVRow[]>([
  { key: 'NODE_ENV', value: 'production', enabled: true },
  { key: 'API_BASE', value: 'https://api.example.com', enabled: true },
  { key: 'CACHE_TTL', value: '3600', enabled: true },
]);
</script>
<template>
  <div style="display:flex; flex-direction:column; gap: 16px;">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">readonly</div>
      <CfKVEditor :model-value="env" readonly />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">disabled</div>
      <CfKVEditor :model-value="env" disabled />
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { CfKVEditor } from '@chufix-design/vue';

const env = ref<KVRow[]>([
  { key: 'NODE_ENV', value: 'production', enabled: true },
  { key: 'API_BASE', value: 'https://api.example.com', enabled: true },
  { key: 'CACHE_TTL', value: '3600', enabled: true },
]);
</script>
<template>
  <div style="display:flex; flex-direction:column; gap: 16px;">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">readonly</div>
      <CfKVEditor :model-value="env" readonly />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">disabled</div>
      <CfKVEditor :model-value="env" disabled />
    </div>
  </div>
</template>
import { CfKVEditor } from '@chufix-design/react';

export default function Demo() {
  const env = ref<KVRow[]>([
    { key: 'NODE_ENV', value: 'production', enabled: true },
    { key: 'API_BASE', value: 'https://api.example.com', enabled: true },
    { key: 'CACHE_TTL', value: '3600', enabled: true },
  ]);
  return (
    <>
      <CfKVEditor value={env} readonly />
      <CfKVEditor value={env} disabled />
    </>
  );
}

API

PropTypeDefaultDescription
modelValue (Vue) / value (React)KVRow[][]Row array { key, value, enabled?, description? }
defaultValueKVRow[][]Uncontrolled initial value
keyPlaceholderstring'Key'Header and input placeholder
valuePlaceholderstring'Value'Header and input placeholder
showTogglebooleanfalseShow enable toggle column (writes enabled)
showDescriptionbooleanfalseShow description column (writes description)
autoAppendbooleantrueAuto-append an empty row at the end
disabled / readonlybooleanfalseDisable / read-only the whole editor
borderedbooleantrueBorder
size'sm' | 'md' | 'lg''md'Font size

Events: onChange(rows) / update:modelValue fires on any row change or auto-append, with the full row array.

反馈与讨论

KVEditor · Discussion

0
0 / 600
一键发送
正在加载评论...