@dejwcake/craftable 0.1.10 → 2.0.0

package/package.json

@@ -1,64 +1,92 @@
 {
   "name": "@dejwcake/craftable",
-  "version": "0.1.10",
+  "version": "2.0.0",
   "description": "This is a frontend dependency for Craftable. Craftable is a Laravel-based open-source toolkit for building administration interfaces.",
-  "main": "./dist/index.js",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./scss/*": "./scss/*"
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "js": "babel src --presets babel-preset-es2015 --out-dir dist",
-    "build": "npm run js",
-    "prepublish": "npm run build"
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "lint:style": "stylelint \"scss/**/*.scss\"",
+    "lint:style:fix": "stylelint \"scss/**/*.scss\" --fix",
+    "format": "prettier --write \"src/**/*.{js,vue}\" \"scss/**/*.scss\"",
+    "format:check": "prettier --check \"src/**/*.{js,vue}\" \"scss/**/*.scss\""
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dejwCake/craftable-frontend.git"
   },
   "author": "Brackets",
+  "contributors": [
+    "David Behal <david.behal@dejw.sk>"
+  ],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/dejwCake/craftable-frontend/issues"
   },
   "homepage": "https://github.com/dejwCake/craftable-frontend#readme",
   "dependencies": {
-    "@coreui/coreui": "^2.1.1",
-    "@coreui/icons": "^0.3.0",
-    "axios": "^0.21.0",
-    "bootstrap": "^4.1.3",
-    "font-awesome": "^4.7.0",
-    "jquery": "^3.5.1",
-    "moment": "^2.18.1",
-    "moment-timezone": "^0.5.26",
-    "perfect-scrollbar": "^1.4.0",
-    "popper.js": "^1.14.5",
-    "simple-line-icons": "^2.4.1",
-    "trumbowyg": "^2.10.0",
-    "v-tooltip": "^2.0.0-rc.33",
-    "vee-validate": "^2.0.0-rc.13",
-    "vue": "^2.3.4",
-    "vue-cookie": "^1.1.4",
-    "vue-flatpickr-component": "^2.4.1",
-    "vue-js-modal": "^1.2.8",
-    "vue-multiselect": "^2.0.2",
-    "vue-notification": "^1.3.2",
-    "vue-quill-editor": "^3.0.6",
-    "vue-template-compiler": "^2.5.21",
-    "vue-trumbowyg": "^3.3.0",
-    "vue2-dropzone": "^2.3.5"
+    "@ckeditor/ckeditor5-vue": "^7.3.1",
+    "@coreui/coreui": "^5.3",
+    "@fortawesome/fontawesome-free": "^7.2",
+    "@kyvg/vue3-notification": "^3.4",
+    "@tiptap/extension-image": "^3.22.5",
+    "@tiptap/extension-table": "^3.22.5",
+    "@tiptap/starter-kit": "^3.22.5",
+    "@tiptap/vue-3": "^3.22.5",
+    "@vee-validate/i18n": "^4.15",
+    "@vee-validate/rules": "^4.15",
+    "@vuepic/vue-datepicker": "^12.1",
+    "axios": "^1.9",
+    "bootstrap": "^5.3",
+    "ckeditor5": "^48.0.1",
+    "date-fns": "^4.1",
+    "dayjs": "^1.11",
+    "vee-validate": "^4.15",
+    "vue": "^3.5",
+    "vue-multiselect": "^3.2",
+    "vue3-cookies": "^1.0",
+    "vue3-dropzone": "^2.2",
+    "vue3-popper": "^1.5.0"
   },
   "devDependencies": {
-    "autoprefixer": "^9.3.1",
-    "babel-cli": "^6.26.0",
-    "babel-preset-es2015": "^6.24.1",
-    "cpx": "^1.5.0",
-    "sass": "^1.49.9",
-    "sass-loader": "^8.0.2",
-    "postcss-cli": "^8.3.1",
-    "vue-loader": "^15.9.6",
-    "resolve-url-loader": "^3.1.0"
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vitest/coverage-v8": "^4.1.0",
+    "@vue/test-utils": "^2.4.6",
+    "autoprefixer": "^10.4",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-vue": "^10.8.0",
+    "globals": "^17.5.0",
+    "happy-dom": "^20.8.9",
+    "prettier": "^3.8.1",
+    "sass": "^1.85",
+    "stylelint": "^16.26.1",
+    "stylelint-config-standard-scss": "^14.0.0",
+    "vite": "^8.0.0",
+    "vitest": "^4.1.0"
+  },
+  "bin": {
+    "craftable-publish-components": "scripts/publish-components.js"
   },
   "files": [
     "/dist",
     "/img",
-    "/scss"
+    "/scss",
+    "/scripts",
+    "/src"
   ]
 }

