Categorize components in sidebar menu in demo page and localise list (#…

…445) * refactor: categorize ui page components * refactor: localize ui page component list
dzangolab · Jan 8, 2025 · bcb6b99 · bcb6b99
1 parent 3046d77
commit bcb6b99
Show file tree

Hide file tree

Showing 12 changed files with 254 additions and 138 deletions.
diff --git a/apps/demo/src/assets/css/demoPage.css b/apps/demo/src/assets/css/demoPage.css
@@ -18,14 +18,16 @@
   --_color: #4e4e4e;
   --_position: relative;
   --_width: 100%;
+
+  padding-right: 2rem;
 }
 
 .demo-aside .link.active,
 .demo-aside .link:hover {
-  --_bg-color: transparent;
-  --_hover-bg-color: transparent;
+  --_bg-color: rgba(45, 45, 45, .125);
+  --_hover-bg-color: rgba(45, 45, 45, .125);
 
-  text-decoration: underline;
+  border-radius: 0.312rem;
 }
 
 .demo-aside .nav-menu-item > .link {

diff --git a/apps/demo/src/assets/css/overrides.css b/apps/demo/src/assets/css/overrides.css
@@ -1,3 +1,7 @@
+#app > .layout {
+  height: 100dvh;
+}
+
 .layout.basic {
   --layout-basic-max-width: 100%;
 }
@@ -6,6 +10,10 @@
   opacity: 0.95;
 }
 
+.layout > main {
+  overflow-y: auto;
+}
+
 section:has(h3) {
   margin-bottom: 1em;
 }

diff --git a/apps/demo/src/locales/en/form.json b/apps/demo/src/locales/en/form.json
@@ -64,6 +64,7 @@
     "dateOfBirth": "Date of birth",
     "datePicker": "Date picker",
     "dateRange": "Date range",
+    "dateTime": "Date and time",
     "dateTimePicker": "Datetime picker",
     "daysInput": "Days input",
     "debouncedTypeahead": "With debounce time prop",
@@ -77,6 +78,7 @@
     "female": "Female",
     "gender": "Gender",
     "generalQuestions": "General questions",
+    "getStarted": "Get started",
     "iconSlot": "Icon slot",
     "input": "Input",
     "inputWithType": "With type prop",
@@ -85,6 +87,7 @@
     "joinedDate": "Joined date",
     "labelInput": "With label",
     "male": "Male",
+    "misc": "Misc",
     "month": "Month",
     "monthAndYear": "Month and year",
     "monthAndYearPicker": "Month and year picker",
@@ -103,6 +106,7 @@
     "reportDate": "Report date",
     "size": "Size",
     "select": "Select",
+    "selection": "Selection",
     "solutions": "Solutions",
     "submit": "Submit",
     "summary": "Summary",

diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json
@@ -91,6 +91,7 @@
       "withI18n": "With i18n"
     }
   },
+  "buttons": "Buttons",
   "card": {
     "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
     "headerContent": "Lorem ipsum",
@@ -163,6 +164,7 @@
       "withSlot": "With slot"
     }
   },
+  "getStarted": "Get started",
   "gridContainer": {
     "usage": {
       "basic": "Basic"
@@ -178,6 +180,8 @@
       "basic": "Basic"
     }
   },
+  "misc": "Misc",
+  "menu": "Menu",
   "message": {
     "contents": {
       "content1": "Season sale: Up to 50% off selected items!",
@@ -197,6 +201,7 @@
       "withI18n": "With i18n"
     }
   },
+  "messages": "Messages",
   "modal": {
     "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
     "header": {
@@ -218,6 +223,8 @@
       "withI18n": "With i18n"
     }
   },
+  "overlay": "Overlay",
+  "panel": "Panel",
   "popup": {
     "content": "This is a popup",
     "label": {

diff --git a/apps/demo/src/locales/fr/form.json b/apps/demo/src/locales/fr/form.json
@@ -61,6 +61,7 @@
     "dateOfBirth": "Date of birth[fr]",
     "datePicker": "Date picker[fr]",
     "dateRange": "Date range[fr]",
+    "dateTime": "Date and time",
     "dateTimePicker": "Datetime picker[fr]",
     "daysInput": "Days input",
     "debouncedTypeahead": "With debounce time prop",
@@ -74,6 +75,7 @@
     "female": "Female",
     "gender": "Gender",
     "generalQuestions": "General questions",
+    "getStarted": "Get started",
     "iconSlot": "Icon slot",
     "input": "Input[fr]",
     "inputWithType": "With type prop[fr]",
@@ -82,6 +84,7 @@
     "joinedDate": "Joined date[fr]",
     "labelInput": "With label[fr]",
     "male": "Male",
+    "misc": "Misc",
     "month": "Month[fr]",
     "monthAndYear": "Month and year[fr]",
     "monthAndYearPicker": "Month and year picker[fr]",
@@ -100,6 +103,7 @@
     "reportDate": "Report date[fr]",
     "size": "Size",
     "select": "Select[fr]",
+    "selection": "Selection",
     "solutions": "Solutions",
     "submit": "Submit",
     "summary": "Summary",

diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json
@@ -91,6 +91,7 @@
       "withI18n": "With i18n"
     }
   },
