taro-ui-vue3/lib/skeleton/index.js

Taro UI Rewritten in Vue 3.0

var __defProp = Object.defineProperty;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
var __objSpread = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
import {
  h,
  defineComponent,
  computed,
  TransitionGroup
} from "vue";
import {
  View
} from "@tarojs/components";
import {dimensionsFactory} from "../composables/dimensions";
import {makeElevationProps, useElevationClasses} from "../composables/elevation";
const {makeDimensionsProps, useDimensions} = dimensionsFactory();
const AtSkeleton = defineComponent({
  name: "AtSkeleton",
  props: __objSpread(__objSpread(__objSpread({}, makeElevationProps()), makeDimensionsProps()), {
    boilerplate: Boolean,
    loading: Boolean,
    tile: Boolean,
    transition: String,
    type: String,
    types: {
      type: Object,
      default: () => ({})
    }
  }),
  setup(props, {slots, attrs}) {
    const {dimensions} = useDimensions(props);
    const {elevationClasses} = useElevationClasses(props);
    const isLoading = computed(() => {
      return !("default" in slots) || props.loading;
    });
    const _attrs = computed(() => {
      if (!isLoading.value)
        return attrs;
      return !props.boilerplate ? __objSpread({
        "aria-busy": true,
        "aria-live": "polite",
        role: "alert"
      }, attrs) : {};
    });
    const classes = computed(() => __objSpread(__objSpread({}, elevationClasses.value), {
      "at-skeleton--boilerplate": props.boilerplate,
      "at-skeleton--is-loading": isLoading.value,
      "at-skeleton--tile": props.tile,
      "at-skeleton": true
    }));
    const rootTypes = computed(() => __objSpread(__objSpread({}, props.types), {
      actions: "button@2",
      article: "heading, paragraph",
      avatar: "avatar",
      button: "button",
      card: "image, card-heading",
      "card-avatar": "image, list-item-avatar",
      "card-heading": "heading",
      chip: "chip",
      "date-picker": "list-item, card-heading, divider, date-picker-options, date-picker-days, actions",
      "date-picker-options": "text, avatar@2",
      "date-picker-days": "avatar@28",
      heading: "heading",
      image: "image",
      "list-item": "text",
      "list-item-avatar": "avatar, text",
      "list-item-two-line": "sentences",
      "list-item-avatar-two-line": "avatar, sentences",
      "list-item-three-line": "paragraph",
      "list-item-avatar-three-line": "avatar, paragraph",
      paragraph: "text@3",
      sentences: "text@2",
      table: "table-heading, table-thead, table-tbody, table-tfoot",
      "table-heading": "heading, text",
      "table-thead": "heading@6",
      "table-tbody": "table-row-divider@6",
      "table-row-divider": "table-row, divider",
      "table-row": "table-cell@6",
      "table-cell": "text",
      "table-tfoot": "text@2, avatar@2",
      text: "text"
    }));
    function genBone(text, children) {
      return h(View, {
        class: `at-skeleton__${text} at-skeleton__bone`
      }, {default: () => children});
    }
    function genBones(bone) {
      const [type, length] = bone.split("@");
      const generator = () => genStructure(type);
      return Array.from({length}).map(generator);
    }
    function genStructure(type) {
      let children = [];
      type = type || props.type || "";
      const bone = rootTypes.value[type] || "";
      if (type === bone) {
      } else if (type.indexOf(",") > -1)
        return mapBones(type);
      else if (type.indexOf("@") > -1)
        return genBones(type);
      else if (bone.indexOf(",") > -1)
        children = mapBones(bone);
      else if (bone.indexOf("@") > -1)
        children = genBones(bone);
      else if (bone)
        children.push(genStructure(bone));
      return [genBone(type, children)];
    }
    function genSkeleton() {
      var _a;
      let children = [];
      if (!isLoading.value)
        children.push((_a = slots.default) == null ? void 0 : _a.call(slots));
      else
        children.push(genStructure());
      if (!props.transition)
        return children;
      children = children.map((child) => {
        child.map((c, index) => {
          c.key = index;
          return c;
        });
        return child;
      });
      return h(TransitionGroup, {
        onAfterEnter: resetStyles,
        onBeforeEnter,
        onBeforeLeave,
        onLeaveCancelled: resetStyles
      }, {default: () => children});
    }
    function mapBones(bones) {
      return bones.replace(/\s/g, "").split(",").map(genStructure);
    }
    function onBeforeEnter(el) {
      resetStyles(el);
      if (!isLoading.value)
        return;
      el._initialStyle = {
        display: el.style.display,
        transition: el.style.transition
      };
      el.style.setProperty("transition", "none", "important");
    }
    function onBeforeLeave(el) {
      el.style.setProperty("display", "none", "important");
    }
    function resetStyles(el) {
      if (!el._initialStyle)
        return;
      el.style.display = el._initialStyle.display || "";
      el.style.transition = el._initialStyle.transition;
      delete el._initialStyle;
    }
    return () => h(View, __objSpread(__objSpread({}, _attrs.value), {
      class: classes.value,
      style: isLoading.value ? dimensions.value.style : void 0
    }), {default: () => [genSkeleton()]});
  }
});
var skeleton_default = AtSkeleton;
export {
  skeleton_default as default
};