@ncds/ui-admin 1.8.1 → 1.8.2

package/dist/temp/assets/scripts/imageFileInput/ImageFileInput.js

@@ -1,180 +0,0 @@
-import { ImageFileInputModel } from './ImageFileInputModel';
-import { ImageFileInputView } from './ImageFileInputView';
-export class ImageFileInput {
-    constructor(options) {
-        /**
-         * 파일 선택 버튼 클릭 핸들러
-         */
-        this.handleBrowseClick = () => {
-            if (!this.model.isDisabled()) {
-                this.view.getFileInputElement().click();
-            }
-        };
-        /**
-         * 파일 변경 핸들러
-         */
-        this.handleFileChange = (event) => {
-            const target = event.target;
-            const selectedFiles = target.files;
-            if (!selectedFiles || selectedFiles.length === 0)
-                return;
-            const { validFiles, invalidFiles } = this.model.validateFiles(Array.from(selectedFiles));
-            const options = this.model.getOptions();
-            // 유효한 파일에 대한 콜백 호출
-            if (validFiles.length > 0) {
-                // 파일 추가 (maxFileCount가 1이면 교체)
-                this.model.addFiles(validFiles);
-                // 콜백을 통해 선택된 파일 정보 전달
-                if (this.model.isControlled()) {
-                    options.onChange?.(this.model.getFiles());
-                }
-                else {
-                    options.onFileSelect?.(this.model.getFiles());
-                }
-                // 자동 렌더링 (uncontrolled mode)
-                if (!this.model.isControlled()) {
-                    this.render();
-                }
-            }
-            // 유효하지 않은 파일 처리
-            if (invalidFiles.length > 0) {
-                options.onFail?.(invalidFiles);
-            }
-            // Reset input value to allow re-selecting the same file
-            target.value = '';
-        };
-        /**
-         * 파일 제거 핸들러
-         */
-        this.handleRemoveFile = (index) => {
-            this.model.removeFile(index);
-            this.notifyChange();
-        };
-        this.model = new ImageFileInputModel(options);
-        this.view = new ImageFileInputView(this.model.getOptions(), this.model);
-        this.setupEventListeners();
-        // 초기 렌더링 (빈 슬롯 버튼 생성)
-        this.render();
-        // 컨테이너가 지정되면 자동으로 추가
-        if (options.container) {
-            this.appendToContainer(options.container);
-        }
-    }
-    /**
-     * 컨테이너에 요소 추가
-     */
-    appendToContainer(container) {
-        let containerElement = null;
-        if (typeof container === 'string') {
-            // ID로 찾기 (# 없이)
-            containerElement = document.getElementById(container);
-            // ID로 못 찾으면 CSS 셀렉터로 찾기
-            if (!containerElement) {
-                containerElement = document.querySelector(container);
-            }
-        }
-        else {
-            containerElement = container;
-        }
-        if (containerElement) {
-            containerElement.appendChild(this.getElement());
-        }
-        else {
-            console.warn(`ImageFileInput: Container not found:`, container);
-        }
-    }
-    /**
-     * 이벤트 리스너 설정
-     */
-    setupEventListeners() {
-        const fileInput = this.view.getFileInputElement();
-        const button = this.view.getButtonElement();
-        // 파일 선택 이벤트
-        fileInput.addEventListener('change', this.handleFileChange);
-        // 버튼 클릭 이벤트
-        button.addEventListener('click', this.handleBrowseClick);
-    }
-    /**
-     * 변경 알림 (onChange/onFileSelect 호출)
-     */
-    notifyChange() {
-        const options = this.model.getOptions();
-        const files = this.model.getFiles();
-        if (this.model.isControlled()) {
-            // Controlled mode: onChange 호출
-            options.onChange?.(files);
-            this.render();
-        }
-        else {
-            // Uncontrolled mode: onFileSelect 호출 및 렌더링
-            options.onFileSelect?.(files);
-            this.render();
-        }
-    }
-    /**
-     * 뷰 렌더링 (내부용)
-     */
-    render() {
-        const files = this.model.getFiles();
-        this.view.renderImagePreviews(files, this.handleRemoveFile, this.handleBrowseClick);
-    }
-    /**
-     * 이미지 프리뷰를 수동으로 렌더링
-     * 사용자가 콜백에서 직접 호출하여 프리뷰를 렌더링할 수 있음
-     */
-    renderImagePreviews() {
-        this.render();
-    }
-    /**
-     * DOM 요소 반환
-     */
-    getElement() {
-        return this.view.getElement();
-    }
-    /**
-     * 현재 파일 목록 반환
-     */
-    getFiles() {
-        return this.model.getFiles();
-    }
-    /**
-     * 초기 업로드된 파일 목록 설정
-     */
-    setFiles(uploadedFiles) {
-        this.model.setFiles(uploadedFiles);
-        const options = this.model.getOptions();
-        if (this.model.isControlled()) {
-            const allFiles = this.model.getFiles();
-            options.onChange?.(allFiles);
-        }
-        else {
-            this.render();
-        }
-    }
-    /**
-     * 모든 파일 제거
-     */
-    clearFiles() {
-        this.model.clearFiles();
-        this.notifyChange();
-    }
-    /**
-     * disabled 상태 설정
-     */
-    setDisabled(disabled) {
-        this.model.setDisabled(disabled);
-        this.view.setButtonDisabled(disabled);
-    }
-    /**
-     * 리소스 정리
-     */
-    destroy() {
-        // 이벤트 리스너 제거
-        const fileInput = this.view.getFileInputElement();
-        const button = this.view.getButtonElement();
-        fileInput.removeEventListener('change', this.handleFileChange);
-        button.removeEventListener('click', this.handleBrowseClick);
-        // View 리소스 정리
-        this.view.destroy();
-    }
-}

