zartui 3.0.1 → 3.0.3

package/es/signature/Signature.mjs

@@ -0,0 +1,232 @@
+import { createTextVNode as _createTextVNode, withDirectives as _withDirectives, createVNode as _createVNode, vShow as _vShow } from "vue";
+import { computed, defineComponent, ref, Transition } from "vue";
+import { createNamespace, makeArrayProp, makeNumericProp, makeStringProp } from "../utils/index.mjs";
+import { getForceLandscapeEventPosition, getForceLandscapeStyle } from "./force-landscape.mjs";
+import { showToast } from "../toast/index.mjs";
+import { canvas2File } from "../media-picker/util/media-util.mjs";
+import ZtButton from "../button/index.mjs";
+import { parseNumber } from "../utils/parse.mjs";
+const [name, bem] = createNamespace("signature");
+const signatureProps = {
+  customClass: makeStringProp(""),
+  lineWidth: makeNumericProp(2),
+  strokeStyle: makeStringProp("#000"),
+  backgroundStyle: makeStringProp("#fff"),
+  imageType: makeStringProp("png"),
+  resultTypes: makeArrayProp(["file", "dataUrl"]),
+  unSupportTpl: makeStringProp("\u5BF9\u4E0D\u8D77\uFF0C\u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301Canvas\uFF0C\u65E0\u6CD5\u4F7F\u7528\u7B7E\u540D\u7EC4\u4EF6"),
+  allowPortrait: Boolean
+};
+var stdin_default = defineComponent({
+  name,
+  props: signatureProps,
+  emits: ["clear", "cancel", "confirm"],
+  setup(props, {
+    emit
+  }) {
+    const containerRef = ref();
+    const canvasRef = ref();
+    const canvasWidth = ref(0);
+    const canvasHeight = ref(0);
+    const ctx = ref();
+    const events = ref("ontouchstart" in window ? ["touchstart", "touchmove", "touchend", "touchleave"] : ["mousedown", "mousemove", "mouseup", "mouseleave"]);
+    const isCompleteButtonDisabled = ref(true);
+    const isHintHidden = ref(false);
+    const isSupportTouch = ref("ontouchstart" in window);
+    const isCanvasSupported = computed(() => {
+      const elem = document.createElement("canvas");
+      return !!(elem.getContext && elem.getContext("2d"));
+    });
+    const reset = () => {
+      var _a, _b;
+      if (!containerRef.value) {
+        console.error("container is empty");
+        return;
+      }
+      const style = getForceLandscapeStyle(((_a = containerRef.value) == null ? void 0 : _a.offsetLeft) || 0, ((_b = containerRef.value) == null ? void 0 : _b.offsetTop) || 0, !props.allowPortrait);
+      containerRef.value.style.transform = style.transform;
+      containerRef.value.style.width = style.width;
+      containerRef.value.style.height = style.height;
+      containerRef.value.style.transformOrigin = style.transformOrigin;
+      canvasWidth.value = parseNumber(style.width);
+      canvasHeight.value = parseNumber(style.height);
+    };
+    const setupBackground = () => {
+      var _a, _b, _c, _d;
+      if (props.imageType === "jpg") {
+        let backgroundColor = props.backgroundStyle;
+        if (backgroundColor === "transparent") {
+          backgroundColor = "#fff";
+        }
+        if (ctx.value) {
+          ctx.value.fillStyle = backgroundColor;
+          ctx.value.fillRect(0, 0, ((_a = canvasRef.value) == null ? void 0 : _a.width) || 0, ((_b = canvasRef.value) == null ? void 0 : _b.height) || 0);
+        }
+      } else {
+        const backgroundColor = props.backgroundStyle;
+        if (backgroundColor !== "transparent" && ctx.value) {
+          ctx.value.fillStyle = backgroundColor;
+          ctx.value.fillRect(0, 0, ((_c = canvasRef.value) == null ? void 0 : _c.width) || 0, ((_d = canvasRef.value) == null ? void 0 : _d.height) || 0);
+        }
+      }
+    };
+    const moveEventHandler = (event) => {
+      var _a, _b;
+      event.preventDefault();
+      isHintHidden.value = true;
+      isCompleteButtonDisabled.value = false;
+      const evt = isSupportTouch.value ? event.touches[0] : event;
+      if (canvasRef.value) {
+        const position = getForceLandscapeEventPosition(evt, canvasRef.value, !props.allowPortrait);
+        (_a = ctx.value) == null ? void 0 : _a.lineTo(position.x, position.y);
+        (_b = ctx.value) == null ? void 0 : _b.stroke();
+      }
+    };
+    const endEventHandler = (event) => {
+      var _a, _b;
+      event.preventDefault();
+      (_a = canvasRef.value) == null ? void 0 : _a.removeEventListener(events.value[1], moveEventHandler, false);
+      (_b = canvasRef.value) == null ? void 0 : _b.removeEventListener(events.value[2], endEventHandler, false);
+    };
+    const leaveEventHandler = (event) => {
+      var _a, _b;
+      event.preventDefault();
+      (_a = canvasRef.value) == null ? void 0 : _a.removeEventListener(events.value[1], moveEventHandler, false);
+      (_b = canvasRef.value) == null ? void 0 : _b.removeEventListener(events.value[2], endEventHandler, false);
+    };
+    const startEventHandler = (event) => {
+      var _a, _b, _c;
+      event.preventDefault();
+      if (ctx.value) {
+        ctx.value.beginPath();
+        ctx.value.lineWidth = +props.lineWidth;
+        ctx.value.strokeStyle = props.strokeStyle;
+      }
+      (_a = canvasRef.value) == null ? void 0 : _a.addEventListener(events.value[1], moveEventHandler, false);
+      (_b = canvasRef.value) == null ? void 0 : _b.addEventListener(events.value[2], endEventHandler, false);
+      (_c = canvasRef.value) == null ? void 0 : _c.addEventListener(events.value[3], leaveEventHandler, false);
+    };
+    const clear = (isUnEmit = false) => {
+      var _a, _b, _c, _d, _e;
+      (_a = canvasRef.value) == null ? void 0 : _a.addEventListener(events.value[2], endEventHandler, false);
+      (_d = ctx.value) == null ? void 0 : _d.clearRect(0, 0, ((_b = canvasRef.value) == null ? void 0 : _b.width) || 0, ((_c = canvasRef.value) == null ? void 0 : _c.height) || 0);
+      (_e = ctx.value) == null ? void 0 : _e.closePath();
+      setupBackground();
+      isHintHidden.value = false;
+      isCompleteButtonDisabled.value = true;
+      if (!isUnEmit) {
+        emit("clear");
+      }
+    };
+    const onSave = (canvas) => {
+      Promise.all(props.resultTypes.map((resultType) => {
+        if (resultType.trim() === "dataUrl") {
+          let dataURL;
+          if (props.imageType === "png") {
+            dataURL = canvas.toDataURL("image/png");
+          } else {
+            dataURL = canvas.toDataURL("image/jpeg", 0.8);
+          }
+          return Promise.resolve(dataURL);
+        } else if (resultType.trim() === "file") {
+          const timestamp = new Date().getTime();
+          if (props.imageType === "png") {
+            const exportFilename2 = timestamp + ".png";
+            return canvas2File(canvas, exportFilename2, timestamp, "image/png");
+          }
+          const exportFilename = timestamp + ".jpg";
+          return canvas2File(canvas, exportFilename, timestamp);
+        }
+        return Promise.resolve(null);
+      })).then((results) => {
+        clear(true);
+        emit("confirm", results);
+      });
+    };
+    const confirm = () => {
+      if (canvasRef.value) {
+        onSave(canvasRef.value);
+      }
+    };
+    const cancel = () => {
+      clear(true);
+      emit("cancel");
+    };
+    const addEvent = () => {
+      var _a;
+      (_a = canvasRef.value) == null ? void 0 : _a.addEventListener(events.value[0], startEventHandler, false);
+      if (isCanvasSupported.value) {
+        window.addEventListener("resize", () => {
+          setTimeout(() => {
+            reset();
+            if (!isCompleteButtonDisabled.value) {
+              showToast("\u65CB\u8F6C\u5C4F\u5E55\u6216\u8005\u6539\u53D8\u5C4F\u5E55\u5927\u5C0F\u89E6\u53D1\u91CD\u65B0\u7ED8\u5236");
+              clear(true);
+            }
+          }, 100);
+        });
+      }
+    };
+    const onAppear = () => {
+      var _a;
+      if (!isCanvasSupported.value) {
+        return;
+      }
+      ctx.value = (_a = canvasRef.value) == null ? void 0 : _a.getContext("2d");
+      reset();
+      addEvent();
+      setTimeout(() => {
+        setupBackground();
+      }, 50);
+    };
+    return () => _createVNode(Transition, {
+      "appear": true,
+      "onAfterEnter": onAppear
+    }, {
+      default: () => [_createVNode("div", {
+        "class": [bem(""), props.customClass ? props.customClass : ""],
+        "ref": containerRef
+      }, [_withDirectives(_createVNode("label", {
+        "class": bem("placeholder")
+      }, [isCanvasSupported.value ? "\u8BF7\u5728\u6B64\u7B7E\u540D" : props.unSupportTpl]), [[_vShow, !isHintHidden.value]]), _createVNode("div", {
+        "class": bem("canvasWrapper"),
+        "ref": "canvasWrapper"
+      }, [_withDirectives(_createVNode("canvas", {
+        "class": bem("canvas"),
+        "ref": canvasRef,
+        "width": canvasWidth.value,
+        "height": canvasHeight.value
+      }, null), [[_vShow, isCanvasSupported.value]])]), _createVNode("div", {
+        "class": bem("actions")
+      }, [_createVNode(ZtButton, {
+        "plain": true,
+        "type": "warning",
+        "onClick": () => clear(),
+        "style": {
+          "background-color": "#fff"
+        }
+      }, {
+        default: () => [_createTextVNode("\u91CD\u7B7E")]
+      }), _createVNode(ZtButton, {
+        "type": "default",
+        "onClick": cancel,
+        "style": {
+          "background-color": "#fff"
+        }
+      }, {
+        default: () => [_createTextVNode("\u53D6\u6D88")]
+      }), _createVNode(ZtButton, {
+        "block": true,
+        "type": "primary",
+        "disabled": isCompleteButtonDisabled.value,
+        "onClick": confirm
+      }, {
+        default: () => [_createTextVNode("\u5B8C\u6210")]
+      })])])]
+    });
+  }
+});
+export {
+  stdin_default as default,
+  signatureProps
+};

