refactor: simplify unocss

sxzz · May 20, 2024 · f7a1aa5 · f7a1aa5
1 parent 66d60a7
commit f7a1aa5
Show file tree

Hide file tree

Showing 15 changed files with 47 additions and 58 deletions.
diff --git a/app.vue b/app.vue
@@ -20,7 +20,7 @@
     </main>
 
     <template #fallback>
-      <div h-screen flex items-center justify-center gap1 text-3xl font-bold>
+      <div flex="~ center" h-screen gap1 text-3xl font-bold>
         <div i-ri:loader-4-fill animate-spin />
         Loading...
       </div>

diff --git a/components/CodeEditor.vue b/components/CodeEditor.vue
@@ -34,7 +34,7 @@ watchEffect(() => {
     :lang="language"
     :options="options"
   >
-    <div flex="~ col gap-2" h-full w-full items-center justify-center>
+    <div flex="~ col center" h-full w-full gap2>
       <div i-ri:loader-2-line animate-spin text-4xl />
       <span text-lg>Loading...</span>
     </div>

diff --git a/components/LanguageSelect.vue b/components/LanguageSelect.vue
@@ -8,7 +8,7 @@ function changeLanguage(language: Language) {
 
 <template>
   <VMenu :class="{ dark: isDark }" flex>
-    <button flex="~ gap-1" items-center>
+    <button flex="~ center" gap1>
       <div :class="currentLanguage.icon" />
       {{ currentLanguage.label }}
     </button>

diff --git a/components/OutputContainer.vue b/components/OutputContainer.vue
@@ -35,16 +35,16 @@ function print() {
 </script>
 
 <template>
-  <div flex="~ col gap-2">
-    <div flex="~ gap-3 wrap" items-center text-sm>
+  <div flex="~ col" gap2>
+    <div flex="~ y-center wrap" gap3 text-sm>
       <div v-if="!showLeftLayout" />
-      <label flex="~ gap1" items-center>
+      <label flex="~ y-center" gap1>
         <input v-model="autoFocus" type="checkbox" switch /> Auto focus
       </label>
-      <label flex="~ gap1" items-center>
+      <label flex="~ y-center" gap1>
         <input v-model="hideEmptyKeys" type="checkbox" switch /> Hide empty keys
       </label>
-      <label flex="~ gap1" items-center>
+      <label flex="~ y-center" gap1>
         <input v-model="hideLocationData" type="checkbox" switch /> Hide
         location data
       </label>
@@ -57,8 +57,7 @@ function print() {
         />
       </label>
       <button
-        flex
-        items-center
+        flex="~ y-center"
         gap1
         border
         rounded

diff --git a/components/app/NavBar.vue b/components/app/NavBar.vue
@@ -18,9 +18,9 @@ function editVersion() {
 </script>
 
 <template>
-  <div flex="~ wrap" items-center justify-between gap2 p2>
+  <div flex="~ y-center wrap" justify-between gap2 p2>
     <div flex="~ gap4 wrap" max-sm:flex-col>
-      <div flex="~ gap1">
+      <div flex gap1>
         <AppLogo />
         <h1 text-lg font-bold>AST Explorer</h1>
         <small>{{ branch === 'release' ? `v${version}` : 'dev' }}</small>
@@ -34,10 +34,10 @@ function editVersion() {
 
     <div flex gap3 max-sm:flex-col>
       <div flex gap3>
-        <span op-80>{{ +parseCost.toFixed(1) }} ms</span>
+        <span op80>{{ +parseCost.toFixed(1) }} ms</span>
         <a
           font-mono
-          op-80
+          op80
           hover:underline
           :href="`https://www.npmjs.com/package/${currentParser.pkgName}`"
           target="_blank"
@@ -67,7 +67,7 @@ function editVersion() {
         >
           <div i-ri:edit-line />
         </button>
-        <a :href="currentParser.link" target="_blank" flex items-center>
+        <a :href="currentParser.link" target="_blank" flex="~ center">
           <div i-ri:book-2-line />
         </a>
         <button title="Toggle Left Layout" @click="toggleLeftLayout">
@@ -84,8 +84,7 @@ function editVersion() {
         <a
           href="https://github.com/sxzz/ast-explorer"
           target="_blank"
-          flex
-          items-center
+          flex="~ center"
         >
           <div i-ri:github-line />
         </a>

diff --git a/components/app/SideBar.vue b/components/app/SideBar.vue
@@ -3,22 +3,29 @@ import { currentParserGui as ParserGui } from '~/composables/state/parser'
 </script>
 
 <template>
-  <div flex="~ col" items-center gap2 p2>
+  <div flex="~ y-center col" gap2 p2>
     <div>
       <IconPreview :value="currentParser.icon" size="5em" />
     </div>
-    <h2 flex items-center justify-center gap2 text-lg font-bold>
+    <h2 flex="~ center" gap2 text-lg font-bold>
       Parser Options
       <ParserOptions v-if="currentParser.options.configurable" />
     </h2>
     <Suspense :timeout="0">
-      <ParserGui v-if="ParserGui" w-full />
+      <ParserGui v-if="ParserGui" w-full class="sidebar-gui" />
       <template #fallback>
-        <div class="flex items-center justify-center gap1">
+        <div flex="~ center" gap1>
           <div i-ri:loader-4-fill animate-spin />
           <span>Loading...</span>
         </div>
       </template>
     </Suspense>
   </div>
 </template>
+
+<style>
+.sidebar-gui span,
+.sidebar-gui summary {
+  --at-apply: 'op85';
+}
+</style>
diff --git a/components/dropdown/DropdownItem.vue b/components/dropdown/DropdownItem.vue
@@ -24,19 +24,19 @@ const handleClick = (evt: MouseEvent) => {
     v-bind="$attrs"
     ref="el"
     hover-bg-active
-    flex="~ gap-2"
+    flex="~ y-center"
     cursor-pointer
-    items-center
     justify-between
+    gap2
     px3
     py2
     :aria-label="text"
     @click="handleClick"
   >
-    <div flex="~ gap-2" items-center>
+    <div flex="~ y-center" gap2>
       <IconPreview v-if="icon" :value="icon" />
       <slot>{{ text }}</slot>
-      <div v-if="!checked" h-1.2em w-1.2em />
+      <div v-if="!checked" h="1.2em" w="1.2em" />
     </div>
 
     <div v-if="checked" i-ri:check-line />

diff --git a/components/parser/Options.vue b/components/parser/Options.vue
@@ -13,7 +13,7 @@ function handleDialogClick(evt: MouseEvent) {
 </script>
 
 <template>
-  <div flex items-center justify-center>
+  <div flex="~ center">
     <button class="i-ri:settings-line" @click="openDialog" />
     <dialog
       ref="dialog"
@@ -23,7 +23,7 @@ function handleDialogClick(evt: MouseEvent) {
       p0
       @click="handleDialogClick"
     >
-      <div relative flex items-center justify-center gap1 py2 text-lg font-bold>
+      <div relative flex="~ center" gap1 py2 text-lg font-bold>
         Parser Options
         <button
           class="i-ri:close-line"

diff --git a/components/parser/Select.vue b/components/parser/Select.vue
@@ -6,7 +6,7 @@ function changeParser(parser: string) {
 
 <template>
   <VMenu :class="{ dark: isDark }" flex>
-    <button flex="~ gap-1" items-center>
+    <button flex="~ center" gap1>
       <IconPreview :value="currentParser.icon" />
       <span font-mono>{{ currentParser.label }}</span>
     </button>

diff --git a/composables/parser/javascript/AcornGui.vue b/composables/parser/javascript/AcornGui.vue
@@ -21,7 +21,7 @@ const preserveParens = useOption('preserveParens')
 </script>
 
 <template>
-  <div flex="~ col gap2" text-sm font-mono>
+  <div flex="~ col" gap2 text-sm font-mono>
     <label>
       <span>sourceType</span>
       <select v-model="sourceType">
@@ -89,9 +89,6 @@ const preserveParens = useOption('preserveParens')
 
 <style scoped>
 label {
-  --at-apply: 'flex gap-2 items-center';
-}
-label span {
-  --at-apply: 'op85';
+  --at-apply: 'flex flex-y-center gap2';
 }
 </style>
diff --git a/composables/parser/javascript/BabelGui.vue b/composables/parser/javascript/BabelGui.vue
@@ -116,7 +116,7 @@ const throwExpressions = usePlugin('throwExpressions')
 </script>
 
 <template>
-  <div flex="~ col gap2" text-sm font-mono>
+  <div flex="~ col" gap2 text-sm font-mono>
     <label>
       <input v-model="estree" type="checkbox" switch />
       <span>ESTree</span>
@@ -359,10 +359,6 @@ const throwExpressions = usePlugin('throwExpressions')
 
 <style scoped>
 label {
-  --at-apply: 'flex gap-2 items-center';
-}
-label span,
-summary {
-  --at-apply: 'op85';
+  --at-apply: 'flex flex-y-center gap2';
 }
 </style>
diff --git a/composables/parser/javascript/EslintEspreeGui.vue b/composables/parser/javascript/EslintEspreeGui.vue
@@ -31,7 +31,7 @@ const impliedStrict = useOptions(['ecmaFeatures', 'impliedStrict'])
 </script>
 
 <template>
-  <div flex="~ col gap4" text-sm font-mono>
+  <div flex="~ col" gap4 text-sm font-mono>
     <label>
       <span>sourceType</span>
       <select v-model="sourceType">
@@ -90,9 +90,6 @@ const impliedStrict = useOptions(['ecmaFeatures', 'impliedStrict'])
 
 <style scoped>
 label {
-  --at-apply: 'flex gap-2 items-center';
-}
-label span {
-  --at-apply: 'op85';
+  --at-apply: 'flex flex-y-center gap2';
 }
 </style>
diff --git a/composables/parser/javascript/OxcGui.vue b/composables/parser/javascript/OxcGui.vue
@@ -9,24 +9,18 @@ const sourceFilename = useOption('sourceFilename', '', true)
 </script>
 
 <template>
-  <div flex="~ col gap4" text-sm font-mono>
-    <label flex="~ col gap1">
+  <div flex="~ col" gap4 text-sm font-mono>
+    <label flex="~ col" gap1>
       <span>source type</span>
       <select v-model="sourceType">
         <option value="script">script</option>
         <option value="module">module</option>
       </select>
     </label>
 
-    <label flex="~ col gap1">
+    <label flex="~ col" gap1>
       <span>source filename</span>
       <input v-model="sourceFilename" />
     </label>
   </div>
 </template>
-
-<style scoped>
-label span {
-  --at-apply: 'op85';
-}
-</style>
diff --git a/composables/parser/javascript/SwcGui.vue b/composables/parser/javascript/SwcGui.vue
@@ -31,7 +31,7 @@ watch(language, (language) => {
 </script>
 
 <template>
-  <div flex="~ col gap4" text-sm font-mono>
+  <div flex="~ col" gap4 text-sm font-mono>
     <label>
       <span>Language</span>
       <select v-model="language">
@@ -89,9 +89,6 @@ watch(language, (language) => {
 
 <style scoped>
 label {
-  --at-apply: 'flex gap-2 items-center';
-}
-label span {
-  --at-apply: 'op85';
+  --at-apply: 'flex flex-y-center gap2';
 }
 </style>
diff --git a/unocss.config.ts b/unocss.config.ts
@@ -12,6 +12,9 @@ export default defineConfig({
     'border-bg-base': 'border-$c-bg-base',
     'bg-base': 'bg-$c-bg-base',
     'text-base': 'text-$c-text-base',
+    'flex-center': 'items-center justify-center',
+    'flex-x-center': 'justify-center',
+    'flex-y-center': 'items-center',
   },
   presets: [
     presetUno({