1
1
<script setup lang="ts">
2
2
import { computed , nextTick , ref } from ' vue'
3
3
import { usePlayground } from ' ../store/playground'
4
+ import FundingButton from ' ./FundingButton.vue'
4
5
5
6
const play = usePlayground ()
6
- const currentThemeType = computed (() => play .allThemes .find (i => i .name === play .theme )?.type || ' inherit' )
7
+ const currentLang = computed (() => play .allLanguages .find (i => i .name === play .lang ))
8
+ const currentTheme = computed (() => play .allThemes .find (i => i .name === play .theme ))
7
9
8
10
const textAreaRef = ref <HTMLDivElement >()
9
11
const highlightContainerRef = ref <HTMLSpanElement >()
@@ -28,27 +30,35 @@ function onInput() {
28
30
<template >
29
31
<div
30
32
class =" language-ts vp-adaptive-theme transition-none! mini-playground" shadow
31
- :style =" [play.preStyle, { colorScheme: currentThemeType }]"
33
+ :style =" [play.preStyle, { colorScheme: currentTheme?.type || 'inherit' }]"
32
34
>
33
- <div sticky z-12 p2 px3 pl5 flex =" ~ gap-1 items-center" left-0 top-0 right-0 border =" b-solid gray/5" bg-inherit >
34
- <div i-carbon:chevron-down op50 />
35
- <select v-model =" play.lang" font-mono :style =" play.preStyle" >
36
- <option v-for =" lang in play.allLanguages" :key =" lang.name" :value =" lang.name" >
37
- {{ lang.name }}
38
- </option >
39
- </select >
40
- <div i-carbon:chevron-down op50 />
41
- <select v-model =" play.theme" font-mono :style =" play.preStyle" >
42
- <option v-for =" theme in play.allThemes.filter(i => i.type === 'light')" :key =" theme.name" :value =" theme.name" >
43
- {{ theme.displayName }}
44
- </option >
45
- <option disabled >
46
- ──────────
47
- </option >
48
- <option v-for =" theme in play.allThemes.filter(i => i.type === 'dark')" :key =" theme.name" :value =" theme.name" >
49
- {{ theme.displayName }}
50
- </option >
51
- </select >
35
+ <div sticky z-12 p2 px3 pl5 flex =" ~ gap-4 items-center" left-0 top-0 right-0 border =" b-solid gray/5" bg-inherit >
36
+ <label relative flex =" ~ gap-1 items-center" justify-start class =" min-w-[8em]" >
37
+ <div i-carbon:chevron-down op50 />
38
+ <span font-mono text-xs >{{ currentLang?.name }}</span >
39
+ <select v-model =" play.lang" font-mono :style =" play.preStyle" absolute inset-0 min-w-0 op0 >
40
+ <option v-for =" lang in play.allLanguages" :key =" lang.name" :value =" lang.name" >
41
+ {{ lang.name }}
42
+ </option >
43
+ </select >
44
+ <FundingButton :name =" `${currentLang?.displayName} grammar`" :funding =" currentLang?.funding" />
45
+ </label >
46
+ <label relative flex =" ~ gap-1 items-center" justify-start class =" min-w-[8em]" >
47
+ <div i-carbon:chevron-down op50 />
48
+ <span font-mono text-xs >{{ currentTheme?.displayName }}</span >
49
+ <select v-model =" play.theme" font-mono :style =" play.preStyle" absolute inset-0 min-w-0 op0 >
50
+ <option v-for =" theme in play.allThemes.filter(i => i.type === 'light')" :key =" theme.name" :value =" theme.name" >
51
+ {{ theme.displayName }}
52
+ </option >
53
+ <option disabled >
54
+ ──────────
55
+ </option >
56
+ <option v-for =" theme in play.allThemes.filter(i => i.type === 'dark')" :key =" theme.name" :value =" theme.name" >
57
+ {{ theme.displayName }}
58
+ </option >
59
+ </select >
60
+ <FundingButton :name =" `${currentTheme?.displayName} theme`" :funding =" currentTheme?.funding" />
61
+ </label >
52
62
<div flex-auto />
53
63
<div
54
64
i-svg-spinners-3-dots-fade
@@ -83,9 +93,7 @@ function onInput() {
83
93
.mini-playground select {
84
94
background : transparent ;
85
95
color : inherit ;
86
- min-width : 8em ;
87
96
padding : 0px !important ;
88
- position : relative ;
89
97
}
90
98
.mini-playground select :focus {
91
99
outline : none ;
0 commit comments