vueless 0.0.236 → 0.0.238

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.236",
+  "version": "0.0.238",
   "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/index.vue

@@ -1,6 +1,6 @@
 <template>
   <ULabel
-    ref="labelComponent"
+    ref="labelComponentRef"
     :for="id"
     :label="label"
     :description="description"
@@ -12,14 +12,14 @@
     v-bind="labelAttrs"
   >
     <label :for="id" v-bind="blockAttrs">
-      <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapper">
+      <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapperRef">
         <!-- @slot Use it to add something before the text. -->
         <slot name="left" />
       </span>
 
       <span
         v-if="hasSlotContent($slots['icon-left']) || iconLeft"
-        ref="leftSlotWrapper"
+        ref="leftSlotWrapperRef"
         v-bind="leftIconSlotAttrs"
       >
         <!--
@@ -35,7 +35,7 @@
       <span v-bind="inputWrapperAttrs">
         <input
           :id="id"
-          ref="input"
+          ref="inputRef"
           v-model="inputValue"
           :placeholder="placeholder"
           :type="inputType"
@@ -315,11 +315,11 @@ const props = defineProps({
 const slots = useSlots();
 
 const isShownPassword = ref(false);
-const input = ref(null);
-const labelComponent = ref(null);
-const leftSlotWrapper = ref(null);
+const inputRef = ref(null);
+const labelComponentRef = ref(null);
+const leftSlotWrapperRef = ref(null);
 
-defineExpose({ input });
+defineExpose({ inputRef });
 
 const isTypePassword = computed(() => props.type === "password");
 
@@ -440,12 +440,12 @@ function setLabelPosition() {
     return;
   }
 
-  let leftSlotOrIconWidth = leftSlotWrapper.value.getBoundingClientRect().width;
+  let leftSlotOrIconWidth = leftSlotWrapperRef.value.getBoundingClientRect().width;
 
-  const leftPaddingValue = parseFloat(getComputedStyle(input.value).paddingLeft);
+  const leftPaddingValue = parseFloat(getComputedStyle(inputRef.value).paddingLeft);
 
-  if (labelComponent.value.labelElement) {
-    labelComponent.value.labelElement.style.left = `${leftSlotOrIconWidth + leftPaddingValue}px`;
+  if (labelComponentRef.value.labelElement) {
+    labelComponentRef.value.labelElement.style.left = `${leftSlotOrIconWidth + leftPaddingValue}px`;
   }
 }
 </script>

package/ui.form-select/configs/default.config.js

@@ -13,7 +13,7 @@ export default /*tw*/ {
     variants: {
       error: {
         true: `
-          border-red-300 hover:border-red-300
+          bg-red-50 border-red-300 hover:border-red-300
           focus-within:border-red-500 focus-within:ring-red-100
         `,
       },

package/ui.form-switch/configs/default.config.js

@@ -2,8 +2,7 @@ export default /*tw*/ {
   label: "{ULabel}",
   wrapper: {
     base: `
-      transition duration-300
-      flex items-center p-0.5 relative rounded-3xl cursor-pointer
+      flex items-center p-0.5 relative rounded-3xl cursor-pointer transition
       ring-opacity-10 focus-within:ring-dynamic focus-within:ring-offset-dynamic
     `,
     variants: {
@@ -28,7 +27,7 @@ export default /*tw*/ {
   },
   input: "absolute size-0 opacity-0",
   circle: {
-    base: "transition duration-300 rounded-full bg-white flex items-center justify-center",
+    base: "transition-all duration-300 rounded-full bg-white flex items-center justify-center",
     variants: {
       size: {
         sm: "size-3",
@@ -46,7 +45,7 @@ export default /*tw*/ {
   selectedIconName: "check",
   unselectedIconName: "close",
   toggleLabel: {
-    base: "absolute text-center text-2xs font-medium uppercase text-white transition duration-300",
+    base: "absolute text-center text-2xs font-medium uppercase text-white",
     compoundVariants: [
       { toggleLabel: true, checked: true, class: "w-1/2 left-1" },
       { toggleLabel: true, checked: false, class: "w-1/2 right-1" },

package/ui.form-textarea/configs/default.config.js

@@ -12,7 +12,7 @@ export default /*tw*/ {
     variants: {
       error: {
         true: `
-          border-red-300
+          bg-red-50 border-red-300
           hover:border-red-400 hover:focus-within:border-red-500
           focus-within:border-red-500 focus-within:ring-red-100
         `,
@@ -51,7 +51,6 @@ export default /*tw*/ {
     type: "text",
     inputmode: "text",
     labelAlign: "topInside",
-    error: false,
     disabled: false,
     readonly: false,
     noAutocomplete: false,

package/ui.form-textarea/index.vue

@@ -1,6 +1,6 @@
 <template>
   <ULabel
-    ref="labelComponent"
+    ref="labelComponentRef"
     :for="id"
     :label="label"
     :error="error"
@@ -13,17 +13,17 @@
   >
     <label
       v-if="hasSlotContent($slots['left'])"
-      ref="leftSlotWrapper"
+      ref="leftSlotWrapperRef"
       :for="id"
       v-bind="leftSlotAttrs"
     >
       <!-- @slot Use it to add something before the text. -->
       <slot name="left" />
     </label>
-    <label ref="textareaWrapper" :for="id" v-bind="textareaWrapperAttrs">
+    <label ref="textareaWrapperRef" :for="id" v-bind="textareaWrapperAttrs">
       <textarea
         :id="id"
-        ref="textarea"
+        ref="textareaRef"
         v-model="localValue"
         :value="modelValue"
         :placeholder="placeholder"
@@ -231,10 +231,10 @@ const {
   hasSlotContent,
 } = useAttrs(props);
 
-const textarea = ref(null);
-const labelComponent = ref(null);
-const leftSlotWrapper = ref(null);
-const textareaWrapper = ref(null);
+const textareaRef = ref(null);
+const labelComponentRef = ref(null);
+const leftSlotWrapperRef = ref(null);
+const textareaWrapperRef = ref(null);
 
 const localValue = computed({
   get() {
@@ -245,7 +245,7 @@ const localValue = computed({
   },
 });
 
-defineExpose({ textarea });
+defineExpose({ textareaRef });
 
 onMounted(() => toggleReadonly(true));
 
@@ -292,13 +292,13 @@ function toggleReadonly(hasReadonly) {
 function setLabelPosition() {
   if (props.labelAlign === "top" || !hasSlotContent(slots["left"])) return;
 
-  const leftSlotWidth = leftSlotWrapper.value.getBoundingClientRect().width;
+  const leftSlotWidth = leftSlotWrapperRef.value.getBoundingClientRect().width;
 
-  if (labelComponent.value.labelElement) {
-    labelComponent.value.labelElement.style.left = `${leftSlotWidth}px`;
+  if (labelComponentRef.value.labelElement) {
+    labelComponentRef.value.labelElement.style.left = `${leftSlotWidth}px`;
   }
 
-  textareaWrapper.value.style.paddingLeft = `${leftSlotWidth}px`;
+  textareaWrapperRef.value.style.paddingLeft = `${leftSlotWidth}px`;
 }
 
 onMounted(() => setLabelPosition());

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