secure-action/es/index.mjs

Secure Action 是一个基于行为的验证码组件，适用于 Vue 3。

(function() {
  "use strict";
  try {
    if (typeof document != "undefined") {
      var elementStyle = document.createElement("style");
      elementStyle.appendChild(document.createTextNode(":root {\n  --sa-color: #1d2129;\n  --sa-bg-color: #fff;\n  --sa-radius: 8px;\n  --sa-font-size: 14px;\n  --sa-color-primary: #164cff;\n  --sa-color-danger: #f53f3f;\n  --sa-color-success: #00b42a;\n  --sa-border: 1px solid #edeef0;\n  --sa-header-height: 48px;\n  --sa-header-paddig: 0 16px;\n  --sa-body-paddig: 24px 32px 32px;\n  --sa-thumbnail-wrap-margin: 0 0 16px;\n  --sa-footer-height: 56px;\n  --sa-footer-paddig: 0 16px;\n  --sa-button-radius: 4px;\n  --sa-button-gap-x: 16px;\n  --sa-button-border-width: 1px;\n  --sa-button-border-style: solid;\n  --sa-button-padding-y: 7px;\n  --sa-button-padding-x: 15px;\n  --sa-button-icon-padding: 7px;\n  --sa-button-icon-image-size: 16px;\n  --sa-button-border-color-default: #dbdde2;\n  --sa-point-size: 20px;\n  --sa-point-font-weight: 500;\n  --sa-point-border: 1px solid #f3f6ff;\n}\n.sa-hstack,\n.secure-action__msak .secure-action__header,\n.secure-action__msak .secure-action__body .sa-thumbnail-wrap,\n.secure-action__msak .secure-action__body .sa-image-wrap .sa-point,\n.secure-action__msak .secure-action__body .sa-image-wrap .sa-status,\n.secure-action__msak .secure-action__footer {\n  display: flex;\n  align-items: center;\n}\n.secure-action__msak {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.4);\n}\n.secure-action__msak .secure-action {\n  color: var(--sa-color);\n  font-size: var(--sa-font-size);\n  background-color: var(--sa-bg-color);\n  border-radius: var(--sa-radius);\n}\n.secure-action__msak .secure-action .sa-button {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 400;\n  line-height: 1.5715;\n  white-space: nowrap;\n  cursor: pointer;\n  box-sizing: border-box;\n  appearance: none;\n  user-select: none;\n  transition: all 0.1s cubic-bezier(0, 0, 1, 1);\n  outline: none;\n  background-color: transparent;\n  border-radius: var(--sa-button-radius);\n  padding: var(--sa-button-padding-y) var(--sa-button-padding-x);\n  border: var(--sa-button-border-width) var(--sa-button-border-style) var(--sa-button-border-color-default);\n}\n.secure-action__msak .secure-action .sa-button + .sa-button {\n  margin-left: var(--sa-button-gap-x);\n}\n.secure-action__msak .secure-action .sa-button.is-primary {\n  border-color: var(--sa-color-primary);\n  background-color: var(--sa-color-primary);\n  color: #fff;\n}\n.secure-action__msak .secure-action .sa-button[disabled] {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n.secure-action__msak .secure-action .sa-button.no-border {\n  border-color: transparent;\n  background-color: transparent;\n}\n.secure-action__msak .secure-action .sa-button.is-icon {\n  padding: var(--sa-button-icon-padding);\n}\n.secure-action__msak .secure-action .sa-button.is-icon img {\n  width: var(--sa-button-icon-image-size);\n  height: var(--sa-button-icon-image-size);\n}\n.secure-action__msak .secure-action__header {\n  padding: var(--sa-header-paddig);\n  height: var(--sa-header-height);\n  border-bottom: var(--sa-border);\n}\n.secure-action__msak .secure-action__header .sa-title {\n  flex: 1 0 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.secure-action__msak .secure-action__body {\n  padding: var(--sa-body-paddig);\n}\n.secure-action__msak .secure-action__body .sa-thumbnail-wrap {\n  margin: var(--sa-thumbnail-wrap-margin);\n}\n.secure-action__msak .secure-action__body .sa-thumbnail-wrap .sa-thumbnail.is-fallback {\n  display: none;\n}\n.secure-action__msak .secure-action__body .sa-thumbnail-wrap mark {\n  color: var(--sa-color-danger);\n  background-color: transparent;\n}\n.secure-action__msak .secure-action__body .sa-image-wrap {\n  position: relative;\n  min-width: 320px;\n  min-height: 240px;\n}\n.secure-action__msak .secure-action__body .sa-image-wrap .sa-fallback {\n  display: none;\n}\n.secure-action__msak .secure-action__body .sa-image-wrap .sa-image {\n  width: 100%;\n  display: block;\n}\n.secure-action__msak .secure-action__body .sa-image-wrap .sa-image.is-fallback {\n  display: none;\n}\n.secure-action__msak .secure-action__body .sa-image-wrap .sa-image.is-fallback + .sa-fallback {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  color: #c9cdd4;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n}\n.secure-action__msak .secure-action__body .sa-image-wrap .sa-image.is-disabled {\n  cursor: not-allowed;\n}\n.secure-action__msak .secure-action__body .sa-image-wrap .sa-point {\n  position: absolute;\n  font-style: normal;\n  font-weight: var(--sa-point-font-weight);\n  left: calc(var(--sa-point-x) - 10px);\n  top: calc(var(--sa-point-y) - 10px);\n  display: flex;\n  width: var(--sa-point-size);\n  height: var(--sa-point-size);\n  justify-content: center;\n  border-radius: var(--sa-point-size);\n  border: var(--sa-point-border);\n  background: var(--sa-color-primary);\n  color: #fff;\n  pointer-events: none;\n}\n.secure-action__msak .secure-action__body .sa-image-wrap .sa-status {\n  justify-content: center;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: #fff;\n  transition: height, opacity 0.3s esae-in-out;\n  opacity: 0;\n}\n.secure-action__msak .secure-action__body .sa-image-wrap .sa-status.is-success {\n  background-color: var(--sa-color-success);\n}\n.secure-action__msak .secure-action__body .sa-image-wrap .sa-status.is-error {\n  background-color: var(--sa-color-danger);\n}\n.secure-action__msak .secure-action__body .sa-image-wrap .sa-status.is-show {\n  height: 36px;\n  opacity: 1;\n}\n.secure-action__msak .secure-action__footer {\n  justify-content: flex-end;\n  border-top: var(--sa-border);\n  height: var(--sa-footer-height);\n  padding: var(--sa-footer-paddig);\n}\n.secure-action__msak .secure-action__footer.is-start {\n  justify-content: flex-start;\n}\n.secure-action__msak .secure-action__footer.is-center {\n  justify-content: center;\n}\n.secure-action__msak .secure-action__footer.is-end {\n  justify-content: flex-end;\n}\n.secure-action__msak .sa-loading-warpper {\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n}\n.secure-action__msak .sa-loading-warpper .loading-content {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.4);\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1;\n  color: #fff;\n}\n.secure-action__msak .sa-loading-warpper .loading-content .loading-icon {\n  margin-top: 8px;\n  animation: rotate 1s linear infinite;\n}\n@keyframes rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}"));
      document.head.appendChild(elementStyle);
    }
  } catch (e) {
    console.error("vite-plugin-css-injected-by-js", e);
  }
})();
import { SecureAction } from "./index2.mjs";
import "./assets/secure-action.less.mjs";
import { definePropType, secureActionProps } from "./props.mjs";
import { useBehavioralCaptcha } from "./hooks/useBehavioralCaptcha.mjs";
const index = {
  install: (app) => {
    app.component(SecureAction.name, SecureAction);
  }
};
export {
  SecureAction,
  index as default,
  definePropType,
  secureActionProps,
  useBehavioralCaptcha
};