Skip to content

Commit a1f6d7d

Browse files
budiadionobudiadiono
committed
Accordion
1 parent 1c9380a commit a1f6d7d

File tree

12 files changed

+486
-3
lines changed

12 files changed

+486
-3
lines changed

‎demo/src/demo/accordion/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div>
2+
<ui-accordion @opening="opening" @closing="closing" @open="open" @close="close" @change="change" >
3+
<ui-accordion-item title="What is a dog?">
4+
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
5+
</ui-accordion-item>
6+
<ui-accordion-item title="What kinds of dogs are there?">
7+
There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.
8+
</ui-accordion-item>
9+
<ui-accordion-item title="How do you acquire a dog?">
10+
Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
11+
<p class="transition visible">
12+
A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.
13+
</ui-accordion-item>
14+
</ui-accordion>
15+
</div>

‎demo/src/demo/accordion/index.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Component } from 'vue-typed';
2+
import { Base } from '../base'
3+
4+
@Component({
5+
template: require('./index.html')
6+
})
7+
export class Accordion extends Base {
8+
9+
opening() {
10+
this.$ui.toast.info('opening')
11+
}
12+
13+
open() {
14+
this.$ui.toast.info('open')
15+
}
16+
17+
closing() {
18+
this.$ui.toast.info('closing')
19+
}
20+
21+
close() {
22+
this.$ui.toast.info('close')
23+
}
24+
25+
change() {
26+
this.$ui.toast.info('change')
27+
}
28+
29+
}

‎demo/src/demo/routes.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Accordion } from './accordion';
12
import { FormBasic } from './form/basic';
23
import { FormInline } from './form/inline';
34
import { FormVariations } from './form/variations';
@@ -29,6 +30,7 @@ import { Int } from './filters/int';
2930

