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

Taro UI Rewritten in Vue 3.0

import { defineComponent, computed, resolveComponent, h, mergeProps, Transition } from 'vue';
import { dimensionsFactory, makeElevationProps, useElevationClasses } from '../composables';

const { makeDimensionsProps, useDimensions } = dimensionsFactory();
const AtSkeleton = defineComponent({
  name: "AtSkeleton",
  props: {
    ...makeElevationProps(),
    ...makeDimensionsProps(),
    tile: Boolean,
    loading: Boolean,
    boilerplate: 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 ? {
        ...attrs,
        "aria-busy": true,
        "aria-live": "polite",
        role: "alert"
      } : {};
    });
    const classes = computed(() => ({
      ...elevationClasses.value,
      "at-skeleton--boilerplate": props.boilerplate,
      "at-skeleton--is-loading": isLoading.value,
      "at-skeleton--tile": props.tile,
      "at-skeleton": true
    }));
    const rootTypes = computed(() => ({
      ...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) {
      const View = process.env.TARO_ENV === "h5" ? resolveComponent("taro-view") : "view";
      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() {
      const children = [];
      if (!isLoading.value)
        children.push(slots.default?.());
      else
        children.push(genStructure());
      if (!props.transition)
        return children;
      return h(Transition, {
        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 () => {
      const View = process.env.TARO_ENV === "h5" ? resolveComponent("taro-view") : "view";
      return h(View, mergeProps(_attrs.value, {
        class: classes.value,
        style: isLoading.value ? dimensions.value.style : void 0
      }), { default: () => [genSkeleton()] });
    };
  }
});

export default AtSkeleton;