@rchemist/listgrid 0.2.6

package/dist/listgrid/components/fields/abstract/OptionalField.js

@@ -0,0 +1,310 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getNestedValue, ListableFormField, } from './ListableFormField';
+import { ValidateResult } from '../../../validations/Validation';
+import { hexHash } from '../../../utils/hash';
+import { isEquals } from '../../../misc';
+import { isTrue } from '../../../utils/BooleanUtil';
+import { Badge } from '../../../ui';
+import { isBlank } from '../../../utils/StringUtil';
+function isEqualOptions(a, b) {
+    if (a === undefined && b === undefined) {
+        return true;
+    }
+    if (a === undefined || b === undefined) {
+        return false;
+    }
+    return isEquals(a, b);
+}
+// Chip UI 기본 설정값
+const DEFAULT_CHIP_MAX_OPTIONS = 10;
+const DEFAULT_CHIP_MAX_LABEL_LENGTH = 8;
+export class OptionalField extends ListableFormField {
+    /**
+     * 목록 필터에서 단일 선택만 허용하도록 설정합니다.
+     * true로 설정하면 필터가 EQUAL 조건으로 동작하고, RadioChip으로 렌더링됩니다.
+     * @param enabled 단일 선택 여부 (기본값: true)
+     */
+    withSingleFilter(enabled = true) {
+        this.singleFilter = enabled;
+        return this;
+    }
+    /**
+     * 이 필드를 라디오 버튼이나 Checkbox 타입으로 표시하는 경우 이 메소드를 호출한다.
+     * @param props direction 설정
+     */
+    withComboType(props) {
+        if (props !== undefined)
+            this.combo = props;
+        else
+            delete this.combo;
+        return this;
+    }
+    withOptions(options) {
+        if (options !== undefined)
+            this.options = [...options];
+        else
+            delete this.options;
+        return this;
+    }
+    withPreservedOptions(options) {
+        if (options !== undefined)
+            this.preservedOptions = [...options];
+        else
+            delete this.preservedOptions;
+        return this;
+    }
+    /**
+     * Chip UI를 사용하도록 설정
+     * @param enabled Chip UI 활성화 여부 (기본값: true)
+     * @param config 추가 설정 (maxOptions, maxLabelLength)
+     */
+    useChip(enabled = true, config) {
+        this.chipConfig = {
+            enabled,
+            maxOptions: config?.maxOptions ?? DEFAULT_CHIP_MAX_OPTIONS,
+            maxLabelLength: config?.maxLabelLength ?? DEFAULT_CHIP_MAX_LABEL_LENGTH,
+        };
+        return this;
+    }
+    /**
+     * Chip UI로 렌더링할 조건을 충족하는지 확인
+     * - chipConfig가 undefined: 옵션 수/라벨 길이 조건 자동 체크
+     * - useChip(true): 강제 Chip 사용
+     * - useChip(false): 강제 Chip 사용 안 함
+     */
+    shouldRenderAsChip() {
+        // useChip(false)로 명시적 비활성화
+        if (this.chipConfig?.enabled === false) {
+            return false;
+        }
+        const maxOptions = this.chipConfig?.maxOptions ?? DEFAULT_CHIP_MAX_OPTIONS;
+        const maxLabelLength = this.chipConfig?.maxLabelLength ?? DEFAULT_CHIP_MAX_LABEL_LENGTH;
+        // 옵션이 없으면 Chip 불가
+        if (!this.options || this.options.length === 0) {
+            return false;
+        }
+        // useChip(true)로 명시적 활성화 시 조건 체크 생략
+        if (this.chipConfig?.enabled === true) {
+            return true;
+        }
+        // chipConfig가 undefined일 때: 자동 조건 체크
+        // 옵션 수 체크
+        if (this.options.length > maxOptions) {
+            return false;
+        }
+        // 모든 옵션의 라벨 길이 체크
+        for (const option of this.options) {
+            const label = option.label ?? option.value;
+            if (label.length > maxLabelLength) {
+                return false;
+            }
+        }
+        return true;
+    }
+    changeOptions(options, defaultValue) {
+        if (this.preservedOptions === undefined || !isEqualOptions(this.options, options)) {
+            if (this.options !== undefined) {
+                this.preservedOptions = [...this.options];
+            }
+            else {
+                delete this.preservedOptions;
+            }
+            this.options = [...options];
+            if (defaultValue !== undefined) {
+                this.withDefaultValue(defaultValue);
+            }
+            return true;
+        }
+        return false;
+    }
+    revertOptions(renderType) {
+        if (this.preservedOptions !== undefined) {
+            if (!isEqualOptions(this.preservedOptions, this.options)) {
+                this.resetValue(renderType);
+                this.options = [...this.preservedOptions];
+                delete this.preservedOptions;
+                return true;
+            }
+        }
+        return false;
+    }
+    copyFields(origin, includeValue = true) {
+        const result = super
+            .copyFields(origin, includeValue)
+            .withComboType(origin.combo)
+            .withOptions(origin.options)
+            .withPreservedOptions(origin.preservedOptions);
+        if (origin.chipConfig) {
+            result.chipConfig = { ...origin.chipConfig };
+        }
+        if (origin.singleFilter !== undefined) {
+            result.singleFilter = origin.singleFilter;
+        }
+        return result;
+    }
+}
+export class MultipleOptionalField extends OptionalField {
+    /**
+     * 복수 선택할 수 있는 최소, 최대 개수 설정
+     * 설정된 최소값이 있다면 해당 개수 미만을 선택하면 에러
+     * 설정된 최대값이 있다면 해당 개수를 초과하면 에러
+     * @param limit
+     */
+    withLimit(limit) {
+        if (limit !== undefined)
+            this.limit = limit;
+        else
+            delete this.limit;
+        return this;
+    }
+    /**
+     * 복수 선택할 수 있는 최소 개수만 설정
+     * @param min
+     */
+    withMin(min) {
+        const newLimit = {};
+        if (min !== undefined)
+            newLimit.min = min;
+        if (this.limit?.max !== undefined)
+            newLimit.max = this.limit.max;
+        this.limit = newLimit;
+        return this;
+    }
+    /**
+     * 복수 선택할 수 있는 최대 개수 설정
+     * @param max
+     */
+    withMax(max) {
+        const newLimit = {};
+        if (this.limit?.min !== undefined)
+            newLimit.min = this.limit.min;
+        if (max !== undefined)
+            newLimit.max = max;
+        this.limit = newLimit;
+        return this;
+    }
+    createCacheKey(renderType) {
+        let key = ``;
+        for (const option of this.options) {
+            key += `_${option.value}`;
+        }
+        return hexHash(`${this.getName()}_${this.getCurrentValue(renderType)}_${key}`);
+    }
+    constructor(name, order, type, options, limit) {
+        super(name, order, type);
+        if (options !== undefined)
+            this.options = options;
+        if (limit !== undefined)
+            this.limit = limit;
+    }
+    copyFields(origin, includeValue = true) {
+        return super.copyFields(origin, includeValue).withLimit(this.limit);
+    }
+    async validate(entityForm, session) {
+        const infoParams = session !== undefined ? { entityForm, session } : { entityForm };
+        const validateProps = {
+            previousResult: await super.validate(entityForm, session),
+            entityForm: entityForm,
+            required: await this.isRequired(infoParams),
+            value: this.getCurrentValue(entityForm.getRenderType()),
+        };
+        if (this.limit !== undefined)
+            validateProps.limit = this.limit;
+        return await this.validateWithLimit(validateProps);
+    }
+    async validateWithLimit(props) {
+        const result = props.previousResult;
+        let errored = false;
+        if (Array.isArray(result)) {
+            if (result.length > 0) {
+                for (const validateResult of result) {
+                    if (validateResult.error) {
+                        errored = true;
+                        break;
+                    }
+                }
+            }
+        }
+        else {
+            // 단수일 때
+            errored = result.error;
+        }
+        if (!errored) {
+            // 에러가 안 난 경우에만 limit 에 대한 체크 에러를 시작한다.
+            if (props.limit !== undefined) {
+                const value = props.value;
+                if (value !== undefined) {
+                    if (Array.isArray(value)) {
+                        // value 가 array 타입인 경우
+                        const selected = value.length;
+                        if (props.limit.min !== undefined && selected < props.limit.min) {
+                            return ValidateResult.fail(`최소 ${props.limit.min}개 이상을 선택해야 합니다.`);
+                        }
+                        else if (props.limit.max !== undefined && selected > props.limit.max) {
+                            return ValidateResult.fail(`최대 ${props.limit.max}개까지 선택할 수 있습니다.`);
+                        }
+                    }
+                    else {
+                        if (props.limit.min !== undefined) {
+                            return ValidateResult.fail(`최소 ${props.limit.min}개 이상을 선택해야 합니다.`);
+                        }
+                    }
+                }
+            }
+        }
+        return result;
+    }
+}
+export function renderListOptionalField(field, props) {
+    // 중첩 객체 접근 지원 (예: score.student.name)
+    const value = String(getNestedValue(props.item, field.name) ?? '');
+    if (isBlank(value)) {
+        return Promise.resolve({ result: '' });
+    }
+    const option = field.options?.find((option) => option.value === value);
+    if (option) {
+        const color = option.color ??
+            (field.type === 'boolean' ? (isTrue(value) ? 'info' : 'secondary') : 'primary');
+        const label = option.listLabel ?? option.label ?? option.value;
+        return Promise.resolve({
+            result: (_jsx(Badge, { color: color, variant: 'outline', children: label })),
+            linkOnCell: true,
+        });
+    }
+    const color = field.type === 'boolean' ? (isTrue(value) ? 'info' : 'dark') : undefined;
+    const label = field.type === 'boolean' ? (isTrue(value) ? '예' : '아니오') : value;
+    return Promise.resolve({
+        result: (_jsx(Badge, { color: color, variant: 'outline', children: label })),
+        linkOnCell: true,
+    });
+}
+export function renderListMultipleOptionalField(field, props) {
+    // 중첩 객체 접근 지원 (예: score.student.name)
+    const value = getNestedValue(props.item, field.name);
+    if (isBlank(value) || (Array.isArray(value) && value.length === 0)) {
+        return Promise.resolve({ result: '' });
+    }
+    function getDisplayValue(value) {
+        if (field.options) {
+            for (const option of field.options) {
+                if (option.value === value) {
+                    return option.listLabel ?? option.label ?? option.value;
+                }
+            }
+        }
+        return value;
+    }
+    if (Array.isArray(value)) {
+        return Promise.resolve({
+            result: (_jsx("span", { className: 'space-x-0.5', children: value.map((v, index) => (_jsx(Badge, { color: v.color ?? 'secondary', variant: 'outline', children: getDisplayValue(v) }, `${field.name}_${index}`))) })),
+        }); // 여러개 선택시 배열로 반환한다.
+    }
+    const option = field.options?.find((option) => option.value === value);
+    if (option) {
+        return Promise.resolve({
+            result: _jsx(Badge, { color: option.color ?? undefined, children: option.label }),
+            linkOnCell: false,
+        });
+    }
+    return Promise.resolve({ result: _jsx(Badge, { children: value }), linkOnCell: false });
+}

