Added attunement to item viewer

app/imports/client/ui/creature/creatureProperties/CreaturePropertyDialog.vue

@@ -50,6 +50,7 @@
           :model="model"
           @select-sub-property="selectSubProperty"
           @remove="remove"
+          @change="change"
         />
       </v-fade-transition>
     </template>

app/imports/client/ui/properties/shared/PropertyViewer.vue

@@ -53,6 +53,7 @@
       class="property-viewer"
       :model="model"
       @select-sub-property="id => selectSubProperty(id)"
+      @change="e => $emit('change', e)"
       @remove="$emit('remove')"
     />
     <v-row dense>

app/imports/client/ui/properties/viewers/ItemViewer.vue

@@ -99,7 +99,6 @@
           </v-layout>
           <v-layout
             align-center
-            :class="{'mb-2': model.attuned}"
           >
             <v-icon
               class="mr-2"
@@ -128,7 +127,18 @@
         </v-icon>
         <span class="ml-1">Equipped</span>
       </property-field>
-      <property-field v-if="model.requiresAttunement">
+      <property-field
+        v-if="model.requiresAttunement && context.creatureId"
+        name="Requires attunement"
+      >
+        <smart-switch
+          class="ml-4"
+          label="Attuned"
+          :value="model.attuned"
+          @change="(value, ack) => $emit('change', { path: ['attuned'], value, ack })"
+        />
+      </property-field>
+      <property-field v-if="model.requiresAttunement && !context.creatureId">
         <template v-if="model.attuned">
           <v-icon
             style="overflow: hidden;"