From 33e52f41e45f493124d4aefc9d5294bfa2dae6dc Mon Sep 17 00:00:00 2001 From: Yusaku Sato Date: Thu, 2 Jul 2026 18:52:01 +0900 Subject: [PATCH 1/8] refactor(scaffold): separate mail form fields into mixin component - extract .mail-field markup from 300_form_input.pug into mail-field.pug mixins - render label/span attachments per CMS grouping rules with checkbox/radio exceptions - output hidden inputs for checkbox/radio groups to keep unchecked keys submitted - move prefecture and birth-year options to data.yml - add tentative markuplint overrides for the form component directory Co-Authored-By: Claude Fable 5 --- .../_libs/component/form/.markuplintrc | 8 + .../_libs/component/form/mail-field.pug | 114 +++++ .../scaffold/__assets/_libs/data/data.yml | 288 +++++++++++ .../__assets/htdocs/__tmpl/300_form_input.pug | 466 +++--------------- 4 files changed, 482 insertions(+), 394 deletions(-) create mode 100644 packages/@d-zero/scaffold/__assets/_libs/component/form/.markuplintrc create mode 100644 packages/@d-zero/scaffold/__assets/_libs/component/form/mail-field.pug diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/.markuplintrc b/packages/@d-zero/scaffold/__assets/_libs/component/form/.markuplintrc new file mode 100644 index 00000000..37fdfcbc --- /dev/null +++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/.markuplintrc @@ -0,0 +1,8 @@ +{ + // TODO: コミットを通すための暫定設定。PR 作成までにルールの上書き内容を調整する + "extends": ["../../../../markuplint.config.js"], + "rules": { + "class-naming": false, + "placeholder-label-option": false + } +} diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/mail-field.pug b/packages/@d-zero/scaffold/__assets/_libs/component/form/mail-field.pug new file mode 100644 index 00000000..9b0c799c --- /dev/null +++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/mail-field.pug @@ -0,0 +1,114 @@ +//- isGrouped: 同一 fieldset/legend 内に複数フィールドを配置する場合に true。 + 親の見出し構造と一致させること（グループ化あり = fieldset/legend、なし = div/label） +mixin mailField(params = {}) + - + const props = Object.assign({ input: { + type: "text", + maxlength: null, + size: null, + }, + name: "", beforeAttachment: "", afterAttachment: "", description: "", errorMessage: "", isRequired: false, isGrouped: false }, params); + const nameFirstLetterUppercased = props.name.charAt(0).toUpperCase() + props.name.slice(1); + const idInput = `MailMessage${nameFirstLetterUppercased}`; + const idField = `FieldMailMessage${nameFirstLetterUppercased}`; + // checkbox / radio は各選択肢が label を持つため、前後見出しは label にしない + const hasOwnOptionLabels = props.input.type === "checkbox" || props.input.type === "radio"; + // CMS要件: グループ化している場合は 前見出し を labelとする。前見出しが空であれば 後見出しを labelとする + const isBeforeAttachmentLabel = Boolean(props.isGrouped && !hasOwnOptionLabels && props.beforeAttachment); + const isAfterAttachmentLabel = Boolean(props.isGrouped && !hasOwnOptionLabels && !props.beforeAttachment && props.afterAttachment); + // pug-lint がスプレッド構文を解析できないため Object.assign で合成する + const inputProps = Object.assign({}, props, { idInput: idInput }); + .mail-field(data-type=props.input.type id=idField) + if isBeforeAttachmentLabel + label.mail-before-attachment(for=idInput) #{ props.beforeAttachment } + else + span.mail-before-attachment #{ props.beforeAttachment } + + span.mail-input + if props.input.type === "text" + +mailInputText(Object.assign({}, inputProps, { maxlength: props.input.maxlength, size: props.input.size })) + else if props.input.type === "select" + +mailInputSelect(Object.assign({}, inputProps, { options: props.input.options })) + else if props.input.type === "checkbox" + +mailInputCheckbox({ name: props.name, idInput: idInput, options: props.input.options }) + else if props.input.type === "radio" + +mailInputRadio(Object.assign({}, inputProps, { options: props.input.options })) + else if props.input.type === "textarea" + +mailInputTextarea(Object.assign({}, inputProps, { rows: props.input.rows, cols: props.input.cols })) + else if props.input.type === "file" + +mailInputFile(inputProps) + + if isAfterAttachmentLabel + label.mail-after-attachment(for=idInput) #{ props.afterAttachment } + else + span.mail-after-attachment #{ props.afterAttachment } + .mail-description #{ props.description } + .error-message #{ props.errorMessage } + +mixin mailInputText(params = {}) + - + const props = Object.assign({ name: "field1", idInput: "MailMessageField1", maxlength: null, size: null, isRequired: true }, params); + const inputName = `data[MailMessage][${props.name}]`; + input( + type="text" + name=inputName + maxlength=props.maxlength + size=props.size + required=props.isRequired + id=props.idInput) + +mixin mailInputSelect(params = {}) + - + const props = Object.assign({ name: "address1", idInput: "MailMessageAddress1", options: [{value: "", label: "選択してください"}], isRequired: true }, params); + const inputName = `data[MailMessage][${props.name}]`; + select(name=inputName required=props.isRequired id=props.idInput) + each option in props.options + option(value=option.value)= option.label + +//- checkbox には required を出力しない（各 input に付くと「全項目チェック必須」の挙動になるため。 + 「1つ以上選択必須」の検証はサーバー側の責務） +mixin mailInputCheckbox(params = {}) + - + const props = Object.assign({ name: "category", idInput: "MailMessageCategory", options: [{value: "Item1", label: "項目1"}] }, params); + const hiddenName = `data[MailMessage][${props.name}]`; + const inputName = `data[MailMessage][${props.name}][]`; + //- 未選択時にもキーが送信されるようにするための hidden（CMS 仕様） + input(type="hidden" name=hiddenName value id=props.idInput) + each option in props.options + - + const id = props.idInput + option.value; + .checkbox + input(type="checkbox" name=inputName value=option.value id=id) + label(for=id) #{ option.label } + +mixin mailInputRadio(params = {}) + - + const props = Object.assign({ name: "sex", idInput: "MailMessageSex", options: [{value: "1", label: "男性"}, {value: "2", label: "女性"}], isRequired: true }, params); + const inputName = `data[MailMessage][${props.name}]`; + const idHidden = `${props.idInput}_`; + //- 未選択時にもキーが送信されるようにするための hidden（CMS 仕様） + input(type="hidden" name=inputName value id=idHidden) + each option in props.options + - + const id = props.idInput + option.value; + .mail-group-radio + span + input(type="radio" name=inputName required=props.isRequired value=option.value id=id) + label(for=id) #{ option.label } + +mixin mailInputTextarea(params = {}) + - + const props = Object.assign({ name: "message", idInput: "MailMessageMessage", rows: null, cols: null, isRequired: true }, params); + const inputName = `data[MailMessage][${props.name}]`; + textarea( + name=inputName + rows=props.rows + cols=props.cols + required=props.isRequired + id=props.idInput) + +mixin mailInputFile(params = {}) + - + const props = Object.assign({ name: "file", idInput: "MailMessageFile", isRequired: true }, params); + const inputName = `data[MailMessage][${props.name}]`; + input(name=inputName type="file" required=props.isRequired id=props.idInput) diff --git a/packages/@d-zero/scaffold/__assets/_libs/data/data.yml b/packages/@d-zero/scaffold/__assets/_libs/data/data.yml index e6d2cfdb..a8943ebc 100644 --- a/packages/@d-zero/scaffold/__assets/_libs/data/data.yml +++ b/packages/@d-zero/scaffold/__assets/_libs/data/data.yml @@ -25,3 +25,291 @@ articles: - 甘い - 酸っぱい - オレンジ + +prefectureOptions: + - value: '北海道' + label: '北海道' + - value: '青森県' + label: '青森県' + - value: '岩手県' + label: '岩手県' + - value: '宮城県' + label: '宮城県' + - value: '秋田県' + label: '秋田県' + - value: '山形県' + label: '山形県' + - value: '福島県' + label: '福島県' + - value: '茨城県' + label: '茨城県' + - value: '栃木県' + label: '栃木県' + - value: '群馬県' + label: '群馬県' + - value: '埼玉県' + label: '埼玉県' + - value: '千葉県' + label: '千葉県' + - value: '東京都' + label: '東京都' + - value: '神奈川県' + label: '神奈川県' + - value: '新潟県' + label: '新潟県' + - value: '富山県' + label: '富山県' + - value: '石川県' + label: '石川県' + - value: '福井県' + label: '福井県' + - value: '山梨県' + label: '山梨県' + - value: '長野県' + label: '長野県' + - value: '岐阜県' + label: '岐阜県' + - value: '静岡県' + label: '静岡県' + - value: '愛知県' + label: '愛知県' + - value: '三重県' + label: '三重県' + - value: '滋賀県' + label: '滋賀県' + - value: '京都府' + label: '京都府' + - value: '大阪府' + label: '大阪府' + - value: '兵庫県' + label: '兵庫県' + - value: '奈良県' + label: '奈良県' + - value: '和歌山県' + label: '和歌山県' + - value: '鳥取県' + label: '鳥取県' + - value: '島根県' + label: '島根県' + - value: '岡山県' + label: '岡山県' + - value: '広島県' + label: '広島県' + - value: '山口県' + label: '山口県' + - value: '徳島県' + label: '徳島県' + - value: '香川県' + label: '香川県' + - value: '愛媛県' + label: '愛媛県' + - value: '高知県' + label: '高知県' + - value: '福岡県' + label: '福岡県' + - value: '佐賀県' + label: '佐賀県' + - value: '長崎県' + label: '長崎県' + - value: '熊本県' + label: '熊本県' + - value: '大分県' + label: '大分県' + - value: '宮崎県' + label: '宮崎県' + - value: '鹿児島県' + label: '鹿児島県' + - value: '沖縄県' + label: '沖縄県' + +birthYearOptions: + - value: '1' + label: '1923年' + - value: '2' + label: '1924年' + - value: '3' + label: '1925年' + - value: '4' + label: '1926年' + - value: '5' + label: '1927年' + - value: '6' + label: '1928年' + - value: '7' + label: '1929年' + - value: '8' + label: '1930年' + - value: '9' + label: '1931年' + - value: '10' + label: '1932年' + - value: '11' + label: '1933年' + - value: '12' + label: '1934年' + - value: '13' + label: '1935年' + - value: '14' + label: '1936年' + - value: '15' + label: '1937年' + - value: '16' + label: '1938年' + - value: '17' + label: '1939年' + - value: '18' + label: '1940年' + - value: '19' + label: '1941年' + - value: '20' + label: '1942年' + - value: '21' + label: '1943年' + - value: '22' + label: '1944年' + - value: '23' + label: '1945年' + - value: '24' + label: '1946年' + - value: '25' + label: '1947年' + - value: '26' + label: '1948年' + - value: '27' + label: '1949年' + - value: '28' + label: '1950年' + - value: '29' + label: '1951年' + - value: '30' + label: '1952年' + - value: '31' + label: '1953年' + - value: '32' + label: '1954年' + - value: '33' + label: '1955年' + - value: '34' + label: '1956年' + - value: '35' + label: '1957年' + - value: '36' + label: '1958年' + - value: '37' + label: '1959年' + - value: '38' + label: '1960年' + - value: '39' + label: '1961年' + - value: '40' + label: '1962年' + - value: '41' + label: '1963年' + - value: '42' + label: '1964年' + - value: '43' + label: '1965年' + - value: '44' + label: '1966年' + - value: '45' + label: '1967年' + - value: '46' + label: '1968年' + - value: '47' + label: '1969年' + - value: '48' + label: '1970年' + - value: '49' + label: '1971年' + - value: '50' + label: '1972年' + - value: '51' + label: '1973年' + - value: '52' + label: '1974年' + - value: '53' + label: '1975年' + - value: '54' + label: '1976年' + - value: '55' + label: '1977年' + - value: '56' + label: '1978年' + - value: '57' + label: '1979年' + - value: '58' + label: '1980年' + - value: '59' + label: '1981年' + - value: '60' + label: '1982年' + - value: '61' + label: '1983年' + - value: '62' + label: '1984年' + - value: '63' + label: '1985年' + - value: '64' + label: '1986年' + - value: '65' + label: '1987年' + - value: '66' + label: '1988年' + - value: '67' + label: '1989年' + - value: '68' + label: '1990年' + - value: '69' + label: '1991年' + - value: '70' + label: '1992年' + - value: '71' + label: '1993年' + - value: '72' + label: '1994年' + - value: '73' + label: '1995年' + - value: '74' + label: '1996年' + - value: '75' + label: '1997年' + - value: '76' + label: '1998年' + - value: '77' + label: '1999年' + - value: '78' + label: '2000年' + - value: '79' + label: '2001年' + - value: '80' + label: '2002年' + - value: '81' + label: '2003年' + - value: '82' + label: '2004年' + - value: '83' + label: '2005年' + - value: '84' + label: '2006年' + - value: '85' + label: '2007年' + - value: '86' + label: '2008年' + - value: '87' + label: '2009年' + - value: '88' + label: '2010年' + - value: '89' + label: '2011年' + - value: '90' + label: '2012年' + - value: '91' + label: '2013年' + - value: '92' + label: '2014年' + - value: '93' + label: '2015年' + - value: '94' + label: '2016年' + - value: '95' + label: '2017年' diff --git a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug index 7d094740..d8ca1f21 100644 --- a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug +++ b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug @@ -1,3 +1,5 @@ +include /component/form/mail-field.pug + .c-content-main // CMS要件: メールフォーム概要 .cc-form-description @@ -23,31 +25,8 @@ .cc-form-fieldset-attention .mail-attention 注意書き .cc-form-fieldset-body - // CMS要件: 入力タイプによって data-type 属性を変更 - #FieldMailMessageField1.mail-field(data-type="text") - // CMS要件: グループ化している場合は 前見出し は labelとする - label.mail-before-attachment(for="MailMessageField1") 前見出し - span.mail-input - input#MailMessageField1( - type="text" - name="data[MailMessage][field1]" - maxlength="255" - required) - span.mail-after-attachment 後見出し - .mail-description 説明文 - .error-message エラーメッセージ - #FieldMailMessageField2.mail-field(data-type="text") - span.mail-before-attachment - span.mail-input - input#MailMessageField2( - type="text" - name="data[MailMessage][field2]" - maxlength="255" - required) - // CMS要件: グループ化している場合は 前見出しが空であれば 後見出しを labelとする - label.mail-after-attachment(for="MailMessageField2") 後見出し - .mail-description 説明文 - .error-message エラーメッセージ + +mailField({ input: { type: "text", maxlength: 255 }, name: "field1", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: true, isRequired: true }) + +mailField({ input: { type: "text", maxlength: 255 }, name: "field2", beforeAttachment: "", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: true, isRequired: true }) // CMS要件: グループ化していない場合は div/label の構造 #GroupMailMessageField3.cc-form-fieldset div @@ -57,42 +36,15 @@ .cc-form-fieldset-attention .mail-attention 注意書き .cc-form-fieldset-body - #FieldMailMessageField3.mail-field(data-type="text") - // CMS要件: グループ化していない場合は 前見出しも後見出しも label にはならない - span.mail-before-attachment 前見出し - span.mail-input - input#MailMessageField3( - type="text" - name="data[MailMessage][field3]" - maxlength="255" - required) - span.mail-after-attachment 後見出し - .mail-description 説明文 - .error-message エラーメッセージ + +mailField({ input: { type: "text", maxlength: 255 }, name: "field3", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: false, isRequired: true }) #GroupMailMessageName.cc-form-fieldset fieldset legend.cc-form-fieldset-heading span 氏名 span.required 必須 .cc-form-fieldset-body - #FieldMailMessageLastName.mail-field(data-type="text") - label.mail-before-attachment(for="MailMessageLastName") 姓 - span.mail-input - input#MailMessageLastName( - type="text" - name="data[MailMessage][LastName]" - required) - span.mail-after-attachment - .mail-description - #FieldMailMessageFirstName.mail-field(data-type="text") - label.mail-before-attachment(for="MailMessageFirstName") 名 - span.mail-input - input#MailMessageFirstName( - type="text" - name="data[MailMessage][FirstName]" - required) - span.mail-after-attachment - .mail-description + +mailField({ input: { type: "text" }, name: "lastName", beforeAttachment: "姓", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: true }) + +mailField({ input: { type: "text" }, name: "firstName", beforeAttachment: "名", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: true }) #GroupMessageNameKana1.cc-form-fieldset fieldset legend.cc-form-fieldset-heading @@ -101,114 +53,18 @@ .cc-form-fieldset-attention .mail-attention カタカナで入力してください .cc-form-fieldset-body - #FieldMailMessageLastNameKana.mail-field(data-type="text") - label.mail-before-attachment(for="MailMessageLastNameKana") セイ - span.mail-input - input#MailMessageLastNameKana( - type="text" - name="data[MailMessage][LastNameKana]" - required) - span.mail-after-attachment - .mail-description - #FieldMailMessageFirstNameKana.mail-field(data-type="text") - label.mail-before-attachment(for="MailMessageFirstNameKana") メイ - span.mail-input - input#MailMessageFirstNameKana( - type="text" - name="data[MailMessage][FirstNameKana]" - required) - span.mail-after-attachment - .mail-description + +mailField({ input: { type: "text" }, name: "lastNameKana", beforeAttachment: "セイ", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: true }) + +mailField({ input: { type: "text" }, name: "firstNameKana", beforeAttachment: "メイ", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: true }) #GroupMessageZip.cc-form-fieldset fieldset legend.cc-form-fieldset-heading span 住所 span.optional 任意 .cc-form-fieldset-body - #FieldMessageZip.mail-field(data-type="text") - label.mail-before-attachment(for="MailMessageZip") 〒 - span.mail-input - input#MailMessageZip( - name="data[MailMessage][zip]" - size="10" - maxlength="8" - type="text") - span.mail-after-attachment - .mail-description ハイフンを除く半角数字で入力してください - #FieldMessageAddress1.mail-field(data-type="select") - label.mail-before-attachment(for="MailMessageAddress1") 都道府県 - span.mail-input - select#MailMessageAddress1(name="data[MailMessage][address_1]") - option(value) 選択してください - option(value="北海道") 北海道 - option(value="青森県") 青森県 - option(value="岩手県") 岩手県 - option(value="宮城県") 宮城県 - option(value="秋田県") 秋田県 - option(value="山形県") 山形県 - option(value="福島県") 福島県 - option(value="茨城県") 茨城県 - option(value="栃木県") 栃木県 - option(value="群馬県") 群馬県 - option(value="埼玉県") 埼玉県 - option(value="千葉県") 千葉県 - option(value="東京都") 東京都 - option(value="神奈川県") 神奈川県 - option(value="新潟県") 新潟県 - option(value="富山県") 富山県 - option(value="石川県") 石川県 - option(value="福井県") 福井県 - option(value="山梨県") 山梨県 - option(value="長野県") 長野県 - option(value="岐阜県") 岐阜県 - option(value="静岡県") 静岡県 - option(value="愛知県") 愛知県 - option(value="三重県") 三重県 - option(value="滋賀県") 滋賀県 - option(value="京都府") 京都府 - option(value="大阪府") 大阪府 - option(value="兵庫県") 兵庫県 - option(value="奈良県") 奈良県 - option(value="和歌山県") 和歌山県 - option(value="鳥取県") 鳥取県 - option(value="島根県") 島根県 - option(value="岡山県") 岡山県 - option(value="広島県") 広島県 - option(value="山口県") 山口県 - option(value="徳島県") 徳島県 - option(value="香川県") 香川県 - option(value="愛媛県") 愛媛県 - option(value="高知県") 高知県 - option(value="福岡県") 福岡県 - option(value="佐賀県") 佐賀県 - option(value="長崎県") 長崎県 - option(value="熊本県") 熊本県 - option(value="大分県") 大分県 - option(value="宮崎県") 宮崎県 - option(value="鹿児島県") 鹿児島県 - option(value="沖縄県") 沖縄県 - span.mail-after-attachment - .mail-description - #FieldMessageAddress2.mail-field(data-type="text") - label.mail-before-attachment(for="MailMessageAddress2") 市区町村 - span.mail-input - input#MailMessageAddress2( - name="data[MailMessage][address_2]" - size="30" - maxlength="200" - type="text") - span.mail-after-attachment - .mail-description - #FieldMessageAddress3.mail-field(data-type="text") - label.mail-before-attachment(for="MailMessageAddress3") 番地 - span.mail-input - input#MailMessageAddress3( - name="data[MailMessage][address_3]" - size="30" - maxlength="200" - type="text") - span.mail-after-attachment - .mail-description + +mailField({ input: { type: "text", maxlength: 8, size: 10 }, name: "zip", beforeAttachment: "〒", afterAttachment: "", description: "ハイフンを除く半角数字で入力してください", errorMessage: "", isGrouped: true, isRequired: false }) + +mailField({ input: { type: "select", options: [{ value: "", label: "選択してください" }, ...data.prefectureOptions] }, name: "address1", beforeAttachment: "都道府県", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: false }) + +mailField({ input: { type: "text", maxlength: 200, size: 30 }, name: "address2", beforeAttachment: "市区町村", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: false }) + +mailField({ input: { type: "text", maxlength: 200, size: 30 }, name: "address3", beforeAttachment: "番地", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: false }) // CMS要件: グループ化していない場合でも チェックボックスでは fieldset/legend の構造 #GroupMessageCategory.cc-form-fieldset fieldset @@ -216,32 +72,22 @@ span チェックボックス単体 span.required 必須 .cc-form-fieldset-body - #FieldMessageCategory.mail-field(data-type="checkbox") - span.mail-before-attachment チェックボックス前見出し - input#MailMessageCategory(type="hidden" name="data[MailMessage][category]" value) - .checkbox - input#MailMessageCategoryItem1( - type="checkbox" - name="data[MailMessage][category][]" - value="Item1") - |   - label(for="MailMessageCategoryItem1") 項目1 - .checkbox - input#MailMessageCategoryItem2( - type="checkbox" - name="data[MailMessage][category][]" - value="Item2") - |   - label(for="MailMessageCategoryItem2") 項目2 - .checkbox - input#MailMessageCategoryItem3( - type="checkbox" - name="data[MailMessage][category][]" - value="Item3") - |   - label(for="MailMessageCategoryItem3") 項目3 - span.mail-after-attachment チェックボックス後見出し - .mail-description + +mailField({ + input: { + type: "checkbox", + options: [ + { value: "Item1", label: "項目1" }, + { value: "Item2", label: "項目2" }, + { value: "Item3", label: "項目3" }, + ], + }, + name: "category", + beforeAttachment: "チェックボックス前見出し", + afterAttachment: "チェックボックス後見出し", + description: "", + errorMessage: "", + isGrouped: false, +}) #GroupMessageContents.cc-form-fieldset fieldset legend.cc-form-fieldset-heading @@ -250,69 +96,27 @@ .cc-form-fieldset-attention .mail-attention 注意書き .cc-form-fieldset-body - #FieldMessageContents.mail-field(data-type="checkbox") - span.mail-before-attachment 前見出し - input#MailMessageField4(type="hidden" name="data[MailMessage][contents]" value) - .checkbox - input#MailMessageField41( - type="checkbox" - name="data[MailMessage][contents][]" - value="1") - |   - label(for="MailMessageField41") 生麦生米生卵 - .checkbox - input#MailMessageField42( - type="checkbox" - name="data[MailMessage][contents][]" - value="2") - |   - label(for="MailMessageField42") 赤パジャマ黄パジャマ茶パジャマ - .checkbox - input#MailMessageField43( - type="checkbox" - name="data[MailMessage][contents][]" - value="3") - |   - label(for="MailMessageField43") 青巻紙赤巻紙黄巻紙 - .checkbox - input#MailMessageField44( - type="checkbox" - name="data[MailMessage][contents][]" - value="4") - |   - label(for="MailMessageField44") 隣の客はよく柿食う客だ - .checkbox - input#MailMessageField45( - type="checkbox" - name="data[MailMessage][contents][]" - value="5") - |   - label(for="MailMessageField45") かえるぴょこぴょこ3ぴょこぴょこ あわせてぴょこぴょこ6ぴょこぴょこ - .checkbox - input#MailMessageField46( - type="checkbox" - name="data[MailMessage][contents][]" - value="6") - |   - label(for="MailMessageField46") 東京特許許可局許可局長 - .checkbox - input#MailMessageField47( - type="checkbox" - name="data[MailMessage][contents][]" - value="7") - |   - label(for="MailMessageField47") その他 - span.mail-after-attachment - #FieldMessageContentsOther.mail-field(data-type="text") - label.mail-before-attachment(for="MailMessageContentsOther") その他 - span.mail-input - input#MailMessageContentsOther( - name="data[MailMessage][contents_other]" - size="30" - maxlength="255" - type="text") - span.mail-after-attachment 後見出し - .mail-description その他を選択された場合は内容をご入力ください。 + +mailField({ + input: { + type: "checkbox", + options: [ + { value: "1", label: "生麦生米生卵" }, + { value: "2", label: "赤パジャマ黄パジャマ茶パジャマ" }, + { value: "3", label: "青巻紙赤巻紙黄巻紙" }, + { value: "4", label: "隣の客はよく柿食う客だ" }, + { value: "5", label: "かえるぴょこぴょこ3ぴょこぴょこ あわせてぴょこぴょこ6ぴょこぴょこ" }, + { value: "6", label: "東京特許許可局許可局長" }, + { value: "7", label: "その他" }, + ], + }, + name: "contents", + beforeAttachment: "前見出し", + afterAttachment: "後見出し", + description: "", + errorMessage: "", + isGrouped: true, +}) + +mailField({ input: { type: "text", maxlength: 255, size: 30 }, name: "contentsOther", beforeAttachment: "その他", afterAttachment: "後見出し", description: "その他を選択された場合は内容をご入力ください。", errorMessage: "", isGrouped: true, isRequired: false }) #GroupMessageTel.cc-form-fieldset div .cc-form-fieldset-heading @@ -320,15 +124,7 @@ .cc-form-fieldset-attention .mail-attention 注意書き .cc-form-fieldset-body - #FieldMessageTel.mail-field(data-type="text") - span.mail-before-attachment 前見出し - span.mail-input - input#MailMessageTel( - name="data[MailMessage][tel]" - size="15" - maxlength="13" - type="text") - span.mail-after-attachment 後見出し + +mailField({ input: { type: "text", maxlength: 13, size: 15 }, name: "tel", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) #GroupMessageEmail1.cc-form-fieldset div .cc-form-fieldset-heading @@ -337,14 +133,7 @@ .cc-form-fieldset-attention .mail-attention 注意書き .cc-form-fieldset-body - #FieldMessageEmail1.mail-field(data-type="text") - span.mail-before-attachment 前見出し - span.mail-input - input#MailMessageEmail1( - name="data[MailMessage][email_1]" - maxlength="255" - type="text") - span.mail-after-attachment 後見出し + +mailField({ input: { type: "text", maxlength: 255, size: 30 }, name: "email1", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) #GroupMessageBirth.cc-form-fieldset div .cc-form-fieldset-heading @@ -353,107 +142,7 @@ .cc-form-fieldset-attention .mail-attention 注意書き .cc-form-fieldset-body - #FieldMessageBirth.mail-field(data-type="select") - span.mail-before-attachment 前見出し - span.mail-input - select#MailMessageBirth(name="data[MailMessage][birth]") - option(value) 選択してください - option(value="1") 1923年 - option(value="2") 1924年 - option(value="3") 1925年 - option(value="4") 1926年 - option(value="5") 1927年 - option(value="6") 1928年 - option(value="7") 1929年 - option(value="8") 1930年 - option(value="9") 1931年 - option(value="10") 1932年 - option(value="11") 1933年 - option(value="12") 1934年 - option(value="13") 1935年 - option(value="14") 1936年 - option(value="15") 1937年 - option(value="16") 1938年 - option(value="17") 1939年 - option(value="18") 1940年 - option(value="19") 1941年 - option(value="20") 1942年 - option(value="21") 1943年 - option(value="22") 1944年 - option(value="23") 1945年 - option(value="24") 1946年 - option(value="25") 1947年 - option(value="26") 1948年 - option(value="27") 1949年 - option(value="28") 1950年 - option(value="29") 1951年 - option(value="30") 1952年 - option(value="31") 1953年 - option(value="32") 1954年 - option(value="33") 1955年 - option(value="34") 1956年 - option(value="35") 1957年 - option(value="36") 1958年 - option(value="37") 1959年 - option(value="38") 1960年 - option(value="39") 1961年 - option(value="40") 1962年 - option(value="41") 1963年 - option(value="42") 1964年 - option(value="43") 1965年 - option(value="44") 1966年 - option(value="45") 1967年 - option(value="46") 1968年 - option(value="47") 1969年 - option(value="48") 1970年 - option(value="49") 1971年 - option(value="50") 1972年 - option(value="51") 1973年 - option(value="52") 1974年 - option(value="53") 1975年 - option(value="54") 1976年 - option(value="55") 1977年 - option(value="56") 1978年 - option(value="57") 1979年 - option(value="58") 1980年 - option(value="59") 1981年 - option(value="60") 1982年 - option(value="61") 1983年 - option(value="62") 1984年 - option(value="63") 1985年 - option(value="64") 1986年 - option(value="65") 1987年 - option(value="66") 1988年 - option(value="67") 1989年 - option(value="68") 1990年 - option(value="69") 1991年 - option(value="70") 1992年 - option(value="71") 1993年 - option(value="72") 1994年 - option(value="73") 1995年 - option(value="74") 1996年 - option(value="75") 1997年 - option(value="76") 1998年 - option(value="77") 1999年 - option(value="78") 2000年 - option(value="79") 2001年 - option(value="80") 2002年 - option(value="81") 2003年 - option(value="82") 2004年 - option(value="83") 2005年 - option(value="84") 2006年 - option(value="85") 2007年 - option(value="86") 2008年 - option(value="87") 2009年 - option(value="88") 2010年 - option(value="89") 2011年 - option(value="90") 2012年 - option(value="91") 2013年 - option(value="92") 2014年 - option(value="93") 2015年 - option(value="94") 2016年 - option(value="95") 2017年 - span.mail-after-attachment 後見出し + +mailField({ input: { type: "select", options: [{ value: "", label: "選択してください" }, ...data.birthYearOptions] }, name: "birth", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) #GroupMessageSex.cc-form-fieldset fieldset legend.cc-form-fieldset-heading @@ -462,17 +151,22 @@ .cc-form-fieldset-attention .mail-attention 注意書き .cc-form-fieldset-body - #FieldMessageSex.mail-field(data-type="radio") - span.mail-before-attachment 前見出し - input#MailMessageSex_(type="hidden" name="data[MailMessage][sex]" value) - .mail-group-radio - span - input#MailMessageSex1(type="radio" name="data[MailMessage][sex]" value="1") - label(for="MailMessageSex1") 男性 - span - input#MailMessageSex2(type="radio" name="data[MailMessage][sex]" value="2") - label(for="MailMessageSex2") 女性 - span.mail-after-attachment 後見出し + +mailField({ + input: { + type: "radio", + options: [ + { value: "1", label: "男性" }, + { value: "2", label: "女性" }, + ], + }, + name: "sex", + beforeAttachment: "前見出し", + afterAttachment: "後見出し", + description: "", + errorMessage: "", + isGrouped: false, + isRequired: false, +}) #GroupMessageMessage.cc-form-fieldset div .cc-form-fieldset-heading @@ -481,12 +175,7 @@ .cc-form-fieldset-attention .mail-attention 注意書き .cc-form-fieldset-body - #FieldMessageMessage.mail-field(data-type="textarea") - span.mail-before-attachment 前見出し - // CMS要件: サイズ指定がないときは cols属性を出力しない - span.mail-input - textarea#MailMessageMessage(name="data[MailMessage][message]" rows="10") - span.mail-after-attachment 後見出し + +mailField({ input: { type: "textarea", rows: 10, cols: null }, name: "message", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) #GroupMessageMessage2.cc-form-fieldset div .cc-form-fieldset-heading @@ -495,14 +184,7 @@ .cc-form-fieldset-attention .mail-attention 注意書き .cc-form-fieldset-body - #FieldMessageMessage2.mail-field(data-type="textarea") - span.mail-before-attachment 前見出し - span.mail-input - textarea#MailMessageMessage2( - name="data[MailMessage][message2]" - rows="10" - cols="20") - span.mail-after-attachment 後見出し + +mailField({ input: { type: "textarea", rows: 10, cols: 20 }, name: "message2", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) #GroupMessageFile.cc-form-fieldset div .cc-form-fieldset-heading @@ -511,11 +193,7 @@ .cc-form-fieldset-attention .mail-attention 注意書き .cc-form-fieldset-body - #FieldMessageFile.mail-field(data-type="file") - span.mail-before-attachment 前見出し - span.mail-input - input#MailMessageFile(name="data[MailMessage][File]" type="file") - span.mail-after-attachment 後見出し + +mailField({ input: { type: "file" }, name: "file", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) .cc-form-agreement p | 送信前に From eb59a1fbe85837cc071ddf85d6531a81a3070d9b Mon Sep 17 00:00:00 2001 From: Yusaku Sato Date: Tue, 14 Jul 2026 17:10:33 +0900 Subject: [PATCH 2/8] refactor(scaffold): separate cc-form-fieldset wrapper into mixin component - extract .cc-form-fieldset markup from 300_form_input.pug into cc-form-fieldset.pug - render fieldset/legend or div/label structure via isGrouped, with field content injected through a pug block - replace ambiguous badge string prop with an isRequired boolean, normalizing the previously badge-less tel field to show the optional badge Co-Authored-By: Claude Sonnet 5 --- .../_libs/component/form/cc-form-fieldset.pug | 28 +++ .../__assets/htdocs/__tmpl/300_form_input.pug | 164 ++++-------------- 2 files changed, 64 insertions(+), 128 deletions(-) create mode 100644 packages/@d-zero/scaffold/__assets/_libs/component/form/cc-form-fieldset.pug diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/cc-form-fieldset.pug b/packages/@d-zero/scaffold/__assets/_libs/component/form/cc-form-fieldset.pug new file mode 100644 index 00000000..674a114e --- /dev/null +++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/cc-form-fieldset.pug @@ -0,0 +1,28 @@ +//- isGrouped: fieldset/legend 構造にする場合 true。単一フィールドでも checkbox/radio は + CMS要件により isGrouped: true にする(呼び出し側で判断・コメントする) +mixin ccFormFieldset(params = {}) + - + const props = Object.assign({ id: null, isGrouped: false, heading: "", labelFor: null, isRequired: false, attention: "" }, params); + const badgeClass = props.isRequired ? "required" : "optional"; + const badgeLabel = props.isRequired ? "必須" : "任意"; + .cc-form-fieldset(id=props.id) + if props.isGrouped + fieldset + legend.cc-form-fieldset-heading + span= props.heading + span(class=badgeClass)= badgeLabel + if props.attention + .cc-form-fieldset-attention + .mail-attention= props.attention + .cc-form-fieldset-body + block + else + div + .cc-form-fieldset-heading + label(for=props.labelFor)= props.heading + span(class=badgeClass)= badgeLabel + if props.attention + .cc-form-fieldset-attention + .mail-attention= props.attention + .cc-form-fieldset-body + block diff --git a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug index d8ca1f21..32bd03a3 100644 --- a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug +++ b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug @@ -1,4 +1,5 @@ include /component/form/mail-field.pug +include /component/form/cc-form-fieldset.pug .c-content-main // CMS要件: メールフォーム概要 @@ -16,63 +17,25 @@ include /component/form/mail-field.pug input#Token__TOKEN__(type="hidden" name="data[_Token][key]" value="__TOKEN__") input#MailMessageMode(type="hidden" name="data[MailMessage][mode]") .cc-form-field-list - // CMS要件: グループ化している場合は fieldset/legend の構造 - #GroupMailMessageField1.cc-form-fieldset - fieldset - legend.cc-form-fieldset-heading - span フィールドグループ名 - span.required 必須 - .cc-form-fieldset-attention - .mail-attention 注意書き - .cc-form-fieldset-body - +mailField({ input: { type: "text", maxlength: 255 }, name: "field1", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: true, isRequired: true }) - +mailField({ input: { type: "text", maxlength: 255 }, name: "field2", beforeAttachment: "", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: true, isRequired: true }) - // CMS要件: グループ化していない場合は div/label の構造 - #GroupMailMessageField3.cc-form-fieldset - div - .cc-form-fieldset-heading - label(for="MailMessageField3") 単体フィールド名 - span.required 必須 - .cc-form-fieldset-attention - .mail-attention 注意書き - .cc-form-fieldset-body - +mailField({ input: { type: "text", maxlength: 255 }, name: "field3", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: false, isRequired: true }) - #GroupMailMessageName.cc-form-fieldset - fieldset - legend.cc-form-fieldset-heading - span 氏名 - span.required 必須 - .cc-form-fieldset-body - +mailField({ input: { type: "text" }, name: "lastName", beforeAttachment: "姓", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: true }) - +mailField({ input: { type: "text" }, name: "firstName", beforeAttachment: "名", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: true }) - #GroupMessageNameKana1.cc-form-fieldset - fieldset - legend.cc-form-fieldset-heading - span フリガナ - span.optional 任意 - .cc-form-fieldset-attention - .mail-attention カタカナで入力してください - .cc-form-fieldset-body - +mailField({ input: { type: "text" }, name: "lastNameKana", beforeAttachment: "セイ", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: true }) - +mailField({ input: { type: "text" }, name: "firstNameKana", beforeAttachment: "メイ", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: true }) - #GroupMessageZip.cc-form-fieldset - fieldset - legend.cc-form-fieldset-heading - span 住所 - span.optional 任意 - .cc-form-fieldset-body - +mailField({ input: { type: "text", maxlength: 8, size: 10 }, name: "zip", beforeAttachment: "〒", afterAttachment: "", description: "ハイフンを除く半角数字で入力してください", errorMessage: "", isGrouped: true, isRequired: false }) - +mailField({ input: { type: "select", options: [{ value: "", label: "選択してください" }, ...data.prefectureOptions] }, name: "address1", beforeAttachment: "都道府県", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: false }) - +mailField({ input: { type: "text", maxlength: 200, size: 30 }, name: "address2", beforeAttachment: "市区町村", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: false }) - +mailField({ input: { type: "text", maxlength: 200, size: 30 }, name: "address3", beforeAttachment: "番地", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: false }) + +ccFormFieldset({ id: "GroupMailMessageField1", isGrouped: true, heading: "フィールドグループ名", isRequired: true, attention: "注意書き" }) + +mailField({ input: { type: "text", maxlength: 255 }, name: "field1", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: true, isRequired: true }) + +mailField({ input: { type: "text", maxlength: 255 }, name: "field2", beforeAttachment: "", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: true, isRequired: true }) + +ccFormFieldset({ id: "GroupMailMessageField3", isGrouped: false, heading: "単体フィールド名", labelFor: "MailMessageField3", isRequired: true, attention: "注意書き" }) + +mailField({ input: { type: "text", maxlength: 255 }, name: "field3", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: false, isRequired: true }) + +ccFormFieldset({ id: "GroupMailMessageName", isGrouped: true, heading: "氏名", isRequired: true }) + +mailField({ input: { type: "text" }, name: "lastName", beforeAttachment: "姓", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: true }) + +mailField({ input: { type: "text" }, name: "firstName", beforeAttachment: "名", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: true }) + +ccFormFieldset({ id: "GroupMessageNameKana1", isGrouped: true, heading: "フリガナ", isRequired: false, attention: "カタカナで入力してください" }) + +mailField({ input: { type: "text" }, name: "lastNameKana", beforeAttachment: "セイ", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: true }) + +mailField({ input: { type: "text" }, name: "firstNameKana", beforeAttachment: "メイ", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: true }) + +ccFormFieldset({ id: "GroupMessageZip", isGrouped: true, heading: "住所", isRequired: false }) + +mailField({ input: { type: "text", maxlength: 8, size: 10 }, name: "zip", beforeAttachment: "〒", afterAttachment: "", description: "ハイフンを除く半角数字で入力してください", errorMessage: "", isGrouped: true, isRequired: false }) + +mailField({ input: { type: "select", options: [{ value: "", label: "選択してください" }, ...data.prefectureOptions] }, name: "address1", beforeAttachment: "都道府県", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: false }) + +mailField({ input: { type: "text", maxlength: 200, size: 30 }, name: "address2", beforeAttachment: "市区町村", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: false }) + +mailField({ input: { type: "text", maxlength: 200, size: 30 }, name: "address3", beforeAttachment: "番地", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: false }) // CMS要件: グループ化していない場合でも チェックボックスでは fieldset/legend の構造 - #GroupMessageCategory.cc-form-fieldset - fieldset - legend.cc-form-fieldset-heading - span チェックボックス単体 - span.required 必須 - .cc-form-fieldset-body - +mailField({ + +ccFormFieldset({ id: "GroupMessageCategory", isGrouped: true, heading: "チェックボックス単体", isRequired: true }) + +mailField({ input: { type: "checkbox", options: [ @@ -88,15 +51,8 @@ include /component/form/mail-field.pug errorMessage: "", isGrouped: false, }) - #GroupMessageContents.cc-form-fieldset - fieldset - legend.cc-form-fieldset-heading - span チェックボックス - span.required 必須 - .cc-form-fieldset-attention - .mail-attention 注意書き - .cc-form-fieldset-body - +mailField({ + +ccFormFieldset({ id: "GroupMessageContents", isGrouped: true, heading: "チェックボックス", isRequired: true, attention: "注意書き" }) + +mailField({ input: { type: "checkbox", options: [ @@ -116,42 +72,15 @@ include /component/form/mail-field.pug errorMessage: "", isGrouped: true, }) - +mailField({ input: { type: "text", maxlength: 255, size: 30 }, name: "contentsOther", beforeAttachment: "その他", afterAttachment: "後見出し", description: "その他を選択された場合は内容をご入力ください。", errorMessage: "", isGrouped: true, isRequired: false }) - #GroupMessageTel.cc-form-fieldset - div - .cc-form-fieldset-heading - label(for="MailMessageTel") 電話番号 - .cc-form-fieldset-attention - .mail-attention 注意書き - .cc-form-fieldset-body - +mailField({ input: { type: "text", maxlength: 13, size: 15 }, name: "tel", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) - #GroupMessageEmail1.cc-form-fieldset - div - .cc-form-fieldset-heading - label(for="MailMessageEmail1") メールアドレス - span.required 必須 - .cc-form-fieldset-attention - .mail-attention 注意書き - .cc-form-fieldset-body - +mailField({ input: { type: "text", maxlength: 255, size: 30 }, name: "email1", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) - #GroupMessageBirth.cc-form-fieldset - div - .cc-form-fieldset-heading - label(for="MailMessageBirth") 生まれ年 - span.required 必須 - .cc-form-fieldset-attention - .mail-attention 注意書き - .cc-form-fieldset-body - +mailField({ input: { type: "select", options: [{ value: "", label: "選択してください" }, ...data.birthYearOptions] }, name: "birth", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) - #GroupMessageSex.cc-form-fieldset - fieldset - legend.cc-form-fieldset-heading - span 性別 - span.optional 任意 - .cc-form-fieldset-attention - .mail-attention 注意書き - .cc-form-fieldset-body - +mailField({ + +mailField({ input: { type: "text", maxlength: 255, size: 30 }, name: "contentsOther", beforeAttachment: "その他", afterAttachment: "後見出し", description: "その他を選択された場合は内容をご入力ください。", errorMessage: "", isGrouped: true, isRequired: false }) + +ccFormFieldset({ id: "GroupMessageTel", isGrouped: false, heading: "電話番号", labelFor: "MailMessageTel", isRequired: false, attention: "注意書き" }) + +mailField({ input: { type: "text", maxlength: 13, size: 15 }, name: "tel", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) + +ccFormFieldset({ id: "GroupMessageEmail1", isGrouped: false, heading: "メールアドレス", labelFor: "MailMessageEmail1", isRequired: true, attention: "注意書き" }) + +mailField({ input: { type: "text", maxlength: 255, size: 30 }, name: "email1", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) + +ccFormFieldset({ id: "GroupMessageBirth", isGrouped: false, heading: "生まれ年", labelFor: "MailMessageBirth", isRequired: true, attention: "注意書き" }) + +mailField({ input: { type: "select", options: [{ value: "", label: "選択してください" }, ...data.birthYearOptions] }, name: "birth", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) + +ccFormFieldset({ id: "GroupMessageSex", isGrouped: true, heading: "性別", isRequired: false, attention: "注意書き" }) + +mailField({ input: { type: "radio", options: [ @@ -167,33 +96,12 @@ include /component/form/mail-field.pug isGrouped: false, isRequired: false, }) - #GroupMessageMessage.cc-form-fieldset - div - .cc-form-fieldset-heading - label(for="MailMessageMessage") テキストエリア - span.optional 任意 - .cc-form-fieldset-attention - .mail-attention 注意書き - .cc-form-fieldset-body - +mailField({ input: { type: "textarea", rows: 10, cols: null }, name: "message", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) - #GroupMessageMessage2.cc-form-fieldset - div - .cc-form-fieldset-heading - label(for="MailMessageMessage2") テキストエリア - span.optional 任意 - .cc-form-fieldset-attention - .mail-attention 注意書き - .cc-form-fieldset-body - +mailField({ input: { type: "textarea", rows: 10, cols: 20 }, name: "message2", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) - #GroupMessageFile.cc-form-fieldset - div - .cc-form-fieldset-heading - label(for="MailMessageFile") ファイル添付 - span.optional 任意 - .cc-form-fieldset-attention - .mail-attention 注意書き - .cc-form-fieldset-body - +mailField({ input: { type: "file" }, name: "file", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) + +ccFormFieldset({ id: "GroupMessageMessage", isGrouped: false, heading: "テキストエリア", labelFor: "MailMessageMessage", isRequired: false, attention: "注意書き" }) + +mailField({ input: { type: "textarea", rows: 10, cols: null }, name: "message", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) + +ccFormFieldset({ id: "GroupMessageMessage2", isGrouped: false, heading: "テキストエリア", labelFor: "MailMessageMessage2", isRequired: false, attention: "注意書き" }) + +mailField({ input: { type: "textarea", rows: 10, cols: 20 }, name: "message2", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) + +ccFormFieldset({ id: "GroupMessageFile", isGrouped: false, heading: "ファイル添付", labelFor: "MailMessageFile", isRequired: false, attention: "注意書き" }) + +mailField({ input: { type: "file" }, name: "file", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) .cc-form-agreement p | 送信前に From 7fbb01e80036a23cb5c26c042c0432bbbcbd21a5 Mon Sep 17 00:00:00 2001 From: Yusaku Sato Date: Tue, 14 Jul 2026 19:00:29 +0900 Subject: [PATCH 3/8] refactor(scaffold): apply form fieldset mixins to 301_form_confirm.pug - add mail-field-confirm.pug with a mailFieldConfirm mixin mirroring mail-field.pug's type dispatch, for the confirm page's static placeholder markup (no id, label switching, description, or error-message needed there) - let ccFormFieldset fall back to a plain span heading when labelFor is omitted, so the confirm page (no focusable input to label) can reuse it with isGrouped: false - replace the 14 repeated .cc-form-fieldset blocks in 301_form_confirm.pug with ccFormFieldset + mailFieldConfirm calls, keeping the confirm page's existing (sometimes blank) attachment text and attention as-is - normalize checkbox/radio fields to always render both attachment spans, and always show the required/optional badge, matching ccFormFieldset's existing behavior Co-Authored-By: Claude Sonnet 5 --- .../_libs/component/form/cc-form-fieldset.pug | 5 +- .../component/form/mail-field-confirm.pug | 31 +++ .../htdocs/__tmpl/301_form_confirm.pug | 210 ++++-------------- 3 files changed, 73 insertions(+), 173 deletions(-) create mode 100644 packages/@d-zero/scaffold/__assets/_libs/component/form/mail-field-confirm.pug diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/cc-form-fieldset.pug b/packages/@d-zero/scaffold/__assets/_libs/component/form/cc-form-fieldset.pug index 674a114e..5f11727f 100644 --- a/packages/@d-zero/scaffold/__assets/_libs/component/form/cc-form-fieldset.pug +++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/cc-form-fieldset.pug @@ -19,7 +19,10 @@ mixin ccFormFieldset(params = {}) else div .cc-form-fieldset-heading - label(for=props.labelFor)= props.heading + if props.labelFor + label(for=props.labelFor)= props.heading + else + span= props.heading span(class=badgeClass)= badgeLabel if props.attention .cc-form-fieldset-attention diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/mail-field-confirm.pug b/packages/@d-zero/scaffold/__assets/_libs/component/form/mail-field-confirm.pug new file mode 100644 index 00000000..d647067b --- /dev/null +++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/mail-field-confirm.pug @@ -0,0 +1,31 @@ +//- 301（確認画面）専用。実際の input ではなく静的なプレースホルダーを表示するため、 + id・label切り替え・description・error-message は持たない +mixin mailFieldConfirm(params = {}) + - + const props = Object.assign({ type: "text", beforeAttachment: "", afterAttachment: "", value: "__入力内容__", options: [] }, params); + .mail-field(data-type=props.type) + span.mail-before-attachment= props.beforeAttachment + case props.type + when "textarea" + p.mail-input= props.value + when "checkbox" + +mailInputConfirmCheckbox({ options: props.options }) + when "radio" + +mailInputConfirmRadio({ value: props.value }) + default + span.mail-input= props.value + span.mail-after-attachment= props.afterAttachment + +mixin mailInputConfirmCheckbox(params = {}) + - + const props = Object.assign({ options: [] }, params); + div + ul + each option in props.options + li= option + +mixin mailInputConfirmRadio(params = {}) + - + const props = Object.assign({ value: "__選択項目__" }, params); + .mail-radio + span.mail-input= props.value diff --git a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm.pug b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm.pug index db406ed3..69234927 100644 --- a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm.pug +++ b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm.pug @@ -1,3 +1,6 @@ +include /component/form/cc-form-fieldset.pug +include /component/form/mail-field-confirm.pug + .c-content-main .cc-form-description p 以下の内容を送信します。 @@ -12,178 +15,41 @@ input#Token__TOKEN__(type="hidden" name="data[_Token][key]" value="__TOKEN__") input#MailMessageMode(type="hidden" name="data[MailMessage][mode]") .cc-form-field-list - .cc-form-fieldset - div - .cc-form-fieldset-heading - span フィールドグループ名 - span.required 必須 - .cc-form-fieldset-body - .mail-field(data-type="text") - span.mail-before-attachment 前見出し - span.mail-input __入力内容__ - span.mail-after-attachment 後見出し - .mail-field(data-type="text") - span.mail-before-attachment - span.mail-input __入力内容__ - span.mail-after-attachment 後見出し - .cc-form-fieldset - div - .cc-form-fieldset-heading - span 単体フィールド名 - span.required 必須 - .cc-form-fieldset-body - .mail-field(data-type="text") - span.mail-before-attachment 前見出し - span.mail-input __入力内容__ - span.mail-after-attachment 後見出し - .cc-form-fieldset - div - .cc-form-fieldset-heading - span 氏名 - span.required 必須 - .cc-form-fieldset-body - .mail-field(data-type="text") - span.mail-before-attachment 姓 - span.mail-input __入力内容__ - span.mail-after-attachment - .mail-field(data-type="text") - span.mail-before-attachment 名 - span.mail-input __入力内容__ - span.mail-after-attachment - .cc-form-fieldset - div - .cc-form-fieldset-heading - span フリガナ - span.optional 任意 - .cc-form-fieldset-body - .mail-field(data-type="text") - span.mail-before-attachment セイ - span.mail-input __入力内容__ - span.mail-after-attachment - .mail-field(data-type="text") - span.mail-before-attachment メイ - span.mail-input __入力内容__ - span.mail-after-attachment - .cc-form-fieldset - div - .cc-form-fieldset-heading - span 住所 - span.optional 任意 - .cc-form-fieldset-body - .mail-field(data-type="text") - span.mail-before-attachment 〒 - span.mail-input __入力内容__ - span.mail-after-attachment - .mail-field(data-type="select") - span.mail-before-attachment 都道府県 - span.mail-input __入力内容__ - span.mail-after-attachment - .mail-field(data-type="text") - span.mail-before-attachment 市区町村 - span.mail-input __入力内容__ - span.mail-after-attachment - .mail-field(data-type="text") - span.mail-before-attachment 番地 - span.mail-input __入力内容__ - span.mail-after-attachment - .cc-form-fieldset - div - .cc-form-fieldset-heading - span チェックボックス単体 - span.required 必須 - .cc-form-fieldset-body - .mail-field(data-type="checkbox") - span.mail-before-attachment チェックボックス前見出し - div - ul - li __選択項目1__ - li __選択項目2__ - .cc-form-fieldset - div - .cc-form-fieldset-heading - span チェックボックス - span.required 必須 - .cc-form-fieldset-body - .mail-field(data-type="checkbox") - div - ul - li __選択項目1__ - li __選択項目2__ - .mail-field(data-type="text") - span.mail-before-attachment その他 - span.mail-input __入力内容__ - span.mail-after-attachment - .cc-form-fieldset - div - .cc-form-fieldset-heading - span 電話番号 - .cc-form-fieldset-body - .mail-field(data-type="text") - span.mail-before-attachment - span.mail-input __入力内容__ - span.mail-after-attachment - .cc-form-fieldset - div - .cc-form-fieldset-heading - span メールアドレス - span.required 必須 - .cc-form-fieldset-body - .mail-field(data-type="text") - span.mail-before-attachment - span.mail-input __入力内容__ - span.mail-after-attachment - .cc-form-fieldset - div - .cc-form-fieldset-heading - span 生まれ年 - span.required 必須 - .cc-form-fieldset-body - .mail-field(data-type="select") - span.mail-before-attachment - span.mail-input __入力内容__ - span.mail-after-attachment - .cc-form-fieldset - div - .cc-form-fieldset-heading - span 性別 - span.optional 任意 - .cc-form-fieldset-body - .mail-field(data-type="radio") - span.mail-before-attachment - .mail-radio - span.mail-input __選択項目__ - .cc-form-fieldset - div - .cc-form-fieldset-heading - span テキストエリア - span.optional 任意 - .cc-form-fieldset-attention - .mail-attention 注意書き - .cc-form-fieldset-body - .mail-field(data-type="textarea") - span.mail-before-attachment - p.mail-input __入力内容__ - span.mail-after-attachment - .cc-form-fieldset - div - .cc-form-fieldset-heading - span テキストエリア - span.optional 任意 - .cc-form-fieldset-body - .mail-field(data-type="textarea") - span.mail-before-attachment 前見出し - p.mail-input __入力内容__ - span.mail-after-attachment 後見出し - .cc-form-fieldset - div - .cc-form-fieldset-heading - span ファイル添付 - span.optional 任意 - .cc-form-fieldset-body - .mail-field(data-type="file") - span.mail-before-attachment 前見出し - span.mail-input __ファイル名__ - span.mail-after-attachment 後見出し + +ccFormFieldset({ isGrouped: false, heading: "フィールドグループ名", isRequired: true }) + +mailFieldConfirm({ beforeAttachment: "前見出し", afterAttachment: "後見出し" }) + +mailFieldConfirm({ beforeAttachment: "", afterAttachment: "後見出し" }) + +ccFormFieldset({ isGrouped: false, heading: "単体フィールド名", isRequired: true }) + +mailFieldConfirm({ beforeAttachment: "前見出し", afterAttachment: "後見出し" }) + +ccFormFieldset({ isGrouped: false, heading: "氏名", isRequired: true }) + +mailFieldConfirm({ beforeAttachment: "姓", afterAttachment: "" }) + +mailFieldConfirm({ beforeAttachment: "名", afterAttachment: "" }) + +ccFormFieldset({ isGrouped: false, heading: "フリガナ", isRequired: false }) + +mailFieldConfirm({ beforeAttachment: "セイ", afterAttachment: "" }) + +mailFieldConfirm({ beforeAttachment: "メイ", afterAttachment: "" }) + +ccFormFieldset({ isGrouped: false, heading: "住所", isRequired: false }) + +mailFieldConfirm({ beforeAttachment: "〒", afterAttachment: "" }) + +mailFieldConfirm({ type: "select", beforeAttachment: "都道府県", afterAttachment: "" }) + +mailFieldConfirm({ beforeAttachment: "市区町村", afterAttachment: "" }) + +mailFieldConfirm({ beforeAttachment: "番地", afterAttachment: "" }) + +ccFormFieldset({ isGrouped: false, heading: "チェックボックス単体", isRequired: true }) + +mailFieldConfirm({ type: "checkbox", beforeAttachment: "チェックボックス前見出し", options: ["__選択項目1__", "__選択項目2__"] }) + +ccFormFieldset({ isGrouped: false, heading: "チェックボックス", isRequired: true }) + +mailFieldConfirm({ type: "checkbox", options: ["__選択項目1__", "__選択項目2__"] }) + +mailFieldConfirm({ beforeAttachment: "その他", afterAttachment: "" }) + +ccFormFieldset({ isGrouped: false, heading: "電話番号", isRequired: false }) + +mailFieldConfirm({ beforeAttachment: "", afterAttachment: "" }) + +ccFormFieldset({ isGrouped: false, heading: "メールアドレス", isRequired: true }) + +mailFieldConfirm({ beforeAttachment: "", afterAttachment: "" }) + +ccFormFieldset({ isGrouped: false, heading: "生まれ年", isRequired: true }) + +mailFieldConfirm({ type: "select", beforeAttachment: "", afterAttachment: "" }) + +ccFormFieldset({ isGrouped: false, heading: "性別", isRequired: false }) + +mailFieldConfirm({ type: "radio", beforeAttachment: "", afterAttachment: "", value: "__選択項目__" }) + +ccFormFieldset({ isGrouped: false, heading: "テキストエリア", isRequired: false, attention: "注意書き" }) + +mailFieldConfirm({ type: "textarea", beforeAttachment: "", afterAttachment: "" }) + +ccFormFieldset({ isGrouped: false, heading: "テキストエリア", isRequired: false }) + +mailFieldConfirm({ type: "textarea", beforeAttachment: "前見出し", afterAttachment: "後見出し" }) + +ccFormFieldset({ isGrouped: false, heading: "ファイル添付", isRequired: false }) + +mailFieldConfirm({ type: "file", beforeAttachment: "前見出し", afterAttachment: "後見出し", value: "__ファイル名__" }) .cc-form-submit button(type="submit"): span 入力画面に戻る button(type="submit"): span 送信する From 2079e183be9e8accbdfe8ba44da8b8d7a89b3fcd Mon Sep 17 00:00:00 2001 From: Yusaku Sato Date: Thu, 16 Jul 2026 11:48:26 +0900 Subject: [PATCH 4/8] refactor(scaffold): derive cc-form-fieldset id/label from name/key Replace ccFormFieldset's id/isGrouped/labelFor props with name (single field) and key (grouped field): the wrapper id, label-for target, and fieldset/legend vs div/label structure are now all computed from whichever one is passed, instead of being hand-typed per call site. Also drop the now-meaningless isGrouped from mailField calls for checkbox/radio inputs, since their own option labels make it a no-op. --- .../_libs/component/form/cc-form-fieldset.pug | 22 ++++++++----- .../__assets/htdocs/__tmpl/300_form_input.pug | 31 +++++++++---------- .../htdocs/__tmpl/301_form_confirm.pug | 28 ++++++++--------- 3 files changed, 43 insertions(+), 38 deletions(-) diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/cc-form-fieldset.pug b/packages/@d-zero/scaffold/__assets/_libs/component/form/cc-form-fieldset.pug index 5f11727f..2faeb3b3 100644 --- a/packages/@d-zero/scaffold/__assets/_libs/component/form/cc-form-fieldset.pug +++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/cc-form-fieldset.pug @@ -1,12 +1,20 @@ -//- isGrouped: fieldset/legend 構造にする場合 true。単一フィールドでも checkbox/radio は - CMS要件により isGrouped: true にする(呼び出し側で判断・コメントする) +//- name/key のどちらを渡すかで fieldset/legend（isGrouped）か div/label かを自動判定する: + - name: 単一 input に label-for で紐付けられる場合（text/select/textarea/file の単一フィールド） + - key: 単一 input に紐付けられない場合（複数フィールドをまとめる、または checkbox/radio は + CMS要件により単一フィールドでも fieldset/legend にする）を、意味のわかる短い語で渡す mixin ccFormFieldset(params = {}) - - const props = Object.assign({ id: null, isGrouped: false, heading: "", labelFor: null, isRequired: false, attention: "" }, params); + const props = Object.assign({ heading: "", name: null, key: null, isRequired: false, attention: "" }, params); const badgeClass = props.isRequired ? "required" : "optional"; const badgeLabel = props.isRequired ? "必須" : "任意"; - .cc-form-fieldset(id=props.id) - if props.isGrouped + const isGrouped = Boolean(props.key); + // mail-field.pug の idInput と同じ計算式（name/key から MailMessage+PascalCase のidを導出） + const toPascalCase = (str) => str.charAt(0).toUpperCase() + str.slice(1); + const groupSource = props.key || props.name; + const id = groupSource ? `GroupMailMessage${toPascalCase(groupSource)}` : null; + const labelFor = !isGrouped && props.name ? `MailMessage${toPascalCase(props.name)}` : null; + .cc-form-fieldset(id=id) + if isGrouped fieldset legend.cc-form-fieldset-heading span= props.heading @@ -19,8 +27,8 @@ mixin ccFormFieldset(params = {}) else div .cc-form-fieldset-heading - if props.labelFor - label(for=props.labelFor)= props.heading + if labelFor + label(for=labelFor)= props.heading else span= props.heading span(class=badgeClass)= badgeLabel diff --git a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug index 32bd03a3..fd857c9c 100644 --- a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug +++ b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug @@ -17,24 +17,24 @@ include /component/form/cc-form-fieldset.pug input#Token__TOKEN__(type="hidden" name="data[_Token][key]" value="__TOKEN__") input#MailMessageMode(type="hidden" name="data[MailMessage][mode]") .cc-form-field-list - +ccFormFieldset({ id: "GroupMailMessageField1", isGrouped: true, heading: "フィールドグループ名", isRequired: true, attention: "注意書き" }) + +ccFormFieldset({ key: "field1", heading: "フィールドグループ名", isRequired: true, attention: "注意書き" }) +mailField({ input: { type: "text", maxlength: 255 }, name: "field1", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: true, isRequired: true }) +mailField({ input: { type: "text", maxlength: 255 }, name: "field2", beforeAttachment: "", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: true, isRequired: true }) - +ccFormFieldset({ id: "GroupMailMessageField3", isGrouped: false, heading: "単体フィールド名", labelFor: "MailMessageField3", isRequired: true, attention: "注意書き" }) + +ccFormFieldset({ heading: "単体フィールド名", name: "field3", isRequired: true, attention: "注意書き" }) +mailField({ input: { type: "text", maxlength: 255 }, name: "field3", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: false, isRequired: true }) - +ccFormFieldset({ id: "GroupMailMessageName", isGrouped: true, heading: "氏名", isRequired: true }) + +ccFormFieldset({ key: "name", heading: "氏名", isRequired: true }) +mailField({ input: { type: "text" }, name: "lastName", beforeAttachment: "姓", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: true }) +mailField({ input: { type: "text" }, name: "firstName", beforeAttachment: "名", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: true }) - +ccFormFieldset({ id: "GroupMessageNameKana1", isGrouped: true, heading: "フリガナ", isRequired: false, attention: "カタカナで入力してください" }) + +ccFormFieldset({ key: "nameKana1", heading: "フリガナ", isRequired: false, attention: "カタカナで入力してください" }) +mailField({ input: { type: "text" }, name: "lastNameKana", beforeAttachment: "セイ", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: true }) +mailField({ input: { type: "text" }, name: "firstNameKana", beforeAttachment: "メイ", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: true }) - +ccFormFieldset({ id: "GroupMessageZip", isGrouped: true, heading: "住所", isRequired: false }) + +ccFormFieldset({ key: "zip", heading: "住所", isRequired: false }) +mailField({ input: { type: "text", maxlength: 8, size: 10 }, name: "zip", beforeAttachment: "〒", afterAttachment: "", description: "ハイフンを除く半角数字で入力してください", errorMessage: "", isGrouped: true, isRequired: false }) +mailField({ input: { type: "select", options: [{ value: "", label: "選択してください" }, ...data.prefectureOptions] }, name: "address1", beforeAttachment: "都道府県", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: false }) +mailField({ input: { type: "text", maxlength: 200, size: 30 }, name: "address2", beforeAttachment: "市区町村", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: false }) +mailField({ input: { type: "text", maxlength: 200, size: 30 }, name: "address3", beforeAttachment: "番地", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: false }) // CMS要件: グループ化していない場合でも チェックボックスでは fieldset/legend の構造 - +ccFormFieldset({ id: "GroupMessageCategory", isGrouped: true, heading: "チェックボックス単体", isRequired: true }) + +ccFormFieldset({ key: "category", heading: "チェックボックス単体", isRequired: true }) +mailField({ input: { type: "checkbox", @@ -49,9 +49,8 @@ include /component/form/cc-form-fieldset.pug afterAttachment: "チェックボックス後見出し", description: "", errorMessage: "", - isGrouped: false, }) - +ccFormFieldset({ id: "GroupMessageContents", isGrouped: true, heading: "チェックボックス", isRequired: true, attention: "注意書き" }) + +ccFormFieldset({ key: "contents", heading: "チェックボックス", isRequired: true, attention: "注意書き" }) +mailField({ input: { type: "checkbox", @@ -70,16 +69,15 @@ include /component/form/cc-form-fieldset.pug afterAttachment: "後見出し", description: "", errorMessage: "", - isGrouped: true, }) +mailField({ input: { type: "text", maxlength: 255, size: 30 }, name: "contentsOther", beforeAttachment: "その他", afterAttachment: "後見出し", description: "その他を選択された場合は内容をご入力ください。", errorMessage: "", isGrouped: true, isRequired: false }) - +ccFormFieldset({ id: "GroupMessageTel", isGrouped: false, heading: "電話番号", labelFor: "MailMessageTel", isRequired: false, attention: "注意書き" }) + +ccFormFieldset({ heading: "電話番号", name: "tel", isRequired: false, attention: "注意書き" }) +mailField({ input: { type: "text", maxlength: 13, size: 15 }, name: "tel", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) - +ccFormFieldset({ id: "GroupMessageEmail1", isGrouped: false, heading: "メールアドレス", labelFor: "MailMessageEmail1", isRequired: true, attention: "注意書き" }) + +ccFormFieldset({ heading: "メールアドレス", name: "email1", isRequired: true, attention: "注意書き" }) +mailField({ input: { type: "text", maxlength: 255, size: 30 }, name: "email1", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) - +ccFormFieldset({ id: "GroupMessageBirth", isGrouped: false, heading: "生まれ年", labelFor: "MailMessageBirth", isRequired: true, attention: "注意書き" }) + +ccFormFieldset({ heading: "生まれ年", name: "birth", isRequired: true, attention: "注意書き" }) +mailField({ input: { type: "select", options: [{ value: "", label: "選択してください" }, ...data.birthYearOptions] }, name: "birth", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) - +ccFormFieldset({ id: "GroupMessageSex", isGrouped: true, heading: "性別", isRequired: false, attention: "注意書き" }) + +ccFormFieldset({ key: "sex", heading: "性別", isRequired: false, attention: "注意書き" }) +mailField({ input: { type: "radio", @@ -93,14 +91,13 @@ include /component/form/cc-form-fieldset.pug afterAttachment: "後見出し", description: "", errorMessage: "", - isGrouped: false, isRequired: false, }) - +ccFormFieldset({ id: "GroupMessageMessage", isGrouped: false, heading: "テキストエリア", labelFor: "MailMessageMessage", isRequired: false, attention: "注意書き" }) + +ccFormFieldset({ heading: "テキストエリア", name: "message", isRequired: false, attention: "注意書き" }) +mailField({ input: { type: "textarea", rows: 10, cols: null }, name: "message", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) - +ccFormFieldset({ id: "GroupMessageMessage2", isGrouped: false, heading: "テキストエリア", labelFor: "MailMessageMessage2", isRequired: false, attention: "注意書き" }) + +ccFormFieldset({ heading: "テキストエリア", name: "message2", isRequired: false, attention: "注意書き" }) +mailField({ input: { type: "textarea", rows: 10, cols: 20 }, name: "message2", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) - +ccFormFieldset({ id: "GroupMessageFile", isGrouped: false, heading: "ファイル添付", labelFor: "MailMessageFile", isRequired: false, attention: "注意書き" }) + +ccFormFieldset({ heading: "ファイル添付", name: "file", isRequired: false, attention: "注意書き" }) +mailField({ input: { type: "file" }, name: "file", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) .cc-form-agreement p diff --git a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm.pug b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm.pug index 69234927..a496acc1 100644 --- a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm.pug +++ b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm.pug @@ -15,40 +15,40 @@ include /component/form/mail-field-confirm.pug input#Token__TOKEN__(type="hidden" name="data[_Token][key]" value="__TOKEN__") input#MailMessageMode(type="hidden" name="data[MailMessage][mode]") .cc-form-field-list - +ccFormFieldset({ isGrouped: false, heading: "フィールドグループ名", isRequired: true }) + +ccFormFieldset({ heading: "フィールドグループ名", isRequired: true }) +mailFieldConfirm({ beforeAttachment: "前見出し", afterAttachment: "後見出し" }) +mailFieldConfirm({ beforeAttachment: "", afterAttachment: "後見出し" }) - +ccFormFieldset({ isGrouped: false, heading: "単体フィールド名", isRequired: true }) + +ccFormFieldset({ heading: "単体フィールド名", isRequired: true }) +mailFieldConfirm({ beforeAttachment: "前見出し", afterAttachment: "後見出し" }) - +ccFormFieldset({ isGrouped: false, heading: "氏名", isRequired: true }) + +ccFormFieldset({ heading: "氏名", isRequired: true }) +mailFieldConfirm({ beforeAttachment: "姓", afterAttachment: "" }) +mailFieldConfirm({ beforeAttachment: "名", afterAttachment: "" }) - +ccFormFieldset({ isGrouped: false, heading: "フリガナ", isRequired: false }) + +ccFormFieldset({ heading: "フリガナ", isRequired: false }) +mailFieldConfirm({ beforeAttachment: "セイ", afterAttachment: "" }) +mailFieldConfirm({ beforeAttachment: "メイ", afterAttachment: "" }) - +ccFormFieldset({ isGrouped: false, heading: "住所", isRequired: false }) + +ccFormFieldset({ heading: "住所", isRequired: false }) +mailFieldConfirm({ beforeAttachment: "〒", afterAttachment: "" }) +mailFieldConfirm({ type: "select", beforeAttachment: "都道府県", afterAttachment: "" }) +mailFieldConfirm({ beforeAttachment: "市区町村", afterAttachment: "" }) +mailFieldConfirm({ beforeAttachment: "番地", afterAttachment: "" }) - +ccFormFieldset({ isGrouped: false, heading: "チェックボックス単体", isRequired: true }) + +ccFormFieldset({ heading: "チェックボックス単体", isRequired: true }) +mailFieldConfirm({ type: "checkbox", beforeAttachment: "チェックボックス前見出し", options: ["__選択項目1__", "__選択項目2__"] }) - +ccFormFieldset({ isGrouped: false, heading: "チェックボックス", isRequired: true }) + +ccFormFieldset({ heading: "チェックボックス", isRequired: true }) +mailFieldConfirm({ type: "checkbox", options: ["__選択項目1__", "__選択項目2__"] }) +mailFieldConfirm({ beforeAttachment: "その他", afterAttachment: "" }) - +ccFormFieldset({ isGrouped: false, heading: "電話番号", isRequired: false }) + +ccFormFieldset({ heading: "電話番号", isRequired: false }) +mailFieldConfirm({ beforeAttachment: "", afterAttachment: "" }) - +ccFormFieldset({ isGrouped: false, heading: "メールアドレス", isRequired: true }) + +ccFormFieldset({ heading: "メールアドレス", isRequired: true }) +mailFieldConfirm({ beforeAttachment: "", afterAttachment: "" }) - +ccFormFieldset({ isGrouped: false, heading: "生まれ年", isRequired: true }) + +ccFormFieldset({ heading: "生まれ年", isRequired: true }) +mailFieldConfirm({ type: "select", beforeAttachment: "", afterAttachment: "" }) - +ccFormFieldset({ isGrouped: false, heading: "性別", isRequired: false }) + +ccFormFieldset({ heading: "性別", isRequired: false }) +mailFieldConfirm({ type: "radio", beforeAttachment: "", afterAttachment: "", value: "__選択項目__" }) - +ccFormFieldset({ isGrouped: false, heading: "テキストエリア", isRequired: false, attention: "注意書き" }) + +ccFormFieldset({ heading: "テキストエリア", isRequired: false, attention: "注意書き" }) +mailFieldConfirm({ type: "textarea", beforeAttachment: "", afterAttachment: "" }) - +ccFormFieldset({ isGrouped: false, heading: "テキストエリア", isRequired: false }) + +ccFormFieldset({ heading: "テキストエリア", isRequired: false }) +mailFieldConfirm({ type: "textarea", beforeAttachment: "前見出し", afterAttachment: "後見出し" }) - +ccFormFieldset({ isGrouped: false, heading: "ファイル添付", isRequired: false }) + +ccFormFieldset({ heading: "ファイル添付", isRequired: false }) +mailFieldConfirm({ type: "file", beforeAttachment: "前見出し", afterAttachment: "後見出し", value: "__ファイル名__" }) .cc-form-submit button(type="submit"): span 入力画面に戻る From eff70d0bbc499b45c123a160095073d4f5f31e14 Mon Sep 17 00:00:00 2001 From: Yusaku Sato Date: Thu, 16 Jul 2026 14:10:16 +0900 Subject: [PATCH 5/8] refactor(scaffold): split mail-input mixins out of mail-field Turn mail-field's span.mail-input into a block so the caller composes the concrete mailInputXxx mixin instead of mailField dispatching on a nested input.type config object. This drops the now-dead isRequired passthrough and moves mailInputText/Select/Checkbox/Radio/Textarea/File into their own mail-input.pug, each deriving its own id from name instead of receiving it from mail-field. --- .../_libs/component/form/mail-field.pug | 95 +------------- .../_libs/component/form/mail-input.pug | 73 +++++++++++ .../__assets/htdocs/__tmpl/300_form_input.pug | 121 +++++++++--------- 3 files changed, 139 insertions(+), 150 deletions(-) create mode 100644 packages/@d-zero/scaffold/__assets/_libs/component/form/mail-input.pug diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/mail-field.pug b/packages/@d-zero/scaffold/__assets/_libs/component/form/mail-field.pug index 9b0c799c..9362d4d2 100644 --- a/packages/@d-zero/scaffold/__assets/_libs/component/form/mail-field.pug +++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/mail-field.pug @@ -1,42 +1,25 @@ //- isGrouped: 同一 fieldset/legend 内に複数フィールドを配置する場合に true。 親の見出し構造と一致させること（グループ化あり = fieldset/legend、なし = div/label） + span.mail-input の中身（mailInputXxx の呼び出し）は呼び出し側が block で渡す mixin mailField(params = {}) - - const props = Object.assign({ input: { - type: "text", - maxlength: null, - size: null, - }, - name: "", beforeAttachment: "", afterAttachment: "", description: "", errorMessage: "", isRequired: false, isGrouped: false }, params); + const props = Object.assign({ type: "text", name: "", beforeAttachment: "", afterAttachment: "", description: "", errorMessage: "", isGrouped: false }, params); const nameFirstLetterUppercased = props.name.charAt(0).toUpperCase() + props.name.slice(1); const idInput = `MailMessage${nameFirstLetterUppercased}`; const idField = `FieldMailMessage${nameFirstLetterUppercased}`; // checkbox / radio は各選択肢が label を持つため、前後見出しは label にしない - const hasOwnOptionLabels = props.input.type === "checkbox" || props.input.type === "radio"; + const hasOwnOptionLabels = props.type === "checkbox" || props.type === "radio"; // CMS要件: グループ化している場合は 前見出し を labelとする。前見出しが空であれば 後見出しを labelとする const isBeforeAttachmentLabel = Boolean(props.isGrouped && !hasOwnOptionLabels && props.beforeAttachment); const isAfterAttachmentLabel = Boolean(props.isGrouped && !hasOwnOptionLabels && !props.beforeAttachment && props.afterAttachment); - // pug-lint がスプレッド構文を解析できないため Object.assign で合成する - const inputProps = Object.assign({}, props, { idInput: idInput }); - .mail-field(data-type=props.input.type id=idField) + .mail-field(data-type=props.type id=idField) if isBeforeAttachmentLabel label.mail-before-attachment(for=idInput) #{ props.beforeAttachment } else span.mail-before-attachment #{ props.beforeAttachment } span.mail-input - if props.input.type === "text" - +mailInputText(Object.assign({}, inputProps, { maxlength: props.input.maxlength, size: props.input.size })) - else if props.input.type === "select" - +mailInputSelect(Object.assign({}, inputProps, { options: props.input.options })) - else if props.input.type === "checkbox" - +mailInputCheckbox({ name: props.name, idInput: idInput, options: props.input.options }) - else if props.input.type === "radio" - +mailInputRadio(Object.assign({}, inputProps, { options: props.input.options })) - else if props.input.type === "textarea" - +mailInputTextarea(Object.assign({}, inputProps, { rows: props.input.rows, cols: props.input.cols })) - else if props.input.type === "file" - +mailInputFile(inputProps) + block if isAfterAttachmentLabel label.mail-after-attachment(for=idInput) #{ props.afterAttachment } @@ -44,71 +27,3 @@ mixin mailField(params = {}) span.mail-after-attachment #{ props.afterAttachment } .mail-description #{ props.description } .error-message #{ props.errorMessage } - -mixin mailInputText(params = {}) - - - const props = Object.assign({ name: "field1", idInput: "MailMessageField1", maxlength: null, size: null, isRequired: true }, params); - const inputName = `data[MailMessage][${props.name}]`; - input( - type="text" - name=inputName - maxlength=props.maxlength - size=props.size - required=props.isRequired - id=props.idInput) - -mixin mailInputSelect(params = {}) - - - const props = Object.assign({ name: "address1", idInput: "MailMessageAddress1", options: [{value: "", label: "選択してください"}], isRequired: true }, params); - const inputName = `data[MailMessage][${props.name}]`; - select(name=inputName required=props.isRequired id=props.idInput) - each option in props.options - option(value=option.value)= option.label - -//- checkbox には required を出力しない（各 input に付くと「全項目チェック必須」の挙動になるため。 - 「1つ以上選択必須」の検証はサーバー側の責務） -mixin mailInputCheckbox(params = {}) - - - const props = Object.assign({ name: "category", idInput: "MailMessageCategory", options: [{value: "Item1", label: "項目1"}] }, params); - const hiddenName = `data[MailMessage][${props.name}]`; - const inputName = `data[MailMessage][${props.name}][]`; - //- 未選択時にもキーが送信されるようにするための hidden（CMS 仕様） - input(type="hidden" name=hiddenName value id=props.idInput) - each option in props.options - - - const id = props.idInput + option.value; - .checkbox - input(type="checkbox" name=inputName value=option.value id=id) - label(for=id) #{ option.label } - -mixin mailInputRadio(params = {}) - - - const props = Object.assign({ name: "sex", idInput: "MailMessageSex", options: [{value: "1", label: "男性"}, {value: "2", label: "女性"}], isRequired: true }, params); - const inputName = `data[MailMessage][${props.name}]`; - const idHidden = `${props.idInput}_`; - //- 未選択時にもキーが送信されるようにするための hidden（CMS 仕様） - input(type="hidden" name=inputName value id=idHidden) - each option in props.options - - - const id = props.idInput + option.value; - .mail-group-radio - span - input(type="radio" name=inputName required=props.isRequired value=option.value id=id) - label(for=id) #{ option.label } - -mixin mailInputTextarea(params = {}) - - - const props = Object.assign({ name: "message", idInput: "MailMessageMessage", rows: null, cols: null, isRequired: true }, params); - const inputName = `data[MailMessage][${props.name}]`; - textarea( - name=inputName - rows=props.rows - cols=props.cols - required=props.isRequired - id=props.idInput) - -mixin mailInputFile(params = {}) - - - const props = Object.assign({ name: "file", idInput: "MailMessageFile", isRequired: true }, params); - const inputName = `data[MailMessage][${props.name}]`; - input(name=inputName type="file" required=props.isRequired id=props.idInput) diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/mail-input.pug b/packages/@d-zero/scaffold/__assets/_libs/component/form/mail-input.pug new file mode 100644 index 00000000..6a9d0a2d --- /dev/null +++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/mail-input.pug @@ -0,0 +1,73 @@ +mixin mailInputText(params = {}) + - + const props = Object.assign({ name: "field1", maxlength: null, size: null, isRequired: true }, params); + const inputName = `data[MailMessage][${props.name}]`; + const idInput = `MailMessage${props.name.charAt(0).toUpperCase() + props.name.slice(1)}`; + input( + type="text" + name=inputName + maxlength=props.maxlength + size=props.size + required=props.isRequired + id=idInput) + +mixin mailInputSelect(params = {}) + - + const props = Object.assign({ name: "address1", options: [{value: "", label: "選択してください"}], isRequired: true }, params); + const inputName = `data[MailMessage][${props.name}]`; + const idInput = `MailMessage${props.name.charAt(0).toUpperCase() + props.name.slice(1)}`; + select(name=inputName required=props.isRequired id=idInput) + each option in props.options + option(value=option.value)= option.label + +//- checkbox には required を出力しない（各 input に付くと「全項目チェック必須」の挙動になるため。 + 「1つ以上選択必須」の検証はサーバー側の責務） +mixin mailInputCheckbox(params = {}) + - + const props = Object.assign({ name: "category", options: [{value: "Item1", label: "項目1"}] }, params); + const idInput = `MailMessage${props.name.charAt(0).toUpperCase() + props.name.slice(1)}`; + const hiddenName = `data[MailMessage][${props.name}]`; + const inputName = `data[MailMessage][${props.name}][]`; + //- 未選択時にもキーが送信されるようにするための hidden（CMS 仕様） + input(type="hidden" name=hiddenName value id=idInput) + each option in props.options + - + const id = idInput + option.value; + .checkbox + input(type="checkbox" name=inputName value=option.value id=id) + label(for=id) #{ option.label } + +mixin mailInputRadio(params = {}) + - + const props = Object.assign({ name: "sex", options: [{value: "1", label: "男性"}, {value: "2", label: "女性"}], isRequired: true }, params); + const idInput = `MailMessage${props.name.charAt(0).toUpperCase() + props.name.slice(1)}`; + const inputName = `data[MailMessage][${props.name}]`; + const idHidden = `${idInput}_`; + //- 未選択時にもキーが送信されるようにするための hidden（CMS 仕様） + input(type="hidden" name=inputName value id=idHidden) + each option in props.options + - + const id = idInput + option.value; + .mail-group-radio + span + input(type="radio" name=inputName required=props.isRequired value=option.value id=id) + label(for=id) #{ option.label } + +mixin mailInputTextarea(params = {}) + - + const props = Object.assign({ name: "message", rows: null, cols: null, isRequired: true }, params); + const inputName = `data[MailMessage][${props.name}]`; + const idInput = `MailMessage${props.name.charAt(0).toUpperCase() + props.name.slice(1)}`; + textarea( + name=inputName + rows=props.rows + cols=props.cols + required=props.isRequired + id=idInput) + +mixin mailInputFile(params = {}) + - + const props = Object.assign({ name: "file", isRequired: true }, params); + const inputName = `data[MailMessage][${props.name}]`; + const idInput = `MailMessage${props.name.charAt(0).toUpperCase() + props.name.slice(1)}`; + input(name=inputName type="file" required=props.isRequired id=idInput) diff --git a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug index fd857c9c..af160f34 100644 --- a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug +++ b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug @@ -1,4 +1,5 @@ include /component/form/mail-field.pug +include /component/form/mail-input.pug include /component/form/cc-form-fieldset.pug .c-content-main @@ -18,87 +19,87 @@ include /component/form/cc-form-fieldset.pug input#MailMessageMode(type="hidden" name="data[MailMessage][mode]") .cc-form-field-list +ccFormFieldset({ key: "field1", heading: "フィールドグループ名", isRequired: true, attention: "注意書き" }) - +mailField({ input: { type: "text", maxlength: 255 }, name: "field1", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: true, isRequired: true }) - +mailField({ input: { type: "text", maxlength: 255 }, name: "field2", beforeAttachment: "", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: true, isRequired: true }) + +mailField({ type: "text", name: "field1", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: true }) + +mailInputText({ name: "field1", maxlength: 255, isRequired: true }) + +mailField({ type: "text", name: "field2", beforeAttachment: "", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: true }) + +mailInputText({ name: "field2", maxlength: 255, isRequired: true }) +ccFormFieldset({ heading: "単体フィールド名", name: "field3", isRequired: true, attention: "注意書き" }) - +mailField({ input: { type: "text", maxlength: 255 }, name: "field3", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: false, isRequired: true }) + +mailField({ type: "text", name: "field3", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: false }) + +mailInputText({ name: "field3", maxlength: 255, isRequired: true }) +ccFormFieldset({ key: "name", heading: "氏名", isRequired: true }) - +mailField({ input: { type: "text" }, name: "lastName", beforeAttachment: "姓", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: true }) - +mailField({ input: { type: "text" }, name: "firstName", beforeAttachment: "名", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: true }) + +mailField({ type: "text", name: "lastName", beforeAttachment: "姓", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) + +mailInputText({ name: "lastName", isRequired: true }) + +mailField({ type: "text", name: "firstName", beforeAttachment: "名", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) + +mailInputText({ name: "firstName", isRequired: true }) +ccFormFieldset({ key: "nameKana1", heading: "フリガナ", isRequired: false, attention: "カタカナで入力してください" }) - +mailField({ input: { type: "text" }, name: "lastNameKana", beforeAttachment: "セイ", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: true }) - +mailField({ input: { type: "text" }, name: "firstNameKana", beforeAttachment: "メイ", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: true }) + +mailField({ type: "text", name: "lastNameKana", beforeAttachment: "セイ", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) + +mailInputText({ name: "lastNameKana", isRequired: true }) + +mailField({ type: "text", name: "firstNameKana", beforeAttachment: "メイ", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) + +mailInputText({ name: "firstNameKana", isRequired: true }) +ccFormFieldset({ key: "zip", heading: "住所", isRequired: false }) - +mailField({ input: { type: "text", maxlength: 8, size: 10 }, name: "zip", beforeAttachment: "〒", afterAttachment: "", description: "ハイフンを除く半角数字で入力してください", errorMessage: "", isGrouped: true, isRequired: false }) - +mailField({ input: { type: "select", options: [{ value: "", label: "選択してください" }, ...data.prefectureOptions] }, name: "address1", beforeAttachment: "都道府県", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: false }) - +mailField({ input: { type: "text", maxlength: 200, size: 30 }, name: "address2", beforeAttachment: "市区町村", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: false }) - +mailField({ input: { type: "text", maxlength: 200, size: 30 }, name: "address3", beforeAttachment: "番地", afterAttachment: "", description: "", errorMessage: "", isGrouped: true, isRequired: false }) + +mailField({ type: "text", name: "zip", beforeAttachment: "〒", afterAttachment: "", description: "ハイフンを除く半角数字で入力してください", errorMessage: "", isGrouped: true }) + +mailInputText({ name: "zip", maxlength: 8, size: 10, isRequired: false }) + +mailField({ type: "select", name: "address1", beforeAttachment: "都道府県", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) + +mailInputSelect({ name: "address1", options: [{ value: "", label: "選択してください" }, ...data.prefectureOptions], isRequired: false }) + +mailField({ type: "text", name: "address2", beforeAttachment: "市区町村", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) + +mailInputText({ name: "address2", maxlength: 200, size: 30, isRequired: false }) + +mailField({ type: "text", name: "address3", beforeAttachment: "番地", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) + +mailInputText({ name: "address3", maxlength: 200, size: 30, isRequired: false }) // CMS要件: グループ化していない場合でも チェックボックスでは fieldset/legend の構造 +ccFormFieldset({ key: "category", heading: "チェックボックス単体", isRequired: true }) - +mailField({ - input: { - type: "checkbox", - options: [ - { value: "Item1", label: "項目1" }, - { value: "Item2", label: "項目2" }, - { value: "Item3", label: "項目3" }, - ], - }, + +mailField({ type: "checkbox", name: "category", beforeAttachment: "チェックボックス前見出し", afterAttachment: "チェックボックス後見出し", description: "", errorMessage: "" }) + +mailInputCheckbox({ name: "category", - beforeAttachment: "チェックボックス前見出し", - afterAttachment: "チェックボックス後見出し", - description: "", - errorMessage: "", + options: [ + { value: "Item1", label: "項目1" }, + { value: "Item2", label: "項目2" }, + { value: "Item3", label: "項目3" }, + ], }) +ccFormFieldset({ key: "contents", heading: "チェックボックス", isRequired: true, attention: "注意書き" }) - +mailField({ - input: { - type: "checkbox", - options: [ - { value: "1", label: "生麦生米生卵" }, - { value: "2", label: "赤パジャマ黄パジャマ茶パジャマ" }, - { value: "3", label: "青巻紙赤巻紙黄巻紙" }, - { value: "4", label: "隣の客はよく柿食う客だ" }, - { value: "5", label: "かえるぴょこぴょこ3ぴょこぴょこ あわせてぴょこぴょこ6ぴょこぴょこ" }, - { value: "6", label: "東京特許許可局許可局長" }, - { value: "7", label: "その他" }, - ], - }, + +mailField({ type: "checkbox", name: "contents", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "" }) + +mailInputCheckbox({ name: "contents", - beforeAttachment: "前見出し", - afterAttachment: "後見出し", - description: "", - errorMessage: "", + options: [ + { value: "1", label: "生麦生米生卵" }, + { value: "2", label: "赤パジャマ黄パジャマ茶パジャマ" }, + { value: "3", label: "青巻紙赤巻紙黄巻紙" }, + { value: "4", label: "隣の客はよく柿食う客だ" }, + { value: "5", label: "かえるぴょこぴょこ3ぴょこぴょこ あわせてぴょこぴょこ6ぴょこぴょこ" }, + { value: "6", label: "東京特許許可局許可局長" }, + { value: "7", label: "その他" }, + ], }) - +mailField({ input: { type: "text", maxlength: 255, size: 30 }, name: "contentsOther", beforeAttachment: "その他", afterAttachment: "後見出し", description: "その他を選択された場合は内容をご入力ください。", errorMessage: "", isGrouped: true, isRequired: false }) + +mailField({ type: "text", name: "contentsOther", beforeAttachment: "その他", afterAttachment: "後見出し", description: "その他を選択された場合は内容をご入力ください。", errorMessage: "", isGrouped: true }) + +mailInputText({ name: "contentsOther", maxlength: 255, size: 30, isRequired: false }) +ccFormFieldset({ heading: "電話番号", name: "tel", isRequired: false, attention: "注意書き" }) - +mailField({ input: { type: "text", maxlength: 13, size: 15 }, name: "tel", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) + +mailField({ type: "text", name: "tel", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) + +mailInputText({ name: "tel", maxlength: 13, size: 15, isRequired: false }) +ccFormFieldset({ heading: "メールアドレス", name: "email1", isRequired: true, attention: "注意書き" }) - +mailField({ input: { type: "text", maxlength: 255, size: 30 }, name: "email1", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) + +mailField({ type: "text", name: "email1", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) + +mailInputText({ name: "email1", maxlength: 255, size: 30, isRequired: false }) +ccFormFieldset({ heading: "生まれ年", name: "birth", isRequired: true, attention: "注意書き" }) - +mailField({ input: { type: "select", options: [{ value: "", label: "選択してください" }, ...data.birthYearOptions] }, name: "birth", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) + +mailField({ type: "select", name: "birth", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) + +mailInputSelect({ name: "birth", options: [{ value: "", label: "選択してください" }, ...data.birthYearOptions], isRequired: false }) +ccFormFieldset({ key: "sex", heading: "性別", isRequired: false, attention: "注意書き" }) - +mailField({ - input: { - type: "radio", - options: [ - { value: "1", label: "男性" }, - { value: "2", label: "女性" }, - ], - }, + +mailField({ type: "radio", name: "sex", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "" }) + +mailInputRadio({ name: "sex", - beforeAttachment: "前見出し", - afterAttachment: "後見出し", - description: "", - errorMessage: "", + options: [ + { value: "1", label: "男性" }, + { value: "2", label: "女性" }, + ], isRequired: false, }) +ccFormFieldset({ heading: "テキストエリア", name: "message", isRequired: false, attention: "注意書き" }) - +mailField({ input: { type: "textarea", rows: 10, cols: null }, name: "message", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) + +mailField({ type: "textarea", name: "message", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) + +mailInputTextarea({ name: "message", rows: 10, cols: null, isRequired: false }) +ccFormFieldset({ heading: "テキストエリア", name: "message2", isRequired: false, attention: "注意書き" }) - +mailField({ input: { type: "textarea", rows: 10, cols: 20 }, name: "message2", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) + +mailField({ type: "textarea", name: "message2", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) + +mailInputTextarea({ name: "message2", rows: 10, cols: 20, isRequired: false }) +ccFormFieldset({ heading: "ファイル添付", name: "file", isRequired: false, attention: "注意書き" }) - +mailField({ input: { type: "file" }, name: "file", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false, isRequired: false }) + +mailField({ type: "file", name: "file", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) + +mailInputFile({ name: "file", isRequired: false }) .cc-form-agreement p | 送信前に From 5d40d03018ba85c3f97a276d712dfb361678de7c Mon Sep 17 00:00:00 2001 From: Yusaku Sato Date: Tue, 21 Jul 2026 18:57:25 +0900 Subject: [PATCH 6/8] refactor(scaffold): rename mail form components to c-form-* naming Align mail-field/mail-input/cc-form-fieldset mixins with the c- prefixed BEM naming used by other components, and split the 301 confirm-screen placeholder markup into its own c-form-input-confirm component. --- .../_libs/component/c-content-main.css | 50 -------- .../_libs/component/form/c-form-field.css | 76 +++++++++++ .../form/{mail-field.pug => c-form-field.pug} | 40 +++--- .../_libs/component/form/c-form-fieldset.css | 64 ++++++++++ ...-form-fieldset.pug => c-form-fieldset.pug} | 40 +++--- .../component/form/c-form-input-confirm.css | 18 +++ .../component/form/c-form-input-confirm.pug | 19 +++ .../_libs/component/form/c-form-input.css | 42 +++++++ .../form/{mail-input.pug => c-form-input.pug} | 52 ++++---- .../component/form/mail-field-confirm.pug | 31 ----- .../__assets/htdocs/__tmpl/300_form_input.pug | 118 +++++++++--------- .../htdocs/__tmpl/301_form_confirm.pug | 96 ++++++++------ .../scaffold/__assets/htdocs/css/style.css | 4 + 13 files changed, 411 insertions(+), 239 deletions(-) create mode 100644 packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-field.css rename packages/@d-zero/scaffold/__assets/_libs/component/form/{mail-field.pug => c-form-field.pug} (57%) create mode 100644 packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-fieldset.css rename packages/@d-zero/scaffold/__assets/_libs/component/form/{cc-form-fieldset.pug => c-form-fieldset.pug} (54%) create mode 100644 packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input-confirm.css create mode 100644 packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input-confirm.pug create mode 100644 packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input.css rename packages/@d-zero/scaffold/__assets/_libs/component/form/{mail-input.pug => c-form-input.pug} (69%) delete mode 100644 packages/@d-zero/scaffold/__assets/_libs/component/form/mail-field-confirm.pug diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/c-content-main.css b/packages/@d-zero/scaffold/__assets/_libs/component/c-content-main.css index 14d39587..05c6b281 100644 --- a/packages/@d-zero/scaffold/__assets/_libs/component/c-content-main.css +++ b/packages/@d-zero/scaffold/__assets/_libs/component/c-content-main.css @@ -179,56 +179,6 @@ flex-direction: column; } - .cc-form-fieldset { - display: block flow; - padding-block: 1rem; - padding-inline: 2rem; - - fieldset { - padding: 0; - margin: 0; - border: none; - } - - legend { - padding: 0; - margin: 0; - } - } - - .cc-form-fieldset-heading { - display: block flex; - align-items: center; - font-size: calc(18 / 16 * 1rem); - font-weight: bold; - - label { - display: block flow; - cursor: pointer; - } - - .required, - .optional { - display: block flow; - margin-block: 0; - margin-inline: 0 0.5rem; - font-size: calc(12 / 18 * 1rem); - line-height: 1; - border-radius: 0.2rem; - } - } - - .cc-form-fieldset-attention { - margin-block: 0.5rem; - margin-inline: 0; - font-size: calc(12 / 18 * 1rem); - font-weight: normal; - } - - .cc-form-fieldset-body { - margin-block-start: 1rem; - } - .mail-field { padding-block: 0 1rem; padding-inline: 0; diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-field.css b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-field.css new file mode 100644 index 00000000..ed9e19e8 --- /dev/null +++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-field.css @@ -0,0 +1,76 @@ +.c-form-field { + display: block flow; + container: c-form-field / inline-size; +} + +.c-form-field__grid { + display: grid; + grid-template: + 'main' auto + '.' 0.5rem + 'description' auto + '.' 0.5rem + 'error-message' auto / minmax(0, 1fr); + + > :where(.c-form-field__main) { + grid-area: main; + } + + > :where(.c-form-field__description) { + grid-area: description; + } + + > :where(.c-form-field__error-message) { + grid-area: error-message; + } +} + +.c-form-field__main { + &:has( + .c-form-field__input > .c-form-input-text, + .c-form-field__input > .c-form-input-select + ) { + display: flex; + flex-flow: row nowrap; + align-items: center; + + @container (max-inline-size: 40ch) { + flex-direction: column; + align-items: start; + } + + > :where(:not(:empty) + :not(:empty)) { + margin-inline-start: 0.5rem; + + @container (max-inline-size: 40ch) { + margin-inline-start: 0; + } + } + + > :where(.c-form-field__attachment-before, .c-form-field__attachment-after) { + flex-shrink: 0; + max-inline-size: calc(100% / 4); + } + + > :where(.c-form-field__input) { + min-inline-size: 0; + max-inline-size: 100%; + } + } +} + +.c-form-field__attachment-before { + /* 前見出しのスタイルを記述 */ +} + +.c-form-field__attachment-after { + /* 後見出しのスタイルを記述 */ +} + +.c-form-field__description { + /* 説明文のスタイルを記述 */ +} + +.c-form-field__error-message { + /* エラーメッセージのスタイルを記述 */ +} diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/mail-field.pug b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-field.pug similarity index 57% rename from packages/@d-zero/scaffold/__assets/_libs/component/form/mail-field.pug rename to packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-field.pug index 9362d4d2..c4012bcd 100644 --- a/packages/@d-zero/scaffold/__assets/_libs/component/form/mail-field.pug +++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-field.pug @@ -1,9 +1,9 @@ //- isGrouped: 同一 fieldset/legend 内に複数フィールドを配置する場合に true。 親の見出し構造と一致させること（グループ化あり = fieldset/legend、なし = div/label） - span.mail-input の中身（mailInputXxx の呼び出し）は呼び出し側が block で渡す -mixin mailField(params = {}) + .c-form-field__input の中身（cFormInputXxx の呼び出し）は呼び出し側が block で渡す +mixin cFormField(params = {}) - - const props = Object.assign({ type: "text", name: "", beforeAttachment: "", afterAttachment: "", description: "", errorMessage: "", isGrouped: false }, params); + const props = Object.assign({ type: "text", name: "", beforeAttachment: "", afterAttachment: "", description: "", errorMessage: "", isGrouped: false, isConfirm: false }, params); const nameFirstLetterUppercased = props.name.charAt(0).toUpperCase() + props.name.slice(1); const idInput = `MailMessage${nameFirstLetterUppercased}`; const idField = `FieldMailMessage${nameFirstLetterUppercased}`; @@ -12,18 +12,26 @@ mixin mailField(params = {}) // CMS要件: グループ化している場合は 前見出し を labelとする。前見出しが空であれば 後見出しを labelとする const isBeforeAttachmentLabel = Boolean(props.isGrouped && !hasOwnOptionLabels && props.beforeAttachment); const isAfterAttachmentLabel = Boolean(props.isGrouped && !hasOwnOptionLabels && !props.beforeAttachment && props.afterAttachment); - .mail-field(data-type=props.type id=idField) - if isBeforeAttachmentLabel - label.mail-before-attachment(for=idInput) #{ props.beforeAttachment } - else - span.mail-before-attachment #{ props.beforeAttachment } + .c-form-field(data-type=props.type id=idField) + .c-form-field__grid + .c-form-field__main + .c-form-field__attachment-before + if isBeforeAttachmentLabel + label(for=idInput) #{ props.beforeAttachment } + else if props.beforeAttachment + span #{ props.beforeAttachment } - span.mail-input - block + .c-form-field__input + block - if isAfterAttachmentLabel - label.mail-after-attachment(for=idInput) #{ props.afterAttachment } - else - span.mail-after-attachment #{ props.afterAttachment } - .mail-description #{ props.description } - .error-message #{ props.errorMessage } + .c-form-field__attachment-after + if isAfterAttachmentLabel + label(for=idInput) #{ props.afterAttachment } + else if props.afterAttachment + span #{ props.afterAttachment } + + if !props.isConfirm + .c-form-field__description + span #{ props.description } + .c-form-field__error-message + span #{ props.errorMessage } diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-fieldset.css b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-fieldset.css new file mode 100644 index 00000000..89ee7824 --- /dev/null +++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-fieldset.css @@ -0,0 +1,64 @@ +.c-form-fieldset { + display: block flow; +} + +.c-form-fieldset__grid { + display: grid; + grid-template: + 'heading' auto + '.' 0.5rem + 'attention' auto + '.' 0.5rem + 'field' auto + / 1fr auto; + + > :where(.c-form-fieldset__heading) { + grid-area: heading; + } + + > :where(.c-form-fieldset__attention) { + grid-area: attention; + } + + > :where(.c-form-fieldset__field) { + grid-area: field; + } +} + +.c-form-fieldset__heading { + > :where(*) { + display: inline flow; + } + + > :where(:not(:first-child)) { + margin-inline: 0.5rem 0; + } +} + +.c-form-fieldset__field { + > :where(:not(:first-child)) { + margin-block-start: 1rem; + } +} + +.c-form-fieldset__heading-main { + &:where(label) { + cursor: pointer; + } +} + +.c-form-fieldset__heading-badge { + /* 必須・任意バッジのスタイルを記述 */ + + &:where([data-kind='required']) { + /* 必須バッジのスタイルを記述 */ + } + + &:where([data-kind='optional']) { + /* 任意バッジのスタイルを記述 */ + } +} + +.c-form-fieldset__attention { + /* 注意書きのスタイルを記述 */ +} diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/cc-form-fieldset.pug b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-fieldset.pug similarity index 54% rename from packages/@d-zero/scaffold/__assets/_libs/component/form/cc-form-fieldset.pug rename to packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-fieldset.pug index 2faeb3b3..fee2176b 100644 --- a/packages/@d-zero/scaffold/__assets/_libs/component/form/cc-form-fieldset.pug +++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-fieldset.pug @@ -2,38 +2,36 @@ - name: 単一 input に label-for で紐付けられる場合（text/select/textarea/file の単一フィールド） - key: 単一 input に紐付けられない場合（複数フィールドをまとめる、または checkbox/radio は CMS要件により単一フィールドでも fieldset/legend にする）を、意味のわかる短い語で渡す -mixin ccFormFieldset(params = {}) +mixin cFormFieldset(params = {}) - const props = Object.assign({ heading: "", name: null, key: null, isRequired: false, attention: "" }, params); - const badgeClass = props.isRequired ? "required" : "optional"; + const badgeKind = props.isRequired ? "required" : "optional"; const badgeLabel = props.isRequired ? "必須" : "任意"; const isGrouped = Boolean(props.key); - // mail-field.pug の idInput と同じ計算式（name/key から MailMessage+PascalCase のidを導出） + // c-form-field.pug の idInput と同じ計算式（name/key から MailMessage+PascalCase のidを導出） const toPascalCase = (str) => str.charAt(0).toUpperCase() + str.slice(1); const groupSource = props.key || props.name; const id = groupSource ? `GroupMailMessage${toPascalCase(groupSource)}` : null; const labelFor = !isGrouped && props.name ? `MailMessage${toPascalCase(props.name)}` : null; - .cc-form-fieldset(id=id) + .c-form-fieldset(id=id) if isGrouped - fieldset - legend.cc-form-fieldset-heading - span= props.heading - span(class=badgeClass)= badgeLabel - if props.attention - .cc-form-fieldset-attention - .mail-attention= props.attention - .cc-form-fieldset-body + fieldset.c-form-fieldset__grid + legend.c-form-fieldset__heading + span.c-form-fieldset__heading-main #{ props.heading } + span.c-form-fieldset__heading-badge(data-kind=badgeKind) #{ badgeLabel } + .c-form-fieldset__attention + span #{ props.attention } + .c-form-fieldset__field block else - div - .cc-form-fieldset-heading + .c-form-fieldset__grid + .c-form-fieldset__heading if labelFor - label(for=labelFor)= props.heading + label.c-form-fieldset__heading-main(for=labelFor) #{ props.heading } else - span= props.heading - span(class=badgeClass)= badgeLabel - if props.attention - .cc-form-fieldset-attention - .mail-attention= props.attention - .cc-form-fieldset-body + span.c-form-fieldset__heading-main #{ props.heading } + span.c-form-fieldset__heading-badge(data-kind=badgeKind) #{ badgeLabel } + .c-form-fieldset__attention + span #{ props.attention } + .c-form-fieldset__field block diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input-confirm.css b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input-confirm.css new file mode 100644 index 00000000..e5b61b3b --- /dev/null +++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input-confirm.css @@ -0,0 +1,18 @@ +/* stylelint-disable-next-line @d-zero/component */ +.c-form-input-confirm-text { + display: block flow; +} + +/* stylelint-disable-next-line @d-zero/component */ +.c-form-input-confirm-multi { + display: block flow; + + :where(ul li) { + list-style: disc; + } +} + +/* stylelint-disable-next-line @d-zero/component */ +.c-form-input-confirm-textarea { + display: block flow; +} diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input-confirm.pug b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input-confirm.pug new file mode 100644 index 00000000..071e0a9d --- /dev/null +++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input-confirm.pug @@ -0,0 +1,19 @@ +mixin cFormInputConfirmText(params = {}) + - + const props = Object.assign({ value: "__入力内容__" }, params); + .c-form-input-confirm-text + span #{ props.value } + +mixin cFormInputConfirmMulti(params = {}) + - + const props = Object.assign({ value: ["__選択項目1__", "__選択項目2__"] }, params); + .c-form-input-confirm-multi + ul + each value in props.value + li #{ value } + +mixin cFormInputConfirmTextarea(params = {}) + - + const props = Object.assign({ value: "__選択項目__" }, params); + .c-form-input-confirm-textarea + p #{ props.value } diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input.css b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input.css new file mode 100644 index 00000000..bae18e10 --- /dev/null +++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input.css @@ -0,0 +1,42 @@ +/* stylelint-disable-next-line @d-zero/component */ +.c-form-input-text { + max-inline-size: 100%; + + &:not([size]) { + inline-size: 100%; + } +} + +/* stylelint-disable-next-line @d-zero/component */ +.c-form-input-select { + padding-block: 0.5rem; + padding-inline: 0.5rem calc(0.5rem + 24px + 2px); + appearance: none; + background-image: url('/img/bg-arrow.svg'); + background-repeat: no-repeat; + background-position: right calc(0.2rem + 2px) top calc(100% / 2 + 2px); + border: 1px solid var(--border-color); + border-radius: 0.2rem; +} + +/* stylelint-disable-next-line @d-zero/component */ +.c-form-input-checkbox { + /* チェックボックスのスタイルを記述 */ +} + +/* stylelint-disable-next-line @d-zero/component */ +.c-form-input-radio { + /* ラジオボタンのスタイルを記述 */ +} + +/* stylelint-disable-next-line @d-zero/component */ +.c-form-input-textarea { + &:not([cols]) { + inline-size: 100%; + } +} + +/* stylelint-disable-next-line @d-zero/component */ +.c-form-input-file { + /* ファイル選択のスタイルを記述 */ +} diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/mail-input.pug b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input.pug similarity index 69% rename from packages/@d-zero/scaffold/__assets/_libs/component/form/mail-input.pug rename to packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input.pug index 6a9d0a2d..81fb94ad 100644 --- a/packages/@d-zero/scaffold/__assets/_libs/component/form/mail-input.pug +++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input.pug @@ -1,9 +1,9 @@ -mixin mailInputText(params = {}) +mixin cFormInputText(params = {}) - const props = Object.assign({ name: "field1", maxlength: null, size: null, isRequired: true }, params); const inputName = `data[MailMessage][${props.name}]`; const idInput = `MailMessage${props.name.charAt(0).toUpperCase() + props.name.slice(1)}`; - input( + input.c-form-input-text( type="text" name=inputName maxlength=props.maxlength @@ -11,63 +11,65 @@ mixin mailInputText(params = {}) required=props.isRequired id=idInput) -mixin mailInputSelect(params = {}) +mixin cFormInputSelect(params = {}) - const props = Object.assign({ name: "address1", options: [{value: "", label: "選択してください"}], isRequired: true }, params); const inputName = `data[MailMessage][${props.name}]`; const idInput = `MailMessage${props.name.charAt(0).toUpperCase() + props.name.slice(1)}`; - select(name=inputName required=props.isRequired id=idInput) + select.c-form-input-select(name=inputName required=props.isRequired id=idInput) each option in props.options option(value=option.value)= option.label //- checkbox には required を出力しない（各 input に付くと「全項目チェック必須」の挙動になるため。 「1つ以上選択必須」の検証はサーバー側の責務） -mixin mailInputCheckbox(params = {}) +mixin cFormInputCheckbox(params = {}) - const props = Object.assign({ name: "category", options: [{value: "Item1", label: "項目1"}] }, params); const idInput = `MailMessage${props.name.charAt(0).toUpperCase() + props.name.slice(1)}`; const hiddenName = `data[MailMessage][${props.name}]`; const inputName = `data[MailMessage][${props.name}][]`; //- 未選択時にもキーが送信されるようにするための hidden（CMS 仕様） - input(type="hidden" name=hiddenName value id=idInput) - each option in props.options - - - const id = idInput + option.value; - .checkbox - input(type="checkbox" name=inputName value=option.value id=id) - label(for=id) #{ option.label } + .c-form-input-checkbox + input.c-form-input-checkbox__hidden(type="hidden" name=hiddenName value id=idInput) + each option in props.options + - + const id = idInput + option.value; + .c-form-input-checkbox__item + input(type="checkbox" name=inputName value=option.value id=id) + label(for=id) #{ option.label } -mixin mailInputRadio(params = {}) +mixin cFormInputRadio(params = {}) - const props = Object.assign({ name: "sex", options: [{value: "1", label: "男性"}, {value: "2", label: "女性"}], isRequired: true }, params); const idInput = `MailMessage${props.name.charAt(0).toUpperCase() + props.name.slice(1)}`; const inputName = `data[MailMessage][${props.name}]`; const idHidden = `${idInput}_`; //- 未選択時にもキーが送信されるようにするための hidden（CMS 仕様） - input(type="hidden" name=inputName value id=idHidden) - each option in props.options - - - const id = idInput + option.value; - .mail-group-radio - span - input(type="radio" name=inputName required=props.isRequired value=option.value id=id) - label(for=id) #{ option.label } + .c-form-input-radio + input.c-form-input-radio__hidden(type="hidden" name=inputName value id=idHidden) + each option in props.options + - + const id = idInput + option.value; + .c-form-input-radio__item + span + input(type="radio" name=inputName required=props.isRequired value=option.value id=id) + label(for=id) #{ option.label } -mixin mailInputTextarea(params = {}) +mixin cFormInputTextarea(params = {}) - const props = Object.assign({ name: "message", rows: null, cols: null, isRequired: true }, params); const inputName = `data[MailMessage][${props.name}]`; const idInput = `MailMessage${props.name.charAt(0).toUpperCase() + props.name.slice(1)}`; - textarea( + textarea.c-form-input-textarea( name=inputName rows=props.rows cols=props.cols required=props.isRequired id=idInput) -mixin mailInputFile(params = {}) +mixin cFormInputFile(params = {}) - const props = Object.assign({ name: "file", isRequired: true }, params); const inputName = `data[MailMessage][${props.name}]`; const idInput = `MailMessage${props.name.charAt(0).toUpperCase() + props.name.slice(1)}`; - input(name=inputName type="file" required=props.isRequired id=idInput) + input.c-form-input-file(name=inputName type="file" required=props.isRequired id=idInput) diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/mail-field-confirm.pug b/packages/@d-zero/scaffold/__assets/_libs/component/form/mail-field-confirm.pug deleted file mode 100644 index d647067b..00000000 --- a/packages/@d-zero/scaffold/__assets/_libs/component/form/mail-field-confirm.pug +++ /dev/null @@ -1,31 +0,0 @@ -//- 301（確認画面）専用。実際の input ではなく静的なプレースホルダーを表示するため、 - id・label切り替え・description・error-message は持たない -mixin mailFieldConfirm(params = {}) - - - const props = Object.assign({ type: "text", beforeAttachment: "", afterAttachment: "", value: "__入力内容__", options: [] }, params); - .mail-field(data-type=props.type) - span.mail-before-attachment= props.beforeAttachment - case props.type - when "textarea" - p.mail-input= props.value - when "checkbox" - +mailInputConfirmCheckbox({ options: props.options }) - when "radio" - +mailInputConfirmRadio({ value: props.value }) - default - span.mail-input= props.value - span.mail-after-attachment= props.afterAttachment - -mixin mailInputConfirmCheckbox(params = {}) - - - const props = Object.assign({ options: [] }, params); - div - ul - each option in props.options - li= option - -mixin mailInputConfirmRadio(params = {}) - - - const props = Object.assign({ value: "__選択項目__" }, params); - .mail-radio - span.mail-input= props.value diff --git a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug index af160f34..2e054049 100644 --- a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug +++ b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug @@ -1,6 +1,6 @@ -include /component/form/mail-field.pug -include /component/form/mail-input.pug -include /component/form/cc-form-fieldset.pug +include /component/form/c-form-fieldset.pug +include /component/form/c-form-field.pug +include /component/form/c-form-input.pug .c-content-main // CMS要件: メールフォーム概要 @@ -18,37 +18,37 @@ include /component/form/cc-form-fieldset.pug input#Token__TOKEN__(type="hidden" name="data[_Token][key]" value="__TOKEN__") input#MailMessageMode(type="hidden" name="data[MailMessage][mode]") .cc-form-field-list - +ccFormFieldset({ key: "field1", heading: "フィールドグループ名", isRequired: true, attention: "注意書き" }) - +mailField({ type: "text", name: "field1", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: true }) - +mailInputText({ name: "field1", maxlength: 255, isRequired: true }) - +mailField({ type: "text", name: "field2", beforeAttachment: "", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: true }) - +mailInputText({ name: "field2", maxlength: 255, isRequired: true }) - +ccFormFieldset({ heading: "単体フィールド名", name: "field3", isRequired: true, attention: "注意書き" }) - +mailField({ type: "text", name: "field3", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: false }) - +mailInputText({ name: "field3", maxlength: 255, isRequired: true }) - +ccFormFieldset({ key: "name", heading: "氏名", isRequired: true }) - +mailField({ type: "text", name: "lastName", beforeAttachment: "姓", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) - +mailInputText({ name: "lastName", isRequired: true }) - +mailField({ type: "text", name: "firstName", beforeAttachment: "名", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) - +mailInputText({ name: "firstName", isRequired: true }) - +ccFormFieldset({ key: "nameKana1", heading: "フリガナ", isRequired: false, attention: "カタカナで入力してください" }) - +mailField({ type: "text", name: "lastNameKana", beforeAttachment: "セイ", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) - +mailInputText({ name: "lastNameKana", isRequired: true }) - +mailField({ type: "text", name: "firstNameKana", beforeAttachment: "メイ", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) - +mailInputText({ name: "firstNameKana", isRequired: true }) - +ccFormFieldset({ key: "zip", heading: "住所", isRequired: false }) - +mailField({ type: "text", name: "zip", beforeAttachment: "〒", afterAttachment: "", description: "ハイフンを除く半角数字で入力してください", errorMessage: "", isGrouped: true }) - +mailInputText({ name: "zip", maxlength: 8, size: 10, isRequired: false }) - +mailField({ type: "select", name: "address1", beforeAttachment: "都道府県", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) - +mailInputSelect({ name: "address1", options: [{ value: "", label: "選択してください" }, ...data.prefectureOptions], isRequired: false }) - +mailField({ type: "text", name: "address2", beforeAttachment: "市区町村", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) - +mailInputText({ name: "address2", maxlength: 200, size: 30, isRequired: false }) - +mailField({ type: "text", name: "address3", beforeAttachment: "番地", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) - +mailInputText({ name: "address3", maxlength: 200, size: 30, isRequired: false }) + +cFormFieldset({ key: "field1", heading: "フィールドグループ名", isRequired: true, attention: "注意書き" }) + +cFormField({ type: "text", name: "field1", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: true }) + +cFormInputText({ name: "field1", maxlength: 255, isRequired: true }) + +cFormField({ type: "text", name: "field2", beforeAttachment: "", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: true }) + +cFormInputText({ name: "field2", maxlength: 255, isRequired: true }) + +cFormFieldset({ heading: "単体フィールド名", name: "field3", isRequired: true, attention: "注意書き" }) + +cFormField({ type: "text", name: "field3", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: false }) + +cFormInputText({ name: "field3", maxlength: 255, isRequired: true }) + +cFormFieldset({ key: "name", heading: "氏名", isRequired: true }) + +cFormField({ type: "text", name: "lastName", beforeAttachment: "姓", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) + +cFormInputText({ name: "lastName", isRequired: true }) + +cFormField({ type: "text", name: "firstName", beforeAttachment: "名", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) + +cFormInputText({ name: "firstName", isRequired: true }) + +cFormFieldset({ key: "nameKana1", heading: "フリガナ", isRequired: false, attention: "カタカナで入力してください" }) + +cFormField({ type: "text", name: "lastNameKana", beforeAttachment: "セイ", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) + +cFormInputText({ name: "lastNameKana", isRequired: true }) + +cFormField({ type: "text", name: "firstNameKana", beforeAttachment: "メイ", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) + +cFormInputText({ name: "firstNameKana", isRequired: true }) + +cFormFieldset({ key: "zip", heading: "住所", isRequired: false }) + +cFormField({ type: "text", name: "zip", beforeAttachment: "〒", afterAttachment: "", description: "ハイフンを除く半角数字で入力してください", errorMessage: "", isGrouped: true }) + +cFormInputText({ name: "zip", maxlength: 8, size: 10, isRequired: false }) + +cFormField({ type: "select", name: "address1", beforeAttachment: "都道府県", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) + +cFormInputSelect({ name: "address1", options: [{ value: "", label: "選択してください" }, ...data.prefectureOptions], isRequired: false }) + +cFormField({ type: "text", name: "address2", beforeAttachment: "市区町村", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) + +cFormInputText({ name: "address2", maxlength: 200, size: 30, isRequired: false }) + +cFormField({ type: "text", name: "address3", beforeAttachment: "番地", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) + +cFormInputText({ name: "address3", maxlength: 200, size: 30, isRequired: false }) // CMS要件: グループ化していない場合でも チェックボックスでは fieldset/legend の構造 - +ccFormFieldset({ key: "category", heading: "チェックボックス単体", isRequired: true }) - +mailField({ type: "checkbox", name: "category", beforeAttachment: "チェックボックス前見出し", afterAttachment: "チェックボックス後見出し", description: "", errorMessage: "" }) - +mailInputCheckbox({ + +cFormFieldset({ key: "category", heading: "チェックボックス単体", isRequired: true }) + +cFormField({ type: "checkbox", name: "category", beforeAttachment: "チェックボックス前見出し", afterAttachment: "チェックボックス後見出し", description: "", errorMessage: "" }) + +cFormInputCheckbox({ name: "category", options: [ { value: "Item1", label: "項目1" }, @@ -56,9 +56,9 @@ include /component/form/cc-form-fieldset.pug { value: "Item3", label: "項目3" }, ], }) - +ccFormFieldset({ key: "contents", heading: "チェックボックス", isRequired: true, attention: "注意書き" }) - +mailField({ type: "checkbox", name: "contents", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "" }) - +mailInputCheckbox({ + +cFormFieldset({ key: "contents", heading: "チェックボックス", isRequired: true, attention: "注意書き" }) + +cFormField({ type: "checkbox", name: "contents", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "" }) + +cFormInputCheckbox({ name: "contents", options: [ { value: "1", label: "生麦生米生卵" }, @@ -70,20 +70,20 @@ include /component/form/cc-form-fieldset.pug { value: "7", label: "その他" }, ], }) - +mailField({ type: "text", name: "contentsOther", beforeAttachment: "その他", afterAttachment: "後見出し", description: "その他を選択された場合は内容をご入力ください。", errorMessage: "", isGrouped: true }) - +mailInputText({ name: "contentsOther", maxlength: 255, size: 30, isRequired: false }) - +ccFormFieldset({ heading: "電話番号", name: "tel", isRequired: false, attention: "注意書き" }) - +mailField({ type: "text", name: "tel", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) - +mailInputText({ name: "tel", maxlength: 13, size: 15, isRequired: false }) - +ccFormFieldset({ heading: "メールアドレス", name: "email1", isRequired: true, attention: "注意書き" }) - +mailField({ type: "text", name: "email1", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) - +mailInputText({ name: "email1", maxlength: 255, size: 30, isRequired: false }) - +ccFormFieldset({ heading: "生まれ年", name: "birth", isRequired: true, attention: "注意書き" }) - +mailField({ type: "select", name: "birth", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) - +mailInputSelect({ name: "birth", options: [{ value: "", label: "選択してください" }, ...data.birthYearOptions], isRequired: false }) - +ccFormFieldset({ key: "sex", heading: "性別", isRequired: false, attention: "注意書き" }) - +mailField({ type: "radio", name: "sex", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "" }) - +mailInputRadio({ + +cFormField({ type: "text", name: "contentsOther", beforeAttachment: "その他", afterAttachment: "後見出し", description: "その他を選択された場合は内容をご入力ください。", errorMessage: "", isGrouped: true }) + +cFormInputText({ name: "contentsOther", maxlength: 255, size: 30, isRequired: false }) + +cFormFieldset({ heading: "電話番号", name: "tel", isRequired: false, attention: "注意書き" }) + +cFormField({ type: "text", name: "tel", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) + +cFormInputText({ name: "tel", maxlength: 13, size: 15, isRequired: false }) + +cFormFieldset({ heading: "メールアドレス", name: "email1", isRequired: true, attention: "注意書き" }) + +cFormField({ type: "text", name: "email1", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) + +cFormInputText({ name: "email1", maxlength: 255, size: 30, isRequired: false }) + +cFormFieldset({ heading: "生まれ年", name: "birth", isRequired: true, attention: "注意書き" }) + +cFormField({ type: "select", name: "birth", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) + +cFormInputSelect({ name: "birth", options: [{ value: "", label: "選択してください" }, ...data.birthYearOptions], isRequired: false }) + +cFormFieldset({ key: "sex", heading: "性別", isRequired: false, attention: "注意書き" }) + +cFormField({ type: "radio", name: "sex", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "" }) + +cFormInputRadio({ name: "sex", options: [ { value: "1", label: "男性" }, @@ -91,15 +91,15 @@ include /component/form/cc-form-fieldset.pug ], isRequired: false, }) - +ccFormFieldset({ heading: "テキストエリア", name: "message", isRequired: false, attention: "注意書き" }) - +mailField({ type: "textarea", name: "message", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) - +mailInputTextarea({ name: "message", rows: 10, cols: null, isRequired: false }) - +ccFormFieldset({ heading: "テキストエリア", name: "message2", isRequired: false, attention: "注意書き" }) - +mailField({ type: "textarea", name: "message2", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) - +mailInputTextarea({ name: "message2", rows: 10, cols: 20, isRequired: false }) - +ccFormFieldset({ heading: "ファイル添付", name: "file", isRequired: false, attention: "注意書き" }) - +mailField({ type: "file", name: "file", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) - +mailInputFile({ name: "file", isRequired: false }) + +cFormFieldset({ heading: "テキストエリア", name: "message", isRequired: false, attention: "注意書き" }) + +cFormField({ type: "textarea", name: "message", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) + +cFormInputTextarea({ name: "message", rows: 10, cols: null, isRequired: false }) + +cFormFieldset({ heading: "テキストエリア", name: "message2", isRequired: false, attention: "注意書き" }) + +cFormField({ type: "textarea", name: "message2", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) + +cFormInputTextarea({ name: "message2", rows: 10, cols: 20, isRequired: false }) + +cFormFieldset({ heading: "ファイル添付", name: "file", isRequired: false, attention: "注意書き" }) + +cFormField({ type: "file", name: "file", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) + +cFormInputFile({ name: "file", isRequired: false }) .cc-form-agreement p | 送信前に diff --git a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm.pug b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm.pug index a496acc1..7b4fc6fd 100644 --- a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm.pug +++ b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm.pug @@ -1,5 +1,6 @@ -include /component/form/cc-form-fieldset.pug -include /component/form/mail-field-confirm.pug +include /component/form/c-form-fieldset.pug +include /component/form/c-form-field.pug +include /component/form/c-form-input-confirm.pug .c-content-main .cc-form-description @@ -15,41 +16,62 @@ include /component/form/mail-field-confirm.pug input#Token__TOKEN__(type="hidden" name="data[_Token][key]" value="__TOKEN__") input#MailMessageMode(type="hidden" name="data[MailMessage][mode]") .cc-form-field-list - +ccFormFieldset({ heading: "フィールドグループ名", isRequired: true }) - +mailFieldConfirm({ beforeAttachment: "前見出し", afterAttachment: "後見出し" }) - +mailFieldConfirm({ beforeAttachment: "", afterAttachment: "後見出し" }) - +ccFormFieldset({ heading: "単体フィールド名", isRequired: true }) - +mailFieldConfirm({ beforeAttachment: "前見出し", afterAttachment: "後見出し" }) - +ccFormFieldset({ heading: "氏名", isRequired: true }) - +mailFieldConfirm({ beforeAttachment: "姓", afterAttachment: "" }) - +mailFieldConfirm({ beforeAttachment: "名", afterAttachment: "" }) - +ccFormFieldset({ heading: "フリガナ", isRequired: false }) - +mailFieldConfirm({ beforeAttachment: "セイ", afterAttachment: "" }) - +mailFieldConfirm({ beforeAttachment: "メイ", afterAttachment: "" }) - +ccFormFieldset({ heading: "住所", isRequired: false }) - +mailFieldConfirm({ beforeAttachment: "〒", afterAttachment: "" }) - +mailFieldConfirm({ type: "select", beforeAttachment: "都道府県", afterAttachment: "" }) - +mailFieldConfirm({ beforeAttachment: "市区町村", afterAttachment: "" }) - +mailFieldConfirm({ beforeAttachment: "番地", afterAttachment: "" }) - +ccFormFieldset({ heading: "チェックボックス単体", isRequired: true }) - +mailFieldConfirm({ type: "checkbox", beforeAttachment: "チェックボックス前見出し", options: ["__選択項目1__", "__選択項目2__"] }) - +ccFormFieldset({ heading: "チェックボックス", isRequired: true }) - +mailFieldConfirm({ type: "checkbox", options: ["__選択項目1__", "__選択項目2__"] }) - +mailFieldConfirm({ beforeAttachment: "その他", afterAttachment: "" }) - +ccFormFieldset({ heading: "電話番号", isRequired: false }) - +mailFieldConfirm({ beforeAttachment: "", afterAttachment: "" }) - +ccFormFieldset({ heading: "メールアドレス", isRequired: true }) - +mailFieldConfirm({ beforeAttachment: "", afterAttachment: "" }) - +ccFormFieldset({ heading: "生まれ年", isRequired: true }) - +mailFieldConfirm({ type: "select", beforeAttachment: "", afterAttachment: "" }) - +ccFormFieldset({ heading: "性別", isRequired: false }) - +mailFieldConfirm({ type: "radio", beforeAttachment: "", afterAttachment: "", value: "__選択項目__" }) - +ccFormFieldset({ heading: "テキストエリア", isRequired: false, attention: "注意書き" }) - +mailFieldConfirm({ type: "textarea", beforeAttachment: "", afterAttachment: "" }) - +ccFormFieldset({ heading: "テキストエリア", isRequired: false }) - +mailFieldConfirm({ type: "textarea", beforeAttachment: "前見出し", afterAttachment: "後見出し" }) - +ccFormFieldset({ heading: "ファイル添付", isRequired: false }) - +mailFieldConfirm({ type: "file", beforeAttachment: "前見出し", afterAttachment: "後見出し", value: "__ファイル名__" }) + +cFormFieldset({ heading: "フィールドグループ名", isRequired: true }) + +cFormField({ beforeAttachment: "前見出し", afterAttachment: "後見出し", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormField({ beforeAttachment: "", afterAttachment: "後見出し", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormFieldset({ heading: "単体フィールド名", isRequired: true }) + +cFormField({ beforeAttachment: "前見出し", afterAttachment: "後見出し", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormFieldset({ heading: "氏名", isRequired: true }) + +cFormField({ beforeAttachment: "姓", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormField({ beforeAttachment: "名", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormFieldset({ heading: "フリガナ", isRequired: false }) + +cFormField({ beforeAttachment: "セイ", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormField({ beforeAttachment: "メイ", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormFieldset({ heading: "住所", isRequired: false }) + +cFormField({ beforeAttachment: "〒", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormField({ type: "select", beforeAttachment: "都道府県", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormField({ beforeAttachment: "市区町村", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormField({ beforeAttachment: "番地", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormFieldset({ heading: "チェックボックス単体", isRequired: true }) + +cFormField({ type: "checkbox", beforeAttachment: "チェックボックス前見出し", isConfirm: true }) + +cFormInputConfirmMulti({ value: ["__選択項目1__", "__選択項目2__"] }) + +cFormFieldset({ heading: "チェックボックス", isRequired: true }) + +cFormField({ type: "checkbox", isConfirm: true }) + +cFormInputConfirmMulti({ value: ["__選択項目1__", "__選択項目2__"] }) + +cFormField({ beforeAttachment: "その他", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormFieldset({ heading: "電話番号", isRequired: false }) + +cFormField({ beforeAttachment: "", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormFieldset({ heading: "メールアドレス", isRequired: true }) + +cFormField({ beforeAttachment: "", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormFieldset({ heading: "生まれ年", isRequired: true }) + +cFormField({ type: "select", beforeAttachment: "", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormFieldset({ heading: "性別", isRequired: false }) + +cFormField({ type: "radio", beforeAttachment: "", afterAttachment: "", value: "__選択項目__", isConfirm: true }) + +cFormInputConfirmText({ value: "__選択項目__" }) + +cFormFieldset({ heading: "テキストエリア", isRequired: false, attention: "注意書き" }) + +cFormField({ type: "textarea", beforeAttachment: "", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmTextarea({ value: "__入力内容__" }) + +cFormFieldset({ heading: "テキストエリア", isRequired: false }) + +cFormField({ type: "textarea", beforeAttachment: "前見出し", afterAttachment: "後見出し", isConfirm: true }) + +cFormInputConfirmTextarea({ value: "__入力内容__" }) + +cFormFieldset({ heading: "ファイル添付", isRequired: false }) + +cFormField({ type: "file", beforeAttachment: "前見出し", afterAttachment: "後見出し", value: "__ファイル名__", isConfirm: true }) + +cFormInputConfirmText({ value: "__ファイル名__" }) .cc-form-submit button(type="submit"): span 入力画面に戻る button(type="submit"): span 送信する diff --git a/packages/@d-zero/scaffold/__assets/htdocs/css/style.css b/packages/@d-zero/scaffold/__assets/htdocs/css/style.css index aaf08ce6..b9bff57e 100644 --- a/packages/@d-zero/scaffold/__assets/htdocs/css/style.css +++ b/packages/@d-zero/scaffold/__assets/htdocs/css/style.css @@ -18,6 +18,10 @@ @import '@/component/c-media-list.css' layer(component); @import '@/component/c-media.css' layer(component); @import '@/component/c-content-index.css' layer(component); +@import '@/component/form/c-form-fieldset.css' layer(component); +@import '@/component/form/c-form-field.css' layer(component); +@import '@/component/form/c-form-input.css' layer(component); +@import '@/component/form/c-form-input-confirm.css' layer(component); @import '@burger-editor/css' layer(main-base); @import '@/component/c-content-main.css' layer(main); From b7fb356d98179c695920ad425841c5c2ff911a2a Mon Sep 17 00:00:00 2001 From: Yusaku Sato Date: Tue, 21 Jul 2026 19:20:50 +0900 Subject: [PATCH 7/8] refactor(scaffold): restore original mail form templates Restore 300_form_input.pug, 301_form_confirm.pug, and the related c-content-main.css fieldset styles to their pre-redesign state so the new component-based design can be added as a separate template instead of overwriting the original. --- .../_libs/component/c-content-main.css | 50 ++ .../__assets/htdocs/__tmpl/300_form_input.pug | 586 +++++++++++++++--- .../htdocs/__tmpl/301_form_confirm.pug | 232 +++++-- 3 files changed, 723 insertions(+), 145 deletions(-) diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/c-content-main.css b/packages/@d-zero/scaffold/__assets/_libs/component/c-content-main.css index 05c6b281..14d39587 100644 --- a/packages/@d-zero/scaffold/__assets/_libs/component/c-content-main.css +++ b/packages/@d-zero/scaffold/__assets/_libs/component/c-content-main.css @@ -179,6 +179,56 @@ flex-direction: column; } + .cc-form-fieldset { + display: block flow; + padding-block: 1rem; + padding-inline: 2rem; + + fieldset { + padding: 0; + margin: 0; + border: none; + } + + legend { + padding: 0; + margin: 0; + } + } + + .cc-form-fieldset-heading { + display: block flex; + align-items: center; + font-size: calc(18 / 16 * 1rem); + font-weight: bold; + + label { + display: block flow; + cursor: pointer; + } + + .required, + .optional { + display: block flow; + margin-block: 0; + margin-inline: 0 0.5rem; + font-size: calc(12 / 18 * 1rem); + line-height: 1; + border-radius: 0.2rem; + } + } + + .cc-form-fieldset-attention { + margin-block: 0.5rem; + margin-inline: 0; + font-size: calc(12 / 18 * 1rem); + font-weight: normal; + } + + .cc-form-fieldset-body { + margin-block-start: 1rem; + } + .mail-field { padding-block: 0 1rem; padding-inline: 0; diff --git a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug index 2e054049..7d094740 100644 --- a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug +++ b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input.pug @@ -1,7 +1,3 @@ -include /component/form/c-form-fieldset.pug -include /component/form/c-form-field.pug -include /component/form/c-form-input.pug - .c-content-main // CMS要件: メールフォーム概要 .cc-form-description @@ -18,88 +14,508 @@ include /component/form/c-form-input.pug input#Token__TOKEN__(type="hidden" name="data[_Token][key]" value="__TOKEN__") input#MailMessageMode(type="hidden" name="data[MailMessage][mode]") .cc-form-field-list - +cFormFieldset({ key: "field1", heading: "フィールドグループ名", isRequired: true, attention: "注意書き" }) - +cFormField({ type: "text", name: "field1", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: true }) - +cFormInputText({ name: "field1", maxlength: 255, isRequired: true }) - +cFormField({ type: "text", name: "field2", beforeAttachment: "", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: true }) - +cFormInputText({ name: "field2", maxlength: 255, isRequired: true }) - +cFormFieldset({ heading: "単体フィールド名", name: "field3", isRequired: true, attention: "注意書き" }) - +cFormField({ type: "text", name: "field3", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: false }) - +cFormInputText({ name: "field3", maxlength: 255, isRequired: true }) - +cFormFieldset({ key: "name", heading: "氏名", isRequired: true }) - +cFormField({ type: "text", name: "lastName", beforeAttachment: "姓", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) - +cFormInputText({ name: "lastName", isRequired: true }) - +cFormField({ type: "text", name: "firstName", beforeAttachment: "名", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) - +cFormInputText({ name: "firstName", isRequired: true }) - +cFormFieldset({ key: "nameKana1", heading: "フリガナ", isRequired: false, attention: "カタカナで入力してください" }) - +cFormField({ type: "text", name: "lastNameKana", beforeAttachment: "セイ", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) - +cFormInputText({ name: "lastNameKana", isRequired: true }) - +cFormField({ type: "text", name: "firstNameKana", beforeAttachment: "メイ", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) - +cFormInputText({ name: "firstNameKana", isRequired: true }) - +cFormFieldset({ key: "zip", heading: "住所", isRequired: false }) - +cFormField({ type: "text", name: "zip", beforeAttachment: "〒", afterAttachment: "", description: "ハイフンを除く半角数字で入力してください", errorMessage: "", isGrouped: true }) - +cFormInputText({ name: "zip", maxlength: 8, size: 10, isRequired: false }) - +cFormField({ type: "select", name: "address1", beforeAttachment: "都道府県", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) - +cFormInputSelect({ name: "address1", options: [{ value: "", label: "選択してください" }, ...data.prefectureOptions], isRequired: false }) - +cFormField({ type: "text", name: "address2", beforeAttachment: "市区町村", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) - +cFormInputText({ name: "address2", maxlength: 200, size: 30, isRequired: false }) - +cFormField({ type: "text", name: "address3", beforeAttachment: "番地", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) - +cFormInputText({ name: "address3", maxlength: 200, size: 30, isRequired: false }) + // CMS要件: グループ化している場合は fieldset/legend の構造 + #GroupMailMessageField1.cc-form-fieldset + fieldset + legend.cc-form-fieldset-heading + span フィールドグループ名 + span.required 必須 + .cc-form-fieldset-attention + .mail-attention 注意書き + .cc-form-fieldset-body + // CMS要件: 入力タイプによって data-type 属性を変更 + #FieldMailMessageField1.mail-field(data-type="text") + // CMS要件: グループ化している場合は 前見出し は labelとする + label.mail-before-attachment(for="MailMessageField1") 前見出し + span.mail-input + input#MailMessageField1( + type="text" + name="data[MailMessage][field1]" + maxlength="255" + required) + span.mail-after-attachment 後見出し + .mail-description 説明文 + .error-message エラーメッセージ + #FieldMailMessageField2.mail-field(data-type="text") + span.mail-before-attachment + span.mail-input + input#MailMessageField2( + type="text" + name="data[MailMessage][field2]" + maxlength="255" + required) + // CMS要件: グループ化している場合は 前見出しが空であれば 後見出しを labelとする + label.mail-after-attachment(for="MailMessageField2") 後見出し + .mail-description 説明文 + .error-message エラーメッセージ + // CMS要件: グループ化していない場合は div/label の構造 + #GroupMailMessageField3.cc-form-fieldset + div + .cc-form-fieldset-heading + label(for="MailMessageField3") 単体フィールド名 + span.required 必須 + .cc-form-fieldset-attention + .mail-attention 注意書き + .cc-form-fieldset-body + #FieldMailMessageField3.mail-field(data-type="text") + // CMS要件: グループ化していない場合は 前見出しも後見出しも label にはならない + span.mail-before-attachment 前見出し + span.mail-input + input#MailMessageField3( + type="text" + name="data[MailMessage][field3]" + maxlength="255" + required) + span.mail-after-attachment 後見出し + .mail-description 説明文 + .error-message エラーメッセージ + #GroupMailMessageName.cc-form-fieldset + fieldset + legend.cc-form-fieldset-heading + span 氏名 + span.required 必須 + .cc-form-fieldset-body + #FieldMailMessageLastName.mail-field(data-type="text") + label.mail-before-attachment(for="MailMessageLastName") 姓 + span.mail-input + input#MailMessageLastName( + type="text" + name="data[MailMessage][LastName]" + required) + span.mail-after-attachment + .mail-description + #FieldMailMessageFirstName.mail-field(data-type="text") + label.mail-before-attachment(for="MailMessageFirstName") 名 + span.mail-input + input#MailMessageFirstName( + type="text" + name="data[MailMessage][FirstName]" + required) + span.mail-after-attachment + .mail-description + #GroupMessageNameKana1.cc-form-fieldset + fieldset + legend.cc-form-fieldset-heading + span フリガナ + span.optional 任意 + .cc-form-fieldset-attention + .mail-attention カタカナで入力してください + .cc-form-fieldset-body + #FieldMailMessageLastNameKana.mail-field(data-type="text") + label.mail-before-attachment(for="MailMessageLastNameKana") セイ + span.mail-input + input#MailMessageLastNameKana( + type="text" + name="data[MailMessage][LastNameKana]" + required) + span.mail-after-attachment + .mail-description + #FieldMailMessageFirstNameKana.mail-field(data-type="text") + label.mail-before-attachment(for="MailMessageFirstNameKana") メイ + span.mail-input + input#MailMessageFirstNameKana( + type="text" + name="data[MailMessage][FirstNameKana]" + required) + span.mail-after-attachment + .mail-description + #GroupMessageZip.cc-form-fieldset + fieldset + legend.cc-form-fieldset-heading + span 住所 + span.optional 任意 + .cc-form-fieldset-body + #FieldMessageZip.mail-field(data-type="text") + label.mail-before-attachment(for="MailMessageZip") 〒 + span.mail-input + input#MailMessageZip( + name="data[MailMessage][zip]" + size="10" + maxlength="8" + type="text") + span.mail-after-attachment + .mail-description ハイフンを除く半角数字で入力してください + #FieldMessageAddress1.mail-field(data-type="select") + label.mail-before-attachment(for="MailMessageAddress1") 都道府県 + span.mail-input + select#MailMessageAddress1(name="data[MailMessage][address_1]") + option(value) 選択してください + option(value="北海道") 北海道 + option(value="青森県") 青森県 + option(value="岩手県") 岩手県 + option(value="宮城県") 宮城県 + option(value="秋田県") 秋田県 + option(value="山形県") 山形県 + option(value="福島県") 福島県 + option(value="茨城県") 茨城県 + option(value="栃木県") 栃木県 + option(value="群馬県") 群馬県 + option(value="埼玉県") 埼玉県 + option(value="千葉県") 千葉県 + option(value="東京都") 東京都 + option(value="神奈川県") 神奈川県 + option(value="新潟県") 新潟県 + option(value="富山県") 富山県 + option(value="石川県") 石川県 + option(value="福井県") 福井県 + option(value="山梨県") 山梨県 + option(value="長野県") 長野県 + option(value="岐阜県") 岐阜県 + option(value="静岡県") 静岡県 + option(value="愛知県") 愛知県 + option(value="三重県") 三重県 + option(value="滋賀県") 滋賀県 + option(value="京都府") 京都府 + option(value="大阪府") 大阪府 + option(value="兵庫県") 兵庫県 + option(value="奈良県") 奈良県 + option(value="和歌山県") 和歌山県 + option(value="鳥取県") 鳥取県 + option(value="島根県") 島根県 + option(value="岡山県") 岡山県 + option(value="広島県") 広島県 + option(value="山口県") 山口県 + option(value="徳島県") 徳島県 + option(value="香川県") 香川県 + option(value="愛媛県") 愛媛県 + option(value="高知県") 高知県 + option(value="福岡県") 福岡県 + option(value="佐賀県") 佐賀県 + option(value="長崎県") 長崎県 + option(value="熊本県") 熊本県 + option(value="大分県") 大分県 + option(value="宮崎県") 宮崎県 + option(value="鹿児島県") 鹿児島県 + option(value="沖縄県") 沖縄県 + span.mail-after-attachment + .mail-description + #FieldMessageAddress2.mail-field(data-type="text") + label.mail-before-attachment(for="MailMessageAddress2") 市区町村 + span.mail-input + input#MailMessageAddress2( + name="data[MailMessage][address_2]" + size="30" + maxlength="200" + type="text") + span.mail-after-attachment + .mail-description + #FieldMessageAddress3.mail-field(data-type="text") + label.mail-before-attachment(for="MailMessageAddress3") 番地 + span.mail-input + input#MailMessageAddress3( + name="data[MailMessage][address_3]" + size="30" + maxlength="200" + type="text") + span.mail-after-attachment + .mail-description // CMS要件: グループ化していない場合でも チェックボックスでは fieldset/legend の構造 - +cFormFieldset({ key: "category", heading: "チェックボックス単体", isRequired: true }) - +cFormField({ type: "checkbox", name: "category", beforeAttachment: "チェックボックス前見出し", afterAttachment: "チェックボックス後見出し", description: "", errorMessage: "" }) - +cFormInputCheckbox({ - name: "category", - options: [ - { value: "Item1", label: "項目1" }, - { value: "Item2", label: "項目2" }, - { value: "Item3", label: "項目3" }, - ], -}) - +cFormFieldset({ key: "contents", heading: "チェックボックス", isRequired: true, attention: "注意書き" }) - +cFormField({ type: "checkbox", name: "contents", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "" }) - +cFormInputCheckbox({ - name: "contents", - options: [ - { value: "1", label: "生麦生米生卵" }, - { value: "2", label: "赤パジャマ黄パジャマ茶パジャマ" }, - { value: "3", label: "青巻紙赤巻紙黄巻紙" }, - { value: "4", label: "隣の客はよく柿食う客だ" }, - { value: "5", label: "かえるぴょこぴょこ3ぴょこぴょこ あわせてぴょこぴょこ6ぴょこぴょこ" }, - { value: "6", label: "東京特許許可局許可局長" }, - { value: "7", label: "その他" }, - ], -}) - +cFormField({ type: "text", name: "contentsOther", beforeAttachment: "その他", afterAttachment: "後見出し", description: "その他を選択された場合は内容をご入力ください。", errorMessage: "", isGrouped: true }) - +cFormInputText({ name: "contentsOther", maxlength: 255, size: 30, isRequired: false }) - +cFormFieldset({ heading: "電話番号", name: "tel", isRequired: false, attention: "注意書き" }) - +cFormField({ type: "text", name: "tel", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) - +cFormInputText({ name: "tel", maxlength: 13, size: 15, isRequired: false }) - +cFormFieldset({ heading: "メールアドレス", name: "email1", isRequired: true, attention: "注意書き" }) - +cFormField({ type: "text", name: "email1", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) - +cFormInputText({ name: "email1", maxlength: 255, size: 30, isRequired: false }) - +cFormFieldset({ heading: "生まれ年", name: "birth", isRequired: true, attention: "注意書き" }) - +cFormField({ type: "select", name: "birth", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) - +cFormInputSelect({ name: "birth", options: [{ value: "", label: "選択してください" }, ...data.birthYearOptions], isRequired: false }) - +cFormFieldset({ key: "sex", heading: "性別", isRequired: false, attention: "注意書き" }) - +cFormField({ type: "radio", name: "sex", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "" }) - +cFormInputRadio({ - name: "sex", - options: [ - { value: "1", label: "男性" }, - { value: "2", label: "女性" }, - ], - isRequired: false, -}) - +cFormFieldset({ heading: "テキストエリア", name: "message", isRequired: false, attention: "注意書き" }) - +cFormField({ type: "textarea", name: "message", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) - +cFormInputTextarea({ name: "message", rows: 10, cols: null, isRequired: false }) - +cFormFieldset({ heading: "テキストエリア", name: "message2", isRequired: false, attention: "注意書き" }) - +cFormField({ type: "textarea", name: "message2", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) - +cFormInputTextarea({ name: "message2", rows: 10, cols: 20, isRequired: false }) - +cFormFieldset({ heading: "ファイル添付", name: "file", isRequired: false, attention: "注意書き" }) - +cFormField({ type: "file", name: "file", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) - +cFormInputFile({ name: "file", isRequired: false }) + #GroupMessageCategory.cc-form-fieldset + fieldset + legend.cc-form-fieldset-heading + span チェックボックス単体 + span.required 必須 + .cc-form-fieldset-body + #FieldMessageCategory.mail-field(data-type="checkbox") + span.mail-before-attachment チェックボックス前見出し + input#MailMessageCategory(type="hidden" name="data[MailMessage][category]" value) + .checkbox + input#MailMessageCategoryItem1( + type="checkbox" + name="data[MailMessage][category][]" + value="Item1") + |   + label(for="MailMessageCategoryItem1") 項目1 + .checkbox + input#MailMessageCategoryItem2( + type="checkbox" + name="data[MailMessage][category][]" + value="Item2") + |   + label(for="MailMessageCategoryItem2") 項目2 + .checkbox + input#MailMessageCategoryItem3( + type="checkbox" + name="data[MailMessage][category][]" + value="Item3") + |   + label(for="MailMessageCategoryItem3") 項目3 + span.mail-after-attachment チェックボックス後見出し + .mail-description + #GroupMessageContents.cc-form-fieldset + fieldset + legend.cc-form-fieldset-heading + span チェックボックス + span.required 必須 + .cc-form-fieldset-attention + .mail-attention 注意書き + .cc-form-fieldset-body + #FieldMessageContents.mail-field(data-type="checkbox") + span.mail-before-attachment 前見出し + input#MailMessageField4(type="hidden" name="data[MailMessage][contents]" value) + .checkbox + input#MailMessageField41( + type="checkbox" + name="data[MailMessage][contents][]" + value="1") + |   + label(for="MailMessageField41") 生麦生米生卵 + .checkbox + input#MailMessageField42( + type="checkbox" + name="data[MailMessage][contents][]" + value="2") + |   + label(for="MailMessageField42") 赤パジャマ黄パジャマ茶パジャマ + .checkbox + input#MailMessageField43( + type="checkbox" + name="data[MailMessage][contents][]" + value="3") + |   + label(for="MailMessageField43") 青巻紙赤巻紙黄巻紙 + .checkbox + input#MailMessageField44( + type="checkbox" + name="data[MailMessage][contents][]" + value="4") + |   + label(for="MailMessageField44") 隣の客はよく柿食う客だ + .checkbox + input#MailMessageField45( + type="checkbox" + name="data[MailMessage][contents][]" + value="5") + |   + label(for="MailMessageField45") かえるぴょこぴょこ3ぴょこぴょこ あわせてぴょこぴょこ6ぴょこぴょこ + .checkbox + input#MailMessageField46( + type="checkbox" + name="data[MailMessage][contents][]" + value="6") + |   + label(for="MailMessageField46") 東京特許許可局許可局長 + .checkbox + input#MailMessageField47( + type="checkbox" + name="data[MailMessage][contents][]" + value="7") + |   + label(for="MailMessageField47") その他 + span.mail-after-attachment + #FieldMessageContentsOther.mail-field(data-type="text") + label.mail-before-attachment(for="MailMessageContentsOther") その他 + span.mail-input + input#MailMessageContentsOther( + name="data[MailMessage][contents_other]" + size="30" + maxlength="255" + type="text") + span.mail-after-attachment 後見出し + .mail-description その他を選択された場合は内容をご入力ください。 + #GroupMessageTel.cc-form-fieldset + div + .cc-form-fieldset-heading + label(for="MailMessageTel") 電話番号 + .cc-form-fieldset-attention + .mail-attention 注意書き + .cc-form-fieldset-body + #FieldMessageTel.mail-field(data-type="text") + span.mail-before-attachment 前見出し + span.mail-input + input#MailMessageTel( + name="data[MailMessage][tel]" + size="15" + maxlength="13" + type="text") + span.mail-after-attachment 後見出し + #GroupMessageEmail1.cc-form-fieldset + div + .cc-form-fieldset-heading + label(for="MailMessageEmail1") メールアドレス + span.required 必須 + .cc-form-fieldset-attention + .mail-attention 注意書き + .cc-form-fieldset-body + #FieldMessageEmail1.mail-field(data-type="text") + span.mail-before-attachment 前見出し + span.mail-input + input#MailMessageEmail1( + name="data[MailMessage][email_1]" + maxlength="255" + type="text") + span.mail-after-attachment 後見出し + #GroupMessageBirth.cc-form-fieldset + div + .cc-form-fieldset-heading + label(for="MailMessageBirth") 生まれ年 + span.required 必須 + .cc-form-fieldset-attention + .mail-attention 注意書き + .cc-form-fieldset-body + #FieldMessageBirth.mail-field(data-type="select") + span.mail-before-attachment 前見出し + span.mail-input + select#MailMessageBirth(name="data[MailMessage][birth]") + option(value) 選択してください + option(value="1") 1923年 + option(value="2") 1924年 + option(value="3") 1925年 + option(value="4") 1926年 + option(value="5") 1927年 + option(value="6") 1928年 + option(value="7") 1929年 + option(value="8") 1930年 + option(value="9") 1931年 + option(value="10") 1932年 + option(value="11") 1933年 + option(value="12") 1934年 + option(value="13") 1935年 + option(value="14") 1936年 + option(value="15") 1937年 + option(value="16") 1938年 + option(value="17") 1939年 + option(value="18") 1940年 + option(value="19") 1941年 + option(value="20") 1942年 + option(value="21") 1943年 + option(value="22") 1944年 + option(value="23") 1945年 + option(value="24") 1946年 + option(value="25") 1947年 + option(value="26") 1948年 + option(value="27") 1949年 + option(value="28") 1950年 + option(value="29") 1951年 + option(value="30") 1952年 + option(value="31") 1953年 + option(value="32") 1954年 + option(value="33") 1955年 + option(value="34") 1956年 + option(value="35") 1957年 + option(value="36") 1958年 + option(value="37") 1959年 + option(value="38") 1960年 + option(value="39") 1961年 + option(value="40") 1962年 + option(value="41") 1963年 + option(value="42") 1964年 + option(value="43") 1965年 + option(value="44") 1966年 + option(value="45") 1967年 + option(value="46") 1968年 + option(value="47") 1969年 + option(value="48") 1970年 + option(value="49") 1971年 + option(value="50") 1972年 + option(value="51") 1973年 + option(value="52") 1974年 + option(value="53") 1975年 + option(value="54") 1976年 + option(value="55") 1977年 + option(value="56") 1978年 + option(value="57") 1979年 + option(value="58") 1980年 + option(value="59") 1981年 + option(value="60") 1982年 + option(value="61") 1983年 + option(value="62") 1984年 + option(value="63") 1985年 + option(value="64") 1986年 + option(value="65") 1987年 + option(value="66") 1988年 + option(value="67") 1989年 + option(value="68") 1990年 + option(value="69") 1991年 + option(value="70") 1992年 + option(value="71") 1993年 + option(value="72") 1994年 + option(value="73") 1995年 + option(value="74") 1996年 + option(value="75") 1997年 + option(value="76") 1998年 + option(value="77") 1999年 + option(value="78") 2000年 + option(value="79") 2001年 + option(value="80") 2002年 + option(value="81") 2003年 + option(value="82") 2004年 + option(value="83") 2005年 + option(value="84") 2006年 + option(value="85") 2007年 + option(value="86") 2008年 + option(value="87") 2009年 + option(value="88") 2010年 + option(value="89") 2011年 + option(value="90") 2012年 + option(value="91") 2013年 + option(value="92") 2014年 + option(value="93") 2015年 + option(value="94") 2016年 + option(value="95") 2017年 + span.mail-after-attachment 後見出し + #GroupMessageSex.cc-form-fieldset + fieldset + legend.cc-form-fieldset-heading + span 性別 + span.optional 任意 + .cc-form-fieldset-attention + .mail-attention 注意書き + .cc-form-fieldset-body + #FieldMessageSex.mail-field(data-type="radio") + span.mail-before-attachment 前見出し + input#MailMessageSex_(type="hidden" name="data[MailMessage][sex]" value) + .mail-group-radio + span + input#MailMessageSex1(type="radio" name="data[MailMessage][sex]" value="1") + label(for="MailMessageSex1") 男性 + span + input#MailMessageSex2(type="radio" name="data[MailMessage][sex]" value="2") + label(for="MailMessageSex2") 女性 + span.mail-after-attachment 後見出し + #GroupMessageMessage.cc-form-fieldset + div + .cc-form-fieldset-heading + label(for="MailMessageMessage") テキストエリア + span.optional 任意 + .cc-form-fieldset-attention + .mail-attention 注意書き + .cc-form-fieldset-body + #FieldMessageMessage.mail-field(data-type="textarea") + span.mail-before-attachment 前見出し + // CMS要件: サイズ指定がないときは cols属性を出力しない + span.mail-input + textarea#MailMessageMessage(name="data[MailMessage][message]" rows="10") + span.mail-after-attachment 後見出し + #GroupMessageMessage2.cc-form-fieldset + div + .cc-form-fieldset-heading + label(for="MailMessageMessage2") テキストエリア + span.optional 任意 + .cc-form-fieldset-attention + .mail-attention 注意書き + .cc-form-fieldset-body + #FieldMessageMessage2.mail-field(data-type="textarea") + span.mail-before-attachment 前見出し + span.mail-input + textarea#MailMessageMessage2( + name="data[MailMessage][message2]" + rows="10" + cols="20") + span.mail-after-attachment 後見出し + #GroupMessageFile.cc-form-fieldset + div + .cc-form-fieldset-heading + label(for="MailMessageFile") ファイル添付 + span.optional 任意 + .cc-form-fieldset-attention + .mail-attention 注意書き + .cc-form-fieldset-body + #FieldMessageFile.mail-field(data-type="file") + span.mail-before-attachment 前見出し + span.mail-input + input#MailMessageFile(name="data[MailMessage][File]" type="file") + span.mail-after-attachment 後見出し .cc-form-agreement p | 送信前に diff --git a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm.pug b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm.pug index 7b4fc6fd..db406ed3 100644 --- a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm.pug +++ b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm.pug @@ -1,7 +1,3 @@ -include /component/form/c-form-fieldset.pug -include /component/form/c-form-field.pug -include /component/form/c-form-input-confirm.pug - .c-content-main .cc-form-description p 以下の内容を送信します。 @@ -16,62 +12,178 @@ include /component/form/c-form-input-confirm.pug input#Token__TOKEN__(type="hidden" name="data[_Token][key]" value="__TOKEN__") input#MailMessageMode(type="hidden" name="data[MailMessage][mode]") .cc-form-field-list - +cFormFieldset({ heading: "フィールドグループ名", isRequired: true }) - +cFormField({ beforeAttachment: "前見出し", afterAttachment: "後見出し", isConfirm: true }) - +cFormInputConfirmText({ value: "__入力内容__" }) - +cFormField({ beforeAttachment: "", afterAttachment: "後見出し", isConfirm: true }) - +cFormInputConfirmText({ value: "__入力内容__" }) - +cFormFieldset({ heading: "単体フィールド名", isRequired: true }) - +cFormField({ beforeAttachment: "前見出し", afterAttachment: "後見出し", isConfirm: true }) - +cFormInputConfirmText({ value: "__入力内容__" }) - +cFormFieldset({ heading: "氏名", isRequired: true }) - +cFormField({ beforeAttachment: "姓", afterAttachment: "", isConfirm: true }) - +cFormInputConfirmText({ value: "__入力内容__" }) - +cFormField({ beforeAttachment: "名", afterAttachment: "", isConfirm: true }) - +cFormInputConfirmText({ value: "__入力内容__" }) - +cFormFieldset({ heading: "フリガナ", isRequired: false }) - +cFormField({ beforeAttachment: "セイ", afterAttachment: "", isConfirm: true }) - +cFormInputConfirmText({ value: "__入力内容__" }) - +cFormField({ beforeAttachment: "メイ", afterAttachment: "", isConfirm: true }) - +cFormInputConfirmText({ value: "__入力内容__" }) - +cFormFieldset({ heading: "住所", isRequired: false }) - +cFormField({ beforeAttachment: "〒", afterAttachment: "", isConfirm: true }) - +cFormInputConfirmText({ value: "__入力内容__" }) - +cFormField({ type: "select", beforeAttachment: "都道府県", afterAttachment: "", isConfirm: true }) - +cFormInputConfirmText({ value: "__入力内容__" }) - +cFormField({ beforeAttachment: "市区町村", afterAttachment: "", isConfirm: true }) - +cFormInputConfirmText({ value: "__入力内容__" }) - +cFormField({ beforeAttachment: "番地", afterAttachment: "", isConfirm: true }) - +cFormInputConfirmText({ value: "__入力内容__" }) - +cFormFieldset({ heading: "チェックボックス単体", isRequired: true }) - +cFormField({ type: "checkbox", beforeAttachment: "チェックボックス前見出し", isConfirm: true }) - +cFormInputConfirmMulti({ value: ["__選択項目1__", "__選択項目2__"] }) - +cFormFieldset({ heading: "チェックボックス", isRequired: true }) - +cFormField({ type: "checkbox", isConfirm: true }) - +cFormInputConfirmMulti({ value: ["__選択項目1__", "__選択項目2__"] }) - +cFormField({ beforeAttachment: "その他", afterAttachment: "", isConfirm: true }) - +cFormInputConfirmText({ value: "__入力内容__" }) - +cFormFieldset({ heading: "電話番号", isRequired: false }) - +cFormField({ beforeAttachment: "", afterAttachment: "", isConfirm: true }) - +cFormInputConfirmText({ value: "__入力内容__" }) - +cFormFieldset({ heading: "メールアドレス", isRequired: true }) - +cFormField({ beforeAttachment: "", afterAttachment: "", isConfirm: true }) - +cFormInputConfirmText({ value: "__入力内容__" }) - +cFormFieldset({ heading: "生まれ年", isRequired: true }) - +cFormField({ type: "select", beforeAttachment: "", afterAttachment: "", isConfirm: true }) - +cFormInputConfirmText({ value: "__入力内容__" }) - +cFormFieldset({ heading: "性別", isRequired: false }) - +cFormField({ type: "radio", beforeAttachment: "", afterAttachment: "", value: "__選択項目__", isConfirm: true }) - +cFormInputConfirmText({ value: "__選択項目__" }) - +cFormFieldset({ heading: "テキストエリア", isRequired: false, attention: "注意書き" }) - +cFormField({ type: "textarea", beforeAttachment: "", afterAttachment: "", isConfirm: true }) - +cFormInputConfirmTextarea({ value: "__入力内容__" }) - +cFormFieldset({ heading: "テキストエリア", isRequired: false }) - +cFormField({ type: "textarea", beforeAttachment: "前見出し", afterAttachment: "後見出し", isConfirm: true }) - +cFormInputConfirmTextarea({ value: "__入力内容__" }) - +cFormFieldset({ heading: "ファイル添付", isRequired: false }) - +cFormField({ type: "file", beforeAttachment: "前見出し", afterAttachment: "後見出し", value: "__ファイル名__", isConfirm: true }) - +cFormInputConfirmText({ value: "__ファイル名__" }) + .cc-form-fieldset + div + .cc-form-fieldset-heading + span フィールドグループ名 + span.required 必須 + .cc-form-fieldset-body + .mail-field(data-type="text") + span.mail-before-attachment 前見出し + span.mail-input __入力内容__ + span.mail-after-attachment 後見出し + .mail-field(data-type="text") + span.mail-before-attachment + span.mail-input __入力内容__ + span.mail-after-attachment 後見出し + .cc-form-fieldset + div + .cc-form-fieldset-heading + span 単体フィールド名 + span.required 必須 + .cc-form-fieldset-body + .mail-field(data-type="text") + span.mail-before-attachment 前見出し + span.mail-input __入力内容__ + span.mail-after-attachment 後見出し + .cc-form-fieldset + div + .cc-form-fieldset-heading + span 氏名 + span.required 必須 + .cc-form-fieldset-body + .mail-field(data-type="text") + span.mail-before-attachment 姓 + span.mail-input __入力内容__ + span.mail-after-attachment + .mail-field(data-type="text") + span.mail-before-attachment 名 + span.mail-input __入力内容__ + span.mail-after-attachment + .cc-form-fieldset + div + .cc-form-fieldset-heading + span フリガナ + span.optional 任意 + .cc-form-fieldset-body + .mail-field(data-type="text") + span.mail-before-attachment セイ + span.mail-input __入力内容__ + span.mail-after-attachment + .mail-field(data-type="text") + span.mail-before-attachment メイ + span.mail-input __入力内容__ + span.mail-after-attachment + .cc-form-fieldset + div + .cc-form-fieldset-heading + span 住所 + span.optional 任意 + .cc-form-fieldset-body + .mail-field(data-type="text") + span.mail-before-attachment 〒 + span.mail-input __入力内容__ + span.mail-after-attachment + .mail-field(data-type="select") + span.mail-before-attachment 都道府県 + span.mail-input __入力内容__ + span.mail-after-attachment + .mail-field(data-type="text") + span.mail-before-attachment 市区町村 + span.mail-input __入力内容__ + span.mail-after-attachment + .mail-field(data-type="text") + span.mail-before-attachment 番地 + span.mail-input __入力内容__ + span.mail-after-attachment + .cc-form-fieldset + div + .cc-form-fieldset-heading + span チェックボックス単体 + span.required 必須 + .cc-form-fieldset-body + .mail-field(data-type="checkbox") + span.mail-before-attachment チェックボックス前見出し + div + ul + li __選択項目1__ + li __選択項目2__ + .cc-form-fieldset + div + .cc-form-fieldset-heading + span チェックボックス + span.required 必須 + .cc-form-fieldset-body + .mail-field(data-type="checkbox") + div + ul + li __選択項目1__ + li __選択項目2__ + .mail-field(data-type="text") + span.mail-before-attachment その他 + span.mail-input __入力内容__ + span.mail-after-attachment + .cc-form-fieldset + div + .cc-form-fieldset-heading + span 電話番号 + .cc-form-fieldset-body + .mail-field(data-type="text") + span.mail-before-attachment + span.mail-input __入力内容__ + span.mail-after-attachment + .cc-form-fieldset + div + .cc-form-fieldset-heading + span メールアドレス + span.required 必須 + .cc-form-fieldset-body + .mail-field(data-type="text") + span.mail-before-attachment + span.mail-input __入力内容__ + span.mail-after-attachment + .cc-form-fieldset + div + .cc-form-fieldset-heading + span 生まれ年 + span.required 必須 + .cc-form-fieldset-body + .mail-field(data-type="select") + span.mail-before-attachment + span.mail-input __入力内容__ + span.mail-after-attachment + .cc-form-fieldset + div + .cc-form-fieldset-heading + span 性別 + span.optional 任意 + .cc-form-fieldset-body + .mail-field(data-type="radio") + span.mail-before-attachment + .mail-radio + span.mail-input __選択項目__ + .cc-form-fieldset + div + .cc-form-fieldset-heading + span テキストエリア + span.optional 任意 + .cc-form-fieldset-attention + .mail-attention 注意書き + .cc-form-fieldset-body + .mail-field(data-type="textarea") + span.mail-before-attachment + p.mail-input __入力内容__ + span.mail-after-attachment + .cc-form-fieldset + div + .cc-form-fieldset-heading + span テキストエリア + span.optional 任意 + .cc-form-fieldset-body + .mail-field(data-type="textarea") + span.mail-before-attachment 前見出し + p.mail-input __入力内容__ + span.mail-after-attachment 後見出し + .cc-form-fieldset + div + .cc-form-fieldset-heading + span ファイル添付 + span.optional 任意 + .cc-form-fieldset-body + .mail-field(data-type="file") + span.mail-before-attachment 前見出し + span.mail-input __ファイル名__ + span.mail-after-attachment 後見出し .cc-form-submit button(type="submit"): span 入力画面に戻る button(type="submit"): span 送信する From 5069898e9a318c8d6f1148025923bcaf85a2c12a Mon Sep 17 00:00:00 2001 From: Yusaku Sato Date: Tue, 21 Jul 2026 19:26:02 +0900 Subject: [PATCH 8/8] feat(scaffold): add v2 mail form templates with new design Add 300_form_input_v2.pug and 301_form_confirm_v2.pug using the new c-form-fieldset/c-form-field/c-form-input component set, kept as separate templates alongside the originals. List them in the template index. --- .../htdocs/__tmpl/300_form_input_v2.json | 4 + .../htdocs/__tmpl/300_form_input_v2.pug | 114 ++++++++++++++++++ .../htdocs/__tmpl/301_form_confirm_v2.json | 4 + .../htdocs/__tmpl/301_form_confirm_v2.pug | 77 ++++++++++++ .../scaffold/__assets/htdocs/__tmpl/index.pug | 2 + 5 files changed, 201 insertions(+) create mode 100644 packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input_v2.json create mode 100644 packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input_v2.pug create mode 100644 packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm_v2.json create mode 100644 packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm_v2.pug diff --git a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input_v2.json b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input_v2.json new file mode 100644 index 00000000..a4350d35 --- /dev/null +++ b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input_v2.json @@ -0,0 +1,4 @@ +{ + "layout": "sub.pug", + "title": "メールフォーム入力ページ（新デザイン）" +} diff --git a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input_v2.pug b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input_v2.pug new file mode 100644 index 00000000..2e054049 --- /dev/null +++ b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input_v2.pug @@ -0,0 +1,114 @@ +include /component/form/c-form-fieldset.pug +include /component/form/c-form-field.pug +include /component/form/c-form-input.pug + +.c-content-main + // CMS要件: メールフォーム概要 + .cc-form-description + p こちらのフォームよりご応募ください。記入いただいた内容を検討の上、弊社人事担当者よりメールにてご返信いたします。 + // CMS要件: メールフォーム概要ここまで + + form#MailMessageIndexForm.cc-form( + action="__PATH_TO__" + enctype="multipart/form-data" + method="post" + accept-charset="utf-8" + novalidate) + input(type="hidden" name="_method" value="POST") + input#Token__TOKEN__(type="hidden" name="data[_Token][key]" value="__TOKEN__") + input#MailMessageMode(type="hidden" name="data[MailMessage][mode]") + .cc-form-field-list + +cFormFieldset({ key: "field1", heading: "フィールドグループ名", isRequired: true, attention: "注意書き" }) + +cFormField({ type: "text", name: "field1", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: true }) + +cFormInputText({ name: "field1", maxlength: 255, isRequired: true }) + +cFormField({ type: "text", name: "field2", beforeAttachment: "", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: true }) + +cFormInputText({ name: "field2", maxlength: 255, isRequired: true }) + +cFormFieldset({ heading: "単体フィールド名", name: "field3", isRequired: true, attention: "注意書き" }) + +cFormField({ type: "text", name: "field3", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: false }) + +cFormInputText({ name: "field3", maxlength: 255, isRequired: true }) + +cFormFieldset({ key: "name", heading: "氏名", isRequired: true }) + +cFormField({ type: "text", name: "lastName", beforeAttachment: "姓", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) + +cFormInputText({ name: "lastName", isRequired: true }) + +cFormField({ type: "text", name: "firstName", beforeAttachment: "名", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) + +cFormInputText({ name: "firstName", isRequired: true }) + +cFormFieldset({ key: "nameKana1", heading: "フリガナ", isRequired: false, attention: "カタカナで入力してください" }) + +cFormField({ type: "text", name: "lastNameKana", beforeAttachment: "セイ", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) + +cFormInputText({ name: "lastNameKana", isRequired: true }) + +cFormField({ type: "text", name: "firstNameKana", beforeAttachment: "メイ", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) + +cFormInputText({ name: "firstNameKana", isRequired: true }) + +cFormFieldset({ key: "zip", heading: "住所", isRequired: false }) + +cFormField({ type: "text", name: "zip", beforeAttachment: "〒", afterAttachment: "", description: "ハイフンを除く半角数字で入力してください", errorMessage: "", isGrouped: true }) + +cFormInputText({ name: "zip", maxlength: 8, size: 10, isRequired: false }) + +cFormField({ type: "select", name: "address1", beforeAttachment: "都道府県", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) + +cFormInputSelect({ name: "address1", options: [{ value: "", label: "選択してください" }, ...data.prefectureOptions], isRequired: false }) + +cFormField({ type: "text", name: "address2", beforeAttachment: "市区町村", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) + +cFormInputText({ name: "address2", maxlength: 200, size: 30, isRequired: false }) + +cFormField({ type: "text", name: "address3", beforeAttachment: "番地", afterAttachment: "", description: "", errorMessage: "", isGrouped: true }) + +cFormInputText({ name: "address3", maxlength: 200, size: 30, isRequired: false }) + // CMS要件: グループ化していない場合でも チェックボックスでは fieldset/legend の構造 + +cFormFieldset({ key: "category", heading: "チェックボックス単体", isRequired: true }) + +cFormField({ type: "checkbox", name: "category", beforeAttachment: "チェックボックス前見出し", afterAttachment: "チェックボックス後見出し", description: "", errorMessage: "" }) + +cFormInputCheckbox({ + name: "category", + options: [ + { value: "Item1", label: "項目1" }, + { value: "Item2", label: "項目2" }, + { value: "Item3", label: "項目3" }, + ], +}) + +cFormFieldset({ key: "contents", heading: "チェックボックス", isRequired: true, attention: "注意書き" }) + +cFormField({ type: "checkbox", name: "contents", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "" }) + +cFormInputCheckbox({ + name: "contents", + options: [ + { value: "1", label: "生麦生米生卵" }, + { value: "2", label: "赤パジャマ黄パジャマ茶パジャマ" }, + { value: "3", label: "青巻紙赤巻紙黄巻紙" }, + { value: "4", label: "隣の客はよく柿食う客だ" }, + { value: "5", label: "かえるぴょこぴょこ3ぴょこぴょこ あわせてぴょこぴょこ6ぴょこぴょこ" }, + { value: "6", label: "東京特許許可局許可局長" }, + { value: "7", label: "その他" }, + ], +}) + +cFormField({ type: "text", name: "contentsOther", beforeAttachment: "その他", afterAttachment: "後見出し", description: "その他を選択された場合は内容をご入力ください。", errorMessage: "", isGrouped: true }) + +cFormInputText({ name: "contentsOther", maxlength: 255, size: 30, isRequired: false }) + +cFormFieldset({ heading: "電話番号", name: "tel", isRequired: false, attention: "注意書き" }) + +cFormField({ type: "text", name: "tel", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) + +cFormInputText({ name: "tel", maxlength: 13, size: 15, isRequired: false }) + +cFormFieldset({ heading: "メールアドレス", name: "email1", isRequired: true, attention: "注意書き" }) + +cFormField({ type: "text", name: "email1", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) + +cFormInputText({ name: "email1", maxlength: 255, size: 30, isRequired: false }) + +cFormFieldset({ heading: "生まれ年", name: "birth", isRequired: true, attention: "注意書き" }) + +cFormField({ type: "select", name: "birth", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) + +cFormInputSelect({ name: "birth", options: [{ value: "", label: "選択してください" }, ...data.birthYearOptions], isRequired: false }) + +cFormFieldset({ key: "sex", heading: "性別", isRequired: false, attention: "注意書き" }) + +cFormField({ type: "radio", name: "sex", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "" }) + +cFormInputRadio({ + name: "sex", + options: [ + { value: "1", label: "男性" }, + { value: "2", label: "女性" }, + ], + isRequired: false, +}) + +cFormFieldset({ heading: "テキストエリア", name: "message", isRequired: false, attention: "注意書き" }) + +cFormField({ type: "textarea", name: "message", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) + +cFormInputTextarea({ name: "message", rows: 10, cols: null, isRequired: false }) + +cFormFieldset({ heading: "テキストエリア", name: "message2", isRequired: false, attention: "注意書き" }) + +cFormField({ type: "textarea", name: "message2", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) + +cFormInputTextarea({ name: "message2", rows: 10, cols: 20, isRequired: false }) + +cFormFieldset({ heading: "ファイル添付", name: "file", isRequired: false, attention: "注意書き" }) + +cFormField({ type: "file", name: "file", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false }) + +cFormInputFile({ name: "file", isRequired: false }) + .cc-form-agreement + p + | 送信前に + a(href="__PATH_TO__") 個人情報保護方針 + | をご確認ください。 + .cc-form-submit + button#BtnMessageConfirm(type="submit"): span 送信内容を確認 + input#TokenFields__TOKEN(type="hidden" name="data[_Token][fields]" value="__TOKEN__") + input#TokenUnlocked__TOKEN( + type="hidden" + name="data[_Token][unlocked]" + value="__TOKEN__") diff --git a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm_v2.json b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm_v2.json new file mode 100644 index 00000000..dddd09c5 --- /dev/null +++ b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm_v2.json @@ -0,0 +1,4 @@ +{ + "layout": "sub.pug", + "title": "メールフォーム確認ページ（新デザイン）" +} diff --git a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm_v2.pug b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm_v2.pug new file mode 100644 index 00000000..7b4fc6fd --- /dev/null +++ b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm_v2.pug @@ -0,0 +1,77 @@ +include /component/form/c-form-fieldset.pug +include /component/form/c-form-field.pug +include /component/form/c-form-input-confirm.pug + +.c-content-main + .cc-form-description + p 以下の内容を送信します。 + + form#MailMessageIndexForm.cc-form( + action="__PATH_TO__" + enctype="multipart/form-data" + method="post" + accept-charset="utf-8" + novalidate) + input(type="hidden" name="_method" value="POST") + input#Token__TOKEN__(type="hidden" name="data[_Token][key]" value="__TOKEN__") + input#MailMessageMode(type="hidden" name="data[MailMessage][mode]") + .cc-form-field-list + +cFormFieldset({ heading: "フィールドグループ名", isRequired: true }) + +cFormField({ beforeAttachment: "前見出し", afterAttachment: "後見出し", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormField({ beforeAttachment: "", afterAttachment: "後見出し", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormFieldset({ heading: "単体フィールド名", isRequired: true }) + +cFormField({ beforeAttachment: "前見出し", afterAttachment: "後見出し", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormFieldset({ heading: "氏名", isRequired: true }) + +cFormField({ beforeAttachment: "姓", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormField({ beforeAttachment: "名", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormFieldset({ heading: "フリガナ", isRequired: false }) + +cFormField({ beforeAttachment: "セイ", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormField({ beforeAttachment: "メイ", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormFieldset({ heading: "住所", isRequired: false }) + +cFormField({ beforeAttachment: "〒", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormField({ type: "select", beforeAttachment: "都道府県", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormField({ beforeAttachment: "市区町村", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormField({ beforeAttachment: "番地", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormFieldset({ heading: "チェックボックス単体", isRequired: true }) + +cFormField({ type: "checkbox", beforeAttachment: "チェックボックス前見出し", isConfirm: true }) + +cFormInputConfirmMulti({ value: ["__選択項目1__", "__選択項目2__"] }) + +cFormFieldset({ heading: "チェックボックス", isRequired: true }) + +cFormField({ type: "checkbox", isConfirm: true }) + +cFormInputConfirmMulti({ value: ["__選択項目1__", "__選択項目2__"] }) + +cFormField({ beforeAttachment: "その他", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormFieldset({ heading: "電話番号", isRequired: false }) + +cFormField({ beforeAttachment: "", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormFieldset({ heading: "メールアドレス", isRequired: true }) + +cFormField({ beforeAttachment: "", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormFieldset({ heading: "生まれ年", isRequired: true }) + +cFormField({ type: "select", beforeAttachment: "", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmText({ value: "__入力内容__" }) + +cFormFieldset({ heading: "性別", isRequired: false }) + +cFormField({ type: "radio", beforeAttachment: "", afterAttachment: "", value: "__選択項目__", isConfirm: true }) + +cFormInputConfirmText({ value: "__選択項目__" }) + +cFormFieldset({ heading: "テキストエリア", isRequired: false, attention: "注意書き" }) + +cFormField({ type: "textarea", beforeAttachment: "", afterAttachment: "", isConfirm: true }) + +cFormInputConfirmTextarea({ value: "__入力内容__" }) + +cFormFieldset({ heading: "テキストエリア", isRequired: false }) + +cFormField({ type: "textarea", beforeAttachment: "前見出し", afterAttachment: "後見出し", isConfirm: true }) + +cFormInputConfirmTextarea({ value: "__入力内容__" }) + +cFormFieldset({ heading: "ファイル添付", isRequired: false }) + +cFormField({ type: "file", beforeAttachment: "前見出し", afterAttachment: "後見出し", value: "__ファイル名__", isConfirm: true }) + +cFormInputConfirmText({ value: "__ファイル名__" }) + .cc-form-submit + button(type="submit"): span 入力画面に戻る + button(type="submit"): span 送信する diff --git a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/index.pug b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/index.pug index bd69d904..64ab307b 100644 --- a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/index.pug +++ b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/index.pug @@ -57,6 +57,8 @@ html(lang="ja") .list-group-item: a(href="300_form_input.html") メールフォーム入力ページ .list-group-item: a(href="301_form_confirm.html") メールフォーム確認ページ .list-group-item: a(href="302_form_complete.html") メールフォーム完了ページ + .list-group-item: a(href="300_form_input_v2.html") メールフォーム入力ページ（新デザイン） + .list-group-item: a(href="301_form_confirm_v2.html") メールフォーム確認ページ（新デザイン） // その他は400番台 .list-group.mt-5