MFR-UI-LIB

A styleless Vue 3 / Nuxt 3 component library build with VITE.

Dependencies

node v18+
Vue 3+

Installation

npm i mfr-ui-lib

Create plugin for global use

plugins/myPlugin.ts

import MFRUILib from 'mfr-ui-lib'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(MFRUILib)
})

Components

MyBrandButton

MyBrandInput

MyBrandTabs

MyBrandButton

|Name|Type|Options|Required|Default| |----|----|-------|--------|-------| |buttonText|String|n/a|false|'MyBrandButton'| |buttonClass|String|n/a|false|none|

Example

<script setup lang="ts">
   function handeler(args: Text) {
      console.log("args from MyBrandButton: ", args);
   }
</script>

<template>
   <MyBrandButton :buttonText="'Click Me'"          :buttonClass="'buttonMe'" @myBrandButtonEmit="handeler"/>
</template>

<style>
.buttonMe {
   background-color: green;
   color: white;
}
</style

MyBrandInput

MyBrandTabs

|Name|Type|Options|Required|Default| |----|----|-------|--------|-------| |:tabItems|[{"label": "My Tab", "code": "tab1"}]|"active": true or false|true|none| |:buttonClass|String|n/a|false|none| |:rowClass|String|n/a|false|none| |:tabClass|String|n/a|false|none| |@myBrandTabsEmit|{"label": "My Tab", "code": "tab1"}|n/a|false|none|

<script setup lang="ts">
import { ref } from 'vue';

function tabHandeler(args: { label: string; code: string; active: boolean; }) {
  console.log("args: ", JSON.parse(JSON.stringify(args)));
}

const tabList = ref([
{
  label: "Detail",
  code: "tab1",
  active: true
},
{
  label: "The Reward",
  code: "tab6",
  active: false
},
{
  label: "General Conditions",
  code: "tab2",
  active: false
},
{
  label: "Restaurant Conditions",
  code: "tab3",
  active: false
},
{
  label: "Item Conditions",
  code: "tab10",
  active: false
}])
</script>

<template>
<MyBrandTabs :tabItems="tabList" :buttonClass="'btn__tab'" :rowClass="'top_row'" :tabClass="'fancy_tab'"
    @myBrandTabsEmit="tabHandeler" />
</template>

<style>
.fancy_tab {
  margin-bottom: 0 !important;
}

.fancy_tab &:before {
  border-bottom: none !important;
}

.fancy_tab .btn__tab {
  background-color: #623ebc;
  border-radius: 3px 3px 0 0;

  border: none;
  border-bottom: 3px solid #1da418;

  padding: 5px 15px;
  display: inline-flex;
}

.fancy_tab &:focus {
  outline: none;
}

.fancy_tab &:hover {
  cursor: pointer;
}

.fancy_tab .btn__tab.active {
  border-bottom: 3px solid black;
}

.top_row {
  display: flex;
  max-width: 1200px;
}

.top_row .btn__tab {
  flex-grow: 1;
  justify-content: center;
}
</style>