Merge remote-tracking branch 'origin/main'

docs/.gitbook/assets/stories.ts

@@ -0,0 +1,228 @@
+import {
+  getArgTypes,
+  getSlotNames,
+  getSlotsFragment,
+  getDocsDescription,
+} from "../../utils/storybook.ts";
+
+import { ref } from "vue";
+
+import UButton from "../../ui.button/UButton.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+
+import { useDarkMode } from "../../composables/useDarkMode.ts";
+
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { Props } from "../types.ts";
+
+interface UButtonArgs extends Props {
+  slotTemplate?: string;
+  enum: "variant" | "size";
+}
+
+interface StoryArgType {
+  options?: string[];
+}
+
+export default {
+  id: "1010",
+  title: "Buttons & Links / Button",
+  component: UButton,
+  args: {
+    label: "Button",
+  },
+  argTypes: {
+    ...getArgTypes(UButton.__name),
+  },
+  parameters: {
+    docs: {
+      ...getDocsDescription(UButton.__name),
+    },
+  },
+} as Meta;
+
+const DefaultTemplate: StoryFn<UButtonArgs> = (args: UButtonArgs) => ({
+  components: { UButton, UIcon },
+  setup() {
+    const slots = getSlotNames(UButton.__name);
+
+    return { args, slots };
+  },
+  template: `
+    <UButton v-bind="args">
+      ${args.slotTemplate || getSlotsFragment("")}
+    </UButton>
+  `,
+});
+
+const EnumVariantTemplate: StoryFn<UButtonArgs> = (args: UButtonArgs, { argTypes }) => ({
+  components: { UButton, URow, UCol },
+  setup() {
+    return { args, options: argTypes?.[args.enum]?.options };
+  },
+  template: `
+    <UCol>
+      <URow no-mobile>
+        <UButton
+          v-for="(option, index) in options"
+          :key="index"
+          v-bind="args"
+          :[args.enum]="option"
+          :label="option"
+        />
+      </URow>
+    </UCol>
+  `,
+});
+
+const ColorTemplate: StoryFn<UButtonArgs> = (args: UButtonArgs, { argTypes }) => ({
+  components: { UButton, URow, UCol },
+  setup() {
+    const variantOptions = (argTypes.variant as StoryArgType)?.options ?? [];
+    const variants = [...Array.from(variantOptions), "thirdary"];
+
+    return {
+      args,
+      variants,
+      colors: argTypes?.color?.options,
+      shouldBeFilled: (variant: string, index: number) => {
+        return variant === "thirdary" && index === variants.length - 2;
+      },
+    };
+  },
+  template: `
+    <UCol>
+      <URow v-for="(variant, variantIndex) in variants" :key="variantIndex" no-mobile>
+        <UButton
+          v-for="(color, colorIndex) in colors"
+          v-bind="args"
+          :variant="variant"
+          :color="color"
+          :label="color"
+          :key="colorIndex"
+          :filled="shouldBeFilled(variant, variantIndex)"
+        />
+      </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 Round = EnumVariantTemplate.bind({});
+Round.args = { enum: "variant", round: true };
+
+export const Loading: StoryFn<UButtonArgs> = (args) => ({
+  components: { UButton, URow },
+  setup() {
+    const loading = ref(false);
+
+    function toggleLoading() {
+      loading.value = !loading.value;
+    }
+
+    return { args, toggleLoading, loading };
+  },
+  template: `
+    <URow no-mobile>
+      <UButton
+        label="Loader demo"
+        :loading="loading"
+        />
+      <UButton
+        label="Toggle loading"
+        variant="secondary"
+        color="green"
+        leftIcon="play_arrow"
+        @click="toggleLoading"
+        />
+    </URow>
+  `,
+});
+
+export const Block = DefaultTemplate.bind({});
+Block.args = { block: true };
+
+export const Disabled = EnumVariantTemplate.bind({});
+Disabled.args = { enum: "variant", disabled: true };
+
+export const Colors = ColorTemplate.bind({});
+Colors.args = {};
+
+export const Square = DefaultTemplate.bind({});
+Square.args = { square: true, icon: "filter_list" };
+
+export const IconProps: StoryFn<UButtonArgs> = (args) => ({
+  components: { UButton, URow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow no-mobile>
+      <UButton
+        v-bind="args"
+        left-icon="download"
+        label="Download"
+      />
+      <UButton
+        v-bind="args"
+        right-icon="menu"
+        label="Menu"
+      />
+    </URow>
+  `,
+});
+
+export const Slots: StoryFn<UButtonArgs> = (args) => ({
+  components: { UButton, UIcon, URow },
+  setup() {
+    const { isDarkMode } = useDarkMode();
+
+    return { args, isDarkMode };
+  },
+  template: `
+    <URow no-mobile>
+      <UButton v-bind="args" label="Add to favorite">
+        <template #left>
+          <UIcon
+            name="heart_plus"
+            size="sm"
+            color="inherit"
+            :variant="isDarkMode ? 'dark' : 'default'"
+          />
+        </template>
+      </UButton>
+
+      <UButton v-bind="args" square>
+        <template #default>
+          <UIcon
+            name="settings"
+            size="sm"
+            color="inherit"
+            :variant="isDarkMode ? 'dark' : 'default'"
+          />
+        </template>
+      </UButton>
+
+      <UButton v-bind="args" label="Delete">
+        <template #right>
+          <UIcon
+            name="delete"
+            size="sm"
+            color="inherit"
+            :variant="isDarkMode ? 'dark' : 'default'"
+          />
+        </template>
+      </UButton>
+    </URow>
+  `,
+});

