vueless 0.0.3 → 0.0.4

package/plugin.vite/services/svgLoader.service.js

@@ -1,76 +0,0 @@
-/* eslint-disable no-console */
-
-import fs from "fs";
-import { compileTemplate } from "vue/compiler-sfc";
-import { optimize as optimizeSvg } from "svgo";
-
-const DEFAULT_SVGO_CONFIG = {
-  plugins: [
-    {
-      name: "preset-default",
-      params: {
-        overrides: {
-          removeViewBox: false,
-          convertColors: {
-            currentColor: true,
-          },
-        },
-      },
-    },
-  ],
-};
-
-export async function loadSvg(id, options) {
-  const { defaultImport = "url", svgo = true, svgoConfig = DEFAULT_SVGO_CONFIG } = options;
-  const svgRegex = /\.svg(\?(raw|url|component|skipsvgo))?$/;
-
-  if (!id.match(svgRegex)) {
-    return;
-  }
-
-  let svg;
-  const [path, query] = id.split("?", 2);
-  const importType = query || defaultImport;
-
-  // use default svg loader
-  if (importType === "url" && !path.includes(".generated")) {
-    return;
-  }
-
-  try {
-    svg = await fs.promises.readFile(path, "utf-8");
-  } catch (ex) {
-    console.warn(
-      "\n",
-      `${id} couldn't be loaded by vite-plugin-vue-vueless, fallback to default loader.`,
-    );
-
-    return;
-  }
-
-  if (importType === "raw") {
-    return `export default ${JSON.stringify(svg)}`;
-  }
-
-  if (svgo !== false && query !== "skipsvgo") {
-    svg = optimizeSvg(svg, {
-      ...svgoConfig,
-      path,
-    }).data;
-  }
-
-  // prevent compileTemplate from removing the style tag
-  svg = svg.replace(/<style/g, '<component is="style"').replace(/<\/style/g, "</component");
-
-  const { code } = compileTemplate({
-    id: JSON.stringify(id),
-    source: svg,
-    filename: path,
-    transformAssetUrls: false,
-  });
-
-  return `
-    ${code}
-    export default { render: render }
-  `;
-}

package/plugin.vite/services/tailwindSafelist.service.js

