feat(textarea): autoresize textareas
This commit is contained in:
parent
b3d2ca1486
commit
b02ba1e909
11 changed files with 54 additions and 17 deletions
|
@ -683,3 +683,15 @@ textarea::placeholder {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.resize-none {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.resize-x {
|
||||
resize: horizontal;
|
||||
}
|
||||
|
||||
.resize-y {
|
||||
resize: vertical;
|
||||
}
|
||||
|
|
|
@ -9,12 +9,13 @@ class Dsfr::InputComponent < ApplicationComponent
|
|||
renders_one :describedby
|
||||
renders_one :label
|
||||
|
||||
def initialize(form:, attribute:, input_type: :text_field, opts: {}, required: true)
|
||||
def initialize(form:, attribute:, input_type: :text_field, opts: {}, required: true, autoresize: true)
|
||||
@form = form
|
||||
@attribute = attribute
|
||||
@input_type = input_type
|
||||
@opts = opts
|
||||
@required = required
|
||||
@autoresize = autoresize
|
||||
end
|
||||
|
||||
def dsfr_champ_container
|
||||
|
@ -67,6 +68,10 @@ class Dsfr::InputComponent < ApplicationComponent
|
|||
@input_type == :email_field
|
||||
end
|
||||
|
||||
def autoresize?
|
||||
@input_type == :text_area && @autoresize
|
||||
end
|
||||
|
||||
def required?
|
||||
@required
|
||||
end
|
||||
|
|
|
@ -92,6 +92,11 @@ module Dsfr
|
|||
'email-input-target': 'input'
|
||||
})
|
||||
end
|
||||
|
||||
if autoresize?
|
||||
@opts.deep_merge!(data: { controller: 'autoresize' })
|
||||
end
|
||||
|
||||
@opts
|
||||
end
|
||||
|
||||
|
@ -119,6 +124,10 @@ module Dsfr
|
|||
false
|
||||
end
|
||||
|
||||
def autoresize?
|
||||
false
|
||||
end
|
||||
|
||||
def hint?
|
||||
return true if get_slot(:hint).present?
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
~ @form.text_area(:value, input_opts(id: @champ.input_id, aria: { describedby: @champ.describedby_id }, rows: 6, required: @champ.required?, value: html_to_string(@champ.value)))
|
||||
~ @form.text_area(:value, input_opts(id: @champ.input_id, aria: { describedby: @champ.describedby_id }, rows: 6, required: @champ.required?, value: html_to_string(@champ.value), data: { controller: 'autoresize' }))
|
||||
|
||||
- if @champ.character_limit_info?
|
||||
%p.fr-info-text
|
||||
|
|
|
@ -62,7 +62,7 @@
|
|||
- if !type_de_champ.header_section? && !type_de_champ.titre_identite?
|
||||
.cell.fr-mt-1w
|
||||
= form.label :description, "Description du champ (optionnel)", for: dom_id(type_de_champ, :description)
|
||||
= form.text_area :description, class: 'fr-input small-margin small width-100', rows: 3, id: dom_id(type_de_champ, :description)
|
||||
= form.text_area :description, class: 'fr-input small-margin small width-100 resize-y', rows: 3, id: dom_id(type_de_champ, :description)
|
||||
- if type_de_champ.header_section?
|
||||
.cell.fr-mt-1w
|
||||
= render TypesDeChampEditor::HeaderSectionComponent.new(form: form, tdc: type_de_champ, upper_tdcs: @upper_coordinates.map(&:type_de_champ))
|
||||
|
|
18
app/javascript/controllers/autoresize_controller.ts
Normal file
18
app/javascript/controllers/autoresize_controller.ts
Normal file
|
@ -0,0 +1,18 @@
|
|||
import { ApplicationController } from './application_controller';
|
||||
import { attach } from '@frsource/autoresize-textarea';
|
||||
import { isTextAreaElement } from '@coldwired/utils';
|
||||
|
||||
export class AutoresizeController extends ApplicationController {
|
||||
#detach?: () => void;
|
||||
connect(): void {
|
||||
if (isTextAreaElement(this.element)) {
|
||||
this.#detach = attach(this.element)?.detach;
|
||||
this.element.classList.add('resize-none');
|
||||
}
|
||||
}
|
||||
|
||||
disconnect(): void {
|
||||
this.#detach?.();
|
||||
this.element.classList.remove('resize-none');
|
||||
}
|
||||
}
|
|
@ -1,6 +0,0 @@
|
|||
en:
|
||||
activerecord:
|
||||
attributes:
|
||||
champs/textarea_champ:
|
||||
hints:
|
||||
value: "Resize the field to enter more lines"
|
|
@ -1,6 +0,0 @@
|
|||
fr:
|
||||
activerecord:
|
||||
attributes:
|
||||
champs/textarea_champ:
|
||||
hints:
|
||||
value: "Redimensionnez le champ pour saisir plus de lignes"
|
|
@ -3,6 +3,7 @@
|
|||
"@coldwired/actions": "^0.11.2",
|
||||
"@coldwired/turbo-stream": "^0.11.1",
|
||||
"@coldwired/utils": "^0.11.4",
|
||||
"@frsource/autoresize-textarea": "^2.0.53",
|
||||
"@gouvfr/dsfr": "^1.10.1",
|
||||
"@graphiql/plugin-explorer": "^0.3.4",
|
||||
"@graphiql/toolkit": "^0.9.1",
|
||||
|
|
|
@ -128,9 +128,8 @@ describe 'As an administrateur, I want to manage the procedure’s attestation',
|
|||
attestation.reload.logo.attached? && attestation.signature.attached? && !attestation.official_layout?
|
||||
}
|
||||
|
||||
# footer is rows-limited
|
||||
fill_in "Contenu du pied de page", with: ["line1", "line2", "line3", "line4"].join("\n")
|
||||
expect(page).to have_field("Contenu du pied de page", with: "line1\nline2\nline3line4")
|
||||
expect(page).to have_field("Contenu du pied de page", with: "line1\nline2\nline3\nline4")
|
||||
end
|
||||
|
||||
context "tag in error" do
|
||||
|
|
|
@ -1221,6 +1221,11 @@
|
|||
dependencies:
|
||||
"@floating-ui/dom" "^1.3.0"
|
||||
|
||||
"@frsource/autoresize-textarea@^2.0.53":
|
||||
version "2.0.53"
|
||||
resolved "https://registry.yarnpkg.com/@frsource/autoresize-textarea/-/autoresize-textarea-2.0.53.tgz#10228d23623f201c4f0aad9321118a3fb04b6462"
|
||||
integrity sha512-q8UxpjcfCE8ywICfxpimkYhMVg44vaAFvRkN1qLJ/M23upjq6PdZaHpuOEpbcD4EeV9VJNUG1fr5Dio8TPMs9w==
|
||||
|
||||
"@gouvfr/dsfr@^1.10.1":
|
||||
version "1.10.1"
|
||||
resolved "https://registry.yarnpkg.com/@gouvfr/dsfr/-/dsfr-1.10.1.tgz#a8470374d1f52d4195bd7c3c2b218fe3aaddac90"
|
||||
|
|
Loading…
Reference in a new issue