Feature/add e shop

public/plugins/vue/tt-components/css/tt-table.css

@@ -261,7 +261,7 @@ td {
 .expanded {
     width: 500px; /* Expanded width */
     height: 600px; /* Expanded height */
-    z-index: 1000;
+    z-index: 999999999999999;
 }
 
 .toggle-button {

public/plugins/vue/tt-components/tt-autocomplete.js

@@ -17,6 +17,9 @@ Vue.component('tt-autocomplete', {
                 :style="{'padding-right': $slots.append ? '30px' : '0'}"
           />
           <slot name="append"></slot>
+          <button v-show="displayValue.length > 0" @click="displayValue = ''" type="button" class="btn btn-link position-absolute" style="right: -5px; top: 50%; transform: translateY(-50%);">
+            <i class="fas fa-times"></i>
+            </button>
 
           <ul v-show="showSuggestions && displayValue.length > 0 || isLoading"
               class="dropdown-menu show dropdown-shadow">
@@ -85,7 +88,6 @@ Vue.component('tt-autocomplete', {
     watch: {
         value(newValue) {
             const selectedItem = this.displayingItems.find(item => item.value === newValue);
-            console.log(selectedItem);
             this.displayValue = selectedItem ? selectedItem.text : '';
         },
         apiUrl() {
@@ -136,7 +138,7 @@ Vue.component('tt-autocomplete', {
             this.fetchSuggestionsDebounceTimer = setTimeout(() => {
                 // Simulate the API call
                 setTimeout(async () => {
-                    const response = await axios.get(`${this.apiUrl}&autocomplete=1&q=${this.displayValue}`);
+                    const response = await axios.get(`${this.apiUrl}&autocomplete=1&q=${encodeURIComponent(this.displayValue)}`);
                     if (response.data?.status === 'error') {
                         this.displayingItems = [];
                     } else {
@@ -154,5 +156,9 @@ Vue.component('tt-autocomplete', {
             this.displayValue = item.text;
             this.showSuggestions = false;
         },
+        clear() {
+            this.displayValue = '';
+            this.$emit('input', '');
+        }
     },
 });

public/plugins/vue/tt-components/tt-checkbox.js

@@ -18,6 +18,9 @@ Vue.component('tt-checkbox', {
             this.checkedValue = val;
         }
     },
+    mounted() {
+        this.$emit('input', this.checkedValue);
+    },
     template: `
       <div class="form-group" :class="{'row': row}">
         <slot name="prepend"></slot>

public/plugins/vue/tt-components/tt-table-crud.js

@@ -51,14 +51,17 @@ Vue.component('tt-table-crud', {
 
                        <template v-for="column in modalConfig.headers">
                          <!-- @formatter:off -->
-                         <tt-input v-if="column.type === 'text'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
-                         <tt-input v-if="column.type === 'number'" v-model="crudModalData[column.key]" :label="column.text" type="number" sm row/>
-                         <tt-textarea v-if="column.type === 'textarea'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
-                         <tt-select v-if="column.type === 'select'" v-model="crudModalData[column.key]" :label="column.text" :options="column.items" sm row/>
-                         <tt-autocomplete v-if="column.type === 'autocomplete'" v-model="crudModalData[column.key]" :label="column.text" :items="column.items" sm row/>
-                         <tt-date-picker v-if="column.type === 'datepicker'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
-                         <tt-icon-select v-if="column.type === 'icon-select'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
-                         <tt-checkbox v-if="column.type === 'checkbox'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
+<!--                         <slot v-if="$scopedSlots[column.key.toLowerCase() + '-modal'] && column.type !== false && 1 < 0" :name="column.key.toLowerCase() + '-modal'" slot-scope="{crudModalData}"></slot>-->
+                         <slot :name="column.key.toLowerCase() + '-modal'" :crudModalData="crudModalData">
+                           <tt-input v-if="column.type === 'text'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
+                           <tt-input v-else-if="column.type === 'number'" v-model="crudModalData[column.key]" :label="column.text" type="number" sm row/>
+                           <tt-textarea v-else-if="column.type === 'textarea'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
+                           <tt-select v-else-if="column.type === 'select'" v-model="crudModalData[column.key]" :label="column.text" :options="column.items" sm row/>
+                           <tt-autocomplete v-else-if="column.type === 'autocomplete'" v-model="crudModalData[column.key]" :label="column.text" :items="column.items" sm row/>
+                           <tt-date-picker v-else-if="column.type === 'datepicker'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
+                           <tt-icon-select v-else-if="column.type === 'icon-select'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
+                           <tt-checkbox v-else-if="column.type === 'checkbox'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
+                         </slot>
                          <!-- @formatter:on -->
                        </template>