material - npm Package Compare versions

Comparing version 0.9.12 to 0.9.13

package.json

 {
   "name": "material",
-  "version": "0.9.12",
+  "version": "0.9.13",
   "description": "A lightweight implementation of Material Design Components for the web - ES6",
@@ -5,0 +5,0 @@ "main": "index.js",

src/class/control.js

@@ -17,5 +17,3 @@ import Component from './component'
   on (event, listener) {
-    if (!this.events[event]) {
-      this.events[event] = []
-    }
+    this.events[event] ??= []
     this.events[event].push(listener)
@@ -27,5 +25,4 @@
   emit (event, ...args) {
-    if (this.events[event]) {
-      this.events[event].forEach(listener => listener.apply(this, args))
-    }
+    this.events?.[event]?.forEach(listener => listener.apply(this, args))
+
     return this
@@ -32,0 +29,0 @@ }

src/list/request.js

 export default {
+  requestById (id, cb) {
+    // log.error('requestById', id)
+    if (!id) return
+    return this.getPage(id, (data) => {
+      // log.error('getPage', data)
+      const page = data?.page || null
+      if (data?.count) this.virtual.setCount(data?.count)
+      this.request(page, null, null, cb)
+    })
+  },
+
   request (page, size, more, cb) {
@@ -3,0 +14,0 @@ // console.log('request', page, size, more, cb)

src/tabs.js

@@ -1,20 +0,18 @@
-import create from './mixin/create'
-import insert from './mixin/insert'
-import emitter from './module/emitter'
-
+// modules
+import { insertion } from './module/mutation.js'
+import display from './mixin/display'
 import offset from './element/offset'
 
-import List from './list'
+// ui
+import Control from './class/control'
 import Button from './button'
-import Element from './element'
 
-class Tabs {
+class Tabs extends Control {
   static defaults = {
-    prefix: 'material',
     class: 'tabs',
-    tag: 'div',
+    mixins: [display],
+    show: true,
+    style: 'primary',
     indicator: {
-      prefix: 'material',
-      class: 'indicator',
-      tag: 'div'
+      size: 30
     }
@@ -24,78 +22,69 @@ }
   constructor (options) {
-    this.init(options)
-    this.build()
+    super(options)
 
-    return this
+    insertion(this.element, () => this.setup())
   }
 
-  init (options) {
-    this.options = { ...Tabs.defaults, ...options }
-    Object.assign(this, insert, emitter)
-  }
+  setup () {
+    this.items = Array.from(this.element.childNodes).filter(node => node.nodeType === Node.ELEMENT_NODE)
+    this.item = {}
 
-  /**
-   * Build Method
-   * @return {Object} This class instance
-   */
-  build () {
-    this.element = create(this.options)
-    this.tab = { }
-    if (this.options.list) {
-      this.list = new List({
-        tag: 'div',
-        container: this.element,
-        list: this.options.list,
-        target: '.material-button',
-        height: 600,
-        label: 'Flat',
+    this.items.forEach(item => {
+      this.item[item.name] = item
+      this.addListener(item)
+    })
 
-        render: (info) => {
-          let item
-          if (info.type === 'divider') {
-            item = new Element({ class: 'divider' })
-          } else {
-            item = new Button({
-              name: info.name,
-              text: info.text || info.name,
-              tooltip: info.tootip
-            })
-          }
+    this.indicator = document.createElement('div')
+    this.indicator.classList.add('indicator')
+    this.element.appendChild(this.indicator)
 
-          this.tab[info.name] = item
+    if (this.options.show) this.show()
 
-          return item
-        },
-        select: (item) => {
-          this.selected = item
-          this.click(item)
-        }
-      })
+    if (this.options.selected && this.item[this.options.selected]) {
+      this.select(this.options.selected, true)
     }
 
-    this.indicator = create(this.options.indicator)
-    this.insertElement(this.indicator, this.element)
+    this.emit('ready')
+  }
 
-    if (this.options.container) {
-      this.insert(this.options.container)
-    }
+  select (name, silent = false) {
+    this.items.forEach(item => {
+      item.classList.toggle('selected', name === item.name)
+    })
 
-    return this
-  }
+    this.selectedName = name
 
-  select (tab) {
-    // console.log('select', tab, this.tab)
-    this.selected = this.tab[tab]
-    this.click(this.selected.element, true)
+    if (!silent) this.emit('select', name)
+    this.updateIndicator(name)
   }
 
-  click (item, silent) {
-    // console.log('clickitem', item, this.element);
-    const or = offset(this.element)
-    const o = offset(item)
-    this.indicator.setAttribute('style', 'width: ' + o.width + 'px; left: ' + (o.left - or.left) + 'px;')
+  updateIndicator (name) {
+    name = name ?? this.selectedName
 
-    if (!silent) { this.emit('select', item.dataset.name) }
+    const item = this.item[name]
+
+    if (!item) return
+
+    this.selected = item
+    const oElement = offset(this.element)
+    const oItem = offset(item)
+
+    const label = item.querySelector('label')
+    const oLabel = label ? offset(label) : null
+    const width = oLabel?.width ?? this.options.indicator.size
+
+    const style = this.options.style === 'secondary'
+      ? `width: ${oItem.width}px; left: ${oItem.left - oElement.left}px;`
+      : `width: ${width}px; left: ${oItem.left - oElement.left + (oItem.width / 2) - (width / 2)}px;`
+
+    this.indicator.setAttribute('style', style)
   }
+
+  addListener (item) {
+    item.addEventListener('click', (ev) => {
+      this.select(item.name)
+    })
+  }
 }
 
 export default Tabs

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

498490

increased by9.94%

Number of package files

245

increased by10.36%

Lines of code

11880

increased by13.87%

Worsened metrics

Number of medium supply chain risk alerts

16

increased by45.45%

No dependency changes