@mobileaction/action-kit 1.42.7-beta.2 → 1.42.7-beta.3

package/src/components/empty/types.ts

@@ -0,0 +1,24 @@
+export const MaEmptySizes = [
+    "small",
+    "medium",
+    "large",
+] as const;
+
+export const MaEmptyVariants = [
+    "general",
+    "add-app",
+    "table",
+    "selection",
+] as const;
+
+export const MaEmptyIcons: {
+    [K in MaEmptyVariant]: string
+} = {
+    'general': 'box-empty',
+    'add-app': 'add-app',
+    'table': 'empty-table',
+    'selection': 'selection',
+}
+
+export type MaEmptySize = (typeof MaEmptySizes)[number];
+export type MaEmptyVariant = (typeof MaEmptyVariants)[number];

package/src/components/form/assets/styles.scss

@@ -0,0 +1,486 @@
+.ma-form {
+  @apply font-euclid;
+  .antd-form-item .antd-upload {
+    @apply bg-transparent;
+  }
+  .antd-form-item .antd-upload.antd-upload-drag {
+    @apply bg-gray-100;
+  }
+  .antd-form-item .antd-radio-inline,
+  .antd-form-item .antd-checkbox-inline {
+    @apply inline-block font-[normal] align-middle cursor-pointer ml-2;
+  }
+  .antd-form-item .antd-radio-inline:first-child,
+  .antd-form-item .antd-checkbox-inline:first-child {
+    @apply ml-0;
+  }
+  .antd-form-item .antd-checkbox-vertical,
+  .antd-form-item .antd-radio-vertical {
+    @apply block;
+  }
+  .antd-form-item .antd-checkbox-vertical + .antd-checkbox-vertical,
+  .antd-form-item .antd-radio-vertical + .antd-radio-vertical {
+    @apply ml-0;
+  }
+  .antd-form-item .antd-input-number + .antd-form-text {
+    @apply ml-2;
+  }
+  .antd-form-item .antd-input-number-handler-wrap {
+    @apply z-[2];
+  }
+  .antd-form-item .antd-select,
+  .antd-form-item .antd-cascader-picker {
+    @apply w-full;
+  }
+  .antd-form-item .antd-picker-calendar-year-select,
+  .antd-form-item .antd-picker-calendar-month-select {
+    @apply w-auto;
+  }
+  .antd-form-item .antd-input-group .antd-select,
+  .antd-form-item .antd-input-group .antd-cascader-picker {
+    @apply w-auto;
+  }
+  .antd-form-item .antd-input-number-group .antd-select,
+  .antd-form-item .antd-input-number-group .antd-cascader-picker {
+    @apply w-auto;
+  }
+  .antd-form-inline {
+    @apply flex flex-wrap;
+  }
+  .antd-form-inline .antd-form-item {
+    @apply flex-none flex-nowrap mr-4 mb-0;
+  }
+  .antd-form-inline .antd-form-item-with-help {
+    @apply mb-6;
+  }
+  .antd-form-inline .antd-form-item > .antd-form-item-label,
+  .antd-form-inline .antd-form-item > .antd-form-item-control {
+    @apply inline-block align-top;
+  }
+  .antd-form-inline .antd-form-item > .antd-form-item-label {
+    @apply flex-none;
+  }
+  .antd-form-inline .antd-form-item .antd-form-text,
+  .antd-form-inline .antd-form-item .antd-form-item-has-feedback {
+    @apply inline-block;
+  }
+  .antd-form-horizontal .antd-form-item-label {
+    @apply grow-0;
+  }
+  .antd-form-horizontal .antd-form-item-control {
+    @apply flex-[1_1_0] min-w-0;
+  }
+  .antd-form-horizontal .antd-form-item-label.antd-col-24 + .antd-form-item-control {
+    @apply min-w-[unset];
+  }
+  .antd-form-vertical .antd-form-item {
+    @apply flex-col;
+  }
+  .antd-form-vertical .antd-form-item-label > label {
+    @apply h-auto;
+  }
+  .antd-form-vertical .antd-form-item-label {
+    @apply leading-[1.5715] text-left pt-0 pb-2 px-0;
+    white-space: initial;
+  }
+  .antd-col-24.antd-form-item-label,
+  .antd-col-xl-24.antd-form-item-label {
+    @apply leading-[1.5715] text-left pt-0 pb-2 px-0;
+    white-space: initial;
+  }
+  .antd-form-vertical .antd-form-item-label > label,
+  .antd-col-24.antd-form-item-label > label,
+  .antd-col-xl-24.antd-form-item-label > label {
+    @apply m-0;
+  }
+  .antd-form-vertical .antd-form-item-label > label::after,
+  .antd-col-24.antd-form-item-label > label::after,
+  .antd-col-xl-24.antd-form-item-label > label::after {
+    @apply hidden;
+  }
+  .antd-form-rtl.antd-form-vertical .antd-form-item-label,
+  .antd-form-rtl.antd-col-24.antd-form-item-label,
+  .antd-form-rtl.antd-col-xl-24.antd-form-item-label {
+    @apply text-right;
+  }
+  .antd-form-item-explain-error {
+    @apply text-red-500 text-xs leading-3 pt-1 flex items-center gap-1;
+    &::before {
+      @apply content-[""] inline-block w-[14px] h-[14px] bg-contain bg-no-repeat bg-[center_center];
+      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FF6565" viewBox="0 0 512 512"> <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/> </svg> ');
+    }
+  }
+  .antd-form-item-explain-warning {
+    @apply text-orange-400 text-xs leading-3;
+  }
+  .antd-form-item-has-feedback .antd-input {
+    @apply pr-6;
+  }
+  .antd-form-item-has-feedback .antd-input-affix-wrapper .antd-input-suffix {
+    @apply pr-[18px];
+  }
+  .antd-form-item-has-feedback .antd-input-search:not(.antd-input-search-enter-button) .antd-input-suffix {
+    @apply right-7;
+  }
+  .antd-form-item-has-feedback .antd-switch {
+    @apply mt-0.5 mb-1 mx-0;
+  }
+  .antd-form-item-has-feedback > .antd-select .antd-select-arrow,
+  .antd-form-item-has-feedback > .antd-select .antd-select-clear {
+    @apply right-8;
+  }
+  .antd-form-item-has-feedback :not(.antd-input-group-addon) > .antd-select .antd-select-arrow,
+  .antd-form-item-has-feedback :not(.antd-input-group-addon) > .antd-select .antd-select-clear {
+    @apply right-8;
+  }
+  .antd-form-item-has-feedback :not(.antd-input-number-group-addon) > .antd-select .antd-select-arrow,
+  .antd-form-item-has-feedback :not(.antd-input-number-group-addon) > .antd-select .antd-select-clear {
+    @apply right-8;
+  }
+  .antd-form-item-has-feedback > .antd-select .antd-select-selection-selected-value,
+  .antd-form-item-has-feedback :not(.antd-input-group-addon) > .antd-select .antd-select-selection-selected-value,
+  .antd-form-item-has-feedback
+    :not(.antd-input-number-group-addon)
+    > .antd-select
+    .antd-select-selection-selected-value {
+    @apply pr-[42px];
+  }
+  .antd-form-item-has-feedback .antd-cascader-picker-arrow {
+    @apply mr-[19px];
+  }
+  .antd-form-item-has-feedback .antd-cascader-picker-clear {
+    @apply right-8;
+  }
+  .antd-form-item-has-feedback .antd-picker,
+  .antd-form-item-has-feedback .antd-picker-large {
+    @apply pr-[29.2px];
+  }
+  .antd-form-item-has-feedback .antd-picker-small {
+    @apply pr-[25.2px];
+  }
+  .antd-form-item-has-feedback.antd-form-item-has-success .antd-form-item-children-icon,
+  .antd-form-item-has-feedback.antd-form-item-has-warning .antd-form-item-children-icon,
+  .antd-form-item-has-feedback.antd-form-item-has-error .antd-form-item-children-icon,
+  .antd-form-item-has-feedback.antd-form-item-is-validating .antd-form-item-children-icon {
+    @apply absolute z-[1] w-8 h-5 text-sm leading-5 text-center visible animate-[zoomIn_0.3s_cubic-bezier(0.12,0.4,0.29,1.46)] pointer-events-none -mt-2.5 right-0 top-2/4;
+  }
+  .antd-form-item-has-success.antd-form-item-has-feedback .antd-form-item-children-icon {
+    @apply text-green-400;
+  }
+  .antd-form-item-has-warning .antd-form-item-split {
+    @apply text-orange-400;
+  }
+  .antd-form-item-has-warning :not(.antd-input-disabled):not(.antd-input-borderless).antd-input,
+  .antd-form-item-has-warning
+    :not(.antd-input-affix-wrapper-disabled):not(.antd-input-affix-wrapper-borderless).antd-input-affix-wrapper,
+  .antd-form-item-has-warning
+    :not(.antd-input-number-affix-wrapper-disabled):not(
+      .antd-input-number-affix-wrapper-borderless
+    ).antd-input-number-affix-wrapper,
+  .antd-form-item-has-warning :not(.antd-input-disabled):not(.antd-input-borderless).antd-input:hover,
+  .antd-form-item-has-warning
+    :not(.antd-input-affix-wrapper-disabled):not(.antd-input-affix-wrapper-borderless).antd-input-affix-wrapper:hover,
+  .antd-form-item-has-warning
+    :not(.antd-input-number-affix-wrapper-disabled):not(
+      .antd-input-number-affix-wrapper-borderless
+    ).antd-input-number-affix-wrapper:hover {
+    @apply border-orange-400;
+  }
+  .antd-form-item-has-warning .antd-input-prefix,
+  .antd-form-item-has-warning .antd-input-number-prefix {
+    @apply text-orange-400;
+  }
+  .antd-form-item-has-warning .antd-input-group-addon,
+  .antd-form-item-has-warning .antd-input-number-group-addon {
+    @apply text-orange-400 border-orange-400;
+  }
+  .antd-form-item-has-warning .has-feedback {
+    @apply text-orange-400;
+  }
+  .antd-form-item-has-warning.antd-form-item-has-feedback .antd-form-item-children-icon {
+    @apply text-orange-400;
+  }
+
+  .antd-form-item-has-warning .antd-input-number,
+  .antd-form-item-has-warning .antd-picker {
+    @apply bg-white border-orange-400;
+  }
+  .antd-form-item-has-warning .antd-input-number:not([disabled]):hover,
+  .antd-form-item-has-warning .antd-picker:not([disabled]):hover {
+    @apply bg-white border-orange-400;
+  }
+  .antd-form-item-has-error .antd-form-item-split {
+    @apply text-red-400;
+  }
+  .antd-form-item-has-error :not(.antd-input-disabled):not(.antd-input-borderless).antd-input,
+  .antd-form-item-has-error
+    :not(.antd-input-affix-wrapper-disabled):not(.antd-input-affix-wrapper-borderless).antd-input-affix-wrapper,
+  .antd-form-item-has-error
+    :not(.antd-input-number-affix-wrapper-disabled):not(
+      .antd-input-number-affix-wrapper-borderless
+    ).antd-input-number-affix-wrapper,
+  .antd-form-item-has-error :not(.antd-input-disabled):not(.antd-input-borderless).antd-input:hover,
+  .antd-form-item-has-error
+    :not(.antd-input-affix-wrapper-disabled):not(.antd-input-affix-wrapper-borderless).antd-input-affix-wrapper:hover,
+  .antd-form-item-has-error
+    :not(.antd-input-number-affix-wrapper-disabled):not(
+      .antd-input-number-affix-wrapper-borderless
+    ).antd-input-number-affix-wrapper:hover {
+    @apply bg-red-25 border-red-400;
+  }
+
+  .antd-form-item-has-error .antd-input-prefix,
+  .antd-form-item-has-error .antd-input-number-prefix {
+    @apply text-red-400;
+  }
+  .antd-form-item-has-error .antd-input-group-addon,
+  .antd-form-item-has-error .antd-input-number-group-addon {
+    @apply text-red-400 border-red-400;
+  }
+  .antd-form-item-has-error .has-feedback {
+    @apply text-red-400;
+  }
+  .antd-form-item-has-error.antd-form-item-has-feedback .antd-form-item-children-icon {
+    @apply text-red-400;
+  }
+
+  .antd-form-item-has-error .antd-select.antd-select-auto-complete .antd-input:focus {
+    @apply border-red-400;
+  }
+  .antd-form-item-has-error .antd-input-number,
+  .antd-form-item-has-error .antd-picker {
+    @apply bg-white border-red-400;
+  }
+  .antd-form-item-has-error .antd-input-number-focused,
+  .antd-form-item-has-error .antd-picker-focused,
+  .antd-form-item-has-error .antd-input-number:focus,
+  .antd-form-item-has-error .antd-picker:focus {
+    @apply shadow-[0_0_0_2px_rgba(255,77,79,0.2)] border-red-300 border-r;
+    outline: 0;
+  }
+  .antd-form-item-has-error .antd-input-number:not([disabled]):hover,
+  .antd-form-item-has-error .antd-picker:not([disabled]):hover {
+    @apply bg-white border-red-400;
+  }
+  .antd-form-item-has-error .antd-mention-wrapper .antd-mention-editor {
+    @apply bg-white border-red-400;
+  }
+  .antd-form-item-has-error .antd-mention-wrapper .antd-mention-editor:not([disabled]):hover {
+    @apply bg-white border-red-400;
+  }
+  .antd-form-item-has-error .antd-mention-wrapper.antd-mention-active:not([disabled]) .antd-mention-editor,
+  .antd-form-item-has-error .antd-mention-wrapper .antd-mention-editor:not([disabled]):focus {
+    @apply shadow-[0_0_0_2px_rgba(255,77,79,0.2)] border-red-300 border-r;
+    outline: 0;
+  }
+  .antd-form-item-has-error
+    .antd-cascader-picker:hover
+    .antd-cascader-picker-label:hover
+    + .antd-cascader-input.antd-input {
+    @apply border-red-400;
+  }
+  .antd-form-item-has-error .antd-cascader-picker:focus .antd-cascader-input {
+    @apply bg-white shadow-[0_0_0_2px_rgba(255,77,79,0.2)] border-red-300 border-r;
+    outline: 0;
+  }
+  .antd-form-item-has-error .antd-transfer-list {
+    @apply border-red-400;
+  }
+  .antd-form-item-has-error .antd-transfer-list-search:not([disabled]) {
+    @apply border-gray-100 hover:border-primary-dark-blue hover:border-r focus:shadow-[0_0_0_2px_rgba(24,144,255,0.2)] focus:border-primary-dark-blue focus:border-r;
+  }
+  .antd-form-item-has-error .antd-transfer-list-search:not([disabled]):focus {
+    outline: 0;
+  }
+  .antd-form-item-has-error .antd-radio-button-wrapper {
+    @apply border-red-400;
+  }
+  .antd-form-item-has-error .antd-radio-button-wrapper:not(:first-child)::before {
+    @apply bg-red-400;
+  }
+  .antd-form-item-has-error .antd-mentions {
+    @apply border-red-400;
+  }
+  .antd-form-item-has-error .antd-mentions-focused,
+  .antd-form-item-has-error .antd-mentions:focus {
+    @apply shadow-[0_0_0_2px_rgba(255,77,79,0.2)] border-red-300 border-r;
+    outline: 0;
+  }
+  .antd-form-item-is-validating.antd-form-item-has-feedback .antd-form-item-children-icon {
+    @apply inline-block text-primary-dark-blue;
+  }
+  .antd-form {
+    @apply box-border text-[rgba(0,0,0,0.85)] text-sm leading-[1.5715] m-0 p-0;
+  }
+  .antd-form legend {
+    @apply block w-full text-[rgba(0,0,0,0.45)] text-base leading-[inherit] mb-5 p-0 border-b-gray-100 border-0 border-b border-solid;
+  }
+  .antd-form label {
+    @apply text-sm;
+  }
+  .antd-form input[type="search"] {
+    @apply box-border;
+  }
+  .antd-form input[type="radio"],
+  .antd-form input[type="checkbox"] {
+    @apply leading-[normal];
+  }
+  .antd-form input[type="file"] {
+    @apply block;
+  }
+  .antd-form input[type="range"] {
+    @apply block w-full;
+  }
+  .antd-form select[multiple],
+  .antd-form select[size] {
+    @apply h-auto;
+  }
+  .antd-form input[type="file"]:focus,
+  .antd-form input[type="radio"]:focus,
+  .antd-form input[type="checkbox"]:focus {
+    @apply -outline-offset-2;
+    outline: thin dotted;
+    outline: 5px auto -webkit-focus-ring-color;
+  }
+  .antd-form output {
+    @apply block text-[rgba(0,0,0,0.85)] text-sm leading-[1.5715] pt-[15px];
+  }
+  .antd-form .antd-form-text {
+    @apply inline-block pr-2;
+  }
+  .antd-form-small .antd-form-item-label > label {
+    @apply h-6;
+  }
+  .antd-form-large .antd-form-item-label > label {
+    @apply h-10;
+  }
+  .antd-form-item {
+    @apply box-border text-[rgba(0,0,0,0.85)] align-top m-0 p-0;
+  }
+  .antd-form-item-with-help {
+    @apply transition-none mb-0;
+  }
+  .antd-form-item-hidden {
+    @apply hidden;
+  }
+  .antd-form-item-hidden.antd-row {
+    @apply hidden;
+  }
+  .antd-form-item-label {
+    @apply inline-block grow-0 overflow-hidden whitespace-nowrap text-right align-middle;
+  }
+  .antd-form-item-label-left {
+    @apply text-left;
+  }
+  .antd-form-item-label-wrap {
+    @apply leading-[1.3215em];
+    overflow: unset;
+    white-space: unset;
+  }
+  .antd-form-item-label > label {
+    @apply relative inline-flex items-center max-w-full h-8 text-[rgba(0,0,0,0.85)] text-sm after:content-[":"] after:relative after:top-[-0.5px] after:ml-0.5 after:mr-2 after:my-0;
+  }
+  .antd-form-item-label > label > .anticon {
+    @apply text-sm align-top;
+  }
+  .antd-form-item-label > label.antd-form-item-required:not(.antd-form-item-required-mark-optional)::before {
+    @apply inline-block text-red-400 text-sm leading-none content-["*"] mr-1;
+  }
+  .antd-form-hide-required-mark
+    .antd-form-item-label
+    > label.antd-form-item-required:not(.antd-form-item-required-mark-optional)::before {
+    @apply hidden;
+  }
+  .antd-form-item-label > label .antd-form-item-optional {
+    @apply inline-block text-[rgba(0,0,0,0.45)] ml-1;
+  }
+  .antd-form-hide-required-mark .antd-form-item-label > label .antd-form-item-optional {
+    @apply hidden;
+  }
+  .antd-form-item-label > label .antd-form-item-tooltip {
+    @apply text-[rgba(0,0,0,0.45)] cursor-help;
+    writing-mode: horizontal-tb;
+    -webkit-margin-start: 4px;
+    margin-inline-start: 4px;
+  }
+  .antd-form-item-label > label.antd-form-item-no-colon::after {
+    @apply content-["_"];
+  }
+  .antd-form-item-control {
+    @apply flex flex-col grow;
+  }
+  .antd-form-item-control:first-child:not([class^="antd-col-"]):not([class*=" antd-col-"]) {
+    @apply w-full;
+  }
+  .antd-form-item-control-input {
+    @apply relative flex items-center;
+  }
+  .antd-form-item-control-input-content {
+    @apply flex-[auto] max-w-full;
+  }
+  .antd-form-item-explain,
+  .antd-form-item-extra {
+    @apply clear-both text-[rgba(0,0,0,0.45)] text-sm leading-[1.5715] transition-[color] duration-[0.3s] ease-[cubic-bezier(0.215,0.61,0.355,1)] min-h-[1rem];
+  }
+  .ant-form-inline .ant-form-item-with-help {
+    @apply mb-[1rem];
+  }
+  .ant-form-item-with-help .ant-form-item-explain {
+    @apply h-auto min-h-[1rem] opacity-100;
+  }
+  .antd-form-item-extra {
+    @apply min-h-[1rem];
+  }
+  .ant-show-help-item {
+    @apply hidden;
+  }
+  .ant-form-item-explain-connected {
+    @apply h-0 min-h-0 opacity-0;
+  }
+  .antd-form-item-with-help .antd-form-item-explain {
+    @apply opacity-100 h-auto min-h-[1rem];
+  }
+
+  .antd-show-help-leave {
+    @apply min-h-[1rem];
+  }
+  .antd-show-help-leave-active {
+    @apply min-h-0;
+  }
+  .antd-show-help-item {
+    @apply overflow-hidden;
+    transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+      transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
+  }
+  .antd-show-help-item-appear,
+  .antd-show-help-item-enter {
+    @apply translate-y-[-5px] opacity-0;
+  }
+  .antd-show-help-item-appear-active,
+  .antd-show-help-item-enter-active {
+    @apply translate-y-0 opacity-100;
+  }
+  .antd-show-help-item-leave-active {
+    @apply translate-y-[-5px];
+  }
+  .ma-form-item {
+    @apply pb-4;
+    &.antd-form-item-has-error {
+      .ak-input__wrapper,
+      .ma-select,
+      .antd-radio-inner,
+      .ma-numeric-input__input {
+        @apply border-red-400 bg-red-25;
+      }
+      .antd-checkbox-inner {
+        @apply border-red-400;
+      }
+      .ak-input__wrapper:has(.antd-input:focus) {
+        @apply border-red-400 bg-red-25;
+      }
+    }
+    &.antd-form-item-with-help {
+      @apply pb-0 transition-none;
+    }
+  }
+}

