some CSS upgrades: move to dart sass 3 compatible, logical CSS properties for rtl

package.json

@@ -31,15 +31,16 @@
     "lodash.isequal": "^4.5.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "@rollup/plugin-replace": "^3.0.0",
-    "@vitejs/plugin-vue": "^1.9.4",
-    "@vue/babel-preset-app": "^4.5.15",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-replace": "^6.0.1",
+    "@rollup/plugin-terser": "latest",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/babel-preset-app": "^5.0.8",
     "@vue/cli-plugin-unit-jest": "^4.5.15",
     "@vue/cli-service": "^4.5.15",
     "@vue/component-compiler-utils": "^3.3.0",
-    "@vue/test-utils": "^2.0.0-rc.16",
+    "@vue/test-utils": "2.4.6",
     "@vuepress/bundler-vite": "^2.0.0-rc.15",
     "@vuepress/plugin-google-analytics": "^2.0.0-rc.15",
     "@vuepress/plugin-register-components": "^2.0.0-rc.15",
@@ -50,15 +51,15 @@
     "chromedriver": "^95.0.0",
     "eslint-config-airbnb": "^18.2.0",
     "postcss-loader": "^6.2.0",
-    "rollup": "^2.72.1",
+    "rollup": "4.28.1",
     "rollup-plugin-analyzer": "^4.0.0",
-    "rollup-plugin-scss": "3",
-    "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.43.4",
+    "rollup-plugin-scss": "^4.0.0",
+
+    "sass": "^1.82.0",
     "sinon": "^11.1.2",
     "typescript": "^4.4.4",
-    "vite": "^2.6.13",
-    "vue": "^3.2.20",
+    "vite": "^6.0.3",
+    "vue": "^3.5.13",
     "vue-jest": "^5.0.0-0",
     "vuepress": "^2.0.0-rc.15",
     "webpack-node-externals": "^3.0.0"

rollup.config.js

@@ -4,8 +4,11 @@ import resolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import VuePlugin from '@vitejs/plugin-vue'
 import scss from 'rollup-plugin-scss'
+import chalk from 'chalk'
+import terser from '@rollup/plugin-terser';
+
+import  pkg from './package.json' with { type: "json" };
 
-const pkg = require('./package.json')
 const name = pkg.name
 
 const banner = `/*!
@@ -59,7 +62,7 @@ export default packageConfigs
 
 function createConfig(format, output, plugins = []) {
   if (!output) {
-    console.log(require('chalk').yellow(`invalid format: "${format}"`))
+    console.log(chalk.yellow(`invalid format: "${format}"`))
     process.exit(1)
   }
 
@@ -170,7 +173,6 @@ function createProductionConfig(format) {
 }
 
 function createMinifiedConfig(format) {
-  const { terser } = require('rollup-plugin-terser')
   return createConfig(
     format,
     {

src/components/VgtGlobalSearch.vue

@@ -1,72 +1,62 @@
 <template>
-<div v-if="showControlBar" class="vgt-global-search vgt-clearfix">
-  <div class="vgt-global-search__input vgt-pull-left">
-    <form @submit.prevent v-if="searchEnabled" role="search">
-      <label :for="id">
-        <span aria-hidden="true" class="input__icon">
-          <div class="magnifying-glass"></div>
-        </span>
-        <span class="sr-only">Search</span>
-      </label>
-    <input
-      :id="id"
-      type="text"
-      class="vgt-input vgt-pull-left"
-      :placeholder="globalSearchPlaceholder"
-      :value="value"
-      @input="updateValue($event.target.value)"
-      @keyup.enter="entered($event.target.value)" />
-    </form>
-  </div>
+  <div v-if="showControlBar" class="vgt-global-search vgt-clearfix">
+    <div class="vgt-global-search__input vgt-pull-start">
+      <form @submit.prevent v-if="searchEnabled" role="search">
+        <label :for="id">
+          <span aria-hidden="true" class="input__icon">
+            <div class="magnifying-glass"></div>
+          </span>
+          <span class="sr-only">Search</span>
+        </label>
+        <input
+          :id="id"
+          type="text"
+          class="vgt-input vgt-pull-start"
+          :placeholder="globalSearchPlaceholder"
+          :value="value"
+          @input="updateValue($event.target.value)"
+          @keyup.enter="entered($event.target.value)"
+        />
+      </form>
+    </div>
 
-  <div class="vgt-global-search__actions vgt-pull-right">
-    <slot name="internal-table-actions">
-    </slot>
+    <div class="vgt-global-search__actions vgt-pull-right">
+      <slot name="internal-table-actions"> </slot>
+    </div>
   </div>
-</div>
 </template>
 
 <script>
 export default {
   name: 'VgtGlobalSearch',
-  props: [
-    'value',
-    'searchEnabled',
-    'globalSearchPlaceholder',
-  ],
-  emits: [
-    'input',
-    'keyup',
-    'enter',
-  ],
+  props: ['value', 'searchEnabled', 'globalSearchPlaceholder'],
+  emits: ['input', 'keyup', 'enter'],
   data() {
     return {
       globalSearchTerm: null,
       id: this.getId(),
-    };
+    }
   },
   computed: {
     showControlBar() {
-      if (this.searchEnabled) return true;
-      if (this.$slots && this.$slots['internal-table-actions']) return true;
-      return false;
+      if (this.searchEnabled) return true
+      if (this.$slots && this.$slots['internal-table-actions']) return true
+      return false
     },
   },
   methods: {
     updateValue(value) {
-      this.$emit('input', value);
-      this.$emit('keyup', value);
+      this.$emit('input', value)
+      this.$emit('keyup', value)
     },
     entered(value) {
-      this.$emit('enter', value);
+      this.$emit('enter', value)
     },
     getId() {
-      return `vgt-search-${Math.floor(Math.random() * Date.now())}`;
+      return `vgt-search-${Math.floor(Math.random() * Date.now())}`
     },
   },
-};
+}
 </script>
 
-<style>
-
-</style>
+<style></style>