vue-inheritance v1.0.1-beta.5

Vue Inheritance

Introduction

vue-inheritance is an npm package designed for Vue.js projects. It provides a convenient way to manage and reuse component properties and methods. Leveraging Vue's extension and mixin capabilities, this package simplifies the definition and application of component attributes, making it more modular.

Installation

install vue-inheritance using the following command:

npm install vue-inheritance

Usage

In your Vue project, import VueInheritance:

import { VueInheritance } from 'vue-inheritance'

Define Interface Modules

Define one or more props, methods, computed modules.

// IControl
export const IControl = {
  props: {
    disabled: {
       type: Boolean,
       default: false
    }
  }
}

// ITheme
export const ITheme = {
  props: {
    theme: {
      type: String,
      default: 'Standard'
    }
  }
}

// ILoading
export const ILoading = {
  props: {
    isLoading: {
      type: Boolean,
      default: false
    }
  }
}


// IButton 
export const IButton = {
  extends: VueInheritance.implement(IControl).implement(ITheme)
  props: {
    size: {
      type: String,
      default: 'lg'
    }
  },

  methods: {
  }
}



  

Implement

In your specific component, use the VueInheritance implement method to apply Interface modules.

// Button.vue
export default {
  extends: VueInheritance.implement(IControl).implement(ITheme),
  methods: {
    onClick(e) {
      this.$emit('click', e)
    }
  }
}

// or

export default {
  extends: IButton
}

Extend

In another component, use the extend method to inherit an existing component and the implement method to apply additional attribute modules.

// LoadingButton.vue
import Button from './Button.vue'

export default {
  extends: VueInheritance.extend(Button).implement(ILoading)
}

Examples Button with IControl and ITheme

<template>
   <button :disabled="disabled" :class="theme" @click="onClick">Click me</button>
</template>

<script>
import { VueInheritance } from 'vue-inheritance'
import { IControl } from '@/core/IControl.js'
import { ITheme } from '@/core/ITheme.js'

export default {
   extends: VueInheritance.implement(IControl).implement(ITheme),
   methods: {
      onClick(e) {
         this.$emit('click', e)
      }
   }
}
</script>

Loading Button with ILoading

<template>
   <Button :disabled="disabled || isLoading" :class="theme" @click="onClick">
      <span v-if="isLoading">Loading...</span>
      <span v-else>Click me</span>
   </Button>
</template>

<script>
import { VueInheritance } from 'vue-inheritance'
import Button from './Button.vue'
import { ILoading } from '@/core/ILoading.js'

export default {
   extends: VueInheritance.extend(Button).implement(ILoading)
}
</script>

This way, you can define interface modules based on project requirements and flexibly apply and reuse them in your components.