Skip to content
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
88 commits
Select commit Hold shift + click to select a range
0e196e6
feat: ts types for colors (#3957) (#4270)
Fsss126 Jun 27, 2024
69e3ab2
feat(sticky-scrollbar): init component (#4286)
m0ksem Jun 27, 2024
de9a907
Color css variables must be rendered on app root element, not body (#…
Fsss126 Jun 27, 2024
4aac12a
feat: remove lodash (#4316)
m0ksem Jun 27, 2024
e91f248
feat: remove colortranslator (#4310)
m0ksem Jun 27, 2024
3d770cd
chore(storybook): fix add text method
m0ksem Jun 27, 2024
0d65f7e
fix(data-table): correct start case
m0ksem Jun 27, 2024
df62c4b
fix(utils/merge): create empty object if object is undefined
m0ksem Jun 27, 2024
999ee9e
fix(resize-observer): correctly normalize observed elements
m0ksem Jun 27, 2024
288c611
fix(VaConfig): correctly copy regex values
m0ksem Jun 27, 2024
cf3d2d1
Added ability to apply multiple presets (#4303)
Fsss126 Jun 27, 2024
30e739e
chore(deps): bump ws from 6.2.2 to 6.2.3 (#4328)
dependabot[bot] Jun 27, 2024
b8eb22d
feat: use custom color names in button
m0ksem Jun 27, 2024
e87e580
feat(icon): icon name extendable type (#4045)
m0ksem Jun 27, 2024
fa49653
feat: masks (#4332)
m0ksem Jul 1, 2024
eaee0ee
docs(sticky-scrollbar): add example with data table
m0ksem Jul 3, 2024
a6a80f0
feat(sticky-headers): init sticky table headers composable
m0ksem Jul 3, 2024
6541335
fix: remove empty changelogs
m0ksem Jul 3, 2024
3d483b6
docs: add changelogs
m0ksem Jul 3, 2024
24b642c
docs: add more changelogs for services
m0ksem Jul 3, 2024
8a2c4bb
fix: improve docs SSR
m0ksem Jul 4, 2024
513af47
fix: render css colors on body root
m0ksem Jul 4, 2024
666dfc6
fix: correctly split numbers in color names
m0ksem Jul 8, 2024
d471eb6
chore: remove cleave (#4334)
m0ksem Jul 8, 2024
c53bce9
Feat/devtools and compiler (#4340)
m0ksem Jul 8, 2024
6d752d9
feat(devtools): improve dx and component tree parsing and docs (#4345)
m0ksem Jul 15, 2024
440da3e
fix(input/stories): correctly handle input query selector
m0ksem Jul 16, 2024
217bbf2
fix(compiler): fix build
m0ksem Jul 16, 2024
900cbfc
chore(compiler): release beta3
m0ksem Jul 16, 2024
fc5a0f1
docs(compiler/css-layers): added css layers docs page
m0ksem Jul 16, 2024
61c1ba5
feat(compiler): add config support
m0ksem Jul 17, 2024
a90bfcb
docs: added compiler/vuestic-config docs
m0ksem Jul 17, 2024
2f170b1
fix(compiler): resolve virtual vuestic-config
m0ksem Jul 17, 2024
28629bf
chore: bump @vuestic/compiler
m0ksem Jul 17, 2024
5541a16
fix(devtools): correct file path for windows
m0ksem Jul 23, 2024
c6c47ed
chore: update yarn.lock
m0ksem Jul 23, 2024
ddb052c
bump(compiler): 0.0.1-beta5
m0ksem Jul 23, 2024
91127bc
fix(masks): correctly handle months (feb) (#4347)
m0ksem Jul 29, 2024
573a927
fix(VaColorInput): added full length color input (#4348)
ahmadJT Aug 6, 2024
9a0f6fc
fix(input): correct placeholder color for textarea
m0ksem Aug 6, 2024
0660438
docs: correct components config code examples
m0ksem Aug 6, 2024
c6b0b3c
chore: improve select breaking layout
m0ksem Aug 6, 2024
8d7bf76
fix(badge): center content by default
m0ksem Aug 6, 2024
f390a98
chore: indicate compatibility with new v4 major (#4323)
danielroe Aug 19, 2024
653cecd
fix: augment `vue` rather than `@vue/runtime-core` (#4354)
danielroe Aug 19, 2024
48a4e6b
chore: improve select option render time (#4355)
padinko Aug 19, 2024
6882d6d
chore(deps): bump @nuxt/devtools from 1.1.5 to 1.3.9 (#4350)
dependabot[bot] Aug 19, 2024
f0f84d1
fix(nuxt): store config in runtime config for plugin instead of JSON
m0ksem Aug 19, 2024
086787a
chore(nuxt): bump 1.0.21
m0ksem Aug 19, 2024
eb93b68
Add Support & Consulting page to docs (#4359)
raichev-dima Aug 21, 2024
5241e0f
Update the "Support & Consulting" page links (#4360)
raichev-dima Aug 22, 2024
d23e8a9
Update readme with "Support & Consulting" page info (#4362)
raichev-dima Aug 22, 2024
0a30532
minor
asvae Aug 23, 2024
9d2b125
chore: rename inconsistent mask names
m0ksem Aug 25, 2024
b7983ed
chore(docs): reorder sidebar items
m0ksem Aug 25, 2024
ab414f9
feat(sticky-scroll): add offset prop
m0ksem Aug 25, 2024
8794018
chore(deps): bump nuxt from 3.11.1 to 3.12.4 (#4349)
dependabot[bot] Aug 26, 2024
c1eb7f8
feat(devtools): init layout editor (#4363)
m0ksem Aug 26, 2024
682fc16
chore(compiler): disabled devtools by default and turn on config
m0ksem Aug 26, 2024
cee8f9d
chore: use docker compose instead of deprecated docker-compose
m0ksem Aug 26, 2024
61f9657
chore: bump version to v1.10.0
m0ksem Aug 26, 2024
3d07e7c
chore: add Netlify link to README.md (#4365)
raichev-dima Aug 28, 2024
435c85e
chore(compiler): bump 0.1.0
m0ksem Aug 26, 2024
3f35953
Basic set up for Netlify (#4368)
raichev-dima Aug 29, 2024
a003dfc
chore: set up Netlify config for the monorepo (#4369)
raichev-dima Sep 2, 2024
56efd30
fix: enable the build information under Netlify environment
raichev-dima Sep 5, 2024
66709a0
fix(tree-view): react on expanded prop for nested children
m0ksem Sep 10, 2024
b11491d
fix(#4346): throw warn and error if observable target is not element
m0ksem Sep 11, 2024
15c6691
feat(toast#4373): add bottom-center and top-center positions
m0ksem Sep 11, 2024
3f1a17a
Fix#4374/allow-more-types-for-select-clear-value (#4375)
m0ksem Sep 11, 2024
ff822e7
feat(input): add native autocomplete attribute support (#4370)
padinko Sep 13, 2024
4f00151
chore: bump version to v1.10.1
m0ksem Sep 13, 2024
280534b
fix(useForm): remove extra computed from formData
m0ksem Sep 23, 2024
5b53670
feat(VaToast #4373): add bottom-center, top-center position options (…
tom00502 Sep 23, 2024
cdf8654
fix: create-vuestic crossplatform paths (#4379)
shpingalet007 Sep 23, 2024
db2644d
chore: bump version to v1.10.2
m0ksem Sep 24, 2024
2cd0c39
fix(#4394): correct button dropdown teleport when split is used (#4395)
m0ksem Oct 15, 2024
1773f27
fix(VaFormField): fix not working errorCount prop (#4387)
padinko Oct 15, 2024
39fe880
fix: do not apply extra styles when non-headless (#4393)
m0ksem Oct 15, 2024
e9084f6
chore(deps-dev): bump webpack from 5.91.0 to 5.94.0 (#4367)
dependabot[bot] Oct 15, 2024
6aecd46
fix: useMask makes input dirty and add decimal char option (#4399)
m0ksem Oct 15, 2024
712a7b1
Introducing Vuestic UI Guru on Gurubase.io (#4400)
kursataktas Oct 17, 2024
6a02309
feat(#4396): add custom search function for select search (#4401)
m0ksem Oct 17, 2024
7c9d87a
chore(deps): bump express from 4.19.2 to 4.21.0 (#4378)
dependabot[bot] Oct 17, 2024
e7c27b9
chore(deps-dev): bump vite from 4.5.3 to 4.5.5 (#4380)
dependabot[bot] Oct 17, 2024
51fa22d
chore(deps-dev): bump vite from 5.3.3 to 5.3.6 in /packages/compiler/…
dependabot[bot] Oct 17, 2024
2f1b373
chore(deps): bump rollup from 4.18.0 to 4.22.4 in /packages/compiler/…
dependabot[bot] Oct 17, 2024
0170cf2
chore(deps-dev): bump rollup from 3.29.4 to 3.29.5
dependabot[bot] Oct 17, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat: remove colortranslator (#4310)
  • Loading branch information
m0ksem committed Jul 23, 2024
commit e91f2480d76348cbe69a6cfe043ee7695f4c54fa
1 change: 0 additions & 1 deletion packages/ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@
"@floating-ui/vue": "^1.0.1",
"@types/lodash": "^4.14.161",
"cleave.js": "^1.6.0",
"colortranslator": "^1.9.2",
"lodash": "^4.17.21"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/va-affix/VaAffix-utils.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { throttle } from "../../utils/throttle";
import { throttle } from '../../utils/throttle'

export type State = {
isTopAffixed: boolean;
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/va-badge/VaBadge.vue
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import {
} from '../../composables'

import { useFloatingPosition, useFloatingPositionProps } from './hooks/useFloatingPositionStyles'
import { pick } from '../../utils/pick';
import { pick } from '../../utils/pick'

defineOptions({
name: 'VaBadge',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ const computedButtonIcons = computed(() => {
})

const buttonPropsFiltered = computed(() => {
let ignoredProps = ['to', 'href', 'loading', 'icon'] as const
const ignoredProps = ['to', 'href', 'loading', 'icon'] as const
const presetProps = [
'plain',
'textOpacity', 'backgroundOpacity',
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/va-card/VaCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import {
useRouterLink,
useRouterLinkProps,
} from '../../composables'
import { pick } from '../../utils/pick';
import { pick } from '../../utils/pick'

defineOptions({
name: 'VaCard',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

<script lang="ts" setup>
import { useBem, useComponentPresetProp, useAlignProps, useAlign } from '../../../../composables'
import { pick } from '../../../../utils/pick';
import { pick } from '../../../../utils/pick'

defineOptions({
name: 'VaCardActions',
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/va-chip/VaChip.vue
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ import {
} from '../../composables'

import { VaIcon } from '../va-icon'
import { pick } from '../../utils/pick';
import { pick } from '../../utils/pick'

defineOptions({
name: 'VaChip',
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/va-icon/VaIcon.vue
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import {
useSize, useSizeProps,
useIcon,
} from '../../composables'
import { omit } from '../../utils/omit';
import { omit } from '../../utils/omit'

defineOptions({
name: 'VaIcon',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@

<script lang="ts" setup>
import { computed, ComputedRef, PropType, ref, shallowRef, watch } from 'vue'
import { debounce } from '../../utils/debounce'
import { debounce as debounceFn } from '../../utils/debounce'

import { sleep } from '../../utils/sleep'
import { useColors, useComponentPresetProp, useNumericProp } from '../../composables'
Expand Down Expand Up @@ -190,7 +190,7 @@ const onError = () => {
}

watch(() => debounceComputed.value, (value) => {
debouncedLoad.value = debounce(onLoad, value)
debouncedLoad.value = debounceFn(onLoad, value)
}, { immediate: true })

watch(() => props.disabled, (value) => {
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/va-input/VaInput.vue
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ const computedChildAttributes = computed(() => (({
const computedInputAttributes = computed(() => (({
...computedChildAttributes.value,
...pick(props, ['type', 'disabled', 'readonly', 'placeholder', 'pattern', 'inputmode', 'name']),
...pick(attrs, ['minlength', 'minlength'])
...pick(attrs, ['minlength', 'minlength']),
}) as InputHTMLAttributes))

const valueLengthComputed = computed(() =>
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/va-list/VaListItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import {
useComponentPresetProp,
useRouterLink, useRouterLinkProps,
} from '../../composables'
import { pick } from '../../utils/pick';
import { pick } from '../../utils/pick'

defineOptions({
name: 'VaListItem',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
<script lang="ts" setup>
import { useComponentPresetProp } from '../../composables/useComponentPreset'
import { computed, PropType, StyleValue } from 'vue'
import { clamp } from '../../utils/clamp';
import { clamp } from '../../utils/clamp'

import { useColors, useTextColor, useTranslation, useTranslationProp } from '../../composables'

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ import { ref, computed, watch, PropType, ComputedRef } from 'vue'

import { useEvent, useBem, useTrackBy, useTrackByProps, useNumericProp } from '../../composables'
import { useVirtualScrollerSizes, useVirtualScrollerSizesProps } from './useVirtualScrollerSizes'
import { pick } from '../../utils/pick';
import { pick } from '../../utils/pick'

defineOptions({
name: 'VaVirtualScroller',
Expand Down
13 changes: 3 additions & 10 deletions packages/ui/src/services/color/tests/color-config.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,6 @@ describe('useColors', () => {
['rgb(0, 0, 0)', 'rgba(0,0,0,0.4)'],
['rgba(0, 0, 0, 1)', 'rgba(0,0,0,0.4)'],
[{ h: 0, s: 0, l: 0 }, 'rgba(0,0,0,0.4)'],
[{ c: 0, m: 0, y: 0, k: 0 }, 'rgba(255,255,255,0.4)'],
])(
'getBoxShadowColorArg %s should return %s',
(getBoxShadowColorArg, expected) => {
Expand All @@ -94,7 +93,6 @@ describe('useColors', () => {
['rgb(0, 0, 0)', 'rgba(0,0,0,0.2)'],
['rgba(0, 0, 0, 1)', 'rgba(0,0,0,0.2)'],
[{ h: 0, s: 0, l: 0 }, 'rgba(0,0,0,0.2)'],
[{ c: 0, m: 0, y: 0, k: 0 }, 'rgba(255,255,255,0.2)'],
])(
'getHoverColor %s should return %s',
(getHoverColorArg, expected) => {
Expand All @@ -107,7 +105,6 @@ describe('useColors', () => {
['rgb(0, 0, 0)', 'rgba(0,0,0,0.3)'],
['rgba(0, 0, 0, 1)', 'rgba(0,0,0,0.3)'],
[{ h: 0, s: 0, l: 0 }, 'rgba(0,0,0,0.3)'],
[{ c: 0, m: 0, y: 0, k: 0 }, 'rgba(255,255,255,0.3)'],
])(
'getFocusColorArg %s should return %s',
(getFocusColorArg, expected) => {
Expand All @@ -116,11 +113,10 @@ describe('useColors', () => {
)

it.each([
['#000000', 'linear-gradient(to right, hsla(2,5%,10%,1), hsla(0,0%,0%,1))'],
['rgb(0, 0, 0)', 'linear-gradient(to right, hsla(2,5%,10%,1), hsla(0,0%,0%,1))'],
['rgba(0, 0, 0, 1)', 'linear-gradient(to right, hsla(2,5%,10%,1), hsla(0,0%,0%,1))'],
['#000000', 'linear-gradient(to right, hsla(2,5%,10%,1), #000000)'],
['rgb(0, 0, 0)', 'linear-gradient(to right, hsla(2,5%,10%,1), rgb(0, 0, 0))'],
['rgba(0, 0, 0, 1)', 'linear-gradient(to right, hsla(2,5%,10%,1), rgba(0, 0, 0, 1))'],
[{ h: 0, s: 0, l: 0 }, 'linear-gradient(to right, hsla(2,5%,10%,1), hsla(0,0%,0%,1))'],
[{ c: 0, m: 0, y: 0, k: 0 }, 'linear-gradient(to right, hsla(2,5%,100%,1), hsla(0,0%,100%,1))'],
])(
'getGradientBackgroundArg %s should return %s',
(getGradientBackgroundArg, expected) => {
Expand All @@ -132,7 +128,6 @@ describe('useColors', () => {
[['#000000', '#cccccc', '#ffffff'], '#ffffff'],
[['rgb(255, 255, 255)'], 'textPrimary'],
[[{ h: 0, s: 100, l: 27 }], 'textInverted'],
[[{ c: 0, m: 0, y: 0, k: 0 }], 'textPrimary'],
])(
'getTextColorArgs %s should return %s',
(getTextColorArgs, expected) => {
Expand All @@ -144,7 +139,6 @@ describe('useColors', () => {
[['#000000', {}], 'hsla(0,0%,0%,1)'],
[['rgb(255, 255, 255)', { h: 1, s: 2 }], 'hsla(1,2%,100%,1)'],
[[{ h: 0, s: 100, l: 27 }, { h: 1, s: 2, l: 3, a: 4 }], 'hsla(1,100%,30%,1)'],
[[{ c: 0, m: 0, y: 0, k: 0 }, { l: 3 }], 'hsla(0,0%,100%,1)'],
])(
'shiftHSLAColorArgs %s should return %s',
(shiftHSLAColorArgs, expected) => {
Expand All @@ -156,7 +150,6 @@ describe('useColors', () => {
[['#000000', {}], 'hsla(0,0%,0%,1)'],
[['rgb(255, 255, 255)', { h: 1, s: 2 }], 'hsla(1,2%,100%,1)'],
[[{ h: 0, s: 100, l: 27 }, { h: 1, s: 2, l: 3, a: 4 }], 'hsla(1,2%,3%,1)'],
[[{ c: 0, m: 0, y: 0, k: 0 }, { l: 3 }], 'hsla(0,0%,3%,1)'],
])(
'setHSLAColorArgs %s should return %s',
(setHSLAColorArgs, expected) => {
Expand Down
126 changes: 44 additions & 82 deletions packages/ui/src/services/color/utils.ts
Original file line number Diff line number Diff line change
@@ -1,75 +1,46 @@
import { camelCaseToKebabCase, kebabCaseToCamelCase } from '../../utils/text-case'
import { ColorTranslator } from 'colortranslator'
import type { HSLObject, HEXObject, RGBObject } from 'colortranslator'
import { warn } from 'vue'

export type ColorInput = string | HEXObject | HSLObject | RGBObject

const makeColor = (color: ColorInput) => {
try {
return new ColorTranslator(color)
} catch (e) {
throw new Error(`Color ${color} is not valid. Please, provide valid color.`, {
cause: e,
})
}
}

import { setHSLA, shiftHSLA, parseColorToRGB, parseColorToHSL, rgbToString, hslToString, colorToString, type RGBObject, type HSLObject } from '../../utils/color'

export const isCSSVariable = (strColor: string): boolean => /var\(--.+\)/.test(strColor)
export const cssVariableName = (colorName: string) => `--va-${camelCaseToKebabCase(colorName)}`
export const normalizeColorName = (colorName: string) => kebabCaseToCamelCase(colorName)

export const colorToRgba = (color: ColorInput, opacity: number) => {
return makeColor(color).setA(opacity).RGBA
export type ColorInput = string | RGBObject | HSLObject

export const colorToRgba = (color: string, opacity: number) => {
const { r, g, b } = parseColorToRGB(color)

return rgbToString({ r, g, b, a: opacity })
}

export const getColorLightness = (color: ColorInput) => {
const { R, G, B } = makeColor(color)
return Math.sqrt(R * R * 0.241 + G * G * 0.691 + B * B * 0.068)
const { r, g, b } = parseColorToRGB(color)
return Math.sqrt(r * r * 0.241 + g * g * 0.691 + b * b * 0.068)
}

export const getBoxShadowColor = (color: ColorInput, opacity = 0.4) => {
return makeColor(color).setA(opacity).RGBA
export const getBoxShadowColor = (color: string, opacity = 0.4) => {
return colorToRgba(color, opacity)
}

export const getBoxShadowColorFromBg = (background: ColorInput, opacity = 0.4) => {
return makeColor(background).setA(opacity).RGBA
export const getBoxShadowColorFromBg = (background: string, opacity = 0.4) => {
return colorToRgba(background, opacity)
}

export const getHoverColor = (color: ColorInput, opacity = 0.2) => {
return makeColor(color).setA(opacity).RGBA
export const getHoverColor = (color: string, opacity = 0.2) => {
return colorToRgba(color, opacity)
}

export const getFocusColor = (color: ColorInput, opacity = 0.3) => {
return makeColor(color).setA(opacity).RGBA
export const getFocusColor = (color: string, opacity = 0.3) => {
return colorToRgba(color, opacity)
}

export const shiftHSLAColor = (color: ColorInput, offset: { h?: number; s?: number; l?: number; a?: number }) => {
const result = makeColor(color)

if (offset.h) { result.setH(result.H + offset.h) }

if (offset.s) { result.setS(result.S + offset.s) }

if (offset.l) { result.setL(result.L + offset.l) }

if (offset.a) { result.setA(result.A + offset.a) }

return result.HSLA
export const shiftHSLAColor = (color: string | RGBObject | HSLObject, shift: { h?: number; s?: number; l?: number; a?: number }) => {
return hslToString(shiftHSLA(parseColorToHSL(color), shift))
}

export const setHSLAColor = (color: ColorInput, newColor: { h?: number; s?: number; l?: number; a?: number }) => {
const result = makeColor(color)

if (newColor.h !== undefined) { result.setH(newColor.h) }

if (newColor.s !== undefined) { result.setS(newColor.s) }

if (newColor.l !== undefined) { result.setL(newColor.l) }

if (newColor.a !== undefined) { result.setA(newColor.a) }

return result.HSLA
export const setHSLAColor = (color: string | RGBObject | HSLObject, shift: { h?: number; s?: number; l?: number; a?: number }) => {
return hslToString(setHSLA(parseColorToHSL(color), shift))
}

/**
Expand All @@ -79,8 +50,8 @@ export const setHSLAColor = (color: ColorInput, newColor: { h?: number; s?: numb
*
* @param color
*/
export const shiftGradientColor = (color: ColorInput): string => {
const newColor = ColorTranslator.toHSLA(color, false) as HSLObject
export const shiftGradientColor = (color: string): string => {
const newColor = parseColorToHSL(color)

// Gray
if (newColor.s < 10) {
Expand Down Expand Up @@ -113,9 +84,8 @@ export const shiftGradientColor = (color: ColorInput): string => {

export const getGradientBackground = (color: string) => {
const colorLeft = shiftGradientColor(color)
const colorRight = ColorTranslator.toHSLA(color)

return `linear-gradient(to right, ${colorLeft}, ${colorRight})`
return `linear-gradient(to right, ${colorLeft}, ${colorToString(color)})`
}

export const getStateMaskGradientBackground = (color: string, maskColor: string, maskOpacity: number) => {
Expand All @@ -124,38 +94,30 @@ export const getStateMaskGradientBackground = (color: string, maskColor: string,
return `linear-gradient(0deg, ${mask}, ${mask}), ${color}`
}

/**
* Check if color is valid hsl, hsla, rga, rgba or hex color
* Taken from https://www.regextester.com/103656
* Check options <or> isCSSVariable(prop) <or> CSS.supports('color', prop) deleted due to problems with SSR and opacity
* Details are in the discussion: https://github.com/epicmaxco/vuestic-ui/pull/1589
* @param strColor
*/
export const isColor = (strColor: string): boolean => {
// Need to use Regex instead of DOM methods because we support SSR
const cssColorRegex = /^#([\da-f]{3}){1,2}$|^#([\da-f]{4}){1,2}$|(rgb|hsl)a?\((\s*-?\d+%?\s*,){2}(\s*-?\d+%?\s*,?\s*\)?)(,\s*(0?\.\d+)?|1)?\)/

return cssColorRegex.test(strColor.toLocaleLowerCase())
}

export const applyColors = (color1: ColorInput, color2: ColorInput) => {
const c1 = makeColor(color1)
const c2 = makeColor(color2)
const weight = c2.A

if (weight === 1) { return c2.RGBA }
if (weight === 0) { return c1.RGBA }
export const applyColors = (color1: string, color2: string) => {
const c1 = parseColorToRGB(color1)
const c2 = parseColorToRGB(color2)
const weight = c2.a

c1.setR(Math.round((c1.R) * (1 - weight) + (c2.R) * weight))
c1.setG(Math.round((c1.G) * (1 - weight) + (c2.G) * weight))
c1.setB(Math.round((c1.B) * (1 - weight) + (c2.B) * weight))
if (weight === 1) { return rgbToString(c2) }
if (weight === 0) { return rgbToString(c1) }

return c1.RGBA
return rgbToString({
r: Math.round((c1.r) * (1 - weight) + (c2.r) * weight),
g: Math.round((c1.g) * (1 - weight) + (c2.g) * weight),
b: Math.round((c1.b) * (1 - weight) + (c2.b) * weight),
a: c1.a,
})
}

export const isColorTransparent = (color: ColorInput) => {
/**
* Returns `true` if color is FULLY transparent
*/
export const isColorTransparent = (color: string) => {
if (!color) { return false }
if (color === 'transparent') { return true }

return makeColor(color).A <= 0.1
return parseColorToRGB(color).a <= 0.1
}

export { isColor } from './../../utils/color'
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { camelCaseToKebabCase } from './../../utils/text-case';
import { camelCaseToKebabCase } from './../../utils/text-case'
import { defineCustomElement } from 'vue'
import { type VuesticComponent } from '../vue-plugin/types/index'

Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/utils/clone-deep.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { mergeDeep } from "./merge-deep"
import { mergeDeep } from './merge-deep'

// Notice: structureClone can not copy DOM nodes and functions.
/** Deeply merge object into new object, cloning DOM nodes and functions */
Expand All @@ -7,5 +7,5 @@ export const cloneDeep = <T>(value: T) => {
return value
}

return mergeDeep({}, value)
return mergeDeep({}, value) as T
}
Loading