@varlet/ui 2.20.1 → 2.20.2

package/es/link/Link.mjs

@@ -0,0 +1,81 @@
+import { computed, defineComponent } from "vue";
+import { props } from "./props.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+import { call } from "@varlet/shared";
+const { name, n, classes } = createNamespace("link");
+import { renderSlot as _renderSlot, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), _mergeProps(_ctx.linkProps, {
+    class: _ctx.classes(
+      _ctx.n(),
+      _ctx.n("$--box"),
+      _ctx.n("$--inline-flex"),
+      _ctx.n(`--${_ctx.type}`),
+      [_ctx.underline !== "none", _ctx.n(`--underline-${_ctx.underline}`)],
+      [_ctx.disabled, _ctx.n("--disabled")]
+    ),
+    style: {
+      color: _ctx.textColor,
+      fontSize: _ctx.toSizeUnit(_ctx.textSize)
+    },
+    onClick: _ctx.handleClick
+  }), {
+    default: _withCtx(() => [
+      _renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 16, ["class", "style", "onClick"]);
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2) {
+    const tag = computed(() => {
+      const { disabled, href, to } = props2;
+      if (disabled) {
+        return "span";
+      }
+      if (href) {
+        return "a";
+      }
+      if (to) {
+        return "router-link";
+      }
+      return "a";
+    });
+    const linkProps = computed(() => {
+      const { disabled, href, target, to, replace, rel } = props2;
+      if (disabled) {
+        return {};
+      }
+      if (href) {
+        return { href, target, rel };
+      }
+      if (to) {
+        return { to, target, replace };
+      }
+      return {};
+    });
+    function handleClick(e) {
+      if (props2.disabled) {
+        return;
+      }
+      call(props2.onClick, e);
+    }
+    return {
+      tag,
+      linkProps,
+      n,
+      classes,
+      handleClick,
+      toSizeUnit
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/link/index.mjs

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

package/es/link/link.css

@@ -0,0 +1 @@
+:root { --link-default-color: #555; --link-primary-color: var(--color-primary); --link-danger-color: var(--color-danger); --link-success-color: var(--color-success); --link-warning-color: var(--color-warning); --link-info-color: var(--color-info); --link-disabled-color: var(--color-text-disabled); --link-font-size: var(--font-size-md);}.var-link { position: relative; justify-content: center; align-items: center; outline: none; cursor: pointer; font-family: inherit; white-space: nowrap; text-decoration: none; font-size: var(--link-font-size);}.var-link--underline-always { text-decoration: underline;}.var-link--underline-hover:hover { text-decoration: underline;}.var-link--default { color: var(--link-default-color);}.var-link--primary { color: var(--link-primary-color);}.var-link--info { color: var(--link-info-color);}.var-link--success { color: var(--link-success-color);}.var-link--warning { color: var(--link-warning-color);}.var-link--danger { color: var(--link-danger-color);}.var-link--disabled { color: var(--link-disabled-color); cursor: not-allowed;}

package/es/link/props.mjs

@@ -0,0 +1,23 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  type: {
+    type: String,
+    default: "default"
+  },
+  href: String,
+  target: String,
+  rel: String,
+  to: [String, Object],
+  replace: Boolean,
+  underline: {
+    type: String,
+    default: "always"
+  },
+  disabled: Boolean,
+  textSize: [String, Number],
+  textColor: String,
+  onClick: defineListenerProp()
+};
+export {
+  props
+};

package/es/link/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../link.css'
+import '../LinkSfc.css'

package/es/list/List.mjs

@@ -0,0 +1,185 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import VarLoading from "../loading/index.mjs";
+import Ripple from "../ripple/index.mjs";
+import { defineComponent, ref, nextTick, watch } from "vue";
+import { getParentScroller, toPxNum } from "../utils/elements.mjs";
+import { props } from "./props.mjs";
+import { isNumber, getRect, call } from "@varlet/shared";
+import { createNamespace } from "../utils/components.mjs";
+import { pack } from "../locale/index.mjs";
+import { onSmartMounted, onSmartUnmounted } from "@varlet/use";
+import { useTabItem } from "./provide.mjs";
+const { name, n, classes } = createNamespace("list");
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_var_loading = _resolveComponent("var-loading");
+  const _directive_ripple = _resolveDirective("ripple");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"))),
+      ref: "listEl"
+    },
+    [
+      _renderSlot(_ctx.$slots, "default"),
+      _ctx.loading ? _renderSlot(_ctx.$slots, "loading", { key: 0 }, () => {
+        var _a;
+        return [
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("loading"))
+            },
+            [
+              _createElementVNode(
+                "div",
+                {
+                  class: _normalizeClass(_ctx.n("loading-text"))
+                },
+                _toDisplayString((_a = _ctx.loadingText) != null ? _a : _ctx.pack.listLoadingText),
+                3
+                /* TEXT, CLASS */
+              ),
+              _createVNode(_component_var_loading, {
+                size: "mini",
+                radius: 10
+              })
+            ],
+            2
+            /* CLASS */
+          )
+        ];
+      }) : _createCommentVNode("v-if", true),
+      _ctx.finished ? _renderSlot(_ctx.$slots, "finished", { key: 1 }, () => {
+        var _a;
+        return [
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("finished"))
+            },
+            _toDisplayString((_a = _ctx.finishedText) != null ? _a : _ctx.pack.listFinishedText),
+            3
+            /* TEXT, CLASS */
+          )
+        ];
+      }) : _createCommentVNode("v-if", true),
+      _ctx.error ? _renderSlot(_ctx.$slots, "error", { key: 2 }, () => {
+        var _a;
+        return [
+          _withDirectives((_openBlock(), _createElementBlock(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("error")),
+              onClick: _cache[0] || (_cache[0] = (...args) => _ctx.load && _ctx.load(...args))
+            },
+            [
+              _createTextVNode(
+                _toDisplayString((_a = _ctx.errorText) != null ? _a : _ctx.pack.listErrorText),
+                1
+                /* TEXT */
+              )
+            ],
+            2
+            /* CLASS */
+          )), [
+            [_directive_ripple]
+          ])
+        ];
+      }) : _createCommentVNode("v-if", true),
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.n("detector")),
+          ref: "detectorEl"
+        },
+        null,
+        2
+        /* CLASS */
+      )
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  directives: { Ripple },
+  components: { VarLoading },
+  props,
+  setup(props2) {
+    const listEl = ref(null);
+    const detectorEl = ref(null);
+    const { tabItem, bindTabItem } = useTabItem();
+    let scroller;
+    call(bindTabItem, {});
+    if (tabItem) {
+      watch(() => tabItem.current.value, check);
+    }
+    watch(() => [props2.loading, props2.error, props2.finished], check);
+    onSmartMounted(() => {
+      scroller = getParentScroller(listEl.value);
+      scroller.addEventListener("scroll", check);
+      if (props2.immediateCheck) {
+        check();
+      }
+    });
+    onSmartUnmounted(removeScrollerListener);
+    function load() {
+      call(props2["onUpdate:error"], false);
+      call(props2["onUpdate:loading"], true);
+      call(props2.onLoad);
+    }
+    function isReachBottom() {
+      const { bottom: containerBottom } = getRect(scroller);
+      const { bottom: detectorBottom } = getRect(detectorEl.value);
+      return Math.floor(detectorBottom) - toPxNum(props2.offset) <= containerBottom;
+    }
+    function removeScrollerListener() {
+      scroller.removeEventListener("scroll", check);
+    }
+    function check() {
+      return __async(this, null, function* () {
+        yield nextTick();
+        if (props2.loading || props2.finished || props2.error || (tabItem == null ? void 0 : tabItem.current.value) === false || !isReachBottom()) {
+          return;
+        }
+        load();
+      });
+    }
+    return {
+      pack,
+      listEl,
+      detectorEl,
+      isNumber,
+      load,
+      check,
+      n,
+      classes
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/list/index.mjs

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

package/es/list/list.css

@@ -0,0 +1 @@
+:root { --list-loading-height: 50px; --list-finished-height: 50px; --list-error-height: 50px; --list-loading-color: #888; --list-finished-color: #888; --list-error-color: #888; --list-loading-font-size: var(--font-size-md); --list-finished-font-size: var(--font-size-md); --list-error-font-size: var(--font-size-md);}.var-list__detector { width: 100%;}.var-list__loading { display: flex; justify-content: center; align-items: center; width: 100%; height: var(--list-loading-height); font-size: var(--list-loading-font-size); color: var(--list-loading-color);}.var-list__loading-text { margin-right: 10px;}.var-list__finished { display: flex; justify-content: center; align-items: center; width: 100%; height: var(--list-finished-height); font-size: var(--list-finished-font-size); color: var(--list-finished-color);}.var-list__error { display: flex; justify-content: center; align-items: center; width: 100%; height: var(--list-error-height); font-size: var(--list-error-font-size); color: var(--list-error-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

package/es/list/props.mjs

@@ -0,0 +1,23 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  loading: Boolean,
+  immediateCheck: {
+    type: Boolean,
+    default: true
+  },
+  finished: Boolean,
+  error: Boolean,
+  offset: {
+    type: [String, Number],
+    default: 0
+  },
+  loadingText: String,
+  finishedText: String,
+  errorText: String,
+  onLoad: defineListenerProp(),
+  "onUpdate:loading": defineListenerProp(),
+  "onUpdate:error": defineListenerProp()
+};
+export {
+  props
+};

package/es/list/provide.mjs

@@ -0,0 +1,13 @@
+import { TAB_ITEM_BIND_LIST_KEY } from "../tab-item/provide.mjs";
+import { useParent } from "@varlet/use";
+function useTabItem() {
+  const { parentProvider, bindParent, index } = useParent(TAB_ITEM_BIND_LIST_KEY);
+  return {
+    index,
+    tabItem: parentProvider,
+    bindTabItem: bindParent
+  };
+}
+export {
+  useTabItem
+};

package/es/list/style/index.mjs

@@ -0,0 +1,5 @@
+import '../../styles/common.css'
+import '../../ripple/ripple.css'
+import '../../loading/loading.css'
+import '../list.css'
+import '../ListSfc.css'

package/es/loading/Loading.mjs

@@ -0,0 +1,190 @@
+import { computed, defineComponent } from "vue";
+import { props } from "./props.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { multiplySizeUnit } from "../utils/elements.mjs";
+import { call } from "@varlet/shared";
+const { name, n, classes } = createNamespace("loading");
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, renderList as _renderList, Fragment as _Fragment, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
+const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ _createElementVNode(
+  "svg",
+  { viewBox: "25 25 50 50" },
+  [
+    /* @__PURE__ */ _createElementVNode("circle", {
+      cx: "50",
+      cy: "50",
+      r: "20",
+      fill: "none"
+    })
+  ],
+  -1
+  /* HOISTED */
+));
+const _hoisted_2 = [
+  _hoisted_1
+];
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n())
+    },
+    [
+      _ctx.$slots.default ? (_openBlock(), _createElementBlock(
+        "div",
+        {
+          key: 0,
+          class: _normalizeClass(_ctx.classes(_ctx.n("content"), [_ctx.loading, _ctx.n("content--active")]))
+        },
+        [
+          _renderSlot(_ctx.$slots, "default"),
+          _ctx.loading ? (_openBlock(), _createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: _normalizeClass(_ctx.n("content-mask"))
+            },
+            null,
+            2
+            /* CLASS */
+          )) : _createCommentVNode("v-if", true)
+        ],
+        2
+        /* CLASS */
+      )) : _createCommentVNode("v-if", true),
+      _ctx.isShow ? (_openBlock(), _createElementBlock(
+        "div",
+        {
+          key: 1,
+          class: _normalizeClass(_ctx.classes(_ctx.n("$--box"), _ctx.n("body"), [_ctx.$slots.default, _ctx.n("inside")]))
+        },
+        [
+          _ctx.type === "circle" ? (_openBlock(), _createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: _normalizeClass(_ctx.n("circle"))
+            },
+            [
+              _createElementVNode(
+                "span",
+                {
+                  class: _normalizeClass(_ctx.classes(_ctx.n("circle-block"), _ctx.n(`circle-block--${_ctx.size}`))),
+                  style: _normalizeStyle({
+                    width: _ctx.multiplySizeUnit(_ctx.radius, 2),
+                    height: _ctx.multiplySizeUnit(_ctx.radius, 2),
+                    color: _ctx.color
+                  })
+                },
+                _hoisted_2,
+                6
+                /* CLASS, STYLE */
+              )
+            ],
+            2
+            /* CLASS */
+          )) : _createCommentVNode("v-if", true),
+          (_openBlock(true), _createElementBlock(
+            _Fragment,
+            null,
+            _renderList(_ctx.loadingTypeDict, (nums, key) => {
+              return _openBlock(), _createElementBlock(
+                _Fragment,
+                { key },
+                [
+                  _ctx.type === key ? (_openBlock(), _createElementBlock(
+                    "div",
+                    {
+                      key: 0,
+                      class: _normalizeClass(_ctx.classes(_ctx.n(key), _ctx.n(`${key}--${_ctx.size}`)))
+                    },
+                    [
+                      (_openBlock(true), _createElementBlock(
+                        _Fragment,
+                        null,
+                        _renderList(nums, (num) => {
+                          return _openBlock(), _createElementBlock(
+                            "div",
+                            {
+                              key: num + key,
+                              style: _normalizeStyle({ backgroundColor: _ctx.color }),
+                              class: _normalizeClass(_ctx.classes(_ctx.n(`${key}-item`), _ctx.n(`${key}-item--${_ctx.size}`)))
+                            },
+                            null,
+                            6
+                            /* CLASS, STYLE */
+                          );
+                        }),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ],
+                    2
+                    /* CLASS */
+                  )) : _createCommentVNode("v-if", true)
+                ],
+                64
+                /* STABLE_FRAGMENT */
+              );
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          )),
+          _ctx.$slots.description || _ctx.description ? (_openBlock(), _createElementBlock(
+            "div",
+            {
+              key: 1,
+              class: _normalizeClass(_ctx.classes(_ctx.n("description"), _ctx.n(`description--${_ctx.size}`))),
+              style: _normalizeStyle({ color: _ctx.color })
+            },
+            [
+              _renderSlot(_ctx.$slots, "description", {}, () => [
+                _createTextVNode(
+                  _toDisplayString(_ctx.description),
+                  1
+                  /* TEXT */
+                )
+              ])
+            ],
+            6
+            /* CLASS, STYLE */
+          )) : _createCommentVNode("v-if", true)
+        ],
+        2
+        /* CLASS */
+      )) : _createCommentVNode("v-if", true)
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2, { slots }) {
+    const isShow = computed(() => {
+      if (!call(slots.default)) {
+        return true;
+      }
+      return props2.loading;
+    });
+    const loadingTypeDict = {
+      wave: 5,
+      cube: 4,
+      rect: 8,
+      disappear: 3
+    };
+    return {
+      loadingTypeDict,
+      isShow,
+      n,
+      classes,
+      multiplySizeUnit
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/loading/index.mjs

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

package/es/loading/loading.css

@@ -0,0 +1 @@
+:root { --loading-color: var(--color-primary); --loading-opacity: 0.38; --loading-desc-margin: 8px 0 0; --loading-desc-color: var(--color-primary);}.var-loading { --loading-normal-width: 50px; --loading-normal-height: calc(var(--font-size-md) + 2px); --loading-large-width: 64px; --loading-large-height: calc(var(--font-size-lg) + 2px); --loading-small-width: 36px; --loading-small-height: calc(var(--font-size-sm) + 2px); --loading-mini-width: 22px; --loading-mini-height: calc(var(--font-size-xs) + 2px); position: relative;}.var-loading__content { position: relative; transition: opacity 0.3s; opacity: 1;}.var-loading__content--active { opacity: var(--loading-opacity);}.var-loading__content-mask { position: absolute; left: 0; right: 0; top: 0; bottom: 0;}.var-loading__body { display: flex; justify-content: center; align-items: center; height: 100%; flex-direction: column;}.var-loading__inside { position: absolute; left: 50%; top: 0; transform: translateX(-50%); max-height: 50vh; z-index: 1;}.var-loading__description { color: var(--loading-desc-color); margin: var(--loading-desc-margin);}.var-loading__description--large { font-size: var(--font-size-lg);}.var-loading__description--normal { font-size: var(--font-size-md);}.var-loading__description--small { font-size: var(--font-size-sm);}.var-loading__description--mini { font-size: var(--font-size-xs);}.var-loading__circle { display: flex;}.var-loading__circle-block { display: inline-block; color: var(--loading-color); animation: circle 1.8s linear infinite;}.var-loading__circle-block--large { width: 36px; height: 36px;}.var-loading__circle-block--normal { width: 30px; height: 30px;}.var-loading__circle-block--small { width: 24px; height: 24px;}.var-loading__circle-block--mini { width: 18px; height: 18px;}.var-loading__circle-block svg { display: block; width: 100%; height: 100%;}.var-loading__circle-block svg circle { animation: circular 1.5s ease-in-out infinite; stroke: currentColor; stroke-width: 3; stroke-linecap: round;}@keyframes circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes circular { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120; }}.var-loading__wave { --loading-wave-size-item-width: 5px; --loading-wave-size-item-margin: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}.var-loading__wave--large { width: var(--loading-large-width); height: var(--loading-large-height);}.var-loading__wave--normal { width: var(--loading-normal-width); height: var(--loading-normal-height);}.var-loading__wave--small { width: var(--loading-small-width); height: var(--loading-small-height);}.var-loading__wave--mini { width: var(--loading-mini-width); height: var(--loading-mini-height);}.var-loading__wave-item { height: 100%; display: inline-block; animation: 1.2s ease-in-out infinite wave; background-color: var(--loading-color);}.var-loading__wave-item:nth-child(1) { animation-delay: -1.2s; margin-left: 0;}.var-loading__wave-item:nth-child(2) { animation-delay: -1.1s;}.var-loading__wave-item:nth-child(3) { animation-delay: -1s;}.var-loading__wave-item:nth-child(4) { animation-delay: -0.9s;}.var-loading__wave-item:nth-child(5) { animation-delay: -0.8s;}.var-loading__wave-item--large { width: var(--loading-wave-size-item-width); margin-left: var(--loading-wave-size-item-margin);}.var-loading__wave-item--normal { width: calc(var(--loading-wave-size-item-width) - 1px); margin-left: calc(var(--loading-wave-size-item-margin) - 1px);}.var-loading__wave-item--small { width: calc(var(--loading-wave-size-item-width) - 2px); margin-left: calc(var(--loading-wave-size-item-margin) - 2px);}.var-loading__wave-item--mini { width: calc(var(--loading-wave-size-item-width) - 3px); margin-left: calc(var(--loading-wave-size-item-margin) - 3px);}@keyframes wave { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); }}.var-loading__cube { --loading-cube-size-item-width: 10px; --loading-cube-size-item-height: 10px; --loading-cube-size-item-margin: 5px; display: flex; align-items: center; flex-shrink: 0;}.var-loading__cube--large { width: var(--loading-large-width); height: var(--loading-large-height);}.var-loading__cube--normal { width: var(--loading-normal-width); height: var(--loading-normal-height);}.var-loading__cube--small { width: var(--loading-small-width); height: var(--loading-small-height);}.var-loading__cube--mini { width: var(--loading-mini-width); height: var(--loading-mini-height);}.var-loading__cube-item { display: inline-block; transform-origin: right bottom; animation: 1.5s ease infinite cube; background-color: var(--loading-color);}.var-loading__cube-item:nth-child(1) { animation-delay: 0.2s; margin-left: 0;}.var-loading__cube-item:nth-child(2) { animation-delay: 0.4s;}.var-loading__cube-item:nth-child(3) { animation-delay: 0.6s;}.var-loading__cube-item:nth-child(4) { animation-delay: 0.8s;}.var-loading__cube-item--large { height: var(--loading-cube-size-item-height); width: var(--loading-cube-size-item-width); margin-left: var(--loading-cube-size-item-margin);}.var-loading__cube-item--normal { height: calc(var(--loading-cube-size-item-height) - 2px); width: calc(var(--loading-cube-size-item-width) - 2px); margin-left: calc(var(--loading-cube-size-item-margin) - 1px);}.var-loading__cube-item--small { height: calc(var(--loading-cube-size-item-height) - 4px); width: calc(var(--loading-cube-size-item-width) - 4px); margin-left: calc(var(--loading-cube-size-item-margin) - 2px);}.var-loading__cube-item--mini { height: calc(var(--loading-cube-size-item-height) - 6px); width: calc(var(--loading-cube-size-item-width) - 6px); margin-left: calc(var(--loading-cube-size-item-margin) - 3px);}@keyframes cube { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: rotate(90deg) scale(0.3); }}.var-loading__rect { --loading-rect-size-item-width: 8px; --loading-rect-size-item-height: 100%; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; flex-shrink: 0;}.var-loading__rect--large { width: var(--loading-large-width); height: var(--loading-large-height);}.var-loading__rect--normal { width: var(--loading-normal-width); height: var(--loading-normal-height);}.var-loading__rect--small { width: var(--loading-small-width); height: var(--loading-small-height);}.var-loading__rect--mini { width: var(--loading-mini-width); height: var(--loading-mini-height);}.var-loading__rect-item { animation: 2s ease-in-out infinite rect; background-color: var(--loading-color);}.var-loading__rect-item:nth-child(1) { animation-delay: 1.75s;}.var-loading__rect-item:nth-child(2) { animation-delay: 1.5s;}.var-loading__rect-item:nth-child(3) { animation-delay: 1.25s;}.var-loading__rect-item:nth-child(4) { animation-delay: 1s;}.var-loading__rect-item:nth-child(5) { animation-delay: 0.75s;}.var-loading__rect-item:nth-child(6) { animation-delay: 0.5s;}.var-loading__rect-item:nth-child(7) { animation-delay: 0.25s;}.var-loading__rect-item:nth-child(8) { animation-delay: 0s;}.var-loading__rect-item--large { height: var(--loading-rect-size-item-height); width: var(--loading-rect-size-item-width);}.var-loading__rect-item--normal { height: calc(var(--loading-rect-size-item-height) * 0.9); width: calc(var(--loading-rect-size-item-width) * 0.8);}.var-loading__rect-item--small { height: calc(var(--loading-rect-size-item-height) * 0.8); width: calc(var(--loading-rect-size-item-width) * 0.6);}.var-loading__rect-item--mini { height: calc(var(--loading-rect-size-item-height) * 0.7); width: calc(var(--loading-rect-size-item-width) * 0.4);}@keyframes rect { 0% { opacity: 0.3; } 25% { opacity: 1; } 50% { opacity: 0.3; } 65% { opacity: 1; } 100% { opacity: 0.3; }}.var-loading__disappear { --loading-disappear-size-item-width: 15px; --loading-disappear-size-item-height: 15px; display: flex; justify-content: space-around; align-items: center; flex-flow: nowrap; flex-shrink: 0;}.var-loading__disappear--large { width: var(--loading-large-width); height: var(--loading-large-height);}.var-loading__disappear--normal { width: var(--loading-normal-width); height: var(--loading-normal-height);}.var-loading__disappear--small { width: var(--loading-small-width); height: var(--loading-small-height);}.var-loading__disappear--mini { width: var(--loading-mini-width); height: var(--loading-mini-height);}.var-loading__disappear-item { border-radius: 50%; animation: 0.5s ease-in-out infinite alternate disappear; background-color: var(--loading-color);}.var-loading__disappear-item:nth-child(1) { animation-delay: -0.4s;}.var-loading__disappear-item:nth-child(2) { animation-delay: -0.2s;}.var-loading__disappear-item:nth-child(3) { animation-delay: 0s;}.var-loading__disappear-item--large { height: var(--loading-disappear-size-item-height); width: var(--loading-disappear-size-item-width);}.var-loading__disappear-item--normal { height: calc(var(--loading-disappear-size-item-height) * 0.8); width: calc(var(--loading-disappear-size-item-width) * 0.8);}.var-loading__disappear-item--small { height: calc(var(--loading-disappear-size-item-height) * 0.6); width: calc(var(--loading-disappear-size-item-width) * 0.6);}.var-loading__disappear-item--mini { height: calc(var(--loading-disappear-size-item-height) * 0.4); width: calc(var(--loading-disappear-size-item-width) * 0.4);}@keyframes disappear { 0% { opacity: 1; } 100% { opacity: 0; }}

