vueless 0.0.17 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -19,7 +19,7 @@
     "sb:build": "STORYBOOK_VUELESS_ENV=1 storybook build",
     "sb:preview": "vite preview --host --outDir=storybook-static",
     "vueless:update": "yarn add -D file:../vite-plugin-vueless file:../vueless-storybook",
-    "vueless:prepare": "node src/gen.web-types && rm -rf dist && mkdir -p dist && cp -r src/* package.json LICENSE web-types.json README.md  dist/"
+    "vueless:prepare": "node src/gen.web-types && rm -rf dist && mkdir -p dist && cp -r src/* package.json LICENSE web-types.json README.md dist/ && rm -rf dist/assets"
   },
   "dependencies": {
     "@kyvg/vue3-notification": "^3.2.1",
@@ -54,6 +54,7 @@
     "postcss": "^8.4.7",
     "prettier": "^3.1.0",
     "prettier-eslint": "^16.3.0",
+    "release-it": "^17.2.0",
     "vite": "^5.2.10",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-eslint": "^1.8.1",

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "contributions": {
     "html": {
       "description-markup": "markdown",

package/.browserslistrc

@@ -1,4 +0,0 @@
-> 1%
-last 2 versions
-not dead
-not ie 11

package/.editorconfig

@@ -1,12 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-end_of_line = lf
-insert_final_newline = true
-indent_style = space
-indent_size = 2
-trim_trailing_whitespace = true
-
-[*.md]
-trim_trailing_whitespace = false

package/.eslintignore

@@ -1,6 +0,0 @@
-/node_modules
-/dist
-/storybook-static
-
-# allow to format hidden folders
-!/.storybook

package/.eslintrc.cjs

@@ -1,66 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true,
-    browser: true,
-    es2020: true,
-  },
-  plugins: ["tailwindcss"],
-  extends: [
-    "eslint:recommended",
-    "plugin:vue/vue3-recommended",
-    "@vue/prettier",
-    "plugin:prettier/recommended",
-    "plugin:tailwindcss/recommended",
-  ],
-  rules: {
-    "no-console": process.env.PROD ? "error" : "warn",
-    "no-debugger": process.env.PROD ? "error" : "warn",
-    "arrow-parens": ["error", "always"],
-    curly: ["error", "multi-line"],
-    "padding-line-between-statements": [
-      "error",
-      { blankLine: "always", prev: ["const", "let", "var"], next: "*" },
-      { blankLine: "any", prev: ["const", "let", "var"], next: ["const", "let", "var"] },
-      { blankLine: "always", prev: "directive", next: "*" },
-      { blankLine: "any", prev: "directive", next: "directive" },
-      { blankLine: "always", prev: "block-like", next: "*" },
-      { blankLine: "always", prev: "*", next: "block-like" },
-      { blankLine: "always", prev: "*", next: "return" },
-    ],
-    "vue/multi-word-component-names": [
-      "error",
-      { ignores: ["index", "Component", "Modal", "Page"] },
-    ],
-    "vue/max-len": ["error", { code: 120, template: 960, ignoreComments: true, ignoreUrls: true }],
-    "vue/padding-line-between-blocks": ["error", "always"],
-    "vue/v-on-event-hyphenation": ["error", "never"],
-    "vue/no-v-html": "off",
-    "tailwindcss/no-custom-classname": "off",
-    "prettier/prettier": ["warn", { printWidth: 100, tabWidth: 2 }],
-  },
-  overrides: [
-    {
-      files: ["src/**/default.config.{js,ts}"],
-      rules: {
-        "vue/max-len": ["error", { code: 140 }],
-        "prettier/prettier": ["warn", { printWidth: 120, tabWidth: 2 }],
-      },
-    },
-    {
-      files: [".storybook/preview.{js,ts}"],
-      rules: {
-        "vue/max-len": ["error", { code: 280 }],
-        "prettier/prettier": ["warn", { printWidth: 280, tabWidth: 2 }],
-      },
-    },
-    {
-      files: ["**/*.{stories}.{js,ts,jsx,tsx}"],
-      extends: ["plugin:storybook/recommended"],
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: "latest",
-    module: "esnext",
-  },
-};

package/.storybook/configs/main.config.js

@@ -1,20 +0,0 @@
-import vuelessDocsTheme from "../themes/vueless.docs.theme";
-import colors from "tailwindcss/colors.js";
-
-export const docs = {
-  theme: vuelessDocsTheme,
-  source: {
-    language: "html",
-  },
-};
-
-export const backgrounds = {
-  default: "white",
-  values: [
-    { name: "white", value: colors.white },
-    { name: "light", value: colors.gray[50] },
-    { name: "dark", value: colors.gray[900] },
-  ],
-};
-
-export const layout = "fullscreen";

package/.storybook/decorators/vue3SourceDecorator.js

@@ -1,119 +0,0 @@
-import { addons, makeDecorator } from "@storybook/preview-api";
-import { h, onMounted, watch } from "vue";
-import { setBrandColor } from "vueless/service.ui";
-
-export const vue3SourceDecorator = makeDecorator({
-  name: "vue3SourceDecorator",
-  wrapper: (storyFn, context) => {
-    const story = storyFn(context);
-
-    // this returns a new component that computes the source code when mounted
-    // and emits an events that is handled by addons-docs
-    // watch args and re-emit on change
-    return {
-      components: { story },
-      setup() {
-        onMounted(() => {
-          setSourceCode();
-        });
-
-        watch(context.args, () => {
-          setSourceCode();
-        });
-
-        setBrandColor();
-
-        function setSourceCode() {
-          try {
-            const src = context.originalStoryFn(context.args).template;
-            const code = templateSourceCode(src, context.args, context.argTypes);
-            const channel = addons.getChannel();
-
-            const emitFormattedTemplate = async () => {
-              const prettier = await import("prettier2");
-              const prettierHtml = await import("prettier2/parser-html");
-
-              const formattedCode = prettier.format(code, {
-                parser: "html",
-                plugins: [prettierHtml],
-                htmlWhitespaceSensitivity: "ignore",
-              });
-
-              // emits an event when the transformation is completed
-              channel.emit("storybook/docs/snippet-rendered", {
-                id: context.id,
-                args: context.args,
-                source: formattedCode,
-              });
-            };
-
-            emitFormattedTemplate();
-          } catch (e) {
-            // eslint-disable-next-line no-console
-            console.warn("Failed to render code", e);
-          }
-        }
-
-        return () => h("div", { style: `padding: 2rem 1.5rem 3rem 1.5rem;` }, [h(story)]);
-      },
-    };
-  },
-});
-
-function templateSourceCode(templateSource, args, argTypes) {
-  const componentArgs = {};
-
-  for (const [key, val] of Object.entries(argTypes)) {
-    const value = args[key];
-
-    if (
-      typeof val !== "undefined" &&
-      val.table &&
-      val.table.category === "props" &&
-      value !== val.defaultValue
-    ) {
-      componentArgs[key] = val;
-    }
-  }
-
-  const slotTemplateCode =
-    // eslint-disable-next-line vue/max-len
-    '<template v-for="(slot, index) of slots" :key="index" v-slot:[slot]><template v-if="args[slot]">{{ args[slot] }}</template></template>';
-  const templateDefaultRegEx = /<template #default>([\s\S]*?)<\/template>/g;
-
-  return templateSource
-    .replace(/>[\s]+</g, "><")
-    .trim()
-    .replace(slotTemplateCode, "")
-    .replace(templateDefaultRegEx, "$1")
-    .replace(
-      'v-bind="args"',
-      Object.keys(componentArgs)
-        .map((key) => " " + propToSource(kebabCase(key), args[key]))
-        .join(""),
-    );
-}
-
-function propToSource(key, val) {
-  const type = typeof val;
-
-  switch (type) {
-    case "boolean":
-      return val ? key : "";
-    case "string":
-      return `${key}="${val}"`;
-    default:
-      return `:${key}="${val}"`;
-  }
-}
-
-function kebabCase(str) {
-  return str
-    .split("")
-    .map((letter, idx) => {
-      return letter.toUpperCase() === letter
-        ? `${idx !== 0 ? "-" : ""}${letter.toLowerCase()}`
-        : letter;
-    })
-    .join("");
-}

package/.storybook/index.pcss

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/.storybook/main.js

@@ -1,20 +0,0 @@
-/** @type { import('@storybook/vue3-vite').StorybookConfig } */
-export default {
-  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)", "../src/**/*.@(mdx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-  ],
-  framework: {
-    name: "@storybook/vue3-vite",
-    options: {},
-  },
-  docs: {
-    autodocs: true,
-  },
-  env: (config) => ({
-    ...config,
-    BASE_URL: "/",
-  }),
-};

package/.storybook/manager-head.html

@@ -1,10 +0,0 @@
-<!--
-Overrides content of storybook layout HTML page <head> tag,
--->
-
-<!-- Styles overriding -->
-<style>
- div[data-testid="tooltip"] a[id]:hover {
-   background-color: rgb(17 24 39 / 5%) !important;
- }
-</style>

package/.storybook/manager.js

@@ -1,6 +0,0 @@
-import { addons } from "@storybook/manager-api";
-import vuelessTheme from "./themes/vueless.theme";
-
-addons.setConfig({
-  theme: vuelessTheme,
-});

package/.storybook/preview-head.html

@@ -1,72 +0,0 @@
-<!--
-Overrides content of preview IFRAME HTML page's <head> tag,
-affecting rendered component(s) below Canvas and Docs tabs.
--->
-<!-- Fonts overriding -->
-<link rel="dns-prefetch" href="https://fonts.googleapis.com">
-<link rel="dns-prefetch" href="https://fonts.gstatic.com">
-<link rel="preconnect" crossorigin="anonymous" href="https://fonts.googleapis.com">
-<link rel="preconnect" crossorigin="anonymous" href="https://fonts.gstatic.com">
-<link rel="stylesheet" crossorigin="anonymous" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap">
-
-<!-- Styles overriding -->
-<style>
-  body {
-    font-family: Roboto, sans-serif;
-  }
-
-  #storybook-docs h2 {
-    margin-top: 32px !important;
-    margin-bottom: 24px !important;
-    padding-bottom: 8px !important;
-    font-weight: bold !important;
-  }
-
-  .docblock-argstable-body {
-    filter: none !important;
-    border-radius: 0.5rem !important;
-  }
-
-  .docblock-argstable-body tr:not([title]) > td {
-    background-color: white !important;
-  }
-
-  .docblock-argstable-body tr td {
-    border-radius: 0 !important;
-  }
-
-  .sbdocs-preview {
-    box-shadow: none !important;
-  }
-
-  .docblock-argstable [type='checkbox']:checked,
-  .docblock-argstable [type='radio']:checked {
-    background-color: rgb(17 24 39) !important;
-  }
-
-  .docblock-argstable [type='checkbox']:focus,
-  .docblock-argstable [type='radio']:focus {
-    @apply !ring-gray-300;
-  }
-
-  .markdown {
-    .docblock-source {
-      margin: 0px 0 24px !important;
-    }
-
-    code {
-      background-color: #f3f4f6 !important;
-      border-color: #d1d5db !important;
-    }
-
-    .sbdocs-a {
-      border-bottom: dashed 1px #4b5563;
-      color: #4b5563;
-    }
-
-    .sbdocs-a:hover {
-      border-bottom: none;
-      color: #4b5563;
-    }
-  }
-</style>

