vueless 0.0.10 → 0.0.12

package/ui.image-avatar/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <div
+    :title="label"
+    :style="bgImage"
+    :data-cy="dataCy"
+    v-bind="avatarAttrs"
+    @click="onClick"
+    v-text="labelFirstLetters"
+  />
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+import defaultAvatar from "./default-avatar.png";
+
+import UIService from "../service.ui";
+
+import { UAvatar } from "./constants/index";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({
+  name: "UAvatar",
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  /**
+   * Set avatar's image. It may be a URL or path from the "public" folder.
+   */
+  src: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * The size of the avatar.
+   * @values xs, sm, md, lg, xl, 2xl
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UAvatar).default.size,
+  },
+
+  /**
+   * The color of the avatar.
+   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white   */
+  color: {
+    type: String,
+    default: UIService.get(defaultConfig, UAvatar).default.color,
+  },
+
+  /**
+   * Avatar label (user name, nickname, etc.).
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * The rounded of the avatar.
+   * @values sm, md, lg, full
+   */
+  rounded: {
+    type: String,
+    default: UIService.get(defaultConfig, UAvatar).default.rounded,
+  },
+
+  /**
+   * Active / disabled avatar border.
+   */
+  bordered: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UAvatar).default.bordered,
+  },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["click"]);
+
+const labelFirstLetters = computed(() => {
+  const [firstWord, secondWord] = props.label.split(" ");
+
+  const firstWordLetter = firstWord ? firstWord[0].toUpperCase() : "";
+  const secondWordLetter = secondWord ? secondWord[0].toUpperCase() : "";
+
+  return firstWordLetter + secondWordLetter;
+});
+
+const imgSrc = computed(() => {
+  let src;
+
+  if (props.src) {
+    src = props.src.includes("http") ? props.src : import.meta.env.BASE_URL + props.path;
+  } else if (!props.label && !props.src) {
+    src = defaultAvatar;
+  }
+
+  return src;
+});
+
+const bgImage = computed(() => {
+  return `background-image: url(${imgSrc.value});`;
+});
+
+const { avatarAttrs } = useAttrs(props);
+
+function onClick(event) {
+  emit("click", event);
+}
+</script>

package/ui.image-icon/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.image-icon/composables/attrs.composable.js

@@ -0,0 +1,65 @@
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { wrapper, container, icon } = config.value;
+
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const cvaContainer = cva({
+    base: container.base,
+    variants: container.variants,
+    compoundVariants: container.compoundVariants,
+  });
+
+  const cvaIcon = cva({
+    base: icon.base,
+    variants: icon.variants,
+    compoundVariants: icon.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() =>
+    setColor(
+      cvaWrapper({
+        pill: props.pill,
+        size: props.size,
+        color: props.color,
+      }),
+      props.color,
+    ),
+  );
+
+  const containerClasses = computed(() =>
+    setColor(
+      cvaContainer({
+        pill: props.pill,
+        size: props.size,
+        color: props.color,
+        variant: props.variant,
+        interactive: props.interactive,
+      }),
+      props.color,
+    ),
+  );
+
+  const iconClasses = computed(() => cvaIcon({ size: props.size }));
+
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  const containerAttrs = getAttrs("container", { classes: containerClasses });
+  const iconAttrs = getAttrs("icon", { classes: iconClasses });
+
+  return {
+    config,
+    wrapperAttrs,
+    containerAttrs,
+    iconAttrs,
+  };
+}

package/ui.image-icon/configs/default.config.js

