@dolanske/vui 0.5.0 → 1.0.1

package/src/examples/ExamplePalette.vue

@@ -0,0 +1,159 @@
+<script setup lang='ts'>
+import { Icon } from '@iconify/vue'
+import Button from '../components/Button/Button.vue'
+import Flex from '../components/Flex/Flex.vue'
+import Grid from '../components/Grid/Grid.vue'
+import { setColorTheme, theme } from '../shared/theme'
+import ExampleColor from './shared/ExampleColor.vue'
+
+// function getPalette(type: 'light' | 'dark') {
+//   return Array.from(document.styleSheets)
+//     .flatMap((styleSheet: CSSStyleSheet) => Array.from(styleSheet.cssRules))
+//     .filter(
+//       (cssRule: CSSRule): cssRule is CSSStyleRule =>
+//         cssRule instanceof CSSStyleRule && cssRule.selectorText === `:root`,
+//     )
+//     .flatMap((cssRule: CSSStyleRule) => Array.from(cssRule.style))
+//     .filter((style: string) => style.startsWith(`--${type}`))
+// }
+
+// const light = getPalette('light')
+// const dark = getPalette('dark')
+</script>
+
+<template>
+  <div>
+    <h3 class="mb-l">
+      Themes
+    </h3>
+
+    <Grid :columns="2">
+      <Flex class="theme-wrap light" column gap="xxs">
+        <Flex space-between class="mb-l" align-center expand>
+          <h5>Light</h5>
+          <Button :disabled="theme === 'light'" variant="gray" data-title-top="Switch theme" @click="setColorTheme('light')">
+            <template #start>
+              <Icon icon="ph:sun" />
+            </template>
+            Use
+          </Button>
+        </Flex>
+        <ExampleColor name="Bg" color="--light-color-bg" />
+        <ExampleColor name="Bg Medium" color="--light-color-bg-medium" />
+        <ExampleColor name="Bg Raised" color="--light-color-bg-raised" />
+        <ExampleColor name="Bg Lowered" color="--light-color-bg-lowered" />
+        <div class="padder" />
+        <ExampleColor name="Text" color="--light-color-text" />
+        <ExampleColor name="Text Light" color="--light-color-text-light" />
+        <ExampleColor name="Text Lighter" color="--light-color-text-lighter" />
+        <ExampleColor name="Text Lightest" color="--light-color-text-lightest" />
+        <ExampleColor name="Text Invert" color="--light-color-text-invert" />
+        <div class="padder" />
+        <ExampleColor name="Button Gray" color="--light-color-button-gray" />
+        <ExampleColor name="Button Gray Hover" color="--light-color-button-gray-hover" />
+        <div class="padder" />
+        <ExampleColor name="Text Red" color="--light-color-text-red" />
+        <ExampleColor name="Bg Red Lowered" color="--light-color-bg-red-lowered" />
+        <ExampleColor name="Bg Red Raised" color="--light-color-bg-red-raised" />
+        <div class="padder" />
+        <ExampleColor name="Text Green" color="--light-color-text-green" />
+        <ExampleColor name="Bg Green Lowered" color="--light-color-bg-green-lowered" />
+        <ExampleColor name="Bg Green Raised" color="--light-color-bg-green-raised" />
+        <div class="padder" />
+        <ExampleColor name="Text Yellow" color="--light-color-text-yellow" />
+        <ExampleColor name="Bg Yellow Lowered" color="--light-color-bg-yellow-lowered" />
+        <ExampleColor name="Bg Yellow Raised" color="--light-color-bg-yellow-raised" />
+        <div class="padder" />
+        <ExampleColor name="Text Blue" color="--light-color-text-blue" />
+        <ExampleColor name="Bg Blue Lowered" color="--light-color-bg-blue-lowered" />
+        <ExampleColor name="Bg Blue Raised" color="--light-color-bg-blue-raised" />
+        <div class="padder" />
+        <ExampleColor name="Border" color="--light-color-border" />
+        <ExampleColor name="Border Strong" color="--light-color-border-strong" />
+        <ExampleColor name="Border Weak" color="--light-color-border-weak" />
+        <div class="padder" />
+        <ExampleColor name="Accent" color="--light-color-accent" />
+        <ExampleColor name="Bg Accent Lowered" color="--light-color-bg-accent-lowered" />
+        <ExampleColor name="Bg Accent Raised" color="--light-color-bg-accent-raised" />
+      </Flex>
+
+      <Flex class="theme-wrap dark" gap="xxs" column>
+        <Flex space-between class="mb-l" align-center expand>
+          <h5>Dark</h5>
+          <Button :disabled="theme === 'dark'" variant="gray" data-title-top="Switch theme" @click="setColorTheme('dark')">
+            <template #start>
+              <Icon icon="ph:moon" />
+            </template>
+            Use
+          </Button>
+        </Flex>
+        <ExampleColor name="Bg" color="--dark-color-bg" />
+        <ExampleColor name="Bg Medium" color="--dark-color-bg-medium" />
+        <ExampleColor name="Bg Raised" color="--dark-color-bg-raised" />
+        <ExampleColor name="Bg Lowered" color="--dark-color-bg-lowered" />
+        <div class="padder" />
+        <ExampleColor name="Text" color="--dark-color-text" />
+        <ExampleColor name="Text Light" color="--dark-color-text-light" />
+        <ExampleColor name="Text Lighter" color="--dark-color-text-lighter" />
+        <ExampleColor name="Text Lightest" color="--dark-color-text-lightest" />
+        <ExampleColor name="Text Invert" color="--dark-color-text-invert" />
+        <div class="padder" />
+        <ExampleColor name="Button Gray" color="--dark-color-button-gray" />
+        <ExampleColor name="Button Gray Hover" color="--dark-color-button-gray-hover" />
+        <div class="padder" />
+        <ExampleColor name="Text Red" color="--dark-color-text-red" />
+        <ExampleColor name="Bg Red Lowered" color="--dark-color-bg-red-lowered" />
+        <ExampleColor name="Bg Red Raised" color="--dark-color-bg-red-raised" />
+        <div class="padder" />
+        <ExampleColor name="Text Green" color="--dark-color-text-green" />
+        <ExampleColor name="Bg Green Lowered" color="--dark-color-bg-green-lowered" />
+        <ExampleColor name="Bg Green Raised" color="--dark-color-bg-green-raised" />
+        <div class="padder" />
+        <ExampleColor name="Text Yellow" color="--dark-color-text-yellow" />
+        <ExampleColor name="Bg Yellow Lowered" color="--dark-color-bg-yellow-lowered" />
+        <ExampleColor name="Bg Yellow Raised" color="--dark-color-bg-yellow-raised" />
+        <div class="padder" />
+        <ExampleColor name="Text Blue" color="--dark-color-text-blue" />
+        <ExampleColor name="Bg Blue Lowered" color="--dark-color-bg-blue-lowered" />
+        <ExampleColor name="Bg Blue Raised" color="--dark-color-bg-blue-raised" />
+        <div class="padder" />
+        <ExampleColor name="Border" color="--dark-color-border" />
+        <ExampleColor name="Border Strong" color="--dark-color-border-strong" />
+        <ExampleColor name="Border Weak" color="--dark-color-border-weak" />
+        <div class="padder" />
+        <ExampleColor name="Accent" color="--dark-color-accent" />
+        <ExampleColor name="Bg Accent Lowered" color="--dark-color-bg-accent-lowered" />
+        <ExampleColor name="Bg Accent Raised" color="--dark-color-bg-accent-raised" />
+      </Flex>
+    </Grid>
+  </div>
+</template>
+
+<style>
+.padder {
+  height: 16px;
+}
+
+.theme-wrap {
+  padding: var(--space-m);
+  border-radius: var(--border-radius-m);
+
+  &.light {
+    background-color: white;
+
+    h5,
+    span {
+      color: var(--light-color-text) !important;
+    }
+  }
+
+  &.dark {
+    background-color: black;
+
+    h5,
+    span {
+      color: var(--dark-color-text) !important;
+    }
+  }
+}
+</style>