package/.storybook/preview.js

@@ -1,42 +0,0 @@
-import { setup } from "@storybook/vue3";
-import { backgrounds, docs, layout } from "./configs/main.config";
-import { vue3SourceDecorator } from "./decorators/vue3SourceDecorator";
-
-// Vue plugins
-import { createStore } from "vuex";
-import NotifyServiceDefault from "vueless/ui.notify/services";
-
-// Tailwind styles
-import "./index.pcss";
-
-// Common stores
-import loader from "vueless/ui.loader-rendering/store";
-import loaderTop from "vueless/ui.other-loader-top/store";
-import breakpoint from "vueless/ui.viewport/store";
-
-// Create store instance
-const store = createStore({
-  modules: { loader, loaderTop, breakpoint },
-});
-
-// Create storybook app instance
-const storybookApp = (app) => {
-  app.use(store);
-  app.use(new NotifyServiceDefault().notifyInstance);
-};
-
-// Setup storybook
-setup(storybookApp);
-
-// Set storybook config
-export default {
-  decorators: [vue3SourceDecorator],
-  parameters: {
-    layout,
-    docs,
-    backgrounds,
-    options: {
-      storySort: (a, b) => (a.id === b.id ? 0 : a.name === "Docs" && a.id.localeCompare(b.id, undefined, { numeric: true })),
-    },
-  },
-};

