@saooti/octopus-sdk 40.2.19 → 41.0.0

package/src/components/form/ClassicInputText.vue

@@ -10,12 +10,12 @@
         :class="[classLabel, displayLabel ? '' : 'd-none']"
         :for="isWysiwyg ? '': inputId"
         >{{ label }}
-        <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="$t('Mandatory input')"/>
+        <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="t('Mandatory input')"/>
       </component>
       <template v-if="popover">
         <button
           :id="'popover' + inputId"
-          :title="$t('Help')"
+          :title="t('Help')"
           class="btn-transparent"
         >
           <HelpCircleIcon :size="30" />
@@ -51,7 +51,7 @@
       }"
       :disabled="isDisable"
       :required="!canBeNull"
-      :autocomplete="autocomplete"
+      :autocomplete="autocompleteType"
     />
     <textarea
       v-else-if="isTextarea"
@@ -87,7 +87,7 @@
         @emoji-selected="addEmojiSelected"
       />
       <div v-if="isWysiwyg" class="h6">
-        {{ $t("Characters number calculated over HTML code") }}
+        {{ t("Characters number calculated over HTML code") }}
       </div>
       <div v-else-if="'' !== indicText" class="text-indic">
         {{ indicText }}
@@ -110,10 +110,11 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import AsteriskIcon from "vue-material-design-icons/Asterisk.vue";
 import HelpCircleIcon from "vue-material-design-icons/HelpCircle.vue";
-import { defineAsyncComponent, defineComponent } from "vue";
+import { computed, defineAsyncComponent, onMounted, Ref, ref, useTemplateRef, watch } from "vue";
+import { useI18n } from "vue-i18n";
 const ClassicPopover = defineAsyncComponent(
   () => import("../misc/ClassicPopover.vue"),
 );