+  "buttons": "Buttons",
   "card": {
     "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
     "headerContent": "Lorem ipsum",
@@ -163,6 +164,7 @@
       "withSlot": "With slot"
     }
   },
+  "getStarted": "Get started",
   "gridContainer": {
     "usage": {
       "basic": "Basic"
@@ -178,6 +180,8 @@
       "basic": "Basic"
     }
   },
+  "misc": "Misc",
+  "menu": "Menu",
   "message": {
     "contents": {
       "content1": "Season sale: Up to 50% off selected items!",
@@ -197,6 +201,7 @@
       "withI18n": "With i18n"
     }
   },
+  "messages": "Messages",
   "modal": {
     "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
     "header": {
@@ -218,6 +223,8 @@
       "withI18n": "With i18n"
     }
   },
+  "overlay": "Overlay",
+  "panel": "Panel",
   "popup": {
     "content": "This is a popup",
     "label": {

diff --git a/apps/demo/src/views/Form/FormPage.vue b/apps/demo/src/views/Form/FormPage.vue
@@ -19,6 +19,7 @@ export default {
 </script>
 
 <script setup lang="ts">
+import { useI18n } from "@dzangolab/vue3-i18n";
 import { Sidebar } from "@dzangolab/vue3-layout";
 
 import type { PropType } from "vue";
@@ -36,66 +37,88 @@ defineProps({
   },
 });
 
+const { t } = useI18n();
+
 const menu = [
   {
-    name: "Get started",
+    name: t("form.label.getStarted"),
     routeName: "",
   },
   {
-    name: "Checkbox input",
-    routeName: "checkboxInput",
-  },
-  {
-    name: "Date picker",
-    routeName: "datePicker",
-  },
-  {
-    name: "Days input",
-    routeName: "daysInput",
-  },
-  {
-    name: "Editable content",
-    routeName: "editableContent",
-  },
-  {
-    name: "Email",
-    routeName: "emailInput",
-  },
-  {
-    name: "Input",
-    routeName: "input",
-  },
-  {
-    name: "Number",
-    routeName: "numberInput",
-  },
-  {
-    name: "Radio input",
-    routeName: "radioInput",
-  },
-  {
-    name: "Password",
-    routeName: "passwordInput",
-  },
-  {
-    name: "Select",
-    routeName: "selectInput",
-  },
-  {
-    name: "Switch",
-    routeName: "switchInput",
+    name: t("form.label.dateTime"),
+    children: [
+      {
+        name: t("form.label.datePicker"),
+        routeName: "datePicker",
+      },
+      {
+        name: t("form.label.daysInput"),
+        routeName: "daysInput",
+      },
+    ],
   },
   {
-    name: "Textarea",
-    routeName: "textareaInput",
+    name: t("form.label.input"),
+    children: [
+      {
+        name: t("form.label.email"),
+        routeName: "emailInput",
+      },
+      {
+        name: t("form.label.input"),
+        routeName: "input",
+      },
+      {
+        name: t("form.label.number"),
+        routeName: "numberInput",
+      },
+      {
+        name: t("form.label.password"),
+        routeName: "passwordInput",
+      },
+      {
+        name: t("form.label.textInput"),
+        routeName: "textInput",
+      },
+      {
+        name: t("form.label.textarea"),
+        routeName: "textareaInput",
+      },
+    ],
   },
   {
-    name: "Text",
-    routeName: "textInput",
+    name: t("form.label.selection"),
+    children: [
+      {
+        name: t("form.label.checkbox"),
+        routeName: "checkboxInput",
+      },
+      {
+        name: t("form.label.radio"),
+        routeName: "radioInput",
+      },
+      {
+        name: t("form.label.select"),
+        routeName: "selectInput",
+      },
+      {
+        name: t("form.label.switch"),
+        routeName: "switchInput",
+      },
+    ],
   },
   {
-    name: "Typeahead",
-    routeName: "typeahead",
+    name: t("form.label.misc"),
+    children: [
+      {
+        name: t("form.label.editableContent"),
+        routeName: "editableContent",
+      },
+      {
+        name: t("form.label.typeahead"),
+        routeName: "typeahead",
+      },
+    ],
   },
 ];
 </script>