Merge branch 'release/v0.17.2'

holtwick · Apr 26, 2024 · 4b10982 · 4b10982
2 parents ce3285d + d8c43e2
commit 4b10982
Show file tree

Hide file tree

Showing 11 changed files with 109 additions and 68 deletions.
diff --git a/lib/basic/index.ts b/lib/basic/index.ts
@@ -25,4 +25,5 @@ export { default as OuiTable } from './oui-table.vue'
 export { default as OuiTableview } from './oui-tableview.vue'
 export { default as OuiText } from './oui-text.vue'
 export { default as OuiTextarea } from './oui-textarea.vue'
+export { default as OuiWait } from './oui-wait.vue'
 export { default as OuiVirtualList } from './oui-virtual-list.vue'
diff --git a/lib/basic/oui-input.vue b/lib/basic/oui-input.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { uuid } from 'zeed'
 import OuiFormItem from './oui-form-item.vue'
 
 import './oui-form.styl'

diff --git a/lib/basic/oui-stars.vue b/lib/basic/oui-stars.vue
@@ -1,26 +1,32 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
+import OuiFormItem from './oui-form-item.vue'
+
 import './oui-stars.styl'
 
-// withDefaults(defineProps<{
-// }>(), {
-// })
+withDefaults(defineProps<{
+  title?: string
+  required?: boolean
+}>(), {
+})
 
 const model = defineModel({ required: true, default: 0 })
 
 const hover = ref(0)
 </script>
 
 <template>
-  <div class="oui-stars">
-    <template v-for="i in 5" :key="i">
-      <div :class="{ _active: model >= i, _hover: hover >= i }" @click="model = i" @mouseover="hover = i">
-        <slot name="icon">
-          <svg viewBox="0 0 512 512" fill="currentColor">
-            <path d="M394 480a16 16 0 01-9.39-3L256 383.76 127.39 477a16 16 0 01-24.55-18.08L153 310.35 23 221.2a16 16 0 019-29.2h160.38l48.4-148.95a16 16 0 0130.44 0l48.4 149H480a16 16 0 019.05 29.2L359 310.35l50.13 148.53A16 16 0 01394 480z" />
-          </svg>
-        </slot>
-      </div>
-    </template>
-  </div>
+  <OuiFormItem :title="title" :required="required">
+    <div class="oui-stars">
+      <template v-for="i in 5" :key="i">
+        <div :class="{ _active: model >= i, _hover: hover >= i }" @click="model = i" @mouseover="hover = i">
+          <slot name="icon">
+            <svg viewBox="0 0 512 512" fill="currentColor">
+              <path d="M394 480a16 16 0 01-9.39-3L256 383.76 127.39 477a16 16 0 01-24.55-18.08L153 310.35 23 221.2a16 16 0 019-29.2h160.38l48.4-148.95a16 16 0 0130.44 0l48.4 149H480a16 16 0 019.05 29.2L359 310.35l50.13 148.53A16 16 0 01394 480z" />
+            </svg>
+          </slot>
+        </div>
+      </template>
+    </div>
+  </OuiFormItem>
 </template>
