Neumorphism/input

src/components/DesignSystem/SDesignSystemProvider.vue

@@ -14,3 +14,10 @@ export default class SDesignSystemProvider extends Vue {
   @Provide(DesignSystemProvideKey) designSystem = this
 }
 </script>
+
+<style lang="scss" scoped>
+.design-system-provider {
+  flex: 1;
+  width: 100%;
+}
+</style>

src/components/Input/SInput.vue

@@ -3,40 +3,51 @@
     class="s-input"
     :class="computedClasses"
   >
-    <span v-if="value && !isMediumInput" class="s-placeholder">{{ placeholder }}</span>
-    <el-input
-      ref="el-input"
-      :value="value"
-      :type="computedType"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :show-password="showPassword && isTextInput"
-      :readonly="readonly"
-      :show-word-limit="showTextLimit && isTextOrTextareaInput"
-      :maxlength="maxlength"
-      :minlength="minlength"
-      :autocomplete="autocomplete"
-      :name="name"
-      :max="max"
-      :min="min"
-      :form="form"
-      :label="label"
-      :accept="accept"
-      :tabindex="tabindex"
-      :prefix-icon="(isMediumInput && prefix) ? prefix : ''"
-      :suffix-icon="suffix"
-      @input="handleInput"
-      @change="handleChange"
-      @blur="handleBlur"
-      @focus="handleFocus"
-      @paste.native="handlePaste"
-    >
-      <slot slot="suffix" name="suffix"></slot>
-    </el-input>
-    <template v-if="type === InputType.TEXT_FILE">
-      <s-icon name="file-file-upload-24" />
-      <input :value="emptyValue" type="file" :accept="accept" @change="handleTextFileChange">
-    </template>
+    <slot name="top" />
+
+    <div class="s-input__content">
+      <slot name="left" />
+
+      <div class="s-input__input">
+        <span v-if="value && !isMediumInput && !$slots.top" class="s-placeholder">{{ placeholder }}</span>
+        <el-input
+          ref="el-input"
+          :value="value"
+          :type="computedType"
+          :placeholder="placeholder"
+          :disabled="disabled"
+          :show-password="showPassword && isTextInput"
+          :readonly="readonly"
+          :show-word-limit="showTextLimit && isTextOrTextareaInput"
+          :maxlength="maxlength"
+          :minlength="minlength"
+          :autocomplete="autocomplete"
+          :name="name"
+          :max="max"
+          :min="min"
+          :form="form"
+          :label="label"
+          :accept="accept"
+          :tabindex="tabindex"
+          :prefix-icon="prefix"
+          :suffix-icon="suffix"
+          @input="handleInput"
+          @change="handleChange"
+          @blur="handleBlur"
+          @focus="handleFocus"
+          @paste.native="handlePaste"
+        >
+          <slot slot="suffix" name="suffix"></slot>
+        </el-input>
+        <template v-if="type === InputType.TEXT_FILE">
+          <s-icon name="file-file-upload-24" />
+          <input :value="emptyValue" type="file" :accept="accept" @change="handleTextFileChange">
+        </template>
+      </div>
+      <slot name="right" />
+    </div>
+
+    <slot name="bottom"/>
   </div>
 </template>
 
@@ -46,13 +57,14 @@ import { ElInput } from 'element-ui/types/input'
 import { ElForm } from 'element-ui/types/form'
 
 import { SIcon } from '../Icon'
+import { DesignSystemInject } from '../DesignSystem'
 import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { Autocomplete, InputSize, InputType } from './consts'
 
 @Component({
   components: { SIcon }
 })
-export default class SInput extends Mixins(BorderRadiusMixin) {
+export default class SInput extends Mixins(BorderRadiusMixin, DesignSystemInject) {
   readonly InputType = InputType
   readonly emptyValue = null
   /**
@@ -170,6 +182,9 @@ export default class SInput extends Mixins(BorderRadiusMixin) {
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
+    if (this.designSystemClass) {
+      cssClasses.push(this.designSystemClass)
+    }
     if (this.focused) {
       cssClasses.push('s-focused')
     }
@@ -191,6 +206,12 @@ export default class SInput extends Mixins(BorderRadiusMixin) {
     if (this.size) {
       cssClasses.push(this.sizeClass)
     }
+    if (this.prefix) {
+      cssClasses.push('s-input--prefix')
+    }
+    if (this.suffix) {
+      cssClasses.push('s-input--suffix')
+    }
     return cssClasses
   }
 

src/stories/SFloatInput.stories.ts

@@ -1,6 +1,7 @@
-import { number, text, boolean, object, withKnobs } from '@storybook/addon-knobs'
+import { number, text, boolean, object, select, withKnobs } from '@storybook/addon-knobs'
 
-import { SFloatInput, SRow } from '../components'
+import { SFloatInput, SRow, SDesignSystemProvider } from '../components'
+import { DesignSystemTypes } from '../components/DesignSystem'
 
 export default {
   component: SFloatInput,
@@ -9,20 +10,26 @@ export default {
 }
 
 export const configurable = () => ({
-  components: { SFloatInput, SRow },
-  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  components: { SFloatInput, SRow, SDesignSystemProvider },
+  template: `
+            <s-design-system-provider :value="designSystem">
+              <s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-float-input
                  v-model="model"
                  :decimals="decimals"
                  :hasLocaleString="hasLocaleString"
                  :delimiters="delimiters"
                  :max="max"
                />
-             </s-row>`,
+              </s-row>
+            </s-design-system-provider>`,
   data: () => ({
     model: ''
   }),
   props: {
+    designSystem: {
+      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+    },
     decimals: {
       default: number('Decimals', 18)
     },

src/stories/SInput.stories.ts

@@ -1,8 +1,9 @@
 import { text, boolean, withKnobs, number, select } from '@storybook/addon-knobs'
 
-import { SInput, SRow, SCol } from '../components'
+import { SInput, SRow, SCol, SDesignSystemProvider } from '../components'
 import { BorderRadius } from '../types'
 import { InputType, InputSize } from '../components/Input'
+import { DesignSystemTypes } from '../components/DesignSystem'
 
 export default {
   component: SInput,
@@ -12,8 +13,10 @@ export default {
 }
 
 export const configurable = () => ({
-  components: { SInput },
-  template: `<s-input
+  components: { SInput, SDesignSystemProvider },
+  template: `
+            <s-design-system-provider :value="designSystem">
+              <s-input
                v-model="input"
                :type="type"
                :placeholder="placeholder"
@@ -26,11 +29,32 @@ export const configurable = () => ({
                :size="size"
                :prefix="prefix"
                :suffix="suffix"
-             />`,
+              >
+                <div v-if="top" slot="top">{{ top }}</div>
+                <div v-if="bottom" slot="bottom">{{ bottom }}</div>
+                <div v-if="left" slot="left">{{ left }}</div>
+                <div v-if="right" slot="right">{{ right }}</div>
+              </s-input>
+            </s-design-system-provider>`,
   data: () => ({
     input: ''
   }),
   props: {
+    designSystem: {
+      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+    },
+    top: {
+      default: text('Top slot content', '')
+    },
+    bottom: {
+      default: text('Bottom slot content', '')
+    },
+    left: {
+      default: text('Left slot content', '')
+    },
+    right: {
+      default: text('Right slot content', '')
+    },
     type: {
       default: select('Type', Object.values(InputType), InputType.TEXT)
     },