zartui 0.1.113 → 3.0.1

package/lib/list/List.js

@@ -0,0 +1,166 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  default: () => stdin_default
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_utils = require("../utils");
+var import_use = require("@zartui/use");
+var import_use_expose = require("../composables/use-expose");
+var import_use_tab_status = require("../composables/use-tab-status");
+var import_loading = require("../loading");
+var import_divider = require("../divider");
+const [name, bem, t] = (0, import_utils.createNamespace)("list");
+const listProps = {
+  error: Boolean,
+  offset: (0, import_utils.makeNumericProp)(300),
+  loading: Boolean,
+  finished: Boolean,
+  errorText: String,
+  direction: (0, import_utils.makeStringProp)("down"),
+  loadingText: String,
+  finishedText: String,
+  immediateCheck: import_utils.truthProp
+};
+var stdin_default = (0, import_vue2.defineComponent)({
+  name,
+  props: listProps,
+  emits: ["load", "update:error", "update:loading"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const loading = (0, import_vue2.ref)(false);
+    const root = (0, import_vue2.ref)();
+    const placeholder = (0, import_vue2.ref)();
+    const tabStatus = (0, import_use_tab_status.useTabStatus)();
+    const scrollParent = (0, import_use.useScrollParent)(root);
+    const check = () => {
+      (0, import_vue2.nextTick)(() => {
+        if (loading.value || props.finished || props.error || (tabStatus == null ? void 0 : tabStatus.value) === false) {
+          return;
+        }
+        const {
+          offset,
+          direction
+        } = props;
+        const scrollParentRect = (0, import_use.useRect)(scrollParent);
+        if (!scrollParentRect.height || (0, import_utils.isHidden)(root)) {
+          return;
+        }
+        let isReachEdge = false;
+        const placeholderRect = (0, import_use.useRect)(placeholder);
+        if (direction === "up") {
+          isReachEdge = scrollParentRect.top - placeholderRect.top <= offset;
+        } else {
+          isReachEdge = placeholderRect.bottom - scrollParentRect.bottom <= offset;
+        }
+        if (isReachEdge) {
+          loading.value = true;
+          emit("update:loading", true);
+          emit("load");
+        }
+      });
+    };
+    const renderFinishedText = () => {
+      if (props.finished) {
+        const text = slots.finished ? slots.finished() : props.finishedText;
+        if (text) {
+          return (0, import_vue.createVNode)(import_divider.Divider, {
+            "style": {
+              padding: "0 16px"
+            },
+            "class": bem("finished-text")
+          }, {
+            default: () => [text]
+          });
+        }
+      }
+    };
+    const clickErrorText = () => {
+      emit("update:error", false);
+      check();
+    };
+    const renderErrorText = () => {
+      if (props.error) {
+        const text = slots.error ? slots.error() : props.errorText;
+        if (text) {
+          return (0, import_vue.createVNode)("div", {
+            "role": "button",
+            "class": bem("error-text"),
+            "tabindex": 0,
+            "style": {
+              cursor: "pointer"
+            },
+            "onClick": clickErrorText
+          }, [text]);
+        }
+      }
+    };
+    const renderLoading = () => {
+      if (loading.value && !props.finished) {
+        return (0, import_vue.createVNode)("div", {
+          "class": bem("loading")
+        }, [slots.loading ? slots.loading() : (0, import_vue.createVNode)(import_loading.Loading, {
+          "class": bem("loading-icon")
+        }, {
+          default: () => [props.loadingText || t("loading")]
+        })]);
+      }
+    };
+    (0, import_vue2.watch)(() => [props.loading, props.finished, props.error], check);
+    if (tabStatus) {
+      (0, import_vue2.watch)(tabStatus, (tabActive) => {
+        if (tabActive) {
+          check();
+        }
+      });
+    }
+    (0, import_vue2.onUpdated)(() => {
+      loading.value = props.loading;
+    });
+    (0, import_vue2.onMounted)(() => {
+      if (props.immediateCheck) {
+        check();
+      }
+    });
+    (0, import_use_expose.useExpose)({
+      check
+    });
+    (0, import_use.useEventListener)("scroll", check, {
+      target: scrollParent
+    });
+    return () => {
+      var _a;
+      const Content = (_a = slots.default) == null ? void 0 : _a.call(slots);
+      const Placeholder = (0, import_vue.createVNode)("div", {
+        "ref": placeholder,
+        "class": bem("placeholder")
+      }, null);
+      return (0, import_vue.createVNode)("div", {
+        "ref": root,
+        "role": "feed",
+        "class": bem(),
+        "aria-busy": loading.value
+      }, [props.direction === "down" ? Content : Placeholder, renderLoading(), renderFinishedText(), renderErrorText(), props.direction === "up" ? Content : Placeholder]);
+    };
+  }
+});