3031
// Main routes builder
3132
const m = [
33+
{ group: 'component/accordion', text: 'Accordion', path: 'accordion', component: Accordion },
3234
{ group: 'component/form', text: 'Form Basic', path: 'form/basic', component: FormBasic },
3335
{ group: 'component/form', text: 'Inline Form', path: 'form/inline', component: FormInline },
3436
{ group: 'component/form', text: 'Variations', path: 'form/variations', component: FormVariations },

‎dist/vue-typed-ui.js‎

Lines changed: 161 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
* Released under the MIT license.
88
'*/
99
(function (global, factory) {
10-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('toastr'), require('lodash'), require('vue-typed'), require('moment'), require('sweetalert')) :
11-
typeof define === 'function' && define.amd ? define(['exports', 'vue', 'toastr', 'lodash', 'vue-typed', 'moment', 'sweetalert'], factory) :
12-
(factory((global.VueTypedUI = global.VueTypedUI || {}),global.Vue,global.toastr,global._,global.vueTyped,global.moment,global.swal));
10+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('toastr'), require('lodash'), require('vue-typed'), require('moment'), require('sweetalert')) :
11+
typeof define === 'function' && define.amd ? define(['exports', 'vue', 'toastr', 'lodash', 'vue-typed', 'moment', 'sweetalert'], factory) :
12+
(factory((global.VueTypedUI = global.VueTypedUI || {}),global.Vue,global.toastr,global._,global.vueTyped,global.moment,global.swal));
1313
}(this, (function (exports,Vue,toastr,_,vueTyped,moment,swal) { 'use strict';
1414

1515
function __$styleInject(css, returnValue) {
@@ -2047,6 +2047,162 @@ Segment = __decorate([vueTyped.Component({
20472047
template: '<div class="ui segment"><slot></slot></div>'
20482048
})], Segment);
20492049

2050+
var _AccordionBase = function (_Vue) {
2051+
inherits(_AccordionBase, _Vue);
2052+
2053+
function _AccordionBase() {
2054+
classCallCheck(this, _AccordionBase);
2055+
2056+
/**
2057+
* Only allow one section open at a time
2058+
*
2059+
* @default true
2060+
* @type {boolean}
2061+
*/
2062+
var _this = possibleConstructorReturn(this, (_AccordionBase.__proto__ || Object.getPrototypeOf(_AccordionBase)).apply(this, arguments));
2063+
2064+
_this.exclusive = true;
2065+
/**
2066+
* Event on title that will cause accordion to open
2067+
*
2068+
* @default 'click'
2069+
* @type {string}
2070+
*/
2071+
_this.on = 'click';
2072+
/**
2073+
* Whether child content opacity should be animated (may cause performance issues with many child elements)
2074+
*
2075+
* @default true
2076+
* @type {boolean}
2077+
*/
2078+
_this.animateChildren = true;
2079+
/**
2080+
* Duration in ms of opening animation
2081+
*
2082+
* @default 500
2083+
* @type {number}
2084+
*/
2085+
_this.duration = 500;
2086+
/**
2087+
* Close open nested accordion content when an element closes
2088+
*
2089+
* @default true
2090+
* @type {boolean}
2091+
*/
2092+
_this.closeNested = true;
2093+
/**
2094+
* Allow active sections to collapse
2095+
*
2096+
* @default true
2097+
* @type {boolean}
2098+
*/
2099+
_this.collapsible = true;
2100+
return _this;
2101+
}
2102+
2103+
return _AccordionBase;
2104+
}(Vue);
2105+
2106+
__decorate([vueTyped.Prop({
2107+
type: Boolean
2108+
})], _AccordionBase.prototype, "exclusive", void 0);
2109+
__decorate([vueTyped.Prop({
2110+
type: String
2111+
})], _AccordionBase.prototype, "on", void 0);
2112+
__decorate([vueTyped.Prop({
2113+
type: Boolean
2114+
})], _AccordionBase.prototype, "animateChildren", void 0);
2115+
__decorate([vueTyped.Prop({
2116+
type: Number
2117+
})], _AccordionBase.prototype, "duration", void 0);
2118+
__decorate([vueTyped.Prop({
2119+
type: Boolean
2120+
})], _AccordionBase.prototype, "closeNested", void 0);
2121+
__decorate([vueTyped.Prop({
2122+
type: Boolean
2123+
})], _AccordionBase.prototype, "collapsible", void 0);
2124+
2125+
var Accordion = function (_AccordionBase2) {
2126+
inherits(Accordion, _AccordionBase2);
2127+
2128+
function Accordion() {
2129+
classCallCheck(this, Accordion);
2130+
return possibleConstructorReturn(this, (Accordion.__proto__ || Object.getPrototypeOf(Accordion)).apply(this, arguments));
2131+
}
2132+
2133+
createClass(Accordion, [{
2134+
key: 'mounted',
2135+
value: function mounted() {
2136+
var self = this;
2137+
$(this.$el).accordion({
2138+
exclusive: this.exclusive,
2139+
on: this.on,
2140+
animateChildren: this.animateChildren,
2141+
closeNested: this.closeNested,
2142+
collapsible: this.collapsible,
2143+
duration: this.duration,
2144+
onOpening: function onOpening() {
2145+
self.$emit('opening', this);
2146+
},
2147+
onOpen: function onOpen() {
2148+
self.$emit('open', this);
2149+
},
2150+
onClosing: function onClosing() {
2151+
self.$emit('closing', this);
2152+
},
2153+
onClose: function onClose() {
2154+
self.$emit('close', this);
2155+
},
2156+
onChange: function onChange() {
2157+
self.$emit('change', this);
2158+
}
2159+
});
2160+
}
2161+
}]);
2162+
return Accordion;
2163+
}(_AccordionBase);
2164+
Accordion = __decorate([vueTyped.Component({
2165+
template: '<div class="ui accordion"><slot></slot></div>'
2166+
})], Accordion);
2167+
2168+
var _AccordionItemBase = function (_Vue) {
2169+
inherits(_AccordionItemBase, _Vue);
2170+
2171+
function _AccordionItemBase() {
2172+
classCallCheck(this, _AccordionItemBase);
2173+
return possibleConstructorReturn(this, (_AccordionItemBase.__proto__ || Object.getPrototypeOf(_AccordionItemBase)).apply(this, arguments));
2174+
}
2175+
2176+
return _AccordionItemBase;
2177+
}(Vue);
2178+
2179+
__decorate([vueTyped.Prop({
2180+
type: String
2181+
})], _AccordionItemBase.prototype, "title", void 0);
2182+
__decorate([vueTyped.Prop({
2183+
type: Boolean
2184+
})], _AccordionItemBase.prototype, "active", void 0);
2185+
2186+
var AccordionItem = function (_AccordionItemBase2) {
2187+
inherits(AccordionItem, _AccordionItemBase2);
2188+
2189+
function AccordionItem() {
2190+
classCallCheck(this, AccordionItem);
2191+
return possibleConstructorReturn(this, (AccordionItem.__proto__ || Object.getPrototypeOf(AccordionItem)).apply(this, arguments));
2192+
}
2193+
2194+
createClass(AccordionItem, [{
2195+
key: 'activeCss',
2196+
get: function get() {
2197+
return this.active ? ' active' : '';
2198+
}
2199+
}]);
2200+
return AccordionItem;
2201+
}(_AccordionItemBase);
2202+
AccordionItem = __decorate([vueTyped.Component({
2203+
template: '<span>\n\t\t<div :class="activeCss + \'title\'">\n\t\t\t<i class="dropdown icon"></i> {{title}}\n\t\t</div>\n\t\t<div :class="activeCss + \'content\'">\n\t\t\t<slot></slot>\n\t\t</div>\n\t</span>'
2204+
})], AccordionItem);
2205+
20502206
var _MenuBaseBase = function (_Vue) {
20512207
inherits(_MenuBaseBase, _Vue);
20522208

@@ -2838,6 +2994,8 @@ var components = Object.freeze({
28382994
get TabItem () { return TabItem; },
28392995
get Pusher () { return Pusher; },
28402996
get Segment () { return Segment; },
2997+
get Accordion () { return Accordion; },
2998+
get AccordionItem () { return AccordionItem; },
28412999
get MenuVertical () { return MenuVertical; },
28423000
get MenuHorizontal () { return MenuHorizontal; },
28433001
get MenuItem () { return MenuItem; },

‎doc/api.json‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,68 @@
11
{
2+
"component/accordion": {
3+
"dir": "src/components/containers/accordion",
4+
"id": "component/accordion",
5+
"module": "accordion",
6+
"base": {
7+
"Vue": "vue"
8+
},
9+
"type": "component",
10+
"readme": false,
11+
"props": {
12+
"animate-children": {
13+
"type": "boolean",
14+
"default": "true",
15+
"description": "Whether child content opacity should be animated (may cause performance issues with many child elements)"
16+
},
17+
"close-nested": {
18+
"type": "boolean",
19+
"default": "true",
20+
"description": "Close open nested accordion content when an element closes"
21+
},
22+
"collapsible": {
23+
"type": "boolean",
24+
"default": "true",
25+
"description": "Allow active sections to collapse"
26+
},
27+
"duration": {
28+
"type": "number",
29+
"default": "500",
30+
"description": "Duration in ms of opening animation"
31+
},
32+
"exclusive": {
33+
"type": "boolean",
34+
"default": "true",
35+
"description": "Only allow one section open at a time"
36+
},
37+
"on": {
38+
"type": "string",
39+
"default": "'click'",
40+
"description": "Event on title that will cause accordion to open"
41+
}
42+
},
43+
"methods": {}
44+
},
45+
"component/accordion-item": {
46+
"dir": "src/components/containers/accordion-item",
47+
"id": "component/accordion-item",
48+
"module": "accordion-item",
49+
"base": {
50+
"Vue": "vue"
51+
},
52+
"type": "component",
53+
"readme": false,
54+
"props": {
55+
"active": {
56+
"type": "boolean",
57+
"description": "Set accordion to active"
58+
},
59+
"title": {
60+
"type": "string",
61+
"description": "Accordion title"
62+
}
63+
},
64+
"methods": {}
65+
},
266
"component/button": {
367
"dir": "src/components/form-inputs/button",
468
"id": "component/button",

‎src/components/containers/accordion-item/_base.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
* PLEASE DO NOT EDIT THIS FILE (automatically generated from ./schema/props.json)
3+
*/
4+
import {
5+
Prop
6+
} from "vue-typed"
7+
import * as Vue from "vue"
8+
9+
export abstract class _AccordionItemBase extends Vue {
10+
11+
/**
12+
* Accordion title
13+
*
14+
* @type {string}
15+
*/
16+
@Prop({
17+
type: String
18+
})
19+
title: string
20+
21+
/**
22+
* Set accordion to active
23+
*
24+
* @type {boolean}
25+
*/
26+
@Prop({
27+
type: Boolean
28+
})
29+
active: boolean
30+
31+
}

‎src/components/containers/accordion-item/index.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { _AccordionItemBase } from './_base';
2+
import { Component } from 'vue-typed';
3+
4+
@Component({
5+
template:
6+
`<span>
7+
<div :class="activeCss + 'title'">
8+
<i class="dropdown icon"></i> {{title}}
9+
</div>
10+
<div :class="activeCss + 'content'">
11+
<slot></slot>
12+
</div>
13+
</span>`
14+
})
15+
export class AccordionItem extends _AccordionItemBase {
16+
get activeCss() {
17+
return this.active ? ' active' : '';
18+
}
19+
}

‎src/components/containers/accordion-item/schema/props.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"base": {
3+
"Vue": "vue"
4+
},
5+
"props": {
6+
"title": {
7+
"type": "string",
8+
"description": "Accordion title"
9+
},
10+
"active": {
11+
"type": "boolean",
12+
"description": "Set accordion to active"
13+
}
14+
}
15+
}

0 commit comments

Comments
 (0)