@voicenter-team/voicenter-ui-plus 2.0.12 → 3.0.1

package/library/components/VcSipFlow/VcSipFlow.vue.mjs

@@ -0,0 +1,348 @@
+import '../../assets/components/VcSipFlow/VcSipFlow.css';
+import { defineComponent, ref, computed, watch, onUnmounted, openBlock, createElementBlock, renderSlot, createVNode, Transition, withCtx, createElementVNode, Fragment, renderList, toDisplayString, createCommentVNode, normalizeClass, nextTick } from "vue";
+import { defaultOptions } from "./sip-flow.options.mjs";
+import { set } from "lodash-es";
+import VcLoading from "../VcLoading/VcLoading.vue.mjs";
+const _hoisted_1 = { class: "sip-flow-area" };
+const _hoisted_2 = ["height", "width"];
+const _hoisted_3 = ["color"];
+const _hoisted_4 = ["id", "color"];
+const _hoisted_5 = {
+  class: "sip-flow-area__content",
+  transform: "translate(10, 14)"
+};
+const _hoisted_6 = ["fill", "x", "y"];
+const _hoisted_7 = { class: "servers" };
+const _hoisted_8 = ["x", "dy"];
+const _hoisted_9 = ["x", "dy"];
+const _hoisted_10 = ["href", "x"];
+const _hoisted_11 = ["data-server", "y1", "x2", "x1"];
+const _hoisted_12 = ["onClick"];
+const _hoisted_13 = ["marker-end", "color", "x1", "x2", "y1", "y2"];
+const _hoisted_14 = ["text-anchor", "x", "y", "dx", "color", "innerHTML"];
+const _hoisted_15 = ["text-anchor", "x", "y", "dx"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcSipFlow",
+  props: {
+    loading: { type: Boolean, default: false },
+    options: { default: void 0 },
+    events: { default: () => [] },
+    sortFn: { type: Function, default: void 0 },
+    aliases: { default: () => [] },
+    labelDateFormat: { default: void 0 },
+    showMessageIcons: { type: Boolean, default: true },
+    activeLine: { default: void 0 },
+    messageKey: { default: void 0 },
+    formatDate: { type: Function, default: void 0 }
+  },
+  emits: ["click:message", "ready"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const init = ref(false);
+    const columns = ref([]);
+    const messages = ref([]);
+    const serverIcons = ref({});
+    const callIdDataColors = ref({});
+    const sipFlowOptions = computed(() => {
+      const _opt = props.options || {};
+      return {
+        ...defaultOptions,
+        ..._opt
+      };
+    });
+    const vertTopAliasOffset = computed(() => {
+      var _a, _b;
+      const _aliaSpace = sipFlowOptions.value.aliasItemSpace;
+      const _offset = sipFlowOptions.value.headerLineOffset;
+      return ((_a = props.aliases) == null ? void 0 : _a.length) ? ((_b = props.aliases) == null ? void 0 : _b.length) * _aliaSpace + _offset : _offset;
+    });
+    const vertColumnSpace = computed(() => {
+      return 100 / (columns.value.length + 1);
+    });
+    const svgHeight = computed(() => {
+      const _len = props.events.length || 0;
+      const { verticalSpace, svgBottomSpace, minHeight } = sipFlowOptions.value;
+      const _height = _len * verticalSpace + svgBottomSpace + vertTopAliasOffset.value;
+      return Math.max(_height, minHeight);
+    });
+    const svgWidth = computed(() => {
+      const _lenColumns = columns.value.length;
+      return _lenColumns < 6 ? "100%" : `${_lenColumns * sipFlowOptions.value.verticalLineMinOffset + 100}px`;
+    });
+    function initGraph() {
+      init.value = false;
+      messages.value = [];
+      const _events = props.sortFn ? [...props.events].sort(props.sortFn) : [...props.events];
+      initColumns(_events);
+      initCallIdData(_events);
+      _events.forEach((item, i) => {
+        var _a;
+        const x1 = getIndexPosition(item.from);
+        const x2 = getIndexPosition(item.to);
+        serverIcons.value[item.from] = item.serverIcon || "";
+        let _duration = 0;
+        if (i > 0) {
+          const _current = item.dateNano || 0;
+          const _prev = ((_a = _events[i - 1]) == null ? void 0 : _a.dateNano) || 0;
+          _duration = _current - _prev;
+        }
+        const _key = props.messageKey;
+        const _idV = _key ? item[_key] : void 0;
+        messages.value.push({
+          ...item,
+          callId: item.callId,
+          x1,
+          x2,
+          _id: _idV || `_m-${i}`,
+          label: _duration ? `+${_duration.toFixed(1)}ms` : "0ms",
+          dateLabel: props.formatDate ? props.formatDate(item.date) : String(item.date)
+        });
+      });
+      nextTick(() => {
+        init.value = true;
+        emit("ready", true);
+      });
+    }
+    function getIndexPosition(column) {
+      return columns.value.findIndex((i) => i === column);
+    }
+    function initColumns(dataEvents) {
+      const _data = dataEvents.map((i) => {
+        return [i.from, i.to];
+      }).flat();
+      columns.value = [...new Set(_data)];
+    }
+    const initCallIdData = (dataEvents) => {
+      const _data = dataEvents.map((i) => {
+        return i.callId;
+      });
+      const { colorsColumnArrow, colorLineMessage } = sipFlowOptions.value;
+      const _unique = [...new Set(_data)];
+      _unique.forEach((item, i) => {
+        const _len = colorsColumnArrow.length + 1;
+        const _index = i % _len;
+        set(callIdDataColors.value, item, colorsColumnArrow[_index] || colorLineMessage);
+      });
+    };
+    function getAlias(aliasData, dataIp) {
+      var _a, _b;
+      return ((_b = (_a = props.aliases) == null ? void 0 : _a.find((i) => i.original === dataIp && i.alias === aliasData.alias)) == null ? void 0 : _b.alias) || "";
+    }
+    function getHeaderIpIcon(column) {
+      const _key = serverIcons.value[column] || "";
+      return sipFlowOptions.value.listServerIcons[_key] || sipFlowOptions.value.listServerIcons.Default;
+    }
+    function messageItemClick(event) {
+      emit("click:message", event);
+    }
+    function getMarker(event) {
+      const _indexKey = Object.keys(callIdDataColors.value).findIndex((i) => i === event.callId);
+      const _colors = sipFlowOptions.value.colorsColumnArrow;
+      const _len = _colors.length + 1;
+      const _index = _indexKey % _len;
+      return _colors[_index] ? `url(#msg-arrow-${_index})` : "url(#msg-arrow)";
+    }
+    function getColorLine(event) {
+      const _callId = event.callId || "";
+      return callIdDataColors.value[_callId] || sipFlowOptions.value.colorLineMessage;
+    }
+    function getAlignTextMessage(message) {
+      return message.x1 < message.x2 ? "start" : "end";
+    }
+    function getColorMessage(event) {
+      var _a;
+      const _code = event.code;
+      if (_code) {
+        return ((_a = sipFlowOptions.value.statusColors[+_code]) == null ? void 0 : _a.color) || sipFlowOptions.value.colorLineMessage;
+      }
+      return sipFlowOptions.value.colorLineMessage;
+    }
+    function getMessage(message) {
+      if (!props.showMessageIcons) {
+        return message.message;
+      }
+      const listIcons = sipFlowOptions.value.listIcons || {};
+      const _icon = message.eventType ? listIcons[message.eventType] || "" : "";
+      return `${message.message} ${_icon}`;
+    }
+    watch(
+      () => props.events,
+      () => {
+        initGraph();
+      },
+      {
+        immediate: true
+      }
+    );
+    onUnmounted(() => {
+      init.value = false;
+    });
+    __expose({
+      initGraph
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        renderSlot(_ctx.$slots, "before"),
+        createVNode(Transition, {
+          name: "fade-flow",
+          appear: "",
+          mode: "out-in"
+        }, {
+          default: withCtx(() => [
+            init.value ? (openBlock(), createElementBlock("svg", {
+              key: 0,
+              height: `${svgHeight.value}px`,
+              width: svgWidth.value,
+              class: "sip-flow-svg"
+            }, [
+              createElementVNode("defs", null, [
+                createElementVNode("marker", {
+                  id: "msg-arrow",
+                  color: sipFlowOptions.value.colorArrow,
+                  viewBox: "0 0 15 10",
+                  refX: "15",
+                  refY: "5",
+                  markerWidth: "10",
+                  markerHeight: "10",
+                  orient: "auto"
+                }, [..._cache[0] || (_cache[0] = [
+                  createElementVNode("path", { d: "M 0 0 L 15 5 L 0 10 z" }, null, -1)
+                ])], 8, _hoisted_3),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(sipFlowOptions.value.colorsColumnArrow, (color, i) => {
+                  return openBlock(), createElementBlock("marker", {
+                    id: `msg-arrow-${i}`,
+                    key: `msg-arrow-${i}`,
+                    color,
+                    viewBox: "0 0 15 10",
+                    refX: "15",
+                    refY: "5",
+                    markerWidth: "10",
+                    markerHeight: "10",
+                    orient: "auto"
+                  }, [..._cache[1] || (_cache[1] = [
+                    createElementVNode("path", { d: "M 0 0 L 15 5 L 0 10 z" }, null, -1)
+                  ])], 8, _hoisted_4);
+                }), 128))
+              ]),
+              createElementVNode("g", _hoisted_5, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(messages.value, (message, i) => {
+                  return openBlock(), createElementBlock("g", {
+                    key: i,
+                    class: "date-label"
+                  }, [
+                    createElementVNode("text", {
+                      fill: sipFlowOptions.value.colorLabel,
+                      x: `${1 * vertColumnSpace.value}%`,
+                      y: (i + 1) * sipFlowOptions.value.verticalSpace + vertTopAliasOffset.value - 5,
+                      "text-anchor": "end",
+                      "alignment-baseline": "central",
+                      dx: "-28"
+                    }, toDisplayString(message.dateLabel), 9, _hoisted_6)
+                  ]);
+                }), 128)),
+                createElementVNode("g", _hoisted_7, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(columns.value.values(), (column, i) => {
+                    var _a;
+                    return openBlock(), createElementBlock("g", {
+                      key: i,
+                      class: "server"
+                    }, [
+                      createElementVNode("text", {
+                        x: `${(i + 1) * vertColumnSpace.value}%`,
+                        dy: sipFlowOptions.value.headerNameDY,
+                        "text-anchor": "middle",
+                        "alignment-baseline": "middle",
+                        style: { "font-size": "max(12px, 1vw)" },
+                        class: "column-name"
+                      }, toDisplayString(column), 9, _hoisted_8),
+                      ((_a = __props.aliases) == null ? void 0 : _a.length) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(__props.aliases, (alias, iAl) => {
+                        return openBlock(), createElementBlock("text", {
+                          key: `alias-${iAl}`,
+                          x: `${(i + 1) * vertColumnSpace.value}%`,
+                          dy: 20 * (iAl + 1) + sipFlowOptions.value.headerNameDY,
+                          "text-anchor": "middle",
+                          "alignment-baseline": "middle",
+                          class: "column-alias-name",
+                          style: { "font-size": "max(12px, 1vw)" }
+                        }, toDisplayString(getAlias(alias, column)), 9, _hoisted_9);
+                      }), 128)) : createCommentVNode("", true),
+                      createElementVNode("use", {
+                        href: getHeaderIpIcon(column),
+                        x: `${(i + 1) * vertColumnSpace.value}%`,
+                        y: "-14",
+                        width: "32",
+                        height: "32",
+                        class: "server-icon",
+                        style: { "transform": "translateX(-16px)" }
+                      }, null, 8, _hoisted_10),
+                      createElementVNode("line", {
+                        "data-server": column,
+                        y1: vertTopAliasOffset.value + 26,
+                        y2: "100%",
+                        x2: `${(i + 1) * vertColumnSpace.value}%`,
+                        x1: `${(i + 1) * vertColumnSpace.value}%`,
+                        class: "server-vertical-line"
+                      }, null, 8, _hoisted_11)
+                    ]);
+                  }), 128))
+                ]),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(messages.value, (message, i) => {
+                  return openBlock(), createElementBlock("g", {
+                    key: i,
+                    class: normalizeClass([[{ "is--active": message._id === __props.activeLine }], "message flow-arrow-item"]),
+                    onClick: ($event) => messageItemClick(message)
+                  }, [
+                    createElementVNode("line", {
+                      "marker-end": getMarker(message),
+                      color: getColorLine(message),
+                      x1: (message.x1 + 1) * vertColumnSpace.value + "%",
+                      x2: (message.x2 + 1) * vertColumnSpace.value + "%",
+                      y1: (i + 1) * sipFlowOptions.value.verticalSpace + vertTopAliasOffset.value,
+                      y2: (i + 1) * sipFlowOptions.value.verticalSpace + vertTopAliasOffset.value
+                    }, null, 8, _hoisted_13),
+                    createElementVNode("text", {
+                      "text-anchor": getAlignTextMessage(message),
+                      x: (message.x1 + 1) * vertColumnSpace.value + "%",
+                      y: (i + 1) * sipFlowOptions.value.verticalSpace - 5 + vertTopAliasOffset.value,
+                      dx: message.x1 < message.x2 ? "10" : "-10",
+                      color: getColorMessage(message),
+                      style: { "font-size": "max(11px,1vw)" },
+                      "font-family": "Vc-icon",
+                      class: "vc-icon-",
+                      "alignment-baseline": "auto",
+                      innerHTML: getMessage(message)
+                    }, null, 8, _hoisted_14),
+                    createElementVNode("text", {
+                      "text-anchor": getAlignTextMessage(message),
+                      x: (message.x1 + 1) * vertColumnSpace.value + "%",
+                      y: (i + 1) * sipFlowOptions.value.verticalSpace + 12 + vertTopAliasOffset.value,
+                      dx: message.x1 < message.x2 ? "20" : "-20",
+                      "alignment-baseline": "auto",
+                      class: "flow-offset-label",
+                      style: { "font-size": "max(10px, 0.6vw)", "font-family": "serif" }
+                    }, toDisplayString(message.label), 9, _hoisted_15)
+                  ], 10, _hoisted_12);
+                }), 128))
+              ])
+            ], 8, _hoisted_2)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }),
+        !messages.value.length ? renderSlot(_ctx.$slots, "no-data", { key: 0 }, () => [
+          _cache[2] || (_cache[2] = createElementVNode("div", { class: "sip-flow-area__no-data" }, " No Data! ", -1))
+        ]) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "after"),
+        renderSlot(_ctx.$slots, "loader", { loading: __props.loading }, () => [
+          createVNode(VcLoading, {
+            loader: "stretch",
+            active: __props.loading
+          }, null, 8, ["active"])
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcSipFlow/VcSipFlow.vue3.mjs

@@ -0,0 +1,5 @@
+import _sfc_main from "./VcSipFlow.vue.mjs";
+import '../../assets/components/VcSipFlow/VcSipFlow.css';/* empty css                */
+export {
+  _sfc_main as default
+};

package/library/components/VcSipFlow/sip-flow.options.mjs

@@ -0,0 +1,111 @@
+const VERTICAL_SPACE = 60;
+const HEADER_NAME_DY = 28;
+const HEADER_LINE_OFFSET = 20;
+const ALIAS_ITEM_SPACE = 20;
+const SVG_BOTTOM_SPACE = 120;
+const MIN_HEIGHT = 420;
+const MIN_V_WIDTH = 280;
+const DEFAULT_COLOR_LINE = "#6578ae";
+const DEFAULT_COLOR_ARROW = "#5a73b5";
+const DEFAULT_COLOR_LABEL = "#8292aa";
+const COLUMN_ARROW_COLORS = [
+  "#880E4F",
+  "#00796B",
+  "#004cca",
+  "#6200EA",
+  "#4e9298",
+  "#b70c3d",
+  "#827717",
+  "#E65100",
+  "#D50000",
+  "#2E7D32",
+  "#29006b",
+  "#ab00c9",
+  "#005e87",
+  "#820029",
+  "#6e8904",
+  "#032760",
+  "#05775b",
+  "#992d00",
+  "#5a078e",
+  "#394651"
+];
+const STATUS_COLORS = {
+  1: {
+    color: "#80D035",
+    name: "1xx"
+  },
+  2: {
+    color: "#6FA34A",
+    name: "2xx"
+  },
+  3: {
+    color: "#317A58",
+    name: "3xx"
+  },
+  4: {
+    color: "#FC962C",
+    name: "4xx"
+  },
+  5: {
+    color: "#FF3636",
+    name: "5xx"
+  },
+  6: {
+    color: "#C63C49",
+    name: "6xx"
+  }
+};
+const ICONS = {
+  INVITE: "",
+  ASK: "",
+  ACK: "",
+  BYE: "",
+  CANCEL: "",
+  REGISTER: "",
+  OPTIONS: "",
+  PRACK: "",
+  SUBSCRIBE: "",
+  NOTIFY: "",
+  PUBLISH: "",
+  INFO: "",
+  REFER: "",
+  MESSAGE: "",
+  UPDATE: ""
+};
+const SERVER_ICONS = {
+  Default: ""
+};
+const defaultOptions = {
+  verticalSpace: VERTICAL_SPACE,
+  headerNameDY: HEADER_NAME_DY,
+  headerLineOffset: HEADER_LINE_OFFSET,
+  aliasItemSpace: ALIAS_ITEM_SPACE,
+  svgBottomSpace: SVG_BOTTOM_SPACE,
+  minHeight: MIN_HEIGHT,
+  colorLineMessage: DEFAULT_COLOR_LINE,
+  colorArrow: DEFAULT_COLOR_ARROW,
+  colorLabel: DEFAULT_COLOR_LABEL,
+  colorsColumnArrow: COLUMN_ARROW_COLORS,
+  statusColors: STATUS_COLORS,
+  listIcons: ICONS,
+  listServerIcons: SERVER_ICONS,
+  verticalLineMinOffset: MIN_V_WIDTH
+};
+export {
+  ALIAS_ITEM_SPACE,
+  COLUMN_ARROW_COLORS,
+  DEFAULT_COLOR_ARROW,
+  DEFAULT_COLOR_LABEL,
+  DEFAULT_COLOR_LINE,
+  HEADER_LINE_OFFSET,
+  HEADER_NAME_DY,
+  ICONS,
+  MIN_HEIGHT,
+  MIN_V_WIDTH,
+  SERVER_ICONS,
+  STATUS_COLORS,
+  SVG_BOTTOM_SPACE,
+  VERTICAL_SPACE,
+  defaultOptions
+};

package/library/components/VcSkeletonLoader/Loaders/Card.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./Card.vue2.mjs";
+import '../../../assets/components/VcSkeletonLoader/Loaders/Card.css';/* empty css           */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const Card = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d2573680"]]);
+export {
+  Card as default
+};

package/library/components/VcSkeletonLoader/Loaders/Card.vue2.mjs

@@ -0,0 +1,52 @@
+import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, normalizeStyle } from "vue";
+const _hoisted_1 = { class: "vc-loader__card" };
+const DEFAULT_HEIGHT_ROW = "25px";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Card",
+  props: {
+    rowHeight: { default: void 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const phRowHeight = computed(() => {
+      const height = props.rowHeight || DEFAULT_HEIGHT_ROW;
+      return {
+        height
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          style: normalizeStyle([phRowHeight.value]),
+          class: "ph-row flex justify-between items-center mb-10"
+        }, [..._cache[0] || (_cache[0] = [
+          createElementVNode("div", { class: "ph-cell w-5/12" }, null, -1),
+          createElementVNode("div", { class: "ph-cell empty" }, null, -1),
+          createElementVNode("div", { class: "ph-cell mini" }, null, -1),
+          createElementVNode("div", { class: "ph-cell mini" }, null, -1)
+        ])], 4),
+        createElementVNode("div", {
+          style: normalizeStyle([phRowHeight.value]),
+          class: "ph-row flex justify-between items-center mb-4"
+        }, [..._cache[1] || (_cache[1] = [
+          createElementVNode("div", { class: "ph-cell w-8/12" }, null, -1)
+        ])], 4),
+        createElementVNode("div", {
+          style: normalizeStyle([phRowHeight.value]),
+          class: "ph-row flex justify-between items-center mb-4"
+        }, [..._cache[2] || (_cache[2] = [
+          createElementVNode("div", { class: "ph-cell w-10/12" }, null, -1)
+        ])], 4),
+        createElementVNode("div", {
+          style: normalizeStyle([phRowHeight.value]),
+          class: "ph-row flex justify-between items-center"
+        }, [..._cache[3] || (_cache[3] = [
+          createElementVNode("div", { class: "ph-cell w-6/12" }, null, -1)
+        ])], 4)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcSkeletonLoader/Loaders/Circle.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./Circle.vue2.mjs";
+import '../../../assets/components/VcSkeletonLoader/Loaders/Circle.css';/* empty css             */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const Circle = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-294d40dc"]]);
+export {
+  Circle as default
+};

package/library/components/VcSkeletonLoader/Loaders/Circle.vue2.mjs

@@ -0,0 +1,32 @@
+import { defineComponent, computed, openBlock, createElementBlock, Fragment, renderList, normalizeStyle } from "vue";
+const DEFAULT_SIZE = "25px";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Circle",
+  props: {
+    rowHeight: { default: void 0 },
+    cols: { default: 1 }
+  },
+  setup(__props) {
+    const props = __props;
+    const phRowHeight = computed(() => {
+      const height = props.rowHeight || DEFAULT_SIZE;
+      const width = props.rowHeight || DEFAULT_SIZE;
+      return {
+        height,
+        width
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(true), createElementBlock(Fragment, null, renderList(__props.cols, (item) => {
+        return openBlock(), createElementBlock("div", {
+          key: item,
+          style: normalizeStyle(phRowHeight.value),
+          class: "ph-circle"
+        }, null, 4);
+      }), 128);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcSkeletonLoader/Loaders/Row.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./Row.vue2.mjs";
+import '../../../assets/components/VcSkeletonLoader/Loaders/Row.css';/* empty css          */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const Row = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0d5ada11"]]);
+export {
+  Row as default
+};

package/library/components/VcSkeletonLoader/Loaders/Row.vue2.mjs

@@ -0,0 +1,30 @@
+import { defineComponent, computed, openBlock, createElementBlock, Fragment, renderList, normalizeStyle } from "vue";
+const DEFAULT_HEIGHT_ROW = "100%";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Row",
+  props: {
+    rowHeight: { default: void 0 },
+    cols: { default: 1 }
+  },
+  setup(__props) {
+    const props = __props;
+    const phRowHeight = computed(() => {
+      const height = props.rowHeight || DEFAULT_HEIGHT_ROW;
+      return {
+        height
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(true), createElementBlock(Fragment, null, renderList(__props.cols, (item) => {
+        return openBlock(), createElementBlock("div", {
+          key: item,
+          style: normalizeStyle([phRowHeight.value]),
+          class: "ph-row w-full"
+        }, null, 4);
+      }), 128);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcSkeletonLoader/Loaders/Square.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./Square.vue2.mjs";
+import '../../../assets/components/VcSkeletonLoader/Loaders/Square.css';/* empty css             */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const Square = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d474acd9"]]);
+export {
+  Square as default
+};

package/library/components/VcSkeletonLoader/Loaders/Square.vue2.mjs

@@ -0,0 +1,32 @@
+import { defineComponent, computed, openBlock, createElementBlock, Fragment, renderList, normalizeStyle } from "vue";
+const DEFAULT_SIZE = "25px";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Square",
+  props: {
+    rowHeight: { default: void 0 },
+    cols: { default: 1 }
+  },
+  setup(__props) {
+    const props = __props;
+    const phRowHeight = computed(() => {
+      const height = props.rowHeight || DEFAULT_SIZE;
+      const width = props.rowHeight || DEFAULT_SIZE;
+      return {
+        height,
+        width
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(true), createElementBlock(Fragment, null, renderList(__props.cols, (item) => {
+        return openBlock(), createElementBlock("div", {
+          key: item,
+          style: normalizeStyle(phRowHeight.value),
+          class: "ph-block"
+        }, null, 4);
+      }), 128);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcSkeletonLoader/Loaders/Text.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./Text.vue2.mjs";
+import '../../../assets/components/VcSkeletonLoader/Loaders/Text.css';/* empty css           */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const Text = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1f605cc5"]]);
+export {
+  Text as default
+};