diff --git a/CHANGELOG.md b/CHANGELOG.md index 3e3cbca..64b02cb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,15 @@ # Changelog +## 0.7.0 + +### Added + +- new "attributes" option for inputs. The `attributes` attribute at input config level will get `v-bind`ed to the according input component and you can use it to pass custom props to your input components. + +### Internal + +- update dependencies + ## 0.6.1 ### Fixes diff --git a/docs/Components/Inputs.md b/docs/Components/Inputs.md index dc65818..71ad473 100644 --- a/docs/Components/Inputs.md +++ b/docs/Components/Inputs.md @@ -58,7 +58,7 @@ defaultOptions = [ #### Demo - + ## InputNumber diff --git a/docs/Customize/5-Input.md b/docs/Customize/5-Input.md index aa80de8..265405d 100644 --- a/docs/Customize/5-Input.md +++ b/docs/Customize/5-Input.md @@ -9,8 +9,33 @@ A custom input must implement the following interface: | Prop | value | description | | --------- | --------------- | ------------------------------------------------------------------------------------------- | | `v-model` | | Read the [vue docs](https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components) | +| `label` | `String` | the label of the input | | `options` | `Array` | Each Object contains the attributes `value` and `label`. | +In addition, you can implement whatever props you want and pass them staticly with the config key `attributes` at input config level to your component + +Example: +```js {9-12} +[ + { + title: "...", + chipTemplate: "%1", + layout: layouts.Default, + filter: [ + { + input: BaseInput, + attributes: { + type: "number", + placeholder: "placeholder text" + }, + }, + ], + }, +] +``` + +This will bind the attributes `type` and `placeholder` to rendered `BaseInput` component and these attributes will be accessible as props in the `BaseInput` component + ## Examples ### Toggle diff --git a/src/components/DemoConfig.vue b/src/components/DemoConfig.vue index 8de815b..80d7b84 100644 --- a/src/components/DemoConfig.vue +++ b/src/components/DemoConfig.vue @@ -63,6 +63,26 @@ const defaultFilter = `[ } ] }, + { + title: "Firstname", + chipTemplate: ${'([v1]) => `${v1 ? "is published" : "is unpublished"}`'}, + filter: [ + { + // Query data + attribute: "firstname", + applyNegated: false, + operator: "=", + label: "Firstname?", + + // UI options + options: undefined, + input: inputs.InputText, + attributes: { + placeholder: "Placeholder value" + } + } + ] + }, { title: "Veröffentlicht?", chipTemplate: ${'([v1]) => `${v1 ? "is published" : "is unpublished"}`'}, diff --git a/src/components/Filter.vue b/src/components/Filter.vue index e6288e5..d27946f 100644 --- a/src/components/Filter.vue +++ b/src/components/Filter.vue @@ -42,6 +42,7 @@ v-model="tmpValues[input.id]" :options="input.options" :label="input.label" + v-bind="input.attributes" /> diff --git a/src/components/inputs/InputText.vue b/src/components/inputs/InputText.vue index 4b693e6..fb22046 100644 --- a/src/components/inputs/InputText.vue +++ b/src/components/inputs/InputText.vue @@ -1,7 +1,7 @@ @@ -20,6 +20,10 @@ export default { type: String, default: "", }, + placeholder: { + type: String, + default: "", + }, }, computed: { vmodelProxy: {