vueless 0.0.579 → 0.0.580

package/ui.form-calendar/types.ts

@@ -1,5 +1,6 @@
 import defaultConfig from "./config.ts";
 
+import type { ComponentConfig } from "../types.ts";
 import type { DateLocale } from "./utilFormatting.ts";
 
 export type RangeDate =
@@ -9,13 +10,13 @@ export type RangeDate =
 export type DateValue = Date | string | RangeDate | null;
 
 export type Locale = typeof defaultConfig.i18n;
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
 export function isRangeDate(value: Date | string | RangeDate | null): value is RangeDate {
-  return !(value instanceof Date || typeof value === "string") && value !== null;
+  return typeof value === "object" && value !== null && "to" in value && "from" in value;
 }
 
-export interface UCalendarProps<TModelValue> {
+export interface UCalendarProps<TModelValue extends DateValue> {
   /**
    * Calendar value (JavaScript Date object or string formatted in given `dateFormat` or object when `range` enabled).
    */
@@ -74,7 +75,7 @@ export interface UCalendarProps<TModelValue> {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.
@@ -88,9 +89,9 @@ export interface UCalendarViewProps {
   activeDate: Date | null;
   activeMonth: Date | null;
   locale: DateLocale;
-  dateFormat: string | undefined;
+  dateFormat?: string;
   range: boolean;
-  maxDate: Date | string | undefined;
-  minDate: Date | string | undefined;
+  maxDate?: Date | string;
+  minDate?: Date | string;
   config: Config;
 }

package/ui.form-checkbox/UCheckbox.vue

@@ -2,17 +2,17 @@
 import { inject, ref, onMounted, computed, watchEffect, toValue, useId } from "vue";
 import { isEqual } from "lodash-es";
 
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+
 import UIcon from "../ui.image-icon/UIcon.vue";
 import ULabel from "../ui.form-label/ULabel.vue";
 
-import { getDefault } from "../utils/ui.ts";
-
 import defaultConfig from "./config.ts";
 import { UCheckbox } from "./constants.ts";
-import useAttrs from "./useAttrs.ts";
 
 import type { UnknownObject } from "../types.ts";
-import type { UCheckboxProps, IconSize } from "./types.ts";
+import type { Props, IconSize, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -25,17 +25,13 @@ const setCheckboxGroupCheckedItems = inject<((value: UnknownObject[]) => void) |
 const getCheckboxGroupColor = inject("getCheckboxGroupColor", null);
 const getCheckboxSize = inject("getCheckboxSize", null);
 
-const props = withDefaults(defineProps<UCheckboxProps>(), {
-  labelAlign: getDefault<UCheckboxProps>(defaultConfig, UCheckbox).labelAlign,
-  color: getDefault<UCheckboxProps>(defaultConfig, UCheckbox).color,
-  size: getDefault<UCheckboxProps>(defaultConfig, UCheckbox).size,
-  disabled: getDefault<UCheckboxProps>(defaultConfig, UCheckbox).disabled,
-  partial: getDefault<UCheckboxProps>(defaultConfig, UCheckbox).partial,
-  name: "",
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UCheckbox),
+  modelValue: false,
   value: "",
   trueValue: true,
   falseValue: false,
-  dataTest: "",
+  label: "",
 });
 
 const emit = defineEmits([
@@ -58,14 +54,6 @@ const checkboxColor = ref(props.color);
 
 const elementId = props.id || useId();
 
-const { config, checkboxAttrs, iconWrapperAttrs, checkboxLabelAttrs, checkedIconAttrs } = useAttrs(
-  props,
-  {
-    checkboxColor,
-    checkboxSize,
-  },
-);
-
 const iconSize = computed(() => {
   const sizes = {
     sm: "2xs",
@@ -129,6 +117,20 @@ function onChange() {
   emit("update:modelValue", newModelValue);
   emit("input", newModelValue);
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const mutatedProps = computed(() => ({
+  color: checkboxColor.value,
+  size: checkboxSize.value,
+  label: Boolean(props.label),
+  error: Boolean(props.error),
+}));
+
+const { config, checkboxAttrs, iconWrapperAttrs, checkboxLabelAttrs, checkedIconAttrs } =
+  useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
@@ -160,7 +162,7 @@ function onChange() {
     <label v-if="isChecked" v-bind="iconWrapperAttrs" :for="elementId">
       <UIcon
         internal
-        :name="partial ? config?.defaults?.partiallyCheckedIcon : config?.defaults?.checkedIcon"
+        :name="partial ? config.defaults.partiallyCheckedIcon : config.defaults.checkedIcon"
         :size="iconSize"
         color="white"
         v-bind="checkedIconAttrs"

package/ui.form-checkbox/storybook/stories.ts

@@ -11,9 +11,9 @@ import UBadge from "../../ui.text-badge/UBadge.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UCheckboxProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UCheckboxArgs extends UCheckboxProps {
+interface UCheckboxArgs extends Props {
   slotTemplate?: string;
   enum: "size";
 }

package/ui.form-checkbox/types.ts

@@ -1,19 +1,21 @@
 import defaultConfig from "./config.ts";
 
-import type { UnknownObject, UnknownArray } from "../types.ts";
+import type { ComponentConfig, UnknownObject, UnknownArray } from "../types.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
 export type IconSize = "2xs" | "xs" | "sm";
 
 export interface UCheckboxOption {
-  value?: unknown;
+  value?: string | number | boolean | UnknownObject | UnknownArray;
+  falseValue?: string | number | boolean | UnknownObject | UnknownArray;
+  trueValue?: string | number | boolean | UnknownObject | UnknownArray;
   label?: string;
   icon?: string;
   description?: string;
 }
 
-export interface UCheckboxProps {
+export interface Props {
   /**
    * Checkbox value.
    */
@@ -107,7 +109,7 @@ export interface UCheckboxProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

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

@@ -2,26 +2,25 @@
 import { provide, ref, watch } from "vue";
 import { isEqual } from "lodash-es";
 
-import { getDefault } from "../utils/ui.ts";
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
 
 import ULabel from "../ui.form-label/ULabel.vue";
 import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
 
 import { UCheckboxGroup } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 
 import type { UnknownObject } from "../types.ts";
-import type { UCheckboxGroupProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UCheckboxGroupProps>(), {
-  size: getDefault<UCheckboxGroupProps>(defaultConfig, UCheckboxGroup).size,
-  color: getDefault<UCheckboxGroupProps>(defaultConfig, UCheckboxGroup).color,
-  disabled: getDefault<UCheckboxGroupProps>(defaultConfig, UCheckboxGroup).disabled,
-  name: "",
-  dataTest: "",
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UCheckboxGroup),
+  modelValue: () => [],
+  options: () => [],
+  label: "",
 });
 
 const emit = defineEmits([
@@ -32,9 +31,7 @@ const emit = defineEmits([
   "update:modelValue",
 ]);
 
-const checkedItems = ref<UnknownObject[]>([]);
-
-const { groupLabelAttrs, groupCheckboxAttrs, listAttrs } = useAttrs(props);
+const checkedItems = ref([] as UnknownObject[]);
 
 provide<(value: UnknownObject[]) => void>(
   "setCheckboxGroupCheckedItems",
@@ -52,7 +49,7 @@ watch(
   () => props?.modelValue?.length,
   (newValue, oldValue) => {
     if (!isEqual(newValue, oldValue)) {
-      checkedItems.value = props.modelValue || [];
+      checkedItems.value = props.modelValue;
     }
   },
   { immediate: true },
@@ -61,6 +58,12 @@ watch(
 function onChangeCheckedItems() {
   emit("update:modelValue", checkedItems.value);
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { groupLabelAttrs, groupCheckboxAttrs, listAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -79,7 +82,7 @@ function onChangeCheckedItems() {
       <slot>
         <UCheckbox
           v-for="(option, index) in options"
-          :key="option.id"
+          :key="index"
           :model-value="modelValue"
           :value="option.value"
           :true-value="option.trueValue"

package/ui.form-checkbox-group/storybook/stories.ts

@@ -12,10 +12,10 @@ import UCol from "../../ui.container-col/UCol.vue";
 import URow from "../../ui.container-row/URow.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UCheckboxGroupProps } from "../types.ts";
+import type { Props } from "../types.ts";
 import type { UnknownObject, UnknownArray } from "../../types.ts";
 
-interface UCheckboxGroupArgs extends UCheckboxGroupProps {
+interface UCheckboxGroupArgs extends Props {
   slotTemplate?: string;
   enum: "size" | "color";
   value?: boolean | string | number | UnknownArray | UnknownObject;

package/ui.form-checkbox-group/types.ts

@@ -1,11 +1,11 @@
 import defaultConfig from "./config.ts";
 
-import type { UnknownObject } from "../types.ts";
-import type { UCheckboxProps } from "../ui.form-checkbox/types.ts";
+import type { UnknownObject, ComponentConfig } from "../types.ts";
+import type { UCheckboxOption } from "../ui.form-checkbox/types.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
-export interface UCheckboxGroupProps {
+export interface Props {
   /**
    * Checkbox group value.
    */
@@ -14,7 +14,7 @@ export interface UCheckboxGroupProps {
   /**
    * Checkbox group options.
    */
-  options?: UCheckboxProps[];
+  options?: UCheckboxOption[];
 
   /**
    * Checkbox group label.
@@ -74,7 +74,7 @@ export interface UCheckboxGroupProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

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

@@ -1,24 +1,25 @@
 <script setup lang="ts">
 import { computed, ref, watchEffect } from "vue";
+import { cloneDeep } from "../utils/helper.ts";
+
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
 
-import { getDefault } from "../utils/ui.ts";
 import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
 
 import defaultConfig from "./config.ts";
 import { UCheckboxMultiState } from "./constants.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UCheckboxMultiStateProps } from "./types.ts";
-import type { UCheckboxOption } from "../ui.form-checkbox/types.ts";
+import type { Props, Config } from "./types.ts";
+import type { UCheckboxOption, Config as UCheckboxConfig } from "../ui.form-checkbox/types.ts";
+import type { ComponentConfig } from "../types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UCheckboxMultiStateProps>(), {
-  size: getDefault<UCheckboxMultiStateProps>(defaultConfig, UCheckboxMultiState).size,
-  color: getDefault<UCheckboxMultiStateProps>(defaultConfig, UCheckboxMultiState).color,
-  placement: getDefault<UCheckboxMultiStateProps>(defaultConfig, UCheckboxMultiState).placement,
-  disabled: getDefault<UCheckboxMultiStateProps>(defaultConfig, UCheckboxMultiState).disabled,
-  dataTest: "",
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UCheckboxMultiState),
+  modelValue: false,
+  options: () => [],
 });
 
 const emit = defineEmits([
@@ -33,11 +34,9 @@ const index = ref(0);
 const isChecked = ref(false);
 
 const selected = computed<UCheckboxOption>(() => {
-  return props.options?.[index.value] || { icon: undefined };
+  return props.options[index.value] || { icon: undefined };
 });
 
-const { multiStateCheckboxAttrs } = useAttrs(props, { selected });
-
 watchEffect(setIndex);
 
 function setIndex() {
@@ -51,7 +50,7 @@ function setIndex() {
 }
 
 function setChecked() {
-  setTimeout(() => (isChecked.value = !!props?.options?.[index.value].icon), 0);
+  setTimeout(() => (isChecked.value = !!props?.options[index.value].icon), 0);
 }
 
 function onClickCheckbox() {
@@ -62,6 +61,26 @@ function onClickCheckbox() {
 
   emit("update:modelValue", selected?.value?.value);
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { multiStateCheckboxAttrs: checkboxAttrs } = useUI<Config>(defaultConfig);
+
+const multiStateCheckboxAttrs = computed(() => {
+  const clonedCheckboxAttrs = cloneDeep(checkboxAttrs.value) as {
+    config: ComponentConfig<UCheckboxConfig>;
+  };
+
+  if (selected.value.icon) {
+    clonedCheckboxAttrs.config.defaults = clonedCheckboxAttrs.config.defaults || {};
+
+    clonedCheckboxAttrs.config.defaults.checkedIcon = selected.value.icon;
+  }
+
+  return clonedCheckboxAttrs;
+});
 </script>
 
 <template>

package/ui.form-checkbox-multi-state/storybook/stories.ts

@@ -9,9 +9,9 @@ import UCheckboxMultiState from "../../ui.form-checkbox-multi-state/UCheckboxMul
 import URow from "../../ui.container-row/URow.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UCheckboxMultiStateProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UCheckboxMultiStateArgs extends UCheckboxMultiStateProps {
+interface UCheckboxMultiStateArgs extends Props {
   slotTemplate?: string;
   enum: "size";
 }

package/ui.form-checkbox-multi-state/types.ts

@@ -1,10 +1,10 @@
 import defaultConfig from "./config.ts";
 
-import type { UnknownObject } from "../types.ts";
+import type { UnknownObject, ComponentConfig } from "../types.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
-export interface UCheckboxMultiStateProps {
+export interface Props {
   /**
    * Checkbox value.
    */
@@ -63,7 +63,7 @@ export interface UCheckboxMultiStateProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.form-color-picker/UColorPicker.vue

@@ -1,26 +1,24 @@
 <script setup lang="ts">
 import { computed, useId } from "vue";
 
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+
 import UIcon from "../ui.image-icon/UIcon.vue";
 import URadio from "../ui.form-radio/URadio.vue";
 import ULabel from "../ui.form-label/ULabel.vue";
-import { getDefault } from "../utils/ui.ts";
 
 import { UColorPicker } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UColorPickerProps, IconSize } from "./types.ts";
+import type { Props, IconSize, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UColorPickerProps>(), {
-  name: getDefault<UColorPickerProps>(defaultConfig, UColorPicker).name,
-  size: getDefault<UColorPickerProps>(defaultConfig, UColorPicker).size,
-  colorOptions: getDefault<UColorPickerProps>(defaultConfig, UColorPicker).colorOptions,
-  disabled: getDefault<UColorPickerProps>(defaultConfig, UColorPicker).disabled,
-  dataTest: "",
-  config: () => ({}),
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UColorPicker),
+  modelValue: "",
+  label: "",
 });
 
 const emit = defineEmits([
@@ -33,16 +31,6 @@ const emit = defineEmits([
 
 const elementId = props.id || useId();
 
-const {
-  config,
-  colorPickerLabelAttrs,
-  listAttrs,
-  colorPickerRadioAttrs,
-  unselectedColorPickerRadioAttrs,
-  unselectedIconAttrs,
-  unselectedAttrs,
-} = useAttrs(props);
-
 const selectedItem = computed({
   get: () => props.modelValue,
   set: (value) => emit("update:modelValue", value),
@@ -63,6 +51,20 @@ const iconSize = computed(() => {
 function onUpdateValue(value: string) {
   selectedItem.value = value;
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const {
+  config,
+  colorPickerLabelAttrs,
+  listAttrs,
+  colorPickerRadioAttrs,
+  unselectedColorPickerRadioAttrs,
+  unselectedIconAttrs,
+  unselectedAttrs,
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -95,7 +97,7 @@ function onUpdateValue(value: string) {
             internal
             :size="iconSize"
             color="gray"
-            :name="config.defaults?.unselectedIcon"
+            :name="config.defaults.unselectedIcon"
             v-bind="unselectedIconAttrs"
           />
         </label>

package/ui.form-color-picker/storybook/stories.ts

@@ -9,9 +9,9 @@ import UColorPicker from "../../ui.form-color-picker/UColorPicker.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UColorPickerProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UColorPickerArgs extends UColorPickerProps {
+interface UColorPickerArgs extends Props {
   slotTemplate?: string;
   enum: "size";
 }

package/ui.form-color-picker/types.ts

@@ -1,12 +1,12 @@
 import defaultConfig from "./config.ts";
 
-import type { BrandColors } from "../types.ts";
+import type { BrandColors, ComponentConfig } from "../types.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
 export type IconSize = "3xs" | "2xs" | "xs" | "sm" | "md";
 
-export interface UColorPickerProps {
+export interface Props {
   /**
    * Color picker selected value.
    */
@@ -40,7 +40,7 @@ export interface UColorPickerProps {
   /**
    * Color picker color list.
    */
-  colorOptions?: Array<BrandColors>;
+  colorOptions?: BrandColors;
 
   /**
    * Set color picker disabled.
@@ -55,7 +55,7 @@ export interface UColorPickerProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.