Merge pull request #5359 from funder7/feature/velocity_laravel-Mix@6_migration

update: Webkul\Velocity laravel-mix @ v6.0
This commit is contained in:
Devansh 2021-12-13 10:56:01 +05:30 committed by GitHub
commit a37c690746
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 225 additions and 124 deletions

View File

@ -2,29 +2,36 @@
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21.0",
"cross-env": "^5.1.4",
"axios": "^0.24.0",
"clean-webpack-plugin": "^4.0.0",
"colors": "^1.4.0",
"jquery": "^3.2",
"laravel-mix": "^2.1",
"laravel-mix-merge-manifest": "^0.1.1",
"vue": "^2.1.10",
"vue-carousel": "^0.18.0"
"laravel-mix": "^6.0.39",
"laravel-mix-clean": "^0.1.0",
"laravel-mix-merge-manifest": "^2.0.0",
"sass": "^1.44.0",
"resolve-url-loader": "^4.0.0",
"sass-loader": "^12.3.0",
"vue": "^2.6.14",
"vue-carousel": "^0.18.0",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14"
},
"dependencies": {
"accounting": "^0.4.1",
"bootstrap-sass": "^3.4.1",
"font-awesome": "^4.7.0",
"lazysizes": "^5.2.2",
"material-icons": "^0.7.6",
"material-icons": "^1.10.3",
"vee-validate": "^2.2.15",
"vue-slider-component": "^3.1.0"
"vue-slider-component": "^3.2.15"
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,65 @@
/*!
* Bootstrap v3.4.1 (https://getbootstrap.com/)
* Copyright 2011-2019 Twitter, Inc.
* Licensed under the MIT license
*/
/*!
* Sizzle CSS Selector Engine v2.3.6
* https://sizzlejs.com/
*
* Copyright JS Foundation and other contributors
* Released under the MIT license
* https://js.foundation/
*
* Date: 2021-02-16
*/
/*!
* Vue.js v2.6.14
* (c) 2014-2021 Evan You
* Released under the MIT License.
*/
/*!
* accounting.js v0.4.1
* Copyright 2014 Open Exchange Rates
*
* Freely distributable under the MIT license.
* Portions of accounting.js are inspired or borrowed from underscore.js
*
* Full details and documentation:
* http://openexchangerates.github.io/accounting.js/
*/
/*!
* jQuery JavaScript Library v3.6.0
* https://jquery.com/
*
* Includes Sizzle.js
* https://sizzlejs.com/
*
* Copyright OpenJS Foundation and other contributors
* Released under the MIT license
* https://jquery.org/license
*
* Date: 2021-03-02T17:08Z
*/
/*!
* vue-carousel v0.18.0-alpha
* (c) 2019 todd.beauchamp@ssense.com
* https://github.com/ssense/vue-carousel#readme
*/
/**
* vee-validate v2.2.15
* (c) 2019 Abdelrahman Awad
* @license MIT
*/
/**
* vue-class-component v7.0.1
* (c) 2015-present Evan You
* @license MIT
*/

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1 @@
(()=>{"use strict";var e,r,t,o={},n={};function i(e){var r=n[e];if(void 0!==r)return r.exports;var t=n[e]={id:e,exports:{}};return o[e].call(t.exports,t,t.exports,i),t.exports}i.m=o,e=[],i.O=(r,t,o,n)=>{if(!t){var f=1/0;for(c=0;c<e.length;c++){for(var[t,o,n]=e[c],l=!0,u=0;u<t.length;u++)(!1&n||f>=n)&&Object.keys(i.O).every((e=>i.O[e](t[u])))?t.splice(u--,1):(l=!1,n<f&&(f=n));if(l){e.splice(c--,1);var a=o();void 0!==a&&(r=a)}}return r}n=n||0;for(var c=e.length;c>0&&e[c-1][2]>n;c--)e[c]=e[c-1];e[c]=[t,o,n]},i.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return i.d(r,{a:r}),r},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,i.t=function(e,o){if(1&o&&(e=this(e)),8&o)return e;if("object"==typeof e&&e){if(4&o&&e.__esModule)return e;if(16&o&&"function"==typeof e.then)return e}var n=Object.create(null);i.r(n);var f={};r=r||[null,t({}),t([]),t(t)];for(var l=2&o&&e;"object"==typeof l&&!~r.indexOf(l);l=t(l))Object.getOwnPropertyNames(l).forEach((r=>f[r]=()=>e[r]));return f.default=()=>e,i.d(n,f),n},i.d=(e,r)=>{for(var t in r)i.o(r,t)&&!i.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},i.e=()=>Promise.resolve(),i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e={929:0,166:0,362:0};i.O.j=r=>0===e[r];var r=(r,t)=>{var o,n,[f,l,u]=t,a=0;if(f.some((r=>0!==e[r]))){for(o in l)i.o(l,o)&&(i.m[o]=l[o]);if(u)var c=u(i)}for(r&&r(t);a<f.length;a++)n=f[a],i.o(e,n)&&e[n]&&e[n][0](),e[f[a]]=0;return i.O(c)},t=self.webpackChunk=self.webpackChunk||[];t.forEach(r.bind(null,0)),t.push=r.bind(null,t.push.bind(t))})()})();

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,10 @@
{
"/js/velocity.js": "/js/velocity.js?id=8b7c2449a002be2a8c5c",
"/js/velocity-core.js": "/js/velocity-core.js?id=fdfafddb0d317a775f6d",
"/css/velocity-admin.css": "/css/velocity-admin.css?id=4322502d80a0e4a0affd",
"/css/velocity.css": "/css/velocity.css?id=2434338ae6b54d9794a9"
"/js/velocity-core.js": "/js/velocity-core.js?id=750397b690236ad72190",
"/js/velocity.js": "/js/velocity.js?id=69b1b7d835ba557ef75c",
"/js/manifest.js": "/js/manifest.js?id=0632f4b734c0b094a611",
"/js/components.js": "/js/components.js?id=bf20888ef5999fc96c95",
"/css/velocity.css": "/css/velocity.css?id=ad5bad881537140728f1",
"/css/velocity-admin.css": "/css/velocity-admin.css?id=301f732acd63a842dc52",
"/images/Camera.svg": "/images/Camera.svg?id=b2fd2f9e17e1ccee96e2",
"/images/icon-search.svg": "/images/icon-search.svg?id=a5f38a895551b8a015b2"
}

