vueless 0.0.391 → 0.0.393

package/composables/useAutoPosition.js

@@ -31,7 +31,7 @@ export function useAutoPosition(anchorElement, targetElement, position, preferre
       return localPosition.value.x === POSITION.left;
     }
 
-    return preferredOpenDirectionX.value === POSITION.right;
+    return preferredOpenDirectionX.value === POSITION.left;
   });
 
   const isBottom = computed(() => {
@@ -60,12 +60,12 @@ export function useAutoPosition(anchorElement, targetElement, position, preferre
     const hasEnoughSpaceAbove =
       spaceAbove > localTargetElement.value.getBoundingClientRect().height;
 
-    if (localPreferredPosition.value.y === POSITION.top) {
+    if (localPreferredPosition.value.y === POSITION.bottom) {
       preferredOpenDirectionY.value =
         hasEnoughSpaceBelow || spaceBelow > spaceAbove ? POSITION.bottom : POSITION.top;
     }
 
-    if (localPreferredPosition.value.y === POSITION.bottom) {
+    if (localPreferredPosition.value.y === POSITION.top) {
       preferredOpenDirectionY.value =
         hasEnoughSpaceAbove || spaceAbove > spaceBelow ? POSITION.top : POSITION.bottom;
     }
@@ -79,12 +79,12 @@ export function useAutoPosition(anchorElement, targetElement, position, preferre
     const hasEnoughSpaceLeft = spaceLeft > localTargetElement.value.getBoundingClientRect().width;
     const hasEnoughSpaceRight = spaceRight > localTargetElement.value.getBoundingClientRect().width;
 
-    if (localPreferredPosition.value.x === POSITION.left) {
+    if (localPreferredPosition.value.x === POSITION.right) {
       preferredOpenDirectionX.value =
         hasEnoughSpaceRight || spaceRight > spaceLeft ? POSITION.right : POSITION.left;
     }
 
-    if (localPreferredPosition.value.x === POSITION.right) {
+    if (localPreferredPosition.value.x === POSITION.left) {
       preferredOpenDirectionX.value =
         hasEnoughSpaceLeft || spaceLeft > spaceRight ? POSITION.left : POSITION.right;
     }

package/package.json

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

package/ui.container-card/UCard.vue

@@ -8,7 +8,7 @@
         <!-- @slot Use it to customise left side of the header. -->
         <slot name="header-left">
           <div v-bind="headerLeftFallbackAttrs">
-            <UHeader :label="title" size="md" v-bind="titleAttrs" />
+            <UHeader :label="title" size="xs" v-bind="titleAttrs" />
             <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
           </div>
         </slot>
@@ -21,12 +21,12 @@
       <slot name="header-right" />
     </div>
 
-    <!-- @slot Use it to add something inside. -->
     <div v-bind="contentAttrs">
+      <!-- @slot Use it to add something inside. -->
       <slot />
     </div>
 
-    <UDivider v-if="isShownFooter" no-top-padding no-bottom-padding v-bind="dividerAttrs" />
+    <UDivider v-if="isShownFooter" no-padding v-bind="dividerAttrs" />
 
     <div v-if="isShownFooter" v-bind="footerAttrs">
       <!-- @slot Use it to add something to the left side of the footer. -->
@@ -41,14 +41,10 @@
 <script setup>
 import { computed, useSlots } from "vue";
 
-import { getDefault } from "../utils/utilUI.js";
 import UHeader from "../ui.text-header/UHeader.vue";
 import UDivider from "../ui.container-divider/UDivider.vue";
 
-import { UCard } from "./constants.js";
-import defaultConfig from "./config.js";
 import useAttrs from "./useAttrs.js";
-import useBreakpoint from "../composables/useBreakpoint.js";
 
 defineOptions({ inheritAttrs: false });
 
@@ -71,23 +67,6 @@ const props = defineProps({
     default: "",
   },
 
-  /**
-   * Card padding.
-   * @values sm, md, lg
-   */
-  padding: {
-    type: String,
-    default: getDefault(defaultConfig, UCard).padding,
-  },
-
-  /**
-   * Reverse left and right footer blocks (in a mobile version only).
-   */
-  mobileFooterReverse: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UCard).mobileFooterReverse,
-  },
-
   /**
    * Component ui config object.
    */
@@ -116,8 +95,6 @@ const isShownFooter = computed(() => {
   return hasSlotContent(slots["footer-left"]) || hasSlotContent(slots["footer-right"]);
 });
 
-const { isMobileBreakpoint } = useBreakpoint();
-
 const {
   hasSlotContent,
   wrapperAttrs,
@@ -129,5 +106,5 @@ const {
   descriptionAttrs,
   contentAttrs,
   footerAttrs,
-} = useAttrs(props, { isMobileBreakpoint });
+} = useAttrs(props);
 </script>

package/ui.container-card/config.js

@@ -1,25 +1,14 @@
 export default /*tw*/ {
-  wrapper: {
-    base: "border rounded-dynamic border-gray-200 bg-white space-y-4 md:space-y-6 w-full",
-    variants: {
-      padding: {
-        sm: "p-2 md:p-4",
-        md: "p-4 md:p-6",
-        lg: "p-6 md:p-8",
-      },
-    },
-  },
+  wrapper: "p-4 md:p-5 border rounded-dynamic border-gray-200 bg-white space-y-4 w-full",
   header: "flex justify-between",
-  headerLeft: "flex items-center space-x-4 w-full",
-  headerLeftFallback: "flex flex-col w-full",
+  headerLeft: "flex items-center gap-2 w-fit",
+  headerLeftFallback: "flex flex-col w-fit",
   title: "{UHeader}",
-  description: "mt-1.5 text-base font-normal text-gray-500",
-  content: "",
+  description: "mt-1 text-sm font-normal text-gray-500",
+  content: "text-sm",
   divider: "{UDivider}",
   footer: "flex justify-between",
-  footerMobileReverse: "flex flex-col-reverse space-y-reverse",
   defaults: {
-    padding: "md",
-    mobileFooterReverse: false,
+    //
   },
 };

package/ui.container-card/storybook/stories.js

@@ -1,7 +1,6 @@
 import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
 import UCard from "../../ui.container-card/UCard.vue";
-import URow from "../../ui.container-row/URow.vue";
 import UInput from "../../ui.form-input/UInput.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
@@ -49,37 +48,12 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
-  components: { UCard, URow },
-  setup() {
-    return {
-      args,
-      options: argTypes[args.enum].options,
-    };
-  },
-  template: `
-    <URow>
-      <UCard
-        v-for="(option, index) in options"
-        :key="index"
-        v-bind="args"
-        :[args.enum]="option"
-      >
-        ${defaultTemplate}
-      </UCard>
-    </URow>
-  `,
-});
-
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const Description = DefaultTemplate.bind({});
 Description.args = { description: "Card description" };
 
-export const Padding = EnumVariantTemplate.bind({});
-Padding.args = { enum: "padding" };
-
 export const SlotHeaderLeftBefore = DefaultTemplate.bind({});
 SlotHeaderLeftBefore.args = {
   slotTemplate: `
@@ -125,7 +99,7 @@ SlotFooterLeft.args = {
   slotTemplate: `
     ${defaultTemplate}
     <template #footer-left>
-      <UButton label="Read more" />
+      <UButton size="sm" label="Read more" />
     </template>
   `,
 };
@@ -135,7 +109,7 @@ SlotFooterRight.args = {
   slotTemplate: `
     ${defaultTemplate}
     <template #footer-right>
-      <UButton label="Read more" />
+      <UButton size="sm" label="Read more" />
     </template>
   `,
 };

package/ui.container-card/useAttrs.js

@@ -1,26 +1,11 @@
-import { computed } from "vue";
 import useUI from "../composables/useUI.js";
 
 import defaultConfig from "./config.js";
 
-export default function useAttrs(props, { isMobileBreakpoint }) {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
-    defaultConfig,
-    () => props.config,
-  );
+export default function useAttrs(props) {
+  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
 
-  const extendingKeys = ["footerMobileReverse"];
-  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
-
-  const keysAttrs = getKeysAttrs({}, extendingKeys, {
-    footer: {
-      extend: computed(() => [
-        props.mobileFooterReverse &&
-          isMobileBreakpoint.value &&
-          extendingKeysClasses.footerMobileReverse.value,
-      ]),
-    },
-  });
+  const keysAttrs = getKeysAttrs();
 
   return {
     config,

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

@@ -14,7 +14,7 @@
       :size="size"
       :left-icon="leftIcon"
       :right-icon="rightIcon"
-      v-bind="inputAttrs"
+      v-bind="isShownCalendar ? activeInputAttrs : inputAttrs"
       @focus="activate"
     >
       <template #left>
@@ -317,7 +317,7 @@ const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props
 
 const elementId = props.id || useId();
 
-const { config, inputAttrs, calendarAttrs, wrapperAttrs } = useAttrs(props, {
+const { config, inputAttrs, activeInputAttrs, calendarAttrs, wrapperAttrs } = useAttrs(props, {
   isShownCalendar,
   isTop,
   isRight,

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

@@ -1,9 +1,9 @@
 export default /*tw*/ {
   wrapper: "relative",
   input: "{UInput}",
-  inputFocused: {
+  activeInput: {
     component: "{UInput}",
-    block: "ring-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
+    block: "ring-dynamic rounded-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
   },
   calendar: {
     component: "{UCalendar}",

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

@@ -5,11 +5,8 @@ import useUI from "../composables/useUI.js";
 import defaultConfig from "./config.js";
 import { POSITION } from "../composables/useAutoPosition.js";
 
-export default function useAttrs(props, { isShownCalendar, isTop, isRight }) {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
-    defaultConfig,
-    () => props.config,
-  );
+export default function useAttrs(props, { isTop, isRight }) {
+  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
 
   const mutatedProps = computed(() => ({
     openDirectionY: isTop.value ? POSITION.top : POSITION.bottom,
@@ -18,14 +15,7 @@ export default function useAttrs(props, { isShownCalendar, isTop, isRight }) {
     description: Boolean(props.description),
   }));
 
-  const extendingKeys = ["inputFocused"];
-  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys, mutatedProps);
-
-  const keysAttrs = getKeysAttrs(mutatedProps, extendingKeys, {
-    input: {
-      extend: computed(() => [isShownCalendar.value && extendingKeysClasses.inputFocused.value]),
-    },
-  });
+  const keysAttrs = getKeysAttrs(mutatedProps);
 
   /* Merging DatePicker's i18n translations into Calendar's i18n translations. */
   watchEffect(() => {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.391",
+  "version": "0.0.393",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1365,24 +1365,6 @@
               },
               "default": "\"\""
             },
-            {
-              "name": "padding",
-              "description": "Card padding.",
-              "value": {
-                "kind": "expression",
-                "type": "'sm' | 'md' | 'lg'"
-              },
-              "default": "md"
-            },
-            {
-              "name": "mobileFooterReverse",
-              "description": "Reverse left and right footer blocks (in a mobile version only).",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
             {
               "name": "config",
               "description": "Component ui config object.",
@@ -1420,7 +1402,8 @@
               "description": "Use it to customise right side of the header."
             },
             {
-              "name": "default"
+              "name": "default",
+              "description": "Use it to add something inside."
             },
             {
               "name": "footer-left",