vueless 0.0.1

package/library.vue-tailwind-3/t-textarea.js

@@ -0,0 +1,84 @@
+import { defineComponent, h } from "vue";
+import TextInput from "./base/TextInput";
+
+const TTextarea = {
+  name: "TTextarea",
+  mixins: [TextInput],
+  props: {
+    rows: {
+      type: String,
+      default: undefined,
+    },
+    cols: {
+      type: String,
+      default: undefined,
+    },
+    wrap: {
+      type: String,
+      default: "soft",
+    },
+    classes: {
+      type: [String, Array, Object],
+      default: `block w-full px-3 py-2 text-black placeholder-gray-400 transition duration-100
+        ease-in-out bg-white border border-gray-300 rounded shadow-sm focus:border-blue-500
+        focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50
+        disabled:opacity-50 disabled:cursor-not-allowed`,
+    },
+  },
+  render() {
+    const renderFun = this.render;
+
+    return renderFun(h);
+  },
+  methods: {
+    getProps() {
+      return {
+        modelValue: this.localValue,
+      };
+    },
+
+    getAttributes() {
+      return {
+        id: this.id,
+        name: this.name,
+        disabled: this.disabled,
+        readonly: this.readonly,
+        autocomplete: this.autocomplete,
+        autofocus: this.autofocus,
+        required: this.required,
+        placeholder: this.placeholder,
+        pattern: this.pattern,
+        multiple: this.multiple,
+        minlength: this.minlength,
+        maxlength: this.maxlength,
+        wrap: this.wrap,
+        rows: this.rows,
+        cols: this.cols,
+      };
+    },
+
+    render(createElement) {
+      return createElement("textarea", {
+        class: this.componentClass,
+        ref: "input",
+        ...this.getProps(),
+        ...this.getAttributes(),
+
+        onInput: this.onInput,
+        onBlur: this.onBlur,
+      });
+    },
+
+    onInput(e) {
+      const target = e.target;
+
+      this.$emit("update:modelValue", target.value);
+    },
+
+    onBlur() {
+      this.$emit("blur");
+    },
+  },
+};
+
+export default defineComponent(TTextarea);

package/library.web-types-gen/index.js

@@ -0,0 +1,17 @@
+#!/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);

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

