From e6b7a0dece6882a2a87fbe5fb1d7a60e29afecc2 Mon Sep 17 00:00:00 2001 From: Anwarul Islam Date: Mon, 4 Mar 2024 11:20:18 +0600 Subject: [PATCH 01/36] feat: vue soner added --- package.json | 5 +++-- pnpm-lock.yaml | 7 +++++++ src/stories/Toast.story.vue | 14 ++++++++++++++ 3 files changed, 24 insertions(+), 2 deletions(-) create mode 100644 src/stories/Toast.story.vue diff --git a/package.json b/package.json index 1e572fb..c5266d9 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "hoppscotch api" ], "scripts": { - "dev": "histoire dev", + "dev": "histoire dev --port 6006", "watch": "vite build --watch", "build": "vite build", "story:build": "histoire build", @@ -40,6 +40,7 @@ "lodash-es": "^4.17.21", "path": "^0.12.7", "vite-plugin-eslint": "^1.8.1", + "vue-sonner": "^1.1.1", "vuedraggable-es": "^4.1.1" }, "devDependencies": { @@ -71,8 +72,8 @@ "sass": "^1.53.0", "tailwindcss": "^3.3.2", "typescript": "^4.5.4", - "unplugin-icons": "^0.16.1", "unplugin-fonts": "^1.0.3", + "unplugin-icons": "^0.16.1", "unplugin-vue-components": "^0.21.0", "vite": "^3.2.3", "vite-plugin-checker": "^0.5.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index af73642..122de0b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ dependencies: vite-plugin-eslint: specifier: ^1.8.1 version: 1.8.1(eslint@8.53.0)(vite@3.2.7) + vue-sonner: + specifier: ^1.1.1 + version: 1.1.1 vuedraggable-es: specifier: ^4.1.1 version: 4.1.1(vue@3.3.8) @@ -7320,6 +7323,10 @@ packages: vue: 3.3.8(typescript@4.9.5) dev: true + /vue-sonner@1.1.1: + resolution: {integrity: sha512-TYuqPLNACSU5QG2EuN59Ho/uQylezKxpiZ3TOa1jP9WpyWLSb3lMH9LU/jmJY4hOvXsvOFtl3Q1QUaJ0yA+FSQ==} + dev: false + /vue-template-compiler@2.7.15: resolution: {integrity: sha512-yQxjxMptBL7UAog00O8sANud99C6wJF+7kgbcwqkvA38vCGF7HWE66w0ZFnS/kX5gSoJr/PQ4/oS3Ne2pW37Og==} dependencies: diff --git a/src/stories/Toast.story.vue b/src/stories/Toast.story.vue new file mode 100644 index 0000000..a1b3727 --- /dev/null +++ b/src/stories/Toast.story.vue @@ -0,0 +1,14 @@ + + + From 2fca127ca322cad010f7fecd145914d11b5f6ccc Mon Sep 17 00:00:00 2001 From: Anwarul Islam Date: Tue, 5 Mar 2024 18:06:34 +0600 Subject: [PATCH 02/36] feat: wrapper function added for soner --- src/helpers/toast.ts | 13 +++++++++++++ src/stories/Toast.story.vue | 3 ++- 2 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 src/helpers/toast.ts diff --git a/src/helpers/toast.ts b/src/helpers/toast.ts new file mode 100644 index 0000000..998dd22 --- /dev/null +++ b/src/helpers/toast.ts @@ -0,0 +1,13 @@ +import { toast as soner } from "vue-sonner" + +type ToastOptions = { + type: "success" | "error" | "warning" | "info" + duration: number +} + +export const toast = (message: string, option?: ToastOptions) => { + console.log("toast") + soner(message, { + ...option, + }) +} diff --git a/src/stories/Toast.story.vue b/src/stories/Toast.story.vue index a1b3727..14e7cb0 100644 --- a/src/stories/Toast.story.vue +++ b/src/stories/Toast.story.vue @@ -6,7 +6,8 @@ + + \ No newline at end of file diff --git a/src/components/index.ts b/src/components/index.ts index d9f6e96..34797d6 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,2 +1,3 @@ export * from "./button" export * from "./smart" +export * from "./modal" \ No newline at end of file diff --git a/src/components/modal/index.ts b/src/components/modal/index.ts new file mode 100644 index 0000000..043cbbc --- /dev/null +++ b/src/components/modal/index.ts @@ -0,0 +1 @@ +export { default as HoppModal } from "./index.vue" \ No newline at end of file diff --git a/src/components/modal/index.vue b/src/components/modal/index.vue new file mode 100644 index 0000000..5d01390 --- /dev/null +++ b/src/components/modal/index.vue @@ -0,0 +1,31 @@ + + + \ No newline at end of file diff --git a/src/stories/NewModal.story.vue b/src/stories/NewModal.story.vue new file mode 100644 index 0000000..c1fb08c --- /dev/null +++ b/src/stories/NewModal.story.vue @@ -0,0 +1,18 @@ + + + \ No newline at end of file From 9bca7b662e5f8a00cb5590b73aa39d3fff192a56 Mon Sep 17 00:00:00 2001 From: Anwarul Islam Date: Tue, 19 Mar 2024 17:55:13 +0600 Subject: [PATCH 04/36] feat: simple and input modal story added --- src/components/modal/InputDialog.vue | 41 ++++++++++++++++++++++++++++ src/components/modal/index.ts | 3 +- src/components/modal/index.vue | 21 ++++++++++++-- src/stories/Modal.story.vue | 9 ++++-- src/stories/NewModal.story.vue | 34 +++++++++++++++++++---- 5 files changed, 98 insertions(+), 10 deletions(-) create mode 100644 src/components/modal/InputDialog.vue diff --git a/src/components/modal/InputDialog.vue b/src/components/modal/InputDialog.vue new file mode 100644 index 0000000..fc04d6e --- /dev/null +++ b/src/components/modal/InputDialog.vue @@ -0,0 +1,41 @@ + + + + diff --git a/src/components/modal/index.ts b/src/components/modal/index.ts index 043cbbc..44c6785 100644 --- a/src/components/modal/index.ts +++ b/src/components/modal/index.ts @@ -1 +1,2 @@ -export { default as HoppModal } from "./index.vue" \ No newline at end of file +export { default as HoppModal } from "./index.vue" +export { default as InputDialog } from "./InputDialog.vue" diff --git a/src/components/modal/index.vue b/src/components/modal/index.vue index 5d01390..e97a5de 100644 --- a/src/components/modal/index.vue +++ b/src/components/modal/index.vue @@ -3,7 +3,17 @@

Simple Dialog

@@ -28,4 +38,11 @@ const dialog = ref() onMounted(() => { dialog.value?.showModal() }) - \ No newline at end of file + + + diff --git a/src/stories/Modal.story.vue b/src/stories/Modal.story.vue index 34e50fc..06ae509 100644 --- a/src/stories/Modal.story.vue +++ b/src/stories/Modal.story.vue @@ -1,6 +1,11 @@ diff --git a/src/stories/NewModal.story.vue b/src/stories/NewModal.story.vue index c1fb08c..ba66c97 100644 --- a/src/stories/NewModal.story.vue +++ b/src/stories/NewModal.story.vue @@ -1,18 +1,42 @@ \ No newline at end of file + +const text = ref("") + +async function openInputDialog() { + try { + const result = await openModal(InputDialog) + text.value = result.text + } catch (e) { + // The error value will be the same value as emitted through the `modal-reject` event + console.log("Modal Rejected:", e) + } +} + From 2bdf26afe4894f62f935d172356374e1e7e4157c Mon Sep 17 00:00:00 2001 From: Anwarul Islam Date: Mon, 8 Apr 2024 11:34:21 +0600 Subject: [PATCH 05/36] feat: legacy toast support --- src/helpers/toast.ts | 21 +++++++++++++++++++-- src/stories/Toast.story.vue | 11 ++++++++++- 2 files changed, 29 insertions(+), 3 deletions(-) diff --git a/src/helpers/toast.ts b/src/helpers/toast.ts index 998dd22..9ef1a76 100644 --- a/src/helpers/toast.ts +++ b/src/helpers/toast.ts @@ -1,13 +1,30 @@ import { toast as soner } from "vue-sonner" -type ToastOptions = { +export type ToastOptions = { type: "success" | "error" | "warning" | "info" duration: number } export const toast = (message: string, option?: ToastOptions) => { - console.log("toast") soner(message, { ...option, }) } + +toast.success = (message: string, option?: ToastOptions) => { + soner.success(message, { + ...option, + }) +} + +toast.error = (message: string, option?: ToastOptions) => { + soner.error(message, { + ...option, + }) +} + +toast.warning = (message: string, option?: ToastOptions) => { + soner.warning(message, { + ...option, + }) +} diff --git a/src/stories/Toast.story.vue b/src/stories/Toast.story.vue index 14e7cb0..c3aa32d 100644 --- a/src/stories/Toast.story.vue +++ b/src/stories/Toast.story.vue @@ -1,7 +1,12 @@ @@ -12,4 +17,8 @@ import { toast } from "./../helpers/toast" const openToast = () => { toast("Basic toast") } + +const launchLegacyToast = () => { + toast.success("Simple Legacy toast") +} From 446211edaafe13474be1c32aaa3e810141d1366b Mon Sep 17 00:00:00 2001 From: Anwarul Islam Date: Mon, 15 Apr 2024 12:10:01 +0600 Subject: [PATCH 06/36] chore: rich colors for toast --- src/helpers/index.ts | 2 ++ src/helpers/toast.ts | 8 ++++++-- src/stories/Toast.story.vue | 26 +++++++++++++++++++++++--- 3 files changed, 31 insertions(+), 5 deletions(-) diff --git a/src/helpers/index.ts b/src/helpers/index.ts index 501de68..c0037f1 100644 --- a/src/helpers/index.ts +++ b/src/helpers/index.ts @@ -1 +1,3 @@ export * from "./treeAdapter" +export * from "./toast" +export { default as HoppToast } from "vue-sonner" diff --git a/src/helpers/toast.ts b/src/helpers/toast.ts index 9ef1a76..9bdb1d4 100644 --- a/src/helpers/toast.ts +++ b/src/helpers/toast.ts @@ -1,8 +1,8 @@ import { toast as soner } from "vue-sonner" export type ToastOptions = { - type: "success" | "error" | "warning" | "info" - duration: number + type?: "success" | "error" | "warning" | "info" + duration?: number } export const toast = (message: string, option?: ToastOptions) => { @@ -11,6 +11,10 @@ export const toast = (message: string, option?: ToastOptions) => { }) } +/* + * Legacy support for toast.success, toast.error, and toast.warning + */ + toast.success = (message: string, option?: ToastOptions) => { soner.success(message, { ...option, diff --git a/src/stories/Toast.story.vue b/src/stories/Toast.story.vue index c3aa32d..376e32c 100644 --- a/src/stories/Toast.story.vue +++ b/src/stories/Toast.story.vue @@ -1,11 +1,13 @@ @@ -14,11 +16,29 @@ import { Toaster } from "vue-sonner" import { toast } from "./../helpers/toast" -const openToast = () => { +const openBasicToast = () => { toast("Basic toast") } +const openSuccessToast = () => { + toast("Success toast", { type: "success" }) +} +const openErrorToast = () => { + toast("Error toast", { type: "error" }) +} const launchLegacyToast = () => { toast.success("Simple Legacy toast") } + + From dabdda781ce8cb8a2bb6d994519417d8fe4dfeca Mon Sep 17 00:00:00 2001 From: Anwarul Islam Date: Thu, 18 Apr 2024 20:36:39 +0600 Subject: [PATCH 07/36] feat: legacy modal story --- src/stories/Modal.story.vue | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/src/stories/Modal.story.vue b/src/stories/Modal.story.vue index 06ae509..7b63e06 100644 --- a/src/stories/Modal.story.vue +++ b/src/stories/Modal.story.vue @@ -1,10 +1,12 @@ @@ -13,10 +15,26 @@ import { HoppSmartModal } from "../components/smart" import { ref } from "vue" -const show = ref(true) +const show = ref(false) const resolveConfirmModal = (resolve: string | null) => { alert("resolved: " + resolve) show.value = false } + +const showModal = () => { + show.value = true +} + + From af6c662ff4690e5fdac3cb1bb00834813e3b0e39 Mon Sep 17 00:00:00 2001 From: Anwarul Islam Date: Mon, 22 Apr 2024 12:05:30 +0600 Subject: [PATCH 08/36] chore: fixes spelling mistake --- src/helpers/toast.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/helpers/toast.ts b/src/helpers/toast.ts index 9bdb1d4..5253627 100644 --- a/src/helpers/toast.ts +++ b/src/helpers/toast.ts @@ -1,12 +1,12 @@ -import { toast as soner } from "vue-sonner" +import { toast as sonner, ToasterProps } from "vue-sonner" export type ToastOptions = { type?: "success" | "error" | "warning" | "info" duration?: number -} +} & ToasterProps["toastOptions"] export const toast = (message: string, option?: ToastOptions) => { - soner(message, { + sonner(message, { ...option, }) } @@ -16,19 +16,21 @@ export const toast = (message: string, option?: ToastOptions) => { */ toast.success = (message: string, option?: ToastOptions) => { - soner.success(message, { + sonner.success(message, { ...option, }) } toast.error = (message: string, option?: ToastOptions) => { - soner.error(message, { + sonner.error(message, { ...option, }) } toast.warning = (message: string, option?: ToastOptions) => { - soner.warning(message, { + sonner.warning(message, { ...option, }) } + +toast.show = toast From e06ae025c1c093c45740d49df65de001214be51d Mon Sep 17 00:00:00 2001 From: Anwarul Islam Date: Thu, 25 Apr 2024 12:55:53 +0600 Subject: [PATCH 09/36] feat: modal wrapper added --- src/components/modal/Heading.vue | 47 +++++++++ src/components/modal/index.ts | 1 - src/components/modal/index.vue | 168 ++++++++++++++++++++++++++----- 3 files changed, 189 insertions(+), 27 deletions(-) create mode 100644 src/components/modal/Heading.vue diff --git a/src/components/modal/Heading.vue b/src/components/modal/Heading.vue new file mode 100644 index 0000000..2114a3a --- /dev/null +++ b/src/components/modal/Heading.vue @@ -0,0 +1,47 @@ + + + diff --git a/src/components/modal/index.ts b/src/components/modal/index.ts index 44c6785..5be72e9 100644 --- a/src/components/modal/index.ts +++ b/src/components/modal/index.ts @@ -1,2 +1 @@ export { default as HoppModal } from "./index.vue" -export { default as InputDialog } from "./InputDialog.vue" diff --git a/src/components/modal/index.vue b/src/components/modal/index.vue index e97a5de..724c919 100644 --- a/src/components/modal/index.vue +++ b/src/components/modal/index.vue @@ -1,48 +1,164 @@ From b5865b1113e78c328d09da56e936ca03ad870685 Mon Sep 17 00:00:00 2001 From: Anwarul Islam Date: Thu, 25 Apr 2024 13:01:02 +0600 Subject: [PATCH 10/36] feat: modal examples added --- src/components/modal/examples/Greetings.vue | 15 +++++++++++++++ .../modal/{ => examples}/InputDialog.vue | 0 src/components/modal/examples/index.ts | 2 ++ src/stories/NewModal.story.vue | 6 +++--- 4 files changed, 20 insertions(+), 3 deletions(-) create mode 100644 src/components/modal/examples/Greetings.vue rename src/components/modal/{ => examples}/InputDialog.vue (100%) create mode 100644 src/components/modal/examples/index.ts diff --git a/src/components/modal/examples/Greetings.vue b/src/components/modal/examples/Greetings.vue new file mode 100644 index 0000000..e4dab7e --- /dev/null +++ b/src/components/modal/examples/Greetings.vue @@ -0,0 +1,15 @@ + + + diff --git a/src/components/modal/InputDialog.vue b/src/components/modal/examples/InputDialog.vue similarity index 100% rename from src/components/modal/InputDialog.vue rename to src/components/modal/examples/InputDialog.vue diff --git a/src/components/modal/examples/index.ts b/src/components/modal/examples/index.ts new file mode 100644 index 0000000..c63f29b --- /dev/null +++ b/src/components/modal/examples/index.ts @@ -0,0 +1,2 @@ +export { default as InputDialog } from "./InputDialog.vue" +export { default as GreetingsModal } from "./Greetings.vue" diff --git a/src/stories/NewModal.story.vue b/src/stories/NewModal.story.vue index ba66c97..c2d5c26 100644 --- a/src/stories/NewModal.story.vue +++ b/src/stories/NewModal.story.vue @@ -18,12 +18,12 @@ \ No newline at end of file + diff --git a/src/components/Toast.vue b/src/components/Toast.vue new file mode 100644 index 0000000..2d006ef --- /dev/null +++ b/src/components/Toast.vue @@ -0,0 +1,52 @@ + + + diff --git a/src/helpers/index.ts b/src/helpers/index.ts index d262c02..e29dbde 100644 --- a/src/helpers/index.ts +++ b/src/helpers/index.ts @@ -1,3 +1,4 @@ export * from "./treeAdapter" export * from "./toast" +export * from "./legacy-toast" export { default as HoppToastPlugin } from "vue-sonner" diff --git a/src/helpers/legacy-toast.ts b/src/helpers/legacy-toast.ts new file mode 100644 index 0000000..b6c8ee3 --- /dev/null +++ b/src/helpers/legacy-toast.ts @@ -0,0 +1,63 @@ +import { defineComponent, h, markRaw } from "vue" +import { toast as sonner } from "vue-sonner" +import Toast, { LegacyToastAction } from "./../components/Toast.vue" + +export type ToastOptions = { + duration?: number + closeOnSwipe?: boolean + action?: LegacyToastAction | LegacyToastAction[] +} + +/* + * Legacy support for toast.success, toast.error, and toast.warning + */ + +const generateLegacyToastWithActions = ( + message: string, + action: LegacyToastAction | LegacyToastAction[], +) => { + const actions = Array.isArray(action) ? action : [action] + + return defineComponent({ + render() { + return h(Toast, { + message, + actions, + }) + }, + }) +} + +const addLegacyToast = + (type?: string) => (message: string, option?: ToastOptions) => { + // if action is an array or object with property text then it is a legacy toast + const isLegacyToast = + Array.isArray(option?.action) || + Object.prototype.hasOwnProperty.call(option?.action ?? {}, "text") + + const raw = isLegacyToast + ? markRaw( + generateLegacyToastWithActions( + message, + option?.action as LegacyToastAction, // type assertion is safe here because we checked if it is a legacy toast + ), + ) + : message + + const duration = option?.duration === 0 ? Infinity : option?.duration + + sonner(raw, { + ...option, + duration, + action: undefined, + }) + } + +const legacyToast = Object.assign(sonner, { + success: addLegacyToast("success"), + error: addLegacyToast("error"), + warning: addLegacyToast("warning"), + show: addLegacyToast(), +}) + +export { legacyToast } diff --git a/src/helpers/toast.ts b/src/helpers/toast.ts index f70c0ec..39b8d83 100644 --- a/src/helpers/toast.ts +++ b/src/helpers/toast.ts @@ -1,109 +1 @@ -import { defineComponent, h, markRaw } from "vue" -import { toast as sonner } from "vue-sonner" - -export type SonnerToastOptions = Exclude< - Parameters[1], - undefined -> - -export type LegacyToastAction = { - text: string - onClick: (event?: MouseEvent, toast?: unknown) => void -} - -export type ToastOptions = SonnerToastOptions & { - type?: "success" | "error" | "warning" | "info" - duration?: number - closeOnSwipe?: boolean - action?: - | LegacyToastAction - | LegacyToastAction[] - | SonnerToastOptions["action"] -} - -/* - * Legacy support for toast.success, toast.error, and toast.warning - */ - -const generateLegacyToastWithActions = ( - message: string, - action: LegacyToastAction | LegacyToastAction[], -) => { - const actions = Array.isArray(action) ? action : [action] - - return defineComponent({ - setup() { - return () => - h( - "div", - { - class: "l-toast", - }, - [ - h( - "div", - { - class: "l-toast-title", - }, - message, - ), - h( - "div", - { - class: "l-toast-actions", - }, - actions.map((action) => - h( - "button", - { - class: "action ripple", - onClick: (e: MouseEvent) => { - action?.onClick(e, { - goAway: (delay?: number) => {}, - }) - }, - }, - action.text, - ), - ), - ), - ], - ) - }, - }) -} - -const legacyToast = - (type?: string) => (message: string, option?: ToastOptions) => { - // if action is an array or object with property text then it is a legacy toast - const isLegacyToast = - Array.isArray(option?.action) || - Object.prototype.hasOwnProperty.call(option?.action ?? {}, "text") - - const raw = isLegacyToast - ? markRaw( - generateLegacyToastWithActions( - message, - option?.action as LegacyToastAction, // type assertion is safe here because we checked if it is a legacy toast - ), - ) - : message - - const duration = option?.duration === 0 ? Infinity : option?.duration - - sonner(raw, { - ...option, - ...(type && { type }), - duration, - action: isLegacyToast ? undefined : option?.action, - }) - } - -const toast = Object.assign(sonner, { - success: legacyToast("success"), - error: legacyToast("error"), - warning: legacyToast("warning"), - show: legacyToast(), -}) - -export { toast } +export { toast } from "vue-sonner" diff --git a/src/stories/LegacyToast.story.vue b/src/stories/LegacyToast.story.vue new file mode 100644 index 0000000..7b785e7 --- /dev/null +++ b/src/stories/LegacyToast.story.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/src/stories/Toast.story.vue b/src/stories/Toast.story.vue index 584329e..cf535f2 100644 --- a/src/stories/Toast.story.vue +++ b/src/stories/Toast.story.vue @@ -1,24 +1,13 @@