1 | import { defineComponent } from 'vue';
|
2 | import { CollapsibleMixin, defaultPropValue, colorVariantClass, sizePropValidator } from '../../mixins/index.mjs';
|
3 | /**
|
4 | * Slot for default sidebar content
|
5 | * @name default
|
6 | * @kind slot
|
7 | */
|
8 | const componentName = 'ISidebar';
|
9 | export default defineComponent({
|
10 | name: componentName,
|
11 | mixins: [
|
12 | CollapsibleMixin
|
13 | ],
|
14 | provide() {
|
15 | return {
|
16 | sidebar: this
|
17 | };
|
18 | },
|
19 | props: {
|
20 | /**
|
21 | * The aria-label of the sidebar
|
22 | * @type String
|
23 | * @default Sidebar
|
24 | * @name ariaLabel
|
25 | */
|
26 | ariaLabel: {
|
27 | type: String,
|
28 | default: 'Sidebar'
|
29 | },
|
30 | /**
|
31 | * Determines if the sidebar should close when clicking a sidebar item
|
32 | * @type Boolean
|
33 | * @default true
|
34 | * @name collapseOnItemClick
|
35 | */
|
36 | collapseOnItemClick: {
|
37 | type: Boolean,
|
38 | default: true
|
39 | },
|
40 | /**
|
41 | * Determines if the sidebar should close when clicking outside, on the overlay
|
42 | * @type Boolean
|
43 | * @default true
|
44 | * @name collapseOnClickOutside
|
45 | */
|
46 | collapseOnClickOutside: {
|
47 | type: Boolean,
|
48 | default: true
|
49 | },
|
50 | /**
|
51 | * The collapse position of the sidebar
|
52 | * @type fixed | absolute | relative
|
53 | * @default absolute
|
54 | * @name collapsePosition
|
55 | */
|
56 | collapsePosition: {
|
57 | type: String,
|
58 | default: 'absolute'
|
59 | },
|
60 | /**
|
61 | * The color variant of the sidebar
|
62 | * @type light | dark
|
63 | * @default light
|
64 | * @name color
|
65 | */
|
66 | color: {
|
67 | type: String,
|
68 | default: defaultPropValue(componentName, 'color')
|
69 | },
|
70 | /**
|
71 | * The placement of the sidebar
|
72 | * @type left | right
|
73 | * @default left
|
74 | * @name placement
|
75 | */
|
76 | placement: {
|
77 | type: String,
|
78 | default: 'left'
|
79 | },
|
80 | /**
|
81 | * The size variant of the navbar
|
82 | * @type sm | md | lg
|
83 | * @default md
|
84 | * @name size
|
85 | */
|
86 | size: {
|
87 | type: String,
|
88 | default: defaultPropValue(componentName, 'size'),
|
89 | validator: sizePropValidator
|
90 | }
|
91 | },
|
92 | emits: [
|
93 | /**
|
94 | * Event emitted for setting the modelValue
|
95 | * @event update:modelValue
|
96 | */
|
97 | 'update:modelValue'
|
98 | ],
|
99 | computed: {
|
100 | classes() {
|
101 | return {
|
102 | ...this.collapsibleClasses,
|
103 | ...colorVariantClass(this),
|
104 | [`-${this.size}`]: Boolean(this.size),
|
105 | [`-collapse-${this.collapsePosition}`]: true,
|
106 | [`-placement-${this.placement}`]: true
|
107 | };
|
108 | },
|
109 | sidebarWrapperTransition() {
|
110 | return this.collapsePosition !== 'relative'
|
111 | ? 'sidebar-wrapper-none-transition'
|
112 | : 'sidebar-wrapper-transition';
|
113 | },
|
114 | sidebarTransition() {
|
115 | return this.collapsePosition !== 'relative'
|
116 | ? 'sidebar-transition'
|
117 | : 'sidebar-none-transition';
|
118 | }
|
119 | },
|
120 | methods: {
|
121 | onItemClick() {
|
122 | if (this.collapseOnItemClick && this.open) {
|
123 | this.setOpen(false);
|
124 | }
|
125 | },
|
126 | onOverlayClick() {
|
127 | if (this.collapseOnClickOutside && this.open) {
|
128 | this.setOpen(false);
|
129 | }
|
130 | }
|
131 | }
|
132 | });
|
133 | //# sourceMappingURL=script.mjs.map |
\ | No newline at end of file |