1.0.155 • Published 10 months ago

veeroll-vue-package v1.0.155

Weekly downloads
-
License
MIT
Repository
-
Last release
10 months ago

veeroll-vue-package

Installation

this package is build on vuetify and using pinia

1. To install the package and its peer dependencies, run the following commands:

npm install veeroll-vue-package
# npm run install-peers

2. set up your main.js

import "./assets/main.css";

import { createApp, h } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";
import { createVuetify } from "vuetify";

import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { VBtn } from "vuetify/components/VBtn";
import { Icon } from "@iconify/vue";
import router from './router';
import VuePlyr from 'vue-plyr'
import 'vue-plyr/dist/vue-plyr.css'
import Toast from "vue-toastification"
import "vue-toastification/dist/index.css"

// import '@core/scss/template/index.scss'

// import '@styles/styles.scss'
import "vuetify/styles"; // Ensure you are using css-loader

async function loadFonts() {
  const webFontLoader = await import(
    /* webpackChunkName: "webfontloader" */ "webfontloader"
  );

  webFontLoader.load({
    google: {
      families: [
        "Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap",
      ],
    },
  });
}

loadFonts();

const app = createApp(App);
const pinia = createPinia();

const aliases = {
  collapse: "tabler-chevron-up",
  complete: "tabler-check",
  cancel: "tabler-x",
  close: "tabler-x",
  delete: "tabler-x",
  clear: "tabler-x",
  success: "tabler-circle-check",
  info: "tabler-info-circle",
  warning: "tabler-alert-circle",
  error: "tabler-x",
  prev: "tabler-chevron-left",
  next: "tabler-chevron-right",
  checkboxOn: "custom-checked-checkbox",
  checkboxOff: "custom-unchecked-checkbox",
  checkboxIndeterminate: "custom-indeterminate-checkbox",
  delimiter: "tabler-circle",
  sort: "tabler-arrow-up",
  expand: "tabler-chevron-down",
  menu: "tabler-menu-2",
  subgroup: "tabler-caret-down",
  dropdown: "tabler-chevron-down",
  radioOn: "custom-checked-radio",
  radioOff: "custom-unchecked-radio",
  edit: "tabler-pencil",
  ratingEmpty: "custom-star-empty",
  ratingFull: "custom-star-fill",
  ratingHalf: "custom-star-half",
  loading: "tabler-refresh",
  first: "tabler-player-skip-back",
  last: "tabler-player-skip-forward",
  unfold: "tabler-arrows-move-vertical",
  file: "tabler-paperclip",
  plus: "tabler-plus",
  minus: "tabler-minus",
  sortAsc: "tabler-arrow-up",
  sortDesc: "tabler-arrow-down",
};

const defaults = {
  IconBtn: {
    icon: true,
    color: "default",
    variant: "text",
    density: "comfortable",
    VIcon: {
      size: 22,
    },
  },
  VAlert: {
    density: "comfortable",
    VBtn: {
      color: undefined,
    },
  },
  VBadge: {
    // set v-badge default color to primary
    color: "primary",
  },
  VBtn: {
    // set v-btn default color to primary
    color: "primary",
  },
  VChip: {
    size: "small",
  },
  VExpansionPanel: {
    expandIcon: "tabler-chevron-right",
    collapseIcon: "tabler-chevron-right",
  },
  VExpansionPanelTitle: {
    expandIcon: "tabler-chevron-right",
    collapseIcon: "tabler-chevron-right",
  },
  VList: {
    density: "comfortable",
    VCheckboxBtn: {
      density: "compact",
    },
  },
  VPagination: {
    activeColor: "primary",
    density: "comfortable",
    variant: "tonal",
  },
  VTabs: {
    // set v-tabs default color to primary
    color: "primary",
    density: "comfortable",
    VSlideGroup: {
      showArrows: true,
    },
  },
  VTooltip: {
    // set v-tooltip default location to top
    location: "top",
  },
  VCheckboxBtn: {
    color: "primary",
  },
  VCheckbox: {
    // set v-checkbox default color to primary
    color: "primary",
    density: "comfortable",
    hideDetails: "auto",
  },
  VRadioGroup: {
    color: "primary",
    density: "comfortable",
    hideDetails: "auto",
  },
  VRadio: {
    density: "comfortable",
    hideDetails: "auto",
  },
  VSelect: {
    variant: "outlined",
    density: "compact",
    color: "primary",
    hideDetails: "auto",
    VChip: {
      color: "primary",
      label: true,
    },
  },
  VRangeSlider: {
    // set v-range-slider default color to primary
    color: "primary",
    trackColor: "rgb(var(--v-theme-on-surface),0.06)",
    trackSize: 6,
    thumbSize: 7,
    density: "comfortable",
    thumbLabel: true,
    hideDetails: "auto",
  },
  VRating: {
    // set v-rating default color to primary
    color: "warning",
  },
  VProgressCircular: {
    // set v-progress-circular default color to primary
    color: "primary",
  },
  VProgressLinear: {
    height: 12,
    roundedBar: true,
    rounded: true,
    bgColor: "rgb(var(--v-theme-on-surface))",
  },
  VSlider: {
    // set v-slider default color to primary
    color: "primary",
    trackColor: "rgb(var(--v-theme-on-surface),0.06)",
    hideDetails: "auto",
    thumbSize: 7,
    trackSize: 6,
  },
  VTextField: {
    variant: "outlined",
    density: "compact",
    color: "primary",
    hideDetails: "auto",
  },
  VAutocomplete: {
    variant: "outlined",
    color: "primary",
    density: "compact",
    hideDetails: "auto",
    menuProps: {
      contentClass: "app-autocomplete__content v-autocomplete__content",
    },
    VChip: {
      color: "primary",
      label: true,
    },
  },
  VCombobox: {
    variant: "outlined",
    density: "compact",
    color: "primary",
    hideDetails: "auto",
    VChip: {
      color: "primary",
      label: true,
    },
  },
  VFileInput: {
    variant: "outlined",
    density: "compact",
    color: "primary",
    hideDetails: "auto",
  },
  VTextarea: {
    variant: "outlined",
    density: "compact",
    color: "primary",
    hideDetails: "auto",
  },
  VSwitch: {
    // set v-switch default color to primary
    inset: true,
    color: "primary",
    hideDetails: "auto",
  },
  VTimeline: {
    lineThickness: 1,
  },
  VDataTable: {
    VDataTableFooter: {
      VBtn: {
        density: "comfortable",
        color: "default",
      },
    },
  },
};