package/es/signature/force-landscape.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 判断是否竖直的
+ */
+export declare const isPortrait: () => boolean;
+export interface ForceLandscapeStyle {
+    transform: string;
+    width: string;
+    height: string;
+    transformOrigin: string;
+}
+export declare const getForceLandscapeStyle: (offsetLeft: number, offsetTop: number, forceLandscape: boolean) => ForceLandscapeStyle;
+export interface EventPosition {
+    x: number;
+    y: number;
+}
+export declare const getForceLandscapeEventPosition: (evt: MouseEvent | Touch, canvas: HTMLCanvasElement, forceLandscape: boolean) => EventPosition;

package/es/signature/force-landscape.mjs

@@ -0,0 +1,72 @@
+const isPortrait = () => window.orientation == null || window.orientation === 180 || window.orientation === 0;
+const getForceLandscapeStyle = (offsetLeft, offsetTop, forceLandscape) => {
+  const resultStyle = {
+    width: "",
+    height: "",
+    transform: "",
+    transformOrigin: ""
+  };
+  const { clientWidth } = document.documentElement;
+  const leftOffset = offsetLeft;
+  const { clientHeight } = document.documentElement;
+  const topOffset = offsetTop;
+  const width = clientWidth - leftOffset;
+  const height = clientHeight - topOffset;
+  const longSide = Math.max(width, height);
+  const shortSide = Math.min(width, height);
+  if (isPortrait()) {
+    if (width < height) {
+      if (forceLandscape) {
+        console.debug("\u7AD6\u5C4F\u6253\u5F00\uFF0C\u5F3A\u5236\u6A2A\u5C4F");
+        resultStyle.transform = `rotate(90deg)`;
+        resultStyle.width = `${longSide}px`;
+        resultStyle.height = `${shortSide}px`;
+        resultStyle.transformOrigin = `${shortSide / 2}px center`;
+      } else {
+        console.debug("\u7AD6\u5C4F\u6253\u5F00\uFF0C\u4FDD\u6301\u7AD6\u5C4F");
+        resultStyle.transform = `rotate(0deg)`;
+        resultStyle.width = `${shortSide}px`;
+        resultStyle.height = `${longSide}px`;
+      }
+    } else if (forceLandscape) {
+      console.debug("\u6A2A\u5C4F\u65CB\u8F6C\u5230\u5F3A\u5236\u6A2A\u5C4F");
+      resultStyle.transform = `rotate(90deg)`;
+      resultStyle.width = `${longSide}px`;
+      resultStyle.height = `${shortSide}px`;
+      resultStyle.transformOrigin = `${shortSide / 2}px center`;
+    } else {
+      console.debug("\u6A2A\u5C4F\u65CB\u8F6C\u5230\u7AD6\u5C4F");
+      resultStyle.transform = `rotate(0deg)`;
+      resultStyle.width = `${shortSide}px`;
+      resultStyle.height = `${longSide}px`;
+    }
+  } else {
+    if (width > height) {
+      console.debug("\u6A2A\u5C4F\u6253\u5F00");
+    } else {
+      console.debug("\u7AD6\u5C4F\u65CB\u8F6C\u5230\u6A2A\u5C4F");
+    }
+    resultStyle.transform = `rotate(0deg)`;
+    resultStyle.width = `${longSide}px`;
+    resultStyle.height = `${shortSide}px`;
+  }
+  return resultStyle;
+};
+const getForceLandscapeEventPosition = (evt, canvas, forceLandscape) => {
+  const coverPos = canvas.getBoundingClientRect();
+  const mouseX = evt.clientX - coverPos.left;
+  const mouseY = evt.clientY - coverPos.top;
+  const isReverseXY = forceLandscape && (window.orientation == null || window.orientation === 180 || window.orientation === 0);
+  if (isReverseXY) {
+    const { clientWidth } = document.documentElement;
+    const leftOffset = 0;
+    const width = clientWidth - leftOffset;
+    return { x: mouseY, y: width - mouseX };
+  }
+  return { x: mouseX, y: mouseY };
+};
+export {
+  getForceLandscapeEventPosition,
+  getForceLandscapeStyle,
+  isPortrait
+};

