feat: add custom message demo for file card

dzangolab · Jan 15, 2025 · 18bd2c7 · 18bd2c7
1 parent a440e18
commit 18bd2c7
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 12 deletions.
diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json
@@ -166,7 +166,11 @@
   },
   "file": "File",
   "fileCard": {
-    "title": "File card"
+    "title": "File card",
+    "usage": {
+      "basic": "Basic",
+      "messages": "Custom messages"
+    }
   },
   "getStarted": "Get started",
   "gridContainer": {

diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json
@@ -166,7 +166,11 @@
   },
   "file": "File",
   "fileCard": {
-    "title": "File card"
+    "title": "File card",
+    "usage": {
+      "basic": "Basic",
+      "messages": "Custom messages"
+    }
   },
   "getStarted": "Get started",
   "gridContainer": {

diff --git a/apps/demo/src/views/UI/fileCard/Index.vue b/apps/demo/src/views/UI/fileCard/Index.vue
@@ -1,13 +1,13 @@
 <template>
-  <UiPage :title="$t('ui.gridContainer.title')" class="demo">
+  <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.gridContainer.usage.basic") }}</h2>
+      <h2>{{ $t("ui.fileCard.usage.basic") }}</h2>
 
       <div class="section-content">
         <FileCard :file="file" />
@@ -38,6 +38,48 @@
         <!-- 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">
+          &lt;template&gt;
+            &lt;FileCard :file="file" :messages="messages" /&gt;
+          &lt;/template&gt;
+
+          &lt;script setup lang="ts"&gt;
+          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",
+            downloadAction: "Download file",
+            deleteConfirmationHeader: "Confirm delete?",
+            deleteConfirmationMessage: "Are you sure to delete this file?",
+            downloadCountHeader: "Download count:",
+            lastDownloadedAtHeader: "Last downloaded date:",
+            uploadedByHeader: "Uploaded by:",
+            uploadedAtHeader: "Uploaded date:",
+            shareAction: "Share file",
+            viewAction: "View file",
+          } as FileMessages;
+          &lt;/script&gt;
+        </SshPre>
+        <!-- eslint-enable -->
+      </div>
+    </section>
   </UiPage>
 </template>
 
@@ -46,7 +88,7 @@ import { FileCard } from "@dzangolab/vue3-ui";
 
 import UiPage from "../UiPage.vue";
 
-import type { IFile } from "@dzangolab/vue3-ui";
+import type { FileMessages, IFile } from "@dzangolab/vue3-ui";
 
 const file = {
   id: 1,
@@ -58,4 +100,20 @@ const file = {
   downloadCount: 0,
   lastDownloadedAt: Date.now(),
 } as IFile;
+
+const messages = {
+  archiveAction: "Archive file",
+  archiveConfirmationHeader: "Confirm archive?",
+  archiveConfirmationMessage: "Are you sure to archive this file?",
+  deleteAction: "Delete file",
+  downloadAction: "Download file",
+  deleteConfirmationHeader: "Confirm delete?",
+  deleteConfirmationMessage: "Are you sure to delete this file?",
+  downloadCountHeader: "Download count:",
+  lastDownloadedAtHeader: "Last downloaded date:",
+  uploadedByHeader: "Uploaded by:",
+  uploadedAtHeader: "Uploaded date:",
+  shareAction: "Share file",
+  viewAction: "View file",
+} as FileMessages;
 </script>
diff --git a/packages/vue-ui/src/FileCard/ConfirmationFileActions.vue b/packages/vue-ui/src/FileCard/ConfirmationFileActions.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="confirmation-file-actions">
     <ConfirmationModal
       v-if="showArchiveConfirmation"
       @on:close="$emit('on:closeArchive')"

diff --git a/packages/vue-ui/src/FileCard/Index.vue b/packages/vue-ui/src/FileCard/Index.vue
@@ -112,7 +112,7 @@
       <ButtonElement
         v-if="actionButtonsVisibility.archive"
         v-bind="archiveButtonProps"
-        label="Archive"
+        :label="messages?.archiveAction || 'Archive'"
         size="small"
         @click="showArchiveConfirmation = true"
       >
@@ -135,7 +135,7 @@
       <ButtonElement
         v-if="actionButtonsVisibility.delete"
         v-bind="deleteButtonProps"
-        label="Delete"
+        :label="messages?.deleteAction || 'Delete'"
         size="small"
         @click="showDeleteConfirmation = true"
       >
@@ -158,7 +158,7 @@
       <ButtonElement
         v-if="actionButtonsVisibility.download"
         v-bind="downloadButtonProps"
-        label="Download"
+        :label="messages?.downloadAction || 'Download'"
         size="small"
         @click="emitAction('download')"
       >
@@ -182,7 +182,7 @@
       <ButtonElement
         v-if="actionButtonsVisibility.share"
         v-bind="shareButtonProps"
-        label="Share"
+        :label="messages?.shareAction || 'Share'"
         size="small"
         @click="emitAction('share')"
       >
@@ -204,7 +204,7 @@
       <ButtonElement
         v-if="actionButtonsVisibility.view"
         v-bind="viewButtonProps"
-        label="View"
+        :label="messages?.viewAction || 'View'"
         size="small"
         @click="emitAction('view')"
       >
@@ -233,6 +233,10 @@
       </ButtonElement>
 
       <ConfirmationFileActions
+        :archive-confirmation-header="messages?.archiveConfirmationHeader"
+        :archive-confirmation-message="messages?.archiveConfirmationMessage"
+        :delete-confirmation-header="messages?.deleteConfirmationHeader"
+        :delete-confirmation-message="messages?.deleteConfirmationMessage"
         :show-archive-confirmation="showArchiveConfirmation"
         :show-delete-confirmation="showDeleteConfirmation"
         @on:close-archive="showArchiveConfirmation = false"

diff --git a/packages/vue-ui/src/index.ts b/packages/vue-ui/src/index.ts
@@ -70,4 +70,4 @@ export {
   YoutubeFacade,
 };
 
-export type { Error, IFile } from "./types";
+export type { Error, FileMessages, IFile } from "./types";