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

package/src/components/input/styles.scss

@@ -0,0 +1,282 @@
+.ak-input,
+.ak-input__title {
+  @apply transition-all duration-[0.3s];
+}
+.ak-input {
+  @apply space-y-1 font-euclid;
+
+  &--filled {
+    .ak-input__title {
+      @apply text-gray-800;
+    }
+  }
+
+  &:has(.antd-input-affix-wrapper-focused) {
+    &:not(.ak-input--has-error) {
+      .ak-input__wrapper {
+        @apply border-primary-jordy-blue;
+      }
+    }
+  }
+
+  &__wrapper {
+    @apply h-8 rounded-lg border-gray-200 bg-white border flex items-center justify-center overflow-hidden transition-all duration-[0.3s];
+    .ma-icon {
+      @apply text-gray-400;
+    }
+    .antd-input-affix-wrapper {
+      @apply relative text-sm w-full flex items-center justify-center;
+      @apply ml-0 mr-0 #{!important};
+      .antd-input-prefix {
+        .ma-input-avatar {
+          @apply block;
+        }
+        > :not(:last-child) {
+          @apply mr-2;
+        }
+        > * {
+          @apply ml-2;
+        }
+        .ma-input-avatar {
+          @apply w-5 h-5 rounded-full;
+        }
+      }
+    }
+    .antd-input-group-wrapper {
+      @apply w-full h-full;
+      .antd-input-wrapper {
+        .antd-input-group-addon {
+          @apply text-sm ml-0 mr-0 #{!important};
+        }
+      }
+      .antd-input-group {
+        @apply flex items-center space-x-1 h-full;
+      }
+      .antd-input-group-addon {
+        @apply p-0 px-2 bg-transparent w-auto border-l-0 border-t-0 border-b-0 border-r h-full flex items-center justify-center;
+        &:first-child {
+          @apply border-gray-200 border-r;
+        }
+      }
+    }
+    .antd-input-suffix {
+      @apply flex items-center justify-center;
+      > * {
+        @apply mr-2;
+      }
+      .ma-select {
+        @apply border-none min-h-0 h-4;
+        .antd-select-selector {
+          .antd-select-selection-item {
+            @apply text-xs;
+          }
+        }
+        &.antd-select-disabled {
+          @apply bg-transparent;
+        }
+      }
+      .anticon {
+        svg {
+          @apply fill-gray-400 w-4 h-4;
+        }
+      }
+      .antd-input-clear-icon {
+        &.antd-input-clear-icon-hidden {
+          @apply hidden;
+        }
+      }
+    }
+  }
+
+  .antd-input-affix-wrapper-textarea-with-clear-btn {
+    @apply block relative;
+    .antd-input-clear-icon {
+      @apply absolute right-1 top-1;
+      svg {
+        @apply fill-gray-400 w-4 h-4;
+      }
+    }
+  }
+
+  //added for 1password plugin
+  input.antd-input[data-com-onepassword-filled="light"],
+  input.antd-input[data-com-onepassword-filled="dark"] {
+    @apply shadow-[0_0_0px_1000px_white_inset];
+    -webkit-box-shadow: 0 0 0px 1000px white inset;
+  }
+
+  .antd-input {
+    @apply text-xs p-0 outline-none w-full py-1 px-3 font-medium;
+
+    /* Chrome, Safari, Edge, Opera */
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      @apply m-0;
+      -webkit-appearance: none;
+    }
+
+    /* Firefox */
+    &[type="number"] {
+      -moz-appearance: textfield;
+    }
+
+    &:-webkit-autofill {
+      background-clip: text;
+      -webkit-background-clip: text;
+    }
+    &::placeholder {
+      @apply font-normal;
+    }
+  }
+
+  &__title {
+    @apply text-gray-500 text-xs font-medium cursor-pointer;
+  }
+
+  &__hint-text {
+    @apply text-gray-400 text-[10px] leading-4 pt-1 flex items-center gap-1;
+    &::before {
+      @apply content-[""] inline-block w-[10px] h-[10px] bg-contain bg-no-repeat bg-[center_center] flex-none;
+      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%2398A2B3" 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> ');
+      background-repeat: no-repeat;
+    }
+  }
+
+  &--medium {
+    .ak-input__wrapper {
+      @apply h-9;
+    }
+
+    .antd-input {
+      @apply text-sm py-2 px-3;
+    }
+
+    .ak-input__title {
+      @apply text-sm;
+    }
+
+    .ak-input__hint-text {
+      @apply text-xs leading-3 pt-1 flex items-center gap-1;
+      &::before {
+        @apply content-[""] inline-block w-3 h-3 bg-contain bg-no-repeat bg-[center_center];
+        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%2398A2B3" 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> ');
+      }
+    }
+  }
+
+  &--large {
+    .ak-input__wrapper {
+      @apply h-10;
+    }
+
+    .antd-input {
+      @apply text-sm py-3 px-3;
+    }
+
+    .ak-input__title {
+      @apply text-sm;
+    }
+
+    .ak-input__hint-text {
+      @apply text-xs leading-3 pt-1 flex items-center gap-1;
+      &::before {
+        @apply content-[""] inline-block w-3 h-3 bg-contain bg-no-repeat bg-[center_center];
+        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%2398A2B3" 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> ');
+      }
+    }
+  }
+
+  &--has-error {
+    .ak-input__wrapper {
+      @apply border-red-500;
+    }
+    .ak-input__hint-text {
+      @apply text-red-500;
+      &::before {
+        @apply content-[""] inline-block w-3 h-3 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> ');
+      }
+    }
+  }
+
+  &--disabled {
+    .ak-input__wrapper {
+      @apply bg-gray-100 border-gray-100;
+    }
+    .antd-input {
+      @apply text-gray-300 bg-gray-100;
+    }
+
+    .ak-input__title {
+      @apply text-gray-400;
+    }
+    .ak-input__hint-text {
+      @apply text-gray-400;
+      &::before {
+        @apply content-[""] inline-block w-3 h-3 bg-contain bg-no-repeat bg-[center_center];
+        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23D0D5DD" 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> ');
+      }
+    }
+    .ma-icon {
+      @apply text-gray-300;
+    }
+  }
+
+  &--email {
+    .ma-icon {
+      @apply w-5 h-5 text-gray-400;
+    }
+  }
+
+  &--url {
+    .ak-input__wrapper {
+      @apply p-0;
+    }
+    .ak-input__input {
+      @apply h-full;
+    }
+  }
+
+  textarea {
+    &.antd-input {
+      @apply rounded-lg border-gray-300 border px-3 py-2;
+    }
+  }
+
+  &--has-error {
+    textarea {
+      @apply border-red-400;
+    }
+    .ak-input__hint-text {
+      @apply text-red-400;
+    }
+  }
+
+  &--disabled {
+    textarea {
+      @apply bg-gray-100 border-gray-100;
+    }
+    .antd-input {
+      @apply text-gray-300;
+    }
+
+    .ak-input__title {
+      @apply text-gray-400;
+    }
+    .ak-input__hint-text {
+      @apply text-gray-400;
+    }
+  }
+  &:not(.ak-input--disabled, .ak-input--error) {
+    .ak-input__wrapper {
+      &:has(.antd-input:focus) {
+        @apply border-primary-jordy-blue;
+      }
+    }
+  }
+}
+.ak-input__input__ma-select__dropdown {
+  > div {
+    @apply min-w-[7rem];
+  }
+}

