File manager

File manager - Edit - /home/premiey/www/wp-content/plugins/ameliabooking/v3/src/views/admin/customize/steps/parts/EventTicket.vue

Back
<template> <div class="am-ct" :class="[{'am-readonly' : props.readOnly}, responsiveClass]" :style="cssVars" > <div class="am-ct__info"> <p class="am-ct__info-name"> {{ props.ticket.name }} </p> <p v-if="!props.capacity && (props.ticket.spots - props.ticket.sold - spots > 0 \|\| !props.readOnly)" class="am-ct__info-spots" > <span v-if="componentWidth <= 500" class="am-ct__info-spots__price" > {{ useFormattedPrice(props.ticket.price) }} </span> <span class="am-ct__info-spots__number"> {{ props.ticket.spots - props.ticket.sold - spots }} </span> <span class="am-ct__info-spots__text"> {{ props.ticket.spots - props.ticket.sold - spots > 1 ? ` ${props.customizedLabels.event_tickets_left}` : ` ${props.customizedLabels.event_ticket_left}` }} </span> </p> </div> <div class="am-ct__action" :class="[{'am-readonly' : props.readOnly}, responsiveClass]" > <p v-if="componentWidth > 500" class="am-ct__action-price" > {{ useFormattedPrice(props.ticket.price) }} </p> <AmInputNumber v-if="!props.readOnly" v-model="spots" size="small" :min="0" :max="10" @change="updateSpots" > </AmInputNumber> </div> </div> </template> <script setup> // * _components import AmInputNumber from "../../../../_components/input-number/AmInputNumber.vue"; // * Import from Vue import { ref, computed, inject } from "vue"; // * Composables import { useFormattedPrice } from "../../../../../assets/js/common/formatting"; import { useResponsiveClass } from "../../../../../assets/js/common/responsive"; import { useColorTransparency } from "../../../../../assets/js/common/colorManipulation"; /** * Component Props / const props = defineProps({ customizedLabels: { type: Object, required: true }, ticket: { type: Object }, capacity: { type: Number }, extraPeople: { type: Number }, readOnly: { type: Boolean, default: false }, inDialog: { type: Boolean, default: false } }) let spots = ref(0) function updateSpots () {} // Responsive - Container Width let cWidth = inject('containerWidth') let componentWidth = computed(() => { return cWidth.value }) let responsiveClass = computed(() => useResponsiveClass(componentWidth.value)) // * Fonts let amFonts = inject('amFonts') // * Colors let amColors = inject('amColors') // * Css Vars let cssVars = computed(() => { return { '--am-font-family': amFonts.value.fontFamily, '--am-c-ct-primary': amColors.value.colorPrimary, '--am-c-ct-bgr': amColors.value.colorMainBgr, '--am-c-ct-text': amColors.value.colorMainText, '--am-c-ct-text-op90': useColorTransparency(amColors.value.colorMainText, 0.9), '--am-c-ct-text-op80': useColorTransparency(amColors.value.colorMainText, 0.8), '--am-c-ct-text-op70': useColorTransparency(amColors.value.colorMainText, 0.7), '--am-c-ct-text-op60': useColorTransparency(amColors.value.colorMainText, 0.6), '--am-c-ct-text-op20': useColorTransparency(amColors.value.colorMainText, 0.2), } }) </script> <style lang="scss"> @mixin card-ticket { // am - amelia // ct - card ticket .am-ct { width: 100%; display: flex; justify-content: space-between; border: 1px solid var(--am-c-ct-text-op20); border-radius: 8px; padding: 12px; margin-bottom: 12px; &.am-rw-420 { flex-direction: column; } &__info { display: flex; flex-direction: column; justify-content: space-between; &-name { font-weight: 700; font-size: 15px; line-height: 1.6; color: var(--am-c-ct-text); // $shade-900 margin: 0 0 8px; } &-spots { font-weight: 400; font-size: 15px; line-height: 1.6; color: var(--am-c-ct-text-op90); // $shade-800 margin: 0; &__price { font-weight: 700; font-size: 14px; line-height: 20px; color: var(--am-c-ct-primary); // $blue-900 margin-right: 8px; } &__number { font-weight: 700; } } } &__action { display: flex; flex-direction: row; align-items: center; flex: 0 0 auto; &-price { font-weight: 700; font-size: 14px; line-height: 20px; color: var(--am-c-ct-primary); // $blue-900 } .am-input-number { max-width: 130px; margin-left: 8px; } &.am-readonly { align-items: flex-start; } &.am-rw-420 { width: 100%; margin-top: 8px; .am-input-number { max-width: unset; width: 100%; margin-left: 0; } } } /* if it's event info step */ &.am-readonly { border: none; border-bottom: 1px solid var(--am-c-ct-text-op20); border-radius: 0; } } } // Admin #amelia-app-backend-new { @include card-ticket; } </style>

| ver. 1.4 | Github | . | PHP 5.4.45 | Generation time: 0 | proxy | phpinfo | Settings