docs: fix demo styles (vitest-dev#746)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com> Co-authored-by: patak <matias.capeletto@gmail.com>
chaii3 · Sep 15, 2021 · e7486d3 · e7486d3
1 parent 9a45b9b
commit e7486d3
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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>