vueless 0.0.210 → 0.0.211

package/ui.form-checkbox/composables/attrs.composable.js

@@ -4,54 +4,39 @@ import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props, { checkboxColor, checkboxSize }) {
-  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
-  const { checkbox, iconWrapper } = config.value;
-
-  const cvaCheckbox = cva({
-    base: checkbox.base,
-    variants: checkbox.variants,
-    compoundVariants: checkbox.compoundVariants,
-  });
-
-  const cvaIconWrapper = cva({
-    base: iconWrapper.base,
-    variants: iconWrapper.variants,
-    compoundVariants: iconWrapper.compoundVariants,
-  });
-
-  const checkboxClasses = computed(() =>
-    setColor(
-      cvaCheckbox({
-        size: checkboxSize.value,
-        label: Boolean(props.label),
-        color: getColor(checkboxColor.value),
-        disabled: props.disabled,
-      }),
-      checkboxColor.value,
-    ),
+export default function useAttrs(props, { checkboxColor, checkboxSize }) {
+  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
   );
+  const attrs = {};
 
-  const iconWrapperClasses = computed(() =>
-    setColor(
-      cvaIconWrapper({
-        size: checkboxSize.value,
-        color: getColor(checkboxColor.value),
-      }),
-      checkboxColor.value,
-    ),
-  );
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return setColor(
+          cva(value)({
+            ...props,
+            size: checkboxSize.value,
+            label: Boolean(props.label),
+            color: getColor(checkboxColor.value),
+          }),
+          checkboxColor.value,
+        );
+      }
+
+      return "";
+    });
 
-  const labelAttrs = getAttrs("label", { isComponent: true });
-  const iconWrapperCellAttrs = getAttrs("iconWrapper", { classes: iconWrapperClasses });
-  const iconAttrs = getAttrs("icon", { isComponent: true });
-  const checkboxAttrs = getAttrs("checkbox", { classes: checkboxClasses });
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
+    ...attrs,
     config,
-    checkboxAttrs,
-    iconWrapperCellAttrs,
-    labelAttrs,
-    iconAttrs,
   };
 }

package/ui.form-checkbox/configs/default.config.js

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  label: "w-auto max-w-max relative", // TODO: label classes should be defined in ULabel component
+  label: "{ULabel} w-auto max-w-max relative", // TODO: label classes should be defined in ULabel component
   partialIconName: "remove",
   selectedIconName: "check",
   iconWrapper: {
@@ -17,7 +17,7 @@ export default /*tw*/ {
       },
     },
   },
-  icon: "",
+  icon: "{UIcon}",
   checkbox: {
     base: `
       border border-solid rounded border-gray-300 bg-white hover:transition

package/ui.form-checkbox/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 import UCheckbox from "../ui.form-checkbox";
 import UCheckboxGroup from "../ui.form-checkbox-group";
@@ -30,9 +30,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UCheckbox v-bind="args" v-model="args.value">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
+      ${allSlotsFragment}
     </UCheckbox>
   `,
 });

package/ui.form-checkbox/index.vue

@@ -22,7 +22,7 @@
       @change="onChange"
     />
 
-    <label v-if="isChecked" v-bind="iconWrapperCellAttrs" :for="id">
+    <label v-if="isChecked" v-bind="iconWrapperAttrs" :for="id">
       <UIcon
         internal
         :name="partial ? config.partialIconName : config.selectedIconName"
@@ -49,7 +49,7 @@ import UIService, { getRandomId } from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
 import { UCheckbox } from "./constants";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UCheckbox", inheritAttrs: false });
@@ -186,13 +186,25 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:modelValue", "input"]);
+const emit = defineEmits([
+  /**
+   * Triggers when checkbox is toggled.
+   * @property {Boolean} newModelValue
+   */
+  "update:modelValue",
+
+  /**
+   * Triggers when checkbox is toggled.
+   * @property {Boolean} newModelValue
+   */
+  "input",
+]);
 
 const checkboxName = ref("");
 const checkboxSize = ref(props.size);
 const checkboxColor = ref(props.color);
 