package/es/signature/index.css

@@ -0,0 +1 @@
+:root{--zt-signature-canvas-z-index: 1;--zt-signature-hint-z-index: 2;--zt-signature-actions-z-index: 2}.zt-signature{background-color:var(--zt-background);width:100%;height:100%;position:relative}.zt-signature__placeholder{z-index:var(--zt-signature-hint-z-index);pointer-events:none;position:absolute;left:0;top:calc(50% - 12px);font-size:16px;height:24px;width:100%;color:var(--zt-gray-a2);text-align:center}.zt-signature__canvasWrapper{z-index:var(--zt-signature-canvas-z-index);position:absolute;top:0;left:0;width:100%;height:100%;background:var(--zt-white)}.zt-signature__actions{z-index:var(--zt-signature-actions-z-index);position:absolute;right:0;bottom:16px;width:320px;float:right}.zt-signature__actions button{float:left;width:96px;margin-right:8px}

package/es/signature/index.d.ts

@@ -0,0 +1,83 @@
+export declare const Signature: import("../utils").WithInstall<import("vue").DefineComponent<{
+    customClass: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    lineWidth: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    strokeStyle: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    backgroundStyle: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    imageType: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    resultTypes: {
+        type: import("vue").PropType<import("./types").SignatureResultType[]>;
+        default: () => import("./types").SignatureResultType[];
+    };
+    unSupportTpl: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    allowPortrait: BooleanConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "cancel" | "confirm")[], "clear" | "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    customClass: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    lineWidth: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    strokeStyle: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    backgroundStyle: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    imageType: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    resultTypes: {
+        type: import("vue").PropType<import("./types").SignatureResultType[]>;
+        default: () => import("./types").SignatureResultType[];
+    };
+    unSupportTpl: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    allowPortrait: BooleanConstructor;
+}>> & {
+    onClear?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+}, {
+    lineWidth: string | number;
+    customClass: string;
+    strokeStyle: string;
+    backgroundStyle: string;
+    imageType: string;
+    resultTypes: import("./types").SignatureResultType[];
+    unSupportTpl: string;
+    allowPortrait: boolean;
+}>>;
+export default Signature;
+export { signatureProps } from './Signature';
+export type { SignatureProps } from './Signature';
+export type { SignatureResultType } from './types';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtSignature: typeof Signature;
+    }
+}

