vueless 0.0.2 → 0.0.3

package/ui.image-icon/index.vue

@@ -1,23 +1,29 @@
 <template>
-  <span
+  <div
     v-tippy="tippyConfig"
-    class="mono-svg-icon"
-    :class="[iconWrapClasses]"
     :data-cy="dataCy"
-    @click="onClick"
+    v-bind="wrapperAttrs"
     @focus="onFocus"
     @blur="onBlur"
+    @click="onClick"
   >
-    <component :is="dynamicComponent" :class="iconClasses" class="mono-svg-icon-inline" />
-  </span>
+    <div v-bind="containerAttrs">
+      <component :is="dynamicComponent" v-bind="iconAttrs" />
+    </div>
+  </div>
 </template>
 
-<script>
-import { defineAsyncComponent } from "vue";
+<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 "vueless/service.ui";
+
+import { UIcon } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
 
 tippySetConfig({
   arrow: true,
@@ -25,487 +31,193 @@ tippySetConfig({
   animation: "shift-away",
 });
 
-export default {
+/* Should be a string for correct web-types gen */
+defineOptions({
   name: "UIcon",
+  directives: { tippy: tippyDirective },
+  inheritAttrs: false,
+});
 
-  directives: {
-    tippy: tippyDirective,
+const props = defineProps({
+  /**
+   * Icon SVG data source (svg as a vue component).
+   */
+  src: {
+    type: [String, Object],
+    default: "",
   },
 
-  props: {
-    /**
-     * Icon SVG data source path.
-     */
-    src: {
-      type: [String, Object],
-      default: "",
-    },
-
-    /**
-     * Icon SVG name which imported in global config file (deprecated).
-     */
-    name: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * The color of the icon.
-     * @values brand, gray, red, yellow, green, blue, violet, black, white
-     */
-    color: {
-      type: String,
-      default: "black",
-    },
-
-    /**
-     * The size of the icon.
-     * @values 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Set pill mild semi-transparent background and solid colour icon.
-     */
-    pill: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Set pill solid background and white icon.
-     */
-    pillFilled: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * The variant of the icon.
-     * @values light, default, dark
-     */
-    variant: {
-      type: String,
-      default: "default",
-    },
-
-    /**
-     * Add interactive states to the icon (hover, clicked).
-     */
-    interactive: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Set tooltip text.
-     */
-    tooltip: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set tooltip settings.
-     * [See all settings here](https://kabbouchi.github.io/vue-tippy/4.0/features/placement.html).
-     */
-    tooltipSettings: {
-      type: Object,
-      default: () => {},
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+  /**
+   * Name of the icon.
+   */
+  name: {
+    type: String,
+    default: "",
   },
 
-  emits: ["click", "focus", "blur"],
-
-  computed: {
-    dynamicComponent() {
-      const name = this.name;
-      const src = this.src;
-      let component = "";
-
-      // TODO: this one should be props
-      const style = "rounded";
-      const weight = "400";
-
-      // Dynamic import
-      if (name && !src) {
-        component = defineAsyncComponent(() =>
-          import.meta.env.PROD
-            ? import(
-                `../../src/assets/images/.generated/@material-symbols/svg-${weight}/${style}/${name}.svg`
-              )
-            : import(
-                /* @vite-ignore */ `/node_modules/@material-symbols/svg-${weight}/${style}/${name}.svg`
-              ),
-        );
-      }
-
-      // Static import
-      if (src && !name) {
-        component = src.render();
-      }
-
-      return component;
-    },
-
-    tippyConfig() {
-      return { onShow: () => !!this.tooltip, ...this.tooltipSettings, content: this.tooltip };
-    },
-
-    iconWrapClasses() {
-      const pill = this.pill || this.pillFilled ? "pill" : "";
-      const pillFilled = this.pillFilled ? "pill-filled" : "";
-      const pillClasses = `${pill} ${pillFilled} pill-${this.color}`;
-
-      return { [pillClasses]: this.pill || this.pillFilled };
-    },
-
-    iconClasses() {
-      const color = `mono-svg-icon-${this.color}-${this.variant}`;
-      const size = `size-${this.size}`;
-      const classes = { interactive: this.interactive };
-
-      return [color, size, classes];
-    },
+  /**
+   * Change icon variant from outline to filled.
+   */
+  fill: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UIcon).default.fill,
   },
 
-  methods: {
-    onClick() {
-      this.$emit("click");
-    },
+  /**
+   * 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,
+  },
 
-    onFocus() {
-      this.$emit("focus");
-    },
+  /**
+   * Icon size.
+   * @values 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UIcon).default.size,
+  },
 
-    onBlur(event) {
-      this.$emit("blur", event);
-    },
+  /**
+   * Set pill mild semi-transparent background and solid colour icon.
+   */
+  pill: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UIcon).default.pill,
   },
-};
-</script>
 
-<style lang="postcss" scoped>
-.size-3xs {
-  @apply h-3 w-3;
+  /**
+   * Icon variant.
+   * @values light, default, dark
+   */
+  variant: {
+    type: String,
+    default: UIService.get(defaultConfig, UIcon).default.variant,
+  },
 
-  .pill > & {
-    @apply m-1;
-  }
-}
+  /**
+   * Add interactive states to the icon (hover, clicked).
+   */
+  interactive: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UIcon).default.interactive,
+  },
 
-.size-2xs {
-  @apply h-3.5 w-3.5;
+  /**
+   * Add tooltip text on hover.
+   */
+  tooltip: {
+    type: String,
+    default: "",
+  },
 
-  .pill > & {
-    @apply m-1.5;
-  }
-}
+  /**
+   * Tooltip settings.
+   * [See all settings here](https://kabbouchi.github.io/vue-tippy/4.0/features/placement.html).
+   */
+  tooltipSettings: {
+    type: Object,
+    default: () => {},
+  },
 
-.size-xs {
-  @apply h-4 w-4;
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-  .pill > & {
-    @apply m-2;
-  }
-}
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
 
-.size-sm {
-  @apply h-5 w-5;
+const emit = defineEmits(["click", "focus", "blur"]);
 
-  .pill > & {
-    @apply m-2.5;
-  }
-}
+const { config, wrapperAttrs, containerAttrs, iconAttrs } = useAttrs(props);
 
-.size-md {
-  @apply h-6 w-6;
+let generatedIcons = [];
 
-  .pill > & {
-    @apply m-3;
-  }
+if (import.meta.env.PROD) {
+  generatedIcons = Object.entries(
+    import.meta.glob(`../../src/assets/images/.generated/**/*.svg`, {
+      eager: true,
+      query: "?component",
+    }),
+  );
 }
 
-.size-lg {
-  @apply h-8 w-8;
+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;
 
-  .pill > & {
-    @apply m-3.5;
-  }
-}
+  /* Edge case */
+  if (!src && !name) return "";
 
-.size-xl {
-  @apply h-10 w-10;
+  /* Static import */
+  if (src) return src.render();
 
-  .pill > & {
-    @apply m-4;
-  }
-}
+  /* Dynamic import */
+  if (!name) return "";
 
-.size-2xl {
-  @apply h-12 w-12;
+  function getIcon(params) {
+    const [, component] = generatedIcons.find(([path]) =>
+      params.every((param) => path.includes(param)),
+    );
 
-  .pill > & {
-    @apply m-[1.125rem];
+    return component;
   }
-}
 
-.size-3xl {
-  @apply h-14 w-14;
-
-  .pill > & {
-    @apply m-5;
-  }
-}
+  /* 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";
 
-.size-4xl {
-  @apply h-16 w-16;
+      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 */
 
-  .pill > & {
-    @apply m-6;
-  }
-}
+  return defineAsyncComponent(libraries[library]);
+});
 
-.size-5xl {
-  @apply h-20 w-20;
+const tippyConfig = computed(() => {
+  return { onShow: () => !!props.tooltip, ...props.tooltipSettings, content: props.tooltip };
+});
 
-  .pill > & {
-    @apply m-8;
-  }
+function onClick(event) {
+  emit("click", event);
 }
 
-.mono-svg-icon {
-  @apply inline-table fill-current;
-
-  &:deep(g [fill]) {
-    @apply fill-current;
-  }
-
-  .interactive {
-    @apply cursor-pointer;
-
-    &:hover,
-    &:active {
-      @apply opacity-50;
-    }
-  }
-
-  &-inline {
-    @apply fill-current;
-  }
-
-  &-brand {
-    &-default,
-    &-light,
-    &-dark {
-      @apply text-brand;
-    }
-  }
-
-  &-black {
-    &-default,
-    &-light,
-    &-dark {
-      @apply text-black;
-    }
-  }
-
-  &-white {
-    &-default,
-    &-light,
-    &-dark {
-      @apply text-white;
-    }
-  }
-
-  &-gray {
-    &-default {
-      @apply text-gray-500;
-    }
-
-    &-light {
-      @apply text-gray-400;
-    }
-
-    &-dark {
-      @apply text-gray-700;
-    }
-  }
-
-  &-red {
-    &-default {
-      @apply text-red-500;
-    }
-
-    &-light {
-      @apply text-red-400;
-    }
-
-    &-dark {
-      @apply text-red-700;
-    }
-  }
-
-  &-orange {
-    &-default {
-      @apply text-orange-500;
-    }
-
-    &-light {
-      @apply text-orange-400;
-    }
-
-    &-dark {
-      @apply text-orange-700;
-    }
-  }
-
-  &-yellow {
-    &-default {
-      @apply text-yellow-500;
-    }
-
-    &-light {
-      @apply text-yellow-400;
-    }
-
-    &-dark {
-      @apply text-yellow-700;
-    }
-  }
-
-  &-green {
-    &-default {
-      @apply text-green-500;
-    }
-
-    &-light {
-      @apply text-green-400;
-    }
-
-    &-dark {
-      @apply text-green-700;
-    }
-  }
-
-  &-blue {
-    &-default {
-      @apply text-blue-500;
-    }
-
-    &-light {
-      @apply text-blue-400;
-    }
-
-    &-dark {
-      @apply text-blue-700;
-    }
-  }
-
-  &-violet {
-    &-default {
-      @apply text-violet-500;
-    }
-
-    &-light {
-      @apply text-violet-400;
-    }
-
-    &-dark {
-      @apply text-violet-700;
-    }
-  }
-
-  &-fuchsia {
-    &-default {
-      @apply text-fuchsia-500;
-    }
-
-    &-light {
-      @apply text-fuchsia-400;
-    }
-
-    &-dark {
-      @apply text-fuchsia-700;
-    }
-  }
+function onFocus() {
+  emit("focus");
 }
 
-.pill {
-  @apply rounded-full;
-
-  &-brand {
-    @apply bg-brand bg-opacity-5;
-  }
-
-  &-black {
-    @apply bg-black bg-opacity-5;
-  }
-
-  &-white {
-    @apply bg-white bg-opacity-5;
-  }
-
-  &-gray {
-    @apply bg-gray-500 bg-opacity-5;
-  }
-
-  &-red {
-    @apply bg-red-500 bg-opacity-5;
-  }
-
-  &-orange {
-    @apply bg-orange-500 bg-opacity-5;
-  }
-
-  &-yellow {
-    @apply bg-yellow-500 bg-opacity-5;
-  }
-
-  &-green {
-    @apply bg-green-500 bg-opacity-5;
-  }
-
-  &-blue {
-    @apply bg-blue-500 bg-opacity-5;
-  }
-
-  &-violet {
-    @apply bg-violet-500 bg-opacity-5;
-  }
-
-  &-fuchsia {
-    @apply bg-fuchsia-500 bg-opacity-5;
-  }
-
-  &-filled {
-    &:deep(svg) {
-      @apply text-white;
-    }
-
-    &.pill-brand,
-    &.pill-black,
-    &.pill-gray,
-    &.pill-red,
-    &.pill-orange,
-    &.pill-yellow,
-    &.pill-green,
-    &.pill-blue,
-    &.pill-violet,
-    &.pill-fuchsia {
-      @apply bg-opacity-100;
-    }
-  }
+function onBlur(event) {
+  emit("blur", event);
 }
-</style>
+</script>

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

@@ -0,0 +1,41 @@
+import { computed } from "vue";
+
+import useUI from "vueless/composable.ui";
+import { cva } from "vueless/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,
+  };
+}