Line data    Source code

       1           1 : <template lang="pug">
       2           3 : Card.x-prop-list(title='Properties' @focusin.native='setSelected()')
       3           3 :   template(#icons='c')
       4           3 :     button.btn.btn-sm.btn-outline-dark.ml-auto(title='Add Property' @click='doCreateProperty()')
       5           3 :       i.fa.fa-plus
       6             :     button.btn.btn-sm.btn-outline-dark.ml-1(v-if='!transition' title='Add Transition' @click='doCreateTransition()')
       7             :       i.fa.fa-stopwatch
       8             :   template(#info='c')
       9             :     p
      10           0 :       | The #[strong Properties] card displays the #[a(href='https://mro-dev.web.cern.ch/docs/std/ssvg-specification.html#name-the-state-element-2' target="_blank" rel="noopener") SSVG state element] content,
      11             :       | allowing to navigate in
      12             :       | #[a(href='https://mro-dev.web.cern.ch/docs/std/ssvg-specification.html#name-the-property-element-2' target="_blank" rel="noopener") property] and
      13             :       | #[a(href='https://mro-dev.web.cern.ch/docs/std/ssvg-specification.html#name-the-computed-element-2' target="_blank" rel="noopener") computed] elements
      14             :       | as well as their
      15             :       | #[a(href='https://mro-dev.web.cern.ch/docs/std/ssvg-specification.html#name-the-relation-element-2' target="_blank" rel="noopener") relation],
      16             :       | #[a(href='https://mro-dev.web.cern.ch/docs/std/ssvg-specification.html#name-the-transform-element-2' target="_blank" rel="noopener") transform] (and other...) sub-elements.
      17          16 :     p #[strong Note:] selecting elements in this list will open "edit" cards on the right-panel.
      18             :     p #[strong Note:] click on #[i.fa.fa-plus] to create new elements.
      19             :     p #[strong Note:] use properties inputs to modify current document state.
      20             :   template(#default='c')
      21             :     li.x-list(key='props')
      22             :       Transition(v-if='transition' key='transition' :state='stateElement' :transition='transition')
      23             :       Property(v-for='prop, idx in properties' :key='"property-" + idx' :state='stateElement' :property='prop')
      24             :       Computed(v-for='prop, idx in computed' :key='"computed-" + idx' :state='stateElement' :property='prop')
      25           0 : </template>
      26             : <script src='./SSVGPropList.vue.js' />