vueless 0.0.1 → 0.0.3

package/composable.ui/index.js

@@ -1,66 +1,328 @@
-import { getCurrentInstance, useAttrs, Comment, Text, Fragment } from "vue";
-import { cx, globalComponentConfig, strategyOverwrite } from "vueless/service.ui";
+import {
+  ref,
+  watchEffect,
+  getCurrentInstance,
+  toValue,
+  useAttrs,
+  Comment,
+  Text,
+  Fragment,
+} from "vue";
+import { cx, globalComponentConfig, strategy } from "vueless/service.ui";
 
-/*
+const strategyType = {
+  merge: "merge",
+  replace: "replace",
+  overwrite: "overwrite",
+};
+
+/**
   Merging component configs in a given sequence (bigger number = bigger priority):
   1. Default component config
   2. Custom global component config (/vueless.config.js)
-  3. Component config (:ui="{...}" props)
+  3. Component config (:config="{...}" props)
   4. Component classes (class="...")
-*/
-export function useUI(defaultConfig = {}, propsConfig = {}, topLevelClassKey = "wrapper") {
+ */
+export default function useUI(defaultConfig = {}, propsConfigGetter = null, topLevelClassKey) {
   const { name: componentName } = getCurrentInstance().type;
   const globalConfig = globalComponentConfig[componentName];
 
+  const isStrategyValid = strategy && Object.values(strategyType).includes(strategy);
+  const vuelessStrategy = isStrategyValid ? strategy : strategyType.merge;
+
+  const [firstClassKey] = Object.keys(defaultConfig);
+  const config = ref({});
   const attrs = useAttrs();
 
-  const ui = strategyOverwrite
-    ? { ...defaultConfig, ...globalConfig, ...propsConfig }
-    : mergeConfigs({ defaultConfig, globalConfig, propsConfig });
+  watchEffect(() => {
+    const propsConfig = propsConfigGetter && propsConfigGetter();
+
+    const mergedConfig = getMergedConfig({
+      defaultConfig,
+      globalConfig,
+      propsConfig,
+      vuelessStrategy,
+    });
+
+    config.value = mergeClassesIntoConfig(mergedConfig, topLevelClassKey || firstClassKey, attrs);
+  });
+
+  function getAttrs(configKey, options) {
+    const cvaClasses = options?.classes || "";
+    const isComponent = options?.isComponent;
+
+    const attrs = useAttrs();
+    const isDev = import.meta.env.DEV;
+    const vuelessAttrs = ref({});
+
+    const commonAttrs = {
+      ...attrs,
+      component: isDev && (attrs.component || componentName || null),
+      "config-key": isDev && (attrs["config-key"] || configKey || null),
+      "child-component": isDev && attrs.component ? componentName : null,
+      "child-config-key": isDev && attrs.component ? configKey : null,
+    };
+
+    watchEffect(() => {
+      const configKeyValue = config.value[configKey];
+      const isObject = typeof configKeyValue === "object";
+
+      const configAttrs = {
+        config: configKeyValue,
+        ...configKeyValue?.defaultVariants,
+      };
+
+      const isTopLevelClassKey = configKey === (topLevelClassKey || firstClassKey);
 
-  ui[topLevelClassKey] = cx([ui[topLevelClassKey], attrs.class]);
+      const attrClass = isTopLevelClassKey && !isComponent ? attrs.class : "";
+      const configKeyClass = isObject ? configKeyValue.base : configKeyValue;
+
+      vuelessAttrs.value = {
+        ...commonAttrs,
+        class: cx([configKeyClass, toValue(cvaClasses), attrClass]),
+        ...((isObject && configAttrs) || {}),
+      };
+    });
+
+    return vuelessAttrs;
+  }
 
   return {
-    ui,
+    config,
+    getAttrs,
+    setColor,
     hasSlotContent,
   };
 }
 
-/*
-  Recursively merge config objects with tailwind classes duplicates removing.
+/**
+  Get merged config based on config merging strategy.
+  @param {Object} defaultConfig
+  @param {Object} globalConfig
+  @param {Object} propsConfig
+  @param {string} vuelessStrategy - vueless top level merge strategy.
+
+  @returns {Object}
  */
-function mergeConfigs({ defaultConfig, globalConfig, propsConfig, ui = {} }) {
+function getMergedConfig({ defaultConfig, globalConfig, propsConfig, vuelessStrategy }) {
+  defaultConfig = cloneDeep(defaultConfig);
+
+  const strategy =
+    !globalConfig && !propsConfig
+      ? strategyType.merge
+      : propsConfig?.strategy || globalConfig?.strategy || vuelessStrategy;
+
+  if (strategy === strategyType.merge) {
+    return mergeConfigs({ defaultConfig, globalConfig, propsConfig });
+  }
+
+  if (strategy === strategyType.replace) {
+    return mergeConfigs({ defaultConfig, globalConfig, propsConfig, isReplace: true });
+  }
+
+  if (strategy === strategyType.overwrite) {
+    const isGlobalConfig = globalConfig && Object.keys(globalConfig).length;
+    const isPropsConfig = propsConfig && Object.keys(propsConfig).length;
+
+    return isPropsConfig ? propsConfig : isGlobalConfig ? globalConfig : defaultConfig;
+  }
+}
+
+/**
+  Recursively merge config objects with removing tailwind classes duplicates.
+  @param {Object} defaultConfig
+  @param {Object} globalConfig
+  @param {Object} propsConfig
+  @param {Object} config - final merged config.
+  @param {boolean} isReplace - enables class replacement instead of merge.
+
+  @returns {Object}
+ */
+function mergeConfigs({
+  defaultConfig,
+  globalConfig,
+  propsConfig,
+  config = {},
+  isReplace = false,
+}) {
   globalConfig = globalConfig || {};
   propsConfig = propsConfig || {};
 
   const isGlobalConfig = Object.keys(globalConfig).length;
   const isPropsConfig = Object.keys(propsConfig).length;
 
-  for (let key in defaultConfig) {
+  // Add unique keys from defaultConfig to composedConfig
+  let composedConfig = cloneDeep(defaultConfig);
+
+  // Add unique keys from globalConfig to composedConfig
+  for (let key in globalConfig) {
+    if (!Object.keys(composedConfig).includes(key)) {
+      composedConfig[key] = globalConfig[key];
+    }
+  }
+
+  // Add unique keys from propsConfig to composedConfig
+  for (let key in propsConfig) {
+    if (!Object.keys(composedConfig).includes(key)) {
+      composedConfig[key] = propsConfig[key];
+    }
+  }
+
+  for (let key in composedConfig) {
     if (isGlobalConfig || isPropsConfig) {
-      const isObject = typeof defaultConfig[key] === "object";
-      const isEmpty = defaultConfig[key] === null;
-
-      ui[key] =
-        isObject && !isEmpty
-          ? mergeConfigs({
-              defaultConfig: defaultConfig[key],
-              globalConfig: globalConfig[key],
-              propsConfig: propsConfig[key],
-              ui: defaultConfig[key],
-            })
-          : cx([defaultConfig[key], globalConfig[key], propsConfig[key]]);
+      if (key === "strategy") {
+        config[key] = propsConfig[key] || globalConfig[key] || defaultConfig[key];
+      } else if (key === "defaultVariants") {
+        config[key] = { ...defaultConfig[key], ...globalConfig[key], ...propsConfig[key] };
+      } else if (key === "compoundVariants") {
+        config[key] = mergeCompoundVariants({
+          defaultConfig: composedConfig,
+          globalConfig,
+          propsConfig,
+          isReplace,
+          key,
+        });
+      } else {
+        const isObjectComposedConfig = typeof composedConfig[key] === "object";
+        const isObjectGlobalConfig = typeof globalConfig[key] === "object";
+        const isObjectPropsConfig = typeof propsConfig[key] === "object";
+
+        const isObject = isObjectComposedConfig || isObjectGlobalConfig || isObjectPropsConfig;
+        const isEmpty = composedConfig[key] === null;
+        const isIconName = /^.*(iconName|IconName)$/.test(key);
+        const isI18n = key === "i18n";
+
+        config[key] =
+          isObject && !isEmpty && !isI18n
+            ? mergeConfigs({
+                defaultConfig: stringToObject(composedConfig[key]),
+                globalConfig: stringToObject(globalConfig[key]),
+                propsConfig: stringToObject(propsConfig[key]),
+                config: stringToObject(composedConfig[key]),
+                isReplace,
+              })
+            : isReplace || isIconName || isI18n
+              ? propsConfig[key] || globalConfig[key] || defaultConfig[key]
+              : cx([defaultConfig[key], globalConfig[key], propsConfig[key]]);
+      }
     } else {
-      ui[key] = defaultConfig[key];
+      config[key] = composedConfig[key];
+    }
+  }
+
+  return config;
+}
+
+/**
+  Turn simplified nested component config to regular config.
+  @param {Object | String} value
+  @returns {Object}
+ */
+function stringToObject(value) {
+  return typeof value === "object" ? value : { base: value };
+}
+
+/**
+  Merge CVA compound variants arrays.
+  @param {Object} defaultConfig
+  @param {Object} globalConfig
+  @param {Object} propsConfig
+  @param {string} key
+  @param {boolean} isReplace - enables class replacement instead of merge.
+
+  @returns {Array}
+ */
+function mergeCompoundVariants({ defaultConfig, globalConfig, propsConfig, key, isReplace }) {
+  if (
+    (globalConfig[key] && !Array.isArray(globalConfig[key])) ||
+    (propsConfig[key] && !Array.isArray(propsConfig[key])) ||
+    (defaultConfig[key] && !Array.isArray(defaultConfig[key]))
+  ) {
+    // eslint-disable-next-line no-console
+    console.error("CompoundVariants should be an array.");
+  }
+
+  let globalConfigUniqueItems = cloneDeep(globalConfig[key] || []);
+  let propsConfigUniqueItems = cloneDeep(propsConfig[key] || []);
+
+  const config = defaultConfig[key].map((defaultConfigItem) => {
+    /**
+     Compare two objects by keys for match.
+     @param {Object} configItem
+     @returns {Boolean}
+     */
+    function isSameItem(configItem) {
+      const hasConfigItemKeys = Object.keys(defaultConfigItem)
+        .map((key) => defaultConfigItem[key] === configItem[key] || key === "class")
+        .every((item) => !!item);
+
+      const hasDefaultConfigItemKeys = Object.keys(configItem)
+        .map((key) => defaultConfigItem[key] === configItem[key] || key === "class")
+        .every((item) => !!item);
+
+      return hasConfigItemKeys && hasDefaultConfigItemKeys;
     }
+
+    /**
+     Find the same compound variant item in custom config if exist.
+     @param {Object} config
+     @returns {Object|undefined}
+     */
+    function findItem(config = []) {
+      const globalConfigUniqueItemIndex = globalConfigUniqueItems.findIndex(isSameItem);
+      const propsConfigUniqueItemIndex = propsConfigUniqueItems.findIndex(isSameItem);
+
+      if (~globalConfigUniqueItemIndex) {
+        globalConfigUniqueItems.splice(globalConfigUniqueItemIndex, 1);
+      }
+
+      if (~propsConfigUniqueItemIndex) {
+        propsConfigUniqueItems.splice(propsConfigUniqueItemIndex, 1);
+      }
+
+      return config.find(isSameItem);
+    }
+
+    const globalConfigItem = findItem(globalConfig[key]);
+    const propsConfigItem = findItem(propsConfig[key]);
+
+    return globalConfigItem || propsConfigItem
+      ? {
+          ...defaultConfigItem,
+          class: isReplace
+            ? propsConfigItem?.class || globalConfigItem?.class || defaultConfigItem.class
+            : cx([defaultConfigItem.class, globalConfigItem?.class, propsConfigItem?.class]),
+        }
+      : defaultConfigItem;
+  });
+
+  return [...config, ...globalConfigUniqueItems, ...propsConfigUniqueItems];
+}
+
+/**
+  Merge component classes from "class" attribute into final config.
+  @param {Object} config
+  @param {Object} attrs
+  @param {string} topLevelClassKey
+
+  @returns {Object}
+ */
+function mergeClassesIntoConfig(config, topLevelClassKey, attrs) {
+  if (typeof config[topLevelClassKey] === "object") {
+    config[topLevelClassKey].base = cx([config[topLevelClassKey]?.base, attrs.class]);
+  } else {
+    config[topLevelClassKey] = cx([config[topLevelClassKey], attrs.class]);
   }
 
-  return ui;
+  return config;
 }
 
 /**
   Check if slot defined, and have a content.
-  @returns boolean
+  @param slot
+  @param props
+
+  @returns {boolean}
  */
 function hasSlotContent(slot, props = {}) {
   const asArray = (arg) => (Array.isArray(arg) ? arg : arg != null ? [arg] : []);
@@ -79,3 +341,52 @@ function hasSlotContent(slot, props = {}) {
 
   return !isVNodeEmpty(slot?.(props));
 }
+
+/**
+ Deeply clone given object (same as lodash.cloneDeep).
+ @param {Object} entity
+ @param cache
+
+ @returns {Object}
+ */
+function cloneDeep(entity, cache = new WeakMap()) {
+  const referenceTypes = ["Array", "Object", "Map", "Set", "Date"];
+  const entityType = Object.prototype.toString.call(entity);
+
+  if (
+    !new RegExp(referenceTypes.join("|")).test(entityType) ||
+    entity instanceof WeakMap ||
+    entity instanceof WeakSet
+  ) {
+    return entity;
+  }
+
+  if (cache.has(entity)) {
+    return cache.get(entity);
+  }
+
+  const c = new entity.constructor();
+
+  if (entity instanceof Map) {
+    entity.forEach((value, key) => c.set(cloneDeep(key), cloneDeep(value)));
+  }
+
+  if (entity instanceof Set) {
+    entity.forEach((value) => c.add(cloneDeep(value)));
+  }
+
+  if (entity instanceof Date) {
+    return new Date(entity);
+  }
+
+  cache.set(entity, c);
+
+  return Object.assign(
+    c,
+    ...Object.keys(entity).map((prop) => ({ [prop]: cloneDeep(entity[prop], cache) })),
+  );
+}
+
+function setColor(classes, color) {
+  return classes?.replaceAll("{color}", color);
+}

package/library.vue-tailwind-3/index.js

@@ -4,9 +4,4 @@ export { default as TCard } from "./t-card";
 export { default as TCheckbox } from "./t-checkbox";
 export { default as TDatepicker } from "./TDatepicker/index";
 export { default as TDropdown } from "./t-dropdown";
-export { default as TInput } from "./t-input";
-export { default as TModal } from "./t-modal";
-export { default as TPagination } from "./t-pagination";
 export { default as TRadio } from "./t-radio";
-export { default as TTable } from "./t-table";
-export { default as TTextarea } from "./t-textarea";

package/library.web-types-gen/lib/build.js

@@ -157,25 +157,48 @@ async function extractInformation(absolutePath, config) {
 
   function getDefaultConfigJson(fileContents) {
     const objectStartIndex = fileContents.indexOf("{");
-    const objectString = fileContents.substring(objectStartIndex).replace("};", "}");
+    const variablePattern = /([^:]+):\s*(?!true|false|undefined)([a-zA-Z_]\w*)/g;
+    let objectString = fileContents
+      .substring(objectStartIndex)
+      .replace("};", "}")
+      .replace(/undefined/g, '"undefined"')
+      .replace(variablePattern, (match, key) => key + ": {}");
 
     return eval("(" + objectString + ")"); // Converting into JS object
   }
 
   function getGlobalConfigJson(fileContents, componentName) {
     const startIndex = fileContents.indexOf(`${componentName}:`);
-    const endIndex = fileContents.indexOf("}", startIndex) + 1;
+
+    // find index of the last closing bracket
+    let endIndex = -1;
+    let braceCount = 0;
+
+    for (let i = startIndex; i < fileContents.length; i++) {
+      if (fileContents[i] === "{") {
+        braceCount++;
+      } else if (fileContents[i] === "}") {
+        braceCount--;
+
+        if (braceCount === 0) {
+          endIndex = i;
+          break;
+        }
+      }
+    }
+
+    // Get component config raw string
     const rawString = fileContents.slice(startIndex, endIndex);
 
     // If the stings are present in config but commented - remove them
-    const cleanContents = rawString.replace(/\/\/.*\n?/g, "");
+    const stringWithoutComments = rawString.replace(/\/\/.*$/gm, "");
 
     // Check if final JSON string is valid: TODO: find better solution
-    if (!cleanContents.includes("}")) return {};
+    if (!stringWithoutComments.includes("}")) return {};
 
-    const jsonString = `{${rawString}\n}}`
-      .replace(/'/g, '"')
-      .replace(/(\w+)\s*:/g, '"$1":')
+    const jsonString = `{${stringWithoutComments}\n}}`
+      .replace(/[`']/g, '"')
+      .replace(/(\w+)\s*: /g, '"$1":')
       .replace(/,\s*}/g, "}");
 
     return JSON.parse(jsonString);
@@ -201,12 +224,15 @@ async function extractInformation(absolutePath, config) {
         attributes: doc.props?.map((prop) => ({
           name: prop.name,
           required: prop.required,
-          description: prop.description,
+          description: prop.tags?.ignore ? "@ignore: " + prop.description : prop.description,
           value: {
             kind: "expression",
             type: prop.values ? `'${prop.values.join("' | '")}'` : prop.type?.name ?? "any",
           },
-          default: (defaultValues && defaultValues[prop.name]) || prop.defaultValue?.value,
+          default:
+            defaultValues && prop.name in defaultValues
+              ? defaultValues[prop.name].toString()
+              : prop.defaultValue?.value.toString(),
         })),
         events: doc.events?.map((event) => ({
           name: event.name,

package/library.web-types-gen/lib/config.js

@@ -1,5 +1,5 @@
-import * as path from "path";
-import * as fs from "fs";
+import path from "path";
+import fs from "fs";
 import { readFile } from "fs/promises";
 
 export async function extractConfig(cwd, watch = false, configFileFromCmd, pathArray = []) {
@@ -11,16 +11,22 @@ export async function extractConfig(cwd, watch = false, configFileFromCmd, pathA
   const fileContent = await readFile(path.join(cwd, "package.json"), "utf-8");
   const packageJson = JSON.parse(fileContent);
 
+  let additionalConfig = {};
+
+  if (fs.existsSync(configFilePath)) {
+    additionalConfig = await import(configFilePath);
+  }
+
   return {
     cwd,
     watch,
     componentsRoot: configFilePath ? path.dirname(configFilePath) : cwd,
-    components: componentsFromCmd || "src/**/*.vue",
+    components: componentsFromCmd || "(.vueless/**/*.vue|src/components/**/*.vue)",
     outFile: outFileFromCmd || packageJson["web-types"] || "./web-types.json",
     packageName: packageJson["name"],
     packageVersion: packageJson["version"],
     typesSyntax: "typescript",
     descriptionMarkup: "markdown",
-    ...(fs.existsSync(configFilePath) ? require(configFilePath) : undefined),
+    ...additionalConfig,
   };
 }

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "vueless",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Vue Styleless Component Framework",
+  "homepage": "https://github.com/vuelessjs/vueless#readme",
+  "author": "Johnny Grid",
+  "license": "MIT",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -10,11 +13,41 @@
     "type": "git",
     "url": "git+https://github.com/vuelessjs/vueless.git"
   },
-  "author": "Johnny Grid",
-  "license": "MIT",
   "bugs": {
     "url": "https://github.com/vuelessjs/vueless/issues"
   },
-  "homepage": "https://github.com/vuelessjs/vueless#readme",
+  "dependencies": {
+    "@uppy/core": "^3.3.1",
+    "@uppy/drag-drop": "^3.0.2",
+    "@uppy/vue": "^1.0.2",
+    "cva": "^1.0.0-beta.1",
+    "lodash.clonedeep": "^4.5.0",
+    "lodash.debounce": "^4.0.8",
+    "lodash.get": "^4.4.2",
+    "lodash.isequal": "^4.5.0",
+    "lodash.merge": "^4.6.2",
+    "lodash.pick": "^4.4.0",
+    "lodash.range": "^3.2.0",
+    "tailwind-merge": "^2.1.0",
+    "vue-tippy": "^6.0.0-beta.0"
+  },
+  "devDependencies": {
+    "@material-symbols/svg-500": "^0.14.3",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/blocks": "^8.0.0",
+    "@storybook/manager-api": "^8.0.0",
+    "@storybook/test": "^8.0.0",
+    "@storybook/theming": "^8.0.0",
+    "@storybook/vue3": "^8.0.0",
+    "@storybook/vue3-vite": "^8.0.0",
+    "@tailwindcss/forms": "^0.5.4",
+    "autoprefixer": "^10.4.5",
+    "prettier2": "npm:prettier@2.8.8",
+    "storybook": "^8.0.0",
+    "svgo": "^3.2.0",
+    "tailwindcss": "^3.3.3"
+  },
   "web-types": "./web-types.json"
 }

package/plugin.vite/index.js

@@ -0,0 +1,59 @@
+/* eslint-disable no-console */
+
+import UnpluginVueComponents from "unplugin-vue-components/vite";
+import unpluginComponentsResolver from "./services/unpluginComponentsResolver";
+import { copyIcons, removeIcons } from "./services/iconResolver.service";
+import { loadSvg } from "./services/svgLoader.service";
+import { createTailwindSafelist } from "./services/tailwindSafelist.service";
+
+/* Automatically importing Vueless components on demand */
+export const VuelessUnpluginComponents = (options) =>
+  UnpluginVueComponents({
+    resolvers: [unpluginComponentsResolver],
+    dts: false,
+    ...options,
+  });
+
+/*
+  – Creates tailwind colors safelist (collect only used on the project colors).
+  – Collects SVG icons for build (UIcon bundle size optimization).
+  – Loads SVG images as a Vue components.
+ */
+export const Vueless = function (options = {}) {
+  /* remove icons if server stopped */
+  process.on("SIGINT", () => {
+    removeIcons(options.debug);
+    process.exit(0);
+  });
+
+  return {
+    name: "vite-plugin-vue-vueless",
+    enforce: "pre",
+
+    config: () => ({
+      define: {
+        "process.env": {},
+      },
+    }),
+
+    configResolved: (config) => {
+      if (config.command === "build") {
+        /* collect used in project colors for tailwind safelist */
+        createTailwindSafelist();
+        /* dynamically copy icons before build */
+        copyIcons(options.mode, options.debug);
+      }
+
+      if (config.command === "dev" || config.command === "serve") {
+        /* remove dynamically copied icons after build */
+        removeIcons(options.debug);
+      }
+    },
+
+    /* remove dynamically copied icons after build */
+    buildEnd: () => removeIcons(options.debug),
+
+    /* load SVG images as a Vue components */
+    load: async (id) => await loadSvg(id, options),
+  };
+};