Notable Peru Mariachis

    @okiba/component

    2.0.7 • Public • Published

    Okiba / Component

    Manages a DOM component, binds UI and recursively binds child components. Can be extended or instantiated

    __

    // ./components/Slider.js
    
    import Component from '@okiba/component'
    import SliderControls from '@components/SliderControls'
    
    const ui = {
      slides: '.slide',
    }
    
    const components = {
      controls: {
        selector: '.slider-controls', type: SliderControls, options: {big: true}
      }
    }
    
    class Slider extends Component {
      constructor({el, options}) {
        super({el, ui, components, options})
    
        this.ui.slides.forEach(
          slide => slide.style.opacity = 0
        )
    
        this.components.controls.forEach(
          controls => controls.onNext(this.next.bind(this))
        )
      }
    }
    // ./main.js
    
    import {qs} from '@okiba/dom'
    import Component from '@okiba/component'
    import Slider from './components/Slider'
    
    const app = new Component({
      el: qs('#app'),
      components: {
        selector: '.slider', type: Slider
      }
    })

    Installation

    npm i --save @okiba/component

    Or import it directly in the browser

    <script type="module" src="https://unpkg.com/@okiba/component/index.js"></script>

    Usage

    import Component from '@okiba/component'

    Untranspiled code 🛑

    Okiba Core packages are not transpiled, so don't forget to transpile them with your favourite bundler. For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:

    {
      test: /\.js$/,
      exclude: /node_modules\/(?!(@okiba)\/).*/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }

    constructor(args: {el, ui, components, options})

    Arguments

    + args: Object

    Arguments to create a component

    + el: Element

    DOM Element to be bound

    + ui: Object | optional

    UI hash where keys are name and values are selectors

    { buttonNext: '#buttonNext' }
    // or
    { buttonNext: selector: '#buttonNext', asArray: true, required: true }

    Becomes:

    this.ui.buttonNext
    + components: Object | optional

    Components hash for childs to bind, keys are names and values are component initialization props:

    {
      slider: {
        // Matched using [qs]('https://github/okiba-gang/okiba/packages/dom'), scoped to the current component element
        selector: '.domSelector',
        // Component class, extending Okiba Component
        type: Slider,
        // Options hash
        options: {fullScreen: true},
        // Required component, default is false
        required: true
      }
     viewProgress: {
        // Bind ViewProgress component on parent Component dom node
        ghost: true,
        // Component class, extending Okiba Component
        type: ViewProgress
      },
      buttons: {
        selector: 'button',
        type: Button,
        asArray: true,
      }
    }

    Becomes:

    this.components.slider
    + options: Object | optional

    Custom options passed to the component

    onDestroy()

    Virtual method, needs to be overridden It's the place to call cleanup functions as it will be called when your component is destroyed

    destroy()

    Should not be overridden, will call onDestroy and forward destruction to all child components

    Keywords

    none

    Install

    npm i @okiba/component

    DownloadsWeekly Downloads

    43

    Version

    2.0.7

    License

    MIT

    Unpacked Size

    15 kB

    Total Files

    5

    Last publish

    Collaborators

    • fiad
    • ghzmdr
    • lavolpecheprogramma