@saooti/octopus-sdk 37.0.5 → 37.0.7

package/src/components/form/ClassicDatePicker.vue

@@ -1,59 +1,55 @@
 <template>
   <DatePicker
     ref="datePicker"
-    :model-value="undefined!==range ? range : date"
-    :model-modifiers="{ range:undefined!==range }"
+    :model-value="undefined !== range ? range : date"
+    :model-modifiers="{ range: undefined !== range }"
     :mode="mode"
     color="green"
     is24hr
     :max-date="isMaxDate ? now : undefined"
     :min-date="isMinDate ? now : undefined"
     :columns="columnNumber"
-    :is-inline="columnNumber>1"
+    :is-inline="columnNumber > 1"
     :update-on-input="conditionEdit"
     :masks="isMask ? masks : undefined"
     :time-accuracy="timeAccuracy"
-    @update:modelValue="$emit('updateDate', $event)"
+    @update:model-value="$emit('updateDate', $event)"
   >
-    <template
-      v-if="templateClass"
-      #default="{ inputValue, inputEvents }"
-    >
-      <input
-        :class="templateClass"
-        :value="inputValue"
-        v-on="inputEvents"
-      >
+    <template v-if="templateClass" #default="{ inputValue, inputEvents }">
+      <input :class="templateClass" :value="inputValue" v-on="inputEvents" />
     </template>
   </DatePicker>
 </template>
 
 <script lang="ts">
-import dayjs from 'dayjs';
-import { DatePicker } from 'v-calendar';
-import { defineComponent } from 'vue';
+import dayjs from "dayjs";
+import { DatePicker } from "v-calendar";
+import { defineComponent } from "vue";
 export default defineComponent({
   components: {
     DatePicker,
   },
   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},
-    timeAccuracy:{default:2, type: Number},
-    templateClass:{default: undefined,  type: String},
-    mode:{default:"dateTime", type: String},
-    isMask:{default: false,  type: Boolean},
-    conditionEdit:{default: true,  type: Boolean},
+    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 },
+    timeAccuracy: { default: 2, type: Number },
+    templateClass: { default: undefined, type: String },
+    mode: { default: "dateTime", type: String },
+    isMask: { default: false, type: Boolean },
+    conditionEdit: { default: true, type: Boolean },
   },
 
-  emits: ['updateDate', 'update:date'],
+  emits: ["updateDate", "update:date"],
   data() {
     return {
       masks: {
-        input: 'YYYY-MM-DD',
+        input: "YYYY-MM-DD",
       },
     };
   },
@@ -61,29 +57,31 @@ export default defineComponent({
     now(): Date {
       return dayjs().toDate();
     },
-  }
-})
+  },
+});
 </script>
 <style lang="scss">
-@import '@scss/_variables.scss';
-@import 'v-calendar/dist/style.css';
-.octopus-app{
-  .vc-base-select select{
+@import "@scss/_variables.scss";
+@import "v-calendar/dist/style.css";
+.octopus-app {
+  .vc-base-select select {
     border: 0 !important;
   }
-	.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;
-	}
+  .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;
+  }
 }
-</style>
+</style>

package/src/components/form/ClassicInputText.vue

@@ -4,25 +4,22 @@
       <label
         class="form-label"
         :for="inputId"
-        :class="displayLabel?'':'d-none'"
-      >{{ label }}</label>
+        :class="displayLabel ? '' : 'd-none'"
+        >{{ label }}</label
+      >
       <template v-if="popover">
         <span
-          :id="'popover'+inputId"
+          :id="'popover' + inputId"
           role="button"
           class="saooti-help m-0"
           tabindex="0"
           :title="$t('Help')"
         />
-        <Popover
-          :target="'popover'+inputId"
-        >
+        <ClassicPopover :target="'popover' + inputId">
           <!-- eslint-disable vue/no-v-html -->
-          <div
-            v-html="popover"
-          />
+          <div v-html="popover" />
           <!-- eslint-enable -->
-        </Popover>
+        </ClassicPopover>
       </template>
     </div>
     <input
@@ -35,127 +32,131 @@
       :data-selenium="dataSelenium"
       :data-value="textValue"
       :maxlength="inputMaxLengthField"
-      :readonly="readonly?'readonly':undefined"
+      :readonly="readonly ? 'readonly' : undefined"
       :class="{
-        'border border-danger':forceError || (isError && (undefined!==textValue ||canBeNull)),
+        'border border-danger':
+          forceError || (isError && (undefined !== textValue || canBeNull)),
       }"
       :disabled="isDisable"
