feat(desc): add <SDescFile> (#394)

globalbrain · Nov 20, 2023 · 2f1c7d3 · 2f1c7d3
1 parent a56469d
commit 2f1c7d3
Show file tree

Hide file tree

Showing 7 changed files with 200 additions and 24 deletions.
diff --git a/docs/components/desc.md b/docs/components/desc.md
@@ -42,34 +42,51 @@ import SDescText from 'sefirot/components/SDescText.vue'
   </div>
 </Showcase>
 
-## Usage
-
-The `<SDesc>` has various child components that you can use to build your description list. Here is a basic example of how to use the `<SDesc>`.
+## Import
 
-```vue
-<script setup lang="ts">
+```ts
 import SDesc from 'sefirot/components/SDesc.vue'
+import SDescDay from 'sefirot/components/SDescDay.vue'
+import SDescFile from 'sefirot/components/SDescFile.vue'
 import SDescItem from 'sefirot/components/SDescItem.vue'
 import SDescLabel from 'sefirot/components/SDescLabel.vue'
+import SDescLink from 'sefirot/components/SDescLink.vue'
+import SDescNumber from 'sefirot/components/SDescNumber.vue'
+import SDescPill from 'sefirot/components/SDescPill.vue'
+import SDescState from 'sefirot/components/SDescState.vue'
 import SDescText from 'sefirot/components/SDescText.vue'
-</script>
+```
 
-<template>
-  <SDesc cols="2" gap="24">
-    <SDescItem span="1">
-      <SDescLabel>Full name</SDescLabel>
-      <SDescText>Margot Foster</SDescText>
-    </SDescItem>
-    <SDescItem span="1">
-      <SDescLabel>Website</SDescLabel>
-      <SDescLink>https://example.com</SDescLink>
-    </SDescItem>
-    <SDescItem span="2">
-      <SDescLabel>About</SDescLabel>
-      <SDescText>Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat. Excepteur <a href="https://hello.com">qui ipsum aliquip consequat</a> sint. Sit id mollit nulla mollit nostrud in ea officia proident. Irure nostrud pariatur mollit ad adipisicing reprehenderit deserunt qui eu.</SDescText>
-    </SDescItem>
-  </SDesc>
-</template>
+You may also import all related components at once via mixin function.
+
+```ts
+import { mixin as mixinDesc } from 'sefirot/mixins/Desc.vue'
+import { createApp } from 'vue'
+
+const app = createApp(App)
+
+mixinDesc(app)
+```
+
+## Usage
+
+The `<SDesc>` has various child components that you can use to build your description list. Here is a basic example of how to use the `<SDesc>`.
+
+```vue-html
+<SDesc cols="2" gap="24">
+  <SDescItem span="1">
+    <SDescLabel>Full name</SDescLabel>
+    <SDescText>Margot Foster</SDescText>
+  </SDescItem>
+  <SDescItem span="1">
+    <SDescLabel>Website</SDescLabel>
+    <SDescLink>https://example.com</SDescLink>
+  </SDescItem>
+  <SDescItem span="2">
+    <SDescLabel>About</SDescLabel>
+    <SDescText>Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat. Excepteur <a href="https://hello.com">qui ipsum aliquip consequat</a> sint. Sit id mollit nulla mollit nostrud in ea officia proident. Irure nostrud pariatur mollit ad adipisicing reprehenderit deserunt qui eu.</SDescText>
+  </SDescItem>
+</SDesc>
 ```
 
 ## Layout
@@ -411,6 +428,33 @@ type Mode =
 </SDesc>
 ```
 
+## File value
+
+Use `<SDescFile>` to display a list of files. Useful when you have a "attachment" list in the form.
+
+```ts
+interface Props {
+  item?: Item | Item[] | null
+}
+
+interface Item {
+  name: string
+  onDownload(): void
+}
+```
+
+```vue-html
+<SDesc cols="2" gap="24">
+  <SDescItem span="2">
+    <SDescLabel value="Attachements" />
+    <SDescFile :file="[
+      { name: 'John-Doe-Resume-19851010.pdf', onDownload: () => {} },
+      { name: 'profile-photo.jpg', onDownload: () => {} }
+    ]" />
+  </SDescItem>
+</SDesc>
+```
+
 ## Empty state
 
 All components that support `:value` can accept empty values, which are represented as `null` or `undefined`. When `:value` is not present or is empty, the `<SDescEmpty>` is displayed.

diff --git a/lib/components/SDescFile.vue b/lib/components/SDescFile.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import IconDownloadSimple from '@iconify-icons/ph/download-simple-bold'
+import IconFileText from '@iconify-icons/ph/file-text-bold'
+import { computed } from 'vue'
+import { isArray } from '../support/Utils'
+import SButton from './SButton.vue'
+import SDescEmpty from './SDescEmpty.vue'
+import SIcon from './SIcon.vue'
+
+export interface Item {
+  name: string
+  onDownload(): void
+}
+
+const props = defineProps<{
+  item?: Item | Item[] | null
+}>()
+
+const items = computed(() => {
+  return props.item
+    ? isArray(props.item) ? props.item : [props.item]
+    : null
+})
+</script>
+
+<template>
+  <div v-if="items && items.length" class="SDescFile">
+    <div class="value">
+      <div v-for="item, index in items" :key="index" class="item">
+        <div class="data">
+          <div class="icon"><SIcon class="icon-svg" :icon="IconFileText" /></div>
+          <div class="name">{{ item.name }}</div>
+        </div>
+        <div class="actions">
+          <SButton
+            size="small"
+            type="text"
+            mode="info"
+            :icon="IconDownloadSimple"
+            label="Download"
+            @click="item.onDownload"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <SDescEmpty v-else />
+</template>
+
+<style scoped lang="postcss">
+.value {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  border: 1px solid var(--c-divider);
+  border-radius: 6px;
+  margin-top: 2px;
+  background-color: var(--c-gutter);
+  overflow: hidden;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px 0 12px;
+  width: 100%;
+  height: 48px;
+  background-color: var(--c-bg-elv-4);
+}
+
+.data {
+  display: flex;
+  gap: 8px;
+  flex-grow: 1;
+  align-items: center;
+  overflow: hidden;
+}
+
+.icon-svg {
+  width: 18px;
+  height: 18px;
+  color: var(--c-text-2);
+}
+
+.name {
+  line-height: 24px;
+  font-size: 14px;
+  color: var(--c-text-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.actions {
+  flex-shrink: 0;
+}
+</style>
diff --git a/lib/components/SDescItem.vue b/lib/components/SDescItem.vue
@@ -25,13 +25,14 @@ const labelWidth = computed(() => {
 <style scoped lang="postcss">
 .SDescItem {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
 }
 
 .SDesc.row > .SDescItem {
-  grid-template-columns: var(--desc-label-width, v-bind(labelWidth)) 1fr;
+  grid-template-columns: var(--desc-label-width, v-bind(labelWidth)) minmax(0, 1fr);
 }
 
-.SDesc.divider > .SDescItem {
+.SDesc.divider > .SDescItem:not(:has(> .SDescFile)) {
   border-bottom: 1px dashed var(--c-divider);
   padding-bottom: 7px;
 }

diff --git a/lib/mixins/Desc.ts b/lib/mixins/Desc.ts
@@ -2,6 +2,7 @@ import { type App } from 'vue'
 import SDesc from '../components/SDesc.vue'
 import SDescDay from '../components/SDescDay.vue'
 import SDescEmpty from '../components/SDescEmpty.vue'
+import SDescFile from '../components/SDescFile.vue'
 import SDescItem from '../components/SDescItem.vue'
 import SDescLabel from '../components/SDescLabel.vue'
 import SDescLink from '../components/SDescLink.vue'
@@ -14,6 +15,7 @@ export function mixin(app: App): void {
   app.component('SDesc', SDesc)
   app.component('SDescDay', SDescDay)
   app.component('SDescEmpty', SDescEmpty)
+  app.component('SDescFile', SDescFile)
   app.component('SDescItem', SDescItem)
   app.component('SDescLabel', SDescLabel)
   app.component('SDescLink', SDescLink)
@@ -28,6 +30,7 @@ declare module 'vue' {
     SDesc: typeof SDesc
     SDescDay: typeof SDescDay
     SDescEmpty: typeof SDescEmpty
+    SDescFile: typeof SDescFile
     SDescItem: typeof SDescItem
     SDescLabel: typeof SDescLabel
     SDescLink: typeof SDescLink

diff --git a/stories/components/SDesc.01_Playground.story.vue b/stories/components/SDesc.01_Playground.story.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import SDesc from 'sefirot/components/SDesc.vue'
 import SDescDay from 'sefirot/components/SDescDay.vue'
+import SDescFile from 'sefirot/components/SDescFile.vue'
 import SDescItem from 'sefirot/components/SDescItem.vue'
 import SDescLabel from 'sefirot/components/SDescLabel.vue'
 import SDescLink from 'sefirot/components/SDescLink.vue'
@@ -63,6 +64,15 @@ function state() {
             <SDescLabel>About</SDescLabel>
             <SDescText>Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat. Excepteur <a href="https://hello.com">qui ipsum aliquip consequat</a> sint. Sit id mollit nulla mollit nostrud in ea officia proident. Irure nostrud pariatur mollit ad adipisicing reprehenderit deserunt qui eu.</SDescText>
           </SDescItem>
+          <SDescItem span="2">
+            <SDescLabel>Attachments</SDescLabel>
+            <SDescFile
+              :item="[
+                { name: 'John-Doe-Resume-19851010.pdf', onDownload: () => {} },
+                { name: 'profile-photo.jpg', onDownload: () => {} }
+              ]"
+            />
+          </SDescItem>
         </SDesc>
       </Board>
     </template>

diff --git a/stories/components/SDesc.02_Row_Direction.story.vue b/stories/components/SDesc.02_Row_Direction.story.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import SDesc from 'sefirot/components/SDesc.vue'
 import SDescDay from 'sefirot/components/SDescDay.vue'
+import SDescFile from 'sefirot/components/SDescFile.vue'
 import SDescItem from 'sefirot/components/SDescItem.vue'
 import SDescLabel from 'sefirot/components/SDescLabel.vue'
 import SDescLink from 'sefirot/components/SDescLink.vue'
@@ -80,6 +81,15 @@ function state() {
             <SDescLabel>About</SDescLabel>
             <SDescText>Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat. Excepteur <a href="https://hello.com">qui ipsum aliquip consequat</a> sint. Sit id mollit nulla mollit nostrud in ea officia proident. Irure nostrud pariatur mollit ad adipisicing reprehenderit deserunt qui eu.</SDescText>
           </SDescItem>
+          <SDescItem>
+            <SDescLabel>Attachments</SDescLabel>
+            <SDescFile
+              :item="[
+                { name: 'John-Doe-Resume-19851010.pdf', onDownload: () => {} },
+                { name: 'profile-photo.jpg', onDownload: () => {} }
+              ]"
+            />
+          </SDescItem>
         </SDesc>
       </Board>
     </template>

diff --git a/stories/components/SDesc.03_Within_Card.story.vue b/stories/components/SDesc.03_Within_Card.story.vue
@@ -5,6 +5,7 @@ import SCardHeader from 'sefirot/components/SCardHeader.vue'
 import SCardHeaderTitle from 'sefirot/components/SCardHeaderTitle.vue'
 import SDesc from 'sefirot/components/SDesc.vue'
 import SDescDay from 'sefirot/components/SDescDay.vue'
+import SDescFile from 'sefirot/components/SDescFile.vue'
 import SDescItem from 'sefirot/components/SDescItem.vue'
 import SDescLabel from 'sefirot/components/SDescLabel.vue'
 import SDescLink from 'sefirot/components/SDescLink.vue'
@@ -55,6 +56,15 @@ const docs = '/components/desc'
                 <SDescLabel>About</SDescLabel>
                 <SDescText>Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat. Excepteur <a href="https://hello.com">qui ipsum aliquip consequat</a> sint. Sit id mollit nulla mollit nostrud in ea officia proident. Irure nostrud pariatur mollit ad adipisicing reprehenderit deserunt qui eu.</SDescText>
               </SDescItem>
+              <SDescItem span="2">
+                <SDescLabel>Attachments</SDescLabel>
+                <SDescFile
+                  :item="[
+                    { name: 'John-Doe-Resume-19851010.pdf', onDownload: () => {} },
+                    { name: 'profile-photo.jpg', onDownload: () => {} }
+                  ]"
+                />
+              </SDescItem>
             </SDesc>
           </SCardBlock>
         </SCard>