vueless 0.0.532 → 0.0.533

package/ui.image-icon/useAttrs.ts

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

package/ui.navigation-pagination/UPagination.vue

@@ -1,3 +1,144 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import { range } from "lodash-es";
+
+import UButton from "../ui.button/UButton.vue";
+import UIcon from "../ui.image-icon/UIcon.vue";
+import { getDefault } from "../utils/ui.ts";
+
+import defaultConfig from "./config.ts";
+import { UPagination } from "./constants.ts";
+import useAttrs from "./useAttrs.ts";
+
+import type { UPaginationProps } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<UPaginationProps>(), {
+  perPage: getDefault<UPaginationProps>(defaultConfig, UPagination).perPage,
+  limit: getDefault<UPaginationProps>(defaultConfig, UPagination).limit,
+  variant: getDefault<UPaginationProps>(defaultConfig, UPagination).variant,
+  size: getDefault<UPaginationProps>(defaultConfig, UPagination).size,
+  disabled: getDefault<UPaginationProps>(defaultConfig, UPagination).disabled,
+  ellipsis: getDefault<UPaginationProps>(defaultConfig, UPagination).ellipsis,
+  showFirst: getDefault<UPaginationProps>(defaultConfig, UPagination).showFirst,
+  showLast: getDefault<UPaginationProps>(defaultConfig, UPagination).showLast,
+  dataTest: "",
+});
+
+const emit = defineEmits([
+  /**
+   * Triggers when current page changes.
+   * @property {number} value
+   */
+  "change",
+
+  /**
+   * Triggers when current page changes.
+   * @property {number} value
+   */
+  "update:modelValue",
+]);
+
+const {
+  config,
+  paginationAttrs,
+  firstButtonAttrs,
+  lastButtonAttrs,
+  prevButtonAttrs,
+  nextButtonAttrs,
+  activeButtonAttrs,
+  inactiveButtonAttrs,
+  lastIconAttrs,
+  firstIconAttrs,
+  prevIconAttrs,
+  nextIconAttrs,
+} = useAttrs(props);
+
+const currentPage = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit("update:modelValue", value);
+    emit("change", value);
+  },
+});
+
+const buttonSize = computed(() => {
+  const sizes = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+  };
+
+  return sizes[props.size];
+});
+
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+  };
+
+  return sizes[props.size];
+});
+
+const totalPages = computed(() => {
+  return props.perPage > 0 ? Math.ceil(props.total / props.perPage) : 0;
+});
+
+const pageButtons = computed(() => {
+  const from1 = Number(currentPage.value) - Math.round(props.limit / 2) + 1;
+  const from2 = totalPages.value + 1 - props.limit;
+
+  const from = Math.max(Math.min(from1, from2), 1);
+  const to = Math.min(from + props.limit - 1, totalPages.value);
+
+  return range(from, to + 1).map((page) => {
+    if (props.ellipsis && page === from && from > 1) {
+      return { number: -Infinity };
+    }
+
+    if (props.ellipsis && page === to && to < totalPages.value) {
+      return { number: Infinity };
+    }
+
+    return { number: page, isActive: page === currentPage.value };
+  });
+});
+
+const prevIsDisabled = computed(() => {
+  return props.disabled || currentPage.value === null || currentPage.value <= 1;
+});
+
+const nextIsDisabled = computed(() => {
+  return props.disabled || currentPage.value === null || currentPage.value >= totalPages.value;
+});
+
+function selectPage(page: number) {
+  currentPage.value = page;
+}
+
+function goToPrevPage() {
+  currentPage.value = currentPage.value === null ? 1 : Math.max(currentPage.value - 1, 1);
+}
+
+function goToNextPage() {
+  currentPage.value =
+    currentPage.value === null
+      ? totalPages.value
+      : Math.min(currentPage.value + 1, totalPages.value);
+}
+
+function goToFirstPage() {
+  currentPage.value = 1;
+}
+
+function goToLastPage() {
+  currentPage.value = totalPages.value;
+}
+</script>
+
 <template>
   <div v-bind="paginationAttrs">
     <UButton
@@ -134,265 +275,3 @@
     </UButton>
   </div>
 </template>
