Early implementation of Vue 3, Bootstrap 5 and Typescript

Overview

BoostrapVue 3

Bootstrap 5 + Vue 3 + Typescript

Components

Early versions of:

  • Accordion

  • Props: flush

  • Slots: default

  • Accordion item

  • Props: title, visible

  • Events: b-collapse events

  • Slots: default, title

  • Alert

  • Props: dismissible, fade, show, variant

  • Slots: default

  • Badge

  • Props: dot-indicator, text-indicator, pill, variant

  • Breadcrumb

  • Props: items

  • Slots: prepend, append

  • Button

  • Button group

  • Button toolbar

  • Card

  • Card body

  • Card footer

  • Card header

  • Card sub title

  • Card Text

  • Card Title

  • Carousel

  • Close button

  • Collapse

  • Props: modelValue (v-model), parent, toggle, visible

  • Events: show, shown, hide, hidden

  • Slots: default

  • Dropdowns

  • ListGroup

  • ListGroup item

  • Modal

  • Props: modelValue, no-backdrop, centered, fade, fullscreen, title, scrollable, show, size, static-backdrop

  • Events: show, shown, hide, hidden, hide-prevented

  • Slots: default, title

  • Navs

  • Navbar

  • Offcanvas

  • Props: modelValue (v-model), body-scrolling, backdrop, placement, title

  • Events: show, shown, hide, hidden

  • Slots: default, title

  • Pagination

  • Popover

    • Directive
  • Progress

  • Scrollspy

  • Spinners

  • Tabs

  • Toasts

  • Tooltip

    • Directive

Directives

  • v-b-toggle
  • v-b-modal
  • v-b-tooltip
  • v-b-popover

Composables

  • useBreadcrumb: A first attempt to have the breadcrumb's items in one place across the aplication.
  • useModal: The goal is to emulate the same behaviour as boostrap-vue progamatic modals.

License

MIT

