FileMaster

Edit File: Extras.vue

<template>
  <div class="am-fs__extras" :style="cssVars">
    <div class="am-fs__extras-heading">
      <span v-if="extrasOptions.heading.visibility" class="am-fs__extras-heading-main">
        {{labelsDisplay('extras_available')}}
      </span>
      <span
        class="am-fs__extras-heading-required am-error-text"
      >
        {{ `${labelsDisplay('min_req_extras_colon')} 2` }}
      </span>
    </div>
    <div class="am-fs__extras-main">
      <AmCollapse>
        <AmCollapseItem
          v-for="extra in extrasArray"
          :key="extra.id"
          :button-closed="labelsDisplay('extras_card_open')"
          :button-opened="labelsDisplay('extras_card_close')"
        >
          <template #heading>
            <div class="am-fs__extras-card__header">
              <span class="am-fs__extras-card__header-left">
                {{ extra.name }}
              </span>
              <span class="am-fs__extras-card__header-right">
                <span class="card-text">
                  {{useFormattedPrice(extra.price)}}
                </span>
                <AmInputNumber v-model="extra.quantity" :max="extra.maxQuantity" :min="0" size="small"/>
              </span>
            </div>
          </template>
          <template #default>
            <div v-if="extrasOptions.description.visibility || extrasOptions.duration.visibility" class="am-fs__extras-card__content" :style="cssVars">
              <div v-if="extra.description && extrasOptions.description.visibility" class="am-fs__extras-card__content-main">
                {{ extra.description }}
              </div>
              <div v-if="extrasOptions.duration.visibility" class="am-fs__extras-card__content-sub">
                {{`${labelsDisplay('duration_colon')} 60 min`}}
              </div>
            </div>
          </template>
        </AmCollapseItem>
      </AmCollapse>
    </div>
  </div>
</template>

let langKey = inject('langKey')
let amLabels = inject('labels')

let pageRenderKey = inject('pageRenderKey')
let amCustomize = inject('customize')

function labelsDisplay (label) {
  let computedLabel = computed(() => {
    let translations = amCustomize.value[pageRenderKey.value].extrasStep.translations
    return translations && translations[label] && translations[label][langKey.value] ? translations[label][langKey.value] : amLabels[label]
  })

return computedLabel.value
}

let extrasOptions = computed(() => {
  return amCustomize.value[pageRenderKey.value].extrasStep.options
})

let extrasArray = ref([
  {
    name: 'Extra 1',
    price: '5',
    quantity: 0,
    maxQuantity: 5,
    description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
  },
  {
    name: 'Extra 2',
    price: '3',
    quantity: 0,
    maxQuantity: 5,
    description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
  },
  {
    name: 'Extra 3',
    price: '7',
    quantity: 0,
    maxQuantity: 5,
    description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
  }
])

// * Colors
let amColors = inject('amColors')
let cssVars = computed(() => {
  return {
    '--am-c-extras-text': amColors.value.colorMainText,
    '--am-c-extras-text-op80': useColorTransparency(amColors.value.colorMainText, 0.8)
  }
})
</script>

* {
        font-family: var(--am-font-family);
        box-sizing: border-box;
      }

&-heading {
        display: flex;
        flex-direction: column;
        margin-bottom: 4px;

& > * {
          $count: 3;
          @for $i from 0 through $count {
            &:nth-child(#{$i + 1}) {
              animation: 600ms cubic-bezier(.45,1,.4,1.2) #{$i*100}ms am-animation-slide-up;
              animation-fill-mode: both;
            }
          }
        }

&-main {
          display: block;
          font-size: var(--am-fs-label);
          font-weight: 500;
          line-height: 1.6;
          color: var(--am-c-extras-text);
          margin-bottom: 4px;
        }

&-sub {
          display: block;
          font-size: 13px;
          font-weight: 400;
          line-height: 1.3846;
          color: var(--am-c-extras-text-op80);
          margin-bottom: 4px;
        }

&-required {
          display: block;
          font-size: 13px;
          font-weight: 400;
          line-height: 1.3846;
          color: var(--am-c-extras-text);
          margin-bottom: 4px;

&.am-error-text {
            color: var(--am-c-error);
          }
        }
      }

&-main {
        .am-collapse-item {
          $count: 3;
          @for $i from 0 through $count {
            &:nth-child(#{$i + 1}) {
              animation: 600ms cubic-bezier(.45,1,.4,1.2) #{$i*100}ms am-animation-slide-up;
              animation-fill-mode: both;
            }
          }
        }
      }

&-card {
        &__header {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: var(--am-fs-label);
          line-height: 1.6;

&-left {
            display: flex;
            align-items: center;
            justify-content: left;
            font-size: var(--am-fs-label);
            line-height: 1.6;
            color: var(--am-c-extras-text);
          }

&-right {
            display: flex;
            align-items: center;
            justify-content: right;
            font-size: var(--am-fs-label);
            line-height: 1.6;

.card-text {
              font-size: var(--am-fs-label);
              font-weight: 500;
              line-height: 1.6;
              color: var(--am-c-primary);
              margin-right: 16px;
            }
          }

.am-input-number {
            max-width: 100px;
          }
        }

&__content {
          font-size: 14px;
          font-weight: 400;
          line-height: 1.4285;

&-main {
            font-size: 14px;
            font-weight: 400;
            line-height: 1.4285;
            margin-bottom: 16px;
            color: var(--am-c-extras-text-op80);
          }

&-sub {
            font-size: 14px;
            font-weight: 400;
            line-height: 1.4285;
            color: var(--am-c-extras-text-op80);
          }
        }
      }
    }
  }
}
</style>

Back