vueless 0.0.2 → 0.0.4

package/ui.image-avatar/index.vue

@@ -1,253 +0,0 @@
-<template>
-  <div :data-cy="dataCy" class="mono-avatar" @click="onClick">
-    <div v-if="imgPath" class="mono-avatar-image" :class="avatarClasses" :style="bgImage" />
-
-    <span v-else class="mono-avatar-letters" :class="avatarClasses">
-      {{ userNameFirstLatter }}
-    </span>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "UAvatar",
-
-  props: {
-    /**
-     * Set avatar's image. It may be a URL or path from the "public" folder.
-     */
-    path: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * The size of the avatar.
-     * @values xs, sm, md, lg, xl, 2xl
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * The color of the avatar.
-     * @values gray, red, orange, yellow, green, blue, violet, fuchsia
-     */
-    color: {
-      type: String,
-      default: "gray",
-    },
-
-    /**
-     * Set user's name.
-     */
-    userName: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * The rounded of the avatar.
-     * @values sm, md, lg, full
-     */
-    rounded: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Active / disabled avatar border.
-     */
-    bordered: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["click"],
-
-  computed: {
-    userNameFirstLatter() {
-      const [name, surname] = this.userName.split(" ");
-
-      const nameFirstLetter = name ? name[0].toUpperCase() : "";
-      const surnameFirstLetter = surname ? surname[0].toUpperCase() : "";
-
-      return nameFirstLetter + surnameFirstLetter;
-    },
-
-    imgPath() {
-      let path;
-
-      if (this.path) {
-        path = this.path.includes("http") ? this.path : import.meta.env.BASE_URL + this.path;
-      } else if (!this.userName && !this.path) {
-        path = require("./default-avatar.png");
-      }
-
-      return path;
-    },
-
-    bgImage() {
-      return `background-image: url(${this.imgPath});`;
-    },
-
-    avatarClasses() {
-      const size = `size-${this.size}`;
-      const border = this.bordered ? "mono-avatar-border" : "";
-
-      return [size, border, this.color, this.roundedClass];
-    },
-
-    roundedClass() {
-      return {
-        "border-radius-sm": this.rounded === "sm",
-        "border-radius-md": this.rounded === "md",
-        "border-radius-lg": this.rounded === "lg",
-        "border-radius-full": this.rounded === "full",
-      };
-    },
-  },
-
-  methods: {
-    onClick() {
-      this.$emit("click");
-    },
-  },
-};
-</script>
-
-<style scoped lang="postcss">
-.mono-avatar-image {
-  @apply bg-gray-100 bg-contain bg-center bg-no-repeat;
-}
-
-.mono-avatar-letters {
-  @apply flex h-full items-center justify-center;
-  @apply bg-green-200 text-green-700;
-  @apply text-lg font-medium;
-}
-
-.border-radius {
-  &-sm {
-    @apply rounded;
-  }
-
-  &-md {
-    @apply rounded-lg;
-  }
-
-  &-lg {
-    @apply rounded-xl;
-  }
-
-  &-full {
-    @apply rounded-full;
-  }
-}
-
-.size {
-  &-xs {
-    @apply h-4 w-4;
-    @apply text-2xs;
-  }
-
-  &-sm {
-    @apply h-6 w-6;
-    @apply text-xs;
-  }
-
-  &-md {
-    @apply h-8 w-8;
-    @apply text-sm;
-  }
-
-  &-lg {
-    @apply h-10 w-10;
-    @apply text-lg;
-  }
-
-  &-xl {
-    @apply h-12 w-12;
-    @apply text-2xl;
-  }
-}
-
-.size-2xl {
-  @apply h-14 w-14;
-  @apply text-3xl;
-}
-
-.gray {
-  @apply bg-gray-100 text-gray-600;
-
-  &.mono-avatar-border {
-    @apply border border-gray-200;
-  }
-}
-
-.red {
-  @apply bg-red-100 text-red-600;
-
-  &.mono-avatar-border {
-    @apply border border-red-200;
-  }
-}
-
-.orange {
-  @apply bg-orange-100 text-orange-600;
-
-  &.mono-avatar-border {
-    @apply border border-orange-200;
-  }
-}
-
-.yellow {
-  @apply bg-yellow-100 text-yellow-600;
-
-  &.mono-avatar-border {
-    @apply border border-yellow-200;
-  }
-}
-
-.green {
-  @apply bg-green-100 text-green-600;
-
-  &.mono-avatar-border {
-    @apply border border-green-200;
-  }
-}
-
-.blue {
-  @apply bg-blue-100 text-blue-600;
-
-  &.mono-avatar-border {
-    @apply border border-blue-200;
-  }
-}
-
-.violet {
-  @apply bg-violet-100 text-violet-600;
-
-  &.mono-avatar-border {
-    @apply border border-violet-200;
-  }
-}
-
-.fuchsia {
-  @apply bg-fuchsia-100 text-fuchsia-600;
-
-  &.mono-avatar-border {
-    @apply border border-fuchsia-200;
-  }
-}
-</style>

package/ui.image-icon/cli.mjs

