nativescript-vue material text field

v-text-field.vue

<template>
  <StackLayout :class="classess">
    <FlexboxLayout
      flexDirection="row"
      :justifyContent="hintIsRtl ? 'flex-end' : 'flex-start'"
      class="field-label"
    >
      <StackLayout
        v-if="value_.length > 0"
        class="wrapper"
      >
        <Label
          class="hint"
          :text="hint"
        />
      </StackLayout>
    </FlexboxLayout>
    <TextField
      ref="fieldInput"
      v-model="value_"
      :hint="hint"
      :autocorrect="autocorrect"
      :secure="secure"
      :isEnabled="isEnabled"
      class="text-input"
      @blur="(e) => $emit('blur', e)"
    />
    <Label
      class="helper"
      :text="helper"
    />
  </StackLayout>
</template>

<script>
import { isRtl } from '../helpers/validate'
export default {
  props: {
    value: {
      type: [Number, String, null],
      required: true
    },
    style: {
      type: Object,
      default: null
    },
    class: {
      type: String,
      default: null
    },
    helper: {
      type: String,
      default: ''
    },
    secure: {
      type: Boolean,
      default: false
    },
    autocorrect: {
      type: Boolean,
      default: true
    },
    hint: {
      type: String,
      default: ''
    },
    hasError: {
      type: Boolean,
      default: false
    },
    isEnabled: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      value_: this.value === null ? '' : '' + this.value
    }
  },
  computed: {
    classess () {
      const res = ['v-text-field container']
      if (this.hasError) res.push('has-error')
      if (!this.isEnabled) res.push('disabled')
      return res
    },
    hintIsRtl () {
      if (!this.hint) return false
      return isRtl(this.hint)
    }
  },
  watch: {
    value (newVal, oldVal) {
      if (newVal === oldVal) return
      this.value_ = newVal === null ? '' : '' + newVal
    },
    value_ (newVal, oldVal) {
      if (newVal === oldVal) return
      this.$emit('input', newVal)
    }
  },
  methods: {
    focus () {
      this.$refs.fieldInput.nativeView.focus()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  margin-bottom: 0;
}

// Hint
.field-label {
  padding: 0;
  // margin-top: 0;
  margin-bottom: -9;
  z-index: 1;
  height: 18;
  .wrapper {
    background-color: #fff;
    padding-left: 4;
    padding-right: 4;
    margin-left: 10;
    margin-right: 10;
  }
  .hint {
    margin-top: 0;
    padding-left: 0;
    font-size: 14;
  }
}

.text-input {
  padding-top: 16;
  padding-bottom: 16;
  padding-left: 12;
  padding-right: 12;
  margin-bottom: 0;
  border-radius: 4;
  border-width: 2;
  font-size: 16;
  border-color: #eee;
  color: #000;
}

// Helper
.helper{
  font-size: 11;
  margin-right: 8;
  margin-left: 8;
  margin-top: 0;
  color: #555;
  height: 16;
}

.has-error {
  .text-input, .helper, .hint{
    color: red
  }
}
.disabled {
  .text-input {
    color: #999;
  }
}
</style>