@varlet/ui 2.20.1 → 2.20.2

package/es/fab/Fab.mjs

@@ -0,0 +1,149 @@
+import { mergeProps as _mergeProps, withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
+import Button from "../button/index.mjs";
+import Icon from "../icon/index.mjs";
+import Drag from "../drag/index.mjs";
+import { defineComponent, ref, Transition, watch } from "vue";
+import { useClickOutside, useVModel } from "@varlet/use";
+import { isBoolean, call } from "@varlet/shared";
+import { createNamespace, flatFragment } from "../utils/components.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+import { props } from "./props.mjs";
+
+
+
+
+
+
+
+
+const {
+  name,
+  classes,
+  n
+} = createNamespace("fab");
+var stdin_default = defineComponent({
+  name,
+  inheritAttrs: false,
+  props,
+  setup(props2, {
+    slots,
+    attrs
+  }) {
+    const isActive = useVModel(props2, "active");
+    const host = ref(null);
+    const dragRef = ref(null);
+    watch(() => props2.trigger, () => {
+      isActive.value = false;
+    });
+    watch(() => props2.disabled, () => {
+      isActive.value = false;
+    });
+    watch(() => [props2.position, props2.fixed, props2.top, props2.bottom, props2.left, props2.right], () => {
+      var _a;
+      (_a = dragRef.value) == null ? void 0 : _a.reset();
+    });
+    useClickOutside(host, "click", handleClickOutside);
+    function handleClick(e, value, childrenLength) {
+      e.stopPropagation();
+      if (props2.trigger !== "click" || props2.disabled) {
+        return;
+      }
+      if (childrenLength === 0) {
+        call(props2.onClick, isActive.value, e);
+        return;
+      }
+      isActive.value = value;
+      call(props2.onClick, isActive.value, e);
+      call(isActive.value ? props2.onOpen : props2.onClose);
+    }
+    function handleMouse(value, childrenLength) {
+      if (props2.trigger !== "hover" || props2.disabled || childrenLength === 0) {
+        return;
+      }
+      isActive.value = value;
+      call(isActive.value ? props2.onOpen : props2.onClose);
+    }
+    function handleClickOutside() {
+      if (props2.trigger !== "click" || props2.disabled) {
+        return;
+      }
+      if (isActive.value !== false) {
+        isActive.value = false;
+        call(props2.onClose);
+      }
+    }
+    function renderTrigger() {
+      if (slots.trigger) {
+        return props2.show ? slots.trigger({
+          active: isActive.value
+        }) : null;
+      }
+      return _withDirectives(_createVNode(Button, {
+        "var-fab-cover": true,
+        "class": n("trigger"),
+        "type": props2.type,
+        "color": props2.color,
+        "disabled": props2.disabled,
+        "elevation": props2.elevation,
+        "round": true
+      }, {
+        default: () => [_createVNode(Icon, {
+          "var-fab-cover": true,
+          "class": classes([isActive.value, n("trigger-active-icon"), n("trigger-inactive-icon")]),
+          "name": isActive.value ? props2.activeIcon : props2.inactiveIcon,
+          "size": isActive.value ? props2.activeIconSize : props2.inactiveIconSize,
+          "namespace": isActive.value ? props2.activeIconNamespace : props2.inactiveIconNamespace,
+          "transition": 200,
+          "animationClass": n("--trigger-icon-animation")
+        }, null)]
+      }), [[_vShow, props2.show]]);
+    }
+    return () => {
+      var _a;
+      const children = flatFragment((_a = call(slots.default)) != null ? _a : []);
+      const dragProps = isBoolean(props2.drag) ? {} : props2.drag;
+      return _createVNode(Drag, _mergeProps({
+        "ref": dragRef,
+        "class": classes(n(`--position-${props2.position}`), [!props2.fixed, n("--absolute")]),
+        "style": {
+          top: toSizeUnit(props2.top),
+          bottom: toSizeUnit(props2.bottom),
+          left: toSizeUnit(props2.left),
+          right: toSizeUnit(props2.right)
+        },
+        "zIndex": props2.zIndex,
+        "teleport": props2.teleport,
+        "disabled": props2.disabled || !props2.drag || !props2.fixed,
+        "direction": dragProps.direction,
+        "attraction": dragProps.attraction,
+        "boundary": dragProps.boundary,
+        "onClick": (e) => handleClick(e, !isActive.value, children.length)
+      }, attrs), {
+        default: () => [_createVNode("div", {
+          "class": classes(n(), n(`--direction-${props2.direction}`), [props2.safeArea, n("--safe-area")]),
+          "ref": host,
+          "onMouseleave": () => handleMouse(false, children.length),
+          "onMouseenter": () => handleMouse(true, children.length)
+        }, [_createVNode(Transition, {
+          "name": n(`--active-transition`)
+        }, {
+          default: () => [renderTrigger()]
+        }), _createVNode(Transition, {
+          "name": n(`--actions-transition-${props2.direction}`),
+          "onAfterEnter": props2.onOpened,
+          "onAfterLeave": props2.onClosed
+        }, {
+          default: () => [_withDirectives(_createVNode("div", {
+            "class": n("actions"),
+            "onClick": (e) => e.stopPropagation()
+          }, [children.map((child) => _createVNode("div", {
+            "class": n("action")
+          }, [child]))]), [[_vShow, props2.show && isActive.value && children.length]])]
+        })])]
+      });
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/fab/fab.css

@@ -0,0 +1 @@
+:root { --fab-top: 70px; --fab-bottom: 16px; --fab-left: 16px; --fab-right: 16px; --fab-trigger-size: 56px; --fab-trigger-inactive-icon-size: 26px; --fab-trigger-active-icon-size: 22px; --fab-actions-padding: 10px 0; --fab-action-margin: 6px; --fab-transition-standard-easing: cubic-bezier(0.4, 0, 0.2, 1);}.var-fab-transition-default-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab-transition-default-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab__trigger[var-fab-cover] { width: var(--fab-trigger-size); height: var(--fab-trigger-size);}.var-fab__trigger-inactive-icon[var-fab-cover] { font-size: var(--fab-trigger-inactive-icon-size);}.var-fab__trigger-active-icon[var-fab-cover] { font-size: var(--fab-trigger-active-icon-size);}.var-fab__actions { position: absolute; display: flex; justify-content: center; align-items: center; padding: var(--fab-actions-padding);}.var-fab__action { margin: var(--fab-action-margin);}.var-fab--position-left-top { top: var(--fab-top); left: var(--fab-left);}.var-fab--position-right-top { top: var(--fab-top); right: var(--fab-right);}.var-fab--position-left-bottom { bottom: var(--fab-bottom); left: var(--fab-left);}.var-fab--position-right-bottom { bottom: var(--fab-bottom); right: var(--fab-right);}.var-fab--direction-left .var-fab__actions,.var-fab--direction-right .var-fab__actions { height: 100%; top: 0; padding: 0 var(--fab-actions-padding);}.var-fab--direction-left .var-fab__actions { flex-direction: row-reverse; right: 100%;}.var-fab--direction-right .var-fab__actions { flex-direction: row; left: 100%;}.var-fab--direction-top .var-fab__actions,.var-fab--direction-bottom .var-fab__actions { width: 100%; left: 0;}.var-fab--direction-top .var-fab__actions { flex-direction: column-reverse; bottom: 100%;}.var-fab--direction-bottom .var-fab__actions { flex-direction: column; top: 100%;}.var-fab--fixed { position: fixed;}.var-fab--absolute { position: absolute;}.var-fab--active-transition-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--active-transition-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--active-transition-enter-from,.var-fab--active-transition-leave-to { transform: scale(0);}.var-fab--actions-transition-top-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-top-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-top-enter-from,.var-fab--actions-transition-top-leave-to { opacity: 0; transform: translateY(40px);}.var-fab--actions-transition-bottom-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-bottom-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-bottom-enter-from,.var-fab--actions-transition-bottom-leave-to { opacity: 0; transform: translateY(-40px);}.var-fab--actions-transition-left-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-left-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-left-enter-from,.var-fab--actions-transition-left-leave-to { opacity: 0; transform: translateX(40px);}.var-fab--actions-transition-right-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-right-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-right-enter-from,.var-fab--actions-transition-right-leave-to { opacity: 0; transform: translateX(-40px);}.var-fab--trigger-icon-animation { transform: scale(0.4); opacity: 0; transition-property: transform, opacity;}.var-fab--safe-area { margin-bottom: constant(safe-area-inset-bottom); margin-bottom: env(safe-area-inset-bottom);}

package/es/fab/index.mjs

@@ -0,0 +1,12 @@
+import Fab from "./Fab.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as fabProps } from "./props.mjs";
+withInstall(Fab);
+withPropsDefaultsSetter(Fab, fabProps);
+const _FabComponent = Fab;
+var stdin_default = Fab;
+export {
+  _FabComponent,
+  stdin_default as default,
+  fabProps
+};

package/es/fab/props.mjs

@@ -0,0 +1,73 @@
+import { defineListenerProp, pickProps } from "../utils/components.mjs";
+import { iconProps } from "../icon/index.mjs";
+const props = {
+  active: Boolean,
+  show: {
+    type: Boolean,
+    default: true
+  },
+  drag: {
+    type: [Object, Boolean],
+    default: false
+  },
+  type: {
+    type: String,
+    default: "primary"
+  },
+  position: {
+    type: String,
+    default: "right-bottom"
+  },
+  direction: {
+    type: String,
+    default: "top"
+  },
+  trigger: {
+    type: String,
+    default: "click"
+  },
+  disabled: Boolean,
+  color: String,
+  inactiveIcon: {
+    type: String,
+    default: "plus"
+  },
+  activeIcon: {
+    type: String,
+    default: "window-close"
+  },
+  inactiveIconSize: pickProps(iconProps, "size"),
+  activeIconSize: pickProps(iconProps, "size"),
+  inactiveIconNamespace: pickProps(iconProps, "namespace"),
+  activeIconNamespace: pickProps(iconProps, "namespace"),
+  fixed: {
+    type: Boolean,
+    default: true
+  },
+  zIndex: {
+    type: [Number, String],
+    default: 90
+  },
+  top: [Number, String],
+  bottom: [Number, String],
+  left: [Number, String],
+  right: [Number, String],
+  elevation: {
+    type: [Boolean, Number, String],
+    default: true
+  },
+  safeArea: Boolean,
+  teleport: {
+    type: [String, Object, Boolean],
+    default: "body"
+  },
+  onClick: defineListenerProp(),
+  onOpen: defineListenerProp(),
+  onOpened: defineListenerProp(),
+  onClose: defineListenerProp(),
+  onClosed: defineListenerProp(),
+  "onUpdate:active": defineListenerProp()
+};
+export {
+  props
+};

package/es/fab/style/index.mjs

@@ -0,0 +1,8 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../../ripple/ripple.css'
+import '../../icon/icon.css'
+import '../../loading/loading.css'
+import '../../button/button.css'
+import '../../drag/drag.css'
+import '../fab.css'

package/es/field-decorator/FieldDecorator.mjs

@@ -0,0 +1,252 @@
+import VarIcon from "../icon/index.mjs";
+import { defineComponent, ref, onUpdated, computed } from "vue";
+import { props } from "./props.mjs";
+import { isEmpty, getStyle, call } from "@varlet/shared";
+import { createNamespace } from "../utils/components.mjs";
+import { onWindowResize, onSmartMounted } from "@varlet/use";
+const { name, n, classes } = createNamespace("field-decorator");
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createBlock as _createBlock, Teleport as _Teleport, Fragment as _Fragment, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
+const _hoisted_1 = ["for"];
+function __render__(_ctx, _cache) {
+  const _component_var_icon = _resolveComponent("var-icon");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), _ctx.n(`--${_ctx.variant}`), [_ctx.size === "small", _ctx.n("--small")], [_ctx.disabled, _ctx.n("--disabled")])),
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(
+            _ctx.classes(
+              _ctx.n("controller"),
+              [_ctx.isFocus, _ctx.n("--focus")],
+              [_ctx.errorMessage, _ctx.n("--error")],
+              [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
+            )
+          ),
+          style: _normalizeStyle({
+            color: _ctx.color,
+            cursor: _ctx.cursor,
+            overflow: _ctx.isFloating ? "visible" : "hidden"
+          })
+        },
+        [
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.classes(_ctx.n("icon"), [!_ctx.hint, _ctx.n("--icon-non-hint")]))
+            },
+            [
+              _renderSlot(_ctx.$slots, "prepend-icon")
+            ],
+            2
+            /* CLASS */
+          ),
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.classes(_ctx.n("middle"), [!_ctx.hint, _ctx.n("--middle-non-hint")]))
+            },
+            [
+              _renderSlot(_ctx.$slots, "default")
+            ],
+            2
+            /* CLASS */
+          ),
+          _ctx.placeholder && _ctx.hint ? (_openBlock(), _createElementBlock("label", {
+            key: 0,
+            class: _normalizeClass(
+              _ctx.classes(
+                _ctx.n("placeholder"),
+                _ctx.n("$--ellipsis"),
+                [_ctx.isFocus, _ctx.n("--focus")],
+                [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")],
+                [_ctx.errorMessage, _ctx.n("--error")],
+                _ctx.computePlaceholderState()
+              )
+            ),
+            style: _normalizeStyle({
+              color: _ctx.color
+            }),
+            for: _ctx.id
+          }, [
+            _createElementVNode(
+              "span",
+              null,
+              _toDisplayString(_ctx.placeholder),
+              1
+              /* TEXT */
+            )
+          ], 14, _hoisted_1)) : _createCommentVNode("v-if", true),
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.classes(_ctx.n("icon"), [!_ctx.hint, _ctx.n("--icon-non-hint")]))
+            },
+            [
+              _ctx.clearable && !_ctx.isEmpty(_ctx.value) ? (_openBlock(), _createBlock(_component_var_icon, {
+                key: 0,
+                class: _normalizeClass(_ctx.n("clear-icon")),
+                "var-field-decorator-cover": "",
+                name: "close-circle",
+                onClick: _ctx.handleClear
+              }, null, 8, ["class", "onClick"])) : _createCommentVNode("v-if", true),
+              _renderSlot(_ctx.$slots, "append-icon")
+            ],
+            2
+            /* CLASS */
+          )
+        ],
+        6
+        /* CLASS, STYLE */
+      ),
+      _ctx.line ? (_openBlock(), _createElementBlock(
+        _Fragment,
+        { key: 0 },
+        [
+          _ctx.variant === "outlined" ? (_openBlock(), _createElementBlock(
+            "fieldset",
+            {
+              key: 0,
+              class: _normalizeClass(
+                _ctx.classes(
+                  _ctx.n("line"),
+                  [_ctx.isFocus, _ctx.n("--line-focus")],
+                  [_ctx.errorMessage, _ctx.n("--line-error")],
+                  [_ctx.formDisabled || _ctx.disabled, _ctx.n("--line-disabled")]
+                )
+              ),
+              style: _normalizeStyle({ borderColor: _ctx.color })
+            },
+            [
+              _createElementVNode(
+                "legend",
+                {
+                  class: _normalizeClass(_ctx.classes(_ctx.n("line-legend"), [_ctx.isFloating, _ctx.n("line-legend--hint")])),
+                  style: _normalizeStyle({ width: _ctx.legendWidth })
+                },
+                [
+                  _ctx.placeholder && _ctx.hint ? (_openBlock(), _createBlock(_Teleport, {
+                    key: 0,
+                    to: "body"
+                  }, [
+                    _createElementVNode(
+                      "span",
+                      {
+                        ref: "placeholderTextEl",
+                        class: _normalizeClass(
+                          _ctx.classes(_ctx.n("placeholder-text"), _ctx.n("$--ellipsis"), [_ctx.size === "small", _ctx.n("placeholder-text--small")])
+                        )
+                      },
+                      _toDisplayString(_ctx.placeholder),
+                      3
+                      /* TEXT, CLASS */
+                    )
+                  ])) : _createCommentVNode("v-if", true)
+                ],
+                6
+                /* CLASS, STYLE */
+              )
+            ],
+            6
+            /* CLASS, STYLE */
+          )) : (_openBlock(), _createElementBlock(
+            "div",
+            {
+              key: 1,
+              class: _normalizeClass(_ctx.classes(_ctx.n("line"), [_ctx.formDisabled || _ctx.disabled, _ctx.n("--line-disabled")], [_ctx.errorMessage, _ctx.n("--line-error")])),
+              style: _normalizeStyle({ background: !_ctx.errorMessage ? _ctx.blurColor : void 0 })
+            },
+            [
+              _createElementVNode(
+                "div",
+                {
+                  class: _normalizeClass(
+                    _ctx.classes(
+                      _ctx.n("dot"),
+                      [_ctx.isFocus, _ctx.n("--line-focus")],
+                      [_ctx.formDisabled || _ctx.disabled, _ctx.n("--line-disabled")],
+                      [_ctx.errorMessage, _ctx.n("--line-error")]
+                    )
+                  ),
+                  style: _normalizeStyle({ background: !_ctx.errorMessage ? _ctx.focusColor : void 0 })
+                },
+                null,
+                6
+                /* CLASS, STYLE */
+              )
+            ],
+            6
+            /* CLASS, STYLE */
+          ))
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      )) : _createCommentVNode("v-if", true)
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  components: { VarIcon },
+  props,
+  setup(props2, { slots }) {
+    const placeholderTextEl = ref(null);
+    const legendWidth = ref("");
+    const isFloating = computed(() => props2.hint && (!isEmpty(props2.value) || props2.isFocus || slots["prepend-icon"]));
+    const color = computed(
+      () => !props2.errorMessage ? props2.isFocus ? props2.focusColor : props2.blurColor : void 0
+    );
+    onWindowResize(resize);
+    onSmartMounted(resize);
+    onUpdated(resize);
+    function computePlaceholderState() {
+      const { hint, value, composing } = props2;
+      if (!hint && (!isEmpty(value) || composing)) {
+        return n("--placeholder-hidden");
+      }
+      if (isFloating.value) {
+        return n("--placeholder-hint");
+      }
+    }
+    function resize() {
+      const { size, hint, variant, placeholder } = props2;
+      if (!placeholder || !hint || variant !== "outlined") {
+        legendWidth.value = "";
+        return;
+      }
+      const placeholderTextStyle = getStyle(placeholderTextEl.value);
+      const placeholderSpace = `var(--field-decorator-outlined-${size}-placeholder-space)`;
+      legendWidth.value = `calc(${placeholderTextStyle.width} * 0.75 + ${placeholderSpace} * 2)`;
+    }
+    function handleClear(e) {
+      call(props2.onClear, e);
+    }
+    function handleClick(e) {
+      call(props2.onClick, e);
+    }
+    return {
+      placeholderTextEl,
+      color,
+      legendWidth,
+      isFloating,
+      computePlaceholderState,
+      n,
+      classes,
+      isEmpty,
+      handleClear,
+      handleClick
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/field-decorator/fieldDecorator.css

@@ -0,0 +1 @@
+:root { --field-decorator-text-color: #555; --field-decorator-error-color: var(--color-danger); --field-decorator-blur-color: #888; --field-decorator-focus-color: var(--color-primary); --field-decorator-placeholder-size: 16px; --field-decorator-icon-size: 20px; --field-decorator-line-size: 1px; --field-decorator-line-focus-size: 2px; --field-decorator-line-border-radius: 4px; --field-decorator-disabled-color: var(--color-text-disabled); --field-decorator-standard-normal-padding-top: 22px; --field-decorator-standard-normal-padding-bottom: 4px; --field-decorator-standard-normal-icon-padding: 22px 0 4px; --field-decorator-standard-normal-non-hint-padding-top: 4px; --field-decorator-standard-normal-placeholder-translate-y: var(--field-decorator-standard-normal-padding-top); --field-decorator-standard-small-padding-top: 18px; --field-decorator-standard-small-padding-bottom: 4px; --field-decorator-standard-small-icon-padding: 18px 0 4px; --field-decorator-standard-small-non-hint-padding-top: 2px; --field-decorator-standard-small-placeholder-translate-y: var(--field-decorator-standard-small-padding-top); --field-decorator-outlined-normal-padding-top: 16px; --field-decorator-outlined-normal-padding-bottom: 16px; --field-decorator-outlined-normal-padding-left: 16px; --field-decorator-outlined-normal-padding-right: 16px; --field-decorator-outlined-normal-placeholder-space: 4px; --field-decorator-outlined-normal-icon-padding: 16px 0 16px; --field-decorator-outlined-normal-placeholder-translate-y: var(--field-decorator-outlined-normal-padding-top); --field-decorator-outlined-small-padding-top: 8px; --field-decorator-outlined-small-padding-bottom: 8px; --field-decorator-outlined-small-padding-left: 12px; --field-decorator-outlined-small-padding-right: 12px; --field-decorator-outlined-small-placeholder-space: 2px; --field-decorator-outlined-small-icon-padding: 8px 0 8px; --field-decorator-outlined-small-placeholder-translate-y: var(--field-decorator-outlined-small-padding-top);}.var-field-decorator { position: relative; width: 100%; color: var(--field-decorator-text-color);}.var-field-decorator__controller { width: 100%; display: flex; align-items: stretch; position: relative;}.var-field-decorator__middle { position: relative; flex-grow: 1; display: flex; justify-content: center; align-items: center;}.var-field-decorator__icon { display: flex; align-items: center; font-size: var(--field-decorator-icon-size);}.var-field-decorator__icon .var-icon { font-size: var(--field-decorator-icon-size);}.var-field-decorator__placeholder { position: absolute; top: 0; left: 0; font-size: var(--field-decorator-placeholder-size); line-height: 1.5em; color: var(--field-decorator-placeholder-color, var(--field-decorator-blur-color)); pointer-events: none; cursor: inherit; transform-origin: left; transition: transform 0.28s var(--cubic-bezier), color 0.25s, max-width 0.2s;}.var-field-decorator__clear-icon[var-field-decorator-cover] { font-size: var(--field-decorator-icon-size); margin-left: 6px; cursor: pointer;}.var-field-decorator--placeholder-hidden { visibility: hidden;}.var-field-decorator--focus { color: var(--field-decorator-focus-color);}.var-field-decorator--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-field-decorator--error { color: var(--field-decorator-error-color);}.var-field-decorator--standard .var-field-decorator__middle { padding: var(--field-decorator-standard-normal-padding-top) 0 var(--field-decorator-standard-normal-padding-bottom);}.var-field-decorator--standard .var-field-decorator__icon { padding: var(--field-decorator-standard-normal-icon-padding);}.var-field-decorator--standard .var-field-decorator__placeholder { max-width: 100%; transform: translate(0, var(--field-decorator-standard-normal-placeholder-translate-y));}.var-field-decorator--standard .var-field-decorator--placeholder-hint { max-width: 133%; transform: translate(0, 0) scale(0.75) !important;}.var-field-decorator--standard .var-field-decorator__line { width: 100%; height: var(--field-decorator-line-size); background: var(--field-decorator-blur-color); transition: background-color 0.25s;}.var-field-decorator--standard .var-field-decorator--line-disabled { background: var(--field-decorator-disabled-color);}.var-field-decorator--standard .var-field-decorator__dot { width: 100%; height: var(--field-decorator-line-focus-size); background: var(--field-decorator-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier), background-color 0.25s;}.var-field-decorator--standard .var-field-decorator--middle-non-hint { padding-top: var(--field-decorator-standard-normal-non-hint-padding-top);}.var-field-decorator--standard .var-field-decorator--icon-non-hint { padding-top: var(--field-decorator-standard-normal-non-hint-padding-top);}.var-field-decorator--standard .var-field-decorator--line-focus { transform: scaleX(1);}.var-field-decorator--standard .var-field-decorator--line-error { background: var(--field-decorator-error-color);}.var-field-decorator--outlined .var-field-decorator__controller { padding: 0 var(--field-decorator-outlined-normal-padding-right) 0 var(--field-decorator-outlined-normal-padding-left);}.var-field-decorator--outlined .var-field-decorator__middle { padding: var(--field-decorator-outlined-normal-padding-top) 0 var(--field-decorator-outlined-normal-padding-bottom) 0;}.var-field-decorator--outlined .var-field-decorator__icon { padding: var(--field-decorator-outlined-normal-icon-padding);}.var-field-decorator--outlined .var-field-decorator__placeholder { max-width: calc(100% - var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-padding-right)); transform: translate(var(--field-decorator-outlined-normal-padding-left), var(--field-decorator-outlined-normal-placeholder-translate-y)) scale(1);}.var-field-decorator--outlined .var-field-decorator--placeholder-hint { max-width: calc(133% - var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-padding-right)); transform: translate(calc(var(--field-decorator-outlined-normal-padding-left)), -50%) scale(0.75);}.var-field-decorator--outlined .var-field-decorator__line { min-width: 0; width: 100%; height: calc(100% + (var(--field-decorator-placeholder-size) * 0.75 / 2)); position: absolute; top: calc(var(--field-decorator-placeholder-size) * 0.75 / 2 * -1); left: 0; pointer-events: none; border-radius: var(--field-decorator-line-border-radius); border: var(--field-decorator-line-size) solid var(--field-decorator-blur-color); overflow: hidden; padding: 0 calc(var(--field-decorator-outlined-normal-padding-right) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-size)) 0 calc(var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-size)); margin: 0;}.var-field-decorator--outlined .var-field-decorator__line-legend { max-width: 0; height: calc(var(--field-decorator-placeholder-size) * 0.75); visibility: hidden; padding: 0; overflow: hidden; display: block; white-space: nowrap;}.var-field-decorator--outlined .var-field-decorator__line-legend--hint { max-width: 100%;}.var-field-decorator--outlined .var-field-decorator--line-focus { border-width: var(--field-decorator-line-focus-size); border-color: var(--field-decorator-focus-color); padding: 0 calc(var(--field-decorator-outlined-normal-padding-right) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-focus-size)) 0 calc(var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-focus-size));}.var-field-decorator--outlined .var-field-decorator--line-disabled { border-radius: var(--field-decorator-line-border-radius); border: var(--field-decorator-line-size) solid var(--field-decorator-disabled-color);}.var-field-decorator--outlined .var-field-decorator--line-error { border-color: var(--field-decorator-error-color) !important;}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator__middle { padding: var(--field-decorator-standard-small-padding-top) 0 var(--field-decorator-standard-small-padding-bottom);}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator__placeholder { transform: translate(0, var(--field-decorator-standard-small-placeholder-translate-y));}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator--middle-non-hint { max-width: calc(133% - var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-padding-right)); padding-top: var(--field-decorator-standard-small-non-hint-padding-top);}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator--icon-non-hint { padding-top: var(--field-decorator-standard-small-non-hint-padding-top);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__controller { padding: 0 var(--field-decorator-outlined-small-padding-right) 0 var(--field-decorator-outlined-small-padding-left);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__middle { padding: var(--field-decorator-outlined-small-padding-top) 0 var(--field-decorator-outlined-small-padding-bottom) 0;}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__icon { padding: var(--field-decorator-outlined-small-icon-padding);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__placeholder { max-width: calc(100% - var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-padding-right)); transform: translate(var(--field-decorator-outlined-small-padding-left), var(--field-decorator-outlined-small-placeholder-translate-y)) scale(1);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator--placeholder-hint { transform: translate(calc(var(--field-decorator-outlined-small-padding-left)), -50%) scale(0.75);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__line { padding: 0 calc(var(--field-decorator-outlined-small-padding-right) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-size)) 0 calc(var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-size));}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator--line-focus { padding: 0 calc(var(--field-decorator-outlined-small-padding-right) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-focus-size)) 0 calc(var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-focus-size));}.var-field-decorator__placeholder-text { max-width: calc(133% - var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-padding-right)); position: absolute; z-index: -1; display: inline-block; pointer-events: none; opacity: 0; height: 0; font-size: var(--field-decorator-placeholder-size);}.var-field-decorator__placeholder-text--small { max-width: calc(133% - var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-padding-right));}

package/es/field-decorator/index.mjs

@@ -0,0 +1,12 @@
+import FieldDecorator from "./FieldDecorator.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as fieldDecoratorProps } from "./props.mjs";
+withInstall(FieldDecorator);
+withPropsDefaultsSetter(FieldDecorator, fieldDecoratorProps);
+const _FieldDecoratorComponent = FieldDecorator;
+var stdin_default = FieldDecorator;
+export {
+  _FieldDecoratorComponent,
+  stdin_default as default,
+  fieldDecoratorProps
+};

package/es/field-decorator/props.mjs

@@ -0,0 +1,43 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  value: {
+    type: null,
+    required: true
+  },
+  id: {
+    type: String,
+    default: ""
+  },
+  isFocus: Boolean,
+  size: {
+    type: String,
+    default: "normal"
+  },
+  variant: {
+    type: String,
+    default: "standard"
+  },
+  placeholder: String,
+  line: {
+    type: Boolean,
+    default: true
+  },
+  hint: {
+    type: Boolean,
+    default: true
+  },
+  textColor: String,
+  focusColor: String,
+  blurColor: String,
+  errorMessage: String,
+  formDisabled: Boolean,
+  disabled: Boolean,
+  clearable: Boolean,
+  cursor: String,
+  composing: Boolean,
+  onClick: defineListenerProp(),
+  onClear: defineListenerProp()
+};
+export {
+  props
+};

package/es/field-decorator/style/index.mjs

@@ -0,0 +1,4 @@
+import '../../styles/common.css'
+import '../../icon/icon.css'
+import '../fieldDecorator.css'
+import '../FieldDecoratorSfc.css'