vueless 0.0.9 → 0.0.10

package/src/ui.image-avatar/index.vue

@@ -1,121 +0,0 @@
-<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/src/ui.image-icon/Docs.mdx

@@ -1,16 +0,0 @@
-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/src/ui.image-icon/composables/attrs.composable.js

@@ -1,65 +0,0 @@
-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/src/ui.image-icon/configs/default.config.js

@@ -1,90 +0,0 @@
-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/src/ui.image-icon/constants/index.js

@@ -1,5 +0,0 @@
-/*
-  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/src/ui.image-icon/index.stories.js

@@ -1,110 +0,0 @@
-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/src/ui.image-icon/index.vue

@@ -1,233 +0,0 @@
-<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/src/ui.image-logo/composables/attrs.composable.js

@@ -1,41 +0,0 @@
-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,
-  };
-}