@saooti/octopus-sdk 36.0.43 → 36.0.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "36.0.43",
+  "version": "36.0.45",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -25,6 +25,7 @@
     "@tiptap/vue-3": "^2.0.3",
     "@vue/cli": "^5.0.8",
     "@vue/compat": "^3.3.4",
+    "@vuepic/vue-datepicker": "^5.4.0",
     "autoprefixer": "^10.4.14",
     "axios": "^1.4.0",
     "dayjs": "^1.11.8",
@@ -36,9 +37,8 @@
     "qrcode.vue": "^3.4.0",
     "sass": "^1.63.4",
     "sonarqube-scanner": "^3.0.0",
-    "swiper": "^9.3.2",
-    "v-calendar": "^3.0.3",
-    "vite": "^4.3.9",
+    "swiper": "^10.0.4",
+    "vite": "^4.4.4",
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
     "vue-recaptcha": "^2.0.3",

package/src/components/display/filter/DateFilter.vue

@@ -15,8 +15,11 @@
       />
       <ClassicDatePicker
         :date="fromDate"
-        template-class="mx-2 px-2 py-1 border rounded focus:border-blue-300"
-        @updateDate="fromDate=$event;updateFromDate"
+        class="mx-2"
+        @update-date="
+          fromDate = $event;
+          updateFromDate();
+        "
       />
     </div>
     <div class="d-flex align-items-center">
@@ -28,8 +31,11 @@
       />
       <ClassicDatePicker
         :date="toDate"
-        template-class="ms-2 px-2 py-1 border rounded focus:border-blue-300"
-        @updateDate="toDate=$event;updateToDate"
+        class="mx-2"
+        @update-date="
+          toDate = $event;
+          updateToDate();
+        "
       />
     </div>
   </div>

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

@@ -1,61 +1,72 @@
 <template>
-  <DatePicker
-    ref="datePicker"
-    :model-value="undefined!==range ? range : date"
-    :mode="mode"
-    color="green"
-    is24hr
-    :is-range="undefined!==range"
-    :max-date="isMaxDate ? now : undefined"
-    :min-date="isMinDate ? now : undefined"
-    :columns="columnNumber"
-    :is-inline="columnNumber>1"
-    :update-on-input="conditionEdit"
-    :masks="isMask ? masks : undefined"
-    @update:modelValue="$emit('updateDate', $event)"
-  >
-    <template
-      v-if="templateClass"
-      #default="{ inputValue, inputEvents }"
-    >
-      <input
-        :class="templateClass"
-        :value="inputValue"
-        v-on="inputEvents"
-      >
-    </template>
-  </DatePicker>
+  <VueDatePicker
+    :model-value="modelVal"
+    :time-picker="isTimePicker"
+    :input-class-name="templateClass"
+    :clearable="false"
+    :readonly="readonly"
+    :teleport="useTeleport"
+    :locale="formatLocale"
+    :format="format"
+    :auto-apply="true"
+    :enable-seconds="displaySeconds"
+    :max-date="isMaxDate && !isTimePicker ? now : undefined"
+    :min-date="isMinDate && !isTimePicker ? now : undefined"
+    :range="undefined !== range"
+    :multi-calendars="columnNumber>1 ? columnNumber : false"
+    :inline="columnNumber > 1"
+    :enable-time-picker="!isTimePicker ?displayTimePicker : undefined"
+    :time-picker-inline="!isTimePicker ? true : undefined"
+    @update:model-value="$emit('updateDate', $event)"
+  />
 </template>
 
 <script lang="ts">
-import dayjs from 'dayjs';
-import { DatePicker } from 'v-calendar';
-import { defineComponent } from 'vue';
+import dayjs from "dayjs";
+import VueDatePicker from '@vuepic/vue-datepicker';
+import { defineComponent } from "vue";
 export default defineComponent({
   components: {
-    DatePicker,
+    VueDatePicker,
   },
   props: {
-    date: { default: undefined, type: Date},
-    range: {default: undefined, type: Object as ()=>{ start: Date; end: Date }},
-    isMaxDate:{ default: false, type:  Boolean},
-    isMinDate:{ default: false, type:  Boolean},
-    columnNumber:{default:1, type: Number},
-    templateClass:{default: undefined,  type: String},
-    mode:{default:"dateTime", type: String},
-    isMask:{default: false,  type: Boolean},
-    conditionEdit:{default: true,  type: Boolean},
+    time: { default:undefined, type: Object as () => {hours:number, minutes:number, seconds:number} },
+    date: { default: undefined, type: Date },
+    range: {default: undefined,type: Array as () => Array<Date>},
+    isMaxDate: { default: false, type: Boolean },
+    isMinDate: { default: false, type: Boolean },
+    columnNumber: { default: 1, type: Number },
+    displaySeconds: { default: false, type: Boolean },
+    displayTimePicker:{ default: true, type: Boolean },
+    isTimePicker:{ default: false, type: Boolean },
+    useTeleport:{ default: false, type: Boolean },
+    templateClass: { default: undefined, type: String },
+    readonly: { default: false, type: Boolean },
   },
 
   emits: ['updateDate', 'update:date'],
   data() {
     return {
-      masks: {
-        input: 'YYYY-MM-DD',
-      },
     };
   },
   computed: {
+    modelVal(){
+      return this.time ?? this.range ?? this.date;
+    },
+    formatLocale(){
+      return this.$i18n.locale;
+    },
+    format(){
+      let timeString = '';
+      if(this.displayTimePicker || this.isTimePicker){
+        timeString ='HH:mm';
+        if(this.displaySeconds){
+          timeString ='HH:mm:ss';
+        } 
+      }
+      const dayString = this.isTimePicker ? timeString : 'dd/MM/yyyy '+timeString;
+      return this.range ? dayString+' - '+dayString : dayString;
+    },
     now(): Date {
       return dayjs().toDate();
     },
@@ -63,22 +74,9 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-@import '@scss/_variables.scss';
-@import 'v-calendar/dist/style.css';
-.octopus-app{
-	.vc-select select{
-		padding: 0 !important;
-	}
-	.vc-date{
-		.vc-month,.vc-day,.vc-year{
-			color: $octopus-primary-color !important;
-		}
-	}
-	.vc-highlight{
-		background-color: $octopus-primary-color !important;
-	}
-	.vc-select select:focus{
-		border-color: $octopus-primary-color !important;
-	}
+@import '@vuepic/vue-datepicker/dist/main.css';
+.dp__theme_light {
+   --dp-primary-color: #1a8658;
+   --dp-time-font-size: 1rem;
 }
 </style>