@@ -0,0 +1,90 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "",
+    variants: {
+      pill: {
+        true: "rounded-full bg-{color}-500 bg-opacity-5",
+      },
+    },
+    compoundVariants: [
+      { pill: true, size: "3xs", class: "p-1" },
+      { pill: true, size: "2xs", class: "p-1" },
+      { pill: true, size: "xs", class: "p-2" },
+      { pill: true, size: "sm", class: "p-2" },
+      { pill: true, size: "md", class: "p-3" },
+      { pill: true, size: "lg", class: "p-3" },
+      { pill: true, size: "xl", class: "p-4" },
+      { pill: true, size: "2xl", class: "p-4" },
+      { pill: true, size: "3xl", class: "p-4" },
+      { pill: true, size: "4xl", class: "p-5" },
+      { pill: true, size: "5xl", class: "p-5" },
+      { pill: true, color: "white", class: "bg-white" },
+      { pill: true, color: "grayscale", class: "bg-gray-900" },
+    ],
+  },
+  container: {
+    base: "fill-current outline-0",
+    variants: {
+      size: {
+        "3xs": "size-3",
+        "2xs": "size-3.5",
+        xs: "size-4",
+        sm: "size-5",
+        md: "size-6",
+        lg: "size-8",
+        xl: "size-10",
+        "2xl": "size-12",
+        "3xl": "size-14",
+        "4xl": "size-16",
+        "5xl": "size-20",
+      },
+      variant: {
+        light: "text-{color}-400",
+        default: "text-{color}-500",
+        dark: "text-{color}-700",
+      },
+      color: {
+        white: "text-white",
+        grayscale: "text-gray-900",
+      },
+      interactive: {
+        true: "cursor-pointer hover:opacity-50, active:opacity-50",
+      },
+    },
+  },
+  icon: {
+    variants: {
+      size: {
+        "3xs": "h-3 w-3",
+        "2xs": "h-3.5 w-3.5",
+        xs: " h-4 w-4",
+        sm: "h-5 w-5",
+        md: "h-6 w-6",
+        lg: "h-8 w-8",
+        xl: "h-10 w-10",
+        "2xl": "h-12 w-12",
+        "3xl": "h-14 w-14",
+        "4xl": "h-16 w-16",
+        "5xl": "h-20 w-20",
+      },
+    },
+  },
+  defaultVariants: {
+    name: "",
+    library: "@material-symbols",
+    weight: 500,
+    style: "outlined",
+    pill: false,
+    fill: false,
+    size: "md",
+    color: "black",
+    variant: "default",
+    interactive: false,
+  },
+  safelist: (colors) => [
+    { pattern: `text-(${colors})-400` },
+    { pattern: `text-(${colors})-500` },
+    { pattern: `text-(${colors})-700` },
+    { pattern: `bg-(${colors})-500` },
+  ],
+};

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

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UIcon = "UIcon";

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

