Merge pull request #395 from webitel/fix/add-requered-prop-in-time-da…

…te-picker

fix:add required prop in time-date picker conponents[WTEL-5684](https…

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

@@ -1,15 +1,17 @@
 <script setup>
-import Docs from './wt-datepicker-docs.vue';
+import Specs from './component-specs.vue';
 import ExampleDatepicker from './examples/example-datepicker.vue';
 import ExampleDatepickerDatetimeMode from './examples/example-datepicker-datetime-mode.vue';
 </script>
 
-# WtDatepicker
+# `wt-datepicker.vue`
 
-## Props
-::: raw
-<Docs/>
-:::
+## Specs
+
+<Specs />
+
+## PLUS ALL VUE DATEPICKER NATIVE PROPS
+All passed but not declared props are passed to `<vue-datepicker>` component as attributes
 
 ## Example Datepicker
 ::: raw

docs/pages/webitel-ui/components/wt-datepicker/component-specs.vue

@@ -0,0 +1,11 @@
+<script setup>
+import Component from '__lib__/components/wt-datepicker/wt-datepicker.vue';
+</script>
+
+<template>
+  <component-info :info="Component.docs" />
+</template>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -18,6 +18,7 @@ import ExampleTimepickerDateMode from './examples/example-timepicker-date-mode.v
 | 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 |
+| required   | Boolean        | false      | `<wt-timepicker required></wt-timepicker>`            | Native input required attribute                                                                  |
 
 ## Events
 

package.json

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

src/components/wt-datepicker/wt-datepicker.vue

@@ -14,7 +14,7 @@
         name="label"
         v-bind="{ label }"
       >
-        {{ label }}
+        {{ requiredLabel }}
       </slot>
     </wt-label>
     <vue-datepicker
@@ -80,9 +80,14 @@
 <script setup>
 import VueDatepicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 const props = defineProps({
+
+  /**
+   * [`'date'`, `'datetime'`]
+   * */
+
   mode: {
     type: String,
     default: 'date',
@@ -114,9 +119,22 @@ const props = defineProps({
     type: String,
     default: 'en',
   },
+
+  /**
+   * Object with props, passed down to wt-label as props
+   */
+
   labelProps: {
     type: Object,
-    description: 'Object with props, passed down to wt-label as props',
+  },
+
+  /**
+   * Native input required attribute
+   */
+
+  required: {
+    type: Boolean,
+    default: false,
   },
 });
 const emit = defineEmits(['input']);
@@ -125,6 +143,10 @@ const isOpened = ref(false);
 const datepicker = ref(null); // template ref
 
 const isDateTime = props.mode === 'datetime';
+
+const requiredLabel = computed(() => {
+  return props.required ? `${props.label}*` : props.label;
+});
 </script>
 
 <style lang="scss">

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

@@ -8,7 +8,13 @@
       :invalid="invalid"
       v-bind="labelProps"
     >
-      {{ `${label} (${format})` }}
+      <!-- @slot Custom input label -->
+      <slot
+        name="label"
+        v-bind="{ label }"
+      >
+        {{ requiredLabel }}
+      </slot>
     </wt-label>
     <div class="wt-timepicker__wrapper">
       <wt-time-input
@@ -65,6 +71,9 @@ export default {
     event: 'input',
   },
   props: {
+    /**
+     * Time value in seconds (not milliseconds!)
+     */
     value: {
       type: [String, Number],
       default: 0,
@@ -93,6 +102,11 @@ export default {
       type: Boolean,
       default: false,
     },
+    required: {
+      type: Boolean,
+      default: false,
+      description: 'Native input required attribute',
+    },
   },
 
   computed: {
@@ -154,6 +168,9 @@ export default {
         this.$emit('input', newValue);
       },
     },
+    requiredLabel() {
+      return this.required ? `${this.label} (${this.format})*` : `${this.label} (${this.format})`;
+    },
   },
 
   methods: {},