Skip to content

Commit ae43c7a

Browse files
kevinkosterrkevinkosterr
committed
docs(useLabelIcon): documentation for useLabelIcon
1 parent d66d882 commit ae43c7a

File tree

5 files changed

+46
-18
lines changed

5 files changed

+46
-18
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.

‎src/composables/index.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useFieldProps } from '@/composables/useFieldProps'
55
import { useFieldEmits } from '@/composables/useFieldEmits'
66
import { useValidationWrapper } from '@/composables/useValidationWrapper'
77
import { useValidation } from '@/composables/useValidation'
8+
import { useLabelIcon } from '@/composables/useLabelIcon'
89

910
export {
1011
useFormModel,
@@ -13,5 +14,6 @@ export {
1314
useFieldProps,
1415
useFieldEmits,
1516
useValidationWrapper,
16-
useValidation
17+
useValidation,
18+
useLabelIcon
1719
}

‎src/index.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ import {
2626
useFieldAttributes,
2727
useValidation,
2828
useFieldEmits,
29-
useFieldProps
29+
useFieldProps,
30+
useLabelIcon
3031
} from '@/composables'
3132

3233
import FormGenerator from '@/FormGenerator.vue'
@@ -62,6 +63,7 @@ export {
6263
useFieldEmits,
6364
useFieldAttributes,
6465
useFieldValidate,
66+
useLabelIcon,
6567
useValidation,
6668
validators
6769
}

0 commit comments

Comments
 (0)