Vue.js: ربط Class و Style

<!-- ❌ The "Broken" Version: 5 v-if with class -->
<span v-if="status === 'pending'" class="badge yellow">Pending</span>
<span v-else-if="status === 'paid'" class="badge green">Paid</span>
<span v-else-if="status === 'shipped'" class="badge blue">Shipped</span>
<span v-else-if="status === 'delivered'" class="badge gray">Delivered</span>
<span v-else class="badge red">Cancelled</span>

<template>
  <span :class="['badge', statusClass]">{{ statusText }}</span>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({ status: String })

const statusClass = computed(() => ({
  pending: 'yellow',
  paid: 'green',
  shipped: 'blue',
  delivered: 'gray',
  cancelled: 'red'
}[props.status]))

const statusText = computed(() => ({
  pending: 'Pending',
  paid: 'Paid',
  shipped: 'Shipped',
  delivered: 'Delivered',
  cancelled: 'Cancelled'
}[props.status]))
</script>

<template>
  <!-- Static -->
  <div class="active">Static</div>
  
  <!-- Dynamic Strings -->
  <div :class="className">Dynamic</div>
</template>

<script setup>
import { ref } from 'vue'
const className = ref('active text-bold')
</script>

<template>
  <!-- Basics: isActive is true, Add active class -->
  <div :class="{ active: isActive }">Single</div>
  
  <!-- Multiple conditions -->
  <div :class="{
    active: isActive,
    'text-danger': hasError,
    disabled: !canEdit
  }">
    Multiple
  </div>
  
  <!-- Computed properties return objects -->
  <div :class="classObject">Computed</div>
</template>

<script setup>
import { ref, computed } from 'vue'

const isActive = ref(true)
const hasError = ref(false)
const canEdit = ref(true)

// Computed Properties:Dynamic Return class Object
const classObject = computed(() => ({
  active: isActive.value && !hasError.value,
  'text-danger': hasError.value,
  'bg-success': isActive.value
}))
</script>

<template>
  <!-- Array: Several class concatenation -->
  <div :class="[activeClass, errorClass]">Array</div>
  
  <!-- Trinomial Expression -->
  <div :class="[isActive ? 'active' : '', errorClass]">Ternary</div>
  
  <!-- Array + Object Mixing -->
  <div :class="[activeClass, { 'text-danger': hasError }]">Mixed</div>
  
  <!-- Nested Objects in an Array -->
  <div :class="[{ active: isActive }, errorClass]">Nested</div>
</template>

<script setup>
import { ref } from 'vue'
const activeClass = ref('active')
const errorClass = ref('text-danger')
const isActive = ref(true)
const hasError = ref(false)
</script>

<template>
  <!-- Static + Dynamic Merging(Vue Automatic Merge) -->
  <div class="static-class" :class="{ active: isActive }">
    Both
  </div>
  
  <!-- In the end class: "static-class active" or "static-class" -->
</template>

<!-- Parent Component -->
<UserCard class="shadow-lg" :class="{ active: isActive }" />

<!-- Child component UserCard.vue -->
<template>
  <!-- Receive -->
  <div :class="$attrs.class">
    <!-- Rendering "shadow-lg active" -->
  </div>
</template>

<template>
  <!-- Basic Objects -->
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
    Object
  </div>
</template>

<script setup>
import { ref } from 'vue'
const activeColor = ref('red')
const fontSize = ref(16)
</script>

<template>
  <div :style="{
    backgroundColor: 'red',        // → background-color
    fontSize: '16px',              // → font-size
    marginTop: '10px',             // → margin-top
    WebkitTransform: 'scale(2)'     // → -webkit-transform
  }">
    CSS naming
  </div>
</template>

<template>
  <!-- Array:Merge style objects in order(The later one overrides the earlier one)-->
  <div :style="[baseStyles, overrideStyles]">Array</div>
</template>

<script setup>
import { ref } from 'vue'

const baseStyles = ref({
  color: 'blue',
  fontSize: '14px'
})

const overrideStyles = ref({
  color: 'red',  // Coverage baseStyles.color
  fontWeight: 'bold'
})
</script>

// Write:
{ transform: 'rotate(45deg)' }

// Vue Auto-add:
{
  -webkit-transform: 'rotate(45deg)',
  transform: 'rotate(45deg)'
}

<template>
  <div :style="{
    '--main-color': mainColor,
    '--spacing': spacing + 'px'
  }">
    CSS Variables
  </div>
</template>

<script setup>
import { ref } from 'vue'
const mainColor = ref('#42b883')
const spacing = ref(20)
</script>

<style>
.dynamic {
  color: var(--main-color);
  padding: var(--spacing);
}
</style>

<template>
  <!-- 1. String -->
  <div :class="className">String</div>
  
  <!-- 2. Object -->
  <div :class="{ active: isActive, error: hasError }">Object</div>
  
  <!-- 3. Array -->
  <div :class="[activeClass, errorClass]">Array</div>
  
  <!-- 4. Array + Object -->
  <div :class="[activeClass, { disabled: !canEdit }]">Mixed</div>
  
  <!-- 5. Computed Properties -->
  <div :class="dynamicClass">Computed</div>
</template>

<script setup>
import { ref, computed } from 'vue'
const isActive = ref(true)
const hasError = ref(false)
const canEdit = ref(true)
const className = ref('badge')
const activeClass = ref('active')
const errorClass = ref('error')

const dynamicClass = computed(() => ({
  active: isActive.value,
  error: hasError.value,
  'cursor-not-allowed': !canEdit.value
}))
</script>

<template>
  <!-- 1. Basic Objects -->
  <div :style="{ color: 'red', fontSize: '16px' }">Object</div>
  
  <!-- 2. Multiple properties -->
  <div :style="{ backgroundColor: bg, padding: p + 'px' }">Multi</div>
  
  <!-- 3. Merging Sets -->
  <div :style="[baseStyles, themeStyles]">Array</div>
  
  <!-- 4. CSS Variable -->
  <div :style="{ '--theme-color': theme }">CSS Var</div>
  
  <!-- 5. Computed Properties -->
  <div :style="computedStyle">Computed</div>
</template>

<script setup>
import { ref, computed } from 'vue'
const bg = ref('#42b883')
const p = ref(20)
const theme = ref('#35495e')
const baseStyles = ref({ color: 'white' })
const themeStyles = ref({ backgroundColor: '#42b883' })

const computedStyle = computed(() => ({
  color: 'white',
  backgroundColor: theme.value,
  padding: `${p.value}px`
}))
</script>

<template>
  <span :class="['order-badge', statusClass]">
    {{ statusText }}
  </span>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  status: { type: String, required: true }
})

// 5 Status → 5 class
const statusClass = computed(() => {
  const map = {
    pending: 'bg-yellow',
    paid: 'bg-green',
    shipped: 'bg-blue',
    delivered: 'bg-gray',
    cancelled: 'bg-red'
  }
  return map[props.status] || 'bg-default'
})

const statusText = computed(() => {
  const map = {
    pending: 'Pending',
    paid: 'Paid',
    shipped: 'Shipped',
    delivered: 'Delivered',
    cancelled: 'Cancelled'
  }
  return map[props.status] || 'Unknown'
})
</script>

<style scoped>
.order-badge {
  padding: 4px 12px;
  border-radius: 12px;
  color: white;
  font-size: 12px;
}
.bg-yellow { background: #f59e0b; }
.bg-green { background: #10b981; }
.bg-blue { background: #3b82f6; }
.bg-gray { background: #6b7280; }
.bg-red { background: #ef4444; }
</style>