PHP Classes
elePHPant
Icontem

File: resources/js/components/FormField.vue

Recommend this page to a friend!
  Classes of Naif Alshaye  >  Laravel Nova Text Field with Icon  >  resources/js/components/FormField.vue  >  Download  
File: resources/js/components/FormField.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Laravel Nova Text Field with Icon
Show a text field with custom icon in Laravel Nova
Author: By
Last change:
Date: 9 months ago
Size: 2,591 bytes
 

 

Contents

Class file image Download
<template>
    <default-field :field="field">
        <template slot="field">
            <div class="input_withicon">
                <input :id="field.name" type="text"
                       class="w-full form-control form-input form-input-bordered"
                       :class="errorClasses"
                       :placeholder="field.name"
                       v-model="value"
                />
                <div v-if="this.field.position != 'out'" :class="custom_color(this.field.color)" class="icon_in"
                     :style="getCustomStyle()">
                    <i :class="showIcon(field.icon)">
                    </i>
                </div>
                <div v-if="this.field.position == 'out'" :class="custom_color(this.field.color)" class="icon_out"
                     :style="getCustomStyle()">
                    <i :class="showIcon(field.icon)">
                    </i>
                </div>
                <p v-if="hasError" class="my-2 text-danger">
                    {{ firstError }}
                </p>
            </div>
        </template>
    </default-field>
</template>
<script>
  import { FormField, HandlesValidationErrors } from 'laravel-nova'

  export default {
    mixins: [FormField, HandlesValidationErrors],

    props: ['resourceName', 'resourceId', 'field'],
    data: function (){
      return {
        is_code: false,
      }
    },
    methods: {
      getPosition: function (pos) {
        alert(pos);
      },
      showIcon: function(icon){
        if (icon == null) {
          return 'fas fa-edit';
        } else{
          return this.field.icon;
        }
      },
      getCustomStyle() {
        if(this.is_code == true){
          return "color : " + this.field.color
        }
        return ""
      },
      custom_color(color) {
        if(color.indexOf("#") === 0) {
          this.is_code = true
          return 'custom-color';
        }
        this.is_code = false;
        return this.color;
      },
      /*
       * Set the initial, internal value for the field.
       */
      setInitialValue() {
        this.value = this.field.value || ''
      },

      /**
       * Fill the given FormData object with the field's internal value.
       */
      fill(formData) {
        formData.append(this.field.attribute, this.value || '')
      },

      /**
       * Update the field's internal value.
       */
      handleChange(value) {
        this.value = value
      }
    },
    created: function() {
      if (!this.field.color) {
        this.field.color = '#717A83';
      }
    }
  }
</script>