vueless 0.0.9 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/readme/README.md

@@ -1,8 +0,0 @@
-# Vueless:
-
-See:
-* [installation.md](installation.md)
-* [customization.md](customization.md)
-
-## TODO: Create general readme later
-

package/src/composable.ui/index.js

@@ -1,395 +0,0 @@
-import {
-  ref,
-  watchEffect,
-  getCurrentInstance,
-  toValue,
-  useAttrs,
-  Comment,
-  Text,
-  Fragment,
-} from "vue";
-import { cx, globalComponentConfig, strategy } from "../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 (:config="{...}" props)
-  4. Component classes (class="...")
- */
-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();
-
-  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,
-    };
-
-    // Delete value key to prevent v-model overwrite
-    delete commonAttrs.value;
-
-    watchEffect(() => {
-      const configKeyValue = config.value[configKey];
-      const isObject = typeof configKeyValue === "object";
-
-      const configAttrs = {
-        config: configKeyValue,
-        ...configKeyValue?.defaultVariants,
-      };
-
-      const isTopLevelClassKey = configKey === (topLevelClassKey || firstClassKey);
-
-      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 {
-    config,
-    getAttrs,
-    setColor,
-    hasSlotContent,
-  };
-}
-
-/**
-  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 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;
-
-  // 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) {
-      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 {
-      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 config;
-}
-
-/**
-  Check if slot defined, and have a content.
-  @param slot
-  @param props
-
-  @returns {boolean}
- */
-function hasSlotContent(slot, props = {}) {
-  const asArray = (arg) => (Array.isArray(arg) ? arg : arg != null ? [arg] : []);
-
-  const isVNodeEmpty = (vnode) => {
-    return (
-      !vnode ||
-      asArray(vnode).every(
-        (vnode) =>
-          vnode.type === Comment ||
-          (vnode.type === Text && !vnode.children?.length) ||
-          (vnode.type === Fragment && !vnode.children?.length),
-      )
-    );
-  };
-
-  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/src/service.storybook/index.js

@@ -1,91 +0,0 @@
-import { contributions } from "/web-types.json";
-
-const getComponentData = (componentName) => {
-  return contributions.html.tags.find((item) => item.name === componentName);
-};
-
-export function getSlotNames(componentName) {
-  return getComponentData(componentName)?.slots?.map((item) => item.name);
-}
-
-export function getArgTypes(componentName) {
-  const component = getComponentData(componentName);
-
-  if (!component) return;
-
-  const types = {};
-
-  getSlotNames(componentName)?.forEach((slotName) => {
-    types[slotName] = { control: "text" };
-  });
-
-  component.attributes?.forEach((attribute) => {
-    const type = attribute.value.type;
-
-    if (type === "string") {
-      types[attribute.name] = {
-        control: "text",
-        table: {
-          defaultValue: { summary: attribute.default || "" },
-        },
-      };
-    }
-
-    if (type === "number") {
-      types[attribute.name] = {
-        control: "number",
-        table: {
-          defaultValue: { summary: attribute.default || "" },
-        },
-      };
-    }
-
-    if (type === "boolean") {
-      types[attribute.name] = {
-        control: "boolean",
-        table: {
-          defaultValue: { summary: attribute.default || "" },
-        },
-      };
-    }
-
-    if (type.includes("|")) {
-      const options = attribute.value.type.replace(/['|]/g, "").split(/\s+/);
-
-      if (options.length > 1) {
-        types[attribute.name] = {
-          options,
-          control: "select",
-          table: {
-            defaultValue: { summary: attribute.default || "" },
-          },
-        };
-      }
-    }
-
-    if (attribute.description?.includes("@ignore")) {
-      types[attribute.name] = {
-        table: {
-          disable: true,
-        },
-      };
-    }
-  });
-
-  if (import.meta.env.STORYBOOK_FULL) {
-    component.events?.forEach((event) => {
-      const eventName = "on" + event.name.charAt(0).toUpperCase() + event.name.slice(1);
-
-      types[eventName] = {
-        action: event.name,
-        table: { category: "Storybook Events" },
-      };
-    });
-  }
-
-  return types;
-}
-
-export function getSource(defaultCnfig) {
-  return defaultCnfig.replace("export default /*tw*/ ", "").replace(";", "");
-}

package/src/service.tailwind/index.js

@@ -1,103 +0,0 @@
-import colors from "tailwindcss/colors.js";
-import forms from "@tailwindcss/forms";
-import vuelessConfig from "../../vueless.config.js";
-
-export const grayColors = ["slate", "gray", "zinc", "neutral", "stone"];
-export const brandColors = [
-  "brand",
-  "red",
-  "orange",
-  "amber",
-  "yellow",
-  "lime",
-  "green",
-  "emerald",
-  "teal",
-  "cyan",
-  "sky",
-  "blue",
-  "indigo",
-  "violet",
-  "purple",
-  "fuchsia",
-  "pink",
-  "rose",
-];
-
-export default class TailwindServiceDefault {
-  constructor() {
-    this.vuelessPreset = this.get();
-  }
-
-  /**
-   * Transform CSS variable with RGB numbers into CSS color.
-   * @returns {Function}
-   */
-  static twColorWithOpacity(variableName) {
-    return ({ opacityValue }) => {
-      return opacityValue !== undefined
-        ? `rgba(var(${variableName}), ${opacityValue})`
-        : `rgb(var(${variableName}))`;
-    };
-  }
-
-  /**
-   * Convert sting patterns to RegExp.
-   * @returns {Array} - TailwindCSS safelist.
-   */
-  static getSafelist() {
-    return JSON.parse(process.env.SAFELIST_JSON || "[]").map((rule) => ({
-      ...rule,
-      pattern: new RegExp(rule.pattern),
-    }));
-  }
-
-  /**
-   * Generates preset for TailwindCSS base on Vueless config.
-   * @returns {Object}
-   */
-  get() {
-    const isProd = process.env.NODE_ENV === "production";
-    const brandColor = TailwindServiceDefault.twColorWithOpacity("--color-brand");
-    const { brand, gray } = vuelessConfig;
-
-    let brandPalette = brandColors.includes(brand) ? colors[brand] : colors.green;
-    let grayPalette = grayColors.includes(gray) ? colors[gray] : colors.zinc;
-
-    if (brand === "grayscale") {
-      brandPalette = grayPalette;
-    }
-
-    const prodSafelist = TailwindServiceDefault.getSafelist();
-    const devSafelist = [
-      {
-        pattern: /(border|bg|text|ring)-(.*)-((50|[1-9]00|950)?)$/,
-        variants: ["hover", "focus", "focus-within", "active"],
-      },
-    ];
-
-    return {
-      content: [
-        "./index.html",
-        "./src/**/*.{js,ts,jsx,tsx,vue}",
-        "./vueless.config.{js,ts}",
-        "./node_modules/vueless/**/*.{js,ts,vue}",
-      ],
-      safelist: isProd ? prodSafelist : devSafelist,
-      theme: {
-        extend: {
-          colors: {
-            brand: { ...brandPalette, DEFAULT: brandColor },
-            gray: grayPalette,
-          },
-          fontSize: {
-            "2xs": ["0.625rem", "0.875rem"], //  10px
-          },
-        },
-      },
-      plugins: [forms],
-    };
-  }
-}
-
-export const { vuelessPreset } = new TailwindServiceDefault();