Merge pull request #58 from nightswinger/update-loader-docs

update loader docs
nightswinger · Mar 1, 2024 · 1e9f4f7 · 1e9f4f7
2 parents b56948a + 50e1afb
commit 1e9f4f7
Show file tree

Hide file tree

Showing 14 changed files with 515 additions and 287 deletions.
diff --git a/docs/src/components/elements/Loader/ActiveDoc.vue b/docs/src/components/elements/Loader/ActiveDoc.vue
@@ -0,0 +1,28 @@
+<template>
+  <DocSection label="Active" :code="code">
+    <template #description>
+      A loader can be active or visible
+    </template>
+    <template #example>
+      <SuiSegment>
+        <SuiLoader active />
+
+        <SuiImage src="/vue-fomantic-ui/images/wireframe/short-paragraph.png" />
+      </SuiSegment>
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiLoader, SuiSegment, SuiImage } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiSegment>
+    <SuiLoader active />
+
+    <SuiImage src="/images/wireframe/short-paragraph.png" />
+  </SuiSegment>
+</template>`
+</script>
diff --git a/docs/src/components/elements/Loader/ColorsDoc.vue b/docs/src/components/elements/Loader/ColorsDoc.vue
@@ -0,0 +1,48 @@
+<template>
+  <DocSection label="Colors" :code="code">
+    <template #description>
+      Loaders can be different colors
+    </template>
+    <template #example>
+      <SuiLoader active inline primary />
+      <SuiLoader active inline secondary />
+      <SuiLoader active inline color="red" />
+      <SuiLoader active inline color="orange" />
+      <SuiLoader active inline color="yellow" />
+      <SuiLoader active inline color="olive" />
+      <SuiLoader active inline color="green" />
+      <SuiLoader active inline color="teal" />
+      <SuiLoader active inline color="blue" />
+      <SuiLoader active inline color="violet" />
+      <SuiLoader active inline color="purple" />
+      <SuiLoader active inline color="pink" />
+      <SuiLoader active inline color="brown" />
+      <SuiLoader active inline color="grey" />
+      <SuiLoader active inline color="black" />
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiLoader } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiLoader active inline primary />
+  <SuiLoader active inline secondary />
+  <SuiLoader active inline color="red" />
+  <SuiLoader active inline color="orange" />
+  <SuiLoader active inline color="yellow" />
+  <SuiLoader active inline color="olive" />
+  <SuiLoader active inline color="green" />
+  <SuiLoader active inline color="teal" />
+  <SuiLoader active inline color="blue" />
+  <SuiLoader active inline color="violet" />
+  <SuiLoader active inline color="purple" />
+  <SuiLoader active inline color="pink" />
+  <SuiLoader active inline color="brown" />
+  <SuiLoader active inline color="grey" />
+  <SuiLoader active inline color="black" />
+</template>`
+</script>
diff --git a/docs/src/components/elements/Loader/DisabledDoc.vue b/docs/src/components/elements/Loader/DisabledDoc.vue
@@ -0,0 +1,28 @@
+<template>
+  <DocSection label="Disabled" :code="code">
+    <template #description>
+      A loader can be disabled or hidden
+    </template>
+    <template #example>
+      <SuiSegment>
+        <SuiLoader disabled />
+
+        <SuiImage src="/vue-fomantic-ui/images/wireframe/short-paragraph.png" />
+      </SuiSegment>
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiLoader, SuiSegment, SuiImage } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiSegment>
+    <SuiLoader disabled />
+
+    <SuiImage src="/images/wireframe/short-paragraph.png" />
+  </SuiSegment>
+</template>`
+</script>
diff --git a/docs/src/components/elements/Loader/IndeterminateDoc.vue b/docs/src/components/elements/Loader/IndeterminateDoc.vue
@@ -0,0 +1,32 @@
+<template>
+  <DocSection label="Indeterminate" :code="code">
+    <template #description>
+      A loader can show it's unsure of how long a task will take
+    </template>
+    <template #example>
+      <SuiSegment>
+        <SuiDimmer active>
+          <SuiLoader Indeterminate text>Preparing Files</SuiLoader>
+        </SuiDimmer>
+
+        <SuiImage src="/vue-fomantic-ui/images/wireframe/short-paragraph.png" />
+      </SuiSegment>
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiLoader, SuiSegment, SuiDimmer, SuiImage } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiSegment>
+    <SuiDimmer active>
+      <SuiLoader Indeterminate text>Preparing Files</SuiLoader>
+    </SuiDimmer>
+
+    <SuiImage src="/images/wireframe/short-paragraph.png" />
+  </SuiSegment>
+</template>`
+</script>
diff --git a/docs/src/components/elements/Loader/InlineCenterDoc.vue b/docs/src/components/elements/Loader/InlineCenterDoc.vue
@@ -0,0 +1,20 @@
+<template>
+  <DocSection label="Inline Center" :code="code">
+    <template #description>
+      Loaders can appear inline centered with content
+    </template>
+    <template #example>
+      <SuiLoader active inline="centered" />
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiLoader } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiLoader active inline />
+</template>`
+</script>
diff --git a/docs/src/components/elements/Loader/InlineDoc.vue b/docs/src/components/elements/Loader/InlineDoc.vue
@@ -0,0 +1,20 @@
+<template>
+  <DocSection label="Inline" :code="code">
+    <template #description>
+      Loaders can appear inline with content
+    </template>
+    <template #example>
+      <SuiLoader active inline />
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiLoader } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiLoader active inline />
+</template>`
+</script>
diff --git a/docs/src/components/elements/Loader/InvertedDoc.vue b/docs/src/components/elements/Loader/InvertedDoc.vue
@@ -0,0 +1,28 @@
+<template>
+  <DocSection label="Inverted" :code="code">
+    <template #description>
+      Loaders can have their colors inverted.
+    </template>
+    <template #example>
+      <SuiSegment inverted>
+        <SuiLoader active inverted />
+
+        <SuiImage src="/vue-fomantic-ui/images/wireframe/short-paragraph.png" />
+      </SuiSegment>
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiLoader, SuiSegment, SuiDimmer, SuiImage } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiSegment inverted>
+    <SuiLoader active inverted />
+
+    <SuiImage src="/vue-fomantic-ui/images/wireframe/short-paragraph.png" />
+  </SuiSegment>
+</template>`
+</script>
diff --git a/docs/src/components/elements/Loader/LoaderDoc.vue b/docs/src/components/elements/Loader/LoaderDoc.vue
@@ -0,0 +1,32 @@
+<template>
+  <DocSection label="Loader" :code="code">
+    <template #description>
+      A loader
+    </template>
+    <template #example>
+      <SuiSegment>
+        <SuiDimmer active>
+          <SuiLoader />
+        </SuiDimmer>
+
+        <SuiImage src="/vue-fomantic-ui/images/wireframe/short-paragraph.png" />
+      </SuiSegment>
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiLoader, SuiSegment, SuiDimmer, SuiImage } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiSegment>
+    <SuiDimmer active>
+      <SuiLoader />
+    </SuiDimmer>
+
+    <SuiImage src="/images/wireframe/short-paragraph.png" />
+  </SuiSegment>
+</template>`
+</script>
diff --git a/docs/src/components/elements/Loader/SizeDoc.vue b/docs/src/components/elements/Loader/SizeDoc.vue
@@ -0,0 +1,118 @@
+<template>
+  <DocSection label="Size" :code="code">
+    <template #description>
+      Loaders can have different sizes
+    </template>
+    <template #example>
+      <SuiSegment>
+        <SuiDimmer active>
+          <SuiLoader text size="mini">Loading</SuiLoader>
+        </SuiDimmer>
+
+        <SuiImage src="/vue-fomantic-ui/images/wireframe/short-paragraph.png" />
+      </SuiSegment>
+
+      <SuiSegment>
+        <SuiDimmer active>
+          <SuiLoader text size="tiny">Loading</SuiLoader>
+        </SuiDimmer>
+
+        <SuiImage src="/vue-fomantic-ui/images/wireframe/short-paragraph.png" />
+      </SuiSegment>
+
+      <SuiSegment>
+        <SuiDimmer active>
+          <SuiLoader text size="small">Loading</SuiLoader>
+        </SuiDimmer>
+
+        <SuiImage src="/vue-fomantic-ui/images/wireframe/short-paragraph.png" />
+      </SuiSegment>
+
+      <SuiSegment>
+        <SuiDimmer active>
+          <SuiLoader text size="large">Loading</SuiLoader>
+        </SuiDimmer>
+
+        <SuiImage src="/vue-fomantic-ui/images/wireframe/short-paragraph.png" />
+        <SuiImage src="/vue-fomantic-ui/images/wireframe/short-paragraph.png" />
+      </SuiSegment>
+
+      <SuiSegment>
+        <SuiDimmer active>
+          <SuiLoader text size="big">Loading</SuiLoader>
+        </SuiDimmer>
+
+        <SuiImage src="/vue-fomantic-ui/images/wireframe/short-paragraph.png" />
+        <SuiImage src="/vue-fomantic-ui/images/wireframe/short-paragraph.png" />
+      </SuiSegment>
+
+      <SuiSegment>
+        <SuiDimmer active>
+          <SuiLoader text size="huge">Loading</SuiLoader>
+        </SuiDimmer>
+
+        <SuiImage src="/vue-fomantic-ui/images/wireframe/short-paragraph.png" />
+        <SuiImage src="/vue-fomantic-ui/images/wireframe/short-paragraph.png" />
+      </SuiSegment>
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiLoader, SuiSegment, SuiDimmer, SuiImage } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiSegment>
+    <SuiDimmer active>
+      <SuiLoader text size="mini">Loading</SuiLoader>
+    </SuiDimmer>
+
+    <SuiImage src="/images/wireframe/short-paragraph.png" />
+  </SuiSegment>
+
+  <SuiSegment>
+    <SuiDimmer active>
+      <SuiLoader text size="tiny">Loading</SuiLoader>
+    </SuiDimmer>
+
+    <SuiImage src="/images/wireframe/short-paragraph.png" />
+  </SuiSegment>
+
+  <SuiSegment>
+    <SuiDimmer active>
+      <SuiLoader text size="small">Loading</SuiLoader>
+    </SuiDimmer>
+
+    <SuiImage src="/images/wireframe/short-paragraph.png" />
+  </SuiSegment>
+
+  <SuiSegment>
+    <SuiDimmer active>
+      <SuiLoader text size="large">Loading</SuiLoader>
+    </SuiDimmer>
+
+    <SuiImage src="/images/wireframe/short-paragraph.png" />
+    <SuiImage src="/images/wireframe/short-paragraph.png" />
+  </SuiSegment>
+
+  <SuiSegment>
+    <SuiDimmer active>
+      <SuiLoader text size="big">Loading</SuiLoader>
+    </SuiDimmer>
+
+    <SuiImage src="/images/wireframe/short-paragraph.png" />
+    <SuiImage src="/images/wireframe/short-paragraph.png" />
+  </SuiSegment>
+
+  <SuiSegment>
+    <SuiDimmer active>
+      <SuiLoader text size="huge">Loading</SuiLoader>
+    </SuiDimmer>
+
+    <SuiImage src="/images/wireframe/short-paragraph.png" />
+    <SuiImage src="/images/wireframe/short-paragraph.png" />
+  </SuiSegment>
+</template>`
+</script>
diff --git a/docs/src/components/elements/Loader/SpeedDoc.vue b/docs/src/components/elements/Loader/SpeedDoc.vue
@@ -0,0 +1,24 @@
+<template>
+  <DocSection label="Speed" :code="code">
+    <template #description>
+      Loaders can appear slow, normal or fast
+    </template>
+    <template #example>
+      <SuiLoader slow active inline />
+      <SuiLoader active inline />
+      <SuiLoader fast active inline />
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiLoader } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiLoader slow active inline />
+  <SuiLoader active inline />
+  <SuiLoader fast active inline />
+</template>`
+</script>