feat(textfield): adding keypress eventHandler

TheComputerM · Nov 13, 2020 · 5deaa7a · 5deaa7a
1 parent c200072
commit 5deaa7a
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 9 deletions.
diff --git a/packages/api-generator/dist/index.js b/packages/api-generator/dist/index.js
diff --git a/packages/api-generator/src/TextField.json b/packages/api-generator/src/TextField.json
@@ -396,6 +396,16 @@
       "visibility": "public",
       "description": "",
       "keywords": []
+    },
+    {
+      "name": "keypress",
+      "parent": "input",
+      "modificators": [],
+      "locations": null,
+      "loc": null,
+      "visibility": "public",
+      "description": "",
+      "keywords": []
     }
   ],
   "slots": [

diff --git a/packages/api-generator/src/all.json b/packages/api-generator/src/all.json
@@ -2,8 +2,8 @@
   "names": [
     "Alert",
     "AppBar",
-    "Badge",
     "Avatar",
+    "Badge",
     "Breadcrumbs",
     "Button",
     "ButtonGroup",
@@ -13,8 +13,6 @@
     "CardSubtitle",
     "CardText",
     "CardTitle",
-    "Carousel",
-    "CarouselItem",
     "Checkbox",
     "Chip",
     "Dialog",
@@ -51,8 +49,8 @@
     "Tab",
     "TabContent",
     "Tabs",
-    "Textarea",
     "TextField",
+    "Textarea",
     "Tooltip",
     "VirtualList",
     "Window",

diff --git a/packages/api-generator/src/index.js b/packages/api-generator/src/index.js
@@ -1,8 +1,8 @@
 export { default as all } from './all.json';
 export { default as Alert } from './Alert.json';
 export { default as AppBar } from './AppBar.json';
-export { default as Badge } from './Badge.json';
 export { default as Avatar } from './Avatar.json';
+export { default as Badge } from './Badge.json';
 export { default as Breadcrumbs } from './Breadcrumbs.json';
 export { default as Button } from './Button.json';
 export { default as ButtonGroup } from './ButtonGroup.json';
@@ -12,8 +12,6 @@ export { default as CardActions } from './CardActions.json';
 export { default as CardSubtitle } from './CardSubtitle.json';
 export { default as CardText } from './CardText.json';
 export { default as CardTitle } from './CardTitle.json';
-export { default as Carousel } from './Carousel.json';
-export { default as CarouselItem } from './CarouselItem.json';
 export { default as Checkbox } from './Checkbox.json';
 export { default as Chip } from './Chip.json';
 export { default as Dialog } from './Dialog.json';
@@ -50,8 +48,8 @@ export { default as Table } from './Table.json';
 export { default as Tab } from './Tab.json';
 export { default as TabContent } from './TabContent.json';
 export { default as Tabs } from './Tabs.json';
-export { default as Textarea } from './Textarea.json';
 export { default as TextField } from './TextField.json';
+export { default as Textarea } from './Textarea.json';
 export { default as Tooltip } from './Tooltip.json';
 export { default as VirtualList } from './VirtualList.json';
 export { default as Window } from './Window.json';

diff --git a/packages/docs/src/examples/TextField/actions.svelte b/packages/docs/src/examples/TextField/actions.svelte
@@ -0,0 +1,23 @@
+<script>
+  import { TextField, Overlay, ProgressCircular, Icon } from 'svelte-materialify/src';
+
+  let active = false;
+</script>
+
+<TextField
+  on:keypress={(e) => {
+    if (e.key === 'Enter') active = true;
+  }}>
+  Email
+  <div slot="prepend">
+    <Icon class="mdi mdi-email" />
+  </div>
+</TextField>
+
+<Overlay
+  {active}
+  on:click={() => {
+    active = false;
+  }}>
+  <ProgressCircular color="primary" indeterminate size={128} />
+</Overlay>
diff --git a/packages/docs/src/routes/components/text-field.md b/packages/docs/src/routes/components/text-field.md
@@ -75,3 +75,9 @@ const rules = [
 ```
 
 <Components.Example file="TextField/validation" />
+
+### EventHandler
+
+Text field provides eventHandler like `on:keypress` to perform actions while pressing keys.
+
+<Components.Example file="TextField/actions" />
diff --git a/packages/svelte-materialify/src/components/TextField/TextField.svelte b/packages/svelte-materialify/src/components/TextField/TextField.svelte
@@ -99,6 +99,7 @@
         on:blur
         on:input
         on:change
+        on:keypress
         {...$$restProps} />
     </div>