From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: X-Spam-Checker-Version: SpamAssassin 3.4.6 (2021-04-09) on server-vie001.gnuweeb.org X-Spam-Level: X-Spam-Status: No, score=-1.2 required=5.0 tests=ALL_TRUSTED,DKIM_SIGNED, DKIM_VALID,DKIM_VALID_AU,DKIM_VALID_EF,URIBL_ZEN_BLOCKED_OPENDNS autolearn=ham autolearn_force=no version=3.4.6 DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/simple; d=gnuweeb.org; s=default; t=1741185660; bh=pAT5Sa3vdVVvewz5wG8+ljb+1c7BjclPrqEDFvECp3Y=; h=From:To:Cc:Subject:Date:Message-ID:In-Reply-To:References: MIME-Version:Content-Transfer-Encoding:Message-ID:Date:From: Reply-To:Subject:To:Cc:In-Reply-To:References:Resent-Date: Resent-From:Resent-To:Resent-Cc:User-Agent:Content-Type: Content-Transfer-Encoding; b=N/OsU2UUb00ELUMiWW1X6j/7dH7t2eAMd7q0sHUavREB5xrt5ijgWn85u0KIYePVW rp9G2DCN7NBtojIYMKQAIcbxZ/XHLbSz5hQYrAQwVtGVSwBYkJu2oJClsWXu0ZpjDW ldS99Jo4+/wIZnkAa5VZUw0Vf8FqYfygrAKSxahf76xa/1hs8+8TVtwck/lLlNwR5j TM//2vBGoErqeCWxdRYH6CId0GaDU3BN2trUodPst0h1lgEXg+EEa7dBuK/Wt1FVei wSatZdAGvs9YQg5Bq3UfzXX9y9cUHcbgGUMEZgEWsIThKyaJglG6MtL/iJWYeWj1R6 GjzAZMqkhOWDQ== Received: from localhost.localdomain (unknown [203.217.140.198]) by server-vie001.gnuweeb.org (Postfix) with ESMTPSA id 3F9F620B4831; Wed, 5 Mar 2025 14:40:59 +0000 (UTC) From: Muhammad Rizki To: Ammar Faizi Cc: Muhammad Rizki , Alviro Iskandar Setiawan , GNU/Weeb Mailing List Subject: [PATCH v1 09/17] feat(ui): Add popover and dialog UI component Date: Wed, 5 Mar 2025 21:40:08 +0700 Message-ID: <20250305144018.267-10-kiizuha@gnuweeb.org> X-Mailer: git-send-email 2.46.0.windows.1 In-Reply-To: <20250305144018.267-1-kiizuha@gnuweeb.org> References: <20250305144018.267-1-kiizuha@gnuweeb.org> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit List-Id: Added popover and dialog UI, this commit include updates for bits-ui version. Signed-off-by: Muhammad Rizki --- package-lock.json | 8 ++-- package.json | 2 +- .../ui/dialog/dialog-content.svelte | 38 +++++++++++++++++++ .../ui/dialog/dialog-description.svelte | 16 ++++++++ .../components/ui/dialog/dialog-footer.svelte | 20 ++++++++++ .../components/ui/dialog/dialog-header.svelte | 20 ++++++++++ .../ui/dialog/dialog-overlay.svelte | 19 ++++++++++ .../components/ui/dialog/dialog-title.svelte | 16 ++++++++ src/lib/components/ui/dialog/index.ts | 37 ++++++++++++++++++ src/lib/components/ui/popover/index.ts | 17 +++++++++ .../ui/popover/popover-content.svelte | 28 ++++++++++++++ 11 files changed, 216 insertions(+), 5 deletions(-) create mode 100644 src/lib/components/ui/dialog/dialog-content.svelte create mode 100644 src/lib/components/ui/dialog/dialog-description.svelte create mode 100644 src/lib/components/ui/dialog/dialog-footer.svelte create mode 100644 src/lib/components/ui/dialog/dialog-header.svelte create mode 100644 src/lib/components/ui/dialog/dialog-overlay.svelte create mode 100644 src/lib/components/ui/dialog/dialog-title.svelte create mode 100644 src/lib/components/ui/dialog/index.ts create mode 100644 src/lib/components/ui/popover/index.ts create mode 100644 src/lib/components/ui/popover/popover-content.svelte diff --git a/package-lock.json b/package-lock.json index b9d8ba9..525092e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,7 @@ "@sveltejs/kit": "^2.0.0", "@sveltejs/vite-plugin-svelte": "^4.0.0", "autoprefixer": "^10.4.20", - "bits-ui": "^1.3.2", + "bits-ui": "^1.3.5", "clsx": "^2.1.1", "eslint": "^9.7.0", "eslint-config-prettier": "^9.1.0", @@ -1898,9 +1898,9 @@ } }, "node_modules/bits-ui": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-1.3.2.tgz", - "integrity": "sha512-27fg/O71yqYmDaDf/opInylQYJjBNlFw3Ari0mXKLA6UrQpRvY62EsAid8s+ci/wYrGZMvHpzNJ69t15ycBHTw==", + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-1.3.5.tgz", + "integrity": "sha512-pfd8MK5Hp7bOvsW25LJrWVABmBIeAOH3g0pFPJLBIKlcqsaalEdBYejQmlSwrynEDX589aW3hTAWbhmWqRjjrQ==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index c323150..52b0e4c 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "@sveltejs/kit": "^2.0.0", "@sveltejs/vite-plugin-svelte": "^4.0.0", "autoprefixer": "^10.4.20", - "bits-ui": "^1.3.2", + "bits-ui": "^1.3.5", "clsx": "^2.1.1", "eslint": "^9.7.0", "eslint-config-prettier": "^9.1.0", diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte new file mode 100644 index 0000000..e0f8d9c --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-content.svelte @@ -0,0 +1,38 @@ + + + + + + {@render children?.()} + + + Close + + + diff --git a/src/lib/components/ui/dialog/dialog-description.svelte b/src/lib/components/ui/dialog/dialog-description.svelte new file mode 100644 index 0000000..adb4f44 --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-description.svelte @@ -0,0 +1,16 @@ + + + diff --git a/src/lib/components/ui/dialog/dialog-footer.svelte b/src/lib/components/ui/dialog/dialog-footer.svelte new file mode 100644 index 0000000..7695cd2 --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-footer.svelte @@ -0,0 +1,20 @@ + + +
+ {@render children?.()} +
diff --git a/src/lib/components/ui/dialog/dialog-header.svelte b/src/lib/components/ui/dialog/dialog-header.svelte new file mode 100644 index 0000000..ec60291 --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-header.svelte @@ -0,0 +1,20 @@ + + +
+ {@render children?.()} +
diff --git a/src/lib/components/ui/dialog/dialog-overlay.svelte b/src/lib/components/ui/dialog/dialog-overlay.svelte new file mode 100644 index 0000000..b9b2cae --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-overlay.svelte @@ -0,0 +1,19 @@ + + + diff --git a/src/lib/components/ui/dialog/dialog-title.svelte b/src/lib/components/ui/dialog/dialog-title.svelte new file mode 100644 index 0000000..15eae58 --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-title.svelte @@ -0,0 +1,16 @@ + + + diff --git a/src/lib/components/ui/dialog/index.ts b/src/lib/components/ui/dialog/index.ts new file mode 100644 index 0000000..5126e26 --- /dev/null +++ b/src/lib/components/ui/dialog/index.ts @@ -0,0 +1,37 @@ +import { Dialog as DialogPrimitive } from "bits-ui"; + +import Title from "./dialog-title.svelte"; +import Footer from "./dialog-footer.svelte"; +import Header from "./dialog-header.svelte"; +import Overlay from "./dialog-overlay.svelte"; +import Content from "./dialog-content.svelte"; +import Description from "./dialog-description.svelte"; + +const Root: typeof DialogPrimitive.Root = DialogPrimitive.Root; +const Trigger: typeof DialogPrimitive.Trigger = DialogPrimitive.Trigger; +const Close: typeof DialogPrimitive.Close = DialogPrimitive.Close; +const Portal: typeof DialogPrimitive.Portal = DialogPrimitive.Portal; + +export { + Root, + Title, + Portal, + Footer, + Header, + Trigger, + Overlay, + Content, + Description, + Close, + // + Root as Dialog, + Title as DialogTitle, + Portal as DialogPortal, + Footer as DialogFooter, + Header as DialogHeader, + Trigger as DialogTrigger, + Overlay as DialogOverlay, + Content as DialogContent, + Description as DialogDescription, + Close as DialogClose +}; diff --git a/src/lib/components/ui/popover/index.ts b/src/lib/components/ui/popover/index.ts new file mode 100644 index 0000000..e5a8bc6 --- /dev/null +++ b/src/lib/components/ui/popover/index.ts @@ -0,0 +1,17 @@ +import { Popover as PopoverPrimitive } from "bits-ui"; +import Content from "./popover-content.svelte"; +const Root = PopoverPrimitive.Root; +const Trigger = PopoverPrimitive.Trigger; +const Close = PopoverPrimitive.Close; + +export { + Root, + Content, + Trigger, + Close, + // + Root as Popover, + Content as PopoverContent, + Trigger as PopoverTrigger, + Close as PopoverClose +}; diff --git a/src/lib/components/ui/popover/popover-content.svelte b/src/lib/components/ui/popover/popover-content.svelte new file mode 100644 index 0000000..11cf914 --- /dev/null +++ b/src/lib/components/ui/popover/popover-content.svelte @@ -0,0 +1,28 @@ + + + + + -- Muhammad Rizki