-const { config, checkboxAttrs, iconWrapperCellAttrs, labelAttrs, iconAttrs } = useAttrs(props, {
+const { config, checkboxAttrs, iconWrapperAttrs, labelAttrs, iconAttrs } = useAttrs(props, {
   checkboxColor,
   checkboxSize,
 });

package/ui.form-checkbox-group/composables/attrs.composable.js

@@ -1,17 +1,32 @@
 import useUI from "../../composable.ui";
-
+import { computed } from "vue";
+import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props) {
-  const { getAttrs } = useUI(defaultConfig, () => props.config);
+export default function useAttrs(props) {
+  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const attrs = {};
+
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+        });
+      }
+
+      return "";
+    });
 
-  const labelAttrs = getAttrs("label", { isComponent: true });
-  const listAttrs = getAttrs("list");
-  const checkboxAttrs = getAttrs("checkbox", { isComponent: true });
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
-    labelAttrs,
-    checkboxAttrs,
-    listAttrs,
+    ...attrs,
+    config,
   };
 }

package/ui.form-checkbox-group/configs/default.config.js

@@ -1,7 +1,7 @@
 export default /*tw*/ {
-  label: "",
+  label: "{ULabel}",
   list: "ml-4 flex flex-col gap-4 relative",
-  checkbox: "",
+  checkbox: "{UCheckbox}",
   defaultVariants: {
     color: "brand",
     size: "md",

package/ui.form-checkbox-group/index.vue

@@ -40,7 +40,7 @@ import UCheckbox from "../ui.form-checkbox";
 
 import { UCheckboxGroup } from "./constants";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UCheckboxGroup", inheritAttrs: false });
@@ -137,7 +137,13 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits([
+  /**
+   * Triggers when checkbox value changes.
+   * @property {object} value
+   */
+  "update:modelValue",
+]);
 
 const checkedItems = ref([]);
 

package/ui.form-checkbox-multi-state/composables/attrs.composable.js

@@ -1,24 +1,46 @@
 import useUI from "../../composable.ui";
-
+import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props, { selected }) {
-  const { getAttrs } = useUI(defaultConfig, () => props.config);
+export default function useAttrs(props, { selected }) {
+  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const attrs = {};
 
-  const checkboxAttrsRaw = getAttrs("checkbox", { isComponent: true });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const checkboxAttrs = computed(() => {
-    if (!checkboxAttrsRaw.value.config) {
-      checkboxAttrsRaw.value.config = {};
-    }
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+        });
+      }
+
+      return "";
+    });
 
-    checkboxAttrsRaw.value.config.selectedIconName = selected.value.icon;
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
 
-    return checkboxAttrsRaw.value;
-  });
+    if (key === "checkbox") {
+      const checkboxAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => {
+        if (!checkboxAttrs.value.config) {
+          checkboxAttrs.value.config = {};
+        }
+
+        checkboxAttrs.value.config.selectedIconName = selected.value.icon;
+
+        return checkboxAttrs.value;
+      });
+    }
+  }
 
   return {
-    checkboxAttrs,
+    ...attrs,
+    config,
   };
 }

package/ui.form-checkbox-multi-state/configs/default.config.js

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  checkbox: "",
+  checkbox: "{UCheckbox}",
   defaultVariants: {
     color: "brand",
     size: "md",

package/ui.form-checkbox-multi-state/index.vue

@@ -20,7 +20,7 @@ import UCheckbox from "../ui.form-checkbox";
 
 import defaultConfig from "./configs/default.config";
 import { UCheckboxMultiState } from "./constants";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UCheckboxMultiState", inheritAttrs: false });
@@ -102,7 +102,13 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits([
+  /**
+   * Triggers when checkbox value changes.
+   * @property {number} value
+   */
+  "update:modelValue",
+]);
 
 const index = ref(0);
 const isChecked = ref(false);

package/ui.form-input-file/composables/attrs.composable.js

@@ -4,75 +4,32 @@ import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { dropzoneWrapper, placeholder, contentWrapper } = config.value;
+export default function useAttrs(props) {
+  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const attrs = {};
 
-  const cvaDropzoneWrapper = cva({
-    base: dropzoneWrapper.base,
-    variants: dropzoneWrapper.variants,
-    compoundVariants: dropzoneWrapper.compoundVariants,
-  });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const cvaPlaceholder = cva({
-    base: placeholder.base,
-    variants: placeholder.variants,
-    compoundVariants: placeholder.compoundVariants,
-  });
+    const classes = computed(() => {
+      const value = config.value[key];
 
-  const cvaContentWrapper = cva({
-    base: contentWrapper.base,
-    variants: contentWrapper.variants,
-    compoundVariants: contentWrapper.compoundVariants,
-  });
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+          error: Boolean(props.error),
+          label: Boolean(props.label),
+        });
+      }
 
-  const dropzoneWrapperClasses = computed(() =>
-    cvaDropzoneWrapper({
-      error: Boolean(props.error),
-      label: Boolean(props.label),
-      labelAlign: props.labelAlign,
-      size: props.size,
-    }),
-  );
+      return "";
+    });
 