package/src/examples/ExamplePopouts.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue'
+import Button from '../components/Button/Button.vue'
+import Flex from '../components/Flex/Flex.vue'
+import Popout from '../components/Popout/Popout.vue'
+
+const anch = useTemplateRef('anch')
+const open = ref(false)
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Popout
+    </h3>
+
+    <p class="mb-l">
+      Popout is a simpler version of dropdown. By default, it only provides functionality to float an element to the anchor. It is up to the developer to style it and set its placement / offset. Both dropdown & tooltip use the popout base.
+    </p>
+
+    <Flex>
+      <Button ref="anch" class="mb-xxs" @click="open = !open">
+        Open popout
+      </Button>
+      <p class="text-s text-color-light w-50">
+        This popout has offset of <code>32</code> and its placement is <code>bottom-start</code>. It also has an attached event to <code>clickOutside</code> which is fired when user clicks outside of the popout. In that case, we manually close it.
+      </p>
+    </Flex>
+    <Popout v-if="open" :anchor="anch" class="test-popout" :offset="32" placement="bottom-start" @click-outside="open = false">
+      <h3>Popout content</h3>
+      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem facere eligendi ex, alias itaque molestiae, vero animi, vitae vel fuga corporis aut consectetur temporibus ipsum placeat dolores perferendis. Deleniti, et!</p>
+    </Popout>
+  </div>
+</template>
+
+<style scoped>
+.test-popout {
+  max-width: 256px;
+  padding: var(--space-xl);
+}
+</style>

