@stanko/ctrls 0.3.4 → 0.4.0

package/README.md

@@ -29,7 +29,7 @@ Define controls as an array, then instantiate the `Ctrls` class:
 
 ```ts
 import { Ctrls } from "@stanko/ctrls";
-import type { TypedControlConfig } from "@stanko/ctrls";
+import type { ConfigItem } from "@stanko/ctrls";
 
 // Import CSS
 import "@stanko/ctrls/dist/ctrls.css";
@@ -58,7 +58,7 @@ const config = [
   // - speed, shape and size
 
   // Casting the config to enable editor's code completion
-] as const satisfies readonly TypedControlConfig[];
+] as const satisfies readonly ConfigItem[];
 
 // Create the instance of Ctrls
 export const options = new Ctrls(config, {
@@ -138,11 +138,20 @@ All controls share the following properties:
 ```ts
 {
   // --- Mandatory --- //
-  type: CtrlType; // "seed" | "easing" | "boolean" | "range" | "dual-range" | "radio"
+  type: CtrlType; // "seed" | "easing" | "boolean" | "range" | "dual-range" | "radio" | "group"
+  // Name of the component.
+  // 
+  // It will be converted to camel case and used in the values object
+  // This might counter-intuitive for some people,
+  // but it is my personal preference to have properties named in camel case when using them in code
+  // 
+  // However, names are going to be converted to kebab case when used in the hash,
+  // because it is nicer that URL be all lowercase
   name: string;
 
   // --- Optional --- //
-  // If passed, it will be used instead of the name
+  // If passed, it will be used instead of the name,
+  // if not, name will be be converted to space case and used as a label.
   label?: string;
   // Depends on the control type, the default value for the control
   defaultValue?: T;
@@ -332,6 +341,31 @@ Example:
 
 </div>
 
+### File
+
+File input.
+
+```ts
+{
+  // Optional
+  accept?: string; // a comma separated list of allowed file types
+}
+```
+
+Example:
+
+<div class="example">
+
+```json
+{
+  "type": "file",
+  "name": "background",
+  "accept": "image/*"
+}
+```
+
+</div>
+
 ### Group
 
 Collapsible group of controls. All values are going to be nested in an object using the group's name.
@@ -339,7 +373,10 @@ Collapsible group of controls. All values are going to be nested in an object us
 ```ts
 {
   // Mandatory
-  controls: ConfigItem[]
+  controls: ConfigItem[];
+  
+  // Optional
+  isCollapsed?: boolean;
 }
 ```
 
@@ -366,6 +403,42 @@ Example:
 
 </div>
 
+### HTML
+
+Custom HTML to be rendered. You'll need to create your element and add it to the config.
+
+Doesn't influence the values object as it doesn't have a value.
+
+```ts
+{
+  // Mandatory
+  html: HTMLElement;
+}
+```
+
+Example:
+
+```ts
+const downloadButton = document.createElement('button');
+downloadButton.innerHTML = "PNG";
+// Add your styles
+downloadButton.addEventListener('click', () => {
+  alert("Download button clicked");
+})
+```
+
+<div class="example">
+
+```json
+{
+  "type": "html",
+  "name": "download",
+  "html": downloadButton
+}
+```
+
+</div>
+
 ## Theming
 
 Ctrls uses CSS variables for theming. There are many you can adjust, but I recommend starting with these four:
@@ -411,6 +484,9 @@ Thank you for stopping by! If you end up using Ctrls, please let me know, I woul
 * [ ] Allow users to pass a custom PRNG lib
 * [ ] Hash storage - check if there is an instance using hash storage already
 * [ ] Storage - local storage
+* [ ] Check if `onInput` si triggered when it should
+* [ ] Use dom helpers everywhere
+* [x] `toHtmlId(this.name)` => `toHtmlId(this.id)`
 * [x] Add `name` and `id` to inputs
 * [x] TypeDef bug - easing presets should be optional
 * [x] Add title which collapses the controls

package/dist/ctrls/ctrl-boolean.d.ts

@@ -1,6 +1,6 @@
-import type { Ctrl, CtrlType, CtrlChangeHandler, CtrlConfig } from ".";
+import type { Ctrl, CtrlItemType, CtrlChangeHandler, CtrlConfig } from "./types";
 export declare class BooleanCtrl implements Ctrl<boolean> {
-    type: CtrlType;
+    type: CtrlItemType;
     id: string;
     group?: string;
     name: string;

package/dist/ctrls/ctrl-boolean.js

@@ -16,7 +16,7 @@ export class BooleanCtrl {
             return value.toString();
         };
         this.buildUI = () => {
-            const id = toHtmlId(this.name);
+            const id = toHtmlId(this.id);
             const input = document.createElement("input");
             input.classList.add("ctrls__boolean-input");
             input.setAttribute("type", "checkbox");

package/dist/ctrls/ctrl-dual-range.d.ts

@@ -1,5 +1,5 @@
 import DualRangeInput from "@stanko/dual-range-input";
-import type { Ctrl, CtrlChangeHandler, CtrlType, ConfigFor } from ".";
+import type { Ctrl, CtrlChangeHandler, CtrlItemType, ConfigFor } from "./types";
 export type DualRangeControlOptions = {
     min: number;
     max: number;
@@ -10,7 +10,7 @@ export type DualRangeValue = {
     max: number;
 };
 export declare class DualRangeCtrl implements Ctrl<DualRangeValue> {
-    type: CtrlType;
+    type: CtrlItemType;
     id: string;
     group?: string;
     name: string;

package/dist/ctrls/ctrl-dual-range.js

@@ -29,7 +29,7 @@ export class DualRangeCtrl {
         };
         this.buildUI = () => {
             const { min, max, step, value } = this;
-            const id = toHtmlId(this.name);
+            const id = toHtmlId(this.id);
             const changeHandler = () => {
                 this.value = {
                     min: parseFloat(minInput.value),

package/dist/ctrls/ctrl-easing.d.ts

@@ -1,7 +1,7 @@
-import type { Ctrl, CtrlChangeHandler, CtrlType, ConfigFor } from ".";
+import type { Ctrl, CtrlChangeHandler, CtrlItemType, ConfigFor } from "./types";
 export type Easing = [number, number, number, number];
 export declare class EasingCtrl implements Ctrl<Easing> {
-    type: CtrlType;
+    type: CtrlItemType;
     id: string;
     group?: string;
     name: string;

package/dist/ctrls/ctrl-easing.js

@@ -52,7 +52,7 @@ export class EasingCtrl {
         };
         this.buildUI = () => {
             const { value } = this;
-            const id = toHtmlId(this.name);
+            const id = toHtmlId(this.id);
             const line1 = document.createElementNS("http://www.w3.org/2000/svg", "line");
             line1.setAttribute("class", "ctrls__easing-line ctrls__easing-line--1");
             line1.setAttribute("x1", "0");

package/dist/ctrls/ctrl-file.d.ts

@@ -0,0 +1,27 @@
+import type { Ctrl, CtrlChangeHandler, CtrlConfig, CtrlItemType } from "./types";
+export declare class FileCtrl implements Ctrl<File | null> {
+    id: string;
+    type: CtrlItemType;
+    name: string;
+    label: string;
+    group: string;
+    value: File | null;
+    isRandomizationDisabled: boolean;
+    onChange: CtrlChangeHandler;
+    onInput: CtrlChangeHandler;
+    element: HTMLElement;
+    input: HTMLInputElement;
+    preview: HTMLDivElement;
+    accept: string;
+    constructor(config: CtrlConfig<File | null>, onChange: CtrlChangeHandler, onInput: CtrlChangeHandler);
+    buildUI: () => {
+        element: HTMLDivElement;
+        input: HTMLInputElement;
+        preview: HTMLDivElement;
+    };
+    update: (file: File | null) => void;
+    parse: () => null;
+    getRandomValue: () => null;
+    getDefaultValue: () => null;
+    valueToString: () => string;
+}

package/dist/ctrls/ctrl-file.js

@@ -0,0 +1,99 @@
+import { toHtmlId } from "../utils/string-utils";
+import { dom } from "./dom";
+import { closeIcon } from "../utils/icons";
+const IMAGE_EXTENSIONS = ["jpg", "jpeg", "png", "gif", "webp", "svg+xml"];
+export class FileCtrl {
+    constructor(config, onChange, onInput) {
+        this.type = "file";
+        this.buildUI = () => {
+            const id = toHtmlId(this.id);
+            const input = dom.input("ctrls__file-input", {
+                type: "file",
+                id: id,
+                name: id,
+            });
+            input.addEventListener("change", () => {
+                this.update(input.files ? input.files[0] : null);
+                this.onChange(this);
+                this.onInput(this);
+            });
+            const fakeInput = dom.label("ctrls__file-fake-input ctrls__btn ctrls__btn--sm", { for: id });
+            fakeInput.innerHTML = "select file";
+            if (this.accept) {
+                fakeInput.innerHTML += `<span>${this.accept}</span>`;
+            }
+            const clearButton = dom.button("ctrls__file-clear ctrls__btn");
+            clearButton.innerHTML = closeIcon;
+            clearButton.addEventListener("click", () => {
+                if (input.files) {
+                    this.update(null);
+                    this.onChange(this);
+                    this.onInput(this);
+                }
+            });
+            const top = dom.div("ctrls__file-top");
+            top.append(input);
+            top.append(fakeInput);
+            top.append(clearButton);
+            const preview = dom.div("ctrls__file-preview");
+            const right = dom.div("ctrls__control-right");
+            right.append(top);
+            right.append(preview);
+            const label = dom.label("ctrls__control-label", {
+                for: id,
+            });
+            label.textContent = this.label;
+            const element = dom.div("ctrls__control ctrls__control--file");
+            element.appendChild(label);
+            element.appendChild(right);
+            return {
+                element,
+                input,
+                preview,
+            };
+        };
+        this.update = (file) => {
+            this.value = file;
+            if (file) {
+                const item = document.createElement("figure");
+                item.classList.add("ctrls__file-preview-item");
+                if (IMAGE_EXTENSIONS.includes(file.type.split("/")[1])) {
+                    console.log(URL.createObjectURL(file), file);
+                    const img = document.createElement("img");
+                    img.src = URL.createObjectURL(file);
+                    img.alt = file.name;
+                    img.classList.add("ctrls__file-image");
+                    item.appendChild(img);
+                }
+                const label = document.createElement("figcaption");
+                label.classList.add("ctrls__file-label");
+                label.textContent = file.name;
+                item.appendChild(label);
+                this.preview.replaceChildren(item);
+            }
+            else {
+                this.preview.innerHTML = "";
+                this.input.value = "";
+            }
+        };
+        // Files can't be preserved in the URL hash,
+        // so these are only placeholders to satisfy the interface
+        this.parse = () => null;
+        this.getRandomValue = () => null;
+        this.getDefaultValue = () => null;
+        this.valueToString = () => "";
+        this.name = config.name;
+        this.id = config.id || config.name;
+        this.label = config.label || config.name;
+        this.group = config.group || "";
+        this.value = null;
+        this.accept = config.accept || "";
+        this.isRandomizationDisabled = config.isRandomizationDisabled || false;
+        this.onChange = onChange;
+        this.onInput = onInput;
+        const { input, element, preview } = this.buildUI();
+        this.input = input;
+        this.element = element;
+        this.preview = preview;
+    }
+}

package/dist/ctrls/ctrl-html.d.ts

@@ -0,0 +1,2 @@
+import type { HTMLConfig } from "./types";
+export declare const getHTMLControlElement: (config: HTMLConfig) => HTMLDivElement;

package/dist/ctrls/ctrl-html.js

@@ -0,0 +1,13 @@
+export const getHTMLControlElement = (config) => {
+    const right = document.createElement("div");
+    right.classList.add("ctrls__control-right");
+    right.append(config.html);
+    const label = document.createElement("label");
+    label.textContent = config.label || config.name;
+    label.classList.add("ctrls__control-label");
+    const element = document.createElement("div");
+    element.classList.add("ctrls__control", "ctrls__control--seed");
+    element.appendChild(label);
+    element.appendChild(right);
+    return element;
+};

package/dist/ctrls/ctrl-radio.d.ts

@@ -1,4 +1,4 @@
-import type { Ctrl, CtrlChangeHandler, CtrlType, ConfigFor } from ".";
+import type { Ctrl, CtrlChangeHandler, CtrlItemType, ConfigFor } from "./types";
 type Option = {
     label: string;
     value: string;
@@ -7,7 +7,7 @@ export type RadioControlOptions = {
     items: Option[];
 };
 export declare class RadioCtrl implements Ctrl<string> {
-    type: CtrlType;
+    type: CtrlItemType;
     htmlId: string;
     id: string;
     group?: string;

package/dist/ctrls/ctrl-range.d.ts

@@ -1,6 +1,6 @@
-import type { Ctrl, CtrlChangeHandler, CtrlType, ConfigFor } from ".";
+import type { Ctrl, CtrlChangeHandler, CtrlItemType, ConfigFor } from "./types";
 export declare class RangeCtrl implements Ctrl<number> {
-    type: CtrlType;
+    type: CtrlItemType;
     id: string;
     group?: string;
     name: string;

package/dist/ctrls/ctrl-range.js

@@ -20,7 +20,7 @@ export class RangeCtrl {
         };
         this.buildUI = () => {
             const { min, max, step, value } = this;
-            const id = toHtmlId(this.name);
+            const id = toHtmlId(this.id);
             const input = document.createElement("input");
             input.classList.add("ctrls__range-input");
             input.setAttribute("type", "range");

package/dist/ctrls/ctrl-seed.d.ts

@@ -1,6 +1,6 @@
-import type { Ctrl, CtrlChangeHandler, CtrlConfig, CtrlType } from ".";
+import type { Ctrl, CtrlChangeHandler, CtrlConfig, CtrlItemType } from "./types";
 export declare class SeedCtrl implements Ctrl<string> {
-    type: CtrlType;
+    type: CtrlItemType;
     id: string;
     group?: string;
     name: string;

package/dist/ctrls/ctrl-seed.js

@@ -21,7 +21,7 @@ export class SeedCtrl {
         };
         this.buildUI = () => {
             const { value } = this;
-            const id = toHtmlId(this.name);
+            const id = toHtmlId(this.id);
             const input = document.createElement("input");
             input.classList.add("ctrls__seed-input");
             input.setAttribute("type", "text");

package/dist/ctrls/dom.d.ts

@@ -0,0 +1,12 @@
+type Attrs = Record<string, string | number> & {
+    for?: string;
+};
+export declare const dom: {
+    el: <T extends keyof HTMLElementTagNameMap>(tag: T, className?: string, attrs?: Attrs) => HTMLElementTagNameMap[T];
+    div: (className?: string, attrs?: Attrs) => HTMLDivElement;
+    span: (className?: string, attrs?: Attrs) => HTMLSpanElement;
+    input: (className?: string, attrs?: Attrs) => HTMLInputElement;
+    label: (className?: string, attrs?: Attrs) => HTMLLabelElement;
+    button: (className?: string, attrs?: Attrs) => HTMLButtonElement;
+};
+export {};

package/dist/ctrls/dom.js

@@ -0,0 +1,16 @@
+const el = (tag, className = "", attrs = {}) => {
+    const element = document.createElement(tag);
+    element.className = className;
+    for (const [key, value] of Object.entries(attrs)) {
+        element.setAttribute(key, value.toString());
+    }
+    return element;
+};
+export const dom = {
+    el,
+    div: (className = "", attrs = {}) => el("div", className, attrs),
+    span: (className = "", attrs = {}) => el("span", className, attrs),
+    input: (className = "", attrs = {}) => el("input", className, attrs),
+    label: (className = "", attrs = {}) => el("label", className, attrs),
+    button: (className = "", attrs = {}) => el("button", className, attrs),
+};

package/dist/ctrls/index.d.ts

@@ -1,127 +1,4 @@
-import BezierEasing from "bezier-easing";
-import { BooleanCtrl } from "./ctrl-boolean";
-import { DualRangeCtrl, type DualRangeValue } from "./ctrl-dual-range";
-import { EasingCtrl, type Easing } from "./ctrl-easing";
-import { RadioCtrl } from "./ctrl-radio";
-import { RangeCtrl } from "./ctrl-range";
-import { SeedCtrl } from "./ctrl-seed";
-export interface PRNG {
-    (): number;
-}
-export type CtrlType = "boolean" | "range" | "radio" | "seed" | "easing" | "dual-range" | "group";
-export type CtrlChangeHandler = (control: CtrlComponent) => void;
-export type CtrlConfig<T = unknown> = {
-    type: CtrlType;
-    id?: string;
-    name: string;
-    group?: string;
-    label?: string;
-    defaultValue?: T;
-    isRandomizationDisabled?: boolean;
-};
-export interface Ctrl<T> {
-    id: string;
-    group?: string;
-    name: string;
-    label: string;
-    type: CtrlType;
-    isRandomizationDisabled: boolean;
-    onChange: CtrlChangeHandler;
-    parse: (value: string) => T;
-    getRandomValue: () => T;
-    getDefaultValue: () => T;
-    buildUI: () => unknown;
-    valueToString: (value?: T) => string;
-    update: (value: T) => void;
-    element: HTMLElement;
-}
-export interface CtrlTypeMap {
-    boolean: {
-        value: boolean;
-    };
-    range: {
-        value: number;
-        min: number;
-        max: number;
-        step?: number;
-    };
-    radio: {
-        value: string;
-        items: Record<string, string>;
-        columns?: 1 | 2 | 3 | 4 | 5;
-    };
-    seed: {
-        value: string;
-    };
-    easing: {
-        value: Easing;
-        presets?: Record<string, Easing>;
-    };
-    "dual-range": {
-        value: DualRangeValue;
-        min: number;
-        max: number;
-        step?: number;
-    };
-    group: {
-        value: Record<string, unknown>;
-        controls: readonly ConfigItem[];
-        isRandomizationDisabled?: boolean;
-    };
-}
-export type TypedControlConfig = {
-    [K in CtrlType]: {
-        type: K;
-        id?: string;
-        name: string;
-        group?: string;
-        label?: string;
-        defaultValue?: CtrlTypeMap[K]["value"];
-        isRandomizationDisabled?: boolean;
-    } & Omit<CtrlTypeMap[K], "value">;
-}[CtrlType];
-export type GroupConfig = {
-    type: "group";
-    name: string;
-    label?: string;
-    controls: readonly TypedControlConfig[];
-    isRandomizationDisabled?: boolean;
-};
-export type ConfigItem = TypedControlConfig | GroupConfig;
-export type ConfigFor<T extends CtrlType> = Extract<TypedControlConfig, {
-    type: T;
-}>;
-type ExtractValues<Configs extends readonly ConfigItem[]> = {
-    [C in Extract<Configs[number], {
-        type: Exclude<CtrlType, "group">;
-    }> as C["name"]]: CtrlTypeMap[C["type"]]["value"];
-} & {
-    [C in Extract<Configs[number], {
-        type: "group";
-    }> as C["name"]]: OptionsMap<C["controls"]>;
-};
-type DerivedProps<Configs extends readonly ConfigItem[]> = {
-    [C in Extract<Configs[number], {
-        type: "easing";
-    }> as `${C["name"]}Easing`]: ReturnType<typeof BezierEasing>;
-} & {
-    [C in Extract<Configs[number], {
-        type: "seed";
-    }> as `${C["name"]}Rng`]: PRNG;
-} & {
-    [C in Extract<Configs[number], {
-        type: "group";
-    }> as C["name"]]: DerivedProps<C["controls"]>;
-};
-type OptionsMap<Configs extends readonly ConfigItem[]> = ExtractValues<Configs> & DerivedProps<Configs>;
-type ControlsOptions = {
-    showRandomizeButton?: boolean;
-    storage?: "hash" | "none";
-    theme?: "system" | "light" | "dark";
-    parent?: Element;
-    title?: string;
-};
-type CtrlComponent = BooleanCtrl | RangeCtrl | RadioCtrl | SeedCtrl | EasingCtrl | DualRangeCtrl;
+import type { CtrlComponent, ConfigItem, ControlsOptions, TypedControlConfig, OptionsMap } from "./types";
 export declare class Ctrls<Configs extends readonly ConfigItem[]> {
     options: ControlsOptions;
     controls: CtrlComponent[];
@@ -130,8 +7,8 @@ export declare class Ctrls<Configs extends readonly ConfigItem[]> {
     onChange?: (updatedValues: Partial<ReturnType<typeof this.getValues>>) => void;
     onInput?: (updatedValues: Partial<ReturnType<typeof this.getValues>>) => void;
     constructor(configs: Configs, options?: ControlsOptions);
-    registerControl: (config: TypedControlConfig, onChangeControlHandler: (control: CtrlComponent) => void, onInputControlHandler: (control: CtrlComponent) => void, group?: string) => void;
-    buildUI: () => HTMLDivElement;
+    processControls: (configs: Configs) => HTMLElement[];
+    registerControl: (config: TypedControlConfig, onChangeControlHandler: (control: CtrlComponent) => void, onInputControlHandler: (control: CtrlComponent) => void, group?: string) => CtrlComponent;
     toggleVisibility: () => void;
     addHashListeners: () => void;
     getHash: () => string;
@@ -141,4 +18,3 @@ export declare class Ctrls<Configs extends readonly ConfigItem[]> {
     getValues(): OptionsMap<Configs>;
     randomize: () => void;
 }
-export {};