package/es/signature/index.mjs

@@ -0,0 +1,10 @@
+import { withInstall } from "../utils/index.mjs";
+import _Signature from "./Signature.mjs";
+const Signature = withInstall(_Signature);
+var stdin_default = Signature;
+import { signatureProps } from "./Signature.mjs";
+export {
+  Signature,
+  stdin_default as default,
+  signatureProps
+};

package/es/signature/style/index.d.ts

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

package/es/signature/style/index.mjs

@@ -0,0 +1,10 @@
+import "../../style/base.css";
+import "../../badge/index.css";
+import "../../icon/index.css";
+import "../../overlay/index.css";
+import "../../popup/index.css";
+import "../../loading/index.css";
+import "../../toast/index.css";
+import "../../button/index.css";
+import "../../media-picker/index.css";
+import "../index.css";

package/es/signature/types.d.ts

@@ -0,0 +1 @@
+export declare type SignatureResultType = 'file' | 'dataUrl';

package/es/skeleton/Skeleton.d.ts

@@ -0,0 +1,104 @@
+import { type PropType, type ExtractPropTypes } from 'vue';
+import { type Numeric } from '../utils';
+export declare type SkeletonAvatarShape = 'square' | 'round';
+export declare const skeletonProps: {
+    row: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    title: BooleanConstructor;
+    round: BooleanConstructor;
+    avatar: BooleanConstructor;
+    field: BooleanConstructor;
+    textarea: BooleanConstructor;
+    loading: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    animate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    avatarSize: (NumberConstructor | StringConstructor)[];
+    titleWidth: (NumberConstructor | StringConstructor)[];
+    avatarShape: {
+        type: PropType<SkeletonAvatarShape>;
+        default: SkeletonAvatarShape;
+    };
+    rowWidth: {
+        type: PropType<Numeric | Numeric[]>;
+        default: string;
+    };
+};
+export declare type SkeletonProps = ExtractPropTypes<typeof skeletonProps>;
+declare const _default: import("vue").DefineComponent<{
+    row: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    title: BooleanConstructor;
+    round: BooleanConstructor;
+    avatar: BooleanConstructor;
+    field: BooleanConstructor;
+    textarea: BooleanConstructor;
+    loading: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    animate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    avatarSize: (NumberConstructor | StringConstructor)[];
+    titleWidth: (NumberConstructor | StringConstructor)[];
+    avatarShape: {
+        type: PropType<SkeletonAvatarShape>;
+        default: SkeletonAvatarShape;
+    };
+    rowWidth: {
+        type: PropType<Numeric | Numeric[]>;
+        default: string;
+    };
+}, () => JSX.Element | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    row: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    title: BooleanConstructor;
+    round: BooleanConstructor;
+    avatar: BooleanConstructor;
+    field: BooleanConstructor;
+    textarea: BooleanConstructor;
+    loading: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    animate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    avatarSize: (NumberConstructor | StringConstructor)[];
+    titleWidth: (NumberConstructor | StringConstructor)[];
+    avatarShape: {
+        type: PropType<SkeletonAvatarShape>;
+        default: SkeletonAvatarShape;
+    };
+    rowWidth: {
+        type: PropType<Numeric | Numeric[]>;
+        default: string;
+    };
+}>>, {
+    textarea: boolean;
+    title: boolean;
+    animate: boolean;
+    field: boolean;
+    round: boolean;
+    loading: boolean;
+    row: string | number;
+    avatar: boolean;
+    avatarShape: SkeletonAvatarShape;
+    rowWidth: Numeric | Numeric[];
+}>;
+export default _default;

