How to use @pluginjs/decorator - 10 common examples

To help you get started, we’ve selected a few @pluginjs/decorator examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github pluginjs / pluginjs / modules / color-picker / src / main2.js View on Github external
classes as CLASSES,
  defaults as DEFAULTS,
  dependencies as DEPENDENCIES,
  events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE,
  translations as TRANSLATIONS
} from './constant'
let DATA = {}
@translateable(TRANSLATIONS)
@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class ColorPicker extends Component {
  constructor(element, options = {}) {
    super(NAMESPACE, element)
    // options
    this.initOptions(DEFAULTS, options)
    if (options.module) {
      this.options.module = options.module
    }
    this.firstClassName = this.element.className
    this.setupI18n()
    // class
    this.initClasses(CLASSES)
    compose(
github pluginjs / pluginjs / modules / tooltip / src / main.js View on Github external
SHOW: 'show',
  OUT: 'out'
}

const Trigger = {
  HOVER: 'hover',
  FOCUS: 'focus',
  CLICK: 'click',
  MANUAL: 'manual'
}

/* Credit to bootstrap tooltip http://getbootstrap.com MIT */

@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class Tooltip extends Component {
  constructor(element, options = {}) {
    super(element)

    this.setupOptions(options)
    this.setupClasses()
    this._timeout = 0
    this._activeTrigger = {}
    this.POPPER = null
    this.$tip = null
github pluginjs / pluginjs / modules / popover / src / main.js View on Github external
import {
  classes as CLASSES,
  defaults as DEFAULTS,
  dependencies as DEPENDENCIES,
  events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE
} from './constant'
import Tooltip from '@pluginjs/tooltip'

/* Credit to bootstrap popover http://getbootstrap.com MIT */
@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class Popover extends Tooltip {
  constructor(element, options = {}) {
    super(element, options)
  }

  createTip() {
    let arrow = ''
    let close = ''

    if (this.options.close) {
      close = templateEngine.render(this.options.templates.close.call(this), {
        classes: this.classes
github pluginjs / pluginjs / modules / infinite / src / main.js View on Github external
import { addClass, removeClass } from '@pluginjs/classes'
import { query, append, insertBefore, detach, parseHTML } from '@pluginjs/dom'
import { isNumber, isString, isFunction } from '@pluginjs/is'
import { getStyle, setStyle } from '@pluginjs/styled'
import History from './history'
import { intersectionObserverPolyfill } from '@pluginjs/polyfills'
// import 'whatwg-fetch'

intersectionObserverPolyfill()

@translateable(TRANSLATIONS)
@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class Infinite extends Component {
  constructor(element, options = {}) {
    super(element)

    this.setupOptions(options)
    this.setupI18n()
    this.setupClasses()
    this.setupStates()
    this.initialize()
  }

  initialize() {
github pluginjs / pluginjs / modules / time-table / src / main.js View on Github external
// import getDate from 'date-fns/get_date'
import subDays from 'date-fns/sub_days'
import subWeeks from 'date-fns/sub_weeks'
import subMonths from 'date-fns/sub_months'
import addDays from 'date-fns/add_days'
import addMonths from 'date-fns/add_months'
import addWeeks from 'date-fns/add_weeks'
// import format from 'date-fns/format'

// const COMPONENTS = {}

@translateable(TRANSLATIONS)
@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class TimeTable extends Component {
  constructor(element, options = {}) {
    super(element)
    this.setupOptions(options)
    this.setupClasses()

    this.wrap = wrap(
      `<div class="${this.classes.NAMESPACE}"></div>`,
      this.element
    )
github pluginjs / pluginjs / modules / gradient-selector / src / main.js View on Github external
classes as CLASSES,
  defaults as DEFAULTS,
  dependencies as DEPENDENCIES,
  events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE,
  translations as TRANSLATIONS
} from './constant'

let DATA = {}

@translateable(TRANSLATIONS)
@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class GradientSelector extends Component {
  constructor(element, options = {}) {
    super(element)
    this.setupOptions(options)
    this.setupClasses()
    this.setupI18n()

    addClass(this.classes.NAMESPACE, this.element)

    // this.color = new Color()
github pluginjs / pluginjs / modules / color-selector / src / main.js View on Github external
} from '@pluginjs/decorator'
import Preview from './components/preview'
import Collection from './collection'
import {
  classes as CLASSES,
  defaults as DEFAULTS,
  dependencies as DEPENDENCIES,
  events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE,
  translations as TRANSLATIONS
} from './constant'
let DATA = {}
@translateable(TRANSLATIONS)
@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class ColorSelector extends Component {
  constructor(element, options = {}) {
    super(element)
    // options
    this.setupOptions(options)
    if (options.module) {
      this.options.module = options.module
    }
github pluginjs / pluginjs / modules / scroll-top / src / main.js View on Github external
optionable
} from '@pluginjs/decorator'

import {
  classes as CLASSES,
  defaults as DEFAULTS,
  dependencies as DEPENDENCIES,
  events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE,
  translations as TRANSLATIONS
} from './constant'

@translateable(TRANSLATIONS)
@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class ScrollTop extends GlobalComponent {
  /* eslint consistent-return: "off" */
  constructor(options = {}) {
    super()

    this.setupOptions(options)
    this.setupClasses()

    this.setupI18n()
github pluginjs / pluginjs / modules / time-table / src / main.js View on Github external
// import startOfWeek from 'date-fns/start_of_week'
import getDay from 'date-fns/get_day'
// import getDate from 'date-fns/get_date'
import subDays from 'date-fns/sub_days'
import subWeeks from 'date-fns/sub_weeks'
import subMonths from 'date-fns/sub_months'
import addDays from 'date-fns/add_days'
import addMonths from 'date-fns/add_months'
import addWeeks from 'date-fns/add_weeks'
// import format from 'date-fns/format'

// const COMPONENTS = {}

@translateable(TRANSLATIONS)
@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class TimeTable extends Component {
  constructor(element, options = {}) {
    super(element)
    this.setupOptions(options)
    this.setupClasses()

    this.wrap = wrap(
      `<div class="${this.classes.NAMESPACE}"></div>`,
      this.element
github pluginjs / pluginjs / modules / color-picker / src / main2.js View on Github external
import Hex from './components/hex'
import History from './components/history'
import Hue from './components/hue'
import Saturation from './components/saturation'
import {
  classes as CLASSES,
  defaults as DEFAULTS,
  dependencies as DEPENDENCIES,
  events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE,
  translations as TRANSLATIONS
} from './constant'
let DATA = {}
@translateable(TRANSLATIONS)
@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class ColorPicker extends Component {
  constructor(element, options = {}) {
    super(NAMESPACE, element)
    // options
    this.initOptions(DEFAULTS, options)
    if (options.module) {
      this.options.module = options.module
    }

@pluginjs/decorator

A flexible modern decorator js plugin.

GPL-3.0
Latest version published 2 years ago

Package Health Score

46 / 100
Full package analysis

Similar packages