vueless 0.0.236 → 0.0.238

package/ui.text-alert/index.vue

@@ -3,35 +3,41 @@
     <!-- @slot Use it to add something above the text. -->
     <slot name="top" />
 
-    <!--
-      @slot Use it to add something instead of the title.
-      @binding {string} title
-    -->
-    <slot name="title" :title="title">
-      <div v-if="title" v-bind="titleAttrs" v-text="title" />
-    </slot>
-
-    <!--
-      @slot Use it to add something instead of the description.
-      @binding {string} description
-    -->
-    <slot name="description" :description="description">
-      <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
-    </slot>
-
     <div v-bind="bodyAttrs">
-      <!-- @slot Use it to add something before the text. -->
-      <slot name="left" />
-
-      <UText
-        v-if="hasSlotContent($slots.default) || html"
-        v-bind="bodyAttrs"
-        :size="size"
-        :html="html"
-      >
-        <!-- @slot Use it to add something inside. -->
-        <slot />
-      </UText>
+      <div v-bind="innerWrapperAttrs">
+        <!-- @slot Use it to add something before the text. -->
+        <slot name="left" />
+
+        <div v-bind="contentAttrs">
+          <!--
+          @slot Use it to add something instead of the title.
+          @binding {string} title
+          -->
+          <slot v-if="!hasSlotContent($slots['default'])" name="title" :title="title">
+            <div v-if="title" v-bind="titleAttrs" v-text="title" />
+          </slot>
+
+          <!--
+            @slot Use it to add something instead of the description.
+            @binding {string} description
+          -->
+          <slot
+            v-if="!hasSlotContent($slots['default'])"
+            name="description"
+            :description="description"
+          >
+            <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
+          </slot>
+
+          <!-- @slot Use it to add something inside. -->
+          <UText v-bind="textAttrs" :size="size">
+            <slot />
+          </UText>
+        </div>
+
+        <!-- @slot Use it to add something after the text. -->
+        <slot name="right" />
+      </div>
 
       <UButton
         v-if="closable"
@@ -52,9 +58,6 @@
           v-bind="iconAttrs"
         />
       </UButton>
-
-      <!-- @slot Use it to add something after the text. -->
-      <slot name="right" />
     </div>
 
     <!-- @slot Use it to add something under the text. -->
@@ -79,20 +82,28 @@ defineOptions({ name: "UAlert" });
 
 const props = defineProps({
   /**
-   * Alert variant.
-   * @values primary, secondary, thirdary
+   * Alert title.
    */
-  variant: {
+  title: {
     type: String,
-    default: UIService.get(defaultConfig, UAlert).default.variant,
+    default: "",
   },
 
   /**
-   * HTML or plain text.
+   * Alert description.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Alert variant.
+   * @values primary, secondary, thirdary
    */
-  html: {
+  variant: {
     type: String,
-    default: UIService.get(defaultConfig, UAlert).default.html,
+    default: UIService.get(defaultConfig, UAlert).default.variant,
   },
 
   /**
@@ -151,22 +162,6 @@ const props = defineProps({
     type: String,
     default: "",
   },
-
-  /**
-   * Alert title.
-   */
-  title: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Alert description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
 });
 
 const emit = defineEmits([
@@ -182,10 +177,13 @@ const {
   config,
   wrapperAttrs,
   bodyAttrs,
+  contentAttrs,
+  textAttrs,
   titleAttrs,
   descriptionAttrs,
   iconAttrs,
   buttonAttrs,
+  innerWrapperAttrs,
   hasSlotContent,
 } = useAttrs(props);
 

package/ui.text-badge/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UBadge from "../ui.text-badge";
 import UIcon from "../ui.image-icon";
@@ -21,7 +21,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UBadge },
+  components: { UBadge, UIcon },
   setup() {
     const slots = getSlotNames(UBadge.name);
 
@@ -29,19 +29,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UBadge v-bind="args">
-      ${allSlotsFragment}
-    </UBadge>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UBadge, UIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UBadge v-bind="args">
-      ${args.slotTemplate}
+      ${args.slotTemplate || getSlotsFragment()}
     </UBadge>
   `,
 });
@@ -71,100 +59,44 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UBadge, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UBadge
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        :label="getText(size)"
-        :key="index"
-      />
-    </URow>
-  `,
-  methods: {
-    getText(value) {
-      return `badge ${value}`;
-    },
-  },
-});
-
-const WeightTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UBadge, URow },
   setup() {
-    return {
-      args,
-      weights: argTypes.weight.options,
-    };
-  },
-  template: `
-    <URow>
-      <UBadge
-        v-for="(weight, index) in weights"
-        v-bind="args"
-        :weight="weight"
-        :label="getText(weight)"
-        :key="index"
-      />
-    </URow>
-  `,
-  methods: {
-    getText(value) {
-      return `badge ${value}`;
-    },
-  },
-});
+    function getText(value) {
+      return `Badge ${value}`;
+    }
 
