feat: Create setting components

src/renderer/components/button.ts

@@ -0,0 +1,4 @@
+
+export const SettingButton = (text: string, id?: string, type: string = 'secondary') => {
+    return `<setting-button ${type ? `data-type="${type}"` : ''} ${id ? `id="${id}"` : ''}>${text}</setting-button>`;
+}

src/renderer/components/index.ts

@@ -0,0 +1,5 @@
+export * from './list';
+export * from './item';
+export * from './button';
+export * from './switch';
+export * from './select';

src/renderer/components/item.ts

@@ -0,0 +1,10 @@
+
+export const SettingItem = (title: string, subtitle?: string, action?: string, id?: string, visible: boolean = true) => {
+    return `<setting-item ${id ? `id="${id}"` : ''} ${!visible ? 'is-hidden' : ''}>
+    <div>
+        <setting-text>${title}</setting-text>
+        ${subtitle ? `<setting-text data-type="secondary">${subtitle}</setting-text>` : ''}
+    </div>
+    ${action ? `<div>${action}</div>` : ''}
+</setting-item>`;
+}

src/renderer/components/list.ts

@@ -0,0 +1,10 @@
+
+export const SettingList = (items: string[], title?: string, isCollapsible: boolean = false, direction: string = 'column') => {
+    return `<setting-section ${title && !isCollapsible ? `data-title="${title}"` : ''}>
+    <setting-panel>
+        <setting-list ${direction ? `data-direction="${direction}"` : ''} ${isCollapsible ? 'is-collapsible' : ''} ${title && isCollapsible ? `data-title="${title}"` : ''}>
+            ${items.join('')}
+        </setting-list>
+    </setting-panel>
+</setting-section>`;
+}

src/renderer/components/option.ts

@@ -0,0 +1,4 @@
+
+export const SettingOption = (text: string, value?: string, isSelected: boolean = false) => {
+    return `<setting-option ${value ? `data-value="${value}"` : ''} ${isSelected ? 'is-selected' : ''}>${text}</setting-option>`;
+}

src/renderer/components/select.ts

@@ -0,0 +1,11 @@
+import { SettingOption } from "./option";
+
+export const SettingSelect = (items: Array<{ text: string, value: string }>, configKey?: string, configValue?: any) => {
+    return `<setting-select ${configKey ? `data-config-key="${configKey}"` : ''}>
+    <div>
+        ${items.map((e, i) => {
+            return SettingOption(e.text, e.value, (configKey && configValue ? configValue === e.value : i === 0));
+        }).join('')}
+    </div>
+</setting-select>`;
+}

src/renderer/components/switch.ts

@@ -0,0 +1,9 @@
+
+export const SettingSwitch = (configKey?: string, isActive: boolean = false, extraData?: Record<string, string>) => {
+    return `<setting-switch 
+    ${configKey ? `data-config-key="${configKey}"` : ''} 
+    ${isActive ? 'is-active' : ''} 
+    ${extraData ? Object.keys(extraData).map(key => `data-${key}="${extraData[key]}"`) : ''} 
+    >
+</setting-switch>`;
+}