Skip to content

Commit

Permalink
Merge pull request #57 from nightswinger/update-label-docs
Browse files Browse the repository at this point in the history 
update label docs
  • Loading branch information
@nightswinger
nightswinger authored Mar 1, 2024
2 parents e09dc55 + e7c02e4 commit b56948a
Show file tree
Hide file tree
Showing 30 changed files with 1,279 additions and 860 deletions.
27 changes: 19 additions & 8 deletions docs/src/components/doc/DocSectionCode.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,32 @@
<SuiGridColumn :width="16">
<slot></slot>
</SuiGridColumn>
<SuiGridColumn :width="16">
<SuiTransition animation="scale">
<template v-if="!hideCode">
<pre v-code-highlight><code>{{ code }}
<SuiGridColumn :width="16" id="accordion" :aria-hidden="hideCode">
<div class="inner">
<pre v-code-highlight><code>{{ code }}
</code></pre>
</template>
</SuiTransition>
</div>

</SuiGridColumn>
</SuiGridRow>
</template>

<script setup>
import { SuiTransition } from 'vue-fomantic-ui'
import { vCodeHighlight } from '../../directives/vCodeHighlight'
defineProps(['code', 'hideCode'])
</script>

<style scoped>
#accordion {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease-in-out;
}
#accordion[aria-hidden="false"] {
grid-template-rows: 1fr;
}
#accordion > .inner {
overflow: hidden;
}
</style>
2 changes: 1 addition & 1 deletion docs/src/components/doc/DocSections.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
{{ category }}
</SuiHeader>
<template v-for="(doc, i) in docs.filter(d => d.category === category)" :key="doc.label + '_' + i">
<component :is="doc.component" :id="doc.id" :style="{marginTop: '3rem'}" />
<component :is="doc.component" :id="doc.id" :style="{paddingTop: '3rem'}" />
</template>
</template>
</template>
Expand Down
111 changes: 111 additions & 0 deletions docs/src/components/elements/Label/AttachedDoc.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<template>
<DocSection label="Attached" :code="code">
<template #description>
A label can attach to a content segment
</template>
<template #example>
<SuiGrid :columns="3">
<SuiGridRow>
<SuiGridColumn>
<SuiSegment padded>
<SuiLabel attached="top">HTML</SuiLabel>
<SuiImage src="/vue-fomantic-ui/images/wireframe/paragraph.png" />
</SuiSegment>
</SuiGridColumn>
<SuiGridColumn>
<SuiSegment padded>
<SuiLabel attached="bottom">CSS</SuiLabel>
<SuiImage src="/vue-fomantic-ui/images/wireframe/paragraph.png" />
</SuiSegment>
</SuiGridColumn>
<SuiGridColumn>
<SuiSegment padded>
<SuiLabel attached="top right">Code</SuiLabel>
<SuiImage src="/vue-fomantic-ui/images/wireframe/paragraph.png" />
</SuiSegment>
</SuiGridColumn>
</SuiGridRow>

<SuiGridRow>
<SuiGridColumn>
<SuiSegment padded>
<SuiLabel attached="top left">View</SuiLabel>
<SuiImage src="/vue-fomantic-ui/images/wireframe/paragraph.png" />
</SuiSegment>
</SuiGridColumn>
<SuiGridColumn>
<SuiSegment padded>
<SuiLabel attached="bottom left">User View</SuiLabel>
<SuiImage src="/vue-fomantic-ui/images/wireframe/paragraph.png" />
</SuiSegment>
</SuiGridColumn>
<SuiGridColumn>
<SuiSegment padded>
<SuiLabel attached="bottom right">Admin View</SuiLabel>
<SuiImage src="/vue-fomantic-ui/images/wireframe/paragraph.png" />
</SuiSegment>
</SuiGridColumn>
</SuiGridRow>
</SuiGrid>
</template>
</DocSection>
</template>

