implement attributes option

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

docs/Components/Inputs.md

@@ -58,7 +58,7 @@ defaultOptions = [
 
 #### Demo
 
-<InputInputText />
+<InputText />
 
 ## InputNumber
 

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<Object>` | 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

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"}`'},

src/components/Filter.vue

@@ -42,6 +42,7 @@
 						v-model="tmpValues[input.id]"
 						:options="input.options"
 						:label="input.label"
+						v-bind="input.attributes"
 					/>
 					<!-- eslint-enable vue/valid-v-for -->
 				</template>

src/components/inputs/InputText.vue

@@ -1,7 +1,7 @@
 <template>
 	<label class="label">
-		{{ label }}
-		<input v-model="vmodelProxy" type="text" />
+		{{ label }} <br />
+		<input v-model="vmodelProxy" type="text" :placeholder="placeholder" />
 	</label>
 </template>
 
@@ -20,6 +20,10 @@ export default {
 			type: String,
 			default: "",
 		},
+		placeholder: {
+			type: String,
+			default: "",
+		},
 	},
 	computed: {
 		vmodelProxy: {