package/es/loading/props.mjs

@@ -0,0 +1,17 @@
+const props = {
+  type: {
+    type: String,
+    default: "circle"
+  },
+  radius: [String, Number],
+  size: {
+    type: String,
+    default: "normal"
+  },
+  color: String,
+  description: String,
+  loading: Boolean
+};
+export {
+  props
+};

package/es/loading/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../loading.css'
+import '../LoadingSfc.css'

package/es/loading-bar/LoadingBar.mjs

@@ -0,0 +1,33 @@
+import { createVNode as _createVNode } from "vue";
+import context from "../context/index.mjs";
+import { defineComponent } from "vue";
+import { createNamespace } from "../utils/components.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+import { props } from "./props.mjs";
+
+
+const {
+  name,
+  classes,
+  n
+} = createNamespace("loading-bar");
+var stdin_default = defineComponent({
+  name,
+  props,
+  setup(props2) {
+    return () => _createVNode("div", {
+      "class": classes(n(), [props2.error, n("--error")]),
+      "style": {
+        zIndex: context.zIndex + 10,
+        width: `${props2.value}%`,
+        opacity: props2.opacity,
+        height: toSizeUnit(props2.height),
+        backgroundColor: props2.error ? props2.errorColor : props2.color,
+        top: toSizeUnit(props2.top)
+      }
+    }, null);
+  }
+});
+export {
+  stdin_default as default
+};