const iconify = {
  component: (props) => h(Icon, props),
};

const icons = {
  defaultSet: "iconify",
  aliases,
  sets: {
    iconify,
  },
};
const themeConfig = {
  app: {
    title: "",
    logo: "",
  },
};

const staticPrimaryColor = "#04216d";

const theme = {
  defaultTheme: "light", // dark || light
  themes: {
    light: {
      dark: false,
      colors: {
        primary:
          localStorage.getItem(
            `${themeConfig.app.title}-lightThemePrimaryColor`
          ) || staticPrimaryColor,
        "on-primary": "#fff",
        secondary: "#36d9e3",
        "on-secondary": "#fff",
        success: "#28C76F",
        "on-success": "#fff",
        info: "#00CFE8",
        "on-info": "#fff",
        warning: "#FF9F43",
        "on-warning": "#fff",
        error: "#EA5455",
        background: "#F8F7FA",
        "on-background": "#2F2B3D",
        "on-surface": "#2F2B3D",
        "grey-50": "#FAFAFA",
        "grey-100": "#F5F5F5",
        "grey-200": "#EEEEEE",
        "grey-300": "#E0E0E0",
        "grey-400": "#BDBDBD",
        "grey-500": "#9E9E9E",
        "grey-600": "#757575",
        "grey-700": "#616161",
        "grey-800": "#424242",
        "grey-900": "#212121",
        "perfect-scrollbar-thumb": "#DBDADE",
        "skin-bordered-background": "#fff",
        "skin-bordered-surface": "#fff",
      },
      variables: {
        "code-color": "#d400ff",
        "overlay-scrim-background": "#4C4E64",
        "tooltip-background": "#4A5072",
        "overlay-scrim-opacity": 0.5,
        "hover-opacity": 0.04,
        "focus-opacity": 0.12,
        "selected-opacity": 0.06,
        "activated-opacity": 0.16,
        "pressed-opacity": 0.14,
        "dragged-opacity": 0.1,
        "disabled-opacity": 0.42,
        "border-color": "#2F2B3D",
        "border-opacity": 0.16,
        "high-emphasis-opacity": 0.78,
        "medium-emphasis-opacity": 0.68,
        "switch-opacity": 0.2,
        "switch-disabled-track-opacity": 0.3,
        "switch-disabled-thumb-opacity": 0.4,
        "switch-checked-disabled-opacity": 0.3,

        // Shadows
        "shadow-key-umbra-color": "#2F2B3D",
      },
    },
    dark: {
      dark: true,
      colors: {
        primary:
          localStorage.getItem(
            `${themeConfig.app.title}-darkThemePrimaryColor`
          ) || staticPrimaryColor,
        "on-primary": "#fff",
        secondary: "#A8AAAE",
        "on-secondary": "#fff",
        success: "#28C76F",
        "on-success": "#fff",
        info: "#00CFE8",
        "on-info": "#fff",
        warning: "#FF9F43",
        "on-warning": "#fff",
        error: "#EA5455",
        background: "#25293C",
        "on-background": "#D0D4F1",
        surface: "#2F3349",
        "on-surface": "#D0D4F1",
        "grey-50": "#26293A",
        "grey-100": "#2F3349",
        "grey-200": "#26293A",
        "grey-300": "#4A5072",
        "grey-400": "#5E6692",
        "grey-500": "#7983BB",
        "grey-600": "#AAB3DE",
        "grey-700": "#B6BEE3",
        "grey-800": "#CFD3EC",
        "grey-900": "#E7E9F6",
        "perfect-scrollbar-thumb": "#4A5072",
        "skin-bordered-background": "#2f3349",
        "skin-bordered-surface": "#2f3349",
      },
      variables: {
        "code-color": "#d400ff",
        "overlay-scrim-background": "#101121",
        "tooltip-background": "#5E6692",
        "overlay-scrim-opacity": 0.6,
        "hover-opacity": 0.04,
        "focus-opacity": 0.12,
        "selected-opacity": 0.06,
        "activated-opacity": 0.16,
        "pressed-opacity": 0.14,
        "dragged-opacity": 0.1,
        "disabled-opacity": 0.42,
        "border-color": "#D0D4F1",
        "border-opacity": 0.16,
        "high-emphasis-opacity": 0.78,
        "medium-emphasis-opacity": 0.68,
        "switch-opacity": 0.4,
        "switch-disabled-track-opacity": 0.4,
        "switch-disabled-thumb-opacity": 0.8,
        "switch-checked-disabled-opacity": 0.3,

        // Shadows
        "shadow-key-umbra-color": "#0F1422",
      },
    },
  },
};

