vueless 0.0.16 → 0.0.17

package/.browserslistrc

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

package/.editorconfig

@@ -0,0 +1,12 @@
+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

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

package/.eslintrc.cjs

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,119 @@
+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

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

package/.storybook/main.js

@@ -0,0 +1,20 @@
+/** @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

@@ -0,0 +1,10 @@
+<!--
+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

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

package/.storybook/preview-head.html

@@ -0,0 +1,72 @@
+<!--
+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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,64 @@
+# 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

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

package/docs/classes-autocompletion.md

@@ -0,0 +1,67 @@
+# 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

@@ -0,0 +1,14 @@
+# 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

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

package/jsconfig.json

@@ -0,0 +1,11 @@
+// https://code.visualstudio.com/docs/languages/jsconfig#_what-is-jsconfigjson
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "../web-types.json":  ["../../web-types.json"],
+      "../../../vueless.config.js": ["../../vueless.config.js"],
+      "vueless": ["./src/*"]
+    }
+  }
+}