<script setup>
import DocSection from '@/components/doc/DocSection.vue'
import {
SuiLabel,
SuiGrid,
SuiGridRow,
SuiGridColumn,
SuiSegment,
SuiImage,
} from 'vue-fomantic-ui'
const code = `<template>
<SuiGrid :columns="3">
<SuiGridRow>
<SuiGridColumn>
<SuiSegment padded>
<SuiLabel attached="top">HTML</SuiLabel>
<SuiImage src="/vue-fomantic-ui/images/wireframe/paragraph.png" />
</SuiSegment>
</SuiGridColumn>
<SuiGridColumn>
<SuiSegment padded>
<SuiLabel attached="bottom">CSS</SuiLabel>
<SuiImage src="/vue-fomantic-ui/images/wireframe/paragraph.png" />
</SuiSegment>
</SuiGridColumn>
<SuiGridColumn>
<SuiSegment padded>
<SuiLabel attached="top right">Code</SuiLabel>
<SuiImage src="/vue-fomantic-ui/images/wireframe/paragraph.png" />
</SuiSegment>
</SuiGridColumn>
</SuiGridRow>
<SuiGridRow>
<SuiGridColumn>
<SuiSegment padded>
<SuiLabel attached="top left">View</SuiLabel>
<SuiImage src="/vue-fomantic-ui/images/wireframe/paragraph.png" />
</SuiSegment>
</SuiGridColumn>
<SuiGridColumn>
<SuiSegment padded>
<SuiLabel attached="bottom left">User View</SuiLabel>
<SuiImage src="/vue-fomantic-ui/images/wireframe/paragraph.png" />
</SuiSegment>
</SuiGridColumn>
<SuiGridColumn>
<SuiSegment padded>
<SuiLabel attached="bottom right">Admin View</SuiLabel>
<SuiImage src="/vue-fomantic-ui/images/wireframe/paragraph.png" />
</SuiSegment>
</SuiGridColumn>
</SuiGridRow>
</SuiGrid>
</template>`
</script>
34 changes: 34 additions & 0 deletions docs/src/components/elements/Label/BasicDoc.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<template>
<DocSection label="Basic" :code="code">
<template #description>
A label can reduce its complexity
</template>
<template #example>
<SuiLabel as="a" basic>Basic</SuiLabel>
<SuiLabel as="a" basic pointing>Pointing</SuiLabel>
<SuiLabel as="a" basic image>
<img src="/images/avatar/small/elliot.jpg" />
Elliot
</SuiLabel>
<SuiLabel as="a" basic pointing color="red">Red Pointing</SuiLabel>
<SuiLabel as="a" basic color="blue">Blue</SuiLabel>
</template>
</DocSection>
</template>

<script setup>
import DocSection from '@/components/doc/DocSection.vue'
import { SuiLabel } from 'vue-fomantic-ui'
const code = `<template>
<SuiLabel as="a" basic>Basic</SuiLabel>
<SuiLabel as="a" basic pointing>Pointing</SuiLabel>
<SuiLabel as="a" basic image>
<img src="/images/avatar/small/elliot.jpg" />
Elliot
</SuiLabel>
<SuiLabel as="a" basic pointing color="red">Red Pointing</SuiLabel>
<SuiLabel as="a" basic color="blue">Blue</SuiLabel>
</template>`
</script>
42 changes: 42 additions & 0 deletions docs/src/components/elements/Label/BasicGroupDoc.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<template>
<DocSection label="Basic Group" :code="code">
<template #description>
Labels can share their style together
</template>
<template #example>
<SuiLabelGroup basic>
<SuiLabel>
Fun
<SuiIcon name="close" />
</SuiLabel>
<SuiLabel>
Happy
<SuiLabelDetail>Smart</SuiLabelDetail>
</SuiLabel>
<SuiLabel>Insane</SuiLabel>
<SuiLabel>Exciting</SuiLabel>
</SuiLabelGroup>
</template>
</DocSection>
</template>

<script setup>
import DocSection from '@/components/doc/DocSection.vue'
import { SuiLabel, SuiLabelGroup, SuiLabelDetail, SuiIcon } from 'vue-fomantic-ui'
const code = `<template>
<SuiLabelGroup basic>
<SuiLabel>
Fun
<SuiIcon name="close" />
</SuiLabel>
<SuiLabel>
Happy
<SuiLabelDetail>Smart</SuiLabelDetail>
</SuiLabel>
<SuiLabel>Insane</SuiLabel>
<SuiLabel>Exciting</SuiLabel>
</SuiLabelGroup>
</template>`
</script>
47 changes: 47 additions & 0 deletions docs/src/components/elements/Label/BasicTagDoc.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<template>
<DocSection label="Basic Tag" :code="code">
<template #description>
</template>
<template #example>
<SuiLabel as="a" basic tag primary>Primary</SuiLabel>
<SuiLabel as="a" basic tag secondary>Secondary</SuiLabel>
<SuiLabel as="a" basic tag color="red">Red</SuiLabel>
<SuiLabel as="a" basic tag color="orange">Orange</SuiLabel>
<SuiLabel as="a" basic tag color="yellow">Yellow</SuiLabel>
<SuiLabel as="a" basic tag color="olive">Olive</SuiLabel>
<SuiLabel as="a" basic tag color="green">Green</SuiLabel>
<SuiLabel as="a" basic tag color="teal">Teal</SuiLabel>
<SuiLabel as="a" basic tag color="blue">Blue</SuiLabel>
<SuiLabel as="a" basic tag color="violet">Violet</SuiLabel>
<SuiLabel as="a" basic tag color="purple">Purple</SuiLabel>
<SuiLabel as="a" basic tag color="pink">Pink</SuiLabel>
<SuiLabel as="a" basic tag color="brown">Brown</SuiLabel>
<SuiLabel as="a" basic tag color="grey">Grey</SuiLabel>
<SuiLabel as="a" basic tag color="black">Black</SuiLabel>
</template>
</DocSection>
</template>