docs/README.md

@@ -6,24 +6,28 @@
 {% tab title="npm" %}
 ```bash
 npm install vueless
+npx vueless init
 ```
 {% endtab %}
 
 {% tab title="yarn" %}
 ```bash
 yarn add vueless
+yarn vueless init
 ```
 {% endtab %}
 
 {% tab title="pnpm" %}
 ```bash
 pnpm add vueless
+pnpm exec vueless init
 ```
 {% endtab %}
 
 {% tab title="bun" %}
 ```bash
 bun add vueless
+bunx vueless init
 ```
 {% endtab %}
 {% endtabs %}

docs/SUMMARY.md

@@ -31,6 +31,13 @@
 * [Defining custom props](component-customization/defining-custom-props.md)
 * [Internationalization (i18n)](component-customization/internationalization-i18n.md)
 
+## Creating own components <a href="#own-components" id="own-components"></a>
+
+* [Vueless file structure](own-components/vueless-file-structure.md)
+* [Vueless component anatomy](own-components/vueless-component-anatomy.md)
+* [Create new component](own-components/create-new-component.md)
+* [Copy existing component](own-components/copy-existing-component.md)
+
 ## Svg Icons
 
 * [General usage](svg-icons/general-usage.md)

docs/installation/nuxt.md

@@ -6,24 +6,28 @@
 {% tab title="npm" %}
 ```bash
 npm install @vueless/nuxt
+npx vueless init
 ```
 {% endtab %}
 
 {% tab title="yarn" %}
 ```bash
 yarn add @vueless/nuxt
+yarn vueless init
 ```
 {% endtab %}
 
 {% tab title="pnpm" %}
 ```bash
 pnpm add @vueless/nuxt
+pnpm exec vueless init
 ```
 {% endtab %}
 
 {% tab title="bun" %}
 ```bash
 bun add @vueless/nuxt
+bunx vueless init
 ```
 {% endtab %}
 {% endtabs %}

docs/installation/storybook.md

@@ -45,7 +45,7 @@ Which:
 * creates `.npmrc` config (for `pnpm` propject only).
 
 {% hint style="info" %}
-If the `.storybook` folder already exists, the command will back it up by renaming it to `.storybook-{timestamp}`. You should migrate your custom configuration (if any) and remove the backup folder manually afterward.
+If the `.storybook` folder already exists, the command will back it up by renaming it to `.storybook-backup-{timestamp}`. You should migrate your custom configuration (if any) and remove the backup folder manually afterward.
 {% endhint %}
 
 3\. Run Storybook ✨
@@ -57,7 +57,7 @@ npm run sb:dev
 Other available commands:
 
 ```bash
-# run Storybook in docs mode (as seen on ui.vueless.com)
+# run Storybook in docs mode (same as seen on ui.vueless.com)
 npm run sb:dev:docs
 
 # build Storybook
@@ -67,7 +67,7 @@ npm run sb:build
 npm run sb:preview
 ```
 
-## Hiding unused components docs
+## Hiding unused components in storybook
 
 If you don’t plan to use certain Vueless components, you can hide them from Storybook by setting the `storybook` key to `false` in the specific component’s config.
 

docs/own-components/copy-existing-component.md

@@ -0,0 +1,52 @@
+# Copy existing component
+
+If Vueless customization options are not enough for your needs, you can fully copy and modify any Vueless component.
+
+{% hint style="warning" %}
+However, use this approach only when absolutely necessary, as you will need to manually update the component after each new Vueless release.
+
+**Note:** We do not provide free support for custom components.
+{% endhint %}
+
+{% tabs %}
+{% tab title="npm" %}
+```bash
+npx vueless copy <src> <target>
+
+# example: 
+# npx vueless copy UButton CustomButton
+```
+{% endtab %}
+
+{% tab title="yarn" %}
+```bash
+yarn vueless copy <src> <target>
+
+# example:
+# yarn vueless copy UButton CustomButton
+```
+{% endtab %}
+
+{% tab title="pnpm" %}
+```bash
+pnpm exec vueless copy <src> <target>
+
+# example: 
+# pnpm exec vueless copy UButton CustomButton
+```
+{% endtab %}
+
+{% tab title="bun" %}
+```bash
+bunx vueless copy <src> <target>
+
+# example:
+# bunx vueless copy UButton CustomButton
+```
+{% endtab %}
+{% endtabs %}
+
+The component will be created in the project's `/components` folder:
+
+* `/src/components/<componentName>` – for Vue
+* `/components/<componentName>` – for Nuxt