-  const placeholderClasses = computed(() =>
-    cvaPlaceholder({
-      size: props.size,
-    }),
-  );
-
-  const contentWrapperClasses = computed(() =>
-    cvaContentWrapper({
-      multiple: props.multiple,
-    }),
-  );
-
-  const labelAttrs = getAttrs("label", { isComponent: true });
-  const buttonAttrs = getAttrs("button", { isComponent: true });
-  const dropzoneWrapperAttrs = getAttrs("dropzoneWrapper", { classes: dropzoneWrapperClasses });
-  const descriptionAttrs = getAttrs("description", { isComponent: true });
-  const buttonWrapperAttrs = getAttrs("buttonWrapper");
-  const placeholderAttrs = getAttrs("placeholder", { classes: placeholderClasses });
-  const clearIconAttrs = getAttrs("clearIcon", { isComponent: true });
-  const removeItemIconAttrs = getAttrs("removeItemIcon", { isComponent: true });
-  const chooseFileIconAttrs = getAttrs("chooseFileIcon", { isComponent: true });
-  const inputAttrs = getAttrs("input");
-  const fileListAttrs = getAttrs("fileList", { isComponent: true });
-  const contentWrapperAttrs = getAttrs("contentWrapper", { classes: contentWrapperClasses });
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
+    ...attrs,
     config,
-    inputAttrs,
-    labelAttrs,
-    buttonAttrs,
-    dropzoneWrapperAttrs,
-    descriptionAttrs,
-    contentWrapperAttrs,
-    clearIconAttrs,
-    placeholderAttrs,
-    fileListAttrs,
-    buttonWrapperAttrs,
-    chooseFileIconAttrs,
-    removeItemIconAttrs,
   };
 }

package/ui.form-input-file/configs/default.config.js

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   label: {
-    wrapper: "relative w-full",
+    wrapper: "{ULabel} relative w-full",
     label: {
       compoundVariants: [
         { align: "topInside", size: "sm", class: "left-5 top-4" },
@@ -25,7 +25,7 @@ export default /*tw*/ {
       { labelAlign: "topInside", label: true, size: "lg", class: "pt-12" },
     ],
   },
-  description: "text-gray-700",
+  description: "{UText} text-gray-700",
   contentWrapper: {
     base: "relative mt-3 flex w-full gap-6 justify-between items-start rounded bg-brand-50 p-3",
     variants: {
@@ -44,18 +44,18 @@ export default /*tw*/ {
       },
     },
   },
-  button: "hover:cursor-pointer",
-  chooseFileIcon: "",
+  button: "{UButton} hover:cursor-pointer",
+  chooseFileIcon: "{UIcon}",
   chooseFileIconName: "attach_file",
-  clearIcon: "",
+  clearIcon: "{UIcon}",
   clearIconName: "close",
-  removeItemIcon: "ml-2",
+  removeItemIcon: "{UIcon} ml-2",
   removeItemIconName: "close",
   dropzoneWrapperHover: "border-gray-400 border-dashed",
   dropzoneWrapperError: "hover:border-red-400 border-dashed border-red-300",
   input: "sr-only pointer-events-none size-0 opacity-0",
   buttonWrapper: "flex gap-4 items-center",
-  fileList: "w-full",
+  fileList: "{UFiles} w-full",
   i18n: {
     sizeError: "File size is too big.",
     formatError: "Format is not supported.",

package/ui.form-input-file/index.vue

@@ -4,7 +4,7 @@
       <UText :size="nestedComponentSize" :html="description" v-bind="descriptionAttrs" />
 
       <div v-bind="contentWrapperAttrs">
-        <!-- @slot Use it to add something before placeholder. -->
+        <!-- @slot Use it to add something before the placeholder. -->
         <slot name="left" />
 
         <span v-if="!isValue" v-bind="placeholderAttrs" v-text="currentLocale.noFile" />
@@ -88,7 +88,7 @@ import UFiles from "../ui.text-files";
 import UIService, { getRandomId } from "../service.ui";
 import { getFileMbSize } from "./services/fileForm.service";
 
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
 
 import { UInputFile } from "./constants";
@@ -194,7 +194,19 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:modelValue", "update:error"]);
+const emit = defineEmits([
+  /**
+   * Triggers when a file is updated.
+   * @property {array} value
+   */
+  "update:modelValue",
+
+  /**
+   * Triggers when the input has not passed validation.
+   * @property {string} value
+   */
+  "update:error",
+]);
 
 const { tm } = useLocale();
 

package/ui.form-input-money/composables/attrs.composable.js

@@ -1,13 +1,32 @@
 import useUI from "../../composable.ui";
-
+import { computed } from "vue";
+import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
 export default function useAttrs(props) {
-  const { getAttrs } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const attrs = {};
+
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+        });
+      }
+
+      return "";
+    });
 
