@saooti/octopus-sdk 39.3.14 → 39.3.15

package/package.json

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

package/src/components/display/categories/CategoryChooser.vue

@@ -4,9 +4,9 @@
     ref="selectCategory"
     :option-chosen="model"
     option-label="name"
-    :displayLabel="displayLabel"
+    :display-label="displayLabel"
     :label="label ?? $t('By category')"
-    :textDanger="textDanger"
+    :text-danger="textDanger"
     :placeholder="$t('Type string to filter by categories')"
     :max-element="maxElement"
     :in-modal="inModal"

package/src/components/display/categories/CategoryFilter.vue

@@ -39,9 +39,9 @@
           <div class="mx-1">:</div>
           <RubriqueChooser
             v-if="getRubriquesLength(filter.rubriquageId)"
+            :id="'rubrique-chooser'+filter.rubriquageId"
             class="ms-2 multiselect-transparent multiselect-white"
             :multiple="false"
-            :id="'rubrique-chooser'+filter.rubriquageId"
             :rubrique-selected="filter.rubriqueId"
             :all-rubriques="getRubriques(filter.rubriquageId)"
             width="auto"

package/src/components/display/comments/modal/EditCommentModal.vue

@@ -26,7 +26,7 @@
           :error-text="$t('Please provide a comment')"
           :is-textarea="true"
           :is-emoji-picker="true"
-          emoji-relative-class="octopus-modal-dialog"
+          emoji-relative-class="octopus-modal"
           :focus="true"
         />
         <ClassicSelect

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

@@ -11,6 +11,8 @@
         :label="1 === index ? $t('From the :') : $t('To the :')"
       />
       <ClassicDatePicker
+        :id="'date-filter-chooser'+index"
+        :label="1 === index ? $t('From the :') : $t('To the :')"
         :date="internDates[index - 1]"
         class="mx-2"
         @update-date="updateDate(index - 1, $event)"

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

@@ -1,7 +1,8 @@
 <template>
   <div class="d-flex align-items-center">
-    <div>{{ $t("Advertising") + " :" }}</div>
+    <label for="monetizable-filter-select">{{ $t("Advertising") + " :" }}</label>
     <select
+      id="monetizable-filter-select"
       ref="select"
       v-model="monetisableForVmodel"
       :title="$t('Advertising')"

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

@@ -20,9 +20,9 @@
       </div>
       <RubriqueChooser
         v-if="getRubriquesLength(rubriquageId)"
+        :id="'rubrique-chooser'+rubriquageId"
         class="ms-2"
         :multiple="false"
-        :id="'rubrique-chooser'+rubriquageId"
         :rubrique-selected="
           0 !== rubriqueIdSelected ? rubriqueIdSelected : undefined
         "

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

@@ -3,8 +3,8 @@
     :text-init="sort"
     id-radio="sort-radio"
     :options="optionsArray"
-    :radioLabel="$t('Sort')"
-    classLabel="text-primary mb-2"
+    :radio-label="$t('Sort')"
+    class-label="text-primary mb-2"
     @update:text-init="$emit('update:sort', $event)"
   />
 </template>

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

@@ -13,6 +13,7 @@
         </div>
         <PaginateParams
           v-if="!isPhone && !justSizeChosen && totalCount > 0"
+          :id="id"
           :rows-per-page="rowsPerPage"
           @update:rows-per-page="changeSize"
         />
@@ -21,6 +22,7 @@
     <slot name="list" />
     <PaginateSection
       v-if="!isPhone && !justSizeChosen && totalCount > 0"
+      :id="id"
       :style="playerResponsive ? 'bottom:' + playerHeight : ''"
       :first="first"
       :rows-per-page="rowsPerPage"

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

@@ -1,9 +1,9 @@
 <template>
   <div class="paginate">
     <div class="d-flex align-items-center justify-content-center">
-      <label for="rows-per-page-select">{{ $t("Items per page :") }}</label>
+      <label :for="'rows-per-page-select'+ id">{{ $t("Items per page :") }}</label>
       <select
-        id="rows-per-page-select"
+        :id="'rows-per-page-select'+id"
         :value="rowsPerPage"
         class="c-hand p-1 mx-2"
         @change="$emit('update:rowsPerPage', parseInt($event.target.value, 10))"
