-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
107 additions
and
111 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,99 +1,101 @@ | ||
| <script> | ||
| import SettingItem from "@/libs/setting-item.svelte"; | ||
| import { showMessage } from "siyuan"; | ||
| import { onMount, onDestroy } from 'svelte'; | ||
| onMount(() => { | ||
| showMessage("Setting panel opened"); | ||
| }); | ||
| onDestroy(() => { | ||
| showMessage("Setting panel closed"); | ||
| }); | ||
| </script> | ||
| <script lang="ts"> | ||
| import SettingPanel from "./libs/setting-panel.svelte"; | ||
| let groups: string[] = ["🌈 Default"]; | ||
| let focusGroup = groups[0]; | ||
| <!-- | ||
| You can use this template to quickly create a setting panel, | ||
| with the same UI style in SiYuan | ||
| --> | ||
| const SettingItems: ISettingItem[] = [ | ||
| { | ||
| type: 'checkbox', | ||
| title: 'checkbox', | ||
| description: 'checkbox', | ||
| key: 'a', | ||
| value: true | ||
| }, | ||
| { | ||
| type: 'textinput', | ||
| title: 'text', | ||
| description: 'This is a text', | ||
| key: 'b', | ||
| value: 'This is a text', | ||
| placeholder: 'placeholder' | ||
| }, | ||
| { | ||
| type: 'select', | ||
| title: 'select', | ||
| description: 'select', | ||
| key: 'c', | ||
| value: 'x', | ||
| options: { | ||
| x: 'x', | ||
| y: 'y', | ||
| z: 'z' | ||
| } | ||
| }, | ||
| { | ||
| type: 'slider', | ||
| title: 'slider', | ||
| description: 'slider', | ||
| key: 'd', | ||
| value: 50, | ||
| slider: { | ||
| min: 0, | ||
| max: 100, | ||
| step: 1 | ||
| } | ||
| } | ||
| ]; | ||
| <div class="config__tab-container"> | ||
| <div data-type="Header" class="fn__flex b3-label"> | ||
| <div class="fn_flex-1"> | ||
| <h4>This setting panel is provided by a svelte component</h4> | ||
| <div class="b3-label__text"> | ||
| <span class="fn__flex-1"> | ||
| See: | ||
| <pre style="display: inline">/lib/setting-pannel.svelte</pre> | ||
| </span> | ||
| /********** Events **********/ | ||
| interface ChangeEvent { | ||
| group: string; | ||
| key: string; | ||
| value: any; | ||
| } | ||
| const onChanged = ({ detail }: CustomEvent<ChangeEvent>) => { | ||
| if (detail.group === groups[0]) { | ||
| // setting.set(detail.key, detail.value); | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <div class="fn__flex-1 fn__flex config__panel"> | ||
| <ul class="b3-tab-bar b3-list b3-list--background"> | ||
| {#each groups as group} | ||
| <li | ||
| data-name="editor" | ||
| class:b3-list-item--focus={group === focusGroup} | ||
| class="b3-list-item" | ||
| on:click={() => { | ||
| focusGroup = group; | ||
| }} | ||
| on:keydown={() => {}} | ||
| > | ||
| <span class="b3-list-item__text">{group}</span> | ||
| </li> | ||
| {/each} | ||
| </ul> | ||
| <div class="config__tab-wrap"> | ||
| <SettingPanel | ||
| group={groups[0]} | ||
| settingItems={SettingItems} | ||
| display={focusGroup === groups[0]} | ||
| on:changed={onChanged} | ||
| > | ||
| <div class="fn__flex b3-label"> | ||
| 💡 This is our default settings. | ||
| </div> | ||
| </div> | ||
| </SettingPanel> | ||
| </div> | ||
| <SettingItem | ||
| type="checkbox" | ||
| title="Checkbox" | ||
| description="This is a <b>checkbox</b>" | ||
| settingKey="Checkbox" | ||
| settingValue={true} | ||
| on:changed={(event) => { | ||
| showMessage( | ||
| `Checkbox changed: ${event.detail.key} = ${event.detail.value}` | ||
| ); | ||
| }} | ||
| /> | ||
| <SettingItem | ||
| type="input" | ||
| title="Input" | ||
| description="This is an input" | ||
| settingKey="Input" | ||
| settingValue="" | ||
| placeholder="Input something" | ||
| on:changed={(event) => { | ||
| showMessage( | ||
| `Input changed: ${event.detail.key} = ${event.detail.value}` | ||
| ); | ||
| }} | ||
| /> | ||
| <SettingItem | ||
| type="button" | ||
| title="Button" | ||
| description="This is a button" | ||
| settingKey="Button" | ||
| settingValue="Click me" | ||
| on:clicked={() => { | ||
| showMessage("Button clicked"); | ||
| }} | ||
| /> | ||
| <SettingItem | ||
| type="select" | ||
| title="Select" | ||
| description="This is a select" | ||
| settingKey="Select" | ||
| settingValue="left" | ||
| options={{ | ||
| left: "Left", | ||
| center: "Center", | ||
| right: "Right", | ||
| }} | ||
| on:changed={(event) => { | ||
| showMessage( | ||
| `Select changed: ${event.detail.key} = ${event.detail.value}` | ||
| ); | ||
| }} | ||
| /> | ||
| <SettingItem | ||
| type="slider" | ||
| title="Slide" | ||
| description="This is a slide" | ||
| settingKey="Slide" | ||
| settingValue={50} | ||
| slider={{ | ||
| min: 0, | ||
| max: 100, | ||
| step: 1, | ||
| }} | ||
| on:changed={(event) => { | ||
| showMessage( | ||
| `Slide changed: ${event.detail.key} = ${event.detail.value}` | ||
| ); | ||
| }} | ||
| /> | ||
| </div> | ||
|
|
||
| <style lang="scss"> | ||
| .config__panel { | ||
| height: 100%; | ||
| } | ||
| .config__panel > ul > li { | ||
| padding-left: 1rem; | ||
| } | ||
| </style> | ||
|
|