feat(playground): add reset option (#1533)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
unocss · Sep 3, 2022 · 80f304b · 80f304b
1 parent 1600b51
commit 80f304b
Showing 1 changed file with 20 additions and 6 deletions.
diff --git a/playground/src/components/Editor.vue b/playground/src/components/Editor.vue
@@ -33,6 +33,14 @@ const panelSizes = useLocalStorage<number[]>(
   { listenToStorageChanges: false },
 )
 
+function handleReset() {
+  // eslint-disable-next-line no-alert
+  if (confirm('Reset all settings? It can NOT be undone.')) {
+    inputHTML.value = defaultHTML
+    customConfigRaw.value = defaultConfigRaw
+  }
+}
+
 function handleResize(event: ({ size: number })[]) {
   panelSizes.value = event.map(({ size }) => size)
 }
@@ -121,24 +129,30 @@ onMounted(() => {
           </div>
 
           <div class="pl-1 ml-auto space-x-2 text-sm md:text-base flex items-center flex-nowrap">
+            <button
+              i-carbon-erase
+              icon-btn
+              title="Reset To Default"
+              @click="handleReset"
+            />
             <a
               i-ri-search-line icon-btn
               href="https://uno.antfu.me"
               target="_blank"
               title="Interactive Docs"
             />
-            <a
-              i-ri-github-line icon-btn
-              href="https://github.com/unocss/unocss"
-              target="_blank"
-              title="GitHub"
-            />
             <button
               i-ri-device-line
               icon-btn
               title="Responsive"
               @click="options.responsive = !options.responsive"
             />
+            <a
+              i-ri-github-line icon-btn
+              href="https://github.com/unocss/unocss"
+              target="_blank"
+              title="GitHub"
+            />
             <button
               i-ri-sun-line
               dark:i-ri-moon-line