merdan
/
sarga
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Vue Draggable Added

This commit is contained in:
Devansh 2022-02-01 18:18:55 +05:30
parent 37ab87e54c
commit 836f3679b1
6 changed files with 66 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/Webkul/Admin/src/Resources/views/catalog/products/accordians/images.blade.php
View File

@ -10,11 +10,13 @@
<product-image></product-image> <product-image></product-image>
<span class="control-error" v-if="{!! $errors->has('images.*') !!}"> <span class="control-error" v-if="{!! $errors->has('images.*') !!}">
@php $count = 1; @endphp @php
$count = 1;
@endphp
@foreach ($errors->get('images.*') as $key => $message) @foreach ($errors->get('images.*') as $key => $message)
@php @php
echo str_replace($key, 'Image'.$count, $message[0]); echo str_replace($key, 'Image' . $count, $message[0]);
$count++; $count++;
@endphp @endphp
@ -34,13 +36,15 @@
<script type="text/x-template" id="product-image-template"> <script type="text/x-template" id="product-image-template">
<div> <div>
<div class="image-wrapper"> <div class="image-wrapper">
<product-image-item <draggable v-model="items" group="people" @end="onDragEnd">
v-for='(image, index) in items' <product-image-item
:key='image.id' v-for='(image, index) in items'
:image="image" :key='image.id'
@onRemoveImage="removeImage($event)" :image="image"
@onImageSelected="imageSelected($event)" @onRemoveImage="removeImage($event)"
></product-image-item> @onImageSelected="imageSelected($event)">
</product-image-item>
</draggable>
</div> </div>
<label class="btn btn-lg btn-primary" style="display: inline-block; width: auto" @click="createFileType"> <label class="btn btn-lg btn-primary" style="display: inline-block; width: auto" @click="createFileType">
@ -73,7 +77,7 @@
imageCount: 0, imageCount: 0,
items: [] items: [],
} }
}, },
@ -102,7 +106,7 @@
this.items.push({'id': 'image_' + this.imageCount}); this.items.push({'id': 'image_' + this.imageCount});
}, },
removeImage (image) { removeImage: function(image) {
let index = this.items.indexOf(image) let index = this.items.indexOf(image)
Vue.delete(this.items, index); Vue.delete(this.items, index);
@ -118,7 +122,11 @@
self.items.push({'id': 'image_' + self.imageCount, file: image}); self.items.push({'id': 'image_' + self.imageCount, file: image});
} }
}); });
} },
onDragEnd: function() {
console.log(this.items);
},
} }
}); });

63
packages/Webkul/Ui/package.json
View File

@ -1,33 +1,34 @@
{ {
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "npm run development", "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", "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": "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", "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", "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",
"prod": "npm run production", "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": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}, },
"devDependencies": { "devDependencies": {
"axios": "^0.21.0", "axios": "^0.21.0",
"cross-env": "^6.0.3", "cross-env": "^6.0.3",
"flatpickr": "^4.6.3", "flatpickr": "^4.6.3",
"jquery": "^3.4.1", "jquery": "^3.4.1",
"laravel-mix": "^5.0.0", "laravel-mix": "^5.0.0",
"laravel-mix-merge-manifest": "^0.1.2", "laravel-mix-merge-manifest": "^0.1.2",
"sass": "^1.24.4", "sass": "^1.24.4",
"sass-loader": "^8.0.2", "sass-loader": "^8.0.2",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-template-compiler": "^2.6.14" "vue-template-compiler": "^2.6.14"
}, },
"dependencies": { "dependencies": {
"@babel/polyfill": "^7.7.0", "@babel/polyfill": "^7.7.0",
"tooltip.js": "^1.3.1", "tooltip.js": "^1.3.1",
"url-polyfill": "^1.1.5", "url-polyfill": "^1.1.5",
"url-search-params-polyfill": "^6.0.0", "url-search-params-polyfill": "^6.0.0",
"v-tooltip": "^2.0.3", "v-tooltip": "^2.0.3",
"vue-multiselect": "^2.1.6", "vue-multiselect": "^2.1.6",
"vue-swatches": "^1.0.3" "vue-swatches": "^1.0.3",
} "vuedraggable": "^2.24.3"
}
} }

2
packages/Webkul/Ui/publishable/assets/js/ui.js vendored
View File

File diff suppressed because one or more lines are too long

7
packages/Webkul/Ui/publishable/assets/js/ui.js.LICENSE.txt
View File

@ -30,3 +30,10 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE. * SOFTWARE.
*/ */
/**!
* Sortable 1.10.2
* @author RubaXa <trash@rubaxa.org>
* @author owenm <owen23355@gmail.com>
* @license MIT
*/

2
packages/Webkul/Ui/publishable/assets/mix-manifest.json
View File

@ -1,4 +1,4 @@
{ {
"/js/ui.js": "/js/ui.js?id=99de3c7f62be5fb50eaf", "/js/ui.js": "/js/ui.js?id=421e7a0c9d071a0d2ccc",
"/css/ui.css": "/css/ui.css?id=57354f5eea4eb6f616e9" "/css/ui.css": "/css/ui.css?id=57354f5eea4eb6f616e9"
} }

5
packages/Webkul/Ui/src/Resources/assets/js/app.js vendored
View File

@ -1,5 +1,6 @@
import VTooltip from "v-tooltip"; import draggable from 'vuedraggable';
import { Multiselect } from "vue-multiselect"; import { Multiselect } from "vue-multiselect";
import VTooltip from "v-tooltip";
import Accordian from "./components/accordian"; import Accordian from "./components/accordian";
import DatagridPlus from "./components/datagrid/datagrid-plus"; import DatagridPlus from "./components/datagrid/datagrid-plus";
@ -31,6 +32,8 @@ import SlugifyTarget from "./directives/slugify-target";
VTooltip.options.defaultDelay = 0; VTooltip.options.defaultDelay = 0;
Vue.config.productionTip = false; Vue.config.productionTip = false;
Vue.use(draggable);
/* component section */ /* component section */
Vue.directive("tooltip", VTooltip.VTooltip); Vue.directive("tooltip", VTooltip.VTooltip);
Vue.component("datagrid-plus", DatagridPlus); Vue.component("datagrid-plus", DatagridPlus);