vueless 0.0.569 → 0.0.571

package/ui.form-input-rating/UInputRating.vue

@@ -1,3 +1,72 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+import UIcon from "../ui.image-icon/UIcon.vue";
+import ULabel from "../ui.form-label/ULabel.vue";
+import { hasSlotContent } from "../utils/helper.ts";
+import { getDefault } from "../utils/ui.ts";
+
+import { UInputRating } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
+
+import type { UInputRatingProps, IconSize } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<UInputRatingProps>(), {
+  stars: getDefault<UInputRatingProps>(defaultConfig, UInputRating).stars,
+  size: getDefault<UInputRatingProps>(defaultConfig, UInputRating).size,
+  labelAlign: getDefault<UInputRatingProps>(defaultConfig, UInputRating).labelAlign,
+  counter: getDefault<UInputRatingProps>(defaultConfig, UInputRating).counter,
+  selectable: getDefault<UInputRatingProps>(defaultConfig, UInputRating).selectable,
+  modelValue: 0,
+  dataTest: "",
+  config: () => ({}),
+});
+
+const emit = defineEmits([
+  /**
+   * Triggers when the rating value changes.
+   * @property {number} modelValue
+   */
+  "update:modelValue",
+]);
+
+const hovered = ref<number | null>(null);
+
+const { config, inputLabelAttrs, containerAttrs, counterAttrs, totalAttrs, starsAttrs, starAttrs } =
+  useAttrs(props);
+
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+  };
+
+  return sizes[props.size] as IconSize;
+});
+
+const counterValue = computed(() => {
+  return hovered.value || props.modelValue;
+});
+
+function onClickStar(newValue: number) {
+  if (props.selectable) {
+    const selected = newValue !== props.modelValue ? newValue : 0;
+
+    hovered.value = null;
+
+    emit("update:modelValue", selected);
+  }
+}
+
+function onMouseHover(overStar: number | null = null) {
+  if (props.selectable) hovered.value = overStar;
+}
+</script>
+
 <template>
   <ULabel
     :label="label"
@@ -29,7 +98,7 @@
           :size="iconSize"
           :interactive="selectable"
           :name="
-            star <= counterValue ? config.defaults.selectedIcon : config.defaults.unselectedIcon
+            star <= counterValue ? config.defaults?.selectedIcon : config.defaults?.unselectedIcon
           "
           v-bind="starAttrs"
           :data-test="`${dataTest}-rating-star-${star}`"
@@ -50,160 +119,3 @@
     </div>
   </ULabel>
 </template>
-
-<script setup>
-import { computed, ref } from "vue";
-
-import { getDefault } from "../utils/ui.ts";
-import { hasSlotContent } from "../utils/helper.ts";
-
-import UIcon from "../ui.image-icon/UIcon.vue";
-import ULabel from "../ui.form-label/ULabel.vue";
-
-import { UInputRating } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Rating value.
-   */
-  modelValue: {
-    type: Number,
-    default: 0,
-  },
-
-  /**
-   * Rating number of stars.
-   */
-  stars: {
-    type: Number,
-    default: getDefault(defaultConfig, UInputRating).stars,
-  },
-
-  /**
-   * Rating size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UInputRating).size,
-  },
-
-  /**
-   * Rating label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Rating label placement.
-   * @values top, topWithDesc, left, right
-   */
-  labelAlign: {
-    type: String,
-    default: getDefault(defaultConfig, UInputRating).labelAlign,
-  },
-
-  /**
-   * Rating error message.
-   */
-  error: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Rating description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Rating total.
-   */
-  total: {
-    type: Number,
-    default: 0,
-  },
-
-  /**
-   * Show rating counter.
-   */
-  counter: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UInputRating).counter,
-  },
-
-  /**
-   * Make rating selectable.
-   */
-  selectable: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UInputRating).selectable,
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits([
-  /**
-   * Triggers when the rating value changes.
-   * @property {number} modelValue
-   */
-  "update:modelValue",
-]);
-
-const hovered = ref(null);
-
-const { config, inputLabelAttrs, containerAttrs, counterAttrs, totalAttrs, starsAttrs, starAttrs } =
-  useAttrs(props);
-
-const iconSize = computed(() => {
-  const sizes = {
-    sm: "xs",
-    md: "sm",
-    lg: "md",
-  };
-
-  return sizes[props.size];
-});
-
-const counterValue = computed(() => {
-  return hovered.value || props.modelValue;
-});
-
-function onClickStar(newValue) {
-  if (props.selectable) {
-    const selected = newValue !== props.modelValue ? newValue : 0;
-
-    hovered.value = null;
-
-    emit("update:modelValue", selected);
-  }
-}
-
-function onMouseHover(overStar) {
-  if (props.selectable) hovered.value = overStar;
-}
-</script>

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

@@ -8,6 +8,14 @@ import {
 import UInputRating from "../../ui.form-input-rating/UInputRating.vue";
 import URow from "../../ui.container-row/URow.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UInputRatingProps } from "../types.ts";
+
+interface UInputRatingArgs extends UInputRatingProps {
+  slotTemplate?: string;
+  enum: "size";
+}
+
 export default {
   id: "3060",
   title: "Form Inputs & Controls / Input Rating",
@@ -22,9 +30,9 @@ export default {
   parameters: {
     ...getDocsDescription(UInputRating.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UInputRatingArgs> = (args: UInputRatingArgs) => ({
   components: { UInputRating },
   setup() {
     const slots = getSlotNames(UInputRating.__name);
@@ -36,17 +44,17 @@ const DefaultTemplate = (args) => ({
       v-bind="args"
       v-model="args.modelValue"
     >
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UInputRating>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UInputRatingArgs> = (args: UInputRatingArgs, { argTypes }) => ({
   components: { UInputRating, URow },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `
@@ -69,7 +77,7 @@ export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
 export const StarAmount = DefaultTemplate.bind({});
-StarAmount.args = { value: 4, stars: 7 };
+StarAmount.args = { modelValue: 4, stars: 7 };
 
 export const Selectable = DefaultTemplate.bind({});
 Selectable.args = { selectable: true };

package/ui.form-input-rating/types.ts

@@ -0,0 +1,67 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export type IconSize = "xs" | "sm" | "md";
+
+export interface UInputRatingProps {
+  /**
+   * Rating value.
+   */
+  modelValue: number;
+
+  /**
+   * Rating number of stars.
+   */
+  stars?: number;
+
+  /**
+   * Rating size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Rating label.
+   */
+  label?: string;
+
+  /**
+   * Rating label placement.
+   */
+  labelAlign?: "top" | "topWithDesc" | "left" | "right";
+
+  /**
+   * Rating error message.
+   */
+  error?: string;
+
+  /**
+   * Rating description.
+   */
+  description?: string;
+
+  /**
+   * Rating total.
+   */
+  total?: number;
+
+  /**
+   * Show rating counter.
+   */
+  counter?: boolean;
+
+  /**
+   * Make rating selectable.
+   */
+  selectable?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Config;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.form-input-rating/useAttrs.ts

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