From 15db7bb0128536f42c991f900f7f00c16c727fc6 Mon Sep 17 00:00:00 2001 From: moshiur01 Date: Wed, 18 Dec 2024 13:14:59 +0600 Subject: [PATCH 01/28] Updated: Nuxt instalation process. --- .../introduction/IntroductionForNuxt.vue | 33 +++++++++++++++++-- .../introduction/introductionCode.ts | 21 ++++++++++-- 2 files changed, 49 insertions(+), 5 deletions(-) diff --git a/components/content/docs/getting-started/introduction/IntroductionForNuxt.vue b/components/content/docs/getting-started/introduction/IntroductionForNuxt.vue index 5c00ebf7..a2cd1747 100644 --- a/components/content/docs/getting-started/introduction/IntroductionForNuxt.vue +++ b/components/content/docs/getting-started/introduction/IntroductionForNuxt.vue @@ -4,6 +4,8 @@ import { addTwCssForNuxt, ImportKeepNuxt, installKeepVueForNuxt, + installNuxtColorMode, + nuxtColorModeModuleAdd, NuxtInstall, phIconNuxt, twConfigForNuxt, @@ -57,8 +59,10 @@ import {

The Phosphor icon library is optional. If you prefer not to use - Phosphor icons, feel free to install any other icon library of your - choice. + Phosphor icons, you can install any other icon library of your choice. + For example, we have used the @phosphor-icons/vue package. If you + decide to use this library, you must follow the Nuxt convention for + Phosphor icons.

@@ -66,6 +70,31 @@ import { + + + +

+ Step 4 +

+

+ Install Nuxt color mode to switch dark and light mode. +

+ +
+ +
+
+

+ Then, add @nuxtjs/color-mode to the modules section of your + nuxt.config.ts +

+ +
+ + + diff --git a/components/content/docs/getting-started/introduction/introductionCode.ts b/components/content/docs/getting-started/introduction/introductionCode.ts index ff74864f..f9d9246a 100644 --- a/components/content/docs/getting-started/introduction/introductionCode.ts +++ b/components/content/docs/getting-started/introduction/introductionCode.ts @@ -78,6 +78,19 @@ const installKeepVueForNuxt = { pnpm: "pnpm add keep-vue\npnpm add -D nuxt-phosphor-icons", }; +const installNuxtColorMode = { + npx: `npx nuxi module add color-mode`, +}; + +const nuxtColorModeModuleAdd = { + " nuxt.config.ts": ` export default defineNuxtConfig({ + //rest modules + modules: [ + '@nuxtjs/color-mode' + ] +})`, +}; + const phIconNuxt = { "nuxt.config.ts": `export default defineNuxtConfig({ modules: [ //rest module... @@ -140,13 +153,15 @@ const ImportKeepNuxt = { `, }; export { - ImportKeepNuxt, - ImportKeepVue, - NuxtInstall, addTwCssForNuxt, addTwCssForVue, + ImportKeepNuxt, + ImportKeepVue, installKeepVue, installKeepVueForNuxt, + installNuxtColorMode, + nuxtColorModeModuleAdd, + NuxtInstall, phIconNuxt, twConfigForNuxt, twConfigForVue, From c11aff91c9487131a63faef96602bb1f7ce63763 Mon Sep 17 00:00:00 2001 From: moshiur01 Date: Wed, 18 Dec 2024 13:23:34 +0600 Subject: [PATCH 02/28] Remvoed: Chart js and vue-chartjs package removed form the package dev dependency. --- package.json | 2 -- yarn.lock | 17 ----------------- 2 files changed, 19 deletions(-) diff --git a/package.json b/package.json index 5c8cef57..032a5d9c 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,6 @@ "dependencies": { "@vueuse/core": "^11.0.1", "@vueuse/motion": "^2.2.6", - "chart.js": "^4.4.3", "clsx": "^2.1.1", "deepmerge": "^4.3.1", "embla-carousel-vue": "^8.2.1", @@ -25,7 +24,6 @@ "tailwindcss-animate": "^1.0.7", "vaul-vue": "^0.2.0", "vue": "^3.4.21", - "vue-chartjs": "^5.3.1", "vue-sonner": "^1.1.5", "vue3-dropzone": "^2.2.1" }, diff --git a/yarn.lock b/yarn.lock index 62cfd236..9283881f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -827,11 +827,6 @@ resolved "https://registry.npmjs.org/@jsdevtools/ono/-/ono-7.1.3.tgz" integrity sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg== -"@kurkle/color@^0.3.0": - version "0.3.2" - resolved "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz" - integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw== - "@kwsites/file-exists@^1.1.1": version "1.1.1" resolved "https://registry.npmjs.org/@kwsites/file-exists/-/file-exists-1.1.1.tgz" @@ -3242,13 +3237,6 @@ character-reference-invalid@^2.0.0: resolved "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz" integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw== -chart.js@^4.4.3: - version "4.4.3" - resolved "https://registry.npmjs.org/chart.js/-/chart.js-4.4.3.tgz" - integrity sha512-qK1gkGSRYcJzqrrzdR6a+I0vQ4/R+SoODXyAjscQ/4mzuNzySaMCd+hyVxitSY1+L2fjPD1Gbn+ibNqRmwQeLw== - dependencies: - "@kurkle/color" "^0.3.0" - chokidar@^3.5.1, chokidar@^3.5.3, chokidar@^3.6.0: version "3.6.0" resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz" @@ -9417,11 +9405,6 @@ vue-bundle-renderer@^2.1.0: dependencies: ufo "^1.5.3" -vue-chartjs@^5.3.1: - version "5.3.1" - resolved "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.1.tgz" - integrity sha512-rZjqcHBxKiHrBl0CIvcOlVEBwRhpWAVf6rDU3vUfa7HuSRmGtCslc0Oc8m16oAVuk0erzc1FCtH1VCriHsrz+A== - vue-demi@>=0.13.0, vue-demi@>=0.14.10, vue-demi@>=0.14.8: version "0.14.10" resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz" From 75abce2b6563c90b55fca44da7d433187061aa8f Mon Sep 17 00:00:00 2001 From: moshiur01 Date: Wed, 18 Dec 2024 13:29:12 +0600 Subject: [PATCH 03/28] Updated: Tooltip Api documentation. --- .../content/docs/components/tooltip/TooltipApi.vue | 2 +- .../docs/components/tooltip/TooltipContentApi.vue | 8 ++++++++ .../content/docs/components/tooltip/tooltipApiData.ts | 7 ------- .../content/docs/components/tooltip/tooltipContentApi.ts | 9 +++++++++ content/docs/components/tooltip.md | 7 ++++++- 5 files changed, 24 insertions(+), 9 deletions(-) create mode 100644 components/content/docs/components/tooltip/TooltipContentApi.vue create mode 100644 components/content/docs/components/tooltip/tooltipContentApi.ts diff --git a/components/content/docs/components/tooltip/TooltipApi.vue b/components/content/docs/components/tooltip/TooltipApi.vue index f1e0967d..4f3c51a3 100644 --- a/components/content/docs/components/tooltip/TooltipApi.vue +++ b/components/content/docs/components/tooltip/TooltipApi.vue @@ -4,5 +4,5 @@ import { tooltipApiData } from "./tooltipApiData"; diff --git a/components/content/docs/components/tooltip/TooltipContentApi.vue b/components/content/docs/components/tooltip/TooltipContentApi.vue new file mode 100644 index 00000000..4ab7f588 --- /dev/null +++ b/components/content/docs/components/tooltip/TooltipContentApi.vue @@ -0,0 +1,8 @@ + + + diff --git a/components/content/docs/components/tooltip/tooltipApiData.ts b/components/content/docs/components/tooltip/tooltipApiData.ts index f88d841f..fd9e97f7 100644 --- a/components/content/docs/components/tooltip/tooltipApiData.ts +++ b/components/content/docs/components/tooltip/tooltipApiData.ts @@ -1,11 +1,4 @@ export const tooltipApiData = [ - { - id: 1, - propsName: "side", - propsType: ["top", "bottom", "right", "left"], - propsDescription: "Placement of the tooltip.", - default: "top", - }, { id: 2, propsName: "color", diff --git a/components/content/docs/components/tooltip/tooltipContentApi.ts b/components/content/docs/components/tooltip/tooltipContentApi.ts new file mode 100644 index 00000000..aba9ef39 --- /dev/null +++ b/components/content/docs/components/tooltip/tooltipContentApi.ts @@ -0,0 +1,9 @@ +export const tooltipContentApi = [ + { + id: 1, + propsName: "side", + propsType: ["top", "bottom", "right", "left"], + propsDescription: "Placement of the tooltip.", + default: "top", + }, +]; diff --git a/content/docs/components/tooltip.md b/content/docs/components/tooltip.md index e1ad7024..e82d3e60 100644 --- a/content/docs/components/tooltip.md +++ b/content/docs/components/tooltip.md @@ -31,13 +31,18 @@ You can define the tooltip color by using the color prop such as `color="primary ::ToolTipColorVariant :: -## API Reference +## Tooltip API Explore the available props for the tooltip component ::TooltipApi :: +## Tooltip Content API + +::TooltipContentApi +:: + ## Reference To learn more about the Tooltip, please see the documentation of [Redix Vue Tooltip](https://www.radix-vue.com/components/tooltip) From 388d1a34a33dd769ab98bab94204ca6a5f6e670d Mon Sep 17 00:00:00 2001 From: moshiur01 Date: Wed, 18 Dec 2024 15:15:40 +0600 Subject: [PATCH 04/28] Updated: TooltipContent Api dir. --- .../docs/components/tooltip/TooltipContentApi.vue | 10 +++++++++- .../docs/components/tooltip/tooltipContentApi.ts | 9 --------- 2 files changed, 9 insertions(+), 10 deletions(-) delete mode 100644 components/content/docs/components/tooltip/tooltipContentApi.ts diff --git a/components/content/docs/components/tooltip/TooltipContentApi.vue b/components/content/docs/components/tooltip/TooltipContentApi.vue index 4ab7f588..a22276d5 100644 --- a/components/content/docs/components/tooltip/TooltipContentApi.vue +++ b/components/content/docs/components/tooltip/TooltipContentApi.vue @@ -1,6 +1,14 @@ @@ -59,12 +63,11 @@ console.log(selected)
- +
From 8331c6c24456872e0f569eb406339aea2e99be5e Mon Sep 17 00:00:00 2001 From: moshiur01 Date: Wed, 18 Dec 2024 18:09:15 +0600 Subject: [PATCH 12/28] Updated: Progress component and example code. --- ...ogress.vue => CustomizeCircleProgress.vue} | 4 +-- .../progress/CustomizeLineProgress.vue | 16 ++++++++++ .../docs/components/progress/progressCode.ts | 30 +++++++++++-------- content/docs/components/progress.md | 9 ++++-- .../Progress/CircleProgressText.vue | 2 +- 5 files changed, 43 insertions(+), 18 deletions(-) rename components/content/docs/components/progress/{CustomizeProgress.vue => CustomizeCircleProgress.vue} (79%) create mode 100644 components/content/docs/components/progress/CustomizeLineProgress.vue diff --git a/components/content/docs/components/progress/CustomizeProgress.vue b/components/content/docs/components/progress/CustomizeCircleProgress.vue similarity index 79% rename from components/content/docs/components/progress/CustomizeProgress.vue rename to components/content/docs/components/progress/CustomizeCircleProgress.vue index 70ea966a..bc474dae 100644 --- a/components/content/docs/components/progress/CustomizeProgress.vue +++ b/components/content/docs/components/progress/CustomizeCircleProgress.vue @@ -1,9 +1,9 @@ `, +}; + +const customizeLineProgress = { + "ProgressComponent.vue": ` +`, + +`, }; const DefaultLineProgressCode = { @@ -58,9 +68,6 @@ import { CircleProgress, CircleProgressLine, CircleProgressText, - LineProgress, - LineProgressBar, - LineProgressText, } from "keep-vue"; @@ -70,16 +77,13 @@ import { - - - -
`, }; export { - CustomizeProgressCode, + CustomizeCircleProgressCode, + customizeLineProgress, DefaultLineProgressCode, DefaultProgressCode, VariantOfProgressCode, diff --git a/content/docs/components/progress.md b/content/docs/components/progress.md index e8515b42..c7d5b1fb 100644 --- a/content/docs/components/progress.md +++ b/content/docs/components/progress.md @@ -19,9 +19,14 @@ Default Progress allows you to visually represent the progress or completion of ::DefaultLineProgress :: -## Customize Progress +## Customize Circle Progress -::CustomizeProgress +::CustomizeCircleProgress +:: + +## Customize Line Progress + +::CustomizeLineProgress :: ## Circle Progress API diff --git a/src/components/Progress/CircleProgressText.vue b/src/components/Progress/CircleProgressText.vue index 90b1482f..ab511ce4 100644 --- a/src/components/Progress/CircleProgressText.vue +++ b/src/components/Progress/CircleProgressText.vue @@ -22,7 +22,7 @@ const { progressBar } = useProgressStore()!; v-bind="restProps" :class=" cn( - 'absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform text-body-3 font-medium text-primary-500', + 'absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform text-body-4 font-medium text-primary-500', props.class, ) "> From 799892b3cdac0191ecbf8d8b85ee11ff4f0b7190 Mon Sep 17 00:00:00 2001 From: moshiur01 Date: Wed, 18 Dec 2024 18:10:56 +0600 Subject: [PATCH 13/28] Updated: Progress component example code. --- .../components/progress/VariantOfProgress.vue | 16 ---------------- .../docs/components/progress/progressCode.ts | 19 ------------------- content/docs/components/progress.md | 5 ----- 3 files changed, 40 deletions(-) delete mode 100644 components/content/docs/components/progress/VariantOfProgress.vue diff --git a/components/content/docs/components/progress/VariantOfProgress.vue b/components/content/docs/components/progress/VariantOfProgress.vue deleted file mode 100644 index 03532cb9..00000000 --- a/components/content/docs/components/progress/VariantOfProgress.vue +++ /dev/null @@ -1,16 +0,0 @@ - - diff --git a/components/content/docs/components/progress/progressCode.ts b/components/content/docs/components/progress/progressCode.ts index b0132758..ee999bb7 100644 --- a/components/content/docs/components/progress/progressCode.ts +++ b/components/content/docs/components/progress/progressCode.ts @@ -62,29 +62,10 @@ import { CircleProgress, CircleProgressLine, CircleProgressText } from "keep-vue `, }; -const VariantOfProgressCode = { - "ProgressComponent.vue": ` - -`, -}; export { CustomizeCircleProgressCode, customizeLineProgress, DefaultLineProgressCode, DefaultProgressCode, - VariantOfProgressCode, }; diff --git a/content/docs/components/progress.md b/content/docs/components/progress.md index c7d5b1fb..44a53688 100644 --- a/content/docs/components/progress.md +++ b/content/docs/components/progress.md @@ -9,11 +9,6 @@ Default Progress allows you to visually represent the progress or completion of ::DefaultProgress :: -## Circle Progress - -::VariantOfProgress -:: - ## Line Progress ::DefaultLineProgress From 2e68a8349bf8b9cda535618c11ffc2b2875d3ca0 Mon Sep 17 00:00:00 2001 From: moshiur01 Date: Wed, 18 Dec 2024 18:15:27 +0600 Subject: [PATCH 14/28] Updated: Popover component example code. --- .../content/docs/components/popover/DefaultPopover.vue | 2 ++ components/content/docs/components/popover/popoverCode.ts | 6 ++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/components/content/docs/components/popover/DefaultPopover.vue b/components/content/docs/components/popover/DefaultPopover.vue index 21761441..18b2f2ee 100644 --- a/components/content/docs/components/popover/DefaultPopover.vue +++ b/components/content/docs/components/popover/DefaultPopover.vue @@ -2,6 +2,7 @@ import CodeHighlightWithPreview from "~/components/content/CodeHighlightWithPreview.vue"; import { Avatar, + AvatarFallback, AvatarImage, Button, Popover, @@ -28,6 +29,7 @@ import { DefaultPopoverCode } from "./popoverCode";
+ KV
diff --git a/components/content/docs/components/popover/popoverCode.ts b/components/content/docs/components/popover/popoverCode.ts index d9b7322a..000b110c 100644 --- a/components/content/docs/components/popover/popoverCode.ts +++ b/components/content/docs/components/popover/popoverCode.ts @@ -21,7 +21,7 @@ import { class="z-20 max-w-[300px] rounded-xl bg-white p-0 dark:bg-metal-900" >
-
- +
@@ -100,6 +100,7 @@ const DefaultPopoverCode = { "PopoverComponent.vue": ` @@ -32,7 +32,7 @@ const handlePageClick = (pageNumber: number) => { 4 - + (1); -const handlePageClick = (pageNumber: number) => { +const activePage = ref(1); +const handlePageClick = (pageNumber) => { activePage.value = pageNumber; }; @@ -70,7 +70,6 @@ const prevPage = () => { activePage.value -= 1; } }; - `, @@ -154,7 +153,7 @@ const prevPage = () => { :disabled="activePage === 1" class="gap-1" @click="prevPage"> - + Previous @@ -179,7 +178,7 @@ const prevPage = () => { 4 - + { class="gap-1" @click="nextPage"> Next - + `, @@ -202,9 +201,9 @@ const PaginationShapeCode = { "PaginationComponent.vue": ` + + diff --git a/content/docs/components/modal.md b/content/docs/components/modal.md index d82c020e..fecfa832 100644 --- a/content/docs/components/modal.md +++ b/content/docs/components/modal.md @@ -15,6 +15,12 @@ You can customize our modal as your desire except the modal functionality. ::CustomizeModal :: +## Api Reference + +A list of common ` `component APIs is provided below. For additional details, please refer to the reference link. +::ModalApi +:: + ## Reference To learn more about the modal, please see the documentation of [Redix Vue Dialog](https://www.radix-vue.com/components/dialog.html#dialog). From ce2f18ad4dfb045ae6185a3ca42c4b01422b7e59 Mon Sep 17 00:00:00 2001 From: moshiur01 Date: Wed, 18 Dec 2024 19:11:52 +0600 Subject: [PATCH 23/28] Updated: Input Component example code. --- components/content/docs/components/input/InputUseCases.vue | 2 +- components/content/docs/components/input/inputCode.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/content/docs/components/input/InputUseCases.vue b/components/content/docs/components/input/InputUseCases.vue index 5a979a78..e633576a 100644 --- a/components/content/docs/components/input/InputUseCases.vue +++ b/components/content/docs/components/input/InputUseCases.vue @@ -14,7 +14,7 @@ const handleSubmit = () => {};
diff --git a/components/content/docs/components/input/inputCode.ts b/components/content/docs/components/input/inputCode.ts index 5cb4e1d0..f4304a95 100644 --- a/components/content/docs/components/input/inputCode.ts +++ b/components/content/docs/components/input/inputCode.ts @@ -40,7 +40,7 @@ const handleSubmit = () => { `, From d8bc7bbd98362f16c974bd3174a41e8e1dd09599 Mon Sep 17 00:00:00 2001 From: moshiur01 Date: Wed, 18 Dec 2024 19:36:42 +0600 Subject: [PATCH 27/28] Updated: Breadcrumb component example code. --- .../components/breadcrumb/breadcrumbCode.ts | 28 +++++++++++-------- 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/components/content/docs/components/breadcrumb/breadcrumbCode.ts b/components/content/docs/components/breadcrumb/breadcrumbCode.ts index 02053de3..d53b9be0 100644 --- a/components/content/docs/components/breadcrumb/breadcrumbCode.ts +++ b/components/content/docs/components/breadcrumb/breadcrumbCode.ts @@ -1,5 +1,6 @@ const defaultBreadcrumbCode = { "BreadcrumbComponent.vue": `