diff --git a/lib/basic/oui-tableview.demo.vue b/lib/basic/oui-tableview.demo.vue
@@ -19,7 +19,7 @@ const columns: OuiTableColumn[] = [
   { title: '#', name: 'id', sortable: false },
   { title: 'One', name: 'one', sortable: true, width: 200 },
   { title: 'Two', name: 'two', sortable: true, footer: 'Two feet' },
-  { title: '', name: 'action', align: 'right' },
+  { title: 'Action', name: 'action', align: 'right' },
 ]
 
 const _data = createArray(1000, (index) => {

diff --git a/lib/basic/oui-tableview.styl b/lib/basic/oui-tableview.styl
@@ -5,7 +5,7 @@
   // display: block; // for responisve scrolling
   use: stack-y;
   width: 100%;
-  overflow-x: auto; // this does not work together with sticky headers
+  overflow: hidden;
   border-collapse: collapse;
   position: relative;
 
@@ -19,7 +19,8 @@
     &_row {
       display: grid;
       grid-template-columns: var(--tableview-columns);
-      width: 100%;
+      min-width: 100%;
+      width: max-content; // fixes backround scroll issues
     }
 
     &_cell {
@@ -92,6 +93,7 @@
     &_footer {
       ._tableview_row {
         border-top: 2px solid var(--s2-fg);
+        overflow: hidden;
       }
     }
   }

diff --git a/lib/basic/oui-tableview.vue b/lib/basic/oui-tableview.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup generic="K extends string, T extends Record<K, any>">
-import { computed, reactive, watch } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import { arraySetArrayInPlace, arraySum, parseOrderby } from 'zeed'
 import type { OuiTableColumn } from './_types'
 import OuiSeparator from './oui-separator.vue'
@@ -70,11 +70,24 @@ function doSelect(pos: number) {
   else
     modelSelected.value = pos
 }
+
+const marginLeft = ref(0)
+
+const headerElement = ref<HTMLElement>()
+const footerElement = ref<HTMLElement>()
+
+function scrollX(x: number) {
+  marginLeft.value = x
+  if (headerElement.value)
+    headerElement.value.style.marginLeft = px(-1 * x)
+  if (footerElement.value)
+    footerElement.value.style.marginLeft = px(-1 * x)
+}
 </script>
 
 <template>
   <div v-if="columns != null && data != null" class="oui-tableview" :style="tableStyle">
-    <div v-if="header" class="_tableview_header">
+    <div v-if="header" ref="headerElement" class="_tableview_header">
       <div class="_tableview_row">
         <template v-for="col, pos in columns" :key="col.name">
           <div
@@ -100,6 +113,7 @@ function doSelect(pos: number) {
       :data="data"
       :row-height="rowHeight"
       :scroll-to-end="scrollToEnd"
+      @scroll-x="scrollX"
     >
       <template #default="{ item, index }">
         <div
@@ -134,7 +148,7 @@ function doSelect(pos: number) {
         </div>
       </template>
     </OuiVirtualList>
-    <div v-if="footer" class="_tableview_footer">
+    <div v-if="footer" ref="footerElement" class="_tableview_footer">
       <div class="_tableview_row">
         <template v-for="col, pos in columns" :key="col.name">
           <div class="_tableview_cell" :align="col.align ?? 'left'" :valign="col.valign ?? 'top'">
@@ -153,8 +167,7 @@ function doSelect(pos: number) {
         :max-size="columns[i].maxWidth ?? 300"
         data-test="hello"
         :style="{
-          color: 'green',
-          left: px(arraySum(widths.slice(0, i + 1)) - 1),
+          left: px(arraySum(widths.slice(0, i + 1)) - 1 - marginLeft),
         }"
       />
     </template>

diff --git a/lib/basic/oui-virtual-list.vue b/lib/basic/oui-virtual-list.vue
@@ -19,6 +19,10 @@ const props = withDefaults(defineProps<{
   scrollToEnd: false,
 })
 
+const emit = defineEmits<{
+  scrollX: [number]
+}>()
+
 const { data, rowBuffer, rowHeight } = toRefs(props)
 const root = ref<HTMLElement>()
 const margin = /* props.margin ?? */ 0
@@ -63,6 +67,8 @@ function handleScroll() {
     indexFirst.value = range[0]
     indexLast.value = range[1]
     paddingTop.value = range[0] * rowHeight.value + margin
+
+    emit('scrollX', root.value.scrollLeft)
   })
 }
 

diff --git a/lib/basic/oui-wait.vue b/lib/basic/oui-wait.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="oui-wait" />
+</template>
+
+<style>
+/* https://css-loaders.com/spinner/ */
+.oui-wait {
+  height: 1rem;
+  width: 1rem;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  border: 2px solid var(--fg, black);
+  animation:
+    l20-1 0.8s infinite linear alternate,
+    l20-2 1.6s infinite linear;
+}
+@keyframes l20-1{
+   0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
+   12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
+   25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
+   50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
+   62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
+   75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
+   100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
+}
+@keyframes l20-2{
+  0%    {transform:scaleY(1)  rotate(0deg)}
+  49.99%{transform:scaleY(1)  rotate(135deg)}
+  50%   {transform:scaleY(-1) rotate(0deg)}
+  100%  {transform:scaleY(-1) rotate(-135deg)}
+}
+</style>
diff --git a/lib/modal/oui-dialog.demo.vue b/lib/modal/oui-dialog.demo.vue
@@ -26,6 +26,12 @@ const { open } = useDialog(OuiDialogExample)
     <OuiButton @click="open().then(v => state.value = v as any)">
       Custom
     </OuiButton>
+
+    <br>
+    <br>
+    <br>
+
+    <pre>result = {{ state.value }}</pre>
   </div>
   <OuiDemo :state="state" />
 </template>
diff --git a/lib/modal/oui-dialog.example.vue b/lib/modal/oui-dialog.example.vue
@@ -1,42 +1,51 @@
 <script lang="ts" setup>
-import { nextTick, ref } from 'vue'
-import { sleep } from 'zeed'
+import { nextTick, reactive, ref } from 'vue'
+import { cloneObject, sleep } from 'zeed'
 import OuiModal from './oui-modal.vue'
-import { OuiButton } from '@/lib'
+import { OuiButton, OuiInput, OuiSelect, OuiStars, OuiText, OuiWait } from '@/lib'
 
 const props = defineProps<{
   done?: any
 }>()
 
+const item = reactive({
+  name: '',
+  gender: '',
+  rating: 0,
+})
+
 const wait = ref(false)
 
 async function doConfirm() {
   wait.value = true
   await nextTick()
 
   // Do something like sending data
-  await sleep(2000)
+  await sleep(1000)
 
-  props.done?.(true)
+  props.done?.(cloneObject(item))
 }
 
 async function doCancel() {
-  props.done?.(false)
+  props.done?.(undefined)
 }
 </script>
 
 <template>
   <OuiModal title="Example Dialog Mode" @close="doCancel">
-    <div>
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt delectus illum tenetur sint atque unde, voluptates facere assumenda in repellendus! Cupiditate laborum recusandae facere dicta reiciendis odio enim dolorum illum!
-    </div>
+    <OuiText>
+      <b>Lorem ipsum</b>, dolor sit amet consectetur adipisicing elit. Deserunt delectus illum tenetur sint atque unde, voluptates facere assumenda in repellendus! Cupiditate laborum recusandae facere dicta reiciendis odio enim dolorum illum!
+      <OuiInput v-model="item.name" title="Your Name" required />
+      <OuiSelect v-model="item.gender" title="Your Gender" :options="['Female', 'Male', 'Other']" />
+      <OuiStars v-model="item.rating" title="Did you like Oui so far?" />
+    </OuiText>
     <template #footer>
       <div class="_stack_x _center">
         <div v-if="wait" class="_stack_x wait">
-          <div class="loader" />
+          <OuiWait />
           <div>
             &nbsp;
-            Please wait 2 seconds...
+            Please wait one second...
           </div>
         </div>
         <OuiButton v-else mode="danger">
@@ -53,36 +62,3 @@ async function doCancel() {
     </template>
   </OuiModal>
 </template>
-
-<style>
-/* https://css-loaders.com/spinner/ */
-.wait  {
-  opacity: 0.8;
-}
-
-.loader {
-  height: 1rem;
-  width: 1rem;
-  aspect-ratio: 1;
-  border-radius: 50%;
-  border: 2px solid var(--fg, black);
-  animation:
-    l20-1 0.8s infinite linear alternate,
-    l20-2 1.6s infinite linear;
-}
-@keyframes l20-1{
-   0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
-   12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
-   25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
-   50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
-   62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
-   75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
-   100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
-}
-@keyframes l20-2{
-  0%    {transform:scaleY(1)  rotate(0deg)}
-  49.99%{transform:scaleY(1)  rotate(135deg)}
-  50%   {transform:scaleY(-1) rotate(0deg)}
-  100%  {transform:scaleY(-1) rotate(-135deg)}
-}
-</style>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "oui-kit",
   "type": "module",
-  "version": "0.17.1",
+  "version": "0.17.2",
   "author": {
     "email": "[email protected]",
     "name": "Dirk Holtwick",