fullstacked 0.12.1-1330 → 0.12.1-1355

package/fullstacked_modules/@fullstacked/ui/inputs/file/index.ts

@@ -1,48 +0,0 @@
-import { Button } from "../../primitives/button";
-import { startObserverInterval } from "../observer";
-import { InputOpts } from "../text";
-
-export function InputFile(opts?: Partial<InputOpts>) {
-    startObserverInterval();
-
-    const container = document.createElement("div");
-    container.classList.add("input-file");
-
-    if (opts?.label) {
-        container.innerHTML = `<label>${opts.label}</label>`;
-    }
-
-    const input = document.createElement("input");
-    input.type = "file";
-
-    container.append(input);
-
-    const overrideUI = document.createElement("div");
-
-    const fileName = document.createElement("span");
-    fileName.innerText = "No file chosen";
-
-    input.addEventListener("change", () => {
-        const file = input.files[0];
-        fileName.innerText = file?.name || "No file chosen";
-    });
-
-    const button = Button({
-        iconRight: "File",
-        text: "Select",
-    });
-
-    button.onclick = (e) => {
-        e.preventDefault();
-        input.click();
-    };
-
-    overrideUI.append(fileName, button);
-
-    container.append(overrideUI);
-
-    return {
-        container,
-        input,
-    };
-}

package/fullstacked_modules/@fullstacked/ui/inputs/inputs.scss

@@ -1,224 +0,0 @@
-/* 
-This file must follow the figma design
-https://www.figma.com/design/xb3JBRCvEWpbwGda03T5QQ/Mockups?node-id=158-3127
-*/
-@use "../values/colors.scss";
-@use "../values/spacing.scss";
-@use "../values/typography.scss";
-
-@mixin hide-input {
-    height: 0;
-    width: 0;
-    overflow: hidden;
-    padding: 0;
-    margin: 0;
-    position: absolute;
-    z-index: -1;
-    opacity: 0;
-}
-
-select,
-input,
-.input-predictive > div {
-    font-family: typography.$fonts;
-    background-color: colors.$light;
-    color: colors.$dark;
-    border: 0;
-    border-radius: spacing.$x-small;
-    font-size: typography.$medium;
-    padding: 6px;
-    outline-offset: 0px;
-    width: 100%;
-
-    &:focus {
-        outline: 2px solid colors.$blue;
-    }
-}
-
-.input-text,
-.input-file,
-.input-switch,
-.input-predictive,
-.input-select {
-    display: inline-flex;
-    flex-direction: column;
-    gap: spacing.$x-small;
-    font-family: typography.$fonts;
-    color: colors.$light;
-    width: 100%;
-
-    label > span {
-        font-weight: normal;
-    }
-}
-
-.input-file {
-    input {
-        @include hide-input;
-    }
-
-    > div {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: spacing.$small;
-    }
-}
-
-$handle-size: 22px;
-
-$outer-size: $handle-size * 2 + 8;
-.input-switch {
-    input {
-        @include hide-input;
-    }
-
-    > div {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-
-        user-select: none;
-        -webkit-user-select: none;
-
-        > div {
-            height: spacing.$large;
-            width: $outer-size;
-            background-color: colors.$gray;
-            padding: 4px;
-            border-radius: calc($outer-size / 2);
-            transition: 0.2s background-color;
-            cursor: pointer;
-
-            > div {
-                height: $handle-size;
-                width: $handle-size;
-                background-color: colors.$light;
-                border-radius: calc($handle-size / 2);
-                margin-left: 0;
-                transition: 0.2s margin-left;
-            }
-        }
-    }
-
-    &.checked {
-        > div {
-            > div {
-                background-color: colors.$blue;
-                > div {
-                    margin-left: $handle-size;
-                }
-            }
-        }
-    }
-}
-
-$input-radio-size: 18px;
-.input-radio,
-.input-checkbox {
-    input {
-        @include hide-input;
-    }
-
-    > div {
-        height: $input-radio-size;
-        width: $input-radio-size;
-        border-radius: 50%;
-        background-color: colors.$light;
-
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        user-select: none;
-        -webkit-user-select: none;
-
-        cursor: pointer;
-
-        > div {
-            height: $input-radio-size - 6px;
-            width: $input-radio-size - 6px;
-            border-radius: 50%;
-        }
-    }
-
-    &.checked {
-        > div > div {
-            background-color: colors.$blue;
-        }
-    }
-}
-
-.input-checkbox {
-    > div {
-        border-radius: spacing.$x-small;
-        > div {
-            border-radius: 3px;
-        }
-    }
-}
-
-.input-predictive {
-    > div {
-        > span {
-            color: colors.$gray;
-        }
-    }
-}
-
-.input-select {
-    .select-container {
-        position: relative;
-        width: 100%;
-        > div {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            pointer-events: none;
-            top: 3px;
-            right: 3px;
-            height: 24px;
-            width: 24px;
-            position: absolute;
-            background-color: colors.$blue;
-            border-radius: spacing.$x-small;
-            .icon {
-                height: 16px;
-                width: 16px;
-                transform: rotate(-90deg);
-            }
-        }
-        > select {
-            -webkit-appearance: none;
-            cursor: pointer;
-            width: 100%;
-            height: 30px;
-            font-size: typography.$small;
-            box-shadow: none;
-            color: colors.$dark;
-            &.invalid {
-                color: colors.$gray;
-            }
-        }
-    }
-}
-
-.input-text {
-    .input-container {
-        width: 100%;
-        position: relative;
-        > .button-container {
-            position: absolute;
-            height: 100%;
-            display: none;
-            flex-direction: column;
-            justify-content: center;
-            right: 0;
-            top: 0;
-            padding: 1px 5px 0;
-            &.show {
-                display: flex;
-            }
-        }
-    }
-}

