vueless 0.0.657 → 0.0.659

package/package.json

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

package/ui.button/config.ts

@@ -47,8 +47,8 @@ export default /*tw*/ {
         false: "rounded-dynamic",
         true: "rounded-full",
       },
-      noRing: {
-        true: "!ring-0 !ring-offset-0",
+      ring: {
+        false: "!ring-0 !ring-offset-0",
       },
       loading: {
         true: "gap-0 pointer-events-none",
@@ -187,7 +187,7 @@ export default /*tw*/ {
     block: false,
     square: false,
     filled: false,
-    noRing: false,
+    ring: true,
     loading: false,
     disabled: false,
   },

package/ui.button/storybook/stories.ts

@@ -156,7 +156,7 @@ export const Disabled = EnumVariantTemplate.bind({});
 Disabled.args = { enum: "variant", disabled: true };
 
 export const NoRing = DefaultTemplate.bind({});
-NoRing.args = { noRing: true };
+NoRing.args = { ring: false };
 
 export const Colors = ColorTemplate.bind({});
 Colors.args = {};

package/ui.button/types.ts

@@ -101,9 +101,9 @@ export interface Props {
   loading?: boolean;
 
   /**
-   * Remove button ring on focus.
+   * Show button ring on focus.
    */
-  noRing?: boolean;
+  ring?: boolean;
 
   /**
    * Unique element id.

package/ui.button-link/config.ts

@@ -20,8 +20,8 @@ export default /*tw*/ {
       defaultSlot: {
         true: "flex items-center focus-within:ring-0 focus-within:ring-offset-0",
       },
-      noRing: {
-        true: "!ring-0 !ring-offset-0",
+      ring: {
+        false: "!ring-0 !ring-offset-0",
       },
       block: {
         true: "w-full",
@@ -87,7 +87,7 @@ export default /*tw*/ {
     wrapperExactActiveClass: "",
     underlined: undefined,
     block: false,
-    noRing: false,
+    ring: true,
     dashed: false,
     disabled: false,
     targetBlank: false,

package/ui.button-link/storybook/stories.ts

@@ -183,7 +183,7 @@ export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
 
 export const NoRing = DefaultTemplate.bind({});
-NoRing.args = { noRing: true };
+NoRing.args = { ring: false };
 
 export const Block = DefaultTemplate.bind({});
 Block.args = { block: true };

package/ui.button-link/types.ts

@@ -118,9 +118,9 @@ export interface Props {
   block?: boolean;
 
   /**
-   * Remove outline ring on focus.
+   * Show link ring on focus.
    */
-  noRing?: boolean;
+  ring?: boolean;
 
   /**
    * Component config object.

package/ui.button-toggle/UToggle.vue

@@ -61,7 +61,7 @@ provide("getToggleRound", () => props.round);
 provide("getToggleBlock", () => props.block);
 provide("getToggleSquare", () => props.square);
 provide("getToggleDisabled", () => props.disabled);
-provide("getToggleNoRing", () => props.noRing);
+provide("getToggleRing", () => props.ring);
 provide("getToggleSplit", () => props.split);
 
 provide("toggleSelectedValue", {
@@ -82,6 +82,7 @@ const { toggleLabelAttrs, itemsAttrs, itemAttrs } = useUI<Config>(defaultConfig)
     :description="description"
     :align="labelAlign"
     :disabled="disabled"
+    :error="error"
     centred
     v-bind="toggleLabelAttrs"
     :data-test="dataTest"

package/ui.button-toggle/storybook/stories.ts

@@ -1,4 +1,4 @@
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -10,6 +10,7 @@ import UToggle from "../../ui.button-toggle/UToggle.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UToggleItem from "../../ui.button-toggle-item/UToggleItem.vue";
 import URow from "../../ui.container-row/URow.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -24,12 +25,13 @@ export default {
   title: "Buttons & Links / Toggle",
   component: UToggle,
   args: {
+    label: "Please choose an option",
     modelValue: "11",
     options: [
-      { value: "11", label: "label 1" },
-      { value: "12", label: "label 2" },
-      { value: "13", label: "label 3" },
-      { value: "14", label: "label 4" },
+      { value: "11", label: "Admin" },
+      { value: "12", label: "Editor" },
+      { value: "13", label: "Viewer" },
+      { value: "14", label: "Guest" },
     ],
   },
   argTypes: {
@@ -44,14 +46,26 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UToggleArgs> = (args: UToggleArgs) => ({
-  components: { UToggle, UIcon, UToggleItem },
+  components: { UToggle, UIcon, UToggleItem, UBadge },
   setup() {
     const slots = getSlotNames(UToggle.__name);
+    const modelValueRef = ref(args.modelValue);
+    const error = computed(() => {
+      if (args.name === "error" && Array.isArray(modelValueRef.value)) {
+        return modelValueRef.value?.length === 0 ? "Please select at least one option" : "";
+      }
 
-    return { args, slots };
+      return "";
+    });
+
+    return { args, slots, modelValueRef, error };
   },
   template: `
-    <UToggle v-bind="args" v-model="args.modelValue">
+    <UToggle
+      v-bind="args"
+      v-model="modelValueRef"
+      :error="error"
+    >
       ${args.slotTemplate || getSlotsFragment("")}
     </UToggle>
   `,
@@ -60,11 +74,11 @@ const DefaultTemplate: StoryFn<UToggleArgs> = (args: UToggleArgs) => ({
 const EnumVariantTemplate: StoryFn<UToggleArgs> = (args: UToggleArgs, { argTypes }) => ({
   components: { UToggle, URow },
   setup() {
-    const value = ref("");
+    const values = ref(["2xs", "xs", "sm", "md", "lg", "xl"]);
 
     return {
       args,
-      value,
+      values,
       options: argTypes?.[args.enum]?.options,
     };
   },
@@ -74,13 +88,14 @@ const EnumVariantTemplate: StoryFn<UToggleArgs> = (args: UToggleArgs, { argTypes
         v-for="(option, index) in options"
         :key="index"
         v-bind="args"
-        v-model="value"
+        v-model="values[option]"
         :[args.enum]="option"
         :label="option"
         :options="[
           { value: option + 1, label: option },
           { value: option + 2, label: option },
         ]"
+        class="w-auto"
       />
     </URow>
   `,
@@ -94,24 +109,35 @@ Default.args = {
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = {
   name: "Disabled",
-  disabled: true,
+  label: "You can disable the whole toggle or specific items",
+  options: [
+    { value: "11", label: "Admin" },
+    { value: "12", label: "Editor", disabled: true },
+    { value: "13", label: "Viewer" },
+    { value: "14", label: "Guest", disabled: true },
+  ],
 };
 
-export const Label = DefaultTemplate.bind({});
-Label.args = {
-  name: "Label",
-  label: "Label",
-  description: "description",
-};
+export const Description = DefaultTemplate.bind({});
+Description.args = { name: "Description", description: "You can also add description" };
 
 export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = {
-  name: "sizeTemplate",
-  enum: "size",
-};
+Sizes.args = { name: "sizeTemplate", enum: "size" };
 
 export const Multiple = DefaultTemplate.bind({});
-Multiple.args = { name: "multipleTemplate", multiple: true };
+Multiple.args = {
+  name: "multiple",
+  multiple: true,
+  label: "You can choose more than one option",
+};
+
+export const Error = DefaultTemplate.bind({});
+Error.args = {
+  name: "error",
+  multiple: true,
+  modelValue: [],
+  label: "If no option is selected, error message is displayed",
+};
 
 export const Block = DefaultTemplate.bind({});
 Block.args = { name: "block", block: true };
@@ -126,6 +152,7 @@ export const Square = DefaultTemplate.bind({});
 Square.args = {
   name: "square",
   square: true,
+  label: "Square prop is useful when icons are present",
   slotTemplate: `
     <template #default>
       <UToggleItem value="1">
@@ -143,14 +170,21 @@ Square.args = {
   `,
 };
 
-export const SlotDefault = DefaultTemplate.bind({});
-SlotDefault.args = {
-  name: "slotDefault",
+export const DefaultSlot = DefaultTemplate.bind({});
+DefaultSlot.args = {
+  name: "defaultSlot",
+  label: "Please select an operation to proceed",
   slotTemplate: `
     <template #default>
-      <UToggleItem label="label 1" value="1" />
-      <UToggleItem label="label 2" value="2" />
-      <UToggleItem label="label 3" value="3" />
+      <UToggleItem value="1">
+        <UBadge label="Download" color="green" right-icon="download" />
+      </UToggleItem>
+      <UToggleItem value="2">
+        <UBadge label="Edit" color="amber" right-icon="edit" />
+      </UToggleItem>
+      <UToggleItem value="3">
+        <UBadge label="Delete" color="red" right-icon="delete" />
+      </UToggleItem>
     </template>
   `,
 };

package/ui.button-toggle/types.ts

@@ -26,6 +26,11 @@ export interface Props {
    */
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
 
+  /**
+   * Error message.
+   */
+  error?: string;
+
   /**
    * Label placement.
    */
@@ -77,9 +82,9 @@ export interface Props {
   square?: boolean;
 
   /**
-   * Remove button ring on focus.
+   * Show button ring on focus.
    */
-  noRing?: boolean;
+  ring?: boolean;
 
   /**
    * Component config object.

package/ui.button-toggle-item/UToggleItem.vue

@@ -37,7 +37,7 @@ const getToggleSize = inject<() => ButtonSize>("getToggleSize", () => "md" as Bu
 const getToggleRound = inject<() => boolean>("getToggleRound", () => false);
 const getToggleBlock = inject<() => boolean>("getToggleBlock", () => false);
 const getToggleSquare = inject<() => boolean>("getToggleSquare", () => false);
-const getToggleNoRing = inject<() => boolean>("getToggleNoRing", () => true);
+const getToggleRing = inject<() => boolean>("getToggleRing", () => false);
 const getToggleSplit = inject<() => boolean>("getToggleSplit", () => true);
 
 const getToggleDisabled = inject<() => boolean>(
@@ -109,7 +109,7 @@ const { toggleButtonInactiveAttrs, toggleButtonActiveAttrs, toggleInputAttrs } =
     :block="getToggleBlock()"
     :square="getToggleSquare()"
     :disabled="getToggleDisabled() || disabled"
-    :no-ring="getToggleNoRing() || !getToggleSplit()"
+    :ring="getToggleRing() || getToggleSplit()"
     v-bind="isSelected ? toggleButtonActiveAttrs : toggleButtonInactiveAttrs"
     @click="onClickSetValue"
   >

package/ui.button-toggle-item/storybook/stories.ts

@@ -7,6 +7,7 @@ import {
 
 import UToggleItem from "../../ui.button-toggle-item/UToggleItem.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
+import URow from "../../ui.container-row/URow.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -58,26 +59,32 @@ Default.args = {};
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
 
-export const SlotLeft = DefaultTemplate.bind({});
-SlotLeft.args = {
-  slotTemplate: `
-    <template #left>
-      <UIcon
-        name="star"
-        color="green"
-      />
-    </template>
-  `,
-};
+export const Slots: StoryFn<UToggleItemArgs> = (args) => ({
+  components: { UToggleItem, UIcon, URow },
+  setup() {
+    return { args };
+  },
+  template: `
+  <URow>
+    <UToggleItem label="Download">
+      <template #left>
+        <UIcon
+          name="download"
+          color="green"
+          size="sm"
+        />
+      </template>
+    </UToggleItem>
 
-export const SlotRight = DefaultTemplate.bind({});
-SlotRight.args = {
-  slotTemplate: `
-    <template #right>
-      <UIcon
-        name="star"
-        color="green"
-      />
-    </template>
+    <UToggleItem label="Edit">
+      <template #right>
+        <UIcon
+          name="edit"
+          color="orange"
+          size="sm"
+        />
+      </template>
+    </UToggleItem>
+  </URow>
   `,
-};
+});

package/ui.container-divider/config.ts

@@ -46,8 +46,8 @@ export default /*tw*/ {
       dotted: {
         true: "border-dotted",
       },
-      noBorder: {
-        true: "border-transparent",
+      border: {
+        false: "border-transparent",
       },
     },
   },
@@ -68,9 +68,9 @@ export default /*tw*/ {
     variant: "default",
     padding: "all",
     size: "md",
+    border: true,
     dashed: false,
     dotted: false,
     vertical: false,
-    noBorder: false,
   },
 };

package/ui.container-divider/storybook/stories.ts

@@ -93,4 +93,4 @@ Vertical.args = {
 };
 
 export const NoBorder = DefaultTemplate.bind({});
-NoBorder.args = { label: "label", noBorder: true };
+NoBorder.args = { label: "label", border: false };

package/ui.container-divider/types.ts

@@ -41,9 +41,9 @@ export interface Props {
   vertical?: boolean;
 
   /**
-   * Remove border (keeps only spacings).
+   * Show divider border (or keeps only spacings).
    */
-  noBorder?: boolean;
+  border?: boolean;
 
   /**
    * Component config object.

package/ui.container-group/UGroup.vue

@@ -53,7 +53,7 @@ const {
         <slot name="header-right" />
       </div>
 
-      <UDivider size="xl" padding="after" :no-border="!underlined" v-bind="underlineAttrs" />
+      <UDivider size="xl" padding="after" :border="underlined" v-bind="underlineAttrs" />
     </template>
 
     <div v-bind="contentAttrs">

package/ui.container-modal/UModal.vue

@@ -117,7 +117,6 @@ const {
   backLinkIconAttrs,
   closeIconAttrs,
   modalDividerAttrs,
-  dividerSpacingAttrs,
   overlayAttrs,
   wrapperAttrs,
   innerWrapperAttrs,
@@ -216,11 +215,15 @@ const {
             <slot />
           </div>
 
-          <UDivider v-if="!isExistFooter || !noDivider" no-border v-bind="dividerSpacingAttrs" />
+          <UDivider
+            v-if="divider || !isExistFooter"
+            :border="divider && isExistFooter"
+            variant="dark"
+            padding="before"
+            v-bind="modalDividerAttrs"
+          />
 
           <template v-if="isExistFooter">
-            <UDivider v-if="!noDivider" variant="dark" padding="none" v-bind="modalDividerAttrs" />
-
             <div v-bind="footerAttrs">
               <div v-if="hasSlotContent($slots['footer-left'])" v-bind="footerLeftAttrs">
                 <!-- @slot Use it to add something to the left side of the footer. -->

package/ui.container-modal/config.ts

@@ -28,8 +28,7 @@ export default /*tw*/ {
   headerRight: "",
   closeIcon: "{UIcon}",
   body: "space-y-4 px-4 md:px-8 text-sm",
-  modalDivider: "{UDivider}",
-  dividerSpacing: "{UDivider}",
+  modalDivider: "{UDivider} pt-8",
   footer: "flex justify-between px-4 md:px-8 py-8 max-md:flex-col max-md:gap-4",
   footerLeft: "flex flex-col md:flex-row space-y-4 md:space-x-4 md:space-y-0 w-full",
   footerRight: "flex flex-col md:flex-row space-y-4 md:space-x-4 md:space-y-0 w-full justify-end",
@@ -55,7 +54,7 @@ export default /*tw*/ {
   defaults: {
     size: "sm",
     inner: false,
-    noDivider: false,
+    divider: true,
     closeOnEsc: true,
     closeOnCross: true,
     closeOnOverlay: true,

package/ui.container-modal/types.ts

@@ -60,7 +60,7 @@ export interface Props {
   /**
    * Hide divider between content end footer.
    */
-  noDivider?: boolean;
+  divider?: boolean;
 
   /**
    * Attach small modal to the bottom of the screen (mobile version only).

package/ui.container-page/UPage.vue

@@ -97,7 +97,7 @@ const {
             <div v-bind="headerLeftFallbackAttrs">
               <ULink
                 v-if="isShownArrowButton"
-                no-ring
+                :ring="false"
                 size="sm"
                 color="gray"
                 :to="backTo"

package/ui.dropdown-button/UDropdownButton.vue

@@ -110,7 +110,7 @@ const { config, dropdownButtonAttrs, dropdownListAttrs, dropdownIconAttrs, wrapp
           @slot Use it to add something after the label.
           @binding {boolean} opened
         -->
-        <slot name="right" :opened="isShownOptions">
+        <slot name="toggle" :opened="isShownOptions">
           <UIcon
             v-if="!noIcon"
             internal

package/ui.dropdown-button/storybook/stories.ts

@@ -9,6 +9,7 @@ import UDropdownButton from "../../ui.dropdown-button/UDropdownButton.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
+import ULink from "../../ui.button-link/ULink.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -18,7 +19,7 @@ interface DefaultUDropdownButtonArgs extends Props {
 }
 
 interface EnumUDropdownButtonArgs extends DefaultUDropdownButtonArgs {
-  enum: keyof Pick<Props, "size" | "variant">;
+  enum: keyof Pick<Props, "size" | "variant" | "xPosition" | "yPosition">;
 }
 
 export default {
@@ -36,7 +37,7 @@ export default {
     docs: {
       ...getDocsDescription(UDropdownButton.__name),
       story: {
-        height: "200px",
+        height: "250px",
       },
     },
   },
@@ -45,7 +46,7 @@ export default {
 const DefaultTemplate: StoryFn<DefaultUDropdownButtonArgs> = (
   args: DefaultUDropdownButtonArgs,
 ) => ({
-  components: { UDropdownButton, UIcon },
+  components: { UDropdownButton, UIcon, ULink },
   setup() {
     const slots = getSlotNames(UDropdownButton.__name);
 
@@ -122,19 +123,35 @@ Variants.args = { enum: "variant" };
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
+export const DropdownListXPosition = EnumVariantTemplate.bind({});
+DropdownListXPosition.args = { enum: "xPosition" };
+
+export const DropdownListYPosition = EnumVariantTemplate.bind({});
+DropdownListYPosition.args = { enum: "yPosition" };
+
 export const VariantColors = VariantColorsTemplate.bind({});
 VariantColors.args = {};
 
 export const WithoutDropdownIcon = EnumVariantTemplate.bind({});
 WithoutDropdownIcon.args = { enum: "variant", noIcon: true };
 
+export const CustomDropdownIcon = DefaultTemplate.bind({});
+CustomDropdownIcon.args = {
+  config: {
+    defaults: {
+      dropdownIcon: "expand_circle_down",
+    },
+  },
+};
+
 export const DefaultSlot = DefaultTemplate.bind({});
 DefaultSlot.args = {
   slotTemplate: `
     <template #default>
-      Custom label
+      <UIcon name="unfold_more" color="white" />
     </template>
   `,
+  noIcon: true,
 };
 
 export const LeftSlot = DefaultTemplate.bind({});
@@ -142,22 +159,22 @@ LeftSlot.args = {
   slotTemplate: `
     <template #left>
       <UIcon
-        name="archive"
-        color="red"
+        name="heart_plus"
         size="sm"
+        color="green"
       />
     </template>
   `,
 };
 
-export const RightSlot = DefaultTemplate.bind({});
-RightSlot.args = {
+export const SlotToggle = DefaultTemplate.bind({});
+SlotToggle.args = {
   slotTemplate: `
-    <template #right>
-      <UIcon
-        name="archive"
-        color="red"
-        size="sm"
+    <template #toggle="{ opened }">
+      <ULink
+        :label="opened ? 'collapse' : 'expand'"
+        color="green"
+        :ring=false
       />
     </template>
   `,

package/ui.dropdown-link/UDropdownLink.vue

@@ -76,11 +76,11 @@ const { config, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs, dropdownIcon
   <div v-click-outside="hideOptions" v-bind="wrapperAttrs">
     <ULink
       :id="elementId"
+      :ring="ring"
       :size="size"
       :label="label"
       :color="color"
       :dashed="dashed"
-      :no-ring="noRing"
       :disabled="disabled"
       :underlined="underlined"
       v-bind="dropdownLinkAttrs"

package/ui.dropdown-link/config.ts

@@ -39,7 +39,7 @@ export default /*tw*/ {
     xPosition: "left",
     underlined: undefined,
     dashed: true,
-    noRing: true,
+    ring: false,
     noIcon: false,
     disabled: false,
     /* icons */

package/ui.dropdown-link/types.ts

@@ -68,9 +68,9 @@ export interface Props {
   disabled?: boolean;
 
   /**
-   * Hide focus ring.
+   * Show link focus ring.
    */
-  noRing?: boolean;
+  ring?: boolean;
 
   /**
    * Hide dropdown icon.