package/dist/temp/assets/scripts/imageFileInput/ImageFileInputModel.d.ts

@@ -1,73 +0,0 @@
-import { BaseImageFileInputOptions, InvalidFile, RequiredImageFileInputProps, UploadedFile } from './const/types';
-export declare class ImageFileInputModel {
-    private options;
-    private internalFiles;
-    private initialFiles;
-    private newlyAddedFiles;
-    private deletedInitialFiles;
-    constructor(options: BaseImageFileInputOptions);
-    /**
-     * 옵션 반환
-     */
-    getOptions(): RequiredImageFileInputProps;
-    /**
-     * 현재 파일 목록 반환 (초기 파일 + 새로 추가된 파일, 삭제 표시된 파일 제외)
-     */
-    getFiles(): File[];
-    /**
-     * 파일명에서 MIME 타입 추론
-     */
-    private getMimeTypeFromFileName;
-    /**
-     * 초기 업로드된 파일 목록 설정 (UploadedFile[] 타입만 허용)
-     */
-    setFiles(uploadedFiles: UploadedFile[]): void;
-    /**
-     * 파일 추가
-     */
-    addFiles(files: File[]): void;
-    /**
-     * 특정 인덱스의 파일 제거
-     */
-    removeFile(index: number): void;
-    /**
-     * 모든 파일 제거
-     */
-    clearFiles(): void;
-    /**
-     * 파일 유효성 검사
-     */
-    validateFiles(fileList: File[]): {
-        validFiles: File[];
-        invalidFiles: InvalidFile[];
-    };
-    /**
-     * disabled 상태 설정
-     */
-    setDisabled(disabled: boolean): void;
-    /**
-     * disabled 상태 반환
-     */
-    isDisabled(): boolean;
-    /**
-     * Controlled mode 여부 확인
-     * onChange가 있으면 Controlled mode로 판단
-     */
-    isControlled(): boolean;
-    /**
-     * 파일이 초기 파일인지 확인 (UploadedFile로 설정된 기존 파일)
-     */
-    isInitialFile(file: File): boolean;
-    /**
-     * 파일이 새로 추가된 파일인지 확인
-     */
-    isNewlyAddedFile(file: File): boolean;
-    /**
-     * 파일이 삭제 표시된 초기 파일인지 확인
-     */
-    isDeletedInitialFile(file: File): boolean;
-    /**
-     * 초기 파일의 이미지 URL 반환
-     */
-    getInitialFileImageUrl(file: File): string | undefined;
-}

package/dist/temp/assets/scripts/imageFileInput/ImageFileInputModel.js