@@ -1,197 +0,0 @@
-import fs from "fs";
-import path from "path";
-
-import vuelessConfig from "../../../vueless.config.js";
-import { brandColors } from "../../service.tailwind";
-import { components } from "./unpluginComponentsResolver.js";
-
-const COMPONENTS_WITH_COLOR_PROP = [
-  "UButton",
-  "ULink",
-  "UDropdownButton",
-  "UDropdownBadge",
-  "UDropdownLink",
-  "UCheckbox",
-  "UCheckboxGroup",
-  "UCheckboxMultiState",
-  "USwitch",
-  "URadio",
-  "URadioCard",
-  "URadioGroup",
-  "UHeader",
-  "UText",
-  "UAlert",
-  "UMoney",
-  "UBadge",
-  "UModalConfirm",
-  "UIcon",
-  "UDot",
-];
-
-export function createTailwindSafelist() {
-  const safelist = [];
-
-  const srcVueFiles = getFiles("src", ".vue");
-  const vuelessVueFiles = getFiles(".vueless", ".vue");
-  const vuelessLayoutVueFiles = getFiles(".vueless-layouts", ".vue");
-  const vuelessJsConfigFiles = getFiles(".vueless", ".config.js");
-
-  const files = [
-    ...srcVueFiles,
-    ...vuelessVueFiles,
-    ...vuelessLayoutVueFiles,
-    ...vuelessJsConfigFiles,
-  ];
-
-  /* Generate safelist */
-  COMPONENTS_WITH_COLOR_PROP.forEach((component) => {
-    const { colors, isExistsComponent } = findColors(files, component);
-
-    if (isExistsComponent && colors.length) {
-      // eslint-disable-next-line vue/max-len, prettier/prettier
-      const defaultConfigPath = vuelessJsConfigFiles.find((file) => checkDefaultConfig(file, component));
-
-      const defaultSafelist = getDefaultConfig(defaultConfigPath)?.safelist;
-      const customSafelist =
-        vuelessConfig.component && vuelessConfig.component[component]?.safelist;
-
-      const colorString = colors.join("|");
-
-      const selectedSafelist = customSafelist
-        ? customSafelist && customSafelist(colorString)
-        : defaultSafelist && defaultSafelist(colorString);
-
-      if (selectedSafelist) {
-        safelist.push(...selectedSafelist);
-      }
-    }
-  });
-
-  process.env.SAFELIST_JSON = JSON.stringify(safelist);
-
-  console.log(process.env.SAFELIST_JSON);
-}
-
-function getFiles(dirPath, extension, fileList) {
-  const files = fs.readdirSync(dirPath);
-
-  fileList = fileList || [];
-
-  files.forEach((file) => {
-    const filePath = path.join(dirPath, file);
-    const stat = fs.statSync(filePath);
-
-    if (stat.isDirectory()) {
-      fileList = getFiles(filePath, extension, fileList);
-    } else {
-      filePath.endsWith(extension) && fileList.push(filePath);
-    }
-  });
-
-  return fileList;
-}
-
-function findColors(files, component) {
-  const colors = [];
-  const brandColor = getBrandColor();
-
-  if (brandColor && brandColor !== "grayscale") {
-    colors.push(brandColor);
-  }
-
-  if (!brandColors.includes("gray")) {
-    brandColors.push("gray");
-  }
-
-  /* Add safelist colors from config */
-  getSafelistColorsFromConfig(component).forEach((color) => addColor(color, colors));
-
-  let isExistsComponent = false;
-
-  files.forEach((file) => {
-    const fileContents = fs.existsSync(file) ? fs.readFileSync(file).toString() : "";
-
-    const isDefaultConfig = checkDefaultConfig(file, component);
-
-    /* Collect color from config objects */
-    if (isDefaultConfig) {
-      const colorRegExp = /\bcolor\s*:\s*["']([^"'\s]+)["']/g;
-      const matchedColors = fileContents.match(colorRegExp);
-
-      if (matchedColors) {
-        for (const match of matchedColors) {
-          const matchedColor = colorRegExp.exec(match);
-
-          addColor(matchedColor && matchedColor[1], colors);
-
-          colorRegExp.lastIndex = 0;
-        }
-      }
-    }
-
-    /* Collect color from U[Component] */
-    const componentRegExp = new RegExp(`<${component}[^>]+>`, "g");
-    const matchedComponent = fileContents.match(componentRegExp);
-
-    if (matchedComponent) {
-      isExistsComponent = true;
-
-      /* single value prop */
-      const colorRegExp = /\bcolor\s*=\s*["']([^"'\s]+)["']/;
-
-      for (const match of matchedComponent) {
-        const matchedColor = colorRegExp.exec(match);
-
-        addColor(matchedColor && matchedColor[1], colors);
-      }
-
-      /* ternary value prop */
-      const ternaryRegExp = /\bcolor="[^']*'([^']*)'\s*:\s*'([^']*)'/;
-
-      for (const match of matchedComponent) {
-        const matchedColors = ternaryRegExp.exec(match);
-
-        addColor(matchedColors && matchedColors[1], colors);
-        addColor(matchedColors && matchedColors[2], colors);
-      }
-    }
-  });
-
-  return { colors, isExistsComponent };
-}
-
-function addColor(color, colors) {
-  if (brandColors.includes(color) && !colors.includes(color)) {
-    colors.push(color);
-  }
-}
-
-function getSafelistColorsFromConfig(component) {
-  const globalSafelistColors = vuelessConfig.safelistColors || [];
-  const componentSafelistColors =
-    (vuelessConfig.component && vuelessConfig.component[component]?.safelistColors) || [];
-
-  return [...globalSafelistColors, ...componentSafelistColors];
-}
-
-function getBrandColor(component) {
-  return vuelessConfig.component
-    ? vuelessConfig.component[component]?.defaultVariants?.color
-    : vuelessConfig.brand || "";
-}
-
-function checkDefaultConfig(filePath, component) {
-  return filePath.includes(components[component]) && filePath.endsWith("default.config.js");
-}
-
-function getDefaultConfig(path) {
-  if (fs.existsSync(path)) {
-    const defaultConfigFile = fs.readFileSync(path).toString();
-
-    const objectStartIndex = defaultConfigFile.indexOf("{");
-    const objectString = defaultConfigFile.substring(objectStartIndex).replace("};", "}");
-
-    // indirect eval
-    return (0, eval)("(" + objectString + ")"); // Converting into JS object
-  }
-}

