@opendesign-plus-test/components 0.0.1-rc.22 → 0.0.1-rc.221

package/dist/treeshaking/components/activity/OActivityApproval2.css

@@ -0,0 +1,40 @@
+.hover-icon-rotate .o-icon {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon {
+    transform: rotate(-180deg);
+}
+}
+.handle-dialog-approval {
+  --activity-card-radius: var(--o-radius-xs);
+  --dlg-width: 450px;
+  --dlg-radius: var(--activity-card-radius);
+}
+@media (max-width: 840px) {
+.handle-dialog-approval {
+    width: 100%;
+    --dlg-radius: var(--activity-card-radius) var(--activity-card-radius) 0 0;
+}
+}
+.cancel-dialog .o-dlg-footer {
+  margin-top: var(--o-gap-5);
+}
+.review-dialog {
+  --dlg-width: 690px;
+  --activity-input-radius: var(--o-radius-xs);
+}
+.review-dialog .o-form {
+  width: 450px;
+  margin: 0 auto;
+}
+.review-dialog .o-form .o-form-item-label {
+  margin-bottom: var(--o-gap-2);
+}
+.review-dialog .o-form .o-textarea {
+  width: 100%;
+  --_box-radius: var(--activity-input-radius);
+}
+.review-dialog .o-dlg-footer {
+  margin-top: var(--o-gap-6);
+}

package/dist/treeshaking/components/activity/OActivityForm.css

