@enso-ui/tutorials 5.0.0 → 5.1.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 laravel-enso
+Copyright (c) 2026 laravel-enso
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -26,4 +26,4 @@ Thank you to all the people who already contributed to Enso!
 
 ## License
 
-[ISC](https://opensource.org/licenses/ISC)
+[MIT](https://opensource.org/licenses/MIT)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enso-ui/tutorials",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Basic tutorials package",
   "main": "src/bulma/pages/tutorials/Index.vue",
   "scripts": {
@@ -15,31 +15,20 @@
     "vue"
   ],
   "author": "Adrian Ocneanu <aocneanu@gmail.com>",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/enso-ui/tutorials/issues"
   },
   "homepage": "https://github.com/enso-ui/tutorials#readme",
   "dependencies": {
-    "@enso-ui/forms": "^3.0",
-    "@enso-ui/tables": "^3.0",
-    "@enso-ui/ui": "^6.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.2",
-    "@fortawesome/free-solid-svg-icons": "^5.11.2",
-    "@fortawesome/free-brands-svg-icons": "^5.11.2",
-    "@fortawesome/vue-fontawesome": "3.0.0-5",
+    "@enso-ui/forms": "^4.0.0",
+    "@enso-ui/tables": "^4.0.0",
+    "@enso-ui/ui": "^7.0.0",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/vue-fontawesome": "3.1.3",
     "driver.js": "^0.9.8",
-    "vue": "^3.0",
-    "vuex": "^4.0.0"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "5.0.0-beta.6",
-    "@vue/cli-plugin-eslint": "5.0.0-beta.6",
-    "@vue/eslint-config-airbnb": "^5.0.0",
-    "autoprefixer": "^9.6.1",
-    "babel-eslint": "^10.0.1",
-    "eslint-plugin-vue": "^8.0.0",
-    "eslint": "^7.0.0",
-    "eslint-import-resolver-alias": "^1.1.2"
+    "pinia": "^3.0.3",
+    "vue": "^3.0"
   }
 }

package/src/bulma/components/settings/Tutorial.vue

@@ -1,18 +1,18 @@
 <template>
-    <div class="level is-mobile">
+    <div class="level is-mobile tutorial-setting">
         <div class="level-left">
-            <div class="level-item">
+            <div class="level-item m-0 is-flex is-align-items-center">
                 {{ i18n('Tutorial') }}
             </div>
         </div>
         <div class="level-right">
-            <div class="level-item">
+            <div class="level-item m-0 is-flex is-align-items-center">
                 <core-tutorial>
                     <template #default="{ itemEvents }">
-                        <a class="button is-naked"
+                        <a class="button is-small is-naked p-0 is-flex is-align-items-center is-justify-content-center"
                             v-on="itemEvents">
-                            <span class="icon is-small">
-                                <fa icon="question"/>
+                            <span class="icon is-small m-0 is-flex is-align-items-center is-justify-content-center">
+                                <fa :icon="faQuestion"/>
                             </span>
                         </a>
                     </template>
@@ -24,21 +24,26 @@
 
 <script>
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
 import { faQuestion } from '@fortawesome/free-solid-svg-icons';
 import CoreTutorial from '../../../core/components/settings/Tutorial.vue';
 
-library.add(faQuestion);
-
 export default {
     name: 'Tutorial',
 
     components: { CoreTutorial, Fa },
 
     inject: ['i18n'],
+
+    data: () => ({
+        faQuestion,
+    }),
 };
 </script>
 
 <style lang="scss">
-    @import '~driver.js/dist/driver.min.css';
+    @import 'driver.js/dist/driver.min.css';
+
+    .tutorial-setting .svg-inline--fa {
+        vertical-align: 0;
+    }
 </style>

package/src/bulma/pages/tutorials/Create.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="columns is-centered">
         <div class="column is-three-quarters-desktop is-full-touch">
-            <enso-form class="box has-background-light raises-on-hover"/>
+            <enso-form class="box"/>
         </div>
     </div>
 </template>

