@stackoverflow/stacks 2.5.4 → 2.5.5

package/lib/components/uploader/uploader.ts

@@ -1,207 +1,207 @@
-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");
-            // eslint-disable-next-line @typescript-eslint/no-base-to-string
-            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);
-    }
-}
+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");
+            // eslint-disable-next-line @typescript-eslint/no-base-to-string
+            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/components/user-card/user-card.less

@@ -1,129 +1,129 @@
-.s-user-card {
-    --_uc-ai: center;
-    --_uc-bg: unset;
-    --_uc-bar: unset;
-    --_uc-d: grid;
-    --_uc-fc: unset;
-    --_uc-g: var(--su4) var(--su8);
-    --_uc-p: var(--su8);
-    --_uc-info-ai: unset;
-    --_uc-info-fd: column;
-    --_uc-link-fs: var(--fs-caption);
-    --_uc-link-ws: unset;
-    --_uc-rep-fc: unset;
-    --_uc-time-fc: var(--black-400);
-    --_uc-time-ws: unset;
-    --_uc-type-fc: var(--theme-primary-400);
-
-    // MODIFIERS
-    &&__deleted {
-        --_uc-fc: var(--black-400);
-    }
-
-    &&__highlighted {
-        --_uc-bg: var(--theme-secondary-100);
-        --_uc-bar: var(--br-md);
-        --_uc-time-fc: var(--black-500);
-        --_uc-type-fc: var(--black-500);
-    }
-
-    // VARIANTS
-    &&__minimal,
-    &&__small {
-        --_uc-d: flex;
-        --_uc-g: var(--su4);
-        --_uc-p: 0;
-        --_uc-info-ai: center;
-        --_uc-info-fd: row;
-    }
-
-    &&__full {
-        --_uc-ai: flex-start;
-        --_uc-link-fs: var(--fs-body2);
-    }
-
-    &&__minimal {
-        --_uc-link-ws: nowrap;
-        --_uc-rep-fc: var(--black-500);
-        --_uc-time-ws: nowrap;
-    }
-
-    // CHILD ELEMENTS
-    & &--location,
-    & &--role {
-        font-size: var(--fs-caption);
-        color: var(--black-400);
-    }
-
-    & &--awards {
-        li {
-            font-size: var(--fs-caption);
-        }
-
-        .list-reset;
-        align-items: center;
-        display: flex;
-        gap: var(--su6);
-    }
-
-    & &--info {
-        align-items: var(--_uc-info-ai);
-        flex-direction: var(--_uc-info-fd);
-
-        display: flex;
-        gap: var(--su4);
-    }
-
-    & &--link {
-        font-size: var(--_uc-link-fs);
-        white-space: var(--_uc-link-ws);
-
-        align-items: center;
-        flex-wrap: wrap;
-        min-width: 0; // Allow things to wrap
-        overflow-wrap: break-word;
-    }
-
-    & &--rep {
-        color: var(--_uc-rep-fc);
-
-        font-weight: 700;
-    }
-
-    & &--tags {
-        align-items: center;
-        min-width: 0; // Allow things to wrap
-        flex-wrap: wrap;
-    }
-
-    & &--time {
-        color: var(--_uc-time-fc);
-        white-space: var(--_uc-time-ws);
-
-        font-size: var(--fs-caption);
-        grid-column: ~"1 / 3";
-        grid-row: ~"1 / 2";
-    }
-
-    & &--type {
-        a:not(.s-link) {
-            color: inherit !important;
-        }
-
-        color: var(--_uc-type-fc);
-
-        font-size: var(--fs-caption);
-        grid-column: ~"1 / 3";
-    }
-
-    align-items: var(--_uc-ai);
-    background-color: var(--_uc-bg);
-    border-radius: var(--_uc-bar);
-    color: var(--_uc-fc);
-    display: var(--_uc-d);
-    gap: var(--_uc-g);
-
-    grid-template-columns: auto 1fr;
-    line-height: 1;
-    padding: var(--_uc-p);
-}
+.s-user-card {
+    --_uc-ai: center;
+    --_uc-bg: unset;
+    --_uc-bar: unset;
+    --_uc-d: grid;
+    --_uc-fc: unset;
+    --_uc-g: var(--su4) var(--su8);
+    --_uc-p: var(--su8);
+    --_uc-info-ai: unset;
+    --_uc-info-fd: column;
+    --_uc-link-fs: var(--fs-caption);
+    --_uc-link-ws: unset;
+    --_uc-rep-fc: unset;
+    --_uc-time-fc: var(--black-400);
+    --_uc-time-ws: unset;
+    --_uc-type-fc: var(--theme-primary-400);
+
+    // MODIFIERS
+    &&__deleted {
+        --_uc-fc: var(--black-400);
+    }
+
+    &&__highlighted {
+        --_uc-bg: var(--theme-secondary-100);
+        --_uc-bar: var(--br-md);
+        --_uc-time-fc: var(--black-500);
+        --_uc-type-fc: var(--black-500);
+    }
+
+    // VARIANTS
+    &&__minimal,
+    &&__small {
+        --_uc-d: flex;
+        --_uc-g: var(--su4);
+        --_uc-p: 0;
+        --_uc-info-ai: center;
+        --_uc-info-fd: row;
+    }
+
+    &&__full {
+        --_uc-ai: flex-start;
+        --_uc-link-fs: var(--fs-body2);
+    }
+
+    &&__minimal {
+        --_uc-link-ws: nowrap;
+        --_uc-rep-fc: var(--black-500);
+        --_uc-time-ws: nowrap;
+    }
+
+    // CHILD ELEMENTS
+    & &--location,
+    & &--role {
+        font-size: var(--fs-caption);
+        color: var(--black-400);
+    }
+
+    & &--awards {
+        li {
+            font-size: var(--fs-caption);
+        }
+
+        .list-reset;
+        align-items: center;
+        display: flex;
+        gap: var(--su6);
+    }
+
+    & &--info {
+        align-items: var(--_uc-info-ai);
+        flex-direction: var(--_uc-info-fd);
+
+        display: flex;
+        gap: var(--su4);
+    }
+
+    & &--link {
+        font-size: var(--_uc-link-fs);
+        white-space: var(--_uc-link-ws);
+
+        align-items: center;
+        flex-wrap: wrap;
+        min-width: 0; // Allow things to wrap
+        overflow-wrap: break-word;
+    }
+
+    & &--rep {
+        color: var(--_uc-rep-fc);
+
+        font-weight: 700;
+    }
+
+    & &--tags {
+        align-items: center;
+        min-width: 0; // Allow things to wrap
+        flex-wrap: wrap;
+    }
+
+    & &--time {
+        color: var(--_uc-time-fc);
+        white-space: var(--_uc-time-ws);
+
+        font-size: var(--fs-caption);
+        grid-column: ~"1 / 3";
+        grid-row: ~"1 / 2";
+    }
+
+    & &--type {
+        a:not(.s-link) {
+            color: inherit !important;
+        }
+
+        color: var(--_uc-type-fc);
+
+        font-size: var(--fs-caption);
+        grid-column: ~"1 / 3";
+    }
+
+    align-items: var(--_uc-ai);
+    background-color: var(--_uc-bg);
+    border-radius: var(--_uc-bar);
+    color: var(--_uc-fc);
+    display: var(--_uc-d);
+    gap: var(--_uc-g);
+
+    grid-template-columns: auto 1fr;
+    line-height: 1;
+    padding: var(--_uc-p);
+}