vueless 0.0.569 → 0.0.570

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.569",
+  "version": "0.0.570",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/types.ts

@@ -46,6 +46,13 @@ import URadioGroupConfig from "./ui.form-radio-group/config.ts";
 import USwitchConfig from "./ui.form-switch/config.ts";
 import UTextareaConfig from "./ui.form-textarea/config.ts";
 import ULabelConfig from "./ui.form-label/config.ts";
+import UColorPickerConfig from "./ui.form-color-picker/config.ts";
+import UInputConfig from "./ui.form-input/config.ts";
+import UInputNumberConfig from "./ui.form-input-number/config.ts";
+import UInputRatingConfig from "./ui.form-input-rating/config.ts";
+import UInputSearchConfig from "./ui.form-input-search/config.ts";
+import UInputFileConfig from "./ui.form-input-file/config.ts";
+import UInputMoneyConfig from "./ui.form-input-money/config.ts";
 import UDataListConfig from "./ui.data-list/config.ts";
 
 import type { ComputedRef, MaybeRef, Ref, UnwrapRef } from "vue";
@@ -209,6 +216,13 @@ export interface Components {
   USwitch?: Partial<typeof USwitchConfig>;
   UTextarea?: Partial<typeof UTextareaConfig>;
   ULabel?: Partial<typeof ULabelConfig>;
+  UColorPicker?: Partial<typeof UColorPickerConfig>;
+  UInput?: Partial<typeof UInputConfig>;
+  UInputNumber?: Partial<typeof UInputNumberConfig>;
+  UInputRating?: Partial<typeof UInputRatingConfig>;
+  UInputSearch?: Partial<typeof UInputSearchConfig>;
+  UInputFile?: Partial<typeof UInputFileConfig>;
+  UInputMoney?: Partial<typeof UInputMoneyConfig>;
   UDataList?: Partial<typeof UDataListConfig>;
 }
 

package/ui.container-accordion/UAccordion.vue

@@ -9,7 +9,7 @@ import { UAccordion } from "./constants.ts";
 import defaultConfig from "./config.ts";
 import useAttrs from "./useAttrs.ts";
 
