@daracl/form 0.0.16 → 0.0.18

package/dist/index.umd.d.ts

@@ -0,0 +1,7 @@
+import "../style/daracl.form.scss";
+import "@daracl/datetimepicker/dist/daracl.datetimepicker.min.css";
+declare global {
+    interface Window {
+        Daracl?: any;
+    }
+}

package/dist/renderer/ButtonRender.d.ts

@@ -1,6 +1,6 @@
 import { FormField } from "@t/FormField";
-import Render from "./Render";
-import DaraForm from "src/DaraForm";
+import { Render } from "./Render";
+import { DaraForm } from "@/DaraForm";
 export default class ButtonRender extends Render {
     constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm);
     mounted(): void;

package/dist/renderer/CheckboxRender.d.ts

@@ -1,6 +1,6 @@
 import { FormField } from "@t/FormField";
-import Render from "./Render";
-import DaraForm from "src/DaraForm";
+import { Render } from "./Render";
+import { DaraForm } from "@/DaraForm";
 export default class CheckboxRender extends Render {
     private defaultCheckValue;
     constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm);

package/dist/renderer/CustomRender.d.ts

@@ -1,6 +1,6 @@
 import { FormField } from "@t/FormField";
-import Render from "./Render";
-import DaraForm from "src/DaraForm";
+import { Render } from "./Render";
+import { DaraForm } from "@/DaraForm";
 export default class CustomRender extends Render {
     private customFunction;
     constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm);

package/dist/renderer/DateRender.d.ts

@@ -1,6 +1,6 @@
 import { FormField } from "@t/FormField";