package/lib/list/index.css

@@ -1 +1 @@
-.zt-list__error-text,.zt-list__finished-text,.zt-list__loading{color:#969799;font-size:14px;line-height:50px;text-align:center}.zt-list__placeholder{height:0;pointer-events:none}
+body{--zt-list-text-color: var(--zt-text-color-a6);--zt-list-text-font-size: var(--zt-font-size-md);--zt-list-text-line-height: 44px;--zt-list-loading-icon-size: 16px}.zt-list__loading,.zt-list__finished-text,.zt-list__error-text{color:var(--zt-list-text-color);font-size:var(--zt-list-text-font-size);line-height:var(--zt-list-text-line-height);text-align:center;padding-top:6px}.zt-list__placeholder{height:0;pointer-events:none}.zt-list__loading-icon .zt-loading__spinner{width:var(--zt-list-loading-icon-size);height:var(--zt-list-loading-icon-size)}

package/lib/list/index.d.ts

@@ -0,0 +1,59 @@
+import { ListProps } from './List';
+export declare const List: import("../utils").WithInstall<import("vue").DefineComponent<{
+    error: BooleanConstructor;
+    offset: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    loading: BooleanConstructor;
+    finished: BooleanConstructor;
+    errorText: StringConstructor;
+    direction: {
+        type: import("vue").PropType<import("./types").ListDirection>;
+        default: import("./types").ListDirection;
+    };
+    loadingText: StringConstructor;
+    finishedText: StringConstructor;
+    immediateCheck: {
+        type: BooleanConstructor;
+        default: true;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("load" | "update:error" | "update:loading")[], "load" | "update:error" | "update:loading", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    error: BooleanConstructor;
+    offset: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    loading: BooleanConstructor;
+    finished: BooleanConstructor;
+    errorText: StringConstructor;
+    direction: {
+        type: import("vue").PropType<import("./types").ListDirection>;
+        default: import("./types").ListDirection;
+    };
+    loadingText: StringConstructor;
+    finishedText: StringConstructor;
+    immediateCheck: {
+        type: BooleanConstructor;
+        default: true;
+    };
+}>> & {
+    onLoad?: ((...args: any[]) => any) | undefined;
+    "onUpdate:error"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:loading"?: ((...args: any[]) => any) | undefined;
+}, {
+    offset: string | number;
+    loading: boolean;
+    direction: import("./types").ListDirection;
+    error: boolean;
+    finished: boolean;
+    immediateCheck: boolean;
+}>>;
+export default List;
+export type { ListProps };
+export type { ListInstance, ListDirection } from './types';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtList: typeof List;
+    }
+}

package/lib/list/index.js