Issues
  • Use the Bootstrap javascript API?

    Use the Bootstrap javascript API?

    Hi @cdmoro ,

    I guess you and I are coming from the same point of of waiting too long for bootstrapvue to be updated. I had already created THIS repository with a similar goal, and I have looked at your components. I had an idea, instead of using the data api (data-bs-), since bootstrap already provides a pure javascript API for the components, why not use bootstrap's javascript directly?

    I had done a collapse component and a collapse directive and you can get the idea here:

    // Collapse.vue Component
    <template>
      <div v-collapse="{ state: show, parent: parent }">
        <slot></slot>
      </div>
    </template>
    <script lang="ts">
    import BCollapse from "@/directives/BCollapse";
    import { defineComponent, ref, Ref, toRef } from "vue";
    export default defineComponent({
      name: "VbCollapse",
      props: {
        show: {
          type: Boolean,
          default: false,
        },
        parent: {
          type: ref,
          default: null,
        },
      },
      setup(props) {
        const show: Ref<Boolean> = toRef(props, "show");
        const parent = toRef(props, "parent");
        return {
          show,
          parent,
        };
      },
      directives: {
        collapse: BCollapse,
      },
    });
    </script>
    
    
    // BCollapse directive
    import { DirectiveBinding, VNode } from "vue";
    import Collapse from "bootstrap/js/src/collapse";
    const getBsCollapse: any = (el: HTMLElement | Element, binding: DirectiveBinding) => {
      const state = binding.value?.state || false;
      const parent = binding.value?.parent || null;
      return new Collapse(el, { toggle: state, parent: parent || '' });
    }
    export default {
      created(el: HTMLElement, binding: DirectiveBinding, vnode: VNode) {
        el.classList.add("collapse");
        getBsCollapse(el, binding);
      },
      beforeUpdate(el: Element, binding: DirectiveBinding, vnode: VNode) {
        const state = binding.value?.state || false;
        if (state) {
          getBsCollapse(el, binding).show();
        } else {
          getBsCollapse(el, binding).hide();
        }
      },
    }
    

    Usage of the collapse component

    <template>
        <vb-button variant="danger" @click="toggleCollapse">Toggle Collapse</vb-button>
        <vb-collapse :show="collapse">
          <h3>Hi There!</h3>
          <p>
            Hi there! I am a collapsable element that can only be shown once show is
            set to true.
          </p>
        </vb-collapse>
    </template>
    <script lang="ts">
    import vuebootstrapSample from "@/lib-components/vuebootstrap-sample.vue";
    import VbButton from "@/lib-components/buttons/Button.vue";
    import VbCollapse from "@/lib-components/collapse/Collapse.vue";
    import VbAccordionItem from "@/lib-components/accordion/AccordionItem.vue";
    import VbAccordion from "@/lib-components/accordion/Accordion.vue";
    import { defineComponent, ref } from "vue";
    
    export default defineComponent({
      components: {
        vuebootstrapSample,
        VbButton,
        VbCollapse,
        VbAccordion,
        VbAccordionItem,
      },
      name: "ServeDev",
      setup() {
        const collapse = ref(false);
        const toggleCollapse = () => {
          collapse.value = !collapse.value;
        };
        return {
          toggleCollapse,
          collapse,
        };
      },
    });
    </script>
    

    As you can see the only prop that you need to pass is show and it allows for programmatic opening and closing as it should be in vue.

    Let me know in case you are interested in collaboration.

    Cheers!

    wontfix 
    opened by coolsam726 2
  • Maybe package-lock.json should not be part of repository?

    Maybe package-lock.json should not be part of repository?

    package-lock.json caused a problem when I tried npm install on Windows. Perphaps it should not be included?

    opened by Radouch 2
  • Release as a Package?

    Release as a Package?

    I've been trying to search on yarn, docs and the source code on how to install only to realize that it's been marked private on the package.json file.

    My question is, when will this be released as a yarn/npm package? Do you guys have plans on doing so?

    Thanks in advance!

    opened by Makiyu-py 2
  • BCol component

    BCol component

    Hey,

    I have done the BCol component & fix attr binding on BFormInput.

    I have also moved the "bootstrap-icons" dependency from "devDependencies" to "dependencies".

    Cheers

    Geoffrey

    opened by Geoffrey-D 2
  • remove usage of absolute paths

    remove usage of absolute paths

    Hello Carlos,

    Using relative imports make this lib easier to use.

    Feel free to merge this PR.

    Cheers

    Geoffrey

    opened by Geoffrey-D 1
  • Don't use strings for injection - use injection tokens

    Don't use strings for injection - use injection tokens

    Using Strings like 'parent' for injection may cause conflicts with other components.

    opened by michaelzangl 1
  • Use relative paths instead of absolute (@) paths

    Use relative paths instead of absolute (@) paths

    Hello Carlos,

    I noticed you reverted the pull request that was changing absolute paths into relative paths. Unfortunately absolute paths with "@" lead to errors when importing your project as a dependency in our Vue application. There is maybe a way to configure Vue Loader or Webpack to distinguish your absolute paths to our project structure. But we would like to keep using relative paths in the fork we made, as I noted that other projects such as BootstrapVue only use relative paths too. Probably a good practice to prevent issues(?)

    Is it possible for you not to use absolute paths? It would help us to maintain our fork and provide you some pull requests in the future.

    Thanks!

    opened by atilleul 1
  • BRow, BListGroup & BListGroupItem (+ quick fix for BIcon)

    BRow, BListGroup & BListGroupItem (+ quick fix for BIcon)

    Hello Carlos,

    We implemented all the features for BRow, BListGroup and half of the props from BListGroupItem. BListGroupItem probably needs to use BLink as in BootstrapVue 2, I'll work on this in the forthcoming days.

    About BIcon, we made a quick fix by disabling eslint for the problematic line, at least until we find a better version for this.

    Best regards

    opened by atilleul 1
  • BImg

    BImg

    opened by atilleul 0
