changes

app/components/pos/Address.vue

@@ -0,0 +1,87 @@
+<script setup>
+const props = defineProps({
+  address: Object,
+  selected: Boolean,
+});
+
+const showModal = ref(false);
+
+function openEditModal() {
+  showModal.value = {
+    component: "pos/EditAddress",
+    title: "Cập nhật địa chỉ",
+    width: "50%",
+    height: "auto",
+    vbind: { address: props.address },
+  };
+}
+</script>
+
+<template>
+  <div
+    :class="['card is-clickable', selected && 'selected']"
+    @click="$emit('selectAddress', address.id)"
+  >
+    <div class="card-content is-flex is-justify-content-space-between">
+      <div>
+        <div class="fs-14 is-flex is-gap-1 is-align-items-center">
+          <p>{{ address.address_detail }}</p>
+          <span
+            v-if="address.is_default"
+            class="tag is-primary is-light"
+          >
+            Mặc định</span
+          >
+          <button
+            @click.stop="openEditModal"
+            class="button is-small is-white rounded-full p-0 size-7"
+          >
+            <span class="icon">
+              <Icon
+                name="material-symbols:edit-outline-rounded"
+                :size="16"
+                class="has-text-primary"
+              />
+            </span>
+          </button>
+        </div>
+        <p class="has-text-grey is-size-7">
+          <span>Phường {{ address.ward }}</span>
+          <span>, </span>
+          <span>Quận {{ address.district }}</span>
+          <span>, </span>
+          <span>{{ address.city }}</span>
+        </p>
+      </div>
+      <span
+        v-if="selected"
+        class="icon has-background-primary-95 rounded-full"
+      >
+        <Icon
+          name="material-symbols:check-rounded"
+          :size="18"
+          class="has-text-primary"
+        />
+      </span>
+    </div>
+    <Modal
+      v-if="showModal"
+      v-bind="showModal"
+      @close="showModal = null"
+      @update="$emit('update')"
+    />
+  </div>
+</template>
+<style scoped>
+.card {
+  &:hover {
+    border-color: var(--bulma-primary);
+  }
+  &.selected {
+    border-color: var(--bulma-primary);
+  }
+}
+.card-content {
+  --bulma-card-content-padding: 1rem;
+}
+</style>