package/src/examples/ExampleSheets.vue

@@ -0,0 +1,77 @@
+<script setup lang='ts'>
+import type { SelectOption } from '../components/Select/Select.vue'
+import { ref } from 'vue'
+import Button from '../components/Button/Button.vue'
+import Flex from '../components/Flex/Flex.vue'
+import Input from '../components/Input/Input.vue'
+import Select from '../components/Select/Select.vue'
+import Sheet from '../components/Sheet/Sheet.vue'
+
+const open1 = ref()
+const open2 = ref()
+const width = ref(328)
+const options: SelectOption[] = [{ value: 'left', label: 'Left' }, { value: 'right', label: ' Right' }, { value: 'top', label: 'Top' }, { value: 'bottom', label: 'Bottom' }]
+const option = ref([options[0]])
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Sheets
+    </h3>
+
+    <Select v-model="option" expand label="Position" :options class="mb-l" required />
+
+    <table>
+      <tbody>
+        <tr>
+          <th>Base + divider + footer</th>
+          <td>
+            <Flex gap="m" justify-start>
+              <Button @click="open1 = !open1">
+                Open
+              </Button>
+              <Sheet v-model="open1" :position="option[0].value" separator>
+                <template #header>
+                  <h2>Hello </h2>
+                </template>
+                <h2 class="text-color-lighter">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus alias consectetur obcaecati recusandae debitis voluptatum exercitationem. Nam facilis laudantium labore sint cum, veritatis autem asperiores consectetur possimus cumque beatae eveniet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rem quod quisquam laborum sed excepturi, eum nisi nostrum, totam nihil magni voluptatum rerum culpa voluptatibus velit, sapiente fuga similique eius?
+                </h2>
+                <template #footer="{ close }">
+                  <p class="mb-s">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis placeat nisi, in velit temporibus at esse error et iusto vero odit illo veritatis rem cum delectus autem minus quod reiciendis.
+                  </p>
+                  <Button @click="close">
+                    Close
+                  </Button>
+                </template>
+              </Sheet>
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Width</th>
+          <td>
+            <Flex gap="m" justify-start align-center>
+              <Input v-model="width">
+                <template #start>
+                  Width
+                </template>
+              </Input>
+              <Button @click="open2 = !open2">
+                Open
+              </Button>
+              <Sheet v-model="open2" :position="option[0].value" :size="width">
+                <template #header>
+                  <h2>Hello </h2>
+                </template>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus alias consectetur obcaecati recusandae debitis voluptatum exercitationem. Nam facilis laudantium labore sint cum, veritatis autem asperiores consectetur possimus cumque beatae eveniet.</p>
+              </Sheet>
+            </Flex>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/examples/ExampleSidebars.vue

