While @acjh mentioned in the earlier PR to move above trigger, I think it should be moved above select instead, because pic is in the wrong alphabetical order.

@nusjzx Did you miss this?

@nusjzx reminder

@nusjzx This also needs to be fixed.

@nusjzx Did you miss this?

Is it possible to override filters methods in vue? I think @acjh didn't want the method to be modified for Typeahead, so should consider overriding this method in searchbar instead if possible.

Shouldn't use capital letters for TypeaheadDocs, should be typeaheadDocs.

You can move it below tooltipDocs.

I don't find this ideal 😕, so I think we will need to fix eslint.

Can you help us modify .eslintrc.js on your branch to add in the following lines shown below as a separate commit. Then you can put all the attributes on one line instead of having to split to one attribute each line (e.g. <doc-section id="searchbar" name="searchbar">)

diff --git a/.eslintrc.js b/.eslintrc.js
index b74d1ab1..305ef01b 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -21,5 +21,15 @@ module.exports = {
     'operator-linebreak': ['error', 'before'],
     'quote-props': 'off',
     'vue/order-in-components': 'off',
+    'vue/max-attributes-per-line': [
+      {
+        'singleline': 5,
+        'multiline':
+        {
+          'max': 5,
+          'allowFirstLine': false,
+        },
+      },
+    ],
   },
 };

id should be searchbarDocs, name should be Searchbar.

Should be <!-- eslint-enable -->

id should be searchbarDocs, name should be Searchbar.

• Let's do <span></span> as it's not a proper empty element:

  

• Let's modify the relevant rule:

  'vue/html-self-closing': [
    'error',
    {
      'html': {
        'void': 'always',
        'normal': 'never',
      },
    },
  ],

Let's disable specific rules, and do it inside <doc-code>:

<doc-code language="javascript">
  <!-- eslint-disable vue/html-indent, vue/no-parsing-error, vue/valid-v-html -->
  new Vue {
    ...
  }
  <!-- eslint-enable vue/html-indent, vue/no-parsing-error, vue/valid-v-html -->
</doc-code>

You need to remove this <!-- eslint-disable --> after adding the one inside. :P

@nusjzx Did you miss this?

Newline at end of file.

• As @yamgent suggested, let's modify .eslintrc.js (it should be committed):

  'vue/max-attributes-per-line': [
    'error',
    {
      'singleline': 2,
      'multiline': {
        'max': 1,
        'allowFirstLine': false,
      },
    },
  ],

  Let's keep it strict.

• Capitalize S in name="searchbar":

  <doc-section id="searchbarDocs" name="Searchbar">

Capitalize S in name="searchbar"

Because it's used in sidebar and heading.

You need to remove this <!-- eslint-disable --> after adding the one inside. :P

@nusjzx reminder

Why 'max': 2? Let's not modify 'multiline':

'vue/max-attributes-per-line': ['error', { 'singleline': 2 }],

Only < has to be encoded.

Remove empty line.

Remove one empty line.

• Extra > in </span>>.
• Standardize <br /> after span.
• Can we do "item.keywords | extract value | highlight value" for code reuse and consistency?

this part need to be changed if we want inconsecutive keywords match.May I change it in that PR

No, we shouldn't compromise this PR.

Let's not modify 'multiline':

'vue/max-attributes-per-line': ['error', { 'singleline': 2 }],

@nusjzx reminder. Some of the comments are yet to be resolved as well.

End with a period for consistency.

Remove empty line.

Refactoring primitiveData().

Iteration 1:

• Early return.
• Rename value to entry as there's this.value.
• Rename query to regex as there's this.query.
• Reorder destructuring of entry alphabetically.
• Reorder const before let.
• Remove unnecessary if (Object.keys(headings).length !== 0).
• Use regex.test(text) instead of text.search(query) !== -1.
• Reorder properties of object in matches.push(object) alphabetically.
• Replaced words.search(query) !== -1 with regex.test(title) || regex.test(keywords).

if (!this.data) {
  return {};
}
const matches = [];
this.data.forEach((entry) => {
  const { headings, src, title } = entry;
  const keywords = entry.keywords || '';
  const regex = new RegExp(this.value, 'i');
  let hasMatchingHeading = false;
  Object.entries(headings).forEach(([id, text]) => {
    if (regex.test(text)) {
      hasMatchingHeading = true;
      matches.push({
        heading: { id, text },
        keywords,
        src,
        title,
      });
    }
  });
  if (!hasMatchingHeading) {
    if (regex.test(title) || regex.test(keywords)) {
      matches.push(entry);
    }
  }
});
return matches;

Now trying Array.prototype.reduce().

Iteration 2:

• Return early with undefined.
• Assign regex outside forEach.

if (!this.data) {
  return undefined;
}
const matches = [];
const regex = new RegExp(this.value, 'i');
this.data.forEach((entry) => {
  const { headings, src, title } = entry;
  const keywords = entry.keywords || '';
  let hasMatchingHeading = false;
  Object.entries(headings).forEach(([id, text]) => {
    if (regex.test(text)) {
      hasMatchingHeading = true;
      matches.push({
        heading: { id, text },
        keywords,
        src,
        title,
      });
    }
  });
  if (!hasMatchingHeading) {
    if (regex.test(title) || regex.test(keywords)) {
      matches.push(entry);
    }
  }
});
return matches;

An attempt at reduce that's less appealing:

if (!this.data) {
  return undefined;
}
const regex = new RegExp(this.value, 'i');
return this.data.reduce((matches, entry) => {
  const { headings, src, title } = entry;
  const keywords = entry.keywords || '';
  const headingMatches = Object.entries(headings).reduce((acc, [id, text]) => {
    if (regex.test(text)) {
      acc.push({
        heading: { id, text },
        keywords,
        src,
        title,
      });
    }
    return acc;
  }, []);
  if (headingMatches.length) {
    return matches.concat(headingMatches);
  }
  if (regex.test(title) || regex.test(keywords)) {
    matches.push(entry);
  }
  return matches;
}, []);

@nusjzx Iteration 2 is more appealing.

You can move the regex constant out of the reduce method, like so:

    highlightAndExtract(value, phrase) {
      const regex = new RegExp(`(${phrase})`, 'gi');
      const words = value.split(',').map(word => word.trim());
      return words.reduce((pre, next) => {
        const isMatch = next.match(regex);
        return pre + (isMatch ? `${next.replace(regex, '<mark>$1</mark>')} ` : '');
      }, '');
    },

@nusjzx Did you miss this?

Be consistent with doc-code.

• Fix eslint errors and warnings.
• Should be singular item.
• Let's rename it consoleCallback as it's not a default.

eslint doesn't allow console.log()

I will change it to other callback

Unless you have a better idea:

// eslint-disable-next-line no-console