quasar 2.15.1 → 2.15.3

package/src/utils/EventBus/EventBus.test.js

@@ -0,0 +1,108 @@
+import { describe, test, expect, vi } from 'vitest'
+
+import EventBus from './EventBus.js'
+
+describe('[EventBus API]', () => {
+  describe('[Classes]', () => {
+    describe('[(class)default]', () => {
+      test('can be instantiated', () => {
+        const instance = new EventBus()
+        expect(instance).toMatchObject({
+          on: expect.any(Function),
+          once: expect.any(Function),
+          emit: expect.any(Function),
+          off: expect.any(Function)
+        })
+      })
+
+      test('can subscribe and emit an event', () => {
+        const instance = new EventBus()
+        const callback = vi.fn()
+
+        instance.on('test', callback)
+        instance.emit('test', 'testing')
+
+        expect(callback).toHaveBeenCalledWith('testing')
+      })
+
+      test('can subscribe and emit an event once', () => {
+        const instance = new EventBus()
+        const callback = vi.fn()
+
+        instance.once('test', callback)
+        instance.emit('test', 'testing')
+        instance.emit('test', 'testing')
+
+        expect(callback).toHaveBeenCalledTimes(1)
+        expect(callback).toHaveBeenCalledWith('testing')
+      })
+
+      test('can unsubscribe from an event', () => {
+        const instance = new EventBus()
+        const callback = vi.fn()
+
+        instance.on('test', callback)
+        instance.emit('test', 'testing')
+        instance.off('test', callback)
+        instance.emit('test', 'testing')
+
+        expect(callback).toHaveBeenCalledTimes(1)
+      })
+
+      test('can unsubscribe from all events', () => {
+        const instance = new EventBus()
+        const callback1 = vi.fn()
+        const callback2 = vi.fn()
+
+        instance.on('test1', callback1)
+        instance.on('test2', callback2)
+        instance.emit('test1', 'testing1')
+        instance.emit('test2', 'testing2')
+        instance.off('test1')
+        instance.off('test2')
+        instance.emit('test1', 'testing1')
+        instance.emit('test2', 'testing2')
+
+        expect(callback1).toHaveBeenCalledTimes(1)
+        expect(callback2).toHaveBeenCalledTimes(1)
+      })
+
+      test('can subscribe to multiple events', () => {
+        const instance = new EventBus()
+        const callback1 = vi.fn()
+        const callback2 = vi.fn()
+
+        instance.on('test1', callback1)
+        instance.on('test2', callback2)
+        instance.emit('test1', 'testing1')
+        instance.emit('test2', 'testing2')
+
+        expect(callback1).toHaveBeenCalledWith('testing1')
+        expect(callback2).toHaveBeenCalledWith('testing2')
+      })
+
+      test('arguments preservation', () => {
+        const instance = new EventBus()
+        const callback = vi.fn()
+
+        instance.on('test', callback)
+        instance.emit('test', 1, 2, '3')
+
+        expect(callback).toHaveBeenCalledWith(1, 2, '3')
+      })
+
+      test('is chainable', () => {
+        const instance = new EventBus()
+        const callback = vi.fn()
+
+        instance
+          .on('test', callback)
+          .emit('test', 1, 2, 'testing')
+          .off('test', callback)
+
+        expect(callback).toHaveBeenCalledTimes(1)
+        expect(callback).toHaveBeenCalledWith(1, 2, 'testing')
+      })
+    })
+  })
+})

package/src/utils/clone/clone.test.js