package/fullstacked_modules/@fullstacked/ui/inputs/observer.ts

@@ -1,36 +0,0 @@
-// input observer
-const updateOverriddenInputs = () => {
-    const inputsChecked = document.querySelectorAll<HTMLInputElement>(
-        "input[type=checkbox], input[type=radio]",
-    );
-    inputsChecked.forEach((input) => {
-        const parent = input.parentElement;
-        if (input.checked) parent.classList.add("checked");
-        else parent.classList.remove("checked");
-    });
-
-    const inputsFile =
-        document.querySelectorAll<HTMLInputElement>("input[type=file]");
-    inputsFile.forEach((inputFile) => {
-        const file = inputFile.files[0];
-        const fileName = inputFile.nextElementSibling
-            ?.children?.[0] as HTMLSpanElement;
-        if (!fileName) return;
-        fileName.innerText = file?.name || "No file chosen";
-    });
-
-    const inputsSelect = document.querySelectorAll<HTMLSelectElement>("select");
-    inputsSelect.forEach((inputSelect) => {
-        if (inputSelect.selectedIndex) {
-            inputSelect.classList.remove("invalid");
-        } else {
-            inputSelect.classList.add("invalid");
-        }
-    });
-};
-
-let interval: ReturnType<typeof setInterval> = null;
-export function startObserverInterval() {
-    if (interval) return;
-    interval = setInterval(updateOverriddenInputs, 100);
-}

package/fullstacked_modules/@fullstacked/ui/inputs/predictive/index.ts

