* form: add form-grid style.

easysoft · Jan 2, 2024 · c54e03b · c54e03b
1 parent ccf66ba
commit c54e03b
Show file tree

Hide file tree

Showing 6 changed files with 175 additions and 41 deletions.
diff --git a/lib/form/README.md b/lib/form/README.md
@@ -29,8 +29,118 @@
 
 ## `.form-grid`
 
+```html:example: surface
+<form class="form form-grid canvas" style="max-width: 800px">
+  <div class="form-group w-1/2">
+    <label class="form-label" for="program">所属项目集 <i class="icon icon-question-sign muted"></i></label>
+    <select class="form-control" id="program">
+      <option>ZUI</option>
+      <option>禅道</option>
+    </select>
+    <div class="form-tip">为 <code>.form-group</code> 添加 <code>w-*</code> 辅助类来设置宽度</div>
+  </div>
+  <div class="form-group w-1/2">
+    <div class="form-label">项目类型</div>
+    <div class="check-list-inline">
+      <label class="radio">
+        <input type="radio" name="type" checked> 产品型
+      </label>
+      <label class="radio">
+        <input type="radio" name="type"> 项目型
+      </label>
+    </div>
+  </div>
+  <div class="form-group w-1/2">
+    <label class="form-label required" for="name">
+      项目名称
+      <label class="checkbox">
+        <input type="checkbox" name="iteration" checked> 启用迭代
+      </label>
+    </label>
+    <input type="text" class="form-control" id="name">
+  </div>
+  <div class="form-group w-1/2">
+    <label class="form-label" for="manager">
+      负责人
+    </label>
+    <select class="form-control" id="manager">
+      <option value=""></option>
+      <option value="cat">小猫</option>
+      <option value="fish">金鱼</option>
+      <option value="dragon">龙</option>
+      <option value="mammoth">猛犸</option>
+    </select>
+  </div>
+  <div class="form-group w-1/2">
+    <label class="form-label required" for="start">
+      计划日期
+    </label>
+    <div class="center-row">
+      <input type="date" class="form-control" id="start" placeholder="选择日期" />
+      <span class="px-2">-</span>
+      <input type="date" class="form-control" placeholder="选择日期" />
+    </div>
+  </div>
+  <div class="form-grid-wrap"></div>
+  <div class="form-group w-1/2">
+    <label class="form-label required" for="days">
+      可用工作日（单位：天）
+    </label>
+    <input type="text" class="form-control" id="days">
+  </div>
+  <div class="form-grid-row pb-0">
+    <div class="form-grid-col w-1/2">
+      <div class="form-label">
+        关联产品
+        <label class="checkbox disabled">
+          <input type="checkbox" name="newProduct" disabled checked> 新产品
+        </label>
+      </div>
+    </div>
+    <div class="form-grid-col w-1/2">
+      <div class="form-label">
+        关联计划
+      </div>
+    </div>
+  </div>
+  <div class="form-grid-row pt-0">
+    <div class="form-grid-col w-1/2">
+      <select class="form-control" id="product">
+        <option value=""></option>
+        <option value="cat">小猫</option>
+        <option value="fish">金鱼</option>
+        <option value="dragon">龙</option>
+        <option value="mammoth">猛犸</option>
+      </select>
+    </div>
+    <div class="form-grid-col w-1/2">
+      <select class="form-control" id="plan">
+        <option value=""></option>
+        <option value="cat">小猫</option>
+        <option value="fish">金鱼</option>
+        <option value="dragon">龙</option>
+        <option value="mammoth">猛犸</option>
+      </select>
+    </div>
+    <div class="absolute" style="right: -32px">
+      <button type="button" class="btn ghost square"><i class="icon icon-plus"></i></button>
+    </div>
+  </div>
+  <div class="form-group w-full">
+    <label class="form-label required" for="days">
+      项目描述
+    </label>
+    <textarea rows="5" class="form-control" placeholder="输入一些文本">
+Hello, world!
+</textarea>
+  </div>
+</form>
+```
+
+## `.form-horz`
+
 ```html:example
-<form class="form form-grid" style="max-width: 1000px">
+<form class="form form-horz" style="max-width: 1000px">
   <div class="form-row">
     <div class="w-1/2 form-group">
       <label class="form-label" for="smallInput">小型框</label>
@@ -299,7 +409,7 @@
 ```
 
 ```html:example
-<form class="form form-grid">
+<form class="form form-horz">
   <fieldset>
     <legend>
       <div class="form-title">账号信息</div>

diff --git a/lib/form/src/style/form-grid.css b/lib/form/src/style/form-grid.css
@@ -1,45 +1,29 @@
 .form-grid {
-  @apply -space-y-4;
+  --form-grid-gap-x-half: calc(var(--form-grid-gap-x) / 2);
+  --form-grid-gap-y-half: calc(var(--form-grid-gap-y) / 2);
+  @apply -flex-row -flex-wrap -items-start -gap-0;
 }
-
-.form-row {
-  @apply -flex -flex-row -items-start;
-}
-
 .form-grid .form-group {
-  @apply -flex -flex-row -items-start -relative -flex-auto -min-h-[32px] -flex-wrap -pl-[--form-grid-label-width] -min-w-0;
-}
-.form-grid .form-group > * {
-  @apply -min-w-0;
-}
-.form-grid .form-group.no-label {
-  @apply -pl-0;
-}
-.form-grid .form-group.no-label > .check-list-inline {
-  @apply -px-4;
-}
-.form-grid .form-label {
-  @apply -absolute -left-0 -top-0 -pr-2 -pl-4 -justify-end -w-[--form-grid-label-width];
+  @apply -px-[--form-grid-gap-x-half] -py-[--form-grid-gap-y-half];
 }
 .form-grid .form-label.required::after {
-  @apply -order-first -ml-0 -mr-1;
+  @apply -order-first -ml-0;
+}
+.form-grid .form-label .checkbox {
+  @apply -mx-3;
 }
 
-.form-grid .form-tip {
-  @apply -w-full;
+.form-grid .has-wrap-after::after {
+  @apply -content-[''] -block -w-full;
 }
 
-.form-grid .input-group,
-.form-grid .input-control,
-.form-grid .form-tip {
-  @apply -flex-auto;
+.form-grid-wrap {
+  @apply -w-full;
 }
 
-.form .form-group-wrapper,
-.form-grid .form-group-wrapper {
-  @apply -w-full -flex-auto -z-[1] -min-w-0;
+.form-grid-row {
+  @apply -w-full -flex -flex-row -py-[--form-grid-gap-y-half] -relative;
 }
-.form .form-group-wrapper.flex-none,
-.form-grid .form-group-wrapper.flex-none {
-  @apply -flex-none;
+.form-grid-col {
+  @apply -px-[--form-grid-gap-x-half];
 }
diff --git a/lib/form/src/style/form-horz.css b/lib/form/src/style/form-horz.css
@@ -0,0 +1,41 @@
+.form-horz .form-row {
+  @apply -flex -flex-row -items-start;
+}
+
+.form-horz .form-group {
+  @apply -flex -flex-row -items-start -relative -flex-auto -min-h-[32px] -flex-wrap -pl-[--form-horz-label-width] -min-w-0;
+}
+.form-horz .form-group > * {
+  @apply -min-w-0;
+}
+.form-horz .form-group.no-label {
+  @apply -pl-0;
+}
+.form-horz .form-group.no-label > .check-list-inline {
+  @apply -px-4;
+}
+.form-horz .form-label {
+  @apply -absolute -left-0 -top-0 -pr-2 -pl-4 -justify-end -w-[--form-horz-label-width];
+}
+.form-horz .form-label.required::after {
+  @apply -order-first -ml-0 -mr-1;
+}
+
+.form-horz .form-tip {
+  @apply -w-full;
+}
+
+.form-horz .input-group,
+.form-horz .input-control,
+.form-horz .form-tip {
+  @apply -flex-auto;
+}
+
+.form .form-group-wrapper,
+.form-horz .form-group-wrapper {
+  @apply -w-full -flex-auto -z-[1] -min-w-0;
+}
+.form .form-group-wrapper.flex-none,
+.form-horz .form-group-wrapper.flex-none {
+  @apply -flex-none;
+}
diff --git a/lib/form/src/style/form.css b/lib/form/src/style/form.css
@@ -1,9 +1,9 @@
 .form {
-  @apply -space-y-2;
+  @apply -flex -flex-col -gap-4;
 }
 
 .form-label {
-  @apply -relative -h-8 -flex -flex-row -items-center -truncate;
+  @apply -relative -h-8 -flex -flex-row -items-center -truncate -gap-1;
   color: var(--form-label-color);
 }
 .form-label.required::after {
@@ -22,7 +22,3 @@
 .form-actions {
   @apply -flex -flex-row -gap-4 -justify-center;
 }
-
-.form > *:not([hidden]) ~ .form-actions:not([hidden]) {
-  @apply -mt-4;
-}
diff --git a/lib/form/src/style/index.css b/lib/form/src/style/index.css
@@ -1,4 +1,5 @@
 @import './vars.css';
 @import './form.css';
 @import './form-grid.css';
+@import './form-horz.css';
 @import './fieldset.css';
diff --git a/lib/form/src/style/vars.css b/lib/form/src/style/vars.css
@@ -1,5 +1,7 @@
 :root {
   --form-tip-color:        var(--color-gray-600);
   --form-label-color:      var(--color-gray-700);
-  --form-grid-label-width: 6rem;
+  --form-horz-label-width: 6rem;
+  --form-grid-gap-x:        1.25rem;
+  --form-grid-gap-y:       .75rem;
 }