github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/shared/fields/StringField.vue (about)

     1  <template>
     2    <b-form-group :invalid-feedback="invalidFeedback" :description="description">
     3      <template v-slot:label>
     4        <span v-html="label"></span>
     5      </template>
     6  
     7      <b-form-input
     8        :placeholder="innerPlaceholder"
     9        :required="required"
    10        :value="value"
    11        @input="onInput"
    12        :list="list"
    13        v-if="!textarea"
    14        :type="type in ['securite-sociale', 'tel'] ? 'text' : type"
    15      ></b-form-input>
    16      <b-form-textarea
    17        v-else
    18        :placeholder="innerPlaceholder"
    19        :required="required"
    20        :value="value"
    21        @input="onInput"
    22      >
    23      </b-form-textarea>
    24    </b-form-group>
    25  </template>
    26  
    27  <script lang="ts">
    28  import Vue from "vue";
    29  import Component from "vue-class-component";
    30  import { formatSecuriteSociale, formatTel } from "@/shared/logic/utils";
    31  
    32  const StringFieldProps = Vue.extend({
    33    props: {
    34      value: String,
    35      label: String,
    36      placeholder: String,
    37      type: String,
    38      invalidFeedback: String,
    39      required: Boolean,
    40      list: String,
    41      textarea: Boolean,
    42      description: String
    43    },
    44    model: {
    45      prop: "value",
    46      event: "change"
    47    }
    48  });
    49  
    50  @Component({})
    51  export default class StringField extends StringFieldProps {
    52    get innerPlaceholder() {
    53      return this.placeholder ? this.placeholder : this.label + "...";
    54    }
    55  
    56    onInput(v: string) {
    57      if (this.type == "securite-sociale") {
    58        v = formatSecuriteSociale(v);
    59      } else if (this.type == "tel") {
    60        v = formatTel(v);
    61      }
    62      this.$emit("change", v);
    63    }
    64  }
    65  </script>
    66  
    67  <style scoped></style>