ariadne_view_components 0.0.19 → 0.0.21

Sign up to get free protection for your applications and to get access to all the features.
Files changed (46) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +113 -0
  3. data/app/assets/javascripts/ariadne_view_components.js +1 -1
  4. data/app/assets/javascripts/ariadne_view_components.js.map +1 -1
  5. data/app/components/ariadne/avatar_stack_component.html.erb +1 -1
  6. data/app/components/ariadne/details_component.rb +1 -1
  7. data/app/components/ariadne/grid_component.rb +1 -1
  8. data/app/components/ariadne/heroicon_component.rb +2 -2
  9. data/app/components/ariadne/rich-text-area-component.ts +1 -0
  10. data/lib/ariadne/view_components/version.rb +1 -1
  11. data/static/arguments.yml +1 -1
  12. data/static/classes.yml +0 -3
  13. data/static/constants.json +6 -6
  14. metadata +6 -37
  15. data/app/assets/builds/ariadne_view_components.css +0 -2243
  16. data/app/components/ariadne/ariadne-form-with.d.ts +0 -20
  17. data/app/components/ariadne/ariadne-form-with.js +0 -85
  18. data/app/components/ariadne/ariadne-form.d.ts +0 -22
  19. data/app/components/ariadne/ariadne-form.js +0 -84
  20. data/app/components/ariadne/ariadne.d.ts +0 -2
  21. data/app/components/ariadne/ariadne.js +0 -16
  22. data/app/components/ariadne/clipboard-copy-component.d.ts +0 -4
  23. data/app/components/ariadne/clipboard-copy-component.js +0 -18
  24. data/app/components/ariadne/clipboard_copy_component.d.ts +0 -4
  25. data/app/components/ariadne/clipboard_copy_component.js +0 -18
  26. data/app/components/ariadne/rich-text-area-component.d.ts +0 -6
  27. data/app/components/ariadne/rich-text-area-component.js +0 -36
  28. data/app/components/ariadne/slideover-component.d.ts +0 -9
  29. data/app/components/ariadne/slideover-component.js +0 -10
  30. data/app/components/ariadne/slideover_component.d.ts +0 -9
  31. data/app/components/ariadne/slideover_component.js +0 -19
  32. data/app/components/ariadne/tab-component.js +0 -1
  33. data/app/components/ariadne/tab-container-component copy.d.ts +0 -1
  34. data/app/components/ariadne/tab-container-component copy.js +0 -23
  35. data/app/components/ariadne/tab-container-component.d.ts +0 -1
  36. data/app/components/ariadne/tab-container-component.js +0 -23
  37. data/app/components/ariadne/tab-nav-component.d.ts +0 -9
  38. data/app/components/ariadne/tab-nav-component.js +0 -32
  39. data/app/components/ariadne/tabs-component.d.ts +0 -0
  40. data/app/components/ariadne/tabs-component.js +0 -1
  41. data/app/components/ariadne/time-ago-component.d.ts +0 -1
  42. data/app/components/ariadne/time-ago-component.js +0 -1
  43. data/app/components/ariadne/time_ago_component.d.ts +0 -1
  44. data/app/components/ariadne/time_ago_component.js +0 -1
  45. data/app/components/ariadne/tooltip-component.d.ts +0 -24
  46. data/app/components/ariadne/tooltip-component.js +0 -42
