vueless 0.0.680 → 0.0.682

package/bin/commands/copy.js

@@ -0,0 +1,94 @@
+/* eslint-disable no-console */
+
+import { existsSync } from "node:fs";
+import path from "node:path";
+import { cwd } from "node:process";
+import { cp, readFile, writeFile, rename } from "node:fs/promises";
+import { styleText } from "node:util";
+
+import { getDirFiles } from "../../utils/node/helper.js";
+import { replaceRelativeImports } from "../utils/formatUtil.js";
+import { getStorybookId, getStoryMetaKeyIndex } from "../utils/dataUtils.js";
+
+import { SRC_COMPONENTS_PATH, COMPONENTS_PATH } from "../constants.js";
+import { COMPONENTS, VUELESS_DIR, VUELESS_LOCAL_DIR } from "../../constants.js";
+
+function getSourcePath(componentName) {
+  return path.join(cwd(), VUELESS_DIR, COMPONENTS[componentName]);
+}
+
+export async function copyVuelessComponent(options) {
+  const [componentName, newComponentName] = options;
+
+  if (!componentName) {
+    throw new Error("Component name is required.");
+  }
+
+  if (!(componentName in COMPONENTS)) {
+    throw new Error("There is no such component.");
+  }
+
+  const sourceComponentPath = getSourcePath(componentName);
+
+  const isSrcDir = existsSync(path.join(cwd(), VUELESS_LOCAL_DIR));
+  const destPath = isSrcDir
+    ? path.join(cwd(), SRC_COMPONENTS_PATH, newComponentName)
+    : path.join(cwd(), COMPONENTS_PATH, newComponentName);
+
+  const isComponentExists = newComponentName in COMPONENTS || existsSync(destPath);
+
+  if (isComponentExists) {
+    throw new Error(`Component with name ${newComponentName} alrady exists.`);
+  }
+
+  await cp(sourceComponentPath, destPath, { recursive: true });
+  await modifyCreatedComponent(destPath, componentName, newComponentName);
+
+  const successMessage = styleText(
+    "green",
+    `Success: ${componentName} was copied into ${destPath} directory.`,
+  );
+
+  console.log(successMessage);
+}
+
+async function modifyCreatedComponent(destPath, componentName, newComponentName) {
+  const destFiles = await getDirFiles(destPath, "");
+  const storybookId = await getStorybookId();
+
+  for await (const filePath of destFiles) {
+    const fileContent = await readFile(filePath, "utf-8");
+
+    let updatedContent = replaceRelativeImports(newComponentName, filePath, fileContent);
+    let targetPath = filePath;
+
+    if (filePath.endsWith("constants.ts")) {
+      updatedContent = updatedContent.replace(componentName, newComponentName);
+    }
+
+    if (filePath.endsWith("stories.ts")) {
+      const storyLines = updatedContent.split("\n");
+
+      const storyComponentImportIndex = storyLines.findIndex(
+        (line) => line.includes(componentName) && line.includes("import"),
+      );
+      const storyIdIndex = getStoryMetaKeyIndex(fileContent, "id");
+      const storyTitleIndex = getStoryMetaKeyIndex(fileContent, "title");
+
+      storyLines[storyIdIndex] = `  id: "${storybookId}",`;
+      storyLines[storyTitleIndex] = `  title: "Custom / ${newComponentName}",`;
+      storyLines[storyComponentImportIndex] =
+        `import ${newComponentName} from "../${newComponentName}.vue"`;
+
+      updatedContent = storyLines.join("\n").replaceAll(componentName, newComponentName);
+    }
+
+    if (targetPath.endsWith(`${componentName}.vue`)) {
+      targetPath = targetPath.replace(componentName, newComponentName);
+
+      await rename(filePath, targetPath);
+    }
+
+    await writeFile(targetPath, updatedContent);
+  }
+}

package/bin/commands/create.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-console */
+
 import { existsSync } from "node:fs";
 import path from "node:path";
 import { cwd } from "node:process";
@@ -7,7 +8,7 @@ import { styleText } from "node:util";
 
 import { getDirFiles } from "../../utils/node/helper.js";
 import { replaceRelativeImports } from "../utils/formatUtil.js";
-import { getLastStorybookId } from "../utils/dataUtils.js";
+import { getStorybookId } from "../utils/dataUtils.js";
 
 import { SRC_COMPONENTS_PATH, COMPONENTS_PATH } from "../constants.js";
 