-
-<script setup>
-import { computed } from "vue";
-import { range } from "lodash-es";
-
-import UButton from "../ui.button/UButton.vue";
-import UIcon from "../ui.image-icon/UIcon.vue";
-import { getDefault } from "../utils/ui.ts";
-
-import defaultConfig from "./config.js";
-import { UPagination } from "./constants.js";
-import useAttrs from "./useAttrs.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Current page number.
-   */
-  modelValue: {
-    type: Number,
-    default: null,
-  },
-
-  /**
-   * Number of items per page.
-   */
-  perPage: {
-    type: Number,
-    default: getDefault(defaultConfig, UPagination).perPage,
-    validator: (value) => value > 0,
-  },
-
-  /**
-   * Total number of items.
-   */
-  total: {
-    type: Number,
-    default: 0,
-    validator: (value) => value >= 0,
-  },
-
-  /**
-   * Limit of visible pages.
-   */
-  limit: {
-    type: Number,
-    default: getDefault(defaultConfig, UPagination).limit,
-    validator: (value) => value >= 0,
-  },
-
-  /**
-   * Pagination variant.
-   * @values primary, secondary, thirdary
-   */
-  variant: {
-    type: String,
-    default: getDefault(defaultConfig, UPagination).variant,
-  },
-
-  /**
-   * Pagination size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UPagination).size,
-  },
-
-  /**
-   * First button label.
-   */
-  firstLabel: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Prev button label.
-   */
-  prevLabel: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Next button label.
-   */
-  nextLabel: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Last button label.
-   */
-  lastLabel: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Disable navigation buttons.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UPagination).disabled,
-  },
-
-  /**
-   * Show ellipsis.
-   */
-  ellipsis: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UPagination).ellipsis,
-  },
-
-  /**
-   * Show the first control.
-   */
-  showFirst: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UPagination).showLast,
-  },
-
-  /**
-   * Show the last control.
-   */
-  showLast: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UPagination).showLast,
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits([
-  /**
-   * Triggers when current page changes.
-   * @property {number} value
-   */
-  "change",
-
-  /**
-   * Triggers when current page changes.
-   * @property {number} value
-   */
-  "update:modelValue",
-]);
-
-const {
-  config,
-  paginationAttrs,
-  firstButtonAttrs,
-  lastButtonAttrs,
-  prevButtonAttrs,
-  nextButtonAttrs,
-  activeButtonAttrs,
-  inactiveButtonAttrs,
-  lastIconAttrs,
-  firstIconAttrs,
-  prevIconAttrs,
-  nextIconAttrs,
-} = useAttrs(props);
-
-const currentPage = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit("update:modelValue", value);
-    emit("change", value);
-  },
-});
-
-const buttonSize = computed(() => {
-  const sizes = {
-    sm: "xs",
-    md: "sm",
-    lg: "md",
-  };
-
-  return sizes[props.size];
-});
-
-const iconSize = computed(() => {
-  const sizes = {
-    sm: "xs",
-    md: "sm",
-    lg: "md",
-  };
-
-  return sizes[props.size];
-});
-
-const totalPages = computed(() => {
-  return props.perPage > 0 ? Math.ceil(props.total / props.perPage) : 0;
-});
-
-const pageButtons = computed(() => {
-  const from1 = Number(currentPage.value) - Math.round(props.limit / 2) + 1;
-  const from2 = totalPages.value + 1 - props.limit;
-
-  const from = Math.max(Math.min(from1, from2), 1);
-  const to = Math.min(from + props.limit - 1, totalPages.value);
-
-  return range(from, to + 1).map((page) => {
-    if (props.ellipsis && page === from && from > 1) {
-      return { number: -Infinity };
-    }
-
-    if (props.ellipsis && page === to && to < totalPages.value) {
-      return { number: Infinity };
-    }
-
-    return { number: page, isActive: page === currentPage.value };
-  });
-});
-
-const prevIsDisabled = computed(() => {
-  return props.disabled || currentPage.value === null || currentPage.value <= 1;
-});
-
-const nextIsDisabled = computed(() => {
-  return props.disabled || currentPage.value === null || currentPage.value >= totalPages.value;
-});
-
-function selectPage(page) {
-  currentPage.value = page;
-}
-
-function goToPrevPage() {
-  currentPage.value = currentPage.value === null ? 1 : Math.max(currentPage.value - 1, 1);
-}
-
-function goToNextPage() {
-  currentPage.value =
-    currentPage.value === null
-      ? totalPages.value
-      : Math.min(currentPage.value + 1, totalPages.value);
-}
-
-function goToFirstPage() {
-  currentPage.value = 1;
-}
-
-function goToLastPage() {
-  currentPage.value = totalPages.value;
-}
-</script>

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

@@ -2,6 +2,13 @@ import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybo
 
 import UPagination from "../../ui.navigation-pagination/UPagination.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UPaginationProps } from "../types.ts";