app.use(VuePlyr, {
  plyr: {},
})

const vuetify = createVuetify({
  aliases: {
    IconBtn: VBtn,
  },
  defaults,
  icons,
  theme,
  components,
  directives,
});
import Vue3Lottie from 'vue3-lottie'

app.use(Toast, {
  position: "top-right",
  timeout: 2500,
  closeOnClick: true,
  pauseOnFocusLoss: true,
  pauseOnHover: true,
  draggable: true,
  draggablePercent: 0.6,
  showCloseButtonOnHover: false,
  hideProgressBar: true,
  closeButton: "button",
  icon: false,
  rtl: false,
})

app.use(Vue3Lottie)
app.use(pinia);
app.use(router);
app.use(vuetify);
app.mount("#app");

ensure your App.vue is wrapped on v-app and import DialogComponent from veeroll package

<script setup>
import DialogComponent from 'veeroll-vue-package/src/components/DialogComponent.vue';
import DialogUpgradeAnimate from 'veeroll-vue-package/src/components/DialogComponent.vue';
</script>

<template>
<v-app>
  <main>
  DialogUpgradeAnimate
  <DialogComponent />
    <router-view></router-view>
  </main> 
</v-app>
</template>

<style scoped>
</style>

3. install vite plugin vuetify ( make sure its installed on your project)

 npm i vite-plugin-vuetify

update your vite.config.js and include vuetify from vite-plugin-vuetify

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'

// https://vitejs.dev/config/
export default defineConfig({
 plugins: [
   vue(),
   vuetify({ autoImport: true }),
 ],
 resolve: {
   alias: {
     '@': fileURLToPath(new URL('./src', import.meta.url))
   }
 }
})

4. Update your .env make sure this 3 keys are present. Replace the your value for API_KEY and SECRET

VITE_VEEROLL_API_URL=http://vr-backend.test/api/
VITE_VEEROLL_API_KEY={{YOUR API KEY FROM VEEROLL}}
VITE_VEEROLL_SECRET={{YOUR SECRET KEY FROM VEEROLL}}

5. on your route.js , add the route of veeroll package, this is the route to view the details of the created video

// src/router.js
import { createRouter, createWebHistory } from 'vue-router';
import { routes } from 'veeroll-vue-package';
import Home from './pages/Home.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    ...routes,
    {
      path: '/home',
      name: 'home',
      component: Home,
      props: true,
    },
  ]
});

router.beforeEach((to, from, next) => {
  console.log(`Navigating to: ${to.path}`); 
  next();
});

export default router;

6. last is to import the component CreateVideo on your page, this will have two choices for you to select for creating a veeroll video

<script setup>
import { CreateVideo } from "veeroll-vue-package";
</script>

<template>
  <CreateVideo />
