@zeedhi/zd-field-group-vue 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +111 -0
  2. package/dist/field-group-vue.esm.js +473 -0
  3. package/dist/field-group-vue.umd.js +479 -0
  4. package/package.json +24 -0
  5. package/types/ZdFieldGroup.d.ts +41 -0
  6. package/types/index.d.ts +3 -0
package/README.md ADDED
@@ -0,0 +1,111 @@
1
+ # Componente Field Group para Zeedhi
2
+
3
+ <p align="center">
4
+ <a href="#instalação">Instalação</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
5
+ <a href="#uso-básico">Uso Básico</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
6
+ <a href="#propriedades">Propriedades</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
7
+ </p>
8
+
9
+ O component zd-field-group é um card capas de agrupar campos
10
+
11
+ <p align="center">
12
+ <img alt="zd-field-group" src="./img/field-group.png" width="100%">
13
+ </p>
14
+
15
+ ## Instalação
16
+
17
+ Para instalar o pacote basta rodar o seguinte comando:\
18
+ `npm i @zeedhi/zd-field-group`\
19
+ Com isso, dois pacotes serão instalados: o @zeedhi/zd-field-group-common e o @zeedhi/zd-field-group-vue.\
20
+ Após a instalação, é necessário que você importe o pacote @zeedhi/zd-field-group-vue dentro de seu arquivo de configuração `zeedhi.ts`
21
+
22
+ ```shell
23
+ import { ZdFieldGroup } from '@zeedhi/zd-field-group-vue';
24
+
25
+ Vue.component('ZdFieldGroup', ZdFieldGroup);
26
+ ```
27
+
28
+ Já o pacote @zeedhi/zd-field-group-common deve ser importado no arquivo controller do componente.
29
+
30
+ ## Uso Básico
31
+
32
+ Para usar, defina a propriedade component como 'ZdFieldGroup'.
33
+
34
+ ```json
35
+ {
36
+ "name": "field-group-example",
37
+ "component": "ZdFieldGroup"
38
+ }
39
+ ```
40
+
41
+ ## Propriedades
42
+
43
+ <table>
44
+ <thead>
45
+ <tr>
46
+ <th>Nome</th>
47
+ <th>Tipo</th>
48
+ <th>Default</th>
49
+ <th>Descrição</th>
50
+ </tr>
51
+ </thead>
52
+ <tbody>
53
+ <tr>
54
+ <td>disableActionRotate</td>
55
+ <td>boolean | string</td>
56
+ <td>true</td>
57
+ <td>Desativa a animação de rotação de ação ao expandir ou recolher o cartão recolhido</td>
58
+ </tr>
59
+ <tr>
60
+ <td>expandButton</td>
61
+ <td>IButton</td>
62
+ <td>undefined</td>
63
+ <td>Se definido, substitui o ícone de expansão pelo botão definido</td>
64
+ </tr>
65
+ <tr>
66
+ <td>expanded</td>
67
+ <td>boolean | string</td>
68
+ <td>false</td>
69
+ <td>Define se o componente está aberto ou fecahdo</td>
70
+ </tr>
71
+ <tr>
72
+ <td>header</td>
73
+ <td>IComponent[]</td>
74
+ <td>[]</td>
75
+ <td>Componentes a serem exibidos no cabeçalho</td>
76
+ </tr>
77
+ <tr>
78
+ <td>hideAction</td>
79
+ <td>boolean | string</td>
80
+ <td>false</td>
81
+ <td>Oculta o ícone de expansão</td>
82
+ </tr>
83
+ <tr>
84
+ <td>iconColor</td>
85
+ <td>string</td>
86
+ <td>var(--v-primary-base)</td>
87
+ <td>Define a cor do icone de expansão</td>
88
+ </tr>
89
+ <tr>
90
+ <td>iconName</td>
91
+ <td>string</td>
92
+ <td>expand</td>
93
+ <td>Define o icone de expansão</p>
94
+ </td>
95
+ </tr>
96
+ <tr>
97
+ <td>lazyLoad</td>
98
+ <td>boolean</td>
99
+ <td>boolean | string</td>
100
+ <td>O conteúdo será carregado somente quando o cartão recolhido for aberto</td>
101
+ </tr>
102
+ <tr>
103
+ <td>readonly</td>
104
+ <td>boolean | string</td>
105
+ <td>false</td>
106
+ <td>Torna o cartão recolhido somente leitura. Faz a mesma coisa que o suporte desativado, mas não altera os estilos</td>
107
+ </tr>
108
+ </tbody>
109
+ </table>
110
+
111
+ <hr>
package/dist/field-group-vue.esm.js ADDED
@@ -0,0 +1,473 @@
1
+ import { VersionService } from '@zeedhi/core';
2
+ import { PropWatch, ZdComponentRender } from '@zeedhi/vuetify';
3
+ import { FieldGroup } from '@zeedhi/zd-field-group-common';
4
+ import { Component } from 'vue-property-decorator';
5
+
6
+ /*! *****************************************************************************
7
+ Copyright (c) Microsoft Corporation.
8
+
9
+ Permission to use, copy, modify, and/or distribute this software for any
10
+ purpose with or without fee is hereby granted.
11
+
12
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
13
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
14
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
15
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
16
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
17
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
18
+ PERFORMANCE OF THIS SOFTWARE.
19
+ ***************************************************************************** */
20
+
21
+ function __decorate(decorators, target, key, desc) {
22
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
23
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
24
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
25
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
26
+ }
27
+
28
+ function __metadata(metadataKey, metadataValue) {
29
+ if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
30
+ }
31
+
32
+ let ZdFieldGroup = class ZdFieldGroup extends ZdComponentRender {
33
+ constructor() {
34
+ super(...arguments);
35
+ this.instanceType = FieldGroup;
36
+ }
37
+ get background() {
38
+ return {
39
+ background: `url(${this.instance.img}) center center / cover no-repeat`,
40
+ };
41
+ }
42
+ get elevationClass() {
43
+ return this.instance.elevation ? `elevation-${this.instance.elevation}` : '';
44
+ }
45
+ get headerStyle() {
46
+ return Object.assign(Object.assign({}, this.background), this.heightStyles);
47
+ }
48
+ get heightStyles() {
49
+ return {
50
+ height: this.cssValue('height'),
51
+ 'max-height': this.cssValue('maxHeight'),
52
+ 'min-height': this.cssValue('minHeight'),
53
+ };
54
+ }
55
+ get widthStyles() {
56
+ return {
57
+ width: this.cssValue('width'),
58
+ 'max-width': this.cssValue('maxWidth'),
59
+ 'min-width': this.cssValue('minWidth'),
60
+ };
61
+ }
62
+ get expandStatus() {
63
+ return this.instance.expanded ? 0 : 1;
64
+ }
65
+ cssValue(property) {
66
+ return `${property}`;
67
+ }
68
+ click(event) {
69
+ this.lastEvent = event;
70
+ this.instance.click(event, this.$el);
71
+ }
72
+ change() {
73
+ this.instance.change(this.lastEvent, this.$el);
74
+ this.$emit('change', this.lastEvent);
75
+ }
76
+ };
77
+ __decorate([
78
+ PropWatch({ type: [Boolean, String], default: false }),
79
+ __metadata("design:type", Boolean)
80
+ ], ZdFieldGroup.prototype, "disableActionRotate", void 0);
81
+ __decorate([
82
+ PropWatch({ type: [Object, String], default: () => undefined }),
83
+ __metadata("design:type", Object)
84
+ ], ZdFieldGroup.prototype, "expandButton", void 0);
85
+ __decorate([
86
+ PropWatch({ type: [Boolean, String], default: false }),
87
+ __metadata("design:type", Boolean)
88
+ ], ZdFieldGroup.prototype, "expanded", void 0);
89
+ __decorate([
90
+ PropWatch({ type: [Array, String], default: () => [] }),
91
+ __metadata("design:type", Array)
92
+ ], ZdFieldGroup.prototype, "header", void 0);
93
+ __decorate([
94
+ PropWatch({ type: [Boolean, String], default: false }),
95
+ __metadata("design:type", Boolean)
96
+ ], ZdFieldGroup.prototype, "hideAction", void 0);
97
+ __decorate([
98
+ PropWatch({ type: String, default: 'var(--v-primary-base)' }),
99
+ __metadata("design:type", String)
100
+ ], ZdFieldGroup.prototype, "iconColor", void 0);
101
+ __decorate([
102
+ PropWatch({ type: String, default: 'expand' }),
103
+ __metadata("design:type", String)
104
+ ], ZdFieldGroup.prototype, "iconName", void 0);
105
+ __decorate([
106
+ PropWatch({ type: [Boolean, String], default: false }),
107
+ __metadata("design:type", Boolean)
108
+ ], ZdFieldGroup.prototype, "lazyLoad", void 0);
109
+ __decorate([
110
+ PropWatch({ type: [Boolean, String], default: false }),
111
+ __metadata("design:type", Boolean)
112
+ ], ZdFieldGroup.prototype, "readonly", void 0);
113
+ ZdFieldGroup = __decorate([
114
+ Component
115
+ ], ZdFieldGroup);
116
+ var script = ZdFieldGroup;
117
+
118
+ function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
119
+ if (typeof shadowMode !== 'boolean') {
120
+ createInjectorSSR = createInjector;
121
+ createInjector = shadowMode;
122
+ shadowMode = false;
123
+ }
124
+ // Vue.extend constructor export interop.
125
+ const options = typeof script === 'function' ? script.options : script;
126
+ // render functions
127
+ if (template && template.render) {
128
+ options.render = template.render;
129
+ options.staticRenderFns = template.staticRenderFns;
130
+ options._compiled = true;
131
+ // functional template
132
+ if (isFunctionalTemplate) {
133
+ options.functional = true;
134
+ }
135
+ }
136
+ // scopedId
137
+ if (scopeId) {
138
+ options._scopeId = scopeId;
139
+ }
140
+ let hook;
141
+ if (moduleIdentifier) {
142
+ // server build
143
+ hook = function (context) {
144
+ // 2.3 injection
145
+ context =
146
+ context || // cached call
147
+ (this.$vnode && this.$vnode.ssrContext) || // stateful
148
+ (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
149
+ // 2.2 with runInNewContext: true
150
+ if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
151
+ context = __VUE_SSR_CONTEXT__;
152
+ }
153
+ // inject component styles
154
+ if (style) {
155
+ style.call(this, createInjectorSSR(context));
156
+ }
157
+ // register component module identifier for async chunk inference
158
+ if (context && context._registeredComponents) {
159
+ context._registeredComponents.add(moduleIdentifier);
160
+ }
161
+ };
162
+ // used by ssr in case component is cached and beforeCreate
163
+ // never gets called
164
+ options._ssrRegister = hook;
165
+ }
166
+ else if (style) {
167
+ hook = shadowMode
168
+ ? function (context) {
169
+ style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
170
+ }
171
+ : function (context) {
172
+ style.call(this, createInjector(context));
173
+ };
174
+ }
175
+ if (hook) {
176
+ if (options.functional) {
177
+ // register for functional component in vue file
178
+ const originalRender = options.render;
179
+ options.render = function renderWithStyleInjection(h, context) {
180
+ hook.call(context);
181
+ return originalRender(h, context);
182
+ };
183
+ }
184
+ else {
185
+ // inject component registration as beforeCreate hook
186
+ const existing = options.beforeCreate;
187
+ options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
188
+ }
189
+ }
190
+ return script;
191
+ }
192
+
193
+ const isOldIE = typeof navigator !== 'undefined' &&
194
+ /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
195
+ function createInjector(context) {
196
+ return (id, style) => addStyle(id, style);
197
+ }
198
+ let HEAD;
199
+ const styles = {};
200
+ function addStyle(id, css) {
201
+ const group = isOldIE ? css.media || 'default' : id;
202
+ const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
203
+ if (!style.ids.has(id)) {
204
+ style.ids.add(id);
205
+ let code = css.source;
206
+ if (css.map) {
207
+ // https://developer.chrome.com/devtools/docs/javascript-debugging
208
+ // this makes source maps inside style tags work properly in Chrome
209
+ code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
210
+ // http://stackoverflow.com/a/26603875
211
+ code +=
212
+ '\n/*# sourceMappingURL=data:application/json;base64,' +
213
+ btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
214
+ ' */';
215
+ }
216
+ if (!style.element) {
217
+ style.element = document.createElement('style');
218
+ style.element.type = 'text/css';
219
+ if (css.media)
220
+ style.element.setAttribute('media', css.media);
221
+ if (HEAD === undefined) {
222
+ HEAD = document.head || document.getElementsByTagName('head')[0];
223
+ }
224
+ HEAD.appendChild(style.element);
225
+ }
226
+ if ('styleSheet' in style.element) {
227
+ style.styles.push(code);
228
+ style.element.styleSheet.cssText = style.styles
229
+ .filter(Boolean)
230
+ .join('\n');
231
+ }
232
+ else {
233
+ const index = style.ids.size - 1;
234
+ const textNode = document.createTextNode(code);
235
+ const nodes = style.element.childNodes;
236
+ if (nodes[index])
237
+ style.element.removeChild(nodes[index]);
238
+ if (nodes.length)
239
+ style.element.insertBefore(textNode, nodes[index]);
240
+ else
241
+ style.element.appendChild(textNode);
242
+ }
243
+ }
244
+ }
245
+
246
+ /* script */
247
+ const __vue_script__ = script;
248
+
249
+ /* template */
250
+ var __vue_render__ = function () {
251
+ var _vm = this;
252
+ var _h = _vm.$createElement;
253
+ var _c = _vm._self._c || _h;
254
+ return _c(
255
+ "v-expansion-panels",
256
+ {
257
+ directives: [
258
+ {
259
+ name: "show",
260
+ rawName: "v-show",
261
+ value: _vm.instance.isVisible,
262
+ expression: "instance.isVisible",
263
+ },
264
+ ],
265
+ class: [
266
+ _vm.instance.cssClass,
267
+ {
268
+ "v-expansion-panels--hover": _vm.instance.hover,
269
+ },
270
+ "v-expansion-panels--flat",
271
+ "zd-pa-0",
272
+ ],
273
+ style: [_vm.widthStyles, _vm.$styleObject(_vm.instance.cssStyle)],
274
+ attrs: {
275
+ id: _vm.instance.name,
276
+ flat: "",
277
+ dark: _vm.instance.dark,
278
+ light: _vm.instance.light,
279
+ value: _vm.expandStatus,
280
+ },
281
+ },
282
+ [
283
+ _c(
284
+ "v-expansion-panel",
285
+ {
286
+ class: [
287
+ _vm.elevationClass,
288
+ { outlined: _vm.instance.outlined, raised: _vm.instance.raised },
289
+ ],
290
+ attrs: {
291
+ disabled: _vm.instance.disabled,
292
+ readonly: _vm.instance.readonly,
293
+ },
294
+ on: {
295
+ change: function ($event) {
296
+ return _vm.change()
297
+ },
298
+ },
299
+ },
300
+ [
301
+ _c(
302
+ "v-expansion-panel-header",
303
+ {
304
+ class: [_vm.instance.color],
305
+ style: _vm.headerStyle,
306
+ attrs: {
307
+ "disable-icon-rotate": _vm.instance.disableActionRotate,
308
+ "expand-icon": _vm.$getIcon(_vm.instance.iconName),
309
+ "hide-actions": _vm.instance.hideAction,
310
+ ripple: _vm.instance.ripple,
311
+ },
312
+ on: {
313
+ click: function ($event) {
314
+ return _vm.click($event)
315
+ },
316
+ mouseenter: function ($event) {
317
+ return _vm.mouseenter($event)
318
+ },
319
+ mouseleave: function ($event) {
320
+ return _vm.mouseleave($event)
321
+ },
322
+ },
323
+ scopedSlots: _vm._u(
324
+ [
325
+ _vm.instance.expandButton && !_vm.$slots.expandButton
326
+ ? {
327
+ key: "actions",
328
+ fn: function () {
329
+ return [
330
+ _c(
331
+ _vm.instance.expandButton.component,
332
+ _vm._b(
333
+ {
334
+ tag: "component",
335
+ attrs: { parent: _vm.instance },
336
+ },
337
+ "component",
338
+ _vm.instance.expandButton,
339
+ false
340
+ )
341
+ ),
342
+ ]
343
+ },
344
+ proxy: true,
345
+ }
346
+ : !_vm.instance.expandButton && !_vm.$slots.expandButton
347
+ ? {
348
+ key: "actions",
349
+ fn: function () {
350
+ return [
351
+ _c(
352
+ "v-icon",
353
+ { attrs: { color: _vm.instance.iconColor } },
354
+ [
355
+ _vm._v(
356
+ _vm._s(_vm.$getIcon(_vm.instance.iconName))
357
+ ),
358
+ ]
359
+ ),
360
+ ]
361
+ },
362
+ proxy: true,
363
+ }
364
+ : {
365
+ key: "actions",
366
+ fn: function () {
367
+ return [_vm._t("expandButton")]
368
+ },
369
+ proxy: true,
370
+ },
371
+ ],
372
+ null,
373
+ true
374
+ ),
375
+ },
376
+ [
377
+ _c(
378
+ "div",
379
+ [
380
+ !_vm.$slots.header
381
+ ? _vm._l(_vm.instance.header, function (item) {
382
+ return _c(
383
+ item.component,
384
+ _vm._b(
385
+ {
386
+ key: item.name,
387
+ tag: "component",
388
+ attrs: { parent: _vm.instance },
389
+ },
390
+ "component",
391
+ item,
392
+ false
393
+ )
394
+ )
395
+ })
396
+ : _vm._e(),
397
+ _vm._v(" "),
398
+ _vm._t("header"),
399
+ ],
400
+ 2
401
+ ),
402
+ ]
403
+ ),
404
+ _vm._v(" "),
405
+ _c(
406
+ "v-expansion-panel-content",
407
+ { attrs: { eager: !_vm.instance.lazyLoad } },
408
+ [
409
+ _vm._l(_vm.instance.children, function (child) {
410
+ return _c(
411
+ child.component,
412
+ _vm._b(
413
+ {
414
+ key: child.name,
415
+ tag: "component",
416
+ attrs: { parent: _vm.instance },
417
+ },
418
+ "component",
419
+ child,
420
+ false
421
+ )
422
+ )
423
+ }),
424
+ _vm._v(" "),
425
+ _vm._t("default"),
426
+ ],
427
+ 2
428
+ ),
429
+ ],
430
+ 1
431
+ ),
432
+ ],
433
+ 1
434
+ )
435
+ };
436
+ var __vue_staticRenderFns__ = [];
437
+ __vue_render__._withStripped = true;
438
+
439
+ /* style */
440
+ const __vue_inject_styles__ = function (inject) {
441
+ if (!inject) return
442
+ inject("data-v-0b1a56f5_0", { source: ".v-expansion-panels.tile, .v-expansion-panels.tile:not(.v-expansion-panels--accordion) > .v-expansion-panel--active, .v-expansion-panels.tile:not(.v-expansion-panels--accordion) > .v-expansion-panel--next-active {\n border-radius: var(--border-tile);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active {\n box-shadow: none;\n border-radius: var(--border);\n color: var(--v-primary-base);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel::before, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active::before, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active::before {\n box-shadow: none;\n}\n.v-expansion-panels > div:first-child.v-expansion-panel.outlined, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active.outlined, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active.outlined {\n box-shadow: none;\n border: var(--regular) solid var(--v-secondary-base);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel.raised, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active.raised, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active.raised {\n box-shadow: var(--shadow-9);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-content__wrap, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-content__wrap, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-content__wrap {\n padding: 0;\n color: var(--zd-font-color);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header {\n flex-direction: row-reverse;\n gap: 0.5rem;\n min-height: 0;\n width: 100%;\n padding: var(--spacing-4) 0;\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon {\n color: currentColor;\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header > :not(.v-expansion-panel-header__icon), .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header > :not(.v-expansion-panel-header__icon), .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header > :not(.v-expansion-panel-header__icon) {\n padding-right: var(--spacing-4);\n}\n.v-expansion-panels--flat > div:first-child.v-expansion-panel, .v-expansion-panels--flat > div:first-child.v-expansion-panel.v-expansion-panel--active, .v-expansion-panels--flat > div:first-child.v-expansion-panel.v-expansion-panel--next-active {\n box-shadow: none;\n}\n.v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel:focus, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--active:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--active:focus, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--next-active:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--next-active:focus {\n box-shadow: var(--shadow-5);\n}", map: undefined, media: undefined });
443
+
444
+ };
445
+ /* scoped */
446
+ const __vue_scope_id__ = undefined;
447
+ /* module identifier */
448
+ const __vue_module_identifier__ = undefined;
449
+ /* functional template */
450
+ const __vue_is_functional_template__ = false;
451
+ /* style inject SSR */
452
+
453
+ /* style inject shadow dom */
454
+
455
+
456
+
457
+ const __vue_component__ = /*#__PURE__*/normalizeComponent(
458
+ { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
459
+ __vue_inject_styles__,
460
+ __vue_script__,
461
+ __vue_scope_id__,
462
+ __vue_is_functional_template__,
463
+ __vue_module_identifier__,
464
+ false,
465
+ createInjector,
466
+ undefined,
467
+ undefined
468
+ );
469
+
470
+ const packageContent = require('../package.json');
471
+ VersionService.addPackageVersion(packageContent.name, packageContent.version);
472
+
473
+ export { __vue_component__ as ZdFieldGroup, script as ZdFieldGroupClass };
package/dist/field-group-vue.umd.js ADDED
@@ -0,0 +1,479 @@
1
+ (function (global, factory) {
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/core'), require('@zeedhi/vuetify'), require('@zeedhi/zd-field-group-common'), require('vue-property-decorator')) :
3
+ typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/core', '@zeedhi/vuetify', '@zeedhi/zd-field-group-common', 'vue-property-decorator'], factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/zd-field-group-vue"] = {}, global.core, global["@zeedhi/vuetify"], global["@zeedhi/zd-field-group-common"], global["vue-property-decorator"]));
5
+ })(this, (function (exports, core, vuetify, zdFieldGroupCommon, vuePropertyDecorator) { 'use strict';
6
+
7
+ /*! *****************************************************************************
8
+ Copyright (c) Microsoft Corporation.
9
+
10
+ Permission to use, copy, modify, and/or distribute this software for any
11
+ purpose with or without fee is hereby granted.
12
+
13
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
14
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
15
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
16
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
17
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
18
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
19
+ PERFORMANCE OF THIS SOFTWARE.
20
+ ***************************************************************************** */
21
+
22
+ function __decorate(decorators, target, key, desc) {
23
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
24
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
25
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
26
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
27
+ }
28
+
29
+ function __metadata(metadataKey, metadataValue) {
30
+ if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
31
+ }
32
+
33
+ let ZdFieldGroup = class ZdFieldGroup extends vuetify.ZdComponentRender {
34
+ constructor() {
35
+ super(...arguments);
36
+ this.instanceType = zdFieldGroupCommon.FieldGroup;
37
+ }
38
+ get background() {
39
+ return {
40
+ background: `url(${this.instance.img}) center center / cover no-repeat`,
41
+ };
42
+ }
43
+ get elevationClass() {
44
+ return this.instance.elevation ? `elevation-${this.instance.elevation}` : '';
45
+ }
46
+ get headerStyle() {
47
+ return Object.assign(Object.assign({}, this.background), this.heightStyles);
48
+ }
49
+ get heightStyles() {
50
+ return {
51
+ height: this.cssValue('height'),
52
+ 'max-height': this.cssValue('maxHeight'),
53
+ 'min-height': this.cssValue('minHeight'),
54
+ };
55
+ }
56
+ get widthStyles() {
57
+ return {
58
+ width: this.cssValue('width'),
59
+ 'max-width': this.cssValue('maxWidth'),
60
+ 'min-width': this.cssValue('minWidth'),
61
+ };
62
+ }
63
+ get expandStatus() {
64
+ return this.instance.expanded ? 0 : 1;
65
+ }
66
+ cssValue(property) {
67
+ return `${property}`;
68
+ }
69
+ click(event) {
70
+ this.lastEvent = event;
71
+ this.instance.click(event, this.$el);
72
+ }
73
+ change() {
74
+ this.instance.change(this.lastEvent, this.$el);
75
+ this.$emit('change', this.lastEvent);
76
+ }
77
+ };
78
+ __decorate([
79
+ vuetify.PropWatch({ type: [Boolean, String], default: false }),
80
+ __metadata("design:type", Boolean)
81
+ ], ZdFieldGroup.prototype, "disableActionRotate", void 0);
82
+ __decorate([
83
+ vuetify.PropWatch({ type: [Object, String], default: () => undefined }),
84
+ __metadata("design:type", Object)
85
+ ], ZdFieldGroup.prototype, "expandButton", void 0);
86
+ __decorate([
87
+ vuetify.PropWatch({ type: [Boolean, String], default: false }),
88
+ __metadata("design:type", Boolean)
89
+ ], ZdFieldGroup.prototype, "expanded", void 0);
90
+ __decorate([
91
+ vuetify.PropWatch({ type: [Array, String], default: () => [] }),
92
+ __metadata("design:type", Array)
93
+ ], ZdFieldGroup.prototype, "header", void 0);
94
+ __decorate([
95
+ vuetify.PropWatch({ type: [Boolean, String], default: false }),
96
+ __metadata("design:type", Boolean)
97
+ ], ZdFieldGroup.prototype, "hideAction", void 0);
98
+ __decorate([
99
+ vuetify.PropWatch({ type: String, default: 'var(--v-primary-base)' }),
100
+ __metadata("design:type", String)
101
+ ], ZdFieldGroup.prototype, "iconColor", void 0);
102
+ __decorate([
103
+ vuetify.PropWatch({ type: String, default: 'expand' }),
104
+ __metadata("design:type", String)
105
+ ], ZdFieldGroup.prototype, "iconName", void 0);
106
+ __decorate([
107
+ vuetify.PropWatch({ type: [Boolean, String], default: false }),
108
+ __metadata("design:type", Boolean)
109
+ ], ZdFieldGroup.prototype, "lazyLoad", void 0);
110
+ __decorate([
111
+ vuetify.PropWatch({ type: [Boolean, String], default: false }),
112
+ __metadata("design:type", Boolean)
113
+ ], ZdFieldGroup.prototype, "readonly", void 0);
114
+ ZdFieldGroup = __decorate([
115
+ vuePropertyDecorator.Component
116
+ ], ZdFieldGroup);
117
+ var script = ZdFieldGroup;
118
+
119
+ function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
120
+ if (typeof shadowMode !== 'boolean') {
121
+ createInjectorSSR = createInjector;
122
+ createInjector = shadowMode;
123
+ shadowMode = false;
124
+ }
125
+ // Vue.extend constructor export interop.
126
+ const options = typeof script === 'function' ? script.options : script;
127
+ // render functions
128
+ if (template && template.render) {
129
+ options.render = template.render;
130
+ options.staticRenderFns = template.staticRenderFns;
131
+ options._compiled = true;
132
+ // functional template
133
+ if (isFunctionalTemplate) {
134
+ options.functional = true;
135
+ }
136
+ }
137
+ // scopedId
138
+ if (scopeId) {
139
+ options._scopeId = scopeId;
140
+ }
141
+ let hook;
142
+ if (moduleIdentifier) {
143
+ // server build
144
+ hook = function (context) {
145
+ // 2.3 injection
146
+ context =
147
+ context || // cached call
148
+ (this.$vnode && this.$vnode.ssrContext) || // stateful
149
+ (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
150
+ // 2.2 with runInNewContext: true
151
+ if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
152
+ context = __VUE_SSR_CONTEXT__;
153
+ }
154
+ // inject component styles
155
+ if (style) {
156
+ style.call(this, createInjectorSSR(context));
157
+ }
158
+ // register component module identifier for async chunk inference
159
+ if (context && context._registeredComponents) {
160
+ context._registeredComponents.add(moduleIdentifier);
161
+ }
162
+ };
163
+ // used by ssr in case component is cached and beforeCreate
164
+ // never gets called
165
+ options._ssrRegister = hook;
166
+ }
167
+ else if (style) {
168
+ hook = shadowMode
169
+ ? function (context) {
170
+ style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
171
+ }
172
+ : function (context) {
173
+ style.call(this, createInjector(context));
174
+ };
175
+ }
176
+ if (hook) {
177
+ if (options.functional) {
178
+ // register for functional component in vue file
179
+ const originalRender = options.render;
180
+ options.render = function renderWithStyleInjection(h, context) {
181
+ hook.call(context);
182
+ return originalRender(h, context);
183
+ };
184
+ }
185
+ else {
186
+ // inject component registration as beforeCreate hook
187
+ const existing = options.beforeCreate;
188
+ options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
189
+ }
190
+ }
191
+ return script;
192
+ }
193
+
194
+ const isOldIE = typeof navigator !== 'undefined' &&
195
+ /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
196
+ function createInjector(context) {
197
+ return (id, style) => addStyle(id, style);
198
+ }
199
+ let HEAD;
200
+ const styles = {};
201
+ function addStyle(id, css) {
202
+ const group = isOldIE ? css.media || 'default' : id;
203
+ const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
204
+ if (!style.ids.has(id)) {
205
+ style.ids.add(id);
206
+ let code = css.source;
207
+ if (css.map) {
208
+ // https://developer.chrome.com/devtools/docs/javascript-debugging
209
+ // this makes source maps inside style tags work properly in Chrome
210
+ code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
211
+ // http://stackoverflow.com/a/26603875
212
+ code +=
213
+ '\n/*# sourceMappingURL=data:application/json;base64,' +
214
+ btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
215
+ ' */';
216
+ }
217
+ if (!style.element) {
218
+ style.element = document.createElement('style');
219
+ style.element.type = 'text/css';
220
+ if (css.media)
221
+ style.element.setAttribute('media', css.media);
222
+ if (HEAD === undefined) {
223
+ HEAD = document.head || document.getElementsByTagName('head')[0];
224
+ }
225
+ HEAD.appendChild(style.element);
226
+ }
227
+ if ('styleSheet' in style.element) {
228
+ style.styles.push(code);
229
+ style.element.styleSheet.cssText = style.styles
230
+ .filter(Boolean)
231
+ .join('\n');
232
+ }
233
+ else {
234
+ const index = style.ids.size - 1;
235
+ const textNode = document.createTextNode(code);
236
+ const nodes = style.element.childNodes;
237
+ if (nodes[index])
238
+ style.element.removeChild(nodes[index]);
239
+ if (nodes.length)
240
+ style.element.insertBefore(textNode, nodes[index]);
241
+ else
242
+ style.element.appendChild(textNode);
243
+ }
244
+ }
245
+ }
246
+
247
+ /* script */
248
+ const __vue_script__ = script;
249
+
250
+ /* template */
251
+ var __vue_render__ = function () {
252
+ var _vm = this;
253
+ var _h = _vm.$createElement;
254
+ var _c = _vm._self._c || _h;
255
+ return _c(
256
+ "v-expansion-panels",
257
+ {
258
+ directives: [
259
+ {
260
+ name: "show",
261
+ rawName: "v-show",
262
+ value: _vm.instance.isVisible,
263
+ expression: "instance.isVisible",
264
+ },
265
+ ],
266
+ class: [
267
+ _vm.instance.cssClass,
268
+ {
269
+ "v-expansion-panels--hover": _vm.instance.hover,
270
+ },
271
+ "v-expansion-panels--flat",
272
+ "zd-pa-0",
273
+ ],
274
+ style: [_vm.widthStyles, _vm.$styleObject(_vm.instance.cssStyle)],
275
+ attrs: {
276
+ id: _vm.instance.name,
277
+ flat: "",
278
+ dark: _vm.instance.dark,
279
+ light: _vm.instance.light,
280
+ value: _vm.expandStatus,
281
+ },
282
+ },
283
+ [
284
+ _c(
285
+ "v-expansion-panel",
286
+ {
287
+ class: [
288
+ _vm.elevationClass,
289
+ { outlined: _vm.instance.outlined, raised: _vm.instance.raised },
290
+ ],
291
+ attrs: {
292
+ disabled: _vm.instance.disabled,
293
+ readonly: _vm.instance.readonly,
294
+ },
295
+ on: {
296
+ change: function ($event) {
297
+ return _vm.change()
298
+ },
299
+ },
300
+ },
301
+ [
302
+ _c(
303
+ "v-expansion-panel-header",
304
+ {
305
+ class: [_vm.instance.color],
306
+ style: _vm.headerStyle,
307
+ attrs: {
308
+ "disable-icon-rotate": _vm.instance.disableActionRotate,
309
+ "expand-icon": _vm.$getIcon(_vm.instance.iconName),
310
+ "hide-actions": _vm.instance.hideAction,
311
+ ripple: _vm.instance.ripple,
312
+ },
313
+ on: {
314
+ click: function ($event) {
315
+ return _vm.click($event)
316
+ },
317
+ mouseenter: function ($event) {
318
+ return _vm.mouseenter($event)
319
+ },
320
+ mouseleave: function ($event) {
321
+ return _vm.mouseleave($event)
322
+ },
323
+ },
324
+ scopedSlots: _vm._u(
325
+ [
326
+ _vm.instance.expandButton && !_vm.$slots.expandButton
327
+ ? {
328
+ key: "actions",
329
+ fn: function () {
330
+ return [
331
+ _c(
332
+ _vm.instance.expandButton.component,
333
+ _vm._b(
334
+ {
335
+ tag: "component",
336
+ attrs: { parent: _vm.instance },
337
+ },
338
+ "component",
339
+ _vm.instance.expandButton,
340
+ false
341
+ )
342
+ ),
343
+ ]
344
+ },
345
+ proxy: true,
346
+ }
347
+ : !_vm.instance.expandButton && !_vm.$slots.expandButton
348
+ ? {
349
+ key: "actions",
350
+ fn: function () {
351
+ return [
352
+ _c(
353
+ "v-icon",
354
+ { attrs: { color: _vm.instance.iconColor } },
355
+ [
356
+ _vm._v(
357
+ _vm._s(_vm.$getIcon(_vm.instance.iconName))
358
+ ),
359
+ ]
360
+ ),
361
+ ]
362
+ },
363
+ proxy: true,
364
+ }
365
+ : {
366
+ key: "actions",
367
+ fn: function () {
368
+ return [_vm._t("expandButton")]
369
+ },
370
+ proxy: true,
371
+ },
372
+ ],
373
+ null,
374
+ true
375
+ ),
376
+ },
377
+ [
378
+ _c(
379
+ "div",
380
+ [
381
+ !_vm.$slots.header
382
+ ? _vm._l(_vm.instance.header, function (item) {
383
+ return _c(
384
+ item.component,
385
+ _vm._b(
386
+ {
387
+ key: item.name,
388
+ tag: "component",
389
+ attrs: { parent: _vm.instance },
390
+ },
391
+ "component",
392
+ item,
393
+ false
394
+ )
395
+ )
396
+ })
397
+ : _vm._e(),
398
+ _vm._v(" "),
399
+ _vm._t("header"),
400
+ ],
401
+ 2
402
+ ),
403
+ ]
404
+ ),
405
+ _vm._v(" "),
406
+ _c(
407
+ "v-expansion-panel-content",
408
+ { attrs: { eager: !_vm.instance.lazyLoad } },
409
+ [
410
+ _vm._l(_vm.instance.children, function (child) {
411
+ return _c(
412
+ child.component,
413
+ _vm._b(
414
+ {
415
+ key: child.name,
416
+ tag: "component",
417
+ attrs: { parent: _vm.instance },
418
+ },
419
+ "component",
420
+ child,
421
+ false
422
+ )
423
+ )
424
+ }),
425
+ _vm._v(" "),
426
+ _vm._t("default"),
427
+ ],
428
+ 2
429
+ ),
430
+ ],
431
+ 1
432
+ ),
433
+ ],
434
+ 1
435
+ )
436
+ };
437
+ var __vue_staticRenderFns__ = [];
438
+ __vue_render__._withStripped = true;
439
+
440
+ /* style */
441
+ const __vue_inject_styles__ = function (inject) {
442
+ if (!inject) return
443
+ inject("data-v-0b1a56f5_0", { source: ".v-expansion-panels.tile, .v-expansion-panels.tile:not(.v-expansion-panels--accordion) > .v-expansion-panel--active, .v-expansion-panels.tile:not(.v-expansion-panels--accordion) > .v-expansion-panel--next-active {\n border-radius: var(--border-tile);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active {\n box-shadow: none;\n border-radius: var(--border);\n color: var(--v-primary-base);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel::before, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active::before, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active::before {\n box-shadow: none;\n}\n.v-expansion-panels > div:first-child.v-expansion-panel.outlined, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active.outlined, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active.outlined {\n box-shadow: none;\n border: var(--regular) solid var(--v-secondary-base);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel.raised, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active.raised, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active.raised {\n box-shadow: var(--shadow-9);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-content__wrap, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-content__wrap, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-content__wrap {\n padding: 0;\n color: var(--zd-font-color);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header {\n flex-direction: row-reverse;\n gap: 0.5rem;\n min-height: 0;\n width: 100%;\n padding: var(--spacing-4) 0;\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon {\n color: currentColor;\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header > :not(.v-expansion-panel-header__icon), .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header > :not(.v-expansion-panel-header__icon), .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header > :not(.v-expansion-panel-header__icon) {\n padding-right: var(--spacing-4);\n}\n.v-expansion-panels--flat > div:first-child.v-expansion-panel, .v-expansion-panels--flat > div:first-child.v-expansion-panel.v-expansion-panel--active, .v-expansion-panels--flat > div:first-child.v-expansion-panel.v-expansion-panel--next-active {\n box-shadow: none;\n}\n.v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel:focus, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--active:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--active:focus, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--next-active:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--next-active:focus {\n box-shadow: var(--shadow-5);\n}", map: undefined, media: undefined });
444
+
445
+ };
446
+ /* scoped */
447
+ const __vue_scope_id__ = undefined;
448
+ /* module identifier */
449
+ const __vue_module_identifier__ = undefined;
450
+ /* functional template */
451
+ const __vue_is_functional_template__ = false;
452
+ /* style inject SSR */
453
+
454
+ /* style inject shadow dom */
455
+
456
+
457
+
458
+ const __vue_component__ = /*#__PURE__*/normalizeComponent(
459
+ { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
460
+ __vue_inject_styles__,
461
+ __vue_script__,
462
+ __vue_scope_id__,
463
+ __vue_is_functional_template__,
464
+ __vue_module_identifier__,
465
+ false,
466
+ createInjector,
467
+ undefined,
468
+ undefined
469
+ );
470
+
471
+ const packageContent = require('../package.json');
472
+ core.VersionService.addPackageVersion(packageContent.name, packageContent.version);
473
+
474
+ exports.ZdFieldGroup = __vue_component__;
475
+ exports.ZdFieldGroupClass = script;
476
+
477
+ Object.defineProperty(exports, '__esModule', { value: true });
478
+
479
+ }));
package/package.json ADDED
@@ -0,0 +1,24 @@
1
+ {
2
+ "name": "@zeedhi/zd-field-group-vue",
3
+ "version": "1.0.0",
4
+ "description": "Powered by Zeedhi",
5
+ "main": "dist/field-group-vue.umd.js",
6
+ "module": "dist/field-group-vue.esm.js",
7
+ "typings": "types/index.d.ts",
8
+ "publishConfig": {
9
+ "access": "public"
10
+ },
11
+ "scripts": {
12
+ "build": "rollup -c",
13
+ "lint": "eslint . --ext .ts --fix",
14
+ "watch": "rollup -cw"
15
+ },
16
+ "peerDependencies": {
17
+ "@zeedhi/vuetify": "*",
18
+ "@zeedhi/zd-field-group-common": "file:packages/common",
19
+ "vue": "^2.6.12",
20
+ "vue-class-component": "^7.2.6",
21
+ "vue-property-decorator": "^9.1.2"
22
+ },
23
+ "gitHead": "6c2900868f0fb13978042c93293fa4b91ff6b791"
24
+ }
package/types/ZdFieldGroup.d.ts ADDED
@@ -0,0 +1,41 @@
1
+ import { IButton, IComponent } from '@zeedhi/common/types/components';
2
+ import { ZdComponentRender } from '@zeedhi/vuetify';
3
+ import { FieldGroup as ZdFieldGroupClass } from '@zeedhi/zd-field-group-common';
4
+ export default class ZdFieldGroup extends ZdComponentRender {
5
+ disableActionRotate: boolean;
6
+ expandButton: IButton;
7
+ expanded: boolean;
8
+ header: IComponent[];
9
+ hideAction: boolean;
10
+ iconColor: string;
11
+ iconName: string;
12
+ lazyLoad: boolean;
13
+ readonly: boolean;
14
+ instance: ZdFieldGroupClass;
15
+ instanceType: typeof ZdFieldGroupClass;
16
+ private lastEvent;
17
+ get background(): {
18
+ background: string;
19
+ };
20
+ get elevationClass(): string;
21
+ get headerStyle(): {
22
+ height: string;
23
+ 'max-height': string;
24
+ 'min-height': string;
25
+ background: string;
26
+ };
27
+ get heightStyles(): {
28
+ height: string;
29
+ 'max-height': string;
30
+ 'min-height': string;
31
+ };
32
+ get widthStyles(): {
33
+ width: string;
34
+ 'max-width': string;
35
+ 'min-width': string;
36
+ };
37
+ get expandStatus(): 0 | 1;
38
+ cssValue(property: string): string;
39
+ click(event: Event): void;
40
+ change(): void;
41
+ }
package/types/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import ZdFieldGroupClass from './ZdFieldGroup';
2
+ import ZdFieldGroup from './ZdFieldGroup.vue';
3
+ export { ZdFieldGroup, ZdFieldGroupClass };