package/dist/listgrid/components/fields/abstract/index.d.ts

@@ -0,0 +1,6 @@
+export { FormField, type FormFieldProps, type FieldLayoutType, type ViewRenderProps, type ViewRenderResult, FULL_WIDTH_FIELD_TYPES, } from './FormField';
+export { ListableFormField, type ListableFormFieldProps, type ViewListProps, type ViewListResult, type IListConfig, type UserListFieldProps, getNestedValue, } from './ListableFormField';
+export { AbstractManyToOneField, type AbstractManyToOneFieldProps, type CardViewConfig, type SelectBoxViewConfig, } from './AbstractManyToOneField';
+export { OptionalField, MultipleOptionalField, type OptionalFieldProps, type MultipleOptionalFieldProps, type ChipConfig, renderListOptionalField, renderListMultipleOptionalField, } from './OptionalField';
+export { AbstractDateField, type AbstractDateFieldProps } from './AbstractDateField';
+export { CheckButtonValidationField, type CheckButtonValidationFieldProps, } from './CheckButtonValidationField';

package/dist/listgrid/components/fields/abstract/index.js

@@ -0,0 +1,12 @@
+// FormField 관련 exports
+export { FormField, FULL_WIDTH_FIELD_TYPES, } from './FormField';
+// ListableFormField 관련 exports
+export { ListableFormField, getNestedValue, } from './ListableFormField';
+// AbstractManyToOneField 관련 exports
+export { AbstractManyToOneField, } from './AbstractManyToOneField';
+// OptionalField 관련 exports
+export { OptionalField, MultipleOptionalField, renderListOptionalField, renderListMultipleOptionalField, } from './OptionalField';
+// AbstractDateField 관련 exports
+export { AbstractDateField } from './AbstractDateField';
+// CheckButtonValidationField 관련 exports
+export { CheckButtonValidationField, } from './CheckButtonValidationField';

