Merge pull request #303 from webitel/feature/fix-label-in-timepicker

feature: fix label in timepicker[WTEL-4099]

docs/pages/webitel-ui/components/wt-timepicker/Readme.md

@@ -1,5 +1,4 @@
 <script setup>
-import Docs from './wt-timepicker-docs.vue';
 import ExampleTimepicker from './examples/example-timepicker.vue';
 import ExampleDisabledTimepicker from './examples/example-disabled-timepicker.vue';
 import ExampleInvalidTimepicker from './examples/example-invalid-timepicker.vue';
@@ -8,9 +7,23 @@ import ExampleTimepickerDateMode from './examples/example-timepicker-date-mode.v
 
 # WtTimepicker
 
-::: raw
-<Docs />
-:::
+## Props
+
+| Prop       | Type           | Default    | Code                                                  | Description                                                                                      |
+|------------|----------------|------------|-------------------------------------------------------|--------------------------------------------------------------------------------------------------|
+| value      | String, Number | 0          | `<wt-timepicker :value="'my value'"></wt-timepicker>` | Time value in seconds (not milliseconds!)                                                        |
+| label      | String         | ''         | `<wt-timepicker :label="My Label"></wt-timepicker>`   | if passed, replaces "hour", "min", "sec" with a single label + format prop value                 |
+| format     | String         | 'hh:mm:ss' | `<wt-timepicker :format='hh:mm'></wt-timepicker>`     | Controls visibility of inputs, depending on presence of h, m, s letters                          |
+| disabled   | Boolean        | false      | `<wt-timepicker disabled></wt-timepicker>`            |                                                                                                  |
+| labelProps | Object         | false      | `<wt-timepicker :label-props='obj'></wt-timepicker>`  | Object with props, passed down to wt-label as props                                              |
+| noLabel    | Boolean        | false      | `<wt-timepicker noLabel></wt-timepicker>`             | Not displaying label                                                                             |
+| dateMode   | Boolean        | false      | `<wt-timepicker date-mode></wt-timepicker>`           | If date-mode is true, timepicker asserts value is timestamp and displays/changes timestamp value |
+
+## Events
+
+| Value | Type                                                             | Description                                        |
+|-------|------------------------------------------------------------------|----------------------------------------------------|
+| input | Number sec value or timestamp, depending on date-mode prop value | Event is triggered immediately after value change. |
 
 ## Example Timepicker
 ::: raw

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.10.14",
+  "version": "24.10.15",
   "private": false,
   "scripts": {
     "dev": "vite",

src/components/wt-timepicker/wt-timepicker.vue

@@ -4,7 +4,7 @@
     class="wt-timepicker"
   >
     <wt-label
-      v-if="label"
+      v-if="label || !noLabel"
       :invalid="invalid"
       v-bind="labelProps"
     >
@@ -14,7 +14,7 @@
       <wt-time-input
         v-if="isHour"
         :disabled="disabled"
-        :label="label ? null : $t('webitelUI.timepicker.hour') "
+        :label="labelHours"
         :max-value="dateMode ? null : 23"
         :v="v"
         :value="hour"
@@ -24,7 +24,7 @@
       <wt-time-input
         v-if="isMin"
         :disabled="disabled"
-        :label="label ? null : $t('webitelUI.timepicker.min')"
+        :label="labelMin"
         :max-value="59"
         :v="v"
         :value="min"
@@ -34,7 +34,7 @@
       <wt-time-input
         v-if="isSec"
         :disabled="disabled"
-        :label="label ? null : $t('webitelUI.timepicker.sec')"
+        :label="labelSec"
         :max-value="59"
         :v="v"
         :value="sec"
@@ -89,6 +89,10 @@ export default {
       type: Object,
       description: 'Object with props, passed down to wt-label as props',
     },
+    noLabel: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   computed: {
@@ -101,6 +105,18 @@ export default {
     isSec() {
       return this.format.includes('ss');
     },
+    labelHours() {
+      if(this.noLabel) return null;
+      return this.label ? null : this.$t('webitelUI.timepicker.hour');
+    },
+    labelMin() {
+      if(this.noLabel) return null;
+      return this.label ? null : this.$t('webitelUI.timepicker.min');
+    },
+    labelSec() {
+      if(this.noLabel) return null;
+      return this.label ? null : this.$t('webitelUI.timepicker.sec');
+    },
     hour: {
       get() {
         return this.dateMode