@@ -0,0 +1,111 @@
+import { describe, test, expect } from 'vitest'
+
+import clone from './clone.js'
+
+describe('[clone API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test.each([
+        [ 'Number', 5 ],
+        [ 'String', 'a' ],
+        [ 'Boolean', true ],
+        [ 'Null', null ],
+        [ 'Undefined', undefined ],
+        [ 'NaN', NaN ],
+        [ 'Infinity', Infinity ]
+      ])('clone(%s)', (_, value) => {
+        const result = clone(value)
+
+        expect(
+          result
+        ).toBe(value)
+      })
+
+      test('clone(Date)', () => {
+        const date = new Date(150)
+        const result = clone(date)
+
+        expect(
+          result.getTime()
+        ).toBe(date.getTime())
+
+        expect(
+          result
+        ).not.toBe(date)
+      })
+
+      test('clone(RegExp)', () => {
+        const regex = /./
+        const result = clone(regex)
+
+        expect(
+          result.source
+        ).toBe(regex.source)
+
+        expect(
+          result.flags
+        ).toBe(regex.flags)
+
+        expect(
+          result
+        ).not.toBe(regex)
+      })
+
+      test('clone(Array)', () => {
+        const array = [ 1, 2, 3 ]
+        const result = clone(array)
+
+        expect(
+          result
+        ).toStrictEqual(array)
+
+        expect(
+          result
+        ).not.toBe(array)
+      })
+
+      test('clone(Object)', () => {
+        const object = { a: true, b: false }
+        const result = clone(object)
+
+        expect(
+          result
+        ).toStrictEqual(object)
+
+        expect(
+          result
+        ).not.toBe(object)
+      })
+
+      test('clone(Set)', () => {
+        const set = new Set([ 1, 2, 3 ])
+        const result = clone(set)
+
+        expect(
+          Array.from(result.values())
+        ).toStrictEqual(
+          Array.from(set.values())
+        )
+
+        expect(
+          result
+        ).not.toBe(set)
+      })
+
+      test('clone(Map)', () => {
+        const map = new Map([ [ 1, 'one' ], [ 2, 'two' ] ])
+        const result = clone(map)
+
+        expect(
+          Array.from(result.entries())
+        ).toStrictEqual(
+          Array.from(map.entries())
+        )
+
+        expect(
+          result
+        ).not.toBe(map)
+      })
+    })
+  })
+})

package/src/utils/colors/colors.test.js

