@@ -14,7 +14,7 @@ usePane()
1414// const interpolator = useCepheus()
1515const cassiopeia = useCassiopeia ()
1616
17- const calendar = new Temporal . Calendar ( ' iso8601' )
17+ const calendar = ' iso8601'
1818const weekDayFormatter = new Intl .DateTimeFormat (' en-US' , {
1919 calendar ,
2020 day: ' 2-digit' ,
@@ -63,7 +63,6 @@ const formatWeekDay = (value: Temporal.PlainDate) => {
6363 return [day , weekday ].join (' ' )
6464}
6565
66-
6766interface Data {
6867 days: Array <{ current: boolean ; title: string }>
6968 events: Array <InstanceType <typeof Event >[' $props' ]>
@@ -103,11 +102,11 @@ const createEvents = (): Data['events'] => {
103102 const bc = random .minmaxInt (0 , 4 )
104103
105104 const bg = cassiopeia .add (
106- ` ---color-${bc }-${random .minmaxInt (12 , 25 )}-${random .minmaxInt (150 , 175 )} ` ,
105+ ` ---color-${bc }-${random .minmaxInt (0 , 20 )}-${random .minmaxInt (50 , 130 )} ` ,
107106 )
108107
109108 const textColor = cassiopeia .add (
110- ` ---invert -${random .minmaxInt (0 , 3 )}-${random .minmaxInt (0 , 5 )}-${random .minmaxInt (0 , 5 )} ` ,
109+ ` ---color -${random .minmaxInt (0 , 3 )}-${random .minmaxInt (253 , 255 )}-${random .minmaxInt (0 , 5 )} ` ,
111110 )
112111
113112 const borderColor = cassiopeia .add (
@@ -128,7 +127,7 @@ const createEvents = (): Data['events'] => {
128127}
129128
130129const update = () => {
131- const now = Temporal .Now .zonedDateTime ( calendar , ' UTC' )
130+ const now = Temporal .Now .zonedDateTimeISO ( ' UTC' )
132131 const time = Temporal .PlainTime .from (now )
133132 const date = Temporal .PlainDate .from (now )
134133 const events = createEvents ()
@@ -189,7 +188,12 @@ onUnmounted(() => {
189188 <div class =" subheader" >
190189 <div class =" filler" ></div >
191190 <div class =" filler" ></div >
192- <div v-for =" (day, index) in data?.days" :key =" index" :class =" { 'sans-serif-bold': day.current }" class =" day" >
191+ <div
192+ v-for =" (day, index) in data?.days"
193+ :key =" index"
194+ :class =" { 'sans-serif-bold': day.current }"
195+ class =" day"
196+ >
193197 {{ day.title }}
194198 </div >
195199 </div >
@@ -248,13 +252,25 @@ onUnmounted(() => {
248252 <div class =" row" style =" grid-row : 21 " ></div >
249253 <div class =" row" style =" grid-row : 22 " ></div >
250254 <div class =" row" style =" grid-row : 23 " ></div >
251- <Event v-for =" (event, index) in data?.events" :key =" index" :day-of-week =" event.dayOfWeek" :hour =" event.hour"
252- :minute =" event.minute" :duration =" event.duration" :background-color =" event.backgroundColor"
253- :text-color =" event.textColor" :border-color =" event.borderColor" :title =" event.title" />
254- <div class =" current-time sans-serif-bold" :style =" {
255- gridRow: data?.time.row,
256- top: `calc(${data?.time.hour.toFixed(5)}% - 0.0625rem)`,
257- }" ></div >
255+ <Event
256+ v-for =" (event, index) in data?.events"
257+ :key =" index"
258+ :day-of-week =" event.dayOfWeek"
259+ :hour =" event.hour"
260+ :minute =" event.minute"
261+ :duration =" event.duration"
262+ :background-color =" event.backgroundColor"
263+ :text-color =" event.textColor"
264+ :border-color =" event.borderColor"
265+ :title =" event.title"
266+ />
267+ <div
268+ class =" current-time sans-serif-bold"
269+ :style =" {
270+ gridRow: data?.time.row,
271+ top: `calc(${data?.time.hour.toFixed(5)}% - 0.0625rem)`,
272+ }"
273+ ></div >
258274 </div >
259275 </div >
260276 </div >
0 commit comments