ariadne_view_components 0.0.79.2 → 0.0.79.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 858e616d4ab6d8334533068bc806476b1484e866d66234c1668dcc4f068ff3cd
-  data.tar.gz: 3fbea72d7c46d67b59b6f3a02262032891d279cbb615c67cb79f55d12e2cafd3
+  metadata.gz: 191ebf85e699edb8806ba64a8979be20bfc962db6b2f36fcf37fb244ae7bd753
+  data.tar.gz: 802332bdae038a697836a0f09b8c06cdee7b98fc6bc1947ab35f8918aa3249ef
 SHA512:
-  metadata.gz: 7f3d3f746728bc30b53334ce69044cb6fae3e3c8e4a6b0772338ad26803a6f95b6cb885f026d56f82d4ea1d7e683f0eb24e26e779ea538c2e52ccf6096c06af0
-  data.tar.gz: 183a8739ae7805aedc33c3469c854aa3cfd794980df0eb2b6f620486a0cc636e58960fc32c176e42d4d8f77b720a02984b3e002da2f7a5bd783b5aa8455a67a9
+  metadata.gz: 7bd1b82ed39aef69f710450c25f0c7bc4e96ba9629100f7cbd980d8877ec8e158a87fa9058819efb83c07de57cd89760aa34fefe9c10c02bfb9c53cee453cd51
+  data.tar.gz: 2b6a746a0c4f6711d00fd5209b941eba4a4a002f3cd16ee443d1c699fb257d03995552d6408d5279f5d0979318eb5d230ea2498ef5ef6b42db57efdb4dfed7d6

data/CHANGELOG.md

@@ -1,3 +1,5 @@
+## [v0.0.79.2] - 25-04-2024
+**Full Changelog**: https://github.com/yettoapp/ariadne/compare/v0.0.79.1...v0.0.79.2
 ## [v0.0.79.1] - 25-04-2024
 **Full Changelog**: https://github.com/yettoapp/ariadne/compare/v0.0.79...v0.0.79.1
 ## [v0.0.79] - 24-04-2024

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

