FileMaster

Edit File: CartItemHead.vue

<template>
  <div
    class="am-fs__cserv"
    :class="useResponsiveClass(wrapperWidth)"
    :style="cssVars
">
    <div
      class="am-fs__cserv-heading"
      :class="useResponsiveClass(wrapperWidth)"
    >
      <span
        class="am-fs__cserv-heading-img"
        :style="{backgroundColor: `${props.data.service.color}`}"
      >
        {{ imagePlaceholder(props.data.service.name) }}
      </span>
      <p class="am-fs__cserv-name">
        {{ props.data.service.name }}
      </p>
    </div>
    <div
      class="am-fs__cserv-price"
      :class="useResponsiveClass(wrapperWidth)"
    >
      <span class="am-price">
        {{ useFormattedPrice(servicePrice + extrasPrice) }}
      </span>
    </div>
  </div>
</template>

// * Composable
import { useFormattedPrice } from '../../../../../assets/js/common/formatting'
import { useColorTransparency } from "../../../../../assets/js/common/colorManipulation";
import { useResponsiveClass } from "../../../../../assets/js/common/responsive";

let props = defineProps({
  data: {
    type: Object,
    default: null
  },
  globalClass: {
    type: String,
    default: ''
  }
})

function imagePlaceholder (label) {
  let shortLabel = ''

label.split(' ').forEach(item => {
    shortLabel += item.charAt(0).toUpperCase()
  })

if (shortLabel.length > 3) shortLabel = shortLabel.slice(0, 3)

return shortLabel
}

let wrapperWidth = inject('wrapperWidth')
const baseUrls = inject('baseUrls')

let servicePrice = computed(() => {
  return props.data.service.price * props.data.service.persons
})

let extrasPrice = computed(() => {
  let price = 0
  props.data.extras.forEach((extra) => {
    price += extra.price * extra.quantity * props.data.service.persons
  })

return price
})

let amColors = inject('amColors')

let cssVars = computed(() => {
  return {
    '--am-c-cart-text': amColors.value.colorMainText,
    '--am-c-cart-primary': amColors.value.colorPrimary,
    '--am-c-cart-primary-op10': useColorTransparency(amColors.value.colorPrimary, 0.1),
  }
})
</script>

&.am-rw-360 {
        flex-wrap: wrap;
      }

* {
        word-break: break-word;
      }

img {
        width: 40px;
        height: 40px;
        border-radius: 4px;
        margin: 0 12px 0 0;
      }

&-heading {
        display: flex;
        align-items: center;
        justify-content: center;

&.am-rw-360 {
          width: 100%;
          justify-content: flex-start;
        }

&-img {
          width: 40px;
          height: 40px;
          border-radius: 4px;
          font-size: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex: 0 0 auto;
          color: var(--am-c-main-bgr);
          margin-right: 12px;
        }
      }

&-name {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.6;
        /* $shade-900 */
        color: var(--am-c-cart-text);
      }

&-price {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        padding: 2px 9px;
        border-radius: 12px;
        background-color: var(--am-c-cart-primary-op10);

&.am-rw-360 {
          width: 100%;
          margin-top: 8px;
        }

.am-price {
          display: block;
          font-size: 14px;
          font-weight: 500;
          line-height: 1.42857;
          /* $shade-900 */
          color: var(--am-c-cart-primary);
        }
      }
    }
  }
}
</style>

Back