{"version":3,"sources":["webpack:///./src/views/forms/form-element/form-tag/code.js"],"names":["codeAdvanceCustom","codeBasic","codeCustom","codeDetecting","codeNativeInput","codeRemoval","codeSeparators","codeStyling","codeValidation"],"mappings":"kHAAA,kaAAO,IAAMA,EAAoB,mlHAkIpBC,EAAY,ubA2BZC,EAAa,o/DA4EbC,EAAgB,qkCAoDhBC,EAAkB,ymEA8ElBC,EAAc,w0BAmCdC,EAAiB,0kBA+BjBC,EAAc,yjBA+BdC,EAAiB","file":"js/chunk-2d0d6571.f9552b39.js","sourcesContent":["export const codeAdvanceCustom = `\n<template>\n  <div>\n    <b-form-group label=\"Tagged input using dropdown\">\n      <b-form-tags\n        v-model=\"value\"\n        no-outer-focus\n      >\n        <template v-slot=\"{ tags, disabled, addTag, removeTag }\">\n          <ul\n            v-if=\"tags.length > 0\"\n            class=\"list-inline d-inline-block mb-1\"\n          >\n            <li\n              v-for=\"tag in tags\"\n              :key=\"tag\"\n              class=\"list-inline-item\"\n            >\n              <b-form-tag\n                :title=\"tag\"\n                :disabled=\"disabled\"\n                variant=\"primary\"\n                @remove=\"removeTag(tag)\"\n              >\n                {{ tag }}\n              </b-form-tag>\n            </li>\n          </ul>\n\n          <b-dropdown\n            size=\"sm\"\n            variant=\"outline-secondary\"\n            block\n            menu-class=\"w-100\"\n          >\n            <template v-slot:button-content>\n              <b-icon icon=\"tag-fill\" /> Choose tags\n            </template>\n            <b-dropdown-form @submit.stop.prevent=\"() => {}\">\n              <b-form-group\n                label-for=\"tag-search-input\"\n                label=\"Search tags\"\n                label-cols-md=\"auto\"\n                class=\"mb-0\"\n                label-size=\"sm\"\n                :description=\"searchDesc\"\n                :disabled=\"disabled\"\n              >\n                <b-form-input\n                  id=\"tag-search-input\"\n                  v-model=\"search\"\n                  type=\"search\"\n                  size=\"sm\"\n                  autocomplete=\"off\"\n                />\n              </b-form-group>\n            </b-dropdown-form>\n            <b-dropdown-divider />\n            <b-dropdown-item\n              v-for=\"option in availableOptions\"\n              :key=\"option\"\n              @click=\"onOptionClick({ option, addTag })\"\n            >\n              {{ option }}\n            </b-dropdown-item>\n            <b-dropdown-text v-if=\"availableOptions.length === 0\">\n              There are no tags available to select\n            </b-dropdown-text>\n          </b-dropdown>\n        </template>\n      </b-form-tags>\n    </b-form-group>\n  </div>\n</template>\n\n<script>\nimport {BFormTags,BFormGroup,BDropdown,BDropdownForm,BFormInput,BDropdownDivider,BDropdownItem,BFormTag,BDropdownText} from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BFormTags,\n    BFormGroup,\n    BDropdown,\n    BDropdownForm,\n    BFormInput,\n    BDropdownDivider,\n    BDropdownItem,\n    BFormTag,\n    BDropdownText,\n  },\n  data: () => ({\n    options: ['Apple', 'Orange', 'Banana', 'Lime', 'Peach', 'Chocolate', 'Strawberry'],\n    search: '',\n    value: [],\n    codeAdvanceCustom,\n  }),\n  computed: {\n    criteria() {\n      // Compute the search criteria\n      return this.search.trim().toLowerCase()\n    },\n    availableOptions() {\n      const { criteria } = this\n\n      // Filter out already selected options\n      const options = this.options.filter(opt => this.value.indexOf(opt) === -1)\n      if (criteria) {\n        // Show only options that match criteria\n        return options.filter(opt => opt.toLowerCase().indexOf(criteria) > -1)\n      }\n\n      // Show all options available\n      return options\n    },\n    searchDesc() {\n      if (this.criteria && this.availableOptions.length === 0) {\n        return 'There are no tags matching your search criteria'\n      }\n      return ''\n    },\n  },\n  methods: {\n    onOptionClick({ option, addTag }) {\n      addTag(option)\n      this.search = ''\n    },\n  },\n}\n</script>\n`\nexport const codeBasic = `\n<template>\n  <div>\n    <label for=\"tags-basic\">Type a new tag and press enter</label>\n    <b-form-tags\n      v-model=\"value\"\n      input-id=\"tags-basic\"\n      class=\"mb-2\"\n    />\n    <p>Value: {{ value }}</p>\n  </div>\n</template>\n\n<script>\nimport { BFormTags } from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BFormTags,\n  },\n  data: () => ({\n    value: ['apple', 'orange'],\n  }),\n}\n</script>\n`\n\nexport const codeCustom = `\n<template>\n  <div>\n    <b-form-group label=\"Tagged input using select\">\n      <!-- prop \\`add-on - change\\` is needed to enable adding tags vie the \\`change\\` event -->\n      <b-form-tags\n        v-model=\"value\"\n        size=\"lg\"\n        add-on-change\n        no-outer-focus\n      >\n        <template v-slot=\"{ tags, inputAttrs, inputHandlers, disabled, removeTag }\">\n          <ul\n            v-if=\"tags.length > 0\"\n            class=\"list-inline d-inline-block mb-1\"\n          >\n            <li\n              v-for=\"tag in tags\"\n              :key=\"tag\"\n              class=\"list-inline-item\"\n            >\n              <b-form-tag\n                :title=\"tag\"\n                :disabled=\"disabled\"\n                variant=\"primary\"\n                @remove=\"removeTag(tag)\"\n              >\n                {{ tag }}\n              </b-form-tag>\n            </li>\n          </ul>\n          <b-form-select\n            v-bind=\"inputAttrs\"\n            :disabled=\"disabled || availableOptions.length === 0\"\n            :options=\"availableOptions\"\n            v-on=\"inputHandlers\"\n          >\n            <template v-slot:first>\n              <!-- This is required to prevent bugs with Safari -->\n              <option\n                disabled\n                value=\"\"\n              >\n                Choose a tag...\n              </option>\n            </template>\n          </b-form-select>\n        </template>\n      </b-form-tags>\n    </b-form-group>\n  </div>\n</template>\n\n<script>\nimport {BFormTags, BFormTag, BFormGroup, BFormSelect} from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BFormTags,\n    BFormGroup,\n    BFormSelect,\n    BFormTag,\n  },\n  data: () => ({\n    options: ['Apple', 'Orange', 'Banana', 'Lime', 'Peach', 'Chocolate', 'Strawberry'],\n    value: [],\n    codeCustom,\n  }),\n  computed: {\n    availableOptions() {\n      return this.options.filter(opt => this.value.indexOf(opt) === -1)\n    },\n  },\n}\n</script>\n`\nexport const codeDetecting = `\n<template>\n  <div>\n    <label for=\"tags-state-event\">Enter tags</label>\n    <b-form-tags\n      v-model=\"tags\"\n      input-id=\"tags-state-event\"\n      :tag-validator=\"validator\"\n      placeholder=\"Enter tags (3-5 characters) separated by space\"\n      separator=\" \"\n      @tag-state=\"onTagState\"\n    />\n    <p class=\"mt-1\">\n      Tags: {{ tags }}\n    </p>\n    <p>Event values:</p>\n    <ul>\n      <li>validTags: {{ validTags }}</li>\n      <li>invalidTags: {{ invalidTags }}</li>\n      <li>duplicateTags: {{ duplicateTags }}</li>\n    </ul>\n  </div>\n</template>\n\n<script>\nimport { BFormTags } from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BFormTags,\n  },\n  data: () => ({\n    tags: [],\n    validTags: [],\n    invalidTags: [],\n    duplicateTags: [],\n    codeDetecting,\n  }),\n  methods: {\n    onTagState(valid, invalid, duplicate) {\n      this.validTags = valid\n      this.invalidTags = invalid\n      this.duplicateTags = duplicate\n    },\n    validator(tag) {\n      return tag.length > 2 && tag.length < 6\n    },\n  },\n}\n</script>\n`\n\nexport const codeNativeInput = `\n<template>\n  <div>\n    <b-form-tags\n      v-model=\"value\"\n      no-outer-focus\n    >\n      <template #\"{ tags, inputAttrs, inputHandlers, addTag, removeTag }\">\n        <b-input-group aria-controls=\"my-custom-tags-list\">\n          <input\n            v-bind=\"inputAttrs\"\n            placeholder=\"New tag - Press enter to add\"\n            class=\"form-control\"\n            v-on=\"inputHandlers\"\n          >\n          <b-input-group-append>\n            <b-button\n              variant=\"primary\"\n              @click=\"addTag()\"\n            >\n              Add\n            </b-button>\n          </b-input-group-append>\n        </b-input-group>\n        <ul\n          id=\"my-custom-tags-list\"\n          class=\"list-unstyled d-inline-flex flex-wrap mb-0\"\n          aria-live=\"polite\"\n          aria-atomic=\"false\"\n          aria-relevant=\"additions removals\"\n        >\n          <!-- Always use the tag value as the :key, not the index! -->\n          <!-- Otherwise screen readers will not read the tag\n             additions and removals correctly -->\n          <b-card\n            v-for=\"tag in tags\"\n            :id=\"\\`my-custom-tags-tag_\\${tag.replace(/\\\\s/g, '_')}_\\`\"\n            :key=\"tag\"\n            tag=\"li\"\n            class=\"shadow-none border mt-1 mr-1 mb-0\"\n            body-class=\"py-1 pr-2 text-nowrap\"\n          >\n            <strong>{{ tag }}</strong>\n            <b-button\n              variant=\"link\"\n              size=\"sm\"\n              :aria-controls=\"\\`my-custom-tags-tag_\\${tag.replace(/\\\\s/g, '_')}_\\`\"\n              class=\"py-0\"\n              @click=\"removeTag(tag)\"\n            >\n              remove\n            </b-button>\n          </b-card>\n        </ul>\n      </template>\n    </b-form-tags>\n  </div>\n</template>\n\n<script>\nimport {\n  BFormTags, BInputGroup, BInputGroupAppend, BCard, BButton,\n} from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BFormTags,\n    BInputGroup,\n    BCard,\n    BButton,\n    BInputGroupAppend,\n  },\n  data: () => ({\n    value: ['apple', 'orange', 'banana', 'pear', 'peach'],\n  }),\n}\n</script>\n`\nexport const codeRemoval = `\n<template>\n  <div>\n    <label for=\"tags-remove-on-delete\">Enter new tags separated by space</label>\n    <b-form-tags\n      v-model=\"value\"\n      input-id=\"tags-remove-on-delete\"\n      :input-attrs=\"{ 'aria-describedby': 'tags-remove-on-delete-help' }\"\n      separator=\" \"\n      placeholder=\"Enter new tags separated by space\"\n      remove-on-delete\n      no-add-on-enter\n      class=\"mb-2\"\n    />\n    <b-form-text id=\"tags-remove-on-delete-help\">\n      Press <kbd>Backspace</kbd> to remove the last tag entered\n    </b-form-text>\n    <p>Value: {{ value }}</p>\n  </div>\n</template>\n\n<script>\nimport { BFormTags, BFormText } from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BFormTags,\n    BFormText,\n  },\n  data: () => ({\n    value: ['apple', 'orange', 'grape'],\n  }),\n}\n</script>\n`\nexport const codeSeparators = `\n<template>\n  <div>\n    <label for=\"tags-separators\">Enter tags separated by space, comma or semicolon</label>\n    <b-form-tags\n      v-model=\"value\"\n      input-id=\"tags-separators\"\n      separator=\" ,;\"\n      placeholder=\"Enter new tags separated by space, comma or semicolon\"\n      no-add-on-enter\n      class=\"mb-2\"\n    />\n    <p>Value: {{ value }}</p>\n  </div>\n</template>\n\n<script>\nimport { BFormTags } from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BFormTags,\n  },\n  data: () => ({\n    value: ['one', 'two'],\n  }),\n}\n</script>\n\n`\n\nexport const codeStyling = `\n<template>\n  <div>\n    <label for=\"tags-pills\">Enter tags</label>\n    <b-form-tags\n      v-model=\"value\"\n      input-id=\"tags-pills\"\n      tag-variant=\"primary\"\n      tag-pills\n      size=\"lg\"\n      separator=\" \"\n      placeholder=\"Enter new tags separated by space\"\n      class=\"mb-2\"\n    />\n    <p>Value: {{ value }}</p>\n  </div>\n</template>\n\n<script>\nimport { BFormTags } from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BFormTags,\n  },\n  data: () => ({\n    value: ['apple', 'orange', 'grape'],\n  }),\n}\n</script>\n`\nexport const codeValidation = `\n<template>\n  <div>\n    <b-form-group\n      :state=\"state\"\n      label=\"Tags validation example\"\n      label-for=\"tags-validation\"\n    >\n      <b-form-tags\n        v-model=\"tags\"\n        input-id=\"tags-validation\"\n        :input-attrs=\"{ 'aria-describedby': 'tags-validation-help' }\"\n        :state=\"state\"\n        :tag-validator=\"tagValidator\"\n        separator=\" \"\n      />\n      <!-- The following slots are for b-form-group -->\n      <template #invalid-feedback>\n        You must provide at least 3 tags and no more than 8\n      </template>\n      <template #description>\n        <div id=\"tags-validation-help\">\n          Tags must be 3 to 5 characters in length and all lower case. Enter tags separated by spaces or press enter.\n        </div>\n      </template>\n    </b-form-group>\n  </div>\n</template>\n\n<script>\nimport { BFormTags, BFormGroup } from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BFormTags,\n    BFormGroup,\n  },\n  data: () => ({\n    tags: [],\n    dirty: false,\n    codeValidation,\n  }),\n  computed: {\n    state() {\n      // Overall component validation state\n      return this.dirty ? this.tags.length > 2 && this.tags.length < 9 : null\n    },\n  },\n  watch: {\n    tags() {\n      // Set the dirty flag on first change to the tags array\n      this.dirty = true\n    },\n  },\n  methods: {\n    tagValidator(tag) {\n      // Individual tag validator function\n      return tag === tag.toLowerCase() && tag.length > 2 && tag.length < 6\n    },\n  },\n}\n</script>\n`\n"],"sourceRoot":""}