@@ -0,0 +1,83 @@
+import { Controller } from '@hotwired/stimulus';
+import { html } from 'lit-html';
+class AriadneFormWith extends Controller {
+    constructor() {
+        super(...arguments);
+        this.onBlur = (event) => {
+            this.validateField(event.target);
+        };
+        this.onSubmit = (event) => {
+            if (!this.validateForm()) {
+                event.preventDefault();
+                this.firstInvalidField?.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) {
+        const fieldContainer = field.closest('.field');
+        if (!fieldContainer)
+            return;
+        const existingErrorMessageElement = fieldContainer.querySelector('.error');
+        if (existingErrorMessageElement) {
+            existingErrorMessageElement?.parentNode?.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'];
+export default AriadneFormWith;

data/app/components/ariadne/ariadne.js

@@ -0,0 +1,40 @@
+import { Application } from '@hotwired/stimulus';
+const application = Application.start();
+application.debug = import.meta.env.DEV;
+window.Stimulus = application;
+const componentModules = import.meta.glob(['../../components/**/component.ts'], { eager: true });
+for (const [path, module] of Object.entries(componentModules)) {
+    const dirs = path.split('/');
+    // Dropping ../../components and component.ts parts
+    const name = dirs
+        .slice(3, dirs.length - 1)
+        .join('-')
+        .replaceAll('_', '-')
+        .toLocaleLowerCase();
+    application.register(
+    // @tag stimulus-id
+    `ui-cmp-${name}`, module.default);
+}
+// import AriadneForm from './ariadne-form'
+// import StringMatchController from './string_match_controller/string_match_controller'
+// import EventsController from './events_controller/events_controller'
+// import OptionsController from './options_controller/options_controller'
+// import AccumulatorController from './accumulator_controller/accumulator_controller'
+// import ToggleableController from './toggleable_controller/toggleable_controller'
+// import ClipboardCopyComponent from './clipboard_copy_component/clipboard-copy-component'
+// import SlideoverComponent from './slideover_component/slideover-component'
+// import TabNavComponent from './tab_nav_component/tab-nav-component'
+// import TooltipComponent from './tooltip_component/tooltip-component'
+// import './tab_container_component/tab-container-component'
+// import './time_ago_component/time-ago-component'
+// const application = Application.start()
+// application.register('clipboard-copy-component', ClipboardCopyComponent)
+// application.register('ariadne-form', AriadneForm)
+// application.register('slideover-component', SlideoverComponent)
+// application.register('tab-nav-component', TabNavComponent)
+// application.register('tooltip-component', TooltipComponent)
+// application.register('toggleable', ToggleableController)
+// application.register('accumulator', AccumulatorController)
+// application.register('options', OptionsController)
+// application.register('string-match', StringMatchController)
+// application.register('events', EventsController)

data/app/components/ariadne/behaviors/captionable.rb

@@ -4,7 +4,7 @@ module Ariadne
   module Behaviors
     module Captionable
       def with_caption(text, **options)
-        @caption_id = Generate.id
+        @caption_id = ::Ariadne.generate_id
 
         Ariadne::Behaviors::Caption.new(id: @caption_id, text: text, component: self, **options)
       end

data/app/components/ariadne/behaviors/tooltipable.rb

@@ -4,7 +4,7 @@ module Ariadne
   module Behaviors
     module Tooltipable
       def with_tooltip(text, **options)
-        @tooltip_id = Generate.id
+        @tooltip_id = ::Ariadne.generate_id
 
         html_attrs.merge!(
           "data-ariadne-tooltip-target" => "activator",

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

@@ -0,0 +1,22 @@
+import { Controller } from '@hotwired/stimulus';
+import type { TemplateResult } from 'lit-html';
+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/lib/ariadne/view_components/version.rb

@@ -3,6 +3,6 @@
 # :nocov:
 module Ariadne
   module ViewComponents
-    VERSION = "0.0.79.2"
+    VERSION = "0.0.79.4"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ariadne_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.79.2
+  version: 0.0.79.4
 platform: ruby
 authors:
 - Garen J. Torikian
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-04-25 00:00:00.000000000 Z
+date: 2024-05-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: tailwind_merge
@@ -111,7 +111,7 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '0.2'
-description: 
+description:
 email:
 - gjtorikian@yetto.app
 executables: []
@@ -128,7 +128,9 @@ files:
 - app/assets/stylesheets/ariadne_view_components.css
 - app/assets/stylesheets/ariadne_view_components.css.br
 - app/assets/stylesheets/ariadne_view_components.css.gz
+- app/components/ariadne/ariadne-form.js
 - app/components/ariadne/ariadne-form.ts
+- app/components/ariadne/ariadne.js
 - app/components/ariadne/base_component.rb
 - app/components/ariadne/behaviors/captionable.rb
 - app/components/ariadne/behaviors/tooltipable.rb
@@ -170,6 +172,7 @@ files:
 - app/components/ariadne/layout/two_panel/component.rb
 - app/components/ariadne/layout/wide/component.html.erb
 - app/components/ariadne/layout/wide/component.rb
+- app/components/ariadne/tmp/components/ariadne/ariadne-form.d.ts
 - app/components/ariadne/turbo/frame/component.html.erb
 - app/components/ariadne/turbo/frame/component.rb
 - app/components/ariadne/turbo/stream_action/component.html.erb
@@ -309,7 +312,7 @@ licenses:
 - AGPL-3.0-or-later
 metadata:
   allowed_push_host: https://rubygems.org
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -324,8 +327,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.6
-signing_key: 
+rubygems_version: 3.4.21
+signing_key:
 specification_version: 4
 summary: ViewComponents + TailwindCSS + Stimulus
 test_files: []