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.

AppUpdate.vue 1.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <template>
  2. <!-- Cannot update, only show the version... -->
  3. <box-item
  4. v-if="!updater.enabled"
  5. :label="currentVersion"
  6. icon="globe" />
  7. <!-- Updated! -->
  8. <box-item
  9. v-else-if="!updater.available"
  10. :label="`${projectTitle} is up to date.`"
  11. :description="currentVersion"
  12. icon="globe" />
  13. <!-- Update available -->
  14. <box-item
  15. v-else-if="!updater.update.active"
  16. :label="`${projectTitle} ${updater.latest.tag_name} available.`"
  17. icon="fire-alt"
  18. class="update-item"
  19. :is-link="true"
  20. @click="next" />
  21. </template>
  22. <script>
  23. /* eslint import/namespace: ['error', { allowComputed: true }] */
  24. import * as providers from '~/modules/updater'
  25. export default {
  26. props: {
  27. project: {
  28. type: String,
  29. required: true,
  30. },
  31. projectTitle: {
  32. type: String,
  33. default: 'Project',
  34. },
  35. href: {
  36. type: String,
  37. required: true,
  38. },
  39. },
  40. data: () => ({
  41. updater: {},
  42. }),
  43. computed: {
  44. currentVersion() {
  45. return this.updater?.currentVersion || 'v0.0.0'
  46. },
  47. },
  48. created() {
  49. this.updater = providers[this.project]
  50. },
  51. methods: {
  52. next() {
  53. this.$router.push(this.href)
  54. },
  55. },
  56. }
  57. </script>
  58. <style lang="scss">
  59. @keyframes updateAnim {
  60. 0% {
  61. @apply bg-transparent;
  62. }
  63. 50% {
  64. @apply bg-dark-100;
  65. }
  66. 100% {
  67. @apply bg-transparent;
  68. }
  69. }
  70. .update-item {
  71. transition: all 0.2s ease-in-out;
  72. animation-name: updateAnim;
  73. animation-duration: 2s;
  74. animation-iteration-count: infinite;
  75. &:hover {
  76. animation-name: none;
  77. background: theme('colors.dark.300') !important;
  78. }
  79. .item__label {
  80. @apply text-white;
  81. }
  82. .item__description {
  83. @apply text-generic-600;
  84. }
  85. }
  86. </style>