fix Multiline vue dropdown

Author: mvorisek

js/src/vue-components/item-search.component.js

@@ -19,10 +19,11 @@ export default {
             <input
                 class="ui"
                 v-model="query"
-                type="text" placeholder="Search..."
+                type="text"
+                name="atk-vue-search"
+                placeholder="Search..."
                 @keyup="onKeyup"
                 @keyup.esc="onEscape"
-                name="atk-vue-search"
             />
             <i class="atk-search-icon" :class="classIcon" />
             <span style="width: 12px; cursor: pointer;" @click="onClear" />

js/src/vue-components/multiline/multiline-body.component.js

@@ -7,11 +7,11 @@ export default {
             <AtkMultilineRow
                 :fields="fields"
                 v-for="(row, i) in rows" :key="row.__atkml"
-                @onTabLastColumn="onTabLastColumn(i)"
                 :rowId="row.__atkml"
                 :isDeletable="isDeletableRow(row)"
                 :rowValues="row"
                 :error="getError(row.__atkml)"
+                @onTabLastColumn="onTabLastColumn(i)"
             ></AtkMultilineRow>
         </SuiTableBody>`,
     props: ['fieldDefs', 'rowData', 'deletables', 'errors'],

js/src/vue-components/multiline/multiline-cell.component.js

@@ -12,9 +12,9 @@ export default {
             ref="cell"
             :fluid="true"
             class="fluid"
-            @update:modelValue="onInput"
-            v-model="inputValue"
             :name="inputName"
+            v-model="inputValue"
+            @update:modelValue="onInput"
         ></component>`,
     components: {
         AtkMultilineReadonly: multilineReadonly,
@@ -31,7 +31,7 @@ export default {
             inputValue: this.fieldValue,
         };
     },
-    emits: ['update-value'],
+    emits: ['updateValue'],
     methods: {
         getComponent: function () {
             return this.cellData.definition.component;
@@ -45,7 +45,7 @@ export default {
         },
         onInput: function (value) {
             this.inputValue = value;
-            this.$emit('update-value', this.fieldName, this.inputValue);
+            this.$emit('updateValue', this.fieldName, this.inputValue);
         },
     },
 };

js/src/vue-components/multiline/multiline-header.component.js

@@ -20,7 +20,7 @@ export default {
             </SuiTableRow>
             <SuiTableRow :verticalAlign="'top'">
                 <SuiTableHeaderCell :width=1 textAlign="center">
-                    <input ref="check" type="checkbox" @input="onToggleDeleteAll" :checked="isChecked" :indeterminate="isIndeterminate" />
+                    <input ref="check" type="checkbox" :checked="isChecked" :indeterminate="isIndeterminate" @input="onToggleDeleteAll" />
                 </SuiTableHeaderCell>
                 <SuiTableHeaderCell
                     v-for="column in columns"

js/src/vue-components/multiline/multiline-row.component.js

@@ -13,20 +13,20 @@ export default {
     template: `
         <SuiTableRow :verticalAlign="'middle'">
             <SuiTableCell textAlign="center">
-                <input type="checkbox" @input="onToggleDelete" v-model="toDelete" />
+                <input type="checkbox" v-model="toDelete" @input="onToggleDelete" />
             </SuiTableCell>
             <SuiTableCell
                 v-for="(column, i) in columns"
-                @keydown.tab="onTab(i)"
                 v-bind="column.cellProps"
                 :width=null
                 :state="getErrorState(column)"
                 :style="{ overflow: 'visible' }"
+                @keydown.tab="onTab(i)"
             >
                 <AtkMultilineCell
                     :cellData="column"
-                    @update-value="onUpdateValue"
                     :fieldValue="getValue(column)"
+                    @updateValue="onUpdateValue"
                 ></AtkMultilineCell>
             </SuiTableCell>
         </SuiTableRow>`,

js/src/vue-components/multiline/multiline.component.js

@@ -15,21 +15,21 @@ export default {
                     :caption="caption"
                 ></AtkMultilineHeader>
                 <AtkMultilineBody
-                    @onTabLastRow="onTabLastRow"
                     :fieldDefs="fieldData"
                     :rowData="rowData"
                     :deletables="getDeletables"
                     :errors="errors"
+                    @onTabLastRow="onTabLastRow"
                 ></AtkMultilineBody>
                 <SuiTableFooter>
                     <SuiTableRow>
                         <SuiTableHeaderCell />
                         <SuiTableHeaderCell :colspan="getSpan" textAlign="right">
                             <SuiButtonGroup>
-                                <SuiButton ref="addBtn" size="small" @click.stop.prevent="onAdd" type="button" icon :disabled="isLimitReached">
+                                <SuiButton ref="addBtn" size="small" type="button" icon :disabled="isLimitReached" @click.stop.prevent="onAdd">
                                     <SuiIcon name="plus" />
                                 </SuiButton>
-                                <SuiButton size="small" @click.stop.prevent="onDelete" type="button" icon :disabled="isDeleteDisable">
+                                <SuiButton size="small" type="button" icon :disabled="isDeleteDisable" @click.stop.prevent="onDelete">
                                     <SuiIcon name="trash" />
                                 </SuiButton>
                             </SuiButtonGroup>

js/src/vue-components/query-builder/fomantic-ui-group.component.vue

@@ -86,18 +86,6 @@ export default {
             selectedSuiRule: null,
         };
     },
-    computed: {
-        /**
-         * Map rules to SUI Dropdown.
-         */
-        dropdownRules: function () {
-            return this.rules.map((rule) => ({
-                key: rule.id,
-                text: rule.label,
-                value: rule.id,
-            }));
-        },
-    },
     methods: {
         /**
          * Add a new rule via Dropdown item.

js/src/vue-components/query-builder/fomantic-ui-rule.component.vue

@@ -99,7 +99,7 @@
                                             :is="rule.component"
                                             v-model="query.value"
                                             :config="rule.componentProps"
-                                            :optional-value="query.option"
+                                            :optionalValue="query.option"
                                         />
                                     </div>
                                 </template>
@@ -156,7 +156,7 @@ export default {
          * Check if an input can be display in regards to:
          * it's operator and then it's type.
          *
-         * @returns {boolean|*}
+         * @returns {boolean}
          */
         canDisplay: function (type) {
             if (this.labels.hiddenOperator.includes(this.query.operator)) {

js/src/vue-components/query-builder/query-builder.component.vue

@@ -8,10 +8,10 @@
         >
         <VueQueryBuilder
             v-model="query"
-            :group-component="groupComponent"
-            :rule-component="ruleComponent"
+            :groupComponent="groupComponent"
+            :ruleComponent="ruleComponent"
             :rules="rules"
-            :max-depth="maxDepth"
+            :maxDepth="maxDepth"
             :labels="labels"
         >
             <template #default="slotProps">
@@ -71,8 +71,6 @@ export default {
     methods: {
         /**
          * Return default label and option.
-         *
-         * @returns {any}
          */
         getLabels: function (labels) {
             labels = labels || {};

js/src/vue-components/share/atk-lookup.js

@@ -7,10 +7,9 @@ import atk from 'atk';
  * config:
  * url: the callback URL. Callback should return model data in form of { key: modelId, text: modelTitle, value: modelId }
  * reference: the reference field name associate with model or hasOne name. This field name will be sent along with URL callback parameter as of 'field=name'.
- * ui: the css class name to apply to dropdown.
  * Note: The remaining config object may contain any or SuiDropdown { props: value } pair.
  *
- * value: The selected value.
+ * modelValue: The selected value.
  * optionalValue: The initial list of options for the dropdown.
  */
 export default {
@@ -19,24 +18,21 @@ export default {
         <SuiDropdown
             v-bind="dropdownProps"
             ref="drop"
+            :modelValue="getDropdownValue(modelValue)"
             ` /* :loading="isLoading" */
-            + `@update:modelValue="onChange"
+            + `@update:modelValue="onUpdate"
             @filtered="onFiltered"
-            v-model="current"
-            :class="css"
         ></SuiDropdown>`,
-    props: ['config', 'value', 'optionalValue'],
+    props: ['config', 'modelValue', 'optionalValue'],
     data: function () {
         const {
-            url, reference, ui, ...suiDropdown
+            url, reference, ...suiDropdown
         } = this.config;
         suiDropdown.selection = true;
 
         return {
             dropdownProps: suiDropdown,
-            current: this.value,
             url: url || null,
-            css: [ui],
             isLoading: false,
             field: reference,
             query: '',
@@ -50,9 +46,11 @@ export default {
     },
     emits: ['update:modelValue'],
     methods: {
-        onChange: function (value) {
-            this.current = value.value;
-            this.$emit('update:modelValue', this.current);
+        getDropdownValue: function (value) {
+            return this.dropdownProps.options.find((item) => item.value === value);
+        },
+        onUpdate: function (value) {
+            this.$emit('update:modelValue', value.value);
         },
         /**
          * Receive user input text for search.

js/src/vue-components/tree-item-selector/tree-item-selector.component.js

@@ -4,10 +4,10 @@ export default {
     name: 'AtkTreeItemSelector',
     template: `
         <div class="item" :style="itemMargin">
-            <i :class="toggleIcon" @click="onToggleShow" v-show="!isRoot" />
-            <i :class="getIcon" @click="onToggleSelect" v-show="!isRoot" />
+            <i :class="toggleIcon" v-show="!isRoot" @click="onToggleShow" />
+            <i :class="getIcon" v-show="!isRoot" @click="onToggleSelect" />
             <div class="content">
-                <div @click="onToggleSelect" :style="itemCursor">{{title}}</div>
+                <div :style="itemCursor" @click="onToggleSelect">{{title}}</div>
                 <div v-if="isParent" class="list" v-show="open || isRoot">
                     <AtkTreeItemSelector
                         v-for="item in item.nodes" :key="item.id"