@@ -1,214 +0,0 @@
-import { ImageFileInputErrorType, } from './const/types';
-export class ImageFileInputModel {
-    constructor(options) {
-        this.internalFiles = [];
-        this.initialFiles = []; // 초기 파일 목록 (렌더링 시점의 파일)
-        this.newlyAddedFiles = new Set(); // 새로 추가된 파일 추적
-        this.deletedInitialFiles = new Set(); // 삭제 표시된 초기 파일들 (파일명으로 추적)
-        this.options = {
-            size: 'sm',
-            multiple: false,
-            buttonLabel: '파일 찾기',
-            imagePreviewTooltipLabel: '이미지 업로드',
-            disabled: false,
-            ...options,
-        };
-        // 초기 파일 설정
-        if (this.options.value && this.options.value.length > 0) {
-            this.internalFiles = [...this.options.value];
-            // value로 들어온 File[]은 새로 추가된 파일로 처리 (initialFiles는 별도로 setFiles(UploadedFile[])로 설정)
-        }
-    }
-    /**
-     * 옵션 반환
-     */
-    getOptions() {
-        return this.options;
-    }
-    /**
-     * 현재 파일 목록 반환 (초기 파일 + 새로 추가된 파일, 삭제 표시된 파일 제외)
-     */
-    getFiles() {
-        const newFiles = this.options.value !== undefined ? this.options.value : this.internalFiles;
-        // UploadedFile을 File 객체로 변환 (삭제 표시되지 않은 것만)
-        const initialFilesAsFiles = this.initialFiles
-            .filter((uploadedFile) => !this.deletedInitialFiles.has(uploadedFile.fileName))
-            .map((uploadedFile) => {
-            // UploadedFile을 File 객체로 변환 (빈 데이터지만 이름과 타입 정보 유지)
-            const mimeType = this.getMimeTypeFromFileName(uploadedFile.fileName);
-            return new File([], uploadedFile.fileName, { type: mimeType });
-        });
-        // 초기 파일 + 새로 추가된 파일 합치기
-        return [...initialFilesAsFiles, ...newFiles];
-    }
-    /**
-     * 파일명에서 MIME 타입 추론
-     */
-    getMimeTypeFromFileName(fileName) {
-        const extension = fileName.split('.').pop()?.toLowerCase();
-        const mimeTypes = {
-            jpg: 'image/jpeg',
-            jpeg: 'image/jpeg',
-            png: 'image/png',
-            gif: 'image/gif',
-            webp: 'image/webp',
-            svg: 'image/svg+xml',
-            bmp: 'image/bmp',
-        };
-        return mimeTypes[extension || ''] || 'application/octet-stream';
-    }
-    /**
-     * 초기 업로드된 파일 목록 설정 (UploadedFile[] 타입만 허용)
-     */
-    setFiles(uploadedFiles) {
-        this.initialFiles = [...uploadedFiles];
-    }
-    /**
-     * 파일 추가
-     */
-    addFiles(files) {
-        // maxFileCount가 1이면 기존 파일 교체
-        if (this.options.maxFileCount === 1) {
-            // 기존 초기 파일들을 삭제 표시
-            this.initialFiles.forEach((uploadedFile) => {
-                this.deletedInitialFiles.add(uploadedFile.fileName);
-            });
-            // 새로 추가된 파일로 표시
-            files.forEach((file) => this.newlyAddedFiles.add(file));
-            const isControlled = this.options.value !== undefined;
-            if (isControlled) {
-                this.options.value = files;
-            }
-            else {
-                this.internalFiles = files;
-            }
-            return;
-        }
-        // getFiles()를 사용하지 않고 새로 추가된 파일만 관리
-        const currentNewFiles = this.options.value !== undefined ? this.options.value : this.internalFiles;
-        const newFiles = [...currentNewFiles, ...files];
-        // 새로 추가된 파일로 표시
-        files.forEach((file) => this.newlyAddedFiles.add(file));
-        const isControlled = this.options.value !== undefined;
-        if (isControlled) {
-            this.options.value = newFiles;
-        }
-        else {
-            this.internalFiles = newFiles;
-        }
-    }
-    /**
-     * 특정 인덱스의 파일 제거
-     */
-    removeFile(index) {
-        const visibleFiles = this.getFiles(); // 현재 보이는 파일들
-        const fileToRemove = visibleFiles[index];
-        if (!fileToRemove)
-            return;
-        // 초기 파일인지 확인
-        const isInitialFile = this.isInitialFile(fileToRemove);
-        if (isInitialFile) {
-            // 초기 파일: 삭제 표시만 함 (실제 제거하지 않음)
-            this.deletedInitialFiles.add(fileToRemove.name);
-        }
-        else {
-            // 새로 추가된 파일: 실제 제거
-            const currentFiles = this.options.value !== undefined ? this.options.value : this.internalFiles;
-            const newFiles = currentFiles.filter((file) => file !== fileToRemove);
-            // newlyAddedFiles Set에서도 제거
-            this.newlyAddedFiles.delete(fileToRemove);
-            const isControlled = this.options.value !== undefined;
-            if (isControlled) {
-                this.options.value = newFiles;
-            }
-            else {
-                this.internalFiles = newFiles;
-            }
-        }
-    }
-    /**
-     * 모든 파일 제거
-     */
-    clearFiles() {
-        // 초기 파일들은 모두 삭제 표시
-        this.initialFiles.forEach((uploadedFile) => {
-            this.deletedInitialFiles.add(uploadedFile.fileName);
-        });
-        this.newlyAddedFiles.clear();
-        const isControlled = this.options.value !== undefined;
-        if (isControlled) {
-            this.options.value = [];
-        }
-        else {
-            this.internalFiles = [];
-        }
-    }
-    /**
-     * 파일 유효성 검사
-     */
-    validateFiles(fileList) {
-        const validFiles = [];
-        const invalidFiles = [];
-        const currentFiles = this.getFiles();
-        for (const file of fileList) {
-            // 파일 크기 체크
-            if (this.options.maxFileSize && file.size > this.options.maxFileSize) {
-                invalidFiles.push({ ...file, errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE });
-                continue;
-            }
-            // 파일 개수 체크 (maxFileCount가 1이면 교체 가능하므로 체크하지 않음)
-            if (this.options.maxFileCount &&
-                this.options.maxFileCount !== 1 &&
-                currentFiles.length + validFiles.length >= this.options.maxFileCount) {
-                invalidFiles.push({ ...file, errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_COUNT });
-                continue;
-            }
-            validFiles.push(file);
-        }
-        return { validFiles, invalidFiles };
-    }
-    /**
-     * disabled 상태 설정
-     */
-    setDisabled(disabled) {
-        this.options.disabled = disabled;
-    }
-    /**
-     * disabled 상태 반환
-     */
-    isDisabled() {
-        return this.options.disabled;
-    }
-    /**
-     * Controlled mode 여부 확인
-     * onChange가 있으면 Controlled mode로 판단
-     */
-    isControlled() {
-        return this.options.onChange !== undefined;
-    }
-    /**
-     * 파일이 초기 파일인지 확인 (UploadedFile로 설정된 기존 파일)
-     */
-    isInitialFile(file) {
-        return this.initialFiles.some((uploadedFile) => uploadedFile.fileName === file.name);
-    }
-    /**
-     * 파일이 새로 추가된 파일인지 확인
-     */
-    isNewlyAddedFile(file) {
-        return this.newlyAddedFiles.has(file);
-    }
-    /**
-     * 파일이 삭제 표시된 초기 파일인지 확인
-     */
-    isDeletedInitialFile(file) {
-        return this.deletedInitialFiles.has(file.name);
-    }
-    /**
-     * 초기 파일의 이미지 URL 반환
-     */
-    getInitialFileImageUrl(file) {
-        const uploadedFile = this.initialFiles.find((f) => f.fileName === file.name);
-        return uploadedFile?.fileImageUrl;
-    }
-}