package/src/components/input/types.ts

@@ -0,0 +1,47 @@
+import type { SelectProps } from 'ant-design-vue';
+
+export const MaInputType = {
+    text: 'text',
+    password: 'password',
+    textarea: 'textarea',
+    number: 'number',
+    email: 'email',
+    url: 'url',
+    tel: 'tel',
+    amount: 'amount',
+    creditCard: 'creditCard',
+    userInfo: 'userInfo'
+} as const;
+
+export type MaInputType = typeof MaInputType[keyof typeof MaInputType];
+
+export const MaInputSize = {
+    small: 'small',
+    medium: 'medium',
+    large: 'large'
+} as const;
+
+export type MaInputSize = typeof MaInputSize[keyof typeof MaInputSize];
+
+export const MaInputCurrency = {
+    usd: 'USD',
+    eur: 'EUR',
+    gbp: 'GBP',
+    jpy: 'JPY'
+} as const;
+
+export type MaInputCurrency = typeof MaInputCurrency[keyof typeof MaInputCurrency];
+
+export const currencySymbols = {
+    USD: '$',
+    EUR: '€',
+    GBP: '£',
+    JPY: '¥',
+} as const;
+
+export const currencyOptions: SelectProps['options'] = [
+    { label: 'USD', value: 'USD' },
+    { label: 'EUR', value: 'EUR' },
+    { label: 'GBP', value: 'GBP' },
+    { label: 'JPY', value: 'JPY' },
+];