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.4KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <template>
  2. <!-- Offline mode -->
  3. <MenuItem
  4. v-if="!updater.enabled"
  5. v-tooltip="{ content: 'Installed version', placement: 'bottom' }"
  6. :label="project.version"
  7. icon="rocket" />
  8. <!-- Updated -->
  9. <MenuItem
  10. v-else-if="!updater.available"
  11. :label="`${project.name} is up to date.`"
  12. :description="project.version"
  13. icon="thumbs-up" />
  14. <!-- Update available -->
  15. <MenuItem
  16. v-else
  17. :label="`${project.name} ${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. export default {
  25. props: {
  26. project: {
  27. type: Object,
  28. required: true,
  29. },
  30. href: {
  31. type: String,
  32. required: true,
  33. },
  34. },
  35. computed: {
  36. updater() {
  37. return this.project.updater
  38. },
  39. },
  40. methods: {
  41. next() {
  42. this.$router.push(this.href)
  43. },
  44. },
  45. }
  46. </script>
  47. <style lang="scss">
  48. @keyframes updateAnim {
  49. 0% {
  50. @apply bg-transparent;
  51. }
  52. 50% {
  53. @apply bg-dark-100;
  54. }
  55. 100% {
  56. @apply bg-transparent;
  57. }
  58. }
  59. .update-item {
  60. //transition: all 0.2s ease-in-out;
  61. animation-name: updateAnim;
  62. animation-duration: 2s;
  63. animation-iteration-count: infinite;
  64. &:hover {
  65. animation-name: none;
  66. background: theme('colors.dark.300') !important;
  67. }
  68. .item__label {
  69. @apply text-white;
  70. }
  71. .item__description {
  72. @apply text-generic-600;
  73. }
  74. }
  75. </style>