package/.storybook/themes/vueless.docs.theme.js

@@ -1,41 +0,0 @@
-import { create } from "@storybook/theming/create";
-import colors from "tailwindcss/colors.js";
-
-export default create({
-  base: "light",
-  // Typography
-  fontBase: '"Roboto", sans-serif',
-  fontCode: "monospace",
-
-  // Main colors
-  colorPrimary: colors.gray["900"],
-  colorSecondary: colors.gray["500"],
-
-  // UI
-  appBg: colors.gray["100"],
-  appPreviewBg: colors.gray["50"],
-  appBorderColor: colors.gray["200"],
-  appContentBg: colors.gray["50"],
-  appBorderRadius: 8,
-
-  // Text colors
-  textColor: colors.gray["900"],
-  textInverseColor: colors.gray["50"],
-
-  // Toolbar default and active colors
-  barTextColor: colors.gray["500"],
-  barHoverColor: colors.gray["600"],
-  barSelectedColor: colors.gray["700"],
-  barBg: colors.white,
-
-  // Form colors
-  inputBg: colors.white,
-  inputBorder: colors.gray["300"],
-  inputTextColor: colors.gray["900"],
-  inputBorderRadius: 4,
-
-  buttonBg: colors.gray["100"],
-  buttonBorder: colors.gray["200"],
-  booleanBg: colors.gray["50"],
-  booleanSelectedBg: colors.gray["200"],
-});

