vueless 0.0.226 → 0.0.227

package/package.json

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

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

@@ -4,38 +4,52 @@ export default /*tw*/ {
     variants: {
       variant: {
         primary: `bg-{color}-500 text-white`,
-        secondary: `bg-transparent border border-{color}-500`,
+        secondary: `bg-transparent border border-{color}-500 text-{color}-500`,
         thirdary: `bg-{color}-50 text-{color}-700`,
       },
     },
     compoundVariants: [
-      { color: "grayscale", bordered: true, class: "border-gray-200" },
       { 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` },
     ],
   },
   body: {
-    base: `
-      flex gap-2 items-baseline
-      font-normal leading-normal
-      [&_b]:font-bold [&_i]:italic [&_em]:italic [&_p]:font-normal
-      [&_a:not([class])]:underline [&_a:not([class])]:underline-offset-4
-      [&_a:not([class]):hover]:no-underline [&_a:not([class])]:font-bold
-      [&_ul]:font-normal [&_ol]:font-normal
-      [&_ul]:leading-normal [&_ol]:leading-normal
-      [&_ul]:list-disc [&_ol]:list-decimal
-      [&_ul]:ml-2 [&_ol]:ml-2
-    `,
+    base: "{UText} flex gap-2 items-baseline",
     variants: {
       size: {
-        xs: "text-xs space-y-2",
-        sm: "text-sm space-y-3",
-        md: "text-base space-y-4",
-        lg: "text-lg space-y-5",
+        xs: "text-xs",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+      },
+    },
+  },
+  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",
       },
     },
   },
-  title: "font-bold text-lg leading-tight",
-  description: "text-sm",
   button: "{UButton}",
   icon: "{UIcon}",
   iconName: "close",
@@ -51,6 +65,7 @@ export default /*tw*/ {
   safelist: (colors) => [
     { pattern: `bg-(${colors})-50` },
     { pattern: `bg-(${colors})-500` },
+    { pattern: `text-(${colors})-500` },
     { pattern: `text-(${colors})-700` },
     { pattern: `border-(${colors})-100` },
     { pattern: `border-(${colors})-500` },

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

@@ -12,25 +12,21 @@ export default {
   id: "4030",
   title: "Text & Content / Alert",
   component: UAlert,
-  args: {
-    text: "UHint",
-    slotDefaultTemplate: `
-      <template #default>
-        <p>
-          <b>Lorem ipsum dolor sit amet,</b>
-          <u>consectetur adipiscing elit,</u>
-          <em>sed do eiusmod tempor incididunt
-          ut labore et dolore magna aliqua.</em>
-          <a href="https://uk.wikipedia.org/wiki/Lorem_ipsum" target="_blank">Wikipedia</a>
-        </p>
-      </template>
-    `,
-  },
+  args: {},
   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 },
   setup() {
@@ -40,8 +36,20 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UAlert v-bind="args" v-model="args.value">
-    ${args.slotDefaultTemplate}
-    ${args.slotTemplate || ""}
+      ${args.template || defaultTemplate}
+    </UAlert>
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { UAlert, UIcon },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UAlert v-bind="args" v-model="args.value">
+      ${args.slotTemplate}
+      ${defaultTemplate}
     </UAlert>
   `,
 });
@@ -122,7 +130,10 @@ const HTMLTemplate = (args) => ({
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = {};
+Default.args = {
+  title: "Default Title",
+  description: "Default Description",
+};
 
 export const variants = VariantsTemplate.bind({});
 variants.args = {};
@@ -137,11 +148,10 @@ export const HTML = HTMLTemplate.bind({});
 HTML.args = {
   html: `
     <p>
-      <b>Lorem ipsum dolor sit amet,</b>
-      <u>consectetur adipiscing elit,</u>
-      <em>sed do eiusmod tempor incididunt
-      ut labore et dolore magna aliqua.</em>
-      <a href="https://uk.wikipedia.org/wiki/Lorem_ipsum" target="_blank">Wikipedia</a>
+      <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>
     </p>
   `,
 };
@@ -149,7 +159,7 @@ HTML.args = {
 export const closable = DefaultTemplate.bind({});
 closable.args = {
   closable: true,
-  slotDefaultTemplate: `
+  template: `
     <template #default>
       some text
     </template>
@@ -158,55 +168,51 @@ closable.args = {
 
 export const paragraphs = DefaultTemplate.bind({});
 paragraphs.args = {
-  slotDefaultTemplate: `
+  template: `
     <template #default>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-        sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-        ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit
-        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia
-        deserunt mollit anim id est laborum.
+        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
+        appreciate your understanding. Our team is committed to improving
+        the system's performance and reliability.
       </p>
-
     </template>
-    `,
+  `,
 };
 
 export const list = DefaultTemplate.bind({});
 list.args = {
-  slotDefaultTemplate: `
+  template: `
       <URow>
         <ul>
-          <li> Lorem ipsum dolor </li>
-          <li> Lorem ipsum dolor </li>
-          <li> Lorem ipsum dolor </li>
+          <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> Lorem ipsum dolor </li>
-          <li> Lorem ipsum dolor </li>
-          <li> Lorem ipsum dolor </li>
+          <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 = DefaultTemplate.bind({});
+export const slotTitleAndDescription = SlotTemplate.bind({});
 slotTitleAndDescription.args = {
   slotTemplate: `
     <template #title>
-      <div>Alert Title</div>
+      <div class="text-lg font-semibold">This is a custom title for the alert.</div>
     </template>
     <template #description>
-      <div>This is a custom description for the alert.</div>
+      <div class="italic">This is a custom description for the alert.</div>
     </template>
   `,
 };
 
-export const slotAlertLeft = DefaultTemplate.bind({});
+export const slotAlertLeft = SlotTemplate.bind({});
 slotAlertLeft.args = {
   slotTemplate: `
     <template #left>
@@ -218,7 +224,7 @@ slotAlertLeft.args = {
   `,
 };
 
-export const slotAlertRight = DefaultTemplate.bind({});
+export const slotAlertRight = SlotTemplate.bind({});
 slotAlertRight.args = {
   slotTemplate: `
     <template #right>
@@ -230,7 +236,7 @@ slotAlertRight.args = {
   `,
 };
 
-export const slotAlertTop = DefaultTemplate.bind({});
+export const slotAlertTop = SlotTemplate.bind({});
 slotAlertTop.args = {
   slotTemplate: `
     <template #top>
@@ -242,7 +248,7 @@ slotAlertTop.args = {
   `,
 };
 
-export const slotAlertBottom = DefaultTemplate.bind({});
+export const slotAlertBottom = SlotTemplate.bind({});
 slotAlertBottom.args = {
   slotTemplate: `
     <template #bottom>

package/ui.text-alert/index.vue

@@ -8,7 +8,7 @@
       @binding {string} title
     -->
     <slot name="title" :title="title">
-      <div v-bind="titleAttrs" v-text="title" />
+      <div v-if="title" v-bind="titleAttrs" v-text="title" />
     </slot>
 
     <!--
@@ -16,16 +16,22 @@
       @binding {string} description
     -->
     <slot name="description" :description="description">
-      <div v-bind="descriptionAttrs" v-text="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" />
 
-      <!-- @slot Default slot. -->
-      <slot />
-      <div v-if="!hasSlotContent($slots.default)" v-bind="bodyAttrs" v-html="html" />
+      <UText
+        v-if="hasSlotContent($slots.default) || html"
+        v-bind="bodyAttrs"
+        :size="size"
+        :html="html"
+      >
+        <!-- @slot Use it to add something inside. -->
+        <slot />
+      </UText>
 
       <UButton
         v-if="closable"
@@ -39,7 +45,7 @@
         <UIcon
           internal
           size="xs"
-          :color="color"
+          :color="iconColor"
           :name="config.iconName"
           :data-cy="`${dataCy}-button`"
           v-bind="iconAttrs"
@@ -56,10 +62,11 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, computed } from "vue";
 
 import UIcon from "../ui.image-icon";
 import UButton from "../ui.button";
+import UText from "../ui.text-block";
 import UIService from "../service.ui";
 
 import { UAlert } from "./constatns";
@@ -191,4 +198,12 @@ function onClickClose() {
   isShownAlert.value = false;
   emit("hidden");
 }
+
+const iconColor = computed(() => {
+  if (props.color === "white") {
+    return "gray";
+  }
+
+  return props.variant === "primary" ? "white" : props.color;
+});
 </script>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.226",
+  "version": "0.0.227",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -558,7 +558,7 @@
             },
             {
               "name": "default",
-              "description": "Default slot."
+              "description": "Use it to add something inside."
             },
             {
               "name": "right",