vuetify 2.1.0-beta.1 → 2.1.0

package/src/directives/mutate/__tests__/mutate.spec.ts

@@ -0,0 +1,130 @@
+// Directives
+import Mutate from '../'
+
+(global as any).MutationObserver = class { // Mock MutationObserver
+  _callback: Function
+
+  _observe = jest.fn()
+
+  constructor (callback) {
+    this._callback = callback
+  }
+
+  disconnect () {}
+
+  observe (_, options) {
+    this._observe(options)
+  }
+
+  trigger (evts: MutationRecord[]) { // Trigger this manually in tests
+    this._callback(evts, this)
+  }
+}
+
+describe('mutate.ts', () => {
+  it('should bind event on inserted', () => {
+    const callback = jest.fn()
+    const el = document.createElement('div') as any
+    document.body.appendChild(el)
+
+    Mutate.inserted(el, {
+      value: callback,
+    } as any)
+
+    expect(el._mutate).toBeTruthy()
+    expect(callback).not.toHaveBeenCalled()
+
+    document.body.removeChild(el)
+
+    Mutate.unbind(el)
+
+    expect(el._mutate).toBeFalsy()
+  })
+
+  it('should fire event on mutation', () => {
+    const callback = jest.fn()
+    const el = document.createElement('div') as any
+    document.body.appendChild(el)
+
+    Mutate.inserted(el, {
+      value: callback,
+    } as any)
+
+    el._mutate.observer.trigger([{}])
+
+    expect(callback).toHaveBeenCalledTimes(1)
+
+    document.body.removeChild(el)
+
+    Mutate.unbind(el)
+  })
+
+  it('should fire event once', () => {
+    const callback = jest.fn()
+    const el = document.createElement('div') as any
+    document.body.appendChild(el)
+
+    Mutate.inserted(el, {
+      value: callback,
+      modifiers: {
+        once: true,
+      },
+    } as any)
+
+    el._mutate.observer.trigger([{}])
+
+    expect(callback).toHaveBeenCalledTimes(1)
+    expect(el._mutate).toBeFalsy()
+
+    document.body.removeChild(el)
+  })
+
+  it('should work with object value', () => {
+    const callback = jest.fn()
+    const el = document.createElement('div') as any
+    document.body.appendChild(el)
+
+    Mutate.inserted(el, {
+      value: {
+        options: {
+          attributes: false,
+          subtree: true,
+        },
+        handler: callback,
+      },
+    } as any)
+
+    el._mutate.observer.trigger([{}])
+
+    expect(callback).toHaveBeenCalledTimes(1)
+    expect(el._mutate.observer._observe).toHaveBeenLastCalledWith({ attributes: false, subtree: true })
+
+    document.body.removeChild(el)
+
+    Mutate.unbind(el)
+  })
+
+  it('should work with observer modifiers', () => {
+    const callback = jest.fn()
+    const el = document.createElement('div') as any
+    document.body.appendChild(el)
+
+    Mutate.inserted(el, {
+      value: callback,
+      modifiers: {
+        attr: true,
+        child: true,
+        sub: true,
+      },
+    } as any)
+
+    el._mutate.observer.trigger([{}])
+
+    expect(callback).toHaveBeenCalledTimes(1)
+    expect(el._mutate.observer._observe).toHaveBeenLastCalledWith({ attributes: true, childList: true, subtree: true })
+
+    document.body.removeChild(el)
+
+    Mutate.unbind(el)
+  })
+})

package/src/directives/mutate/index.ts