@@ -1,159 +0,0 @@
-/* eslint-disable no-console */
-
-import fs from "fs";
-import path from "path";
-import { createRequire } from "node:module";
-
-/*
-  This scrypt find icon names from the UIcon prop across the project
-  and copy SVG icons from the default UIcon icons library (@material-symbols)
-  to the "assets/images/.generated" folder.
-
-  Those icons will be used only in the build stage.
-  The script is needed to avoid all @material-symbols icons in the project assets.
- */
-
-const args = parseArgs();
-
-// generate icons for a "mono" library by default
-args["mono"] = args["mono"] || true;
-
-const DESTINATION_DIR = "./src/assets/images/.generated";
-const PACKAGE_PATH = "@material-symbols/svg-400/rounded";
-
-if (fs.existsSync(DESTINATION_DIR)) {
-  fs.rmSync(DESTINATION_DIR, { recursive: true, force: true });
-}
-
-if (args.mono) {
-  const monoFiles = getFiles(".mono", ".vue");
-
-  findAndCopyIcons(monoFiles);
-}
-
-if (args.src) {
-  const srcVueFiles = getFiles("src", ".vue");
-  const srcJsFiles = getFiles("src", ".js");
-
-  findAndCopyIcons([...srcVueFiles, ...srcJsFiles]);
-}
-
-if (args.storybook) {
-  const monoFiles = getFiles(".mono", ".stories.js");
-
-  findAndCopyIcons(monoFiles);
-}
-
-function findAndCopyIcons(files) {
-  files.forEach(async (file) => {
-    const fileContents = fs.readFileSync(file).toString();
-
-    const regexObject = /iconName:\s*"([^"]+)"/gs;
-    const matchObjectIterator = fileContents.matchAll(regexObject);
-
-    for (const match of matchObjectIterator) {
-      try {
-        copyFile(match[1]);
-      } catch (error) {
-        // console.log(error);
-      }
-    }
-
-    const regexExternalProps = /icon-name="([^"]+)"/gs;
-    const matchExternalPropsIterator = fileContents.matchAll(regexExternalProps);
-
-    for (const match of matchExternalPropsIterator) {
-      try {
-        copyFile(match[1]);
-      } catch (error) {
-        // console.log(error);
-      }
-    }
-
-    const regexProps = /<UIcon[^>]+name="([^"]+)"/gs;
-    const matchPropsIterator = fileContents.matchAll(regexProps);
-
-    for (const match of matchPropsIterator) {
-      try {
-        copyFile(match[1]);
-      } catch (error) {
-        // console.log(error);
-      }
-    }
-
-    const regexTernary = /<UIcon\s+:name="[^']*'([^']*)'\s*:\s*'([^']*)'/g;
-    const matchIteratorTernary = fileContents.matchAll(regexTernary);
-
-    for (const match of matchIteratorTernary) {
-      try {
-        copyFile(match[1]);
-        copyFile(match[2]);
-      } 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 if (file.endsWith(extension)) {
-      fileList.push(filePath);
-    }
-  });
-
-  return fileList;
-}
-
-function copyFile(name) {
-  name = name.toLowerCase();
-
-  const require = createRequire(import.meta.url);
-  const source = require.resolve(`${PACKAGE_PATH}/${name}.svg`);
-  const destination = `${DESTINATION_DIR}/${PACKAGE_PATH}/${name}.svg`;
-
-  if (fs.existsSync(destination)) {
-    return;
-  }
-
-  const destDir = path.dirname(destination);
-
-  fs.mkdirSync(destDir, { recursive: true });
-  fs.copyFile(source, destination, (err) => {
-    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;
-}

package/ui.image-icon/index.stories.js

@@ -1,129 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UIcon from "vueless/ui.image-icon";
-import URow from "vueless/ui.container-row";
-
-export default {
-  title: "Images & Icons / Icon",
-  component: UIcon,
-  args: {
-    src: require("vueless/ui.icons-metronic/Close.svg"),
-  },
-  argTypes: {
-    ...getArgTypes(UIcon.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UIcon v-bind="args"/>
-  `,
-});
-
-const ColorsTemplate = (args, { argTypes }) => ({
-  components: { UIcon, URow },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <URow>
-    <UIcon
-      v-for="(color, index) in colors"
-      :color="color"
-      v-bind="args"
-      :key="index"
-    />
-    </URow>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes }) => ({
-  components: { UIcon, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UIcon
-        v-for="(size, index) in sizes"
-        :size="size"
-        v-bind="args"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const VariantsTemplate = (args, { argTypes }) => ({
-  components: { UIcon, URow },
-  setup() {
-    return {
-      args,
-      variants: argTypes.variant.options,
-    };
-  },
-  template: `
-    <URow>
-      <UIcon
-        v-for="(variant, index) in variants"
-        :variant="variant"
-        v-bind="args"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const PillFilledTemplate = (args, { argTypes }) => ({
-  components: { UIcon, URow },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <URow>
-      <UIcon
-        v-for="(color, index) in colors"
-        :color="color"
-        v-bind="args"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const colors = ColorsTemplate.bind({});
-colors.args = {};
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
-
-export const variants = VariantsTemplate.bind({});
-variants.args = { color: "red" };
-
-export const tooltip = DefaultTemplate.bind({});
-tooltip.args = { tooltip: "Some text" };
-
-export const interactive = DefaultTemplate.bind({});
-interactive.args = { interactive: true };
-
-export const pill = PillFilledTemplate.bind({});
-pill.args = { pill: true };
-
-export const pillFilled = PillFilledTemplate.bind({});
-pillFilled.args = { pillFilled: true };