vueless 0.0.579 → 0.0.580

package/ui.container-modal/UModal.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, useSlots, watch, ref, useId } from "vue";
 
-import { getDefault } from "../utils/ui.ts";
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
 import { hasSlotContent } from "../utils/helper.ts";
 
 import ULink from "../ui.button-link/ULink.vue";
@@ -11,22 +12,17 @@ import UDivider from "../ui.container-divider/UDivider.vue";
 
 import defaultConfig from "./config.ts";
 import { UModal } from "./constants.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UModalProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
+import type { Transition } from "../types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UModalProps>(), {
-  size: getDefault<UModalProps>(defaultConfig, UModal).size,
-  closeOnCross: getDefault<UModalProps>(defaultConfig, UModal).closeOnCross,
-  closeOnOverlay: getDefault<UModalProps>(defaultConfig, UModal).closeOnOverlay,
-  closeOnEsc: getDefault<UModalProps>(defaultConfig, UModal).closeOnEsc,
-  inner: getDefault<UModalProps>(defaultConfig, UModal).inner,
-  noDivider: getDefault<UModalProps>(defaultConfig, UModal).noDivider,
-  mobileStickBottom: getDefault<UModalProps>(defaultConfig, UModal).mobileStickBottom,
-  dataTest: "",
-  config: () => ({}),
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UModal),
+  modelValue: false,
+  backTo: "",
+  backLabel: "",
 });
 
 const emit = defineEmits([
@@ -44,29 +40,6 @@ const emit = defineEmits([
 
 const elementId = props.id || useId();
 
-const {
-  config,
-  modalAttrs,
-  titleAttrs,
-  backLinkAttrs,
-  backLinkIconAttrs,
-  closeIconAttrs,
-  dividerAttrs,
-  dividerSpacingAttrs,
-  overlayAttrs,
-  wrapperAttrs,
-  innerWrapperAttrs,
-  headerAttrs,
-  headerLeftAttrs,
-  headerLeftFallbackAttrs,
-  descriptionAttrs,
-  headerRightAttrs,
-  bodyAttrs,
-  footerLeftAttrs,
-  footerAttrs,
-  footerRightAttrs,
-} = useAttrs(props);
-
 const slots = useSlots();
 
 const wrapperRef = ref<HTMLElement | null>(null);
@@ -132,14 +105,41 @@ function onClickCloseModal() {
 function closeModal() {
   isShownModal.value = false;
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const {
+  config,
+  modalAttrs,
+  titleAttrs,
+  backLinkAttrs,
+  backLinkIconAttrs,
+  closeIconAttrs,
+  dividerAttrs,
+  dividerSpacingAttrs,
+  overlayAttrs,
+  wrapperAttrs,
+  innerWrapperAttrs,
+  headerAttrs,
+  headerLeftAttrs,
+  headerLeftFallbackAttrs,
+  descriptionAttrs,
+  headerRightAttrs,
+  bodyAttrs,
+  footerLeftAttrs,
+  footerAttrs,
+  footerRightAttrs,
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>
-  <transition v-bind="config.overlayTransition">
+  <Transition v-bind="config.overlayTransition as Transition">
     <div v-if="isShownModal" v-bind="overlayAttrs" />
-  </transition>
+  </Transition>
 
-  <transition v-bind="config.wrapperTransition">
+  <Transition v-bind="config.wrapperTransition as Transition">
     <div
       v-if="isShownModal"
       :id="elementId"
@@ -173,7 +173,7 @@ function closeModal() {
                         internal
                         size="xs"
                         color="gray"
-                        :name="config.defaults?.backIcon"
+                        :name="config.defaults.backIcon"
                         v-bind="backLinkIconAttrs"
                       />
                     </template>
@@ -198,12 +198,12 @@ function closeModal() {
                 @slot Use it to add something instead of the close button.
                 @binding {string} icon-name
               -->
-              <slot name="close-button" :icon-name="config.defaults?.closeIcon">
+              <slot name="close-button" :icon-name="config.defaults.closeIcon">
                 <UIcon
                   internal
                   interactive
                   size="sm"
-                  :name="config.defaults?.closeIcon"
+                  :name="config.defaults.closeIcon"
                   v-bind="closeIconAttrs"
                   :data-test="`${dataTest}-close`"
                   @click="onClickCloseModal"
@@ -237,5 +237,5 @@ function closeModal() {
         </div>
       </div>
     </div>
-  </transition>
+  </Transition>
 </template>

package/ui.container-modal/storybook/stories.ts

@@ -14,9 +14,9 @@ import UTextarea from "../../ui.form-textarea/UTextarea.vue";
 import URow from "../../ui.container-row/URow.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UModalProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UModalArgs extends UModalProps {
+interface UModalArgs extends Props {
   slotTemplate?: string;
   enum: "size";
 }
@@ -118,7 +118,6 @@ BackLink.args = {
   backLabel: "back",
   backTo: {
     path: "/",
-    query: {},
   },
 };
 

package/ui.container-modal/types.ts

@@ -1,10 +1,12 @@
 import defaultConfig from "./config.ts";
 
+import type { ComponentConfig } from "../types.ts";
+
 import type { RouteLocationRaw } from "vue-router";
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
-export interface UModalProps {
+export interface Props {
   /**
    * Modal state (shown / hidden).
    */
@@ -73,7 +75,7 @@ export interface UModalProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.container-modal-confirm/UModalConfirm.vue

@@ -2,7 +2,8 @@
 import { computed } from "vue";
 import { merge } from "lodash-es";
 
-import { getDefault } from "../utils/ui.ts";
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
 import { hasSlotContent } from "../utils/helper.ts";
 
 import UButton from "../ui.button/UButton.vue";
@@ -10,24 +11,16 @@ import UModal from "../ui.container-modal/UModal.vue";
 
 import defaultConfig from "./config.ts";
 import { UModalConfirm } from "./constants.ts";
-import useAttrs from "./useAttrs.ts";
 import { useLocale } from "../composables/useLocale.ts";
 
-import type { UModalConfirmProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UModalConfirmProps>(), {
-  confirmColor: getDefault<UModalConfirmProps>(defaultConfig, UModalConfirm).confirmColor,
-  confirmDisabled: getDefault<UModalConfirmProps>(defaultConfig, UModalConfirm).confirmDisabled,
-  cancelHidden: getDefault<UModalConfirmProps>(defaultConfig, UModalConfirm).cancelHidden,
-  size: getDefault<UModalConfirmProps>(defaultConfig, UModalConfirm).size,
-  closeOnCross: getDefault<UModalConfirmProps>(defaultConfig, UModalConfirm).closeOnCross,
-  closeOnOverlay: getDefault<UModalConfirmProps>(defaultConfig, UModalConfirm).closeOnOverlay,
-  closeOnEsc: getDefault<UModalConfirmProps>(defaultConfig, UModalConfirm).closeOnEsc,
-  inner: getDefault<UModalConfirmProps>(defaultConfig, UModalConfirm).inner,
-  mobileStickBottom: getDefault<UModalConfirmProps>(defaultConfig, UModalConfirm).mobileStickBottom,
-  dataTest: "",
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UModalConfirm),
+  modelValue: false,
+  confirmLabel: "",
 });
 
 const emit = defineEmits([
@@ -50,9 +43,6 @@ const emit = defineEmits([
 
 const { tm } = useLocale();
 
-const { footerLeftFallbackAttrs, confirmModalAttrs, confirmButtonAttrs, cancelButtonAttrs } =
-  useAttrs(props);
-
 const isShownModal = computed({
   get: () => props.modelValue,
   set: (value) => emit("update:modelValue", value),
@@ -74,6 +64,13 @@ function emitConfirmAction() {
   emit("confirm");
   closeModal();
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { footerLeftFallbackAttrs, confirmModalAttrs, confirmButtonAttrs, cancelButtonAttrs } =
+  useUI<Config>(defaultConfig);
 </script>
 
 <template>

package/ui.container-modal-confirm/storybook/stories.ts

@@ -12,9 +12,11 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UModalConfirmProps } from "../types.ts";
+import type { Props } from "../types.ts";
+import type { BrandColors } from "../../types.ts";
 
-interface UModalConfirmArgs extends UModalConfirmProps {
+interface UModalConfirmArgs extends Props {
+  width: string;
   slotTemplate?: string;
   enum: "size" | "confirmColor";
 }
@@ -74,9 +76,9 @@ const EnumVariantTemplate: StoryFn<UModalConfirmArgs> = (
 ) => ({
   components: { UModalConfirm, UButton, URow },
   setup() {
-    function onClick(value) {
-      argTypes[args.enum].name === "confirmColor"
-        ? (args.confirmColor = value)
+    function onClick(value: string) {
+      argTypes?.[args.enum]?.name === "confirmColor"
+        ? (args.confirmColor = value as BrandColors)
         : (args.width = value);
 
       args.modelValue = true;
@@ -85,7 +87,7 @@ const EnumVariantTemplate: StoryFn<UModalConfirmArgs> = (
     return {
       args,
       onClick,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `

package/ui.container-modal-confirm/types.ts

@@ -1,8 +1,10 @@
 import defaultConfig from "./config.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+import type { ComponentConfig } from "../types.ts";
 
-export interface UModalConfirmProps {
+export type Config = typeof defaultConfig;
+
+export interface Props {
   /**
    * Modal state (shown / hidden).
    */
@@ -97,7 +99,7 @@ export interface UModalConfirmProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.container-page/UPage.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, useSlots, onMounted } from "vue";
 
-import { getDefault } from "../utils/ui.ts";
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
 import { hasSlotContent } from "../utils/helper.ts";
 import useBreakpoint from "../composables/useBreakpoint.ts";
 
@@ -11,45 +12,21 @@ import UHeader from "../ui.text-header/UHeader.vue";
 
 import defaultConfig from "./config.ts";
 import { UPage } from "./constants.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UPageProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 const slots = useSlots();
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UPageProps>(), {
-  size: getDefault<UPageProps>(defaultConfig, UPage).size,
-  titleSize: getDefault<UPageProps>(defaultConfig, UPage).titleSize,
-  gray: getDefault<UPageProps>(defaultConfig, UPage).gray,
-  fixedRounding: getDefault<UPageProps>(defaultConfig, UPage).fixedRounding,
-  dataTest: "",
-  config: () => ({}),
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UPage),
+  backTo: "",
+  backLabel: "",
 });
 
 const { isMobileBreakpoint } = useBreakpoint();
 
-const {
-  config,
-  wrapperAttrs,
-  pageAttrs,
-  rightRoundingAttrs,
-  titleAttrs,
-  backLinkAttrs,
-  backLinkIconAttrs,
-  headerAttrs,
-  headerLeftFallbackAttrs,
-  descriptionAttrs,
-  headerLeftAttrs,
-  headerRightAttrs,
-  bodyAttrs,
-  footerAttrs,
-  footerLeftAttrs,
-  footerRightAttrs,
-  rightRoundingWrapperAttrs,
-} = useAttrs(props);
-
 const isExistHeader = computed(() => {
   return (
     props.title ||
@@ -78,6 +55,30 @@ onMounted(() => {
     document.body.classList.add(...classes);
   }
 });
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const {
+  config,
+  wrapperAttrs,
+  pageAttrs,
+  rightRoundingAttrs,
+  titleAttrs,
+  backLinkAttrs,
+  backLinkIconAttrs,
+  headerAttrs,
+  headerLeftFallbackAttrs,
+  descriptionAttrs,
+  headerLeftAttrs,
+  headerRightAttrs,
+  bodyAttrs,
+  footerAttrs,
+  footerLeftAttrs,
+  footerRightAttrs,
+  rightRoundingWrapperAttrs,
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -108,7 +109,7 @@ onMounted(() => {
                     internal
                     size="2xs"
                     color="gray"
-                    :name="config.defaults?.backIcon"
+                    :name="config.defaults.backIcon"
                     v-bind="backLinkIconAttrs"
                   />
                 </template>

package/ui.container-page/storybook/stories.ts

@@ -15,9 +15,9 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import UHeader from "../../ui.text-header/UHeader.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UPageProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UPageArgs extends UPageProps {
+interface UPageArgs extends Props {
   slotTemplate?: string;
 }
 

package/ui.container-page/types.ts

@@ -1,10 +1,11 @@
 import defaultConfig from "./config.ts";
 
 import type { RouteLocationRaw } from "vue-router";
+import type { ComponentConfig } from "../types.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
-export interface UPageProps {
+export interface Props {
   /**
    * Page size (width).
    */
@@ -48,7 +49,7 @@ export interface UPageProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.container-row/URow.vue

@@ -1,26 +1,23 @@
 <script setup lang="ts">
-import { getDefault } from "../utils/ui.ts";
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
 
 import { URow } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { URowProps } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<URowProps>(), {
-  gap: getDefault<URowProps>(defaultConfig, URow).gap,
-  align: getDefault<URowProps>(defaultConfig, URow).align,
-  content: getDefault<URowProps>(defaultConfig, URow).content,
-  justify: getDefault<URowProps>(defaultConfig, URow).justify,
-  reverse: getDefault<URowProps>(defaultConfig, URow).reverse,
-  wrap: getDefault<URowProps>(defaultConfig, URow).wrap,
-  noMobile: getDefault<URowProps>(defaultConfig, URow).noMobile,
-  dataTest: "",
+withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, URow),
 });
 
-const { wrapperAttrs } = useAttrs(props);
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { wrapperAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>

package/ui.container-row/storybook/stories.ts

@@ -11,9 +11,9 @@ import UCol from "../../ui.container-col/UCol.vue";
 import UButton from "../../ui.button/UButton.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { URowProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface URowArgs extends URowProps {
+interface URowArgs extends Props {
   slotTemplate?: string;
   enum: "gap" | "align";
 }

package/ui.container-row/types.ts

@@ -1,8 +1,10 @@
 import defaultConfig from "./config.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+import type { ComponentConfig } from "../types.ts";
 
-export interface URowProps {
+export type Config = typeof defaultConfig;
+
+export interface Props {
   /**
    * The distance between nested elements.
    */
@@ -50,7 +52,7 @@ export interface URowProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.