tehran_taj/apps/user-app-v2/src/components/product/CartItem.vue

<!--
  Cart line item, restyled into the redesigned design language (see
  components/home/* and HomeView): LESS colour tokens, BEM class names,
  hairline borders, wine accent.

  Ported originally from legacy henza_pwa/src/components/product/cartItem.vue.
  Dropped there and still absent: the "اجرت ریالی" (Rial wage) block, which
  displayed `selectedVariant.rial_pay` — no such per-variant Rial field exists
  anywhere in our domain model, so there is nothing honest to show.

  All cart behaviour is unchanged: quantity increment/decrement, remove at
  qty 1, and the note affordance that opens the parent's drawer.
-->
<template>
  <article class="ci">
    <div class="ci__art">
      <img v-if="image" v-lazy="image" :alt="title" />
      <div v-else class="ci__artEmpty" aria-hidden="true">
        <Icon icon="vuesax-linear:diamonds" size="20" />
      </div>
    </div>

    <div class="ci__main">
      <h3 class="ci__title">{{ title }}</h3>

      <div class="ci__meta">
        <span class="ci__weight">{{ selectedVariant?.rashWeightGrams }} گرم</span>
        <span v-if="wage != null" class="ci__wage">اجرت {{ wageLabel }}٪</span>
      </div>

      <div class="ci__row">
        <!-- App-wide stepper order rule (also followed by SingleProduct.vue's
             .pd__qty): plus on the visual right, minus (or trash at qty 1) on
             the visual left. The page is RTL, so a plain flex row lays its
             DOM-first child on the right — plus has to come FIRST in markup,
             not last, to land there. Keep both steppers' DOM order in sync if
             either one changes. -->
        <div class="ci__qty">
          <button type="button" class="ci__qtyBtn" aria-label="افزودن" @click="increment">
            <Icon icon="vuesax-linear:add" size="16" />
          </button>
          <span class="ci__qtyValue">{{ value.qty }}</span>
          <button
            v-if="value.qty === 1"
            type="button"
            class="ci__qtyBtn ci__qtyBtn--danger"
            aria-label="حذف"
            @click="cart.remove(value)"
          >
            <Icon icon="vuesax-linear:trash" size="16" />
          </button>
          <button v-else type="button" class="ci__qtyBtn" aria-label="کاهش" @click="decrement">
            <Icon icon="vuesax-linear:minus" size="16" />
          </button>
        </div>

        <button type="button" class="ci__note" @click="emit('note', index)">
          <Icon icon="vuesax-linear:note-text" size="15" />
          {{ !value.note || value.note === '' ? 'توضیحات' : 'ویرایش توضیحات' }}
        </button>
      </div>

      <p v-if="value.note" class="ci__noteText">{{ value.note }}</p>
    </div>
  </article>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import Icon from '../icon/Icon.vue'
import { useProduct } from '../../composables/useProduct'
import { useCartStore, type CartItem } from '../../stores/cartStore'

const props = defineProps<{ value: CartItem }>()
const emit = defineEmits<{ (e: 'note', value: number): void }>()

const cart = useCartStore()
const index = cart.find_index(props.value)

const increment = () => {
  cart.updateFeild(props.value.qty + 1, index, props.value, 'qty')
}
const decrement = () => {
  cart.updateFeild(props.value.qty - 1, index, props.value, 'qty')
}

const { image, title, selectedVariant, wage } = useProduct(props.value.product, cart.variant(props.value))

const wageLabel = computed(() => {
  const w = wage.value
  if (w == null) return ''
  return w % 1 === 0 ? String(w) : w.toFixed(2)
})
</script>

<style scoped lang="less">
// Borderless: the cart is one continuous list, and the divider the parent
// draws between rows is what separates them now. Keeping a box per row on top
// of that would draw the same separation twice.
.ci {
  display: flex;
  gap: 14px;
  padding: 16px 2px;
  background: transparent;
}

.ci__art {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  overflow: hidden;
  background: @hairlineSoft;
}

.ci__art img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  object-position: center;
  display: block;
}

.ci__artEmpty {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: @inkFaint;
}

.ci__main {
  flex: 1;
  min-width: 0;
}

.ci__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: @ink;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ci__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 5px;
}

.ci__weight {
  font-size: 11.5px;
  font-weight: 700;
  color: @inkSoft;
}

.ci__wage {
  font-size: 10.5px;
  color: @inkFaint;
  padding-inline-start: 7px;
  border-inline-start: 1px solid @hairline;
}

.ci__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
}

.ci__qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: @hairlineSoft;
  border: 1px solid @hairline;
}

.ci__qtyBtn {
  width: 27px;
  height: 27px;
  border: 0;
  cursor: pointer;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: @inkSoft;
  background: @canvas;
  transition: transform 0.15s ease, color 0.15s ease;
}

.ci__qtyBtn--danger {
  color: @wine;
}

.ci__qtyBtn:active {
  transform: scale(0.9);
}

.ci__qtyValue {
  min-width: 22px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: @ink;
}

.ci__note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: @wine;
  white-space: nowrap;
}

.ci__noteText {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 11px;
  background: @hairlineSoft;
  font-size: 11.5px;
  line-height: 1.7;
  color: @inkMuted;
}
</style>