From a0ebde164bc0fa30101a4824e2a1930772e3c4b4 Mon Sep 17 00:00:00 2001 From: Dmitry Sharshakov Date: Thu, 21 Feb 2019 18:33:17 +0300 Subject: [PATCH] refactor(services): minor refactor + code style (#6557) * refactor(services): use short power syntax in easing functions * refactor(services): clean up icons' presets' code * style(theme): comment default colors * Update packages/vuetify/src/services/goto/__tests__/easing-patterns.spec.ts Co-Authored-By: sh7dm * style: fix color annotations --- .../goto/__tests__/easing-patterns.spec.ts | 2 +- .../src/services/goto/easing-patterns.ts | 20 ++++++------- packages/vuetify/src/services/icons/index.ts | 18 +++--------- .../src/services/icons/presets/index.ts | 11 +++++++ packages/vuetify/src/services/theme/index.ts | 29 ++++++++++--------- 5 files changed, 41 insertions(+), 39 deletions(-) create mode 100644 packages/vuetify/src/services/icons/presets/index.ts diff --git a/packages/vuetify/src/services/goto/__tests__/easing-patterns.spec.ts b/packages/vuetify/src/services/goto/__tests__/easing-patterns.spec.ts index cadca04b53a..71e264a3d03 100644 --- a/packages/vuetify/src/services/goto/__tests__/easing-patterns.spec.ts +++ b/packages/vuetify/src/services/goto/__tests__/easing-patterns.spec.ts @@ -18,6 +18,6 @@ describe('easing-patterns.ts', () => { expect(easingPatterns.easeInQuint(5)).toBe(3125) expect(easingPatterns.easeOutQuint(5)).toBe(1025) expect(easingPatterns.easeInOutQuint(5)).toBe(16385) - expect(easingPatterns.easeInOutQuint(0.1)).toBe(0.00016000000000000007) + expect(easingPatterns.easeInOutQuint(0.1)).toBeCloseTo(0.00016, 5) }) }) diff --git a/packages/vuetify/src/services/goto/easing-patterns.ts b/packages/vuetify/src/services/goto/easing-patterns.ts index f6e1764e24b..597c3d2e417 100644 --- a/packages/vuetify/src/services/goto/easing-patterns.ts +++ b/packages/vuetify/src/services/goto/easing-patterns.ts @@ -3,26 +3,26 @@ export type EasingFunction = (t: number) => number // linear export const linear = (t: number) => t // accelerating from zero velocity -export const easeInQuad = (t: number) => t * t +export const easeInQuad = (t: number) => t ** 2 // decelerating to zero velocity export const easeOutQuad = (t: number) => t * (2 - t) // acceleration until halfway, then deceleration -export const easeInOutQuad = (t: number) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t) +export const easeInOutQuad = (t: number) => (t < 0.5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t) // accelerating from zero velocity -export const easeInCubic = (t: number) => t * t * t +export const easeInCubic = (t: number) => t ** 3 // decelerating to zero velocity -export const easeOutCubic = (t: number) => --t * t * t + 1 +export const easeOutCubic = (t: number) => --t ** 3 + 1 // acceleration until halfway, then deceleration -export const easeInOutCubic = (t: number) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1 +export const easeInOutCubic = (t: number) => t < 0.5 ? 4 * t ** 3 : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1 // accelerating from zero velocity -export const easeInQuart = (t: number) => t * t * t * t +export const easeInQuart = (t: number) => t ** 4 // decelerating to zero velocity -export const easeOutQuart = (t: number) => 1 - --t * t * t * t +export const easeOutQuart = (t: number) => 1 - --t ** 4 // acceleration until halfway, then deceleration export const easeInOutQuart = (t: number) => (t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t) // accelerating from zero velocity -export const easeInQuint = (t: number) => t * t * t * t * t +export const easeInQuint = (t: number) => t ** 5 // decelerating to zero velocity -export const easeOutQuint = (t: number) => 1 + --t * t * t * t * t +export const easeOutQuint = (t: number) => 1 + --t ** 5 // acceleration until halfway, then deceleration -export const easeInOutQuint = (t: number) => t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t +export const easeInOutQuint = (t: number) => t < 0.5 ? 16 * t ** 5 : 1 + 16 * --t ** 5 diff --git a/packages/vuetify/src/services/icons/index.ts b/packages/vuetify/src/services/icons/index.ts index 495d6d5700f..36b6846446a 100644 --- a/packages/vuetify/src/services/icons/index.ts +++ b/packages/vuetify/src/services/icons/index.ts @@ -2,33 +2,23 @@ import { Service } from '../service' // Types -import { - VuetifyIconSets, - VuetifyIconOptions -} from 'vuetify/types/services/icons' +import { VuetifyIconOptions } from 'vuetify/types/services/icons' // Presets -import md from './presets/md' -import mdi from './presets/mdi' -import fa from './presets/fa' -import fa4 from './presets/fa4' - -const iconFonts: VuetifyIconSets = Object.freeze({ - md, mdi, fa, fa4 -}) +import presets from './presets' export class Icons extends Service { static property = 'icons' public iconfont: VuetifyIconOptions['iconfont'] = 'md' - public values: VuetifyIconOptions['values'] = iconFonts[this.iconfont] + public values: VuetifyIconOptions['values'] = presets[this.iconfont] constructor (options: Partial = {}) { super() if (options.iconfont) this.iconfont = options.iconfont this.values = { - ...iconFonts[this.iconfont], + ...presets[this.iconfont], ...(options.values || {}) } } diff --git a/packages/vuetify/src/services/icons/presets/index.ts b/packages/vuetify/src/services/icons/presets/index.ts new file mode 100644 index 00000000000..95635cd2a72 --- /dev/null +++ b/packages/vuetify/src/services/icons/presets/index.ts @@ -0,0 +1,11 @@ +// Types +import { VuetifyIconSets } from 'vuetify/types/services/icons' + +import md from './md' +import mdi from './mdi' +import fa from './fa' +import fa4 from './fa4' + +export default Object.freeze({ + md, mdi, fa, fa4 +}) as VuetifyIconSets diff --git a/packages/vuetify/src/services/theme/index.ts b/packages/vuetify/src/services/theme/index.ts index 08060f6dd7b..7baf8647ce9 100644 --- a/packages/vuetify/src/services/theme/index.ts +++ b/packages/vuetify/src/services/theme/index.ts @@ -1,3 +1,4 @@ +/* eslint-disable no-multi-spaces */ // Extensions import { Service } from '../service' @@ -20,22 +21,22 @@ export class Theme extends Service { public styleEl?: HTMLStyleElement public themes: VuetifyThemes = { light: { - primary: '#1976D2', - secondary: '#424242', - accent: '#82B1FF', - error: '#FF5252', - info: '#2196F3', - success: '#4CAF50', - warning: '#FB8C00' + primary: '#1976D2', // blue.darken2 + secondary: '#424242', // grey.darken3 + accent: '#82B1FF', // blue.accent1 + error: '#FF5252', // red.accent2 + info: '#2196F3', // blue.base + success: '#4CAF50', // green.base + warning: '#FB8C00' // amber.base }, dark: { - primary: '#2196F3', - secondary: '#424242', - accent: '#FF3F80', - error: '#FF5252', - info: '#2196F3', - success: '#4CAF50', - warning: '#FB8C00' + primary: '#2196F3', // blue.base + secondary: '#424242', // grey.darken3 + accent: '#FF4081', // pink.accent-2 + error: '#FF5252', // red.accent2 + info: '#2196F3', // blue.base + success: '#4CAF50', // green.base + warning: '#FB8C00' // amber.base } }