bundle css, import tabulator in filter component, import vue in Phrases Plugin

package-lock.json

@@ -2232,6 +2232,20 @@
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "dev": true
     },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",

public/js/components/filter/Filter.js

@@ -15,6 +15,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import {CoreFilterAPIs} from './API.js';
 import {CoreRESTClient} from '../../RESTClient.js';
 import {CoreFetchCmpt} from '../../components/Fetch.js';

public/js/plugin/Phrasen.js

@@ -1,4 +1,6 @@
-const categories = Vue.reactive({});
+import { reactive, computed } from 'vue';
+
+const categories = reactive({});
 const loadingModules = {};
 
 function extractCategory(obj, category) {
@@ -35,7 +37,7 @@ const phrasen = {
 	},
 	t_ref(category, phrase, params) {
 		console.warn('depricated');
-		return Vue.computed(() => this.t(category, phrase, params));
+		return computed(() => this.t(category, phrase, params));
 	},
 	t(category, phrase, params) {
 		if (params === undefined && (
@@ -49,7 +51,7 @@ const phrasen = {
 			console.error('invalid input', category, phrase, params);
 			return '';
 		}
-		let val = Vue.computed(() => {
+		let val = computed(() => {
 			if (!categories[category])
 				return '';
 			return getValueForLoadedPhrase(category, phrase, params);

rollup.alt.config.js

@@ -39,33 +39,40 @@ function FhcResolver () {
 const useplugins = [
     	alias({
 		entries: {
-			vue: 'vue/dist/vue.esm-bundler.js'
+			vue: 'vue/dist/vue.esm-bundler.js',
 		}
 	}),
+	commonjs(),
 	nodeResolve({
+		module: true,
+		jsnext: true,
 		preferBuiltins: true,
+		browser: true,
 		moduleDirectories: ['node_modules'],
 		modulePaths: globSync('application/extensions/*/node_modules', {follow: true, realpath: true}).map(file => 
 			fileURLToPath(new URL(file, import.meta.url))
 		),
 	}),
+	json({
+		compact: true
+	}),
 	FhcResolver(),
 	replace({
 		preventAssignment: true,
 		'process.env.NODE_ENV': JSON.stringify( 'production' ),
 	}),
-	commonjs(),
 	vue(),
-	json(),
 	babel({
 		babelHelpers: 'bundled',
-		plugins: ['transform-class-properties']
+		plugins: ['transform-class-properties'],
 	}),
+/*
 	postcss({
 		extract: false,
 		modules: true,
 		use: ['sass'],
 	}),
+*/
 	terser()
 ];
 
@@ -74,9 +81,18 @@ export default globSync('public/**/js/apps/**/*.js', {follow: true, realpath: tr
 				return null;
 			}
 			let tmp = fileURLToPath(new URL(file, import.meta.url));
+			let cssfile = path.basename(tmp.replace(/\.js/, '.css'));
+			console.log('cssfile: ' + cssfile);
+			let cssplugin = [
+			  postcss({
+				extract: cssfile,
+				minimize: true,
+				sourceMap: true
+			  })
+			];
 			return {
 				input: tmp,
-				plugins: useplugins,
+				plugins: [...useplugins, ...cssplugin],
 				watch: {
 					buildDelay: 500
 				},
@@ -86,6 +102,5 @@ export default globSync('public/**/js/apps/**/*.js', {follow: true, realpath: tr
 					format: 'es',
 					file: tmp.replace(/public\//, 'public/dist/'),
 				}
-
 			}
 		}).filter(Boolean);