@daracl/form 0.0.20 → 0.0.22

package/dist/index.umd.d.ts

@@ -1,3 +1,4 @@
+import "@daracl/ui-style/theme-vars.css";
 import "../style/daracl.form.scss";
 import "@daracl/datetimepicker/dist/daracl.datetimepicker.min.css";
 declare global {

package/dist/util/utils.d.ts

@@ -1,21 +1,9 @@
-import { FormField } from "@t/FormField";
-export declare const replaceXss: (inputText: string) => string;
-export declare const hasOwnProp: (obj: any, key: string) => boolean;
-export declare const unReplace: (inputText: string) => string;
+import type { FormField } from "@t/FormField";
+import { xss as replaceXss, unXss as unReplace } from "@daracl/core/utils";
+export { isArray, isBlank, isFunction, isString, isUndefined, isPlainObject, isNil as isEmpty, hasProperty as hasOwnProp, getHashCode, templateToElement } from "@daracl/core/utils";
+export { replaceXss, unReplace };
 export declare const unFieldName: (fieldName: string) => string;
-export declare const isBlank: (value: any) => boolean;
-export declare const isUndefined: (value: any) => value is undefined;
-export declare const isFunction: (value: any) => boolean;
-export declare const isString: (value: any) => value is string;
 export declare const isNumber: (value: any) => value is number;
-export declare const isArray: (value: any) => value is any[];
-/**
- * 값있는지 여부 체크.
- *
- * @param {*} value
- * @returns {boolean}
- */
-export declare const isEmpty: (value: any) => boolean;
 /**
  * tab render type check
  *
@@ -45,18 +33,8 @@ export declare const ignoreValueField: (field: FormField) => boolean;
  * @returns {string} replace 된 field name
  */
 export declare const getXssFieldName: (field: FormField) => string;
-export declare const getHashCode: (str: string) => string | number;
-export declare const isHiddenField: (field: FormField) => boolean;
-export declare const templateToElement: (htmlTemplate: string) => Element | null;
-export declare function isPlainObject(obj: any): boolean;
-/**
- * object merge
- *
- * @example
- ```
- merge({},{aaa:'bbb',ccc:'ddd'},{bbb:'bbb','aaa':'aaa'})) -> {"aaa": "aaa", "bbb": "bbb", "ccc": "ddd"}
- ```
- * @param {...any[]} value
- * @returns {object}
+export declare const isHiddenField: (field: FormField | null | undefined) => boolean;
+/** Merge form options using the shared core implementation.
+ * Keep the legacy non-object first argument behavior.
  */
-export declare const merge: (...value: any[]) => any;
+export declare const merge: (...values: any[]) => any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@daracl/form",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "sideEffects": false,
   "description": "Daracl form validation ",
   "author": {
@@ -60,70 +60,58 @@
     "editor.formatOnSave": false
   },
   "peerDependencies": {
-    "@daracl/core": "^0.0.3",
+    "@daracl/core": "^0.0.10",
     "@daracl/toast": "^0.0.10",
     "@daracl/datetimepicker": "^0.0.13"
   },
   "dependencies": {
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "init": "^0.1.2",
-    "ink-docstrap": "^1.3.2",
-    "preact": "^10.13.2",
-    "tslint": "^6.1.3",
-    "tslint-config-prettier": "^1.18.0"
+    "@daracl/ui-style": "^0.0.1",
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@daracl/core": "^0.0.5",
+    "@daracl/core": "0.0.10",
     "@daracl/toast": "^0.0.10",
     "@daracl/datetimepicker": "^0.0.13",
-    "@mxssfd/typedoc-theme": "^1.1.1",
-    "@types/jest": "^29.5.1",
     "@playwright/test": "^1.55.1",
-    "@types/node": "^20.1.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
-    "@typescript-eslint/parser": "^5.59.5",
-    "cpx": "^1.5.0",
-    "eslint": "^8.40.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
-    "file-loader": "^6.2.0",
-    "rimraf": "^6.0.1",
-    "rollup-plugin-visualizer": "^6.0.3",
-    "jest": "^29.0.0",
-    "material-icons": "^1.13.8",
-    "mini-css-extract-plugin": "^2.7.6",
+    "@types/node": "^24.0.0",
+    "esbuild": "^0.28.2",
     "prettier": "^2.8.8",
-    "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.80.2",
-    "sass-loader": "^16.0.2",
-    "style-loader": "^3.3.3",
-    "ts-jest": "^29.1.0",
-    "ts-loader": "^9.4.2",
-    "typedoc": "^0.26.7",
-    "typescript": "^5.1.6",
-    "url-loader": "^4.1.1",
-    "vite": "^5.4.0",
-    "vite-plugin-banner": "^0.7.1"
+    "sass": "^1.107.0",
+    "typedoc": "^0.28.20",
+    "typescript": "~5.9.3",
+    "vite": "~7.3.7",
+    "rollup": "^4.66.0"
   },
   "scripts": {
-    "build": "yarn build:escjs && yarn build:umd && yarn mergenclean",
-    "build:umd": "vite build --config vite.config.umd.js --mode production && vite build --config vite.config.umd.js --mode development",
-    "build:escjs": "vite build --config vite.config.js --mode production && vite build --config vite.config.js --mode development",
-    "mergenclean": "yarn copy-dts && yarn build:tsc && yarn copy-unmin && yarn clean:unmin && yarn copy-html",
+    "build": "node scripts/build.mjs",
+    "build:umd": "node scripts/build.mjs umd",
+    "build:escjs": "node scripts/build.mjs es",
+    "mergenclean": "npm run copy-dts && npm run build:tsc && npm run copy-unmin && npm run clean:unmin && npm run copy-html",
     "build:tsc": "tsc --emitDeclarationOnly",
     "dev": "vite",
     "preview": "vite preview",
     "docs:gen": "typedoc --tsconfig tsconfig.doc.json",
-    "dts:gen": "npx -p typescript tsc src/index.js --declaration --allowJs --emitDeclarationOnly --outDir dist",
-    "test": "jest",
+    "dts:gen": "npm run build:tsc",
+    "test": "node --test test/*.test.cjs",
     "pwtest": "playwright test",
-    "clean:unmin": "rimraf dist/unmin",
-    "copy-html": "cpx \"public/index.html\" dist",
-    "copy-unmin": "cpx \"dist/unmin/**.*\" dist",
-    "copy-dts": "cpx \"src/**/*.d.ts\" dist",
-    "prepublishOnly": "npm run build"
+    "clean:unmin": "node scripts/build-files.mjs clean-unmin",
+    "copy-html": "node scripts/build-files.mjs html",
+    "copy-unmin": "node scripts/build-files.mjs unmin",
+    "copy-dts": "node scripts/build-files.mjs dts",
+    "prepublishOnly": "npm run build",
+    "start": "npm run dev",
+    "typecheck": "tsc --noEmit",
+    "verify": "npm run typecheck && npm test && npm run build && npm run test:package",
+    "test:package": "node scripts/package-smoke.mjs",
+    "audit:security": "npm audit --omit=dev",
+    "audit:security:all": "npm audit"
+  },
+  "engines": {
+    "node": ">=22.12.0",
+    "npm": ">=10"
+  },
+  "overrides": {
+    "@daracl/core": "$@daracl/core",
+    "esbuild": "$esbuild"
   }
 }

