@magicgol/polyjuice 0.41.0 → 0.42.0

Sign up to get free protection for your applications and to get access to all the features.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@magicgol/polyjuice",
3
- "version": "0.41.0",
3
+ "version": "0.42.0",
4
4
  "scripts": {
5
5
  "serve": "vue-cli-service serve",
6
6
  "build": "vue-cli-service build",
@@ -0,0 +1,23 @@
1
+ import MgTextarea from './Textarea.vue';
2
+
3
+ // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
4
+ export default {
5
+ title: 'Form/Input/Textarea',
6
+ component: MgTextarea,
7
+ // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
8
+ argTypes: {
9
+ },
10
+ };
11
+
12
+ // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
13
+ const Template = (args, { argTypes }) => ({
14
+ props: Object.keys(argTypes),
15
+ components: { MgTextarea },
16
+ template: `<mg-textarea @click="$emit('click')" v-bind="$props"></mg-textarea>`,
17
+ });
18
+
19
+ export const Default = Template.bind({});
20
+ // More on args: https://storybook.js.org/docs/vue/writing-stories/args
21
+ Default.args = {
22
+ value: 'given input'
23
+ };
@@ -0,0 +1,81 @@
1
+ <template>
2
+ <div
3
+ :class="classes"
4
+ class="border bg-white rounded p-1"
5
+ >
6
+ <textarea
7
+ v-on:input="$emit('input', $event.target.value)"
8
+ v-on:focus="propagateFocus"
9
+ v-on:blur="propagateBlur"
10
+ v-bind:value="value"
11
+ v-bind:placeholder="placeholder"
12
+ style="resize: none;"
13
+ class="w-100 border-0"
14
+ ></textarea>
15
+ </div>
16
+ </template>
17
+
18
+ <script>
19
+ export default {
20
+ data () {
21
+ return {
22
+ focus: false
23
+ };
24
+ },
25
+ props: {
26
+ value: {
27
+ type: String,
28
+ default: null
29
+ },
30
+ placeholder: {
31
+ type: String,
32
+ default: null
33
+ }
34
+ },
35
+ computed: {
36
+ classes () {
37
+ return {
38
+ 'mg-textarea': true,
39
+ 'mg-textarea--disabled': this.disabled,
40
+ 'mg-textarea--errored': this.error === true,
41
+ 'mg-textarea--focused': this.focus === true,
42
+ };
43
+ }
44
+ },
45
+ methods: {
46
+ propagateFocus () {
47
+ console.log('propage focus')
48
+ this.focus = true;
49
+ this.$emit('focus');
50
+ },
51
+ propagateBlur () {
52
+ this.focus = false;
53
+ this.$emit('blur');
54
+ }
55
+ }
56
+ };
57
+ </script>
58
+
59
+
60
+ <style lang="scss">
61
+ @import '../../../../assets/palette';
62
+
63
+ .mg-textarea {
64
+ border-color: #c2c2c2;
65
+
66
+ > textarea {
67
+ font-family: 'Raleway', sans-serif;
68
+ font-weight: 400;
69
+ font-size: 0.875rem;
70
+ height: 4.6875rem;
71
+
72
+ &:focus {
73
+ outline: 0;
74
+ }
75
+ }
76
+
77
+ &--focused {
78
+ border-color: #444444 !important;
79
+ }
80
+ }
81
+ </style>