<script setup>
import DocSection from '@/components/doc/DocSection.vue'
import { SuiLabel } from 'vue-fomantic-ui'
const code = `<template>
<SuiLabel as="a" basic tag primary>Primary</SuiLabel>
<SuiLabel as="a" basic tag secondary>Secondary</SuiLabel>
<SuiLabel as="a" basic tag color="red">Red</SuiLabel>
<SuiLabel as="a" basic tag color="orange">Orange</SuiLabel>
<SuiLabel as="a" basic tag color="yellow">Yellow</SuiLabel>
<SuiLabel as="a" basic tag color="olive">Olive</SuiLabel>
<SuiLabel as="a" basic tag color="green">Green</SuiLabel>
<SuiLabel as="a" basic tag color="teal">Teal</SuiLabel>
<SuiLabel as="a" basic tag color="blue">Blue</SuiLabel>
<SuiLabel as="a" basic tag color="violet">Violet</SuiLabel>
<SuiLabel as="a" basic tag color="purple">Purple</SuiLabel>
<SuiLabel as="a" basic tag color="pink">Pink</SuiLabel>
<SuiLabel as="a" basic tag color="brown">Brown</SuiLabel>
<SuiLabel as="a" basic tag color="grey">Grey</SuiLabel>
<SuiLabel as="a" basic tag color="black">Black</SuiLabel>
</template>`
</script>
44 changes: 44 additions & 0 deletions docs/src/components/elements/Label/CircularDoc.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<template>
<DocSection label="Circular" :code="code">
<template #description>
A label can be circular
</template>
<template #example>
<SuiLabel circular color="red">2</SuiLabel>
<SuiLabel circular color="orange">2</SuiLabel>
<SuiLabel circular color="yellow">2</SuiLabel>
<SuiLabel circular color="olive">2</SuiLabel>
<SuiLabel circular color="green">2</SuiLabel>
<SuiLabel circular color="teal">2</SuiLabel>
<SuiLabel circular color="blue">2</SuiLabel>
<SuiLabel circular color="violet">2</SuiLabel>
<SuiLabel circular color="purple">2</SuiLabel>
<SuiLabel circular color="pink">2</SuiLabel>
<SuiLabel circular color="brown">2</SuiLabel>
<SuiLabel circular color="grey">2</SuiLabel>
<SuiLabel circular color="black">2</SuiLabel>
</template>
</DocSection>
</template>

<script setup>
import DocSection from '@/components/doc/DocSection.vue'
import { SuiLabel } from 'vue-fomantic-ui'
const code = `<template>
<SuiLabel circular color="red">2</SuiLabel>
<SuiLabel circular color="orange">2</SuiLabel>
<SuiLabel circular color="yellow">2</SuiLabel>
<SuiLabel circular color="olive">2</SuiLabel>
<SuiLabel circular color="green">2</SuiLabel>
<SuiLabel circular color="teal">2</SuiLabel>
<SuiLabel circular color="blue">2</SuiLabel>
<SuiLabel circular color="violet">2</SuiLabel>
<SuiLabel circular color="purple">2</SuiLabel>
<SuiLabel circular color="pink">2</SuiLabel>
<SuiLabel circular color="brown">2</SuiLabel>
<SuiLabel circular color="grey">2</SuiLabel>
<SuiLabel circular color="black">2</SuiLabel>
</template>`
</script>
34 changes: 34 additions & 0 deletions docs/src/components/elements/Label/CircularGroupDoc.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<template>
<DocSection label="Circular Group" :code="code">
<template #description>
Labels can share shapes
</template>
<template #example>
<SuiLabelGroup circular>
<SuiLabel as="a">1</SuiLabel>
<SuiLabel as="a">3</SuiLabel>
<SuiLabel as="a">4</SuiLabel>
<SuiLabel as="a">14</SuiLabel>
<SuiLabel as="a">16</SuiLabel>
<SuiLabel as="a">34</SuiLabel>
</SuiLabelGroup>
</template>
</DocSection>
</template>

<script setup>
import DocSection from '@/components/doc/DocSection.vue'
import { SuiLabel, SuiLabelGroup } from 'vue-fomantic-ui'
const code = `<template>
<SuiLabelGroup tag>
<SuiLabel as="a">1</SuiLabel>
<SuiLabel as="a">3</SuiLabel>
<SuiLabel as="a">4</SuiLabel>
<SuiLabel as="a">14</SuiLabel>
<SuiLabel as="a">16</SuiLabel>
<SuiLabel as="a">34</SuiLabel>
</SuiLabelGroup>
</template>`
</script>
Loading

0 comments on commit b56948a

Please sign in to comment.