@@ -0,0 +1,270 @@
+<script setup lang='ts'>
+import { ref } from 'vue'
+import Avatar from '../components/Avatar/Avatar.vue'
+import Button from '../components/Button/Button.vue'
+import DropdownItem from '../components/Dropdown/DropdownItem.vue'
+import Flex from '../components/Flex/Flex.vue'
+import Grid from '../components/Grid/Grid.vue'
+import Sidebar from '../components/Sidebar/Sidebar.vue'
+
+const s1 = ref(true)
+const s2 = ref(true)
+const s3 = ref(true)
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Sidebars
+    </h3>
+
+    <Grid :columns="2" gap="xl">
+      <div>
+        <span class="mb-m block">Base + slots</span>
+        <div class="vui-sidebar-layout" :style="{ height: '512px' }">
+          <Sidebar>
+            <template #header>
+              <Flex align-center>
+                <img src="https://dolansky.dev/backgrounds/star.png" class="sidebar-logo" width="40" alt="">
+                <h3>ABC</h3>
+              </Flex>
+            </template>
+            <DropdownItem icon="ph:house">
+              Home
+            </DropdownItem>
+            <DropdownItem icon="ph:user">
+              About
+            </DropdownItem>
+            <DropdownItem icon="ph:phone">
+              Contact
+            </DropdownItem>
+
+            <template #footer>
+              <Flex align-center>
+                <Avatar size="m" />
+                <span class="flex-1">dolanske</span>
+                <Button plain size="s" icon="ph:sign-out" />
+              </Flex>
+            </template>
+          </Sidebar>
+          <main class="p-l typeset">
+            <h4>My page</h4>
+            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque deleniti asperiores quibusdam et commodi deserunt libero officia doloremque. Possimus ipsum sunt odit culpa consequatur hic reiciendis doloremque consequuntur tempore excepturi?</p>
+            <hr>
+            <p>Yes that's correct</p>
+            <ul>
+              <li>Secure</li>
+              <li>Reliant</li>
+              <li>Ublumf</li>
+            </ul>
+          </main>
+        </div>
+      </div>
+
+      <div>
+        <span class="mb-m block">Toggleable + floaty</span>
+        <div class="vui-sidebar-layout" :style="{ height: '512px' }">
+          <Sidebar v-model="s1" floaty>
+            <template #header="{ close }">
+              <Flex align-center>
+                <img src="https://dolansky.dev/backgrounds/star.png" class="sidebar-logo" width="40" alt="">
+                <h3 class="flex-1">
+                  ABC
+                </h3>
+                <Button plain size="s" icon="ph:x" @click="close" />
+              </Flex>
+            </template>
+            <DropdownItem icon="ph:house">
+              Outside
+            </DropdownItem>
+            <DropdownItem icon="ph:user">
+              About You
+            </DropdownItem>
+            <DropdownItem icon="ph:phone">
+              No contact
+            </DropdownItem>
+          </Sidebar>
+          <main class="p-l">
+            <Flex align-center class="mb-m">
+              <Button plain size="s" icon="ph:sidebar-simple" @click="s1 = !s1" />
+              <h4>
+                My page
+              </h4>
+            </Flex>
+
+            <div class="typeset">
+              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque deleniti asperiores quibusdam et commodi deserunt libero officia doloremque. Possimus ipsum sunt odit culpa consequatur hic reiciendis doloremque consequuntur tempore excepturi?</p>
+              <hr>
+              <p>Yes that's correct</p>
+              <ul>
+                <li>Secure</li>
+                <li>Reliant</li>
+                <li>Ublumf</li>
+              </ul>
+            </div>
+          </main>
+        </div>
+      </div>
+
+      <div>
+        <span class="mb-m block">Mini </span>
+        <div class="vui-sidebar-layout" :style="{ height: '512px' }">
+          <Sidebar v-model="s2" mini>
+            <template #header>
+              <Flex align-center>
+                <img src="https://dolansky.dev/backgrounds/star.png" class="sidebar-logo" width="40" alt="">
+              </Flex>
+            </template>
+            <DropdownItem icon="ph:house">
+              Home
+            </DropdownItem>
+            <DropdownItem icon="ph:user">
+              About
+            </DropdownItem>
+            <DropdownItem icon="ph:phone">
+              Contact
+            </DropdownItem>
+
+            <template #footer="{ close }">
+              <Flex justify-center>
+                <Button plain icon="ph:x" @click="close" />
+              </Flex>
+            </template>
+          </Sidebar>
+          <main class="p-l">
+            <Flex align-center class="mb-m">
+              <Button plain size="s" icon="ph:sidebar-simple" @click="s2 = !s2" />
+              <h4>
+                My page
+              </h4>
+            </Flex>
+
+            <div class="typeset">
+              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque deleniti asperiores quibusdam et commodi deserunt libero officia doloremque. Possimus ipsum sunt odit culpa consequatur hic reiciendis doloremque consequuntur tempore excepturi?</p>
+              <hr>
+              <p>Yes that's correct</p>
+              <ul>
+                <li>Secure</li>
+                <li>Reliant</li>
+                <li>Ublumf</li>
+              </ul>
+            </div>
+          </main>
+        </div>
+      </div>
+
+      <div>
+        <span class="mb-m block">Mini & floaty </span>
+        <div class="vui-sidebar-layout" :style="{ height: '512px' }">
+          <Sidebar v-model="s3" mini floaty>
+            <template #header>
+              <Flex align-center>
+                <img src="https://dolansky.dev/backgrounds/star.png" class="sidebar-logo" width="40" alt="">
+              </Flex>
+            </template>
+            <DropdownItem icon="ph:house">
+              Home
+            </DropdownItem>
+            <DropdownItem icon="ph:user">
+              About
+            </DropdownItem>
+            <DropdownItem icon="ph:phone">
+              Contact
+            </DropdownItem>
+
+            <template #footer="{ close }">
+              <Flex justify-center>
+                <Button plain icon="ph:x" @click="close" />
+              </Flex>
+            </template>
+          </Sidebar>
+          <main class="p-l">
+            <Flex align-center class="mb-m">
+              <Button plain size="s" icon="ph:sidebar-simple" @click="s3 = !s3" />
+              <h4>
+                My page
+              </h4>
+            </Flex>
+
+            <div class="typeset">
+              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque deleniti asperiores quibusdam et commodi deserunt libero officia doloremque. Possimus ipsum sunt odit culpa consequatur hic reiciendis doloremque consequuntur tempore excepturi?</p>
+              <hr>
+              <p>Yes that's correct</p>
+              <ul>
+                <li>Secure</li>
+                <li>Reliant</li>
+                <li>Ublumf</li>
+              </ul>
+            </div>
+          </main>
+        </div>
+      </div>
+
+      <div>
+        <span class="mb-m block">Appear + custom width</span>
+        <div class="vui-sidebar-layout" :style="{ height: '512px' }">
+          <Sidebar appear :width="300">
+            <template #header>
+              <img src="https://dolansky.dev/backgrounds/star.png" class="sidebar-logo" width="40" alt="">
+            </template>
+            <DropdownItem icon="ph:house">
+              Home
+            </DropdownItem>
+            <DropdownItem icon="ph:user">
+              About
+            </DropdownItem>
+            <DropdownItem icon="ph:phone">
+              Contact
+            </DropdownItem>
+          </Sidebar>
+          <main class="p-l typeset">
+            <h4>
+              Appear sidebar
+            </h4>
+            <p>This sidebar will appear automatically whenever the curosor is close to the edge of the sidebar wrapper.</p>
+          </main>
+        </div>
+      </div>
+
+      <div>
+        <span class="mb-m block">Appear + mini + floaty</span>
+        <div class="vui-sidebar-layout" :style="{ height: '512px' }">
+          <Sidebar appear mini floaty>
+            <template #header>
+              <img src="https://dolansky.dev/backgrounds/star.png" class="sidebar-logo" width="40" alt="">
+            </template>
+            <DropdownItem icon="ph:house">
+              Home
+            </DropdownItem>
+            <DropdownItem icon="ph:user">
+              About
+            </DropdownItem>
+            <DropdownItem icon="ph:phone">
+              Contact
+            </DropdownItem>
+          </Sidebar>
+          <main class="p-l typeset">
+            <h4>
+              Appear sidebar
+            </h4>
+            <p>This sidebar will appear automatically whenever the curosor is close to the edge of the sidebar wrapper.</p>
+          </main>
+        </div>
+      </div>
+    </Grid>
+  </div>
+</template>
+
+<style scoped>
+.vui-sidebar-layout {
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-m);
+  overflow: hidden;
+}
+
+html.dark {
+  .sidebar-logo {
+    filter: invert() !important;
+  }
+}
+</style>