@@ -0,0 +1,459 @@
+import { describe, test, expect } from 'vitest'
+
+import colors, { rgbToString } from './colors.js'
+
+describe('[colors API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)rgbToHex]', () => {
+      test.each([
+        [ 'black', { r: 0, g: 0, b: 0 }, '#000000' ],
+        [ 'white', { r: 255, g: 255, b: 255 }, '#ffffff' ],
+        [ 'red', { r: 255, g: 0, b: 0 }, '#ff0000' ],
+        [ 'green', { r: 0, g: 255, b: 0 }, '#00ff00' ],
+        [ 'blue', { r: 0, g: 0, b: 255 }, '#0000ff' ],
+        [ 'yellow', { r: 255, g: 255, b: 0 }, '#ffff00' ],
+        [ 'cyan', { r: 0, g: 255, b: 255 }, '#00ffff' ],
+        [ 'magenta', { r: 255, g: 0, b: 255 }, '#ff00ff' ],
+        [ 'gray', { r: 128, g: 128, b: 128 }, '#808080' ]
+      ])('rgbToHex(%s) with/without alpha', (_, value, expected) => {
+        expect(
+          colors.rgbToHex(value)
+        ).toBe(expected)
+
+        expect(
+          colors.rgbToHex({ ...value, a: 100 })
+        ).toBe(expected + 'ff')
+
+        expect(
+          colors.rgbToHex({ ...value, a: 58 })
+        ).toBe(expected + '94')
+      })
+
+      test.each([
+        [ 'r > 255', { r: 256, g: 0, b: 0 } ],
+        [ 'g > 255', { r: 0, g: 256, b: 0 } ],
+        [ 'b > 255', { r: 0, g: 0, b: 256 } ],
+        [ 'a > 100', { r: 0, g: 0, b: 0, a: 101 } ]
+      ])('rgbToHex(%s) throws', (_, value) => {
+        expect(() => {
+          colors.rgbToHex(value)
+        }).toThrow(/Expected 3 numbers below 256/)
+      })
+    })
+
+    describe('[(function)hexToRgb]', () => {
+      test.each([
+        [ 'black', '#000000', { r: 0, g: 0, b: 0 } ],
+        [ 'white', '#ffffff', { r: 255, g: 255, b: 255 } ],
+        [ 'red', '#ff0000', { r: 255, g: 0, b: 0 } ],
+        [ 'green', '#00ff00', { r: 0, g: 255, b: 0 } ],
+        [ 'blue', '#0000ff', { r: 0, g: 0, b: 255 } ],
+        [ 'yellow', '#ffff00', { r: 255, g: 255, b: 0 } ],
+        [ 'cyan', '#00ffff', { r: 0, g: 255, b: 255 } ],
+        [ 'magenta', '#ff00ff', { r: 255, g: 0, b: 255 } ],
+        [ 'gray', '#808080', { r: 128, g: 128, b: 128 } ]
+      ])('hexToRgb(%s)', (_, value, expected) => {
+        expect(
+          colors.hexToRgb(value)
+        ).toStrictEqual(expected)
+
+        expect(
+          colors.hexToRgb(value + 'ff')
+        ).toStrictEqual({ ...expected, a: 100 })
+
+        expect(
+          colors.hexToRgb(value + '94')
+        ).toStrictEqual({ ...expected, a: 58 })
+      })
+
+      test('hexToRgb(<invalid>) throws', () => {
+        expect(() => {
+          colors.hexToRgb()
+        }).toThrow(/Expected a string/)
+
+        expect(() => {
+          colors.hexToRgb(100)
+        }).toThrow(/Expected a string/)
+      })
+    })
+
+    describe('[(function)hsvToRgb]', () => {
+      test.each([
+        [ 'black', { h: 0, s: 0, v: 0 }, { r: 0, g: 0, b: 0 } ],
+        [ 'white', { h: 0, s: 0, v: 100 }, { r: 255, g: 255, b: 255 } ],
+        [ 'red', { h: 0, s: 100, v: 100 }, { r: 255, g: 0, b: 0 } ],
+        [ 'green', { h: 120, s: 100, v: 100 }, { r: 0, g: 255, b: 0 } ],
+        [ 'blue', { h: 240, s: 100, v: 100 }, { r: 0, g: 0, b: 255 } ],
+        [ 'yellow', { h: 60, s: 100, v: 100 }, { r: 255, g: 255, b: 0 } ],
+        [ 'cyan', { h: 180, s: 100, v: 100 }, { r: 0, g: 255, b: 255 } ],
+        [ 'magenta', { h: 300, s: 100, v: 100 }, { r: 255, g: 0, b: 255 } ],
+        [ 'gray', { h: 0, s: 0, v: 50 }, { r: 128, g: 128, b: 128 } ]
+      ])('hsvToRgb(%s)', (_, value, expected) => {
+        expect(
+          colors.hsvToRgb(value)
+        ).toStrictEqual({ ...expected, a: undefined })
+
+        expect(
+          colors.hsvToRgb({ ...value, a: 100 })
+        ).toStrictEqual({ ...expected, a: 100 })
+
+        expect(
+          colors.hsvToRgb({ ...value, a: 58 })
+        ).toStrictEqual({ ...expected, a: 58 })
+      })
+    })
+
+    describe('[(function)rgbToHsv]', () => {
+      test.each([
+        [ 'black', { r: 0, g: 0, b: 0 }, { h: 0, s: 0, v: 0 } ],
+        [ 'white', { r: 255, g: 255, b: 255 }, { h: 0, s: 0, v: 100 } ],
+        [ 'red', { r: 255, g: 0, b: 0 }, { h: 0, s: 100, v: 100 } ],
+        [ 'green', { r: 0, g: 255, b: 0 }, { h: 120, s: 100, v: 100 } ],
+        [ 'blue', { r: 0, g: 0, b: 255 }, { h: 240, s: 100, v: 100 } ],
+        [ 'yellow', { r: 255, g: 255, b: 0 }, { h: 60, s: 100, v: 100 } ],
+        [ 'cyan', { r: 0, g: 255, b: 255 }, { h: 180, s: 100, v: 100 } ],
+        [ 'magenta', { r: 255, g: 0, b: 255 }, { h: 300, s: 100, v: 100 } ],
+        [ 'gray', { r: 128, g: 128, b: 128 }, { h: 0, s: 0, v: 50 } ]
+      ])('rgbToHsv(%s)', (_, value, expected) => {
+        expect(
+          colors.rgbToHsv(value)
+        ).toStrictEqual({ ...expected, a: undefined })
+
+        expect(
+          colors.rgbToHsv({ ...value, a: 100 })
+        ).toStrictEqual({ ...expected, a: 100 })
+
+        expect(
+          colors.rgbToHsv({ ...value, a: 58 })
+        ).toStrictEqual({ ...expected, a: 58 })
+      })
+    })
+
+    describe('[(function)textToRgb]', () => {
+      test.each([
+        [ 'black', '#000000', { r: 0, g: 0, b: 0 } ],
+        [ 'white', '#ffffff', { r: 255, g: 255, b: 255 } ],
+        [ 'red', '#ff0000', { r: 255, g: 0, b: 0 } ],
+        [ 'green', '#00ff00', { r: 0, g: 255, b: 0 } ],
+        [ 'blue', '#0000ff', { r: 0, g: 0, b: 255 } ],
+        [ 'yellow', '#ffff00', { r: 255, g: 255, b: 0 } ],
+        [ 'cyan', '#00ffff', { r: 0, g: 255, b: 255 } ],
+        [ 'magenta', '#ff00ff', { r: 255, g: 0, b: 255 } ],
+        [ 'gray', '#808080', { r: 128, g: 128, b: 128 } ]
+      ])('textToRgb(%s)', (_, value, expected) => {
+        expect(
+          colors.textToRgb(value)
+        ).toStrictEqual(expected)
+
+        expect(
+          colors.textToRgb(value + 'ff')
+        ).toStrictEqual({ ...expected, a: 100 })
+
+        expect(
+          colors.textToRgb(value + '94')
+        ).toStrictEqual({ ...expected, a: 58 })
+      })
+
+      test.each([
+        [ 'black', 'rgb(0, 0, 0)', { r: 0, g: 0, b: 0 } ],
+        [ 'white', 'rgb(255, 255, 255)', { r: 255, g: 255, b: 255 } ],
+        [ 'red', 'rgb(255, 0, 0)', { r: 255, g: 0, b: 0 } ],
+        [ 'green', 'rgb(0, 255, 0)', { r: 0, g: 255, b: 0 } ],
+        [ 'blue', 'rgb(0, 0, 255)', { r: 0, g: 0, b: 255 } ],
+        [ 'yellow', 'rgb(255, 255, 0)', { r: 255, g: 255, b: 0 } ],
+        [ 'cyan', 'rgb(0, 255, 255)', { r: 0, g: 255, b: 255 } ],
+        [ 'magenta', 'rgb(255, 0, 255)', { r: 255, g: 0, b: 255 } ],
+        [ 'gray', 'rgb(128, 128, 128)', { r: 128, g: 128, b: 128 } ]
+      ])('textToRgb(%s)', (_, value, expected) => {
+        expect(
+          colors.textToRgb(value)
+        ).toStrictEqual(expected)
+      })
+
+      test.each([
+        [ 'black', 'rgba(0, 0, 0, .1)', { r: 0, g: 0, b: 0, a: 10 } ],
+        [ 'white', 'rgba(255, 255, 255, 0.1)', { r: 255, g: 255, b: 255, a: 10 } ],
+        [ 'red', 'rgba(255, 0, 0, .1)', { r: 255, g: 0, b: 0, a: 10 } ],
+        [ 'green', 'rgba(0, 255, 0, .1)', { r: 0, g: 255, b: 0, a: 10 } ],
+        [ 'blue', 'rgba(0, 0, 255, .1)', { r: 0, g: 0, b: 255, a: 10 } ],
+        [ 'yellow', 'rgba(255, 255, 0, .1)', { r: 255, g: 255, b: 0, a: 10 } ],
+        [ 'cyan', 'rgba(0, 255, 255, .1)', { r: 0, g: 255, b: 255, a: 10 } ],
+        [ 'magenta', 'rgba(255, 0, 255, .1)', { r: 255, g: 0, b: 255, a: 10 } ],
+        [ 'gray', 'rgba(128, 128, 128, .1)', { r: 128, g: 128, b: 128, a: 10 } ]
+      ])('textToRgb(%s)', (_, value, expected) => {
+        expect(
+          colors.textToRgb(value)
+        ).toStrictEqual(expected)
+      })
+
+      test.each([
+        [ 'rgba(0, 255   , 0,    .1)' ],
+        [ ' rgba   (  0, 255   , 0,    .1)' ],
+        [ 'rgba( 0 , 255 , 0 , .1 )' ],
+        [ '  rgba ( 0 ,   255 , 0 ,  .1 )    ' ]
+      ])('textToRgb(%s)', (value) => {
+        expect(
+          colors.textToRgb(value)
+        ).toStrictEqual({ r: 0, g: 255, b: 0, a: 10 })
+      })
+
+      test('textToRgb(<invalid>) throws', () => {
+        expect(() => {
+          colors.textToRgb()
+        }).toThrow(/Expected a string/)
+
+        expect(() => {
+          colors.textToRgb(100)
+        }).toThrow(/Expected a string/)
+      })
+    })
+
+    describe('[(function)lighten]', () => {
+      test.each([
+        [ 'black', '#000', 10, '#1a1a1a' ],
+        [ 'white', '#fff', 10, '#ffffff' ],
+        [ 'red', '#f00', 10, '#ff1a1a' ],
+        [ 'green', '#0f0', 10, '#1aff1a' ],
+        [ 'blue', '#00f', 10, '#1a1aff' ],
+        [ 'yellow', '#ff0', 10, '#ffff1a' ],
+        [ 'cyan', '#0ff', 10, '#1affff' ],
+        [ 'magenta', '#f0f', 10, '#ff1aff' ],
+        [ 'gray', '#888', 10, '#949494' ]
+      ])('lighten(%s)', (_, value, amount, expected) => {
+        expect(
+          colors.lighten(value, amount)
+        ).toBe(expected)
+      })
+
+      test('lighten(<invalid>) throws', () => {
+        expect(() => {
+          colors.lighten()
+        }).toThrow(/Expected a string as color/)
+
+        expect(() => {
+          colors.lighten('#f0f', 'a')
+        }).toThrow(/Expected a numeric percent/)
+      })
+    })
+
+    describe('[(function)luminosity]', () => {
+      test.each([
+        [ 'black', { r: 0, g: 0, b: 0 }, 0 ],
+        [ 'white', { r: 255, g: 255, b: 255 }, 1 ],
+        [ 'red', { r: 255, g: 0, b: 0 }, 0.2126 ],
+        [ 'green', { r: 0, g: 255, b: 0 }, 0.7152 ],
+        [ 'blue', { r: 0, g: 0, b: 255 }, 0.0722 ],
+        [ 'yellow', { r: 255, g: 255, b: 0 }, 0.9278 ],
+        [ 'cyan', { r: 0, g: 255, b: 255 }, 0.7874 ],
+        [ 'magenta', { r: 255, g: 0, b: 255 }, 0.2848 ],
+        [ 'gray', { r: 128, g: 128, b: 128 }, 0.215859375 ]
+      ])('luminosity(%s)', (_, value, expected) => {
+        expect(
+          colors.luminosity(value)
+        ).toBeCloseTo(expected)
+      })
+
+      test('luminosity(<invalid>) throws', () => {
+        expect(() => {
+          colors.luminosity()
+        }).toThrow(/Expected a string or a {r, g, b} object as color/)
+
+        expect(() => {
+          colors.luminosity(10)
+        }).toThrow(/Expected a string or a {r, g, b} object as color/)
+
+        expect(() => {
+          colors.luminosity({})
+        }).toThrow(/Expected a string or a {r, g, b} object as color/)
+      })
+    })
+
+    describe('[(function)brightness]', () => {
+      test.each([
+        [ 'black', { r: 0, g: 0, b: 0 }, 0 ],
+        [ 'white', { r: 255, g: 255, b: 255 }, 255 ],
+        [ 'red', { r: 255, g: 0, b: 0 }, 76.2458 ],
+        [ 'green', { r: 0, g: 255, b: 0 }, 149.685 ],
+        [ 'blue', { r: 0, g: 0, b: 255 }, 29.07 ],
+        [ 'yellow', { r: 255, g: 255, b: 0 }, 225.93 ],
+        [ 'cyan', { r: 0, g: 255, b: 255 }, 178.755 ],
+        [ 'magenta', { r: 255, g: 0, b: 255 }, 105.315 ],
+        [ 'gray', { r: 128, g: 128, b: 128 }, 128 ]
+      ])('brightness(%s)', (_, value, expected) => {
+        expect(
+          colors.brightness(value)
+        ).toBeCloseTo(expected)
+      })
+
+      test('brightness(<invalid>) throws', () => {
+        expect(() => {
+          colors.brightness()
+        }).toThrow(/Expected a string or a {r, g, b} object as color/)
+
+        expect(() => {
+          colors.brightness(10)
+        }).toThrow(/Expected a string or a {r, g, b} object as color/)
+
+        expect(() => {
+          colors.brightness({})
+        }).toThrow(/Expected a string or a {r, g, b} object as color/)
+      })
+    })
+
+    describe('[(function)blend]', () => {
+      test.each([
+        [ 'black', 'white', '#000000', '#ffffff', '#000000ff' ],
+        [ 'white', 'black', '#ffffff', '#000000', '#ffffffff' ],
+        [ 'red', 'green', '#ff0000', '#00ff00', '#ff0000ff' ],
+        [ 'green', 'red', '#00ff00', '#ff0000', '#00ff00ff' ],
+        [ 'blue', 'yellow', '#0000ff', '#ffff00', '#0000ffff' ],
+        [ 'yellow', 'blue', '#ffff00', '#0000ff', '#ffff00ff' ],
+        [ 'cyan', 'magenta', '#00ffff', '#ff00ff', '#00ffffff' ],
+        [ 'magenta', 'cyan', '#ff00ff', '#00ffff', '#ff00ffff' ],
+        [ 'gray', 'gray', '#808080', '#808080', '#808080ff' ]
+      ])('blend(%s, %s) as hex str', (_, __, fgColor, bgColor, expected) => {
+        expect(
+          colors.blend(fgColor, bgColor)
+        ).toBe(expected)
+      })
+
+      test.each([
+        [ 'black', 'white', { r: 0, g: 0, b: 0 }, { r: 255, g: 255, b: 255 }, { r: 0, g: 0, b: 0, a: 100 } ],
+        [ 'white', 'black', { r: 255, g: 255, b: 255 }, { r: 0, g: 0, b: 0 }, { r: 255, g: 255, b: 255, a: 100 } ],
+        [ 'red', 'green', { r: 255, g: 0, b: 0 }, { r: 0, g: 255, b: 0 }, { r: 255, g: 0, b: 0, a: 100 } ],
+        [ 'green', 'red', { r: 0, g: 255, b: 0 }, { r: 255, g: 0, b: 0 }, { r: 0, g: 255, b: 0, a: 100 } ],
+        [ 'blue', 'yellow', { r: 0, g: 0, b: 255 }, { r: 255, g: 255, b: 0 }, { r: 0, g: 0, b: 255, a: 100 } ],
+        [ 'yellow', 'blue', { r: 255, g: 255, b: 0 }, { r: 0, g: 0, b: 255 }, { r: 255, g: 255, b: 0, a: 100 } ],
+        [ 'cyan', 'magenta', { r: 0, g: 255, b: 255 }, { r: 255, g: 0, b: 255 }, { r: 0, g: 255, b: 255, a: 100 } ],
+        [ 'magenta', 'cyan', { r: 255, g: 0, b: 255 }, { r: 0, g: 255, b: 255 }, { r: 255, g: 0, b: 255, a: 100 } ],
+        [ 'gray', 'gray', { r: 128, g: 128, b: 128 }, { r: 128, g: 128, b: 128 }, { r: 128, g: 128, b: 128, a: 100 } ]
+      ])('blend(%s, %s) as rgb object', (_, __, fgColor, bgColor, expected) => {
+        expect(
+          colors.blend(fgColor, bgColor)
+        ).toStrictEqual(expected)
+      })
+
+      test.each([
+        [ 'black', 'white', '#000000', { r: 255, g: 255, b: 255 }, '#000000ff' ],
+        [ 'white', 'black', '#ffffff', { r: 0, g: 0, b: 0 }, '#ffffffff' ],
+        [ 'red', 'green', '#ff0000', { r: 0, g: 255, b: 0 }, '#ff0000ff' ],
+        [ 'green', 'red', '#00ff00', { r: 255, g: 0, b: 0 }, '#00ff00ff' ],
+        [ 'blue', 'yellow', '#0000ff', { r: 255, g: 255, b: 0 }, '#0000ffff' ],
+        [ 'yellow', 'blue', '#ffff00', { r: 0, g: 0, b: 255 }, '#ffff00ff' ],
+        [ 'cyan', 'magenta', '#00ffff', { r: 255, g: 0, b: 255 }, '#00ffffff' ],
+        [ 'magenta', 'cyan', '#ff00ff', { r: 0, g: 255, b: 255 }, '#ff00ffff' ],
+        [ 'gray', 'gray', '#808080', { r: 128, g: 128, b: 128 }, '#808080ff' ]
+      ])('blend(%s, %s) as hex / rgb object', (_, __, fgColor, bgColor, expected) => {
+        expect(
+          colors.blend(fgColor, bgColor)
+        ).toStrictEqual(expected)
+      })
+
+      test.each([
+        [ 'black', 'white', { r: 0, g: 0, b: 0 }, '#ffffff', { r: 0, g: 0, b: 0, a: 100 } ],
+        [ 'white', 'black', { r: 255, g: 255, b: 255 }, '#000000', { r: 255, g: 255, b: 255, a: 100 } ],
+        [ 'red', 'green', { r: 255, g: 0, b: 0 }, '#00ff00', { r: 255, g: 0, b: 0, a: 100 } ],
+        [ 'green', 'red', { r: 0, g: 255, b: 0 }, '#ff0000', { r: 0, g: 255, b: 0, a: 100 } ],
+        [ 'blue', 'yellow', { r: 0, g: 0, b: 255 }, '#ffff00', { r: 0, g: 0, b: 255, a: 100 } ],
+        [ 'yellow', 'blue', { r: 255, g: 255, b: 0 }, '#0000ff', { r: 255, g: 255, b: 0, a: 100 } ],
+        [ 'cyan', 'magenta', { r: 0, g: 255, b: 255 }, '#ff00ff', { r: 0, g: 255, b: 255, a: 100 } ],
+        [ 'magenta', 'cyan', { r: 255, g: 0, b: 255 }, '#00ffff', { r: 255, g: 0, b: 255, a: 100 } ],
+        [ 'gray', 'gray', { r: 128, g: 128, b: 128 }, '#808080', { r: 128, g: 128, b: 128, a: 100 } ]
+      ])('blend(%s, %s) as rgb / hex', (_, __, fgColor, bgColor, expected) => {
+        expect(
+          colors.blend(fgColor, bgColor)
+        ).toStrictEqual(expected)
+      })
+    })
+
+    describe('[(function)changeAlpha]', () => {
+      test.each([
+        [ 'white', '#ffffff', 0.1, '#ffffff1a' ],
+        [ 'black', '#000000', 0.1, '#0000001a' ],
+        [ 'red', '#ff0000', 0.1, '#ff00001a' ],
+        [ 'green', '#00ff00', 0.1, '#00ff001a' ],
+        [ 'blue', '#0000ff', 0.1, '#0000ff1a' ],
+        [ 'yellow', '#ffff00', 0.1, '#ffff001a' ],
+        [ 'cyan', '#00ffff', 0.1, '#00ffff1a' ],
+        [ 'magenta', '#ff00ff', 0.1, '#ff00ff1a' ],
+        [ 'gray', '#808080', 0.1, '#8080801a' ]
+      ])('changeAlpha(%s, 0.1)', (_, color, offset, expected) => {
+        expect(
+          colors.changeAlpha(color, offset)
+        ).toBe(expected)
+      })
+
+      test.each([
+        [ 'white', '#ffffff', -0.1, '#ffffff00' ],
+        [ 'black', '#000000', -0.1, '#00000000' ],
+        [ 'red', '#ff0000', -0.1, '#ff000000' ],
+        [ 'green', '#00ff00', -0.1, '#00ff0000' ],
+        [ 'blue', '#0000ff', -0.1, '#0000ff00' ],
+        [ 'yellow', '#ffff00', -0.1, '#ffff0000' ],
+        [ 'cyan', '#00ffff', -0.1, '#00ffff00' ],
+        [ 'magenta', '#ff00ff', -0.1, '#ff00ff00' ],
+        [ 'gray', '#808080', -0.1, '#80808000' ]
+      ])('changeAlpha(%s, -0.1)', (_, color, offset, expected) => {
+        expect(
+          colors.changeAlpha(color, offset)
+        ).toBe(expected)
+      })
+
+      test('changeAlpha(<invalid>) throws', () => {
+        expect(() => {
+          colors.changeAlpha()
+        }).toThrow(/Expected a string as color/)
+
+        expect(() => {
+          colors.changeAlpha('#f0f', 2)
+        }).toThrow(/Expected offset to be between -1 and 1/)
+      })
+    })
+
+    describe('[(function)getPaletteColor]', () => {
+      test('has correct return value', () => {
+        expect(
+          colors.getPaletteColor('blue')
+        ).toBe('#2196f3')
+
+        expect(
+          colors.getPaletteColor('red')
+        ).toBe('#f44336')
+      })
+    })
+
+    describe('[(function)rgbToString]', () => {
+      test.each([
+        [ 'black', { r: 0, g: 0, b: 0 }, 'rgb(0,0,0)' ],
+        [ 'white', { r: 255, g: 255, b: 255 }, 'rgb(255,255,255)' ],
+        [ 'red', { r: 255, g: 0, b: 0 }, 'rgb(255,0,0)' ],
+        [ 'green', { r: 0, g: 255, b: 0 }, 'rgb(0,255,0)' ],
+        [ 'blue', { r: 0, g: 0, b: 255 }, 'rgb(0,0,255)' ],
+        [ 'yellow', { r: 255, g: 255, b: 0 }, 'rgb(255,255,0)' ],
+        [ 'cyan', { r: 0, g: 255, b: 255 }, 'rgb(0,255,255)' ],
+        [ 'magenta', { r: 255, g: 0, b: 255 }, 'rgb(255,0,255)' ],
+        [ 'gray', { r: 128, g: 128, b: 128 }, 'rgb(128,128,128)' ]
+      ])('rgbToString(%s)', (_, value, expected) => {
+        expect(
+          rgbToString(value)
+        ).toBe(expected)
+      })
+
+      test.each([
+        [ 'black', { r: 0, g: 0, b: 0, a: 58 }, 'rgba(0,0,0,0.58)' ],
+        [ 'white', { r: 255, g: 255, b: 255, a: 58 }, 'rgba(255,255,255,0.58)' ],
+        [ 'red', { r: 255, g: 0, b: 0, a: 58 }, 'rgba(255,0,0,0.58)' ],
+        [ 'green', { r: 0, g: 255, b: 0, a: 58 }, 'rgba(0,255,0,0.58)' ],
+        [ 'blue', { r: 0, g: 0, b: 255, a: 58 }, 'rgba(0,0,255,0.58)' ],
+        [ 'yellow', { r: 255, g: 255, b: 0, a: 58 }, 'rgba(255,255,0,0.58)' ],
+        [ 'cyan', { r: 0, g: 255, b: 255, a: 58 }, 'rgba(0,255,255,0.58)' ],
+        [ 'magenta', { r: 255, g: 0, b: 255, a: 58 }, 'rgba(255,0,255,0.58)' ],
+        [ 'gray', { r: 128, g: 128, b: 128, a: 58 }, 'rgba(128,128,128,0.58)' ]
+      ])('rgbToString(%s, a:58)', (_, value, expected) => {
+        expect(
+          rgbToString(value)
+        ).toBe(expected)
+      })
+    })
+  })
+})

package/src/utils/{copy-to-clipboard.js → copy-to-clipboard/copy-to-clipboard.js}

@@ -1,4 +1,4 @@
-import { addFocusout, removeFocusout } from './private/focusout.js'
+import { addFocusout, removeFocusout } from '../private.focus/focusout.js'
 
 function fallback (text) {
   const area = document.createElement('textarea')

package/src/utils/{create-meta-mixin.js → create-meta-mixin/create-meta-mixin.js}

@@ -1,4 +1,4 @@
-import { clientList, planClientUpdate } from '../plugins/Meta.js'
+import { clientList, planClientUpdate } from '../../plugins/meta/Meta.js'
 
 export default metaOptions => {
   if (__QUASAR_SSR_SERVER__) {