vueless 0.0.196 → 0.0.198

package/composable.ui/index.js

@@ -46,7 +46,8 @@ const SYSTEM_CONFIG_KEY = {
   4. Component classes (class="...")
  */
 export default function useUI(defaultConfig = {}, propsConfigGetter = null, topLevelClassKey) {
-  const { name: componentName } = getCurrentInstance().type;
+  const { type, props } = getCurrentInstance();
+  const componentName = type.name;
   const globalConfig = globalComponentConfig[componentName];
 
   const isStrategyValid = strategy && Object.values(STRATEGY_TYPE).includes(strategy);
@@ -88,6 +89,7 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
     delete commonAttrs.value;
 
     watch(config, updateVuelessAttrs, { immediate: true });
+    watch(props, updateVuelessAttrs);
 
     function updateVuelessAttrs() {
       const configKeyValue = config.value[configKey];
@@ -100,7 +102,7 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
 
       const isTopLevelClassKey = configKey === (topLevelClassKey || firstClassKey);
       const attrClass = isTopLevelClassKey && !nestedComponent ? attrs.class : "";
-      const classes = options?.classes ? toValue(options?.classes) : getBaseClasses(configKeyValue);
+      const classes = toValue(options?.classes) || getBaseClasses(configKeyValue);
 
       vuelessAttrs.value = {
         ...commonAttrs,

package/package.json

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

package/ui.button/composables/attrs.composable.js

@@ -1,58 +1,40 @@
 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, getColor, setColor } = useUI(defaultConfig, () => props.config);
-  const { button, text } = config.value;
+export default function useAttrs(props) {
+  const { config, getAttrs, hasSlotContent, isSystemKey, getColor, setColor } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
+  const attrs = {};
 
-  const cvaButton = cva({
-    base: button.base,
-    variants: button.variants,
-    compoundVariants: button.compoundVariants,
-  });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const cvaText = cva({
-    base: text.base,
-    variants: text.variants,
-    compoundVariants: text.compoundVariants,
-  });
+    const classes = computed(() => {
+      const value = config.value[key];
 
-  const buttonClasses = computed(() =>
-    setColor(
-      cvaButton({
-        size: props.size,
-        color: getColor(props.color),
-        variant: props.variant,
-        pill: props.pill,
-        block: props.block,
-        square: props.loading || props.square,
-        filled: props.filled,
-        loading: props.loading,
-        disabled: props.disabled,
-      }),
-      props.color,
-    ),
-  );
+      if (value.variants || value.compoundVariants) {
+        return setColor(
+          cva(value)({
+            ...props,
+            color: getColor(props.color),
+          }),
+          props.color,
+        );
+      }
 
-  const textClasses = computed(() =>
-    setColor(
-      cvaText({
-        color: getColor(props.color),
-      }),
-      props.color,
-    ),
-  );
+      return "";
+    });
 
-  const buttonAttrs = getAttrs("button", { classes: buttonClasses });
-  const loaderAttrs = getAttrs("loader");
-  const textAttrs = getAttrs("text", { classes: textClasses });
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
-    buttonAttrs,
-    loaderAttrs,
-    textAttrs,
+    ...attrs,
+    config,
+    hasSlotContent,
   };
 }

package/ui.button/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 import UButton from "../ui.button";
 import UIcon from "../ui.image-icon";
@@ -29,9 +29,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UButton v-bind="args">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
+      ${allSlotsFragment}
     </UButton>
   `,
 });

package/ui.button/index.vue

@@ -39,7 +39,7 @@ import ULoader from "../ui.loader";
 import UIcon from "../ui.image-icon";
 
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 import { UButton } from "./constants";
 
 /* Should be a string for correct web-types gen */

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.196",
+  "version": "0.0.198",
   "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>