vueless 0.0.706 → 0.0.708

package/bin/constants.js

@@ -10,7 +10,6 @@ export default {
   gray: "cool",
   darkMode: "auto",
   ring: 2,
-  ringOffset: 2,
   ringOffsetColorLight: "#ffffff", // white
   ringOffsetColorDark: "#111827", // gray-900
   rounding: 8,

package/constants.js

@@ -18,7 +18,6 @@ export const COLOR_MODE_KEY = "vl-color-mode";
 export const DEFAULT_BRAND_COLOR = GRAYSCALE_COLOR;
 export const DEFAULT_GRAY_COLOR = COOL_COLOR;
 export const DEFAULT_RING = 2; /* pixels */
-export const DEFAULT_RING_OFFSET = 2; /* pixels */
 export const DEFAULT_RING_OFFSET_COLOR_LIGHT = "#ffffff"; // white
 export const DEFAULT_RING_OFFSET_COLOR_DARK = "#111827"; // gray-900
 export const DEFAULT_ROUNDING = 8; /* pixels */
@@ -173,7 +172,6 @@ export const TAILWIND_MERGE_EXTENSION = {
     },
     classGroups: {
       "ring-w": [{ ring: ["dynamic"] }],
-      "ring-offset-w": [{ "ring-offset": ["dynamic"] }],
       "ring-offset-color": [{ "ring-offset": ["color-dynamic"] }],
       "font-size": [{ text: ["2xs"] }],
       rounded: [{ rounded: ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.706",
+  "version": "0.0.708",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/preset-tailwind.js

@@ -13,7 +13,6 @@ import {
   TAILWIND_COLORS,
   DEFAULT_ROUNDING,
   DEFAULT_RING,
-  DEFAULT_RING_OFFSET,
   DEFAULT_RING_OFFSET_COLOR_LIGHT,
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
@@ -95,9 +94,6 @@ export const vuelessTailwindConfig = {
       ringWidth: {
         dynamic: "var(--vl-ring)",
       },
-      ringOffsetWidth: {
-        dynamic: "var(--vl-ring-offset)",
-      },
       ringOffsetColor: {
         dynamic: twColorWithOpacity("--vl-ring-offset-color"),
       },
@@ -106,7 +102,6 @@ export const vuelessTailwindConfig = {
       themeReplacements: {
         /* eslint-disable prettier/prettier */
         "var(--vl-ring)": globalSettings.ring || DEFAULT_RING,
-        "var(--vl-ring-offset)": globalSettings.ringOffset || DEFAULT_RING_OFFSET,
         "var(--vl-ring-offset-color)": globalSettings.ringOffsetColorLight || DEFAULT_RING_OFFSET_COLOR_LIGHT,
         "var(--vl-rounding-sm)": globalSettings.roundingSm || (globalSettings.ring || DEFAULT_ROUNDING) / 2,
         "var(--vl-rounding)": globalSettings.ring || DEFAULT_ROUNDING,

package/types.ts

@@ -100,11 +100,6 @@ export interface ThemeConfig {
    */
   ring?: number;
 
-  /**
-   * Default components ring offset width.
-   */
-  ringOffset?: number;
-
   /**
    * Default components ring color for light theme.
    */
@@ -345,7 +340,6 @@ export interface TailwindColorShades {
 
 export interface VuelessCssVariables {
   "--vl-ring": string;
-  "--vl-ring-offset": string;
   "--vl-ring-offset-color": string;
   "--vl-rounding-sm": string;
   "--vl-rounding": string;

package/ui.button/config.ts

@@ -3,7 +3,7 @@ export default /*tw*/ {
     base: `
       flex items-center justify-center font-medium !leading-snug whitespace-nowrap
       border border-transparent outline-none transition cursor-pointer
-      focus-visible:ring-dynamic focus-visible:ring-offset-dynamic
+      focus-visible:ring-dynamic focus-visible:ring-offset-2
       focus-visible:ring-{color}-600 dark:focus-visible:ring-{color}-400
       disabled:cursor-not-allowed disabled:ring-0 disabled:ring-offset-0
     `,

package/ui.form-checkbox/config.ts

@@ -7,7 +7,7 @@ export default /*tw*/ {
       active:border-{color}-600 active:bg-{color}-200
       focus:ring-0 focus:ring-offset-0
       checked:text-{color}-600
-      focus-visible:ring-{color}-600 focus-visible:ring-dynamic focus-visible:ring-offset-dynamic
+      focus-visible:ring-{color}-600 focus-visible:ring-dynamic focus-visible:ring-offset-2
       disabled:border-gray-300 disabled:bg-gray-100 disabled:cursor-not-allowed
     `,
     variants: {

package/ui.form-date-picker/config.ts

@@ -4,7 +4,7 @@ export default /*tw*/ {
   datepickerInputActive: {
     base: "{UInput} {>datepickerInput}",
     wrapper: {
-      base: "ring-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
+      base: "ring-dynamic ring-offset-2 ring-brand-700/15 border-brand-500 hover:border-brand-500",
       variants: {
         error: {
           true: "ring-red-700/15 border-red-500 hover:border-red-500",

package/ui.form-input/storybook/stories.ts

@@ -43,11 +43,7 @@ const DefaultTemplate: StoryFn<UInputArgs> = (args: UInputArgs) => ({
   components: { UInput, UIcon },
   setup() {
     const slots = getSlotNames(UInput.__name);
-    const errorMessage = computed(() =>
-      args.modelValue === "" && args.error !== ""
-        ? "This field is required. Please enter a value."
-        : "",
-    );
+    const errorMessage = computed(() => (args.modelValue === "" ? args.error : ""));
 
     return { args, slots, errorMessage };
   },
@@ -127,13 +123,13 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const Placeholder = DefaultTemplate.bind({});
-Placeholder.args = { modelValue: "", placeholder: "Type something here...", error: "" };
+Placeholder.args = { modelValue: "", placeholder: "Type something here..." };
 
 export const Description = DefaultTemplate.bind({});
 Description.args = { description: "Provide additional details if necessary." };
 
 export const Error = DefaultTemplate.bind({});
-Error.args = { modelValue: "" };
+Error.args = { error: "This field is required. Please enter a value." };
 
 export const Readonly = DefaultTemplate.bind({});
 Readonly.args = {

package/ui.form-input-rating/storybook/stories.ts

@@ -40,9 +40,7 @@ const DefaultTemplate: StoryFn<UInputRatingArgs> = (args: UInputRatingArgs) => (
   components: { UInputRating, UBadge },
   setup() {
     const slots = getSlotNames(UInputRating.__name);
-    const errorMessage = computed(() =>
-      !args.modelValue && args.error !== "" ? "Your review helps us improve our services." : "",
-    );
+    const errorMessage = computed(() => (!args.modelValue ? args.error : ""));
 
     return { args, slots, errorMessage };
   },
@@ -87,7 +85,11 @@ export const Description = DefaultTemplate.bind({});
 Description.args = { description: "Your review helps us improve our services." };
 
 export const Error = DefaultTemplate.bind({});
-Error.args = { selectable: true, modelValue: NaN };
+Error.args = {
+  selectable: true,
+  modelValue: 0,
+  error: "Please select a rating before submitting your review.",
+};
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };

package/ui.form-input-search/storybook/stories.ts

@@ -43,11 +43,7 @@ const DefaultTemplate: StoryFn<UInputSearchArgs> = (args: UInputSearchArgs) => (
   components: { UInputSearch, UButton, UIcon },
   setup() {
     const slots = getSlotNames(UInputSearch.__name);
-    const errorMessage = computed(() =>
-      args.modelValue === "" && args.error !== ""
-        ? "This field is required. Please enter a value."
-        : "",
-    );
+    const errorMessage = computed(() => (args.modelValue === "" ? args.error : ""));
 
     return { args, slots, errorMessage };
   },
@@ -102,13 +98,13 @@ export const Label = DefaultTemplate.bind({});
 Label.args = { label: "Search for product or brand" };
 
 export const Placeholder = DefaultTemplate.bind({});
-Placeholder.args = { modelValue: "", placeholder: "Type to search...", error: "" };
+Placeholder.args = { modelValue: "", placeholder: "Type to search..." };
 
 export const Description = DefaultTemplate.bind({});
 Description.args = { description: "Search for additional details." };
 
 export const Error = DefaultTemplate.bind({});
-Error.args = { modelValue: "" };
+Error.args = { error: "This field is required. Please enter a value." };
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };

package/ui.form-radio/config.ts

@@ -7,7 +7,7 @@ export default /*tw*/ {
       active:border-{color}-600 active:bg-{color}-200
       focus:ring-0 focus:ring-offset-0
       checked:text-{color}-600
-      focus-visible:ring-{color}-600 focus-visible:ring-dynamic focus-visible:ring-offset-dynamic
+      focus-visible:ring-{color}-600 focus-visible:ring-dynamic focus-visible:ring-offset-2
       disabled:border-gray-300 disabled:bg-gray-100 disabled:cursor-not-allowed
       disabled:checked:bg-gray-400 disabled:checked:border-transparent
     `,

package/ui.form-switch/config.ts

@@ -3,7 +3,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex items-center p-0.5 relative rounded-full cursor-pointer transition
-      focus-visible:ring-dynamic focus-visible:ring-offset-dynamic ring-{color}-600 outline-0
+      focus-visible:ring-dynamic focus-visible:ring-offset-2 ring-{color}-600 outline-0
     `,
     variants: {
       size: {

package/ui.form-textarea/UTextarea.vue

@@ -99,7 +99,7 @@ function getNewRowCount() {
 function onEnter() {
   const newRowCount = getNewRowCount();
 
-  if (newRowCount > currentRows.value) {
+  if (newRowCount > currentRows.value && !props.readonly) {
     currentRows.value = newRowCount;
   }
 }
@@ -107,7 +107,7 @@ function onEnter() {
 function onBackspace() {
   const newRowCount = getNewRowCount() - 1;
 
-  if (newRowCount < currentRows.value) {
+  if (newRowCount < currentRows.value && !props.readonly) {
     currentRows.value = newRowCount;
   }
 }

package/ui.form-textarea/storybook/stories.ts

@@ -1,3 +1,4 @@
+import { ref, computed } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -8,6 +9,9 @@ import {
 import UTextarea from "../../ui.form-textarea/UTextarea.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UCol from "../../ui.container-col/UCol.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UAvatar from "../../ui.image-avatar/UAvatar.vue";
+import tooltip from "../../directives/tooltip/vTooltip.ts";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -22,7 +26,9 @@ export default {
   title: "Form Inputs & Controls / Textarea",
   component: UTextarea,
   args: {
-    label: "Label",
+    label: "Your message",
+    modelValue:
+      "Hi there! I'd like to learn more about your services. When you have a moment, could you share some details?",
   },
   argTypes: {
     ...getArgTypes(UTextarea.__name),
@@ -38,11 +44,17 @@ const DefaultTemplate: StoryFn<UTextareaArgs> = (args: UTextareaArgs) => ({
   components: { UTextarea, UIcon },
   setup() {
     const slots = getSlotNames(UTextarea.__name);
+    const errorMessage = computed(() => (args.modelValue === "" ? args.error : ""));
 
-    return { args, slots };
+    return { args, slots, errorMessage };
   },
   template: `
-    <UTextarea v-bind="args" v-model="args.modelValue">
+    <UTextarea
+      v-bind="args"
+      v-model="args.modelValue"
+      :error="errorMessage"
+      class="max-w-96"
+    >
       ${args.slotTemplate || getSlotsFragment("")}
     </UTextarea>
   `,
@@ -51,18 +63,28 @@ const DefaultTemplate: StoryFn<UTextareaArgs> = (args: UTextareaArgs) => ({
 const EnumVariantTemplate: StoryFn<UTextareaArgs> = (args: UTextareaArgs, { argTypes }) => ({
   components: { UTextarea, UCol },
   setup() {
+    let filteredOptions = argTypes?.[args.enum]?.options;
+
+    if (args.enum === "labelAlign") {
+      filteredOptions = argTypes?.[args.enum]?.options?.filter(
+        (item) => item !== "right" && item !== "topWithDesc",
+      );
+    }
+
     return {
       args,
-      options: argTypes?.[args.enum]?.options,
+      filteredOptions,
     };
   },
   template: `
     <UCol>
-      <div class="w-1/3" v-for="(option, index) in options" :key="index">
+      <div class="w-1/3" v-for="(option, index) in filteredOptions" :key="index">
         <UTextarea
           v-bind="args"
           :[args.enum]="option"
-          :label="option"
+          :description="option"
+          rows="3"
+          class="max-w-96"
         />
       </div>
     </UCol>
@@ -72,53 +94,75 @@ const EnumVariantTemplate: StoryFn<UTextareaArgs> = (args: UTextareaArgs, { argT
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const LabelPlacement = EnumVariantTemplate.bind({});
-LabelPlacement.args = { enum: "labelAlign" };
-
 export const Placeholder = DefaultTemplate.bind({});
-Placeholder.args = { placeholder: "some placeholder text" };
+Placeholder.args = { modelValue: "", placeholder: "Enter text here..." };
+
+export const Description = DefaultTemplate.bind({});
+Description.args = { description: "Provide additional details in this field." };
+
+export const Error = DefaultTemplate.bind({});
+Error.args = { modelValue: "", error: "This field is required. Please enter a value." };
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
 
-export const Error = DefaultTemplate.bind({});
-Error.args = { error: "some error text" };
+export const LabelPlacement = EnumVariantTemplate.bind({});
+LabelPlacement.args = { enum: "labelAlign" };
 
-export const Description = DefaultTemplate.bind({});
-Description.args = { description: "some description text" };
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };
 
-export const Rows1 = DefaultTemplate.bind({});
-Rows1.args = { rows: "1" };
+export const Resizable = DefaultTemplate.bind({});
+Resizable.args = { resizable: true };
+
+export const RowsNumber = DefaultTemplate.bind({});
+RowsNumber.args = { rows: "6" };
+RowsNumber.parameters = {
+  docs: {
+    description: {
+      story: "You can set the number of visible rows via the `rows` prop.",
+    },
+  },
+};
 
 export const Readonly = DefaultTemplate.bind({});
-Readonly.args = { readonly: true, modelValue: "some value for read" };
+Readonly.args = { readonly: true, modelValue: "Meeting scheduled for Monday at 10 AM." };
 
 export const NoAutocomplete = DefaultTemplate.bind({});
-NoAutocomplete.args = { noAutocomplete: true };
-
-export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "size" };
-
-export const SlotLeft = DefaultTemplate.bind({});
-SlotLeft.args = {
-  slotTemplate: `
-    <template #left>
-      <UIcon
-        name="star"
-        color="black"
-      />
-    </template>
-  `,
+NoAutocomplete.args = {
+  noAutocomplete: true,
+  modelValue: "",
+  placeholder: "Try typing something here...",
+};
+NoAutocomplete.parameters = {
+  docs: {
+    description: {
+      story: "Disable browser's autocomplete.",
+    },
+  },
 };
 
-export const SlotRight = DefaultTemplate.bind({});
-SlotRight.args = {
-  slotTemplate: `
-    <template #right>
-      <UIcon
-        name="star"
-        color="black"
-      />
-    </template>
+export const Slots: StoryFn<UTextareaArgs> = (args) => ({
+  components: { UTextarea, URow, UIcon, UAvatar },
+  directives: { tooltip },
+  setup() {
+    const switchModel = ref(false);
+
+    return { args, switchModel };
+  },
+  template: `
+    <URow no-mobile>
+      <UTextarea v-bind="args">
+        <template #left>
+          <UAvatar />
+        </template>
+      </UTextarea>
+
+      <UTextarea v-bind="args">
+        <template #right>
+          <UIcon name="send" color="green" v-tooltip="'Send message'" />
+        </template>
+      </UTextarea>
+    </URow>
   `,
-};
+});

package/ui.form-textarea/types.ts

@@ -28,7 +28,7 @@ export interface Props {
   /**
    * Label placement.
    */
-  labelAlign?: "top" | "topInside" | "topWithDesc" | "left" | "right";
+  labelAlign?: "topInside" | "top" | "topWithDesc" | "left" | "right";
 
   /**
    * Set description for component.

package/ui.text-badge/config.ts

@@ -16,7 +16,7 @@ export default /*tw*/ {
         true: "rounded-full",
       },
       tabindex: {
-        true: "cursor-pointer focus-visible:ring-dynamic focus-visible:ring-offset-dynamic focus-visible:ring-{color}-600",
+        true: "cursor-pointer focus-visible:ring-dynamic focus-visible:ring-offset-2 focus-visible:ring-{color}-600",
       },
       color: {
         grayscale: "focus-visible:ring-gray-900",

package/utils/theme.ts

@@ -11,7 +11,6 @@ import {
   GRAYSCALE_COLOR,
   TAILWIND_COLORS,
   DEFAULT_RING,
-  DEFAULT_RING_OFFSET,
   DEFAULT_ROUNDING,
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
@@ -42,7 +41,6 @@ declare interface RootCSSVariableOptions {
   brand: string;
   gray: string;
   ring: number;
-  ringOffset: number;
   ringOffsetColorDark: string;
   ringOffsetColorLight: string;
   roundingSm: number;
@@ -158,7 +156,6 @@ export function setTheme(config: Config = {}) {
     config.gray ?? getSelectedGrayColor() ?? vuelessConfig.gray ?? DEFAULT_GRAY_COLOR;
 
   const ring = config.ring ?? vuelessConfig.ring ?? DEFAULT_RING;
-  const ringOffset = config.ringOffset ?? vuelessConfig.ringOffset ?? DEFAULT_RING_OFFSET;
 
   const ringOffsetColorDark =
     config.ringOffsetColorDark ??
@@ -202,7 +199,6 @@ export function setTheme(config: Config = {}) {
     brand,
     gray,
     ring,
-    ringOffset,
     ringOffsetColorDark,
     ringOffsetColorLight,
     roundingSm,
@@ -245,7 +241,6 @@ function setRootCSSVariables(options: RootCSSVariableOptions) {
     brand,
     gray,
     ring,
-    ringOffset,
     ringOffsetColorDark,
     ringOffsetColorLight,
     roundingSm,
@@ -263,7 +258,6 @@ function setRootCSSVariables(options: RootCSSVariableOptions) {
     "--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,
     "--vl-rounding-lg": `${Number(roundingLg) / PX_IN_REM}rem`,
     "--vl-ring": `${Math.max(0, ring)}px`,
-    "--vl-ring-offset": `${Math.max(0, ringOffset)}px`,
     "--vl-ring-offset-color": convertHexInRgb(defaultRingOffsetColor),
     "--vl-color-gray-default": convertHexInRgb(colors[gray]?.[defaultBrandShade]),
     "--vl-color-brand-default": convertHexInRgb(colors[brand]?.[defaultGrayShade]),