katalyst-koi 5.1.0 → 5.2.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.
- checksums.yaml +4 -4
- data/README.md +6 -4
- data/app/assets/builds/katalyst/koi.esm.js +0 -323
- data/app/assets/builds/katalyst/koi.js +0 -323
- data/app/assets/builds/katalyst/koi.min.js +1 -1
- data/app/assets/builds/katalyst/koi.min.js.map +1 -1
- data/app/assets/stylesheets/koi/blocks/pagy.css +2 -1
- data/app/assets/stylesheets/koi/utilities/visually-hidden.css +0 -7
- data/app/controllers/admin/admin_users_controller.rb +2 -2
- data/app/controllers/admin/caches_controller.rb +1 -1
- data/app/controllers/admin/otps_controller.rb +1 -1
- data/app/controllers/concerns/koi/controller.rb +9 -5
- data/app/javascript/koi/controllers/index.js +0 -15
- data/config/locales/pagy/en.yml +24 -0
- data/lib/generators/koi/admin_controller/templates/controller.rb.tt +8 -8
- data/lib/koi/engine.rb +6 -1
- metadata +2 -7
- data/Upgrade.md +0 -10
- data/app/assets/stylesheets/koi/blocks/index-actions.css +0 -69
- data/app/helpers/koi/index_actions_helper.rb +0 -98
- data/app/javascript/koi/controllers/form_request_submit_controller.js +0 -11
- data/app/javascript/koi/controllers/index_actions_controller.js +0 -60
- data/config/locales/pagy.en.yml +0 -11
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: dfcdf49c4632945c3b3a9377d1059b48c369735936e14f2d5e8aa8ebfe2cba26
|
|
4
|
+
data.tar.gz: 1e065fb94849acb2a26cfd4d2e94fe9ef48e78dacf60e4b08237dce29d12df2d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: de5af9e249dceeedbc1ee44ea191544ee8c601386098b6c2b605da4876a153f8884d18bee17c1da19b086ce9d43df5c67f255f93cf6f1a26fd49a9411348814a
|
|
7
|
+
data.tar.gz: 533c94541efccfe3b806b20fc1c4e7d39b0888b0fade694d366f82a90c296f97a65c1c7e95f4b7bfbc8e4b14129128313398a2d328c8d234fb57ca15224a7215
|
data/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# Koi
|
|
2
2
|
|
|
3
|
+
Koi is a framework for building Rails admin functionality.
|
|
4
|
+
|
|
3
5
|
## Installation
|
|
4
6
|
|
|
5
7
|
Add this line to your application's Gemfile:
|
|
@@ -14,10 +16,10 @@ And then execute:
|
|
|
14
16
|
bundle install
|
|
15
17
|
```
|
|
16
18
|
|
|
17
|
-
##
|
|
19
|
+
## Contributing
|
|
18
20
|
|
|
19
|
-
|
|
21
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/katalyst/katalyst-tables.
|
|
20
22
|
|
|
21
|
-
##
|
|
23
|
+
## License
|
|
22
24
|
|
|
23
|
-
|
|
25
|
+
Katalyst Tables is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
|
@@ -43,75 +43,6 @@ class FlashController extends Controller {
|
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
/**
|
|
47
|
-
A stimulus controller to request form submissions.
|
|
48
|
-
This controller should be attached to a form element.
|
|
49
|
-
*/
|
|
50
|
-
class FormRequestSubmitController extends Controller {
|
|
51
|
-
requestSubmit() {
|
|
52
|
-
this.element.requestSubmit();
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
class IndexActionsController extends Controller {
|
|
57
|
-
static targets = ["create", "search", "sort"];
|
|
58
|
-
|
|
59
|
-
initialize() {
|
|
60
|
-
// debounce search
|
|
61
|
-
this.update = debounce(this, this.update);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
disconnect() {
|
|
65
|
-
clearTimeout(this.timer);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
create() {
|
|
69
|
-
this.createTarget.click();
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
search() {
|
|
73
|
-
this.searchTarget.focus();
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
clear() {
|
|
77
|
-
this.searchTarget.value = "";
|
|
78
|
-
this.searchTarget.closest("form").requestSubmit();
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
update() {
|
|
82
|
-
this.searchTarget.closest("form").requestSubmit();
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
submit() {
|
|
86
|
-
const shouldFocus = document.activeElement === this.searchTarget;
|
|
87
|
-
|
|
88
|
-
if (this.searchTarget.value === "") {
|
|
89
|
-
this.searchTarget.disabled = true;
|
|
90
|
-
}
|
|
91
|
-
if (this.sortTarget.value === "") {
|
|
92
|
-
this.sortTarget.disabled = true;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
// restore state and focus after submit
|
|
96
|
-
Promise.resolve().then(() => {
|
|
97
|
-
this.searchTarget.disabled = false;
|
|
98
|
-
this.sortTarget.disabled = false;
|
|
99
|
-
if (shouldFocus) {
|
|
100
|
-
this.searchTarget.focus();
|
|
101
|
-
}
|
|
102
|
-
});
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
function debounce(self, f) {
|
|
107
|
-
return (...args) => {
|
|
108
|
-
clearTimeout(self.timer);
|
|
109
|
-
self.timer = setTimeout(() => {
|
|
110
|
-
f.apply(self, ...args);
|
|
111
|
-
}, 300);
|
|
112
|
-
};
|
|
113
|
-
}
|
|
114
|
-
|
|
115
46
|
class KeyboardController extends Controller {
|
|
116
47
|
static values = {
|
|
117
48
|
mapping: String,
|
|
@@ -423,248 +354,6 @@ class PagyNavController extends Controller {
|
|
|
423
354
|
};
|
|
424
355
|
}
|
|
425
356
|
|
|
426
|
-
const DEFAULT_DELAY = 250;
|
|
427
|
-
|
|
428
|
-
/**
|
|
429
|
-
* A utility class for managing CSS transition animations.
|
|
430
|
-
*
|
|
431
|
-
* Transition uses Javascript timers to track state instead of relying on
|
|
432
|
-
* CSS transition events, which is a more complicated API. Please call `cancel`
|
|
433
|
-
* when the node being animated is detached from the DOM to avoid unexpected
|
|
434
|
-
* errors or animation glitches.
|
|
435
|
-
*
|
|
436
|
-
* Transition assumes that CSS already specifies styles to achieve the expected
|
|
437
|
-
* start and end states. Transition adds temporary overrides and then animates
|
|
438
|
-
* between those values using CSS transitions. For example, to use the collapse
|
|
439
|
-
* transition:
|
|
440
|
-
*
|
|
441
|
-
* @example
|
|
442
|
-
* // CSS:
|
|
443
|
-
* target {
|
|
444
|
-
* max-height: unset;
|
|
445
|
-
* overflow: 0;
|
|
446
|
-
* }
|
|
447
|
-
* target.hidden {
|
|
448
|
-
* max-height: 0;
|
|
449
|
-
* }
|
|
450
|
-
*
|
|
451
|
-
* @example
|
|
452
|
-
* // Javascript
|
|
453
|
-
* target.addClass("hidden");
|
|
454
|
-
* new Transition(target).collapse().start();
|
|
455
|
-
*/
|
|
456
|
-
class Transition {
|
|
457
|
-
constructor(target, options) {
|
|
458
|
-
const { delay } = this._setDefaults(options);
|
|
459
|
-
|
|
460
|
-
this.target = target;
|
|
461
|
-
this.runner = new Runner(this, delay);
|
|
462
|
-
this.properties = [];
|
|
463
|
-
|
|
464
|
-
this.startingCallbacks = [];
|
|
465
|
-
this.startedCallbacks = [];
|
|
466
|
-
this.completeCallbacks = [];
|
|
467
|
-
}
|
|
468
|
-
|
|
469
|
-
add(property) {
|
|
470
|
-
this.properties.push(property);
|
|
471
|
-
return this;
|
|
472
|
-
}
|
|
473
|
-
|
|
474
|
-
/** Adds callback for transition events */
|
|
475
|
-
addCallback(type, callback) {
|
|
476
|
-
switch (type) {
|
|
477
|
-
case "starting":
|
|
478
|
-
this.startingCallbacks.push(callback);
|
|
479
|
-
break;
|
|
480
|
-
case "started":
|
|
481
|
-
this.startedCallbacks.push(callback);
|
|
482
|
-
break;
|
|
483
|
-
case "complete":
|
|
484
|
-
this.completeCallbacks.push(callback);
|
|
485
|
-
break;
|
|
486
|
-
}
|
|
487
|
-
return this;
|
|
488
|
-
}
|
|
489
|
-
|
|
490
|
-
/** Collapse an element in place, assumes overflow is set appropriately, margin is not collapsed */
|
|
491
|
-
collapse() {
|
|
492
|
-
return this.add(
|
|
493
|
-
new PropertyTransition(
|
|
494
|
-
"max-height",
|
|
495
|
-
`${this.target.scrollHeight}px`,
|
|
496
|
-
"0px",
|
|
497
|
-
),
|
|
498
|
-
);
|
|
499
|
-
}
|
|
500
|
-
|
|
501
|
-
/** Restore a collapsed element */
|
|
502
|
-
expand() {
|
|
503
|
-
return this.add(
|
|
504
|
-
new PropertyTransition(
|
|
505
|
-
"max-height",
|
|
506
|
-
"0px",
|
|
507
|
-
`${this.target.scrollHeight}px`,
|
|
508
|
-
),
|
|
509
|
-
);
|
|
510
|
-
}
|
|
511
|
-
|
|
512
|
-
/** Slide an element left or right by its scroll width, assumes position relative */
|
|
513
|
-
slideOut(direction) {
|
|
514
|
-
return this.add(
|
|
515
|
-
new PropertyTransition(direction, "0px", `-${this.target.scrollWidth}px`),
|
|
516
|
-
);
|
|
517
|
-
}
|
|
518
|
-
|
|
519
|
-
/** Restore an element that has been slid */
|
|
520
|
-
slideIn(direction) {
|
|
521
|
-
return this.add(
|
|
522
|
-
new PropertyTransition(direction, `-${this.target.scrollWidth}px`, "0px"),
|
|
523
|
-
);
|
|
524
|
-
}
|
|
525
|
-
|
|
526
|
-
/** Cause an element to become transparent by transforming opacity */
|
|
527
|
-
fadeOut() {
|
|
528
|
-
return this.add(new PropertyTransition("opacity", "100%", "0%"));
|
|
529
|
-
}
|
|
530
|
-
|
|
531
|
-
/** Cause a transparent element to become visible again */
|
|
532
|
-
fadeIn() {
|
|
533
|
-
return this.add(new PropertyTransition("opacity", "0%", "100%"));
|
|
534
|
-
}
|
|
535
|
-
|
|
536
|
-
start(callback = null) {
|
|
537
|
-
// start the runner on next tick so that any side-effects of the current execution can occur first
|
|
538
|
-
requestAnimationFrame(() => {
|
|
539
|
-
this.runner.start(this.target);
|
|
540
|
-
if (callback) callback();
|
|
541
|
-
});
|
|
542
|
-
return this;
|
|
543
|
-
}
|
|
544
|
-
|
|
545
|
-
cancel() {
|
|
546
|
-
this.runner.stop(this.target);
|
|
547
|
-
return this;
|
|
548
|
-
}
|
|
549
|
-
|
|
550
|
-
_starting() {
|
|
551
|
-
const event = new Event("transition:starting");
|
|
552
|
-
this.startingCallbacks.forEach((cb) => cb(event));
|
|
553
|
-
this.target.dispatchEvent(event);
|
|
554
|
-
}
|
|
555
|
-
|
|
556
|
-
_started() {
|
|
557
|
-
const event = new Event("transition:started");
|
|
558
|
-
this.startedCallbacks.forEach((cb) => cb(event));
|
|
559
|
-
this.target.dispatchEvent(event);
|
|
560
|
-
}
|
|
561
|
-
|
|
562
|
-
_complete() {
|
|
563
|
-
const event = new Event("transition:complete");
|
|
564
|
-
this.completeCallbacks.forEach((cb) => cb(event));
|
|
565
|
-
this.target.dispatchEvent(event);
|
|
566
|
-
}
|
|
567
|
-
|
|
568
|
-
_setDefaults(options) {
|
|
569
|
-
return Object.assign({ delay: DEFAULT_DELAY }, options);
|
|
570
|
-
}
|
|
571
|
-
}
|
|
572
|
-
|
|
573
|
-
/**
|
|
574
|
-
* Encapsulates internal execution and timing functionality for `Transition`
|
|
575
|
-
*/
|
|
576
|
-
class Runner {
|
|
577
|
-
constructor(transition, delay) {
|
|
578
|
-
this.transition = transition;
|
|
579
|
-
this.running = null;
|
|
580
|
-
this.delay = delay;
|
|
581
|
-
}
|
|
582
|
-
|
|
583
|
-
start(target) {
|
|
584
|
-
// 1. Set the initial state(s)
|
|
585
|
-
this.transition.properties.forEach((t) => t.onStarting(target));
|
|
586
|
-
|
|
587
|
-
// 2. On next update, set transition and final state(s)
|
|
588
|
-
requestAnimationFrame(() => this.onStarted(target));
|
|
589
|
-
|
|
590
|
-
// 3. After transition has finished, clean up
|
|
591
|
-
this.running = setTimeout(() => this.stop(target, true), this.delay);
|
|
592
|
-
|
|
593
|
-
this.transition._starting();
|
|
594
|
-
}
|
|
595
|
-
|
|
596
|
-
onStarted(target) {
|
|
597
|
-
target.style.transitionProperty = this.transition.properties
|
|
598
|
-
.map((t) => t.property)
|
|
599
|
-
.join(",");
|
|
600
|
-
target.style.transitionDuration = `${this.delay}ms`;
|
|
601
|
-
this.transition.properties.forEach((t) => t.onStarted(target));
|
|
602
|
-
|
|
603
|
-
this.transition._started();
|
|
604
|
-
}
|
|
605
|
-
|
|
606
|
-
stop(target, timeout = false) {
|
|
607
|
-
if (!this.running) return;
|
|
608
|
-
if (!timeout) clearTimeout(this.running);
|
|
609
|
-
|
|
610
|
-
this.running = null;
|
|
611
|
-
|
|
612
|
-
target.style.removeProperty("transition-property");
|
|
613
|
-
target.style.removeProperty("transition-duration");
|
|
614
|
-
this.transition.properties.forEach((t) => t.onComplete(target));
|
|
615
|
-
|
|
616
|
-
this.transition._complete();
|
|
617
|
-
}
|
|
618
|
-
}
|
|
619
|
-
|
|
620
|
-
/**
|
|
621
|
-
* Represents animation of a single CSS property. Currently only CSS animations
|
|
622
|
-
* are supported, but this could be a natural extension point for Javascript
|
|
623
|
-
* animations in the future.
|
|
624
|
-
*/
|
|
625
|
-
class PropertyTransition {
|
|
626
|
-
constructor(property, from, to) {
|
|
627
|
-
this.property = property;
|
|
628
|
-
this.from = from;
|
|
629
|
-
this.to = to;
|
|
630
|
-
}
|
|
631
|
-
|
|
632
|
-
onStarting(target) {
|
|
633
|
-
target.style.setProperty(this.property, this.from);
|
|
634
|
-
}
|
|
635
|
-
|
|
636
|
-
onStarted(target) {
|
|
637
|
-
target.style.setProperty(this.property, this.to);
|
|
638
|
-
}
|
|
639
|
-
|
|
640
|
-
onComplete(target) {
|
|
641
|
-
target.style.removeProperty(this.property);
|
|
642
|
-
}
|
|
643
|
-
}
|
|
644
|
-
|
|
645
|
-
class ShowHideController extends Controller {
|
|
646
|
-
static targets = ["content"];
|
|
647
|
-
|
|
648
|
-
toggle() {
|
|
649
|
-
const element = this.contentTarget;
|
|
650
|
-
const hide = element.toggleAttribute("data-collapsed");
|
|
651
|
-
|
|
652
|
-
// cancel previous animation, if any
|
|
653
|
-
if (this.transition) this.transition.cancel();
|
|
654
|
-
|
|
655
|
-
const transition = (this.transition = new Transition(element)
|
|
656
|
-
.addCallback("starting", function () {
|
|
657
|
-
element.setAttribute("data-collapsed-transitioning", "true");
|
|
658
|
-
})
|
|
659
|
-
.addCallback("complete", function () {
|
|
660
|
-
element.removeAttribute("data-collapsed-transitioning");
|
|
661
|
-
}));
|
|
662
|
-
hide ? transition.collapse() : transition.expand();
|
|
663
|
-
|
|
664
|
-
transition.start();
|
|
665
|
-
}
|
|
666
|
-
}
|
|
667
|
-
|
|
668
357
|
/**
|
|
669
358
|
* Connect an input (e.g. title) to slug.
|
|
670
359
|
*/
|
|
@@ -760,14 +449,6 @@ const Definitions = [
|
|
|
760
449
|
identifier: "flash",
|
|
761
450
|
controllerConstructor: FlashController,
|
|
762
451
|
},
|
|
763
|
-
{
|
|
764
|
-
identifier: "form-request-submit",
|
|
765
|
-
controllerConstructor: FormRequestSubmitController,
|
|
766
|
-
},
|
|
767
|
-
{
|
|
768
|
-
identifier: "index-actions",
|
|
769
|
-
controllerConstructor: IndexActionsController,
|
|
770
|
-
},
|
|
771
452
|
{
|
|
772
453
|
identifier: "keyboard",
|
|
773
454
|
controllerConstructor: KeyboardController,
|
|
@@ -788,10 +469,6 @@ const Definitions = [
|
|
|
788
469
|
identifier: "pagy-nav",
|
|
789
470
|
controllerConstructor: PagyNavController,
|
|
790
471
|
},
|
|
791
|
-
{
|
|
792
|
-
identifier: "show-hide",
|
|
793
|
-
controllerConstructor: ShowHideController,
|
|
794
|
-
},
|
|
795
472
|
{
|
|
796
473
|
identifier: "sluggable",
|
|
797
474
|
controllerConstructor: SluggableController,
|