{"version":3,"sources":["webpack:///./src/views/table/bs-table/code.js"],"names":["codeBasic","codeStyleOption","codeRowColStyle","codeResponsive","codeFormatterCallback","codeDataRendering","codeSticky","codeRowDetailsSupport","codeRowSelectSupport","codeKitchenSink","codeLight","codeSimple"],"mappings":"gHAAA,wZAAO,IAAMA,EAAY,syBAqCZC,EAAkB,shIAoLlBC,EAAkB,iiCA4ClBC,EAAiB,kuEAoGjBC,EAAwB,65CAsDxBC,EAAoB,swGAsHpBC,EAAa,krOAgQbC,EAAwB,skPAsQxBC,EAAuB,2kQAqSvBC,EAAkB,ujUAoXlBC,EAAY,y4BA0CZC,EAAa","file":"js/chunk-2d222033.8c211b54.js","sourcesContent":["export const codeBasic = `\n<template>\n  <b-table responsive=\"sm\" :items=\"items\"/>\n</template>\n\n<script>\nimport { BTable } from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BTable,\n  },\n  data() {\n    return {\n      items: [\n        {\n          age: 40, first_name: 'Dickerson', last_name: 'Macdonald', Occupation: 'Job',\n        },\n        {\n          age: 21, first_name: 'Larsen', last_name: 'Shaw', Occupation: 'Job',\n        },\n        {\n          age: 89, first_name: 'Geneva', last_name: 'Wilson', Occupation: 'Bussiness',\n        },\n        {\n          age: 38, first_name: 'Jami', last_name: 'Carney', Occupation: 'Bussiness',\n        },\n        {\n          age: 40, first_name: 'James', last_name: 'Thomson', Occupation: 'Job',\n        },\n      ],\n    }\n  },\n}\n</script>\n`;\n\nexport const codeStyleOption = `\n<template>\n  <div>\n    <!-- checkbox -->\n    <b-form-group>\n      <label class=\"mb-0\">Table Options</label>\n      <div class=\"demo-inline-spacing\">\n        <b-form-checkbox\n          v-model=\"striped\"\n        >\n          Striped\n        </b-form-checkbox>\n        <b-form-checkbox\n          v-model=\"bordered\"\n        >\n          Bordered\n        </b-form-checkbox>\n        <b-form-checkbox\n          v-model=\"borderless\"\n        >\n          Borderless\n        </b-form-checkbox>\n        <b-form-checkbox\n          v-model=\"outlined\"\n        >\n          Outlined\n        </b-form-checkbox>\n        <b-form-checkbox\n          v-model=\"small\"\n        >\n          Small\n        </b-form-checkbox>\n        <b-form-checkbox\n          v-model=\"hover\"\n        >\n          Hover\n        </b-form-checkbox>\n        <b-form-checkbox\n          v-model=\"dark\"\n        >\n          Dark\n        </b-form-checkbox>\n        <b-form-checkbox\n          v-model=\"fixed\"\n        >\n          Fixed\n        </b-form-checkbox>\n        <b-form-checkbox\n          v-model=\"footClone\"\n        >\n          Foot Clone\n        </b-form-checkbox>\n        <b-form-checkbox\n          v-model=\"noCollapse\"\n        >\n          No border collapse\n        </b-form-checkbox>\n      </div>\n    </b-form-group>\n\n    <!-- radio -->\n    <b-form-group\n      label=\"Head Variant\"\n      label-cols-lg=\"2\"\n    >\n      <b-form-radio-group\n        v-model=\"headVariant\"\n      >\n        <b-form-radio\n          :value=\"null\"\n        >\n          None\n        </b-form-radio>\n        <b-form-radio\n          value=\"light\"\n        >\n          Light\n        </b-form-radio>\n        <b-form-radio\n          value=\"dark\"\n        >\n          Dark\n        </b-form-radio>\n      </b-form-radio-group>\n    </b-form-group>\n\n    <!-- variant select -->\n    <b-form-group\n      label=\"Table Variant\"\n      label-for=\"table-style-variant\"\n      label-cols-lg=\"2\"\n      class=\"mb-0\"\n    >\n      <v-select\n        v-model=\"tableVariant\"\n        :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n        label=\"tableVariants\"\n        :options=\"tableVariants\"\n      />\n    </b-form-group>\n\n    <!-- table -->\n    <b-table\n      :striped=\"striped\"\n      :bordered=\"bordered\"\n      :borderless=\"borderless\"\n      :outlined=\"outlined\"\n      :small=\"small\"\n      :hover=\"hover\"\n      :dark=\"dark\"\n      :fixed=\"fixed\"\n      :foot-clone=\"footClone\"\n      :no-border-collapse=\"noCollapse\"\n      :items=\"items\"\n      :fields=\"fields\"\n      :head-variant=\"headVariant\"\n      :table-variant=\"tableVariant\"\n    />\n  </div>\n</template>\n\n<script>\nimport {\n  BTable, BFormGroup, BFormRadio, BFormCheckbox, BFormRadioGroup, BCardBody,\n} from 'bootstrap-vue'\nimport vSelect from 'vue-select'\n\nexport default {\n  components: {\n    BTable,\n    BFormGroup,\n    BCardBody,\n    vSelect,\n    BFormRadio,\n    BFormCheckbox,\n    BFormRadioGroup,\n  },\n  data() {\n    return {\n      fields: ['first_name', 'last_name', 'age'],\n      items: [\n        { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },\n        { age: 21, first_name: 'Larsen', last_name: 'Shaw' },\n        { age: 89, first_name: 'Geneva', last_name: 'Wilson' },\n        { age: 89, first_name: 'Olenka', last_name: 'Brawley' },\n        { age: 89, first_name: 'Vernon', last_name: 'Perford' },\n      ],\n      tableVariants: [\n        'none',\n        'primary',\n        'secondary',\n        'info',\n        'danger',\n        'warning',\n        'success',\n        'light',\n        'dark',\n      ],\n      striped: false,\n      bordered: false,\n      borderless: false,\n      outlined: false,\n      small: false,\n      hover: false,\n      dark: false,\n      fixed: false,\n      footClone: false,\n      headVariant: null,\n      tableVariant: 'none',\n      noCollapse: false,\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 codeRowColStyle = `\n<template>\n  <b-table\n    :items=\"items\"\n    :fields=\"fields\"\n    :tbody-tr-class=\"rowClass\"\n    class=\"rounded-bottom\"\n  />\n</template>\n\n<script>\nimport { BTable } from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BTable,\n  },\n  data() {\n    return {\n      fields: ['first_name', 'last_name', { key: 'age', variant: 'success' }],\n      items: [\n        {\n          age: 40, first_name: 'Dickerson', last_name: 'Macdonald', status: 'awesome',\n        },\n        { age: 21, first_name: 'Larsen', last_name: 'Shaw' },\n        { age: 89, first_name: 'Geneva', last_name: 'Wilson' },\n        { age: 89, first_name: 'Olenka', last_name: 'Brawley' },\n        { age: 89, first_name: 'Vernon', last_name: 'Perford' },\n      ],\n    }\n  },\n  methods: {\n    rowClass(item, type) {\n      const colorClass = 'table-success'\n      if (!item || type !== 'row') { return }\n\n      // eslint-disable-next-line consistent-return\n      if (item.status === 'awesome') { return colorClass }\n    },\n  },\n}\n</script>\n`;\n\nexport const codeResponsive = `\n<template>\n   <b-table\n    responsive\n    :items=\"items\"\n    :fields=\"fields\"\n    class=\"mb-0\"\n  >\n    <template #cell(Phone)=\"data\">\n      <span class=\"text-nowrap\">\n        {{ data.value }}\n      </span>\n    </template>\n\n    <!-- Optional default data cell scoped slot -->\n    <template #cell()=\"data\">\n      {{ data.value }}\n    </template>\n  </b-table>\n</template>\n\n<script>\nimport { BTable } from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BTable,\n  },\n  data() {\n    return {\n      fields: [\n        'id',\n        'first_name',\n        'email',\n        'gender',\n        'ip_address',\n        {\n          key: 'Phone', label: 'Phone',\n        },\n        'Country',\n      ],\n      items: [\n        {\n          id: '1',\n          first_name: 'Marybelle',\n          last_name: 'Della Scala',\n          email: 'mdellascala0@opensource.org',\n          gender: 'Female',\n          ip_address: '85.254.7.181',\n          Phone: '+86 350 673 7985',\n          Country: 'China',\n\n        },\n        {\n          id: '2',\n          first_name: 'Octavia',\n          last_name: 'Tohill',\n          email: 'otohill1@google.co.jp',\n          gender: 'Female',\n          ip_address: '93.70.144.212',\n          Phone: '+63 938 283 0018',\n          Country: 'Philippines',\n        },\n        {\n          id: '3',\n          first_name: 'Jennie',\n          last_name: 'Geroldi',\n          email: 'jgeroldi2@slideshare.net',\n          gender: 'Female',\n          ip_address: '76.145.147.212',\n          Phone: '+81 235 674 0110',\n          Country: 'Japan',\n        },\n        {\n          id: '4',\n          first_name: 'Vanya',\n          last_name: 'Wharby',\n          email: 'vwharby3@mozilla.org',\n          gender: 'Male',\n          ip_address: '139.234.247.155',\n          Phone: '+30 349 556 7375',\n          Country: 'Greece',\n        },\n        {\n          id: '5',\n          first_name: 'Olenka',\n          last_name: 'Brawley',\n          email: 'obrawleyc@adobe.com',\n          gender: 'Female',\n          ip_address: '166.183.163.155',\n          Phone: '+62 841 824 0990',\n          Country: 'Indonesia',\n        },\n      ],\n    }\n  },\n}\n</script>\n`;\n\nexport const codeFormatterCallback = `\n<template>\n   <b-table\n    :fields=\"fields\"\n    :items=\"items\"\n  >\n    <template #cell(name)=\"data\">\n      <a :href=\"\\`#\\${data.value.replace(/[^a-z]+/i,'-').toLowerCase()}\\`\">{{ data.value }}</a>\n    </template>\n  </b-table>\n</template>\n\n<script>\nimport { BTable } from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BTable,\n  },\n  data() {\n    return {\n      fields: [\n        {\n          key: 'name',\n          label: 'Full Name',\n          formatter: value => \\`\\${value.first} \\${value.last}\\`,\n        },\n        // A regular column\n        'age',\n        {\n          // A regular column with custom formatter\n          key: 'sex',\n          formatter: value => value.charAt(0).toUpperCase(),\n        },\n        {\n          // A virtual column with custom formatter\n          key: 'birthYear',\n          label: 'Birth Year',\n          formatter: (value, key, item) => new Date().getFullYear() - item.age,\n        },\n      ],\n      items: [\n        { name: { first: 'Elikar', last: 'Kanane' }, sex: 'Male', age: 32 },\n        { name: { first: 'Clemens', last: 'Doe' }, sex: 'Female', age: 36 },\n        { name: { first: 'Rubin', last: 'Kincade' }, sex: 'male', age: 73 },\n        { name: { first: 'Shirley', last: 'Partridge' }, sex: 'female', age: 62 },\n        { name: { first: 'Olenka', last: 'Brawley' }, sex: 'female', age: 26 },\n      ],\n    }\n  },\n}\n</script>\n`;\n\nexport const codeDataRendering = `\n<template>\n  <div>\n    <b-table\n      small\n      :fields=\"fields\"\n      :items=\"items\"\n      responsive=\"sm\"\n    >\n      <!-- A virtual column -->\n      <template #cell(index)=\"data\">\n        {{ data.index + 1 }}\n      </template>\n\n      <!-- A custom formatted column -->\n      <template #cell(name)=\"data\">\n        {{ data.value.first+' - '+ data.value.last }}\n      </template>\n\n      <!-- A custom formatted column -->\n      <template #cell(Popularity)=\"data\">\n        <b-progress\n          :value=\"data.value.value\"\n          max=\"100\"\n          :variant=\"data.value.variant\"\n          striped\n        />\n      </template>\n\n      <template #cell(order_status)=\"data\">\n        <b-badge\n          pill\n          :variant=\"data.value.variant\"\n        >\n          {{ data.value.status }}\n        </b-badge>\n      </template>\n\n      <!-- A virtual composite column -->\n      <template #cell(price)=\"data\">\n        {{ '$'+data.value }}\n      </template>\n\n      <!-- Optional default data cell scoped slot -->\n      <template #cell()=\"data\">\n        {{ data.value }}\n      </template>\n    </b-table>\n  </div>\n</template>\n\n<script>\nimport { BTable, BProgress, BBadge } from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BTable,\n    BProgress,\n    BBadge,\n  },\n  data() {\n    return {\n      fields: [\n        // A virtual column that doesn't exist in items\n        'index',\n        // A column that needs custom formatting\n        { key: 'name', label: 'Name' },\n        'Category',\n        // A regular column\n        { key: 'Popularity', label: 'Popularity' },\n        // A regular column\n        { key: 'order_status', label: 'Order Status' },\n        // A virtual column made up from two fields\n        { key: 'price', label: 'Price' },\n      ],\n      items: [\n        {\n          name: { first: 'Fitbit', last: 'Activity Tracker' },\n          Category: 'Fitness',\n          order_status: { status: 'Delivered', variant: 'success' },\n          Popularity: { value: 50, variant: 'success' },\n          price: 99.99,\n        },\n        {\n          name: { first: 'Fitbit ', last: 'Flex Wireless Activity' },\n          Category: 'Fitness',\n          order_status: { status: 'Pending', variant: 'primary' },\n          Popularity: { value: 36, variant: 'primary' },\n          price: 89.85,\n        },\n        {\n          name: { first: 'Fitbit', last: 'Sleep Tracker Wristband' },\n          Category: 'Fitness',\n          order_status: { status: 'Delivered', variant: 'success' },\n          Popularity: { value: 76, variant: 'success' },\n          price: 65.25,\n        },\n        {\n          name: { first: 'Fitbit', last: 'Sleep Wristband' },\n          Category: 'Fitness',\n          order_status: { status: 'On Hold', variant: 'warning' },\n          Popularity: { value: 55, variant: 'warning' },\n          price: 75.55,\n        },\n        {\n          name: { first: 'Fitbit', last: 'Clip for Zip Wireless Activity Trackers' },\n          Category: 'Fitness',\n          order_status: { status: 'Canceled', variant: 'danger' },\n          Popularity: { value: 75, variant: 'danger' },\n          price: 105.55,\n        },\n      ],\n    }\n  },\n}\n</script>\n`;\n\nexport const codeSticky = `\n<template>\n  <div>\n    <div class=\"d-flex mb-2\">\n      <b-form-checkbox\n        v-model=\"stickyHeader\"\n        class=\"vs-checkbox-con mr-1\"\n        plain\n      >\n        <span class=\"vs-checkbox\">\n          <span class=\"vs-checkbox--check\">\n            <i class=\"vs-icon feather icon-check\" />\n          </span>\n        </span>\n        <span class=\"vs-label\">Sticky header</span>\n      </b-form-checkbox>\n      <b-form-checkbox\n        v-model=\"noCollapse\"\n        class=\"vs-checkbox-con\"\n        plain\n      >\n        <span class=\"vs-checkbox\">\n          <span class=\"vs-checkbox--check\">\n            <i class=\"vs-icon feather icon-check\" />\n          </span>\n        </span>\n        <span class=\"vs-label\">No border collapse</span>\n      </b-form-checkbox>\n    </div>\n    <b-table\n      :sticky-header=\"stickyHeader\"\n      :no-border-collapse=\"noCollapse\"\n\n      responsive\n      :items=\"items\"\n      :fields=\"fields\"\n    >\n      <template #head(id)>\n        <div class=\"text-nowrap\">\n          Row ID\n        </div>\n      </template>\n\n      <template #head()=\"scope\">\n        <div class=\"text-nowrap\">\n          {{ scope.label }}\n        </div>\n      </template>\n\n      <template #cell(avatar)=\"data\">\n        <b-avatar\n          class=\"mr-1\"\n          :src=\"data.value\"\n        />\n      </template>\n\n      <template #cell(status)=\"data\">\n        <b-badge :variant=\"status[1][data.value]\">\n          {{ status[0][data.value] }}\n        </b-badge>\n      </template>\n\n      <template #cell()=\"data\">\n        <span class=\"text-nowrap\">{{ data.value }}</span>\n      </template>\n    </b-table>\n  </div>\n</template>\n\n<script>\nimport {\n  BTable, BFormCheckbox, BAvatar, BBadge,\n} from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BTable,\n    BFormCheckbox,\n    BAvatar,\n    BBadge,\n  },\n  data() {\n    return {\n      stickyHeader: true,\n      noCollapse: false,\n      fields: [\n        {\n          key: 'id', stickyColumn: true, isRowHeader: true, variant: 'primary',\n        },\n        {\n          key: 'avatar', label: 'Avatar',\n        },\n        'full_name',\n        { key: 'post', stickyColumn: true, variant: 'info' },\n        'email',\n        'city',\n        'start_date',\n        'salary',\n        'age',\n        'experience',\n        { key: 'status', label: 'Status' },\n      ],\n      items: [\n        {\n          id: 1,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/10-small.png'),\n          full_name: \"Korrie O'Crevy\",\n          post: 'Nuclear Power Engineer',\n          email: 'kocrevy0@thetimes.co.uk',\n          city: 'Krasnosilka',\n          start_date: '09/23/2016',\n          salary: '$23896.35',\n          age: '61',\n          experience: '1 Year',\n          status: 2,\n        },\n        {\n          id: 2,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/1-small.png'),\n          full_name: 'Bailie Coulman',\n          post: 'VP Quality Control',\n          email: 'bcoulman1@yolasite.com',\n          city: 'Hinigaran',\n          start_date: '05/20/2018',\n          salary: '$13633.69',\n          age: '63',\n          experience: '3 Years',\n          status: 2,\n        },\n        {\n          id: 3,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/9-small.png'),\n          full_name: 'Stella Ganderton',\n          post: 'Operator',\n          email: 'sganderton2@tuttocitta.it',\n          city: 'Golcowa',\n          start_date: '03/24/2018',\n          salary: '$13076.28',\n          age: '66',\n          experience: '6 Years',\n          status: 5,\n        },\n        {\n          id: 4,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/3-small.png'),\n          full_name: 'Dorolice Crossman',\n          post: 'Cost Accountant',\n          email: 'dcrossman3@google.co.jp',\n          city: 'Paquera',\n          start_date: '12/03/2017',\n          salary: '$12336.17',\n          age: '22',\n          experience: '2 Years',\n          status: 2,\n        },\n        {\n          id: 5,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/4-small.png'),\n          full_name: 'Harmonia Nisius',\n          post: 'Senior Cost Accountant',\n          email: 'hnisius4@gnu.org',\n          city: 'Lucan',\n          start_date: '08/25/2017',\n          salary: '$10909.52',\n          age: '33',\n          experience: '3 Years',\n          status: 2,\n        },\n        {\n          id: 6,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/5-small.png'),\n          full_name: 'Genevra Honeywood',\n          post: 'Geologist',\n          email: 'ghoneywood5@narod.ru',\n          city: 'Maofan',\n          start_date: '06/01/2017',\n          salary: '$17803.80',\n          age: '61',\n          experience: '1 Year',\n          status: 1,\n        },\n        {\n          id: 7,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/7-small.png'),\n          full_name: 'Eileen Diehn',\n          post: 'Environmental Specialist',\n          email: 'ediehn6@163.com',\n          city: 'Lampuyang',\n          start_date: '10/15/2017',\n          salary: '$18991.67',\n          age: '59',\n          experience: '9 Years',\n          status: 3,\n        },\n        {\n          id: 8,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/9-small.png'),\n          full_name: 'Richardo Aldren',\n          post: 'Senior Sales Associate',\n          email: 'raldren7@mtv.com',\n          city: 'Skoghall',\n          start_date: '11/05/2016',\n          salary: '$19230.13',\n          age: '55',\n          experience: '5 Years',\n          status: 3,\n        },\n        {\n          id: 9,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/2-small.png'),\n          full_name: 'Allyson Moakler',\n          post: 'Safety Technician',\n          email: 'amoakler8@shareasale.com',\n          city: 'Mogilany',\n          start_date: '12/29/2018',\n          salary: '$11677.32',\n          age: '39',\n          experience: '9 Years',\n          status: 5,\n        },\n        {\n          id: 10,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/6-small.png'),\n          full_name: 'Merline Penhalewick',\n          post: 'Junior Executive',\n          email: 'mpenhalewick9@php.net',\n          city: 'Kanuma',\n          start_date: '04/19/2019',\n          salary: '$15939.52',\n          age: '23',\n          experience: '3 Years',\n          status: 2,\n        },\n      ],\n      status: [{\n        1: 'Current', 2: 'Professional', 3: 'Rejected', 4: 'Resigned', 5: 'Applied',\n      },\n      {\n        1: 'light-primary', 2: 'light-success', 3: 'light-danger', 4: 'light-warning', 5: 'light-info',\n      }],\n    }\n  },\n}\n</script>\n`;\n\nexport const codeRowDetailsSupport = `\n<template>\n  <div>\n    <b-table\n      :items=\"items\"\n      :fields=\"fields\"\n      striped\n      responsive\n    >\n      <template #cell(show_details)=\"row\">\n        <b-form-checkbox\n          v-model=\"row.detailsShowing\"\n          plain\n          class=\"vs-checkbox-con\"\n          @change=\"row.toggleDetails\"\n        >\n          <span class=\"vs-checkbox\">\n            <span class=\"vs-checkbox--check\">\n              <i class=\"vs-icon feather icon-check\" />\n            </span>\n          </span>\n          <span class=\"vs-label\">{{ row.detailsShowing ? 'Hide' : 'Show' }}</span>\n        </b-form-checkbox>\n      </template>\n\n      <template #row-details=\"row\">\n        <b-card>\n          <b-row class=\"mb-2\">\n            <b-col\n              md=\"4\"\n              class=\"mb-1\"\n            >\n              <strong>Full Name : </strong>{{ row.item.full_name }}\n            </b-col>\n            <b-col\n              md=\"4\"\n              class=\"mb-1\"\n            >\n              <strong>Post : </strong>{{ row.item.post }}\n            </b-col>\n            <b-col\n              md=\"4\"\n              class=\"mb-1\"\n            >\n              <strong>Email : </strong>{{ row.item.email }}\n            </b-col>\n            <b-col\n              md=\"4\"\n              class=\"mb-1\"\n            >\n              <strong>City : </strong>{{ row.item.city }}\n            </b-col>\n            <b-col\n              md=\"4\"\n              class=\"mb-1\"\n            >\n              <strong>Salary : </strong>{{ row.item.salary }}\n            </b-col>\n            <b-col\n              md=\"4\"\n              class=\"mb-1\"\n            >\n              <strong>Age : </strong>{{ row.item.age }}\n            </b-col>\n          </b-row>\n\n          <b-button\n            size=\"sm\"\n            variant=\"outline-secondary\"\n            @click=\"row.toggleDetails\"\n          >\n            Hide Details\n          </b-button>\n        </b-card>\n      </template>\n\n      <template #cell(avatar)=\"data\">\n        <b-avatar :src=\"data.value\" />\n      </template>\n\n       <template #cell(status)=\"data\">\n        <b-badge :variant=\"status[1][data.value]\">\n          {{ status[0][data.value] }}\n        </b-badge>\n      </template>\n    </b-table>\n  </div>\n</template>\n\n<script>\nimport {\n  BTable, BFormCheckbox, BButton, BCard, BRow, BCol, BAvatar, BBadge,\n} from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BTable,\n    BButton,\n    BFormCheckbox,\n    BCard,\n    BRow,\n    BCol,\n    BBadge,\n    BAvatar,\n  },\n  data() {\n    return {\n      fields: ['show_details', 'id', { key: 'avatar', label: 'Avatar' }, 'full_name', 'post', 'email', 'city', 'start_date', 'salary', 'age', 'experience', { key: 'status', label: 'Status' }],\n      items: [\n        {\n          id: 1,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/10-small.png'),\n          full_name: \"Korrie O'Crevy\",\n          post: 'Nuclear Power Engineer',\n          email: 'kocrevy0@thetimes.co.uk',\n          city: 'Krasnosilka',\n          start_date: '09/23/2016',\n          salary: '$23896.35',\n          age: '61',\n          experience: '1 Year',\n          status: 2,\n        },\n        {\n          id: 2,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/1-small.png'),\n          full_name: 'Bailie Coulman',\n          post: 'VP Quality Control',\n          email: 'bcoulman1@yolasite.com',\n          city: 'Hinigaran',\n          start_date: '05/20/2018',\n          salary: '$13633.69',\n          age: '63',\n          experience: '3 Years',\n          status: 2,\n        },\n        {\n          id: 3,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/9-small.png'),\n          full_name: 'Stella Ganderton',\n          post: 'Operator',\n          email: 'sganderton2@tuttocitta.it',\n          city: 'Golcowa',\n          start_date: '03/24/2018',\n          salary: '$13076.28',\n          age: '66',\n          experience: '6 Years',\n          status: 5,\n        },\n        {\n          id: 4,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/3-small.png'),\n          full_name: 'Dorolice Crossman',\n          post: 'Cost Accountant',\n          email: 'dcrossman3@google.co.jp',\n          city: 'Paquera',\n          start_date: '12/03/2017',\n          salary: '$12336.17',\n          age: '22',\n          experience: '2 Years',\n          status: 2,\n        },\n        {\n          id: 5,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/4-small.png'),\n          full_name: 'Harmonia Nisius',\n          post: 'Senior Cost Accountant',\n          email: 'hnisius4@gnu.org',\n          city: 'Lucan',\n          start_date: '08/25/2017',\n          salary: '$10909.52',\n          age: '33',\n          experience: '3 Years',\n          status: 2,\n        },\n        {\n          id: 6,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/5-small.png'),\n          full_name: 'Genevra Honeywood',\n          post: 'Geologist',\n          email: 'ghoneywood5@narod.ru',\n          city: 'Maofan',\n          start_date: '06/01/2017',\n          salary: '$17803.80',\n          age: '61',\n          experience: '1 Year',\n          status: 1,\n        },\n        {\n          id: 7,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/7-small.png'),\n          full_name: 'Eileen Diehn',\n          post: 'Environmental Specialist',\n          email: 'ediehn6@163.com',\n          city: 'Lampuyang',\n          start_date: '10/15/2017',\n          salary: '$18991.67',\n          age: '59',\n          experience: '9 Years',\n          status: 3,\n        },\n        {\n          id: 8,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/9-small.png'),\n          full_name: 'Richardo Aldren',\n          post: 'Senior Sales Associate',\n          email: 'raldren7@mtv.com',\n          city: 'Skoghall',\n          start_date: '11/05/2016',\n          salary: '$19230.13',\n          age: '55',\n          experience: '5 Years',\n          status: 3,\n        },\n        {\n          id: 9,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/2-small.png'),\n          full_name: 'Allyson Moakler',\n          post: 'Safety Technician',\n          email: 'amoakler8@shareasale.com',\n          city: 'Mogilany',\n          start_date: '12/29/2018',\n          salary: '$11677.32',\n          age: '39',\n          experience: '9 Years',\n          status: 5,\n        },\n        {\n          id: 10,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/6-small.png'),\n          full_name: 'Merline Penhalewick',\n          post: 'Junior Executive',\n          email: 'mpenhalewick9@php.net',\n          city: 'Kanuma',\n          start_date: '04/19/2019',\n          salary: '$15939.52',\n          age: '23',\n          experience: '3 Years',\n          status: 2,\n        },\n      ],\n      status: [{\n        1: 'Current', 2: 'Professional', 3: 'Rejected', 4: 'Resigned', 5: 'Applied',\n      },\n      {\n        1: 'light-primary', 2: 'light-success', 3: 'light-danger', 4: 'light-warning', 5: 'light-info',\n      }],\n    }\n  },\n}\n</script>\n`;\n\nexport const codeRowSelectSupport = `\n<template>\n  <div>\n    <b-form-group\n      label=\"Selection mode:\"\n      label-cols-md=\"4\"\n    >\n      <!-- <b-form-select\n        v-model=\"selectMode\"\n        :options=\"modes\"\n      /> -->\n      <v-select\n        v-model=\"selectMode\"\n        label=\"title\"\n        :options=\"modes\"\n      />\n    </b-form-group>\n\n    <b-table\n      ref=\"selectableTable\"\n      selectable\n      :select-mode=\"selectMode\"\n      :items=\"items\"\n      :fields=\"fields\"\n      responsive=\"sm\"\n      @row-selected=\"onRowSelected\"\n    >\n      <!-- Example scoped slot for select state illustrative purposes -->\n      <template #cell(selected)=\"{ rowSelected }\">\n        <template v-if=\"rowSelected\">\n          <i class=\"feather icon-disc primary\" />\n        </template>\n\n        <template v-else>\n          <i class=\"feather icon-circle\" />\n        </template>\n      </template>\n\n      <template #cell(avatar)=\"data\">\n        <b-avatar :src=\"data.value\" />\n      </template>\n\n       <template #cell(status)=\"data\">\n        <b-badge :variant=\"status[1][data.value]\">\n          {{ status[0][data.value] }}\n        </b-badge>\n      </template>\n    </b-table>\n\n    <b-button\n      size=\"sm\"\n      class=\"mr-1\"\n      variant=\"primary\"\n      @click=\"selectAllRows\"\n    >\n      Select all\n    </b-button>\n    <b-button\n      size=\"sm\"\n      class=\"mr-1\"\n      variant=\"primary\"\n      @click=\"clearSelected\"\n    >\n      Clear selected\n    </b-button>\n    <b-button\n      size=\"sm\"\n      variant=\"primary\"\n      class=\"mr-1\"\n      @click=\"selectThirdRow\"\n    >\n      Select 3rd row\n    </b-button>\n    <b-button\n      variant=\"primary\"\n      size=\"sm\"\n      class=\"mr-1\"\n      @click=\"unselectThirdRow\"\n    >\n      Unselect 3rd row\n    </b-button>\n  </div>\n</template>\n\n<script>\nimport {\n  BTable, BButton, BFormGroup, BAvatar, BBadge,\n} from 'bootstrap-vue'\nimport vSelect from 'vue-select'\n\nexport default {\n  components: {\n    BTable,\n    BButton,\n    BFormGroup,\n    BAvatar,\n    BBadge,\n    vSelect,\n  },\n  data() {\n    return {\n      // selectedCheck: false,\n      modes: ['multi', 'single', 'range'],\n      fields: ['selected', 'id', { key: 'avatar', label: 'Avatar' }, 'full_name', 'post', 'email', 'city', 'start_date', 'salary', 'age', 'experience', { key: 'status', label: 'Status' }],\n      items: [\n        {\n          id: 1,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/10-small.png'),\n          full_name: \"Korrie O'Crevy\",\n          post: 'Nuclear Power Engineer',\n          email: 'kocrevy0@thetimes.co.uk',\n          city: 'Krasnosilka',\n          start_date: '09/23/2016',\n          salary: '$23896.35',\n          age: '61',\n          experience: '1 Year',\n          status: 2,\n        },\n        {\n          id: 2,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/1-small.png'),\n          full_name: 'Bailie Coulman',\n          post: 'VP Quality Control',\n          email: 'bcoulman1@yolasite.com',\n          city: 'Hinigaran',\n          start_date: '05/20/2018',\n          salary: '$13633.69',\n          age: '63',\n          experience: '3 Years',\n          status: 2,\n        },\n        {\n          id: 3,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/9-small.png'),\n          full_name: 'Stella Ganderton',\n          post: 'Operator',\n          email: 'sganderton2@tuttocitta.it',\n          city: 'Golcowa',\n          start_date: '03/24/2018',\n          salary: '$13076.28',\n          age: '66',\n          experience: '6 Years',\n          status: 5,\n        },\n        {\n          id: 4,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/3-small.png'),\n          full_name: 'Dorolice Crossman',\n          post: 'Cost Accountant',\n          email: 'dcrossman3@google.co.jp',\n          city: 'Paquera',\n          start_date: '12/03/2017',\n          salary: '$12336.17',\n          age: '22',\n          experience: '2 Years',\n          status: 2,\n        },\n        {\n          id: 5,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/4-small.png'),\n          full_name: 'Harmonia Nisius',\n          post: 'Senior Cost Accountant',\n          email: 'hnisius4@gnu.org',\n          city: 'Lucan',\n          start_date: '08/25/2017',\n          salary: '$10909.52',\n          age: '33',\n          experience: '3 Years',\n          status: 2,\n        },\n        {\n          id: 6,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/5-small.png'),\n          full_name: 'Genevra Honeywood',\n          post: 'Geologist',\n          email: 'ghoneywood5@narod.ru',\n          city: 'Maofan',\n          start_date: '06/01/2017',\n          salary: '$17803.80',\n          status: [{\n        1: 'Current', 2: 'Professional', 3: 'Rejected', 4: 'Resigned', 5: 'Applied',\n      },\n      {\n        1: 'light-primary', 2: 'light-success', 3: 'light-danger', 4: 'light-warning', 5: 'light-info',\n      }],age: '61',\n          experience: '1 Year',\n          status: 1,\n        },\n        {\n          id: 7,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/7-small.png'),\n          full_name: 'Eileen Diehn',\n          post: 'Environmental Specialist',\n          email: 'ediehn6@163.com',\n          city: 'Lampuyang',\n          start_date: '10/15/2017',\n          salary: '$18991.67',\n          age: '59',\n          experience: '9 Years',\n          status: 3,\n        },\n        {\n          id: 8,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/9-small.png'),\n          full_name: 'Richardo Aldren',\n          post: 'Senior Sales Associate',\n          email: 'raldren7@mtv.com',\n          city: 'Skoghall',\n          start_date: '11/05/2016',\n          salary: '$19230.13',\n          age: '55',\n          experience: '5 Years',\n          status: 3,\n        },\n        {\n          id: 9,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/2-small.png'),\n          full_name: 'Allyson Moakler',\n          post: 'Safety Technician',\n          email: 'amoakler8@shareasale.com',\n          city: 'Mogilany',\n          start_date: '12/29/2018',\n          salary: '$11677.32',\n          age: '39',\n          experience: '9 Years',\n          status: 5,\n        },\n        {\n          id: 10,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/6-small.png'),\n          full_name: 'Merline Penhalewick',\n          post: 'Junior Executive',\n          email: 'mpenhalewick9@php.net',\n          city: 'Kanuma',\n          start_date: '04/19/2019',\n          salary: '$15939.52',\n          age: '23',\n          experience: '3 Years',\n          status: 2,\n        },\n      ],\n      status: [{\n        1: 'Current', 2: 'Professional', 3: 'Rejected', 4: 'Resigned', 5: 'Applied',\n      },\n      {\n        1: 'light-primary', 2: 'light-success', 3: 'light-danger', 4: 'light-warning', 5: 'light-info',\n      }],\n      selectMode: 'multi',\n      selected: [],\n    }\n  },\n  methods: {\n    onRowSelected(items) {\n      this.selected = items\n    },\n    selectAllRows() {\n      this.$refs.selectableTable.selectAllRows()\n    },\n    clearSelected() {\n      this.$refs.selectableTable.clearSelected()\n    },\n    selectThirdRow() {\n      // Rows are indexed from 0, so the third row is index 2\n      this.$refs.selectableTable.selectRow(2)\n    },\n    unselectThirdRow() {\n      // Rows are indexed from 0, so the third row is index 2\n      this.$refs.selectableTable.unselectRow(2)\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\">\n.b-table-selectable{\n  .feather{\n    font-size: 1.3rem;\n  }\n}\n\n</style>\n`;\n\nexport const codeKitchenSink = `\n<template>\n  <b-row>\n    <b-col\n      md=\"2\"\n      sm=\"4\"\n      class=\"my-1\"\n    >\n      <b-form-group\n        class=\"mb-0\"\n      >\n        <label class=\"d-inline-block text-sm-left mr-50\">Per page</label>\n        <b-form-select\n          id=\"perPageSelect\"\n          v-model=\"perPage\"\n          size=\"sm\"\n          :options=\"pageOptions\"\n          class=\"w-50\"\n        />\n      </b-form-group>\n    </b-col>\n    <b-col\n      md=\"4\"\n      sm=\"8\"\n      class=\"my-1\"\n    >\n      <b-form-group\n        label=\"Sort\"\n        label-cols-sm=\"3\"\n        label-align-sm=\"right\"\n        label-size=\"sm\"\n        label-for=\"sortBySelect\"\n        class=\"mb-0\"\n      >\n        <b-input-group size=\"sm\">\n          <b-form-select\n            id=\"sortBySelect\"\n            v-model=\"sortBy\"\n            :options=\"sortOptions\"\n            class=\"w-75\"\n          >\n            <template v-slot:first>\n              <option value=\"\">\n                -- none --\n              </option>\n            </template>\n          </b-form-select>\n          <b-form-select\n            v-model=\"sortDesc\"\n            size=\"sm\"\n            :disabled=\"!sortBy\"\n            class=\"w-25\"\n          >\n            <option :value=\"false\">\n              Asc\n            </option>\n            <option :value=\"true\">\n              Desc\n            </option>\n          </b-form-select>\n        </b-input-group>\n      </b-form-group>\n    </b-col>\n    <b-col\n      md=\"6\"\n      class=\"my-1\"\n    >\n      <b-form-group\n        label=\"Filter\"\n        label-cols-sm=\"3\"\n        label-align-sm=\"right\"\n        label-size=\"sm\"\n        label-for=\"filterInput\"\n        class=\"mb-0\"\n      >\n        <b-input-group size=\"sm\">\n          <b-form-input\n            id=\"filterInput\"\n            v-model=\"filter\"\n            type=\"search\"\n            placeholder=\"Type to Search\"\n          />\n          <b-input-group-append>\n            <b-button\n              :disabled=\"!filter\"\n              @click=\"filter = ''\"\n            >\n              Clear\n            </b-button>\n          </b-input-group-append>\n        </b-input-group>\n      </b-form-group>\n    </b-col>\n\n    <b-col cols=\"12\">\n      <b-table\n        striped\n        hover\n        responsive\n        :per-page=\"perPage\"\n        :current-page=\"currentPage\"\n        :items=\"items\"\n        :fields=\"fields\"\n        :sort-by.sync=\"sortBy\"\n        :sort-desc.sync=\"sortDesc\"\n        :sort-direction=\"sortDirection\"\n        :filter=\"filter\"\n        :filter-included-fields=\"filterOn\"\n        @filtered=\"onFiltered\"\n      >\n        <template #cell(avatar)=\"data\">\n          <b-avatar :src=\"data.value\" />\n        </template>\n\n        <template #cell(status)=\"data\">\n          <b-badge :variant=\"status[1][data.value]\">\n            {{ status[0][data.value] }}\n          </b-badge>\n        </template>\n      </b-table>\n    </b-col>\n\n    <b-col\n      cols=\"12\"\n    >\n      <b-pagination\n        v-model=\"currentPage\"\n        :total-rows=\"totalRows\"\n        :per-page=\"perPage\"\n        align=\"center\"\n        size=\"sm\"\n        class=\"my-0\"\n      />\n    </b-col>\n  </b-row>\n</template>\n\n<script>\nimport {\n  BTable, BAvatar, BBadge, BRow, BCol, BFormGroup, BFormSelect, BPagination, BInputGroup, BFormInput, BInputGroupAppend, BButton,\n} from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BTable,\n    BAvatar,\n    BBadge,\n    BRow,\n    BCol,\n    BFormGroup,\n    BFormSelect,\n    BPagination,\n    BInputGroup,\n    BFormInput,\n    BInputGroupAppend,\n    BButton,\n  },\n  data() {\n    return {\n      perPage: 5,\n      pageOptions: [3, 5, 10],\n      totalRows: 1,\n      currentPage: 1,\n      sortBy: '',\n      sortDesc: false,\n      sortDirection: 'asc',\n      filter: null,\n      filterOn: [],\n      infoModal: {\n        id: 'info-modal',\n        title: '',\n        content: '',\n      },\n      fields: [\n        {\n          key: 'id', label: 'Id',\n        },\n        {\n          key: 'avatar', label: 'Avatar',\n        },\n        { key: 'full_name', label: 'Full Name', sortable: true },\n        { key: 'post', label: 'Post', sortable: true },\n        'email',\n        'city',\n        'start_date',\n        'salary',\n        'age',\n        'experience',\n        { key: 'status', label: 'Status', sortable: true },\n      ],\n      items: [\n        {\n          id: 1,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/10-small.png'),\n          full_name: \"Korrie O'Crevy\",\n          post: 'Nuclear Power Engineer',\n          email: 'kocrevy0@thetimes.co.uk',\n          city: 'Krasnosilka',\n          start_date: '09/23/2016',\n          salary: '$23896.35',\n          age: '61',\n          experience: '1 Year',\n          status: 2,\n        },\n        {\n          id: 2,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/1-small.png'),\n          full_name: 'Bailie Coulman',\n          post: 'VP Quality Control',\n          email: 'bcoulman1@yolasite.com',\n          city: 'Hinigaran',\n          start_date: '05/20/2018',\n          salary: '$13633.69',\n          age: '63',\n          experience: '3 Years',\n          status: 2,\n        },\n        {\n          id: 3,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/9-small.png'),\n          full_name: 'Stella Ganderton',\n          post: 'Operator',\n          email: 'sganderton2@tuttocitta.it',\n          city: 'Golcowa',\n          start_date: '03/24/2018',\n          salary: '$13076.28',\n          age: '66',\n          experience: '6 Years',\n          status: 5,\n        },\n        {\n          id: 4,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/3-small.png'),\n          full_name: 'Dorolice Crossman',\n          post: 'Cost Accountant',\n          email: 'dcrossman3@google.co.jp',\n          city: 'Paquera',\n          start_date: '12/03/2017',\n          salary: '$12336.17',\n          age: '22',\n          experience: '2 Years',\n          status: 2,\n        },\n        {\n          id: 5,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/4-small.png'),\n          full_name: 'Harmonia Nisius',\n          post: 'Senior Cost Accountant',\n          email: 'hnisius4@gnu.org',\n          city: 'Lucan',\n          start_date: '08/25/2017',\n          salary: '$10909.52',\n          age: '33',\n          experience: '3 Years',\n          status: 2,\n        },\n        {\n          id: 6,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/5-small.png'),\n          full_name: 'Genevra Honeywood',\n          post: 'Geologist',\n          email: 'ghoneywood5@narod.ru',\n          city: 'Maofan',\n          start_date: '06/01/2017',\n          salary: '$17803.80',\n          age: '61',\n          experience: '1 Year',\n          status: 1,\n        },\n        {\n          id: 7,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/7-small.png'),\n          full_name: 'Eileen Diehn',\n          post: 'Environmental Specialist',\n          email: 'ediehn6@163.com',\n          city: 'Lampuyang',\n          start_date: '10/15/2017',\n          salary: '$18991.67',\n          age: '59',\n          experience: '9 Years',\n          status: 3,\n        },\n        {\n          id: 8,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/9-small.png'),\n          full_name: 'Richardo Aldren',\n          post: 'Senior Sales Associate',\n          email: 'raldren7@mtv.com',\n          city: 'Skoghall',\n          start_date: '11/05/2016',\n          salary: '$19230.13',\n          age: '55',\n          experience: '5 Years',\n          status: 3,\n        },\n        {\n          id: 9,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/2-small.png'),\n          full_name: 'Allyson Moakler',\n          post: 'Safety Technician',\n          email: 'amoakler8@shareasale.com',\n          city: 'Mogilany',\n          start_date: '12/29/2018',\n          salary: '$11677.32',\n          age: '39',\n          experience: '9 Years',\n          status: 5,\n        },\n        {\n          id: 10,\n          // eslint-disable-next-line global-require\n          avatar: require('@/assets/images/avatars/6-small.png'),\n          full_name: 'Merline Penhalewick',\n          post: 'Junior Executive',\n          email: 'mpenhalewick9@php.net',\n          city: 'Kanuma',\n          start_date: '04/19/2019',\n          salary: '$15939.52',\n          age: '23',\n          experience: '3 Years',\n          status: 2,\n        },\n      ],\n      status: [{\n        1: 'Current', 2: 'Professional', 3: 'Rejected', 4: 'Resigned', 5: 'Applied',\n      },\n      {\n        1: 'light-primary', 2: 'light-success', 3: 'light-danger', 4: 'light-warning', 5: 'light-info',\n      }],\n    }\n  },\n  computed: {\n    sortOptions() {\n      // Create an options list from our fields\n      return this.fields\n        .filter(f => f.sortable)\n        .map(f => ({ text: f.label, value: f.key }))\n    },\n  },\n  mounted() {\n    // Set the initial number of items\n    this.totalRows = this.items.length\n  },\n  methods: {\n    info(item, index, button) {\n      this.infoModal.title = \\`Row index: \\${index}\\`\n      this.infoModal.content = JSON.stringify(item, null, 2)\n      this.$root.$emit('bv::show::modal', this.infoModal.id, button)\n    },\n    resetInfoModal() {\n      this.infoModal.title = ''\n      this.infoModal.content = ''\n    },\n    onFiltered(filteredItems) {\n      // Trigger pagination to update the number of buttons/pages due to filtering\n      this.totalRows = filteredItems.length\n      this.currentPage = 1\n    },\n  },\n}\n</script>\n`;\n\nexport const codeLight = `\n<template>\n  <b-table-lite\n    hover\n    :items=\"items\"\n  />\n</template>\n\n<script>\nimport BCardCode from '@core/components/b-card-code/BCardCode.vue'\nimport { BTableLite } from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BCardCode,\n    BTableLite,\n  },\n  data() {\n    return {\n      items: [\n        {\n          age: 40, first_name: 'Dickerson', last_name: 'Macdonald', Occupation: 'Job',\n        },\n        {\n          age: 21, first_name: 'Larsen', last_name: 'Shaw', Occupation: 'Job',\n        },\n        {\n          age: 89, first_name: 'Geneva', last_name: 'Wilson', Occupation: 'Bussiness',\n        },\n        {\n          age: 38, first_name: 'Jami', last_name: 'Carney', Occupation: 'Bussiness',\n        },\n        {\n          age: 40, first_name: 'James', last_name: 'Thomson', Occupation: 'Job',\n        },\n      ],\n    }\n  },\n}\n</script>\n`;\n\nexport const codeSimple = `\n<template>\n  <div>\n    <b-table-simple\n      hover\n      small\n      caption-top\n      responsive\n    >\n      <caption>Items sold in August, grouped by Country and City:</caption>\n      <colgroup><col><col></colgroup>\n      <colgroup><col><col><col></colgroup>\n      <colgroup><col><col></colgroup>\n      <b-thead head-variant=\"light\">\n        <b-tr>\n          <b-th colspan=\"2\">\n            Region\n          </b-th>\n          <b-th colspan=\"3\">\n            Clothes\n          </b-th>\n          <b-th colspan=\"2\">\n            Accessories\n          </b-th>\n        </b-tr>\n        <b-tr>\n          <b-th>Country</b-th>\n          <b-th>City</b-th>\n          <b-th>Trousers</b-th>\n          <b-th>Skirts</b-th>\n          <b-th>Dresses</b-th>\n          <b-th>Bracelets</b-th>\n          <b-th>Rings</b-th>\n        </b-tr>\n      </b-thead>\n      <b-tbody>\n        <b-tr>\n          <b-th rowspan=\"3\">\n            Belgium\n          </b-th>\n          <b-th class=\"text-right\">\n            Antwerp\n          </b-th>\n          <b-td>56</b-td>\n          <b-td>22</b-td>\n          <b-td>43</b-td>\n          <b-td variant=\"success\">\n            72\n          </b-td>\n          <b-td>23</b-td>\n        </b-tr>\n        <b-tr>\n          <b-th class=\"text-right\">\n            Gent\n          </b-th>\n          <b-td>46</b-td>\n          <b-td variant=\"warning\">\n            18\n          </b-td>\n          <b-td>50</b-td>\n          <b-td>61</b-td>\n          <b-td variant=\"danger\">\n            15\n          </b-td>\n        </b-tr>\n        <b-tr>\n          <b-th class=\"text-right\">\n            Brussels\n          </b-th>\n          <b-td>51</b-td>\n          <b-td>27</b-td>\n          <b-td>38</b-td>\n          <b-td>69</b-td>\n          <b-td>28</b-td>\n        </b-tr>\n        <b-tr>\n          <b-th rowspan=\"2\">\n            The Netherlands\n          </b-th>\n          <b-th class=\"text-right\">\n            Amsterdam\n          </b-th>\n          <b-td variant=\"success\">\n            89\n          </b-td>\n          <b-td>34</b-td>\n          <b-td>69</b-td>\n          <b-td>85</b-td>\n          <b-td>38</b-td>\n        </b-tr>\n        <b-tr>\n          <b-th class=\"text-right\">\n            Utrecht\n          </b-th>\n          <b-td>80</b-td>\n          <b-td variant=\"danger\">\n            12\n          </b-td>\n          <b-td>43</b-td>\n          <b-td>36</b-td>\n          <b-td variant=\"warning\">\n            19\n          </b-td>\n        </b-tr>\n      </b-tbody>\n      <b-tfoot>\n        <b-tr>\n          <b-td\n            colspan=\"7\"\n            variant=\"secondary\"\n            class=\"text-right\"\n          >\n            Total Rows: <b>5</b>\n          </b-td>\n        </b-tr>\n      </b-tfoot>\n    </b-table-simple>\n  </div>\n</template>\n`;\n"],"sourceRoot":""}