-    >
+    />
     <textarea
       v-else-if="isTextarea"
       :id="inputId"
       v-model="textValue"
       :data-selenium="dataSelenium"
       :placeholder="placeholder"
-      :readonly="readonly?'readonly':undefined"
+      :readonly="readonly ? 'readonly' : undefined"
       class="form-input"
       :class="{
-        'border border-danger':forceError ||(isError && (undefined!==textValue ||canBeNull))
+        'border border-danger':
+          forceError || (isError && (undefined !== textValue || canBeNull)),
       }"
       :disabled="isDisable"
     />
-    <Wysiwyg
+    <ClassicWysiwyg
       v-else
       v-model:content="textValue"
-      :error-description="forceError || (isError && (undefined!==textValue ||canBeNull))"
+      :error-description="
+        forceError || (isError && (undefined !== textValue || canBeNull))
+      "
       :is-disabled="isDisable"
     />
     <div class="d-flex justify-content-between">
-      <div
-        v-if="isWysiwyg"
-        class="h6"
-      >
-        {{ $t('Characters number calculated over HTML code') }}
+      <div v-if="isWysiwyg" class="h6">
+        {{ $t("Characters number calculated over HTML code") }}
       </div>
-      <div
-        v-else-if="''!==indicText"
-        class="text-indic"
-      >
+      <div v-else-if="'' !== indicText" class="text-indic">
         {{ indicText }}
       </div>
       <div
-        v-else-if="forceError|| (isError && (undefined!==textValue ||canBeNull))"
+        v-else-if="
+          forceError || (isError && (undefined !== textValue || canBeNull))
+        "
         class="text-danger"
       >
         {{ errorText }}
       </div>
       <p
-        v-if="0!==maxLength"
+        v-if="0 !== maxLength"
         class="counter-align-right"
         :class="{ 'text-danger': !valueLengthValid }"
       >
-        {{ countValue + ' / ' + maxLength }}
+        {{ countValue + " / " + maxLength }}
       </p>
     </div>
   </div>
 </template>
 <script lang="ts">
