{"version":3,"sources":["webpack:///./src/views/components/toasts/code.js"],"names":["codeAdvance","codeToastDelay","codeBasic","codeLinks","codeTarget","codeTranslucent","codeVariant"],"mappings":"kHAAA,6TAAO,IAAMA,EAAc,uhDA6DdC,EAAiB,6lCAmDjBC,EAAY,wkCAgDZC,EAAY,0kBAoCZC,EAAa,srEA2FbC,EAAkB,ohCAqDlBC,EAAc","file":"js/chunk-2d0e4c41.7e2b9c2e.js","sourcesContent":["export const codeAdvance = `\n<template>\n  <div>\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n      @click=\"popToast\"\n    >\n      Show Toast with custom content\n    </b-button>\n  </div>\n</template>\n\n<script>\n// eslint-disable-next-line\nimport { BButton, BSpinner } from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BButton,\n    // eslint-disable-next-line\n    BSpinner,\n  },\n  directives: {\n    Ripple,\n  },\n  data: () => ({\n    count: 0,\n  }),\n  methods: {\n    popToast() {\n      // Use a shorter name for this.$createElement\n      const h = this.$createElement\n      // Increment the toast count\n      this.count += 1\n      // Create the message\n      const vNodesMsg = h('p', { class: ['text-center', 'mb-0'] }, [\n        h('b-spinner', { props: { type: 'grow', small: true } }),\n        ' Flashy ',\n        h('strong', 'toast'),\n        \\`message #\\${this.count}\\`,\n        h('b-spinner', { props: { type: 'grow', small: true } }),\n      ])\n      // Create the title\n      const vNodesTitle = h('div', { class: ['d-flex', 'flex-grow-1', 'align-items-baseline', 'mr-2'] }, [\n        h('strong', { class: 'mr-2' }, 'The Title'),\n        h('small', { class: 'ml-auto font-italics' }, '5 minutes ago'),\n      ])\n      // Pass the VNodes as an array for message and title\n      this.$bvToast.toast([vNodesMsg], {\n        title: [vNodesTitle],\n        solid: true,\n        variant: 'info',\n      })\n    },\n  },\n}\n</script>\n`\n\nexport const codeToastDelay = `\n<template>\n  <div>\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n      @click=\"$bvToast.show('example-toast5')\"\n    >\n      Delay\n    </b-button>\n\n    <!-- toast -->\n    <b-toast\n      id=\"example-toast5\"\n      auto-hide-delay=\"10000\"\n    >\n      <template #toast-title>\n        <div class=\"d-flex flex-grow-1 align-items-center mr-25\">\n          <b-img\n            :src=\"require('@/assets/images/logo/logo.png')\"\n            class=\"rounded mr-2\"\n            height=\"18\"\n            width=\"25\"\n            alt=\"Toast image\"\n          />\n          <strong class=\"mr-auto\">Vue Admin</strong>\n          <small class=\"text-muted\">11 mins ago</small>\n        </div>\n      </template>\n      <span>Hello, world! This is a toast message.</span>\n    </b-toast>\n  </div>\n</template>\n\n<script>\nimport { BToast, BButton, BImg } from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BToast,\n    BButton,\n    BImg,\n  },\n  directives: {\n    Ripple,\n  },\n}\n</script>\n`\n\nexport const codeBasic = `\n<template>\n  <div>\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n      @click=\"$bvToast.show('example-toast')\"\n    >\n      Show toast\n    </b-button>\n\n    <!-- toast -->\n    <b-toast id=\"example-toast\">\n      <template #toast-title>\n        <div class=\"d-flex flex-grow-1 align-items-center mr-1\">\n          <b-img\n            :src=\"require('@/assets/images/logo/logo.png')\"\n            class=\"mr-1\"\n            height=\"18\"\n            width=\"25\"\n            alt=\"Toast image\"\n          />\n          <strong class=\"mr-auto\">Vue Admin</strong>\n          <small class=\"text-muted\">11 mins ago</small>\n        </div>\n      </template>\n      <span>Hello, world! This is a toast message. Hope you're doing well.. :)</span>\n    </b-toast>\n  </div>\n</template>\n\n<script>\nimport { BButton, BToast, BImg } from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BButton,\n    BToast,\n    BImg,\n  },\n  directives: {\n    Ripple,\n  },\n}\n</script>\n`\n\nexport const codeLinks = `\n<template>\n  <div>\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n      @click=\"toast()\"\n    >\n      Toast with link\n    </b-button>\n  </div>\n</template>\n\n<script>\nimport { BButton } from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BButton,\n  },\n  directives: {\n    Ripple,\n  },\n  methods: {\n    toast() {\n      this.$bvToast.toast('Toast with action link', {\n        href: '#foo',\n        title: 'Example',\n      })\n    },\n  },\n}\n</script>\n`\n\nexport const codeTarget = `\n<template>\n  <div class=\"demo-inline-spacing\">\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n      @click=\"toast('b-toaster-top-right')\"\n    >\n      b-toaster-top-right\n    </b-button>\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n      @click=\"toast('b-toaster-top-left')\"\n    >\n      b-toaster-top-left\n    </b-button>\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n      @click=\"toast('b-toaster-top-center')\"\n    >\n      b-toaster-top-center\n    </b-button>\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n      @click=\"toast('b-toaster-top-full')\"\n    >\n      b-toaster-top-full\n    </b-button>\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n      @click=\"toast('b-toaster-bottom-right', true)\"\n    >\n      b-toaster-bottom-right\n    </b-button>\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n      @click=\"toast('b-toaster-bottom-left', true)\"\n    >\n      b-toaster-bottom-left\n    </b-button>\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n      @click=\"toast('b-toaster-bottom-center', true)\"\n    >\n      b-toaster-bottom-center\n    </b-button>\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n      @click=\"toast('b-toaster-bottom-full', true)\"\n    >\n      b-toaster-bottom-full\n    </b-button>\n  </div>\n</template>\n\n<script>\nimport { BButton } from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BButton,\n  },\n  data: () => ({\n    counter: 0,\n  }),\n  directives: {\n    Ripple,\n  },\n  methods: {\n    toast(toaster, append = false) {\n      this.counter += 1\n      this.$bvToast.toast(\\`Toast \\${this.counter} body content\\` {\n        title: \\`Toaster \\${toaster}\\`,\n        toaster,\n        solid: true,\n        appendToast: append,\n      })\n    },\n  },\n}\n</script>\n`\n\nexport const codeTranslucent = `\n<template>\n  <div class=\"translucent-wrap bg-primary rounded-bottom p-1\">\n    <b-toast\n      id=\"example-toast3\"\n      v-model=\"visible\"\n      static\n      no-auto-hide\n    >\n      <template #toast-title>\n        <div class=\"d-flex flex-grow-1 align-items-center mr-1\">\n          <b-img\n            :src=\"require('@/assets/images/logo/logo.png')\"\n            class=\"mr-1\"\n            height=\"18\"\n            width=\"25\"\n            alt=\"Toast image\"\n          />\n          <strong class=\"mr-auto\">Vue Admin</strong>\n          <small class=\"text-muted\">11 mins ago</small>\n        </div>\n      </template>\n      <span>Hello, world! This is a toast message.</span>\n    </b-toast>\n  </div>\n</template>\n\n<script>\nimport {\n  BToast, BImg,\n} from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BToast,\n    BImg,\n  },\n   data() {\n    return {\n      visible: true,\n    }\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.translucent-wrap {\n  height: 110px;\n  position: relative;\n}\n</style>\n`\n\nexport const codeVariant = `\n<template>\n  <div class=\"demo-inline-spacing\">\n\n    <!-- default -->\n    <b-button\n      variant=\"gradient-primary\"\n      @click=\"makeToast()\"\n    >\n      Default\n    </b-button>\n\n    <!-- primary -->\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n      @click=\"makeToast('primary')\"\n    >\n      Primary\n    </b-button>\n\n    <!-- secondary -->\n    <b-button\n      v-ripple.400=\"'rgba(186, 191, 199, 0.15)'\"\n      variant=\"outline-secondary\"\n      @click=\"makeToast('secondary')\"\n    >\n      Secondary\n    </b-button>\n\n    <!-- warning -->\n    <b-button\n      v-ripple.400=\"'rgba(255, 159, 67, 0.15)'\"\n      variant=\"outline-warning\"\n      @click=\"makeToast('warning')\"\n    >\n      Warning\n    </b-button>\n\n    <!-- danger -->\n    <b-button\n      v-ripple.400=\"'rgba(255, 159, 67, 0.15)'\"\n      variant=\"outline-danger\"\n      @click=\"makeToast('danger')\"\n    >\n      Danger\n    </b-button>\n\n    <!-- success -->\n    <b-button\n      v-ripple.400=\"'rgba(40, 199, 111, 0.15)'\"\n      variant=\"outline-success\"\n      @click=\"makeToast('success')\"\n    >\n      Success\n    </b-button>\n\n    <!-- info -->\n    <b-button\n      v-ripple.400=\"'rgba(0, 207, 232, 0.15)'\"\n      variant=\"outline-info\"\n      @click=\"makeToast('info')\"\n    >\n      Info\n    </b-button>\n  </div>\n</template>\n\n<script>\nimport { BButton } from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BButton,\n  },\n  directives: {\n    Ripple,\n  },\n  methods: {\n    makeToast(variant = null) {\n      this.$bvToast.toast('Toast body content', {\n        title: \\`Variant \\${variant || 'default'}\\`,\n        variant,\n        solid: true,\n      })\n    },\n  },\n}\n</script>\n`\n"],"sourceRoot":""}