@@ -0,0 +1,110 @@
+import { getArgTypes } from "../service.storybook";
+
+import UIcon from "../ui.image-icon";
+import URow from "../ui.container-row";
+
+export default {
+  id: "6010",
+  title: "Images & Icons / Icon",
+  component: UIcon,
+  args: {
+    name: "close",
+  },
+  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"
+        v-bind="args"
+        :color="color"
+        name="close"
+        :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"
+        v-bind="args"
+        :size="size"
+        name="close"
+        :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"
+        name="close"
+        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 = ColorsTemplate.bind({});
+pill.args = { pill: true };

package/ui.image-icon/index.vue

@@ -0,0 +1,233 @@
+<template>
+  <div
+    v-tippy="tippyConfig"
+    :data-cy="dataCy"
+    v-bind="wrapperAttrs"
+    @focus="onFocus"
+    @blur="onBlur"
+    @click="onClick"
+  >
+    <div v-bind="containerAttrs">
+      <component :is="dynamicComponent" v-bind="iconAttrs" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineAsyncComponent } from "vue";
+import { directive as tippyDirective, setDefaultProps as tippySetConfig } from "vue-tippy";
+import "tippy.js/dist/tippy.css";
+import "tippy.js/themes/light.css";
+import "tippy.js/animations/shift-away.css";
+import UIService from "../service.ui";
+
+import { UIcon } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+tippySetConfig({
+  arrow: true,
+  theme: "light",
+  animation: "shift-away",
+});
+
+/* Should be a string for correct web-types gen */
+defineOptions({
+  name: "UIcon",
+  directives: { tippy: tippyDirective },
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  /**
+   * Icon SVG data source (svg as a vue component).
+   */
+  src: {
+    type: [String, Object],
+    default: "",
+  },
+
+  /**
+   * Name of the icon.
+   */
+  name: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Change icon variant from outline to filled.
+   */
+  fill: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UIcon).default.fill,
+  },
+
+  /**
+   * Icon color.
+   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
+   */
+  color: {
+    type: String,
+    default: UIService.get(defaultConfig, UIcon).default.color,
+  },
+
+  /**
+   * Icon size.
+   * @values 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UIcon).default.size,
+  },
+
+  /**
+   * Set pill mild semi-transparent background and solid colour icon.
+   */
+  pill: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UIcon).default.pill,
+  },
+
+  /**
+   * Icon variant.
+   * @values light, default, dark
+   */
+  variant: {
+    type: String,
+    default: UIService.get(defaultConfig, UIcon).default.variant,
+  },
+
+  /**
+   * Add interactive states to the icon (hover, clicked).
+   */
+  interactive: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UIcon).default.interactive,
+  },
+
+  /**
+   * Add tooltip text on hover.
+   */
+  tooltip: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Tooltip settings.
+   * [See all settings here](https://kabbouchi.github.io/vue-tippy/4.0/features/placement.html).
+   */
+  tooltipSettings: {
+    type: Object,
+    default: () => {},
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["click", "focus", "blur"]);
+
+const { config, wrapperAttrs, containerAttrs, iconAttrs } = useAttrs(props);
+
+let generatedIcons = [];
+
+if (import.meta.env.PROD) {
+  // when building storybook from inside the package (only for Vueless contributors).
+  if (import.meta.env.STORYBOOK_VUELESS_ENV) {
+    generatedIcons = Object.entries(
+      import.meta.glob(`../assets/images/.generated/**/*.svg`, {
+        eager: true,
+        query: "?component",
+      }),
+    );
+  } else {
+    generatedIcons = Object.entries(
+      import.meta.glob(`../../../src/assets/images/.generated/**/*.svg`, {
+        eager: true,
+        query: "?component",
+      }),
+    );
+  }
+}
+
+const dynamicComponent = computed(() => {
+  const library = config.value.defaultVariants.library;
+  const weight = config.value.defaultVariants.weight;
+  const style = config.value.defaultVariants.style;
+  const fill = props.fill || config.value.defaultVariants.fill ? "-fill" : "";
+  const name = props.name;
+  const src = props.src;
+
+  /* Edge case */
+  if (!src && !name) return "";
+
+  /* Static import */
+  if (src) return src.render();
+
+  /* Dynamic import */
+  if (!name) return "";
+
+  function getIcon(params) {
+    const [, component] = generatedIcons.find(([path]) =>
+      params.every((param) => path.includes(param)),
+    );
+
+    return component;
+  }
+
+  /* eslint-disable vue/max-len, prettier/prettier */
+  const libraries = {
+    "@material-symbols": async () => {
+      return import.meta.env.PROD
+        ? await getIcon([library, weight, style, name, fill])
+        : import(/* @vite-ignore */ `/node_modules/${library}/svg-${weight}/${style}/${name}${fill}.svg?component`);
+    },
+    "bootstrap-icons": async () => {
+      return import.meta.env.PROD
+        ? await getIcon([library, name, fill])
+        : import(/* @vite-ignore */ `/node_modules/${library}/icons/${name}${fill}.svg?component`);
+    },
+    heroicons: async () => {
+      const fillType = fill ? "solid" : "outline";
+
+      return import.meta.env.PROD
+        ? await getIcon([library, style, fillType, name])
+        : import(/* @vite-ignore */ `/node_modules/${library}/${style}/${fillType}/${name}.svg?component`);
+    },
+  };
+  /* eslint-enable vue/max-len, prettier/prettier */
+
+  return defineAsyncComponent(libraries[library]);
+});
+
+const tippyConfig = computed(() => {
+  return { onShow: () => !!props.tooltip, ...props.tooltipSettings, content: props.tooltip };
+});
+
+function onClick(event) {
+  emit("click", event);
+}
+
+function onFocus() {
+  emit("focus");
+}
+
+function onBlur(event) {
+  emit("blur", event);
+}
+</script>

package/ui.image-logo/composables/attrs.composable.js

@@ -0,0 +1,41 @@
+import { computed } from "vue";
+
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+
+export function useAttrs(props) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { logo, title } = config.value;
+
+  const cvaLogo = cva({
+    base: logo.base,
+    variants: logo.variants,
+    compoundVariants: logo.compoundVariants,
+  });
+
+  const cvaTitle = cva({
+    base: title.base,
+    variants: title.variants,
+    compoundVariants: title.compoundVariants,
+  });
+
+  const logoClasses = computed(() => cvaLogo({ size: props.size }));
+
+  const titleClasses = computed(() => cvaTitle({ size: props.size }));
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const logoAttrs = getAttrs("logo", { classes: logoClasses });
+  const labelAttrs = getAttrs("label");
+  const imageAttrs = getAttrs("image");
+  const titleAttrs = getAttrs("title", { classes: titleClasses });
+
+  return {
+    titleAttrs,
+    logoAttrs,
+    wrapperAttrs,
+    labelAttrs,
+    imageAttrs,
+  };
+}