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

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