{"version":3,"sources":["webpack:///./src/views/forms/form-element/vue-select/code.js"],"names":["codeVueBasic","codeVueSize","codeVueMultipleSize","codeVueMultiBasic","codeVueMultiIcon","codeMultiPush","codeVueSelectionLimit","codeVueDir"],"mappings":"gHAAA,sYAAO,IAAMA,EAAe,46EAsGfC,EAAc,g9CAqEdC,EAAsB,07CAoEtBC,EAAoB,6cA+BpBC,EAAmB,8hCA2DnBC,EAAgB,sWAyBhBC,EAAwB,+zBA+CxBC,EAAa","file":"js/chunk-2d230884.6e97768c.js","sourcesContent":["export const codeVueBasic = `\n<template>\n   <b-row>\n    <!-- basic select -->\n    <b-col md=\"6\">\n      <h6>Basic Select</h6>\n      <b-card-text>\n        <code>vue-select</code>\n        <span> accepts arrays of primitive values or objects to use as </span>\n        <code>options</code>\n        <span> through the options prop:</span>\n      </b-card-text>\n\n      <b-form-group>\n        <v-select\n          v-model=\"selected\"\n          :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n          label=\"title\"\n          :options=\"option\"\n        />\n      </b-form-group>\n    </b-col>\n\n    <!-- select with icon -->\n    <b-col md=\"6\">\n      <h6>Select with Icon</h6>\n      <b-card-text>\n        <span>The current option within the dropdown, contained within </span><code>&lt;li&gt;</code>\n        <span>.</span>\n        <code>option {Object}</code>\n        <span> - The currently iterated option from </span>\n        <code>filteredOptions</code>\n      </b-card-text>\n\n      <b-form-group>\n        <v-select\n          v-model=\"selected1\"\n          :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n          :options=\"books\"\n          label=\"title\"\n        >\n          <template #option=\"{ title, icon }\">\n            <feather-icon\n              :icon=\"icon\"\n              size=\"16\"\n              class=\"align-middle mr-50\"\n            />\n            <span> {{ title }}</span>\n          </template>\n        </v-select>\n      </b-form-group>\n    </b-col>\n  </b-row>\n</template>\n\n<script>\nimport { BRow, BCol, BFormGroup } from 'bootstrap-vue'\nimport vSelect from 'vue-select'\n\nexport default {\n  components: {\n    BRow,\n    BCol,\n    BFormGroup,\n    vSelect,\n  },\n  data() {\n    return {\n      selected: { title: 'Square' },\n      selected1: {\n        title: 'Aperture',\n        icon: 'ApertureIcon',\n      },\n      option: [{ title: 'Square' }, { title: 'Rectangle' }, { title: 'Rombo' }, { title: 'Romboid' }],\n      books: [\n        {\n          title: 'Aperture',\n          icon: 'ApertureIcon',\n        },\n        {\n          title: 'Codepen',\n          icon: 'CodepenIcon',\n        },\n        {\n          title: 'Globe ',\n          icon: 'GlobeIcon',\n        },\n        {\n          title: 'Instagram ',\n          icon: 'InstagramIcon',\n        },\n      ],\n    }\n  },\n}\n</script>\n\n<style lang=\"scss\">\n@import '@core/scss/vue/libs/vue-select.scss';\n</style>\n`\n\nexport const codeVueSize = `\n<template>\n  <b-row>\n\n    <!-- Small -->\n    <b-col cols=\"12\">\n      <b-form-group>\n        <v-select\n          v-model=\"selected\"\n          :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n          label=\"title\"\n          :options=\"option\"\n          class=\"select-size-sm\"\n        />\n      </b-form-group>\n    </b-col>\n\n    <!-- Medium -->\n    <b-col cols=\"12\">\n      <b-form-group>\n        <v-select\n          v-model=\"selected\"\n          :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n          label=\"title\"\n          :options=\"option\"\n        />\n      </b-form-group>\n    </b-col>\n\n    <!-- Large -->\n    <b-col cols=\"12\">\n      <b-form-group>\n        <v-select\n          v-model=\"selected\"\n          :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n          label=\"title\"\n          :options=\"option\"\n          class=\"select-size-lg\"\n        />\n      </b-form-group>\n    </b-col>\n  </b-row>\n</template>\n\n<script>\nimport { BRow, BCol, BFormGroup } from 'bootstrap-vue'\nimport vSelect from 'vue-select'\n\nexport default {\n  components: {\n    BRow,\n    BCol,\n    BFormGroup,\n    vSelect,\n  },\n data() {\n    return {\n      selected: { title: 'Square' },\n      option: [{ title: 'Square' }, { title: 'Rectangle' }, { title: 'Rombo' }, { title: 'Romboid' }],\n    }\n  },\n}\n</script>\n\n<style lang=\"scss\">\n@import '@core/scss/vue/libs/vue-select.scss';\n</style>\n`\n\nexport const codeVueMultipleSize = `\n<template>\n  <b-row>\n\n    <!-- Small -->\n    <b-col cols=\"12\">\n      <b-form-group>\n        <v-select\n          v-model=\"selected\"\n          :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n          label=\"title\"\n          :options=\"option\"\n          class=\"select-size-sm\"\n          multiple\n        />\n      </b-form-group>\n    </b-col>\n\n    <!-- Medium -->\n    <b-col cols=\"12\">\n      <b-form-group>\n        <v-select\n          v-model=\"selected\"\n          :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n          label=\"title\"\n          :options=\"option\"\n          multiple\n        />\n      </b-form-group>\n    </b-col>\n\n    <!-- Large -->\n    <b-col cols=\"12\">\n      <b-form-group>\n        <v-select\n          v-model=\"selected\"\n          :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n          label=\"title\"\n          :options=\"option\"\n          class=\"select-size-lg\"\n          multiple\n        />\n      </b-form-group>\n    </b-col>\n  </b-row>\n</template>\n\n<script>\nimport { BRow, BCol, BFormGroup } from 'bootstrap-vue'\nimport vSelect from 'vue-select'\n\nexport default {\n  components: {\n    BRow,\n    BCol,\n    BFormGroup,\n    vSelect,\n  },\n  data() {\n    return {\n      selected: { title: 'Square' },\n      option: [{ title: 'Square' }, { title: 'Rectangle' }, { title: 'Rombo' }, { title: 'Romboid' }],\n    }\n  },\n}\n</script>\n`\n\nexport const codeVueMultiBasic = `\n<template>\n  <v-select\n    v-model=\"selected\"\n    :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n    multiple\n    label=\"title\"\n    :options=\"option\"\n  />\n</template>\n\n<script>\nimport vSelect from 'vue-select'\n\nexport default {\n  components: {\n    vSelect,\n  },\n   data() {\n    return {\n      dir: 'ltr',\n      selected: [\n        { title: 'Square' },\n        { title: 'Romboid' },\n      ],\n    }\n  },\n}\n</script>\n`\n\nexport const codeVueMultiIcon = `\n<template>\n  <v-select\n    v-model=\"selected1\"\n    :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n    multiple\n    :options=\"books\"\n    label=\"title\"\n  >\n    <template #option=\"{ title, icon }\">\n      <feather-icon\n        :icon=\"icon\"\n        size=\"16\"\n        class=\"align-middle mr-25\"\n      />\n      <span> {{ title }}</span>\n    </template>\n  </v-select>\n</template>\n\n<script>\nimport vSelect from 'vue-select'\n\nexport default {\n  components: {\n    vSelect,\n  },\n  data() {\n    return {\n      selected1: [\n        {\n          title: 'Command',\n          icon: 'CommandIcon',\n        },\n      ],\n      books: [\n        {\n          title: 'Database',\n          icon: 'DatabaseIcon',\n        },\n        {\n          title: 'Codepen',\n          icon: 'CodepenIcon',\n        },\n        {\n          title: 'Aperture ',\n          icon: 'ApertureIcon',\n        },\n        {\n          title: 'Command',\n          icon: 'CommandIcon',\n        },\n      ],\n    }\n  },\n}\n</script>\n`\n\nexport const codeMultiPush = `\n<template>\n  <div>\n    <v-select\n      :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n      multiple\n      taggable\n      push-tags\n      placeholder=\"Add Options\"\n      label=\"title\"\n    />\n  </div>\n</template>\n\n<script>\nimport vSelect from 'vue-select'\n\nexport default {\n  components: {\n    vSelect,\n  },\n}\n</script>\n`\n\nexport const codeVueSelectionLimit = `\n<template>\n  <v-select\n    v-model=\"selected2\"\n    :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n    multiple\n    placeholder=\"Choose up to 3 books!\"\n    label=\"title\"\n    :options=\"books\"\n    :selectable=\"() => selected2.length < 3\"\n  />\n</template>\n\n<script>\nimport vSelect from 'vue-select'\n\nexport default {\n  components: {\n    vSelect,\n  },\n  data() {\n    return {\n      selected2: [],\n      books: [\n        {\n          title: 'Database',\n          icon: 'DatabaseIcon',\n        },\n        {\n          title: 'Codepen',\n          icon: 'CodepenIcon',\n        },\n        {\n          title: 'Aperture ',\n          icon: 'ApertureIcon',\n        },\n        {\n          title: 'Command',\n          icon: 'CommandIcon',\n        },\n      ],\n    }\n  },\n}\n</script>\n`\n\nexport const codeVueDir = `\n<template>\n  <div>\n    <div class=\"mb-2\">\n      <b-form-radio\n        v-model=\"dir\"\n        name=\"some-radios\"\n        value=\"ltr\"\n        inline\n      >\n        LRT\n      </b-form-radio>\n      <b-form-radio\n        v-model=\"dir\"\n        name=\"some-radios\"\n        value=\"rtl\"\n        inline\n      >\n        RTL\n      </b-form-radio>\n    </div>\n\n    <v-select\n      v-model=\"selected3\"\n      :dir=\"dir\"\n      multiple\n      label=\"title\"\n      :options=\"books\"\n    />\n  </div>\n</template>\n\n<script>\nimport {BFormRadio} from 'bootstrap-vue'\nimport vSelect from 'vue-select'\n\nexport default {\n  components: {\n    BFormRadio,\n    vSelect,\n  },\n  data() {\n    return {\n      dir: 'ltr',\n      selected3: [{\n        title: 'Database',\n        icon: 'DatabaseIcon',\n      }],\n      books: [\n        {\n          title: 'Database',\n          icon: 'DatabaseIcon',\n        },\n        {\n          title: 'Codepen',\n          icon: 'CodepenIcon',\n        },\n        {\n          title: 'Aperture ',\n          icon: 'ApertureIcon',\n        },\n        {\n          title: 'Command',\n          icon: 'CommandIcon',\n        },\n      ],\n    }\n  },\n}\n</script>\n`\n"],"sourceRoot":""}