@veritree/ui 0.45.0 → 0.47.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/mixins/form-control.js

@@ -70,6 +70,12 @@ export const formControlStyleMixin = {
           : this.name === 'textarea'
           ? 'min-h-10' // limit it because input type number height can be different from other input types
           : 'h-10',
+        // disabled styles
+        this.disabled
+          ? this.headless
+            ? `${this.name}--disabled`
+            : 'bg-gray-100'
+          : null,
       ];
     },
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.45.0",
+  "version": "0.47.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/components/Form/VTInputDate.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="relative">
+    <input
+      type="date"
+      :class="classComputed"
+      :value="date"
+      :disabled="disabled"
+      v-bind="$attrs"
+      v-on="listeners"
+    />
+    <span
+      class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none"
+      :class="[disabled ? 'bg-gray-100' : 'bg-white']"
+      ><IconCalendar class="-z-0 scale-90 text-gray-500"
+    /></span>
+  </div>
+</template>
+
+<script>
+import {
+  formControlMixin,
+  formControlStyleMixin,
+} from '../../../mixins/form-control';
+
+export default {
+  name: 'VTInputDate',
+
+  mixins: [formControlMixin, formControlStyleMixin],
+
+  computed: {
+    date: {
+      get() {
+        return this.value ? this.$date.format(this.value, 'YYYY-MM-DD') : null;
+      },
+      set(newDate) {
+        this.$emit('input', newDate);
+      },
+    },
+  },
+};
+</script>
+
+<style scoped lang="postcss">
+input[type='date']::-webkit-calendar-picker-indicator {
+  @apply absolute right-0 z-10 h-10 w-10 cursor-pointer opacity-0;
+}
+</style>

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>