Bind attrs to textarea and input as well and add actioninput docs (#503)

Bind attrs to textarea and input as well and add actioninput docs
nextcloud · Jul 26, 2019 · f900f5b · f900f5b
2 parents 008648d + ffa2cb2
commit f900f5b
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/src/components/ActionInput/ActionInput.vue b/src/components/ActionInput/ActionInput.vue
@@ -20,29 +20,44 @@
   -
   -->
 
+<docs>
+This component is made to be used inside of the [Actions](#Actions) component slots.
+All undocumented attributes will be bound to the input or the datepicker. e.g. `maxlength`, `not-before`...
+
+```
+<Actions>
+	<ActionInput icon="icon-edit" value="This is an input" />
+	<ActionInput icon="icon-close" :disabled="true" value="This is a disabled input" />
+	<ActionInput icon="icon-edit" type="date" value="This is a date picker" />
+</Actions>
+```
+</docs>
+
 <template>
 	<li>
-		<span :class="{'action-input--picker': isDatePickerType}" class="action-input">
+		<span :class="{ 'action-input--picker': isDatePickerType }" class="action-input">
 			<!-- icon -->
 			<span :class="[isIconUrl ? 'action-input__icon--url' : icon]"
 				:style="{ backgroundImage: isIconUrl ? `url(${icon})` : null }"
 				class="action-input__icon" />
 
 			<!-- form and input -->
-			<form ref="form" class="action-input__form" :disabled="disabled"
-				@submit.prevent="onSubmit">
+			<form ref="form" class="action-input__form"
+				:disabled="disabled" @submit.prevent="onSubmit">
 				<input :id="id" type="submit" class="action-input__submit">
 
 				<DatetimePicker v-if="isDatePickerType"
+					:value="value" :placeholder="text"
 					:disabled="disabled" :type="isDatePickerType"
-					:value="value" class="action-input__picker"
+					class="action-input__picker"
 					v-bind="$attrs"
 					@input="onInput" @change="onChange" />
 
 				<template v-else>
 					<input :type="type" :value="value"
 						:placeholder="text" :disabled="disabled"
-						required class="action-input__input focusable"
+						v-bind="$attrs"
+						class="action-input__input focusable"
 						@input="onInput" @change="onChange">
 					<!-- allow the custom font to inject a ::before
 						not possible on input[type=submit] -->

diff --git a/src/components/ActionTextEditable/ActionTextEditable.vue b/src/components/ActionTextEditable/ActionTextEditable.vue
@@ -22,6 +22,7 @@
 
 <docs>
 This component is made to be used inside of the [Actions](#Actions) component slots.
+All undocumented attributes will be bound to the textarea. e.g. `maxlength`
 
 ```
 <Actions>
@@ -41,8 +42,8 @@ This component is made to be used inside of the [Actions](#Actions) component sl
 				class="action-text-editable__icon" />
 
 			<!-- form and input -->
-			<form ref="form" class="action-text-editable__form" :disabled="disabled"
-				@submit.prevent="onSubmit">
+			<form ref="form" class="action-text-editable__form"
+				:disabled="disabled" @submit.prevent="onSubmit">
 				<input :id="id" type="submit" class="action-text-editable__submit">
 
 				<!-- title -->
@@ -51,6 +52,7 @@ This component is made to be used inside of the [Actions](#Actions) component sl
 				</strong>
 
 				<textarea :disabled="disabled" :value="value"
+					v-bind="$attrs"
 					class="action-text-editable__textarea focusable"
 					@input="onInput" />
 

diff --git a/styleguide/assets/additional.scss b/styleguide/assets/additional.scss
@@ -1,5 +1,8 @@
 div[data-preview] {
      @import 'server.css';
+     * {
+          box-sizing: border-box;
+     }
 }
 
 body {