@veritree/ui 0.94.0 → 0.94.2

package/mixins/form-control.js

@@ -76,11 +76,11 @@ export const formControlStyleMixin = {
     classComputed() {
       return [
         this.headless
-          ? `${this.name}`
+          ? `${this.name ? this.name : ''}`
           : 'leading-0 bg-white has-[:disabled]:bg-gray-200 disabled:bg-gray-200 flex w-full max-w-full relative appearance-none placeholder:font-light placeholder:text-gray-500 items-center justify-between rounded border border-solid px-3 py-2 font-inherit text-inherit file:hidden focus-within:border-gray-600 focus:border-gray-600 focus-within:placeholder:text-gray-400 focus:placeholder:text-gray-400 has-[:disabled]:text-gray-500 disabled:text-gray-500',
         // variant styles
         this.headless
-          ? `${this.name}--${this.variant}`
+          ? `${this.name ? this.name : ''}${this.variant ? '--' + this.variant : ''}`
           : this.isError
             ? 'border-error-300'
             : this.isSuccess

package/package.json

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

package/src/components/Form/VTInputDate.vue

@@ -1,5 +1,5 @@
 <template>
-  <VTPopover>
+  <VTPopover :placement="placement">
     <VTPopoverTrigger ref="trigger">
       <button
         :id="id"
@@ -9,13 +9,29 @@
         @click.prevent
       >
         <span v-if="valueModel">{{ valueModelFormatted }}</span>
-        <span class="text-gray-500" v-else>{{ format }}</span>
+        <slot v-else name="label">
+          <span
+            :class="{
+              'text-gray-500': !headless,
+            }"
+            >{{ label || format }}</span
+          >
+        </slot>
         <span
           v-if="!iconless"
-          class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2"
-          :class="[disabled ? 'bg-gray-200' : 'bg-white']"
+          class=""
+          :class="[
+            headless ? '' : disabled ? 'bg-gray-200' : 'bg-white',
+            headless
+              ? ''
+              : 'pointer-events-none absolute right-3 top-1/2 -translate-y-1/2',
+          ]"
         >
-          <IconCalendar class="-z-0 h-5 w-5 scale-90 text-gray-600" />
+          <IconCalendar
+            :class="{
+              '-z-0 h-5 w-5 scale-90 text-gray-600': !headless,
+            }"
+          />
         </span>
       </button>
     </VTPopoverTrigger>
@@ -89,6 +105,10 @@ export default {
       type: [Function, Object],
       default: null,
     },
+    label: {
+      type: String,
+      default: null,
+    },
     format: {
       type: String,
       default: 'YYYY-MM-DD',
@@ -125,6 +145,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    placement: {
+      type: String,
+      default: 'bottom-start',
+    },
   },
 
   computed: {

package/src/components/Listbox/VTListboxSearch.vue

@@ -5,7 +5,7 @@
       v-model="search"
       v-bind="$attrs"
       type="text"
-      class="leading-0 font-inherit w-full max-w-full appearance-none border-b border-solid border-gray-300 py-2 px-3 text-base text-inherit"
+      class="leading-0 hidden sm:block font-inherit w-full max-w-full appearance-none border-b border-solid border-gray-300 py-2 px-3 text-base text-inherit"
       @input="onChange"
       @click.stop
       @keydown.down.prevent="focusNextItem"