@@ -123,122 +124,117 @@ const ClassicWysiwyg = defineAsyncComponent(
 const ClassicEmojiPicker = defineAsyncComponent(
   () => import("./ClassicEmojiPicker.vue"),
 );
-export default defineComponent({
-  components: {
-    ClassicWysiwyg,
-    ClassicPopover,
-    ClassicEmojiPicker,
-    HelpCircleIcon,
-    AsteriskIcon
-  },
-  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 },
-    focus: { default: true, type: Boolean },
-    isEmojiPicker: { default: false, type: Boolean },
-    popoverRelativeClass: { default: undefined, type: String },
-    forceReload: { default: false, type: Boolean },
-    typeInput: { default: "text", type: String },
-    displayRequired: { default: false, type: Boolean },
-    classLabel: { default: "form-label", type: String },
-    showField: { default: true, type: Boolean },
-    autocomplete: { default: "off", type: String },
-  },
-  emits: ["update:textInit", "update:errorVariable"],
-  data() {
-    return {
-      textValue: undefined as string | undefined,
-    };
-  },
-  computed: {
-    isError(): boolean {
-      return (
-        !this.valueTrimValid || !this.valueLengthValid || !this.valueRegexValid
-      );
-    },
-    countValue(): number {
-      if (this.textValue) {
-        return this.textValue.length;
-      }
-      return 0;
-    },
-    valueTrimValid(): boolean {
-      if (!this.canBeNull) {
-        if (!this.textValue) {
-          return false;
-        }
-        return 0 !== this.textValue.trim().length;
-      }
-      return true;
-    },
-    valueLengthValid(): boolean {
-      if (0 === this.maxLength) {
-        return true;
-      }
-      return this.maxLength >= this.countValue;
-    },
-    valueRegexValid(): boolean {
-      if (this.regex === undefined) {
-        return true;
-      }
-      if (!this.textValue || "" === this.textValue) {
-        return this.canBeNull;
-      }
-      return this.textValue.match(this.regex) !== null;
-    },
-  },
-  watch: {
-    forceReload() {
-      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() {
-    if (this.focus) {
-      (this.$refs.focusElement as HTMLElement)?.focus();
-    }
-    this.textValue = this.textInit;
-    if (this.errorVariable !== this.isError) {
-      this.$emit("update:errorVariable", this.isError);
+
+//Props 
+const props = defineProps({
+  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 },
+  focus: { default: true, type: Boolean },
+  isEmojiPicker: { default: false, type: Boolean },
+  popoverRelativeClass: { default: undefined, type: String },
+  forceReload: { default: false, type: Boolean },
+  typeInput: { default: "text", type: String },
+  displayRequired: { default: false, type: Boolean },
+  classLabel: { default: "form-label", type: String },
+  showField: { default: true, type: Boolean },
+  autocompleteType: { default: "off", type: String },
+})
+
+//Emits
+const emit = defineEmits(["update:textInit", "update:errorVariable"]);
+
+//Data 
+const textValue : Ref<string | undefined>= ref(undefined);
+const focusElementRef = useTemplateRef('focusElement');
+
+//Composables 
+const { t } = useI18n();
+
+//Computed
+const isError = computed(() => !valueTrimValid.value || !valueLengthValid.value || !valueRegexValid.value);
+const countValue = computed(() => {
+  if (textValue.value) {
+    return textValue.value.length;
+  }
+  return 0;
+});
+const valueTrimValid = computed(() => {
+  if (!props.canBeNull) {
+    if (!textValue.value) {
+      return false;
     }
-  },
-  methods: {
-    addEmojiSelected(emoji: string) {
-      this.textValue = (this.textValue ?? "") + emoji;
-    },
-  },
+    return 0 !== textValue.value.trim().length;
+  }
+  return true;
+});
+const valueLengthValid = computed(() => {
+  if (0 === props.maxLength) {
+    return true;
+  }
+  return props.maxLength >= countValue.value;
+});
+const valueRegexValid = computed(() => {
+  if (props.regex === undefined) {
+    return true;
+  }
+  if (!textValue.value || "" === textValue.value) {
+    return props.canBeNull;
+  }
+  return textValue.value.match(props.regex) !== null;
+});
+  
+//Watch
+watch(()=>props.forceReload, () => {
+  if (props.textInit !== textValue.value) {
+    textValue.value = props.textInit;
+  }
+});
+watch(isError, () => {
+  emit("update:errorVariable", isError.value);
 });
+watch(textValue, () => {
+  if (props.textInit !== textValue.value) {
+    emit("update:textInit", textValue.value);
+  }
+});
+watch(()=>props.textInit, () => {
+  if (props.textInit !== textValue.value) {
+    textValue.value = props.textInit;
+  }
+});
+
+
+onMounted(()=>{
+  if (props.focus) {
+    (focusElementRef?.value as HTMLElement)?.focus();
+  }
+  textValue.value = props.textInit;
+  if (props.errorVariable !== isError.value) {
+    emit("update:errorVariable", isError.value);
+  }
+})
+ 
+//Methods
+function addEmojiSelected(emoji: string) {
+  textValue.value = (textValue.value ?? "") + emoji;
+}
 </script>
 <style lang="scss">
 .octopus-app .classic-input-text {

package/src/components/form/ClassicLoading.vue

@@ -13,17 +13,12 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ClassicSpinner from "../misc/ClassicSpinner.vue";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "ClassicLoading",
-  components: {
-    ClassicSpinner,
-  },
-  props: {
-    loadingText: { default: undefined, type: String },
-    errorText: { default: undefined, type: String },
-  },
-});
+
+//Props 
+defineProps({
+  loadingText: { default: undefined, type: String },
+  errorText: { default: undefined, type: String },
+})
 </script>

package/src/components/form/ClassicMultiselect.vue

@@ -5,12 +5,12 @@
       'multiselect-no-deselect': noDeselect,
       'form-margin': displayLabel,
     }"
-    :style="{ width: width }"
+    :style="{ width: width, height: height }"
   >
     <label :class="displayLabel ? '' : 'd-none'" :for="id" class="form-label">{{
       label
     }}
-    <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="$t('Mandatory input')"/>
+    <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="t('Mandatory input')"/>
   </label>
     <vSelect
       v-model="optionSelected"
@@ -28,6 +28,7 @@
       "
       :filter="fakeSearch"
       :selectable="() => !maxOptionsSelected"
+      :style="{height: height }"
       :class="{ 'border border-danger': textDanger?.length }"
       @open="onSearch"
       @search="onSearch"
@@ -46,14 +47,14 @@
       </template>
       <template #no-options="{ searching }">
         <span v-if="searching">{{
-          $t("No elements found. Consider changing the search query.")
+          t("No elements found. Consider changing the search query.")
         }}</span>
-        <span v-else>{{ $t("List is empty") }}</span>
+        <span v-else>{{ t("List is empty") }}</span>
       </template>
       <template #list-footer>
         <div v-if="remainingElements" class="vs__dropdown-option">
           {{
-            $t(
+            t(
               "Count more elements matched your query, please make a more specific search.",
               { count: remainingElements },
             )
@@ -62,7 +63,7 @@
       </template>
       <template #list-header>
         <div v-if="maxOptionsSelected" class="vs__dropdown-option">
-          {{ $t("Multiselect max options", { max: maxOptions }) }}
+          {{ t("Multiselect max options", { max: maxOptions }) }}
         </div>
       </template>
       <template #open-indicator="{ attributes }">
@@ -75,120 +76,116 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { computed, ref, Ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import AsteriskIcon from "vue-material-design-icons/Asterisk.vue";
 import ChevronDownIcon from "vue-material-design-icons/ChevronDown.vue";
 import vSelect from "vue-select";
-export default {
-  components: {
-    vSelect,
-    ChevronDownIcon,
-    AsteriskIcon
-  },
-  props: {
-    id: { default: "", type: String },
-    label: { default: "", type: String },
-    placeholder: { default: "", type: String },
-    optionLabel: { default: "", type: String },
-    inModal: { default: false, type: Boolean },
-    multiple: { default: false, type: Boolean },
-    isDisabled: { default: false, type: Boolean },
-    width: { default: "100%", type: String },
-    maxElement: { default: 50, type: Number },
-    minSearchLength: { default: 3, type: Number },
-    optionChosen: { default: undefined, type: Object as () => unknown },
-    noDeselect: { default: true, type: Boolean },
-    optionCustomTemplating: { default: "", type: String },
-    optionSelectedCustomTemplating: { default: "", type: String },
-    displayLabel: { default: false, type: Boolean },
-    maxOptions: { default: null, type: Number },
-    allowEmpty: { default: true, type: Boolean },
-    textDanger :{ default: undefined, type: String },
-    displayRequired: { default: false, type: Boolean },
-  },
-
-  emits: ["onSearch", "selected", "onClose"],
-
-  data() {
-    return {
-      optionSelected: undefined as unknown,
-      options: [] as Array<unknown>,
-      remainingElements: 0 as number,
-      isLoading: false as boolean,
-      nbOptionsSelected: 0 as number,
-      searchInput: "" as string,
-    };
-  },
-  computed: {
-    maxOptionsSelected(): boolean {
-      if (this.maxOptions !== null && this.multiple) {
-        return (
-          (this.optionSelected as Array<unknown>).length >= this.maxOptions
-        );
-      }
-      return false;
-    },
-  },
-
-  watch: {
-    optionChosen: {
-      deep: true,
-      immediate: true,
-      handler() {
-        this.optionSelected = this.optionChosen;
-      },
-    },
-    optionSelected: {
-      deep: true,
-      handler() {
-        if (this.noDeselect || null !== this.optionSelected) {
-          return;
-        }
-        this.$emit("selected", undefined);
-      },
-    },
-  },
-
-  methods: {
-    fakeSearch(): Array<unknown> {
-      return this.options;
-    },
-    onSearch(search?: string): void {
-      if (search && search.length < this.minSearchLength) {
-        return;
-      } else if (search) {
-        this.searchInput = search;
-      }
-      this.isLoading = true;
-      this.$emit("onSearch", search);
-    },
-    onClose() {
-      this.$emit("onClose", this.searchInput);
-      this.searchInput = "";
-    },
-    afterSearch(optionsFetched: Array<unknown>, count: number): void {
-      this.options = optionsFetched;
-      this.remainingElements = Math.max(0, count - this.maxElement);
-      this.isLoading = false;
-    },
-    onOptionSelected(optionSelected: unknown): void {
-      this.$emit("selected", optionSelected);
-    },
-    onOptionDeselect(event: unknown): void {
-      if (!this.multiple) {
-        return;
-      }
-      if (
-        !this.allowEmpty &&
-        0 === (this.optionSelected as Array<unknown>).length
-      ) {
-        (this.optionSelected as Array<unknown>).push(event);
-        return;
-      }
-      this.$emit("selected", this.optionSelected);
-    },
-  },
-};
+
+
+//Props 
+const props = defineProps({
+  id: { default: "", type: String },
+  label: { default: "", type: String },
+  placeholder: { default: "", type: String },
+  optionLabel: { default: "", type: String },
+  inModal: { default: false, type: Boolean },
+  multiple: { default: false, type: Boolean },
+  isDisabled: { default: false, type: Boolean },
+  width: { default: "100%", type: String },
+  height: { default: undefined, type: String },
+  maxElement: { default: 50, type: Number },
+  minSearchLength: { default: 3, type: Number },
+  optionChosen: { default: undefined, type: Object as () => unknown },
+  noDeselect: { default: true, type: Boolean },
+  optionCustomTemplating: { default: "", type: String },
+  optionSelectedCustomTemplating: { default: "", type: String },
+  displayLabel: { default: false, type: Boolean },
+  maxOptions: { default: null, type: Number },
+  allowEmpty: { default: true, type: Boolean },
+  textDanger :{ default: undefined, type: String },
+  displayRequired: { default: false, type: Boolean },
+})
+
+//Emits
+const emit = defineEmits(["onSearch", "selected", "onClose"]);
+
+//Data 
+const optionSelected : Ref<unknown>= ref(undefined);
+const options : Ref<Array<unknown>>= ref([]);
+const remainingElements = ref(0);
+const isLoading = ref(false);
+const searchInput = ref("");
+
+//Composables
+const { t } = useI18n();
+
+
+//Computed
+const maxOptionsSelected = computed(() => {
+  if (props.maxOptions !== null && props.multiple) {
+    return (
+      (optionSelected.value as Array<unknown>).length >= props.maxOptions
+    );
+  }
+  return false;
+});
+
+//Watch
+watch(()=>props.optionChosen, () => {
+  optionSelected.value = props.optionChosen;
+}, {deep: true, immediate: true});
+watch(optionSelected, () => {
+  if (props.noDeselect || null !== optionSelected.value) {
+    return;
+  }
+  emit("selected", undefined);
+}, {deep: true});
+
+//Methods
+function fakeSearch(): Array<unknown> {
+  return options.value;
+}
+function onSearch(search?: string): void {
+  if (search && search.length < props.minSearchLength) {
+    return;
+  } else if (search) {
+    searchInput.value = search;
+  }
+  isLoading.value = true;
+  emit("onSearch", search);
+}
+function onClose() {
+  emit("onClose", searchInput.value);
+  searchInput.value = "";
+}
+function afterSearch(optionsFetched: Array<unknown>, count: number): void {
+  options.value = optionsFetched;
+  remainingElements.value = Math.max(0, count - props.maxElement);
+  isLoading.value = false;
+}
+function onOptionSelected(optionSelected: unknown): void {
+  emit("selected", optionSelected);
+}
+function onOptionDeselect(event: unknown): void {
+  if (!props.multiple) {
+    return;
+  }
+  if (
+    !props.allowEmpty &&
+    0 === (optionSelected.value as Array<unknown>).length
+  ) {
+    (optionSelected.value as Array<unknown>).push(event);
+    return;
+  }
+  emit("selected", optionSelected.value);
+}
+
+//Expose
+defineExpose({
+  afterSearch
+});
 </script>
 <style lang="scss">
 @use "vue-select/dist/vue-select.css";
@@ -214,6 +211,7 @@ export default {
 
   .vs__dropdown-toggle {
     padding: 0;
+    height: 100%;
   }
 
   .vs__search:focus {

package/src/components/form/ClassicRadio.vue

@@ -13,7 +13,7 @@
         :name="idRadio"
         :value="option.value"
         :disabled="isDisabled"
-        @input="$emit('update:textInit', $event.target.value)"
+        @input="onChange($event.target.value)"
       />
       <label class="c-hand" :for="idRadio + option.value">{{
         option.title
@@ -22,21 +22,26 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "ClassicRadio",
+<script setup lang="ts">
 
-  props: {
-    idRadio: { default: "", type: String },
-    isDisabled: { default: false, type: Boolean },
-    options: {
-      default: () => [],
-      type: Array as () => Array<{ title: string; value: string | undefined }>,
-    },
-    textInit: { default: undefined, type: String },
-    isColumn: { default: true, type: Boolean },
+//Props 
+defineProps({
+  idRadio: { default: "", type: String },
+  isDisabled: { default: false, type: Boolean },
+  options: {
+    default: () => [],
+    type: Array as () => Array<{ title: string; value: string | undefined }>,
   },
-  emits: ["update:textInit"],
-});
+  textInit: { default: undefined, type: String },
+  isColumn: { default: true, type: Boolean },
+})
+
+//Emits
+const emit = defineEmits(["update:textInit"]);
+
+//Methods
+function onChange(value:string){
+  emit('update:textInit', value)
+}
+
 </script>