vueless 0.0.187 → 0.0.189

package/package.json

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

package/service.ui/index.js

@@ -212,6 +212,23 @@ export default class UIService {
   setColor(classes, color) {
     return classes?.replaceAll("{color}", color);
   }
+
+  /**
+   Check is config key not contains classes or CVA config object.
+   @param { String } key
+   @returns { Boolean }
+   */
+  isSystemKey(key) {
+    return (
+      key === "i18n" ||
+      key === "strategy" ||
+      key === "safelist" ||
+      key === "safelistColors" ||
+      key === "defaultVariants" ||
+      key.includes("iconName") ||
+      key.includes("IconName")
+    );
+  }
 }
 
 export const {
@@ -222,6 +239,7 @@ export const {
   setFavicon,
   setBrandColor,
   convertHexInRgb,
+  isSystemKey,
   isMac,
   isPWA,
   isIOS,

package/ui.container-accordion/composables/attrs.composable.js

@@ -1,45 +1,37 @@
 import { computed } from "vue";
 import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
-
+import { cva, isSystemKey } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
+const componentKeys = ["icon", "divider"];
+
 export function useAttrs(props, { isOpened }) {
   const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { wrapper, description } = config.value;
+  const attrs = {};
 
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
+  // New approach of defining attrs dynamically (need to test).
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const cvaDescription = cva({
-    base: description.base,
-    variants: description.variants,
-    compoundVariants: description.compoundVariants,
-  });
+    let classes = "";
+    let value = config.value[key];
 
-  const wrapperClasses = computed(() => cvaWrapper({ size: props.size }));
+    if (value.variants || value.compoundVariants) {
+      const getCVA = cva(value);
 
-  const descriptionClasses = computed(() =>
-    cvaDescription({ size: props.size, isOpened: isOpened.value }),
-  );
+      classes = computed(() =>
+        getCVA({
+          ...props,
+          isOpened: isOpened.value,
+        }),
+      );
+    }
 
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
-  const descriptionAttrs = getAttrs("description", { classes: descriptionClasses });
-  const infoAttrs = getAttrs("info");
-  const titleAttrs = getAttrs("title");
-  const iconAttrs = getAttrs("icon", { isComponent: true });
-  const separatorAttrs = getAttrs("separator");
+    attrs[`${key}Attrs`] = getAttrs(key, { classes, isComponent: componentKeys.includes(key) });
+  }
 
   return {
+    ...attrs,
     config,
-    wrapperAttrs,
-    descriptionAttrs,
-    infoAttrs,
-    titleAttrs,
-    iconAttrs,
-    separatorAttrs,
   };
 }

package/ui.container-accordion/configs/default.config.js

@@ -1,6 +1,8 @@
 export default /*tw*/ {
-  wrapper: {
-    base: "group cursor-pointer [&:not(:first-child)]:pt-6",
+  wrapper: "group cursor-pointer",
+  body: "",
+  title: {
+    base: "flex items-center justify-between font-medium text-gray-900",
     variants: {
       size: {
         sm: "text-sm",
@@ -9,10 +11,8 @@ export default /*tw*/ {
       },
     },
   },
-  info: "leading-6",
-  title: "flex items-center justify-between font-medium text-gray-800",
   description: {
-    base: "text-gray-600 leading-normal h-0 overflow-hidden opacity-0",
+    base: "text-gray-600 h-0 opacity-0 transition-all",
     variants: {
       size: {
         sm: "text-xs",
@@ -20,14 +20,14 @@ export default /*tw*/ {
         lg: "text-base",
       },
       isOpened: {
-        true: "h-full pt-3 opacity-100 transition",
+        true: "pt-2 h-full opacity-100",
       },
     },
   },
   icon: "",
   expandIconName: "add",
   collapseIconName: "remove",
-  separator: "mt-2 h-px w-full lg:mt-6 bg-gray-100 mt-2.5 group-last:hidden",
+  divider: "group-last:hidden",
   defaultVariants: {
     size: "md",
   },

package/ui.container-accordion/index.stories.js

@@ -1,8 +1,6 @@
 import { getArgTypes } from "../service.storybook";
 
 import UAccordion from "../ui.container-accordion";
-import UCard from "../ui.container-card";
-import UGroup from "../ui.container-group";
 
 /**
  * The `UAccordion` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.container-accordion)
@@ -17,76 +15,37 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UAccordion, UCard },
+  components: { UAccordion },
   setup() {
     return { args };
   },
   template: `
-    <UCard>
-      <UAccordion
-        name="accordion1"
-        title="Excellence by necessity"
-        description="As creators and maintainers of the technologies you are using,
-              our services are here to showcase the full power of our softwares."
-      />
-      <UAccordion
-        name="accordion1"
-        title="Unique expertise"
-        description="All the peoples that will be involved in delivering your project are contributing
-              to the technologies you are using, when they are not the creators themselves."
-      />
-      <UAccordion
-        name="accordion1"
-        title="Commitment to innovation"
-        description="By working with us, you are directly supporting the open source community,
-              ensuring the ecosystem continuity and enabling Nuxt development."
-      />
-    </UCard>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UAccordion, UCard, UGroup },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <UGroup>
-      <UCard v-for="(sizes, index) in sizes" :padding="sizes">
-          <UAccordion
-            :size="size"
-            :name="size"
-            title="Excellence by necessity"
-            description="As creators and maintainers of the technologies you are using,
-              our services are here to showcase the full power of our softwares."
-            :key="index"
-          />
-          <UAccordion
-            :size="size"
-            :name="size"
-            title="Unique expertise"
-            description="All the peoples that will be involved in delivering your project are contributing
-              to the technologies you are using, when they are not the creators themselves."
-            :key="index"
-          />
-          <UAccordion
-            :size="size"
-            :name="size"
-            title="Commitment to innovation"
-            description="By working with us, you are directly supporting the open source community,
-              ensuring the ecosystem continuity and enabling Nuxt development."
-            :key="index"
-          />
-      </UCard>
-    </UGroup>
+    <UAccordion
+      name="Excellence"
+      title="Excellence by necessity"
+      description="As creators and maintainers of the technologies you are using,
+            our services are here to showcase the full power of our softwares."
+      v-bind="args"
+    />
+    <UAccordion
+      v-bind="args"
+      name="Unique"
+      title="Unique expertise"
+      description="All the peoples that will be involved in delivering your project are contributing
+            to the technologies you are using, when they are not the creators themselves."
+    />
+    <UAccordion
+      v-bind="args"
+      name="Commitment"
+      title="Commitment to innovation"
+      description="By working with us, you are directly supporting the open source community,
+            ensuring the ecosystem continuity and enabling Nuxt development."
+    />
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};
+export const Size = DefaultTemplate.bind({});
+Size.args = { size: "sm" };

package/ui.container-accordion/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div :data-cy="dataCy" v-bind="wrapperAttrs" @click="onClickItem">
-    <div v-bind="infoAttrs">
+    <div v-bind="bodyAttrs">
       <div v-bind="titleAttrs">
-        <div v-text="title" />
-
+        {{ title }}
         <UIcon
           :name="isOpened ? config.collapseIconName : config.expandIconName"
           :size="size"
@@ -16,14 +15,15 @@
       <div :id="`description-${id}`" v-bind="descriptionAttrs" v-text="description" />
     </div>
 
-    <div v-bind="separatorAttrs" />
+    <UDivider :size="dividerSize" v-bind="dividerAttrs" />
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 import UIcon from "../ui.image-icon";
+import UDivider from "../ui.container-divider";
 import UIService, { getRandomId } from "../service.ui";
 
 import { UAccordion } from "./constants/index";
@@ -35,7 +35,7 @@ defineOptions({ name: "UAccordion", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Set component title.
+   * Accordion title.
    */
   title: {
     type: String,
@@ -43,7 +43,7 @@ const props = defineProps({
   },
 
   /**
-   * Set component description.
+   * Accordion description.
    */
   description: {
     type: String,
@@ -51,16 +51,15 @@ const props = defineProps({
   },
 
   /**
-   * Set unique block name.
-   * @ignore
+   * Unique block name.
    */
   name: {
     type: String,
-    required: true,
+    default: "",
   },
 
   /**
-   * The size of component.
+   * Accordion size.
    * @values sm, md, lg
    */
   size: {
@@ -78,7 +77,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Data-cy attribute for automated testing.
    */
   dataCy: {
     type: String,
@@ -86,16 +85,26 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["itemClicked"]);
+const emit = defineEmits(["click"]);
 
 const isOpened = ref(false);
 
-const { config, wrapperAttrs, descriptionAttrs, infoAttrs, titleAttrs, iconAttrs, separatorAttrs } =
+const { config, wrapperAttrs, descriptionAttrs, bodyAttrs, titleAttrs, iconAttrs, dividerAttrs } =
   useAttrs(props, { isOpened });
 
+const dividerSize = computed(() => {
+  const sizes = {
+    sm: "md",
+    md: "lg",
+    lg: "xl",
+  };
+
+  return sizes[props.size];
+});
+
 function onClickItem() {
   isOpened.value = !isOpened.value;
 
-  emit("itemClicked", props.name);
+  emit("click", props.name);
 }
 </script>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.187",
+  "version": "0.0.189",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -275,7 +275,7 @@
             {
               "name": "title",
               "required": true,
-              "description": "Set component title.",
+              "description": "Accordion title.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -284,7 +284,7 @@
             {
               "name": "description",
               "required": true,
-              "description": "Set component description.",
+              "description": "Accordion description.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -292,16 +292,16 @@
             },
             {
               "name": "name",
-              "required": true,
-              "description": "@ignore: Set unique block name.",
+              "description": "Unique block name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              }
+              },
+              "default": "\"\""
             },
             {
               "name": "size",
-              "description": "The size of component.",
+              "description": "Accordion size.",
               "value": {
                 "kind": "expression",
                 "type": "'sm' | 'md' | 'lg'"
@@ -319,7 +319,7 @@
             },
             {
               "name": "dataCy",
-              "description": "Sets data-cy attribute for automated testing.",
+              "description": "Data-cy attribute for automated testing.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -329,7 +329,7 @@
           ],
           "events": [
             {
-              "name": "itemClicked"
+              "name": "click"
             }
           ],
           "source": {