css-gradient

css gradient encapsulation

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-linear-gradient

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-conic-gradient

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-radial-gradient

export from gradient.ts

method parse() is to convert css function string to syntax object. method toString() is to output function string for css.

type RepeatingLinearGradient = {
	methodName: 'repeating-linear-gradient';
	syntax: LinearGradientSyntax;
	parse: (expression: `repeating-linear-gradient(${string})`) => RepeatingLinearGradient;
	toString: () => string;
}

type RepeatingConicGradient = {
	methodName: 'repeating-conic-gradient';
	syntax: ConicGradientSyntax;
	parse: (expression: `repeating-conic-gradient(${string})`) => RepeatingConicGradient;
	toString: () => string;
}

type RepeatingRadialGradient = {
	methodName: 'repeating-radial-gradient';
	syntax: RadialGradientSyntax;
	parse: (expression: `repeating-radial-gradient(${string})`) => RepeatingRadialGradient;
	toString: () => string;
}

... ...

export type { RepeatingLinearGradient, LinearGradientSyntax, RepeatingConicGradient, ConicGradientSyntax, RepeatingRadialGradient, RadialGradientSyntax, MixGradientSyntax, ColorStop, ColorHint };
export { RepeatingLinearGradientImpl, RepeatingConicGradientImpl, RepeatingRadialGradientImpl, isColor };

use case

const mixGradientSyntax: MixGradientSyntax = reactive({
	angle: undefined,
	to: undefined,
	from: undefined,
	at: undefined,
	shape: undefined,
	size: undefined,
	colorStopList: [['#ff0000', '10%', '20%'], ['50%'], ['#00ff00', '30%'], ['transparent'], ['#0000ff']]
});


watch([curGradient, mixGradientSyntax], async(newVal, oldVal) => {
	//console.log(newVal, oldVal);
	switch(curGradient.value) {
		case 'repeating-conic-gradient':
			const conic = new RepeatingConicGradientImpl();
			conic.syntax = mixGradientSyntax;
			gradientEffect.backgroundImage = conic.toString();
			//console.log('conic......', conic.toString());
			break;
		case 'repeating-linear-gradient':
			const linear = new RepeatingLinearGradientImpl();
			linear.syntax = mixGradientSyntax;
			gradientEffect.backgroundImage = linear.toString();
			//console.log('linear......', linear.toString());
			break;
		case 'repeating-radial-gradient':
			const radial = new RepeatingRadialGradientImpl();
			radial.syntax = mixGradientSyntax;
			gradientEffect.backgroundImage = radial.toString();
			//console.log('radial......', radial.toString());
			break;
	}
}, { deep: true });