Merge branch 'release/v0.11.2'

holtwick · Mar 9, 2024 · 86d79aa · 86d79aa
2 parents abb087f + 1973f51
commit 86d79aa
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 90 deletions.
diff --git a/lib/modal/use-dialog.ts b/lib/modal/use-dialog.ts
@@ -3,10 +3,8 @@ import { useDispose } from 'zeed'
 import { mountComponentAsApp } from '../basic/app-helper'
 import OuiDialog from './oui-dialog.vue'
 
-// const log = Logger('ui:dialog', globalThis.debugUI ?? false)
-
 /** Environment for JS dialog replacements */
-export function useDialog(component: Component = OuiDialog) {
+export function useDialog<T = Component>(component: T = OuiDialog) {
   let cancel: any
 
   async function showDialog<T>(props: any) {

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "oui-kit",
   "type": "module",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "author": {
     "name": "Dirk Holtwick",
     "email": "[email protected]",

diff --git a/src/app-form.styl b/src/app-form.styl
@@ -14,5 +14,5 @@ oui-preset-layout();
 }
 
 .oui-form {
-  oui-form-all();
+  oui-form-defaults();
 }
diff --git a/stylus/preset/form.styl b/stylus/preset/form.styl
@@ -1,4 +1,4 @@
-oui-form-all() {
+oui-form-defaults() {
   input[type=text], textarea {
     oui-input-text();
   }
@@ -30,6 +30,33 @@ oui-form-all() {
   select {
     oui-select();
   }
+
+  label {
+    display: block;
+  }
+
+  label:has(input:not([type=checkbox]):not([type=radio])), label:has(select), label:has(textarea) {
+    input, select, textarea {
+      display: block !important;
+      margin-top: 4 !important;
+      max-width: 100%;
+    }
+
+    input, textarea {
+      width: 100%;
+      min-width: 100%;
+    }
+  }
+
+  form {
+    use: stack-y;
+    gap: 16;
+
+    section {
+      use: stack-x;
+      gap: 6;
+    }
+  }
 }
 
 oui-form() {

diff --git a/stylus/story.styl b/stylus/story.styl
@@ -16,4 +16,5 @@ html {
   scroll-behavior: smooth;
 }
 
-oui-layout();
+oui-layout();
+oui-form-defaults();
diff --git a/stylus/ui/form.story.styl b/stylus/ui/form.story.styl
diff --git a/stylus/ui/form.story.vue b/stylus/ui/form.story.vue
@@ -1,47 +1,67 @@
 <script lang="ts" setup>
 import { OuiClose } from '@/lib'
-
-import './form.story.styl'
 </script>
 
 <template>
   <Story auto-props-disabled>
     <Variant title="Form">
       <template #default>
-        <div class="_form oui-form">
+        <form>
           <h1>Form</h1>
-          <div class="_form_section">
+
+          <div>
             Inner
             <input type="text" value="Lorem ipsum semper habeo duo, ut vis. Aliquyam eu splendide. Ut mei eteu nec antiopam corpora. Kasd pretium cetero qui arcu. Assentior ei his usu invidunt kasd justo justo. Semper Ne eleifend Per ut Eam graeci tincidunt. Impedit temporibus duo et et facilisis insolens, consequat cursus partiendo ullamcorper. Vulputate facilisi Donec Aliquam labore inimicus voluptua. Penatibus sea Vel amet. His ius audire In mea Repudiandae nullam sed assentior. Takimata eos At odio consequat iusto imperdiet Dicunt, abhorreant adipisci. Officiis rhoncus leo dicta vitae, clita elementum mauris definiebas. Consetetur te inimicus nec mus. Lorem Usu Duo Aenean corrumpit aliquyam est eum.">
           </div>
-          <div class="_form_section _stack_x">
+
+          <section>
             <input type="text">
             <button>Hello</button>
-          </div>
-          <div class="_form_section _stack_y">
-            <label class="field">
-              Label No. 1
-              <input type="text" placeholder="This is a placeholder">
-            </label>
-            <label class="field">
-              Label No. 2
-              <select />
-            </label>
-          </div>
-          <div class="_form_section">
+          </section>
+
+          <label>
+            Label No. 1
+            <input type="text" placeholder="This is a placeholder">
+          </label>
+
+          <label>
+            Label No. 2
+            <select>
+              <option value="de">
+                Germany
+              </option>
+              <option value="at">
+                Austria
+              </option>
+              <option value="ch">
+                Switzerland
+              </option>
+            </select>
+          </label>
+
+          <label>
+            Label No. 3
+            <textarea>ABC</textarea>
+          </label>
+
+          <div>
             <input type="number" min="0" max="120">
           </div>
-          <div class="_form_section _stack_x">
+
+          <section>
             <textarea class="_textarea_grow">Lorem ipsum semper habeo</textarea>
             <input type="text" value="Lorem ipsum semper habeo">
-          </div>
-          <div class="_form_section">
+          </section>
+
+          <div>
             <textarea>Lorem ipsum semper habeo duo, ut vis. Aliquyam eu splendide. Ut mei eteu nec antiopam corpora. Kasd pretium cetero qui arcu. Assentior ei his usu invidunt kasd justo justo. Semper Ne eleifend Per ut Eam graeci tincidunt. Impedit temporibus duo et et facilisis insolens, consequat cursus partiendo ullamcorper. Vulputate facilisi Donec Aliquam labore inimicus voluptua. Penatibus sea Vel amet. His ius audire In mea Repudiandae nullam sed assentior. Takimata eos At odio consequat iusto imperdiet Dicunt, abhorreant adipisci. Officiis rhoncus leo dicta vitae, clita elementum mauris definiebas. Consetetur te inimicus nec mus. Lorem Usu Duo Aenean corrumpit aliquyam est eum.</textarea>
           </div>
-          <div class="_form_section">
+
+          <div>
             <input type="text">
           </div>
-          <div class="_form_section">
+
+          <div>
             <select>
               <option value="de">
                 Germany
@@ -54,65 +74,72 @@ import './form.story.styl'
               </option>
             </select>
           </div>
-          <div class="_form_section">
+
+          <div>
             <label>
               <input type="checkbox" class="oui-checkbox">
               Not checked
             </label>
-          </div>
-          <div class="_form_section">
             <label>
               <input type="checkbox" class="oui-checkbox" checked>
               Checked
             </label>
           </div>
-          <div class="_form_section">
+
+          <div>
             <label>
               <input type="checkbox" class="oui-switch">
               Unhappy
             </label>
-          </div>
-          <div class="_form_section">
             <label>
               <input type="checkbox" class="oui-switch" checked>
               Happy
             </label>
           </div>
-          <div class="_form_section">
-            <div>
-              <label>
-                <input type="radio" value="1">
-                One
-              </label>
-            </div>
-            <div>
-              <label>
-                <input type="radio" value="2" checked>
-                Two
-              </label>
-            </div>
-            <div>
-              <label>
-                <input type="radio" value="3">
-                Three
-              </label>
-            </div>
+
+          <div>
+            <label>
+              <input type="radio" value="1">
+              One
+            </label>
+            <label>
+              <input type="radio" value="2" checked>
+              Two
+            </label>
+            <label>
+              <input type="radio" value="3">
+              Three
+            </label>
           </div>
 
-          <div class="_form_section _stack_x">
+          <section>
             <button disabled>
               Cancel
             </button>
             <button>OK</button>
             <button><OuiClose /> Smile</button>
             <button>Smile <OuiClose /></button>
-          </div>
-        </div>
+          </section>
+        </form>
       </template>
     </Variant>
   </story>
 </template>
 
 <docs lang="md">
-# Forms
+# oui-form
+
+Themed input elements.
+
+## oui-form-defaults()
+
+Sets all elements to themed by default. You can still limit the scope e.g. by doing so:
+
+```stylus
+.oui-form {
+  oui-form-defaults()
+}
+```
+
+Additionally `form` will create a spaced vertical stack and `section` will create a horizontal stack with spacing, useful for button groups.
 </docs>