@veritree/ui 0.44.0 → 0.46.0

package/index.js

@@ -31,11 +31,14 @@ import VTInputIcon from './src/components/Form/VTInputIcon.vue';
 import VTInputPassword from './src/components/Form/VTInputPassword.vue';
 import VTListbox from './src/components/Listbox/VTListbox.vue';
 import VTListboxContent from './src/components/Listbox/VTListboxContent.vue';
+import VTListboxDivider from './src/components/Listbox/VTListboxDivider.vue';
+import VTListboxGroup from './src/components/Listbox/VTListboxGroup.vue';
 import VTListboxItem from './src/components/Listbox/VTListboxItem.vue';
 import VTListboxLabel from './src/components/Listbox/VTListboxLabel.vue';
 import VTListboxList from './src/components/Listbox/VTListboxList.vue';
 import VTListboxSearch from './src/components/Listbox/VTListboxSearch.vue';
 import VTListboxTrigger from './src/components/Listbox/VTListboxTrigger.vue';
+import VTListboxViewport from './src/components/Listbox/VTListboxViewport.vue';
 import VTListboxPlaceholder from './src/components/Listbox/VTListboxPlaceholder.vue';
 import VTSpinner from './src/components/Spinner/VTSpinner.vue';
 import VTInputDate from './src/components/Input/VTInputDate.vue';
@@ -104,12 +107,15 @@ export {
   VTLegend,
   VTListbox,
   VTListboxContent,
+  VTListboxDivider,
+  VTListboxGroup,
   VTListboxItem,
   VTListboxLabel,
   VTListboxList,
   VTListboxSearch,
   VTListboxTrigger,
   VTListboxPlaceholder,
+  VTListboxViewport,
   VTButton,
   VTInput,
   VTInputIcon,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.44.0",
+  "version": "0.46.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -22,6 +22,6 @@
   "devDependencies": {
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
-    "tailwindcss": "^3.2.4"
+    "tailwindcss": "^3.3.2"
   }
 }

package/src/components/Dialog/VTDialogContent.vue

@@ -14,7 +14,7 @@
       :class="
         headless
           ? 'dialog-content'
-          : `relative m-auto flex flex-col overflow-auto rounded bg-white p-4 focus:outline-none lg:p-6 ${classes}`
+          : `relative m-auto flex flex-col overflow-auto rounded bg-white px-4 focus:outline-none lg:px-6 ${classes}`
       "
       tabindex="-1"
       @keydown.esc.stop="onEsc"

package/src/components/Dialog/VTDialogFooter.vue

@@ -4,7 +4,7 @@
     :class="[
       headless
         ? 'dialog-footer'
-        : '-mx-4 -mb-4 flex items-center justify-between gap-x-3 p-4 md:-mx-6 md:-mb-6 md:p-6',
+        : '-mx-4 flex items-center justify-between gap-x-3 p-4 md:-mx-6 md:px-6 md:py-5',
     ]"
   >
     <slot></slot>

package/src/components/Dialog/VTDialogHeader.vue

@@ -5,7 +5,7 @@
     :class="[
       headless
         ? 'dialog-header'
-        : '-mx-4 -mt-4 flex items-center justify-between gap-x-3 p-4 md:-mx-6 md:-mt-6 md:p-6',
+        : '-mx-4 flex items-center justify-between gap-x-3 p-4 md:-mx-6 md:px-6 md:py-5',
     ]"
     @click.stop
   >

package/src/components/Dialog/VTDialogMain.vue

@@ -2,7 +2,11 @@
   <component
     :is="as"
     :id="id"
-    :class="[headless ? 'dialog-body' : 'h-full flex-1']"
+    :class="[
+      headless
+        ? 'dialog-body'
+        : '-mx-4 flex-1 overflow-y-auto p-4 md:-mx-6 md:px-6 md:py-5',
+    ]"
   >
     <slot></slot>
   </component>

package/src/components/Listbox/VTListboxDivider.vue

@@ -0,0 +1,21 @@
+<template>
+  <div
+    :class="{
+      'listbox-divider': headless,
+      'mx-3 my-0.5 h-[1px] bg-gray-200': !headless,
+    }"
+  ></div>
+</template>
+
+<script>
+export default {
+  name: 'VTListboxDivider',
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

package/src/components/Listbox/VTListboxGroup.vue

@@ -0,0 +1,9 @@
+<template>
+  <div role="group"><slot></slot></div>
+</template>
+
+<script>
+export default {
+  name: 'VTListboxGroup',
+};
+</script>

package/src/components/Listbox/VTListboxLabel.vue

@@ -2,7 +2,9 @@
   <component
     :is="as"
     :class="[
-      headless ? 'listbox-label' : 'mb-2 block text-xs font-normal uppercase',
+      headless
+        ? 'listbox-label'
+        : 'mb-0.5 block px-3 text-xs font-normal uppercase text-gray-600',
     ]"
   >
     <slot></slot>

package/src/components/Listbox/VTListboxList.vue

@@ -1,12 +1,5 @@
 <template>
-  <ul
-    :id="id"
-    :class="[
-      headless
-        ? 'listbox-list'
-        : '-mx-3 max-h-[160px] w-auto overflow-y-auto scroll-auto',
-    ]"
-  >
+  <ul :id="id" :class="[headless ? 'listbox-list' : null]">
     <slot></slot>
   </ul>
 </template>

package/src/components/Listbox/VTListboxViewport.vue

@@ -0,0 +1,33 @@
+<template>
+  <div
+    :id="id"
+    :class="[
+      headless
+        ? 'listbox-viewport'
+        : '-mx-3 max-h-[200px] w-auto overflow-y-auto scroll-auto',
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTListboxViewport',
+
+  inject: ['apiListbox'],
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    id() {
+      return `listbox-viewport-${this.apiListbox().id}`;
+    },
+  },
+};
+</script>