package/scripts/publish-components.js

@@ -0,0 +1,118 @@
+#!/usr/bin/env node
+
+import { cpSync, existsSync, mkdirSync, readdirSync, statSync } from 'fs';
+import { resolve, dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const srcDir = resolve(__dirname, '../src');
+const componentsDir = resolve(srcDir, 'components');
+
+const groups = {
+    auth: {
+        src: resolve(srcDir, 'auth'),
+        dest: 'resources/js/admin/auth',
+        ext: '.vue',
+    },
+    form: {
+        src: resolve(componentsDir, 'form'),
+        dest: 'resources/js/admin/components/form',
+        ext: '.vue',
+    },
+    listing: {
+        src: resolve(componentsDir, 'listing'),
+        dest: 'resources/js/admin/components/listing',
+        ext: '.vue',
+    },
+    components: {
+        src: componentsDir,
+        dest: 'resources/js/admin/components',
+        ext: '.vue',
+        topLevelOnly: true,
+    },
+    translation: {
+        src: resolve(srcDir, 'translation'),
+        dest: 'resources/js/admin/translation',
+        ext: '.vue',
+        recursive: true,
+    },
+    composables: {
+        src: resolve(srcDir, 'composables'),
+        dest: 'resources/js/admin/composables',
+        ext: '.js',
+    },
+    utils: {
+        src: resolve(srcDir, 'utils'),
+        dest: 'resources/js/admin/utils',
+        ext: '.js',
+    },
+    ui: {
+        src: resolve(srcDir, 'ui'),
+        dest: 'resources/js/admin/ui',
+        ext: '.js',
+    },
+};
+
+function collectFiles(dir, ext, recursive = false, basePath = '') {
+    const entries = readdirSync(dir);
+    let files = [];
+
+    for (const entry of entries) {
+        const fullPath = join(dir, entry);
+        const relativePath = basePath ? join(basePath, entry) : entry;
+
+        if (recursive && statSync(fullPath).isDirectory()) {
+            files = files.concat(collectFiles(fullPath, ext, true, relativePath));
+        } else if (entry.endsWith(ext)) {
+            files.push(relativePath);
+        }
+    }
+
+    return files;
+}
+
+const arg = process.argv[2];
+
+if (arg && arg !== 'all' && !groups[arg]) {
+    console.error(`Unknown group: ${arg}`);
+    console.error(`Usage: craftable-publish-components [${Object.keys(groups).join('|')}|all]`);
+    process.exit(1);
+}
+
+const selectedGroups = (!arg || arg === 'all')
+    ? Object.keys(groups)
+    : [arg];
+
+let totalPublished = 0;
+let totalSkipped = 0;
+
+for (const groupName of selectedGroups) {
+    const group = groups[groupName];
+
+    if (!existsSync(group.src)) continue;
+
+    const files = collectFiles(group.src, group.ext, group.recursive || false);
+
+    if (files.length === 0) continue;
+
+    console.log(`\n[${groupName}]`);
+    const destDir = resolve(process.cwd(), group.dest);
+    mkdirSync(destDir, { recursive: true });
+
+    for (const file of files) {
+        const dest = resolve(destDir, file);
+        if (existsSync(dest)) {
+            console.log(`  SKIP  ${file} (already exists)`);
+            totalSkipped++;
+        } else {
+            mkdirSync(dirname(dest), { recursive: true });
+            cpSync(resolve(group.src, file), dest);
+            console.log(`  COPY  ${file}`);
+            totalPublished++;
+        }
+    }
+
+    console.log(`  -> ${group.dest}/`);
+}
+
+console.log(`\nDone: ${totalPublished} published, ${totalSkipped} skipped.`);

package/scss/_images.scss

@@ -15,4 +15,4 @@ $icon-correct: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAMAAA
 $icon-envelope: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAMCAMAAABYzB2OAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAkFBMVEXH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/D////Ps5OFAAAALnRSTlM7y/lE6Eje8VPN2Tm2/Oc/usM21PJLo6FD6l2J/Xlf+P52blWHljRBsOBJ4uRKiL4jtQAAAAFiS0dELyPUIBEAAAAHdElNRQfkAhMWOhEu33lsAAAAbUlEQVQI12NgYNRDAUzMDCysbMgi7BycDHpc3JwIETZuHl4GPT0+fgGYiKCQsJ4eUEhPRFQMIiIuIakHEdJjkpIGkjKycvJ6MCE9BUUleRFlFYhaBqgpqmrqGnqoQkgAm5Amuggfg5Y2qoiOLgAMDiGzm6/OhgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wMi0yMFQwNTo1ODoxNy0wNzowMJE4StUAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDItMjBUMDU6NTg6MTctMDc6MDDgZfJpAAAAAElFTkSuQmCC') !default;
 $icon-error-triangle: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAPCAMAAAAxmgQeAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAgVBMVEX/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH///9KGehDAAAAKXRSTlMAcPEr+fgDyXT9xXMl9q8Bw6XCayHzILljBhrv/O6y7YVas1nj/svorCRsKSIAAAABYktHRCpTvtSeAAAAB3RJTUUH5AITFjoRLt95bAAAAINJREFUGNNdy+0WgUAUheGdKNGHJimhiKF9/zdIzZkh+89517PWAWTewsPf/CVX/pyCkGQYzGzNaBNx+0txwhQpk/hL2Y7MkZMqc1ZQjIWlfemsPMhnRWeszHc9NtVRTbceqTlNzbM5l+Zjrenu2plogZsp9uil7nhI6aeWemGwaaeHN4ExFxoRNvc5AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTAyLTIwVDA1OjU4OjE3LTA3OjAwkThK1QAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wMi0yMFQwNTo1ODoxNy0wNzowMOBl8mkAAAAASUVORK5CYII=') !default;
 $icon-error: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAMAAABxCz6aAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABC1BMVEX/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH/PmH///+e6AaHAAAAV3RSTlMAEi0+KgZ71/WwR1LrtRN5/twkW9QPHvOblciM/IX6A1FY2RbOgjnaG1ccbMRjB2JpHfn0Ve3fM/I1RtMavwLloMV6mBXujdAKQdicDgRgt/jhkgEXIhTroahTAAAAAWJLR0RY7bXEjgAAAAd0SU1FB+QCExY6ErfWKNYAAADqSURBVBjTXZF7WwFBFMZfVmwIqVBGQliSXLqIhFy7uFQy3/+bNHN2ll3vH+e85/fMOfPMGUDJ5dY8B7DL5fVxIf3Qv2OBILd0FFIsHOE7HUeJndgZ56dngsXi3KmEgOfSXCSZiL7UpYgsijRdcoUM49kcrmWRR4FaigZKxTJuqKjg1hyUNVDFnXllEDU1vgLUG6Zt4t40D26kUWLkH/FEufWMdudF0S5eezL3oely7kAWb0CSTg5bsi8hTzbqwGi896IJ7cj59umMNlJjNtYx1O7ePyzEPr+2W54vliuBvn88jg/B7/pvY/l/h4BU9R0ZGd0AAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDItMjBUMDU6NTg6MTgtMDc6MDBncDo8AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTAyLTIwVDA1OjU4OjE4LTA3OjAwFi2CgAAAAABJRU5ErkJggg==') !default;
-$icon-lock: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAARCAMAAADaFm2tAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAaVBMVEXH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/D///+DRpGzAAAAIXRSTlMAIKfwph/n9fnorqQJCw366/wOK7ItpVzu713Ws0JLV/QsgbohAAAAAWJLR0QiXWVcrAAAAAd0SU1FB+QCExY6ErfWKNYAAABvSURBVAjXVc1ZDoAgDEXRKuKM4ow4vv1vUlGicD9oTkJaorsgZCwKyMZjJCkybpmjKEWB/FVVS0EkZNM+7NCb0aN7OGA0Y8Rwv5PC16xphhMjeL1cOF8crmbxT2yb+xn77vE4PJ6npXLvKNLyl9QXBpMVRBNLZCUAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDItMjBUMDU6NTg6MTgtMDc6MDBncDo8AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTAyLTIwVDA1OjU4OjE4LTA3OjAwFi2CgAAAAABJRU5ErkJggg==') !default;
+$icon-lock: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAARCAMAAADaFm2tAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAaVBMVEXH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/DH0/D///+DRpGzAAAAIXRSTlMAIKfwph/n9fnorqQJCw366/wOK7ItpVzu713Ws0JLV/QsgbohAAAAAWJLR0QiXWVcrAAAAAd0SU1FB+QCExY6ErfWKNYAAABvSURBVAjXVc1ZDoAgDEXRKuKM4ow4vv1vUlGicD9oTkJaorsgZCwKyMZjJCkybpmjKEWB/FVVS0EkZNM+7NCb0aN7OGA0Y8Rwv5PC16xphhMjeL1cOF8crmbxT2yb+xn77vE4PJ6npXLvKNLyl9QXBpMVRBNLZCUAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDItMjBUMDU6NTg6MTgtMDc6MDBncDo8AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTAyLTIwVDA1OjU4OjE4LTA3OjAwFi2CgAAAAABJRU5ErkJggg==') !default;

package/scss/_variables.scss

@@ -1,17 +1,24 @@
 // Loaders and icons
-@use "images" as *;
+@import 'images';
 
 // Colors
-$primary: #4273FA !default;
-$danger: #FE3F61 !default;
-$success: #60CF7D !default;
-$warning: #F5BE30 !default;
+$primary: #4273fa !default;
+$danger: #fe3f61 !default;
+$success: #60cf7d !default;
+$warning: #f5be30 !default;
 $mutedText: #b9c8de !default;
 
+// CoreUI 5 sidebar variables
 $sidebar-bg: #485779 !default;
 $sidebar-nav-link-active-bg: $primary !default;
+$sidebar-nav-link-active-color: white !default;
 $sidebar-nav-link-active-icon-color: white !default;
 $pagination-hover-bg: #f3f8ff !default;
 
+// Border radius
+$border-radius: 0.25rem !default;
+$border-radius-sm: 0.2rem !default;
+$border-radius-lg: 0.3rem !default;
+
 // Active loader
-$loader: $threeDots !default;
+$loader: $threeDots !default;

package/scss/app.scss

@@ -1,9 +1,9 @@
 // Variables
-@use 'variables' as *;
+@import 'variables';
 
 // Vendor
-@use 'vendor/index' as *;
+@import 'vendor/index';
 
 // Own styles and overrides
-@use 'overrides/index' as *;
-@use 'styles/index' as *;
+@import 'overrides/index';
+@import 'styles/index';

package/scss/overrides/_alerts.scss

@@ -1,5 +1,3 @@
-@use "../variables" as *;
-
 .alert-success {
     color: $success;
 }

package/scss/overrides/_badges.scss

@@ -1,17 +1 @@
-@use "../variables" as *;
-
-.badge-info {
-  background-color: $primary;
-}
-
-.badge-success {
-  background-color: $success;
-}
-
-.badge-danger {
-  background-color: $danger;
-}
-
-.badge-warning {
-  background-color: $warning;
-}
+// Badge overrides removed — BS5 uses .bg-* utilities instead of .badge-*

package/scss/overrides/_buttons.scss

@@ -1,36 +1,73 @@
-@use "../variables" as *;
-
 .btn {
     cursor: pointer;
+
     &-primary,
     &-info {
         background-color: $primary;
         border-color: $primary;
+        color: white;
+
         &:hover {
             background-color: darken($primary, 10);
             border-color: darken($primary, 10);
+            color: white;
+        }
+
+        &:active,
+        &:focus {
+            color: white;
         }
     }
+
     &-danger {
         background-color: $danger;
         border-color: $danger;
+        color: white;
+
         &:hover {
             background-color: darken($danger, 10);
             border-color: darken($danger, 10);
+            color: white;
+        }
+
+        &:active,
+        &:focus {
+            color: white;
         }
     }
+
     &-success {
         background-color: $success;
         border-color: $success;
+        color: white;
+
         &:hover {
             background-color: darken($success, 10);
             border-color: darken($success, 10);
+            color: white;
+        }
+
+        &:active,
+        &:focus {
+            color: white;
         }
     }
+
+    &-warning {
+        color: white;
+
+        &:hover,
+        &:active,
+        &:focus {
+            color: white;
+        }
+    }
+
     &-secondary {
         color: #263238;
         background-color: #fff;
         border-color: #ccc;
+
         &:hover,
         &:active,
         &:focus {
@@ -39,26 +76,46 @@
             border-color: #ccc !important;
         }
     }
+
     &-dialog {
         display: flex;
         height: 100%;
         justify-content: center;
         align-items: center;
     }
+
+    &:not([class*='btn-outline-']) {
+        &:hover,
+        &:active,
+        &:focus,
+        &:visited {
+            color: white;
+        }
+    }
+
+    &:disabled {
+        color: white;
+    }
+
     &:hover,
     &:active,
     &:focus,
     &:visited {
-        color: white;
         box-shadow: none;
     }
+
     &:hover {
-        .fa-trash-o {
+        .fa-trash-can {
             animation: swing 1s;
             transform-origin: top center;
         }
     }
-    i.fa {
-        color: white;
+
+    &:not(.btn-outline-secondary) {
+        i.fa,
+        i.fa-solid,
+        i.fa-regular {
+            color: white;
+        }
     }
-}
+}

package/scss/overrides/_cards.scss

@@ -1,14 +1,13 @@
-@use "../variables" as *;
-
 .card {
     border: 1px solid #d6dee3;
 }
 
 .card-header {
     background-color: white;
-    border-bottom: 1px solid rgba(207, 216, 220, 0.35);
+    border-bottom: 1px solid rgb(207 216 220 / 35%);
     color: $primary;
     font-weight: 600;
+    font-size: 0.875rem;
     padding: 1.25rem;
 }
 
@@ -21,54 +20,8 @@
 
 .card small {
     color: $mutedText;
-    a {
-        color: $primary
-    }
-}
-
-.card-block {
-    padding-bottom: 0;
-    .card-header {
-        border-bottom: 0;
-    }
-}
-
-.loading .card-block {
-    position: relative;
-    pointer-events: none;
-}
 
-.loading .card-block:before {
-    content: $loader;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(255, 255, 255, 0.75);
-    z-index: 3;
-}
-
-.form-edit,
-.form-create {
-    .card-block:before {
-        display: none !important;
-    }
-}
-
-@media (max-width: 767px) {
-    .card-block .card-header {
-        padding-left: 0;
+    a {
+        color: $primary;
     }
 }
-
-@media (max-width: 450px) {
-    .card-header>.btn.pull-right {
-        display: block;
-        float: none;
-        margin-top: 15px;
-    }
-}