</template>

<style scoped></style>
1.0.146

10 months ago

1.0.154

10 months ago

1.0.153

10 months ago

1.0.155

10 months ago

1.0.152

10 months ago

1.0.151

10 months ago

1.0.150

11 months ago

1.0.149

11 months ago

1.0.148

11 months ago

1.0.147

11 months ago

1.0.145

11 months ago

1.0.144

11 months ago

1.0.143

11 months ago

1.0.142

11 months ago

1.0.141

11 months ago

1.0.140

11 months ago

1.0.139

11 months ago

1.0.138

11 months ago

1.0.137

11 months ago

1.0.136

11 months ago

1.0.135

11 months ago

1.0.134

11 months ago

1.0.133

11 months ago

1.0.132

11 months ago

1.0.131

11 months ago

1.0.130

11 months ago

1.0.129

11 months ago

1.0.128

11 months ago

1.0.127

11 months ago

1.0.126

11 months ago

1.0.125

11 months ago

1.0.124

11 months ago

1.0.122

11 months ago

1.0.121

11 months ago

1.0.120

11 months ago

1.0.119

11 months ago

1.0.118

11 months ago

1.0.117

11 months ago

1.0.116

11 months ago

1.0.115

11 months ago

1.0.114

11 months ago

1.0.113

11 months ago

1.0.112

11 months ago

1.0.111

11 months ago

1.0.110

11 months ago

1.0.109

11 months ago

1.0.108

11 months ago

1.0.107

11 months ago

1.0.106

11 months ago

1.0.105

11 months ago

1.0.104

11 months ago

1.0.103

11 months ago

1.0.102

11 months ago

1.0.101

11 months ago

1.0.100

11 months ago

1.0.99

11 months ago

1.0.98

11 months ago

1.0.97

11 months ago

1.0.96

11 months ago

1.0.95

11 months ago

1.0.94

11 months ago

1.0.93

11 months ago

1.0.92

11 months ago

1.0.91

11 months ago

1.0.90

11 months ago

1.0.89

11 months ago

1.0.88

11 months ago

1.0.87

11 months ago

1.0.86

11 months ago

1.0.85

11 months ago

1.0.84

11 months ago

1.0.83

11 months ago

1.0.82

11 months ago

1.0.81

11 months ago

1.0.80

11 months ago

1.0.79

11 months ago

1.0.78

11 months ago

1.0.77

11 months ago

1.0.76

11 months ago

1.0.75

11 months ago

1.0.74

11 months ago

1.0.73

11 months ago

1.0.72

11 months ago

1.0.71

11 months ago

1.0.70

11 months ago

1.0.69

11 months ago

1.0.68

11 months ago

1.0.67

11 months ago

1.0.66

11 months ago

1.0.65

11 months ago

1.0.64

11 months ago

1.0.63

11 months ago

1.0.62

11 months ago

1.0.61

11 months ago

1.0.60

11 months ago

1.0.59

11 months ago

1.0.58

11 months ago

1.0.57

11 months ago

1.0.56

11 months ago

1.0.55

11 months ago

1.0.54

11 months ago

1.0.53

11 months ago

1.0.52

11 months ago

1.0.51

11 months ago

1.0.50

11 months ago

1.0.49

11 months ago

1.0.48

11 months ago

1.0.47

11 months ago

1.0.46

11 months ago

1.0.45

11 months ago

1.0.44

11 months ago

1.0.43

11 months ago

1.0.42

11 months ago

1.0.41

11 months ago

1.0.40

11 months ago

1.0.39

11 months ago

1.0.38

11 months ago

1.0.37

11 months ago

1.0.36

11 months ago

1.0.35

11 months ago

1.0.34

11 months ago

1.0.33

11 months ago

1.0.31

11 months ago

1.0.30

11 months ago

1.0.29

11 months ago

1.0.28

11 months ago

1.0.27

11 months ago

1.0.26

12 months ago

1.0.25

12 months ago

1.0.24

12 months ago

1.0.23

12 months ago

1.0.22

12 months ago

1.0.21

12 months ago

1.0.20

12 months ago

1.0.19

12 months ago

1.0.18

12 months ago

1.0.17

12 months ago

1.0.16

12 months ago

1.0.15

12 months ago

1.0.14

12 months ago

1.0.13

12 months ago

1.0.12

12 months ago

1.0.11

12 months ago

1.0.10

12 months ago

1.0.9

12 months ago

1.0.6

12 months ago

1.0.5

12 months ago

1.0.4

12 months ago

1.0.3

12 months ago

1.0.2

12 months ago

1.0.1

12 months ago

1.0.0

12 months ago