Skip to content

Commit 85b73c2

Browse files
kevinkosterrkevinkosterr
authored
Merge pull request #41 from kevinkosterr/icon-labels
feat: Icon labels
2 parents f690cb5 + 8789805 commit 85b73c2

File tree

15 files changed

+427
-75
lines changed

15 files changed

+427
-75
lines changed

‎apps/docs/.vitepress/config.mts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ export default defineConfig({
4444
{ text: 'useFieldProps', link: '/guide/composables/useFieldProps' },
4545
{ text: 'useFieldValidate', link: '/guide/composables/useFieldValidate' },
4646
{ text: 'useFormModel', link: '/guide/composables/useFormModel' },
47+
{ text: 'useLabelIcon', link: '/guide/composables/useLabelIcon' },
4748
{ text: 'useValidation', link: '/guide/composables/useValidation' }
4849
]
4950
},

‎apps/docs/guide/composables/useLabelIcon.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
outline: [2,3]
3+
---
4+
# useLabelIcon <Badge type="tip" text="2.7.0+" />
5+
> Determines which icon to display and the position to display it in
6+
7+
## Usage
8+
```vue
9+
<script setup>
10+
import { useLabelIcon } from '@kevinkosterr/vue3-form-generator'
11+
12+
const { labelIcon, labelIconPosition } = useLabelIcon(props.field.labelIcon)
13+
</script>
14+
```
15+
16+
## Returns
17+
18+
### `labelIcon` <Badge type="info" text="ComputedRef<string | ComponentPublicInstance | null>" />
19+
Either the icon class or icon component as determined by the `labelIcon` property of a field schema.
20+
21+
### `labelIconPosition` <Badge type="info" text="ComputedRef<'left' | 'right' | null>" />
22+
Position of the label, defaults to `left`.

‎apps/docs/parts/shared-field-properties.md

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
1-
| Property | Default | Type | Description |
2-
|-------------|-----------|---------------------------------------------|-------------------------------------------------------------------------------------------------|
3-
| name | - | `string` | Name of the field |
4-
| model | - | `string` | Key of model in the form schema model |
5-
| label | - | `string` | Label for the field |
6-
| type | - | `string` | Type of field, generally `input` if the field is an input. |
7-
| inputType | - | `string` | Type of input, only required when `type === 'input'` |
8-
| id | _computed_ | `string` | `id` of the field |
9-
| visible | `true` | `Boolean \| Function` | Whether the field is visible, method will be passed the `model`, `field` and field component* |
10-
| required | `false` | `Boolean \| Function` | Whether the field is required, method will be passed the `model`, `field` and field component* |
11-
| readonly | `false` | `Boolean \| Function` | Whether the field is read only, method will be passed the `model`, `field` and field component* |
12-
| disabled | `false` | `Boolean \| Function` | Whether the field is disabled, method will be passed the `model`, `field` and field component* |
13-
| hint | - | `string \| Function` | Hint to display underneath the field, can be passed a method* |
14-
| validator | _computed_ | `Array<Function> \| Function \| undefined` | A (list of) validator(s) to be validating the field against. |
15-
| validate | `onBlur` | `'onChanged'` \| `'onBlur'` | Method of validation for the field. |
16-
| onValidated | - | `Function \| undefined` | Method to be called after validation has been completed. |
1+
| Property | Default | Type | Description |
2+
|-------------|-----------|------------------------------------------------------------|-------------------------------------------------------------------------------------------------|
3+
| name | - | `string` | Name of the field |
4+
| model | - | `string` | Key of model in the form schema model |
5+
| label | - | `string` | Label for the field |
6+
| labelIcon | - | `string \| ComponentPublicInstance \| LabelIconDefinition` | Label for the field |
7+
| type | - | `string` | Type of field, generally `input` if the field is an input. |
8+
| inputType | - | `string` | Type of input, only required when `type === 'input'` |
9+
| id | _computed_ | `string` | `id` of the field |
10+
| visible | `true` | `Boolean \| Function` | Whether the field is visible, method will be passed the `model`, `field` and field component* |
11+
| required | `false` | `Boolean \| Function` | Whether the field is required, method will be passed the `model`, `field` and field component* |
12+
| readonly | `false` | `Boolean \| Function` | Whether the field is read only, method will be passed the `model`, `field` and field component* |
13+
| disabled | `false` | `Boolean \| Function` | Whether the field is disabled, method will be passed the `model`, `field` and field component* |
14+
| hint | - | `string \| Function` | Hint to display underneath the field, can be passed a method* |
15+
| validator | _computed_ | `Array<Function> \| Function \| undefined` | A (list of) validator(s) to be validating the field against. |
16+
| validate | `onBlur` | `'onChanged'` \| `'onBlur'` | Method of validation for the field. |
17+
| onValidated | - | `Function \| undefined` | Method to be called after validation has been completed. |
1718

1819
_*_ see [determineDynamicAttribute()](/guide/mixins/abstractField#determinedynamicattribute) for more information.

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<link rel="icon" href="/favicon.ico">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8+
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
89
<title>Vite App</title>
910
</head>
1011
<body>

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"dev": "vite",
1212
"dev:sass": "sass --watch src/scss/themes:apps/playground/css/",
1313
"test": "vitest",
14+
"test:ui": "vitest --ui",
1415
"build": "vite build && sass src/scss/themes/:dist/themes/",
1516
"preview": "vite preview",
1617
"docs:dev": "vitepress dev apps/docs",
@@ -55,6 +56,7 @@
5556
"@stylistic/eslint-plugin": "^2.8.0",
5657
"@typescript-eslint/parser": "^8.13.0",
5758
"@vitejs/plugin-vue": "^5.1.3",
59+
"@vitest/ui": "^3.2.4",
5860
"@vue/test-utils": "^2.4.6",
5961
"clipboard": "^2.0.11",
6062
"eslint": "^9.10.0",

0 commit comments

Comments
 (0)