package/.storybook/themes/vueless.theme.js

@@ -1,45 +0,0 @@
-import { create } from "@storybook/theming/create";
-import colors from "tailwindcss/colors.js";
-
-export default create({
-  base: "light",
-  // Typography
-  fontBase: '"Roboto", sans-serif',
-  fontCode: "monospace",
-
-  brandTitle: "Vueless UI",
-  brandUrl: "https://vueless.com",
-  brandImage: "/images/logo.png",
-  brandTarget: "_blank",
-
-  // Main colors
-  colorPrimary: colors.gray["900"],
-  colorSecondary: colors.gray["500"],
-
-  // UI
-  appBg: colors.white,
-  appPreviewBg: colors.gray["50"],
-  appBorderColor: colors.gray["300"],
-  appBorderRadius: 0,
-
-  // Text colors
-  textColor: colors.gray["900"],
-  textInverseColor: colors.gray["50"],
-
-  // Toolbar default and active colors
-  barTextColor: colors.gray["500"],
-  barHoverColor: colors.gray["600"],
-  barSelectedColor: colors.gray["700"],
-  barBg: colors.gray["50"],
-
-  // Form colors
-  inputBg: colors.white,
-  inputBorder: colors.gray["300"],
-  inputTextColor: colors.gray["900"],
-  inputBorderRadius: 4,
-
-  buttonBg: colors.gray["100"],
-  buttonBorder: colors.gray["100"],
-  booleanBg: colors.white,
-  booleanSelectedBg: colors.gray["100"],
-});

package/docs/README.md

@@ -1,64 +0,0 @@
-# Quick Start
-
-1\. Install `vueless` UI library packages.
-
-{% tabs %}
-{% tab title="npm" %}
-```bash
-npm install vueless @vueless/plugin-vite
-```
-{% endtab %}
-
-{% tab title="yarn" %}
-```bash
-yarn add vueless @vueless/plugin-vite
-```
-{% endtab %}
-
-{% tab title="pnpm" %}
-```bash
-pnpm add vueless @vueless/plugin-vite
-```
-{% endtab %}
-{% endtabs %}
-
-2\. Create `vueless.config.js` at the root of the project.
-
-{% code title="vueless.config.js" %}
-```javascript
-export default {
-  color: {},
-  component: {},
-};
-```
-{% endcode %}
-
-3\. Add TailwindCSS preset.
-
-<pre class="language-javascript" data-title="tailwind.config.js"><code class="lang-javascript"><strong>import { vuelessPreset } from "vueless/preset.tailwind";
-</strong>
-export default {
-  presets: [vuelessPreset],
-  ...
-};
-</code></pre>
-
-4\. Add Vite plugins.
-
-{% code title="vite.config.js" overflow="wrap" %}
-```javascript
-import { Vueless, VuelessUnpluginComponents } from "@vueless/plugin-vite";
-
-export default defineConfig({
-  plugins: [
-    ...
-    Vueless(),
-    VuelessUnpluginComponents(),
-  ],
-  ...
-})
-```
-{% endcode %}
-
-That's it! You can use components in your app now ✨
-

package/docs/SUMMARY.md

@@ -1,5 +0,0 @@
-# Table of contents
-
-* [Quick Start](README.md)
-* [Classes Autocompletion](classes-autocompletion.md)
-* [Known issues](known-issues.md)

package/docs/classes-autocompletion.md

@@ -1,67 +0,0 @@
-# Classes Autocompletion
-
-### 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.classAttributes": ["class", "config"],
-  "tailwindCSS.experimental.classRegex": [
-    ["config:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"],
-    ["/\\*tw\\*/\\s*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"]
-  ]
-}
-```
-
-### JetBrains IDEs
-
-* Check if [Tailwind CSS IntelliSense](https://www.jetbrains.com/help/webstorm/tailwind-css.html) extension already installed in the IDE and install it if not.
-* Set the plugin configuration below in `Settings` > `Languages & Frameworks` > `Style Sheets` > `Tailwind CSS`.
-
-```json
-{
-  "includeLanguages": {
-    "javascript": "javascript"
-  },
-  "suggestions": true,
-  "classAttributes": ["class", "config"],
-  "experimental": {
-    "classRegex": [
-      ["config:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"],
-      ["/\\*tw\\*/\\s*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"]
-    ]
-  }
-}
-```

package/docs/known-issues.md

@@ -1,14 +0,0 @@
-# Known issues
-
-### SyntaxError: Unexpected token 'export'
-
-```bash
-/[root dir path]/vueless.config.js:6
-export default {
-^^^^^^
-
-SyntaxError: Unexpected token 'export'
-...
-```
-
-**Solution:** add `"type": "module"` in your project `package.json`

package/index.pcss

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;