<perfect-scrollbar class="vertical-scroll scroll-demo" :settings="settings4">
    <h5 class="pb-2">Custom Scrollbar </h5>
    <p>I'm quite interested in learning more about <em class="txt-danger">custom scrollbars</em> because
        they are becoming more and more common.</p>
    <div class="scrollbar-images"><img class="img-fluid" src="@/assets/images/banner/1.jpg" alt="banner">
    </div>
    <p>
        There are various justifications for customizing a scrollbar. For instance, the default scrollbar
        can cause an app's user interface to look inconsistent across various operating systems. In this
        case, having a single style is helpful.</p>
    <p>
        I never had the opportunity to learn about CSS scrollbar customization, but I have always been
        interested in doing so. I'll take the chance to learn more about them and share my trip in this
        essay.</p>
    <p>
        One crucial point to remember is that, depending on the design, a scrollbar may operate either <em
            class="txt-danger">horizontally or vertically</em> . Additionally, it might alter when you work
        on a website that is global and operates in both left-to-right and right-to-left orientations.</p>
  </perfect-scrollbar>

const settings4 = {
   maxScrollbarLength: 60,
   suppressScrollY: true,
   suppressScrollX: false
  }

<treeview :nodes="nodes" :config="config"/>

import treeview from "vue3-treeview";
   import "vue3-treeview/dist/style.css";
   import { defineAsyncComponent, ref } from 'vue'
   const Card3 = defineAsyncComponent(() => import("@/components/common/card/CardData3.vue"))
   let desc = ref<string>("Use the dynamic tree view with checkboxes.")
     interface Node {
       text: string;
       children?: string[];
   }
   
   interface Nodes {
       [key: string]: Node;
   }
   let nodes = ref<Nodes>({
       id1: {
           text: "Admin",
           children: ["id11", "id12"],
       },
       id11: {
           text: "Assets",
           children: ["id113", "id118"],
       },
       id12: {
           text: "Default",
           children: ["id131", "id122"],
       },
       id111: {
           text: "CSS",
           children: ["id114", "id115"],
       },
       id114: {
           text: "Css One",
       },
       id115: {
           text: "Css Two",
       },
       id113: {
           text: "Js",
           children: ["id116", "id117"],
       },
       id116: {
           text: "Js One"
       },
       id117: {
           text: "Js Two"
       },
       id118: {
           text: "Scss",
           children: ["id119"]
       },
       id119: {
           text: "Sub Child",
           children: ["id120", "id121"]
       },
       id120: {
           text: "Sub File"
       },
       id121: {
           text: "Sub File"
       },
       id131: {
           text: "Dashboard"
       },
       id122: {
           text: "Typography"
       },
       id2: {
           text: "index file",
       },
   });
   
   let config = ref({
       roots: ["id1", "id2"],
   
   });

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'
    });
  }

  <div class="rating-container">
       <rate :length="5" :value="2" :disabled="true" />
  </div>
  

 
 <form class="dropzone dropzone-secondary">
      <FilePond name="file" :label-idle="innerHTML"
        :accepted-file-types="['image/png', 'image/jpeg']"
     />
   </form>
  

import DropZone from "dropzone-vue";
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";

const FilePond = vueFilePond(
  FilePondPluginImagePreview,
  FilePondPluginFileValidateType
) as DefineComponent


app.use(DropZone)
                   ;
  

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

<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>
  <VOnboardingWrapper ref="wrapper" :steps="steps" class="tour-visit"/>

import { VOnboardingWrapper, useVOnboarding } from 'v-onboarding'
   import 'v-onboarding/dist/style.css'
   const { start, goToStep, finish } = useVOnboarding(wrapper)
   let steps = [
       {
           attachTo: { element: '#profiletour' }, content: { title: "This is malabo profile" }
       },
       {
           attachTo: { element: '#update-profile-tour' }, content: { title: "Change malabo profile image here" }
       }
   ]
   
   onMounted(() => {
       start()
   });

<button class="btn btn-danger sweet-5" type="button" @click="basic()" >Warning alert</button>

import Swal from 'sweetalert2'
function basic() {
  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]
   })

<Cropper 
  ref="cropper"
  :src="imageSrc"
  :stencil-props="{
    minAspectRatio: 10 / 20,
  }"
  :resize-image="true"
  class="cropper"
  @change="onChange">                   
</Cropper>
  

import { ref } from "vue";
import { getImages } from "@/utils/index";

export function imageCropper() {
  const imageSrc = ref(getImages("other-images/bg-profile.png"));

  const cropper = ref();
  const result = ref({
    coordinates: {
      width: 0,
      height: 0,
      top: 0,
      left: 0,
      angle: 0,
    },
    image: null,
    size: {
      width: 0,
      height: 0,
    },
  });

  function onFileChange(event: Event) {
    const file = (event.target as HTMLInputElement)?.files?.[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (e: ProgressEvent) => {
      imageSrc.value = e.target?.result as string;
    };
    reader.readAsDataURL(file);
  }

  function onChange() {
    const cropResult = cropper.value?.getResult();

    if (cropResult) {
      result.value = {
        coordinates: cropResult.coordinates,
        image: cropResult.image ?? cropper.value.getImage()?.src,
        size: {
          width: Math.round(result.value.coordinates.width),
          height: Math.round(result.value.coordinates.height),
        },
      };
    }
  }

  function zoom(factor: number) {
    cropper.value.zoom(factor);
  }

  function move(direction: string) {
    if (direction === "left") {
      cropper.value.move(-result.value.size.width / 4);
    } else if (direction === "right") {
      cropper.value.move(result.value.size.width / 4);
    } else if (direction === "top") {
      cropper.value.move(0, -result.value.size.height / 4);
    } else if (direction === "bottom") {
      cropper.value.move(0, result.value.size.height / 4);
    }
  }

  function rotate(angle: number) {
    cropper.value.rotate(angle);
  }

  function flip(x: boolean, y: boolean) {
    const { image } = cropper.value.getResult();
    if (image.transforms.rotate % 180 !== 0) {
      cropper.value.flip(!x, !y);
    } else {
      cropper.value.flip(x, y);
    }
  }

  function resize(width = 1, height = 1) {
    let startCoordinates: { left: number; width: number; top: number; height: number };

    cropper.value.setCoordinates([
      () => {
        startCoordinates = result.value.coordinates;
        return {
          width: result.value.coordinates.width * width,
          height: result.value.coordinates.height * height,
        };
      },
      () => ({
        left: startCoordinates.left + (startCoordinates.width - result.value.coordinates.width) / 2,
        top: startCoordinates.top + (startCoordinates.height - result.value.coordinates.height) / 2,
      }),
    ]);
  }

  function center() {
    cropper.value.setCoordinates(() => ({
      left: result.value.size.width / 2 - result.value.coordinates.width / 2,
      top: result.value.size.height / 2 - result.value.coordinates.height / 2,
    }));
  }

  function maximize() {
    const center = {
      left: result.value.coordinates.left + result.value.coordinates.width / 2,
      top: result.value.coordinates.top + result.value.coordinates.height / 2,
    };
    cropper.value.setCoordinates([
      () => ({
        width: result.value.size.width,
        height: result.value.size.height,
      }),
      () => ({
        left: center.left - result.value.coordinates.width / 2,
        top: center.top - result.value.coordinates.height / 2,
      }),
    ]);
  }

  function reset() {
    result.value.image = null;
    imageSrc.value = "";
  }

  return {
    imageSrc,
    cropper,
    result,

    onFileChange,
    onChange,
    zoom,
    move,
    rotate,
    flip,
    resize,
    center,
    maximize,
    reset,
  };
}