vueless 0.0.3 → 0.0.4

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

@@ -1,301 +0,0 @@
-import { defineComponent, h } from "vue";
-import isEqual from "lodash.isequal";
-
-import HtmlInput from "./base/HtmlInput";
-
-import vueTailwindService from "./services/vueTailwind.service";
-
-const { awaiter } = vueTailwindService;
-
-/* eslint-disable no-shadow */
-let Key;
-
-(function (Key) {
-  Key[(Key["LEFT"] = 37)] = "LEFT";
-  Key[(Key["UP"] = 38)] = "UP";
-  Key[(Key["RIGHT"] = 39)] = "RIGHT";
-  Key[(Key["DOWN"] = 40)] = "DOWN";
-  Key[(Key["ENTER"] = 13)] = "ENTER";
-  Key[(Key["ESC"] = 27)] = "ESC";
-  Key[(Key["SPACE"] = 32)] = "SPACE";
-  Key[(Key["BACKSPACE"] = 8)] = "BACKSPACE";
-})(Key || (Key = {}));
-
-let Key$1 = Key;
-
-const checkIfTagShouldBeChecked = (model, checked, value) =>
-  model === undefined ? !!checked : isEqual(model, value);
-
-const TRadio = {
-  name: "TRadio",
-  mixins: [HtmlInput],
-  emits: ["focus", "blur", "input", "change", "update:modelValue"],
-  props: {
-    value: {
-      type: [String, Object, Number, Boolean, Array],
-      default: "on",
-    },
-    checked: {
-      type: [Boolean, String],
-      default: false,
-    },
-    modelValue: {
-      // v-model
-      type: [String, Object, Number, Boolean, Array],
-      default: undefined,
-    },
-    wrapped: {
-      type: Boolean,
-      default: false,
-    },
-    wrapperTag: {
-      type: String,
-      default: "label",
-    },
-    inputWrapperTag: {
-      type: String,
-      default: "span",
-    },
-    labelTag: {
-      type: String,
-      default: "span",
-    },
-    label: {
-      type: [String, Number],
-      default: undefined,
-    },
-    classes: {
-      type: [String, Array, Object],
-      default: `text-blue-500 transition duration-100 ease-in-out border-gray-300 shadow-sm focus:border-blue-500
-        focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 focus:ring-offset-0 disabled:opacity-50
-        disabled:cursor-not-allowed`,
-    },
-  },
-  data() {
-    // const defaultValue = (this.model === undefined ? null : this.model);
-    return {
-      localValue: this.checked ? this.value : null,
-    };
-  },
-  render() {
-    const renderFun = this.render;
-    // eslint-disable-next-line max-len
-    const createWrappedFunc = this.renderWrapped;
-
-    if (this.wrapped) {
-      return createWrappedFunc(h);
-    }
-
-    return renderFun(h);
-  },
-  watch: {
-    modelValue(value) {
-      if (isEqual(value, this.localValue)) {
-        return;
-      }
-
-      this.localValue = value;
-    },
-    checked(checked) {
-      const localValue = checked ? this.value : null;
-
-      if (!isEqual(localValue, this.localValue)) {
-        this.localValue = localValue;
-      }
-    },
-    localValue(localValue) {
-      if (isEqual(this.modelValue, localValue)) {
-        return;
-      }
-
-      this.$emit("input", localValue);
-      this.$emit("change", localValue);
-      this.$emit("update:modelValue", localValue);
-    },
-    isChecked(isChecked) {
-      const input = this.$refs.input;
-
-      if (input && input.checked !== isChecked) {
-        input.checked = isChecked;
-      }
-    },
-  },
-  computed: {
-    isChecked() {
-      return checkIfTagShouldBeChecked(this.modelValue, this.checked, this.value);
-    },
-  },
-  methods: {
-    renderWrapped(createElement) {
-      const childElements = [];
-      const input = this.render(createElement);
-      const inputWrapperClass = this.getElementCssClass("inputWrapper");
-      const checkedInputWrapperClass = this.getElementCssClass(
-        "inputWrapperChecked",
-        this.getElementCssClass("inputWrapper"),
-      );
-
-      childElements.push(
-        createElement(
-          this.inputWrapperTag,
-          {
-            ref: "inputWrapper",
-            class: this.isChecked ? checkedInputWrapperClass : inputWrapperClass,
-          },
-          () => input,
-        ),
-      );
-      const labelClass = this.getElementCssClass("label");
-      const checkedLabelClass = this.getElementCssClass(
-        "labelChecked",
-        this.getElementCssClass("label"),
-      );
-      let label;
-
-      if (this.$slots.default !== undefined) {
-        label = this.$slots.default({
-          isChecked: this.isChecked,
-          value: this.localValue,
-          label: this.label,
-        });
-      } else {
-        label = typeof this.label === "number" ? String(this.label) : this.label;
-      }
-
-      childElements.push(
-        createElement(
-          this.labelTag,
-          {
-            ref: "label",
-            class: this.isChecked ? checkedLabelClass : labelClass,
-          },
-          label,
-        ),
-      );
-      const wrapperClass = this.getElementCssClass("wrapper");
-      const checkedWrapperClass = this.getElementCssClass(
-        "wrapperChecked",
-        this.getElementCssClass("wrapper"),
-      );
-
-      return createElement(
-        this.wrapperTag,
-        {
-          ref: "wrapper",
-          class: this.isChecked ? checkedWrapperClass : wrapperClass,
-          for: this.id,
-          tabindex: this.tabindex,
-          autofocus: this.autofocus,
-          onKeydown: (e) => {
-            if ([Key$1.DOWN, Key$1.RIGHT].includes(e.keyCode)) {
-              this.selectNextRadio(e);
-            } else if ([Key$1.UP, Key$1.LEFT].includes(e.keyCode)) {
-              this.selectPrevRadio(e);
-            } else if (e.keyCode === Key$1.SPACE) {
-              this.wrapperSpaceHandler(e);
-            }
-          },
-        },
-        childElements,
-      );
-    },
-    render(createElement) {
-      return createElement("input", {
-        class: this.wrapped ? this.getElementCssClass("input") : this.componentClass,
-        ref: "input",
-        value: this.value,
-        id: this.id,
-        type: "radio",
-        checked: checkIfTagShouldBeChecked(this.modelValue, this.checked, this.value),
-        name: this.name,
-        disabled: this.disabled,
-        readonly: this.readonly,
-        required: this.required,
-        autofocus: !this.wrapped ? this.autofocus : undefined,
-        tabindex: this.wrapped && this.tabindex !== undefined ? -1 : this.tabindex,
-        onBlur: this.blurHandler,
-        onFocus: this.focusHandler,
-        onInput: this.inputHandler,
-      });
-    },
-    inputHandler(e) {
-      return awaiter(this, void 0, void 0, function* () {
-        yield 0; // TODO: Fixed but i'm not sure if it correct
-        const target = e.target;
-
-        // Only update the local value when the element is checked
-        if (target.checked) {
-          this.localValue = this.value;
-          this.sendInputEventToTheNotCheckedInputs();
-        }
-      });
-    },
-    /**
-     * We need to trigger the input event in all the inputs that are not checked
-     * so we can update the `elementChecked` local property that is used to
-     * change the classes of the wrapper div according to the state
-     */
-    sendInputEventToTheNotCheckedInputs() {
-      const notCheckedEls = document.querySelectorAll(`input[name=${this.name}]:not(:checked)`);
-
-      notCheckedEls.forEach((el) => {
-        el.dispatchEvent(new Event("input"));
-      });
-    },
-    selectPrevRadio(e) {
-      e.preventDefault();
-      const currentEl = this.$refs.input;
-      const els = Array.from(document.querySelectorAll(`input[name=${this.name}]`));
-      const currentElementIndex = els.findIndex((radioInput) => radioInput === this.$refs.input);
-      const prevElement = els[currentElementIndex - 1] || els[els.length - 1];
-
-      if (prevElement !== currentEl && prevElement) {
-        const wrapper = prevElement.parentNode ? prevElement.parentNode.parentNode : undefined;
-
-        if (wrapper && wrapper.tabIndex >= 0) {
-          wrapper.focus();
-        } else {
-          prevElement.focus();
-        }
-      }
-    },
-    selectNextRadio(e) {
-      e.preventDefault();
-      const currentEl = this.$refs.input;
-      const els = Array.from(document.querySelectorAll(`input[name=${this.name}]`));
-      const currentElementIndex = els.findIndex((radioInput) => radioInput === this.$refs.input);
-      const nextElement = els[currentElementIndex + 1] || els[0];
-
-      if (nextElement !== currentEl && nextElement) {
-        const wrapper = nextElement.parentNode ? nextElement.parentNode.parentNode : undefined;
-
-        if (wrapper && wrapper.tabIndex >= 0) {
-          wrapper.focus();
-        } else {
-          nextElement.focus();
-        }
-      }
-    },
-    wrapperSpaceHandler(e) {
-      e.preventDefault();
-      this.localValue = this.value;
-    },
-    blurHandler(e) {
-      this.$emit("blur", e);
-    },
-    focusHandler(e) {
-      this.$emit("focus", e);
-    },
-    blur() {
-      this.$refs.input.blur();
-    },
-    click() {
-      this.$refs.input.click();
-    },
-    focus(options) {
-      this.$refs.input.focus(options);
-    },
-  },
-};
-
-export default defineComponent(TRadio);

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

