vueless 0.0.557 → 0.0.558

package/package.json

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

package/types.ts

@@ -43,6 +43,9 @@ import UCheckboxGroupConfig from "./ui.form-checkbox-group/config.ts";
 import UCheckboxMultiStateConfig from "./ui.form-checkbox-multi-state/config.ts";
 import URadioConfig from "./ui.form-radio/config.ts";
 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 type { ComputedRef, MaybeRef, Ref, UnwrapRef } from "vue";
 import type { Props } from "tippy.js";
@@ -201,6 +204,9 @@ export interface Components {
   UCheckboxMultiState?: Partial<typeof UCheckboxMultiStateConfig>;
   URadio?: Partial<typeof URadioConfig>;
   URadioGroup?: Partial<typeof URadioGroupConfig>;
+  USwitch?: Partial<typeof USwitchConfig>;
+  UTextarea?: Partial<typeof UTextareaConfig>;
+  ULabel?: Partial<typeof ULabelConfig>;
 }
 
 export interface Directives {

package/ui.form-label/ULabel.vue

@@ -1,3 +1,71 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+import { getDefault } from "../utils/ui.ts";
+
+import defaultConfig from "./config.ts";
+import { ULabel, PLACEMENT } from "./constants.ts";
+import useAttrs from "./useAttrs.ts";
+
+import type { ULabelProps } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<ULabelProps>(), {
+  align: getDefault<ULabelProps>(defaultConfig, ULabel).align,
+  size: getDefault<ULabelProps>(defaultConfig, ULabel).size,
+  disabled: getDefault<ULabelProps>(defaultConfig, ULabel).disabled,
+  centred: getDefault<ULabelProps>(defaultConfig, ULabel).centred,
+  dataTest: "",
+});
+
+const emit = defineEmits([
+  /**
+   * Triggers when the label is clicked.
+   */
+  "click",
+]);
+
+const labelRef = ref(null);
+const wrapperRef = ref(null);
+
+const { wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useAttrs(props);
+
+const isHorizontalPlacement = computed(() => {
+  return props.align === PLACEMENT.left || props.align === PLACEMENT.right;
+});
+
+const isTopWithDescPlacement = computed(() => {
+  return props.align === PLACEMENT.topWithDesc;
+});
+
+const labelElement = computed(() => {
+  return labelRef.value;
+});
+
+const wrapperElement = computed(() => {
+  return wrapperRef.value;
+});
+
+function onClick(event: MouseEvent) {
+  emit("click", event);
+}
+
+defineExpose({
+  /**
+   * Reference to the label element.
+   * @property {HTMLElement}
+   */
+  labelElement,
+
+  /**
+   * Reference to the wrapper element containing the label and content.
+   * @property {HTMLElement}
+   */
+  wrapperElement,
+});
+</script>
+
 <template>
   <div
     v-if="isHorizontalPlacement || isTopWithDescPlacement"
@@ -62,145 +130,3 @@
     <slot name="bottom" />
   </div>
 </template>
-
-<script setup>
-import { computed, ref } from "vue";
-
-import { getDefault } from "../utils/ui.ts";
-
-import defaultConfig from "./config.js";
-import { ULabel, PLACEMENT } from "./constants.js";
-import useAttrs from "./useAttrs.js";
-
-defineOptions({ inheritAttrs: false });
-
-const emit = defineEmits([
-  /**
-   * Triggers when the label is clicked.
-   */
-  "click",
-]);
-
-const props = defineProps({
-  /**
-   * Label text.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Label description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Label error message.
-   */
-  error: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Label align.
-   * @values top, topInside, topWithDesc, left, right
-   */
-  align: {
-    type: String,
-    default: getDefault(defaultConfig, ULabel).align,
-  },
-
-  /**
-   * Label size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, ULabel).size,
-  },
-
-  /**
-   * Make label disabled.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, ULabel).disabled,
-  },
-
-  /**
-   * Centre label horizontally.
-   */
-  centred: {
-    type: Boolean,
-    default: getDefault(defaultConfig, ULabel).centred,
-  },
-
-  /**
-   * Set input id for label `for` attribute.
-   */
-  for: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
-});
-
-const labelRef = ref(null);
-const wrapperRef = ref(null);
-
-const { wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useAttrs(props);
-
-const isHorizontalPlacement = computed(() => {
-  return props.align === PLACEMENT.left || props.align === PLACEMENT.right;
-});
-
-const isTopWithDescPlacement = computed(() => {
-  return props.align === PLACEMENT.topWithDesc;
-});
-
-const labelElement = computed(() => {
-  return labelRef.value;
-});
-
-const wrapperElement = computed(() => {
-  return wrapperRef.value;
-});
-
-function onClick(event) {
-  emit("click", event);
-}
-
-defineExpose({
-  /**
-   * Reference to the label element.
-   * @property {HTMLElement}
-   */
-  labelElement,
-
-  /**
-   * Reference to the wrapper element containing the label and content.
-   * @property {HTMLElement}
-   */
-  wrapperElement,
-});
-</script>

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

@@ -5,6 +5,14 @@ import UCol from "../../ui.container-col/UCol.vue";
 import UText from "../../ui.text-block/UText.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { ULabelProps } from "../types.ts";
+
+interface ULabelArgs extends ULabelProps {
+  slotTemplate?: string;
+  enum: "align" | "size";
+}
+
 /**
  * The `ULabel` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-label)
  */
@@ -19,11 +27,11 @@ export default {
   argTypes: {
     ...getArgTypes(ULabel.__name),
   },
-};
+} as Meta;
 
 const defaultTemplate = "This is plain text";
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<ULabelArgs> = (args: ULabelArgs) => ({
   components: { ULabel, UText, UIcon },
   setup() {
     const slots = getSlotNames(ULabel.__name);
@@ -38,19 +46,26 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<ULabelArgs> = (args: ULabelArgs, { argTypes }) => ({
   components: { ULabel, UCol, UText },
   setup() {
-    function getText(value, name) {
+    function getText(value: string, name: string) {
       return name === "size" ? `This is ${value} size.` : `This is ${value} label placement.`;
     }
 
-    const { name, options } = argTypes[args.enum];
-    const prefixedOptions = options.map((option) => getText(option, name));
+    let prefixedOptions;
+
+    const enumArgType = argTypes?.[args.enum];
+
+    if (enumArgType && "name" in enumArgType && "options" in enumArgType) {
+      const { name, options } = enumArgType;
+
+      prefixedOptions = options?.map((option: string) => getText(option, name));
+    }
 
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
       prefixedOptions,
     };
   },

package/ui.form-label/types.ts

@@ -0,0 +1,55 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface ULabelProps {
+  /**
+   * Label text.
+   */
+  label?: string;
+
+  /**
+   * Label description.
+   */
+  description?: string;
+
+  /**
+   * Label error message.
+   */
+  error?: string;
+
+  /**
+   * Label align.
+   */
+  align?: "top" | "topInside" | "topWithDesc" | "left" | "right";
+
+  /**
+   * Label size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Make label disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Centre label horizontally.
+   */
+  centred?: boolean;
+
+  /**
+   * Set input id for label `for` attribute.
+   */
+  for?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: Config;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.form-label/useAttrs.ts

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

package/ui.form-switch/USwitch.vue

@@ -1,43 +1,4 @@
-<template>
-  <ULabel
-    :for="elementId"
-    :size="size"
-    :label="label"
-    :description="description"
-    :align="labelAlign"
-    :disabled="disabled"
-    :data-test="dataTest"
-    v-bind="switchLabelAttrs"
-    @click="onClickToggle"
-  >
-    <label :for="elementId" v-bind="wrapperAttrs">
-      <input
-        :id="elementId"
-        v-model="checkedValue"
-        type="checkbox"
-        :disabled="disabled"
-        v-bind="inputAttrs"
-        @click="onClickToggle"
-        @keydown.space="onKeydownSpace"
-      />
-
-      <span v-bind="circleAttrs">
-        <UIcon
-          v-if="toggleIcon"
-          internal
-          :name="checkedValue ? config.defaults.onIcon : config.defaults.offIcon"
-          :color="iconColor"
-          :size="iconSize"
-          v-bind="toggleIconAttrs"
-        />
-      </span>
-
-      <span v-if="toggleLabel" v-bind="toggleLabelAttrs" v-text="switchLabel" />
-    </label>
-  </ULabel>
-</template>
-
-<script setup>
+<script setup lang="ts">
 import { computed, useId } from "vue";
 import { merge } from "lodash-es";
 
@@ -45,111 +6,25 @@ import UIcon from "../ui.image-icon/UIcon.vue";
 import ULabel from "../ui.form-label/ULabel.vue";
 import { getDefault } from "../utils/ui.ts";
 
-import { USwitch } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
+import { USwitch } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
 import { useLocale } from "../composables/useLocale.ts";
 
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Switch value.
-   */
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Label alignment.
-   * @values top, left, right
-   */
-  labelAlign: {
-    type: String,
-    default: getDefault(defaultConfig, USwitch).labelAlign,
-  },
-
-  /**
-   * Switch label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Switch description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Switch size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, USwitch).size,
-  },
-
-  /**
-   * Switch color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white   */
-  color: {
-    type: String,
-    default: getDefault(defaultConfig, USwitch).color,
-  },
+import type { USwitchProps, IconSize } from "./types.ts";
 
-  /**
-   * Show toggle icons inside the circle.
-   */
-  toggleIcon: {
-    type: Boolean,
-    default: getDefault(defaultConfig, USwitch).toggleIcon,
-  },
-
-  /**
-   * Show toggle labels (on / off).
-   */
-  toggleLabel: {
-    type: Boolean,
-    default: getDefault(defaultConfig, USwitch).toggleLabel,
-  },
-
-  /**
-   * Set switch disabled.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, USwitch).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: "",
-  },
+const props = withDefaults(defineProps<USwitchProps>(), {
+  labelAlign: getDefault<USwitchProps>(defaultConfig, USwitch).labelAlign,
+  size: getDefault<USwitchProps>(defaultConfig, USwitch).size,
+  color: getDefault<USwitchProps>(defaultConfig, USwitch).color,
+  toggleIcon: getDefault<USwitchProps>(defaultConfig, USwitch).toggleIcon,
+  toggleLabel: getDefault<USwitchProps>(defaultConfig, USwitch).toggleLabel,
+  disabled: getDefault<USwitchProps>(defaultConfig, USwitch).disabled,
+  modelValue: false,
+  dataTest: "",
+  config: () => ({}),
 });
 
 const emit = defineEmits([
@@ -163,7 +38,7 @@ const emit = defineEmits([
 const { tm } = useLocale();
 
 const i18nGlobal = tm(USwitch);
-const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
+const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config?.i18n));
 
 const checkedValue = computed({
   get: () => props.modelValue,
@@ -193,7 +68,7 @@ const iconSize = computed(() => {
     lg: "sm",
   };
 
-  return sizes[props.size];
+  return sizes[props.size] as IconSize;
 });
 
 const iconColor = computed(() => {
@@ -214,3 +89,42 @@ function onKeydownSpace() {
   toggle();
 }
 </script>
+
+<template>
+  <ULabel
+    :for="elementId"
+    :size="size"
+    :label="label"
+    :description="description"
+    :align="labelAlign"
+    :disabled="disabled"
+    :data-test="dataTest"
+    v-bind="switchLabelAttrs"
+    @click="onClickToggle"
+  >
+    <label :for="elementId" v-bind="wrapperAttrs">
+      <input
+        :id="elementId"
+        v-model="checkedValue"
+        type="checkbox"
+        :disabled="disabled"
+        v-bind="inputAttrs"
+        @click="onClickToggle"
+        @keydown.space="onKeydownSpace"
+      />
+
+      <span v-bind="circleAttrs">
+        <UIcon
+          v-if="toggleIcon"
+          internal
+          :name="checkedValue ? config.defaults?.onIcon : config.defaults?.offIcon"
+          :color="iconColor"
+          :size="iconSize"
+          v-bind="toggleIconAttrs"
+        />
+      </span>
+
+      <span v-if="toggleLabel" v-bind="toggleLabelAttrs" v-text="switchLabel" />
+    </label>
+  </ULabel>
+</template>

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

@@ -4,6 +4,13 @@ import USwitch from "../../ui.form-switch/USwitch.vue";
 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 { USwitchProps } from "../types.ts";
+
+interface USwitchArgs extends USwitchProps {
+  slotTemplate?: string;
+  enum: "size" | "color";
+}
 /**
  * The `USwitch` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-switch)
  */
@@ -17,9 +24,9 @@ export default {
   argTypes: {
     ...getArgTypes(USwitch.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<USwitchArgs> = (args: USwitchArgs) => ({
   components: { USwitch, UIcon },
   setup() {
     const slots = getSlotNames(USwitch.__name);
@@ -28,17 +35,17 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <USwitch v-bind="args" v-model="args.modelValue">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </USwitch>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<USwitchArgs> = (args: USwitchArgs, { argTypes }) => ({
   components: { USwitch, URow },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `