vueless 0.0.7 → 0.0.9

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "vueless",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
   "author": "Johnny Grid",
   "main": "index.js",
   "type": "module",
+  "files": ["src"],
   "scripts": {
     "lint": "eslint --ext .vue,.js,.ts --no-fix --ignore-path .eslintignore src/ .storybook/ tests/",
     "lint:fix": "eslint --ext .vue,.js,.ts --fix --ignore-path .eslintignore src/ .storybook/ tests/",
@@ -14,9 +15,9 @@
     "release": "release-it patch --ci",
     "release:production": "release-it minor --ci",
     "release:production-major": "release-it major --ci",
-    "sb:dev-full": "STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
+    "sb:dev-full": "STORYBOOK_VUELESS_ENV=1 STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
     "sb:dev": "storybook dev -p 6006 --docs --no-open",
-    "sb:build": "NO_PWA=1 storybook build --docs",
+    "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",
     "postinstall": "node .web-types-gen"
@@ -43,6 +44,7 @@
     "@vueless/storybook": "file:../vueless-storybook",
     "@vueless/vite-plugin": "file:../vite-plugin-vueless",
     "autoprefixer": "^10.4.19",
+    "cssnano": "^6.1.2",
     "eslint": "^8.55.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^5.0.1",
@@ -56,9 +58,10 @@
     "vite": "^5.1.1",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-eslint": "^1.8.1",
-    "vue": "^3.4.19",
-    "vue-i18n": "^9.9.1",
-    "vue-router": "^4.2.5"
+    "vue": "^3.4.19"
+  },
+  "resolutions": {
+    "string-width": "4.2.3"
   },
   "repository": {
     "type": "git",

package/src/service.tailwind/index.js

@@ -82,9 +82,6 @@ export default class TailwindServiceDefault {
         "./src/**/*.{js,ts,jsx,tsx,vue}",
         "./vueless.config.{js,ts}",
         "./node_modules/vueless/**/*.{js,ts,vue}",
-        // TODO: remove it after creating the package
-        "./.vueless-layouts/**/*.{js,ts,vue}",
-        "./.vueless-services/**/*.{js,ts,vue}",
       ],
       safelist: isProd ? prodSafelist : devSafelist,
       theme: {
@@ -93,13 +90,6 @@ export default class TailwindServiceDefault {
             brand: { ...brandPalette, DEFAULT: brandColor },
             gray: grayPalette,
           },
-          spacing: {
-            "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.875rem"], //  10px
           },

package/src/service.ui/index.js

@@ -3,7 +3,7 @@ import { defineConfig } from "cva";
 import { twMerge } from "tailwind-merge";
 import colors from "tailwindcss/colors";
 import { brandColors, grayColors } from "../service.tailwind";
-import vuelessConfig from "/vueless.config.js";
+import vuelessConfig from "../../../../vueless.config.js";
 
 /*
   Export cva (class variance authority) methods extended with tailwind-merge.

package/src/ui.form-radio-card/index.vue

@@ -112,33 +112,33 @@ const props = defineProps({
   },
 });
 
-const labelConfig = {
-  wrapper: {
-    base: `
-    rounded-lg border border-solid border-gray-300 cursor-pointer relative w-full
-    hover:border-gray-400 focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15]
-    px-6 py-4`,
-  },
-  label: {
-    base: "h-full w-full cursor-pointer",
-    variants: {
-      placement: {
-        topInside: "left-0 !top-0",
-      },
-    },
-  },
-  description: {
-    variants: {
-      placement: {
-        topInside: "pl-0",
-      },
-    },
-  },
-};
+// const labelConfig = {
+//   wrapper: {
+//     base: `
+//     rounded-lg border border-solid border-gray-300 cursor-pointer relative w-full
+//     hover:border-gray-400 focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15]
+//     px-6 py-4`,
+//   },
+//   label: {
+//     base: "h-full w-full cursor-pointer",
+//     variants: {
+//       placement: {
+//         topInside: "left-0 !top-0",
+//       },
+//     },
+//   },
+//   description: {
+//     variants: {
+//       placement: {
+//         topInside: "pl-0",
+//       },
+//     },
+//   },
+// };
 
 const emit = defineEmits(["update:modelValue"]);
 
-const { radioAttrs, iconAttrs, wrapperAttrs, labelAttrs } = useAttrs(props);
+const { radioAttrs, iconAttrs, wrapperAttrs /* labelAttrs */ } = useAttrs(props);
 
 const isMobileDevice = computed(() => {
   return store.getters["breakpoint/isMobileDevice"];

package/src/ui.image-icon/index.vue

@@ -147,12 +147,22 @@ const { config, wrapperAttrs, containerAttrs, iconAttrs } = useAttrs(props);
 let generatedIcons = [];
 
 if (import.meta.env.PROD) {
-  generatedIcons = Object.entries(
-    import.meta.glob(`../../../../src/assets/images/.generated/**/*.svg`, {
-      eager: true,
-      query: "?component",
-    }),
-  );
+  // when building storybook from inside the package (only for Vueless contributors).
+  if (import.meta.env.STORYBOOK_VUELESS_ENV) {
+    generatedIcons = Object.entries(
+      import.meta.glob(`../assets/images/.generated/**/*.svg`, {
+        eager: true,
+        query: "?component",
+      }),
+    );
+  } else {
+    generatedIcons = Object.entries(
+      import.meta.glob(`../../../../src/assets/images/.generated/**/*.svg`, {
+        eager: true,
+        query: "?component",
+      }),
+    );
+  }
 }
 
 const dynamicComponent = computed(() => {

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,7 +0,0 @@
-/node_modules
-/dist
-/storybook-static
-
-# allow to format hidden folders
-!/.storybook
-!/.mono

package/.eslintrc.js

@@ -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";
-
-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 "../../src/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/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,50 +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 { createRouter, createWebHistory } from "vue-router";
-import NotifyServiceDefault from "../src/ui.notify/services";
-
-// Tailwind styles
-import "../index.pcss";
-
-// Common stores
-import loader from "../src/ui.loader-rendering/store";
-import loaderTop from "../src/ui.loader-top/store";
-import breakpoint from "../src/ui.viewport/store";
-
-// Create store instance
-const store = createStore({
-  modules: { loader, loaderTop, breakpoint },
-});
-
-// Create router instance
-const router = createRouter({
-  history: createWebHistory("/"),
-  routes: [{ path: "/:pathMatch(.*)*", component: () => import("../src/ui.container-page") }],
-});
-
-// Create storybook app instance
-const storybookApp = (app) => {
-  app.use(store);
-  app.use(router);
-  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";
-
-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";
-
-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/.web-types-gen/index.js

@@ -1,17 +0,0 @@
-#!/usr/bin/env node
-import minimist from "minimist";
-import { extractConfig } from "./lib/config.js";
-import build from "./lib/build.js";
-
-const {
-  _: pathArray,
-  configFile,
-  watch,
-  cwd,
-} = minimist(process.argv.slice(2), {
-  alias: { c: "configFile", w: "watch" },
-});
-
-const conf = await extractConfig(cwd || process.cwd(), watch, configFile, pathArray);
-
-build(conf);