package/dist/listgrid/components/fields/address/AddressFieldView.d.ts

@@ -0,0 +1,9 @@
+import { InputRendererProps } from '../../../config/Config';
+import { EntityForm } from '../../../config/EntityForm';
+interface AddressFieldViewProps extends InputRendererProps {
+    showMap?: boolean | undefined;
+    prefix?: string | undefined;
+    entityForm: EntityForm;
+}
+export declare const AddressFieldView: ({ entityForm, onChange, ...props }: AddressFieldViewProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/listgrid/components/fields/address/AddressFieldView.js

@@ -0,0 +1,92 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isTrue } from '../../../utils/BooleanUtil';
+import { defaultString, isBlank } from '../../../utils/StringUtil';
+import { KakaoMap } from '../address/KakaoMap';
+import { PostCodeSelector } from './PostCodeSelector';
+import { useEffect, useState } from 'react';
+import { getRuntimeConfig } from '../../../config/RuntimeConfig';
+const kakaoMapApiKey = getRuntimeConfig().kakaoMapAppKey;
+export const AddressFieldView = ({ entityForm, onChange, ...props }) => {
+    // prefix 처리 로직
+    const determinePrefix = () => {
+        if (props.prefix) {
+            return props.prefix;
+        }
+        // name에 .이 포함되어 있다면 . 앞의 문자열이 prefix
+        if (props.name && props.name.includes('.')) {
+            return props.name.split('.')[0];
+        }
+        return '';
+    };
+    const prefix = determinePrefix();
+    // 필드명 생성 함수
+    const getFieldName = (fieldName) => {
+        if (prefix) {
+            return `${prefix}.${fieldName}`;
+        }
+        return fieldName;
+    };
+    const [postalCode, setPostalCode] = useState();
+    const [clientView, setClientView] = useState(false);
+    const showMap = isTrue(props.showMap, true) && !isBlank(kakaoMapApiKey) && clientView;
+    const [address, setAddress] = useState();
+    useEffect(() => {
+        (async () => {
+            const state = (await entityForm.getValue(getFieldName('state'))) ?? '';
+            const city = (await entityForm.getValue(getFieldName('city'))) ?? '';
+            const postalCode = (await entityForm.getValue(getFieldName('postalCode'))) ?? '';
+            const address1 = (await entityForm.getValue(getFieldName('address1'))) ?? '';
+            const address2 = (await entityForm.getValue(getFieldName('address2'))) ?? '';
+            const longitude = (await entityForm.getValue(getFieldName('longitude'))) ?? '';
+            const latitude = (await entityForm.getValue(getFieldName('latitude'))) ?? '';
+            if (!isBlank(postalCode)) {
+                setPostalCode(postalCode);
+            }
+            setAddress({
+                city,
+                state,
+                postalCode,
+                address1,
+                address2,
+                longitude,
+                latitude,
+            });
+        })();
+        setClientView(true);
+    }, [entityForm]);
+    function onSetCoordinates(latitude, longitude) {
+        onChange({
+            state: defaultString(address.state),
+            city: defaultString(address.city),
+            address1: address.address1,
+            address2: address.address2,
+            postalCode: address.postalCode,
+            longitude: longitude,
+            latitude: latitude,
+        }, true);
+    }
+    return (_jsxs("div", { children: [_jsx(PostCodeSelector, { required: isTrue(props.required), address: address, onSubmit: (address) => {
+                    onChange({
+                        state: defaultString(address.state),
+                        city: defaultString(address.city),
+                        address1: address.address1,
+                        address2: address.address2,
+                        postalCode: address.postalCode,
+                        longitude: address.longitude,
+                        latitude: address.latitude,
+                    }, true);
+                }, onRemove: () => {
+                    onChange({
+                        state: '',
+                        city: '',
+                        address1: '',
+                        address2: '',
+                        postalCode: '',
+                    }, true);
+                } }), showMap && (_jsx(KakaoMap, { ...address, apiKey: kakaoMapApiKey, onSetCoordinates: (latitude, longitude) => {
+                    if (latitude !== address?.latitude || longitude !== address?.longitude) {
+                        onSetCoordinates(latitude, longitude);
+                    }
+                } }))] }));
+};

