Sort out some TS compilation issues

.eslintrc.json

@@ -35,7 +35,7 @@
         "linebreak-style": ["error", "unix"],
         "quotes": ["error", "double"],
         "semi": ["error", "always"],
-        "vue/script-indent": ["error", 2, { "baseIndent": 0 }],
+        "vue/script-indent": ["error", 2, { "baseIndent": 0, "switchCase": 1 }],
         "vue/one-component-per-file": "off"
     }
 }

.vscode/settings.json

@@ -20,5 +20,5 @@
         "commandCenter.border": "#e7e7e799"
     },
     "peacock.remoteColor": "#353517",
-    "vue3snippets.enable-compile-vue-file-on-did-save-code": true
+    "vue3snippets.enable-compile-vue-file-on-did-save-code": false
 }

package-lock.json

@@ -1,5 +1,5 @@
 {
-    "name": "srcs",
+    "name": "loue",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {

resources/ts/components/bo/ModelLinkComponent.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="ModelLink form-control">
     <VueSelect
-      :placeholder="_placeholder"
-      :_loading="_loading"
-      v-model="_value"
+      :placeholder="intPlaceholder"
+      :loading="loading"
+      v-model="intValue"
       :clearable="true"
       label="label"
-      :options="_data"
-      @search="search"
-      :disabled="_readonly || _disabled"
+      :options="data"
+      @search="searchAjax"
+      :disabled="intReadonly || intDisabled"
       :filterable="true"
       :searchable="true"
     >
       <template #option="{ label }: { label: string }">
-        {{ label.length >= _maxLength ? label.substring(0, _maxLength) + ".." : label }}
+        {{
+          label.length >= intMaxLength ? label.substring(0, intMaxLength) + ".." : label
+        }}
       </template>
       <template
         #no-options="{ search, searching }: { search: string, searching: boolean }"
@@ -22,22 +24,28 @@
           {{ __("Aucun résultat pour") }}
           <em>{{ search }}</em> .
         </template>
-        <em v-else style="opacity: 0.5">
+        <em
+          v-else
+          style="opacity: 0.5"
+        >
           {{ __("Chercher un lien du site") }}
         </em>
       </template>
       <template #list-footer>
-        <li class="pagination" v-if="_data.length">
+        <li
+          class="pagination"
+          v-if="data.length"
+        >
           <button
-            @click.prevent="_page -= 1"
-            :disabled="!_hasPrevPage"
+            @click.prevent="page -= 1"
+            :disabled="!hasPrevPage"
             class="btn btn-sm btn-primary mt-2 mb-2 ms-2 me-2"
           >
             {{ __("précédent") }}
           </button>
           <button
-            @click.prevent="_page += 1"
-            :disabled="!_hasNextPage"
+            @click.prevent="page += 1"
+            :disabled="!hasNextPage"
             class="btn btn-sm btn-primary mt-2 mb-2"
           >
             {{ __("suivant") }}
@@ -45,7 +53,12 @@
         </li>
       </template>
     </VueSelect>
-    <input v-if="_isJson" type="hidden" :name="String(_name)" :value="_value?.value" />
+    <input
+      v-if="isJson"
+      type="hidden"
+      :name="String(name)"
+      :value="intValue?.value"
+    >
   </div>
 </template>
 
@@ -67,6 +80,7 @@ export default defineComponent({
   components: {
     VueSelect,
   },
+  emits: ["input"],
   beforeMount() {
     if (!this.$attrs.json) {
       throw new Error("this component requires json");
@@ -76,15 +90,15 @@ export default defineComponent({
     const json = String(this.$attrs.json ?? "{}");
     const data = JSON.parse(json);
     if (Object.keys(data).length) {
-      this._isJson = true;
-      this._name = data.name;
+      this.isJson = true;
+      this.name = data.name;
     }
-    this._disabled = this.disabled ? this.disabled : data.disabled ? true : false;
-    this._readonly = this.readonly ? this.readonly : data.readonly ? true : false;
-    this._placeholder = this.placeholder ? this.placeholder : data.placeholder;
-    this._maxLength = this.maxLength ? this.maxLength : data.maxLength;
+    this.intDisabled = this.disabled ? this.disabled : data.disabled ? true : false;
+    this.intReadonly = this.readonly ? this.readonly : data.readonly ? true : false;
+    this.intPlaceholder = this.placeholder ? this.placeholder : data.placeholder;
+    this.intMaxLength = this.maxLength ? this.maxLength : data.maxLength;
     this.parseValue(this.value ? this.value : data.value);
-    this.search();
+    this.searchAjax();
   },
   props: {
     disabled: {
@@ -109,70 +123,70 @@ export default defineComponent({
     },
   },
   data(): {
-    _isJson: boolean;
-    _name: string | null;
-    _disabled: boolean;
-    _readonly: boolean;
-    _placeholder: string;
-    _maxLength: number;
-    _value: SelectModel | null;
-    _loading: boolean;
-    _searchText: string;
-    _data: SelectModel[];
-    _page: number;
-    _perPage: number;
-    _hasNextPage: boolean;
-    _hasPrevPage: boolean;
+    isJson: boolean;
+    name: string | null;
+    intDisabled: boolean;
+    intReadonly: boolean;
+    intPlaceholder: string;
+    intMaxLength: number;
+    intValue: SelectModel | null;
+    loading: boolean;
+    searchText: string;
+    data: SelectModel[];
+    page: number;
+    perPage: number;
+    hasNextPage: boolean;
+    hasPrevPage: boolean;
   } {
     return {
-      _isJson: false,
-      _name: null,
-      _disabled: false,
-      _readonly: false,
-      _placeholder: "",
-      _value: null,
-      _loading: false,
-      _searchText: "",
-      _data: [],
-      _page: 1,
-      _perPage: 15,
-      _hasNextPage: true,
-      _hasPrevPage: false,
-      _maxLength: 65,
+      isJson: false,
+      name: null,
+      intDisabled: false,
+      intReadonly: false,
+      intPlaceholder: "",
+      intValue: null,
+      loading: false,
+      searchText: "",
+      data: [],
+      page: 1,
+      perPage: 15,
+      hasNextPage: true,
+      hasPrevPage: false,
+      intMaxLength: 65,
     };
   },
   watch: {
-    _page() {
-      if (this._page < 1) {
-        this._page = 1;
+    page() {
+      if (this.page < 1) {
+        this.page = 1;
       }
-      if (this._page > 1) {
-        this._hasPrevPage = true;
+      if (this.page > 1) {
+        this.hasPrevPage = true;
       } else {
-        this._hasPrevPage = false;
+        this.hasPrevPage = false;
       }
-      this.search();
+      this.searchAjax();
     },
-    _data() {
-      if (this._data.length == this._perPage) {
-        this._hasNextPage = true;
+    data() {
+      if (this.data.length == this.perPage) {
+        this.hasNextPage = true;
       } else {
-        this._hasNextPage = false;
+        this.hasNextPage = false;
       }
     },
     value() {
       this.parseValue(this.value);
     },
-    _value() {
-      this.$emit("input", this._value ? this._value.value : "");
+    intValue() {
+      this.$emit("input", this.intValue ? this.intValue.value : "");
     },
   },
   methods: {
-    search(search = null) {
+    searchAjax(search = null) {
       if (search !== false && search !== null) {
-        this._searchText = search;
+        this.searchText = search;
       }
-      if (!this._searchText) {
+      if (!this.searchText) {
         return;
       }
       let routeUrl = route.methods.route("bo.ranges.search-uri");
@@ -181,9 +195,9 @@ export default defineComponent({
       }
       const url = new URL(routeUrl);
       routeUrl = `${url.origin}${url.pathname}?`;
-      routeUrl += "page=" + encodeURIComponent(this._page);
-      routeUrl += "&search=" + encodeURIComponent(this._searchText);
-      this._loading = true;
+      routeUrl += "page=" + encodeURIComponent(this.page);
+      routeUrl += "&search=" + encodeURIComponent(this.searchText);
+      this.loading = true;
       axios
         .get(routeUrl)
         .then((response) => {
@@ -193,12 +207,12 @@ export default defineComponent({
           console.error(error);
         })
         .then(() => {
-          this._loading = false;
+          this.loading = false;
         });
     },
     parseValue(value: string | null) {
       if (!value) {
-        this._value = null;
+        this.intValue = null;
         return;
       }
       let routeUrl = route.methods.route("bo.ranges.model-title");
@@ -206,7 +220,7 @@ export default defineComponent({
         throw new Error("undefined route bo.ranges.model-title");
       }
       const url = new URL(routeUrl),
-        model = value.replace(/^#/, "").replace(/#$/, "").split("#");
+            model = value.replace(/^#/, "").replace(/#$/, "").split("#");
 
       routeUrl = `${url.origin}${url.pathname}?`;
 
@@ -215,11 +229,11 @@ export default defineComponent({
       axios.get(routeUrl).then((response) => {
         let label = String(response.data as string);
         label =
-          label.length >= this._maxLength
-            ? label.substring(0, this._maxLength) + ".."
+          label.length >= this.intMaxLength
+            ? label.substring(0, this.intMaxLength) + ".."
             : label;
         if (label) {
-          this._value = this.parseResource({
+          this.intValue = this.parseResource({
             class: model[0],
             label: label,
             value: model[1],
@@ -250,9 +264,9 @@ export default defineComponent({
       for (const model of data) {
         out.push(this.parseResource(model));
       }
-      // pass _searchText if is valid url and nothing else is found
+      // pass searchText if is valid url and nothing else is found
       if (out.length) {
-        this._data = out;
+        this.data = out;
       }
     },
   },
@@ -264,6 +278,7 @@ export default defineComponent({
 
 .ModelLink {
   padding: 0 !important;
+
   .vs__dropdown-toggle {
     border: 0 !important;
   }