vueless 0.0.556 → 0.0.558

package/composables/useUI.ts

@@ -19,9 +19,10 @@ import type {
   NestedComponent,
   ComponentNames,
   CVA,
+  UseUI,
   KeyAttrs,
-  ExtendedKeyClasses,
   KeysAttrs,
+  ExtendedKeyClasses,
 } from "../types.ts";
 
 /**
@@ -35,7 +36,8 @@ export default function useUI<T>(
   defaultConfig: T & Component,
   propsConfigGetter?: () => (T & Component) | undefined,
   topLevelClassKey?: string,
-) {
+  mutatedProps?: ComputedRef,
+): UseUI<T> {
   const { type, props } = getCurrentInstance() as ComponentInternalInstance;
   const componentName = type.__name as ComponentNames;
   const globalConfig = vuelessConfig?.component?.[componentName] || {};
@@ -48,7 +50,7 @@ export default function useUI<T>(
     : (STRATEGY_TYPE.merge as Strategies);
 
   const firstClassKey = defaultConfig ? Object.keys(defaultConfig)[0] : "";
-  const config = ref({} as T);
+  const config = ref({} as T & Component);
   const attrs = useAttrs();
 
   watchEffect(() => {
@@ -191,7 +193,7 @@ export default function useUI<T>(
     return vuelessAttrs;
   }
 
-  return { config, getKeysAttrs };
+  return { config, getKeysAttrs, ...getKeysAttrs(mutatedProps) };
 }
 
 /**

package/package.json

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

package/types.ts

@@ -43,8 +43,11 @@ 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 { MaybeRef, Ref } from "vue";
+import type { ComputedRef, MaybeRef, Ref, UnwrapRef } from "vue";
 import type { Props } from "tippy.js";
 import type { LocaleOptions } from "./adatper.locale/vueless.ts";
 
@@ -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 {
@@ -227,6 +233,19 @@ export interface NestedComponent {
   [key: string]: Record<string, string | object> | string;
 }
 
+export type ComponentConfig<T> = [T & Component] extends [Ref]
+  ? Ref<T & Component>
+  : Ref<UnwrapRef<T & Component>, T & Component>;
+
+export interface UseUI<T> {
+  config: ComponentConfig<T>;
+  getKeysAttrs: (mutatedProps?: ComputedRef) => KeysAttrs;
+  [key: string]:
+    | ComputedRef<KeyAttrs>
+    | ComponentConfig<T>
+    | ((mutatedProps?: ComputedRef) => KeysAttrs);
+}
+
 export interface Transition {
   enterFromClass?: string;
   enterActiveClass?: string;

package/ui.button/UButton.vue

@@ -106,16 +106,18 @@ defineExpose({
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
-
 const mutatedProps = computed(() => ({
   leftIcon: Boolean(props.leftIcon) || hasSlotContent(slots["left"]),
   rightIcon: Boolean(props.rightIcon) || hasSlotContent(slots["right"]),
   label: Boolean(props.label),
 }));
 
-const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs } =
-  getKeysAttrs(mutatedProps);
+const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs } = useUI<Config>(
+  defaultConfig,
+  () => props.config,
+  "",
+  mutatedProps,
+);
 </script>
 
 <template>

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),
+  };
+}