vueless 0.0.167 → 0.0.169

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.167",
+  "version": "0.0.169",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -21,7 +21,7 @@
     "sb:dev": "npx @vueless/web-types && node prepare.icons && storybook dev -p 6006 --docs --no-open",
     "sb:build": "npx @vueless/web-types && node prepare.icons && storybook build --docs",
     "sb:preview": "vite preview --host --outDir=storybook-static",
-    "package:prepare": "npx @vueless/web-types && node prepare.icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/"
+    "package:prepare": "npx @vueless/web-types && node prepare.icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && node prepare.package"
   },
   "dependencies": {
     "@tailwindcss/forms": "^0.5.7",
@@ -39,7 +39,7 @@
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vueless/plugin-vite": "^0.0.30",
     "@vueless/storybook": "^0.0.31",
-    "@vueless/web-types": "^0.0.11",
+    "@vueless/web-types": "^0.0.12",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",
     "eslint": "^8.55.0",

package/ui.text-alert/composables/attrs.composable.js

@@ -28,6 +28,7 @@ export function useAttrs(props) {
       cvaWrapper({
         color: getColor(props.color),
         bordered: props.bordered,
+        variant: props.variant,
       }),
       props.color,
     ),
@@ -37,6 +38,9 @@ export function useAttrs(props) {
 
   const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
   const bodyAttrs = getAttrs("body", { classes: bodyClasses });
+  const titleAttrs = getAttrs("title");
+  const descriptionAttrs = getAttrs("description");
+
   const buttonAttrs = getAttrs("button", { isComponent: true });
   const iconAttrs = getAttrs("icon", { isComponent: true });
 
@@ -47,5 +51,7 @@ export function useAttrs(props) {
     buttonAttrs,
     iconAttrs,
     hasSlotContent,
+    titleAttrs,
+    descriptionAttrs,
   };
 }

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

@@ -1,19 +1,21 @@
 export default /*tw*/ {
   wrapper: {
-    base: "p-4 space-x-4 flex justify-between items-start rounded-lg bg-{color}-50 text-{color}-700",
+    base: "p-4 flex flex-col rounded-lg",
     variants: {
-      color: {
-        grayscale: "bg-gray-100 text-gray-900",
-      },
-      bordered: {
-        true: "border border-{color}-100",
+      variant: {
+        primary: `bg-{color}-500 text-white`,
+        secondary: `bg-transparent border border-{color}-500`,
+        thirdary: `bg-{color}-50 text-{color}-700`,
       },
     },
-    compoundVariants: [{ color: "grayscale", bordered: true, class: "border-gray-200" }],
+    compoundVariants: [
+      { color: "grayscale", bordered: true, class: "border-gray-200" },
+      { variant: "thirdary", bordered: true, class: "border border-{color}-100" },
+    ],
   },
   body: {
     base: `
-      space-y-4 font-normal leading-normal
+      flex gap-2 items-baseline font-normal
       [&_b]:font-bold [&_i]: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
@@ -32,20 +34,25 @@ export default /*tw*/ {
       },
     },
   },
+  title: "font-bold text-lg leading-tight",
+  description: "text-sm",
   button: "",
   icon: "",
   iconName: "close",
   defaultVariants: {
-    color: "grayscale",
+    variant: "thirdary",
+    color: "brand",
     size: "md",
     timeout: 0,
     html: undefined,
     bordered: false,
-    closeIcon: false,
+    closable: false,
   },
   safelist: (colors) => [
     { pattern: `bg-(${colors})-50` },
+    { pattern: `bg-(${colors})-500` },
     { pattern: `text-(${colors})-700` },
     { pattern: `border-(${colors})-100` },
+    { pattern: `border-(${colors})-500` },
   ],
 };

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

@@ -2,6 +2,8 @@ import { getArgTypes, getSlotNames } from "../service.storybook";
 
 import UAlert from "../ui.text-alert";
 import URow from "../ui.container-row";
+import UGroup from "../ui.container-group";
+import UIcon from "../ui.image-icon";
 
 /**
  * The `UAlert` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.text-alert)
@@ -12,7 +14,7 @@ export default {
   component: UAlert,
   args: {
     text: "UHint",
-    slotTemplate: `
+    slotDefaultTemplate: `
       <template #default>
         <p>
           <b>Lorem ipsum dolor sit amet,</b>
@@ -30,19 +32,42 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UAlert },
+  components: { UAlert, UIcon },
   setup() {
     const slots = getSlotNames(UAlert.name);
 
     return { args, slots };
   },
   template: `
-    <UAlert v-bind="args">
-      ${args.slotTemplate || ""}
+    <UAlert v-bind="args" v-model="args.value">
+    ${args.slotDefaultTemplate}
+    ${args.slotTemplate || ""}
     </UAlert>
   `,
 });
 
+const VariantsTemplate = (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 ColorsTemplate = (args, { argTypes } = {}) => ({
   components: { UAlert, URow },
   setup() {
@@ -57,10 +82,9 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
         v-for="(color, index) in colors"
         v-bind="args"
         :color="color"
+        :title="color"
         :key="index"
-      >
-        ${args.slotTemplate}
-      </UAlert>
+      />
     </URow>
   `,
 });
@@ -81,48 +105,60 @@ const SizeTemplate = (args, { argTypes } = {}) => ({
         :size="size"
         :key="index"
       >
-        ${args.slotTemplate}
+        text
       </UAlert>
     </URow>
   `,
 });
 
+const HTMLTemplate = (args) => ({
+  components: { UAlert },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UAlert :html="args.html"  />
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const variants = VariantsTemplate.bind({});
+variants.args = {};
+
 export const colors = ColorsTemplate.bind({});
-colors.args = {
-  closeIcon: true,
-  slotTemplate: `
-     <template #default>
-       text
-     </template>
-  `,
-};
+colors.args = {};
 
-export const size = SizeTemplate.bind({});
-size.args = {
-  closeIcon: true,
-  slotTemplate: `
-     <template #default>
-       text
-     </template>
+export const sizes = SizeTemplate.bind({});
+sizes.args = {};
+
+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>
+    </p>
   `,
 };
 
-export const closeIcon = DefaultTemplate.bind({});
-closeIcon.args = {
-  closeIcon: true,
-  slotTemplate: `
-     <template #default>
-       some text
-     </template>
+export const closable = DefaultTemplate.bind({});
+closable.args = {
+  closable: true,
+  slotDefaultTemplate: `
+    <template #default>
+      some text
+    </template>
   `,
 };
 
 export const paragraphs = DefaultTemplate.bind({});
 paragraphs.args = {
-  slotTemplate: `
+  slotDefaultTemplate: `
     <template #default>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit,
@@ -141,8 +177,7 @@ paragraphs.args = {
 
 export const list = DefaultTemplate.bind({});
 list.args = {
-  slotTemplate: `
-    <template #default>
+  slotDefaultTemplate: `
       <URow>
         <ul>
           <li> Lorem ipsum dolor </li>
@@ -156,6 +191,65 @@ list.args = {
           <li> Lorem ipsum dolor </li>
         </ol>
       </URow>
-    </template>
     `,
 };
+
+export const slotTitleAndDescription = DefaultTemplate.bind({});
+slotTitleAndDescription.args = {
+  slotTemplate: `
+    <template #title>
+      <div>Alert Title</div>
+    </template>
+    <template #description>
+      <div>This is a custom description for the alert.</div>
+    </template>
+  `,
+};
+
+export const slotAlertLeft = DefaultTemplate.bind({});
+slotAlertLeft.args = {
+  slotTemplate: `
+    <template #left>
+      <UIcon
+        name="star"
+        color="gray"
+      />
+    </template>
+  `,
+};
+
+export const slotAlertRight = DefaultTemplate.bind({});
+slotAlertRight.args = {
+  slotTemplate: `
+    <template #right>
+        <UIcon
+        name="star"
+        color="gray"
+      />
+    </template>
+  `,
+};
+
+export const slotAlertTop = DefaultTemplate.bind({});
+slotAlertTop.args = {
+  slotTemplate: `
+    <template #top>
+      <UIcon
+        name="star"
+        color="gray"
+      />
+    </template>
+  `,
+};
+
+export const slotAlertBottom = DefaultTemplate.bind({});
+slotAlertBottom.args = {
+  slotTemplate: `
+    <template #bottom>
+      <UIcon
+        name="star"
+        color="gray"
+      />
+    </template>
+  `,
+};

package/ui.text-alert/index.vue

@@ -1,30 +1,51 @@
 <template>
   <div v-if="isShownAlert" :data-cy="dataCy" v-bind="wrapperAttrs">
+    <!-- @slot Use it to add something above text. -->
+    <slot name="top" />
+
+    <!-- Use it to add something instead of the title. -->
+    <slot name="title" :title="title">
+      <div v-bind="titleAttrs" v-text="title" />
+    </slot>
+
+    <!-- @slot Use it to add something instead of the description. -->
+    <slot name="description" :description="description">
+      <div v-bind="descriptionAttrs" v-text="description" />
+    </slot>
+
     <div v-bind="bodyAttrs">
-      <!-- @slot Use it to add something inside. -->
+      <!-- @slot Use it to add something before text. -->
+      <slot name="left" />
+
+      <!-- @slot Default slot. -->
       <slot />
+      <div v-if="!hasSlotContent($slots.default)" v-bind="bodyAttrs" v-html="html" />
 
-      <div v-if="!hasSlotContent($slots['default'])" v-html="html" />
+      <UButton
+        v-if="closable"
+        size="sm"
+        variant="thirdary"
+        :color="color"
+        square
+        v-bind="buttonAttrs"
+        @click="onClickClose"
+      >
+        <UIcon
+          internal
+          size="xs"
+          :color="color"
+          :name="config.iconName"
+          :data-cy="`${dataCy}-button`"
+          v-bind="iconAttrs"
+        />
+      </UButton>
+
+      <!-- @slot Use it to add something after text. -->
+      <slot name="right" />
     </div>
 
-    <UButton
-      v-if="closeIcon"
-      size="sm"
-      variant="thirdary"
-      :color="color"
-      square
-      v-bind="buttonAttrs"
-    >
-      <UIcon
-        internal
-        size="xs"
-        :color="color"
-        :name="config.iconName"
-        :data-cy="`${dataCy}-button`"
-        v-bind="iconAttrs"
-        @click="onHidden"
-      />
-    </UButton>
+    <!-- @slot Use it to add something under text. -->
+    <slot name="bottom" />
   </div>
 </template>
 
@@ -43,6 +64,15 @@ import { useAttrs } from "./composables/attrs.composable";
 defineOptions({ name: "UAlert" });
 
 const props = defineProps({
+  /**
+   * Alert variant.
+   * @values primary, secondary, thirdary
+   */
+  variant: {
+    type: String,
+    default: UIService.get(defaultConfig, UAlert).default.variant,
+  },
+
   /**
    * HTML or plain text.
    */
@@ -87,9 +117,9 @@ const props = defineProps({
   /**
    * Show close button.
    */
-  closeIcon: {
+  closable: {
     type: Boolean,
-    default: UIService.get(defaultConfig, UAlert).default.closeIcon,
+    default: UIService.get(defaultConfig, UAlert).default.closable,
   },
 
   /**
@@ -107,21 +137,46 @@ const props = defineProps({
     type: String,
     default: "",
   },
+
+  /**
+   * Alert title.
+   */
+  title: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Alert description.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
 });
 
 const emit = defineEmits(["hidden"]);
 
 const isShownAlert = ref(true);
 
-const { config, wrapperAttrs, bodyAttrs, iconAttrs, buttonAttrs, hasSlotContent } = useAttrs(props);
+const {
+  config,
+  wrapperAttrs,
+  bodyAttrs,
+  titleAttrs,
+  descriptionAttrs,
+  iconAttrs,
+  buttonAttrs,
+  hasSlotContent,
+} = useAttrs(props);
 
 onMounted(() => {
   if (props.timeout > 0) {
-    setTimeout(() => onHidden(), props.timeout);
+    setTimeout(() => onClickClose(), props.timeout);
   }
 });
 
-function onHidden() {
+function onClickClose() {
   isShownAlert.value = false;
   emit("hidden");
 }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.167",
+  "version": "0.0.169",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -254,6 +254,15 @@
           "name": "UAlert",
           "description": "",
           "attributes": [
+            {
+              "name": "variant",
+              "description": "Alert variant.",
+              "value": {
+                "kind": "expression",
+                "type": "'primary' | 'secondary' | 'thirdary'"
+              },
+              "default": "thirdary"
+            },
             {
               "name": "html",
               "description": "HTML or plain text.",
@@ -278,7 +287,7 @@
                 "kind": "expression",
                 "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white'"
               },
-              "default": "grayscale"
+              "default": "brand"
             },
             {
               "name": "bordered",
@@ -299,7 +308,7 @@
               "default": "0"
             },
             {
-              "name": "closeIcon",
+              "name": "closable",
               "description": "Show close button.",
               "value": {
                 "kind": "expression",
@@ -324,6 +333,24 @@
                 "type": "string"
               },
               "default": "\"\""
+            },
+            {
+              "name": "title",
+              "description": "Alert title.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "name": "description",
+              "description": "Alert description.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
             }
           ],
           "events": [
@@ -332,9 +359,32 @@
             }
           ],
           "slots": [
+            {
+              "name": "top",
+              "description": "Use it to add something above text."
+            },
+            {
+              "name": "title"
+            },
+            {
+              "name": "description",
+              "description": "Use it to add something instead of the description."
+            },
+            {
+              "name": "left",
+              "description": "Use it to add something before text."
+            },
             {
               "name": "default",
-              "description": "Use it to add something inside."
+              "description": "Default slot."
+            },
+            {
+              "name": "right",
+              "description": "Use it to add something after text."
+            },
+            {
+              "name": "bottom",
+              "description": "Use it to add something under text."
             }
           ],
           "source": {