@@ -20,7 +21,7 @@ export async function createVuelessComponent(options) {
   const [componentName] = options;
 
   if (!componentName) {
-    throw new Error("Component name is required");
+    throw new Error("Component name is required.");
   }
 
   const isSrcDir = existsSync(path.join(cwd(), VUELESS_LOCAL_DIR));
@@ -31,7 +32,7 @@ export async function createVuelessComponent(options) {
   const isComponentExists = componentName in COMPONENTS || existsSync(destPath);
 
   if (isComponentExists) {
-    throw new Error(`Component with name ${componentName} alrady exists`);
+    throw new Error(`Component with name ${componentName} alrady exists.`);
   }
 
   await cp(boilerplatePath, destPath, { recursive: true });
@@ -40,7 +41,7 @@ export async function createVuelessComponent(options) {
 
   const successMessage = styleText(
     "green",
-    `Success: ${componentName} was created in ${destPath} directory`,
+    `Success: ${componentName} was created in ${destPath} directory.`,
   );
 
   console.log(successMessage);
@@ -48,7 +49,7 @@ export async function createVuelessComponent(options) {
 
 async function modifyCreatedComponent(destPath, componentName) {
   const destFiles = await getDirFiles(destPath, "");
-  const lastStorybookId = await getLastStorybookId();
+  const storybookId = await getStorybookId();
 
   for await (const filePath of destFiles) {
     const fileContent = await readFile(filePath, "utf-8");
@@ -63,7 +64,7 @@ async function modifyCreatedComponent(destPath, componentName) {
     if (filePath.endsWith("stories.ts")) {
       updatedContent = updatedContent
         .replaceAll(boilerplateName, componentName)
-        .replace("{{component_id}}", String(lastStorybookId + 10));
+        .replace("{{component_id}}", String(storybookId));
     }
 
     if (targetPath.endsWith(`${boilerplateName}.vue`)) {

package/bin/commands/index.js

@@ -1,7 +1,9 @@
 import { vuelssInit } from "./init.js";
 import { createVuelessComponent } from "./create.js";
+import { copyVuelessComponent } from "./copy.js";
 
 export const commands = {
   init: vuelssInit,
   create: createVuelessComponent,
+  copy: copyVuelessComponent,
 };

package/bin/commands/init.js

@@ -16,7 +16,7 @@ export async function vuelssInit(options) {
   const isValidOptions = options.every((option) => vuelessInitOptions.includes(option));
 
   if (options.length && !isValidOptions) {
-    throw new Error("Ivalid options were provided");
+    throw new Error("Ivalid options were provided.");
   }
 
   const fileExt = options.includes("--ts") ? TYPESCRIPT_EXT : JAVASCRIPT_EXT;
@@ -28,7 +28,7 @@ export async function vuelssInit(options) {
 
   const successMessage = styleText(
     "green",
-    `Success: ${formattedDestPath.split(path.sep).at(-1)} was created in ${cwd()} directory`,
+    `Success: ${formattedDestPath.split(path.sep).at(-1)} was created in ${cwd()} directory.`,
   );
 
   console.log(successMessage);

package/bin/utils/dataUtils.js

@@ -10,7 +10,7 @@ import { VUELESS_DIR } from "../../constants.js";
 
 const storiesName = "stories.ts";
 
-export async function getLastStorybookId() {
+export async function getStorybookId() {
   const srcComponentsDir = path.join(cwd(), SRC_COMPONENTS_PATH);
   const componentsDir = path.join(cwd(), COMPONENTS_PATH);
   const vuelessPackagePath = path.join(cwd(), VUELESS_DIR);
@@ -36,9 +36,8 @@ export async function getLastStorybookId() {
   for await (const storyPath of stories) {
     const storyContent = await readFile(storyPath, "utf-8");
 
-    const storyIdLine = storyContent.split("\n").find((line, idx, array) => {
-      return line.includes("id:") && idx && array[idx - 1].includes("export default");
-    });
+    const storyIdLineIndex = getStoryMetaKeyIndex(storyContent, "id");
+    const storyIdLine = storyContent.split("\n").at(storyIdLineIndex);
 
     if (!storyIdLine) continue;
 
@@ -49,5 +48,36 @@ export async function getLastStorybookId() {
     }
   }
 
-  return id;
+  return id + 10;
+}
+
+export function getStoryMetaKeyIndex(fileContent, key) {
+  const lines = fileContent.split("\n");
+  let insideExportBlock = false;
+  let bracketDepth = 0;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i].trim();
+
+    if (line.startsWith("export default {")) {
+      insideExportBlock = true;
+      bracketDepth = 1;
+      continue;
+    }
+
+    if (insideExportBlock) {
+      bracketDepth += (line.match(/{/g) || []).length;
+      bracketDepth -= (line.match(/}/g) || []).length;
+
+      if (bracketDepth === 1 && line.startsWith(`${key}:`)) {
+        return i;
+      }
+
+      if (bracketDepth === 0) {
+        break;
+      }
+    }
+  }
+
+  return -1; // Return -1 if no top-level `id` is found
 }

package/bin/utils/formatUtil.js

@@ -1,5 +1,7 @@
 import path from "node:path";
 
+import { VUELESS_LIBRARY } from "../../constants.js";
+
 export function replaceRelativeImports(componentName, filePath, fileContent) {
   const isTopLevelFile = path.dirname(filePath).endsWith(componentName);
   const contentLines = fileContent.split("\n");
@@ -9,6 +11,7 @@ export function replaceRelativeImports(componentName, filePath, fileContent) {
 
 function replaceRelativeLineImports(line, isTopLevelFile) {
   const importRegex = /import\s+(?:[\w\s{},*]+)\s+from\s+(['"])(\.\.?\/.*?)(\.[tj]s)?\1(?!\?)/g;
+  const multiLineImportRegExp = /from\s+(['"])(\.\.?\/.*?)(\.[tj]s)?\1(?!\?)/g; // Matches import's "from" part
 
   const isTopLevelLocalImport = isTopLevelFile && !line.includes("../");
   const isInnerLocalImport =
@@ -18,6 +21,12 @@ function replaceRelativeLineImports(line, isTopLevelFile) {
     return line;
   }
 
+  if (line.startsWith("}")) {
+    return line.replace(multiLineImportRegExp, (match, quote, oldPath, ext) => {
+      return match.replace(oldPath + (ext || ""), VUELESS_LIBRARY);
+    });
+  }
+
   return line.replace(importRegex, (match, quote, oldPath, ext) => {
     const isDefaultImport = match.includes("{");
 
@@ -25,7 +34,7 @@ function replaceRelativeLineImports(line, isTopLevelFile) {
       match = defaultToNamedImport(match);
     }
 
-    return match.replace(oldPath + (ext || ""), "vueless");
+    return match.replace(oldPath + (ext || ""), VUELESS_LIBRARY);
   });
 }
 

package/package.json

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

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

@@ -43,9 +43,11 @@ const DefaultTemplate: StoryFn<ULinkArgs> = (args: ULinkArgs) => ({
     return { args, slots };
   },
   template: `
-    <ULink v-if="args.block" v-bind="args" :config="{ wrapper: 'border-2 border-dashed border-green-500 p-2' }">
-      ${args.slotTemplate || getSlotsFragment("")}
-    </ULink>
+    <div v-if="args.block" class="border-2 border-dashed border-green-500 p-2 rounded-dynamic">
+      <ULink v-bind="args">
+        ${args.slotTemplate || getSlotsFragment("")}
+      </ULink>
+    </div>
     <ULink v-else v-bind="args">
       ${args.slotTemplate || getSlotsFragment("")}
     </ULink>
@@ -151,8 +153,9 @@ export const UnderlineVariants: StoryFn<ULinkArgs> = (args: ULinkArgs, { argType
   setup() {
     const variants = [
       { name: "Default", props: {} },
-      { name: "Underlined", props: { underlined: true } },
       { name: "Dashed", props: { dashed: true } },
+      { name: "Underlined", props: { underlined: true } },
+      { name: "No underline", props: { underlined: false } },
     ];
 
     const colors = argTypes?.color?.options;

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

@@ -179,7 +179,7 @@ DefaultSlot.args = {
         <UBadge label="Download" color="green" right-icon="download" />
       </UToggleItem>
       <UToggleItem value="2">
-        <UBadge label="Edit" color="amber" right-icon="edit" />
+        <UBadge label="Edit" color="amber" right-icon="edit_note" />
       </UToggleItem>
       <UToggleItem value="3">
         <UBadge label="Delete" color="red" right-icon="delete" />

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -89,7 +89,7 @@ const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIco
       <template #left>
         <!--
           @slot Use it to add something before the label.
-          @binding {string} label
+          @binding {boolean} opened
         -->
         <slot name="left" :opened="isShownOptions" />
       </template>
@@ -105,10 +105,10 @@ const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIco
 
       <template #right>
         <!--
-          @slot Use it to add something after the label.
+          @slot Use it to add something instead of the toggle icon.
           @binding {boolean} opened
         -->
-        <slot v-if="!noIcon" name="right" :opened="isShownOptions">
+        <slot v-if="!noIcon" name="toggle" :opened="isShownOptions">
           <UIcon
             internal
             color="inherit"

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

@@ -7,7 +7,9 @@ import {
 
 import UDropdownBadge from "../../ui.dropdown-badge/UDropdownBadge.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";
@@ -17,7 +19,7 @@ interface DefaultUDropdownBadgeArgs extends Props {
 }
 
 interface EnumUDropdownBadgeArgs extends DefaultUDropdownBadgeArgs {
-  enum: keyof Pick<Props, "color" | "size">;
+  enum: keyof Pick<Props, "color" | "size" | "variant" | "xPosition" | "yPosition">;
 }
 
 export default {
@@ -42,7 +44,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<DefaultUDropdownBadgeArgs> = (args: DefaultUDropdownBadgeArgs) => ({
-  components: { UDropdownBadge, UIcon },
+  components: { UDropdownBadge, UIcon, ULink },
   setup() {
     const slots = getSlotNames(UDropdownBadge.__name);
 
@@ -81,48 +83,106 @@ const EnumVariantTemplate: StoryFn<EnumUDropdownBadgeArgs> = (
   `,
 });
 
+const VariantColorsTemplate: StoryFn<EnumUDropdownBadgeArgs> = (
+  args: EnumUDropdownBadgeArgs,
+  { argTypes },
+) => ({
+  components: { UDropdownBadge, URow, UCol },
+  setup() {
+    return {
+      args,
+      variants: argTypes.variant?.options,
+      colors: argTypes.color?.options,
+    };
+  },
+  template: `
+    <UCol>
+      <URow v-for="(variant, index) in variants" :key="index">
+        <UDropdownBadge
+          v-for="(color, index) in colors"
+          :key="index"
+          v-bind="args"
+          :color="color"
+          :variant="variant"
+          :label="color"
+        />
+      </URow>
+    </UCol>
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Variants = EnumVariantTemplate.bind({});
+Variants.args = { enum: "variant" };
+
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
-export const Colors = EnumVariantTemplate.bind({});
-Colors.args = { enum: "color" };
+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 = DefaultTemplate.bind({});
 WithoutDropdownIcon.args = { noIcon: true };
 
-export const DefaultSlot = DefaultTemplate.bind({});
-DefaultSlot.args = {
-  slotTemplate: `
-    <template #default>
-      Custom label
-    </template>
-  `,
+export const CustomDropdownIcon = DefaultTemplate.bind({});
+CustomDropdownIcon.args = {
+  config: {
+    dropdownIcon: {
+      defaults: {
+        size: "sm",
+      },
+    },
+    defaults: {
+      dropdownIcon: "expand_circle_down",
+    },
+  },
 };
 
-export const LeftSlot = DefaultTemplate.bind({});
-LeftSlot.args = {
-  slotTemplate: `
-    <template #left>
-      <UIcon
-        name="archive"
-        color="red"
-        size="sm"
-      />
-    </template>
+export const Slots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
+  components: { UDropdownBadge, UIcon, URow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow no-mobile>
+      <UDropdownBadge v-bind="args" label="Add to favorite">
+        <template #left>
+          <UIcon
+            name="heart_plus"
+            size="xs"
+            color="green"
+            class="mx-1"
+          />
+        </template>
+      </UDropdownBadge>
+
+      <UDropdownBadge v-bind="args" no-icon>
+        <template #default>
+          <UIcon name="unfold_more" color="white" />
+        </template>
+      </UDropdownBadge>
+    </URow>
   `,
-};
+});
 
-export const RightSlot = DefaultTemplate.bind({});
-RightSlot.args = {
+export const SlotToggle = DefaultTemplate.bind({});
+SlotToggle.args = {
   slotTemplate: `
-    <template #right>
-      <UIcon
-        name="archive"
-        color="red"
+    <template #toggle="{ opened }">
+      <ULink
+        :label="opened ? 'collapse' : 'expand'"
+        color="green"
         size="sm"
+        :ring=false
+        class="mx-1"
       />
     </template>
   `,

package/ui.dropdown-button/UDropdownButton.vue

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

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

@@ -152,6 +152,7 @@ DefaultSlot.args = {
     </template>
   `,
   noIcon: true,
+  square: true,
 };
 
 export const LeftSlot = DefaultTemplate.bind({});

package/ui.dropdown-link/UDropdownLink.vue

@@ -106,10 +106,10 @@ const { config, getDataTest, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs,
     </ULink>
 
     <!--
-      @slot Use it to add something after the label.
+      @slot Use it to add something instead of the toggle icon.
       @binding {boolean} opened
     -->
-    <slot name="right" :opened="isShownOptions">
+    <slot name="toggle" :opened="isShownOptions">
       <UIcon
         v-if="!noIcon"
         internal

package/ui.dropdown-link/config.ts

@@ -1,15 +1,23 @@
 export default /*tw*/ {
   wrapper: {
-    base: "relative inline-flex",
+    base: "relative inline-flex items-center rounded",
     variants: {
       opened: {
         true: "group",
       },
+      ring: {
+        true: "focus-within:ring-dynamic focus-within:ring-offset-4 focus-within:ring-{color}-700/15",
+      },
     },
   },
-  dropdownLink: "{ULink}",
+  dropdownLink: "{ULink} focus:ring-0 focus:ring-offset-0",
   toggleIcon: {
     base: "{UIcon} block transition duration-300 group-[]:rotate-180",
+    variants: {
+      disabled: {
+        true: "text-gray-400 pointer-events-none",
+      },
+    },
     defaults: {
       size: {
         sm: "2xs",

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

@@ -8,6 +8,8 @@ import {
 import UDropdownLink from "../../ui.dropdown-link/UDropdownLink.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
+import ULink from "../../ui.button-link/ULink.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -17,7 +19,7 @@ interface DefaultUDropdownLinkArgs extends Props {
 }
 
 interface EnumUDropdownLinkArgs extends DefaultUDropdownLinkArgs {
-  enum: keyof Pick<Props, "size" | "color">;
+  enum: keyof Pick<Props, "size" | "color" | "xPosition" | "yPosition">;
 }
 
 export default {
@@ -46,7 +48,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<DefaultUDropdownLinkArgs> = (args: DefaultUDropdownLinkArgs) => ({
-  components: { UDropdownLink, UIcon },
+  components: { UDropdownLink, UIcon, ULink },
   setup() {
     const slots = getSlotNames(UDropdownLink.__name);
 
@@ -96,42 +98,97 @@ Default.args = {};
 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 Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
+
+export const Ring = DefaultTemplate.bind({});
+Ring.args = { ring: true };
+
 export const Colors = EnumVariantTemplate.bind({});
 Colors.args = { enum: "color" };
 
+export const UnderlineVariants: StoryFn<EnumUDropdownLinkArgs> = (
+  args: EnumUDropdownLinkArgs,
+  { argTypes },
+) => ({
+  components: { UDropdownLink, URow },
+  setup() {
+    const variants = [
+      { name: "Default", props: {} },
+      { name: "Underlined (on hover)", props: { underlined: undefined, dashed: false } },
+      { name: "Underlined", props: { underlined: true, dashed: false } },
+      { name: "No underline", props: { underlined: false } },
+    ];
+
+    const colors = argTypes?.color?.options;
+
+    return {
+      args,
+      variants,
+      colors,
+    };
+  },
+  template: `
+    <div v-for="variant in variants" :key="variant.name" class="mb-8">
+      <div class="text-sm font-medium mb-2">{{ variant.name }}</div>
+      <URow no-mobile>
+        <UDropdownLink
+          v-for="color in colors"
+          :key="color"
+          v-bind="variant.props"
+          :color="color"
+          :label="color"
+        />
+      </URow>
+    </div>
+  `,
+});
+
 export const WithoutDropdownIcon = DefaultTemplate.bind({});
 WithoutDropdownIcon.args = { noIcon: true };
 
-export const DefaultSlot = DefaultTemplate.bind({});
-DefaultSlot.args = {
-  slotTemplate: `
-    <template #default>
-      Custom label
-    </template>
-  `,
-};
-
-export const LeftSlot = DefaultTemplate.bind({});
-LeftSlot.args = {
-  slotTemplate: `
-    <template #left>
-      <UIcon
-        name="archive"
-        color="red"
-        size="sm"
-      />
-    </template>
+export const Slots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
+  components: { UDropdownLink, UIcon, URow, UBadge },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow no-mobile>
+      <UDropdownLink v-bind="args" label="Add to favorite">
+        <template #left>
+          <UIcon
+            name="heart_plus"
+            size="sm"
+            color="green"
+            class="mx-1"
+          />
+        </template>
+      </UDropdownLink>
+
+      <UDropdownLink v-bind="args">
+        <template #default>
+          <UBadge label="Dropdown" color="green" variant="thirdary" />
+        </template>
+      </UDropdownLink>
+    </URow>
   `,
-};
+});
 
-export const RightSlot = DefaultTemplate.bind({});
-RightSlot.args = {
+export const SlotToggle = DefaultTemplate.bind({});
+SlotToggle.args = {
   slotTemplate: `
-    <template #right>
+    <template #toggle="{ opened }">
       <UIcon
-        name="archive"
-        color="red"
-        size="sm"
+        name="expand_circle_down"
+        color="green"
+        class="mx-1"
+        :class="{ 'rotate-180' : opened }"
       />
     </template>
   `,