@type-dom/ui 0.0.4 → 0.0.6

package/src/components/form/td-checkbox/td-checkbox.style.d.ts

@@ -1,3 +1,35 @@
+import { IStyle } from '@type-dom/css-type';
+export declare const $checkbox: {
+    fontSize: string;
+    fontWeight: number;
+    textColor: string;
+    inputHeight: string;
+    inputWidth: string;
+    borderRadius: string;
+    bgColor: string;
+    inputBorder: string;
+    disabledBorderColor: string;
+    disabledInputFill: string;
+    disabledIconColor: string;
+    disabledCheckedInputFill: string;
+    disabledCheckedInputBorderColor: string;
+    disabledCheckedIconColor: string;
+    checkedTextColor: string;
+    checkedInputBorderColor: string;
+    checkedBgColor: string;
+    checkedIconColor: string;
+    inputBorderColorHover: string;
+};
+export declare const $checkboxBorderedPaddingLeft: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $checkboxBorderedPaddingRight: {
+    large: string;
+    default: string;
+    small: string;
+};
 export declare const $checkboxHeight: {
     large: string;
     default: string;
@@ -12,3 +44,17 @@ export declare const $checkboxFontSize: {
     large: string;
     small: string;
 };
+export declare const $checkboxBorderedInputWidth: {
+    $checkboxBorderedInputHeight: {
+        large: string;
+        default: string;
+        small: string;
+    };
+};
+export declare const $checkboxStyle: IStyle;
+export declare const $checkboxInputStyle: IStyle;
+export declare const $checkboxInnerStyle: IStyle;
+export declare const $checkboxInnerAfterStyle: IStyle;
+export declare const $checkboxOriginalStyle: IStyle;
+export declare const $checkboxLabelStyle: IStyle;
+export declare const $checkboxGroupStyle: IStyle;

package/src/components/form/td-checkbox/td-checkbox.style.js

@@ -1,18 +1,152 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$checkboxFontSize = exports.$checkboxBorderedInputHeight = exports.$checkboxHeight = void 0;
+exports.$checkboxGroupStyle = exports.$checkboxLabelStyle = exports.$checkboxOriginalStyle = exports.$checkboxInnerAfterStyle = exports.$checkboxInnerStyle = exports.$checkboxInputStyle = exports.$checkboxStyle = exports.$checkboxBorderedInputWidth = exports.$checkboxFontSize = exports.$checkboxBorderedInputHeight = exports.$checkboxHeight = exports.$checkboxBorderedPaddingRight = exports.$checkboxBorderedPaddingLeft = exports.$checkbox = void 0;
 const var_1 = require("../../../styles/var");
+exports.$checkbox = {
+    fontSize: '14px',
+    // 'font-weight': getCssVar('font-weight-primary'),
+    fontWeight: var_1.$fontWeightPrimary,
+    // 'text-color': getCssVar('text-color-regular'),
+    textColor: var_1.$textColor.regular,
+    inputHeight: '14px',
+    inputWidth: '14px',
+    // 'border-radius': getCssVar('border-radius-small'),
+    borderRadius: var_1.$borderRadius.small,
+    // 'bg-color': getCssVar('fill-color', 'blank'),
+    bgColor: var_1.$fillColor.blank,
+    // 'input-border': getCssVar('border'),
+    inputBorder: var_1.$border,
+    // 'disabled-border-color': getCssVar('border-color'),
+    disabledBorderColor: var_1.$borderColor.base,
+    // 'disabled-input-fill': getCssVar('fill-color', 'light'),
+    disabledInputFill: var_1.$fillColor.light,
+    // 'disabled-icon-color': getCssVar('text-color-placeholder'),
+    disabledIconColor: var_1.$textColor.placeholder,
+    // 'disabled-checked-input-fill': getCssVar('border-color-extra-light'),
+    disabledCheckedInputFill: var_1.$borderColor.extraLight,
+    // 'disabled-checked-input-border-color': getCssVar('border-color'),
+    disabledCheckedInputBorderColor: var_1.$borderColor.base,
+    // 'disabled-checked-icon-color': getCssVar('text-color-placeholder'),
+    disabledCheckedIconColor: var_1.$textColor.placeholder,
+    // 'checked-text-color': getCssVar('color-primary'),
+    checkedTextColor: var_1.$colorPrimary,
+    // 'checked-input-border-color': getCssVar('color-primary'),
+    checkedInputBorderColor: var_1.$colorPrimary,
+    // 'checked-bg-color': getCssVar('color-primary'),
+    checkedBgColor: var_1.$colorPrimary,
+    // 'checked-icon-color': getCssVar('color', 'white'),
+    checkedIconColor: var_1.$colorWhite,
+    // 'input-border-color-hover': getCssVar('color-primary'),
+    inputBorderColorHover: var_1.$colorPrimary,
+};
+exports.$checkboxBorderedPaddingLeft = {
+    'large': '12px',
+    'default': '10px',
+    'small': '8px',
+};
+exports.$checkboxBorderedPaddingRight = {
+    'large': '20px',
+    'default': '16px',
+    'small': '12px',
+};
 exports.$checkboxHeight = var_1.$commonComponentSize;
 exports.$checkboxBorderedInputHeight = {
-    'large': '14px',
-    'default': '12px',
-    'small': '12px'
+    large: '14px',
+    default: '12px',
+    small: '12px'
 };
 exports.$checkboxFontSize = {
-    'large': '14px',
-    'small': '12px'
+    large: '14px',
+    small: '12px'
+};
+exports.$checkboxBorderedInputWidth = {
+    $checkboxBorderedInputHeight: exports.$checkboxBorderedInputHeight,
+    // $checkboxBorderedInputWidth
+};
+exports.$checkboxStyle = {
+    // color: getCssVar('checkbox-text-color');
+    color: exports.$checkbox.textColor,
+    // font-weight: getCssVar('checkbox-font-weight');
+    fontWeight: exports.$checkbox.fontWeight,
+    // font-size: getCssVar('font-size', 'base');
+    fontSize: var_1.$fontSizes.base,
+    position: 'relative',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    alignItems: 'center',
+    whiteSpace: 'nowrap',
+    userSelect: 'none',
+    marginRight: '30px',
+    // height: getCssVarWithDefault(
+    //   'checkbox-height',
+    //   map.get($checkbox-height, 'default')
+    // );
+    height: exports.$checkboxHeight.default,
+};
+exports.$checkboxInputStyle = {
+    whiteSpace: 'nowrap',
+    cursor: 'pointer',
+    outline: 'none',
+    display: 'inline-flex',
+    position: 'relative',
+};
+exports.$checkboxInnerStyle = {
+    display: 'inline-block',
+    position: 'relative',
+    // border: getCssVar('checkbox-input-border'),
+    border: exports.$checkbox.inputBorder,
+    // borderRadius: getCssVar('checkbox-border-radius'),
+    borderRadius: var_1.$borderRadius['base'],
+    boxSizing: 'border-box',
+    // width: getCssVar('checkbox-input-width'),
+    // width: $checkboxInputWidth,
+    // height: getCssVar('checkbox-input-height'),
+    height: exports.$checkboxHeight['default'],
+    // background-color: getCssVar('checkbox-bg-color'),
+    backgroundColor: var_1.$bgColor.default,
+    // z-index: getCssVar('index-normal'),
+    zIndex: var_1.$zIndex.normal,
+    transition: `border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
+      background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
+      outline 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46)`
+};
+exports.$checkboxInnerAfterStyle = {
+    boxSizing: 'content-box',
+    // content: '',
+    border: '1px solid transparent',
+    borderLeft: 0,
+    borderTop: 0,
+    // height: '7px',
+    left: '4px',
+    position: 'absolute',
+    top: '1px',
+    // transform: 'rotate(45deg) scaleY(0)',
+    // width: '3px',
+    transition: 'transform 0.15s ease-in 0.05s',
+    transformOrigin: 'center',
+    transform: 'rotate(45deg) scaleY(1)',
+    // border-color: var(--el-checkbox-checked-icon-color),
+    borderColor: exports.$checkbox.checkedIconColor,
+    width: '14px',
+    height: '14px'
+};
+exports.$checkboxOriginalStyle = {
+    opacity: 0,
+    outline: 'none',
+    position: 'absolute',
+    margin: 0,
+    width: 0,
+    height: 0,
+    zIndex: -1,
+};
+exports.$checkboxLabelStyle = {
+    display: 'inline-block',
+    paddingLeft: '8px',
+    lineHeight: 1,
+    // fontSize: getCssVar('checkbox-font-size'),
+    fontSize: exports.$checkbox.fontSize,
+};
+exports.$checkboxGroupStyle = {
+    fontSize: 0,
+    lineHeight: 0,
 };
-// export const $checkboxBorderedInputWidth = {
-//   $checkboxBorderedInputHeight,
-//   $checkboxBorderedInputWidth
-// }

package/src/components/form/td-checkbox-button/td-checkbox-button.class.d.ts

@@ -1,7 +1,14 @@
 import { UI } from '../../../ui/ui.abstract';
-import { ITdCheckboxButton } from './td-checkbox-button.interface';
 import { ITdCheckboxConfig } from '../td-checkbox/td-checkbox.interface';
+import { ITdCheckboxButton } from './td-checkbox-button.interface';
 export declare class TdCheckboxButton extends UI implements ITdCheckboxButton {
     className: 'TdCheckboxButton';
-    constructor(config: ITdCheckboxConfig);
+    props: ITdCheckboxConfig;
+    private isFocused?;
+    private isLimitExceeded?;
+    private actualValue?;
+    private intermediate?;
+    private hasOwnLabel?;
+    constructor(params?: ITdCheckboxConfig);
+    handleChange(ev?: Event): void;
 }

package/src/components/form/td-checkbox-button/td-checkbox-button.class.js

@@ -1,15 +1,65 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCheckboxButton = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const use_checkbox_1 = require("../td-checkbox/composables/use-checkbox");
+const td_checkbox_style_1 = require("../td-checkbox/td-checkbox.style");
+const td_checkbox_button_style_1 = require("./td-checkbox-button.style");
 class TdCheckboxButton extends ui_abstract_1.UI {
-    constructor(config) {
-        super({ tag: 'label' });
+    constructor(params) {
+        super(params, 'label'); // label | span
         this.className = 'TdCheckboxButton';
-        const originalInput = new framework_1.Input({});
-        const labelSpan = new framework_1.Span({});
-        this.setConfig(config);
+        this.ctrl.addAttrObj({
+            name: 'td-checkbox-button'
+        });
+        this.ctrl.addStyleObj(td_checkbox_button_style_1.$checkboxButtonStyle);
+        const { hasOwnLabel } = (0, use_checkbox_1.useCheckbox)(params);
+        const original = new framework_1.Input({
+            name: 'original',
+            attrObj: {
+                type: 'checkbox',
+                disabled: params === null || params === void 0 ? void 0 : params.disabled, // todo group or form disabled
+                value: this.actualValue,
+                intermediate: this.intermediate,
+            },
+            styleObj: td_checkbox_style_1.$checkboxOriginalStyle,
+            events: {
+                click: (ev) => {
+                    ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
+                },
+                change: (ev) => {
+                    this.handleChange(ev);
+                },
+                focus: evt => {
+                    this.isFocused = true;
+                },
+                blur: evt => {
+                    this.isFocused = false;
+                }
+            }
+        });
+        this.addChild(original);
+        if (hasOwnLabel) {
+            const labelSpan = new framework_1.Span({
+                name: 'inner',
+                styleObj: td_checkbox_button_style_1.$checkboxButtonInnerStyle,
+            });
+            if (params === null || params === void 0 ? void 0 : params.slot) {
+                labelSpan.slotChild(params.slot);
+            }
+            else if (params === null || params === void 0 ? void 0 : params.label) {
+                labelSpan.addChild(new framework_1.TextNode(params === null || params === void 0 ? void 0 : params.label));
+            }
+            this.addChild(labelSpan);
+        }
+        this.props = this.setParams(params);
+    }
+    handleChange(ev) {
+        if (this.isLimitExceeded)
+            return;
+        const target = ev === null || ev === void 0 ? void 0 : ev.target;
+        // emit('change', getLabeledValue(target.checked), e)
     }
 }
 exports.TdCheckboxButton = TdCheckboxButton;

package/src/components/form/td-checkbox-button/td-checkbox-button.style.d.ts

@@ -0,0 +1,9 @@
+import { IStyle } from '@type-dom/css-type';
+export declare const $checkboxButton: {
+    checkedBgColor: string;
+    checkedTextColor: string;
+    checkedBorderColor: string;
+};
+export declare const $checkboxButtonStyle: IStyle;
+export declare const $checkboxButtonOriginalStyle: IStyle;
+export declare const $checkboxButtonInnerStyle: IStyle;

package/src/components/form/td-checkbox-button/td-checkbox-button.style.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$checkboxButtonInnerStyle = exports.$checkboxButtonOriginalStyle = exports.$checkboxButtonStyle = exports.$checkboxButton = void 0;
+const var_1 = require("../../../styles/var");
+const transition_1 = require("../../../styles/transition");
+const td_checkbox_style_1 = require("../td-checkbox/td-checkbox.style");
+exports.$checkboxButton = {
+    // 'checked-bg-color': getCssVar('color-primary'),
+    checkedBgColor: var_1.$colors.primary.base,
+    // 'checked-text-color': getCssVar('color-white'),
+    checkedTextColor: var_1.$colors.white,
+    // 'checked-border-color': getCssVar('color-primary'),
+    checkedBorderColor: var_1.$colors.primary.base,
+};
+exports.$checkboxButtonStyle = {
+    position: 'relative',
+    display: 'inline-block',
+};
+exports.$checkboxButtonOriginalStyle = {
+    opacity: 0,
+    outline: 'none',
+    position: 'absolute',
+    margin: 0,
+    zIndex: -1,
+};
+exports.$checkboxButtonInnerStyle = {
+    display: 'inline-block',
+    lineHeight: 1,
+    // font-weight: getCssVar('checkbox-font-weight'),
+    fontWeight: td_checkbox_style_1.$checkbox.fontWeight,
+    whiteSpace: 'nowrap',
+    verticalAlign: 'middle',
+    cursor: 'pointer',
+    // background: var
+    //   #{getCssVarName('button-bg-color')},
+    //   map.get($button, 'bg-color',
+    // ),
+    background: var_1.$button.bgColor,
+    // border: getCssVar('border'),
+    borderLeftColor: 'transparent',
+    // color: var
+    //   #{getCssVarName('button-text-color')},
+    //   map.get($button, 'text-color',
+    // ),
+    color: var_1.$button.textColor,
+    // -webkit-appearance: 'none',
+    textAlign: 'center',
+    boxSizing: 'border-box',
+    outline: 'none',
+    margin: 0,
+    position: 'relative',
+    // transition: getCssVar('transition-all'),
+    transition: transition_1.$transition.all,
+    userSelect: 'none',
+};

package/src/components/form/td-checkbox-group/td-checkbox-group.class.d.ts

@@ -1,7 +1,7 @@
 import { UI } from '../../../ui/ui.abstract';
 import { ITdCheckboxGroup, ITdCheckboxGroupConfig } from './td-checkbox-group.interface';
 export declare class TdCheckboxGroup extends UI implements ITdCheckboxGroup {
-    config?: ITdCheckboxGroupConfig | undefined;
     className: 'TdCheckboxGroup';
-    constructor(config?: ITdCheckboxGroupConfig | undefined);
+    props: ITdCheckboxGroupConfig;
+    constructor(params?: ITdCheckboxGroupConfig);
 }

package/src/components/form/td-checkbox-group/td-checkbox-group.class.js

@@ -2,19 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCheckboxGroup = void 0;
 const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_checkbox_style_1 = require("../td-checkbox/td-checkbox.style");
 class TdCheckboxGroup extends ui_abstract_1.UI {
-    constructor(config) {
-        super({ tag: config === null || config === void 0 ? void 0 : config.tag });
-        this.config = config;
+    constructor(params) {
+        super(params);
         this.className = 'TdCheckboxGroup';
-        this.addAttrObj({
-            role: 'group'
+        this.ctrl.addAttrObj({
+            role: 'group',
+            // ariaLabel: !config.isLabeledByFormItem ? config?.ariaLabel || 'checkbox-group' : undefined,
+            // aria-labelledby="isLabeledByFormItem ? formItem?.labelId : undefined"
         });
-        this.addStyleObj({
-            fontSize: '0',
-            lineHeight: 0
-        });
-        this.setConfig(config);
+        this.ctrl.addStyleObj(td_checkbox_style_1.$checkboxGroupStyle);
+        this.addChild(this.getSlotNode());
+        this.props = this.setParams(params);
     }
 }
 exports.TdCheckboxGroup = TdCheckboxGroup;

package/src/components/form/td-checkbox-group/td-checkbox-group.interface.d.ts

@@ -1,6 +1,6 @@
+import { IPrimitive } from '@type-dom/framework';
 import { IUI, IUIConfig } from '../../../ui/ui.interface';
 import { ISize } from '../../../styles/size';
-import { IPrimitive } from '@type-dom/framework';
 export interface ITdCheckboxGroup extends IUI {
     className: 'TdCheckboxGroup';
 }

package/src/components/form/td-color-picker/td-color-picker.class.js

@@ -0,0 +1 @@
+"use strict";

package/src/components/form/td-color-picker/td-color-picker.interface.js

@@ -0,0 +1 @@
+"use strict";

package/src/components/form/td-date-picker/td-date-picker.class.js

@@ -0,0 +1 @@
+"use strict";

package/src/components/form/td-date-picker/td-date-picker.interface.js

@@ -0,0 +1 @@
+"use strict";

package/src/components/form/td-date-time-picker/td-date-time-picker.class.js

@@ -0,0 +1 @@
+"use strict";

package/src/components/form/td-date-time-picker/td-date-time-picker.interface.js

@@ -0,0 +1 @@
+"use strict";

package/src/components/form/td-form/hooks/use-form-item.d.ts

@@ -0,0 +1,5 @@
+export type IUseFormItemInputCommonProps = {
+    id?: string;
+    label?: string | number | boolean | Record<string, any>;
+    ariaLabel?: string | number | boolean | Record<string, any>;
+};

package/src/components/form/td-form/hooks/use-form-item.js

@@ -0,0 +1,65 @@
+"use strict";
+// todo
+Object.defineProperty(exports, "__esModule", { value: true });
+//
+// export const useFormItemInputId = (
+//   props: Partial<IUseFormItemInputCommonProps>,
+//   {
+//     formItemContext,
+//     disableIdGeneration,
+//     disableIdManagement,
+//   }: {
+//     formItemContext?: FormItemContext
+//     disableIdGeneration?: ComputedRef<boolean> | Ref<boolean>
+//     disableIdManagement?: ComputedRef<boolean> | Ref<boolean>
+//   }
+// ) => {
+//   if (!disableIdGeneration) {
+//     disableIdGeneration = ref<boolean>(false)
+//   }
+//   if (!disableIdManagement) {
+//     disableIdManagement = ref<boolean>(false)
+//   }
+//
+//   const inputId = ref<string>()
+//   let idUnwatch: WatchStopHandle | undefined = undefined
+//
+//   const isLabeledByFormItem = !!(
+//       !(props.label || props.ariaLabel) &&
+//       formItemContext &&
+//       formItemContext.inputIds &&
+//       formItemContext.inputIds?.length <= 1
+//     );
+//   //
+//   // // Generate id for ElFormItem label if not provided as prop
+//   // onMounted(() => {
+//   //   idUnwatch = watch(
+//   //     [toRef(props, 'id'), disableIdGeneration] as any,
+//   //     ([id, disableIdGeneration]: [string, boolean]) => {
+//   //       const newId = id ?? (!disableIdGeneration ? useId().value : undefined)
+//   //       if (newId !== inputId.value) {
+//   //         if (formItemContext?.removeInputId) {
+//   //           inputId.value && formItemContext.removeInputId(inputId.value)
+//   //           if (!disableIdManagement?.value && !disableIdGeneration && newId) {
+//   //             formItemContext.addInputId(newId)
+//   //           }
+//   //         }
+//   //         inputId.value = newId
+//   //       }
+//   //     },
+//   //     { immediate: true }
+//   //   )
+//   // })
+//   //
+//   // onUnmounted(() => {
+//   //   idUnwatch && idUnwatch()
+//   //   if (formItemContext?.removeInputId) {
+//   //     inputId.value && formItemContext.removeInputId(inputId.value)
+//   //   }
+//   // })
+//
+//   return {
+//     isLabeledByFormItem,
+//     inputId,
+//   }
+// }

package/src/components/form/td-form/td-form.class.d.ts

@@ -7,16 +7,11 @@ import { ITdForm, ITdFormConfig } from './td-form.interface';
  */
 export declare class TdForm extends UI implements ITdForm {
     className: 'TdForm';
-    config?: ITdFormConfig;
+    props: ITdFormConfig;
     private model?;
     /**
      * 构造函数，初始化表单配置。
-     * @param {ITdFormConfig} config? 可选的表单配置对象。
+     * @param params
      */
-    constructor(config?: ITdFormConfig);
-    /**
-     * 设置表单配置，包括模型和样式配置，并应用到子元素。
-     * @param {ITdFormConfig} config? 可选的表单配置对象。
-     */
-    setConfig(config?: ITdFormConfig): void;
+    constructor(params?: ITdFormConfig);
 }

package/src/components/form/td-form/td-form.class.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdForm = void 0;
 const ui_abstract_1 = require("../../../ui/ui.abstract");
-const td_form_item_class_1 = require("../td-form-item/td-form-item.class");
+const td_form_const_1 = require("./td-form.const");
 /**
  * TdForm类继承自UI抽象类，实现ITdForm接口，用于创建和管理表单。
  * 提交表单时，应该要获取所有子元素 form-item 里的 如 TdInput 这些可输入的组件的值。
@@ -11,42 +11,18 @@ const td_form_item_class_1 = require("../td-form-item/td-form-item.class");
 class TdForm extends ui_abstract_1.UI {
     /**
      * 构造函数，初始化表单配置。
-     * @param {ITdFormConfig} config? 可选的表单配置对象。
+     * @param params
      */
-    constructor(config) {
-        super({ tag: 'form' });
+    constructor(params) {
+        super(params, 'form');
         this.className = 'TdForm';
-        this.addAttrName('td-form');
-        this.setConfig(config);
-    }
-    /**
-     * 设置表单配置，包括模型和样式配置，并应用到子元素。
-     * @param {ITdFormConfig} config? 可选的表单配置对象。
-     */
-    setConfig(config) {
-        super.setConfig(config);
-        // 应用模型数据
-        if (config === null || config === void 0 ? void 0 : config.model) {
-            this.model = config.model;
-        }
-        // 待实现：设置子元素的labelWidth
-        if (config === null || config === void 0 ? void 0 : config.labelWidth) {
-            //   todo 设置子元素的labelWidth
+        this.ctrl.addAttrName('td-form');
+        this.provide(td_form_const_1.formContextKey, params); // 要在form-item 中 inject
+        this.addChild(this.getSlotNode());
+        if (params === null || params === void 0 ? void 0 : params.model) {
+            this.model = params.model;
         }
-        // 遍历子元素，应用样式和配置
-        this.children.forEach((child) => {
-            var _a, _b, _c, _d, _e;
-            if (child instanceof td_form_item_class_1.TdFormItem) {
-                child.addStyleObj({
-                    display: ((_a = this.config) === null || _a === void 0 ? void 0 : _a.inline) ? 'inline-flex' : 'flex',
-                    verticalAlign: 'middle',
-                    marginRight: ((_b = this.config) === null || _b === void 0 ? void 0 : _b.inline) ? '32px' : (_c = child.styleObj) === null || _c === void 0 ? void 0 : _c.marginRight,
-                    // justifyContent: justifyContent,
-                });
-                child.setLabelPosition((_d = this.config) === null || _d === void 0 ? void 0 : _d.labelPosition);
-                child.setSize((_e = this.config) === null || _e === void 0 ? void 0 : _e.size);
-            }
-        });
+        this.props = this.setParams(params);
     }
 }
 exports.TdForm = TdForm;

package/src/components/form/td-form/td-form.const.d.ts

@@ -0,0 +1,5 @@
+import { InjectionKey } from '@type-dom/framework';
+import { ITdFormItemConfig } from '../td-form-item/td-form-item.interface';
+import { ITdFormConfig } from './td-form.interface';
+export declare const formContextKey: InjectionKey<ITdFormConfig>;
+export declare const formItemContextKey: InjectionKey<ITdFormItemConfig>;

package/src/components/form/td-form/td-form.const.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formItemContextKey = exports.formContextKey = void 0;
+exports.formContextKey = Symbol('formContextKey');
+exports.formItemContextKey = Symbol('formItemContextKey');