@@ -1,20 +0,0 @@
1
- import { Controller } from '@hotwired/stimulus';
2
- import { TemplateResult } from 'lit-html';
3
- declare type HTMLFormField = HTMLInputElement | HTMLButtonElement | HTMLSelectElement | HTMLTextAreaElement;
4
- export default class AriadneFormWith extends Controller {
5
- connect(): void;
6
- disconnect(): void;
7
- onBlur: (event: Event) => void;
8
- onSubmit: (event: Event) => void;
9
- validateForm(): boolean;
10
- validateField(field: HTMLFormField): boolean;
11
- shouldValidateField(field: HTMLFormField): boolean;
12
- refreshErrorForInvalidField(field: HTMLFormField, isValid: boolean): void;
13
- removeExistingErrorMessage(field: HTMLFormField): void;
14
- showErrorForInvalidField(field: HTMLFormField): void;
15
- buildFieldErrorHtml(field: HTMLFormField): string;
16
- get formFields(): HTMLFormField[];
17
- get firstInvalidField(): HTMLFormField | undefined;
18
- getRenderString: (data: TemplateResult) => string;
19
- }
20
- export {};
@@ -1,85 +0,0 @@
1
- import { Controller } from '@hotwired/stimulus';
2
- import { html } from 'lit-html';
3
- export default class AriadneFormWith extends Controller {
4
- constructor() {
5
- super(...arguments);
6
- this.onBlur = (event) => {
7
- this.validateField(event.target);
8
- };
9
- this.onSubmit = (event) => {
10
- var _a;
11
- if (!this.validateForm()) {
12
- event.preventDefault();
13
- (_a = this.firstInvalidField) === null || _a === void 0 ? void 0 : _a.focus();
14
- }
15
- };
16
- this.getRenderString = (data) => {
17
- const { strings, values } = data;
18
- const v = [...values, ''].map(e => (typeof e === 'object' ? this.getRenderString(e) : e));
19
- return strings.reduce((acc, s, i) => acc + s + v[i], '');
20
- };
21
- }
22
- connect() {
23
- this.element.setAttribute('novalidate', 'true');
24
- this.element.addEventListener('blur', this.onBlur, true);
25
- this.element.addEventListener('submit', this.onSubmit);
26
- this.element.addEventListener('ajax:beforeSend', this.onSubmit);
27
- }
28
- disconnect() {
29
- this.element.removeEventListener('blur', this.onBlur);
30
- this.element.removeEventListener('submit', this.onSubmit);
31
- this.element.removeEventListener('ajax:beforeSend', this.onSubmit);
32
- }
33
- validateForm() {
34
- let isValid = true;
35
- // Not using `find` because we want to validate all the fields
36
- for (const field of this.formFields) {
37
- if (this.shouldValidateField(field) && !this.validateField(field))
38
- isValid = false;
39
- }
40
- return isValid;
41
- }
42
- validateField(field) {
43
- if (!this.shouldValidateField(field))
44
- return true;
45
- const isValid = field.checkValidity();
46
- field.classList.toggle('invalid', !isValid);
47
- this.refreshErrorForInvalidField(field, isValid);
48
- return isValid;
49
- }
50
- shouldValidateField(field) {
51
- return !field.disabled && !['file', 'reset', 'submit', 'button'].includes(field.type);
52
- }
53
- refreshErrorForInvalidField(field, isValid) {
54
- this.removeExistingErrorMessage(field);
55
- if (!isValid)
56
- this.showErrorForInvalidField(field);
57
- }
58
- removeExistingErrorMessage(field) {
59
- var _a;
60
- const fieldContainer = field.closest('.field');
61
- if (!fieldContainer)
62
- return;
63
- const existingErrorMessageElement = fieldContainer.querySelector('.error');
64
- if (existingErrorMessageElement) {
65
- (_a = existingErrorMessageElement === null || existingErrorMessageElement === void 0 ? void 0 : existingErrorMessageElement.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(existingErrorMessageElement);
66
- }
67
- }
68
- showErrorForInvalidField(field) {
69
- field.insertAdjacentHTML('afterend', this.buildFieldErrorHtml(field));
70
- }
71
- buildFieldErrorHtml(field) {
72
- const data = html `<p class="error">${field.validationMessage}</p>`;
73
- return this.getRenderString(data);
74
- }
75
- get formFields() {
76
- return Array.from(this.element.children).filter(node => {
77
- const data = node.attributes.getNamedItem('data-ariadne-form-field');
78
- if ((data === null || data === void 0 ? void 0 : data.value) === 'true')
79
- return true;
80
- });
81
- }
82
- get firstInvalidField() {
83
- return this.formFields.find(field => !field.checkValidity());
84
- }
85
- }
@@ -1,22 +0,0 @@
1
- import { Controller } from '@hotwired/stimulus';
2
- import type { TemplateResult } from 'lit-html';
3
- declare type HTMLFormField = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
4
- export default class AriadneFormWith extends Controller {
5
- static targets: string[];
6
- readonly formFieldTargets: [HTMLFormField];
7
- connect(): void;
8
- disconnect(): void;
9
- onBlur: (event: Event) => void;
10
- onSubmit: (event: Event) => void;
11
- validateForm(): boolean;
12
- validateField(field: HTMLFormField): boolean;
13
- shouldValidateField(field: HTMLFormField): boolean;
14
- refreshErrorForInvalidField(field: HTMLFormField, isValid: boolean): void;
15
- removeExistingErrorMessage(field: HTMLFormField): void;
16
- showErrorForInvalidField(field: HTMLFormField): void;
17
- buildFieldErrorHtml(field: HTMLFormField): string;
18
- get formFields(): HTMLFormField[];
19
- get firstInvalidField(): HTMLFormField | undefined;
20
- getRenderString: (data: TemplateResult) => string;
21
- }
22
- export {};
@@ -1,84 +0,0 @@
1
- import { Controller } from '@hotwired/stimulus';
2
- import { html } from 'lit-html';
3
- export default class AriadneFormWith extends Controller {
4
- constructor() {
5
- super(...arguments);
6
- this.onBlur = (event) => {
7
- this.validateField(event.target);
8
- };
9
- this.onSubmit = (event) => {
10
- var _a;
11
- if (!this.validateForm()) {
12
- event.preventDefault();
13
- (_a = this.firstInvalidField) === null || _a === void 0 ? void 0 : _a.focus();
14
- }
15
- };
16
- this.getRenderString = (data) => {
17
- const { strings, values } = data;
18
- const v = [...values, ''].map(e => (typeof e === 'object' ? this.getRenderString(e) : e));
19
- return strings.reduce((acc, s, i) => acc + s + v[i], '');
20
- };
21
- }
22
- connect() {
23
- this.element.setAttribute('novalidate', 'true');
24
- this.element.addEventListener('blur', this.onBlur, true);
25
- this.element.addEventListener('submit', this.onSubmit);
26
- this.element.addEventListener('ajax:beforeSend', this.onSubmit);
27
- }
28
- disconnect() {
29
- this.element.removeEventListener('blur', this.onBlur);
30
- this.element.removeEventListener('submit', this.onSubmit);
31
- this.element.removeEventListener('ajax:beforeSend', this.onSubmit);
32
- }
33
- validateForm() {
34
- let isValid = true;
35
- // Not using `find` because we want to validate all the fields
36
- for (const field of this.formFields) {
37
- if (this.shouldValidateField(field) && !this.validateField(field))
38
- isValid = false;
39
- }
40
- return isValid;
41
- }
42
- validateField(field) {
43
- if (!this.shouldValidateField(field))
44
- return true;
45
- const isValid = field.checkValidity();
46
- field.classList.toggle('invalid', !isValid);
47
- this.refreshErrorForInvalidField(field, isValid);
48
- return isValid;
49
- }
50
- shouldValidateField(field) {
51
- return (!field.disabled &&
52
- !field.classList.contains('ProseMirror') &&
53
- !['file', 'reset', 'submit', 'button'].includes(field.type));
54
- }
55
- refreshErrorForInvalidField(field, isValid) {
56
- this.removeExistingErrorMessage(field);
57
- if (!isValid)
58
- this.showErrorForInvalidField(field);
59
- }
60
- removeExistingErrorMessage(field) {
61
- var _a;
62
- const fieldContainer = field.closest('.field');
63
- if (!fieldContainer)
64
- return;
65
- const existingErrorMessageElement = fieldContainer.querySelector('.error');
66
- if (existingErrorMessageElement) {
67
- (_a = existingErrorMessageElement === null || existingErrorMessageElement === void 0 ? void 0 : existingErrorMessageElement.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(existingErrorMessageElement);
68
- }
69
- }
70
- showErrorForInvalidField(field) {
71
- field.insertAdjacentHTML('afterend', this.buildFieldErrorHtml(field));
72
- }
73
- buildFieldErrorHtml(field) {
74
- const data = html `<p class="error">${field.validationMessage}</p>`;
75
- return this.getRenderString(data);
76
- }
77
- get formFields() {
78
- return Array.from(this.formFieldTargets);
79
- }
80
- get firstInvalidField() {
81
- return this.formFields.find(field => !field.checkValidity());
82
- }
83
- }
84
- AriadneFormWith.targets = ['formField'];
@@ -1,2 +0,0 @@
1
- import './tab-container-component';
2
- import './time-ago-component';
@@ -1,16 +0,0 @@
1
- import { Application } from '@hotwired/stimulus';
2
- import AriadneForm from './ariadne-form';
3
- import ClipboardCopyComponent from './clipboard-copy-component';
4
- import RichTextAreaComponent from './rich-text-area-component';
5
- import SlideoverComponent from './slideover-component';
6
- import TabNavComponent from './tab-nav-component';
7
- import TooltipComponent from './tooltip-component';
8
- import './tab-container-component';
9
- import './time-ago-component';
10
- const application = Application.start();
11
- application.register('clipboard-copy-component', ClipboardCopyComponent);
12
- application.register('ariadne-form', AriadneForm);
13
- application.register('rich-text-area-component', RichTextAreaComponent);
14
- application.register('slideover-component', SlideoverComponent);
15
- application.register('tab-nav-component', TabNavComponent);
16
- application.register('tooltip-component', TooltipComponent);
@@ -1,4 +0,0 @@
1
- import { Controller } from '@hotwired/stimulus';
2
- export default class ClipboardCopyComponent extends Controller {
3
- copy(): void;
4
- }
@@ -1,18 +0,0 @@
1
- import { Controller } from '@hotwired/stimulus';
2
- export default class ClipboardCopyComponent extends Controller {
3
- copy() {
4
- const value = this.element.attributes.getNamedItem('value');
5
- const forNode = this.element.attributes.getNamedItem('for');
6
- if (value) {
7
- navigator.clipboard.writeText(value.value);
8
- }
9
- else if (forNode) {
10
- const node = document.getElementById(forNode.value);
11
- navigator.clipboard.writeText((node === null || node === void 0 ? void 0 : node.textContent) || '');
12
- }
13
- else {
14
- // just copy inner text
15
- navigator.clipboard.writeText(this.element.textContent || '');
16
- }
17
- }
18
- }
@@ -1,4 +0,0 @@
1
- import { Controller } from '@hotwired/stimulus';
2
- export default class ClipboardCopyComponent extends Controller {
3
- copy(): void;
4
- }
@@ -1,18 +0,0 @@
1
- import { Controller } from '@hotwired/stimulus';
2
- export default class ClipboardCopyComponent extends Controller {
3
- copy() {
4
- const value = this.element.attributes.getNamedItem('value');
5
- const forNode = this.element.attributes.getNamedItem('for');
6
- if (value) {
7
- navigator.clipboard.writeText(value.value);
8
- }
9
- else if (forNode) {
10
- const node = document.getElementById(forNode.value);
11
- navigator.clipboard.writeText((node === null || node === void 0 ? void 0 : node.textContent) || '');
12
- }
13
- else {
14
- // just copy inner text
15
- navigator.clipboard.writeText(this.element.textContent || '');
16
- }
17
- }
18
- }
@@ -1,6 +0,0 @@
1
- import { Controller } from '@hotwired/stimulus';
2
- export default class RichTextArea extends Controller {
3
- static targets: string[];
4
- readonly editorTargets: [HTMLDivElement];
5
- connect(): void;
6
- }
@@ -1,36 +0,0 @@
1
- import { Controller } from '@hotwired/stimulus';
2
- import { Editor } from '@tiptap/core';
3
- import { Document } from '@tiptap/extension-document';
4
- import { Paragraph } from '@tiptap/extension-paragraph';
5
- import { Text } from '@tiptap/extension-text';
6
- import DropCursor from '@tiptap/extension-dropcursor';
7
- import GapCursor from '@tiptap/extension-gapcursor';
8
- import { History } from '@tiptap/extension-history';
9
- export default class RichTextArea extends Controller {
10
- connect() {
11
- for (const editorElement of this.editorTargets) {
12
- const pmEditor = new Editor({
13
- extensions: [DropCursor, GapCursor, History, Document, Paragraph, Text],
14
- content: '',
15
- injectCSS: false,
16
- element: editorElement,
17
- editorProps: {
18
- attributes: {
19
- class: 'ariadne-p-3'
20
- }
21
- },
22
- parseOptions: {
23
- preserveWhitespace: true
24
- }
25
- });
26
- const tiptapValueContainer = editorElement.previousElementSibling;
27
- if (tiptapValueContainer) {
28
- const parentForm = editorElement.closest('form');
29
- parentForm === null || parentForm === void 0 ? void 0 : parentForm.addEventListener('submit', () => {
30
- tiptapValueContainer.setAttribute('value', pmEditor.getText() || '');
31
- });
32
- }
33
- }
34
- }
35
- }
36
- RichTextArea.targets = ['editor'];
@@ -1,9 +0,0 @@
1
- import { Controller } from '@hotwired/stimulus';
2
- export default class SlideoverComponent extends Controller {
3
- static targets: string[];
4
- readonly expandableTarget: HTMLDivElement;
5
- readonly expandWrapperTarget: HTMLDivElement;
6
- readonly slidePanelTargets: [HTMLDivElement];
7
- readonly buttonWrapperTarget: HTMLDivElement;
8
- toggle(): void;
9
- }
@@ -1,10 +0,0 @@
1
- import { Controller } from '@hotwired/stimulus';
2
- export default class SlideoverComponent extends Controller {
3
- toggle() {
4
- this.expandableTarget.classList.toggle('ariadne-hidden');
5
- for (const slidePanel of this.slidePanelTargets) {
6
- slidePanel.classList.toggle('ariadne-hidden');
7
- }
8
- }
9
- }
10
- SlideoverComponent.targets = ['expandable', 'expandWrapper', 'slidePanel', 'buttonWrapper'];
@@ -1,9 +0,0 @@
1
- import { Controller } from '@hotwired/stimulus';
2
- export default class SlideoverComponent extends Controller {
3
- static targets: string[];
4
- readonly expandableTarget: HTMLDivElement;
5
- readonly expandWrapperTarget: HTMLDivElement;
6
- readonly slidePanelTargets: [HTMLDivElement];
7
- readonly buttonWrapperTarget: HTMLDivElement;
8
- toggle(): void;
9
- }
@@ -1,19 +0,0 @@
1
- import { Controller } from '@hotwired/stimulus';
2
- export default class SlideoverComponent extends Controller {
3
- toggle() {
4
- var _a;
5
- // eslint-disable-next-line no-debugger
6
- debugger;
7
- this.expandableTarget.classList.toggle('hidden');
8
- this.expandWrapperTarget.classList.toggle('bg-filter-panel');
9
- for (const slidePanel of this.slidePanelTargets) {
10
- slidePanel.classList.toggle('hidden');
11
- }
12
- this.buttonWrapperTarget.classList.toggle('bg-filter-panel');
13
- if ((_a = document.getElementById('btnClose')) === null || _a === void 0 ? void 0 : _a.classList.contains('hidden')) {
14
- const form = this.buttonWrapperTarget.closest('form');
15
- form === null || form === void 0 ? void 0 : form.submit();
16
- }
17
- }
18
- }
19
- SlideoverComponent.targets = ['expandable', 'expandWrapper', 'slidePanel', 'buttonWrapper'];
@@ -1 +0,0 @@
1
- "use strict";
@@ -1 +0,0 @@
1
- import '@github/tab-container-element';
@@ -1,23 +0,0 @@
1
- import '@github/tab-container-element';
2
- // // keep in sync with tab_container_component.rb
3
- // const DEFAULT_SELECTED_CLASSES: string[] = ['ariadne-border-indigo-500', 'ariadne-text-indigo-600']
4
- // const DEFAULT_UNSELECTED_CLASSES: string[] = [
5
- // 'ariadne-text-gray-500',
6
- // 'hover:ariadne-text-gray-700',
7
- // 'hover:ariadne-border-gray-300'
8
- // ]
9
- for (const tabContainer of document.getElementsByTagName('tab-container')) {
10
- tabContainer.addEventListener('tab-container-change', function (event) {
11
- var _a;
12
- const newPanel = event.detail.relatedTarget;
13
- const tabContainer = newPanel.closest('tab-container');
14
- const tabList = tabContainer.firstElementChild;
15
- const currentTab = tabList.querySelector('[aria-selected="true"]');
16
- const tabId = (_a = newPanel.getAttribute('id')) === null || _a === void 0 ? void 0 : _a.split('-').slice(1).join('-');
17
- const newTab = tabList.querySelector(`#${tabId}`);
18
- currentTab.classList.remove(...DEFAULT_SELECTED_CLASSES);
19
- currentTab.classList.add(...DEFAULT_UNSELECTED_CLASSES);
20
- newTab.classList.add(...DEFAULT_SELECTED_CLASSES);
21
- newTab.classList.remove(...DEFAULT_UNSELECTED_CLASSES);
22
- });
23
- }
@@ -1 +0,0 @@
1
- import '@github/tab-container-element';
@@ -1,23 +0,0 @@
1
- import '@github/tab-container-element';
2
- // keep in sync with tab_container_component.rb
3
- const DEFAULT_SELECTED_CLASSES = ['ariadne-border-indigo-500', 'ariadne-text-indigo-600'];
4
- const DEFAULT_UNSELECTED_CLASSES = [
5
- 'ariadne-text-gray-500',
6
- 'hover:ariadne-text-gray-700',
7
- 'hover:ariadne-border-gray-300'
8
- ];
9
- for (const tabContainer of document.getElementsByTagName('tab-container')) {
10
- tabContainer.addEventListener('tab-container-change', function (event) {
11
- var _a;
12
- const newPanel = event.detail.relatedTarget;
13
- const tabContainer = newPanel.closest('tab-container');
14
- const tabList = tabContainer.firstElementChild;
15
- const currentTab = tabList.querySelector('[aria-selected="true"]');
16
- const tabId = (_a = newPanel.getAttribute('id')) === null || _a === void 0 ? void 0 : _a.split('-').slice(1).join('-');
17
- const newTab = tabList.querySelector(`#${tabId}`);
18
- currentTab.classList.remove(...DEFAULT_SELECTED_CLASSES);
19
- currentTab.classList.add(...DEFAULT_UNSELECTED_CLASSES);
20
- newTab.classList.add(...DEFAULT_SELECTED_CLASSES);
21
- newTab.classList.remove(...DEFAULT_UNSELECTED_CLASSES);
22
- });
23
- }
@@ -1,9 +0,0 @@
1
- import { Controller } from '@hotwired/stimulus';
2
- export default class TabNavComponent extends Controller {
3
- static targets: string[];
4
- readonly tabTargets: [HTMLAnchorElement];
5
- SELECTED_CLASSES: string[];
6
- UNSELECTED_CLASSES: string[];
7
- connect(): void;
8
- toggle(event: Event): void;
9
- }
@@ -1,32 +0,0 @@
1
- import { Controller } from '@hotwired/stimulus';
2
- export default class TabNavComponent extends Controller {
3
- constructor() {
4
- super(...arguments);
5
- // keep in synch with tab_nav_component
6
- this.SELECTED_CLASSES = ['ariadne-border-indigo-500', 'ariadne-text-indigo-600'];
7
- this.UNSELECTED_CLASSES = ['ariadne-text-gray-500', 'hover:ariadne-text-gray-700', 'hover:ariadne-border-gray-300'];
8
- }
9
- connect() {
10
- for (const tab of this.tabTargets) {
11
- if (tab.hasAttribute('aria-current')) {
12
- tab.classList.add(...this.SELECTED_CLASSES);
13
- tab.classList.remove(...this.UNSELECTED_CLASSES);
14
- }
15
- }
16
- }
17
- toggle(event) {
18
- for (const tab of this.tabTargets) {
19
- if (tab === event.target) {
20
- tab.setAttribute('aria-current', 'page');
21
- tab.classList.add(...this.SELECTED_CLASSES);
22
- tab.classList.remove(...this.UNSELECTED_CLASSES);
23
- }
24
- else if (tab.hasAttribute('aria-current')) {
25
- tab.removeAttribute('aria-current');
26
- tab.classList.add(...this.UNSELECTED_CLASSES);
27
- tab.classList.remove(...this.SELECTED_CLASSES);
28
- }
29
- }
30
- }
31
- }
32
- TabNavComponent.targets = ['tab'];
File without changes
@@ -1 +0,0 @@
1
- "use strict";
@@ -1 +0,0 @@
1
- import '@github/time-elements';
@@ -1 +0,0 @@
1
- import '@github/time-elements';
@@ -1 +0,0 @@
1
- import '@github/time-elements';
@@ -1 +0,0 @@
1
- import '@github/time-elements';
@@ -1,24 +0,0 @@
1
- import { Controller } from '@hotwired/stimulus';
2
- import type { Instance, Placement } from '@popperjs/core';
3
- export default class TooltipComponent extends Controller {
4
- static targets: string[];
5
- readonly triggerTarget: HTMLElement;
6
- readonly tooltipTarget: HTMLElement;
7
- static values: {
8
- placement: {
9
- type: StringConstructor;
10
- default: string;
11
- };
12
- offset: {
13
- type: ArrayConstructor;
14
- default: number[];
15
- };
16
- };
17
- readonly placementValue: Placement;
18
- readonly offsetValue: Array<number>;
19
- popperInstance: Instance;
20
- connect(): void;
21
- disconnect(): void;
22
- show(): void;
23
- hide(): void;
24
- }
@@ -1,42 +0,0 @@
1
- import { Controller } from '@hotwired/stimulus';
2
- import { createPopper } from '@popperjs/core';
3
- export default class TooltipComponent extends Controller {
4
- // Create a new Popper instance
5
- connect() {
6
- this.popperInstance = createPopper(this.triggerTarget, this.tooltipTarget, {
7
- placement: this.placementValue,
8
- modifiers: [
9
- {
10
- name: 'offset',
11
- options: {
12
- offset: this.offsetValue
13
- }
14
- }
15
- ]
16
- });
17
- }
18
- // Destroy the Popper instance
19
- disconnect() {
20
- if (this.popperInstance) {
21
- this.popperInstance.destroy();
22
- }
23
- }
24
- show() {
25
- this.tooltipTarget.setAttribute('data-tooltip-show', '');
26
- this.tooltipTarget.classList.remove('ariadne-invisible');
27
- // We need to tell Popper to update the tooltip position
28
- // after we show the tooltip, otherwise it will be incorrect
29
- this.popperInstance.update();
30
- this.dispatch('shown', { detail: { trigger: this.triggerTarget, tooltip: this.tooltipTarget } });
31
- }
32
- hide() {
33
- this.tooltipTarget.removeAttribute('data-tooltip-show');
34
- this.tooltipTarget.classList.add('ariadne-invisible');
35
- this.dispatch('ariadne-hidden', { detail: { trigger: this.triggerTarget, tooltip: this.tooltipTarget } });
36
- }
37
- }
38
- TooltipComponent.targets = ['trigger', 'tooltip'];
39
- TooltipComponent.values = {
40
- placement: { type: String, default: 'top' },
41
- offset: { type: Array, default: [0, 8] }
42
- };