<perfect-scrollbar class="scrollbar-margins large-margin scroll-demo p-0"   v-once :settings="settings3">
<img :src="getImgUrl('banner/1.jpg')" alt="girl" width="800" height="600" >
</perfect-scrollbar>

import { getImgUrl } from "@/composables/commen/imgMixin"
import { ref } from "vue"
const settings3 = ref({
maxScrollbarLength: 60
})

export function getImgUrl(path: string) {
return require('@/assets/images/' + path);
}

<Tree :nodes="menu" :use-icon="true" />

import Tree from "vue3-tree";
import "vue3-tree/dist/style.css";
import { menu } from "@/composables/commen/treeView"

import { ref } from "vue"

export const menu = ref([
{
id: 1,
label: "Admin",
nodes: [
{
id: 2,
label: "Assets",
nodes: [
{
id: 3,
label: "CSS",
nodes: [
{
id: 4,
label: "Css One",
},
{
id: 5,
label: "Css Two",
},
],
},
{
id: 6,
label: "Js",
nodes: [
{
id: 7,
label: "Js One",
},
{
id: 8,
label: "Js Two",
},
],
},
{
id: 9,
label: "Scss",
nodes: [
{
id: 10,
label: "Sub Child",
nodes: [
{
id: 11,
label: "Sub File",
},
{
id: 12,
label: "Sub File",
},
],
},
{
id: 13,
label: "Scss Two",
},
],
},
],
},
{
id: 14,
label: "Default",
nodes: [
{
id: 15,
label: "Dashboard",
},
{
id: 16,
label: "Typography",
},
],
},
],
},
{
id: 17,
label: "index file",
},
])

import { toast } from 'vue3-toastify';
 import 'vue3-toastify/dist/index.css';
 function success() {
  toast.success(' New order has been placed ', {
      hideProgressBar: true, autoClose: 2000, theme: 'colored', position: 'top-right'
  });
}

<DropZone
:maxFileSize="Number(60000000)"
:uploadOnDrop="true"
:dropzoneMessageClassName="customClass" :maxFiles="1">
</DropZone>

import DropZone from "dropzone-vue";

@import 'dropzone-vue/dist/dropzone-vue.common.css';

import VueJsTour from '@globalhive/vuejs-tour';
import '@globalhive/vuejs-tour/dist/style.css';
.use(VueJsTour)

<img img class="img-fluid" alt="" src="@/assets/images/user/7.jpg" data-intro="This is Profile image">
<router-link class="icon-wrapper" id="update-profile-tour" to="/users/edit">
<i class="icofont icofont-pencil-alt-5" data-intro="Change Profile image here"  id="update-profile-tour" ></i>
</router-link>
<VTour ref="tour" :steps="steps" autoStart/>

import { ref, onMounted } from "vue"
const tour = ref()
const steps = ref([
    {
        target: "#profile-tour",
        content: "This is Profile image",
    },
    {
        target: "#update-profile-tour",
        content: "Change Profile image here",
    },
])
onMounted(() => {
    tour.value.resetTour();
})

<button class="btn btn-danger sweet-5" type="button" v-on:click="basic_warning_alert" >Warning alert</button>

import Swal from 'sweetalert2'
function basic_warning_alert() {
Swal.fire({
icon: 'warning',
title: "Are you sure?",
text: 'Once deleted, you will not be able to recover this imaginary file!',
showCancelButton: true,
confirmButtonText: 'Ok',
confirmButtonColor: '#3e5fce',
cancelButtonText: 'Cancel',
cancelButtonColor: '#efefef',
}).then((result) => {
if (result.value) {
Swal.fire({
icon: 'success',
text: 'Poof! Your imaginary file has been deleted!',
confirmButtonColor: '#3e5fce',
});
} else {
Swal.fire({
text: 'Your imaginary file is safe!',
confirmButtonColor: '#3e5fce',
});
}
});
}

<VueSlider v-model="one.value" :data="one.data" :tooltip="'always'" :tooltip-placement="'top'" ></VueSlider>

import VueSlider from 'vue-slider-component'
 import 'vue-slider-component/theme/antd.css'
 import { ref } from "vue"
 const one = ref({
     value: 10,
     data: [10, 100]
 })

<vue-cropper 
vue-cropper ref="cropper"
:guides="true" 
:view-mode="viewmodeselected" 
drag-mode="crop"
:aspectRatio="aspectRatioselected" 
:auto-crop-area="0.5" 
:min-container-width="250"
:min-container-height="180" 
:background="true" 
:rotatable="true" 
:movable="true"
:src="getImgUrl(myimgSrc)" 
alt="Source Image" 
:ready="ready" 
:crop="cropImage"
img-preview=".img-preview" 
:img-style="{ width: '800px', height: '500px' }">
</vue-cropper>

import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
import { Tooltip } from "bootstrap";
import { getImgUrl } from "@/composables/commen/imgMixin"
import { ref, onMounted } from "vue"
const myimgSrc = ref<string>('other-images/img-cropper.jpg')
const imageData = ref<any>({})
const containerData = ref<string>('')
const putData = ref<string>('')
const viewmodeselected = ref<number>(0)
const cropImg = ref<string>('')
const aspectRatioselected = ref<number>(1.7777777777777777)
const cropper = ref()
const convertNumber = (num?: number) => num != null ? Math.round(num) : undefined
function ready() {
containerData.value = cropper.value.getContainerData();
}
function cropImage() {
imageData.value = cropper.value.getData();
cropImg.value = cropper.value.getCroppedCanvas().toDataURL();
}
onMounted(() => {
imageData.value = cropper.value.getData();
new Tooltip(document.body, {
selector: "[data-bs-toggle='tooltip']",
})
})