comic-plus/es/components/schedule/src/card.vue.mjs

<p align="center"> <img width="200px" src="./logo.png"/> </p>

import { defineComponent, inject, ref, computed, openBlock, createElementBlock, normalizeStyle, Fragment, renderList, renderSlot, isVNode, createBlock, resolveDynamicComponent, createElementVNode, toDisplayString } from "vue";
import { SCHEDULE_PROVIDE } from "./type.mjs";
const _hoisted_1 = { class: "cu-schedule-defaultcard__content" };
const _hoisted_2 = { class: "timer" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "CuScheduleCards"
  },
  __name: "card",
  props: {
    data: Object
  },
  setup(__props) {
    const props = __props;
    const { props: injectProps, spacing } = inject(SCHEDULE_PROVIDE);
    const cardRef = ref();
    const maxHeight = computed(() => {
      return (injectProps.end + 1 - injectProps.start) * spacing.value;
    });
    const startTime = computed(() => {
      return Math.max(props.data.startTime, injectProps.start);
    });
    const endTime = computed(() => {
      return Math.min(props.data.endTime, injectProps.end + 1);
    });
    const getMaxPx = (number) => {
      return Math.min(Math.max(number, 0), maxHeight.value);
    };
    const cardStyle = computed(() => {
      return {
        top: getMaxPx((startTime.value - injectProps.start) * spacing.value) + "px",
        height: Math.min((endTime.value - startTime.value) * spacing.value, maxHeight.value) + "px"
      };
    });
    function cardStyleFn(card) {
      return {
        marginTop: getMaxPx((card.getTimes[0] - startTime.value) * spacing.value) + "px",
        marginBottom: getMaxPx((endTime.value - card.getTimes[1]) * spacing.value) + "px"
      };
    }
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        style: normalizeStyle(cardStyle.value),
        ref_key: "cardRef",
        ref: cardRef,
        class: "cu-schedule-cards"
      }, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.data.children, (card, idx) => {
          return openBlock(), createElementBlock("div", {
            class: "cu-schedule-card",
            style: normalizeStyle(cardStyleFn(card)),
            key: card.time + idx
          }, [
            renderSlot(_ctx.$slots, "card", { data: card }, () => [
              isVNode(card.content) ? (openBlock(), createBlock(resolveDynamicComponent(card.content), { key: 0 })) : (openBlock(), createElementBlock("div", {
                key: 1,
                class: "cu-schedule-defaultcard",
                style: normalizeStyle({ "--card-color": card.color })
              }, [
                createElementVNode("div", _hoisted_1, toDisplayString(card.content), 1),
                createElementVNode("div", _hoisted_2, toDisplayString(card.time), 1)
              ], 4))
            ])
          ], 4);
        }), 128))
      ], 4);
    };
  }
});
export {
  _sfc_main as default
};