package/src/components/form/components/nonHSFormsIgnore.vue

@@ -0,0 +1,15 @@
+<template>
+    <label for="cc-num" class="hidden">HubspotCollectedFormsWorkaround</label>
+    <input
+        id="cc-num"
+        name="cc-num"
+        class="hidden"
+        required
+        value="HubspotCollectedFormsWorkaround"
+    >
+</template>
+<script lang="ts">
+export default {
+  name: 'MaNonHSFormsIgnore',
+};
+</script>

package/src/components/form/index.vue

@@ -0,0 +1,51 @@
+<script lang="ts">
+export default {
+    name: 'MaForm',
+};
+</script>
+<script setup lang="ts">
+import { Form as AForm, FormProps } from 'ant-design-vue';
+import { computed, ref, useAttrs } from 'vue';
+
+import nonHSFormsIgnore from './components/nonHSFormsIgnore.vue';
+
+export interface MaFormProps extends FormProps {
+    nonHubspotFormsIgnore?: boolean
+}
+
+const props = withDefaults(defineProps<MaFormProps>(), {
+    nonHubspotFormsIgnore: true,
+});
+const attrs = useAttrs();
+
+const form = ref();
+
+const bindings = computed(() => ({ ...attrs, ...props } as unknown as MaFormProps));
+
+const validate = () => form.value.validate();
+const clearValidate = () => form.value.clearValidate();
+const resetFields = () => form.value.resetFields();
+const scrollToField = () => form.value.scrollToField();
+const validateFields = () => form.value.validateFields();
+
+defineExpose({
+    validate,
+    clearValidate,
+    resetFields,
+    scrollToField,
+    validateFields,
+});
+
+</script>
+<template>
+  <a-form
+    v-bind="bindings"
+    ref="form"
+    class="ma-form"
+    prefix-cls="antd-form"
+  >
+    <non-h-s-forms-ignore v-if="props.nonHubspotFormsIgnore" />
+    <slot />
+  </a-form>
+</template>
+<style lang="scss" src="./assets/styles.scss"></style>

package/src/components/form/stories/constants.ts

@@ -0,0 +1,20 @@
+import type { Meta } from '@storybook/vue3';
+
+import MaForm from '../index.vue';
+
+export const baseConfig: Meta<typeof MaForm> = {
+    component: MaForm,
+    parameters: {
+        docs: {
+            description: {
+                component: `<p>
+                    You can check details from <a href="https://antdv.com/components/form" target="_blank">here</a>
+                </p><p>
+                    You can use <b><ma-form></b> and <b><ma-form-item></b> components instead of <b><a-form></b> and <b><a-form-item></b> components with all the same properties and the same slots.
+                </p>
+                `,
+            },
+        },
+    },
+    argTypes: {},
+};