vueless 0.0.7 → 0.0.9

package/readme/customization.md

@@ -1,347 +0,0 @@
-# Customisation
-
-## Overview
-
-To customize the look and feel of components change a default configuration in the `vueless.config.js`.
-
-## Colors
-
-### Predefined colors
-
-Components are based on a `brand` and a `gray` color. You can change them in your `vueless.config.js`.
-
-```js
-// vueless.config.js
-
-export default {
-  brand: "green",
-  gray: "zinc",
-};
-```
-
-As this module uses Tailwind CSS under the hood, 
-you can use any of the [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) or your own custom colors. 
-
-**By default:**
-* the `brand` color is `green`,
-* the `gray` color is `zinc`.
-
-### Custom colors
-
-When [using custom colors](https://tailwindcss.com/docs/customizing-colors#using-custom-colors) or [adding additional colors](https://tailwindcss.com/docs/customizing-colors#adding-additional-colors) through the `extend` key in your `tailwind.config.js`, 
-you'll need to make sure to define all the shades from `50` to `950` as most of them are used in the package components. 
-
-You can [generate your colors](https://tailwindcss.com/docs/customizing-colors#generating-colors) using tools such as https://uicolors.app for example.
-
-```js
-// tailwind.config.js
-
-export default {
-  theme: {
-    extend: {
-      colors: {
-        green: {
-          50: '#EFFDF5',
-          100: '#D9FBE8',
-          200: '#B3F5D1',
-          300: '#75EDAE',
-          400: '#00DC82',
-          500: '#00C16A',
-          600: '#00A155',
-          700: '#007F45',
-          800: '#016538',
-          900: '#0A5331',
-          950: '#052e16'
-        }
-      }
-    }
-  }
-}
-```
-
-### Opacity mode
-
-You can use `mode: "opacity"` to generate all the shades automatically by using `opacity` based on your brand color.
-
-```js
-// vueless.config.js
-
-export default {
-  brand: "orange",
-  gray: "slate",
-  mode: "opacity",
-};
-```
-
-You can set your own brand color in `HEX` format as well.
-
-```js
-// vueless.config.js
-
-export default {
-  brand: "#00C16A",
-  gray: "slate",
-  mode: "opacity",
-};
-```
-
-### Brand CSS Variable
-
-To provide dynamic brand color that can be changed at runtime, this module uses CSS variable.
-
-> We'd advise you to use that color in your components and pages, e.g. `text-brand dark:text-brand`, etc. 
-> so your app automatically adapts when changing your `vueless.config.js`.
-
-To change the brand color, you should call this function whatever you need:
-
-```js
-import { setBrandColor } from "vueless/service.ui";
-
-// set default brand color
-setBrandColor();
-
-// or set brand color from tailwind colors palette
-setBrandColor("red");
-
-// or set your own custom brand color
-setBrandColor("#00C16A");
-```
-
-The `brand` color also has a `DEFAULT` shade that changes based on the theme.
-It is `500` in light mode and `400` in dark mode.
-You can use it as a shortcut in your components and pages, e.g. `text-brand`, `bg-brand`, `focus-visible:ring-brand`, etc.
-
-> For custom hex color, there is only one shade for dark and light themes.
-
-### Smart Safelisting
-
-Components having a `color` prop like `UAvatar`, `UButton`, `URadioGroup`, `UCheckbox`, `UHeader` etc. 
-will use the `brand` or `grayscale` color by default, 
-but will handle all the colors defined in your `tailwind.config.ts` or the default Tailwind CSS colors.
-
-Variant classes of those components are defined with a syntax like `bg-{color}-500 dark:bg-{color}-400` so they can be used with any color. 
-However, this means that Tailwind will not find those classes and therefore will not generate the corresponding CSS.
-
-The library uses the [Tailwind CSS safelist](https://tailwindcss.com/docs/content-configuration#safelisting-classes) feature 
-to force the generation of component colors.
-
-The Vueless will **automatically** detect when you use one of those components with a color and will safelist it for you. 
-This means that if you use a `red` color for a UButton component, the `red` color classes will be safelisted for the UButton component only. 
-This will allow to keep the CSS bundle size as small as possible.
-
-If you bind a dynamic color to a component: `<UBadge :color="color" />`, `<UButton :color="statuses[button.status]" />`, etc. 
-You'll need to safelist the possible color values manually as well.
-
-```js [vueless.config.js]
-// vueless.config.js
-
-export default {
-  safelistColors: ["orange", "amber", "sky"], // applies for all components
-  component: {
-    UButton: {
-      safelistColors: ["red"], // applies only for UButton
-    }
-  }
-}
-```
-
-### Replacing safelist patterns
-
-In some specific cases you can replace safelist config as well:
-
-```js
-// vueless.config.js
-
-export default {
-  component: {
-    UButton: {
-      safelist: (colors) => [
-        { pattern: `bg-(${colors})-500`, variants: ["hover", "focus", "active"] },
-        { pattern: `text-(${colors})-500` },
-      ],
-    }
-  }
-};
-```
-
-## Components
-
-### `vueless.config.js`
-
-Components are styled with Tailwind CSS but classes are all defined in the default `configs/default.config.js` file 
-located in each component folder. You can override those in your own `vueless.config.js`.
-
-```js
-// vueless.config.js
-
-export default {
-  component: {
-    UButton: {
-      button: {
-        base: "bg-red-500 w-full",
-      }
-    }
-  }
-};
-```
-
-Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `vueless.config.js` is smartly merged with the default config. 
-This means you don't have to rewrite everything.
-
-You can change this behavior by changing `strategy` in your `vueless.config.js` to:
-* `override` – override default config by custom defined config (keeps only custom config and remove everything else).
-* `replace` – replace default config keys by custom defined config keys, (the rest classes takes from the default config).
-* `merge` – smartly merge custom defined classes with default config classes (default strategy).
-
-```js
-// vueless.config.js
-
-export default {
-  strategy: 'override',
-  component: {
-    UButton: {
-      button: {
-        base: "bg-red-500 w-full",
-      }
-    }
-  }
-};
-```
-
-### `config` prop
-
-Each component has a `config` prop that allows you to customize everything specifically.
-
-```jsx
-<template>
-  <UButton :config="{ button: { base: 'max-w-2xl' } }">
-    <slot />
-  </UButton>
-</template>
-```
-
-> You can find the default classes for each component under the `Config` section.
-
-Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `config` prop is smartly merged with the config. 
-This means you don't have to rewrite everything.
-
-For example, the default preset of the `UEmpty` component looks like this:
-
-```js
-{
-  wrapper: "flex flex-col items-center w-full bg-center",
-  header: "mb-4 flex justify-center",
-  footer: "mt-4 flex justify-center",
-  title: {
-    base: "mb-2 font-medium text-center",
-    variants: {
-      size: {
-        sm: "text-base",
-        md: "text-lg",
-        lg: "text-xl",
-      },
-    },
-  },
-  description: {
-    base: "text-center",
-    variants: {
-      size: {
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
-      },
-    },
-  },
-  defaultVariants: {
-    size: "md",
-  },
-}
-```
-
-To change the font of the `title`, you only need to write:
-
-```jsx
-<UEmpty 
-  title="The list is empty" 
-  :config="{ title: { base: 'font-bold' } }" 
-/>
-```
-
-This will smartly replace the `font-medium` by `font-bold` and prevent any class duplication and any class priority issue.
-
-You can change this behavior by setting `strategy` to `replace` or `override` inside the `config` prop:
-
-```jsx
-<UButton
-  label="Submmit"
-  :config="{
-    strategy: 'replace',
-    color: {
-      white: {
-        solid: 'bg-white dark:bg-gray-900'
-      }
-    }
-  }"
-/>
-```
-
-### `class` attribute
-
-You can also use the `class` attribute to add classes to the component.
-
-```vue
-<template>
-  <UButton label="Button" class="font-bold" />
-</template>
-```
-
-Again, with [tailwind-merge](https://github.com/dcastil/tailwind-merge), this will smartly merge the classes with the `config` prop and the global and default configs.
-
-### Default values
-
-Some component props like `size`, `color`, `variant`, etc. have a default value that you can override in your `vueless.config.js` 
-or by the `config` prop as well.
-
-```js
-// vueless.config.js
-
-export default {
-  component: {
-    UButton: {
-      defaultVariants: {
-        size: "lg",
-        color: "red",
-        variant: "secondary"
-      }
-    }
-  }
-};
-```
-
-## Icons
-
-The library supports three popular icon libraries:
-* `@material-symbols/svg-{weight}`, where {weight} is number from 100 to 700 (`@material-symbols/svg-500` is default). 
-* `bootstrap-icons`
-* `heroicons`
-
-> The package works only with SVG icons.
-
-### Icons safelist colors
-
-If you set some icon names dynamically in `UIcon` component, then them may be skipped on a build stage.
-To avoid this behavior and include the icons in the build, you can add them into a safelist.
-
-```js
-// vueless.config.js
-
-export default {
-  component: {
-    UIcon: {
-      safelistIcons: ["1k", "2d", "close"],
-    }
-  }
-};
-```
-
-> In this case, the regular and filled icon variants will be added into the build.

package/readme/installation.md

@@ -1,139 +0,0 @@
-# Installation
-Learn how to install and configure the package in your Vue app.
-
-## Quick Start
-
-1\. Install `vueless` to your project:
-
-```bash
-# npm
-npm install vueless
-
-# yarn
-yarn add vueless
-
-# pnpm
-pnpm add vueless
-```
-
-2\. Create `vueless.config.js` at the root of your project.
-
-```js
-export default {
-  color: {},
-  component: {},
-};
-```
-
-3\. Add vueless preset into `tailwind.config.js`.
-
-```js
-import { vuelessPreset } from "vueless/service.tailwind";
-
-export default {
-  presets: [vuelessPreset],
-  ...
-};
-```
-
-4\. Add Vueless Vite plugins into `vite.config.js`.
-
-```js
-import { Vueless, VuelessUnpluginComponents } from "vueless/plugin.vite";
-
-export default defineConfig({
-  plugins: [
-    ...
-    Vueless(),
-    VuelessUnpluginComponents(),
-  ],
-  ...
-})
-```
-
-5\. Configure your `package.json`.
-
-```json
-{
-  ...
-  "web-types": "vueless/web-types.json"
-}
-```
-
-Where:
-* `web-types` – add props and values autocompletion to your IDE.
-
-<br/>
-
-That's it! You can now use all the components in your Vue app ✨
-
-## IntelliSense
-If you're using **VSCode** or **JetBrains** IDEs (WebStorm, PHPStorm, etc..) you can configure autocompletion for the classes.
-
-**What you'll get:**
-* Autocompletion on typing.
-* Autocompletion on objects by prefixing them with `/*tw*/`
-* Autocompletion when using the `config` prop.
-
-**An example SFC using IntelliSense:**
-
-```jsx
-<template>
-  <UCard :config="config" />
-</template>
-
-<script setup>
-const config = /*tw*/ {
-  background: 'bg-white dark:bg-slate-900'
-}
-</script>
-```
-
-### VSCode
-* Install [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
-  extension.
-* Set the plugin configuration below in the file `.vscode/settings.json`.
-
-```json
-{
-  "files.associations": {
-      "*.css": "tailwindcss"
-  },
-  "editor.quickSuggestions": {
-      "strings": true
-  },
-  "tailwindCSS.experimental.classRegex": [
-    ["config:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"],
-    ["/\\*tw\\*/\\s*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"]
-  ],
-  "tailwindCSS.classAttributes": ["class", "className", "ngClass", "config"]
-}
-```
-
-
-### JetBrains IDEs
-* Check if [Tailwind CSS IntelliSense](https://www.jetbrains.com/help/webstorm/tailwind-css.html) 
-  already installed in the IDE, if not, install it in extensions.
-* Set the plugin configuration below in `Settings` > `Languages & Frameworks` > `Style Sheets` > `Tailwind CSS`.
-
-```json
-{
-  "includeLanguages": {
-    "javascript": "javascript"
-  },
-  "suggestions": true,
-  "classAttributes": ["class", "className", "ngClass", "config"],
-  "experimental": {
-    "classRegex": [
-      ["config:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"],
-      ["/\\*tw\\*/\\s*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"]
-    ]
-  }
-}
-```
-
-
-
-
-
-

package/readme/storybook-pages/Customisation.mdx

@@ -1,6 +0,0 @@
-import { Markdown, Meta } from "@storybook/blocks";
-
-import customization from "../customization.md?raw"
-
-<Meta title="2. Customisation" />
-<Markdown className="markdown">{customization}</Markdown>

package/readme/storybook-pages/Installation.mdx

@@ -1,7 +0,0 @@
-import { Markdown, Meta } from "@storybook/blocks";
-
-import installation from "../installation.md?raw"
-
-<Meta title="1. Installation" />
-<Markdown className="markdown">{installation}</Markdown>
-

package/tailwind.config.js

@@ -1,69 +0,0 @@
-const colors = require("tailwindcss/colors");
-
-export default {
-  content: ["./index.html", "./vueless.config.{js,ts}", "./src/**/*.{js,ts,vue}"],
-  theme: {
-    fontFamily: {
-      roboto: ["Roboto", "sans-serif"],
-    },
-    extend: {
-      spacing: {
-        100: "25rem", //      400px
-        125: "31.25rem", //   500px
-        150: "37.5rem", //    600px
-        175: "43.75rem", //   700px
-        200: "50rem", //      800px
-        225: "56.25rem", //   900px
-        250: "62.5rem", //    1000px
-        275: "68.75rem", //   1100px
-        300: "75rem", //      1200px
-        "safe-top": "env(safe-area-inset-top)",
-        "safe-bottom": "env(safe-area-inset-bottom)",
-        "safe-left": "env(safe-area-inset-left)",
-        "safe-right": "env(safe-area-inset-right)",
-        "mobile-menu-height": "3.5rem",
-      },
-      fontSize: {
-        "2xs": ["0.625rem", "0.75rem"], //  10px
-        xs: ["0.75rem", "0.875rem"], //     12px
-        sm: ["0.875rem", "1rem"], //        14px
-        base: ["1rem", "1.1875rem"], //     16px
-        lg: ["1.125rem", "1.3125rem"], //   18px
-        xl: ["1.375rem", "1.6rem"], //      22px
-        "2xl": ["1.5rem", "1.75rem"], //    24px
-        "3xl": ["1.75rem", "2.0625rem"], // 28px
-        "4xl": ["2rem", "2.3125rem"], //    32px
-        "5xl": ["3rem", "3.5rem"], //       48px
-      },
-      opacity: {
-        15: ".15",
-      },
-    },
-    colors: {
-      transparent: "transparent",
-      current: "currentColor",
-      brand: withOpacity("--brand-color"),
-      gray: colors.gray,
-      red: colors.red,
-      yellow: colors.amber,
-      green: colors.green,
-      blue: colors.blue,
-      violet: colors.violet,
-      black: colors.black,
-      white: colors.white,
-      orange: colors.orange,
-      fuchsia: colors.fuchsia,
-    },
-  },
-  plugins: [require("@tailwindcss/forms")],
-};
-
-function withOpacity(variableName) {
-  return ({ opacityValue }) => {
-    if (opacityValue !== undefined) {
-      return `rgba(var(${variableName}), ${opacityValue})`;
-    }
-
-    return `rgb(var(${variableName}))`;
-  };
-}

package/vite.config.mjs

@@ -1,40 +0,0 @@
-import { defineConfig } from "vite";
-import path from "path";
-
-import Vue from "@vitejs/plugin-vue";
-import Eslint from "vite-plugin-eslint";
-import { Vueless, VuelessUnpluginComponents } from "@vueless/vite-plugin";
-
-export default defineConfig({
-  plugins: [
-    Vue(),
-    Eslint(),
-    Vueless(),
-    VuelessUnpluginComponents(),
-  ],
-  resolve: {
-    extensions: [".vue", ".mjs", ".js", ".ts", ".mdx"],
-    alias: {
-      "vueless/src": path.resolve(__dirname, "./src"),
-    },
-  },
-  optimizeDeps: {
-    include: [
-      "vuex",
-      "vue-i18n",
-      "vue-router",
-      "vue-tippy",
-      "@uppy/core",
-      "@uppy/vue/src/drag-drop",
-      //"@kyvg/vue3-notification",
-      //"@tailwindcss/forms",
-      "tailwindcss/colors.js",
-      "cva",
-      "tailwind-merge",
-      "prettier2",
-      "prettier2/parser-html",
-      "@storybook/blocks",
-      "@storybook/theming/create",
-    ],
-  },
-});

package/vueless.config.js

@@ -1,7 +0,0 @@
-export default {
-  brand: "grayscale",
-  gray: "gray",
-  component: /*tw*/ {
-    // component configs
-  },
-};