package/es/skeleton/Skeleton.mjs

@@ -0,0 +1,116 @@
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { addUnit, truthProp, numericProp, getSizeStyle, makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
+const [name, bem] = createNamespace("skeleton");
+const DEFAULT_ROW_WIDTH = "100%";
+const DEFAULT_LAST_ROW_WIDTH = "60%";
+const skeletonProps = {
+  row: makeNumericProp(0),
+  title: Boolean,
+  round: Boolean,
+  avatar: Boolean,
+  field: Boolean,
+  textarea: Boolean,
+  loading: truthProp,
+  animate: truthProp,
+  avatarSize: numericProp,
+  titleWidth: numericProp,
+  avatarShape: makeStringProp("round"),
+  rowWidth: {
+    type: [Number, String, Array],
+    default: DEFAULT_ROW_WIDTH
+  }
+};
+var stdin_default = defineComponent({
+  name,
+  inheritAttrs: false,
+  props: skeletonProps,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const renderAvatar = () => {
+      if (props.avatar) {
+        return _createVNode("div", {
+          "class": bem("avatar", props.avatarShape),
+          "style": getSizeStyle(props.avatarSize)
+        }, null);
+      }
+    };
+    const renderTitle = () => {
+      if (props.title && !props.field) {
+        return _createVNode("h3", {
+          "class": bem("title"),
+          "style": {
+            width: addUnit(props.titleWidth)
+          }
+        }, null);
+      }
+    };
+    function renderRows() {
+      const Rows = [];
+      const {
+        rowWidth
+      } = props;
+      function getRowWidth(index) {
+        if (rowWidth === DEFAULT_ROW_WIDTH && index === +props.row - 1) {
+          return DEFAULT_LAST_ROW_WIDTH;
+        }
+        if (Array.isArray(rowWidth)) {
+          return rowWidth[index];
+        }
+        return rowWidth;
+      }
+      for (let i = 0; i < props.row; i++) {
+        if (props.field) {
+          Rows.push(_createVNode("div", {
+            "class": bem("field")
+          }, [_createVNode("span", {
+            "class": bem("field-title"),
+            "style": {
+              width: addUnit(props.titleWidth)
+            }
+          }, null), _createVNode("span", {
+            "class": bem("field-value"),
+            "style": {
+              width: addUnit(getRowWidth(i))
+            }
+          }, null)]));
+        } else if (props.textarea) {
+          Rows.push(_createVNode("div", {
+            "class": bem("textarea"),
+            "style": {
+              width: addUnit(getRowWidth(i))
+            }
+          }, null));
+        } else {
+          Rows.push(_createVNode("div", {
+            "class": bem("row"),
+            "style": {
+              width: addUnit(getRowWidth(i))
+            }
+          }, null));
+        }
+      }
+      return Rows;
+    }
+    return () => {
+      var _a;
+      if (!props.loading) {
+        return (_a = slots.default) == null ? void 0 : _a.call(slots);
+      }
+      return _createVNode("div", _mergeProps({
+        "class": bem({
+          animate: props.animate,
+          round: props.round
+        })
+      }, attrs), [renderAvatar(), _createVNode("div", {
+        "class": bem("content")
+      }, [renderTitle(), renderRows()])]);
+    };
+  }
+});
+export {
+  stdin_default as default,
+  skeletonProps
+};

