From c9876813dbb567c04dd0dade2e95b7d46ecb1bfc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=B6k=C3=A7e=20Merdun?= Date: Thu, 3 Aug 2023 20:35:53 +0300 Subject: [PATCH] readme --- .github/README.md | 1 + .gitignore | 1 + apps/tauri-controls-svelte/.gitignore | 3 +- apps/tauri-controls-svelte/README.md | 8 ++ apps/tauri-controls-svelte/package.json | 3 + README.md => apps/tauri-controls/README.md | 94 +++++++++++++++------- 6 files changed, 78 insertions(+), 32 deletions(-) create mode 120000 .github/README.md create mode 100644 apps/tauri-controls-svelte/README.md rename README.md => apps/tauri-controls/README.md (73%) diff --git a/.github/README.md b/.github/README.md new file mode 120000 index 0000000..7b20a4e --- /dev/null +++ b/.github/README.md @@ -0,0 +1 @@ +../apps/tauri-controls/README.md \ No newline at end of file diff --git a/.gitignore b/.gitignore index 6201871..89120db 100644 --- a/.gitignore +++ b/.gitignore @@ -17,6 +17,7 @@ dist # misc .DS_Store *.pem +*.tgz # debug npm-debug.log* diff --git a/apps/tauri-controls-svelte/.gitignore b/apps/tauri-controls-svelte/.gitignore index 356d255..9ccc8a9 100644 --- a/apps/tauri-controls-svelte/.gitignore +++ b/apps/tauri-controls-svelte/.gitignore @@ -9,4 +9,5 @@ node_modules !.env.example vite.config.js.timestamp-* vite.config.ts.timestamp-* -.turbo \ No newline at end of file +.turbo +*.tgz \ No newline at end of file diff --git a/apps/tauri-controls-svelte/README.md b/apps/tauri-controls-svelte/README.md new file mode 100644 index 0000000..f1cce91 --- /dev/null +++ b/apps/tauri-controls-svelte/README.md @@ -0,0 +1,8 @@ + + + Shows an illustrated sun in light color mode and a moon with stars in dark color mode. + + +## @tauri-controls/svelte + +https://github.com/agmmnn/tauri-controls diff --git a/apps/tauri-controls-svelte/package.json b/apps/tauri-controls-svelte/package.json index 6a8c1e6..a3a61e5 100644 --- a/apps/tauri-controls-svelte/package.json +++ b/apps/tauri-controls-svelte/package.json @@ -20,6 +20,9 @@ "tauri": "tauri", "tauri:dev": "tauri dev" }, + "publishConfig": { + "access": "public" + }, "type": "module", "svelte": "./dist/index.js", "types": "./dist/index.d.ts", diff --git a/README.md b/apps/tauri-controls/README.md similarity index 73% rename from README.md rename to apps/tauri-controls/README.md index 5a14d6e..81dc11f 100644 --- a/README.md +++ b/apps/tauri-controls/README.md @@ -5,11 +5,11 @@ ![](https://img.shields.io/bundlephobia/min/tauri-controls) ![](https://img.shields.io/bundlephobia/minzip/tauri-controls) -[![](https://img.shields.io/npm/dt/tauri-controls)](https://npmjs.com/package/tauri-controls) +[![](https://img.shields.io/npm/dt/tauri-controls)](https://npmjs.com/package/tauri-controls) ![](https://img.shields.io/badge/React-20232A?logo=react&logoColor=61DAFB) ![](https://img.shields.io/badge/Svelte-4A4A55?logo=svelte&logoColor=FF3E00) **Tauri Controls** is a library that provides native-looking **window controls** for [Tauri](https://github.com/tauri-apps/tauri) 2 applications. You can enhance the user experience of your Tauri 2 applications with window controls that mimic the identical native controls on the current system. -`tauri-controls` uses Tauri's [js/ts APIs](https://next--tauri.netlify.app/next/api/js) to handle window events and just provides native-looking (designed according to official system design prototypes) html/react elements, not native, _it does not rely on the system's native APIs_. +`tauri-controls` uses Tauri's [js/ts APIs](https://next--tauri.netlify.app/next/api/js) to handle window events and just provides native-looking (designed according to official system design prototypes) html elements, not native, _it does not rely on the system's native APIs_. The following designs are taken as reference: @@ -21,13 +21,25 @@ The following designs are taken as reference: ### Install Dependencies ```bash +# for react pnpm add tauri-controls -#install peer dependencies +# for svelte +pnpm add @tauri-controls/svelte +``` + +```bash +# install peer dependencies pnpm add @tauri-apps/plugin-os @tauri-apps/plugin-window pnpm add -D clsx tailwind-merge ``` +If you are using **Svelte**, add the following line to the `content` section of `tailwind.config.js` _(no need for React)_: + +```js +"./node_modules/@tauri-controls/svelte/**/*.{js,svelte,ts}" +``` + Then, make sure to include the following tauri plugins in your `src-tauri` directory: ```bash @@ -50,33 +62,68 @@ fn main() { ### Add to Your Code -And simply add the `WindowControls` component to your code: +And simply add the `WindowTitlebar` or `WindowControls` component to your code: + +#### WindowTitlebar + +`WindowTitlebar` component handles the window controls and dynamically adjusts the control buttons and titlebar content order based on the current operating system. + +For React: ```tsx -import { WindowControls } from "tauri-controls"; +import { WindowTitlebar } from "tauri-controls" function MyTitlebar() { - return ; + return ( + {/* Place your titlebar content here */} + ) } ``` -![](https://github.com/agmmnn/tauri-controls/assets/16024979/7be3dde4-7953-4188-af12-abd4445c0bf9) +For Svelte: + +```svelte + + +{/* Place your titlebar content here */} +``` + +![](https://github.com/agmmnn/tauri-controls/assets/16024979/214677d4-dd70-4e6b-96c3-b9d1a1356f05) + +When no platform is specified, the current system will be detected and the matching element will be returned. This feature is a great solution for cross-platform releases. + +#### WindowControls -When no platform is specified, the current system will be detected and the matching element will be returned. It's a great solution for cross-platform releases. +Use the `WindowControls` component only for window controls. -WindowTitlebar component handles the window controls and dynamically adjusts the control buttons and titlebar content order based on the current operating system. +For React: ```tsx -import { WindowTitlebar } from "tauri-controls"; +import { WindowControls } from "tauri-controls" function MyTitlebar() { - return ( - {/* Place your titlebar content here */} - ); + return } ``` -![](https://github.com/agmmnn/tauri-controls/assets/16024979/214677d4-dd70-4e6b-96c3-b9d1a1356f05) +For Svelte: + +```svelte + + + +``` + +![](https://github.com/agmmnn/tauri-controls/assets/16024979/7be3dde4-7953-4188-af12-abd4445c0bf9) + +#### More examples: + +- [in React](https://github.com/agmmnn/tauri-controls/blob/master/apps/tauri-controls/src/App.tsx) +- [in Svelte](https://github.com/agmmnn/tauri-controls/blob/master/apps/tauri-controls-svelte/src/routes/%2Bpage.svelte) ### Options @@ -87,40 +134,25 @@ windowControlsProps?: WindowControlsProps // WindowControls: platform?: "windows" | "macos" | "gnome" +justify?: boolean hide?: boolean hideMethod?: "display" | "visibility" ``` You can also pass additional `props` to elements like `data-tauri-drag-region` for further enhancements. -### Examples: - -```tsx - -``` - ![](https://i.imgur.com/OAO22HC.png) -```tsx - -``` - ![](https://i.imgur.com/hq389kn.png) -[More examples](https://github.com/agmmnn/tauri-controls/blob/master/src/App.tsx). - # To-Do If the library gets some interest, I can gradually add the following features: - [x] If no platform is specified, the side of the controls will also be determined automatically. (e.g. MacOS left, others right) - [x] Next.js/SSR support. +- [x] Svelte/SvelteKit implementation. - [ ] Detect disabled window controls (is_maximizable, ...) and disable the buttons accordingly. -- [ ] Svelte/SvelteKit implementation. ## Figma