vueless 0.0.225 → 0.0.226

package/package.json

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

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.225",
+  "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": {