@saooti/octopus-sdk 36.0.44 → 36.0.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "36.0.44",
+  "version": "36.0.46",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/components/display/list/SwiperList.vue

@@ -2,63 +2,62 @@
   <swiper
     :slides-per-view="numberItem"
     :space-between="0"
-    :loop="listObject.length>=numberItem"
+    :loop="listObject.length >= numberItem"
     :navigation="true"
     :modules="modules"
   >
-    <swiper-slide
-      v-for="(obj, index) in listObject"
-      :key="obj"
-    >
-      <slot
-        name="octopusSlide"
-        :option="obj"
-        :index="index"
-      />
+    <swiper-slide v-for="(obj, index) in listObject" :key="obj">
+      <slot name="octopusSlide" :option="obj" :index="index" />
     </swiper-slide>
   </swiper>
 </template>
 
 <script lang="ts">
-import domHelper from '../../../helper/dom';
-import { state } from '../../../stores/ParamSdkStore';
+import domHelper from "../../../helper/dom";
+import { state } from "../../../stores/ParamSdkStore";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import { Navigation } from "swiper";
+import { Navigation } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/navigation";
-import { defineComponent } from 'vue'
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'SwiperList',
-  
+  name: "SwiperList",
+
   components: {
     Swiper,
     SwiperSlide,
   },
 
   props: {
-    listObject: { default: ()=>[], type: Array as ()=> Array<unknown>},
+    listObject: { default: () => [], type: Array as () => Array<unknown> },
+    sizeItemOverload: { default: undefined, type: Number },
   },
 
   data() {
     return {
       modules: [Navigation],
-      numberItem: 5 as number
+      numberItem: 5 as number,
     };
   },
   computed: {
     sizeItem(): number {
+      if (this.sizeItemOverload) {
+        return this.sizeItemOverload;
+      }
       if (window.innerWidth <= 450) {
         return 12.5;
       }
-      return state.generalParameters.podcastItem ? state.generalParameters.podcastItem: 13.5;
+      return state.generalParameters.podcastItem
+        ? state.generalParameters.podcastItem
+        : 13.5;
     },
   },
-  
+
   created() {
-    window.addEventListener('resize', this.handleResize);
+    window.addEventListener("resize", this.handleResize);
   },
   unmounted() {
-    window.removeEventListener('resize', this.handleResize);
+    window.removeEventListener("resize", this.handleResize);
   },
 
   mounted() {
@@ -68,29 +67,30 @@ export default defineComponent({
     handleResize(): void {
       if (!this.$el) return;
       const width = (this.$el as HTMLElement).offsetWidth - 95;
-      const sixteen = domHelper.convertRemToPixels(this.sizeItem+ 0.5);
+      const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.5);
       this.numberItem = Math.max(1, Math.floor(width / sixteen));
     },
   },
-})
+});
 </script>
 <style lang="scss">
-@import '@scss/_variables.scss';
+@import "@scss/_variables.scss";
 .swiper {
   width: 100%;
   height: 100%;
 }
-.swiper-button-next, .swiper-button-prev{
+.swiper-button-next,
+.swiper-button-prev {
   color: $octopus-primary-color !important;
   height: 100%;
   top: 0;
   bottom: 0;
   margin: 0;
 }
-.swiper-button-next{
+.swiper-button-next {
   right: 0;
 }
-.swiper-button-prev{
+.swiper-button-prev {
   left: 0;
 }
 /* .swiper-slide-active{
@@ -102,7 +102,7 @@ export default defineComponent({
 .swiper-slide-next{
   padding-right:27px;
 } */
-.swiper-button-lock{
+.swiper-button-lock {
   display: flex;
 }
 .swiper-slide {
@@ -110,4 +110,4 @@ export default defineComponent({
   justify-content: center;
   align-items: center;
 }
-</style>
+</style>

package/src/components/form/ClassicDatePicker.vue

@@ -17,6 +17,7 @@
     :inline="columnNumber > 1"
     :enable-time-picker="!isTimePicker ?displayTimePicker : undefined"
     :time-picker-inline="!isTimePicker ? true : undefined"
+    :aria-labels="ariaLabels"
     @update:model-value="$emit('updateDate', $event)"
   />
 </template>
@@ -50,6 +51,12 @@ export default defineComponent({
     };
   },
   computed: {
+    ariaLabels(){
+      return {
+        input: this.date ? this.formatDate(this.date) : undefined,
+        day : (value: {value: Date}) => {return this.formatDate(value.value);}
+      }
+    },
     modelVal(){
       return this.time ?? this.range ?? this.date;
     },
@@ -70,6 +77,11 @@ export default defineComponent({
     now(): Date {
       return dayjs().toDate();
     },
+  },
+  methods:{
+    formatDate(value: Date): string{
+      return value.getDay()+' '+value.getDate()+'/'+value.getMonth()+'/'+value.getFullYear();
+    }
   }
 })
 </script>