vueless 0.0.236 → 0.0.237

package/package.json

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

package/service.storybook/index.js

@@ -16,7 +16,12 @@ export function getArgTypes(componentName) {
 
   if (!component) return;
 
-  const types = {};
+  const types = {
+    // Hide default template arg in docs.
+    defaultTemplate: { table: { disable: true } },
+    // Hide slot template arg in docs.
+    slotTemplate: { table: { disable: true } },
+  };
 
   component.attributes?.forEach((attribute) => {
     const type = attribute.value.type;
@@ -135,12 +140,23 @@ export function getArgTypes(componentName) {
   return types;
 }
 
-export function getSource(defaultCnfig) {
-  return defaultCnfig.replace("export default /*tw*/ ", "").replace(";", "");
+export function getSource(defaultConfig) {
+  return defaultConfig.replace("export default /*tw*/ ", "").replace(";", "");
 }
 
+// TODO: remove it when allSlotsFragment will be replaced to getSlotsFragment
 export const allSlotsFragment = `
   <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
     <template v-if="args[slot + 'Slot']">{{ args[slot + 'Slot'] }}</template>
   </template>
 `;
+
+export function getSlotsFragment(defaultTemplate) {
+  return `
+  <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
+    <template v-if="slot === 'default' && !args['defaultSlot']">${defaultTemplate || ""}</template>
+    <template v-else-if="slot === 'default' && args['defaultSlot']">{{ args['defaultSlot'] }}</template>
+    <template v-else-if="args[slot + 'Slot']">{{ args[slot + 'Slot'] }}</template>
+  </template>
+`;
+}

package/ui.text-alert/configs/default.config.js

@@ -3,23 +3,35 @@ export default /*tw*/ {
     base: "p-4 flex flex-col rounded-dynamic",
     variants: {
       variant: {
-        primary: `bg-{color}-500 text-white`,
-        secondary: `bg-transparent border border-{color}-500 text-{color}-500`,
-        thirdary: `bg-{color}-50 text-{color}-700`,
+        primary: "bg-{color}-500 text-white",
+        secondary: "bg-transparent border border-{color}-500 text-{color}-500",
+        thirdary: "bg-{color}-50 text-{color}-700",
+      },
+      size: {
+        xs: "text-2xs",
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
       },
     },
     compoundVariants: [
       { variant: "thirdary", bordered: true, class: "border border-{color}-100" },
       { color: "white", variant: "primary", class: "text-gray-900 bg-white" },
-      { color: "white", variant: "secondary", class: "text-gray-900 bg-white border-gray-500" },
-      { color: "white", variant: "thirdary", bordered: true, class: "text-gray-900 bg-white border border-gray-500" },
-      { color: "grayscale", variant: "primary", class: `bg-gray-900` },
-      { color: "grayscale", variant: "secondary", class: `text-gray-900 border-gray-900` },
-      { color: "grayscale", variant: "thirdary", bordered: true, class: `text-gray-900 border border-gray-500` },
+      { color: "white", variant: "secondary", class: "text-gray-900 border-gray-200" },
+      { color: "white", variant: "thirdary", class: "text-gray-900 bg-white" },
+      { color: "white", variant: "thirdary", bordered: true, class: "border-gray-200" },
+      { color: "grayscale", variant: "primary", class: "bg-gray-900" },
+      { color: "grayscale", variant: "secondary", class: "text-gray-900 border-gray-900" },
+      { color: "grayscale", variant: "thirdary", class: "text-gray-900 bg-gray-50" },
+      { color: "grayscale", variant: "thirdary", bordered: true, class: "border-gray-200" },
     ],
   },
-  body: {
-    base: "{UText} flex gap-2 items-baseline",
+  text: "{UText}",
+  body: "flex items-start justify-between",
+  content: "",
+  innerWrapper: "flex gap-2",
+  title: {
+    base: "font-bold leading-tight",
     variants: {
       size: {
         xs: "text-xs",
@@ -29,36 +41,18 @@ export default /*tw*/ {
       },
     },
   },
-  title: {
-    base: "font-bold leading-tight",
-    variants: {
-      size: {
-        xs: "text-sm",
-        sm: "text-base",
-        md: "text-lg",
-        lg: "text-xl",
-      },
-    },
-  },
-  description: {
-    variants: {
-      size: {
-        xs: "text-xs",
-        sm: "text-xs",
-        md: "text-sm",
-        lg: "text-base",
-      },
-    },
+  description: "",
+  button: {
+    component: "{UButton}",
+    compoundVariants: [{ color: "grayscale", variant: "primary", closable: true, class: "hover:bg-gray-200" }],
   },
-  button: "{UButton}",
   icon: "{UIcon}",
   iconName: "close",
   defaultVariants: {
-    variant: "thirdary",
+    variant: "primary",
     color: "brand",
     size: "md",
     timeout: 0,
-    html: undefined,
     bordered: false,
     closable: false,
   },

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

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UAlert from "../ui.text-alert";
 import URow from "../ui.container-row";
@@ -12,154 +12,87 @@ export default {
   id: "4030",
   title: "Text & Content / Alert",
   component: UAlert,
-  args: {},
+  args: {
+    title: "Default Title",
+    description: "Default Description",
+  },
   argTypes: {
     ...getArgTypes(UAlert.name),
   },
 };
 
-const defaultTemplate = `
-  <p>
-    <b>Please note that your session is about to expire </b>
-    <u>in 5 minutes,</u>
-    <em> so make sure to save your work to avoid any data loss. </em>
-    <a href="https://uk.wikipedia.org/wiki/Lorem_ipsum" target="_blank">Wikipedia</a>
-  </p>
-`;
-
 const DefaultTemplate = (args) => ({
-  components: { UAlert, UIcon },
+  components: { UAlert, UIcon, URow },
   setup() {
     const slots = getSlotNames(UAlert.name);
 
     return { args, slots };
   },
   template: `
-    <UAlert v-bind="args" v-model="args.value">
-      ${args.template || defaultTemplate}
+    <UAlert v-bind="args">
+      ${args.slotTemplate || getSlotsFragment(args.defaultTemplate)}
     </UAlert>
   `,
 });
 
-const SlotTemplate = (args) => ({
-  components: { UAlert, UIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UAlert v-bind="args" v-model="args.value">
-      ${args.slotTemplate}
-      ${defaultTemplate}
-    </UAlert>
-  `,
-});
-
-const VariantsTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UAlert, UGroup },
   setup() {
-    return {
-      args,
-      variants: argTypes.variant.options,
-    };
-  },
-  template: `
-    <UGroup>
-      <UAlert
-        v-for="(variant, index) in variants"
-        v-bind="args"
-        :variant="variant"
-        :key="index"
-        :title="variant"
-        color="gray"
-      />
-    </UGroup>
-  `,
-});
+    const options = argTypes[args.enum].options;
+    let prefixedOptions = options;
 
-const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { UAlert, URow },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <URow>
-      <UAlert
-        v-for="(color, index) in colors"
-        v-bind="args"
-        :color="color"
-        :title="color"
-        :key="index"
-      />
-    </URow>
-  `,
-});
+    if (argTypes[args.enum].name === "size") {
+      prefixedOptions = options.map((option) => getText(option));
+    }
 
-const SizeTemplate = (args, { argTypes } = {}) => ({
-  components: { UAlert, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
+    function getText(value) {
+      return `This is Alert's ${value} size`;
+    }
+
+    return { args, options: argTypes[args.enum].options, prefixedOptions };
   },
   template: `
-    <URow>
+    <UGroup align="stretch">
       <UAlert
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
+        v-for="(option, index) in options"
         :key="index"
-      >
-        text
-      </UAlert>
-    </URow>
-  `,
-});
-
-const HTMLTemplate = (args) => ({
-  components: { UAlert },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UAlert :html="args.html"  />
+        v-bind="args"
+        :[args.enum]="option"
+        :title="prefixedOptions[index]"
+      />
+    </UGroup>
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = {
-  title: "Default Title",
-  description: "Default Description",
-};
+Default.args = {};
 
-export const variants = VariantsTemplate.bind({});
-variants.args = {};
+export const variants = EnumVariantTemplate.bind({});
+variants.args = { enum: "variant" };
 
-export const colors = ColorsTemplate.bind({});
-colors.args = {};
+export const colors = EnumVariantTemplate.bind({});
+colors.args = { enum: "color" };
 
-export const sizes = SizeTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
-export const HTML = HTMLTemplate.bind({});
+export const HTML = DefaultTemplate.bind({});
 HTML.args = {
-  html: `
-    <p>
-      <b>Important Security Update: </b>
-      <u>Your account password will expire in 10 days,</u>
-      <em> please update it to maintain account security. </em>
-      <a href="https://security.example.com/password-update" target="_blank">Update Password</a>
+  title: "",
+  description: "",
+  defaultTemplate: `
+    <h3 class="text-lg font-medium mb-2">Important Security Update</h3>
+    <p class="mb-0.5">
+      <b>Your account password will expire in 10 days,</b> please update it to maintain account security.
     </p>
+    <a href="https://security.example.com/password-update" target="_blank">Update Password</a>
   `,
 };
 
 export const closable = DefaultTemplate.bind({});
 closable.args = {
   closable: true,
-  template: `
+  slotTemplate: `
     <template #default>
       some text
     </template>
@@ -168,12 +101,15 @@ closable.args = {
 
 export const paragraphs = DefaultTemplate.bind({});
 paragraphs.args = {
-  template: `
+  slotTemplate: `
     <template #default>
       <p>
         Please be aware that the scheduled maintenance will occur this Saturday,
         from 12 AM to 4 AM. During this time, some services may be temporarily
-        unavailable. We apologize for any inconvenience this may cause and
+        unavailable.
+      </p>
+      <p>
+        We apologize for any inconvenience this may cause and
         appreciate your understanding. Our team is committed to improving
         the system's performance and reliability.
       </p>
@@ -183,24 +119,23 @@ paragraphs.args = {
 
 export const list = DefaultTemplate.bind({});
 list.args = {
-  template: `
-      <URow>
-        <ul>
-          <li>Check your email for verification link.</li>
-          <li>Update your password regularly to enhance security.</li>
-          <li>Enable two-factor authentication for added protection.</li>
-        </ul>
-
-        <ol>
-          <li>Sign in to your account using your credentials.</li>
-          <li>Navigate to the settings menu to update your profile.</li>
-          <li>Review your privacy settings and adjust them as needed.</li>
-        </ol>
-      </URow>
-    `,
+  slotTemplate: `
+    <URow>
+      <ul>
+        <li>Check your email for verification link.</li>
+        <li>Update your password regularly to enhance security.</li>
+        <li>Enable two-factor authentication for added protection.</li>
+      </ul>
+      <ol>
+        <li>Sign in to your account using your credentials.</li>
+        <li>Navigate to the settings menu to update your profile.</li>
+        <li>Review your privacy settings and adjust them as needed.</li>
+      </ol>
+    </URow>
+  `,
 };
 
-export const slotTitleAndDescription = SlotTemplate.bind({});
+export const slotTitleAndDescription = DefaultTemplate.bind({});
 slotTitleAndDescription.args = {
   slotTemplate: `
     <template #title>
@@ -212,8 +147,8 @@ slotTitleAndDescription.args = {
   `,
 };
 
-export const slotAlertLeft = SlotTemplate.bind({});
-slotAlertLeft.args = {
+export const slotLeft = DefaultTemplate.bind({});
+slotLeft.args = {
   slotTemplate: `
     <template #left>
       <UIcon
@@ -224,8 +159,8 @@ slotAlertLeft.args = {
   `,
 };
 
-export const slotAlertRight = SlotTemplate.bind({});
-slotAlertRight.args = {
+export const slotRight = DefaultTemplate.bind({});
+slotRight.args = {
   slotTemplate: `
     <template #right>
         <UIcon
@@ -236,8 +171,8 @@ slotAlertRight.args = {
   `,
 };
 
-export const slotAlertTop = SlotTemplate.bind({});
-slotAlertTop.args = {
+export const slotTop = DefaultTemplate.bind({});
+slotTop.args = {
   slotTemplate: `
     <template #top>
       <UIcon
@@ -248,8 +183,8 @@ slotAlertTop.args = {
   `,
 };
 
-export const slotAlertBottom = SlotTemplate.bind({});
-slotAlertBottom.args = {
+export const slotBottom = DefaultTemplate.bind({});
+slotBottom.args = {
   slotTemplate: `
     <template #bottom>
       <UIcon

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);