package/dist/listgrid/components/fields/address/AddressMapField.d.ts

@@ -0,0 +1,33 @@
+import { FormField, FormFieldProps } from '../abstract';
+import { FieldRenderParameters } from '../../../config/EntityField';
+interface AddressMapFieldProps extends FormFieldProps {
+    prefix?: string | undefined;
+    showMap?: boolean | undefined;
+}
+export interface Address {
+    state?: string | undefined;
+    city?: string | undefined;
+    address1: string;
+    address2: string;
+    postalCode: string;
+    longitude?: number | undefined;
+    latitude?: number | undefined;
+}
+export declare class AddressMapField extends FormField<AddressMapField> {
+    showMap?: boolean | undefined;
+    prefix?: string | undefined;
+    constructor(name: string, order: number, showMap?: boolean, prefix?: string);
+    static create(props: AddressMapFieldProps): AddressMapField;
+    /**
+     * AddressMapField 핵심 렌더링 로직 (원본 render 로직 보존)
+     */
+    protected renderInstance(params: FieldRenderParameters): Promise<React.ReactNode | null | undefined>;
+    /**
+     * AddressMapField 인스턴스 생성
+     */
+    protected createInstance(name: string, order: number): AddressMapField;
+    withPrefix(prefix: string): AddressMapField;
+    protected copyFields(origin: AddressMapFieldProps, includeValue?: boolean): this;
+}
+export declare function appendLastDot(str?: string): string;
+export {};