@@ -1,196 +1,33 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _utils = require("../utils");
-
-var _style = require("../utils/dom/style");
-
-var _scroll = require("../utils/dom/scroll");
-
-var _bindEvent = require("../mixins/bind-event");
-
-var _loading = _interopRequireDefault(require("../loading"));
-
-var _divider = _interopRequireDefault(require("../divider"));
-
-// Utils
-// Mixins
-// Components
-var _createNamespace = (0, _utils.createNamespace)('list'),
-    createComponent = _createNamespace[0],
-    bem = _createNamespace[1],
-    t = _createNamespace[2];
-
-var _default = createComponent({
-  mixins: [(0, _bindEvent.BindEventMixin)(function (bind) {
-    if (!this.scroller) {
-      this.scroller = (0, _scroll.getScroller)(this.$el);
-    }
-
-    bind(this.scroller, 'scroll', this.check);
-  })],
-  model: {
-    prop: 'loading'
-  },
-  props: {
-    error: Boolean,
-    loading: Boolean,
-    finished: Boolean,
-    errorText: String,
-    loadingText: String,
-    finishedText: String,
-    immediateCheck: {
-      type: Boolean,
-      default: true
-    },
-    offset: {
-      type: [Number, String],
-      default: 300
-    },
-    direction: {
-      type: String,
-      default: 'down'
-    }
-  },
-  data: function data() {
-    return {
-      // use sync innerLoading state to avoid repeated loading in some edge cases
-      innerLoading: this.loading
-    };
-  },
-  updated: function updated() {
-    this.innerLoading = this.loading;
-  },
-  mounted: function mounted() {
-    if (this.immediateCheck) {
-      this.check();
-    }
-  },
-  watch: {
-    loading: 'check',
-    finished: 'check'
-  },
-  methods: {
-    // @exposed-api
-    check: function check() {
-      var _this = this;
-
-      this.$nextTick(function () {
-        if (_this.innerLoading || _this.finished || _this.error) {
-          return;
-        }
-
-        var el = _this.$el,
-            scroller = _this.scroller,
-            offset = _this.offset,
-            direction = _this.direction;
-        var scrollerRect;
-
-        if (scroller.getBoundingClientRect) {
-          scrollerRect = scroller.getBoundingClientRect();
-        } else {
-          scrollerRect = {
-            top: 0,
-            bottom: scroller.innerHeight
-          };
-        }
-
-        var scrollerHeight = scrollerRect.bottom - scrollerRect.top;
-        /* istanbul ignore next */
-
-        if (!scrollerHeight || (0, _style.isHidden)(el)) {
-          return false;
-        }
-
-        var isReachEdge = false;
-
-        var placeholderRect = _this.$refs.placeholder.getBoundingClientRect();
-
-        if (direction === 'up') {
-          isReachEdge = scrollerRect.top - placeholderRect.top <= offset;
-        } else {
-          isReachEdge = placeholderRect.bottom - scrollerRect.bottom <= offset;
-        }
-
-        if (isReachEdge) {
-          _this.innerLoading = true;
-
-          _this.$emit('input', true);
-
-          _this.$emit('load');
-        }
-      });
-    },
-    clickErrorText: function clickErrorText() {
-      this.$emit('update:error', false);
-      this.check();
-    },
-    genLoading: function genLoading() {
-      var h = this.$createElement;
-
-      if (this.innerLoading && !this.finished) {
-        return h("div", {
-          "key": "loading",
-          "class": bem('loading')
-        }, [this.slots('loading') || h(_loading.default, {
-          "attrs": {
-            "size": "16"
-          }
-        }, [this.loadingText || t('loading')])]);
-      }
-    },
-    genFinishedText: function genFinishedText() {
-      var h = this.$createElement;
-
-      if (this.finished) {
-        var text = this.slots('finished') || this.finishedText;
-
-        if (text) {
-          return h(_divider.default, {
-            "style": {
-              padding: '0 16px'
-            },
-            "class": bem('finished-text')
-          }, [text]);
-        }
-      }
-    },
-    genErrorText: function genErrorText() {
-      var h = this.$createElement;
-
-      if (this.error) {
-        var text = this.slots('error') || this.errorText;
-
-        if (text) {
-          return h("div", {
-            "on": {
-              "click": this.clickErrorText
-            },
-            "class": bem('error-text')
-          }, [text]);
-        }
-      }
-    }
-  },
-  render: function render() {
-    var h = arguments[0];
-    var Placeholder = h("div", {
-      "ref": "placeholder",
-      "key": "placeholder",
-      "class": bem('placeholder')
-    });
-    return h("div", {
-      "class": bem(),
-      "attrs": {
-        "role": "feed",
-        "aria-busy": this.innerLoading
-      }
-    }, [this.direction === 'down' ? this.slots() : Placeholder, this.genLoading(), this.genFinishedText(), this.genErrorText(), this.direction === 'up' ? this.slots() : Placeholder]);
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  List: () => List,
+  default: () => stdin_default
 });
-
-exports.default = _default;
+module.exports = __toCommonJS(stdin_exports);
+var import_utils = require("../utils");
+var import_List = __toESM(require("./List"));
+const List = (0, import_utils.withInstall)(import_List.default);
+var stdin_default = List;

package/lib/list/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/list/style/index.js

@@ -1,4 +1,4 @@
-require('../../style/base.css');
-require('../../loading/index.css');
-require('../../divider/index.css');
-require('../index.css');
+require("../../style/base.css");
+require("../../loading/index.css");
+require("../../divider/index.css");
+require("../index.css");

package/lib/list/types.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { ListProps } from './List';
+export declare type ListDirection = 'up' | 'down';
+export declare type ListExpose = {
+    check: () => void;
+};
+export declare type ListInstance = ComponentPublicInstance<ListProps, ListExpose>;

package/lib/list/types.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+module.exports = __toCommonJS(stdin_exports);

package/lib/loading/Loading.d.ts

@@ -0,0 +1,39 @@
+import type { ExtractPropTypes } from 'vue';
+export declare type LoadingType = 'circular' | 'spinner' | 'snake';
+declare const loadingProps: {
+    size: (NumberConstructor | StringConstructor)[];
+    type: {
+        type: import("vue").PropType<LoadingType>;
+        default: LoadingType;
+    };
+    color: StringConstructor;
+    vertical: BooleanConstructor;
+    textSize: (NumberConstructor | StringConstructor)[];
+    textColor: StringConstructor;
+};
+export declare type LoadingProps = ExtractPropTypes<typeof loadingProps>;
+declare const _default: import("vue").DefineComponent<{
+    size: (NumberConstructor | StringConstructor)[];
+    type: {
+        type: import("vue").PropType<LoadingType>;
+        default: LoadingType;
+    };
+    color: StringConstructor;
+    vertical: BooleanConstructor;
+    textSize: (NumberConstructor | StringConstructor)[];
+    textColor: StringConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    size: (NumberConstructor | StringConstructor)[];
+    type: {
+        type: import("vue").PropType<LoadingType>;
+        default: LoadingType;
+    };
+    color: StringConstructor;
+    vertical: BooleanConstructor;
+    textSize: (NumberConstructor | StringConstructor)[];
+    textColor: StringConstructor;
+}>>, {
+    type: LoadingType;
+    vertical: boolean;
+}>;
+export default _default;

package/lib/loading/Loading.js

@@ -0,0 +1,133 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  default: () => stdin_default
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_utils = require("../utils");
+const [name, bem] = (0, import_utils.createNamespace)("loading");
+const loadingProps = {
+  size: import_utils.numericProp,
+  type: (0, import_utils.makeStringProp)("snake"),
+  color: String,
+  vertical: Boolean,
+  textSize: import_utils.numericProp,
+  textColor: String
+};
+let svgElementId = 0;
+const LoadingIcon = (props) => {
+  if (props.type === "spinner") {
+    return Array(12).fill(null).map((_, index) => (0, import_vue.createVNode)("i", {
+      "class": bem("line", String(index + 1))
+    }, null));
+  }
+  if (props.type === "circular") {
+    return (0, import_vue.createVNode)("svg", {
+      "class": bem("circular"),
+      "viewBox": "25 25 50 50"
+    }, [(0, import_vue.createVNode)("circle", {
+      "cx": "50",
+      "cy": "50",
+      "r": "20",
+      "fill": "none"
+    }, null)]);
+  }
+  const firstHalfId = svgElementId++;
+  const secondHalfId = svgElementId++;
+  return (0, import_vue.createVNode)("svg", {
+    "class": bem("snake"),
+    "width": "200",
+    "height": "200",
+    "viewBox": "0 0 200 200",
+    "fill": "none"
+  }, [(0, import_vue.createVNode)("defs", null, [(0, import_vue.createVNode)("linearGradient", {
+    "id": secondHalfId + ""
+  }, [(0, import_vue.createVNode)("stop", {
+    "offset": "0%",
+    "stop-opacity": "0",
+    "stop-color": "currentColor"
+  }, null), (0, import_vue.createVNode)("stop", {
+    "offset": "100%",
+    "stop-opacity": "0.5",
+    "stop-color": "currentColor"
+  }, null)]), (0, import_vue.createVNode)("linearGradient", {
+    "id": firstHalfId + ""
+  }, [(0, import_vue.createVNode)("stop", {
+    "offset": "0%",
+    "stop-opacity": "1",
+    "stop-color": "currentColor"
+  }, null), (0, import_vue.createVNode)("stop", {
+    "offset": "100%",
+    "stop-opacity": "0.5",
+    "stop-color": "currentColor"
+  }, null)])]), (0, import_vue.createVNode)("g", {
+    "stroke-width": "18"
+  }, [(0, import_vue.createVNode)("path", {
+    "stroke": `url(#${secondHalfId})`,
+    "d": "M 9 100 A 91 91 0 0 1 191 100"
+  }, null), (0, import_vue.createVNode)("path", {
+    "stroke": `url(#${firstHalfId})`,
+    "d": "M 191 100 A 91 91 0 0 1 9 100"
+  }, null), (0, import_vue.createVNode)("path", {
+    "stroke": "currentColor",
+    "stroke-linecap": "round",
+    "d": "M 9 100 A 91 91 0 0 1 9 100"
+  }, null)])]);
+};
+var stdin_default = (0, import_vue2.defineComponent)({
+  name,
+  props: loadingProps,
+  setup(props, {
+    slots
+  }) {
+    const spinnerStyle = (0, import_vue2.computed)(() => (0, import_utils.extend)({
+      color: props.color
+    }, (0, import_utils.getSizeStyle)(props.size)));
+    const renderText = () => {
+      var _a;
+      if (slots.default) {
+        return (0, import_vue.createVNode)("span", {
+          "class": bem("text"),
+          "style": {
+            fontSize: (0, import_utils.addUnit)(props.textSize),
+            color: (_a = props.textColor) != null ? _a : props.color
+          }
+        }, [slots.default()]);
+      }
+    };
+    return () => {
+      const {
+        type,
+        vertical
+      } = props;
+      return (0, import_vue.createVNode)("div", {
+        "class": bem([type, {
+          vertical
+        }]),
+        "aria-live": "polite",
+        "aria-busy": true
+      }, [(0, import_vue.createVNode)("span", {
+        "class": bem("spinner", type),
+        "style": spinnerStyle.value
+      }, [LoadingIcon(props)]), renderText()]);
+    };
+  }
+});

package/lib/loading/index.css

@@ -1 +1 @@
-.zt-loading{position:relative;color:#969799;font-size:0;vertical-align:middle}.zt-loading__spinner{position:relative;display:inline-block;width:36px;max-width:100%;height:36px;max-height:100%;vertical-align:middle;-webkit-animation:zt-rotate .7s linear infinite;animation:zt-rotate .7s linear infinite}.zt-loading__spinner--spinner{-webkit-animation-timing-function:steps(12);animation-timing-function:steps(12)}.zt-loading__spinner--spinner i{position:absolute;top:0;left:0;width:100%;height:100%}.zt-loading__spinner--spinner i::before{display:block;width:2px;height:25%;margin:0 auto;background-color:currentColor;border-radius:40%;content:' '}.zt-loading__spinner--circular{-webkit-animation-duration:2s;animation-duration:2s}.zt-loading__circular{display:block;width:100%;height:100%}.zt-loading__circular circle{-webkit-animation:zt-circular 1.5s ease-in-out infinite;animation:zt-circular 1.5s ease-in-out infinite;stroke:currentColor;stroke-width:3;stroke-linecap:round}.zt-loading__snake{display:block;width:100%;height:100%}.zt-loading__text{display:inline-block;margin-left:4px;color:rgba(0,0,0,.6);font-size:14px;line-height:20px;vertical-align:middle}.zt-loading--vertical{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-loading--vertical .zt-loading__text{margin:4px 0 0}.zt-loading--horizontal-with-text .zt-loading__spinner--snake{width:20px;height:20px}@-webkit-keyframes zt-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}}@keyframes zt-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}}.zt-loading__spinner--spinner i:nth-of-type(1){-webkit-transform:rotate(30deg);transform:rotate(30deg);opacity:1}.zt-loading__spinner--spinner i:nth-of-type(2){-webkit-transform:rotate(60deg);transform:rotate(60deg);opacity:.9375}.zt-loading__spinner--spinner i:nth-of-type(3){-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:.875}.zt-loading__spinner--spinner i:nth-of-type(4){-webkit-transform:rotate(120deg);transform:rotate(120deg);opacity:.8125}.zt-loading__spinner--spinner i:nth-of-type(5){-webkit-transform:rotate(150deg);transform:rotate(150deg);opacity:.75}.zt-loading__spinner--spinner i:nth-of-type(6){-webkit-transform:rotate(180deg);transform:rotate(180deg);opacity:.6875}.zt-loading__spinner--spinner i:nth-of-type(7){-webkit-transform:rotate(210deg);transform:rotate(210deg);opacity:.625}.zt-loading__spinner--spinner i:nth-of-type(8){-webkit-transform:rotate(240deg);transform:rotate(240deg);opacity:.5625}.zt-loading__spinner--spinner i:nth-of-type(9){-webkit-transform:rotate(270deg);transform:rotate(270deg);opacity:.5}.zt-loading__spinner--spinner i:nth-of-type(10){-webkit-transform:rotate(300deg);transform:rotate(300deg);opacity:.4375}.zt-loading__spinner--spinner i:nth-of-type(11){-webkit-transform:rotate(330deg);transform:rotate(330deg);opacity:.375}.zt-loading__spinner--spinner i:nth-of-type(12){-webkit-transform:rotate(360deg);transform:rotate(360deg);opacity:.3125}
+body{--zt-loading-text-color: var(--zt-text-color-a6);--zt-loading-text-font-size: var(--zt-font-size-md);--zt-loading-spinner-color: var(--zt-text-color-a4);--zt-loading-spinner-size: 36px;--zt-loading-spinner-duration: .8s;--zt-loading-text-line-height: 20px}.zt-loading{position:relative;color:var(--zt-loading-spinner-color);font-size:0;vertical-align:middle}.zt-loading__spinner{position:relative;display:inline-block;width:var(--zt-loading-spinner-size);max-width:100%;height:var(--zt-loading-spinner-size);max-height:100%;vertical-align:middle;animation:zt-rotate var(--zt-loading-spinner-duration) linear infinite}.zt-loading__spinner--spinner{animation-timing-function:steps(12)}.zt-loading__spinner--spinner__line{position:absolute;top:0;left:0;width:100%;height:100%}.zt-loading__spinner--spinner__line:before{display:block;width:2px;height:25%;margin:0 auto;background-color:currentColor;border-radius:40%;content:" "}.zt-loading__spinner--circular{animation-duration:2s}.zt-loading__circular{display:block;width:100%;height:100%}.zt-loading__circular circle{animation:zt-circular 1.5s ease-in-out infinite;stroke:currentColor;stroke-width:3;stroke-linecap:round}.zt-loading__snake{display:block;width:100%;height:100%}.zt-loading__text{display:inline-block;margin-left:var(--zt-padding-base);color:var(--zt-loading-text-color);font-size:var(--zt-loading-text-font-size);line-height:var(--zt-loading-text-line-height);vertical-align:middle}.zt-loading--vertical{display:flex;flex-direction:column;align-items:center}.zt-loading--vertical .zt-loading__text{margin:var(--zt-padding-base) 0 0}.zt-loading--horizontal-with-text .zt-loading__spinner--snake{width:20px;height:20px}@keyframes zt-circular{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40}to{stroke-dasharray:90,150;stroke-dashoffset:-120}}.zt-loading__spinner--spinner i:nth-of-type(1){transform:rotate(30deg);opacity:1}.zt-loading__spinner--spinner i:nth-of-type(2){transform:rotate(60deg);opacity:.9375}.zt-loading__spinner--spinner i:nth-of-type(3){transform:rotate(90deg);opacity:.875}.zt-loading__spinner--spinner i:nth-of-type(4){transform:rotate(120deg);opacity:.8125}.zt-loading__spinner--spinner i:nth-of-type(5){transform:rotate(150deg);opacity:.75}.zt-loading__spinner--spinner i:nth-of-type(6){transform:rotate(180deg);opacity:.6875}.zt-loading__spinner--spinner i:nth-of-type(7){transform:rotate(210deg);opacity:.625}.zt-loading__spinner--spinner i:nth-of-type(8){transform:rotate(240deg);opacity:.5625}.zt-loading__spinner--spinner i:nth-of-type(9){transform:rotate(270deg);opacity:.5}.zt-loading__spinner--spinner i:nth-of-type(10){transform:rotate(300deg);opacity:.4375}.zt-loading__spinner--spinner i:nth-of-type(11){transform:rotate(330deg);opacity:.375}.zt-loading__spinner--spinner i:nth-of-type(12){transform:rotate(360deg);opacity:.3125}