-import { defineAsyncComponent, defineComponent } from 'vue';
-const Popover = defineAsyncComponent(
-  () => import('../misc/Popover.vue')
+import { defineAsyncComponent, defineComponent } from "vue";
+const ClassicPopover = defineAsyncComponent(
+  () => import("../misc/ClassicPopover.vue"),
 );
-const Wysiwyg = defineAsyncComponent(
-  () => import('./Wysiwyg.vue')
+const ClassicWysiwyg = defineAsyncComponent(
+  () => import("./ClassicWysiwyg.vue"),
 );
 export default defineComponent({
-	components: {
-    Wysiwyg,
-    Popover
+  components: {
+    ClassicWysiwyg,
+    ClassicPopover,
   },
   props: {
     inputId: { default: "", type: String },
-		label: { default: "", type: String },
-		textInit: { default: undefined, type: String },
-		maxLength: { default: 0, type: Number },
-		errorText: { default: "", type: String },
-    isTextarea: {default: false, type: Boolean},
-		isWysiwyg: {default: false, type: Boolean},
-		regex: {default : undefined, type: RegExp},
-		canBeNull : {default: false, type: Boolean},
-		inputMaxLengthField : {default: undefined, type: Number},
-		errorVariable: {default: true, type:Boolean},
-    isDisable: {default: false, type: Boolean},
-    indicText:{ default: "", type: String },
-    dataSelenium:{ default: "", type: String },
-    placeholder:{ default: "", type: String },
-    popover: {default: undefined, type:String},
-    readonly: {default: false, type: Boolean},
-    forceError: {default: false, type: Boolean},
-    displayLabel:{default: true, type: Boolean},
+    label: { default: "", type: String },
+    textInit: { default: undefined, type: String },
+    maxLength: { default: 0, type: Number },
+    errorText: { default: "", type: String },
+    isTextarea: { default: false, type: Boolean },
+    isWysiwyg: { default: false, type: Boolean },
+    regex: { default: undefined, type: RegExp },
+    canBeNull: { default: false, type: Boolean },
+    inputMaxLengthField: { default: undefined, type: Number },
+    errorVariable: { default: true, type: Boolean },
+    isDisable: { default: false, type: Boolean },
+    indicText: { default: "", type: String },
+    dataSelenium: { default: "", type: String },
+    placeholder: { default: "", type: String },
+    popover: { default: undefined, type: String },
+    readonly: { default: false, type: Boolean },
+    forceError: { default: false, type: Boolean },
+    displayLabel: { default: true, type: Boolean },
   },
-  emits: ['update:textInit', 'update:errorVariable'],
-	data() {
+  emits: ["update:textInit", "update:errorVariable"],
+  data() {
     return {
-      textValue: undefined as string|undefined,
-		}
-	},
+      textValue: undefined as string | undefined,
+    };
+  },
   computed: {
-		isError(): boolean{
-			return !this.valueTrimValid || !this.valueLengthValid || !this.valueRegexValid;
-		},
+    isError(): boolean {
+      return (
+        !this.valueTrimValid || !this.valueLengthValid || !this.valueRegexValid
+      );
+    },
     countValue(): number {
-      if(this.textValue){
+      if (this.textValue) {
         return this.textValue.length;
       }
       return 0;
     },
     valueTrimValid(): boolean {
-			if(!this.canBeNull){
-        if(!this.textValue){
+      if (!this.canBeNull) {
+        if (!this.textValue) {
           return false;
         }
-				return 0 !== this.textValue.trim().length;
-			}
-			return true;
+        return 0 !== this.textValue.trim().length;
+      }
+      return true;
     },
     valueLengthValid(): boolean {
-			if(0===this.maxLength){return true}
+      if (0 === this.maxLength) {
+        return true;
+      }
       return this.maxLength >= this.countValue;
     },
-		valueRegexValid(): boolean {
+    valueRegexValid(): boolean {
       if (this.regex !== undefined) {
-        if(!this.textValue || ""===this.textValue){
-          if(this.canBeNull){
+        if (!this.textValue || "" === this.textValue) {
+          if (this.canBeNull) {
             return true;
           }
           return false;
@@ -166,38 +167,38 @@ export default defineComponent({
     },
   },
   watch: {
-		isError(){
-			this.$emit('update:errorVariable', this.isError);
-		},
-    textValue(){
-			if(this.textInit !== this.textValue){
-				this.$emit('update:textInit', this.textValue)
-			}
-		},
-		textInit(){
-			if(this.textInit !== this.textValue){
-				this.textValue =this.textInit;
-			}
-		}
+    isError() {
+      this.$emit("update:errorVariable", this.isError);
+    },
+    textValue() {
+      if (this.textInit !== this.textValue) {
+        this.$emit("update:textInit", this.textValue);
+      }
+    },
+    textInit() {
+      if (this.textInit !== this.textValue) {
+        this.textValue = this.textInit;
+      }
+    },
   },
-	mounted(){
-		this.textValue = this.textInit;
-    if(this.errorVariable !== this.isError){
-      this.$emit('update:errorVariable', this.isError);
+  mounted() {
+    this.textValue = this.textInit;
+    if (this.errorVariable !== this.isError) {
+      this.$emit("update:errorVariable", this.isError);
     }
-	}
+  },
 });
 </script>
 <style lang="scss">
-.octopus-app .classic-input-text{
-  .text-indic{
+.octopus-app .classic-input-text {
+  .text-indic {
     font-style: italic;
     font-size: 0.7rem;
     color: #666;
   }
-  textarea{
-		height: auto;
-		min-height: 120px;
-	}
+  textarea {
+    height: auto;
+    min-height: 120px;
+  }
 }
-</style>
+</style>

package/src/components/form/ClassicLoading.vue

@@ -3,30 +3,27 @@
     v-if="loadingText"
     class="d-flex align-items-center justify-content-center"
   >
-    <Spinner class="me-3" />
+    <ClassicSpinner class="me-3" />
     <div class="h3 mt-2">
       {{ loadingText }}
     </div>
   </div>
-  <div
-    v-else-if="errorText"
-    class="text-center text-danger"
-  >
+  <div v-else-if="errorText" class="text-center text-danger">
     <h3>{{ errorText }}</h3>
   </div>
 </template>
 
 <script lang="ts">
-import Spinner from '../misc/Spinner.vue';
-import { defineComponent } from 'vue';
+import ClassicSpinner from "../misc/ClassicSpinner.vue";
+import { defineComponent } from "vue";
 export default defineComponent({
   name: "ClassicLoading",
-  components:{
-    Spinner
+  components: {
+    ClassicSpinner,
   },
   props: {
-    loadingText: { default: undefined, type: String},
-    errorText: { default: undefined, type: String},
-  }
-})
-</script>
+    loadingText: { default: undefined, type: String },
+    errorText: { default: undefined, type: String },
+  },
+});
+</script>