@@ -1,32 +0,0 @@
-import path from "path";
-import 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);
-
-  let additionalConfig = {};
-
-  if (fs.existsSync(configFilePath)) {
-    additionalConfig = await import(configFilePath);
-  }
-
-  return {
-    cwd,
-    watch,
-    componentsRoot: configFilePath ? path.dirname(configFilePath) : cwd,
-    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",
-    ...additionalConfig,
-  };
-}

package/plugin.vite/index.js

@@ -1,59 +0,0 @@
-/* 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),
-  };
-};

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

@@ -1,291 +0,0 @@
-/**
- This scrypt find icon names from the UIcon props and objects across the project
- and copy SVG icons from the default icons library (@material-symbols or other from config)
- to the ".../.generated" folder.
-
- Those icons will be used only in the build stage.
- The script is needed to avoid all @material-symbols icons set in the project bundle.
- */
-
-/* eslint-disable no-console */
-import fs from "fs";
-import path from "path";
-import { createRequire } from "node:module";
-import merge from "lodash.merge";
-
-import vuelessConfig from "../../../vueless.config.js";
-
-const DESTINATION_DIR = "./src/assets/images/.generated";
-const DEFAULT_CONFIG_PATH = ".vueless/ui.image-icon/configs/default.config.js";
-const STORYBOOK_STORY_EXTENSION = ".stories.js";
-const U_ICON = "UIcon";
-
-const defaultVariants = getMergedConfig();
-const args = parseArgs();
-
-let isDebug = false;
-
-// run method manually
-if (args.run) {
-  copyIcons(args.mode);
-}
-
-// perform icons copy magick... ✨
-export function copyIcons(mode = "src", debug) {
-  isDebug = debug || false;
-
-  removeIcons();
-
-  const vuelessVueFiles = getFiles(".vueless", ".vue");
-  const vuelessJsFiles = getFiles(".vueless", ".js");
-  const vuelessLayoutsVueFiles = getFiles(".vueless-layouts", ".vue");
-  const vuelessLayoutsJsFiles = getFiles(".vueless-layouts", ".js");
-  const vuelessServicesJsFiles = getFiles(".vueless-services", ".js");
-
-  findAndCopyIcons([
-    ...vuelessVueFiles,
-    ...vuelessJsFiles,
-    ...vuelessLayoutsVueFiles,
-    ...vuelessLayoutsJsFiles,
-    ...vuelessServicesJsFiles,
-    "vueless.config.js",
-    "vueless.config.ts",
-  ]);
-
-  if (mode === "src" || mode === "all") {
-    const srcVueFiles = getFiles("src", ".vue");
-    const srcJsFiles = getFiles("src", ".js");
-    const srcTsFiles = getFiles("src", ".ts");
-
-    findAndCopyIcons([...srcVueFiles, ...srcJsFiles, ...srcTsFiles]);
-  }
-
-  if (mode === "storybook" || mode === "all") {
-    const vuelessStoriesJsFiles = getFiles(".vueless", STORYBOOK_STORY_EXTENSION);
-
-    findAndCopyIcons(vuelessStoriesJsFiles);
-  }
-}
-
-export function removeIcons() {
-  if (fs.existsSync(DESTINATION_DIR)) {
-    fs.rmSync(DESTINATION_DIR, { recursive: true, force: true });
-
-    if (isDebug) {
-      console.log("Dynamically copied icons was successfully removed.");
-    }
-  }
-}
-
-function findAndCopyIcons(files) {
-  const safelistIcons = getSafelistIcons();
-
-  safelistIcons.forEach((iconName) => {
-    copyFile(iconName, false);
-    copyFile(iconName, true);
-  });
-
-  files.forEach(async (file) => {
-    const fileContents = fs.existsSync(file) ? fs.readFileSync(file).toString() : "";
-
-    /* Objects across the project */
-    const objectRegExp = /(\{|[^{])[^}]*\b\w*icon\w*:\s*["']([^"']+)["'][^}]*}/gi;
-    const objectMatches = fileContents.match(objectRegExp);
-
-    if (objectMatches) {
-      for (const match of objectMatches) {
-        const iconNameRegex = /\w*(icon)\w*:\s*["']([^"'\s]+)["']/gi;
-        const iconNameMatch = iconNameRegex.exec(match);
-        const iconName = iconNameMatch && iconNameMatch[2];
-
-        const iconFillRegex = /\w*(fill)\w*:\s*(true|false)/gi;
-        const fillMatch = iconFillRegex.exec(match);
-        const fill = fillMatch ? fillMatch[2] : defaultVariants.fill;
-
-        try {
-          if (iconName) {
-            copyFile(iconName, fill);
-          }
-        } catch (error) {
-          // console.log(error);
-        }
-
-        iconNameRegex.lastIndex = 0;
-        iconFillRegex.lastIndex = 0;
-      }
-    }
-
-    /* UIcon */
-    const regexName = /\bname\s*=\s*["']([^"'\s]+)["']/;
-    const regexFill = /(:(fill)="([^"]*)"|fill)/;
-
-    const matchNameArray = fileContents.match(/<UIcon[^>]+>/g);
-
-    if (matchNameArray) {
-      for (const match of matchNameArray) {
-        const iconNameMatch = regexName.exec(match);
-        const iconFillMatch = regexFill.exec(match);
-
-        const iconName = iconNameMatch ? iconNameMatch[1] : null;
-        const fill = iconFillMatch ? iconFillMatch[1] : defaultVariants.fill;
-
-        try {
-          if (iconName) {
-            if (iconFillMatch && iconFillMatch[3]) {
-              copyFile(iconName, false);
-              copyFile(iconName, true);
-            } else {
-              copyFile(iconName, fill);
-            }
-          }
-        } catch (error) {
-          // console.log(error);
-        }
-      }
-    }
-
-    /* UIcon with ternary operator */
-    const ternaryRegexName = /\bname="[^']*'([^']*)'\s*:\s*'([^']*)'/;
-    const ternaryRegexFill = /(:(fill)="([^"]*)"|fill)/;
-
-    const ternaryMatchNameArray = fileContents.match(/<UIcon[^>]+>/g);
-
-    if (ternaryMatchNameArray) {
-      for (const match of ternaryMatchNameArray) {
-        const iconNameMatch = ternaryRegexName.exec(match);
-        const iconFillMatch = ternaryRegexFill.exec(match);
-
-        const fill = iconFillMatch ? iconFillMatch[1] : defaultVariants.fill;
-
-        try {
-          if (iconFillMatch && iconFillMatch[3]) {
-            copyFile(iconNameMatch[1], false);
-            copyFile(iconNameMatch[2], true);
-            copyFile(iconNameMatch[1], false);
-            copyFile(iconNameMatch[2], true);
-          } else {
-            copyFile(iconNameMatch[1], fill);
-            copyFile(iconNameMatch[2], fill);
-          }
-        } catch (error) {
-          // console.log(error);
-        }
-      }
-    }
-  });
-}
-
-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 {
-      const isStorybookStory =
-        filePath.endsWith(STORYBOOK_STORY_EXTENSION) && extension !== STORYBOOK_STORY_EXTENSION;
-
-      if (filePath.endsWith(extension) && !isStorybookStory) {
-        fileList.push(filePath);
-      }
-    }
-  });
-
-  return fileList;
-}
-
-function copyFile(name, fill) {
-  name = name.toLowerCase();
-  fill = Boolean(fill);
-
-  const library = defaultVariants.library;
-  const weight = defaultVariants.weight;
-  const style = defaultVariants.style;
-
-  const require = createRequire(import.meta.url);
-
-  /* eslint-disable prettier/prettier */
-  const libraries = {
-    "@material-symbols": {
-      source: `${library}/svg-${weight}/${style}/${name}${fill ? "-fill" : ""}.svg`,
-      destination: `${DESTINATION_DIR}/${library}/svg-${weight}/${style}/${name}${fill ? "-fill" : ""}.svg`,
-    },
-    "bootstrap-icons": {
-      source: `${library}/icons/${name}${fill ? "-fill" : ""}.svg`,
-      destination: `${DESTINATION_DIR}/${library}/icons/${name}${fill ? "-fill" : ""}.svg`,
-    },
-    heroicons: {
-      source: `${library}/${style}/${fill ? "solid" : "outline"}/${name}.svg`,
-      destination: `${DESTINATION_DIR}/${library}/${style}/${fill ? "solid" : "outline"}/${name}.svg`,
-    },
-  };
-  /* eslint-enable prettier/prettier */
-
-  const { source, destination } = libraries[library];
-
-  if (fs.existsSync(destination)) {
-    return;
-  }
-
-  const destDir = path.dirname(destination);
-
-  fs.mkdirSync(destDir, { recursive: true });
-  fs.copyFile(require.resolve(source), destination, (err) => {
-    if (args.debug || isDebug) {
-      err
-        ? console.error(`Error copying icon "${name}":`, err)
-        : console.log(`Icon "${name}" copied successfully!`);
-    }
-  });
-}
-
-function parseArgs() {
-  const args = process.argv.slice(2);
-  const parsedArgs = {};
-
-  let currentKey = null;
-
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i];
-
-    if (arg.startsWith("--")) {
-      const key = arg.slice(2);
-
-      parsedArgs[key] = true;
-      currentKey = key;
-    } else if (currentKey) {
-      parsedArgs[currentKey] = arg;
-      currentKey = null;
-    }
-  }
-
-  return parsedArgs;
-}
-
-function getSafelistIcons() {
-  return vuelessConfig.component ? vuelessConfig.component[U_ICON]?.safelistIcons || [] : [];
-}
-
-function getMergedConfig() {
-  if (fs.existsSync(DEFAULT_CONFIG_PATH)) {
-    const defaultConfigFile = fs.readFileSync(DEFAULT_CONFIG_PATH).toString();
-
-    const defaultConfig = getDefaultConfigJson(defaultConfigFile);
-    const globalConfig = vuelessConfig.component || {};
-
-    return merge(defaultConfig.defaultVariants, globalConfig[U_ICON]?.defaultVariants);
-  }
-}
-
-function getDefaultConfigJson(fileContents) {
-  const objectStartIndex = fileContents.indexOf("{");
-  const objectString = fileContents.substring(objectStartIndex).replace("};", "}");
-
-  // indirect eval
-  return (0, eval)("(" + objectString + ")"); // Converting into JS object
-}