+
+interface UPaginationArgs extends UPaginationProps {
+  slotTemplate?: string;
+}
+
 /**
  * The `UPagination` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.navigation-pagination)
  */
@@ -16,9 +23,9 @@ export default {
   argTypes: {
     ...getArgTypes(UPagination.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UPaginationArgs> = (args: UPaginationArgs) => ({
   components: { UPagination },
   setup() {
     const slots = getSlotNames(UPagination.__name);
@@ -27,7 +34,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UPagination v-bind="args" v-model="args.modelValue">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UPagination>
   `,
 });
@@ -42,7 +49,7 @@ export const Limit = DefaultTemplate.bind({});
 Limit.args = { limit: 3 };
 
 export const HideEllipsis = DefaultTemplate.bind({});
-HideEllipsis.args = { ellipses: false };
+HideEllipsis.args = { ellipsis: false };
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };

package/ui.navigation-pagination/types.ts

@@ -0,0 +1,85 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UPaginationProps {
+  /**
+   * Current page number.
+   */
+  modelValue?: number;
+
+  /**
+   * Number of items per page.
+   */
+  perPage?: number;
+
+  /**
+   * Total number of items.
+   */
+  total?: number;
+
+  /**
+   * Limit of visible pages.
+   */
+  limit?: number;
+
+  /**
+   * Pagination variant.
+   */
+  variant?: "primary" | "secondary" | "thirdary";
+
+  /**
+   * Pagination size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * First button label.
+   */
+  firstLabel?: string;
+
+  /**
+   * Prev button label.
+   */
+  prevLabel?: string;
+
+  /**
+   * Next button label.
+   */
+  nextLabel?: string;
+
+  /**
+   * Last button label.
+   */
+  lastLabel?: string;
+
+  /**
+   * Disable navigation buttons.
+   */
+  disabled?: boolean;
+
+  /**
+   * Show ellipsis.
+   */
+  ellipsis?: boolean;
+
+  /**
+   * Show the first control.
+   */
+  showFirst?: boolean;
+
+  /**
+   * Show the last control.
+   */
+  showLast?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.navigation-pagination/{useAttrs.js → useAttrs.ts}

@@ -3,8 +3,11 @@ import useUI from "../composables/useUI.ts";
 
 import defaultConfig from "./config.js";
 
-export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
+import type { UseAttrs } from "../types.ts";
+import type { UPaginationProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UPaginationProps): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI<Config>(
     defaultConfig,
     () => props.config,
   );

package/ui.navigation-progress/StepperProgress.vue

@@ -1,3 +1,29 @@
+<script lang="ts" setup>
+import colors from "tailwindcss/colors.js";
+import { computed } from "vue";
+
+import { GRAY_COLORS } from "../constants.js";
+
+import useAttrs from "./useAttrs.ts";
+
+import type { StepperProgressProps } from "./types.ts";
+
+const props = withDefaults(defineProps<StepperProgressProps>(), {
+  dataTest: "",
+});
+
+const { stepperCircleAttrs, stepperCountAttrs, stepperGradientAttrs, stepperSvgAttrs } =
+  useAttrs(props);
+
+const stepperColor = computed(() => {
+  return colors[props.color]
+    ? colors[props.color][500]
+    : GRAY_COLORS.includes(props.color)
+      ? colors[props.color][900]
+      : colors.zinc[900];
+});
+</script>
+
 <template>
   <svg viewBox="0 0 40 40" v-bind="stepperSvgAttrs">
     <defs>
@@ -33,50 +59,3 @@
     </g>
   </svg>
 </template>
-
-<script setup>
-import colors from "tailwindcss/colors.js";
-import { computed } from "vue";
-
-import { GRAY_COLORS } from "../constants.js";
-
-import useAttrs from "./useAttrs.js";
-
-const props = defineProps({
-  progressPercent: {
-    type: String,
-    required: true,
-  },
-
-  value: {
-    type: Number,
-    required: true,
-  },
-
-  color: {
-    type: String,
-    required: true,
-  },
-
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  dataTest: {
-    type: String,
-    default: "",
-  },
-});
-
-const { stepperCircleAttrs, stepperCountAttrs, stepperGradientAttrs, stepperSvgAttrs } =
-  useAttrs(props);
-
-const stepperColor = computed(() => {
-  return colors[props.color]
-    ? colors[props.color][500]
-    : GRAY_COLORS.includes(props.color)
-      ? colors[props.color][900]
-      : colors.zinc[900];
-});
-</script>