View File

@ -1,8 +1,8 @@
/**
* Main imports.
*/
import Vue from 'vue';
import axios from 'axios';
import Vue from 'vue';
import axios from 'axios';
/**
* Helper functions.
@ -29,10 +29,13 @@ window.eventBus = new Vue();
window.axios = axios;
// TODO once every package is migrated to laravel-mix 6, this can be removed safely (jquery will be injected when needed)
window.jQuery = window.$ = require('jquery');
window.BootstrapSass = require('bootstrap-sass');
window.lazySize = require('lazysizes');
window.getBaseUrl = getBaseUrl;
window.isMobile = isMobile;
@ -58,8 +61,7 @@ $(function() {
if (
isMobile() &&
removeTrailingSlash(baseUrl) ===
removeTrailingSlash(window.location.href)
removeTrailingSlash(baseUrl) === removeTrailingSlash(window.location.href)
) {
/**
* Event for mobile to check the user interaction for the homepage. In mobile,

View File

@ -3,14 +3,8 @@ export function getBaseUrl() {
}
export function isMobile() {
if (
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i |
/mobi/i.test(navigator.userAgent)
) {
return true;
}
return false;
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i |
/mobi/i.test(navigator.userAgent);
}
export function loadDynamicScript(src, onScriptLoaded) {

View File

@ -2,9 +2,10 @@
* Main imports.
*/
import Accounting from 'accounting';
import Vue from 'vue';
import VeeValidate from 'vee-validate';
import VueCarousel from 'vue-carousel';
import 'lazysizes';
import translate from '@Components/trans';
/**
* Lang imports.
@ -42,43 +43,43 @@ Vue.filter('currency', function(value, argument) {
/**
* Global components.
**/
Vue.component('vue-slider', require('vue-slider-component'));
Vue.component('mini-cart-button', require('./UI/components/mini-cart-button'));
Vue.component('mini-cart', require('./UI/components/mini-cart'));
Vue.component('modal-component', require('./UI/components/modal'));
Vue.component('add-to-cart', require('./UI/components/add-to-cart'));
Vue.component('star-ratings', require('./UI/components/star-rating'));
Vue.component('quantity-btn', require('./UI/components/quantity-btn'));
Vue.component('quantity-changer', require('./UI/components/quantity-changer'));
Vue.component('proceed-to-checkout', require('./UI/components/proceed-to-checkout'));
Vue.component('compare-component-with-badge', require('./UI/components/header-compare-with-badge'));
Vue.component('searchbar-component', require('./UI/components/header-searchbar'));
Vue.component('wishlist-component-with-badge', require('./UI/components/header-wishlist-with-badge'));
Vue.component('mobile-header', require('./UI/components/header-mobile'));
Vue.component('sidebar-header', require('./UI/components/header-sidebar'));
Vue.component('right-side-header', require('./UI/components/header-right-side'));
Vue.component('sidebar-component', require('./UI/components/sidebar'));
Vue.component('product-card', require('./UI/components/product-card'));
Vue.component('wishlist-component', require('./UI/components/wishlist'));
Vue.component('carousel-component', require('./UI/components/carousel'));
Vue.component('slider-component', require('./UI/components/banners'));
Vue.component('child-sidebar', require('./UI/components/child-sidebar'));
Vue.component('card-list-header', require('./UI/components/card-header'));
Vue.component('logo-component', require('./UI/components/image-logo'));
Vue.component('magnify-image', require('./UI/components/image-magnifier'));
Vue.component('image-search-component', require('./UI/components/image-search'));
Vue.component('compare-component', require('./UI/components/product-compare'));
Vue.component('shimmer-component', require('./UI/components/shimmer-component'));
Vue.component('responsive-sidebar', require('./UI/components/responsive-sidebar'));
Vue.component('product-quick-view', require('./UI/components/product-quick-view'));
Vue.component('product-quick-view-btn', require('./UI/components/product-quick-view-btn'));
Vue.component('recently-viewed', require('./UI/components/recently-viewed'));
Vue.component('product-collections', require('./UI/components/product-collections'));
Vue.component('hot-category', require('./UI/components/hot-category'));
Vue.component('hot-categories', require('./UI/components/hot-categories'));
Vue.component('popular-category', require('./UI/components/popular-category'));
Vue.component('popular-categories', require('./UI/components/popular-categories'));
Vue.component('velocity-overlay-loader', require('./UI/components/overlay-loader'));
Vue.component('vue-slider', () => import('vue-slider-component'));
Vue.component('mini-cart-button', () => import('@Components/mini-cart-button'));
Vue.component('mini-cart', () => import('@Components/mini-cart'));
Vue.component('modal-component', () => import('@Components/modal'));
Vue.component('add-to-cart', () => import('@Components/add-to-cart'));
Vue.component('star-ratings', () => import('@Components/star-rating'));
Vue.component('quantity-btn', () => import('@Components/quantity-btn'));
Vue.component('quantity-changer', () => import('@Components/quantity-changer'));
Vue.component('proceed-to-checkout', () => import('@Components/proceed-to-checkout'));
Vue.component('compare-component-with-badge', () => import('@Components/header-compare-with-badge'));
Vue.component('searchbar-component', () => import('@Components/header-searchbar'));
Vue.component('wishlist-component-with-badge', () => import('@Components/header-wishlist-with-badge'));
Vue.component('mobile-header', () => import('@Components/header-mobile'));
Vue.component('sidebar-header', () => import('@Components/header-sidebar'));
Vue.component('right-side-header', () => import('@Components/header-right-side'));
Vue.component('sidebar-component', () => import('@Components/sidebar'));
Vue.component('product-card', () => import('@Components/product-card'));
Vue.component('wishlist-component', () => import('@Components/wishlist'));
Vue.component('carousel-component', () => import('@Components/carousel'));
Vue.component('slider-component', () => import('@Components/banners'));
Vue.component('child-sidebar', () => import('@Components/child-sidebar'));
Vue.component('card-list-header', () => import('@Components/card-header'));
Vue.component('logo-component', () => import('@Components/image-logo'));
Vue.component('magnify-image', () => import('@Components/image-magnifier'));
Vue.component('image-search-component', () => import('@Components/image-search'));
Vue.component('compare-component', () => import('@Components/product-compare'));
Vue.component('shimmer-component', () => import('@Components/shimmer-component'));
Vue.component('responsive-sidebar', () => import('@Components/responsive-sidebar'));
Vue.component('product-quick-view', () => import('@Components/product-quick-view'));
Vue.component('product-quick-view-btn', () => import('@Components/product-quick-view-btn'));
Vue.component('recently-viewed', () => import('@Components/recently-viewed'));
Vue.component('product-collections', () => import('@Components/product-collections'));
Vue.component('hot-category', () => import('@Components/hot-category'));
Vue.component('hot-categories', () => import('@Components/hot-categories'));
Vue.component('popular-category', () => import('@Components/popular-category'));
Vue.component('popular-categories', () => import('@Components/popular-categories'));
Vue.component('velocity-overlay-loader', () => import('@Components/overlay-loader'));
Vue.component('vnode-injector', {
functional: true,
props: ['nodes'],
@ -91,10 +92,11 @@ Vue.component('vnode-injector', {
* Start from here.
**/
$(function() {
/**
* Define a mixin object.
*/
Vue.mixin(require('./UI/components/trans'));
Vue.mixin(translate);
Vue.mixin({
data: function() {
@ -120,24 +122,23 @@ $(function() {
toggleSidebar: function(id, { target }, type) {
if (
Array.from(target.classList)[0] == 'main-category' ||
Array.from(target.parentElement.classList)[0] ==
'main-category'
Array.from(target.classList)[0] === 'main-category'
|| Array.from(target.parentElement.classList)[0] === 'main-category'
) {
let sidebar = $(`#sidebar-level-${id}`);
if (sidebar && sidebar.length > 0) {
if (type == 'mouseover') {
if (type === 'mouseover') {
this.show(sidebar);
} else if (type == 'mouseout') {
} else if (type === 'mouseout') {
this.hide(sidebar);
}
}
} else if (
Array.from(target.classList)[0] == 'category' ||
Array.from(target.classList)[0] == 'category-icon' ||
Array.from(target.classList)[0] == 'category-title' ||
Array.from(target.classList)[0] == 'category-content' ||
Array.from(target.classList)[0] == 'rango-arrow-right'
Array.from(target.classList)[0] === 'category' ||
Array.from(target.classList)[0] === 'category-icon' ||
Array.from(target.classList)[0] === 'category-title' ||
Array.from(target.classList)[0] === 'category-content' ||
Array.from(target.classList)[0] === 'rango-arrow-right'
) {
let parentItem = target.closest('li');
@ -152,18 +153,18 @@ $(function() {
let subCategories1 = Array.from(subCategories)[0];
subCategories1 = $(subCategories1);
if (type == 'mouseover') {
if (type === 'mouseover') {
this.show(subCategories1);
let sidebarChild = subCategories1.find(
'.sidebar'
);
this.show(sidebarChild);
} else if (type == 'mouseout') {
} else if (type === 'mouseout') {
this.hide(subCategories1);
}
} else {
if (type == 'mouseout') {
if (type === 'mouseout') {
let sidebar = $(`#${id}`);
sidebar.hide();
}
@ -208,9 +209,7 @@ $(function() {
});
},
isMobile: function() {
return isMobile();
},
isMobile: isMobile,
loadDynamicScript: function(src, onScriptLoaded) {
loadDynamicScript(src, onScriptLoaded);
@ -256,7 +255,7 @@ $(function() {
}
});
const app = new Vue({
window.app = new Vue({
el: '#app',
data: function() {
@ -349,12 +348,11 @@ $(function() {
.then(response => {
this.sharedRootCategories = response.data.categories;
$(
`<style type='text/css'> .sub-categories{ min-height:${response
.data.categories.length * 30}px;} </style>`
`<style type='text/css'> .sub-categories{ min-height:${ response.data.categories.length * 30 }px;} </style>`
).appendTo('head');
})
.catch(error => {
console.log('failed to load categories');
console.error(`failed to load categories:`, error);
});
},
@ -390,6 +388,4 @@ $(function() {
},
}
});
window.app = app;
});

View File

@ -32,7 +32,7 @@
@include('shop::layouts.styles')
</head>
<body @if (core()->getCurrentLocale() && core()->getCurrentLocale()->direction == 'rtl') class="rtl" @endif>
<body @if (core()->getCurrentLocale() && core()->getCurrentLocale()->direction === 'rtl') class="rtl" @endif>
{!! view_render_event('bagisto.shop.layout.body.before') !!}
{{-- main app --}}

View File

@ -1,7 +1,9 @@
<script
type="text/javascript"
src="{{ asset('themes/velocity/assets/js/velocity-core.js') }}">
</script>
{{-- mix versioned compiled files --}}
<script type="text/javascript" src="{{ asset(mix('/js/manifest.js', 'themes/velocity/assets')) }}"></script>
<script type="text/javascript" src="{{ asset(mix('/js/velocity-core.js', 'themes/velocity/assets')) }}"></script>
<script type="text/javascript" src="{{ asset(mix('/js/components.js', 'themes/velocity/assets')) }}"></script>
<script type="text/javascript">
(() => {
@ -56,4 +58,4 @@
<script>
{!! core()->getConfigData('general.content.custom_scripts.custom_javascript') !!}
</script>
</script>

View File

@ -5,7 +5,7 @@
<link rel="stylesheet" href="{{ asset('themes/velocity/assets/css/bootstrap.min.css') }}" />
{{-- bootstrap flipped for rtl --}}
@if (core()->getCurrentLocale() && core()->getCurrentLocale()->direction == 'rtl')
@if (core()->getCurrentLocale() && core()->getCurrentLocale()->direction === 'rtl')
<link href="{{ asset('themes/velocity/assets/css/bootstrap-flipped.css') }}" rel="stylesheet">
@endif
@ -18,4 +18,4 @@
{{-- custom css --}}
<style>
{!! core()->getConfigData('general.content.custom_scripts.custom_css') !!}
</style>
</style>

View File

@ -1,40 +1,70 @@
const { mix } = require('laravel-mix');
const path = require('path');
const mix = require('laravel-mix');
const colors = require('colors');
require('laravel-mix-merge-manifest');
require('laravel-mix-clean');
let publicPath = '../../../public/themes/velocity/assets';
const prodPublicPath = path.join('publishable', 'assets');
const devPublicPath = path.join('..', '..', '..', 'public', 'themes', 'velocity', 'assets');
const publicPath = mix.inProduction() ? prodPublicPath : devPublicPath;
if (mix.inProduction()) {
publicPath = 'publishable/assets';
}
console.log(colors.bold.blue(`Assets will be published in: ${publicPath}`));
mix.setPublicPath(publicPath).mergeManifest();
mix.disableNotifications();
const assetsPath = path.join(__dirname, 'src', 'Resources', 'assets');
const jsPath = path.join(assetsPath, 'js');
const imagesPath = path.join(assetsPath, 'images');
mix
.js(__dirname + '/src/Resources/assets/js/app-core.js', 'js/velocity-core.js')
.js(
__dirname + '/src/Resources/assets/js/app.js',
'js/velocity.js'
.setPublicPath(publicPath)
.js(path.join(jsPath, 'app-core.js'), 'js/velocity-core.js')
.js(path.join(jsPath, 'app.js'), 'js/velocity.js')
.vue()
.alias({
'@Components': path.join(jsPath, 'UI', 'components')
})
.extract({
to: `/js/components.js`,
test(mod){ return /(component|style|loader|node)/.test(mod.nameForCondition()) }
}
)
.copy(__dirname + '/src/Resources/assets/images', publicPath + '/images')
.copy(imagesPath, path.join(publicPath, 'images'))
.sass(
__dirname + '/src/Resources/assets/sass/admin.scss',
__dirname + '/' + publicPath + '/css/velocity-admin.css'
path.join(assetsPath, 'sass', 'admin.scss'),
path.join(__dirname, publicPath, 'css', 'velocity-admin.css'),
)
.sass(
__dirname + '/src/Resources/assets/sass/app.scss',
__dirname + '/' + publicPath + '/css/velocity.css',
path.join(assetsPath, 'sass', 'app.scss'),
path.join(__dirname, publicPath, 'css', 'velocity.css'),
{
includePaths: ['node_modules/bootstrap-sass/assets/stylesheets/']
sassOptions : {
includePaths: [ 'node_modules/bootstrap-sass/assets/stylesheets/' ]
}
}
)
.clean({
// enable `dry` before adding new paths:
// dry: true,
cleanOnceBeforeBuildPatterns: [
'js/**/*',
'css/velocity.css',
'css/velocity-admin.css',
'mix-manifest.json',
]
})
.options({
processCssUrls: false
});
processCssUrls: false,
clearConsole : mix.inProduction()
})
.disableNotifications()
.mergeManifest();
if (mix.inProduction()) {
mix.version();