@pocketprep/ui-kit 3.3.0 → 3.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -25,7 +25,14 @@
25
25
  class="uikit-calendar__clear-date-icon"
26
26
  @click.stop.prevent="clearCalendar"
27
27
  >
28
- <Icon type="close" />
28
+ <Tooltip
29
+ class="uikit-calendar__clear-date-tooltip"
30
+ v-if="showClearDateTooltip">Clear Date</Tooltip>
31
+ <Icon
32
+ type="close"
33
+ @mouseenter="showClearDateTooltip = true"
34
+ @mouseleave="showClearDateTooltip = false"
35
+ />
29
36
  </div>
30
37
  <div
31
38
  v-dark="isDarkMode"
@@ -49,6 +56,7 @@
49
56
  import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
50
57
  import PocketInput from '../Forms/Input.vue'
51
58
  import Icon from '../Icons/Icon.vue'
59
+ import Tooltip from '../Tooltips/Tooltip.vue'
52
60
  import Litepicker from 'litepicker'
53
61
  import 'litepicker/dist/plugins/keyboardnav'
54
62
  import type { DateTime } from 'litepicker/dist/types/datetime'
@@ -62,6 +70,7 @@ import type { ComponentPublicInstance } from 'vue'
62
70
  components: {
63
71
  PocketInput,
64
72
  Icon,
73
+ Tooltip,
65
74
  },
66
75
  })
67
76
  export default class Calendar extends Vue {
@@ -77,6 +86,7 @@ export default class Calendar extends Vue {
77
86
  hover = false
78
87
  isShowingCalendar = false
79
88
  afterCalendarTab = -1
89
+ showClearDateTooltip = false
80
90
 
81
91
  beforeUnmount () {
82
92
  this.calendar?.destroy()
@@ -141,6 +151,10 @@ export default class Calendar extends Vue {
141
151
  }
142
152
 
143
153
  handleInputKeydown (event: KeyboardEvent) {
154
+ if (event.key === 'Backspace') {
155
+ this.clearCalendar()
156
+ return
157
+ }
144
158
  if (![ 'Shift', 'Tab' ].includes(event.key)) {
145
159
  if (!this.isShowingCalendar) {
146
160
  this.showCalendar()
@@ -207,6 +221,12 @@ export default class Calendar extends Vue {
207
221
  }
208
222
  }
209
223
 
224
+ &__clear-date-tooltip {
225
+ position: relative;
226
+ bottom: 32px;
227
+ left: 10px;
228
+ }
229
+
210
230
  &__calendar-icon {
211
231
  position: absolute;
212
232
  top: 30px;
@@ -120,7 +120,7 @@ export default class Textarea extends Vue {
120
120
  border: 1px solid $gray-background;
121
121
  color: $slate-03;
122
122
 
123
- &:placeholder {
123
+ &::placeholder {
124
124
  color: $slate-03;
125
125
  }
126
126
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pocketprep/ui-kit",
3
- "version": "3.3.0",
3
+ "version": "3.3.1",
4
4
  "description": "Pocket Prep UI Kit",
5
5
  "author": "pocketprep",
6
6
  "scripts": {
@@ -91,7 +91,7 @@
91
91
  "npm-run-all": "4.1.5",
92
92
  "postcss-html": "1.5.0",
93
93
  "sass": "1.58.3",
94
- "stylelint": "15.1.0",
94
+ "stylelint": "15.10.3",
95
95
  "stylelint-config-recommended-scss": "9.0.1",
96
96
  "stylelint-config-recommended-vue": "1.4.0",
97
97
  "typescript": "5.0.4",