package/es/skeleton/index.css

@@ -0,0 +1 @@
+:root{--zt-skeleton-row-height: 16px;--zt-skeleton-row-background: var(--zt-active-color);--zt-skeleton-row-margin-top: var(--zt-padding-sm);--zt-skeleton-title-width: 40%;--zt-skeleton-avatar-size: 32px;--zt-skeleton-avatar-background: var(--zt-active-color);--zt-skeleton-duration: 1.2s}.zt-skeleton{display:flex;padding:0 var(--zt-padding-md)}.zt-skeleton__avatar{flex-shrink:0;width:var(--zt-skeleton-avatar-size);height:var(--zt-skeleton-avatar-size);margin-right:var(--zt-padding-md);background:var(--zt-skeleton-avatar-background)}.zt-skeleton__avatar--round{border-radius:var(--zt-radius-max)}.zt-skeleton__content{width:100%}.zt-skeleton__avatar+.zt-skeleton__content{padding-top:var(--zt-padding-xs)}.zt-skeleton__row,.zt-skeleton__textarea,.zt-skeleton__title{height:var(--zt-skeleton-row-height);background:var(--zt-skeleton-row-background)}.zt-skeleton__title{width:var(--zt-skeleton-title-width);margin:0}.zt-skeleton__textarea{margin-top:10px}.zt-skeleton__row:not(:first-child){margin-top:var(--zt-skeleton-row-margin-top)}.zt-skeleton__title+.zt-skeleton__row{margin-top:20px}.zt-skeleton--animate{animation:zt-skeleton-blink var(--zt-skeleton-duration) ease-in-out infinite}.zt-skeleton--round .zt-skeleton__row,.zt-skeleton--round .zt-skeleton__title{border-radius:var(--zt-radius-max)}.zt-skeleton__field{width:100%;display:flex;justify-content:space-between}.zt-skeleton__field:not(:first-child){margin-top:16px}.zt-skeleton__field-title,.zt-skeleton__field-value{height:var(--zt-skeleton-row-height);background:var(--zt-skeleton-row-background)}@keyframes zt-skeleton-blink{50%{opacity:.6}}