DotButton.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <template>
  2. <b-button
  3. class="dot-btn"
  4. :class="['dot-btn-' + variant, { 'active': active, 'show': show, 'hide': dotOnly }]"
  5. v-bind="$attrs" v-on="$listeners"
  6. :active="active"
  7. :variant="variant"
  8. @mouseover="updateShow(true)"
  9. @mouseleave="updateShow(false)"
  10. @focus="updateShow(true)"
  11. @blur="updateShow(false)"
  12. @click="onClick"
  13. >
  14. <span :class="pos">
  15. <slot name="default" />
  16. </span>
  17. </b-button>
  18. </template>
  19. <script>
  20. export default {
  21. name: 'DotButton',
  22. props: {
  23. variant: { type: String, required: true },
  24. active: { type: Boolean, default: false },
  25. hovered: { type: Boolean, default: false },
  26. dotOnly: { type: Boolean, default: false },
  27. pos: { type: String, default: 'left' }
  28. },
  29. data () {
  30. return {
  31. show: this.hovered
  32. }
  33. },
  34. methods: {
  35. onClick (e) {
  36. this.$el.blur()
  37. },
  38. updateShow (show) {
  39. this.show = this.hovered || show
  40. }
  41. }
  42. }
  43. </script>
  44. <style lang="scss" scoped>
  45. @each $color, $value in $theme-colors {
  46. .dot-btn-#{$color} {
  47. @include dot-button-variant($value, $value);
  48. }
  49. }
  50. .dot-btn {
  51. word-break: keep-all;
  52. white-space: pre;
  53. &:not(.show),
  54. &.hide {
  55. height: 1.1875rem;
  56. width: 1.1875rem;
  57. padding: 0;
  58. &.dot-btn-depart {
  59. height: 1.875rem;
  60. width: 1.875rem;
  61. }
  62. span {
  63. display: none;
  64. }
  65. }
  66. &.hide:hover {
  67. span {
  68. pointer-events: none;
  69. position: absolute;
  70. display: block;
  71. border-radius: 50rem;
  72. padding: 0 $input-btn-padding-x;
  73. line-height: 1.5;
  74. &.left {
  75. transform: translate(calc(-100% + 1.1875rem), -50%);
  76. }
  77. &.right {
  78. transform: translate(-2px, -50%);
  79. }
  80. &.middle {
  81. transform: translate(calc(-50% + #{1.1875rem / 2}), -50%);
  82. }
  83. }
  84. @each $color, $value in $theme-colors {
  85. &.dot-btn-#{$color} {
  86. span {
  87. background-color: lighten($value, 15%);
  88. }
  89. &:active,
  90. &.active {
  91. span {
  92. background-color: $value;
  93. }
  94. }
  95. }
  96. }
  97. }
  98. }
  99. </style>