@@ -0,0 +1,226 @@
+import path from "path";
+import { globbySync } from "globby";
+import * as chokidar from "chokidar";
+import { parse } from "vue-docgen-api";
+import * as fs from "fs";
+import mkdirp from "mkdirp";
+import _ from "lodash";
+import merge from "lodash.merge";
+
+export default async function build(config) {
+  config.componentsRoot = path.resolve(config.cwd, config.componentsRoot);
+  config.outFile = path.resolve(config.cwd, config.outFile);
+
+  // then create the watcher if necessary
+  const { watcher, componentFiles } = getSources(config.components, config.componentsRoot);
+
+  // eslint-disable-next-line no-console
+  console.log("Building web-types to " + config.outFile);
+
+  const cache = {};
+  const buildWebTypesBound = rebuild.bind(null, config, componentFiles, cache, watcher);
+
+  try {
+    await buildWebTypesBound();
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error("Error building web-types: " + e.message);
+    await watcher.close();
+
+    return;
+  }
+
+  if (config.watch) {
+    watcher
+      .on("add", buildWebTypesBound)
+      .on("change", buildWebTypesBound)
+      .on("unlink", async (filePath) => {
+        // eslint-disable-next-line no-console
+        console.log("Rebuilding on file removal " + filePath);
+        delete cache[filePath];
+        await writeDownWebTypesFile(config, Object.values(cache), config.outFile);
+      });
+  } else {
+    await watcher.close();
+  }
+}
+
+function getSources(components, cwd) {
+  const watcher = chokidar.watch(components, { cwd });
+
+  const allComponentFiles = globbySync(components, { cwd });
+
+  return { watcher, componentFiles: allComponentFiles };
+}
+
+async function rebuild(config, files, cachedContent, watcher, changedFilePath) {
+  const cacheWebTypesContent = async (filePath) => {
+    cachedContent[filePath.replace(/\\/g, "/")] = await extractInformation(
+      path.join(config.componentsRoot, filePath),
+      config,
+    );
+
+    return true;
+  };
+
+  if (changedFilePath) {
+    // eslint-disable-next-line no-console
+    console.log("Rebuilding on update file " + changedFilePath);
+
+    try {
+      // if in chokidar mode (watch), the path of the file that was just changed
+      // is passed as an argument. We only affect the changed file and avoid re-parsing the rest
+      await cacheWebTypesContent(changedFilePath);
+    } catch (e) {
+      throw new Error(
+        `Error building file ${config.outFile} when file ${changedFilePath} has changed: ${e.message}`,
+      );
+    }
+  } else {
+    try {
+      // if we are initializing the current file, parse all components
+      await Promise.all(files.map(cacheWebTypesContent));
+    } catch (e) {
+      throw new Error(`Error building file ${config.outFile}: ${e.message}`);
+    }
+  }
+
+  // and finally save all concatenated values to the markdown file
+  await writeDownWebTypesFile(config, Object.values(cachedContent), config.outFile);
+}
+
+async function writeDownWebTypesFile(config, definitions, destFilePath) {
+  const destFolder = path.dirname(destFilePath);
+
+  await mkdirp(destFolder);
+  let writeStream = fs.createWriteStream(destFilePath);
+  const contents = {
+    framework: "vue",
+    name: config.packageName,
+    version: config.packageVersion,
+    contributions: {
+      html: {
+        "description-markup": config.descriptionMarkup,
+        "types-syntax": config.typesSyntax,
+        tags: _(definitions)
+          .flatMap((d) => d.tags || [])
+          .orderBy("name", "asc")
+          .value(),
+        attributes: _(definitions)
+          .flatMap((d) => d.attributes || [])
+          .orderBy("name", "asc")
+          .value(),
+        "vue-filters": _(definitions)
+          .flatMap((d) => d["vue-filters"] || [])
+          .orderBy("name", "asc")
+          .value(),
+      },
+    },
+  };
+
+  const html = contents.contributions.html;
+
+  if (html.tags?.length == 0) html.tags = undefined;
+  if (html.attributes?.length == 0) html.attributes = undefined;
+  if (html["vue-filters"]?.length == 0) html["vue-filters"] = undefined;
+
+  writeStream.write(JSON.stringify(contents, null, 2));
+
+  // close the stream
+  writeStream.close();
+}
+
+function ensureRelative(path) {
+  // The .replace() is a fix for paths that end up like "./src\\components\\General\\VerticalButton.vue" on windows machines.
+  return (path.startsWith("./") || path.startsWith("../") ? path : "./" + path).replace(/\\/g, "/");
+}
+
+async function extractInformation(absolutePath, config) {
+  const doc = await parse(absolutePath, config.apiOptions);
+  const name = doc.name || doc.displayName;
+  let description = doc.description?.trim() ?? "";
+
+  // Get default component config
+  const configPath = path.join(path.dirname(absolutePath), "configs/default.config.js");
+  let globalConfig = null;
+  let defaultConfig = null;
+  let defaultValues = null;
+
+  if (fs.existsSync(configPath)) {
+    const defaultConfigFile = fs.readFileSync(configPath).toString();
+    const globalConfigFile = fs.readFileSync(config.cwd + "/vueless.config.js").toString();
+
+    defaultConfig = getDefaultConfigJson(defaultConfigFile);
+    globalConfig = getGlobalConfigJson(globalConfigFile, name);
+    defaultValues = merge(defaultConfig.defaultVariants, globalConfig[name]?.defaultVariants);
+  }
+
+  function getDefaultConfigJson(fileContents) {
+    const objectStartIndex = fileContents.indexOf("{");
+    const objectString = fileContents.substring(objectStartIndex).replace("};", "}");
+
+    return eval("(" + objectString + ")"); // Converting into JS object
+  }
+
+  function getGlobalConfigJson(fileContents, componentName) {
+    const startIndex = fileContents.indexOf(`${componentName}:`);
+    const endIndex = fileContents.indexOf("}", startIndex) + 1;
+    const rawString = fileContents.slice(startIndex, endIndex);
+
+    // If the stings are present in config but commented - remove them
+    const cleanContents = rawString.replace(/\/\/.*\n?/g, "");
+
+    // Check if final JSON string is valid: TODO: find better solution
+    if (!cleanContents.includes("}")) return {};
+
+    const jsonString = `{${rawString}\n}}`
+      .replace(/'/g, '"')
+      .replace(/(\w+)\s*:/g, '"$1":')
+      .replace(/,\s*}/g, "}");
+
+    return JSON.parse(jsonString);
+  }
+
+  doc.docsBlocks?.forEach((block) => {
+    if (description.length > 0) {
+      if (config.descriptionMarkup === "html") {
+        description += "<br/><br/>";
+      } else {
+        description += "\n\n";
+      }
+    }
+
+    description += block;
+  });
+
+  return {
+    tags: [
+      {
+        name,
+        description,
+        attributes: doc.props?.map((prop) => ({
+          name: prop.name,
+          required: prop.required,
+          description: prop.description,
+          value: {
+            kind: "expression",
+            type: prop.values ? `'${prop.values.join("' | '")}'` : prop.type?.name ?? "any",
+          },
+          default: (defaultValues && defaultValues[prop.name]) || prop.defaultValue?.value,
+        })),
+        events: doc.events?.map((event) => ({
+          name: event.name,
+          description: event.description,
+        })),
+        slots: doc.slots?.map((slot) => ({
+          name: slot.name,
+          description: slot.description,
+        })),
+        source: {
+          module: ensureRelative(path.relative(config.cwd, absolutePath)).substring(1), // TODO: maybe substring should be removed when it turns to package
+          symbol: doc.exportName,
+        },
+      },
+    ],
+  };
+}

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

