vueless 0.0.556 → 0.0.558

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: `

package/ui.form-switch/types.ts

@@ -0,0 +1,88 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export type IconSize = "2xs" | "xs" | "sm";
+
+export interface USwitchProps {
+  /**
+   * Switch value.
+   */
+  modelValue?: boolean;
+
+  /**
+   * Label alignment.
+   */
+  labelAlign?: "top" | "left" | "right";
+
+  /**
+   * Switch label.
+   */
+  label?: string;
+
+  /**
+   * Switch description.
+   */
+  description?: string;
+
+  /**
+   * Switch size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Switch color.
+   */
+  color?:
+    | "grayscale"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "gray"
+    | "white"
+    | "brand";
+
+  /**
+   * Show toggle icons inside the circle.
+   */
+  toggleIcon?: boolean;
+
+  /**
+   * Show toggle labels (on / off).
+   */
+  toggleLabel?: boolean;
+
+  /**
+   * Set switch disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: Config;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.form-switch/useAttrs.ts

@@ -0,0 +1,28 @@
+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 { USwitchProps, Config } from "./types.ts";
+
+type ComponentState = {
+  checked: Ref<boolean>;
+};
+
+export default function useAttrs(
+  props: USwitchProps,
+  { checked }: ComponentState,
+): UseAttrs<Config> {
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
+
+  const mutatedProps = computed(() => ({
+    checked: Boolean(checked.value),
+  }));
+
+  return {
+    config,
+    ...getKeysAttrs(mutatedProps),
+  };
+}