@nethserver/ns8-ui-lib 0.0.79 → 0.0.80
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/ns8-ui-lib.esm.js +512 -383
- package/dist/ns8-ui-lib.min.js +1 -1
- package/dist/ns8-ui-lib.ssr.js +463 -360
- package/package.json +1 -1
- package/src/lib-components/NsTimePicker.vue +133 -0
package/package.json
CHANGED
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div :class="`ns-time-picker cv-time-picker ${carbonPrefix}--form-item`">
|
|
3
|
+
<div
|
|
4
|
+
:class="[
|
|
5
|
+
`${carbonPrefix}--time-picker`,
|
|
6
|
+
{ [`${carbonPrefix}--time-picker--light`]: isLight },
|
|
7
|
+
]"
|
|
8
|
+
:data-invalid="isInvalid"
|
|
9
|
+
>
|
|
10
|
+
<div :class="`${carbonPrefix}--time-picker__input`">
|
|
11
|
+
<label :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
|
|
12
|
+
<vue-timepicker
|
|
13
|
+
:id="uid"
|
|
14
|
+
:hide-clear-button="hideClearButton"
|
|
15
|
+
v-bind="$attrs"
|
|
16
|
+
:value="value"
|
|
17
|
+
@input="$emit('input', $event)"
|
|
18
|
+
:class="[
|
|
19
|
+
`time-picker-field ${carbonPrefix}--time-picker__input-field ${carbonPrefix}--text-input`,
|
|
20
|
+
{ [`${carbonPrefix}--text-input--light`]: isLight },
|
|
21
|
+
{ 'narrow-width': hideClearButton },
|
|
22
|
+
]"
|
|
23
|
+
></vue-timepicker>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
<div :class="`${carbonPrefix}--form-requirement`" v-if="isInvalid">
|
|
27
|
+
<slot name="invalid-message">{{ invalidMessage }}</slot>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</template>
|
|
31
|
+
|
|
32
|
+
<script>
|
|
33
|
+
import {
|
|
34
|
+
uidMixin,
|
|
35
|
+
carbonPrefixMixin,
|
|
36
|
+
themeMixin,
|
|
37
|
+
} from "@carbon/vue/src/mixins";
|
|
38
|
+
|
|
39
|
+
export default {
|
|
40
|
+
name: "NsTimePicker",
|
|
41
|
+
mixins: [uidMixin, carbonPrefixMixin, themeMixin],
|
|
42
|
+
props: {
|
|
43
|
+
value: String,
|
|
44
|
+
label: { type: String, default: "hh:mm" },
|
|
45
|
+
hideClearButton: {
|
|
46
|
+
type: Boolean,
|
|
47
|
+
default: false,
|
|
48
|
+
},
|
|
49
|
+
invalidMessage: {
|
|
50
|
+
type: String,
|
|
51
|
+
default: "",
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
data() {
|
|
55
|
+
return {
|
|
56
|
+
isInvalid: false,
|
|
57
|
+
};
|
|
58
|
+
},
|
|
59
|
+
mounted() {
|
|
60
|
+
this.checkSlots();
|
|
61
|
+
},
|
|
62
|
+
updated() {
|
|
63
|
+
this.checkSlots();
|
|
64
|
+
},
|
|
65
|
+
methods: {
|
|
66
|
+
checkSlots() {
|
|
67
|
+
// NOTE: this.$slots is not reactive so needs to be managed on updated
|
|
68
|
+
this.isInvalid = !!(
|
|
69
|
+
this.$slots["invalid-message"] ||
|
|
70
|
+
(this.invalidMessage && this.invalidMessage.length)
|
|
71
|
+
);
|
|
72
|
+
},
|
|
73
|
+
},
|
|
74
|
+
};
|
|
75
|
+
</script>
|
|
76
|
+
|
|
77
|
+
<style scoped lang="scss">
|
|
78
|
+
.ns-time-picker .time-picker-field {
|
|
79
|
+
padding: 0;
|
|
80
|
+
width: 6rem;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// reduce width if clear button is hidden
|
|
84
|
+
.ns-time-picker .time-picker-field.narrow-width {
|
|
85
|
+
width: 4.875rem;
|
|
86
|
+
}
|
|
87
|
+
</style>
|
|
88
|
+
|
|
89
|
+
<style lang="scss">
|
|
90
|
+
// global styles
|
|
91
|
+
|
|
92
|
+
// hide default black outline
|
|
93
|
+
.ns-time-picker .time-picker-field,
|
|
94
|
+
.ns-time-picker .time-picker-field:active,
|
|
95
|
+
.ns-time-picker .time-picker-field:focus {
|
|
96
|
+
outline: none;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.ns-time-picker .time-picker-field input {
|
|
100
|
+
height: 100% !important;
|
|
101
|
+
background: none !important;
|
|
102
|
+
border: none !important;
|
|
103
|
+
padding: 0 1rem !important;
|
|
104
|
+
font-family: "IBM Plex Mono", "Menlo", "DejaVu Sans Mono",
|
|
105
|
+
"Bitstream Vera Sans Mono", Courier, monospace !important;
|
|
106
|
+
font-size: 0.875rem !important;
|
|
107
|
+
font-weight: 400 !important;
|
|
108
|
+
width: 6rem !important;
|
|
109
|
+
letter-spacing: 0.32px;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
// reduce width if clear button is hidden
|
|
113
|
+
.ns-time-picker .time-picker-field.narrow-width input {
|
|
114
|
+
width: 4.875rem !important;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// adjust clear button style
|
|
118
|
+
.ns-time-picker .time-picker-field .clear-btn {
|
|
119
|
+
color: #797979;
|
|
120
|
+
padding-right: 1rem;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// adjust position of dropdown
|
|
124
|
+
.ns-time-picker .vue__time-picker-dropdown,
|
|
125
|
+
.ns-time-picker .vue__time-picker .dropdown {
|
|
126
|
+
top: 2.5rem;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
// hide HH and mm labels inside dropdown
|
|
130
|
+
.ns-time-picker .time-picker-field .dropdown .hint {
|
|
131
|
+
display: none;
|
|
132
|
+
}
|
|
133
|
+
</style>
|