package/dist/listgrid/components/fields/address/AddressMapField.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormField } from '../abstract';
+import { getInputRendererParameters } from '../../helper/FieldRendererHelper';
+import { AddressFieldView } from './AddressFieldView';
+export class AddressMapField extends FormField {
+    constructor(name, order, showMap, prefix) {
+        super(name, order, 'custom');
+        this.showMap = showMap;
+        this.prefix = prefix;
+    }
+    static create(props) {
+        return new AddressMapField(props.name, props.order, props.showMap, props.prefix);
+    }
+    /**
+     * AddressMapField 핵심 렌더링 로직 (원본 render 로직 보존)
+     */
+    renderInstance(params) {
+        return (async () => {
+            const inputParams = await getInputRendererParameters(this, { ...params });
+            return (_jsx(AddressFieldView, { ...inputParams, showMap: this.showMap, prefix: this.prefix }));
+        })();
+    }
+    /**
+     * AddressMapField 인스턴스 생성
+     */
+    createInstance(name, order) {
+        return new AddressMapField(name, order, this.showMap);
+    }
+    withPrefix(prefix) {
+        this.prefix = prefix;
+        return this;
+    }
+    copyFields(origin, includeValue = true) {
+        super.copyFields(origin, includeValue);
+        this.prefix = origin.prefix;
+        this.showMap = origin.showMap;
+        return this;
+    }
+}
+export function appendLastDot(str) {
+    if (!str || str.length === 0) {
+        return '';
+    }
+    if (str.endsWith('.')) {
+        return str;
+    }
+    return str + '.';
+}

