vueless 0.0.702 → 0.0.704

package/ui.form-input-search/config.ts

@@ -4,18 +4,13 @@ export default /*tw*/ {
     base: "{UInput} {>searchInput}",
     rightSlot: "pr-0",
   },
-  clearIcon: {
+  inputIcon: {
     base: "{UIcon}",
-    defaults: {
-      size: {
-        sm: "xs",
-        md: "sm",
-        lg: "md",
+    variants: {
+      disabled: {
+        true: "text-gray-400 pointer-events-none",
       },
     },
-  },
-  searchIcon: {
-    base: "{UIcon}",
     defaults: {
       size: {
         sm: "xs",
@@ -24,13 +19,15 @@ export default /*tw*/ {
       },
     },
   },
+  clearIcon: "{>inputIcon}",
+  searchIcon: "{>inputIcon}",
   searchButton: {
     base: "{UButton} rounded-l-none ml-1 outline outline-1 outline-gray-900",
     defaults: {
       size: {
         sm: "xs",
-        md: "md",
-        lg: "lg",
+        md: "sm",
+        lg: "md",
       },
     },
   },

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

@@ -1,3 +1,4 @@
+import { computed } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -8,14 +9,17 @@ import {
 import UInputSearch from "../../ui.form-input-search/UInputSearch.vue";
 import UButton from "../../ui.button/UButton.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 UBadge from "../../ui.text-badge/UBadge.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
 
 interface UInputSearchArgs extends Props {
   slotTemplate?: string;
-  enum: "size";
+  enum: "size" | "labelAlign";
 }
 
 export default {
@@ -25,6 +29,9 @@ export default {
   argTypes: {
     ...getArgTypes(UInputSearch.__name),
   },
+  args: {
+    modelValue: "Which UI library is the best?",
+  },
   parameters: {
     docs: {
       ...getDocsDescription(UInputSearch.__name),
@@ -36,70 +43,142 @@ 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."
+        : "",
+    );
 
-    return { args, slots };
+    return { args, slots, errorMessage };
   },
   template: `
-    <UInputSearch v-bind="args" v-model="args.modelValue">
+    <UInputSearch
+      v-bind="args"
+      v-model="args.modelValue"
+      :error="errorMessage"
+      class="max-w-96"
+    >
       ${args.slotTemplate || getSlotsFragment("")}
     </UInputSearch>
   `,
 });
 
 const EnumVariantTemplate: StoryFn<UInputSearchArgs> = (args: UInputSearchArgs, { argTypes }) => ({
-  components: { UInputSearch, URow },
+  components: { UInputSearch, 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: `
-    <URow>
+    <UCol>
       <UInputSearch
-        v-for="(option, index) in options"
+        v-for="(option, index) in filteredOptions"
         :key="index"
         v-bind="args"
         v-model="args.modelValue"
         :[args.enum]="option"
+        :placeholder="option"
+        class="max-w-96"
       >
       </UInputSearch>
-    </URow>
+    </UCol>
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const SearchButton = DefaultTemplate.bind({});
-SearchButton.args = { searchButtonLabel: "Search" };
+export const Label = DefaultTemplate.bind({});
+Label.args = { label: "Search for product or brand" };
 
-export const MinLength = DefaultTemplate.bind({});
-MinLength.args = { minLength: 4 };
+export const Placeholder = DefaultTemplate.bind({});
+Placeholder.args = { modelValue: "", placeholder: "Type to search...", error: "" };
+
+export const Description = DefaultTemplate.bind({});
+Description.args = { description: "Search for additional details." };
+
+export const Error = DefaultTemplate.bind({});
+Error.args = { modelValue: "" };
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
 
 export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "size" };
+Sizes.args = { enum: "size", modelValue: "" };
 
-export const LeftIcon = DefaultTemplate.bind({});
-LeftIcon.args = { leftIcon: "star" };
+export const LabelPlacement = EnumVariantTemplate.bind({});
+LabelPlacement.args = { enum: "labelAlign", modelValue: "", label: "Search for product or brand" };
 
-export const RightIcon = DefaultTemplate.bind({});
-RightIcon.args = { rightIcon: "star" };
+export const SearchButton = DefaultTemplate.bind({});
+SearchButton.args = { searchButtonLabel: "Search" };
+SearchButton.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "`searchButtonLabel` prop shows a button with a passed label instead of the default search icon. When clicked, it triggers the search event.",
+    },
+  },
+};
 
-export const LeftSlot = DefaultTemplate.bind({});
-LeftSlot.args = {
-  slotTemplate: `
-    <template #left>
-      <UIcon name="star" />
-    </template>
-  `,
+export const MinLength = DefaultTemplate.bind({});
+MinLength.args = { minLength: 4 };
+MinLength.parameters = {
+  docs: {
+    description: {
+      story:
+        "Determines minimum character length for search. If not met, search event is not fired.",
+    },
+  },
 };
 
-export const RightSlot = DefaultTemplate.bind({});
-RightSlot.args = {
-  slotTemplate: `
-    <template #right>
-      <UIcon name="star" />
-    </template>
+export const IconProps: StoryFn<UInputSearchArgs> = (args) => ({
+  components: { UInputSearch, URow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow>
+      <UInputSearch
+        left-icon="travel_explore"
+        placeholder="Search for a travel destination"
+      />
+      <UInputSearch
+        right-icon="person_search"
+        placeholder="Search for a person"
+      />
+    </URow>
   `,
-};
+});
+
+export const Slots: StoryFn<UInputSearchArgs> = (args) => ({
+  components: { UInputSearch, URow, UButton, UAvatar, UBadge },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow no-mobile>
+      <UInputSearch v-bind="args" :config="{ searchInput: { leftSlot: 'pl-0' } }">
+        <template #left>
+          <UAvatar size="sm" />
+        </template>
+      </UInputSearch>
+
+      <UInputSearch v-bind="args" :config="{ searchInput: { rightSlot: 'pr-0' } }">
+        <template #right>
+          <UBadge label="Search" size="sm" color="green" />
+        </template>
+      </UInputSearch>
+    </URow>
+  `,
+});

package/ui.form-input-search/types.ts

@@ -5,6 +5,11 @@ import type { ComponentConfig } from "../types.ts";
 export type Config = typeof defaultConfig;
 
 export interface Props {
+  /**
+   * Input label.
+   */
+  label?: string;
+
   /**
    * Search input value.
    */
@@ -23,12 +28,7 @@ export interface Props {
   /**
    * Label placement.
    */
-  labelAlign?: "top" | "topInside" | "topWithDesc" | "left" | "right";
-
-  /**
-   * Input label.
-   */
-  label?: string;
+  labelAlign?: "topInside" | "top" | "topWithDesc" | "left" | "right";
 
   /**
    * Input description.

package/ui.form-label/config.ts

@@ -33,13 +33,13 @@ export default /*tw*/ {
       },
       align: {
         top: "font-medium",
-        topInside: "font-normal absolute left-3 text-gray-500 group-focus-within:text-brand-500",
+        topInside: "font-normal absolute left-3 text-gray-500 group-focus-within:text-brand-600",
         topWithDesc: "font-medium",
         left: "font-normal",
         right: "font-normal",
       },
       error: {
-        true: "text-red-500",
+        true: "text-red-600 group-focus-within:text-red-600",
       },
       disabled: {
         true: "text-gray-500 cursor-not-allowed",
@@ -75,7 +75,7 @@ export default /*tw*/ {
         right: "pt-0.5",
       },
       error: {
-        true: "text-red-500",
+        true: "text-red-600",
       },
     },
   },

package/ui.form-radio/URadio.vue

@@ -21,6 +21,7 @@ const setRadioGroupSelectedItem = inject<SetRadioGroupSelectedItem>(
 const getRadioGroupName = inject("getRadioGroupName", null);
 const getRadioGroupColor = inject("getRadioGroupColor", null);
 const getRadioGroupSize = inject("getRadioGroupSize", null);
+const getRadioGroupDisabled = inject("getRadioGroupDisabled", null);
 const getRadioGroupSelectedItem = inject("getRadioGroupSelectedItem", null);
 
 const props = withDefaults(defineProps<Props>(), {
@@ -42,6 +43,7 @@ const localValue = ref<LocalValueType>("");
 const radioName = ref("");
 const radioColor = ref(toValue(getRadioGroupColor) || props.color);
 const radioSize = ref(toValue(getRadioGroupSize) || props.size);
+const radioDisabled = ref(toValue(getRadioGroupDisabled) || props.disabled);
 
 const isChecked = computed(() => {
   const currentValue = props.modelValue ?? localValue.value;
@@ -65,6 +67,7 @@ onMounted(() => {
 
 watchEffect(() => (radioColor.value = toValue(getRadioGroupColor) || props.color));
 watchEffect(() => (radioSize.value = toValue(getRadioGroupSize) || props.size));
+watchEffect(() => (radioDisabled.value = toValue(getRadioGroupDisabled) || props.disabled));
 watchEffect(() => {
   localValue.value = toValue(getRadioGroupSelectedItem) || null;
   emit("update:modelValue", props.value);
@@ -101,7 +104,7 @@ const { radioAttrs, radioLabelAttrs } = useUI<Config>(defaultConfig, mutatedProp
     :error="error"
     :size="radioSize"
     :align="labelAlign"
-    :disabled="disabled"
+    :disabled="radioDisabled"
     :description="description"
     interactive
     v-bind="radioLabelAttrs"
@@ -121,7 +124,7 @@ const { radioAttrs, radioLabelAttrs } = useUI<Config>(defaultConfig, mutatedProp
       :value="radioValue"
       :name="radioName"
       :checked="checked || isChecked"
-      :disabled="disabled"
+      :disabled="radioDisabled"
       v-bind="radioAttrs"
       :data-test="dataTest"
       @change="onChange"

package/ui.form-radio/config.ts

@@ -2,11 +2,14 @@ export default /*tw*/ {
   radioLabel: "{ULabel}",
   radio: {
     base: `
-      border cursor-pointer transition checked:text-{color}-600
-      border-gray-300 hover:border-gray-400 focus:border-{color}-500 active:border-{color}-800
-      focus:ring-{color}-700/15 focus:ring-dynamic focus:ring-offset-dynamic
-      disabled:border-gray-300 disabled:text-gray-100
-      checked:disabled:border-gray-400 checked:disabled:text-gray-400 disabled:cursor-not-allowed
+      border border-gray-300 bg-white cursor-pointer transition
+      hover:border-gray-400
+      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
+      disabled:border-gray-300 disabled:bg-gray-100 disabled:cursor-not-allowed
+      disabled:checked:bg-gray-400 disabled:checked:border-transparent
     `,
     variants: {
       size: {
@@ -15,7 +18,10 @@ export default /*tw*/ {
         lg: "size-6",
       },
       color: {
-        grayscale: "focus:ring-gray-700/15 focus:border-gray-500 active:border-gray-800 checked:text-gray-900",
+        grayscale: `
+          focus-visible:ring-gray-900
+          checked:text-gray-900 checked:hover:text-gray-800 checked:active:text-gray-700
+        `,
       },
     },
   },

package/ui.form-radio-group/URadioGroup.vue

@@ -41,6 +41,7 @@ provide("getRadioGroupSelectedItem", () => selectedItem.value);
 provide("getRadioGroupName", () => props.name);
 provide("getRadioGroupColor", () => props.color);
 provide("getRadioGroupSize", () => props.size);
+provide("getRadioGroupDisabled", () => props.disabled);
 
 /**
  * Get element / nested component attributes for each config token ✨

package/ui.form-select/config.ts

@@ -4,16 +4,13 @@ export default /*tw*/ {
     base: `
       flex flex-row-reverse justify-between w-full min-h-full box-border relative
       rounded-dynamic border border-gray-300 bg-white
-      hover:border-gray-400 hover:transition hover:focus-within:border-brand-500
-      focus-within:ring-brand-700/15 focus-within:ring-dynamic focus-within:ring-offset-dynamic
-      focus-within:border-brand-500 focus-within:outline-none
+      hover:border-gray-400 hover:transition hover:focus-within:border-brand-600
+      focus-within:ring-brand-600 focus-within:ring-dynamic focus-within:ring-offset-0
+      focus-within:border-brand-600 focus-within:outline-none
     `,
     variants: {
       error: {
-        true: `
-          bg-red-50 border-red-300 hover:border-red-300
-          focus-within:border-red-500 focus-within:ring-red-700/15
-        `,
+        true: "!border-red-600 focus-within:ring-red-600",
       },
       disabled: {
         true: `

package/ui.form-switch/USwitch.vue

@@ -108,15 +108,21 @@ const {
       <slot name="label" :label="label" />
     </template>
 
-    <label :for="elementId" v-bind="wrapperAttrs">
+    <label
+      tabindex="0"
+      :for="elementId"
+      v-bind="wrapperAttrs"
+      @keydown.enter="onKeydownSpace"
+      @keydown.space.prevent="onKeydownSpace"
+    >
       <input
         :id="elementId"
         v-model="checkedValue"
+        tabindex="-1"
         type="checkbox"
         :disabled="disabled"
         v-bind="inputAttrs"
         @click="onClickToggle"
-        @keydown.space="onKeydownSpace"
       />
 
       <span v-bind="circleAttrs">

package/ui.form-switch/config.ts

@@ -2,32 +2,35 @@ export default /*tw*/ {
   switchLabel: "{ULabel}",
   wrapper: {
     base: `
-      flex items-center p-0.5 relative rounded-3xl cursor-pointer transition
-      focus-within:ring-dynamic focus-within:ring-offset-dynamic
+      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
     `,
     variants: {
-      checked: {
-        true: "bg-{color}-600 ring-{color}-700/15 hover:bg-{color}-700 active:bg-{color}-800",
-        false: "bg-gray-300 ring-gray-700/15 hover:bg-gray-400 active:bg-gray-500",
-      },
       size: {
         sm: "w-6",
         md: "w-8",
         lg: "w-10",
       },
+      color: {
+        grayscale: "ring-gray-900",
+      },
+      checked: {
+        true: "bg-{color}-600 hover:bg-{color}-700 active:bg-{color}-800",
+        false: "bg-gray-300 hover:bg-gray-400 active:bg-gray-600",
+      },
     },
     compoundVariants: [
       { toggleLabel: true, size: "sm", class: "w-10" },
       { toggleLabel: true, size: "md", class: "w-12" },
       { toggleLabel: true, size: "lg", class: "w-14" },
+      { color: "grayscale", checked: true, class: "bg-gray-900 hover:bg-gray-800 active:bg-gray-700" },
       { disabled: true, checked: false, class: "bg-gray-300" },
       { disabled: true, checked: true, class: "bg-gray-400" },
-      { color: "grayscale", disabled: false, checked: true, class: "bg-gray-900 ring-gray-700/15" },
     ],
   },
   input: "absolute size-0 opacity-0",
   circle: {
-    base: "transition-all duration-300 rounded-full bg-white flex items-center justify-center",
+    base: "rounded-full bg-white flex items-center justify-center transition-all",
     variants: {
       size: {
         sm: "size-3",

package/ui.form-switch/types.ts

@@ -53,7 +53,6 @@ export interface Props {
     | "pink"
     | "rose"
     | "gray"
-    | "white"
     | "brand";
 
   /**

package/ui.form-textarea/config.ts

@@ -1,27 +1,21 @@
 export default /*tw*/ {
   textareaLabel: "{ULabel}",
-  leftSlot: "flex items-center justify-center whitespace-nowrap pl-3 gap-1 rounded-dynamic rounded-r-none",
-  rightSlot: "flex items-center justify-center whitespace-nowrap pr-3 gap-1 rounded-dynamic rounded-l-none",
+  slot: "flex items-center justify-center whitespace-nowrap gap-1 rounded-dynamic",
+  leftSlot: "{>slot} pl-3 rounded-r-none",
+  rightSlot: "{>slot} pr-3 rounded-l-none",
   wrapper: {
     base: `
       flex bg-white transition w-full
-      rounded-dynamic border border-gray-300 hover:border-gray-400 hover:focus-within:border-brand-500
-      focus-within:border-brand-500 focus-within:ring-dynamic focus-within:ring-offset-dynamic
-      focus-within:ring-brand-700/15 focus-within:outline-none
+      rounded-dynamic border border-gray-300 hover:border-gray-400 hover:focus-within:border-brand-600
+      focus-within:border-brand-600 focus-within:ring-dynamic focus-within:ring-offset-0
+      focus-within:ring-brand-600 focus-within:outline-none
     `,
     variants: {
       error: {
-        true: `
-          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-700/15
-        `,
+        true: "!border-red-600 focus-within:ring-red-600",
       },
       disabled: {
-        true: `
-            focus-within:ring-0 focus-within:ring-offset-0 bg-gray-100
-            hover:border-gray-300 focus-within:border-gray-300 hover:focus-within:border-gray-300
-          `,
+        true: "!border-gray-300 focus-within:ring-0 bg-gray-100",
       },
     },
   },

package/ui.navigation-breadcrumbs/UBreadcrumbs.vue

@@ -76,7 +76,6 @@ const { config, breadcrumbsAttrs, breadcrumbLinkAttrs, breadcrumbIconAttrs, divi
         :underlined="underlined"
         :dashed="dashed"
         :disabled="link.disabled || (!link.to && !link.href)"
-        :ring="false"
         v-bind="breadcrumbLinkAttrs"
         :data-test="dataTest"
         @click="onClickLink(link)"

package/ui.navigation-breadcrumbs/types.ts

@@ -56,7 +56,7 @@ export interface Props {
   underlined?: boolean;
 
   /**
-   * Set breadcrumbs' underline style as dashed.
+   * Set links underline style as dashed.
    */
   dashed?: boolean;
 

package/ui.navigation-pagination/UPagination.vue

@@ -124,7 +124,6 @@ const {
   <div v-bind="paginationAttrs">
     <UButton
       v-if="showFirst"
-      :ring="false"
       variant="thirdary"
       :label="firstLabel"
       :square="!firstLabel"
@@ -138,6 +137,7 @@ const {
         <UIcon
           v-if="!firstLabel"
           internal
+          color="brand"
           :name="config.defaults.firstIcon"
           v-bind="firstIconAttrs"
         />
@@ -145,7 +145,6 @@ const {
     </UButton>
 
     <UButton
-      :ring="false"
       variant="thirdary"
       :label="prevLabel"
       :square="!prevLabel"
@@ -156,7 +155,13 @@ const {
     >
       <!-- @slot Use it to add something instead of the "prev" label. -->
       <slot name="prev">
-        <UIcon v-if="!prevLabel" internal :name="config.defaults.prevIcon" v-bind="prevIconAttrs" />
+        <UIcon
+          v-if="!prevLabel"
+          internal
+          color="brand"
+          :name="config.defaults.prevIcon"
+          v-bind="prevIconAttrs"
+        />
       </slot>
     </UButton>
 
@@ -165,7 +170,6 @@ const {
         v-if="!isFinite(page.number)"
         square
         disabled
-        :ring="false"
         variant="thirdary"
         v-bind="inactiveButtonAttrs"
       >
@@ -176,7 +180,6 @@ const {
       <UButton
         v-else-if="page.isActive"
         filled
-        :ring="false"
         :variant="variant"
         :label="String(page.number)"
         :disabled="disabled"
@@ -186,7 +189,6 @@ const {
 
       <UButton
         v-else
-        :ring="false"
         variant="thirdary"
         :label="String(page.number)"
         :disabled="disabled"
@@ -197,7 +199,6 @@ const {
     </template>
 
     <UButton
-      :ring="false"
       variant="thirdary"
       :label="nextLabel"
       :square="!nextLabel"
@@ -208,13 +209,18 @@ const {
     >
       <!-- @slot Use it to add something instead of the "next" label. -->
       <slot name="next">
-        <UIcon v-if="!nextLabel" internal :name="config.defaults.nextIcon" v-bind="nextIconAttrs" />
+        <UIcon
+          v-if="!nextLabel"
+          internal
+          color="brand"
+          :name="config.defaults.nextIcon"
+          v-bind="nextIconAttrs"
+        />
       </slot>
     </UButton>
 
     <UButton
       v-if="showLast"
-      :ring="false"
       variant="thirdary"
       :label="lastLabel"
       :square="!lastLabel"
@@ -225,7 +231,13 @@ const {
     >
       <!-- @slot Use it to add something instead of the "last" label. -->
       <slot name="last">
-        <UIcon v-if="!lastLabel" internal :name="config.defaults.lastIcon" v-bind="lastIconAttrs" />
+        <UIcon
+          v-if="!lastLabel"
+          internal
+          color="brand"
+          :name="config.defaults.lastIcon"
+          v-bind="lastIconAttrs"
+        />
       </slot>
     </UButton>
   </div>