Skip to content

01 Accordions - v_more...

v_more_v4

Generic accordion component with header, open and closed slots

  • title
  • expanded { type: Boolean, default: false }
  • icon { type: String, default: 'fa-angle-down' }
  • icon_close { type: String, default: 'fa-angle-up' }
  • container_class { type: String, default: 'xd-grid-l8 xd-grid-s2 ' }
  • alwaysVisible { type: Boolean, default: false } - show header even on no data (by default v/-more will be not visible)
  • slots header,open,closed
  • open
  • close
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
Vue.component('v_more_v4', {
  template: `
<div v-if="hasDefaultSlot" :data-component="$options.name" class="v_more_v4" :class="{'v_more_v4_expanded':more}">
  <div :class="container_class" style="align-items:center; padding:var(--xd-size-s)  var(--xd-size-l) ">
    <a @click.self="expand" style="user-select: none;" class="xd-paddingy" :title="title || $t('v_more_defalut_title')" :class="extra_options_class">
      <i v-if="!more" @click.self="expand" class="fa fa-lg" :class="icon"></i>
      <i v-else class="fa fa-lg" @click.self="expand" :class="icon_close"></i>
      {{title}}</a>
    <div v-if="extra_options" class="xd-span-6 xd-grid-l6 xd-grid-s4 xd-center xd-gap xd-text-medium" style="direction:rtl;align-items:center;">
      <slot name="header"></slot>
      <slot name="open" v-if="more"></slot>
      <slot name="closed" v-if="!more"></slot>
    </div>
  </div>

  <slot v-if="more"></slot>
</div>`,
  props: {
    title: { type: String, default: 'Więcej ...' },
    icon: { type: String, default: 'fa-angle-down' },
    icon_close: { type: String, default: 'fa-angle-up' },
    expanded: { type: Boolean, default: false },
    container_class: { type: String, default: 'xd-grid-l8  xd-grid-s2  ' },
    alwaysVisible: false
  },
  data: function () {
    return {
      more: this.expanded
    };
  },
  methods: {
    expand: function () {
      this.more = !this.more
    }
  },
  mounted() {
    if (this.expanded == true)
      this.$emit('open', null);
  },
  computed: {

    extra_options() {
      if (this.$slots.open || this.$slots.closed || this.$slots.header)
        return true;
    },
    extra_options_class() {
      if (this.more && (this.$slots.open || this.$slots.header))
        return 'xd-span-2 xd-nw xd-medium xd-text-dark '
      else if (!this.more && (this.$slots.closed || this.$slots.header))
        return 'xd-span-2 xd-nw xd-medium xd-text-dark '
      else
        return 'xd-span-8 xd-nw xd-medium xd-text-dark'
    },
    hasDefaultSlot() {
      return !!this.$slots.default || this.alwaysVisible
    },
  },
  watch: {

    more() {
      if (this.more == true)
        this.$emit('open', null);
    }
  }
});
HTML
1
2
3
4
5
6
7
8
<v_more_v4 title="Debug" class="print-hide" :expanded="false">
  <template v-slot:header>
  </template>
  <template v-slot:open>
  </template>
  <template v-slot:closed>
  </template>
</v_more_v4>
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<v_more_v4 title="Order Notes" class="OPTION:xd-info" icon="OPTION:fa-bell-o" :highlight="OPTION:true" :expand="OPTION:true" container_class="OPTION:class for top panel">
  <template v-slot:closed>
    <small class="xd-span-5 xd-nw xd-left">OPTION: visible in closed state </small>
  </template>
  <template v-slot:open>
    <div class="xd-nw">OPTION: visible when open</div>
  </template>
  <template v-slot:header>
    <div class=" xd-nw">OPTION: aways visible</div>
  </template>
  Content
</v_more_v4>
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<v_more_v4 data-role="sys_administrator" v-if="hasRole('sys_administrator')" @open="fetch_dataset('/api/core/roles/user/'+ system.username_current,'roles_list')" title="Roles"
  class="print-hide xd-white">
  <div :class="{ 'xd-responsive': isMobile() }" class="xd-padding-l">
    <table class="xd-table">
      <thead>
        <tr>
          <th></th>
          <th>Role</th>
          <th>Assigned at</th>
          <th>Assigned by</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in datasets.roles_list">
          <td class="xd-padding"><a
              @click="axpost('/api/core/roles/user-remove/{role_name}/{username}', item).then(function (response) { fetch_dataset('/api/core/roles/user/'+ system.username_current,'roles_list')})"
              class="xd-button xd-border xd-border-danger xd-round">Remove</a></td>
          <td class="xd-line">{{item.role_name}}</td>
          <td class="xd-line">{{item.claim_created_at | formatDateLong}}</td>
          <td class="xd-line">{{item.claim_created_by }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</v_more_v4>

img

v_more_html

Simple accordion component aim to Limit height of html content and show more button

props

  • title { type: String },
  • height { type: Number,default:100 },

Examples

HTML
1
2
3
4
5
6
7
8
9
<v_more_html title="Hello" >
<div>Any html 
  <li>line1</li>
  <li>line2</li>
  <li>line3</li>
  <li>line4</li>
  <li>line5</li>
</div>
</v_more_html>
HTML
1
2
3
4
5
<v_more_v4 title="Accounts" v-if="hasRole('...')" @open="fetch_dataset('/api/...','data')" class="xd-white" :expanded="true">
<div>
...
</div>
</v_more_html>