wingsline-tab-panel.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <template>
  2. <section v-show="isActive" :aria-hidden="! isActive" :id="generatedId" role="tabpanel">
  3. <slot></slot>
  4. </section>
  5. </template>
  6. <script>
  7. export default {
  8. data: () => ({
  9. isActive: false,
  10. }),
  11. props: {
  12. id: {
  13. default: null
  14. },
  15. name: {
  16. required: true
  17. },
  18. prefix: {
  19. default: ""
  20. },
  21. suffix: {
  22. default: ""
  23. },
  24. tabClass: {
  25. default: ""
  26. },
  27. },
  28. computed: {
  29. label: function() {
  30. return this.name;
  31. },
  32. hash: function() {
  33. return this.id ?
  34. "#" + this.id :
  35. "#" + this.$parent.name + "." + this.name.toLowerCase().replace(/\s/g, "-");
  36. },
  37. generatedId: function() {
  38. return this.hash.substring(1);
  39. },
  40. header() {
  41. return this.prefix + this.name + this.suffix;
  42. }
  43. },
  44. created() {
  45. this.$bus.$on("wingsline-tabs.selectTab", this.selectTab);
  46. },
  47. methods: {
  48. selectTab(data) {
  49. // if panel's parent name matches, we show the panel
  50. if (this.$parent.name === data.panel) {
  51. this.isActive = data.select === this.hash;
  52. }
  53. }
  54. }
  55. };
  56. </script>