package/plugin.vite/services/unpluginComponentsResolver.js

@@ -1,172 +0,0 @@
-/**
- Custom vueless UI library resolver for "unplugin-vue-components" plugin.
-
- When new components are added, please add related to them data into an object below with a format:
- - key = component name;
- - value = component folder;
-
- Docs:
- https://github.com/unplugin/unplugin-vue-components?tab=readme-ov-file#importing-from-ui-libraries
- */
-
-export const components = {
-  /* Buttons & Links */
-  UButton: "ui.button",
-  ULink: "ui.button-link",
-  UToggle: "ui.button-toggle",
-  UToggleItem: "ui.button-toggle-item",
-
-  /* Dropdowns */
-  UDropdownButton: "ui.dropdown-button",
-  UDropdownBadge: "ui.dropdown-badge",
-  UDropdownLink: "ui.dropdown-link",
-  UDropdownItem: "ui.dropdown-item",
-
-  /* Form Inputs & Controls */
-  UInput: "ui.form-input",
-  UInputFile: "ui.form-input-file",
-  UInputMoney: "ui.form-input-money",
-  UInputSearch: "ui.form-input-search",
-  UInputNumber: "ui.form-input-number",
-  UInputRating: "ui.form-input-rating",
-  UTextarea: "ui.form-textarea",
-  USelect: "ui.form-select",
-  UMultiselect: "ui.form-select-multi",
-  UCheckbox: "ui.form-checkbox",
-  UCheckboxGroup: "ui.form-checkbox-group",
-  UCheckboxMultiState: "ui.form-checkbox-multi-state",
-  USwitch: "ui.form-switch",
-  URadio: "ui.form-radio",
-  URadioCard: "ui.form-radio-card",
-  URadioGroup: "ui.form-radio-group",
-  UCalendar: "ui.form-calendar",
-  UDatePicker: "ui.form-date-picker",
-  UDatePickerRange: "ui.form-date-picker-range",
-  ULabel: "ui.form-label",
-
-  /* Text & Content */
-  UHeader: "ui.text-header",
-  UText: "ui.text-block",
-  UAlert: "ui.text-alert",
-  UMoney: "ui.text-money",
-  UFile: "ui.text-file",
-  UFiles: "ui.text-files",
-  UEmpty: "ui.text-empty",
-  UBadge: "ui.text-badge",
-
-  /* Containers */
-  UDivider: "ui.container-divider",
-  URow: "ui.container-row",
-  UGroup: "ui.container-group",
-  UGroups: "ui.container-groups",
-  UAccordion: "ui.container-accordion",
-  UCard: "ui.container-card",
-  UModal: "ui.container-modal",
-  UModalConfirm: "ui.container-modal-confirm",
-  UPage: "ui.container-page",
-
-  /* Images and Icons */
-  UIcon: "ui.image-icon",
-  ULogo: "ui.image-logo",
-  UAvatar: "ui.image-avatar",
-
-  /* Data */
-  UTable: "ui.data-table",
-  UTableCell: "ui.data-table-cell",
-  UDataList: "ui.data-list",
-
-  /* Navigation */
-  UTab: "ui.navigation-tab",
-  UTabs: "ui.navigation-tabs",
-  UStepper: "ui.navigation-stepper",
-  UPagination: "ui.navigation-pagination",
-
-  /* Other */
-  UDot: "ui.other-dot",
-  ULoader: "ui.other-loader",
-};
-
-export default function (componentName) {
-  const components = {
-    /* Buttons & Links */
-    UButton: "ui.button",
-    ULink: "ui.button-link",
-    UToggle: "ui.button-toggle",
-    UToggleItem: "ui.button-toggle-item",
-
-    /* Dropdowns */
-    UDropdownButton: "ui.dropdown-button",
-    UDropdownBadge: "ui.dropdown-badge",
-    UDropdownLink: "ui.dropdown-link",
-    UDropdownItem: "ui.dropdown-item",
-    UDropdownList: "ui.dropdown-list",
-
-    /* Form Inputs & Controls */
-    UInput: "ui.form-input",
-    UInputFile: "ui.form-input-file",
-    UInputMoney: "ui.form-input-money",
-    UInputSearch: "ui.form-input-search",
-    UInputNumber: "ui.form-input-number",
-    UInputRating: "ui.form-input-rating",
-    UTextarea: "ui.form-textarea",
-    USelect: "ui.form-select",
-    UCheckbox: "ui.form-checkbox",
-    UCheckboxGroup: "ui.form-checkbox-group",
-    UCheckboxMultiState: "ui.form-checkbox-multi-state",
-    USwitch: "ui.form-switch",
-    URadio: "ui.form-radio",
-    URadioCard: "ui.form-radio-card",
-    URadioGroup: "ui.form-radio-group",
-    UCalendar: "ui.form-calendar",
-    UDatePicker: "ui.form-date-picker",
-    UDatePickerRange: "ui.form-date-picker-range",
-    ULabel: "ui.form-label",
-
-    /* Text & Content */
-    UHeader: "ui.text-header",
-    UText: "ui.text-block",
-    UAlert: "ui.text-alert",
-    UMoney: "ui.text-money",
-    UFile: "ui.text-file",
-    UFiles: "ui.text-files",
-    UEmpty: "ui.text-empty",
-    UBadge: "ui.text-badge",
-
-    /* Containers */
-    UDivider: "ui.container-divider",
-    URow: "ui.container-row",
-    UGroup: "ui.container-group",
-    UGroups: "ui.container-groups",
-    UAccordion: "ui.container-accordion",
-    UCard: "ui.container-card",
-    UModal: "ui.container-modal",
-    UModalConfirm: "ui.container-modal-confirm",
-    UPage: "ui.container-page",
-
-    /* Images and Icons */
-    UIcon: "ui.image-icon",
-    ULogo: "ui.image-logo",
-    UAvatar: "ui.image-avatar",
-
-    /* Data */
-    UTable: "ui.data-table",
-    UTableCell: "ui.data-table-cell",
-    UDataList: "ui.data-list",
-
-    /* Navigation */
-    UTab: "ui.navigation-tab",
-    UTabs: "ui.navigation-tabs",
-    UStepper: "ui.navigation-stepper",
-    UPagination: "ui.navigation-pagination",
-
-    /* Other */
-    UDot: "ui.other-dot",
-    ULoader: "ui.other-loader",
-  };
-
-  const componentFolder = components[componentName];
-
-  if (componentFolder) {
-    return { from: `/.vueless/${componentFolder}` };
-  }
-}

package/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/service.tailwind/index.js

@@ -1,112 +0,0 @@
-import colors from "tailwindcss/colors";
-import forms from "@tailwindcss/forms";
-import vuelessConfig from "../../vueless.config";
-
-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}",
-        "./.vueless/**/*.{js,ts,vue}",
-        "./.vueless-layouts/**/*.{js,ts,vue}",
-        "./.vueless-services/**/*.{js,ts,vue}",
-      ],
-      safelist: isProd ? prodSafelist : devSafelist,
-      theme: {
-        extend: {
-          colors: {
-            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
-          },
-        },
-      },
-      plugins: [forms],
-    };
-  }
-}
-
-export const { vuelessPreset } = new TailwindServiceDefault();