@@ -26,6 +26,7 @@ export default defineComponent({
 
   props: {
     rowsPerPage: { default: 0, type: Number },
+    id: { default: "", type: String },
   },
 
   emits: ["update:rowsPerPage"],

package/src/components/display/organisation/OrganisationChooserLight.vue

@@ -5,6 +5,7 @@
     :style="{ width: width }"
   >
     <select
+      id="organisation-chooser-footer"
       v-model="actual"
       :title="$t('select productor')"
       class="c-hand w-100 transparent"

package/src/components/display/rubriques/RubriqueChooser.vue

@@ -4,9 +4,9 @@
     ref="selectRubrique"
     :option-chosen="model"
     option-label="name"
-    :displayLabel="displayLabel"
+    :display-label="displayLabel"
     :label="label ?? $t('By rubric')"
-    :textDanger="textDanger"
+    :text-danger="textDanger"
     :placeholder="$t('Type string to filter by categories')"
     :max-element="maxElement"
     :multiple="multiple"

package/src/components/form/ClassicDatePicker.vue

@@ -1,6 +1,13 @@
 <template>
   <div ref="divContainer" tabindex="0">
+    
+    <label
+      v-if="label && !range"
+      class="form-label"
+      :for="'dp-input-'+id"
+      :class="displayLabel ? '' : 'd-none'">{{ label }}</label>
     <VueDatePicker
+      :uid="id"
       :model-value="modelVal"
       :time-picker="isTimePicker"
       :time-picker-inline="isTimePicker && timePickerInline"
@@ -43,6 +50,7 @@ export default defineComponent({
     ClockOutlineIcon,
   },
   props: {
+    id:{ default: undefined, type: String },
     time: {
       default: undefined,
       type: Object as () => { hours: number; minutes: number; seconds: number },
@@ -72,6 +80,8 @@ export default defineComponent({
     customPosition: { default: null, type: Function },
     isInline: { default: false, type: Boolean },
     timePickerInline: { default: false, type: Boolean },
+    label: { default: undefined, type: String },
+    displayLabel: { default: false, type: Boolean },
   },
 
   emits: ["updateDate", "update:date"],

package/src/components/form/ClassicInputText.vue

@@ -5,11 +5,18 @@
   >
     <div class="d-flex align-items-center">
       <label
+        v-if="!isWysiwyg"
         class="form-label"
         :for="inputId"
         :class="displayLabel ? '' : 'd-none'"
         >{{ label }}</label
       >
+      <div
+        v-else
+        class="form-label"
+        :class="displayLabel ? '' : 'd-none'"
+        >{{ label }}</div
+      >
       <template v-if="popover">
         <button
           :id="'popover' + inputId"

package/src/components/form/ClassicMultiselect.vue

@@ -11,8 +11,8 @@
       label
     }}</label>
     <vSelect
-      :id="id"
       v-model="optionSelected"
+      :input-id="id"
       :label="optionLabel"
       :multiple="multiple"
       :options="options"

package/src/components/form/ClassicRadioLabel.vue

@@ -2,12 +2,12 @@
   <div class="d-flex flex-column">
     <div v-if="radioLabel" :class="classLabel">{{ radioLabel }}</div>
     <ClassicRadio
-      :idRadio="idRadio"
-      :isDisabled="isDisabled"
+      :id-radio="idRadio"
+      :is-disabled="isDisabled"
       :options="options"
-      :textInit="textInit"
-      :isColumn="isColumn"
-      @update:textInit="$emit('update:textInit', $event)"
+      :text-init="textInit"
+      :is-column="isColumn"
+      @update:text-init="$emit('update:textInit', $event)"
     />
   </div>
 </template>
@@ -17,6 +17,9 @@ import { defineComponent } from "vue";
 import ClassicRadio from "./ClassicRadio.vue";
 export default defineComponent({
   name: "ClassicRadioLabel",
+  components:{
+    ClassicRadio
+  },
 
   props: {
     idRadio: { default: "", type: String },
@@ -30,9 +33,6 @@ export default defineComponent({
     radioLabel: { default: undefined, type: String },
     classLabel: { default: "form-label", type: String },
   },
-  emits: ["update:textInit"],
-  components:{
-    ClassicRadio
-  }
+  emits: ["update:textInit"]
 });
 </script>

package/src/components/misc/ClassicPopover.vue

@@ -51,6 +51,7 @@ export default defineComponent({
       targetElement: null as HTMLElement | null,
       overPopover: false as boolean,
       isTabAction: false as boolean,
+      maxHeight: '80vh' as string
     };
   },
   computed: {
@@ -58,7 +59,7 @@ export default defineComponent({
       return "popover" + this.target;
     },
     positionInlineStyle(): string {
-      return `left: ${this.posX}px; top: ${this.posY}px;`;
+      return `left: ${this.posX}px; top: ${this.posY}px;max-height:${this.maxHeight}`;
     },
   },
   watch: {
@@ -147,6 +148,7 @@ export default defineComponent({
       let parentRight = 0;
       let parentTop = 0;
       let parentScrollTop = 0;
+      let parentBottom = 0;
       if (this.relativeClass) {
         const modalBody = document.getElementsByClassName(
           this.relativeClass,
@@ -162,6 +164,7 @@ export default defineComponent({
         parentRight = modalBodyRect.right;
         parentTop = modalBodyRect.top;
         parentScrollTop = modalBody.scrollTop;
+        parentBottom=modalBodyRect.bottom;
       }
       const rectElement = (e.target as HTMLElement).getBoundingClientRect();
       (this.$refs.popover as HTMLElement).style.display = "block";
@@ -184,6 +187,7 @@ export default defineComponent({
         parentTop +
         (this.isFixed ? 0 : window.scrollY) +
         yGap;
+      this.maxHeight = this.relativeClass ? (parentBottom- this.posY -parentTop) + "px":'80vh';
     },
     clearDataBlur(e: FocusEvent) {
       if (this.isTabAction) {
@@ -253,7 +257,6 @@ export default defineComponent({
   border: 1px solid #ccc;
   border-radius: octopusVariables.$octopus-borderradius;
   position: absolute;
-  max-height: 80vh;
   overflow: auto;
   &.popover-z-index {
     z-index: 9999;

package/src/components/misc/modal/ClassicModal.vue

@@ -77,6 +77,8 @@ export default defineComponent({
   &.octopus-only-header-modal::backdrop{
     opacity: 0.1;
   }
+  display: flex;
+  flex-direction: column;
   padding: 0;
   border: 0;
   border-radius: octopusVariables.$octopus-borderradius;
@@ -84,6 +86,8 @@ export default defineComponent({
   color: #353535 !important;
   margin-top: 2rem;
   width: 80vw;
+  max-height: 90vh;
+  overflow: hidden;
   @media (max-width: 500px) {
     width: 95vw;
   }