vueless 0.0.347 → 0.0.349

package/package.json

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

package/preset.tailwind.js

@@ -16,15 +16,22 @@ const isStrategyOverride = process.env.VUELESS_STRATEGY === "override";
  * Use it to extend project Tailwind CSS `content` config.
  */
 export const vuelessContent = [
-  "./index.html",
-  "./src/**/*.{js,ts,jsx,tsx,vue}",
   "./vueless.config.{js,ts}",
   "./node_modules/vueless/**/*.{js,ts,vue}",
-  ...(isStrategyOverride ? ["!./src/**/ui.*/config.js"] : []),
+  ...(isStrategyOverride ? ["!./src/**/ui.*/config.js"] : []), // only for vueless env
   ...(isStrategyOverride ? ["!./node_modules/vueless/**/ui.*/config.js"] : []),
 ];
 
-// eslint-disable-next-line no-unused-vars
+/**
+ * Vue.js default Tailwind CSS `content` config.
+ * Use it to extend project Tailwind CSS `content` config.
+ */
+export const vuelessContentVue = ["./index.html", "./src/**/*.{js,ts,jsx,tsx,vue}"];
+
+/**
+ * Nuxt.js default Tailwind CSS `content` config.
+ * Use it to extend project Tailwind CSS `content` config.
+ */
 export const vuelessContentNuxt = [
   "./composables/**/*.{js,ts}",
   "./components/**/*.{js,vue,ts}",
@@ -33,9 +40,6 @@ export const vuelessContentNuxt = [
   "./plugins/**/*.{js,ts}",
   "./app.vue",
   "./error.vue",
-  "./vueless.config.{js,ts}",
-  "./node_modules/vueless/**/*.{js,ts,vue}",
-  ...(isStrategyOverride ? ["!./node_modules/vueless/**/ui.*/**/config.js"] : []),
 ];
 
 /**
@@ -45,7 +49,7 @@ export const vuelessContentNuxt = [
 export function vuelessPreset() {
   return {
     darkMode: DARK_MODE_SELECTOR,
-    content: vuelessContent,
+    content: [...vuelessContent, ...vuelessContentVue, ...vuelessContentNuxt],
     safelist,
     theme: {
       extend: {

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.347",
+  "version": "0.0.349",
   "contributions": {
     "html": {
       "description-markup": "markdown",