From e7486d34dd374334e91b46fca38a45c3109c89e0 Mon Sep 17 00:00:00 2001
From: Roman Harmyder <romangarmider@gmail.com>
Date: Wed, 15 Sep 2021 14:38:23 +0300
Subject: [PATCH] docs: fix demo styles (#746)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
Co-authored-by: patak <matias.capeletto@gmail.com>
---
 packages/.vitepress/theme/styles/demo.css     | 12 ++++++++++++
 packages/core/useDebouncedRefHistory/demo.vue |  5 ++++-
 packages/core/useThrottledRefHistory/demo.vue |  6 +++++-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/.vitepress/theme/styles/demo.css b/packages/.vitepress/theme/styles/demo.css
index a2cc16d1160d..0817e42756aa 100644
--- a/packages/.vitepress/theme/styles/demo.css
+++ b/packages/.vitepress/theme/styles/demo.css
@@ -105,6 +105,18 @@
     background: var(--c-bg);
     color: var(--c-text);
   }
+  input[type='number'] {
+    display: block;
+    min-width: 15rem;
+    font-size: 1.05rem;
+    padding: 0.5em 1em 0.4em 1em;
+    border: 1px solid var(--c-divider-light);
+    border-radius: 4px;
+    margin: 0.5rem 0;
+    outline: none;
+    background: var(--c-bg);
+    color: var(--c-text);
+  }
 
   input:focus {
     border: 1px solid var(--c-divider-dark);
diff --git a/packages/core/useDebouncedRefHistory/demo.vue b/packages/core/useDebouncedRefHistory/demo.vue
index d79c9de1e977..d8499b82e65f 100644
--- a/packages/core/useDebouncedRefHistory/demo.vue
+++ b/packages/core/useDebouncedRefHistory/demo.vue
@@ -9,7 +9,9 @@ const format = (ts: number) => dayjs(ts).format()
 const delay: Ref<number> = ref(1000)
 
 const { count, inc, dec } = useCounter()
-const { history, undo, redo, canUndo, canRedo } = useDebouncedRefHistory(count, { capacity: 10, debounce: delay })
+const { history, undo, redo, canUndo, canRedo } = useDebouncedRefHistory(
+  count, { capacity: 10, debounce: delay },
+)
 </script>
 
 <template>
@@ -27,6 +29,7 @@ const { history, undo, redo, canUndo, canRedo } = useDebouncedRefHistory(count,
   <button :disabled="!canRedo" @click="redo()">
     Redo
   </button>
+  <br />
   <span>Delay (in ms):</span>
   <input v-model="delay" type="number" />
   <br>
diff --git a/packages/core/useThrottledRefHistory/demo.vue b/packages/core/useThrottledRefHistory/demo.vue
index 6baffe7e7748..5e62d79148af 100644
--- a/packages/core/useThrottledRefHistory/demo.vue
+++ b/packages/core/useThrottledRefHistory/demo.vue
@@ -9,7 +9,10 @@ const format = (ts: number) => dayjs(ts).format()
 const delay: Ref<number> = ref(1000)
 
 const { count, inc, dec } = useCounter()
-const { history, undo, redo, canUndo, canRedo } = useThrottledRefHistory(count, { deep: true, throttle: delay })
+const { history, undo, redo, canUndo, canRedo } = useThrottledRefHistory(
+  count, {
+    deep: true, throttle: delay, capacity: 10,
+  })
 </script>
 
 <template>
@@ -27,6 +30,7 @@ const { history, undo, redo, canUndo, canRedo } = useThrottledRefHistory(count,
   <button :disabled="!canRedo" @click="redo()">
     Redo
   </button>
+  <br />
   <span>Delay (in ms):</span>
   <input v-model="delay" type="number" />
   <br>