package/src/bulma/pages/tutorials/Edit.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="columns is-centered">
         <div class="column is-three-quarters-desktop is-full-touch">
-            <enso-form class="box has-background-light raises-on-hover"/>
+            <enso-form class="box"/>
         </div>
     </div>
 </template>

package/src/bulma/pages/tutorials/Index.vue

@@ -1,8 +1,8 @@
 <template>
-    <enso-table class="box is-paddingless raises-on-hover"
+    <enso-table class="box p-0"
         id="tutorials">
         <template #placement="{ column, row }">
-            <span class="tag is-table-tag is-info">
+            <span class="tag is-info">
                 {{ column.enum._get(row.placement) }}
             </span>
         </template>

package/src/bulma/register.js

@@ -1,4 +1,5 @@
-import App from '@enso-ui/ui/src/core/app';
 import Tutorial from './components/settings/Tutorial.vue';
 
-App.registerSettingsItem('tutorials',  Tutorial, 350);
+export default App => {
+    App.registerSettingsItem('tutorials', Tutorial, 350);
+};

package/src/bulma/routes/system/tutorials.js

@@ -1,6 +1,6 @@
 import routeImporter from '@enso-ui/ui/src/modules/importers/routeImporter';
 
-const routes = routeImporter(require.context('./tutorials', false, /.*\.js$/));
+const routes = routeImporter.fromGlob(import.meta.glob('./tutorials/*.js', { eager: true }));
 const Router = () => import('@enso-ui/ui/src/bulma/pages/Router.vue');
 
 export default {

package/src/bulma/routes/system.js

@@ -1,6 +1,6 @@
 import routeImporter from '@enso-ui/ui/src/modules/importers/routeImporter';
 
-const routes = routeImporter(require.context('./system', false, /.*\.js$/));
+const routes = routeImporter.fromGlob(import.meta.glob('./system/*.js', { eager: true }));
 
 export default {
     path: '/system',

package/src/core/components/settings/Tutorial.vue

@@ -1,6 +1,15 @@
 <script>
-import { mapMutations } from 'vuex';
-import Driver from 'driver.js';
+import { getActivePinia } from 'pinia';
+
+const useStore = id => {
+    const store = getActivePinia()?._s?.get(id);
+
+    if (!store) {
+        throw new Error(`Missing Pinia store: ${id}`);
+    }
+
+    return store;
+};
 
 export default {
     name: 'Tutorial',
@@ -19,19 +28,35 @@ export default {
         },
     },
 
-    data: v => ({
-        driver: new Driver({
-            animate: false,
-            doneBtnText: v.i18n(v.labels.done),
-            closeBtnText: v.i18n(v.labels.close),
-            nextBtnText: v.i18n(v.labels.next),
-            prevBtnText: v.i18n(v.labels.previous),
-        }),
+    data: () => ({
+        driver: null,
     }),
 
     methods: {
-        ...mapMutations('layout/settings', { toggleSettingsBar: 'toggle' }),
-        fetch() {
+        async resolveDriver() {
+            if (this.driver) {
+                return this.driver;
+            }
+
+            const module = await import('driver.js');
+            const Driver = module.default?.default
+                ?? module.default
+                ?? module.Driver
+                ?? module;
+
+            this.driver = new Driver({
+                animate: false,
+                doneBtnText: this.i18n(this.labels.done),
+                closeBtnText: this.i18n(this.labels.close),
+                nextBtnText: this.i18n(this.labels.next),
+                prevBtnText: this.i18n(this.labels.previous),
+            });
+
+            return this.driver;
+        },
+        async fetch() {
+            await this.resolveDriver();
+
             this.http.get(this.route('system.tutorials.load'), {
                 params: { route: this.$route.name },
             }).then(({ data }) => this.start(data))
@@ -42,7 +67,7 @@ export default {
                 return;
             }
 
-            this.toggleSettingsBar();
+            useStore('layout').toggleSettings();
             this.driver.defineSteps(this.localise(steps));
             this.driver.start();
         },