-  const inputAttrs = getAttrs("input", { isComponent: true });
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
-    inputAttrs,
+    ...attrs,
+    config,
   };
 }

package/ui.form-input-money/configs/default.config.js

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  input: "",
+  input: "{UInput}",
   defaultVariants: {
     symbol: "$",
     size: "md",

package/ui.form-input-money/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 import UInputMoney from "../ui.form-input-money";
 import URow from "../ui.container-row";
@@ -32,9 +32,7 @@ const DefaultTemplate = (args) => ({
       v-bind="args"
       v-model="args.inputValue"
     >
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
+      ${allSlotsFragment}
     </UInputMoney>
   `,
 });

package/ui.form-input-number/composables/attrs.composable.js

@@ -4,44 +4,30 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { value, text } = config.value;
-
-  const cvaValue = cva({
-    base: value.base,
-    variants: value.variants,
-    compoundVariants: value.compoundVariants,
-  });
-
-  const cvaText = cva({
-    base: text.base,
-    variants: text.variants,
-    compoundVariants: text.compoundVariants,
-  });
-
-  const textClasses = computed(() => cvaText({ size: props.size }));
-
-  const valueClasses = computed(() => cvaValue({ size: props.size }));
-
-  const wrapperAttrs = getAttrs("wrapper");
-  const numberAttrs = getAttrs("number");
-  const removeButtonAttrs = getAttrs("removeButton", { isComponent: true });
-  const removeIconAttrs = getAttrs("removeIcon", { isComponent: true });
-  const addButtonAttrs = getAttrs("addButton", { isComponent: true });
-  const addIconAttrs = getAttrs("addIcon", { isComponent: true });
-  const valueAttrs = getAttrs("value", { classes: valueClasses });
-  const textAttrs = getAttrs("text", { classes: textClasses });
+export default function useAttrs(props) {
+  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const attrs = {};
+
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+        });
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
+    ...attrs,
     config,
-    valueAttrs,
-    textAttrs,
-    removeButtonAttrs,
-    removeIconAttrs,
-    addButtonAttrs,
-    addIconAttrs,
-    wrapperAttrs,
-    numberAttrs,
   };
 }

package/ui.form-input-number/configs/default.config.js

@@ -1,11 +1,11 @@
 export default /*tw*/ {
   wrapper: "flex items-center space-x-6",
   number: "flex items-center flex-col",
-  removeButton: "",
-  removeIcon: "",
+  removeButton: "{UButton}",
+  removeIcon: "{UIcon}",
   removeIconName: "remove",
-  addButton: "",
-  addIcon: "",
+  addButton: "{UButton}",
+  addIcon: "{UIcon}",
   addIconName: "add",
   value: {
     base: "font-bold select-none !leading-none",