@pocketprep/ui-kit 3.0.33 → 3.0.35
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.
- package/dist/@pocketprep/ui-kit.js +2674 -2629
- package/dist/@pocketprep/ui-kit.js.map +1 -1
- package/dist/@pocketprep/ui-kit.umd.cjs +4 -4
- package/dist/@pocketprep/ui-kit.umd.cjs.map +1 -1
- package/lib/components/Icons/Icon.vue +3 -0
- package/lib/components/Icons/IconTimer.md +7 -0
- package/lib/components/Icons/IconTimer.vue +17 -0
- package/lib/components/SidePanels/SidePanel.vue +38 -32
- package/package.json +1 -1
|
@@ -62,6 +62,7 @@
|
|
|
62
62
|
:secondary-color="secondaryColor"
|
|
63
63
|
/>
|
|
64
64
|
<IconText v-else-if="type === 'text'" :title="title" />
|
|
65
|
+
<IconTimer v-else-if="type === 'timer'" :title="title" />
|
|
65
66
|
<IconInfo v-else-if="type === 'info'" :title="title" />
|
|
66
67
|
<IconList v-else-if="type === 'list'" :title="title" />
|
|
67
68
|
<IconLaunch v-else-if="type === 'launch'" :title="title" />
|
|
@@ -136,6 +137,7 @@ import IconPreview from './IconPreview.vue'
|
|
|
136
137
|
import type { TIconType } from './icon'
|
|
137
138
|
import IconPercent from './IconPercent.vue'
|
|
138
139
|
import IconPerson from './IconPerson.vue'
|
|
140
|
+
import IconTimer from './IconTimer.vue'
|
|
139
141
|
|
|
140
142
|
@Component({
|
|
141
143
|
components: {
|
|
@@ -201,6 +203,7 @@ import IconPerson from './IconPerson.vue'
|
|
|
201
203
|
IconPerson,
|
|
202
204
|
IconChat,
|
|
203
205
|
IconPreview,
|
|
206
|
+
IconTimer,
|
|
204
207
|
},
|
|
205
208
|
})
|
|
206
209
|
export default class Icon extends Vue {
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<!-- eslint-disable -->
|
|
3
|
+
<svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
4
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.75C0 1.26675 0.391751 0.875 0.875 0.875H8.125C8.60825 0.875 9 1.26675 9 1.75C9 2.23325 8.60825 2.625 8.125 2.625H7.979V4.48831C7.979 5.22803 7.66678 6.03 6.7178 6.89211C7.11675 7.28524 7.40564 7.68358 7.60566 8.08961C7.89408 8.67506 7.979 9.23862 7.979 9.75921V11.375H8.125C8.60825 11.375 9 11.7668 9 12.25C9 12.7332 8.60825 13.125 8.125 13.125H0.875C0.391751 13.125 0 12.7332 0 12.25C0 11.7668 0.391751 11.375 0.875 11.375H0.962891V9.75726C0.962891 8.80986 1.29291 7.85054 2.27856 6.8915C1.33075 6.04208 0.962891 5.2413 0.962891 4.48636V2.625H0.875C0.391751 2.625 0 2.23325 0 1.75ZM2.21289 2.625H6.729V4.48831C6.729 4.84853 6.58924 5.47829 5.37852 6.37313C5.2214 6.48925 5.12763 6.67217 5.12505 6.86752C5.12248 7.06288 5.21141 7.2482 5.36542 7.36841C5.96537 7.83674 6.29783 8.2634 6.48435 8.64201C6.66927 9.01738 6.729 9.38242 6.729 9.75921V9.96977C6.43462 9.43897 5.93209 8.875 5.38105 8.875C3.89098 8.875 2.68379 9.73361 2.21289 10.5856V9.75726C2.21289 9.07761 2.45056 8.2919 3.63458 7.36764C3.78859 7.24742 3.87752 7.0621 3.87495 6.86674C3.87237 6.67139 3.7786 6.48848 3.62148 6.37235C2.38796 5.46065 2.21289 4.8262 2.21289 4.48636V2.625Z" fill="currentColor"
|
|
5
|
+
/>
|
|
6
|
+
</svg>
|
|
7
|
+
<!-- eslint-enable -->
|
|
8
|
+
</template>
|
|
9
|
+
|
|
10
|
+
<script lang="ts">
|
|
11
|
+
import { Component, Vue, Prop } from 'vue-facing-decorator'
|
|
12
|
+
|
|
13
|
+
@Component
|
|
14
|
+
export default class IconTimer extends Vue {
|
|
15
|
+
@Prop() title!: string
|
|
16
|
+
}
|
|
17
|
+
</script>
|
|
@@ -39,16 +39,18 @@
|
|
|
39
39
|
>
|
|
40
40
|
<Icon type="close" />
|
|
41
41
|
</div>
|
|
42
|
-
<
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
42
|
+
<slot name="sidePanelTitle">
|
|
43
|
+
<div
|
|
44
|
+
ref="uikit-side-panel__title"
|
|
45
|
+
class="uikit-side-panel__title"
|
|
46
|
+
:class="{ 'uikit-side-panel__title--has-tabs': tabs && tabs.length }"
|
|
47
|
+
tabindex="-1"
|
|
48
|
+
>
|
|
49
|
+
<h1 class="uikit-side-panel__title-inner">
|
|
50
|
+
{{ name }}
|
|
51
|
+
</h1>
|
|
52
|
+
</div>
|
|
53
|
+
</slot>
|
|
52
54
|
<div
|
|
53
55
|
v-if="tabs && tabs.length"
|
|
54
56
|
class="uikit-side-panel__tabs"
|
|
@@ -77,30 +79,34 @@
|
|
|
77
79
|
</div>
|
|
78
80
|
</div>
|
|
79
81
|
</div>
|
|
80
|
-
<
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
<div class="uikit-side-panel__foot" :class="{ 'uikit-side-panel__foot--dark': isDarkMode }">
|
|
89
|
-
<div class="uikit-side-panel__foot-left">
|
|
90
|
-
<slot name="details" />
|
|
82
|
+
<slot name="sidePanelContent">
|
|
83
|
+
<div
|
|
84
|
+
v-dark="isDarkMode"
|
|
85
|
+
class="uikit-side-panel__content"
|
|
86
|
+
:class="{ 'uikit-side-panel__content--has-tabs': tabs && tabs.length }"
|
|
87
|
+
:style="{ ...customContentStyles }"
|
|
88
|
+
>
|
|
89
|
+
<slot />
|
|
91
90
|
</div>
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
>
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
91
|
+
</slot>
|
|
92
|
+
<slot name="sidePanelFooter">
|
|
93
|
+
<div class="uikit-side-panel__foot" :class="{ 'uikit-side-panel__foot--dark': isDarkMode }">
|
|
94
|
+
<div class="uikit-side-panel__foot-left">
|
|
95
|
+
<slot name="details" />
|
|
96
|
+
</div>
|
|
97
|
+
<div class="uikit-side-panel__foot-right">
|
|
98
|
+
<PocketButton
|
|
99
|
+
class="uikit-side-panel__foot-cancel"
|
|
100
|
+
type="secondary"
|
|
101
|
+
:is-dark-mode="isDarkMode"
|
|
102
|
+
@click="customCancelButtonAction ? emitCloseButton() : emitClose()"
|
|
103
|
+
>
|
|
104
|
+
{{ cancelButtonText }}
|
|
105
|
+
</PocketButton>
|
|
106
|
+
<slot name="action" />
|
|
107
|
+
</div>
|
|
102
108
|
</div>
|
|
103
|
-
</
|
|
109
|
+
</slot>
|
|
104
110
|
</div>
|
|
105
111
|
</div>
|
|
106
112
|
</template>
|