package/src/examples/ExampleSkeletons.vue

@@ -0,0 +1,26 @@
+<script setup lang='ts'>
+import Flex from '../components/Flex/Flex.vue'
+import Skeleton from '../components/Skeleton/Skeleton.vue'
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Skeletons
+    </h3>
+    <table>
+      <tbody>
+        <tr>
+          <th>No defaults <br> Width, height, roundness must be specified</th>
+          <td>
+            <Flex gap="s">
+              <Skeleton :width="80" :height="48" :radius="8" />
+              <Skeleton :width="48" :height="48" :radius="8" />
+              <Skeleton :width="48" circle />
+            </Flex>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/examples/ExampleSpinners.vue

@@ -0,0 +1,78 @@
+<script setup lang='ts'>
+import { ref, watch } from 'vue'
+import Button from '../components/Button/Button.vue'
+import Checkbox from '../components/Checkbox/Checkbox.vue'
+import Flex from '../components/Flex/Flex.vue'
+import Progress from '../components/Progress/Progress.vue'
+import Spinner from '../components/Spinner/Spinner.vue'
+
+const paused = ref(true)
+const progress = ref(25)
+
+const fakeProgress = ref(15)
+const showFixed = ref(false)
+const variants = ['s', 'm', 'l'] as const
+
+watch(paused, () => fakeProgress.value = 0)
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l flex g-m y-center">
+      Loading
+      <Button square :icon="paused ? 'ph:play' : 'ph:pause'" size="s" plain @click="paused = !paused" />
+    </h3>
+    <table>
+      <tbody>
+        <tr>
+          <th>Spinners</th>
+          <td>
+            <Flex
+              gap="l" :style="{
+                'animation-play-state': 'paused',
+              }"
+            >
+              <Spinner
+                v-for="size in variants" :key="size" :size :style="{
+                  'animation-play-state': paused ? 'paused' : 'running',
+                }"
+              />
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Progress bar</th>
+          <td class="w-80">
+            <Flex gap="s" align-center>
+              <Button square icon="ph:minus" size="s" @click="progress -= 5" />
+              <Progress v-model="progress" class="w-full" />
+              <Button square icon="ph:plus" size="s" @click="progress += 5" />
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Progress bar tall</th>
+          <td class="w-80">
+            <Flex gap="s" align-center>
+              <Progress v-model="progress" :height="8" class="w-full" />
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Fake</th>
+          <td>
+            <Progress v-model="fakeProgress" :fake="!paused" />
+          </td>
+        </tr>
+        <tr>
+          <th>Fixed</th>
+          <td>
+            <Checkbox v-model="showFixed" label="Show fixed progress bar (look up)" />
+
+            <Progress v-if="showFixed" v-model="fakeProgress" :fake="!paused" fixed />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>