@timus-networks/theme 1.0.185 → 1.0.186

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 (5) hide show
  1. package/components-js/ThemePopover.d.ts +2 -0
  2. package/components-js/ThemePopover.vue +177 -183
  3. package/components-ts/ThemePopover.vue +25 -19
  4. package/index.d.ts +1 -0
  5. package/package.json +1 -1
package/components-js/ThemePopover.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: any;
2
+ export default _default;
package/components-js/ThemePopover.vue CHANGED
@@ -54,7 +54,9 @@
54
54
 
55
55
  <section>
56
56
  <h2>Popover with Table</h2>
57
- <p class="p-md-c my-6">Displays tables with popover content</p>
57
+ <p class="p-md-c my-6">
58
+ Displays tables with popover content. Add <b>class="popover-table"</b> to <b>&lt;el table class="popover-table" /&gt;</b>
59
+ </p>
58
60
  <div class="grid grid-flow-col auto-cols-max gap-4">
59
61
  <el-popover placement="right" width="400" trigger="click">
60
62
  <el-alert title="error alert" type="error" show-icon />
@@ -75,7 +77,14 @@
75
77
  </div>
76
78
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
77
79
  <p class="text-xs">
78
- <code> &lt;el-popover placement="right" width="400" trigger="click"&gt; &lt;el-table /&gt; &lt;/el-popover&gt; </code>
80
+ <code>
81
+ &lt;el-popover placement="right" width="400" trigger="click"&gt; &lt;el-alert title="error alert" type="error" show-icon /&gt;
82
+ &lt;el-table :data="gridData" class="popover-table"&gt; &lt;el-table-column width="150" property="date" label="date" /&gt;
83
+ &lt;el-table-column width="100" property="name" label="name" /&gt; &lt;el-table-column width="300" property="address" label="address"
84
+ /&gt; &lt;/el-table&gt; &lt;div class="popover-description"&gt;sdd sdsds&lt;/div&gt; &lt;div class="popover-footer"&gt;
85
+ &lt;el-button&gt;Cancel&lt;/el-button&gt; &lt;el-button&gt;Save&lt;/el-button&gt; &lt;/div&gt; &lt;template #reference&gt; &lt;el-button
86
+ type="primary" size="small"&gt;Click to activate&lt;/el-button&gt; &lt;/template&gt; &lt;/el-popover&gt;
87
+ </code>
79
88
  </p>
80
89
  </div>
81
90
 
@@ -367,193 +376,178 @@
367
376
  </div>
368
377
  </template>
369
378
 
