More properties
This commit is contained in:
@@ -10,6 +10,8 @@ repositories {
|
||||
mavenCentral()
|
||||
}
|
||||
|
||||
apply(plugin = "kotlin-dce-js")
|
||||
|
||||
kotlin {
|
||||
/* Targets configuration omitted.
|
||||
* To find out how to configure the targets, please follow the link:
|
||||
@@ -27,7 +29,7 @@ kotlin {
|
||||
val commonTest by getting {
|
||||
dependencies {
|
||||
implementation(kotlin("test-common"))
|
||||
implementation(kotlin("test-annotations-common"))
|
||||
//implementation(kotlin("test-annotations-common"))
|
||||
}
|
||||
}
|
||||
val jsMain by getting {
|
||||
@@ -38,7 +40,7 @@ kotlin {
|
||||
val jsTest by getting {
|
||||
dependencies {
|
||||
implementation(kotlin("test-js"))
|
||||
implementation(kotlin("test-annotations-js"))
|
||||
//implementation(kotlin("test-annotations-js"))
|
||||
}
|
||||
}
|
||||
val jvmMain by getting {
|
||||
|
||||
17
src/commonMain/kotlin/nl/astraeus/css/AlignContent.kt
Normal file
17
src/commonMain/kotlin/nl/astraeus/css/AlignContent.kt
Normal file
@@ -0,0 +1,17 @@
|
||||
package nl.astraeus.css
|
||||
|
||||
enum class AlignContent(
|
||||
val value: String
|
||||
) : CssProperty {
|
||||
STRETCH("stretch"),
|
||||
CENTER("center"),
|
||||
FLEX_START("flex-start"),
|
||||
FLEX_END("flex-end"),
|
||||
SPACE_BETWEEN("space-between"),
|
||||
SPACE_AROUND("space-around"),
|
||||
INITIAL("initial"),
|
||||
INHERIT("inherit"),
|
||||
;
|
||||
|
||||
override fun css(): String = value
|
||||
}
|
||||
16
src/commonMain/kotlin/nl/astraeus/css/AlignItems.kt
Normal file
16
src/commonMain/kotlin/nl/astraeus/css/AlignItems.kt
Normal file
@@ -0,0 +1,16 @@
|
||||
package nl.astraeus.css
|
||||
|
||||
enum class AlignItems(
|
||||
val value: String
|
||||
) : CssProperty {
|
||||
STRETCH("stretch"),
|
||||
CENTER("center"),
|
||||
FLEX_START("flex-start"),
|
||||
FLEX_END("flex-end"),
|
||||
BASELINE("baseline"),
|
||||
INITIAL("initial"),
|
||||
INHERIT("inherit"),
|
||||
;
|
||||
|
||||
override fun css(): String = value
|
||||
}
|
||||
17
src/commonMain/kotlin/nl/astraeus/css/AlignSelf.kt
Normal file
17
src/commonMain/kotlin/nl/astraeus/css/AlignSelf.kt
Normal file
@@ -0,0 +1,17 @@
|
||||
package nl.astraeus.css
|
||||
|
||||
enum class AlignSelf(
|
||||
val value: String
|
||||
) : CssProperty {
|
||||
AUTO("auto"),
|
||||
STRETCH("stretch"),
|
||||
CENTER("center"),
|
||||
FLEX_START("flex-start"),
|
||||
FLEX_END("flex-end"),
|
||||
BASELINE("baseline"),
|
||||
INITIAL("initial"),
|
||||
INHERIT("inherit"),
|
||||
;
|
||||
|
||||
override fun css(): String = value
|
||||
}
|
||||
12
src/commonMain/kotlin/nl/astraeus/css/All.kt
Normal file
12
src/commonMain/kotlin/nl/astraeus/css/All.kt
Normal file
@@ -0,0 +1,12 @@
|
||||
package nl.astraeus.css
|
||||
|
||||
enum class All(
|
||||
val value: String
|
||||
) : CssProperty {
|
||||
INITIAL("initial"),
|
||||
INHERIT("inherit"),
|
||||
UNSET("unset"),
|
||||
;
|
||||
|
||||
override fun css(): String = value
|
||||
}
|
||||
29
src/commonMain/kotlin/nl/astraeus/css/Animation.kt
Normal file
29
src/commonMain/kotlin/nl/astraeus/css/Animation.kt
Normal file
@@ -0,0 +1,29 @@
|
||||
package nl.astraeus.css
|
||||
|
||||
enum class AnimationDirection(
|
||||
val value: String
|
||||
) : CssProperty {
|
||||
NORMAL("normal"),
|
||||
REVERSE("reverse"),
|
||||
ALTERNATE("alternate"),
|
||||
ALTERNATE_REVERSE("alternate-reverse"),
|
||||
INITIAL("initial"),
|
||||
INHERIT("inherit"),
|
||||
;
|
||||
|
||||
override fun css(): String = value
|
||||
}
|
||||
|
||||
enum class AnimationFillMode(
|
||||
val value: String
|
||||
) : CssProperty {
|
||||
NONE("none"),
|
||||
FORWARDS("forwards"),
|
||||
BACKWARDS("backwards"),
|
||||
BOTH("both"),
|
||||
INITIAL("initial"),
|
||||
INHERIT("inherit"),
|
||||
;
|
||||
|
||||
override fun css(): String = value
|
||||
}
|
||||
@@ -1,16 +1,25 @@
|
||||
package nl.astraeus.css
|
||||
|
||||
fun hex(hex: String): Color = HexColor(hex)
|
||||
fun rgb(red: Int, green: Int, blue: Int): Color = RGBColor(red, green, blue)
|
||||
fun rgba(red: Int, green: Int, blue: Int, alpha: Double): Color = RGBAColor(red, green, blue, alpha)
|
||||
fun hsl(hue: Int, saturation: Int, lightness: Int): Color = HSLColor(hue, saturation, lightness)
|
||||
fun hsla(hue: Int, saturation: Int, lightness: Int, alpha: Double): Color = HSLAColor(hue, saturation, lightness, alpha)
|
||||
|
||||
open class Color : CssProperty() {
|
||||
open class Color : CssProperty {
|
||||
|
||||
override fun css(): String = "#xxxxxx"
|
||||
|
||||
}
|
||||
|
||||
class HexColor(
|
||||
val hex: String
|
||||
) : Color() {
|
||||
|
||||
override fun css(): String = "#$hex"
|
||||
|
||||
}
|
||||
|
||||
class RGBColor(
|
||||
val red: Int,
|
||||
val green: Int,
|
||||
|
||||
30
src/commonMain/kotlin/nl/astraeus/css/Count.kt
Normal file
30
src/commonMain/kotlin/nl/astraeus/css/Count.kt
Normal file
@@ -0,0 +1,30 @@
|
||||
package nl.astraeus.css
|
||||
|
||||
|
||||
enum class CountType {
|
||||
NUMBER,
|
||||
INFINITE,
|
||||
INITIAL,
|
||||
INHERIT
|
||||
}
|
||||
|
||||
class Count(
|
||||
val type: CountType,
|
||||
val number: Int
|
||||
) : CssProperty {
|
||||
|
||||
override fun css(): String = when(type) {
|
||||
CountType.NUMBER -> "$number"
|
||||
CountType.INFINITE -> "infinite"
|
||||
CountType.INITIAL -> "initial"
|
||||
CountType.INHERIT -> "inherit"
|
||||
}
|
||||
|
||||
companion object {
|
||||
fun count(number: Int): Count = Count(CountType.NUMBER, number)
|
||||
fun infinite(): Count = Count(CountType.INFINITE, 0)
|
||||
fun initial(): Count = Count(CountType.INITIAL, 0)
|
||||
fun inherit(): Count = Count(CountType.INHERIT, 0)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,25 +5,49 @@ annotation class CssTagMarker
|
||||
|
||||
@CssTagMarker
|
||||
open class Style(
|
||||
var color: Color? = null,
|
||||
var alignContent: AlignContent? = null,
|
||||
var alignItems: AlignItems? = null,
|
||||
var alignSelf: AlignSelf? = null,
|
||||
var all: All? = null,
|
||||
var animation: TextProperty? = null,
|
||||
var animationDelay: DelayDuration? = null,
|
||||
var animationDirection: AnimationDirection? = null,
|
||||
var animationDuration: DelayDuration? = null,
|
||||
var animationFillMode: AnimationFillMode? = null,
|
||||
var animationIterationCount: Count? = null,
|
||||
var backgroundColor: Color? = null,
|
||||
var color: Color? = null,
|
||||
var fontFamily: TextProperty? = null,
|
||||
var fontSize: FontSize? = null,
|
||||
var height: Measurement? = null,
|
||||
var left: Measurement? = null,
|
||||
var top: Measurement? = null,
|
||||
var width: Measurement? = null,
|
||||
var height: Measurement? = null,
|
||||
var fontFamily: PlainProperty? = null,
|
||||
var fontSize: FontSize? = null
|
||||
var transitionDelay: DelayDuration? = null,
|
||||
var transitionDuration: DelayDuration? = null,
|
||||
var width: Measurement? = null
|
||||
) {
|
||||
|
||||
fun getMapping() = mapOf(
|
||||
"color" to color,
|
||||
"align-content" to alignContent,
|
||||
"align-items" to alignItems,
|
||||
"align-self" to alignSelf,
|
||||
"all" to all,
|
||||
"animation" to animation,
|
||||
"animation-delay" to animationDelay,
|
||||
"animation-direction" to animationDirection,
|
||||
"animation-duration" to animationDuration,
|
||||
"animation-fill-mode" to animationFillMode,
|
||||
"animation-iteration-count" to animationIterationCount,
|
||||
"background-color" to backgroundColor,
|
||||
"color" to color,
|
||||
"font-family" to fontFamily,
|
||||
"font-size" to fontSize,
|
||||
"height" to height,
|
||||
"left" to left,
|
||||
"top" to top,
|
||||
"width" to width,
|
||||
"height" to height,
|
||||
"font-family" to fontFamily,
|
||||
"font-size" to fontSize
|
||||
"transition-delay" to transitionDelay,
|
||||
"transition-duration" to transitionDuration,
|
||||
"width" to width
|
||||
)
|
||||
|
||||
fun propertyCss(indent: String, name: String, prop: CssProperty?): String = if (prop != null) {
|
||||
@@ -85,8 +109,8 @@ open class StyleDefinition : Style() {
|
||||
|
||||
}
|
||||
|
||||
fun css(definition: Style.() -> Unit): Style {
|
||||
val css = Style()
|
||||
fun css(definition: StyleDefinition.() -> Unit): StyleDefinition {
|
||||
val css = StyleDefinition()
|
||||
|
||||
definition(css)
|
||||
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
package nl.astraeus.css
|
||||
|
||||
abstract class CssProperty {
|
||||
interface CssProperty {
|
||||
|
||||
abstract fun css(): String
|
||||
fun css(): String
|
||||
|
||||
}
|
||||
|
||||
fun plain(value: String) = PlainProperty(value)
|
||||
fun text(value: String) = TextProperty(value)
|
||||
|
||||
class PlainProperty(
|
||||
class TextProperty(
|
||||
val value: String
|
||||
): CssProperty() {
|
||||
): CssProperty {
|
||||
|
||||
override fun css(): String = value
|
||||
|
||||
|
||||
25
src/commonMain/kotlin/nl/astraeus/css/DelayDuration.kt
Normal file
25
src/commonMain/kotlin/nl/astraeus/css/DelayDuration.kt
Normal file
@@ -0,0 +1,25 @@
|
||||
package nl.astraeus.css
|
||||
|
||||
|
||||
enum class DelayDurationType {
|
||||
TIME,
|
||||
INITIAL,
|
||||
INHERIT
|
||||
}
|
||||
|
||||
class DelayDuration(
|
||||
val type: DelayDurationType,
|
||||
val seconds: Int
|
||||
) : CssProperty {
|
||||
|
||||
override fun css(): String = when(type) {
|
||||
DelayDurationType.TIME -> "${seconds}s"
|
||||
DelayDurationType.INITIAL -> "initial"
|
||||
DelayDurationType.INHERIT -> "inherit"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
fun seconds(seconds: Int): DelayDuration = DelayDuration(DelayDurationType.TIME, seconds)
|
||||
fun initial(): DelayDuration = DelayDuration(DelayDurationType.INITIAL, 0)
|
||||
fun inherit(): DelayDuration = DelayDuration(DelayDurationType.INHERIT, 0)
|
||||
@@ -3,11 +3,13 @@ package nl.astraeus.css
|
||||
fun px(nr: Int): Measurement = Measurement(MeasurementType.PX, nr)
|
||||
fun em(nr: Int): Measurement = Measurement(MeasurementType.EM, nr)
|
||||
fun perc(nr: Int): Measurement = Measurement(MeasurementType.PERCENTAGE, nr)
|
||||
fun pc(nr: Int): Measurement = Measurement(MeasurementType.PICAS, nr)
|
||||
|
||||
enum class MeasurementType {
|
||||
PX,
|
||||
EM,
|
||||
PERCENTAGE,
|
||||
PICAS,
|
||||
OTHER
|
||||
}
|
||||
|
||||
@@ -15,7 +17,7 @@ open class Measurement(
|
||||
val type: MeasurementType,
|
||||
val intValue: Int = 0,
|
||||
val stringValue: String = ""
|
||||
) : CssProperty() {
|
||||
) : CssProperty {
|
||||
|
||||
override fun css(): String = when(type) {
|
||||
MeasurementType.PX -> {
|
||||
@@ -27,6 +29,9 @@ open class Measurement(
|
||||
MeasurementType.PERCENTAGE -> {
|
||||
"${stringValue}%"
|
||||
}
|
||||
MeasurementType.PICAS -> {
|
||||
"${stringValue}pc"
|
||||
}
|
||||
else -> {
|
||||
error("Unhandled type $type")
|
||||
}
|
||||
@@ -38,7 +43,6 @@ enum class FontSizeType {
|
||||
PX,
|
||||
EM,
|
||||
PERCENTAGE,
|
||||
|
||||
}
|
||||
|
||||
class FontSize(
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
package nl.astraeus.css
|
||||
|
||||
import kotlin.test.Test
|
||||
//import kotlin.test.Test
|
||||
|
||||
object TestCssBuilder {
|
||||
|
||||
@Test
|
||||
//@Test
|
||||
fun testBuilder() {
|
||||
val css = CssBuilder()
|
||||
|
||||
@@ -15,7 +15,7 @@ object TestCssBuilder {
|
||||
left = em(5)
|
||||
backgroundColor = rgba(255, 255, 255, 0.75)
|
||||
|
||||
sel("> a") {
|
||||
css("> a") {
|
||||
color = hsl(200, 50, 50)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ package nl.astraeus.css
|
||||
class StyleBase(
|
||||
val mainColor: Color = hsl(128, 50, 50),
|
||||
val mainBackgroundColor: Color = hsl(64, 50, 50),
|
||||
val mainFont: PlainProperty = plain("Arial")
|
||||
val mainFont: TextProperty = text("Arial")
|
||||
)
|
||||
|
||||
private fun StyleDefinition.sizePX(
|
||||
@@ -64,9 +64,26 @@ fun main() {
|
||||
val css2 = generateCss(StyleBase(
|
||||
hsl(32, 40, 50),
|
||||
hsl(64, 60, 35),
|
||||
plain("Courier")
|
||||
text("Courier")
|
||||
))
|
||||
|
||||
println(css1)
|
||||
println(css2)
|
||||
|
||||
val sd = css {
|
||||
css("#pipo") {
|
||||
backgroundColor = hex("eeeeee")
|
||||
fontFamily = text("Arial, Courier")
|
||||
animationDelay = initial()
|
||||
|
||||
css("div") {
|
||||
color = hex("1b1b1b1")
|
||||
alignContent = AlignContent.FLEX_START
|
||||
animationIterationCount = Count.count(3)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
println("======")
|
||||
println(sd.generateCss())
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user