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