370
- <script>
371
- import { defineComponent } from 'vue';
372
-
379
+ <script>import { defineComponent } from 'vue';
373
380
  export default defineComponent({
374
- name: 'TimusButtonSample',
375
- data() {
376
- return {
377
- gridData: [
378
- {
379
- date: '2016-05-02',
380
- name: 'Jack',
381
- address: 'New York City',
382
- },
383
- {
384
- date: '2016-05-04',
385
- name: 'Jack',
386
- address: 'New York City',
387
- },
388
- {
389
- date: '2016-05-01',
390
- name: 'Jack',
391
- address: 'New York City',
392
- },
393
- {
394
- date: '2016-05-03',
395
- name: 'Jack',
396
- address: 'New York City',
397
- },
398
- ],
399
- value: '',
400
- value1: new Date(2016, 9, 10, 18, 40),
401
- value2: new Date(2016, 9, 10, 18, 40),
402
- arb1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
403
- arb2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
404
- startTime: '',
405
- endTime: '',
406
- dataAndTimeOptions: {
407
- shortcuts: [
408
- {
409
- text: 'Today',
410
- onClick(picker) {
411
- picker.$emit('pick', new Date());
412
- },
413
- },
414
- {
415
- text: 'Yesterday',
416
- onClick(picker) {
417
- const date = new Date();
418
-
419
- date.setTime(date.getTime() - 3600 * 1000 * 24);
420
- picker.$emit('pick', date);
421
- },
422
- },
423
- {
424
- text: 'A week ago',
425
- onClick(picker) {
426
- const date = new Date();
427
-
428
- date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
429
- picker.$emit('pick', date);
430
- },
431
- },
432
- ],
433
- },
434
- dat1: '',
435
- dat2: '',
436
- dat3: '',
437
- dateAndTimeRangePickerOption: {
438
- shortcuts: [
439
- {
440
- text: 'Last week',
441
- onClick(picker) {
442
- const end = new Date();
443
- const start = new Date();
444
-
445
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
446
- picker.$emit('pick', [start, end]);
381
+ name: 'TimusButtonSample',
382
+ data() {
383
+ return {
384
+ gridData: [
385
+ {
386
+ date: '2016-05-02',
387
+ name: 'Jack',
388
+ address: 'New York City',
389
+ },
390
+ {
391
+ date: '2016-05-04',
392
+ name: 'Jack',
393
+ address: 'New York City',
394
+ },
395
+ {
396
+ date: '2016-05-01',
397
+ name: 'Jack',
398
+ address: 'New York City',
399
+ },
400
+ {
401
+ date: '2016-05-03',
402
+ name: 'Jack',
403
+ address: 'New York City',
404
+ },
405
+ ],
406
+ value: '',
407
+ value1: new Date(2016, 9, 10, 18, 40),
408
+ value2: new Date(2016, 9, 10, 18, 40),
409
+ arb1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
410
+ arb2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
411
+ startTime: '',
412
+ endTime: '',
413
+ dataAndTimeOptions: {
414
+ shortcuts: [
415
+ {
416
+ text: 'Today',
417
+ onClick(picker) {
418
+ picker.$emit('pick', new Date());
419
+ },
420
+ },
421
+ {
422
+ text: 'Yesterday',
423
+ onClick(picker) {
424
+ const date = new Date();
425
+ date.setTime(date.getTime() - 3600 * 1000 * 24);
426
+ picker.$emit('pick', date);
427
+ },
428
+ },
429
+ {
430
+ text: 'A week ago',
431
+ onClick(picker) {
432
+ const date = new Date();
433
+ date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
434
+ picker.$emit('pick', date);
435
+ },
436
+ },
437
+ ],
447
438
  },
448
- },
449
- {
450
- text: 'Last month',
451
- onClick(picker) {
452
- const end = new Date();
453
- const start = new Date();
454
-
455
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
456
- picker.$emit('pick', [start, end]);
457
- },
458
- },
459
- {
460
- text: 'Last 3 months',
461
- onClick(picker) {
462
- const end = new Date();
463
- const start = new Date();
464
-
465
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
466
- picker.$emit('pick', [start, end]);
467
- },
468
- },
469
- ],
470
- },
471
- datr1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
472
- datr2: '',
473
- monthOptions: {
474
- shortcuts: [
475
- {
476
- text: 'This month',
477
- onClick(picker) {
478
- picker.$emit('pick', [new Date(), new Date()]);
439
+ dat1: '',
440
+ dat2: '',
441
+ dat3: '',
442
+ dateAndTimeRangePickerOption: {
443
+ shortcuts: [
444
+ {
445
+ text: 'Last week',
446
+ onClick(picker) {
447
+ const end = new Date();
448
+ const start = new Date();
449
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
450
+ picker.$emit('pick', [start, end]);
451
+ },
452
+ },
453
+ {
454
+ text: 'Last month',
455
+ onClick(picker) {
456
+ const end = new Date();
457
+ const start = new Date();
458
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
459
+ picker.$emit('pick', [start, end]);
460
+ },
461
+ },
462
+ {
463
+ text: 'Last 3 months',
464
+ onClick(picker) {
465
+ const end = new Date();
466
+ const start = new Date();
467
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
468
+ picker.$emit('pick', [start, end]);
469
+ },
470
+ },
471
+ ],
479
472
  },
480
- },
481
- {
482
- text: 'This year',
483
- onClick(picker) {
484
- const end = new Date();
485
- const start = new Date(new Date().getFullYear(), 0);
486
-
487
- picker.$emit('pick', [start, end]);
488
- },
489
- },
490
- {
491
- text: 'Last 6 months',
492
- onClick(picker) {
493
- const end = new Date();
494
- const start = new Date();
495
-
496
- start.setMonth(start.getMonth() - 6);
497
- picker.$emit('pick', [start, end]);
473
+ datr1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
474
+ datr2: '',
475
+ monthOptions: {
476
+ shortcuts: [
477
+ {
478
+ text: 'This month',
479
+ onClick(picker) {
480
+ picker.$emit('pick', [new Date(), new Date()]);
481
+ },
482
+ },
483
+ {
484
+ text: 'This year',
485
+ onClick(picker) {
486
+ const end = new Date();
487
+ const start = new Date(new Date().getFullYear(), 0);
488
+ picker.$emit('pick', [start, end]);
489
+ },
490
+ },
491
+ {
492
+ text: 'Last 6 months',
493
+ onClick(picker) {
494
+ const end = new Date();
495
+ const start = new Date();
496
+ start.setMonth(start.getMonth() - 6);
497
+ picker.$emit('pick', [start, end]);
498
+ },
499
+ },
500
+ ],
498
501
  },
499
- },
500
- ],
501
- },
502
- pickerOptions: {
503
- shortcuts: [
504
- {
505
- text: 'Today',
506
- onClick(picker) {
507
- picker.$emit('pick', new Date());
502
+ pickerOptions: {
503
+ shortcuts: [
504
+ {
505
+ text: 'Today',
506
+ onClick(picker) {
507
+ picker.$emit('pick', new Date());
508
+ },
509
+ },
510
+ {
511
+ text: 'Yesterday',
512
+ onClick(picker) {
513
+ const date = new Date();
514
+ date.setTime(date.getTime() - 3600 * 1000 * 24);
515
+ picker.$emit('pick', date);
516
+ },
517
+ },
518
+ {
519
+ text: 'A week ago',
520
+ onClick(picker) {
521
+ const date = new Date();
522
+ date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
523
+ picker.$emit('pick', date);
524
+ },
525
+ },
526
+ ],
508
527
  },
509
- },
510
- {
511
- text: 'Yesterday',
512
- onClick(picker) {
513
- const date = new Date();
514
-
515
- date.setTime(date.getTime() - 3600 * 1000 * 24);
516
- picker.$emit('pick', date);
517
- },
518
- },
519
- {
520
- text: 'A week ago',
521
- onClick(picker) {
522
- const date = new Date();
523
-
524
- date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
525
- picker.$emit('pick', date);
526
- },
527
- },
528
- ],
529
- },
530
- value1: '',
531
- value2: '',
532
- value3: '',
533
- dtp1: '',
534
- dtp2: '',
535
- dtp3: '',
536
- dtp4: '',
537
- dtp5: '',
538
- dtp6: '',
539
- };
540
- },
541
- computed: {
542
- gridSize() {
543
- const grids = {
544
- 5: 'grid-cols-5',
545
- 6: 'grid-cols-6',
546
- 7: 'grid-cols-7',
547
- 8: 'grid-cols-8',
548
- };
549
-
550
- return grids;
528
+ dtp1: '',
529
+ dtp2: '',
530
+ dtp3: '',
531
+ dtp4: '',
532
+ dtp5: '',
533
+ dtp6: '',
534
+ };
551
535
  },
552
- },
553
- methods: {
554
- handleChange(value) {
555
- console.log(value);
536
+ computed: {
537
+ gridSize() {
538
+ const grids = {
539
+ 5: 'grid-cols-5',
540
+ 6: 'grid-cols-6',
541
+ 7: 'grid-cols-7',
542
+ 8: 'grid-cols-8',
543
+ };
544
+ return grids;
545
+ },
546
+ },
547
+ methods: {
548
+ handleChange(value) {
549
+ console.log(value);
550
+ },
556
551
  },
557
- },
558
552
  });
559
553
  </script>
package/components-ts/ThemePopover.vue CHANGED
@@ -54,7 +54,9 @@
54
54
 
55
55
  <section>
56
56
  <h2>Popover with Table</h2>
57
- <p class="p-md-c my-6">Displays tables with popover content</p>
57
+ <p class="p-md-c my-6">
58
+ Displays tables with popover content. Add <b>class="popover-table"</b> to <b>&lt;el table class="popover-table" /&gt;</b>
59
+ </p>
58
60
  <div class="grid grid-flow-col auto-cols-max gap-4">
59
61
  <el-popover placement="right" width="400" trigger="click">
60
62
  <el-alert title="error alert" type="error" show-icon />
@@ -75,7 +77,14 @@
75
77
  </div>
76
78
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
77
79
  <p class="text-xs">
78
- <code> &lt;el-popover placement="right" width="400" trigger="click"&gt; &lt;el-table /&gt; &lt;/el-popover&gt; </code>
80
+ <code>
81
+ &lt;el-popover placement="right" width="400" trigger="click"&gt; &lt;el-alert title="error alert" type="error" show-icon /&gt;
82
+ &lt;el-table :data="gridData" class="popover-table"&gt; &lt;el-table-column width="150" property="date" label="date" /&gt;
83
+ &lt;el-table-column width="100" property="name" label="name" /&gt; &lt;el-table-column width="300" property="address" label="address"
84
+ /&gt; &lt;/el-table&gt; &lt;div class="popover-description"&gt;sdd sdsds&lt;/div&gt; &lt;div class="popover-footer"&gt;
85
+ &lt;el-button&gt;Cancel&lt;/el-button&gt; &lt;el-button&gt;Save&lt;/el-button&gt; &lt;/div&gt; &lt;template #reference&gt; &lt;el-button
86
+ type="primary" size="small"&gt;Click to activate&lt;/el-button&gt; &lt;/template&gt; &lt;/el-popover&gt;
87
+ </code>
79
88
  </p>
80
89
  </div>
81
90
 
@@ -367,7 +376,7 @@
367
376
  </div>
368
377
  </template>
369
378
 
370
- <script>
379
+ <script lang="ts">
371
380
  import { defineComponent } from 'vue';
372
381
 
373
382
  export default defineComponent({
@@ -407,13 +416,13 @@ export default defineComponent({
407
416
  shortcuts: [
408
417
  {
409
418
  text: 'Today',
410
- onClick(picker) {
419
+ onClick(picker: any): void {
411
420
  picker.$emit('pick', new Date());
412
421
  },
413
422
  },
414
423
  {
415
424
  text: 'Yesterday',
416
- onClick(picker) {
425
+ onClick(picker: any): void {
417
426
  const date = new Date();
418
427
 
419
428
  date.setTime(date.getTime() - 3600 * 1000 * 24);
@@ -422,7 +431,7 @@ export default defineComponent({
422
431
  },
423
432
  {
424
433
  text: 'A week ago',
425
- onClick(picker) {
434
+ onClick(picker: any): void {
426
435
  const date = new Date();
427
436
 
428
437
  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
@@ -438,7 +447,7 @@ export default defineComponent({
438
447
  shortcuts: [
439
448
  {
440
449
  text: 'Last week',
441
- onClick(picker) {
450
+ onClick(picker: any): void {
442
451
  const end = new Date();
443
452
  const start = new Date();
444
453
 
@@ -448,7 +457,7 @@ export default defineComponent({
448
457
  },
449
458
  {
450
459
  text: 'Last month',
451
- onClick(picker) {
460
+ onClick(picker: any): void {
452
461
  const end = new Date();
453
462
  const start = new Date();
454
463
 
@@ -458,7 +467,7 @@ export default defineComponent({
458
467
  },
459
468
  {
460
469
  text: 'Last 3 months',
461
- onClick(picker) {
470
+ onClick(picker: any): void {
462
471
  const end = new Date();
463
472
  const start = new Date();
464
473
 
@@ -474,13 +483,13 @@ export default defineComponent({
474
483
  shortcuts: [
475
484
  {
476
485
  text: 'This month',
477
- onClick(picker) {
486
+ onClick(picker: any): void {
478
487
  picker.$emit('pick', [new Date(), new Date()]);
479
488
  },
480
489
  },
481
490
  {
482
491
  text: 'This year',
483
- onClick(picker) {
492
+ onClick(picker: any): void {
484
493
  const end = new Date();
485
494
  const start = new Date(new Date().getFullYear(), 0);
486
495
 
@@ -489,7 +498,7 @@ export default defineComponent({
489
498
  },
490
499
  {
491
500
  text: 'Last 6 months',
492
- onClick(picker) {
501
+ onClick(picker: any): void {
493
502
  const end = new Date();
494
503
  const start = new Date();
495
504
 
@@ -503,13 +512,13 @@ export default defineComponent({
503
512
  shortcuts: [
504
513
  {
505
514
  text: 'Today',
506
- onClick(picker) {
515
+ onClick(picker: any): void {
507
516
  picker.$emit('pick', new Date());
508
517
  },
509
518
  },
510
519
  {
511
520
  text: 'Yesterday',
512
- onClick(picker) {
521
+ onClick(picker: any): void {
513
522
  const date = new Date();
514
523
 
515
524
  date.setTime(date.getTime() - 3600 * 1000 * 24);
@@ -518,7 +527,7 @@ export default defineComponent({
518
527
  },
519
528
  {
520
529
  text: 'A week ago',
521
- onClick(picker) {
530
+ onClick(picker: any): void {
522
531
  const date = new Date();
523
532
 
524
533
  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
@@ -527,9 +536,6 @@ export default defineComponent({
527
536
  },
528
537
  ],
529
538
  },
530
- value1: '',
531
- value2: '',
532
- value3: '',
533
539
  dtp1: '',
534
540
  dtp2: '',
535
541
  dtp3: '',
@@ -551,7 +557,7 @@ export default defineComponent({
551
557
  },
552
558
  },
553
559
  methods: {
554
- handleChange(value) {
560
+ handleChange(value: any): void {
555
561
  console.log(value);
556
562
  },
557
563
  },
package/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export * from './components-js/utils';
2
2
  export * from './components-js/ThemeSidebar';
3
3
  export * from './components-js/ThemeRadio';
4
+ export * from './components-js/ThemePopover';
4
5
  export * from './components-js/ThemeForm';
5
6
  export * from './components-js/ThemeCheckbox';
package/package.json CHANGED
@@ -39,5 +39,5 @@
39
39
  },
40
40
  "types": "index.d.ts",
41
41
  "typings": "./index.d.ts",
42
- "version": "1.0.185"
42
+ "version": "1.0.186"
43
43
  }