vueless 0.0.535 → 0.0.536

package/package.json

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

package/types.ts

@@ -41,6 +41,9 @@ import UTabConfig from "./ui.navigation-tab/config.ts";
 import UTabsConfig from "./ui.navigation-tabs/config.ts";
 import UAvatarConfig from "./ui.image-avatar/config.ts";
 import UIconConfig from "./ui.image-icon/config.ts";
+import UCheckboxConfig from "./ui.form-checkbox/config.ts";
+import UCheckboxGroupConfig from "./ui.form-checkbox-group/config.ts";
+import UCheckboxMultiStateConfig from "./ui.form-checkbox-multi-state/config.ts";
 
 import type { ComputedRef, MaybeRef, Ref } from "vue";
 import type { Props } from "tippy.js";
@@ -152,6 +155,7 @@ export interface Config extends ThemeConfig {
 }
 
 export type UnknownObject = Record<string, unknown>;
+export type UnknownArray = Array<unknown>;
 export type ComponentNames = keyof Components; // keys union
 export type Strategies = "merge" | "replace" | "override";
 export type Gray = "gray";
@@ -217,6 +221,9 @@ export interface Components {
   UTabs?: Partial<typeof UTabsConfig>;
   UAvatar?: Partial<typeof UAvatarConfig>;
   UIcon?: Partial<typeof UIconConfig>;
+  UCheckbox?: Partial<typeof UCheckboxConfig>;
+  UCheckboxGroup?: Partial<typeof UCheckboxGroupConfig>;
+  UCheckboxMultiState?: Partial<typeof UCheckboxMultiStateConfig>;
 }
 
 export interface Directives {

package/ui.form-checkbox/UCheckbox.vue

@@ -1,47 +1,4 @@
-<template>
-  <ULabel
-    :for="elementId"
-    :label="label"
-    :error="error"
-    :size="checkboxSize"
-    :align="labelAlign"
-    :disabled="disabled"
-    :description="description"
-    v-bind="checkboxLabelAttrs"
-    :data-test="`${dataTest}-label`"
-  >
-    <input
-      :id="elementId"
-      type="checkbox"
-      :value="checkboxValue"
-      :true-value="trueValue"
-      :false-value="falseValue"
-      :name="checkboxName"
-      :checked="isChecked"
-      :disabled="disabled"
-      v-bind="checkboxAttrs"
-      :data-test="dataTest"
-      @change="onChange"
-    />
-
-    <label v-if="isChecked" v-bind="iconWrapperAttrs" :for="elementId">
-      <UIcon
-        internal
-        :name="partial ? config.defaults.partiallyCheckedIcon : config.defaults.checkedIcon"
-        :size="iconSize"
-        color="white"
-        v-bind="checkedIconAttrs"
-      />
-    </label>
-
-    <template #bottom>
-      <!-- @slot Use it to add something below the checkbox. -->
-      <slot name="bottom" />
-    </template>
-  </ULabel>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { inject, ref, onMounted, computed, watchEffect, toValue, useId } from "vue";
 import { isEqual } from "lodash-es";
 
@@ -50,149 +7,35 @@ import ULabel from "../ui.form-label/ULabel.vue";
 
 import { getDefault } from "../utils/ui.ts";
 
-import defaultConfig from "./config.js";
-import { UCheckbox } from "./constants.js";
-import useAttrs from "./useAttrs.js";
+import defaultConfig from "./config.ts";
+import { UCheckbox } from "./constants.ts";
+import useAttrs from "./useAttrs.ts";
+
+import type { UnknownObject } from "../types.ts";
+import type { UCheckboxProps } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
 const getCheckboxGroupName = inject("getCheckboxGroupName", null);
 const getCheckboxGroupCheckedItems = inject("getCheckboxGroupCheckedItems", null);
-const setCheckboxGroupCheckedItems = inject("setCheckboxGroupCheckedItems", null);
+const setCheckboxGroupCheckedItems = inject<((value: UnknownObject[]) => void) | null>(
+  "setCheckboxGroupCheckedItems",
+  null,
+);
 const getCheckboxGroupColor = inject("getCheckboxGroupColor", null);
 const getCheckboxSize = inject("getCheckboxSize", null);
 
-const props = defineProps({
-  /**
-   * Checkbox value.
-   */
-  modelValue: {
-    type: [Boolean, String, Number, Array, Object],
-    default: false,
-  },
-
-  /**
-   * Native value attribute.
-   */
-  value: {
-    type: [Boolean, String, Number, Array, Object],
-    default: "",
-  },
-
-  /**
-   * Own value for checkbox checked state.
-   */
-  trueValue: {
-    type: [Boolean, String, Number, Array, Object],
-    default: true,
-  },
-
-  /**
-   * Own value for checkbox unchecked state.
-   */
-  falseValue: {
-    type: [Boolean, String, Number, Array, Object],
-    default: false,
-  },
-
-  /**
-   * Checkbox name.
-   */
-  name: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Checkbox label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Checkbox label description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Error message.
-   */
-  error: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Label placement.
-   * @values left, right
-   */
-  labelAlign: {
-    type: String,
-    default: getDefault(defaultConfig, UCheckbox).labelAlign,
-  },
-
-  /**
-   * Checkbox color.
-   * @values brand, grayscale, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
-   */
-  color: {
-    type: String,
-    default: getDefault(defaultConfig, UCheckbox).color,
-  },
-
-  /**
-   * Checkbox size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UCheckbox).size,
-  },
-
-  /**
-   * Make checkbox disabled.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UCheckbox).disabled,
-  },
-
-  /**
-   * Make checkbox partially checked (change the checked tick to a minus).
-   */
-  partial: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UCheckbox).partial,
-  },
-
-  /**
-   * Unique element id.
-   */
-  id: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+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: "",
+  value: "",
+  trueValue: true,
+  falseValue: false,
+  dataTest: "",
 });
 
 const emit = defineEmits([
@@ -237,9 +80,13 @@ const isBinary = computed(() => !Array.isArray(props.modelValue));
 const isCheckboxInGroup = computed(() => Boolean(toValue(getCheckboxGroupName)));
 
 const isChecked = computed(() => {
-  return isBinary.value && !isCheckboxInGroup.value
-    ? isEqual(props.modelValue, props.trueValue)
-    : currentValue.value.findIndex((item) => isEqual(item, checkboxValue.value)) !== -1;
+  if (isBinary.value && !isCheckboxInGroup.value) {
+    return isEqual(props.modelValue, props.trueValue);
+  } else if (Array.isArray(currentValue.value)) {
+    return currentValue.value.findIndex((item) => isEqual(item, checkboxValue.value)) !== -1;
+  } else {
+    return false;
+  }
 });
 
 const checkboxValue = computed(() => {
@@ -251,7 +98,8 @@ const currentValue = computed(() => {
 });
 
 onMounted(() => {
-  checkboxName.value = isCheckboxInGroup.value ? toValue(getCheckboxGroupName) : props.name;
+  checkboxName.value =
+    isCheckboxInGroup.value && getCheckboxGroupName ? toValue(getCheckboxGroupName) : props.name;
 });
 
 watchEffect(() => (checkboxColor.value = toValue(getCheckboxGroupColor) || props.color));
@@ -265,16 +113,63 @@ function onChange() {
   }
 
   if (!isBinary.value || isCheckboxInGroup.value) {
-    newModelValue = !isChecked.value
-      ? [...currentValue.value, checkboxValue.value]
-      : currentValue.value.filter((item) => !isEqual(checkboxValue.value, item));
+    if (Array.isArray(currentValue.value)) {
+      newModelValue = !isChecked.value
+        ? [...currentValue.value, checkboxValue.value]
+        : currentValue.value.filter((item) => !isEqual(checkboxValue.value, item));
+    } else {
+      newModelValue = isChecked.value ? [checkboxValue.value] : [];
+    }
   }
 
   if (isCheckboxInGroup.value && setCheckboxGroupCheckedItems) {
-    setCheckboxGroupCheckedItems(newModelValue);
+    setCheckboxGroupCheckedItems(newModelValue as UnknownObject[]);
   }
 
   emit("update:modelValue", newModelValue);
   emit("input", newModelValue);
 }
 </script>
+
+<template>
+  <ULabel
+    :for="elementId"
+    :label="label"
+    :error="error"
+    :size="checkboxSize"
+    :align="labelAlign"
+    :disabled="disabled"
+    :description="description"
+    v-bind="checkboxLabelAttrs"
+    :data-test="`${dataTest}-label`"
+  >
+    <input
+      :id="elementId"
+      type="checkbox"
+      :value="checkboxValue"
+      :true-value="trueValue"
+      :false-value="falseValue"
+      :name="checkboxName"
+      :checked="isChecked"
+      :disabled="disabled"
+      v-bind="checkboxAttrs"
+      :data-test="dataTest"
+      @change="onChange"
+    />
+
+    <label v-if="isChecked" v-bind="iconWrapperAttrs" :for="elementId">
+      <UIcon
+        internal
+        :name="partial ? config?.defaults?.partiallyCheckedIcon : config?.defaults?.checkedIcon"
+        :size="iconSize"
+        color="white"
+        v-bind="checkedIconAttrs"
+      />
+    </label>
+
+    <template #bottom>
+      <!-- @slot Use it to add something below the checkbox. -->
+      <slot name="bottom" />
+    </template>
+  </ULabel>
+</template>

package/ui.form-checkbox/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-checkbox/storybook/{stories.js → stories.ts}

@@ -5,6 +5,14 @@ import UCheckboxGroup from "../../ui.form-checkbox-group/UCheckboxGroup.vue";
 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";
+
+interface UCheckboxArgs extends UCheckboxProps {
+  slotTemplate?: string;
+  enum: "size";
+}
+
 /**
  * The `UCheckbox` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-checkbox)
  */
@@ -19,9 +27,9 @@ export default {
     ...getArgTypes(UCheckbox.__name),
     modelValue: { control: { type: "boolean" } },
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UCheckboxArgs> = (args: UCheckboxArgs) => ({
   components: { UCheckbox, UBadge },
   setup() {
     const slots = getSlotNames(UCheckbox.__name);
@@ -30,12 +38,12 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UCheckbox v-bind="args" v-model="args.modelValue">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UCheckbox>
   `,
 });
 
-const ValueTypesTemplate = (args) => ({
+const ValueTypesTemplate: StoryFn<UCheckboxArgs> = (args: UCheckboxArgs) => ({
   components: { UCheckbox, UCheckboxGroup, UCol },
   setup() {
     return { args };
@@ -89,12 +97,12 @@ const ValueTypesTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UCheckboxArgs> = (args: UCheckboxArgs, { argTypes }) => ({
   components: { UCheckbox, UCol },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `

package/ui.form-checkbox/types.ts

@@ -0,0 +1,106 @@
+import defaultConfig from "./config.ts";
+
+import type { UnknownObject, UnknownArray } from "../types.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UCheckboxProps {
+  /**
+   * Checkbox value.
+   */
+  modelValue?: boolean | string | number | UnknownArray | UnknownObject;
+
+  /**
+   * Native value attribute.
+   */
+  value?: boolean | string | number | UnknownArray | UnknownObject;
+
+  /**
+   * Own value for checkbox checked state.
+   */
+  trueValue?: boolean | string | number | UnknownArray | UnknownObject;
+
+  /**
+   * Own value for checkbox unchecked state.
+   */
+  falseValue?: boolean | string | number | UnknownArray | UnknownObject;
+
+  /**
+   * Checkbox name.
+   */
+  name?: string;
+
+  /**
+   * Checkbox label.
+   */
+  label?: string;
+
+  /**
+   * Checkbox label description.
+   */
+  description?: string;
+
+  /**
+   * Error message.
+   */
+  error?: string;
+
+  /**
+   * Label placement.
+   */
+  labelAlign?: "left" | "right";
+
+  /**
+   * Checkbox color.
+   */
+  color?:
+    | "brand"
+    | "grayscale"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose";
+
+  /**
+   * Checkbox size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Make checkbox disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Make checkbox partially checked (change the checked tick to a minus).
+   */
+  partial?: boolean;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.form-checkbox/useAttrs.ts

@@ -0,0 +1,35 @@
+import { computed } from "vue";
+import useUI from "../composables/useUI.ts";
+
+import defaultConfig from "./config.ts";
+
+import type { Ref } from "vue";
+import type { UseAttrs } from "../types.ts";
+import type { UCheckboxProps, Config } from "./types.ts";
+
+type ComponentState = {
+  checkboxColor: Ref<string>;
+  checkboxSize: Ref<string>;
+};
+
+export default function useAttrs(
+  props: UCheckboxProps,
+  { checkboxColor, checkboxSize }: ComponentState,
+): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+
+  const mutatedProps = computed(() => ({
+    color: checkboxColor.value,
+    size: checkboxSize.value,
+    label: Boolean(props.label),
+    error: Boolean(props.error),
+  }));
+
+  const keysAttrs = getKeysAttrs(mutatedProps);
+
+  return {
+    config,
+    ...keysAttrs,
+    hasSlotContent,
+  };
+}