browser-extension-settings 0.3.0 → 0.3.1

package/lib/index.ts

@@ -3,6 +3,6 @@ export {
   showSettings,
   hideSettings,
   getSettingsValue,
-  saveSattingsValues,
-  resetSattingsValues,
+  saveSettingsValues,
+  resetSettingsValues,
 } from "./settings"

package/lib/settings.ts

@@ -46,6 +46,7 @@ type SettingsTable = Record<
 
 type SettingsSwitchItem = {
   title: string
+  icon?: string
   defaultValue: boolean
   type?: "switch"
   group?: number
@@ -53,6 +54,7 @@ type SettingsSwitchItem = {
 
 type SettingsInputItem = {
   title: string
+  icon?: string
   defaultValue: string
   placeholder?: string
   type: string
@@ -61,6 +63,7 @@ type SettingsInputItem = {
 
 type SettingsActionItem = {
   title: string
+  icon?: string
   type: string
   onclick?: () => void
   url?: string
@@ -70,6 +73,7 @@ type SettingsActionItem = {
 
 type SettingsTipItem = {
   title: string
+  icon?: string
   type: string
   tipContent: string
   group?: number
@@ -108,7 +112,7 @@ async function getSettings() {
   )
 }
 
-async function saveSattingsValue(key: string, value: any) {
+async function saveSettingsValue(key: string, value: any) {
   const settings = await getSettings()
   settings[key] =
     settingsTable[key] && settingsTable[key].defaultValue === value
@@ -118,11 +122,11 @@ async function saveSattingsValue(key: string, value: any) {
   await setValue(storageKey, settings)
 }
 
-export async function resetSattingsValues() {
+export async function resetSettingsValues() {
   await setValue(storageKey, {})
 }
 
-export async function saveSattingsValues(
+export async function saveSettingsValues(
   values: Record<string, boolean | string | undefined>
 ) {
   const settings = await getSettings()
@@ -324,11 +328,11 @@ function createSettingsElement() {
         // console.log(key, item, type, group)
         switch (type) {
           case "switch": {
-            const switchOption = createSwitchOption(item.title, {
+            const switchOption = createSwitchOption(item.icon, item.title, {
               async onchange(event: Event) {
                 const checkbox = event.target as HTMLInputElement
                 if (checkbox) {
-                  await saveSattingsValue(key, checkbox.checked)
+                  await saveSettingsValue(key, checkbox.checked)
                 }
               },
             })
@@ -357,7 +361,7 @@ function createSettingsElement() {
 
                 timeoutId = setTimeout(async () => {
                   if (textArea) {
-                    await saveSattingsValue(key, textArea.value.trim())
+                    await saveSettingsValue(key, textArea.value.trim())
                   }
                 }, 100)
               },

package/lib/style.scss

@@ -224,8 +224,14 @@
     border-top: none;
   }
 
+  .switch_option > img {
+    width: 24px;
+    height: 24px;
+    margin-right: 10px;
+  }
   .switch_option > span {
     margin-right: 10px;
+    flex-grow: 1;
   }
 
   .option_groups .bes_tip {

package/lib/switch.ts

@@ -29,8 +29,26 @@ export function createSwitch(options = {} as SwichOptions): HTMLElement {
 export function createSwitchOption(
   text: string,
   options: SwichOptions
+): HTMLElement
+export function createSwitchOption(
+  icon: string | undefined,
+  text: string,
+  options: SwichOptions
+): HTMLElement
+export function createSwitchOption(
+  icon: string,
+  text: string | SwichOptions,
+  options?: SwichOptions
 ): HTMLElement {
+  if (typeof text !== "string") {
+    return createSwitchOption(undefined, icon, text)
+  }
+
   const div = createElement("div", { class: "switch_option" })
+  if (icon) {
+    addElement(div, "img", { src: icon })
+  }
+
   addElement(div, "span", { textContent: text })
   div.append(createSwitch(options))
   return div

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-extension-settings",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Settings module for developing browser extensions and userscripts",
   "type": "module",
   "main": "./lib/index.ts",