vueless 0.0.346 → 0.0.348

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.346",
+  "version": "0.0.348",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.form-date-picker/UDatePicker.vue

@@ -223,7 +223,7 @@ const props = defineProps({
    */
   dateTimeFormat: {
     type: String,
-    default: getDefault(defaultConfig, UCalendar).dateTimeFormat,
+    default: getDefault(defaultConfig, UDatePicker).dateTimeFormat,
   },
 
   /**
@@ -239,7 +239,7 @@ const props = defineProps({
    */
   userDateTimeFormat: {
     type: String,
-    default: getDefault(defaultConfig, UCalendar).userDateTimeFormat,
+    default: getDefault(defaultConfig, UDatePicker).userDateTimeFormat,
   },
 
   /**

package/ui.form-date-picker/config.js

@@ -7,7 +7,7 @@ export default /*tw*/ {
   },
   calendar: {
     component: "{UCalendar}",
-    base: "absolute z-40 my-2",
+    base: "absolute mb-3 z-40",
     variants: {
       openDirectionX: {
         left: "right-0",
@@ -17,7 +17,10 @@ export default /*tw*/ {
         top: "bottom-full mt-0",
         bottom: "top-full mb-0",
       },
+      error: { true: "-mt-3" },
+      description: { true: "-mt-3" },
     },
+    compoundVariants: [{ description: false, error: false, class: "mt-2" }],
   },
   calendarTransition: {
     enterFromClass: "opacity-0 scale-95",

package/ui.form-date-picker/storybook/stories.js

@@ -35,7 +35,7 @@ const DefaultTemplate = (args) => ({
     return { args, slots };
   },
   template: `
-    <UDatePicker v-bind="args" v-model="args.modelValue">
+    <UDatePicker open-direction-y="bottom" v-bind="args" v-model="args.modelValue">
       ${args.slotTemplate || getSlotsFragment()}
     </UDatePicker>
 
@@ -57,6 +57,7 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
     <URow>
       <UDatePicker
         v-for="(option, index) in options"
+        open-direction-y="bottom" 
         :key="index"
         v-bind="args"
         :[args.enum]="option"

package/ui.form-date-picker/useAttrs.js

@@ -23,6 +23,8 @@ export default function useAttrs(props, { isShownCalendar, isTop, isRight }) {
           ...props,
           openDirectionY: isTop.value ? POSITION.top : POSITION.bottom,
           openDirectionX: isRight.value ? POSITION.right : POSITION.left,
+          error: Boolean(props.error),
+          description: Boolean(props.description),
         });
       }
 

package/ui.form-date-picker-range/config.js

@@ -14,7 +14,7 @@ export default /*tw*/ {
   `,
   menu: {
     base: `
-      absolute z-40 my-2 w-80 overflow-hidden rounded-dynamic
+      absolute z-40 mb-3 w-80 overflow-hidden rounded-dynamic
       border border-brand-300 bg-white p-2 shadow focus:outline-none
     `,
     variants: {
@@ -26,6 +26,14 @@ export default /*tw*/ {
         top: "bottom-full mt-0",
       },
     },
+    compoundVariants: [
+      { error: true, variant: "input", class: "-mt-3" },
+      { description: true, variant: "input", class: "-mt-3" },
+      { description: false, error: false, variant: "input", class: "mt-2" },
+      { error: true, variant: "button", class: "-mt-2" },
+      { description: true, variant: "button", class: "-mt-2" },
+      { description: false, error: false, variant: "button", class: "mt-3" },
+    ],
   },
   menuTransition: {
     enterFromClass: "opacity-0 scale-95",
@@ -74,7 +82,7 @@ export default /*tw*/ {
   inputRangeError: "text-xs font-normal leading-none mt-2 text-center text-red-500",
   calendar: {
     component: "{UCalendar}",
-    wrapper: "p-0 mt-2 w-full border-none shadow-none",
+    wrapper: "p-0 w-full border-none shadow-none",
     navigation: "mb-0 border-none",
     viewSwitchButton: {
       base: "rounded-dynamic px-4",

package/ui.form-date-picker-range/storybook/stories.js

@@ -45,7 +45,7 @@ const DefaultTemplate = (args) => ({
     };
   },
   template: `
-    <UDatePickerRange v-bind="args" v-model="value">
+    <UDatePickerRange open-direction-y="bottom" v-bind="args" v-model="value">
       ${args.slotTemplate || getSlotsFragment()}
     </UDatePickerRange>
 
@@ -68,6 +68,7 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
       <UDatePickerRange
         v-for="(option, index) in options"
         :key="index"
+        open-direction-y="bottom"
         v-bind="args"
         v-model="args.value"
         :[args.enum]="option"

package/ui.form-date-picker-range/useAttrs.js

@@ -38,6 +38,8 @@ export default function useAttrs(props, { isShownMenu, isTop, isRight, isPeriod
       if (isCVA(value)) {
         value = cva(value)({
           ...props,
+          error: Boolean(props.error),
+          description: Boolean(props.description),
         });
       }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.346",
+  "version": "0.0.348",
   "contributions": {
     "html": {
       "description-markup": "markdown",