{"version":3,"sources":["webpack:///./src/views/forms/form-element/form-input/code.js"],"names":["codeFloatinLabel","codeBasic","codeDatalist","codeDebounce","codeSize","codeStates","codeFormatter","codeValidateTooltips","codeFloatingLabelIcon","codeHorizontalSize"],"mappings":"gHAAA,4dAAO,IAAMA,EAAmB,mnCAkDnBC,EAAY,+wEAqHZC,EAAe,8kBAkCfC,EAAe,ydA+BfC,EAAW,0lCA6DXC,EAAa,+oCA0DbC,EAAgB,wwCA6DhBC,EAAuB,wmFAmHvBC,EAAwB,yuBAuCxBC,EAAqB","file":"js/chunk-2d21646f.b8e515fc.js","sourcesContent":["export const codeFloatinLabel = `\n<template>\n   <b-row>\n    <b-col md=\"4\">\n      <div class=\"form-label-group\">\n        <b-form-input\n          id=\"floating-label1\"\n          placeholder=\"Label Placeholder\"\n        />\n        <label for=\"floating-label1\">Label-placeholder</label>\n      </div>\n    </b-col>\n    <b-col md=\"4\">\n      <div class=\"form-label-group has-icon-left\">\n        <b-form-input\n          id=\"iconLabelLeft\"\n          placeholder=\"Icon Left, Default Input\"\n        />\n        <div class=\"form-control-position\">\n          <i class=\"bx bx-user\" />\n        </div>\n        <label for=\"iconLabelLeft\">Icon Left, Default Input</label>\n      </div>\n    </b-col>\n    <b-col md=\"4\">\n      <div class=\"form-label-group\">\n        <b-form-input\n          placeholder=\"Disabled-placeholder\"\n          disabled\n        />\n        <label for=\"floating-label-disable\">Disabled-placeholder</label>\n      </div>\n    </b-col>\n  </b-row>\n</template>\n\n<script>\nimport { BFormInput, BRow, BCol } from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BCardCode,\n    BFormInput,\n    BRow,\n    BCol,\n  },\n}\n</script>\n`\n\nexport const codeBasic = `\n<template>\n  <b-row>\n    <b-col\n      md=\"6\"\n      xl=\"4\"\n      class=\"mb-1\"\n    >\n\n      <!-- basic -->\n      <b-form-group\n        label=\"Basic Input\"\n        label-for=\"basicInput\"\n      >\n        <b-form-input\n          id=\"basicInput\"\n          placeholder=\"Enter Email\"\n        />\n      </b-form-group>\n    </b-col>\n\n    <b-col\n      md=\"6\"\n      xl=\"4\"\n      class=\"mb-1\"\n    >\n      <!-- input text with help -->\n      <b-form-group>\n        <label for=\"InputHelp\">Input text with help</label>\n        <small class=\"text-muted\"> eg. <i>someone@example.com</i></small>\n        <b-form-input id=\"InputHelp\" />\n      </b-form-group>\n    </b-col>\n\n    <b-col\n      md=\"6\"\n      xl=\"4\"\n      class=\"mb-1\"\n    >\n      <!-- disabled input -->\n      <b-form-group\n        label=\"Disabled Input\"\n        label-for=\"disabledInput\"\n      >\n        <b-form-input\n          id=\"disabledInput\"\n          disabled\n        />\n      </b-form-group>\n    </b-col>\n\n    <b-col\n      md=\"6\"\n      xl=\"4\"\n    >\n      <!-- with helper text -->\n      <b-form-group\n        label=\"With Helper Text\"\n        label-for=\"helperInput\"\n        description=\"Find helper text here for given textbox.\"\n      >\n        <b-form-input\n          id=\"helperInput\"\n          placeholder=\"Name\"\n        />\n      </b-form-group>\n    </b-col>\n    <b-col\n      md=\"6\"\n      xl=\"4\"\n    >\n      <!-- readonly input -->\n      <b-form-group\n        label=\"Readonly Input\"\n        label-for=\"readOnlyInput\"\n      >\n        <b-form-input\n          id=\"readOnlyInput\"\n          value=\"You can't update me :P\"\n          readonly\n        />\n      </b-form-group>\n    </b-col>\n\n    <b-col\n      md=\"6\"\n      xl=\"4\"\n    >\n      <!-- static text -->\n      <b-form-group\n        label=\"Readonly Static Text\"\n        label-for=\"plainTextInput\"\n      >\n        <b-form-input\n          id=\"plainTextInput\"\n          plaintext\n          value=\"email@pixinvent.com\"\n        />\n      </b-form-group>\n    </b-col>\n  </b-row>\n</template>\n\n<script>\nimport {BFormInput, BRow, BCol, BFormGroup} from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BFormInput,\n    BFormGroup,\n    BRow,\n    BCol,\n  },\n}\n</script>\n`\n\nexport const codeDatalist = `\n<template>\n  <b-form-group class=\"mb-0\">\n    <b-form-input list=\"my-list-id\" />\n\n    <datalist id=\"my-list-id\">\n      <option>Manual Option</option>\n      <option\n        v-for=\"size in sizes\"\n        :key=\"size\"\n      >\n        {{ size }}\n      </option>\n    </datalist>\n  </b-form-group>\n</template>\n\n<script>\nimport { BFormInput, BFormGroup } from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BFormGroup,\n    BFormInput,\n  },\n  data() {\n    return {\n      sizes: ['Small', 'Medium', 'Large', 'Extra Large'],\n    }\n  },\n}\n</script>\n`\n\nexport const codeDebounce = `\n<template>\n  <div>\n    <b-form-input\n      v-model=\"value\"\n      type=\"text\"\n      debounce=\"500\"\n    />\n    <b-card-text class=\"mt-1 mb-0\">\n      <strong>Value : </strong><span>{{ value }}</span>\n    </b-card-text>\n  </div>\n</template>\n\n<script>\nimport { BFormInput, BCardText } from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BFormInput,\n    BCardText,\n  },\n  data() {\n    return {\n      value: '',\n    }\n  },\n}\n</script>\n`\n\nexport const codeSize = `\n<template>\n  <b-row>\n\n    <!-- large -->\n    <b-col cols=\"12\">\n      <b-form-group\n        label=\"Large\"\n        label-for=\"largeInput\"\n      >\n        <b-form-input\n          id=\"largeInput\"\n          size=\"lg\"\n          placeholder=\"Large Input\"\n        />\n      </b-form-group>\n    </b-col>\n\n    <!-- default -->\n    <b-col cols=\"12\">\n      <b-form-group\n        label=\"Default\"\n        label-for=\"defaultLabel\"\n      >\n        <b-form-input\n          id=\"defaultLabel\"\n          placeholder=\"Normal Input\"\n        />\n      </b-form-group>\n    </b-col>\n\n    <!-- small -->\n    <b-col cols=\"12\">\n      <b-form-group\n        label=\"Small\"\n        label-for=\"smallInput\"\n      >\n        <b-form-input\n          id=\"smallInput\"\n          size=\"sm\"\n          placeholder=\"Small Input\"\n        />\n      </b-form-group>\n    </b-col>\n  </b-row>\n</template>\n\n<script>\nimport {BFormInput, BRow, BCol, BFormGroup} from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BFormInput,\n    BFormGroup,\n    BRow,\n    BCol,\n  },\n}\n</script>\n`\n\nexport const codeStates = `\n<template>\n  <b-row>\n\n    <!-- valid input -->\n    <b-col md=\"6\">\n      <b-form-group\n        label=\"Valid State\"\n        label-for=\"input-valid\"\n      >\n        <b-form-input\n          id=\"input-valid\"\n          :state=\"true\"\n          placeholder=\"Valid\"\n        />\n        <b-form-valid-feedback>\n          This is valid state.\n        </b-form-valid-feedback>\n      </b-form-group>\n    </b-col>\n\n    <!-- invalid input -->\n    <b-col md=\"6\">\n      <b-form-group\n        label=\"Invalid State\"\n        label-for=\"input-invalid\"\n      >\n        <b-form-input\n          id=\"input-invalid\"\n          :state=\"false\"\n          placeholder=\"Invalid\"\n        />\n        <b-form-invalid-feedback>\n          This is invalid state.\n        </b-form-invalid-feedback>\n      </b-form-group>\n    </b-col>\n  </b-row>\n</template>\n\n<script>\nimport {\n  BFormInput, BRow, BCol, BFormInvalidFeedback, BFormValidFeedback, BFormGroup,\n} from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BFormInput,\n    BFormInvalidFeedback,\n    BFormValidFeedback,\n    BRow,\n    BFormGroup,\n    BCol,\n  },\n}\n</script>\n`\n\nexport const codeFormatter = `\n<template>\n  <div>\n    <b-form-group\n      label=\"Text input with formatter (on input)\"\n      label-for=\"input-formatter\"\n      description=\"We will convert your name to lowercase instantly\"\n    >\n      <b-form-input\n        id=\"input-formatter\"\n        v-model=\"text1\"\n        placeholder=\"Enter your name\"\n        :formatter=\"formatter\"\n      />\n    </b-form-group>\n    <b-card-text><strong>Value:</strong> {{ text1 }}</b-card-text>\n\n    <b-form-group\n      label=\"Text input with lazy formatter (on blur)\"\n      label-for=\"input-lazy\"\n      description=\"This one is a little lazy!\"\n    >\n      <b-form-input\n        id=\"input-lazy\"\n        v-model=\"text2\"\n        placeholder=\"Enter your name\"\n        lazy-formatter\n        :formatter=\"formatter\"\n      />\n    </b-form-group>\n\n    <b-card-text class=\"mb-0\">\n      <strong>Value:</strong> {{ text2 }}\n    </b-card-text>\n  </div>\n</template>\n\n<script>\nimport { BFormInput, BFormGroup, BCardText } from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BFormInput,\n    BCardText,\n    BFormGroup,\n  },\n  data() {\n    return {\n      text1: '',\n      text2: '',\n    }\n  },\n  methods: {\n    formatter(value) {\n      return value.toLowerCase()\n    },\n  },\n}\n</script>\n`\n\nexport const codeValidateTooltips = `\n<template>\n  <b-form novalidate class=\"needs-validation\" @submit.prevent>\n    <b-form-row>\n\n      <!-- valid input  -->\n      <b-col\n        md=\"4\"\n        class=\"mb-3\"\n      >\n        <label for=\"input-valid1\">Valid Input:</label>\n        <b-form-input\n          id=\"input-valid1\"\n          v-model=\"value1\"\n          :state=\"value1.length > 0\"\n          placeholder=\"Valid input\"\n        />\n        <b-form-valid-feedback\n          tooltip\n        >\n          Looks good!\n        </b-form-valid-feedback>\n        <b-form-invalid-feedback\n          tooltip\n        >\n          Please provide a valid input.\n        </b-form-invalid-feedback>\n      </b-col>\n\n      <!-- invalid input -->\n      <b-col\n        md=\"4\"\n        class=\"mb-3\"\n      >\n        <label for=\"input-invalid1\">Invalid Input:</label>\n        <b-form-input\n          id=\"input-invalid1\"\n          v-model=\"value2\"\n          :state=\"value2.length > 0\"\n          placeholder=\"Invalid input\"\n        />\n        <b-form-valid-feedback tooltip>\n          Looks good!\n        </b-form-valid-feedback>\n        <b-form-invalid-feedback\n          tooltip\n        >\n          Please provide a valid input.\n        </b-form-invalid-feedback>\n      </b-col>\n\n      <!-- invalid input -->\n      <b-col\n        md=\"4\"\n        class=\"mb-3\"\n      >\n        <label for=\"input-invalid2\">Invalid Input:</label>\n        <b-form-input\n          id=\"input-invalid2\"\n          v-model=\"value3\"\n          :state=\"value3.length > 0\"\n          placeholder=\"Invalid input\"\n        />\n        <b-form-valid-feedback tooltip>\n          Looks good!\n        </b-form-valid-feedback>\n        <b-form-invalid-feedback tooltip>\n          Please provide a valid city.\n        </b-form-invalid-feedback>\n      </b-col>\n\n      <!-- submit button -->\n      <b-col\n        cols=\"12\"\n      >\n        <b-button\n          v-ripple.400=\"'rgba(255, 255, 255, 0.15)'\"\n          type=\"submit\"\n          variant=\"primary\"\n        >\n          Submit\n        </b-button>\n      </b-col>\n    </b-form-row>\n  </b-form>\n</template>\n\n<script>\nimport { BFormInput, BCol, BForm, BFormRow, BFormValidFeedback, BFormInvalidFeedback, BButton} from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BFormInput,\n    BForm,\n    BButton,\n    BFormRow,\n    BFormValidFeedback,\n    BFormInvalidFeedback,\n    BCol,\n  },\n  directives: {\n    Ripple,\n  },\n  data() {\n    return {\n      value1: 'John',\n      value2: 'Doe',\n      value3: '',\n    }\n  },\n}\n</script>\n`\n\nexport const codeFloatingLabelIcon = `\n<template>\n  <b-row>\n    <b-col md=\"6\">\n      <div class=\"form-label-group\">\n        <b-form-input\n          id=\"floating-label1\"\n          placeholder=\"Label Placeholder\"\n        />\n        <label for=\"floating-label1\">Label-placeholder</label>\n      </div>\n    </b-col>\n    <b-col md=\"6\">\n      <div class=\"form-label-group\">\n        <b-form-input\n          placeholder=\"Disabled-placeholder\"\n          disabled\n        />\n        <label for=\"floating-label-disable\">Disabled-placeholder</label>\n      </div>\n    </b-col>\n  </b-row>\n</template>\n\n<script>\nimport {\n  BFormInput, BRow, BCol\n} from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BFormInput,\n    BRow,\n    BCol,\n  },\n}\n</script>\n`\n\nexport const codeHorizontalSize = `\n<template>\n  <div>\n     <!-- large label  -->\n    <b-form-group\n      label-cols=\"4\"\n      label-cols-lg=\"2\"\n      label-size=\"lg\"\n      label=\"Large\"\n      label-for=\"input-lg\"\n    >\n      <b-form-input\n        id=\"input-lg\"\n        size=\"lg\"\n        placeholder=\"Large Input\"\n      />\n    </b-form-group>\n\n    <!-- default label -->\n    <b-form-group\n      label-cols=\"4\"\n      label-cols-lg=\"2\"\n      label=\"Default\"\n      label-for=\"input-default\"\n    >\n      <b-form-input\n        id=\"input-default\"\n        placeholder=\"Normal Input\"\n      />\n    </b-form-group>\n\n    <!-- small label -->\n    <b-form-group\n      label-cols=\"4\"\n      label-cols-lg=\"2\"\n      label-size=\"sm\"\n      label=\"Small\"\n      label-for=\"input-sm\"\n    >\n      <b-form-input\n        id=\"input-sm\"\n        size=\"sm\"\n        placeholder=\"Small Input\"\n      />\n    </b-form-group>\n  </div>\n</template>\n\n<script>\nimport { BFormGroup, BFormInput } from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BFormGroup,\n    BFormInput,\n  },\n}\n</script>\n`\n"],"sourceRoot":""}