@@ -0,0 +1,26 @@
+import * as path from "path";
+import * as fs from "fs";
+import { readFile } from "fs/promises";
+
+export async function extractConfig(cwd, watch = false, configFileFromCmd, pathArray = []) {
+  const configFilePath = configFileFromCmd
+    ? path.resolve(cwd, configFileFromCmd)
+    : path.join(cwd, "web-types.config.js");
+  const [componentsFromCmd, outFileFromCmd] = pathArray;
+
+  const fileContent = await readFile(path.join(cwd, "package.json"), "utf-8");
+  const packageJson = JSON.parse(fileContent);
+
+  return {
+    cwd,
+    watch,
+    componentsRoot: configFilePath ? path.dirname(configFilePath) : cwd,
+    components: componentsFromCmd || "src/**/*.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),
+  };
+}

package/library.web-types-gen/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "vueless",
+  "version": "0.0.1",
+  "description": "Vue Styleless Component Framework",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "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",
+  "web-types": "./web-types.json"
+}

package/resolver.unplugin-vue-components/index.js

@@ -0,0 +1,94 @@
+/**
+  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 default function (componentName) {
+  const components = {
+    /* Buttons & Links */
+    UButton: "ui.button",
+    UButtonGroup: "ui.button-group",
+    UButtonGroupItem: "ui.button-group-item",
+    UButtonExpand: "ui.button-expand",
+    UButtonExpandItem: "ui.button-expand-item",
+    ULink: "ui.button-link",
+
+    /* Dropdowns */
+    UDropdownButton: "ui.dropdown-button",
+    UDropdownTag: "ui.dropdown-tag",
+    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",
+    UDatePicker: "ui.form-date-picker",
+    UDatePickerRange: "ui.form-date-picker-range",
+
+    /* 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",
+    UField: "ui.text-field",
+    UEmpty: "ui.text-empty",
+    UTag: "ui.text-tag",
+
+    /* 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",
+    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}` };
+  }
+}