vueless 0.0.224 → 0.0.226

package/composable.ui/index.js

@@ -92,7 +92,7 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
 
     watch(config, updateVuelessAttrs, { immediate: true });
     watch(props, updateVuelessAttrs);
-    options?.classes && watch(options?.classes, updateVuelessAttrs);
+    options?.classes?.value && watch(options?.classes, updateVuelessAttrs);
 
     function updateVuelessAttrs() {
       const configKeyValue = config.value[configKey];

package/package.json

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

package/ui.button-toggle/configs/default.config.js

@@ -1,4 +1,13 @@
 export default /*tw*/ {
+  label: {
+    component: "{ULabel}",
+    base: "flex flex-wrap",
+    variants: {
+      block: {
+        true: "w-full",
+      },
+    },
+  },
   items: {
     base: "flex flex-wrap",
     variants: {
@@ -13,8 +22,8 @@ export default /*tw*/ {
       separated: {
         false: `
           flex-nowrap -space-x-px gap-0
-          [&>:first-child]:rounded-l-lg  [&>:last-child]:rounded-r-lg
-          [&>:first-child>*>*]:rounded-l-lg  [&>:last-child>*>*]:rounded-r-lg
+          [&>:first-child]:rounded-l-lg [&>:last-child]:rounded-r-lg
+          [&>:first-child>*>*]:rounded-l-lg [&>:last-child>*>*]:rounded-r-lg
         `,
       },
     },
@@ -23,14 +32,6 @@ export default /*tw*/ {
       { separated: false, multiple: true, class: "space-x-px" },
     ],
   },
-  label: {
-    base: "{ULabel} flex flex-wrap",
-    variants: {
-      block: {
-        true: "w-full",
-      },
-    },
-  },
   item: "{UToggleItem}",
   defaultVariants: {
     variant: "primary",

package/ui.button-toggle/index.vue

@@ -5,8 +5,9 @@
     :description="description"
     :align="labelAlign"
     :disabled="disabled"
-    :data-cy="dataCy"
+    centred
     v-bind="labelAttrs"
+    :data-cy="dataCy"
   >
     <div v-bind="itemsAttrs">
       <!-- @slot Use it to add UToggleItem directly. -->

package/ui.button-toggle-item/composables/attrs.composable.js

@@ -9,12 +9,10 @@ export default function useAttrs(props, { isSelected, separated, variant }) {
     () => props.config,
   );
 
-  const skipKeys = ["selected"];
-
   const attrs = {};
 
   for (const key in defaultConfig) {
-    if (isSystemKey(key) || skipKeys.includes(key)) continue;
+    if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
       const value = config.value[key];

package/ui.button-toggle-item/configs/default.config.js

@@ -1,7 +1,8 @@
 export default /*tw*/ {
   button: {
+    component: "{UButton}",
     base: `
-      {UButton} border-gray-300 font-normal
+      border-gray-300 font-normal
       hover:text-brand-600 hover:border-brand-600 hover:relative hover:z-10
       focus:text-brand-600 focus:border-brand-600 focus:relative focus:z-10 focus:ring-brand-600 focus-within:ring-brand-600
       active:text-brand-700 active:border-brand-700 active:relative active:z-10

package/ui.form-calendar/composables/attrs.composable.js

@@ -45,6 +45,7 @@ export default function useAttrs(props) {
     }
 
     // TODO: Need to find other solution
+    // classes is not reactive here, which may cause problems in styling by `config` prop
     if (key === "day") {
       attrs[`${key}Attrs`] = (classes) => {
         return getAttrs("day", { classes }).value;

package/ui.form-date-picker/composables/attrs.composable.js

@@ -1,5 +1,5 @@
 import useUI from "../../composable.ui";
-import { cva, cx } from "../../service.ui";
+import { cva } from "../../service.ui";
 import { computed, watchEffect } from "vue";
 
 import defaultConfig from "../configs/default.config";
@@ -18,6 +18,8 @@ export default function useAttrs(props, { isShownCalendar, isTop, isRight }) {
       if (value.variants || value.compoundVariants) {
         return cva(value)({
           ...props,
+          openDirectionY: isTop.value ? POSITION.top : POSITION.bottom,
+          openDirectionX: isRight.value ? POSITION.right : POSITION.left,
         });
       }
 
@@ -31,24 +33,14 @@ export default function useAttrs(props, { isShownCalendar, isTop, isRight }) {
 
       attrs[`${key}Attrs`] = computed(() => ({
         ...inputAttrs.value,
-        class: cx([inputAttrs.value.class, isShownCalendar.value && config.value.inputFocus]),
+        config: {
+          ...inputAttrs.value.config,
+          ...(isShownCalendar.value ? config.value.inputFocused : {}),
+        },
       }));
     }
 
     if (key === "calendar") {
-      const calendarAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...calendarAttrs.value,
-        class: cx([
-          cva(config.value.calendar.wrapper)({
-            openDirectionY: isTop.value ? POSITION.top : POSITION.bottom,
-            openDirectionX: isRight.value ? POSITION.right : POSITION.left,
-          }),
-          calendarAttrs.value.class,
-        ]),
-      }));
-
       // This watcher rewrites default calendar locales with datepicker range locales
       // Watcher will not rewrite custom calendar locales
       watchEffect(() => {

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

@@ -1,20 +1,20 @@
 export default /*tw*/ {
   wrapper: "relative",
-  input: "",
-  inputFocus: {
+  input: "{UInput}",
+  inputFocused: {
+    component: "{UInput}",
     block: "ring-4 ring-brand-600/[.15] border-brand-500 hover:border-brand-500",
   },
   calendar: {
-    wrapper: {
-      base: "{UCalendar} absolute z-40 my-2",
-      variants: {
-        openDirectionX: {
-          left: "left-0",
-          right: "right-0",
-        },
-        openDirectionY: {
-          top: "bottom-full mt-0",
-        },
+    component: "{UCalendar}",
+    base: "absolute z-40 my-2",
+    variants: {
+      openDirectionX: {
+        left: "left-0",
+        right: "right-0",
+      },
+      openDirectionY: {
+        top: "bottom-full mt-0",
       },
     },
   },

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

@@ -251,14 +251,8 @@ const calendarWrapperRef = computed(() => calendarRef?.value?.wrapperRef);
 const { isTop, isRight, adjustPositionY, adjustPositionX } = useAdjustElementPosition(
   wrapperRef,
   calendarWrapperRef,
-  {
-    x: props.openDirectionX,
-    y: props.openDirectionY,
-  },
-  {
-    x: "left",
-    y: "bottom",
-  },
+  { x: props.openDirectionX, y: props.openDirectionY },
+  { x: "left", y: "bottom" },
 );
 
 defineExpose({

package/ui.form-input-search/configs/default.config.js

@@ -1,7 +1,8 @@
 export default /*tw*/ {
   input: {
+    component: "{UInput}",
     wrapper: "relative flex items-center justify-between w-full rounded-lg bg-gray-900 bg-opacity-5",
-    input: "{UInput} w-full",
+    input: "w-full",
     label: "w-full",
     rightSlot: "pr-0",
     leftSlot: "pl-0",

package/ui.form-label/configs/default.config.js

@@ -9,6 +9,9 @@ export default /*tw*/ {
         right: "flex-row w-fit",
         left: "flex-row-reverse w-fit",
       },
+      error: {
+        true: "text-red-500",
+      },
     },
     compoundVariants: [
       { align: "left", size: "sm", class: "gap-2" },

package/ui.form-label/index.stories.js

@@ -1,7 +1,8 @@
 import ULabel from "../ui.form-label";
 import URow from "../ui.container-row";
-import UButton from "../ui.button/index";
-import UBadge from "../ui.text-badge";
+import UGroup from "../ui.container-group";
+import UText from "../ui.text-block";
+import UIcon from "../ui.image-icon";
 
 import { getArgTypes } from "../service.storybook";
 
@@ -21,30 +22,35 @@ export default {
   },
 };
 
+const message = "This is plain text";
+
 const DefaultTemplate = (args) => ({
-  components: { ULabel },
+  components: { ULabel, UText },
   setup() {
     return { args };
   },
   template: `
-    <ULabel v-bind="args" />
+    <ULabel v-bind="args">
+      <UText v-bind="args">${message}</UText>
+    </ULabel>
   `,
 });
 
 const SlotTemplate = (args) => ({
-  components: { ULabel, UBadge },
+  components: { ULabel, UText, UIcon },
   setup() {
     return { args };
   },
   template: `
     <ULabel v-bind="args">
+      <UText v-bind="args">${message}</UText>
       ${args.slotTemplate}
     </ULabel>
   `,
 });
 
 const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { ULabel, URow },
+  components: { ULabel, URow, UText },
   setup() {
     return {
       args,
@@ -58,30 +64,33 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
         v-bind="args"
         :size="size"
         :key="index"
-      />
+      >
+        <UText :size="size">This is <b>"{{ size }}"</b> size.</UText>
+      </ULabel>
     </URow>
   `,
 });
 
-const placementTemplate = (args, { argTypes } = {}) => ({
-  components: { ULabel, URow, UButton },
+const LabelPlacementTemplate = (args, { argTypes } = {}) => ({
+  components: { ULabel, UGroup, UText },
   setup() {
     return {
       args,
-      placements: argTypes.placement.options,
+      placements: argTypes.align.options,
     };
   },
   template: `
-    <URow>
+    <UGroup>
       <ULabel
-        v-for="(placement, index) in placements"
+        v-for="(align, index) in placements"
         v-bind="args"
-        :align="placement"
+        :align="align"
         :key="index"
+        class="border border-gray-200 rounded p-4"
       >
-        <UButton text="Button"/>
+        <UText>This is <b>"{{ align }}"</b> label placement.</UText>
       </ULabel>
-    </URow>
+    </UGroup>
   `,
 });
 
@@ -91,11 +100,11 @@ Default.args = {};
 export const Sizes = SizesTemplate.bind({});
 Sizes.args = {};
 
-export const Placement = placementTemplate.bind({});
-Placement.args = {};
+export const LabelPlacement = LabelPlacementTemplate.bind({});
+LabelPlacement.args = {};
 
 export const Error = DefaultTemplate.bind({});
-Error.args = { error: "some error" };
+Error.args = { error: "Error description" };
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
@@ -104,7 +113,7 @@ export const slotFooter = SlotTemplate.bind({});
 slotFooter.args = {
   slotTemplate: `
     <template #footer>
-      <UBadge label="favourite" color="green" size="sm" />
+      <UIcon name="star" color="green" />
     </template>
   `,
 };

package/ui.form-label/index.vue

@@ -5,6 +5,7 @@
     v-bind="wrapperAttrs"
     @click="onClick"
   >
+    <!-- @slot Use it to wrap something into the label. -->
     <slot />
 
     <div v-if="label || error || description" v-bind="labelWrapperAttrs">
@@ -25,7 +26,7 @@
         v-text="description"
       />
 
-      <!-- @slot Use it to add something to the label's footer -->
+      <!-- @slot Use it to add something to the label's footer. -->
       <slot name="footer" />
     </div>
   </div>
@@ -40,6 +41,7 @@
       v-text="label"
     />
 
+    <!-- @slot Use it to wrap something into the label. -->
     <slot />
 
     <div v-if="error" :data-cy="`${dataCy}-error`" v-bind="descriptionAttrs" v-text="error" />
@@ -51,7 +53,7 @@
       v-text="description"
     />
 
-    <!-- @slot Use it to add something to the label's footer -->
+    <!-- @slot Use it to add something to the label's footer. -->
     <slot name="footer" />
   </div>
 </template>
@@ -86,7 +88,7 @@ const props = defineProps({
 
   /**
    * Set label size.
-   * @values xs, sm, md, lg, xl
+   * @values sm, md, lg
    */
   size: {
     type: String,

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.224",
+  "version": "0.0.226",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -5049,7 +5049,7 @@
               "description": "Set label size.",
               "value": {
                 "kind": "expression",
-                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+                "type": "'sm' | 'md' | 'lg'"
               },
               "default": "md"
             },
@@ -5134,11 +5134,12 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "Use it to wrap something into the label."
             },
             {
               "name": "footer",
-              "description": "Use it to add something to the label's footer"
+              "description": "Use it to add something to the label's footer."
             }
           ],
           "source": {