# Base Components Guide

`src/components/base` 放真正跨頁共用且不屬於特定 domain 的基礎元件。

## 規則

- 只服務單一 domain 的元件不要放進 `base`。
- 命名不使用 `Page`/`Section`/`Item` 前綴，直接以功能命名。

## BaseFormTextField

前置 label + `v-text-field`，預設 `variant="outlined"`、`density="compact"`、`hide-details`。

| Prop | 型別 | 預設 | 說明 |
|------|------|------|------|
| `modelValue` | `string` | — | 雙向綁定字串值 |
| `label` | `string` | `undefined` | `#prepend` 內 `<span>` 的文字 |
| `labelCharCount` | `number` | `undefined` | 字數，用於計算 `min-width: 字數 × 0.785rem` |
| `prependMarginEnd` | `number` | `8` | `#prepend` 的 `margin-inline-end`（px） |
| `readonly` | `boolean` | `undefined` | 是否唯讀 |

```vue
<BaseFormTextField
  v-model="form.cellPhone"
  label="手機"
  class="ml-2"
  :label-char-count="4"
  :prepend-margin-end="16"
/>
```

## BaseFormSelect

前置 label + `v-select`，預設 `variant="outlined"`、`density="compact"`、`hide-details`。

| Prop | 型別 | 預設 | 說明 |
|------|------|------|------|
| `modelValue` | `any` | — | 雙向綁定值 |
| `items` | `any[]` | — | `v-select` 的 `items` |
| `label` | `string` | `undefined` | `#prepend` 內 `<span>` 的文字 |
| `labelCharCount` | `number` | `undefined` | 字數，用於計算 `min-width` |
| `prependMarginEnd` | `number` | `8` | `#prepend` 的 `margin-inline-end`（px） |

```vue
<BaseFormSelect v-model="form.status" label="狀態" :items="statusOptions" class="ml-2" />
```