@rchemist/listgrid 0.3.2 → 0.3.4

package/dist/listgrid/components/fields/FileField.js

@@ -4,10 +4,29 @@ import { FileFieldValue } from '../../ui';
 import { LazyFileUploadInput as FileUploadInput } from '../../ui';
 import { getInputRendererParameters } from '../helper/FieldRendererHelper';
 import { isEmpty } from '../../utils';
-import { getAccessableAssetUrl } from '../../misc';
+import { getAccessableAssetUrl, isExternalUrl } from '../../misc';
 import { IconDeviceFloppy } from '@tabler/icons-react';
 import { TextInput } from '../../ui';
 import { isBlank as isBlankString } from '../../utils/StringUtil';
+/**
+ * 다양한 형태의 필드 값(`FileFieldValue` 인스턴스 / POJO / 문자열)에서
+ * 외부 절대 URL(`http(s)://`) 을 추출한다. 외부 URL 이 아니면 `undefined`.
+ */
+function pickExternalUrl(value) {
+    if (!value)
+        return undefined;
+    if (typeof value === 'string') {
+        return isExternalUrl(value) ? value.trim() : undefined;
+    }
+    if (typeof value === 'object') {
+        const files = Array.isArray(value.existFiles) ? value.existFiles : [];
+        for (const f of files) {
+            if (f && typeof f.url === 'string' && isExternalUrl(f.url))
+                return f.url.trim();
+        }
+    }
+    return undefined;
+}
 export class FileField extends ListableFormField {
     constructor(name, order, config) {
         super(name, order, 'file');
@@ -58,6 +77,12 @@ export class FileField extends ListableFormField {
      */
     renderInstance(params) {
         return (async () => {
+            // 외부 URL 우회: 값이 `http(s)://` 절대 URL 이면 자체 asset 서버를 거치지 않고
+            // 그대로 다운로드 링크로 표시. (교체 시에는 기존 삭제 후 신규 등록 흐름을 사용.)
+            const externalUrl = pickExternalUrl(await this.getCurrentValue(params.entityForm.getRenderType()));
+            if (externalUrl) {
+                return (_jsx("div", { className: "rcm-file-field-external", children: _jsxs("a", { href: externalUrl, target: "_blank", rel: "noreferrer", className: "rcm-file-field-link", children: [_jsx(IconDeviceFloppy, { className: "rcm-file-field-icon" }), _jsx("span", { className: "rcm-file-field-name", children: externalUrl })] }) }));
+            }
             return (_jsx(FileUploadInput, { config: this.config, ...await getInputRendererParameters(this, params) }));
         })();
     }
@@ -82,6 +107,15 @@ export class FileField extends ListableFormField {
         return (async () => {
             const value = await props.item;
             if (value[this.name]) {
+                // 값이 단순 외부 URL 문자열로 들어온 케이스 — 자체 asset 서버를 거치지 않고
+                // 그대로 다운로드 링크로 렌더링.
+                const externalUrl = pickExternalUrl(value[this.name]);
+                if (externalUrl) {
+                    return {
+                        result: (_jsx("div", { className: "rcm-file-field-cell", children: _jsx("div", { className: "rcm-file-field-inner", children: _jsxs("a", { href: externalUrl, target: "_blank", rel: "noreferrer", className: "rcm-file-field-link", children: [_jsx(IconDeviceFloppy, { className: "rcm-file-field-icon" }), _jsx("span", { className: "rcm-file-field-name", children: externalUrl })] }) }) })),
+                        linkOnCell: false,
+                    };
+                }
                 const file = value[this.name];
                 if (!isEmpty(file.existFiles) && !isBlankString(file.existFiles[0]?.url)) {
                     const fileDownloadUrl = getAccessableAssetUrl(file.existFiles[0].url);

package/dist/listgrid/components/fields/ImageField.js

@@ -3,9 +3,28 @@ import { ListableFormField, } from './abstract';
 import { LazyFileUploadInput as FileUploadInput } from '../../ui';
 import { getInputRendererParameters } from '../helper/FieldRendererHelper';
 import { isEmpty } from '../../utils';
-import { getAccessableAssetUrl } from '../../misc';
+import { getAccessableAssetUrl, isExternalUrl } from '../../misc';
 import { TextInput } from '../../ui';
 import { getEndpoint } from '../../config/RuntimeConfig';
+/**
+ * 다양한 형태의 필드 값(`FileFieldValue` 인스턴스 / POJO / 문자열)에서
+ * 외부 절대 URL(`http(s)://`) 을 추출한다. 외부 URL 이 아니면 `undefined`.
+ */
+function pickExternalUrl(value) {
+    if (!value)
+        return undefined;
+    if (typeof value === 'string') {
+        return isExternalUrl(value) ? value.trim() : undefined;
+    }
+    if (typeof value === 'object') {
+        const files = Array.isArray(value.existFiles) ? value.existFiles : [];
+        for (const f of files) {
+            if (f && typeof f.url === 'string' && isExternalUrl(f.url))
+                return f.url.trim();
+        }
+    }
+    return undefined;
+}
 export class ImageField extends ListableFormField {
     constructor(name, order, config) {
         super(name, order, 'file');
@@ -79,6 +98,15 @@ export class ImageField extends ListableFormField {
                     config.maxCount = 1;
                 }
             }
+            // 외부 URL 우회: 값이 `http(s)://` 절대 URL 이면 자체 asset 서버를 거치지 않고
+            // 그대로 이미지로 표시한다. (첨부 정책상 교체는 "기존 삭제 후 신규 등록" 흐름이므로
+            // 별도 교체 컨트롤 없이 표시만으로 충분.)
+            const externalUrl = pickExternalUrl(await this.getCurrentValue(params.entityForm.getRenderType()));
+            if (externalUrl) {
+                return (_jsx("div", { className: "rcm-image-field-external", children: _jsx("img", { className: "rcm-image-field-external-img", src: externalUrl, alt: "external image", onError: (event) => {
+                            event.currentTarget.src = getEndpoint('noImageFallback');
+                        } }) }));
+            }
             return (_jsx(FileUploadInput, { config: config, ...await getInputRendererParameters(this, params) }));
         })();
     }
@@ -103,6 +131,18 @@ export class ImageField extends ListableFormField {
         return (async () => {
             const value = await props.item;
             if (value[this.name]) {
+                // 값이 단순 외부 URL 문자열로 들어온 케이스 — 자체 asset 서버를 거치지 않고
+                // 그대로 썸네일/확대 미리보기 렌더링.
+                const externalUrl = pickExternalUrl(value[this.name]);
+                if (externalUrl) {
+                    return {
+                        result: (_jsx("div", { className: "rcm-image-field-cell", children: _jsxs("div", { className: "rcm-image-field-hover-group", children: [_jsx("img", { className: "rcm-image-field-thumb", src: externalUrl, onError: (event) => {
+                                            event.currentTarget.src = getEndpoint('noImageFallback');
+                                        }, alt: "primary image" }), _jsx("div", { className: "rcm-image-field-preview-wrap", children: _jsx("img", { className: "rcm-image-field-preview", src: externalUrl, onError: (event) => {
+                                                event.currentTarget.src = getEndpoint('noImageFallback');
+                                            }, alt: "enlarged image" }) })] }) })),
+                    };
+                }
                 const file = value[this.name];
                 if (!isEmpty(file.existFiles)) {
                     const imgUrl = getAccessableAssetUrl(file.existFiles[0].url);

package/dist/listgrid/index.d.ts

@@ -25,7 +25,7 @@ export { UrlStateProvider, useQueryStates, createParser, parseAsString } from '.
 export type { UrlStateServices, UrlParser, UrlStateSetOptions, QueryStatesSetter, UrlStateProviderProps, } from './urlState';
 export { configureApiClient, callExternalHttpRequest, getExternalApiData, getExternalApiDataWithError, ResponseData, createResponseData, } from './api';
 export type { ApiClient, ApiRequestOptions, ApiMethod, IEntityError, IEntityErrorBody, } from './api';
-export { RegexAlias, RegexEmailAddress, RegexLowerEnglishNumber, RegexPasswordNormal, RegexPhoneNumber, RegexTelephoneNumber, RegexUrlBody, fDate, fDateTime, fToNow, getFormattedTime, formatPrice, isEmpty, isEquals, isEqualsIgnoreCase, isEqualCollection, isPositive, normalizeUrl, removeTrailingSeparator, parse, getLocalStorageItem, setLocalStorageItem, getSessionStorageObject, setSessionStorageItem, ASSET_SERVER_URL, configureAssetServerUrl, getAccessableAssetUrl, removeAssetServerPrefix, getDefinedDates, } from './misc';
+export { RegexAlias, RegexEmailAddress, RegexLowerEnglishNumber, RegexPasswordNormal, RegexPhoneNumber, RegexTelephoneNumber, RegexUrlBody, fDate, fDateTime, fToNow, getFormattedTime, formatPrice, isEmpty, isEquals, isEqualsIgnoreCase, isEqualCollection, isPositive, normalizeUrl, removeTrailingSeparator, parse, getLocalStorageItem, setLocalStorageItem, getSessionStorageObject, setSessionStorageItem, ASSET_SERVER_URL, configureAssetServerUrl, getAccessableAssetUrl, isExternalUrl, removeAssetServerPrefix, getDefinedDates, } from './misc';
 export type { DefinedDateType } from './misc';
 export { ViewListGrid } from './components/list/ViewListGrid';
 export { ViewEntityForm } from './components/form/ViewEntityForm';

package/dist/listgrid/index.js

@@ -33,7 +33,7 @@ export { UrlStateProvider, useQueryStates, createParser, parseAsString } from '.
 // REST conventions. See src/listgrid/api/ApiClient.ts.
 export { configureApiClient, callExternalHttpRequest, getExternalApiData, getExternalApiDataWithError, ResponseData, createResponseData, } from './api';
 // Misc helpers & constants inherited from the original kit root barrel.
-export { RegexAlias, RegexEmailAddress, RegexLowerEnglishNumber, RegexPasswordNormal, RegexPhoneNumber, RegexTelephoneNumber, RegexUrlBody, fDate, fDateTime, fToNow, getFormattedTime, formatPrice, isEmpty, isEquals, isEqualsIgnoreCase, isEqualCollection, isPositive, normalizeUrl, removeTrailingSeparator, parse, getLocalStorageItem, setLocalStorageItem, getSessionStorageObject, setSessionStorageItem, ASSET_SERVER_URL, configureAssetServerUrl, getAccessableAssetUrl, removeAssetServerPrefix, getDefinedDates, } from './misc';
+export { RegexAlias, RegexEmailAddress, RegexLowerEnglishNumber, RegexPasswordNormal, RegexPhoneNumber, RegexTelephoneNumber, RegexUrlBody, fDate, fDateTime, fToNow, getFormattedTime, formatPrice, isEmpty, isEquals, isEqualsIgnoreCase, isEqualCollection, isPositive, normalizeUrl, removeTrailingSeparator, parse, getLocalStorageItem, setLocalStorageItem, getSessionStorageObject, setSessionStorageItem, ASSET_SERVER_URL, configureAssetServerUrl, getAccessableAssetUrl, isExternalUrl, removeAssetServerPrefix, getDefinedDates, } from './misc';
 // Core Components
 export { ViewListGrid } from './components/list/ViewListGrid';
 export { ViewEntityForm } from './components/form/ViewEntityForm';

package/dist/listgrid/misc/index.d.ts

@@ -53,6 +53,11 @@ export declare const ASSET_PREFIX: string;
 export declare function configureAssetServerUrl(url: string): void;
 export declare function configureAssetPrefix(prefix: string): void;
 export declare function getAccessableAssetUrl(imgUrl: string | null | undefined): string;
+/**
+ * 입력 URL 이 외부(`http://` / `https://`)로 시작하는 절대 URL인지 검사한다.
+ * 자체 asset 서버 prefix 를 적용해서는 안 되는 값을 분기 처리할 때 사용한다.
+ */
+export declare function isExternalUrl(url: string | null | undefined): boolean;
 export declare function removeAssetServerPrefix(url: string | null | undefined): string;
 export declare function validatedAssetFileName(fileName: string): string;
 export type DefinedDateType = 'TODAY' | 'WEEK' | 'MONTH' | 'MONTH3' | 'MONTH6' | 'YEAR';

package/dist/listgrid/misc/index.js

@@ -413,6 +413,21 @@ function effectiveAssetPrefix() {
 export function getAccessableAssetUrl(imgUrl) {
     if (!imgUrl)
         return '';
+    // 외부 절대 URL(`http(s)://`) 이고 자체 asset 서버 host 가 아니라면 그대로 통과.
+    // `removeAssetServerPrefix` 가 절대 URL 의 스킴 콜론을 URL-encode 해버려
+    // `https%3A//...` 와 같이 망가뜨리던 이전 동작을 바로잡는다.
+    if (isExternalUrl(imgUrl)) {
+        const trimmed = imgUrl.trim();
+        const server = effectiveAssetServerUrl();
+        if (server && trimmed.startsWith(server)) {
+            // 우리 asset 서버 host 라면 prefix 를 제거한 뒤 표준 경로 처리로 폴백한다.
+            let u = removeAssetServerPrefix(trimmed);
+            if (u.startsWith('/'))
+                u = u.substring(1);
+            return effectiveAssetServerUrl() + effectiveAssetPrefix() + u;
+        }
+        return trimmed;
+    }
     let u = removeAssetServerPrefix(imgUrl);
     if (u.startsWith('http://') || u.startsWith('https://'))
         return u;
@@ -420,6 +435,16 @@ export function getAccessableAssetUrl(imgUrl) {
         u = u.substring(1);
     return effectiveAssetServerUrl() + effectiveAssetPrefix() + u;
 }
+/**
+ * 입력 URL 이 외부(`http://` / `https://`)로 시작하는 절대 URL인지 검사한다.
+ * 자체 asset 서버 prefix 를 적용해서는 안 되는 값을 분기 처리할 때 사용한다.
+ */
+export function isExternalUrl(url) {
+    if (!url)
+        return false;
+    const trimmed = url.trim();
+    return trimmed.startsWith('http://') || trimmed.startsWith('https://');
+}
 export function removeAssetServerPrefix(url) {
     if (!url)
         return '';

package/dist/styles/components.css

@@ -1429,7 +1429,10 @@
 .rcm-table td {
   padding: var(--rcm-space-sm) var(--rcm-space-md);
   border-bottom: var(--rcm-border-width) solid var(--rcm-color-border);
-  text-align: left;
+  /* text-align 은 ViewColumn / HeaderField 가 .text-left / .text-center / .text-right
+     utility 로 셀 단위로 지정한다. 여기에 default `text-align: left` 를 두면 utility
+     보다 specificity 가 높아 (0,1,1) vs (0,1,0) getListFieldAlignType() 의 center
+     정렬이 무력화된다. 브라우저 기본 th/td 가 이미 left 라 default 가 필요 없다. */
 }
 
 .rcm-table th {

package/dist/styles.css

@@ -6398,7 +6398,10 @@
 .rcm-table td {
   padding: var(--rcm-space-sm) var(--rcm-space-md);
   border-bottom: var(--rcm-border-width) solid var(--rcm-color-border);
-  text-align: left;
+  /* text-align 은 ViewColumn / HeaderField 가 .text-left / .text-center / .text-right
+     utility 로 셀 단위로 지정한다. 여기에 default `text-align: left` 를 두면 utility
+     보다 specificity 가 높아 (0,1,1) vs (0,1,0) getListFieldAlignType() 의 center
+     정렬이 무력화된다. 브라우저 기본 th/td 가 이미 left 라 default 가 필요 없다. */
 }
 
 .rcm-table th {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rchemist/listgrid",
-    "version": "0.3.2",
+    "version": "0.3.4",
     "private": false,
     "description": "Framework-free React CRUD UI engine — primitive-based design system, data-attr theming, and a full list/form renderer for RCM-framework-style entity backends.",
     "keywords": [