Releases(0.0.1-alpha)
Owner
Carlos Bonadeo
I'm a Front End Engineer with over 12 years of experience in Front End development. HTML, CSS (Sass, TailwindCSS) and JS Frameworks: React (Typescript) & Vue
Carlos Bonadeo
A seed project with vue, vuex, typescript & webpack with hot reloading and all the good stuf

Vue Vuex TypeScript Webpack seed This seed project includes some of the 'hot' and latests web technologies such as TypeScript, Vue, Vuex,Vuex-Typescri

Israel Zablianov 34 Sep 4, 2020
A Programming Environment for TypeScript & Node.js built on top of VS Code

Programming Environment for TypeScript & Node.js A battery-included TypeScript framework built on top of Visual Studio Code Website Kretes is a progra

Kretes 611 Jul 26, 2021
A WordPress theme with the guts ripped out and replaced with Vue.

VueWordPress Theme Starter Features Getting started Video Training Code Organization New to Vue? External References Features coming soon: Changelog V

Evan Agee 1.4k Jul 26, 2021
这是基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex,适配手机、平板、pc 的后台开源免费模板库(vue2.x请切换vue-prev-admin分支)

介绍 基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex,适配手机、平板、pc 的后台开源免费模板,希望减少工作量,帮助大家实现快速开发。 线上预览 vue3.x 版本

null 112 Jul 23, 2021
Opinionated Vue 3 + Vite + Typescript blog starter ⚔

Elucidator blog starter Blog starter build with Vue 3 + Vite + Typescript Introduction Elucidator blog starter is a starter blog built with Vuejs 3, V

I Gusti Ngurah Satya Wikananda 3 Jul 14, 2021
a front end template development by vue3.x typescript vite2.x vuex4.x vue-router 4.x mock element-plus

Vue 3 + Typescript + Vite + Vuex + Vue-Router This template should help get you started developing with Vue 3 and Typescript and Vuex and Vu

coderly 24 Jun 30, 2021
A Complete Single Page Application using Vue, Vue Router, Bootstrap-Vue, Vuex and all....

Vue-CRUD Application A Complete Single Page Application (SPA) or Product CRUD Application using Vue 3, Vue Router, Vue-Pagination, Searching, Sweet Al

Maniruzzaman Akash 20 Jul 20, 2021
A simple opinionated Vue3 Starter Template with Vite.js

Logo created with Windcss logo + Icons made by Vectors Market & Pixel perfect from www.flaticon.com Vitesome ?? ⛵️ A simple opinionated Vue3 Starter T

Alvaro Saburido 25 Jul 25, 2021
:star: A Vite 2.x + Vue 3.x + TypeScript template starter

Vite2.x + Vue3.x + TypeScript Starter 在线预览 https://vite-vue3-starter.xpoet.cn

指间的诗意 194 Jul 28, 2021
Anthony Fu 606 Jul 27, 2021
An open source starter solution for organizations to add a customer portal to their FileMaker database. Supports taking credit card payments online.

Customer Portal Starter Solution About this portal This portal was created by Blue Feather. It was designed both as a starting point for us to use wit

Blue Feather 5 Jul 4, 2021
🎆 基于Vue3+elementUI-Plus+TypeScript+Axios+MetroUI+Less自用快速开发vue项目的模板

?? cxl-vue-template ?? 基于Vue3+elementUI-Plus+TypeScript+Axios+MetroUI+Less自用快速开发vue项目的模板

Chen.js 11 Apr 27, 2021
Bleeding edge vue template focused on code quality and developer happiness.

wemake-vue-template Bleeding edge vue template focused on code quality and developer happiness. This project is used to scaffold new Vue project struc

wemake.services 666 Jul 19, 2021
🏕 Opinionated Vite Starter Template

?? Opinionated Vite Starter Template

Anthony Fu 1.6k Jul 26, 2021