@@ -1,195 +0,0 @@
-type InputPredictiveOpts = {
-    label: string;
-    onChange: (value: string) => string[] | Promise<string[]>;
-};
-
-const SPACE = String.fromCharCode(160);
-
-export function InputPredictive(opts: Partial<InputPredictiveOpts>) {
-    const container = document.createElement("div");
-    container.classList.add("input-predictive");
-
-    if (opts?.label) {
-        container.innerHTML = `<label>${opts.label}</label>`;
-    }
-
-    const input = document.createElement("div");
-    input.contentEditable = "true";
-    input.autocapitalize = "off";
-    input.setAttribute("autocomplete", "off");
-    input.setAttribute("autocorrect", "off");
-
-    let prediction: HTMLSpanElement = document.createElement("span");
-    prediction.contentEditable = "false";
-    input.append(prediction);
-
-    const spaceRegex = new RegExp(SPACE, "g");
-
-    let predictions: string[] = [];
-    let predictionIndex = 0;
-
-    const prevPrediction = () => {
-        if (predictionIndex === 0) {
-            return;
-        }
-        predictionIndex -= 1;
-        prediction.innerText = predictions.at(predictionIndex);
-    };
-
-    const nextPrediction = () => {
-        if (predictionIndex === predictions.length - 1) {
-            return;
-        }
-        predictionIndex += 1;
-        prediction.innerText = predictions.at(predictionIndex);
-    };
-
-    const predict = async () => {
-        Array.from(input.children).forEach((child) => {
-            if (child.innerHTML === "" || child instanceof HTMLBRElement) {
-                child.remove();
-            }
-        });
-
-        if (prediction.getBoundingClientRect().height == 0) {
-            input.append(prediction);
-        }
-
-        let value = input.innerText.replace(spaceRegex, " ");
-
-        const prevP = prediction.innerText;
-        if (prevP) {
-            value = value.slice(0, 0 - prevP.length);
-        }
-
-        const onChangeResult = opts?.onChange?.(value);
-
-        if (onChangeResult instanceof Promise) {
-            predictions = await onChangeResult
-        } else {
-            predictions = onChangeResult
-        }
-
-        predictions = predictions.map(p => p.replace(/ /g, SPACE))
-
-        if (predictions.length) {
-            predictionIndex = 0;
-            prediction.innerText = predictions.at(predictionIndex);
-        } else {
-            prediction.innerText = "";
-        }
-    };
-
-    const replaceCursor = () => {
-        const range = document.createRange();
-        const sel = window.getSelection();
-        if (input.childNodes?.[0]) {
-            range.setStart(input.childNodes[0], getValue().length);
-        } else {
-            range.setStart(input, 0);
-        }
-        range.collapse(true);
-        sel.removeAllRanges();
-        sel.addRange(range);
-    }
-
-    const getCursorPos = () => {
-        const sel = window.getSelection();
-        return sel.anchorOffset;
-    }
-
-    const applyPrediction = () => {
-        const p = prediction?.innerText || "";
-        if (p) {
-            prediction.innerText = "";
-            input.innerText += p;
-            replaceCursor();
-        }
-    };
-
-    prediction.onclick = () => {
-        applyPrediction();
-    };
-    input.onpaste = () => {
-        prediction.innerText = "";
-        setTimeout(() => {
-            input.innerText = input.innerText;
-            predict();
-        });
-    };
-
-    input.onblur = () => {
-        prediction.remove();
-    };
-    input.onfocus = () => {
-        predict();
-
-        let value = input.innerText;
-        const prevP = prediction.innerText;
-        if (prevP) {
-            value = value.slice(0, 0 - prevP.length);
-        }
-
-        if (value) {
-            setTimeout(replaceCursor);
-        }
-    };
-    input.onkeyup = (e) => {
-        const { key } = e;
-        if (key === "ArrowUp" || key === "ArrowDown") {
-            return;
-        }
-        predict();
-    };
-
-    input.onkeydown = (e: KeyboardEvent) => {
-        const { key } = e;
-
-        if (key === "ArrowUp" || key === "ArrowDown") {
-            e.preventDefault();
-            return key === "ArrowUp" ? prevPrediction() : nextPrediction();
-        }
-
-        const prevP = prediction.innerText;
-        if (e.key === "Tab") {
-            e.preventDefault();
-
-            if (prediction.innerText != "") {
-                applyPrediction();
-            } else if (input.innerText && input.innerText.at(-1) !== SPACE) {
-                input.innerText += SPACE;
-                replaceCursor();
-            }
-
-        } else if (
-            e.key === "ArrowRight" && 
-            prediction.innerText &&
-            getCursorPos() === getValue().length
-        ) {
-            e.preventDefault();
-            applyPrediction();
-        } else if (prevP && key == prevP.at(0)) {
-            prediction.innerText = prediction.innerText.slice(1);
-        } else {
-            prediction.innerText = "";
-        }
-    };
-
-    const getValue = () => {
-        const clone = input.cloneNode(true) as HTMLDivElement;
-        clone.querySelector("span")?.remove();
-        return clone.innerText.replace(spaceRegex, " ");
-    }
-
-    container.append(input);
-
-    return {
-        container,
-        input,
-        getValue,
-        clear: () => {
-            input.innerText = ""
-            replaceCursor();
-        }
-    };
-}

package/fullstacked_modules/@fullstacked/ui/inputs/radio/index.ts

@@ -1,28 +0,0 @@
-import { startObserverInterval } from "../observer";
-
-export function InputRadio() {
-    startObserverInterval();
-    
-    const container = document.createElement("div");
-    container.classList.add("input-radio");
-
-    const input = document.createElement("input");
-    input.type = "radio";
-
-    input.addEventListener("change", () => {
-        if (input.checked) container.classList.add("checked");
-        else container.classList.remove("checked");
-    });
-
-    const overrideUI = document.createElement("div");
-    overrideUI.onclick = () => input.click();
-
-    overrideUI.innerHTML = "<div></div>";
-
-    container.append(input, overrideUI);
-
-    return {
-        container,
-        input
-    };
-}

package/fullstacked_modules/@fullstacked/ui/inputs/select/index.ts

