@asd20/ui 3.2.1014 → 3.2.1015

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.1014",
+  "version": "3.2.1015",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/templates/Asd20LoginsTemplate/index.vue

@@ -250,8 +250,29 @@ export default {
         detailLinkLabel: '',
       }
     },
+    // tabsList() {
+    //   return this.messageCategories.map(c => ({
+    //     label: c,
+    //     hash: `#tab-${kebabCase(c)}`,
+    //     active: this.tab === `#tab-${kebabCase(c)}`,
+    //   }))
+    // },
     tabsList() {
-      return this.messageCategories.map(c => ({
+      // sort categories: 'reset' tabs first (alphabetized among themselves), then the rest (alphabetized)
+      const sortedCategories = [...(this.messageCategories || [])].sort(
+        (a, b) => {
+          const aReset = this.isResetTab(a)
+          const bReset = this.isResetTab(b)
+          if (aReset && !bReset) return -1
+          if (!aReset && bReset) return 1
+          return a.localeCompare(b, undefined, {
+            sensitivity: 'base',
+            numeric: true,
+          })
+        }
+      )
+
+      return sortedCategories.map(c => ({
         label: c,
         hash: `#tab-${kebabCase(c)}`,
         active: this.tab === `#tab-${kebabCase(c)}`,
@@ -267,20 +288,45 @@ export default {
         }
       })
     },
+    // loginsByTab() {
+    //   if (!this.tabsList.length || !this.logins.length) return []
+    //   let logins = []
+    //   for (let t of this.tabsList) {
+    //     let loginsByTab = this.logins.filter(l =>
+    //       l.categoryTitles.includes(t.label)
+    //     )
+    //     logins.push({
+    //       tab: t.label,
+    //       hash: t.hash,
+    //       logins: loginsByTab,
+    //     })
+    //   }
+    //   return logins
+    // },
+
     loginsByTab() {
       if (!this.tabsList.length || !this.logins.length) return []
-      let logins = []
-      for (let t of this.tabsList) {
-        let loginsByTab = this.logins.filter(l =>
-          l.categoryTitles.includes(t.label)
-        )
-        logins.push({
+      const groups = []
+
+      for (const t of this.tabsList) {
+        // filter then alphabetize by title
+        const loginsForTab = this.logins
+          .filter(l => l.categoryTitles.includes(t.label))
+          .sort((a, b) =>
+            (a.title || '').localeCompare(b.title || '', undefined, {
+              sensitivity: 'base',
+              numeric: true,
+            })
+          )
+
+        groups.push({
           tab: t.label,
           hash: t.hash,
-          logins: loginsByTab,
+          logins: loginsForTab,
         })
       }
-      return logins
+
+      return groups
     },
     selectedTabLogins() {
       return this.loginsByTab.find(t => this.tab === t.hash)
@@ -291,6 +337,9 @@ export default {
       window.location.hash = tab.hash
       this.tab = tab.hash
     },
+    isResetTab(label) {
+      return /\breset\b/i.test(label)
+    },
   },
 }
 </script>