ariadne_view_components 0.0.19 → 0.0.20

data/app/components/ariadne/ariadne-form-with.d.ts

@@ -1,20 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-import { TemplateResult } from 'lit-html';
-declare type HTMLFormField = HTMLInputElement | HTMLButtonElement | HTMLSelectElement | HTMLTextAreaElement;
-export default class AriadneFormWith extends Controller {
-    connect(): void;
-    disconnect(): void;
-    onBlur: (event: Event) => void;
-    onSubmit: (event: Event) => void;
-    validateForm(): boolean;
-    validateField(field: HTMLFormField): boolean;
-    shouldValidateField(field: HTMLFormField): boolean;
-    refreshErrorForInvalidField(field: HTMLFormField, isValid: boolean): void;
-    removeExistingErrorMessage(field: HTMLFormField): void;
-    showErrorForInvalidField(field: HTMLFormField): void;
-    buildFieldErrorHtml(field: HTMLFormField): string;
-    get formFields(): HTMLFormField[];
-    get firstInvalidField(): HTMLFormField | undefined;
-    getRenderString: (data: TemplateResult) => string;
-}
-export {};

data/app/components/ariadne/ariadne-form-with.js

@@ -1,85 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-import { html } from 'lit-html';
-export default class AriadneFormWith extends Controller {
-    constructor() {
-        super(...arguments);
-        this.onBlur = (event) => {
-            this.validateField(event.target);
-        };
-        this.onSubmit = (event) => {
-            var _a;
-            if (!this.validateForm()) {
-                event.preventDefault();
-                (_a = this.firstInvalidField) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-        };
-        this.getRenderString = (data) => {
-            const { strings, values } = data;
-            const v = [...values, ''].map(e => (typeof e === 'object' ? this.getRenderString(e) : e));
-            return strings.reduce((acc, s, i) => acc + s + v[i], '');
-        };
-    }
-    connect() {
-        this.element.setAttribute('novalidate', 'true');
-        this.element.addEventListener('blur', this.onBlur, true);
-        this.element.addEventListener('submit', this.onSubmit);
-        this.element.addEventListener('ajax:beforeSend', this.onSubmit);
-    }
-    disconnect() {
-        this.element.removeEventListener('blur', this.onBlur);
-        this.element.removeEventListener('submit', this.onSubmit);
-        this.element.removeEventListener('ajax:beforeSend', this.onSubmit);
-    }
-    validateForm() {
-        let isValid = true;
-        // Not using `find` because we want to validate all the fields
-        for (const field of this.formFields) {
-            if (this.shouldValidateField(field) && !this.validateField(field))
-                isValid = false;
-        }
-        return isValid;
-    }
-    validateField(field) {
-        if (!this.shouldValidateField(field))
-            return true;
-        const isValid = field.checkValidity();
-        field.classList.toggle('invalid', !isValid);
-        this.refreshErrorForInvalidField(field, isValid);
-        return isValid;
-    }
-    shouldValidateField(field) {
-        return !field.disabled && !['file', 'reset', 'submit', 'button'].includes(field.type);
-    }
-    refreshErrorForInvalidField(field, isValid) {
-        this.removeExistingErrorMessage(field);
-        if (!isValid)
-            this.showErrorForInvalidField(field);
-    }
-    removeExistingErrorMessage(field) {
-        var _a;
-        const fieldContainer = field.closest('.field');
-        if (!fieldContainer)
-            return;
-        const existingErrorMessageElement = fieldContainer.querySelector('.error');
-        if (existingErrorMessageElement) {
-            (_a = existingErrorMessageElement === null || existingErrorMessageElement === void 0 ? void 0 : existingErrorMessageElement.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(existingErrorMessageElement);
-        }
-    }
-    showErrorForInvalidField(field) {
-        field.insertAdjacentHTML('afterend', this.buildFieldErrorHtml(field));
-    }
-    buildFieldErrorHtml(field) {
-        const data = html `<p class="error">${field.validationMessage}</p>`;
-        return this.getRenderString(data);
-    }
-    get formFields() {
-        return Array.from(this.element.children).filter(node => {
-            const data = node.attributes.getNamedItem('data-ariadne-form-field');
-            if ((data === null || data === void 0 ? void 0 : data.value) === 'true')
-                return true;
-        });
-    }
-    get firstInvalidField() {
-        return this.formFields.find(field => !field.checkValidity());
-    }
-}

data/app/components/ariadne/ariadne-form.d.ts

@@ -1,22 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-import type { TemplateResult } from 'lit-html';
-declare type HTMLFormField = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-export default class AriadneFormWith extends Controller {
-    static targets: string[];
-    readonly formFieldTargets: [HTMLFormField];
-    connect(): void;
-    disconnect(): void;
-    onBlur: (event: Event) => void;
-    onSubmit: (event: Event) => void;
-    validateForm(): boolean;
-    validateField(field: HTMLFormField): boolean;
-    shouldValidateField(field: HTMLFormField): boolean;
-    refreshErrorForInvalidField(field: HTMLFormField, isValid: boolean): void;
-    removeExistingErrorMessage(field: HTMLFormField): void;
-    showErrorForInvalidField(field: HTMLFormField): void;
-    buildFieldErrorHtml(field: HTMLFormField): string;
-    get formFields(): HTMLFormField[];
-    get firstInvalidField(): HTMLFormField | undefined;
-    getRenderString: (data: TemplateResult) => string;
-}
-export {};

data/app/components/ariadne/ariadne-form.js

@@ -1,84 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-import { html } from 'lit-html';
-export default class AriadneFormWith extends Controller {
-    constructor() {
-        super(...arguments);
-        this.onBlur = (event) => {
-            this.validateField(event.target);
-        };
-        this.onSubmit = (event) => {
-            var _a;
-            if (!this.validateForm()) {
-                event.preventDefault();
-                (_a = this.firstInvalidField) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-        };
-        this.getRenderString = (data) => {
-            const { strings, values } = data;
-            const v = [...values, ''].map(e => (typeof e === 'object' ? this.getRenderString(e) : e));
-            return strings.reduce((acc, s, i) => acc + s + v[i], '');
-        };
-    }
-    connect() {
-        this.element.setAttribute('novalidate', 'true');
-        this.element.addEventListener('blur', this.onBlur, true);
-        this.element.addEventListener('submit', this.onSubmit);
-        this.element.addEventListener('ajax:beforeSend', this.onSubmit);
-    }
-    disconnect() {
-        this.element.removeEventListener('blur', this.onBlur);
-        this.element.removeEventListener('submit', this.onSubmit);
-        this.element.removeEventListener('ajax:beforeSend', this.onSubmit);
-    }
-    validateForm() {
-        let isValid = true;
-        // Not using `find` because we want to validate all the fields
-        for (const field of this.formFields) {
-            if (this.shouldValidateField(field) && !this.validateField(field))
-                isValid = false;
-        }
-        return isValid;
-    }
-    validateField(field) {
-        if (!this.shouldValidateField(field))
-            return true;
-        const isValid = field.checkValidity();
-        field.classList.toggle('invalid', !isValid);
-        this.refreshErrorForInvalidField(field, isValid);
-        return isValid;
-    }
-    shouldValidateField(field) {
-        return (!field.disabled &&
-            !field.classList.contains('ProseMirror') &&
-            !['file', 'reset', 'submit', 'button'].includes(field.type));
-    }
-    refreshErrorForInvalidField(field, isValid) {
-        this.removeExistingErrorMessage(field);
-        if (!isValid)
-            this.showErrorForInvalidField(field);
-    }
-    removeExistingErrorMessage(field) {
-        var _a;
-        const fieldContainer = field.closest('.field');
-        if (!fieldContainer)
-            return;
-        const existingErrorMessageElement = fieldContainer.querySelector('.error');
-        if (existingErrorMessageElement) {
-            (_a = existingErrorMessageElement === null || existingErrorMessageElement === void 0 ? void 0 : existingErrorMessageElement.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(existingErrorMessageElement);
-        }
-    }
-    showErrorForInvalidField(field) {
-        field.insertAdjacentHTML('afterend', this.buildFieldErrorHtml(field));
-    }
-    buildFieldErrorHtml(field) {
-        const data = html `<p class="error">${field.validationMessage}</p>`;
-        return this.getRenderString(data);
-    }
-    get formFields() {
-        return Array.from(this.formFieldTargets);
-    }
-    get firstInvalidField() {
-        return this.formFields.find(field => !field.checkValidity());
-    }
-}
-AriadneFormWith.targets = ['formField'];

data/app/components/ariadne/ariadne.d.ts

@@ -1,2 +0,0 @@
-import './tab-container-component';
-import './time-ago-component';

data/app/components/ariadne/ariadne.js

@@ -1,16 +0,0 @@
-import { Application } from '@hotwired/stimulus';
-import AriadneForm from './ariadne-form';
-import ClipboardCopyComponent from './clipboard-copy-component';
-import RichTextAreaComponent from './rich-text-area-component';
-import SlideoverComponent from './slideover-component';
-import TabNavComponent from './tab-nav-component';
-import TooltipComponent from './tooltip-component';
-import './tab-container-component';
-import './time-ago-component';
-const application = Application.start();
-application.register('clipboard-copy-component', ClipboardCopyComponent);
-application.register('ariadne-form', AriadneForm);
-application.register('rich-text-area-component', RichTextAreaComponent);
-application.register('slideover-component', SlideoverComponent);
-application.register('tab-nav-component', TabNavComponent);
-application.register('tooltip-component', TooltipComponent);

data/app/components/ariadne/clipboard-copy-component.d.ts

@@ -1,4 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-export default class ClipboardCopyComponent extends Controller {
-    copy(): void;
-}

data/app/components/ariadne/clipboard-copy-component.js

@@ -1,18 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-export default class ClipboardCopyComponent extends Controller {
-    copy() {
-        const value = this.element.attributes.getNamedItem('value');
-        const forNode = this.element.attributes.getNamedItem('for');
-        if (value) {
-            navigator.clipboard.writeText(value.value);
-        }
-        else if (forNode) {
-            const node = document.getElementById(forNode.value);
-            navigator.clipboard.writeText((node === null || node === void 0 ? void 0 : node.textContent) || '');
-        }
-        else {
-            // just copy inner text
-            navigator.clipboard.writeText(this.element.textContent || '');
-        }
-    }
-}

data/app/components/ariadne/clipboard_copy_component.d.ts

@@ -1,4 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-export default class ClipboardCopyComponent extends Controller {
-    copy(): void;
-}

data/app/components/ariadne/clipboard_copy_component.js

@@ -1,18 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-export default class ClipboardCopyComponent extends Controller {
-    copy() {
-        const value = this.element.attributes.getNamedItem('value');
-        const forNode = this.element.attributes.getNamedItem('for');
-        if (value) {
-            navigator.clipboard.writeText(value.value);
-        }
-        else if (forNode) {
-            const node = document.getElementById(forNode.value);
-            navigator.clipboard.writeText((node === null || node === void 0 ? void 0 : node.textContent) || '');
-        }
-        else {
-            // just copy inner text
-            navigator.clipboard.writeText(this.element.textContent || '');
-        }
-    }
-}

data/app/components/ariadne/rich-text-area-component.d.ts

@@ -1,6 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-export default class RichTextArea extends Controller {
-    static targets: string[];
-    readonly editorTargets: [HTMLDivElement];
-    connect(): void;
-}

data/app/components/ariadne/rich-text-area-component.js

@@ -1,36 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-import { Editor } from '@tiptap/core';
-import { Document } from '@tiptap/extension-document';
-import { Paragraph } from '@tiptap/extension-paragraph';
-import { Text } from '@tiptap/extension-text';
-import DropCursor from '@tiptap/extension-dropcursor';
-import GapCursor from '@tiptap/extension-gapcursor';
-import { History } from '@tiptap/extension-history';
-export default class RichTextArea extends Controller {
-    connect() {
-        for (const editorElement of this.editorTargets) {
-            const pmEditor = new Editor({
-                extensions: [DropCursor, GapCursor, History, Document, Paragraph, Text],
-                content: '',
-                injectCSS: false,
-                element: editorElement,
-                editorProps: {
-                    attributes: {
-                        class: 'ariadne-p-3'
-                    }
-                },
-                parseOptions: {
-                    preserveWhitespace: true
-                }
-            });
-            const tiptapValueContainer = editorElement.previousElementSibling;
-            if (tiptapValueContainer) {
-                const parentForm = editorElement.closest('form');
-                parentForm === null || parentForm === void 0 ? void 0 : parentForm.addEventListener('submit', () => {
-                    tiptapValueContainer.setAttribute('value', pmEditor.getText() || '');
-                });
-            }
-        }
-    }
-}
-RichTextArea.targets = ['editor'];

data/app/components/ariadne/slideover-component.d.ts

@@ -1,9 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-export default class SlideoverComponent extends Controller {
-    static targets: string[];
-    readonly expandableTarget: HTMLDivElement;
-    readonly expandWrapperTarget: HTMLDivElement;
-    readonly slidePanelTargets: [HTMLDivElement];
-    readonly buttonWrapperTarget: HTMLDivElement;
-    toggle(): void;
-}

data/app/components/ariadne/slideover-component.js

@@ -1,10 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-export default class SlideoverComponent extends Controller {
-    toggle() {
-        this.expandableTarget.classList.toggle('ariadne-hidden');
-        for (const slidePanel of this.slidePanelTargets) {
-            slidePanel.classList.toggle('ariadne-hidden');
-        }
-    }
-}
-SlideoverComponent.targets = ['expandable', 'expandWrapper', 'slidePanel', 'buttonWrapper'];

data/app/components/ariadne/slideover_component.d.ts

@@ -1,9 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-export default class SlideoverComponent extends Controller {
-    static targets: string[];
-    readonly expandableTarget: HTMLDivElement;
-    readonly expandWrapperTarget: HTMLDivElement;
-    readonly slidePanelTargets: [HTMLDivElement];
-    readonly buttonWrapperTarget: HTMLDivElement;
-    toggle(): void;
-}

data/app/components/ariadne/slideover_component.js

@@ -1,19 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-export default class SlideoverComponent extends Controller {
-    toggle() {
-        var _a;
-        // eslint-disable-next-line no-debugger
-        debugger;
-        this.expandableTarget.classList.toggle('hidden');
-        this.expandWrapperTarget.classList.toggle('bg-filter-panel');
-        for (const slidePanel of this.slidePanelTargets) {
-            slidePanel.classList.toggle('hidden');
-        }
-        this.buttonWrapperTarget.classList.toggle('bg-filter-panel');
-        if ((_a = document.getElementById('btnClose')) === null || _a === void 0 ? void 0 : _a.classList.contains('hidden')) {
-            const form = this.buttonWrapperTarget.closest('form');
-            form === null || form === void 0 ? void 0 : form.submit();
-        }
-    }
-}
-SlideoverComponent.targets = ['expandable', 'expandWrapper', 'slidePanel', 'buttonWrapper'];

data/app/components/ariadne/tab-component.js

@@ -1 +0,0 @@
-"use strict";

data/app/components/ariadne/tab-container-component copy.d.ts

@@ -1 +0,0 @@
-import '@github/tab-container-element';

data/app/components/ariadne/tab-container-component copy.js

@@ -1,23 +0,0 @@
-import '@github/tab-container-element';
-// // keep in sync with tab_container_component.rb
-// const DEFAULT_SELECTED_CLASSES: string[] = ['ariadne-border-indigo-500', 'ariadne-text-indigo-600']
-// const DEFAULT_UNSELECTED_CLASSES: string[] = [
-//   'ariadne-text-gray-500',
-//   'hover:ariadne-text-gray-700',
-//   'hover:ariadne-border-gray-300'
-// ]
-for (const tabContainer of document.getElementsByTagName('tab-container')) {
-    tabContainer.addEventListener('tab-container-change', function (event) {
-        var _a;
-        const newPanel = event.detail.relatedTarget;
-        const tabContainer = newPanel.closest('tab-container');
-        const tabList = tabContainer.firstElementChild;
-        const currentTab = tabList.querySelector('[aria-selected="true"]');
-        const tabId = (_a = newPanel.getAttribute('id')) === null || _a === void 0 ? void 0 : _a.split('-').slice(1).join('-');
-        const newTab = tabList.querySelector(`#${tabId}`);
-        currentTab.classList.remove(...DEFAULT_SELECTED_CLASSES);
-        currentTab.classList.add(...DEFAULT_UNSELECTED_CLASSES);
-        newTab.classList.add(...DEFAULT_SELECTED_CLASSES);
-        newTab.classList.remove(...DEFAULT_UNSELECTED_CLASSES);
-    });
-}

data/app/components/ariadne/tab-container-component.d.ts

@@ -1 +0,0 @@
-import '@github/tab-container-element';

data/app/components/ariadne/tab-container-component.js

@@ -1,23 +0,0 @@
-import '@github/tab-container-element';
-// keep in sync with tab_container_component.rb
-const DEFAULT_SELECTED_CLASSES = ['ariadne-border-indigo-500', 'ariadne-text-indigo-600'];
-const DEFAULT_UNSELECTED_CLASSES = [
-    'ariadne-text-gray-500',
-    'hover:ariadne-text-gray-700',
-    'hover:ariadne-border-gray-300'
-];
-for (const tabContainer of document.getElementsByTagName('tab-container')) {
-    tabContainer.addEventListener('tab-container-change', function (event) {
-        var _a;
-        const newPanel = event.detail.relatedTarget;
-        const tabContainer = newPanel.closest('tab-container');
-        const tabList = tabContainer.firstElementChild;
-        const currentTab = tabList.querySelector('[aria-selected="true"]');
-        const tabId = (_a = newPanel.getAttribute('id')) === null || _a === void 0 ? void 0 : _a.split('-').slice(1).join('-');
-        const newTab = tabList.querySelector(`#${tabId}`);
-        currentTab.classList.remove(...DEFAULT_SELECTED_CLASSES);
-        currentTab.classList.add(...DEFAULT_UNSELECTED_CLASSES);
-        newTab.classList.add(...DEFAULT_SELECTED_CLASSES);
-        newTab.classList.remove(...DEFAULT_UNSELECTED_CLASSES);
-    });
-}

data/app/components/ariadne/tab-nav-component.d.ts

@@ -1,9 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-export default class TabNavComponent extends Controller {
-    static targets: string[];
-    readonly tabTargets: [HTMLAnchorElement];
-    SELECTED_CLASSES: string[];
-    UNSELECTED_CLASSES: string[];
-    connect(): void;
-    toggle(event: Event): void;
-}

data/app/components/ariadne/tab-nav-component.js

@@ -1,32 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-export default class TabNavComponent extends Controller {
-    constructor() {
-        super(...arguments);
-        // keep in synch with tab_nav_component
-        this.SELECTED_CLASSES = ['ariadne-border-indigo-500', 'ariadne-text-indigo-600'];
-        this.UNSELECTED_CLASSES = ['ariadne-text-gray-500', 'hover:ariadne-text-gray-700', 'hover:ariadne-border-gray-300'];
-    }
-    connect() {
-        for (const tab of this.tabTargets) {
-            if (tab.hasAttribute('aria-current')) {
-                tab.classList.add(...this.SELECTED_CLASSES);
-                tab.classList.remove(...this.UNSELECTED_CLASSES);
-            }
-        }
-    }
-    toggle(event) {
-        for (const tab of this.tabTargets) {
-            if (tab === event.target) {
-                tab.setAttribute('aria-current', 'page');
-                tab.classList.add(...this.SELECTED_CLASSES);
-                tab.classList.remove(...this.UNSELECTED_CLASSES);
-            }
-            else if (tab.hasAttribute('aria-current')) {
-                tab.removeAttribute('aria-current');
-                tab.classList.add(...this.UNSELECTED_CLASSES);
-                tab.classList.remove(...this.SELECTED_CLASSES);
-            }
-        }
-    }
-}
-TabNavComponent.targets = ['tab'];

data/app/components/ariadne/tabs-component.js

@@ -1 +0,0 @@
-"use strict";

data/app/components/ariadne/time-ago-component.d.ts

@@ -1 +0,0 @@
-import '@github/time-elements';

data/app/components/ariadne/time-ago-component.js

@@ -1 +0,0 @@
-import '@github/time-elements';

data/app/components/ariadne/time_ago_component.d.ts

@@ -1 +0,0 @@
-import '@github/time-elements';

data/app/components/ariadne/time_ago_component.js

@@ -1 +0,0 @@
-import '@github/time-elements';

data/app/components/ariadne/tooltip-component.d.ts

@@ -1,24 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-import type { Instance, Placement } from '@popperjs/core';
-export default class TooltipComponent extends Controller {
-    static targets: string[];
-    readonly triggerTarget: HTMLElement;
-    readonly tooltipTarget: HTMLElement;
-    static values: {
-        placement: {
-            type: StringConstructor;
-            default: string;
-        };
-        offset: {
-            type: ArrayConstructor;
-            default: number[];
-        };
-    };
-    readonly placementValue: Placement;
-    readonly offsetValue: Array<number>;
-    popperInstance: Instance;
-    connect(): void;
-    disconnect(): void;
-    show(): void;
-    hide(): void;
-}

data/app/components/ariadne/tooltip-component.js

@@ -1,42 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-import { createPopper } from '@popperjs/core';
-export default class TooltipComponent extends Controller {
-    // Create a new Popper instance
-    connect() {
-        this.popperInstance = createPopper(this.triggerTarget, this.tooltipTarget, {
-            placement: this.placementValue,
-            modifiers: [
-                {
-                    name: 'offset',
-                    options: {
-                        offset: this.offsetValue
-                    }
-                }
-            ]
-        });
-    }
-    // Destroy the Popper instance
-    disconnect() {
-        if (this.popperInstance) {
-            this.popperInstance.destroy();
-        }
-    }
-    show() {
-        this.tooltipTarget.setAttribute('data-tooltip-show', '');
-        this.tooltipTarget.classList.remove('ariadne-invisible');
-        // We need to tell Popper to update the tooltip position
-        // after we show the tooltip, otherwise it will be incorrect
-        this.popperInstance.update();
-        this.dispatch('shown', { detail: { trigger: this.triggerTarget, tooltip: this.tooltipTarget } });
-    }
-    hide() {
-        this.tooltipTarget.removeAttribute('data-tooltip-show');
-        this.tooltipTarget.classList.add('ariadne-invisible');
-        this.dispatch('ariadne-hidden', { detail: { trigger: this.triggerTarget, tooltip: this.tooltipTarget } });
-    }
-}
-TooltipComponent.targets = ['trigger', 'tooltip'];
-TooltipComponent.values = {
-    placement: { type: String, default: 'top' },
-    offset: { type: Array, default: [0, 8] }
-};