From 825b4dc2fbf04fd63e4094fdcaa464fbba08be68 Mon Sep 17 00:00:00 2001 From: Warinyourself Date: Mon, 31 Oct 2022 11:55:05 +0300 Subject: [PATCH] Add new agida theme --- package.json | 5 +- src/assets/images/themes/agida/index.png | Bin 0 -> 10080 bytes src/components/base/BackgroundImage.tsx | 11 +- src/components/themes/agida/index.tsx | 234 +++++++++++++---------- src/components/themes/agida/lib/wave.ts | 2 - src/locales/en.json | 1 + src/locales/ru.json | 1 + src/models/app.ts | 2 +- src/models/lightdm.ts | 2 +- src/plugins/components.ts | 17 -- src/utils/color.ts | 46 ++--- src/utils/constant.ts | 30 ++- src/utils/gl.ts | 2 +- src/utils/helper.ts | 18 +- src/utils/lightdm.ts | 4 +- yarn.lock | 91 +++++++-- 16 files changed, 271 insertions(+), 195 deletions(-) create mode 100644 src/assets/images/themes/agida/index.png diff --git a/package.json b/package.json index 5f47cb8..c7f1cfc 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "css-doodle": "^0.12.0", "lodash": "^4.17.21", "mousetrap": "^1.6.5", + "nody-greeter-types": "^1.0.7", "nouislider": "^14.6.3", "parallax-js": "^3.1.0", "vue": "^2.6.12", @@ -27,8 +28,8 @@ "@types/lodash": "^4.14.178", "@types/mousetrap": "^1.6.9", "@types/node": "14.10.0", - "@typescript-eslint/eslint-plugin": "^2.33.0", - "@typescript-eslint/parser": "^2.33.0", + "@typescript-eslint/eslint-plugin": "3.3.0", + "@typescript-eslint/parser": "3.10.1", "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", diff --git a/src/assets/images/themes/agida/index.png b/src/assets/images/themes/agida/index.png new file mode 100644 index 0000000000000000000000000000000000000000..7c7b708e09e988512bcdb7a1ed471d75be8619d6 GIT binary patch literal 10080 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 { @Component({ components }) export default class BackgroundImage extends Vue { - get theme() { + get theme(): AppTheme { return AppModule.activeTheme } - get isOpenLogin() { + get isOpenLogin(): boolean { return PageModule.isOpenBlock('login') } - render(h: CreateElement) { + render(h: CreateElement): JSX.Element { const body = h(components[this.theme.component ?? 'random']) - return
+ return
{ body }
diff --git a/src/components/themes/agida/index.tsx b/src/components/themes/agida/index.tsx index af52dc3..f1bb0fd 100644 --- a/src/components/themes/agida/index.tsx +++ b/src/components/themes/agida/index.tsx @@ -1,8 +1,7 @@ import { Component, Vue } from 'vue-property-decorator' import { AppModule } from '@/store/app' -import { waveInit } from './lib' -import { Debounce } from '@/utils/helper' import { Wavery } from './lib/wave' +import { Debounce } from '@/utils/helper' import { changeHsl, hexToRgb, rgbToHsl } from '@/utils/color' export const OPACITY_ARR = [0.265, 0.4, 0.53, 1] @@ -11,10 +10,9 @@ export const bottomColors = ['#9C1EFF', '#8518E9', '#6F12D3', '#590ABD'] export const MAX_WAVES = 4 @Component -export default class DestructionTheme extends Vue { +export default class AgidaTheme extends Vue { iconWidth = 667 iconHeight = 684 - test = 1 wave = { height: 300, @@ -24,7 +22,7 @@ export default class DestructionTheme extends Vue { variance: 1, animation: { steps: 2, - time: 40000 + time: 4000 } } @@ -33,44 +31,142 @@ export default class DestructionTheme extends Vue { height: window.innerHeight } - get topColor() { - return '#03C79C' + get topColor(): string { + return AppModule.getThemeInput('top-color')?.value as string || '#00CC99' } - get bottomColor() { - return '#9C1EFF' + get bottomColor(): string { + return AppModule.getThemeInput('bottom-color')?.value as string || '#6600FF' } - get topColors() { - return this.generateArrayColors(this.topColor) + get animationSpeed(): number { + return AppModule.getThemeInput('animation-speed')?.value as number || 40 } - get bottomColors() { - return this.generateArrayColors(this.bottomColor) + get topColors(): string[] { + const initHSL = rgbToHsl(hexToRgb(this.topColor)) + const second = changeHsl(initHSL, 10, -3, -5) + const third = changeHsl(initHSL, 25, -3, -10) + const fourth = changeHsl(initHSL, 33, -3, -20) + + return [initHSL, second, third, fourth] } - generateArrayColors(color: string) { - const initHSL = rgbToHsl(hexToRgb(color)) - const second = changeHsl(initHSL, 17, 3, -5) - const third = changeHsl(initHSL, 26, 3, -8) - const thourd = changeHsl(initHSL, 35, 3, -12) + get bottomColors(): string[] { + const initHSL = rgbToHsl(hexToRgb(this.bottomColor)) + const second = changeHsl(initHSL, 10, -3, 5) + const third = changeHsl(initHSL, 25, -3, 10) + const fourth = changeHsl(initHSL, 33, -3, 20) - return [initHSL, second, third, thourd] + return [initHSL, second, third, fourth] } - get animationSpeed() { - return AppModule.getThemeInput('animation-speed')?.value as number || 40 + get bottomActiveColor(): string { + return this.bottomColor // this.bottomColors[3] + } + + get knifeSVG(): JSX.Element { + return + + + + } + + get agidaSVG(): JSX.Element { + return + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + } + + get yinYangSVG(): JSX.Element { + return + + + + } + + get activeFragment() { + return this.knifeSVG } - get width() { + get width(): number { return this.screen.width } - get height() { + get height(): number { return this.screen.height } - get viewBox() { + get viewBox(): string { return `0 0 ${this.width} ${this.height}` } @@ -102,10 +198,11 @@ export default class DestructionTheme extends Vue { generateWave(type: 'bottom' | 'top') { const wavery = new Wavery(this.wave) const waveSvg = wavery.generateSvg() + console.log('GENERATE WAVE') const { height, width, xmlns, paths } = waveSvg.svg const isTop = type === 'top' - const colorsArray = isTop ? topColors : bottomColors + const colorsArray = isTop ? this.topColors : this.bottomColors const angle = Math.atan(window.innerHeight / window.innerWidth) * (180 / Math.PI) * 1.1 return - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + {this.activeFragment} - + - - - - - - + + + + + + diff --git a/src/components/themes/agida/lib/wave.ts b/src/components/themes/agida/lib/wave.ts index 956dfee..54dac00 100644 --- a/src/components/themes/agida/lib/wave.ts +++ b/src/components/themes/agida/lib/wave.ts @@ -170,8 +170,6 @@ export class Wavery { return this.generateKeyframe(percent, isBound ? path.d : path.animatedPath[index - 1]) }) - console.log({ animationList }) - return `.path-${index}{ animation:pathAnim-${index} ${this.animation.time}ms; animation-timing-function: ${this.animation.timingFunction}; diff --git a/src/locales/en.json b/src/locales/en.json index 509f72d..cd50eb7 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -2,6 +2,7 @@ "input": { "time": "Time", "color": "Select color", + "bottom-color": "Bottom color", "color-active": "Select active color", "color-second": "Select second color", "slider-amount": "Choice slider amount", diff --git a/src/locales/ru.json b/src/locales/ru.json index 0c8c8e1..d0f0ae9 100644 --- a/src/locales/ru.json +++ b/src/locales/ru.json @@ -2,6 +2,7 @@ "input": { "time": "Время", "color": "Выбрать цвет", + "bottom-color": "Выбрать нижний цвет", "color-active": "Выбрать активный цвет", "color-second": "Выбрать второстепенный цвет", "slider-amount": "Choice slider amount", diff --git a/src/models/app.ts b/src/models/app.ts index f93bd28..deffeb1 100644 --- a/src/models/app.ts +++ b/src/models/app.ts @@ -25,7 +25,7 @@ export interface AppThemeSnapshot { values: Record; } -export type AppInputTheme = AppInputThemeGeneral | AppInputThemeSlider | AppInputThemeSlider | AppInputButton +export type AppInputTheme = AppInputThemeGeneral | AppInputThemeSlider | AppInputButton export type AppInputThemeType = 'color' | 'slider' | 'checkbox' | 'palette' | 'button' export type AppInputThemeValue = string | boolean | string[] | number diff --git a/src/models/lightdm.ts b/src/models/lightdm.ts index e232d69..62d89c0 100644 --- a/src/models/lightdm.ts +++ b/src/models/lightdm.ts @@ -1,4 +1,4 @@ -/* eslint-disable @typescript-eslint/camelcase */ +/* eslint-disable camelcase */ export interface ExpandedWindow { lightdm: Lightdm; authentication_complete(): void; diff --git a/src/plugins/components.ts b/src/plugins/components.ts index 86b3029..d01b617 100644 --- a/src/plugins/components.ts +++ b/src/plugins/components.ts @@ -3,20 +3,3 @@ import Vue from 'vue' import AppIcon from '@/components/app/AppIcon.vue' Vue.component('AppIcon', AppIcon) - -// import upperFirst from 'lodash/upperFirst' -// import camelCase from 'lodash/camelCase' - -// const requireComponent = require.context( -// '@/components/app', true, /\.vue$/ -// ) - -// requireComponent.keys().forEach(fileName => { -// const componentConfig = requireComponent(fileName) - -// const componentName = upperFirst( -// camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')) -// ) - -// Vue.component(`${componentName}`, componentConfig.default || componentConfig) -// }) diff --git a/src/utils/color.ts b/src/utils/color.ts index 24172ac..ef6de49 100644 --- a/src/utils/color.ts +++ b/src/utils/color.ts @@ -1,9 +1,9 @@ -export type ColorArray = [number, number, number] - -export interface IConvertOptions { - view?: 'array' | 'string' +export interface ConvertOptions { + view?: 'array' | 'string'; } +export type ColorArray = [number, number, number]; + export const hexToRgb = (color: string): ColorArray => { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color) return result ? [ @@ -15,28 +15,27 @@ export const hexToRgb = (color: string): ColorArray => { export const fromBracketsToNumber = (color: string): ColorArray => { const colors = color.slice(color.indexOf('(') + 1).replace(')', '').split(',') - - return colors.slice(0, 3).map(parseInt) as ColorArray + return colors.slice(0, 3).map((color) => parseInt(color)) as ColorArray } export const changeHsl = (hsl: string, hAdd: number, sAdd: number, lAdd: number): string => { - let hslMass = fromBracketsToNumber(hsl) + const hslMass = fromBracketsToNumber(hsl) return `hsl(${hslMass[0] + hAdd}, ${hslMass[1] + sAdd}%, ${hslMass[2] + lAdd}%)` } -export function rgbToHsl (colorRGB: ColorArray): string -export function rgbToHsl (colorRGB: ColorArray, convertOptions?: IConvertOptions): string | ColorArray { +export function rgbToHsl(colorRGB: ColorArray): string +export function rgbToHsl(colorRGB: ColorArray, convertOptions?: ConvertOptions): string | ColorArray { let [r, g, b] = colorRGB const { view } = convertOptions || {} const isArray = view === 'array' r /= 255 g /= 255 b /= 255 - let [max, min] = [Math.max(r, g, b), Math.min(r, g, b)] + const [max, min] = [Math.max(r, g, b), Math.min(r, g, b)] let h = 0 let s = 0 - let l = (max + min) / 2 + const l = (max + min) / 2 const finalArray = (): ColorArray => [Math.round(h), Math.round(s * 100), Math.round(l * 100)] const formatString = (hsl: ColorArray) => `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)` @@ -45,7 +44,7 @@ export function rgbToHsl (colorRGB: ColorArray, convertOptions?: IConvertOptions return isArray ? finalArray() : formatString(finalArray()) } - let d = (max - min) + const d = (max - min) s = l >= 0.5 ? d / (2 - (max + min)) : d / (max + min) switch (max) { case r: h = ((g - b) / d + 0) * 60; break @@ -55,26 +54,3 @@ export function rgbToHsl (colorRGB: ColorArray, convertOptions?: IConvertOptions return isArray ? finalArray() : formatString(finalArray()) } - -function getPrettyDate(timestamp: number): string; -function getPrettyDate(day: string, month: string, year: string): string; -function getPrettyDate(date: Date): string; - -// Может принимать от 1 до 3 параметров разных типов, в зависимости от перегрузок -function getPrettyDate(arg1: unknown, arg2?: unknown, arg3?: unknown) { - let prettyDate: string = ''; - - if(typeof arg1 === 'number') { - const date = new Date(arg1); - const day = date.getDate(); - const month = date.getMonth() + 1; - const year = date.getFullYear(); - - prettyDate = `${day}/${month}/${year}` - } - - return prettyDate; -} - -const timeStamp = new Date().getTime(); -getPrettyDate(timeStamp); \ No newline at end of file diff --git a/src/utils/constant.ts b/src/utils/constant.ts index 22b3065..058c3bc 100644 --- a/src/utils/constant.ts +++ b/src/utils/constant.ts @@ -1,4 +1,4 @@ -import { AppTheme } from '@/models/app' +import { AppTheme, AppInputThemeGeneral } from '@/models/app' import { pxratio, hueSlider, @@ -6,7 +6,8 @@ import { setActiveColor, brightnessSlider, buildInputSlider, - buildInvertCheckbox + buildInvertCheckbox, + buildInputColor } from './helper' const background = '#22233D' @@ -30,6 +31,14 @@ export const defaultTheme: AppTheme = { ] } +const colorInput: AppInputThemeGeneral = { + name: 'top-color', + type: 'color', + label: 'input.color-active', + value: '#00CC99', + options: { class: 'w-50' } +} + export const AppThemes: AppTheme[] = [ { name: 'Agida', @@ -37,7 +46,22 @@ export const AppThemes: AppTheme[] = [ color: { active: '#04ded4', background: '#19102e' - } + }, + settings: [ + colorInput, + { + name: 'bottom-color', + type: 'color', + label: 'input.color-active', + value: '#6600FF', + options: { class: 'w-50' } + } + // buildInputColor({ + // name: 'bottom-color', + // value: '#6600FF', + // options: { class: 'w-50' } + // }) + ] }, defaultTheme, { diff --git a/src/utils/gl.ts b/src/utils/gl.ts index d24c426..e326bc6 100644 --- a/src/utils/gl.ts +++ b/src/utils/gl.ts @@ -51,7 +51,7 @@ export default class GL { time = 0 startTime = Date.now() - renderHook: null | Function = null + renderHook: null | (() => void) = null renderOptions: GLRenderOptions = {} constructor( diff --git a/src/utils/helper.ts b/src/utils/helper.ts index a69543e..04c86f6 100644 --- a/src/utils/helper.ts +++ b/src/utils/helper.ts @@ -139,7 +139,7 @@ export const systemActionsObject = systemActions.reduce((acc, action) => { } }, {} as Record void>) -export function preventDefault(event: Event, callback?: Function) { +export function preventDefault(event: Event, callback?: () => void): void { event.preventDefault() callback && callback() } @@ -152,7 +152,7 @@ export function focusInputPassword() { } } -export function stopPropagation(event: Event, callback?: Function) { +export function stopPropagation(event: Event, callback?: () => void): void { event.stopPropagation() callback && callback() } @@ -214,6 +214,20 @@ export function buildInputSlider({ } } +export function buildInputColor({ + name = 'active-color', + value = '#00CC99', + ...options +} = {}): AppInputThemeGeneral { + return { + name, + value, + label: `input.${name}`, + type: 'color', + ...options + } +} + export const pxratio = () => buildInputSlider({ name: 'pxratio', icon: 'pxratio', min: 0.01, max: 1, value: 0.8 }) export const hueSlider = () => buildInputSlider({ name: 'hue', min: 1, max: 360, step: 1, value: 0 }) export const brightnessSlider = () => buildInputSlider({ name: 'brightness', min: 0, max: 1, step: 0.01, value: 1 }) diff --git a/src/utils/lightdm.ts b/src/utils/lightdm.ts index 2bec550..3cdf911 100644 --- a/src/utils/lightdm.ts +++ b/src/utils/lightdm.ts @@ -1,11 +1,11 @@ -/* eslint-disable @typescript-eslint/camelcase */ +/* eslint-disable camelcase */ import { appWindow } from '@/models/lightdm' const DEBUG_PASSWORD = 'password' const lightdmDebug = appWindow.lightdm === undefined let password: string -let completeCallback: undefined | Function +let completeCallback: undefined | (() => void) if (lightdmDebug) { appWindow.lightdm = { diff --git a/yarn.lock b/yarn.lock index 0ab63fd..5648333 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1053,7 +1053,12 @@ dependencies: "@types/node" "*" -"@types/json-schema@^7.0.3", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5": +"@types/json-schema@^7.0.3": + version "7.0.11" + resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3" + integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ== + +"@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5": version "7.0.9" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d" integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ== @@ -1185,40 +1190,72 @@ anymatch "^3.0.0" source-map "^0.6.0" -"@typescript-eslint/eslint-plugin@^2.33.0": - version "2.34.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.34.0.tgz#6f8ce8a46c7dea4a6f1d171d2bb8fbae6dac2be9" - integrity sha512-4zY3Z88rEE99+CNvTbXSyovv2z9PNOVffTWD2W8QF5s2prBQtwN2zadqERcrHpcR7O/+KMI3fcTAmUUhK/iQcQ== +"@typescript-eslint/eslint-plugin@3.3.0": + version "3.3.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.3.0.tgz#89518e5c5209a349bde161c3489b0ec187ae5d37" + integrity sha512-Ybx/wU75Tazz6nU2d7nN6ll0B98odoiYLXwcuwS5WSttGzK46t0n7TPRQ4ozwcTv82UY6TQoIvI+sJfTzqK9dQ== dependencies: - "@typescript-eslint/experimental-utils" "2.34.0" + "@typescript-eslint/experimental-utils" "3.3.0" functional-red-black-tree "^1.0.1" regexpp "^3.0.0" + semver "^7.3.2" tsutils "^3.17.1" -"@typescript-eslint/experimental-utils@2.34.0": - version "2.34.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.34.0.tgz#d3524b644cdb40eebceca67f8cf3e4cc9c8f980f" - integrity sha512-eS6FTkq+wuMJ+sgtuNTtcqavWXqsflWcfBnlYhg/nS4aZ1leewkXGbvBhaapn1q6qf4M71bsR1tez5JTRMuqwA== +"@typescript-eslint/experimental-utils@3.10.1": + version "3.10.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-3.10.1.tgz#e179ffc81a80ebcae2ea04e0332f8b251345a686" + integrity sha512-DewqIgscDzmAfd5nOGe4zm6Bl7PKtMG2Ad0KG8CUZAHlXfAKTF9Ol5PXhiMh39yRL2ChRH1cuuUGOcVyyrhQIw== + dependencies: + "@types/json-schema" "^7.0.3" + "@typescript-eslint/types" "3.10.1" + "@typescript-eslint/typescript-estree" "3.10.1" + eslint-scope "^5.0.0" + eslint-utils "^2.0.0" + +"@typescript-eslint/experimental-utils@3.3.0": + version "3.3.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-3.3.0.tgz#d72a946e056a83d4edf97f3411cceb639b0b8c87" + integrity sha512-d4pGIAbu/tYsrPrdHCQ5xfadJGvlkUxbeBB56nO/VGmEDi/sKmfa5fGty5t5veL1OyJBrUmSiRn1R1qfVDydrg== dependencies: "@types/json-schema" "^7.0.3" - "@typescript-eslint/typescript-estree" "2.34.0" + "@typescript-eslint/typescript-estree" "3.3.0" eslint-scope "^5.0.0" eslint-utils "^2.0.0" -"@typescript-eslint/parser@^2.33.0": - version "2.34.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.34.0.tgz#50252630ca319685420e9a39ca05fe185a256bc8" - integrity sha512-03ilO0ucSD0EPTw2X4PntSIRFtDPWjrVq7C3/Z3VQHRC7+13YB55rcJI3Jt+YgeHbjUdJPcPa7b23rXCBokuyA== +"@typescript-eslint/parser@3.10.1": + version "3.10.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-3.10.1.tgz#1883858e83e8b442627e1ac6f408925211155467" + integrity sha512-Ug1RcWcrJP02hmtaXVS3axPPTTPnZjupqhgj+NnZ6BCkwSImWk/283347+x9wN+lqOdK9Eo3vsyiyDHgsmiEJw== dependencies: "@types/eslint-visitor-keys" "^1.0.0" - "@typescript-eslint/experimental-utils" "2.34.0" - "@typescript-eslint/typescript-estree" "2.34.0" + "@typescript-eslint/experimental-utils" "3.10.1" + "@typescript-eslint/types" "3.10.1" + "@typescript-eslint/typescript-estree" "3.10.1" eslint-visitor-keys "^1.1.0" -"@typescript-eslint/typescript-estree@2.34.0": - version "2.34.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.34.0.tgz#14aeb6353b39ef0732cc7f1b8285294937cf37d5" - integrity sha512-OMAr+nJWKdlVM9LOqCqh3pQQPwxHAN7Du8DR6dmwCrAmxtiXQnhHJ6tBNtf+cggqfo51SG/FCwnKhXCIM7hnVg== +"@typescript-eslint/types@3.10.1": + version "3.10.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.10.1.tgz#1d7463fa7c32d8a23ab508a803ca2fe26e758727" + integrity sha512-+3+FCUJIahE9q0lDi1WleYzjCwJs5hIsbugIgnbB+dSCYUxl8L6PwmsyOPFZde2hc1DlTo/xnkOgiTLSyAbHiQ== + +"@typescript-eslint/typescript-estree@3.10.1": + version "3.10.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-3.10.1.tgz#fd0061cc38add4fad45136d654408569f365b853" + integrity sha512-QbcXOuq6WYvnB3XPsZpIwztBoquEYLXh2MtwVU+kO8jgYCiv4G5xrSP/1wg4tkvrEE+esZVquIPX/dxPlePk1w== + dependencies: + "@typescript-eslint/types" "3.10.1" + "@typescript-eslint/visitor-keys" "3.10.1" + debug "^4.1.1" + glob "^7.1.6" + is-glob "^4.0.1" + lodash "^4.17.15" + semver "^7.3.2" + tsutils "^3.17.1" + +"@typescript-eslint/typescript-estree@3.3.0": + version "3.3.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-3.3.0.tgz#841ffed25c29b0049ebffb4c2071268a34558a2a" + integrity sha512-3SqxylENltEvJsjjMSDCUx/edZNSC7wAqifUU1Ywp//0OWEZwMZJfecJud9XxJ/40rAKEbJMKBOQzeOjrLJFzQ== dependencies: debug "^4.1.1" eslint-visitor-keys "^1.1.0" @@ -1228,6 +1265,13 @@ semver "^7.3.2" tsutils "^3.17.1" +"@typescript-eslint/visitor-keys@3.10.1": + version "3.10.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-3.10.1.tgz#cd4274773e3eb63b2e870ac602274487ecd1e931" + integrity sha512-9JgC82AaQeglebjZMgYR5wgmfUdUc+EitGUUMW8u2nDckaeimzW+VsoLV6FoimPv2id3VQzfjwBxEMVz08ameQ== + dependencies: + eslint-visitor-keys "^1.1.0" + "@vue/babel-helper-vue-jsx-merge-props@^1.2.1": version "1.2.1" resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz#31624a7a505fb14da1d58023725a4c5f270e6a81" @@ -7000,6 +7044,11 @@ node-releases@^2.0.1: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.1.tgz#3d1d395f204f1f2f29a54358b9fb678765ad2fc5" integrity sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA== +nody-greeter-types@^1.0.7: + version "1.0.7" + resolved "https://registry.yarnpkg.com/nody-greeter-types/-/nody-greeter-types-1.0.7.tgz#30564af4b5fe0b60c5055f9ac997ebe29cd94d89" + integrity sha512-eaNGLWktHdcuPBhHg/um6R3W+EGRfy8VoEswh18RuV4OM80w/6k1NHPoUVLjF7+Wew4LpfNcnSpuWJlkWY6nXA== + normalize-package-data@^2.5.0: version "2.5.0" resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"