@webitel/ui-sdk 24.12.23 → 24.12.24

package/package.json

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

package/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">

package/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: {},