From aa496f279962c9ed1e3db71dee8e856847604017 Mon Sep 17 00:00:00 2001 From: Joff Tiquez Date: Thu, 11 May 2023 18:34:46 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20refactor(index.js):=20refactor?= =?UTF-8?q?=20VueFootprintsMixin=20and=20useFootprints=20functions=20The?= =?UTF-8?q?=20VueFootprintsMixin=20and=20useFootprints=20functions=20have?= =?UTF-8?q?=20been=20refactored=20to=20improve=20readability=20and=20maint?= =?UTF-8?q?ainability.=20The=20e=20function=20has=20been=20extracted=20fro?= =?UTF-8?q?m=20the=20VueFootprintsMixin=20and=20is=20now=20used=20in=20the?= =?UTF-8?q?=20computed=20property=20of=20the=20useFootprints=20function.?= =?UTF-8?q?=20This=20change=20improves=20code=20reuse=20and=20reduces=20du?= =?UTF-8?q?plication.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🎉 feat(composables.js, core.js, index.js, mixin.js): add support for footprints This commit adds support for footprints, which are a way to track the user's navigation history. The `useFootprints` composable is added to retrieve the footprints for a given route and options. The `getFootprints` function is added to the `core.js` file to calculate the footprints based on the matched routes and options. The `VueFootprintsMixin` is added to the `mixin.js` file to provide a global `$footprints` computed property that can be used in any component. Finally, the `index.js` file is updated to export the `VueFootprintsMixin` and `useFootprints` for use in other parts of the application. --- dist/index.js | 63 ++++++++++++++++++++++++++-------------------- src/composables.js | 11 ++++++++ src/core.js | 12 +++++++++ src/core.test.js | 0 src/index.js | 27 ++++---------------- src/mixin.js | 13 ++++++++++ 6 files changed, 77 insertions(+), 49 deletions(-) create mode 100644 src/composables.js create mode 100644 src/core.js create mode 100644 src/core.test.js create mode 100644 src/mixin.js diff --git a/dist/index.js b/dist/index.js index 803008d..2884372 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1,30 +1,39 @@ -'use strict'; +"use strict"; -var index = { - install: function install(app, options) { - app.mixin({ - computed: { - $footprints: function $footprints() { - var _this$$route$matched, - _this = this; - return (_this$$route$matched = this.$route.matched) === null || _this$$route$matched === void 0 ? void 0 : _this$$route$matched.map(function (r) { - var _r$meta; - if (!((_r$meta = r.meta) !== null && _r$meta !== void 0 && _r$meta.footprint)) return null; - var active = _this.$route.name === r.name; - var returnRoute = options !== null && options !== void 0 && options.returnRoute ? route : { - name: r.name, - path: r.path, - meta: r.meta - }; - return { - footprint: r.meta.footprint, - active: active, - route: returnRoute - }; - }).filter(Boolean); +var t = require("vue"); +var e = function e(t, _e) { + var _t$matched; + return (_t$matched = t.matched) === null || _t$matched === void 0 ? void 0 : _t$matched.map(function (o) { + var _o$meta; + if (!((_o$meta = o.meta) !== null && _o$meta !== void 0 && _o$meta.footprint)) return null; + var r = t.name === o.name, + n = _e !== null && _e !== void 0 && _e.returnRoute ? t : { + name: o.name, + path: o.path, + meta: o.meta + }; + return { + footprint: o.meta.footprint, + active: r, + route: n + }; + }).filter(Boolean); + }, + o = { + install: function install(t, o) { + t.mixin({ + computed: { + $footprints: function $footprints() { + return e(this.$route, o); + } } - } - }); - } + }); + } + }; +exports.VueFootprintsMixin = o, exports.useFootprints = function (o, r) { + return { + footprints: t.computed(function () { + return e(o, r); + }) + }; }; -module.exports = index; diff --git a/src/composables.js b/src/composables.js new file mode 100644 index 0000000..96adb85 --- /dev/null +++ b/src/composables.js @@ -0,0 +1,11 @@ +import { getFootprints } from './core'; +import { computed } from 'vue'; + +export const useFootprints = (route, options) => { + const footprints = computed(() => { + return getFootprints(route, options); + }); + return { + footprints, + }; +}; diff --git a/src/core.js b/src/core.js new file mode 100644 index 0000000..12b4831 --- /dev/null +++ b/src/core.js @@ -0,0 +1,12 @@ +export const getFootprints = (route, options) => { + return route.matched?.map(r => { + if (!r.meta?.footprint) return null; + const active = route.name === r.name; + const returnRoute = options?.returnRoute ? route : { name: r.name, path: r.path, meta: r.meta }; + return { + footprint: r.meta.footprint, + active, + route: returnRoute, + }; + }).filter(Boolean); +}; diff --git a/src/core.test.js b/src/core.test.js new file mode 100644 index 0000000..e69de29 diff --git a/src/index.js b/src/index.js index 819e189..59bc853 100644 --- a/src/index.js +++ b/src/index.js @@ -1,24 +1,7 @@ -export default { - install: (app, options) => { - app.mixin({ - computed: { - $footprints () { - return this.$route.matched?.map(r => { - - if (!r.meta?.footprint) return null; +import { VueFootprintsMixin } from './mixin'; +import { useFootprints } from './composables'; - const active = this.$route.name === r.name; - const returnRoute = options?.returnRoute ? route : { name: r.name, path: r.path, meta: r.meta }; - - return { - footprint: r.meta.footprint, - active, - route: returnRoute, - }; - - }).filter(Boolean); - }, - }, - }); - }, +export { + VueFootprintsMixin, + useFootprints, }; diff --git a/src/mixin.js b/src/mixin.js new file mode 100644 index 0000000..f9320cb --- /dev/null +++ b/src/mixin.js @@ -0,0 +1,13 @@ +import { getFootprints } from './core'; + +export const VueFootprintsMixin = { + install: (app, options) => { + app.mixin({ + computed: { + $footprints () { + return getFootprints(this.$route, options); + }, + }, + }); + }, +};