package/style/base/_base.scss

@@ -1,15 +1,16 @@
+@use "@daracl/ui-style/themes" as themes;
 @mixin df-base {
   padding: 0px;
   margin-top: 8px;
-  color: var(--font-color);
+  color: themes.themed(font-color);
 
   *,
   ::after,
   ::before {
     box-sizing: border-box;
-    line-height: var(--line-height);
-    font-size: var(--font-size);
-    color: var(--font-color);
+    line-height: var(--df-line-height);
+    font-size: var(--df-font-size);
+    color: themes.themed(font-color);
   }
 
   .df-txt {
@@ -59,9 +60,9 @@
   select,
   textarea {
     background-color: transparent;
-    color: var(--font-color);
+    color: themes.themed(font-color);
     &[disabled] {
-      background-color: var(--input-disabled-bg);
+      background-color: themes.themed(input-disabled-bg);
       opacity: 0.8;
     }
   }

package/style/components/_button.scss

@@ -1,16 +1,17 @@
+@use "@daracl/ui-style/themes" as themes;
 @mixin df-button {
   .df-btn {
     padding: 5px 10px;
     border-radius: calc(0.45rem - 1px);
-    border: 1px solid var(--border-color);
-    background-color: var(--button-bg);
+    border: 1px solid themes.themed(input-border-color);
+    background-color: themes.themed(button-bg);
 
     cursor: pointer;
     transition: background-color 0.3s;
 
     &:hover {
-      color: var(--font-hover-color);
-      background-color: var(--button-bg-hover);
+      color: themes.themed(font-hover-color);
+      background-color: themes.themed(button-hover-bg);
     }
   }
 }

package/style/components/_field-container.scss

@@ -1,3 +1,4 @@
+@use "@daracl/ui-style/themes" as themes;
 @mixin df-field-container {
   .df-field-container {
     overflow: initial;
@@ -21,13 +22,13 @@
       }
 
       .df-file-wrapper {
-        border: 1px solid var(--border-color);
+        border: 1px solid themes.themed(input-border-color);
         text-align: center;
         display: block;
         width: 100%;
         padding: 0.375rem 0.75rem;
         font-weight: 400;
-        line-height: var(--line-height-lg);
+        line-height: var(--df-line-height-lg);
         background-clip: padding-box;
         border-radius: 4px;
         transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@@ -36,7 +37,7 @@
 
     .df-description {
       padding: 3px 0px 0px;
-      font-size: var(--font-size-sm);
+      font-size: var(--df-font-size-sm);
     }
   }
 }

package/style/components/_field-group.scss

@@ -4,7 +4,7 @@
     align-items: center;
 
     .df-field-item {
-      padding-top: var(--field-padding-top);
+      padding-top: var(--df-field-padding-top);
       padding-right: 8px;
       &.df-vertical {
         > * {

package/style/components/_file-list.scss

@@ -1,3 +1,4 @@
+@use "@daracl/ui-style/themes" as themes;
 @mixin df-file-list {
   .df-file-list {
     .df-file-item {
@@ -11,7 +12,7 @@
       cursor: pointer;
 
       &:hover {
-        background-color: var(--button-bg-hover);
+        background-color: themes.themed(button-hover-bg);
       }
 
       // 아이콘 색은 mask 로 잘라내고 --icon-color 테마 변수로 채운다.
@@ -20,7 +21,7 @@
         display: block;
         width: 100%;
         height: 100%;
-        background-color: var(--icon-color);
+        background-color: themes.themed(icon-stroke-color);
         -webkit-mask-repeat: no-repeat;
         mask-repeat: no-repeat;
       }

package/style/components/_form-field.scss

@@ -1,17 +1,18 @@
+@use "@daracl/ui-style/themes" as themes;
 @mixin df-form-field {
   .df-form-field {
-    border: 1px solid var(--border-color);
+    border: 1px solid themes.themed(input-border-color);
     display: block;
     width: 100%;
     padding: 0px 0.75rem;
     font-weight: 400;
-    line-height: var(--line-height);
+    line-height: var(--df-line-height);
     height: 30px;
     border-radius: 4px;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    background-color: var(--input-bg);
+    background-color: themes.themed(input-bg);
     background-clip: padding-box;
-    color: var(--input-color);
+    color: themes.themed(input-color);
 
     &[type="radio"],
     &[type="checkbox"] {
@@ -27,6 +28,11 @@
       appearance: none;
       -webkit-appearance: none;
       -moz-appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 7px center;
+      background-size: 12px;
+      padding-right: 20px;
     }
 
     &.df-textarea {

package/style/components/_form-group.scss

@@ -1,3 +1,4 @@
+@use "@daracl/ui-style/themes" as themes;
 @use "../abstracts" as *;
 
 @mixin df-form-group {
@@ -11,7 +12,7 @@
     flex-direction: row;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
-    margin-top: var(--field-margin-top);
+    margin-top: var(--df-field-margin-top);
     margin-bottom: 0px;
     margin-right: 0px !important;
     margin-left: 0px !important;
@@ -48,8 +49,8 @@
 
     &.invalid {
       .df-form-field {
-        border-color: var(--invalid-border-color);
-        outline-color: var(--invalid-border-color);
+        border-color: themes.themed(invalid-border-color);
+        outline-color: themes.themed(invalid-border-color);
       }
 
       > .df-field-container.required > .df-field .df-help-icon {
@@ -60,8 +61,8 @@
       .df-help-message {
         display: block;
         > * {
-          color: var(--invalid-font-color);
-          font-size: var(--font-size-sm);
+          color: themes.themed(invalid-font-color);
+          font-size: var(--df-font-size-sm);
           padding: 3px 0px;
         }
       }
@@ -77,7 +78,7 @@
     }
 
     .df-file-label {
-      border: 1px solid var(--border-color);
+      border: 1px solid themes.themed(input-border-color);
       display: inline;
       width: 100%;
       padding: 3px 15px;
@@ -87,7 +88,7 @@
       transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 
       &:hover {
-        background-color: var(--button-bg-hover);
+        background-color: themes.themed(button-hover-bg);
       }
     }
   }

package/style/components/_grid-field.scss

@@ -1,7 +1,8 @@
+@use "@daracl/ui-style/themes" as themes;
 @mixin df-grid-field {
   .df-grid-field {
     .df-grid-btn-area {
-      border: 1px solid var(--border-color);
+      border: 1px solid themes.themed(border-color);
       padding: 3px;
     }
 
@@ -9,7 +10,7 @@
       width: 100%;
       height: auto;
       overflow-y: auto;
-      border: 1px solid var(--border-color);
+      border: 1px solid themes.themed(border-color);
 
       .df-btn {
         padding: 3px 5px;
@@ -25,8 +26,8 @@
             position: sticky;
             top: 0px;
             z-index: 10;
-            border-bottom: 1px solid var(--border-color);
-            background-color: var(--bg-grid-header);
+            border-bottom: 1px solid themes.themed(border-color);
+            background-color: themes.themed(panel-header-bg);
             text-align: center;
           }
         }
@@ -66,8 +67,8 @@
 
         .invalid {
           .df-form-field {
-            border-color: var(--invalid-border-color);
-            outline-color: var(--invalid-border-color);
+            border-color: themes.themed(invalid-border-color);
+            outline-color: themes.themed(invalid-border-color);
           }
 
           > .df-grid-column.required .df-field .df-help-icon {
@@ -78,8 +79,8 @@
           .df-help-message {
             display: block;
             position: absolute;
-            border: 1px solid var(--invalid-border-color);
-            border-color: var(--invalid-border-color) transparent transparent transparent;
+            border: 1px solid themes.themed(invalid-border-color);
+            border-color: themes.themed(invalid-border-color) transparent transparent transparent;
             top: calc(100% + 6px);
             left: 50%;
             transform: translateX(-50%);
@@ -87,8 +88,8 @@
             padding: 5px 5px;
             border-radius: 0.4rem;
             z-index: 2;
-            background-color: var(--invalid-background-color);
-            color: var(--invalid-font-color);
+            background-color: themes.themed(invalid-bg);
+            color: themes.themed(invalid-font-color);
             &::after {
               content: "";
               position: absolute;
@@ -97,7 +98,7 @@
               width: 0;
               height: 0;
               border: 7px solid transparent;
-              border-bottom-color: var(--invalid-border-color);
+              border-bottom-color: themes.themed(invalid-border-color);
               border-top: 0;
               border-left: 0;
               margin-left: -3.5px;

package/style/components/_icon.scss

@@ -1,3 +1,4 @@
+@use "@daracl/ui-style/themes" as themes;
 @mixin df-icon {
   .df-icon {
     display: inline-block;
@@ -9,7 +10,7 @@
   // 아이콘 색은 mask 로 잘라내고 --icon-color 테마 변수로 채운다.
   .df-add-icon,
   .df-remove-icon {
-    background-color: var(--icon-color);
+    background-color: themes.themed(icon-stroke-color);
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
   }

package/style/components/_label.scss

@@ -1,18 +1,19 @@
+@use "@daracl/ui-style/themes" as themes;
 @mixin df-label {
   .df-label {
     position: relative;
     vertical-align: top;
-    padding-right: var(--field-padding-right);
+    padding-right: var(--df-field-padding-right);
     display: flex;
     align-items: flex-start;
 
     .required {
-      color: var(--color-danger);
+      color: themes.themed(error-color);
       display: inline-block;
       vertical-align: middle;
 
       &::after {
-        color: var(--color-danger);
+        color: themes.themed(error-color);
         content: "*";
         vertical-align: middle;
       }
@@ -28,13 +29,13 @@
 
     .df-tooltip {
       visibility: visible;
-      color: var(--tooltip-color);
-      background: var(--tooltip-background);
+      color: themes.themed(tooltip-color);
+      background: themes.themed(tooltip-bg);
       width: 16px;
       height: 16px;
       border-radius: 8px;
       text-align: center;
-      line-height: var(--line-height-lg);
+      line-height: var(--df-line-height-lg);
       margin: 0 5px;
       font-size: 12px;
       cursor: help;
@@ -45,9 +46,9 @@
       .df-tooltip-text {
         display: none;
         text-align: initial;
-        background: var(--tooltip-background);
+        background: themes.themed(tooltip-bg);
         border-radius: 5px;
-        color: var(--tooltip-color);
+        color: themes.themed(tooltip-color);
         padding: 10px 5px;
         position: absolute;
         z-index: 2;

package/style/components/_tab.scss

@@ -1,3 +1,4 @@
+@use "@daracl/ui-style/themes" as themes;
 @mixin df-tab {
   .df-tab-header {
     list-style: none;
@@ -5,9 +6,9 @@
     padding: 0px;
 
     display: flex;
-    line-height: var(--line-height);
+    line-height: var(--df-line-height);
     width: 100%;
-    border-bottom: 1px solid var(--border-color);
+    border-bottom: 1px solid themes.themed(border-color);
 
     &.df-tab-al {
       &-left {
@@ -32,8 +33,8 @@
 
       &.active {
         a {
-          color: var(--font-hover-color);
-          background-color: var(--tab-bg);
+          color: themes.themed(font-hover-color);
+          background-color: themes.themed(tab-bg);
         }
       }
 
@@ -45,12 +46,12 @@
         float: left;
         padding: 0.5em 1em;
         text-decoration: none;
-        color: var(--font-color);
+        color: themes.themed(font-color);
         height: 30px;
 
         &:hover {
-          background-color: var(--tab-bg-hover);
-          border: 1px solid var(--border-color);
+          background-color: themes.themed(tab-bg-hover);
+          border: 1px solid themes.themed(border-color);
           border-bottom-width: 0;
         }
       }

package/style/daracl.form.scss

@@ -1,22 +1,29 @@
 // Entry point: 각 파일은 mixin 만 정의하고, .daracl-form 스코프는 여기서 한 번만 감싼다.
-// 출력 순서가 기존 CSS 와 동일하도록 theme -> base -> components 순으로 include 한다.
-@use "sass:map";
-@use "themes";
+//
+// 색상 / 테두리 같은 공통 값은 @daracl/ui-style 의 테마 변수(--dui-*)를 사용한다.
+// light 값이 fallback 으로 들어 있어 단독으로도 표시된다.
+// dark 등 다른 테마는 앱이 '@daracl/ui-style/theme-vars.css' 를 로드하고
+// <html data-daracl-theme="dark"> 로 전환한다. (body.dark / .dark 클래스 방식은 지원하지 않는다.)
+@use "@daracl/ui-style/abstracts" as style;
+@use "@daracl/ui-style/themes" as themes;
 @use "base" as *;
 @use "components" as *;
 
-/* ==========================================================================
-   Theme
-   ========================================================================== */
-$default-theme: themes.$default-theme;
-
 /* ==========================================================================
    Common
    ========================================================================== */
 .daracl-form {
-  background: var(--body-bg);
+  // form 전용 변수. 간격 / 글꼴 크기는 ui-style 토큰 값이며, 필요하면 앱에서 덮어쓸 수 있다.
+  --df-field-margin-top: #{style.$field-margin-top};
+  --df-field-padding-top: #{style.$field-padding-top};
+  --df-field-padding-right: #{style.$field-padding-right};
+  --df-line-height: 1.2em;
+  --df-line-height-lg: 1.5em;
+  --df-font-size-sm: #{style.$font-size-xs};
+  --df-font-size: #{style.$font-size-md};
+
+  background: themes.themed(body-bg);
 
-  @include themes.theme(map.get(themes.$themes, $default-theme));
   @include df-base;
   @include df-label;
   @include df-form-field;
@@ -30,24 +37,3 @@ $default-theme: themes.$default-theme;
   @include df-form-group;
   @include df-grid-field;
 }
-
-// Global theme
-@each $name, $theme-value in themes.$themes {
-  @if $name != $default-theme {
-    [data-daracl-theme="#{$name}"] {
-      .daracl-form {
-        @include themes.theme($theme-value);
-      }
-    }
-  }
-}
-
-// 그 외 테마: body.<name> 또는 .daracl-form.<name>
-@each $name, $theme-value in themes.$themes {
-  @if $name != $default-theme {
-    body.#{$name} .daracl-form,
-    .daracl-form.#{$name} {
-      @include themes.theme($theme-value);
-    }
-  }
-}

package/style/themes/_common.scss

@@ -1,18 +0,0 @@
-// 모든 테마에서 값이 같은 변수. 테마별 값이 필요하면 각 테마 파일에서 override 한다.
-$theme-common: (
-  color-danger: #d9534f,
-  background-danger: #d9534f,
-  invalid-font-color: #ff4136,
-  invalid-border-color: #ffb6b4,
-  invalid-background-color: #fdd,
-  tooltip-background: #3e3e3e,
-  tooltip-color: #fff,
-  field-margin-top: 10px,
-  field-padding-top: 3px,
-  field-padding-right: 15px,
-  line-height: 1.2em,
-  line-height-lg: 1.5em,
-  font-size-sm: 12px,
-  font-size: 14px,
-  font-size-lg: 16px,
-);