package/dist/listgrid/components/fields/address/KakaoMap.d.ts

@@ -0,0 +1,10 @@
+interface KakaoMapProps {
+    latitude?: number | undefined;
+    longitude?: number | undefined;
+    address1?: string | undefined;
+    address2?: string | undefined;
+    onSetCoordinates: (latitude: number, longitude: number) => void;
+    apiKey: string;
+}
+export declare const KakaoMap: (props: KakaoMapProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/listgrid/components/fields/address/KakaoMap.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Map, MapMarker, useKakaoLoader } from 'react-kakao-maps-sdk';
+import { useState } from 'react';
+import { isBlank } from '../../../utils/StringUtil';
+export const KakaoMap = (props) => {
+    const [latitude, setLatitude] = useState(props.latitude);
+    const [longitude, setLongitude] = useState(props.longitude);
+    useKakaoLoader({ appkey: props.apiKey, libraries: ['services'] });
+    /*
+    (async () => {
+      useKakaoLoader({appkey: kakaoMapApiKey, libraries: ['services']});
+    })().then(() => {
+  
+    });
+  */
+    if (latitude === undefined || longitude === undefined) {
+        if (isBlank(props.address1)) {
+            return null;
+        }
+        else {
+            if (props.address1) {
+                try {
+                    const geocoder = new kakao.maps.services.Geocoder();
+                    geocoder.addressSearch(props.address1, (result, status) => {
+                        if (status === 'OK' && result) {
+                            const latitude = parseFloat(result[0].y);
+                            const longitude = parseFloat(result[0].x);
+                            setLatitude(latitude);
+                            setLongitude(longitude);
+                            props.onSetCoordinates(latitude, longitude);
+                        }
+                    });
+                }
+                catch (e) {
+                    // no nothing
+                }
+            }
+        }
+    }
+    if (latitude === undefined || longitude === undefined) {
+        return null;
+    }
+    return (_jsx(_Fragment, { children: _jsx(Map, { id: 'address-map', level: 3, center: { lat: latitude, lng: longitude }, style: { width: '100%', height: '300px', marginTop: `1rem` }, children: _jsx(MapMarker // 마커를 생성합니다
+            , { position: {
+                    // 마커가 표시될 위치입니다
+                    lat: latitude,
+                    lng: longitude,
+                }, title: props.address1 ? `${props.address1} ${props.address2}` : '' }) }) }));
+};

package/dist/listgrid/components/fields/address/PostCodeSelector.d.ts

@@ -0,0 +1,9 @@
+import { Address } from './AddressMapField';
+interface PostCodeSelectorProps {
+    address?: Address | undefined;
+    onSubmit: (address: Address) => void;
+    onRemove?: (() => void) | undefined;
+    required: boolean;
+}
+export declare const PostCodeSelector: (props: PostCodeSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export {};