-const VariantsTemplate = (args, { argTypes } = {}) => ({
-  components: { UBadge, URow },
-  setup() {
-    return {
-      args,
-      variants: argTypes.variant.options,
-    };
+    return { args, options: argTypes[args.enum].options, getText };
   },
   template: `
     <URow>
       <UBadge
-        v-for="(variant, index) in variants"
+        v-for="(option, index) in options"
         v-bind="args"
-        :variant="variant"
-        :label="getText(variant)"
+        :[args.enum]="option"
+        :label="getText(option)"
         :key="index"
       />
     </URow>
   `,
-  methods: {
-    getText(value) {
-      return `badge ${value}`;
-    },
-  },
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Variants = VariantsTemplate.bind({});
-Variants.args = {};
+export const Variants = EnumVariantTemplate.bind({});
+Variants.args = { enum: "variant" };
 
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };
 
-export const Weight = WeightTemplate.bind({});
-Weight.args = {};
+export const Weight = EnumVariantTemplate.bind({});
+Weight.args = { enum: "weight" };
 
 export const Colors = ColorsTemplate.bind({});
 Colors.args = {};
 
-export const slotRight = SlotTemplate.bind({});
+export const slotRight = DefaultTemplate.bind({});
 slotRight.args = {
   slotTemplate: `
     <template #right>
@@ -172,12 +104,12 @@ slotRight.args = {
         tooltip="tooltip text"
         name="info"
         size="xs"
-       />
+      />
     </template>
   `,
 };
 
-export const slotLeft = SlotTemplate.bind({});
+export const slotLeft = DefaultTemplate.bind({});
 slotLeft.args = {
   slotTemplate: `
     <template #left>
@@ -185,7 +117,7 @@ slotLeft.args = {
         tooltip="tooltip text"
         name="info"
         size="xs"
-       />
+      />
     </template>
   `,
 };

package/ui.text-block/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UText from "../ui.text-block";
 import URow from "../ui.container-row";
@@ -17,13 +17,11 @@ export default {
 };
 
 const defaultTemplate = `
-  <template #default>
-    <p>
-      <b>To proceed with your registration</b>, please enter your
-        <u>email address</u> in the field below. <i>A verification link</i> will be sent to your inbox shortly.
-      <a href="https://uk.wikipedia.org/wiki/Lorem_ipsum" target="_blank">Wikipedia</a>
-    </p>
-  </template>
+  <p>
+    <b>To proceed with your registration</b>, please enter your
+      <u>email address</u> in the field below. <i>A verification link</i> will be sent to your inbox shortly.
+    <a href="https://uk.wikipedia.org/wiki/Lorem_ipsum" target="_blank">Wikipedia</a>
+  </p>
 `;
 
 const DefaultTemplate = (args) => ({
@@ -35,24 +33,24 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UText v-bind="args">
-      ${args.slotTemplate || defaultTemplate}
+      ${args.slotTemplate || getSlotsFragment(defaultTemplate)}
     </UText>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UText, URow },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow>
       <UText
-        v-for="(size, index) in sizes"
-        :size="size"
+        v-for="(option, index) in options"
+        :[args.enum]="option"
         v-bind="args"
         :key="index"
       >
@@ -65,8 +63,8 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
 export const paragraphs = DefaultTemplate.bind({});
 paragraphs.args = {

package/ui.text-empty/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UEmpty from "../ui.text-empty";
 import UButton from "../ui.button";
@@ -22,7 +22,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UEmpty },
+  components: { UEmpty, UIcon, UButton },
   setup() {
     const slots = getSlotNames(UEmpty.name);
 
@@ -30,38 +30,26 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UEmpty v-bind="args">
-      ${allSlotsFragment}
+      ${args.slotTemplate || getSlotsFragment()}
     </UEmpty>
   `,
 });
 
-const SlotTemplate = (args) => ({
-  components: { UEmpty, UIcon, UButton },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UEmpty v-bind="args">
-      ${args.slotTemplate}
-    </UEmpty>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UEmpty, URow },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow>
       <UEmpty
-        v-for="(size, index) in sizes"
+        v-for="(option, index) in options"
         v-bind="args"
-        :size="size"
-        :title="size"
+        :[args.enum]="option"
+        :title="option"
         :key="index"
       />
     </URow>
@@ -71,10 +59,10 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = { title: "" };
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size", title: "" };
 
-export const slotHeader = SlotTemplate.bind({});
+export const slotHeader = DefaultTemplate.bind({});
 slotHeader.args = {
   slotTemplate: `
     <template #header>
@@ -83,12 +71,12 @@ slotHeader.args = {
         color="blue"
         size="2xl"
         pill
-       />
+      />
     </template>
   `,
 };
 
-export const slotDefault = SlotTemplate.bind({});
+export const slotDefault = DefaultTemplate.bind({});
 slotDefault.args = {
   slotTemplate: `
     <template #default>
@@ -97,11 +85,11 @@ slotDefault.args = {
   `,
 };
 
-export const slotFooter = SlotTemplate.bind({});
+export const slotFooter = DefaultTemplate.bind({});
 slotFooter.args = {
   slotTemplate: `
     <template #footer>
-        <UButton label="Add new one" size="sm" variant="thirdary" filled />
+      <UButton label="Add new one" size="sm" variant="thirdary" filled />
     </template>
   `,
 };

package/ui.text-file/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotsFragment } from "../service.storybook";
 
 import UFile from "../ui.text-file";
 
@@ -24,7 +24,9 @@ const DefaultTemplate = (args) => ({
     return { args };
   },
   template: `
-    <UFile v-bind="args" />
+    <UFile v-bind="args">
+      ${args.slotTemplate || getSlotsFragment()}
+    </UFile>
   `,
 });
 

package/ui.text-files/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotsFragment } from "../service.storybook";
 
 import UFiles from "../ui.text-files";
 
@@ -27,7 +27,9 @@ const DefaultTemplate = (args) => ({
     return { args };
   },
   template: `
-    <UFiles v-bind="args" />
+    <UFiles v-bind="args">
+      ${args.slotTemplate || getSlotsFragment()}
+    </UFiles>
   `,
 });
 

package/ui.text-header/index.stories.js

@@ -1,4 +1,4 @@
-import { allSlotsFragment, getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UHeader from "../ui.text-header";
 import UGroup from "../ui.container-group";
@@ -26,68 +26,28 @@ const DefaultTemplate = (args) => ({
     return { args, slots };
   },
   template: `
-    <UHeader v-bind="args">${allSlotsFragment}</UHeader>
+    <UHeader v-bind="args">
+      ${args.slotTemplate || getSlotsFragment()}
+    </UHeader>
   `,
 });
 
-const WeightTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UHeader, UGroup },
   setup() {
     return {
       args,
-      weights: argTypes.weight.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <UGroup>
       <UHeader
-        v-for="(weight, index) in weights"
+        v-for="(option, index) in options"
         :key="index"
         v-bind="args"
-        :weight="weight"
-        :label="'Header ' + weight"
-      />
-    </UGroup>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UHeader, UGroup },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <UGroup>
-      <UHeader
-        v-for="(size, index) in sizes"
-        :key="index"
-        v-bind="args"
-        :size="size"
-        :label="'Header ' + size"
-      />
-    </UGroup>
-  `,
-});
-
-const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { UHeader, UGroup },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <UGroup>
-      <UHeader
-        v-for="(color, index) in colors"
-        v-bind="args"
-        :key="index"
-        :color="color"
-        :label="'Header ' + color"
+        :[args.enum]="option"
+        :label="'Header ' + option"
       />
     </UGroup>
   `,
@@ -96,14 +56,14 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Weights = WeightTemplate.bind({});
-Weights.args = {};
+export const Weights = EnumVariantTemplate.bind({});
+Weights.args = { enum: "weight" };
 
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };
 
-export const Underlined = SizesTemplate.bind({});
-Underlined.args = { underlined: true };
+export const Underlined = EnumVariantTemplate.bind({});
+Underlined.args = { enum: "size", underlined: true };
 
 export const Multiline = DefaultTemplate.bind({});
 Multiline.args = {
@@ -112,5 +72,5 @@ Multiline.args = {
   label: "Some very long header you ever may imagine in your whole long and beautiful life",
 };
 
-export const Colors = ColorsTemplate.bind({});
-Colors.args = {};
+export const Colors = EnumVariantTemplate.bind({});
+Colors.args = { enum: "color" };