@@ -1,125 +0,0 @@
-import { startObserverInterval } from "../observer";
-import { Icon } from "../../ui";
-
-export type InputSelectOpts = {
-    label: string;
-    placeholder: string;
-};
-
-export type InputSelectOption = {
-    name: string;
-    id?: string;
-    selected?: boolean;
-    disabled?: boolean;
-};
-
-export function InputSelect(opts: Partial<InputSelectOpts>) {
-    startObserverInterval();
-
-    const container = document.createElement("div");
-    container.classList.add("input-select");
-
-    if (opts.label) {
-        container.innerHTML = `<label>${opts.label}</label>`;
-    }
-
-    const selectAndIconContainer = document.createElement("div");
-    selectAndIconContainer.classList.add("select-container");
-    const select = document.createElement("select");
-    const icon = document.createElement("div");
-    icon.append(Icon("Arrow"));
-    selectAndIconContainer.append(select, icon);
-    container.append(selectAndIconContainer);
-
-    const placeholderOption = document.createElement("option");
-    placeholderOption.selected = true;
-    placeholderOption.innerText = opts.placeholder || "Choose an option";
-    select.append(placeholderOption);
-
-    select.classList.add("invalid");
-
-    const selectOptions: InputSelectOption[] = [];
-
-    const addOptions = (option: InputSelectOption) => {
-        selectOptions.push(option);
-        const el = document.createElement("option");
-        el.innerText = option.name;
-        el.disabled = option.disabled;
-        if (!el.disabled) {
-            el.value = selectOptions.length.toString();
-        }
-        el.selected = option.selected;
-        select.append(el);
-    };
-
-    const disablePlaceholder = () => {
-        placeholderOption.disabled = true;
-    };
-
-    select.onfocus = disablePlaceholder;
-    select.ontouchstart = disablePlaceholder;
-    select.onclick = disablePlaceholder;
-    select.onblur = () => {
-        placeholderOption.disabled = false;
-    };
-
-    const indexOfIdOrName = (idOrName: string) => {
-        return selectOptions.findIndex((item) => {
-            if (item.id) {
-                return item.id === idOrName;
-            }
-            return item.name === idOrName;
-        });
-    };
-
-    let selectAPI = {
-        get value() {
-            const index = select.selectedIndex - 1;
-            if (index === -1) {
-                return undefined;
-            }
-            const item = selectOptions.at(index);
-            return item.id || item.name;
-        },
-        set value(v: string) {
-            const indexOf = indexOfIdOrName(v);
-            if (indexOf === -1) return;
-            select.selectedIndex = indexOf + 1;
-        },
-        onchange: (item?: string, index?: number): any => {
-            return { item, index };
-        },
-    };
-
-    select.onchange = () => {
-        const index = select.selectedIndex - 1;
-        const item = selectOptions.at(index);
-        const value = item.id || item.name;
-        selectAPI.value = value;
-        selectAPI.onchange(value, index);
-    };
-
-    return {
-        container,
-        select: selectAPI,
-        options: {
-            get() {
-                return selectOptions;
-            },
-            add(...options: InputSelectOption[]) {
-                options.forEach(addOptions);
-            },
-            remove(nameOrId: string) {
-                const indexOf = indexOfIdOrName(nameOrId);
-                if (indexOf === -1) return;
-
-                const selectedIndex = select.selectedIndex - 1;
-                if (indexOf === selectedIndex) {
-                    select.selectedIndex = 0;
-                }
-
-                selectOptions.splice(indexOf, 1);
-            },
-        },
-    };
-}

package/fullstacked_modules/@fullstacked/ui/inputs/switch/index.ts

@@ -1,37 +0,0 @@
-import { startObserverInterval } from "../observer";
-import { InputOpts } from "../text";
-
-export function InputSwitch(opts?: Partial<InputOpts>) {
-    startObserverInterval();
-    
-    const container = document.createElement("div");
-    container.classList.add("input-switch");
-
-    if (opts?.label) {
-        container.innerHTML = `<label>${opts.label}</label>`;
-    }
-
-    const input = document.createElement("input");
-    input.type = "checkbox";
-
-    input.addEventListener("change", () => {
-        if (input.checked) container.classList.add("checked");
-        else container.classList.remove("checked");
-    });
-
-    container.append(input);
-
-    const overrideUI = document.createElement("div");
-
-    const switchEl = document.createElement("div");
-    switchEl.onclick = () => input.click();
-
-    switchEl.innerHTML = `<div></div>`;
-    overrideUI.append(switchEl);
-    container.append(overrideUI);
-
-    return {
-        input,
-        container
-    };
-}