package/dist/temp/assets/scripts/imageFileInput/ImageFileInputView.d.ts

@@ -1,79 +0,0 @@
-import { RequiredImageFileInputProps } from './const/types';
-import { ImageFileInputModel } from './ImageFileInputModel';
-export declare class ImageFileInputView {
-    private element;
-    private fileInputElement;
-    private buttonElement;
-    private previewsContainer;
-    private options;
-    private model;
-    private renderedFiles;
-    private previewUrls;
-    constructor(options: RequiredImageFileInputProps, model: ImageFileInputModel);
-    /**
-     * 메인 DOM 요소 생성
-     */
-    private createElement;
-    /**
-     * Hidden file input 생성
-     */
-    private createFileInput;
-    /**
-     * Input container 생성
-     */
-    private createInputContainer;
-    /**
-     * Label container 생성
-     */
-    private createLabelContainer;
-    /**
-     * Help icon 생성
-     */
-    private createHelpIcon;
-    /**
-     * Button 생성 (파일 찾기)
-     */
-    private createButton;
-    /**
-     * Share icon (업로드 아이콘) 생성
-     */
-    private createShareIcon;
-    /**
-     * Trash icon (삭제 아이콘) 생성
-     */
-    private createTrashIcon;
-    /**
-     * Hint text 생성
-     */
-    private createHintText;
-    /**
-     * Hint list 생성
-     * Note: 힌트 리스트는 컴포넌트 size와 관계없이 항상 xs 사이즈로 고정됨
-     */
-    private createHintList;
-    /**
-     * 이미지 프리뷰 렌더링
-     */
-    renderImagePreviews(files: File[], onRemove: (index: number) => void, onBrowseClick: () => void): void;
-    /**
-     * 이미지 프리뷰 생성
-     */
-    private createImagePreview;
-    /**
-     * 빈 슬롯 생성 (파일 찾기 버튼)
-     */
-    private createEmptySlot;
-    /**
-     * Tooltip 생성
-     */
-    private createTooltip;
-    /**
-     * 기존 프리뷰 정리
-     */
-    private cleanupPreviews;
-    setButtonDisabled(disabled: boolean): void;
-    getElement(): HTMLDivElement;
-    getFileInputElement(): HTMLInputElement;
-    getButtonElement(): HTMLButtonElement;
-    destroy(): void;
-}