-import type { UAccordionProps } from "./types.ts";
+import type { UAccordionProps, DividerSize } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -52,7 +52,7 @@ const dividerSize = computed(() => {
     lg: "xl",
   };
 
-  return sizes[props.size];
+  return sizes[props.size] as DividerSize;
 });
 
 function onClickItem() {

package/ui.container-accordion/types.ts

@@ -2,6 +2,7 @@ import defaultConfig from "./config.ts";
 
 export type Config = Partial<typeof defaultConfig>;
 
+export type DividerSize = "md" | "lg" | "xl";
 export interface UAccordionProps {
   /**
    * Accordion title.

package/ui.container-modal/UModal.vue

@@ -16,9 +16,6 @@ import useAttrs from "./useAttrs.ts";
 import type { UModalProps } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
-const slots = useSlots();
-
-const wrapperRef = ref(null);
 
 const props = withDefaults(defineProps<UModalProps>(), {
   size: getDefault<UModalProps>(defaultConfig, UModal).size,
@@ -29,6 +26,7 @@ const props = withDefaults(defineProps<UModalProps>(), {
   noDivider: getDefault<UModalProps>(defaultConfig, UModal).noDivider,
   mobileStickBottom: getDefault<UModalProps>(defaultConfig, UModal).mobileStickBottom,
   dataTest: "",
+  config: () => ({}),
 });
 
 const emit = defineEmits([
@@ -69,6 +67,10 @@ const {
   footerRightAttrs,
 } = useAttrs(props);
 
+const slots = useSlots();
+
+const wrapperRef = ref<HTMLElement | null>(null);
+
 const isShownModal = computed({
   get: () => props.modelValue,
   set: (value) => emit("update:modelValue", value),
@@ -94,14 +96,19 @@ const isExistFooter = computed(() => {
 
 watch(() => isShownModal.value, preventOverlayFromScrolling);
 
-function preventOverlayFromScrolling(newValue) {
+function preventOverlayFromScrolling(newValue: boolean) {
   // focus wrapper to be able to close modal on esc
   setTimeout(() => wrapperRef.value?.focus(), 0);
 
   if (newValue) {
     document.body.style.overflow = "hidden";
   } else {
-    document.getElementById(`${elementId}`).style.overflow = "hidden";
+    const element = document.getElementById(`${elementId}`);
+
+    if (element) {
+      element.style.overflow = "hidden";
+    }
+
     document.body.style.overflow = "auto";
   }
 }
@@ -166,7 +173,7 @@ function closeModal() {
                         internal
                         size="xs"
                         color="gray"
-                        :name="config.defaults.backIcon"
+                        :name="config.defaults?.backIcon"
                         v-bind="backLinkIconAttrs"
                       />
                     </template>
@@ -191,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"

package/ui.container-page/UPage.vue

@@ -25,6 +25,7 @@ const props = withDefaults(defineProps<UPageProps>(), {
   gray: getDefault<UPageProps>(defaultConfig, UPage).gray,
   fixedRounding: getDefault<UPageProps>(defaultConfig, UPage).fixedRounding,
   dataTest: "",
+  config: () => ({}),
 });
 
 const { isMobileBreakpoint } = useBreakpoint();
@@ -68,11 +69,14 @@ const isShownArrowButton = computed(() => {
 });
 
 onMounted(() => {
-  const classes = props.gray
-    ? config.value.htmlBody.split(" ").filter((item) => Boolean(item))
-    : [];
-
-  document.querySelector("body").classList.add(...classes);
+  const classes =
+    props.gray && config.value?.htmlBody
+      ? config.value.htmlBody.split(" ").filter((item) => Boolean(item))
+      : "";
+
+  if (document.body) {
+    document.body.classList.add(...classes);
+  }
 });
 </script>
 
@@ -104,7 +108,7 @@ onMounted(() => {
                     internal
                     size="2xs"
                     color="gray"
-                    :name="config.defaults.backIcon"
+                    :name="config.defaults?.backIcon"
                     v-bind="backLinkIconAttrs"
                   />
                 </template>

package/ui.form-checkbox/types.ts

@@ -6,6 +6,13 @@ export type Config = Partial<typeof defaultConfig>;
 
 export type IconSize = "2xs" | "xs" | "sm";
 
+export interface UCheckboxOption {
+  value?: unknown;
+  label?: string;
+  icon?: string;
+  description?: string;
+}
+
 export interface UCheckboxProps {
   /**
    * Checkbox value.

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

@@ -79,7 +79,7 @@ function onChangeCheckedItems() {
       <slot>
         <UCheckbox
           v-for="(option, index) in options"
-          :key="option.value"
+          :key="option.id"
           :model-value="modelValue"
           :value="option.value"
           :true-value="option.trueValue"

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

@@ -9,6 +9,7 @@ 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";
 
 defineOptions({ inheritAttrs: false });
 
@@ -31,7 +32,9 @@ const emit = defineEmits([
 const index = ref(0);
 const isChecked = ref(false);
 
-const selected = computed(() => props?.options?.[index.value] || { icon: undefined });
+const selected = computed<UCheckboxOption>(() => {
+  return props.options?.[index.value] || { icon: undefined };
+});
 
 const { multiStateCheckboxAttrs } = useAttrs(props, { selected });
 

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

@@ -1,56 +1,4 @@
-<template>
-  <ULabel
-    :label="label"
-    :description="description"
-    :disabled="disabled"
-    :error="error"
-    :size="size"
-    align="topWithDesc"
-    v-bind="colorPickerLabelAttrs"
-    :data-test="dataTest"
-  >
-    <div v-bind="listAttrs">
-      <div v-bind="unselectedAttrs">
-        <URadio
-          :id="elementId"
-          :name="name"
-          :size="size"
-          color="gray"
-          :checked="selectedItem === ''"
-          :disabled="disabled"
-          v-bind="unselectedColorPickerRadioAttrs"
-          @update:model-value="onUpdateValue('')"
-        />
-
-        <label :for="elementId">
-          <UIcon
-            v-if="selectedItem === ''"
-            internal
-            :size="iconSize"
-            color="gray"
-            :name="config.defaults.unselectedIcon"
-            v-bind="unselectedIconAttrs"
-          />
-        </label>
-      </div>
-
-      <URadio
-        v-for="(color, index) in colorOptions"
-        :key="index"
-        :name="name"
-        :size="size"
-        :value="color"
-        :color="color"
-        :checked="selectedItem === color"
-        :disabled="disabled"
-        v-bind="colorPickerRadioAttrs"
-        @update:model-value="onUpdateValue(color)"
-      />
-    </div>
-  </ULabel>
-</template>
-
-<script setup>
+<script setup lang="ts">
 import { computed, useId } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
@@ -58,101 +6,21 @@ 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.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
+import { UColorPicker } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
 
-defineOptions({ inheritAttrs: false });
+import type { UColorPickerProps, IconSize } from "./types.ts";
 
-const props = defineProps({
-  /**
-   * Color picker selected value.
-   */
-  modelValue: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Color picker name.
-   */
-  name: {
-    type: String,
-    default: getDefault(defaultConfig, UColorPicker).name,
-  },
-
-  /**
-   * Color picker label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Color picker description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Error message.
-   */
-  error: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Color picker size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UColorPicker).size,
-  },
-
-  /**
-   * Color picker color list.
-   */
-  colorOptions: {
-    type: Array,
-    default: () => getDefault(defaultConfig, UColorPicker).colorOptions,
-  },
-
-  /**
-   * Set color picker disabled.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UColorPicker).disabled,
-  },
-
-  /**
-   * Unique element id.
-   */
-  id: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
+defineOptions({ inheritAttrs: false });
 
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "radio",
-  },
+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 emit = defineEmits([
@@ -189,10 +57,62 @@ const iconSize = computed(() => {
     xl: "md",
   };
 
-  return sizes[props.size];
+  return sizes[props.size] as IconSize;
 });
 
-function onUpdateValue(value) {
+function onUpdateValue(value: string) {
   selectedItem.value = value;
 }
 </script>
+
+<template>
+  <ULabel
+    :label="label"
+    :description="description"
+    :disabled="disabled"
+    :error="error"
+    :size="size"
+    align="topWithDesc"
+    v-bind="colorPickerLabelAttrs"
+    :data-test="dataTest"
+  >
+    <div v-bind="listAttrs">
+      <div v-bind="unselectedAttrs">
+        <URadio
+          :id="elementId"
+          :name="name"
+          :size="size"
+          color="gray"
+          :checked="selectedItem === ''"
+          :disabled="disabled"
+          v-bind="unselectedColorPickerRadioAttrs"
+          @update:model-value="onUpdateValue('')"
+        />
+
+        <label :for="elementId">
+          <UIcon
+            v-if="selectedItem === ''"
+            internal
+            :size="iconSize"
+            color="gray"
+            :name="config.defaults?.unselectedIcon"
+            v-bind="unselectedIconAttrs"
+          />
+        </label>
+      </div>
+
+      <URadio
+        v-for="(color, index) in colorOptions"
+        :key="index"
+        :name="name"
+        :size="size"
+        :value="color"
+        :color="color"
+        :checked="selectedItem === color"
+        :disabled="disabled"
+        v-bind="colorPickerRadioAttrs"
+        @update:model-value="onUpdateValue(color)"
+      />
+    </div>
+  </ULabel>
+</template>

package/ui.form-color-picker/storybook/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../../utils/storybook.ts";
 
-import * as stories from "./stories.js";
-import defaultConfig from "../config.js?raw"
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.form-color-picker/storybook/{stories.js → stories.ts}

@@ -8,6 +8,14 @@ import {
 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";
+
+interface UColorPickerArgs extends UColorPickerProps {
+  slotTemplate?: string;
+  enum: "size";
+}
+
 export default {
   id: "3210",
   title: "Form Inputs & Controls / Color Picker",
@@ -22,9 +30,9 @@ export default {
   parameters: {
     ...getDocsDescription(UColorPicker.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UColorPickerArgs> = (args: UColorPickerArgs) => ({
   components: { UColorPicker },
   setup() {
     const slots = getSlotNames(UColorPicker.__name);
@@ -33,17 +41,17 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UColorPicker v-bind="args" v-model="args.modelValue">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UColorPicker>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UColorPickerArgs> = (args: UColorPickerArgs, { argTypes }) => ({
   components: { UCol, UColorPicker },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `

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

@@ -0,0 +1,64 @@
+import defaultConfig from "./config.ts";
+
+import type { BrandColors } from "../types.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export type IconSize = "3xs" | "2xs" | "xs" | "sm" | "md";
+
+export interface UColorPickerProps {
+  /**
+   * Color picker selected value.
+   */
+  modelValue?: string;
+
+  /**
+   * Color picker name.
+   */
+  name?: string;
+
+  /**
+   * Color picker label.
+   */
+  label?: string;
+
+  /**
+   * Color picker description.
+   */
+  description?: string;
+
+  /**
+   * Error message.
+   */
+  error?: string;
+
+  /**
+   * Color picker size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Color picker color list.
+   */
+  colorOptions?: Array<BrandColors>;
+
+  /**
+   * Set color picker disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: Config;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

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

@@ -0,0 +1,15 @@
+import useUI from "../composables/useUI.ts";
+
+import defaultConfig from "./config.ts";
+
+import type { UseAttrs } from "../types.ts";
+import type { UColorPickerProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UColorPickerProps): UseAttrs<Config> {
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
+
+  return {
+    config,
+    ...getKeysAttrs(),
+  };
+}