You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

BoxSectionItem.vue 2.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <template>
  2. <itemtag :version="version" :tag="tag" :href="href" class="box-section-item">
  3. <slot name="icon">
  4. <figure v-if="isURL(icon)" class="item-icon">
  5. <img :src="icon">
  6. </figure>
  7. <span v-else-if="icon" class="item-icon">{{ icon }}</span>
  8. </slot>
  9. <div class="item-text">
  10. <p class="item-label">
  11. {{ label }}
  12. </p>
  13. <slot name="description">
  14. <p v-if="description" class="item-description">
  15. {{ description }}
  16. </p>
  17. </slot>
  18. </div>
  19. <div class="item-extra">
  20. <slot />
  21. </div>
  22. </itemtag>
  23. </template>
  24. <script>
  25. import _ from 'lodash'
  26. export default {
  27. components: {
  28. itemtag: {
  29. name: 'itemtag',
  30. props: ['tag', 'href', 'version'],
  31. computed: {
  32. isVisible() {
  33. if (_.isNil(this.version)) {
  34. return true
  35. }
  36. return this.version === this.$dream.version
  37. },
  38. },
  39. render(createElement) {
  40. if (!this.isVisible) {
  41. return null
  42. }
  43. return createElement(
  44. this.tag,
  45. {
  46. props: {
  47. href: this.href,
  48. },
  49. },
  50. this.$slots.default,
  51. )
  52. },
  53. },
  54. },
  55. props: {
  56. label: {
  57. type: String,
  58. required: true,
  59. },
  60. description: {
  61. type: String,
  62. default: '',
  63. },
  64. icon: {
  65. type: String,
  66. default: undefined,
  67. },
  68. href: {
  69. type: String,
  70. default: undefined,
  71. },
  72. version: {
  73. type: String,
  74. default: undefined,
  75. },
  76. },
  77. computed: {
  78. tag() {
  79. let tag = 'div'
  80. if (!_.isNil(this.href)) {
  81. tag = 'app-external-link'
  82. }
  83. return tag
  84. },
  85. },
  86. methods: {
  87. isURL(str) {
  88. if (_.isNil(str)) {
  89. return false
  90. }
  91. if (_.startsWith(str, '~')) {
  92. return true
  93. }
  94. const pattern = new RegExp(
  95. '^(https?:\\/\\/)?' // protocol
  96. + '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' // domain name
  97. + '((\\d{1,3}\\.){3}\\d{1,3}))' // OR ip (v4) address
  98. + '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' // port and path
  99. + '(\\?[;&a-z\\d%_.~+=-]*)?' // query string
  100. + '(\\#[-a-z\\d_]*)?$',
  101. 'i',
  102. ) // fragment locator
  103. return !!pattern.test(str)
  104. },
  105. },
  106. }
  107. </script>