vueless 0.0.195 → 0.0.197

package/composable.ui/index.js

@@ -162,6 +162,7 @@ function getMergedConfig({ defaultConfig, globalConfig, propsConfig, vuelessStra
   @param {Object} propsConfig
   @param {Object} config - final merged config.
   @param {boolean} isReplace - enables class replacement instead of merge.
+  @param {boolean} isVarinants - if true, prevents adding a "base" key into nested objects.
 
   @returns {Object}
  */
@@ -171,6 +172,7 @@ function mergeConfigs({
   propsConfig,
   config = {},
   isReplace = false,
+  isVariants = false,
 }) {
   globalConfig = cloneDeep(globalConfig || {});
   propsConfig = cloneDeep(propsConfig || {});
@@ -213,7 +215,7 @@ function mergeConfigs({
       } else if (key === safelist || key === safelistColors) {
         if (propsConfig[key]) {
           // eslint-disable-next-line no-console
-          console.warn(`Passing '${key}' key by 'config' prop is not allowed.`);
+          console.warn(`Passing '${key}' key in 'config' prop is not allowed.`);
         }
       } else if (key === defaultVariants) {
         config[key] = { ...defaultConfig[key], ...globalConfig[key], ...propsConfig[key] };
@@ -235,14 +237,19 @@ function mergeConfigs({
         const isIconName = key.includes(iconName) || key.includes(iconNameCapitalize);
         const isI18n = key === i18n;
 
+        if (key === "variants" && !isVariants) {
+          isVariants = true;
+        }
+
         config[key] =
           isObject && !isEmpty && !isI18n
             ? mergeConfigs({
-                defaultConfig: stringToObject(composedConfig[key]),
-                globalConfig: stringToObject(globalConfig[key]),
-                propsConfig: stringToObject(propsConfig[key]),
-                config: stringToObject(composedConfig[key]),
+                defaultConfig: stringToObject(composedConfig[key], { addBase: !isVariants }),
+                globalConfig: stringToObject(globalConfig[key], { addBase: !isVariants }),
+                propsConfig: stringToObject(propsConfig[key], { addBase: !isVariants }),
+                config: stringToObject(composedConfig[key], { addBase: !isVariants }),
                 isReplace,
+                isVariants,
               })
             : isReplace || isIconName || isI18n
               ? propsConfig[key] || globalConfig[key] || defaultConfig[key]
@@ -257,14 +264,15 @@ function mergeConfigs({
 }
 
 /**
-  Turn simplified nested component config to regular config.
-  @param {Object | String} value
-  @returns {Object}
+ Turn simplified nested component config to regular config.
+ @param {Object | String} value
+ @param {Boolean} addBase
+ @returns {Object}
  */
-function stringToObject(value) {
+function stringToObject(value, { addBase = false }) {
   if (value === undefined) value = "";
 
-  return typeof value === "object" ? value : { base: value };
+  return typeof value !== "object" ? addBase && { base: value } : value;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.195",
+  "version": "0.0.197",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.195",
+  "version": "0.0.197",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -4945,84 +4945,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "ULogo",
-          "description": "",
-          "attributes": [
-            {
-              "name": "src",
-              "description": "Logo source path.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            },
-            {
-              "name": "label",
-              "description": "Logo label.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            },
-            {
-              "name": "title",
-              "description": "Logo title.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            },
-            {
-              "name": "titleSize",
-              "description": "Logo title size.",
-              "value": {
-                "kind": "expression",
-                "type": "'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'"
-              },
-              "default": "md"
-            },
-            {
-              "name": "size",
-              "description": "title size.",
-              "value": {
-                "kind": "expression",
-                "type": "'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'"
-              },
-              "default": "md"
-            },
-            {
-              "name": "config",
-              "description": "Component ui config object.",
-              "value": {
-                "kind": "expression",
-                "type": "object"
-              },
-              "default": "{}"
-            },
-            {
-              "name": "dataCy",
-              "description": "Data-cy attribute for automated testing.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            }
-          ],
-          "events": [
-            {
-              "name": "click"
-            }
-          ],
-          "source": {
-            "module": "./src/ui.image-logo/index.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "UModal",
           "description": "",

package/ui.image-logo/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/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,
-  };
-}

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

@@ -1,38 +0,0 @@
-export default /*tw*/ {
-  wrapper: "flex items-center",
-  logo: {
-    base: "relative",
-    variants: {
-      size: {
-        "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",
-      },
-    },
-  },
-  label: "bg-red-500 text-xs font-medium text-white rounded-full absolute -right-7 -top-1.5 px-2 py-0.5",
-  image: "h-full w-full bg-contain bg-center bg-no-repeat",
-  title: {
-    base: "whitespace-nowrap px-3.5 font-bold text-gray-900",
-    variants: {
-      size: {
-        "2xs": "text-xs",
-        xs: "text-sm",
-        sm: "text-base",
-        md: "text-lg",
-        lg: "text-2xl",
-        xl: "text-3xl",
-        "2xl": "text-4xl",
-      },
-    },
-  },
-  defaultVariants: {
-    size: "md",
-    titleSize: "md",
-  },
-};

package/ui.image-logo/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 ULogo = "ULogo";

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

@@ -1,87 +0,0 @@
-import { getArgTypes } from "../service.storybook";
-
-import ULogo from "../ui.image-logo";
-import URow from "../ui.container-row";
-
-/**
- * The `ULogo` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.image-logo)
- */
-export default {
-  id: "6020",
-  title: "Images & Icons / Logo",
-  component: ULogo,
-  args: {
-    src: "https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg",
-  },
-  argTypes: {
-    ...getArgTypes(ULogo.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { ULogo },
-  setup() {
-    return { args };
-  },
-  template: `
-    <ULogo v-bind="args"/>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { ULogo, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <ULogo
-        v-for="(size, index) in sizes"
-        :key="index"
-        v-bind="args"
-        :size="size"
-        :title="size"
-      />
-    </URow>
-  `,
-});
-
-const SizesTitleTemplate = (args, { argTypes } = {}) => ({
-  components: { ULogo, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.sizeTitle.options,
-    };
-  },
-  template: `
-    <URow>
-      <ULogo
-        v-for="(size, index) in sizes"
-        :key="index"
-        v-bind="args"
-        :size-title="size"
-        :title="size"
-        size="md"
-      />
-    </URow>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
-
-export const sizesTitle = SizesTitleTemplate.bind({});
-sizesTitle.args = {};
-
-export const title = DefaultTemplate.bind({});
-title.args = { title: "some title" };
-
-export const label = DefaultTemplate.bind({});
-label.args = { label: "label" };

package/ui.image-logo/index.vue

@@ -1,98 +0,0 @@
-<template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs" @click="onClick">
-    <div v-bind="logoAttrs">
-      <div v-if="label" v-bind="labelAttrs" v-text="label" />
-
-      <div :style="bgImage" v-bind="imageAttrs" />
-    </div>
-
-    <div v-if="title" v-bind="titleAttrs" v-text="title" />
-  </div>
-</template>
-
-<script setup>
-import { computed } from "vue";
-
-import UIService from "../service.ui";
-
-import { useAttrs } from "./composables/attrs.composable";
-import defaultConfig from "./configs/default.config";
-import { ULogo } from "./constants";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "ULogo", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Logo source path.
-   */
-  src: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Logo label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Logo title.
-   */
-  title: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Logo title size.
-   * @values 2xs, xs, sm, md, lg, xl, 2xl
-   */
-  titleSize: {
-    type: String,
-    default: UIService.get(defaultConfig, ULogo).default.titleSize,
-  },
-
-  /**
-   * title size.
-   * @values 2xs, xs, sm, md, lg, xl, 2xl, 3xl
-   */
-  size: {
-    type: String,
-    default: UIService.get(defaultConfig, ULogo).default.size,
-  },
-
-  /**
-   * Component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits(["click"]);
-
-const { titleAttrs, logoAttrs, wrapperAttrs, labelAttrs, imageAttrs } = useAttrs(props);
-
-const bgImage = computed(() => {
-  let path = props.src.includes("http") ? props.src : import.meta.env.BASE_URL + props.src;
-
-  return `background-image: url(${path});`;
-});
-
-function onClick(event) {
-  emit("click", event);
-}
-</script>