vueless 0.0.235 → 0.0.237

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.235",
+  "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.form-input/configs/default.config.js

@@ -1,8 +1,8 @@
 export default /*tw*/ {
   label: "{ULabel}",
   inputWrapper: "flex relative w-full",
-  rightIconSlot: "flex items-center justify-end whitespace-nowrap pr-3 gap-1 rounded-dynamic rounded-l-none",
-  leftIconSlot: "flex items-center justify-end whitespace-nowrap pl-3 gap-1 rounded-dynamic rounded-r-none",
+  rightIconSlot: "flex items-center justify-end whitespace-nowrap pr-2 gap-1 rounded-dynamic rounded-l-none",
+  leftIconSlot: "flex items-center justify-end whitespace-nowrap pl-2 gap-1 rounded-dynamic rounded-r-none",
   passwordIcon: "",
   passwordVisibleIconName: "visibility-fill",
   passwordHiddenIconName: "visibility_off-fill",

package/ui.form-input/index.vue

@@ -12,6 +12,11 @@
     v-bind="labelAttrs"
   >
     <label :for="id" v-bind="blockAttrs">
+      <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapper">
+        <!-- @slot Use it to add something before the text. -->
+        <slot name="left" />
+      </span>
+
       <span
         v-if="hasSlotContent($slots['icon-left']) || iconLeft"
         ref="leftSlotWrapper"
@@ -27,11 +32,6 @@
         </slot>
       </span>
 
-      <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapper">
-        <!-- @slot Use it to add something before the text. -->
-        <slot name="left" />
-      </span>
-
       <span v-bind="inputWrapperAttrs">
         <input
           :id="id"
@@ -67,9 +67,6 @@
         />
       </label>
 
-      <!-- @slot Use it to add something after the text. -->
-      <slot name="right" />
-
       <span v-if="hasSlotContent($slots['icon-right']) || iconRight" v-bind="rightIconSlotAttrs">
         <!--
           @slot Use it to add icon after the text.
@@ -80,6 +77,9 @@
           <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" internal />
         </slot>
       </span>
+
+      <!-- @slot Use it to add something after the text. -->
+      <slot name="right" />
     </label>
   </ULabel>
 </template>

package/ui.form-input-search/configs/default.config.js

@@ -7,8 +7,8 @@ export default /*tw*/ {
     rightSlot: "pr-0",
     leftSlot: "pl-0",
   },
-  closeIcon: "{UIcon} flex h-full items-center",
-  closeIconName: "close",
+  clearIcon: "{UIcon} flex h-full items-center",
+  clearIconName: "close",
   searchIcon: "{UIcon}",
   searchIconName: "search",
   button: "{UButton} rounded-l-none ml-1 outline outline-1 outline-gray-900",

package/ui.form-input-search/index.vue

@@ -27,13 +27,14 @@
 
     <template #icon-right>
       <UIcon
+        v-if="modelValue"
         internal
         interactive
         color="gray"
-        :name="config.closeIconName"
+        :name="config.clearIconName"
         :data-cy="`${dataCy}-close`"
         :size="iconSize"
-        v-bind="closeIconAttrs"
+        v-bind="clearIconAttrs"
         @click="onClickClear"
       />
 
@@ -210,7 +211,7 @@ const emit = defineEmits([
 
 const localValue = ref("");
 
-const { config, inputAttrs, searchIconAttrs, closeIconAttrs, buttonAttrs } = useAttrs(props);
+const { config, inputAttrs, searchIconAttrs, clearIconAttrs, buttonAttrs } = useAttrs(props);
 
 const search = computed({
   get: () => props.modelValue,

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