-import Render from "./Render";
-import DaraForm from "src/DaraForm";
+import { Render } from "./Render";
+import { DaraForm } from "@/DaraForm";
 export default class DateRender extends Render {
     private element;
     private dateObj;

package/dist/renderer/DropdownRender.d.ts

@@ -1,6 +1,6 @@
 import { FormField } from "@t/FormField";
-import Render from "./Render";
-import DaraForm from "src/DaraForm";
+import { Render } from "./Render";
+import { DaraForm } from "@/DaraForm";
 export default class DropdownRender extends Render {
     private element;
     private defaultSelected;

package/dist/renderer/FileRender.d.ts

@@ -1,6 +1,6 @@
 import { FormField } from "@t/FormField";
-import Render from "./Render";
-import DaraForm from "src/DaraForm";
+import { Render } from "./Render";
+import { DaraForm } from "@/DaraForm";
 export default class FileRender extends Render {
     private element;
     private removeIds;

package/dist/renderer/GridRender.d.ts

@@ -1,6 +1,6 @@
 import { FormField } from "@t/FormField";
-import Render from "./Render";
-import DaraForm from "src/DaraForm";
+import { Render } from "./Render";
+import { DaraForm } from "@/DaraForm";
 export default class GridRender extends Render {
     private customFunction;
     private gridForm;

package/dist/renderer/GroupRender.d.ts

@@ -1,6 +1,6 @@
 import { FormField } from "@t/FormField";
-import Render from "./Render";
-import DaraForm from "src/DaraForm";
+import { Render } from "./Render";
+import { DaraForm } from "@/DaraForm";
 export default class GroupRender extends Render {
     constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm);
     mounted(): void;

package/dist/renderer/HiddenRender.d.ts

@@ -1,6 +1,6 @@
 import { FormField } from "@t/FormField";
-import Render from "./Render";
-import DaraForm from "src/DaraForm";
+import { Render } from "./Render";
+import { DaraForm } from "@/DaraForm";
 export default class HiddenRender extends Render {
     constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm);
     mounted(): void;

package/dist/renderer/NumberRender.d.ts

@@ -1,6 +1,6 @@
 import { FormField } from "@t/FormField";
-import Render from "./Render";
-import DaraForm from "src/DaraForm";
+import { Render } from "./Render";
+import { DaraForm } from "@/DaraForm";
 export default class NumberRender extends Render {
     private element;
     constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm);

package/dist/renderer/PasswordRender.d.ts

@@ -1,6 +1,6 @@
 import { FormField } from "@t/FormField";
-import Render from "./Render";
-import DaraForm from "src/DaraForm";
+import { Render } from "./Render";
+import { DaraForm } from "@/DaraForm";
 export default class PasswordRender extends Render {
     private element;
     constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm);

package/dist/renderer/RadioRender.d.ts

@@ -1,6 +1,6 @@
 import { FormField } from "@t/FormField";
-import Render from "./Render";
-import DaraForm from "src/DaraForm";
+import { Render } from "./Render";
+import { DaraForm } from "@/DaraForm";
 export default class RadioRender extends Render {
     private defaultCheckValue;
     constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm);

package/dist/renderer/RangeRender.d.ts

@@ -1,6 +1,6 @@
 import { FormField } from "@t/FormField";
-import Render from "./Render";
-import DaraForm from "src/DaraForm";
+import { Render } from "./Render";
+import { DaraForm } from "@/DaraForm";
 export default class RangeRender extends Render {
     private element;
     private rangeNumElement;

package/dist/renderer/Render.d.ts

@@ -1,7 +1,7 @@
 import { FormField } from "@t/FormField";
 import { ValidResult } from "@t/ValidResult";
-import DaraForm from "src/DaraForm";
-export default abstract class Render {
+import { DaraForm } from "@/DaraForm";
+export declare abstract class Render {
     protected daraForm: DaraForm;
     protected rowElement: HTMLElement;
     protected field: FormField;

package/dist/renderer/TabRender.d.ts

@@ -1,6 +1,6 @@
 import { FormField } from "@t/FormField";
-import Render from "./Render";
-import DaraForm from "src/DaraForm";
+import { Render } from "./Render";
+import { DaraForm } from "@/DaraForm";
 export default class TabRender extends Render {
     private customFunction;
     private tabContainerElement;

package/dist/renderer/TextAreaRender.d.ts

@@ -1,6 +1,6 @@
 import { FormField } from "@t/FormField";
-import Render from "./Render";
-import DaraForm from "src/DaraForm";
+import { Render } from "./Render";
+import { DaraForm } from "@/DaraForm";
 export default class TextAreaRender extends Render {
     private element;
     constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm);

package/dist/renderer/TextRender.d.ts

@@ -1,6 +1,6 @@
 import { FormField } from "@t/FormField";
-import Render from "./Render";
-import DaraForm from "src/DaraForm";
+import { Render } from "./Render";
+import { DaraForm } from "@/DaraForm";
 export default class TextRender extends Render {
     private element;
     constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm);

package/dist/types/FormField.d.ts

@@ -1,6 +1,6 @@
-import DaraForm from "src/DaraForm";
-import { RENDER_TYPE, REGEXP_TYPE, TEXT_ALIGN_TYPE, FIELD_POSITION, ORIENTATION_TYPE } from "src/constants";
-import Render from "src/renderer/Render";
+import { DaraForm } from "@/DaraForm";
+import { RENDER_TYPE, REGEXP_TYPE, TEXT_ALIGN_TYPE, FIELD_POSITION, OrientationType } from "@/constants";
+import { Render } from "@/renderer/Render";
 
 export interface OptionCallback {
   (...params: any[]): any;
@@ -10,7 +10,7 @@ export interface ValuesInfo {
   labelField: string;
   valueField: string;
   list: any[];
-  orientation: ORIENTATION_TYPE;
+  orientation: OrientationType;
 }
 
 /**
@@ -63,9 +63,10 @@ export interface FieldStyle {
  */
 export interface FormField {
   name: string; // 'name'
+  displayMode?: "edit" | "view"; // 'edit'
   renderType?: RENDER_TYPE | string;
-  customOptions: any;
-  label: string; // '아이디'
+  label: string; // '이름'
+  position?: FIELD_POSITION; // 'top'
   style: {
     width: string | number;
     labelHide: boolean;
@@ -78,8 +79,10 @@ export interface FormField {
   tooltip: string; // 툴팁 문구
   disabled?: boolean; // disabled
   description: string; // 설명
+  descriptionClass?: string;
+  descriptionStyle?: string;
   placeholder: string; // input , textarea 문구
-  orientation: ORIENTATION_TYPE; // children에 사용
+  orientation: OrientationType; // children에 사용
   required?: boolean; //true // 필수 여부
   regexpType?: REGEXP_TYPE; // 정규식 타입
   rule: {
@@ -111,12 +114,7 @@ export interface FormField {
   fileDownload: OptionCallback; // file download function
   renderer: Render; // custom renderer
   conditional: ConditionInfo; // 보이기 여부
-  gridOptions?: {
-    disableAddButton?: boolean; // renderer 그리드 타입 추가 버튼 유무
-    disableRemoveButton?: boolean; // renderer 그리드 타입 추가 버튼 유무
-    align?: TEXT_ALIGN_TYPE; // renderer 그리드 타입 추가 버튼 유무
-    height: string; // grid 높이값
-  };
+  rendererOptions: any | GridOptions; // custom options 옵션
   $renderType: Render; // render Type
   $instance: Render; // 실제 render
   $orgin: FormField;
@@ -127,3 +125,10 @@ export interface FormField {
   $tabForm?: DaraForm; //tab 일경우 폼 정보
   $validName: string; //
 }
+
+export interface GridOptions {
+  disableAddButton?: boolean; // renderer 그리드 타입 추가 버튼 유무
+  disableRemoveButton?: boolean; // renderer 그리드 타입 추가 버튼 유무
+  align?: TEXT_ALIGN_TYPE; // renderer 그리드 타입 추가 버튼 유무
+  height: string; // grid 높이값
+}

package/dist/types/FormOptions.d.ts

@@ -1,4 +1,4 @@
-import { FORM_MODE, TEXT_ALIGN_TYPE } from "src/constants";
+import { FORM_MODE, TEXT_ALIGN_TYPE } from "@/constants";
 import { OptionCallback } from "./FormField";
 
 /**

package/dist/types/style.d.ts

@@ -0,0 +1,3 @@
+// scss/css side-effect import 용 모듈 선언 (예: import "../style/daracl.form.scss")
+declare module "*.scss";
+declare module "*.css";

package/dist/util/renderFactory.d.ts

@@ -1,3 +1,3 @@
 import { FormField } from "@t/FormField";
-import Render from "../renderer/Render";
+import { Render } from "../renderer/Render";
 export declare const getRenderer: (field: FormField) => Render;

package/dist/util/styleUtils.d.ts

@@ -1,14 +1,12 @@
 import { FieldStyle, FormField } from "@t/FormField";
 import { FormOptions } from "@t/FormOptions";
-declare const _default: {
-    /**
-     * field style 처리
-     *
-     * @param formOptions FormOptions
-     * @param field FormField
-     * @param beforeField FormField
-     * @returns FieldStyle
-     */
-    fieldStyle(formOptions: FormOptions, field: FormField, beforeField?: FormField | null, isLabelHide?: boolean): FieldStyle;
-};
-export default _default;
+/**
+ * field style 처리
+ *
+ * @param formOptions FormOptions
+ * @param field FormField
+ * @param beforeField FormField
+ * @returns FieldStyle
+ */
+export declare function resolveFieldStyle(formOptions: FormOptions, field: FormField, beforeField?: FormField | null, isLabelHide?: boolean): FieldStyle;
+export declare function orientationClassName(orientation: string): string;

package/dist/util/utils.d.ts

@@ -8,7 +8,7 @@ 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 Array<any>;
+export declare const isArray: (value: any) => value is any[];
 /**
  * 값있는지 여부 체크.
  *

package/package.json

@@ -1,140 +1,129 @@
-{
-  "name": "@daracl/form",
-  "version": "0.0.16",
-  "sideEffects": false,
-  "description": "Daracl form validation ",
-  "author": {
-    "name": "darainfo",
-    "email": "darainfosys@gmail.com",
-    "url": "https://www.moaview.com"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/darainfo/daracl.form.git"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org"
-  },
-  "license": "MIT",
-  "keywords": [
-    "@daracl/form",
-    "daraclValidation",
-    "daracl-validation",
-    "daraclForm",
-    "daracl-form",
-    "form",
-    "validation",
-    "darainfo",
-    "javascript"
-  ],
-  "main": "src/index.ts",
-  "types": "./dist/index.d.ts",
-  "homepage": "https://github.com/darainfo/daracl.form",
-  "bugs": {
-    "url": "https://github.com/darainfo/daracl.form/issues",
-    "email": "darainfosys@gmail.com"
-  },
-  "exports": {
-    ".": "./dist/index.js",
-    "./dist/": "./dist/",
-    "./style/": "./style/"
-  },
-  "files": [
-    "dist",
-    "style"
-  ],
-  "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"
-  },
-  "prettier": {
-    "printWidth": 256,
-    "useTabs": false,
-    "tabWidth": 2,
-    "bracketSpacing": true,
-    "semi": true,
-    "singleQuote": false
-  },
-  "editor.formatOnSave": true,
-  "[javascript]": {
-    "editor.formatOnSave": false
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.22.5",
-    "@babel/core": "^7.21.4",
-    "@babel/node": "^7.20.7",
-    "@babel/parser": "^7.21.4",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-transform-modules-commonjs": "^7.21.2",
-    "@babel/plugin-transform-runtime": "^7.21.4",
-    "@babel/preset-env": "^7.22.5",
-    "@babel/preset-typescript": "^7.21.4",
-    "@mxssfd/typedoc-theme": "^1.1.1",
-    "@types/dropzone": "^5.7.4",
-    "@types/file-saver": "^2.0.5",
-    "@types/jest": "^29.5.1",
-    "@types/lodash": "^4.14.194",
-    "@types/lodash-es": "^4.17.7",
-    "@types/node": "^20.1.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
-    "@typescript-eslint/parser": "^5.59.5",
-    "@daracl/datetimepicker": "^0.0.9",
-    "@daracl/toast": "^0.0.7",
-    "babel-loader": "^8.3.0",
-    "babel-plugin-dynamic-import-webpack": "^1.1.0",
-    "babel-plugin-lodash": "^3.3.4",
-    "copy-webpack-plugin": "^11.0.0",
-    "copyfiles": "^2.4.1",
-    "css-loader": "^6.8.1",
-    "css-minimizer-webpack-plugin": "^5.0.1",
-    "dropzone": "^6.0.0-beta.2",
-    "esbuild": "^0.19.2",
-    "esbuild-sass-plugin": "^2.12.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",
-    "html-webpack-plugin": "^5.5.3",
-    "jest": "^29.0.0",
-    "lodash-es": "^4.17.21",
-    "material-icons": "^1.13.8",
-    "mini-css-extract-plugin": "^2.7.6",
-    "prettier": "^2.8.8",
-    "sass": "^1.80.2",
-    "sass-loader": "^16.0.2",
-    "style-loader": "^3.3.3",
-    "terser-webpack-plugin": "^5.3.9",
-    "ts-jest": "^29.1.0",
-    "ts-loader": "^9.4.2",
-    "typedoc": "^0.26.7",
-    "typescript": "^5.1.6",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.73.0",
-    "webpack-bundle-analyzer": "^4.9.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.9.2",
-    "webpack-node-externals": "^3.0.0"
-  },
-  "scripts": {
-    "prepack": "yarn build",
-    "build": "yarn build:vender && yarn build:prod  && yarn copy-dts && yarn build:tsc && yarn build:js",
-    "build:tsc": "npx tsc --emitDeclarationOnly",
-    "build:js": "node build.js",
-    "build:vender": "webpack --config webpack.vender.js",
-    "build:dev": "webpack --config webpack.dev.js",
-    "build:prod": "webpack --config webpack.prod.js && webpack --env=mode=deploy --config webpack.dev.js",
-    "dts:gen": "npx -p typescript tsc src/index.js --declaration --allowJs --emitDeclarationOnly --outDir dist",
-    "docs:gen": "typedoc --tsconfig tsconfig.doc.json",
-    "test": "jest",
-    "start": "webpack-dev-server --config ./webpack.dev.server.js",
-    "copy-dts": "copyfiles -u 1 \"src/**/*.d.ts\" dist"
-  }
-}
+{
+  "name": "@daracl/form",
+  "version": "0.0.18",
+  "sideEffects": false,
+  "description": "Daracl form validation ",
+  "author": {
+    "name": "darainfo",
+    "email": "darainfosys@gmail.com",
+    "url": "https://ui.daracl.com"
+  },
+  "license": "MIT",
+  "keywords": [
+    "@daracl/form",
+    "daraclValidation",
+    "daracl-validation",
+    "daraclForm",
+    "daracl-form",
+    "form",
+    "validation",
+    "darainfo",
+    "javascript"
+  ],
+  "main": "./dist/index.cjs",
+  "types": "./dist/index.d.ts",
+  "homepage": "https://github.com/daracl/ui-form",
+  "bugs": {
+    "url": "https://github.com/daracl/ui-form/issues",
+    "email": "darainfosys@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/daracl/ui-form.git"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./umd": {
+      "import": "./dist/daracl.form.umd.js"
+    },
+    "./dist/": "./dist/",
+    "./style/": "./style/"
+  },
+  "files": [
+    "dist",
+    "style"
+  ],
+  "prettier": {
+    "printWidth": 256,
+    "useTabs": false,
+    "tabWidth": 2,
+    "bracketSpacing": true,
+    "semi": true,
+    "singleQuote": false
+  },
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.formatOnSave": false
+  },
+  "peerDependencies": {
+    "@daracl/core": "^0.0.3",
+    "@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"
+  },
+  "devDependencies": {
+    "@daracl/core": "^0.0.5",
+    "@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",
+    "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"
+  },
+  "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: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",
+    "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"
+  }
+}

package/style/abstracts/_index.scss

@@ -0,0 +1,2 @@
+@forward "./variables";
+@forward "./mixins";

package/style/abstracts/_mixins.scss

@@ -0,0 +1,22 @@
+@mixin rowFlex() {
+  &.df-top {
+    flex-direction: column;
+    > div {
+      max-width: 100% !important;
+    }
+  }
+
+  &.df-right {
+    -ms-flex-direction: row-reverse !important;
+    -webkit-box-orient: horizontal !important;
+    -webkit-box-direction: reverse !important;
+    flex-direction: row-reverse !important;
+  }
+
+  &.df-bottom {
+    flex-direction: column-reverse !important;
+    > div {
+      max-width: 100% !important;
+    }
+  }
+}

package/style/abstracts/_variables.scss

@@ -0,0 +1 @@
+$sizes: 8.33333333%, 16.66666667%, 25%, 33.33333333%, 41.66666667%, 50%, 58.33333333%, 66.66666667%, 75%, 83.33333333%, 91.66666667%, 100%;