-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add file card component to ui package (#456)
* feat: add file card component to ui package * feat: add confirmation action with file card demo * feat: add custom message demo for file card * feat: add buttons properties demo for file card * feat: add visibility detail demo for file card * chore: sort props alphabetically
- Loading branch information
1 parent
4c531f7
commit 1aebec2
Showing
13 changed files
with
959 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,281 @@ | ||
| <template> | ||
| <UiPage :title="$t('ui.fileCard.title')" class="demo"> | ||
| <template #toolbar> | ||
| <router-link :to="{ name: 'ui' }" class="back"> | ||
| {{ $t("common.back") }} | ||
| </router-link> | ||
| </template> | ||
|
|
||
| <section> | ||
| <h2>{{ $t("ui.fileCard.usage.basic") }}</h2> | ||
|
|
||
| <div class="section-content"> | ||
| <FileCard :file="file" /> | ||
|
|
||
| <!-- eslint-disable --> | ||
| <SshPre language="html-vue"> | ||
| <template> | ||
| <FileCard :file="file" /> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { FileCard } from "@dzangolab/vue3-ui"; | ||
|
|
||
| import type { IFile } from "@dzangolab/vue3-ui"; | ||
|
|
||
| const file = { | ||
| description: "This is a file", | ||
| downloadCount: 0, | ||
| id: 1, | ||
| lastDownloadedAt: Date.now(), | ||
| originalFileName: "file.png", | ||
| size: 4, | ||
| uploadedBy: { givenName: "Test", lastName: "user" }, | ||
| uploadedAt: Date.now(), | ||
| } as IFile; | ||
| </script> | ||
| </SshPre> | ||
| <!-- eslint-enable --> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>{{ $t("ui.fileCard.usage.messages") }}</h2> | ||
|
|
||
| <div class="section-content"> | ||
| <FileCard :file="file" :messages="messages" /> | ||
|
|
||
| <!-- eslint-disable --> | ||
| <SshPre language="html-vue"> | ||
| <template> | ||
| <FileCard :file="file" :messages="messages" /> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { FileCard } from "@dzangolab/vue3-ui"; | ||
|
|
||
| import type { FileMessages, IFile } from "@dzangolab/vue3-ui"; | ||
|
|
||
| const file = { | ||
| ... | ||
| } as IFile; | ||
|
|
||
| const messages = { | ||
| archiveAction: "Archive file", | ||
| archiveConfirmationHeader: "Confirm archive?", | ||
| archiveConfirmationMessage: "Are you sure to archive this file?", | ||
| deleteAction: "Delete file", | ||
| deleteConfirmationHeader: "Confirm delete?", | ||
| deleteConfirmationMessage: "Are you sure to delete this file?", | ||
| downloadAction: "Download file", | ||
| downloadCountHeader: "Download count:", | ||
| lastDownloadedAtHeader: "Last downloaded date:", | ||
| shareAction: "Share file", | ||
| uploadedAtHeader: "Uploaded date:", | ||
| uploadedByHeader: "Uploaded by:", | ||
| viewAction: "View file", | ||
| } as FileMessages; | ||
| </script> | ||
| </SshPre> | ||
| <!-- eslint-enable --> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>{{ $t("ui.fileCard.usage.buttonProps") }}</h2> | ||
|
|
||
| <div class="section-content"> | ||
| <FileCard | ||
| :archive-button-props="archiveButtonProperties" | ||
| :delete-button-props="deleteButtonProperties" | ||
| :download-button-props="downloadButtonProperties" | ||
| :file="file" | ||
| :share-button-props="shareButtonProperties" | ||
| :view-button-props="viewButtonProperties" | ||
| /> | ||
|
|
||
| <!-- eslint-disable --> | ||
| <SshPre language="html-vue"> | ||
| <template> | ||
| <FileCard | ||
| :archive-button-props="archiveButtonProps" | ||
| :delete-button-props="deleteButtonProps" | ||
| :download-button-props="downloadButtonProps" | ||
| :file="file" | ||
| :share-button-props="shareButtonProps" | ||
| :view-button-props="viewButtonProps" | ||
| /> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { FileCard } from "@dzangolab/vue3-ui"; | ||
|
|
||
| import type { FileMessages, IFile } from "@dzangolab/vue3-ui"; | ||
|
|
||
| const archiveButtonProps = { | ||
| severity: "warning", | ||
| size: "medium", | ||
| variant: "outlined", | ||
| }; | ||
|
|
||
| const deleteButtonProps = { | ||
| severity: "danger", | ||
| size: "medium", | ||
| variant: "outlined", | ||
| }; | ||
|
|
||
| const downloadButtonProps = { | ||
| severity: "primary", | ||
| size: "medium", | ||
| variant: "outlined", | ||
| }; | ||
|
|
||
| const file = { | ||
| ... | ||
| } as IFile; | ||
|
|
||
| const shareButtonProps = { | ||
| severity: "alternate", | ||
| size: "medium", | ||
| variant: "outlined", | ||
| }; | ||
|
|
||
| const viewButtonProps = { | ||
| severity: "secondary", | ||
| size: "medium", | ||
| variant: "outlined", | ||
| }; | ||
| </SshPre> | ||
| <!-- eslint-enable --> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>{{ $t("ui.fileCard.usage.visibilityDetail") }}</h2> | ||
|
|
||
| <div class="section-content"> | ||
| <FileCard | ||
| :action-buttons-visibility="{ | ||
| archive: false, | ||
| delete: true, | ||
| download: true, | ||
| share: false, | ||
| view: true, | ||
| }" | ||
| :file="file" | ||
| :visibility-detail="{ | ||
| actions: true, | ||
| description: false, | ||
| downloadCount: true, | ||
| lastDownloadedAt: false, | ||
| originalFileName: true, | ||
| size: false, | ||
| uploadedAt: true, | ||
| uploadedBy: true, | ||
| }" | ||
| /> | ||
|
|
||
| <!-- eslint-disable --> | ||
| <SshPre language="html-vue"> | ||
| <template> | ||
| <FileCard | ||
| :action-buttons-visibility="{ | ||
| archive: false, | ||
| delete: true, | ||
| download: true, | ||
| share: false, | ||
| view: true, | ||
| }" | ||
| :file="file" | ||
| :visibility-detail="{ | ||
| actions: true, | ||
| description: false, | ||
| downloadCount: true, | ||
| lastDownloadedAt: false, | ||
| originalFileName: true, | ||
| size: false, | ||
| uploadedAt: true, | ||
| uploadedBy: true, | ||
| }" | ||
| /> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { FileCard } from "@dzangolab/vue3-ui"; | ||
|
|
||
| import type { IFile } from "@dzangolab/vue3-ui"; | ||
|
|
||
| const file = { | ||
| ... | ||
| } as IFile; | ||
| </SshPre> | ||
| <!-- eslint-enable --> | ||
| </div> | ||
| </section> | ||
| </UiPage> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { FileCard } from "@dzangolab/vue3-ui"; | ||
| import UiPage from "../UiPage.vue"; | ||
| import type { FileMessages, IFile } from "@dzangolab/vue3-ui"; | ||
| const archiveButtonProperties = { | ||
| severity: "warning", | ||
| size: "medium", | ||
| variant: "outlined", | ||
| }; | ||
| const deleteButtonProperties = { | ||
| severity: "danger", | ||
| size: "medium", | ||
| variant: "outlined", | ||
| }; | ||
| const downloadButtonProperties = { | ||
| severity: "primary", | ||
| size: "medium", | ||
| variant: "outlined", | ||
| }; | ||
| const file = { | ||
| description: "This is a file", | ||
| downloadCount: 0, | ||
| id: 1, | ||
| lastDownloadedAt: Date.now(), | ||
| originalFileName: "file.png", | ||
| size: 4, | ||
| uploadedBy: { givenName: "Test", lastName: "user" }, | ||
| uploadedAt: Date.now(), | ||
| } as IFile; | ||
| const messages = { | ||
| archiveAction: "Archive file", | ||
| archiveConfirmationHeader: "Confirm archive?", | ||
| archiveConfirmationMessage: "Are you sure to archive this file?", | ||
| deleteAction: "Delete file", | ||
| deleteConfirmationHeader: "Confirm delete?", | ||
| deleteConfirmationMessage: "Are you sure to delete this file?", | ||
| downloadAction: "Download file", | ||
| downloadCountHeader: "Download count:", | ||
| lastDownloadedAtHeader: "Last downloaded date:", | ||
| shareAction: "Share file", | ||
| uploadedAtHeader: "Uploaded date:", | ||
| uploadedByHeader: "Uploaded by:", | ||
| viewAction: "View file", | ||
| } as FileMessages; | ||
| const shareButtonProperties = { | ||
| severity: "alternate", | ||
| size: "medium", | ||
| variant: "outlined", | ||
| }; | ||
| const viewButtonProperties = { | ||
| severity: "secondary", | ||
| size: "medium", | ||
| variant: "outlined", | ||
| }; | ||
| </script> |
Oops, something went wrong.