@stackoverflow/stacks 3.0.0-beta.3 → 3.0.0-beta.30

package/lib/components/uploader/uploader.less

@@ -1,205 +0,0 @@
-.s-uploader {
-    // COMPONENT-SPECIFIC CONSTANTS
-    --_up-bg-b-image: url("data:image/svg+xml;,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23000000' stroke-width='8' stroke-dasharray='7%2c 22' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); // Keeping this a custom property to save a few bytes
-    // COMPONENT-SPECIFIC CUSTOM PROPERTIES
-    --_up-bg: var(--black-100);
-    --_up-bg-focus: var(--black-150);
-    --_up-bg-bc: var(--black-250);
-    --_up-focus-ring-color: var(--focus-ring);
-
-    // CONTEXTUAL STYLES
-    .highcontrast-mode({
-        --_up-bg-bc-hc: var(--black-400);
-        &.has-error {
-            --_up-bg-bc-hc-state: var(--red-500);
-        }
-        &.has-success {
-            --_up-bg-bc-hc-state: var(--green-400);
-        }
-        &.has-warning {
-            --_up-bg-bc-hc-state: var(--yellow-500);
-        }
-    });
-
-    // STATES
-    &.has-error,
-    &.has-success,
-    &.has-warning {
-        .s-link {
-            color: var(--_up-link-fc);
-        }
-    }
-
-    &.has-error {
-        --_up-bg: var(--red-100);
-        --_up-bg-focus: var(--red-200);
-        --_up-bg-bc: var(--red-300);
-        --_up-focus-ring-color: var(--focus-ring-error);
-        --_up-link-fc: var(--red-500);
-    }
-
-    &.has-success {
-        --_up-bg: var(--green-100);
-        --_up-bg-focus: var(--green-200);
-        --_up-bg-bc: var(--green-300);
-        --_up-focus-ring-color: var(--focus-ring-success);
-        --_up-link-fc: var(--green-400);
-    }
-
-    &.has-warning {
-        --_up-bg: var(--yellow-100);
-        --_up-bg-focus: var(--yellow-200);
-        --_up-bg-bc: var(--yellow-300);
-        --_up-focus-ring-color: var(--focus-ring-warning);
-        --_up-link-fc: var(--yellow-500);
-    }
-
-    &.is-active {
-        --_up-bg: var(--black-150);
-        --_up-bg-bc: var(--black-300);
-    }
-
-    &.is-disabled {
-        opacity: var(--_o-disabled-static);
-    }
-
-    //  CHILD ELEMENTS
-    & &--container {
-        &:before { // Add the dashed border as an SVG background mask
-            -webkit-mask-image: var(--_up-bg-b-image);
-            mask-image: var(--_up-bg-b-image);
-            background-color: var(--_up-bg-bc-hc-state, var(--_up-bg-bc-hc, var(--_up-bg-bc)));
-            border-radius: var(--br-md);
-            content: '';
-            display: block;
-            inset: 0;
-            position: absolute;
-        }
-
-        align-items: center;
-        background-color: var(--_up-bg);
-        border-radius: var(--br-md);
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        min-height: var(--su-static128);
-        padding: var(--su8) var(--su16);
-        position: relative;
-        text-align: center;
-    }
-
-    & &--input {
-        &:focus:focus-visible + .s-uploader--container {
-            .focus-styles();
-        }
-
-        &:focus:focus-visible + .s-uploader--container,
-        .s-uploader--container.focus {
-            background-color: var(--_up-bg-focus);
-        }
-
-        cursor: pointer;
-        height: 100%;
-        inset: 0;
-        opacity: 0;
-        position: absolute;
-        width: 100%;
-        z-index: var(--zi-selected);
-    }
-
-    & &--preview {
-        max-width: 100%;
-        pointer-events: none;
-    }
-
-    & &--preview-thumbnail {
-        .highcontrast-mode({
-            border: var(--su-static1) solid var(--black);
-        });
-
-        &:is(img) {
-            object-fit: scale-down;
-            object-position: center;
-        }
-
-        &:not(img) {
-            padding: var(--su16);
-        }
-
-        background-color: var(--white);
-        border-radius: var(--br-md);
-        box-shadow: var(--bs-md);
-        max-height: var(--su-static128);
-        max-width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    & &--previews {
-        &.has-multiple {
-            display: block;
-            height: auto;
-            padding: var(--su8) var(--su2);
-            width: 100%;
-
-            .s-uploader--preview {
-                &:after {
-                    content: attr(data-filename);
-                    display: block;
-                    margin-left: var(--su12);
-                    max-width: 100%;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                }
-
-                align-items: center;
-                display: flex;
-                padding: var(--su6) 0;
-                width: 100%;
-            }
-
-            .s-uploader--preview-thumbnail {
-                &:is(img) {
-                    object-fit: cover;
-                }
-                &:not(img) {
-                    background-image: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='%23535A60' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3 3a2 2 0 012-2h6l4 4v10a2 2 0 01-2 2H5a2 2 0 01-2-2V3zm7-1.5V6h4.5L10 1.5z'%3E%3C/path%3E%3C/svg%3E");
-                    background-position: center;
-                    background-repeat: no-repeat;
-                }
-
-                color: transparent;
-                height: var(--su-static32);
-                flex-shrink: 0;
-                width: var(--su-static32);
-            }
-        }
-
-        max-width: 100%;
-        text-align: left;
-    }
-
-    & &--previews-heading {
-        color: var(--black-600);
-        font-size: var(--fs-body2);
-        font-weight: 700;
-        padding-bottom: var(--su8);
-    }
-
-    & &--reset {
-        position: absolute;
-        right: var(--su8);
-        top: var(--su8);
-        z-index: var(--zi-active);
-    }
-
-    // This is for safari shadow DOM
-    // see https://github.com/StackExchange/Stacks/pull/690#issuecomment-861028193
-    input[type="file"]::file-selector-button {
-        cursor: pointer;
-    }
-
-    position: relative;
-}

package/lib/components/uploader/uploader.ts

@@ -1,207 +0,0 @@
-import * as Stacks from "../../stacks";
-
-interface FilePreview {
-    data?: string | ArrayBuffer;
-    name: string;
-    type: string;
-}
-
-export class UploaderController extends Stacks.StacksController {
-    static targets = ["input", "previews", "uploader"];
-
-    declare readonly inputTarget: HTMLInputElement;
-    declare readonly previewsTarget: HTMLElement;
-    declare readonly uploaderTarget: HTMLElement;
-
-    private boundDragEnter!: () => void;
-    private boundDragLeave!: () => void;
-
-    private static readonly FILE_DISPLAY_LIMIT = 10;
-    private static readonly MAX_FILE_SIZE = 1024 * 1024 * 10; // 10 MB
-
-    connect() {
-        super.connect();
-        this.boundDragEnter = this.handleUploaderActive.bind(this, true);
-        this.boundDragLeave = this.handleUploaderActive.bind(this, false);
-
-        this.inputTarget.addEventListener("dragenter", this.boundDragEnter);
-        this.inputTarget.addEventListener("dragleave", this.boundDragLeave);
-    }
-
-    disconnect() {
-        this.inputTarget.removeEventListener("dragenter", this.boundDragEnter);
-        this.inputTarget.removeEventListener("dragleave", this.boundDragLeave);
-        super.disconnect();
-    }
-
-    /**
-     * Handles rendering the file preview state on input change
-     */
-    handleInput() {
-        this.previewsTarget.innerHTML = "";
-
-        if (!this.inputTarget.files) {
-            return;
-        }
-
-        const count = this.inputTarget.files.length;
-        this.getDataURLs(
-            this.inputTarget.files,
-            UploaderController.FILE_DISPLAY_LIMIT
-        )
-            .then((res: FilePreview[]) => {
-                this.handleVisible(true);
-                const hasMultipleFiles = res.length > 1;
-
-                if (hasMultipleFiles) {
-                    const headingElement = document.createElement("div");
-                    headingElement.classList.add(
-                        "s-uploader--previews-heading"
-                    );
-                    headingElement.innerText =
-                        res.length < count
-                            ? `Showing ${res.length} of ${count} files`
-                            : `${count} items`;
-                    this.previewsTarget.appendChild(headingElement);
-                    this.previewsTarget.classList.add("has-multiple");
-                } else {
-                    this.previewsTarget.classList.remove("has-multiple");
-                }
-                res.forEach((file) => this.addFilePreview(file));
-                this.handleUploaderActive(true);
-            })
-            // TODO consider rendering an error message
-            .catch(() => null);
-    }
-
-    /**
-     * Resets the Uploader to initial state
-     */
-    reset() {
-        this.inputTarget.value = "";
-        this.previewsTarget.innerHTML = "";
-        this.handleVisible(false);
-    }
-
-    /**
-     * Set hide/show and disabled state on elements depending on preview state
-     * @param  {boolean} shouldPreview - Uploader is entering a preview state
-     */
-    private handleVisible(shouldPreview: boolean) {
-        const { scope } = this.targets;
-        const hideElements = scope.findAllElements(
-            "[data-s-uploader-hide-on-input]"
-        );
-        const showElements = scope.findAllElements(
-            "[data-s-uploader-show-on-input]"
-        );
-        const enableElements = scope.findAllElements(
-            "[data-s-uploader-enable-on-input]"
-        );
-
-        if (shouldPreview) {
-            hideElements.forEach((el) => {
-                el.classList.add("d-none");
-            });
-            showElements.forEach((el) => {
-                el.classList.remove("d-none");
-            });
-            enableElements.forEach((el) => {
-                el.removeAttribute("disabled");
-            });
-        } else {
-            hideElements.forEach((el) => {
-                el.classList.remove("d-none");
-            });
-            showElements.forEach((el) => {
-                el.classList.add("d-none");
-            });
-            enableElements.forEach((el) => {
-                el.setAttribute("disabled", "true");
-            });
-            this.handleUploaderActive(false);
-        }
-    }
-
-    /**
-     * Adds a DOM element to preview a selected file
-     * @param  {FilePreview} file
-     */
-    private addFilePreview(file: FilePreview) {
-        if (!file) {
-            return;
-        }
-
-        const previewElement = document.createElement("div");
-        let thumbElement;
-
-        if (file.type.match("image/*") && file.data) {
-            thumbElement = document.createElement("img");
-
-            thumbElement.src = file.data.toString();
-            thumbElement.alt = file.name;
-        } else {
-            thumbElement = document.createElement("div");
-            thumbElement.innerText = file.name;
-        }
-
-        thumbElement.classList.add("s-uploader--preview-thumbnail");
-        previewElement.appendChild(thumbElement);
-        previewElement.classList.add("s-uploader--preview");
-        previewElement.setAttribute("data-filename", file.name);
-        this.previewsTarget.appendChild(previewElement);
-    }
-
-    /**
-     * Toggles display and disabled state for select elements on valid input
-     * @param  {boolean} active - Uploader is in active state (typically on 'dragenter')
-     */
-    private handleUploaderActive(active: boolean) {
-        this.uploaderTarget.classList.toggle("is-active", active);
-    }
-
-    /**
-     * Converts the file data into a data URL
-     * @param  {File} file
-     * @returns an object containing a FilePreview object
-     */
-    private fileToDataURL(file: File): Promise<FilePreview> {
-        const reader = new FileReader();
-        const { name, size, type } = file;
-
-        if (
-            size < UploaderController.MAX_FILE_SIZE &&
-            type.indexOf("image") > -1
-        ) {
-            return new Promise((resolve, reject) => {
-                reader.onload = (evt) => {
-                    const res = evt?.target?.result;
-                    if (res) {
-                        resolve({ data: res, name, type });
-                    } else {
-                        reject();
-                    }
-                };
-                reader.readAsDataURL(file);
-            });
-        } else {
-            return Promise.resolve({ name, type });
-        }
-    }
-
-    /**
-     * Gets an array of FilePreviews from a FileList
-     * @param  {FileList|[]} files
-     * @returns an array of FilePreview objects from a FileList
-     */
-    private getDataURLs(
-        files: FileList,
-        limit: number
-    ): Promise<FilePreview[]> {
-        const promises = Array.from(files)
-            .slice(0, Math.min(limit, files.length))
-            .map((f) => this.fileToDataURL(f));
-
-        return Promise.all(promises);
-    }
-}

package/lib/exports/spacing-mixins.less

@@ -1,67 +0,0 @@
-/**
- * Generate base and responsive atomic spacing classes.
- *
- * Usage example:
- * .generate-spacing('.m', margin, true);
- * .generate-spacing('.ml', margin-left, true, percent);
- * .generate-spacing('.mx'; margin-left, margin-right; true);
- * .generate-spacing('.pr', padding-right);
- *
- * @prefix - (required) What prefix to generate (e.g. `.m`, `.pr`, etc).
- * @properties - (required) What CSS properties to generate (e.g. `margin`, `margin-right, margin-left`, etc).
- * @includeNegative: bool - Boolean to include generation of negative value classes.
- * @type: px | percent - What set of value to generate.
- */
-.generate-spacing(@prefix, @properties, @includeNegative: false, @type: px) {
-  & when (@type = px) {
-      #stacks-internals #build-classes(
-          responsive,
-          @prefix,
-          { .template(@value) {
-            each(@properties, #(@prop) {
-                @{prop}: var(~"--su@{value}") !important;
-            })
-          } },
-          0 1 2 4 6 8 12 16 24 32 48 64 96 128
-      );
-
-      & when (@includeNegative = true) {
-        #stacks-internals #build-classes(
-            responsive,
-            ~"@{prefix}n",
-            { .template(@value) {
-              each(@properties, #(@prop) {
-                  @{prop}: calc(var(~"--su@{value}") * -1) !important;
-              })
-            } },
-            1 2 4 6 8 12 16 24 32 48 64 96 128
-        );
-    }
-  }
-
-  & when (@type = percent) {
-      #stacks-internals #build-classes(
-          responsive,
-          @prefix,
-          { .template(@value) {
-            each(@properties, #(@prop) {
-                @{prop}: @value !important;
-            })
-          } },
-          50% 100%
-      );
-
-      & when (@includeNegative = true) {
-        #stacks-internals #build-classes(
-            responsive,
-            ~"@{prefix}n",
-            { .template(@value) {
-              each(@properties, #(@prop) {
-                  @{prop}: -@value !important;
-              })
-            } },
-            50% 100%
-        );
-    }
-  }
-}