@webitel/ui-sdk 24.12.53 → 24.12.54

package/package.json

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

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

@@ -17,6 +17,16 @@
       </slot>
     </wt-label>
     <div class="wt-timepicker__wrapper">
+      <wt-time-input
+        v-if="isDay"
+        :disabled="disabled"
+        :label="labelDays"
+        :max-value="dateMode ? null : 365"
+        :v="v"
+        :value="day"
+        hide-input-info
+        @input="day = $event"
+      />
       <wt-time-input
         v-if="isHour"
         :disabled="disabled"
@@ -60,6 +70,7 @@
 <script>
 import validationMixin from '../../mixins/validationMixin/validationMixin.js';
 
+const SEC_IN_DAY = 60 * 60 * 24;
 const SEC_IN_HOUR = 60 * 60;
 const SEC_IN_MIN = 60;
 
@@ -78,14 +89,26 @@ export default {
       type: [String, Number],
       default: 0,
     },
+
+    /**
+     * If dateMode is true, timepicker asserts value is timestamp and displays/changes timestamp value
+     */
     dateMode: {
       type: Boolean,
       default: false,
     },
+
+    /**
+     * if passed, replaces "day", "hour", "min", "sec" with a single label + format prop value
+     */
     label: {
       type: String,
       default: '',
     },
+
+    /**
+     * Time format, can be "dd:hh:mm:ss", "hh:mm:ss", "mm:ss", "ss"
+     */
     format: {
       type: String,
       default: 'hh:mm:ss',
@@ -94,6 +117,11 @@ export default {
       type: Boolean,
       default: false,
     },
+
+    /**
+     * Object with props, passed down to wt-label as props
+     */
+
     labelProps: {
       type: Object,
       description: 'Object with props, passed down to wt-label as props',
@@ -110,6 +138,9 @@ export default {
   },
 
   computed: {
+    isDay() {
+      return this.format.includes('dd');
+    },
     isHour() {
       return this.format.includes('hh');
     },
@@ -119,6 +150,10 @@ export default {
     isSec() {
       return this.format.includes('ss');
     },
+    labelDays() {
+      if (this.noLabel) return null;
+      return this.label ? null : this.$t('webitelUI.timepicker.day');
+    },
     labelHours() {
       if (this.noLabel) return null;
       return this.label ? null : this.$t('webitelUI.timepicker.hour');
@@ -131,11 +166,24 @@ export default {
       if (this.noLabel) return null;
       return this.label ? null : this.$t('webitelUI.timepicker.sec');
     },
+    day: {
+      get() {
+        return this.dateMode
+          ? new Date(+this.value).getDay()
+          : Math.floor(this.value / SEC_IN_DAY);
+      },
+      set(value) {
+        const newValue = this.dateMode
+          ? new Date(this.value).setDate(value)
+          : this.value - this.day * SEC_IN_DAY + value * SEC_IN_DAY;
+        this.$emit('input', newValue);
+      },
+    },
     hour: {
       get() {
         return this.dateMode
           ? new Date(+this.value).getHours()
-          : Math.floor(this.value / SEC_IN_HOUR);
+          : Math.floor((this.value % SEC_IN_DAY) / SEC_IN_HOUR);
       },
       set(value) {
         const newValue = this.dateMode

package/src/locale/en/en.js

@@ -308,6 +308,7 @@ export default {
       variableSearchHint: 'Query format: "key=value"',
     },
     timepicker: {
+      day: 'Day:',
       hour: 'Hour:',
       min: 'Min:',
       sec: 'Sec:',

package/src/locale/ru/ru.js

@@ -306,6 +306,7 @@ export default {
       variableSearchHint: 'Формат запроса: "ключ=значение"',
     },
     timepicker: {
+      day: 'День:',
       hour: 'Час:',
       min: 'Мин:',
       sec: 'Сек:',

package/src/locale/ua/ua.js

@@ -306,6 +306,7 @@ export default {
       variableSearchHint: 'Формат запиту: "ключ=значення"',
     },
     timepicker: {
+      day: 'День:',
       hour: 'Год:',
       min: 'Хв:',
       sec: 'Сек:',