@@ -0,0 +1,63 @@
+import { VNodeDirective } from 'vue'
+
+interface MutateVNodeDirective extends VNodeDirective {
+  options?: MutationObserverInit
+}
+
+function inserted (el: HTMLElement, binding: MutateVNodeDirective) {
+  const modifiers = binding.modifiers || /* istanbul ignore next */ {}
+  const value = binding.value
+  const isObject = typeof value === 'object'
+  const callback = isObject ? value.handler : value
+  const { once, ...modifierKeys } = modifiers
+  const hasModifiers = Object.keys(modifierKeys).length > 0
+  const hasOptions = isObject && value.options
+
+  // Options take top priority
+  const options = hasOptions ? value.options : hasModifiers
+    // If we have modifiers, use only those provided
+    ? {
+      attributes: modifierKeys.attr,
+      childList: modifierKeys.child,
+      subtree: modifierKeys.sub,
+      characterData: modifierKeys.char,
+    }
+    // Defaults to everything on
+    : {
+      attributes: true,
+      childList: true,
+      subtree: true,
+      characterData: true,
+    }
+
+  const observer = new MutationObserver((
+    mutationsList: MutationRecord[],
+    observer: MutationObserver
+  ) => {
+    /* istanbul ignore if */
+    if (!el._mutate) return // Just in case, should never fire
+
+    callback(mutationsList, observer)
+
+    // If has the once modifier, unbind
+    once && unbind(el)
+  })
+
+  observer.observe(el, options)
+  el._mutate = { observer }
+}
+
+function unbind (el: HTMLElement) {
+  /* istanbul ignore if */
+  if (!el._mutate) return
+
+  el._mutate.observer.disconnect()
+  delete el._mutate
+}
+
+export const Mutate = {
+  inserted,
+  unbind,
+}
+
+export default Mutate

package/src/globals.d.ts

@@ -46,6 +46,9 @@ declare global {
       init: boolean
       observer: IntersectionObserver
     }