@@ -0,0 +1,364 @@
+.hover-icon-rotate .o-icon {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon {
+    transform: rotate(-180deg);
+}
+}
+:root [class^=el-] {
+  --el-color-primary: var(--o-color-primary1);
+  --el-border-color: var(--o-color-control1);
+  --el-fill-color-blank: var(--o-color-control5-light);
+  --el-input-placeholder-color: var(--el-text-color-placeholder);
+  --el-input-hover-border-color: var(--el-border-color-hover);
+  --el-input-clear-hover-color: var(--el-text-color-secondary);
+  --el-component-size-large: 36px;
+}
+@media (max-width: 840px) {
+:root [class^=el-] {
+    --el-component-size-large: var(--o-control_size-l);
+}
+}
+:root .el-date-editor.el-date-editor--daterange {
+  padding: 0 13px 0 15px;
+}
+:root .el-date-editor.el-date-editor--timerange {
+  padding: 0 16px;
+}
+:root .el-date-editor input {
+  text-align: left;
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+:root .el-date-editor input {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+:root .el-date-editor input {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+:root .el-date-editor input {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+:root .el-date-editor input {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+:root .el-date-editor input {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (max-width: 600px) and (min-width: 1201px) and (max-width: 1680px) {
+:root .el-date-editor input {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (max-width: 600px) and (min-width: 841px) and (max-width: 1200px) {
+:root .el-date-editor input {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (min-width: 601px) and (max-width: 840px) {
+:root .el-date-editor input {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (max-width: 600px) {
+:root .el-date-editor input {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+:root .el-date-editor .el-select__wrapper {
+  gap: 0;
+}
+:root .el-date-editor .el-input__wrapper .el-input__prefix {
+  order: 1;
+  font-size: 16px;
+}
+:root .el-date-editor .el-input__icon {
+  height: 100%;
+  order: 1;
+  font-size: 24px;
+  margin-right: 2px;
+  color: var(--o-color-info1);
+  background-color: var(--o-color-info2);
+  mask: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiAgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIGQ9Ik02LjQ2MyA0Ljk3NmEuNy43IDAgMCAxIC4wOTUgMS4zOTRsLS4wOTUuMDA2SDQuNDcxYS4xNC4xNCAwIDAgMC0uMTMuMDkzbC0uMDA3LjA0M3YxLjg1NmgxNS4zMjlsLjAwMS0xLjg1NmEuMTQuMTQgMCAwIDAtLjA5My0uMTNsLS4wNDMtLjAwN2gtMi4wNTVhLjcuNyAwIDAgMS0uMDk1LTEuMzk0bC4wOTUtLjAwNmgyLjA1NWMuODAxIDAgMS40Ni42MTQgMS41MyAxLjM5N2wuMDA2LjE0djEyLjM1OWMwIC44MDEtLjYxNCAxLjQ2LTEuMzk3IDEuNTNsLS4xNC4wMDZINC40N2MtLjgwMSAwLTEuNDYtLjYxNC0xLjUzLTEuMzk3bC0uMDA2LS4xNFY2LjUxMWMwLS44MDEuNjE0LTEuNDYgMS4zOTctMS41M2wuMTQtLjAwNnptMTMuMjAxIDQuNzkySDQuMzM1djkuMTAzYzAgLjA2LjAzOS4xMTEuMDkzLjEzbC4wNDMuMDA3aDE1LjA1N2MuMDYgMCAuMTExLS4wMzkuMTMtLjA5M2wuMDA3LS4wNDMtLjAwMS05LjEwM3ptLTMuNDgyIDUuNjYzYS43LjcgMCAwIDEgLjA5NSAxLjM5NGwtLjA5NS4wMDZINy44MTdhLjcuNyAwIDAgMS0uMDk1LTEuMzk0bC4wOTUtLjAwNnptMC0zLjM0NmEuNy43IDAgMCAxIC4wOTUgMS4zOTRsLS4wOTUuMDA2SDcuODE3YS43LjcgMCAwIDEtLjA5NS0xLjM5NGwuMDk1LS4wMDZ6bS0uNjk2LTguNDY3Yy4zNTQgMCAuNjQ3LjI2My42OTQuNjA1bC4wMDYuMDk1djIuODA0YS43LjcgMCAwIDEtMS4zOTQuMDk1bC0uMDA2LS4wOTVWNC4zMThhLjcuNyAwIDAgMSAuNy0uN20tNi45MzctLjAyNmMuMzU0IDAgLjY0Ny4yNjMuNjk0LjYwNWwuMDA2LjA5NXYyLjgwNGEuNy43IDAgMCAxLTEuMzk0LjA5NWwtLjAwNi0uMDk1VjQuMjkyYS43LjcgMCAwIDEgLjctLjdtNC45NDYgMS4zODRhLjcuNyAwIDAgMSAuMDk1IDEuMzk0bC0uMDk1LjAwNkgxMC41M2EuNy43IDAgMCAxLS4wOTUtMS4zOTRsLjA5NS0uMDA2eiI+PC9wYXRoPgo8L3N2Zz4=") no-repeat center;
+  background-size: 24px;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+:root .el-date-editor .el-input__icon svg {
+  display: none;
+}
+:root .el-popper .el-popper__arrow {
+  display: none;
+}
+:root .el-popper .el-picker-panel {
+  --cell-row-gap: 6px;
+  --cell-radius: var(--o-radius-xs);
+  color: var(--o-color-info1);
+}
+:root .el-popper .el-picker-panel .el-date-picker__header {
+  padding: 12px 24px;
+  height: 48px;
+  border-bottom: 1px solid var(--o-color-control4);
+}
+:root .el-popper .el-picker-panel .el-date-picker__header .el-date-picker__header-label {
+  font-weight: 500;
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table th {
+  border-bottom: none;
+  height: 24px;
+  color: inherit;
+  padding: 0 0 var(--cell-row-gap);
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td {
+  padding: var(--cell-row-gap) 0px;
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td .el-date-table-cell {
+  padding: 0;
+  height: 24px;
+  line-height: 22px;
+  border: 1px solid transparent;
+  border-radius: var(--cell-radius);
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td:hover:not(.disabled) .el-date-table-cell {
+  border-color: var(--o-color-primary1);
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.disabled .el-date-table-cell, :root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.prev-month .el-date-table-cell, :root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.next-month .el-date-table-cell {
+  background: none;
+  color: var(--o-color-info4);
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.today .el-date-table-cell {
+  background: var(--o-color-control2-light);
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.today .el-date-table-cell .el-date-table-cell__text {
+  font-weight: normal;
+  color: var(--o-color-info1);
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.current .el-date-table-cell, :root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.start-date .el-date-table-cell, :root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.end-date .el-date-table-cell {
+  background: var(--o-color-primary1);
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.current .el-date-table-cell .el-date-table-cell__text, :root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.start-date .el-date-table-cell .el-date-table-cell__text, :root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.end-date .el-date-table-cell .el-date-table-cell__text {
+  background: none;
+  color: #fff;
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.in-range:not(:hover) .el-date-table-cell {
+  border-radius: 0;
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.in-range:not(:hover).start-date .el-date-table-cell {
+  border-radius: var(--cell-radius);
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.in-range:not(:hover).end-date .el-date-table-cell {
+  border-radius: var(--cell-radius);
+}
+:root .el-input {
+  --el-border-color: var(--o-color-control1);
+  --el-input-border-color: var(--o-color-control1);
+  --el-input-hover-border-color: var(--o-color-primary2);
+  --el-input-focus-border-color: var(--o-color-primary3);
+}
+:root .el-table {
+  --el-table-border-color: var(--o-color-control4) ;
+}
+:root .el-input__wrapper {
+  box-shadow: none;
+  border: 1px solid var(--el-input-border-color);
+}
+:root .el-date-editor.is-focus .el-input__wrapper {
+  box-shadow: none;
+  --el-input-border-color: var(--o-color-primary3);
+}
+:root .el-date-editor:hover .el-input__wrapper {
+  box-shadow: none;
+  --el-input-border-color: var(--o-color-primary2);
+}
+:root .el-date-editor.el-input__wrapper:hover {
+  box-shadow: none;
+  --el-input-border-color: var(--o-color-primary2);
+}
+:root .el-date-editor.el-input__wrapper.is-active {
+  --el-input-border-color: var(--o-color-primary3);
+}
+:root .el-calendar .el-calendar-table {
+  width: 100%;
+}
+:root .el-calendar .el-calendar-table th {
+  color: var(--o-color-info3);
+  font-weight: 400;
+  padding: 4px 0 16px 0;
+  text-align: center;
+}
+:root .el-calendar .el-calendar-table td.prev .date-calender, :root .el-calendar .el-calendar-table td.next .date-calender {
+  color: var(--o-color-info4);
+}
+:root .el-select .el-select__placeholder {
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+:root .el-select .el-select__placeholder {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+:root .el-select .el-select__placeholder {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+:root .el-select .el-select__placeholder {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+:root .el-select .el-select__placeholder {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+:root .el-select .el-select__placeholder {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (max-width: 600px) and (min-width: 1201px) and (max-width: 1680px) {
+:root .el-select .el-select__placeholder {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (max-width: 600px) and (min-width: 841px) and (max-width: 1200px) {
+:root .el-select .el-select__placeholder {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (min-width: 601px) and (max-width: 840px) {
+:root .el-select .el-select__placeholder {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (max-width: 600px) {
+:root .el-select .el-select__placeholder {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+:root .el-input-number {
+  --el-component-size-large: 34px;
+}
+@media (max-width: 840px) {
+:root .el-input-number {
+    --el-component-size-large: calc(var(--o-control_size-l) - 2px);
+}
+}
+:root .el-input-number .el-input__wrapper:hover {
+  --el-input-border-color: var(--o-color-primary2);
+}
+:root .el-input-number .el-input__wrapper.is-focus {
+  --el-input-border-color: var(--o-color-primary3);
+}
+:root .el-input-number .el-input-number__decrease:hover ~ .el-input:not(.is-disabled) .el-input__wrapper,
+:root .el-input-number .el-input-number__increase:hover ~ .el-input:not(.is-disabled) .el-input__wrapper {
+  box-shadow: none;
+}
+:root .el-input-number .el-input__wrapper {
+  box-shadow: none;
+}
+:root .el-input-number .el-input__wrapper.is-focus {
+  box-shadow: none;
+}
+:root .el-input-number.el-input-number--large {
+  line-height: var(--el-component-size-large);
+}
+.o-activity-form {
+  --activity-card-radius: var(--o-radius-xs);
+  --activity-input-radius: var(--o-radius-xs);
+}
+.o-activity-form .form-wrapper > .o-form-item {
+  max-width: 620px;
+}
+.o-activity-form .o-form {
+  --o-input-color: var(--o-color-info2);
+  --o-placeholder-color: var(--o-color-info4);
+}
+.o-activity-form .o-form.o-form-layout-h .o-form-item-label {
+  height: var(--o-control_size-l);
+  margin: 0;
+}
+.o-activity-form .o-form.o-form-layout-v .o-form-item-label {
+  margin-bottom: var(--o-gap-2);
+}
+.o-activity-form .o-form.o-form-layout-v .o-form-item-main {
+  margin-left: 0;
+}
+.o-activity-form .o-form .o-select {
+  width: 100%;
+}
+.o-activity-form .o-form .o-input {
+  width: 100%;
+}
+.o-activity-form .o-form .o-textarea {
+  --_box-radius: var(--activity-input-radius);
+  width: 100%;
+}
+.o-activity-form .o-form .el-input {
+  width: 100%;
+}
+.o-activity-form .o-form .el-input__wrapper {
+  border-radius: var(--activity-input-radius);
+}
+.o-activity-form .o-form .time-config {
+  width: 100%;
+  background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
+  padding: var(--o-gap-5);
+  padding-right: calc(var(--o-gap-4) + var(--o-gap-5));
+  border-radius: var(--activity-card-radius);
+}
+@media (max-width: 840px) {
+.o-activity-form .o-form .time-config {
+    padding: var(--o-gap-4);
+}
+}
+.o-activity-form .o-form .time-config .o-form-item {
+  align-items: center;
+}
+.o-activity-form .o-form .time-config .o-form-item-label {
+  flex: 0 0 88px;
+}
+.form-btns {
+  margin-top: var(--o-gap-5);
+  display: flex;
+  align-items: center;
+}
+.form-btns .o-btn + .o-btn {
+  margin-left: var(--o-gap-4);
+}
+@media (max-width: 840px) {
+.form-btns .o-btn {
+    --btn-min-width: 74px;
+}
+}

package/dist/treeshaking/components/activity/OActivityForm.vue.d.ts

@@ -0,0 +1,288 @@
+import { ActivityFormPropsT } from './types';
+declare const _default: import('vue').DefineComponent<ActivityFormPropsT, {
+    confirm: (val: boolean) => Promise<void>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    confirm: (...args: any[]) => void;
+    close: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<ActivityFormPropsT> & Readonly<{
+    onConfirm?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    formRef: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            layout: "h" | "v" | "inline";
+            disabled: boolean | undefined;
+            clearable: boolean | undefined;
+            hasRequired: boolean;
+            requiredIcon: boolean;
+            labelWidth: string;
+            showMessage: boolean;
+            validateOnRuleChange: boolean;
+            scrollToError: boolean;
+        }> & Omit<{
+            readonly hasRequired: boolean;
+            readonly requiredIcon: boolean;
+            readonly layout: "v" | "h" | "inline";
+            readonly labelWidth: string;
+            readonly showMessage: boolean;
+            readonly validateOnRuleChange: boolean;
+            readonly scrollToError: boolean;
+            readonly size?: "small" | "large" | "medium" | undefined;
+            readonly round?: import('@opensig/opendesign').RoundT | undefined;
+            readonly disabled?: boolean | undefined;
+            readonly labelAlign?: "top" | "center" | "bottom" | undefined;
+            readonly labelJustify?: "center" | "left" | "right" | undefined;
+            readonly clearable?: boolean | undefined;
+            readonly model?: Record<string, any> | undefined;
+            readonly rules?: import('@opensig/opendesign').FormRulesT | undefined;
+            readonly onClear?: ((filed?: string | string[] | undefined) => any) | undefined | undefined;
+            readonly onReset?: ((filed?: string | string[] | undefined) => any) | undefined | undefined;
+            readonly onSubmit?: ((results: import('@opensig/opendesign').FieldResultT[]) => any) | undefined | undefined;
+            readonly onValidate?: ((results: import('@opensig/opendesign').FieldResultT[]) => any) | undefined | undefined;
+            readonly onValidateField?: ((payload: {
+                field: string;
+                isValid: boolean;
+                message: string;
+            }) => any) | undefined | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "disabled" | "clearable" | "hasRequired" | "requiredIcon" | "layout" | "labelWidth" | "showMessage" | "validateOnRuleChange" | "scrollToError">;
+        $attrs: import('vue').Attrs;
+        $refs: {
+            [x: string]: unknown;
+        } & {
+            formEl: HTMLFormElement;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: ((event: "clear", filed?: string | string[] | undefined) => void) & ((event: "validate", results: import('@opensig/opendesign').FieldResultT[]) => void) & ((event: "validateField", payload: {
+            field: string;
+            isValid: boolean;
+            message: string;
+        }) => void) & ((event: "reset", filed?: string | string[] | undefined) => void) & ((event: "submit", results: import('@opensig/opendesign').FieldResultT[]) => void);
+        $el: HTMLFormElement;
+        $options: import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+            labelAlign: {
+                type: import('vue').PropType<"top" | "center" | "bottom">;
+            };
+            labelJustify: {
+                type: import('vue').PropType<"left" | "center" | "right">;
+            };
+            disabled: {
+                type: import('vue').PropType<boolean | undefined>;
+                default: undefined;
+            };
+            size: {
+                type: import('vue').PropType<import('@opensig/opendesign').SizeT>;
+            };
+            round: {
+                type: import('vue').PropType<import('@opensig/opendesign').RoundT>;
+            };
+            clearable: {
+                type: import('vue').PropType<boolean | undefined>;
+                default: undefined;
+            };
+            model: {
+                type: ObjectConstructor;
+            };
+            rules: {
+                type: import('vue').PropType<import('@opensig/opendesign').FormRulesT>;
+            };
+            hasRequired: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            requiredIcon: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            layout: {
+                type: import('vue').PropType<"h" | "v" | "inline">;
+                default: string;
+            };
+            labelWidth: {
+                type: StringConstructor;
+                default: string;
+            };
+            showMessage: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            validateOnRuleChange: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            scrollToError: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>> & Readonly<{
+            onClear?: ((filed?: string | string[] | undefined) => any) | undefined;
+            onReset?: ((filed?: string | string[] | undefined) => any) | undefined;
+            onSubmit?: ((results: import('@opensig/opendesign').FieldResultT[]) => any) | undefined;
+            onValidate?: ((results: import('@opensig/opendesign').FieldResultT[]) => any) | undefined;
+            onValidateField?: ((payload: {
+                field: string;
+                isValid: boolean;
+                message: string;
+            }) => any) | undefined;
+        }>, {
+            validate: (filed?: string | string[], trigger?: import('@opensig/opendesign').TriggerT) => Promise<{
+                type: "warning" | "danger" | "success" | "";
+                message: string[];
+            }[]>;
+            validateField: (field: string | string[], trigger?: import('@opensig/opendesign').TriggerT) => Promise<{
+                type: "warning" | "danger" | "success" | "";
+                message: string[];
+            }[]>;
+            resetFields: (filed?: string | string[]) => void;
+            setInitialValues: (data: Record<string, any>) => void;
+            clearValidate: (filed?: string | string[], onClear?: (filed: import('@opensig/opendesign').FiledInfoT) => void) => void;
+            scrollToField: (field: string, options?: boolean | {
+                behavior?: "auto" | "smooth" | "instant";
+                block?: "start" | "center" | "end" | "nearest";
+                inline?: "start" | "center" | "end" | "nearest";
+            }) => Promise<void>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            clear: (filed?: string | string[] | undefined) => any;
+            reset: (filed?: string | string[] | undefined) => any;
+            submit: (results: import('@opensig/opendesign').FieldResultT[]) => any;
+            validate: (results: import('@opensig/opendesign').FieldResultT[]) => any;
+            validateField: (payload: {
+                field: string;
+                isValid: boolean;
+                message: string;
+            }) => any;
+        }, string, {
+            layout: "h" | "v" | "inline";
+            disabled: boolean | undefined;
+            clearable: boolean | undefined;
+            hasRequired: boolean;
+            requiredIcon: boolean;
+            labelWidth: string;
+            showMessage: boolean;
+            validateOnRuleChange: boolean;
+            scrollToError: boolean;
+        }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import('vue').nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{
+        layout: "h" | "v" | "inline";
+        disabled: boolean | undefined;
+        clearable: boolean | undefined;
+        hasRequired: boolean;
+        requiredIcon: boolean;
+        labelWidth: string;
+        showMessage: boolean;
+        validateOnRuleChange: boolean;
+        scrollToError: boolean;
+    }> & Omit<Readonly<import('vue').ExtractPropTypes<{
+        labelAlign: {
+            type: import('vue').PropType<"top" | "center" | "bottom">;
+        };
+        labelJustify: {
+            type: import('vue').PropType<"left" | "center" | "right">;
+        };
+        disabled: {
+            type: import('vue').PropType<boolean | undefined>;
+            default: undefined;
+        };
+        size: {
+            type: import('vue').PropType<import('@opensig/opendesign').SizeT>;
+        };
+        round: {
+            type: import('vue').PropType<import('@opensig/opendesign').RoundT>;
+        };
+        clearable: {
+            type: import('vue').PropType<boolean | undefined>;
+            default: undefined;
+        };
+        model: {
+            type: ObjectConstructor;
+        };
+        rules: {
+            type: import('vue').PropType<import('@opensig/opendesign').FormRulesT>;
+        };
+        hasRequired: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        requiredIcon: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        layout: {
+            type: import('vue').PropType<"h" | "v" | "inline">;
+            default: string;
+        };
+        labelWidth: {
+            type: StringConstructor;
+            default: string;
+        };
+        showMessage: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        validateOnRuleChange: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        scrollToError: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{
+        onClear?: ((filed?: string | string[] | undefined) => any) | undefined;
+        onReset?: ((filed?: string | string[] | undefined) => any) | undefined;
+        onSubmit?: ((results: import('@opensig/opendesign').FieldResultT[]) => any) | undefined;
+        onValidate?: ((results: import('@opensig/opendesign').FieldResultT[]) => any) | undefined;
+        onValidateField?: ((payload: {
+            field: string;
+            isValid: boolean;
+            message: string;
+        }) => any) | undefined;
+    }>, "disabled" | "clearable" | "hasRequired" | "requiredIcon" | "layout" | "labelWidth" | "showMessage" | "validateOnRuleChange" | "scrollToError" | "validate" | "validateField" | "resetFields" | "setInitialValues" | "clearValidate" | "scrollToField"> & {
+        validate: (filed?: string | string[], trigger?: import('@opensig/opendesign').TriggerT) => Promise<{
+            type: "warning" | "danger" | "success" | "";
+            message: string[];
+        }[]>;
+        validateField: (field: string | string[], trigger?: import('@opensig/opendesign').TriggerT) => Promise<{
+            type: "warning" | "danger" | "success" | "";
+            message: string[];
+        }[]>;
+        resetFields: (filed?: string | string[]) => void;
+        setInitialValues: (data: Record<string, any>) => void;
+        clearValidate: (filed?: string | string[], onClear?: (filed: import('@opensig/opendesign').FiledInfoT) => void) => void;
+        scrollToField: (field: string, options?: boolean | {
+            behavior?: "auto" | "smooth" | "instant";
+            block?: "start" | "center" | "end" | "nearest";
+            inline?: "start" | "center" | "end" | "nearest";
+        }) => Promise<void>;
+    } & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            default?(_: {}): any;
+        };
+    }) | null;
+}, HTMLDivElement>;
+export default _default;