fluorjs / fluor

Sprinkle interactivity on your design
https://fluorjs.github.io/
223 stars 6 forks source link

Add f-switch/f-case #20

Open madx opened 4 years ago

madx commented 4 years ago

While f-if is useful for testing truthiness, sometimes you need to check if a variable has a specific value.

For this cases I'd like to introduce an f-switch directive that would always go with a f-case one.

I have two alternative syntaxes in mind, the former being easier to implement than the latter as it would mostly reuse the code from f-if:

<template f-switch="variable" f-case="1">
  Content when variable is 1
</template>
<template f-switch="variable" f-case="2">
  Content when variable is 2
</template>
<template f-switch="variable" f-case="3">
  Content when variable is 3
</template>

OR

<template f-switch="variable">
  <template f-case="1">
    Content when variable is 1
  </template>
  <template f-case="2">
    Content when variable is 2
  </template>
  <template f-case="3">
    Content when variable is 3
  </template>
</template>