+    _mutate?: {
+      observer: MutationObserver
+    }
     _onScroll?: {
       callback: EventListenerOrEventListenerObject
       options: boolean | AddEventListenerOptions

package/src/locale/et.ts

@@ -1,17 +1,17 @@
 export default {
-  close: 'Close',
+  close: 'Sulge',
   dataIterator: {
     noResultsText: 'Vastavaid kirjeid ei leitud',
-    loadingText: 'Loading item...',
+    loadingText: 'Andmeid laaditakse...',
   },
   dataTable: {
     itemsPerPageText: 'Ridu leheküljel:',
     ariaLabel: {
-      sortDescending: ': Sorted descending. Activate to remove sorting.',
-      sortAscending: ': Sorted ascending. Activate to sort descending.',
-      sortNone: ': Not sorted. Activate to sort ascending.',
+      sortDescending: ': Kahanevalt sorteeritud. Vajuta uuesti sorteerimise eemaldamiseks.',
+      sortAscending: ': Kasvavalt sorteeritud. Vajuta uuesti, et sorteerida kahanevalt.',
+      sortNone: ': Ei ole sorteeritud. Vajuta kasvavalt sorteerimiseks.',
     },
-    sortBy: 'Sort by',
+    sortBy: 'Sorteerimise alus',
   },
   dataFooter: {
     itemsPerPageText: 'Kirjeid leheküljel:',
@@ -34,8 +34,8 @@ export default {
     moreEvents: '{0} veel',
   },
   fileInput: {
-    counter: '{0} files',
-    counterSize: '{0} files ({1} in total)',
+    counter: '{0} faili',
+    counterSize: '{0} faili (kokku {1})',
   },
   timePicker: {
     am: 'AM',

package/src/locale/hr.ts

@@ -1,25 +1,25 @@
 export default {
-  close: 'Close',
+  close: 'Zatvori',
   dataIterator: {
-    noResultsText: 'Nisu pronađeni odgovarajući zapisi',
-    loadingText: 'Loading item...',
+    noResultsText: 'Nisu pronađene odgovarajuće stavke',
+    loadingText: 'Učitavanje...',
   },
   dataTable: {
-    itemsPerPageText: 'Redova po stranici:',
+    itemsPerPageText: 'Redaka po stranici:',
     ariaLabel: {
-      sortDescending: ': Sorted descending. Activate to remove sorting.',
-      sortAscending: ': Sorted ascending. Activate to sort descending.',
-      sortNone: ': Not sorted. Activate to sort ascending.',
+      sortDescending: ': Sortirano silazno. Odaberite za uklanjanje sortiranja.',
+      sortAscending: ': Sortirano uzlazno. Odaberite za silazno sortiranje.',
+      sortNone: ': Nije sortirano. Odaberite za uzlazno sortiranje.',
     },
-    sortBy: 'Sort by',
+    sortBy: 'Sortirajte po',
   },
   dataFooter: {
-    itemsPerPageText: 'Stavaka po stranici:',
-    itemsPerPageAll: 'Svi',
+    itemsPerPageText: 'Stavki po stranici:',
+    itemsPerPageAll: 'Sve',
     nextPage: 'Sljedeća stranica',
     prevPage: 'Prethodna stranica',
     firstPage: 'Prva stranica',
-    lastPage: 'Zadnja stranica',
+    lastPage: 'Posljednja stranica',
     pageText: '{0}-{1} od {2}',
   },
   datePicker: {
@@ -27,15 +27,15 @@ export default {
   },
   noDataText: 'Nema dostupnih podataka',
   carousel: {
-    prev: 'Prethodna slika',
-    next: 'Sljedeća vizuala',
+    prev: 'Prethodno',
+    next: 'Sljedeće',
   },
   calendar: {
     moreEvents: 'Još {0}',
   },
   fileInput: {
-    counter: '{0} files',
-    counterSize: '{0} files ({1} in total)',
+    counter: 'Odabranih datoteka: {0}',
+    counterSize: 'Odabranih datoteka: {0} ({1} ukupno)',
   },
   timePicker: {
     am: 'AM',

package/src/locale/sl.ts

@@ -1,17 +1,17 @@
 export default {
-  close: 'Close',
+  close: 'Zapri',
   dataIterator: {
     noResultsText: 'Ni iskanega zapisa',
-    loadingText: 'Loading items...',
+    loadingText: 'Nalaganje...',
   },
   dataTable: {
     itemsPerPageText: 'Vrstic na stran:',
     ariaLabel: {
-      sortDescending: ': Sorted descending. Activate to remove sorting.',
-      sortAscending: ': Sorted ascending. Activate to sort descending.',
-      sortNone: ': Not sorted. Activate to sort ascending.',
+      sortDescending: ': Razvrščeno padajoče. Aktivirajte za odstranitev razvrščanja.',
+      sortAscending: ': Razvrščeno naraščajoče. Aktivirajte za padajoče razvrščanje.',
+      sortNone: ': Ni razvrščeno. Aktivirajte za naraščajoče razvrščanje.',
     },
-    sortBy: 'Sort by',
+    sortBy: 'Razvrsti po',
   },
   dataFooter: {
     itemsPerPageText: 'Predmetov na stran:',
@@ -34,8 +34,8 @@ export default {
     moreEvents: 'Še {0}',
   },
   fileInput: {
-    counter: '{0} files',
-    counterSize: '{0} files ({1} in total)',
+    counter: '{0} datotek',
+    counterSize: '{0} datotek ({1} skupno)',
   },
   timePicker: {
     am: 'AM',

package/src/styles/settings/_variables.scss

@@ -38,9 +38,9 @@ $grid-gutters: (
 ) !default;
 
 $container-max-widths: (
-  'md': map-get($grid-breakpoints, 'md'),
-  'lg': map-get($grid-breakpoints, 'lg'),
-  'xl': map-get($grid-breakpoints, 'xl')
+  'md': map-get($grid-breakpoints, 'md') * 0.9375,
+  'lg': map-get($grid-breakpoints, 'lg') * 0.9375,
+  'xl': map-get($grid-breakpoints, 'xl') * 0.9375
 ) !default;
 
 $display-breakpoints: (

package/src/util/helpers.ts

@@ -322,17 +322,15 @@ export const keyCodes = Object.freeze({
   pagedown: 34,
 })
 
-const ICONS_PREFIX = '$vuetify.'
-
-// This remaps internal names like '$vuetify.icons.cancel'
+// This remaps internal names like '$cancel' or '$vuetify.icons.cancel'
 // to the current name or component for that icon.
 export function remapInternalIcon (vm: Vue, iconName: string): VuetifyIcon {
-  if (!iconName.startsWith(ICONS_PREFIX)) {
+  if (!iconName.startsWith('$')) {
     return iconName
   }
 
   // Get the target icon name
-  const iconPath = `$vuetify.icons.values.${iconName.split('.').pop()}`
+  const iconPath = `$vuetify.icons.values.${iconName.split('$').pop()!.split('.').pop()}`
 
   // Now look up icon indirection name,
   // e.g. '$vuetify.icons.values.cancel'