vueless 0.0.532 → 0.0.534

package/package.json

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

package/types.ts

@@ -35,6 +35,12 @@ import URowConfig from "./ui.container-row/config.ts";
 import ULoaderConfig from "./ui.loader/config.ts";
 import ULoaderOverlayConfig from "./ui.loader-overlay/config.ts";
 import ULoaderProgressConfig from "./ui.loader-progress/config.ts";
+import UPaginationConfig from "./ui.navigation-pagination/config.ts";
+import UProgressConfig from "./ui.navigation-progress/config.ts";
+import UTabConfig from "./ui.navigation-tab/config.ts";
+import UTabsConfig from "./ui.navigation-tabs/config.ts";
+import UAvatarConfig from "./ui.image-avatar/config.ts";
+import UIconConfig from "./ui.image-icon/config.ts";
 
 import type { ComputedRef, MaybeRef, Ref } from "vue";
 import type { Props } from "tippy.js";
@@ -181,6 +187,12 @@ export interface Components {
   ULoader?: Partial<typeof ULoaderConfig>;
   ULoaderOverlay?: Partial<typeof ULoaderOverlayConfig>;
   ULoaderProgress?: Partial<typeof ULoaderProgressConfig>;
+  UPagination?: Partial<typeof UPaginationConfig>;
+  UProgress?: Partial<typeof UProgressConfig>;
+  UTab?: Partial<typeof UTabConfig>;
+  UTabs?: Partial<typeof UTabsConfig>;
+  UAvatar?: Partial<typeof UAvatarConfig>;
+  UIcon?: Partial<typeof UIconConfig>;
 }
 
 export interface Directives {

package/ui.data-table/UTable.vue

@@ -3,7 +3,6 @@ import {
   ref,
   computed,
   watch,
-  toValue,
   useSlots,
   nextTick,
   onMounted,
@@ -39,6 +38,7 @@ import { useLocale } from "../composables/useLocale.ts";
 
 import type { Cell, Row, RowId, UTableProps, UTableRowAttrs } from "./types.ts";
 import type { Ref, RendererElement, ComputedRef } from "vue";
+import { isEqual } from "lodash-es";
 
 defineOptions({ inheritAttrs: false });
 
@@ -254,7 +254,15 @@ const tableRowAttrs = computed(() => ({
 
 watch(selectAll, onChangeSelectAll, { deep: true });
 watch(selectedRows, onChangeSelectedRows, { deep: true });
-watch(tableRows, () => emit("update:rows", toValue(tableRows)), { deep: true });
+watch(
+  tableRows,
+  () => {
+    if (!isEqual(tableRows.value, props.rows)) {
+      emit("update:rows", tableRows.value);
+    }
+  },
+  { deep: true },
+);
 watch(() => tableRows.value.length, updateSelectedRows);
 watch(() => props.rows, synchronizeTableItemsWithProps, { deep: true });
 watch(isHeaderSticky, setHeaderCellWidth);
@@ -337,7 +345,9 @@ function synchronizeTableItemsWithProps() {
     selectedRows.value = [];
   }
 
-  tableRows.value = props.rows;
+  if (!isEqual(tableRows.value, props.rows)) {
+    tableRows.value = props.rows;
+  }
 }
 
 function updateSelectedRows() {
@@ -379,11 +389,11 @@ function onChangeSelectAll(selectAll: boolean) {
   if (selectAll && canSelectAll.value) {
     selectedRows.value = getFlatRows(tableRows.value).map((row) => row.id);
 
-    tableRows.value.forEach((row) => switchRowCheck(row, true));
+    tableRows.value = tableRows.value.map((row) => switchRowCheck({ ...row }, true));
   } else if (!selectAll) {
     selectedRows.value = [];
 
-    tableRows.value.forEach((row) => switchRowCheck(row, false));
+    tableRows.value = tableRows.value.map((row) => switchRowCheck({ ...row }, false));
   }
 
   canSelectAll.value = true;
@@ -406,8 +416,7 @@ function clearSelectedItems() {
 }
 
 function onToggleRowVisibility(rowId: string | number) {
-  // TODO: Use map instead of forEach to get rid of implicit array mutation.
-  tableRows.value.forEach((row) => toggleRowVisibility(row, rowId));
+  tableRows.value = tableRows.value.map((row) => toggleRowVisibility({ ...row }, rowId));
 }
 
 defineExpose({

package/ui.data-table/UTableRow.vue

@@ -290,8 +290,6 @@ function getRowAttrs(rowId: string | number) {
             :data-test="`${dataTest}-${key}-cell`"
           >
             {{ formatCellValue(value) }}
-
-            {{ nestedRows }}
           </div>
         </slot>
       </template>

package/ui.data-table/utilTable.ts

@@ -50,7 +50,7 @@ export function toggleRowVisibility(row: Row, targetRowId: string | number) {
       row.nestedData.isHidden = !row.nestedData.isHidden;
     }
 
-    return;
+    return row;
   }
 
   if (row.row && !Array.isArray(row.row)) {
@@ -64,6 +64,8 @@ export function toggleRowVisibility(row: Row, targetRowId: string | number) {
   if (row.nestedData) {
     toggleRowVisibility(row.nestedData, targetRowId);
   }
+
+  return row;
 }
 
 export function switchRowCheck(row: Row, isChecked: boolean) {
@@ -76,6 +78,8 @@ export function switchRowCheck(row: Row, isChecked: boolean) {
   if (row.row && Array.isArray(row.row)) {
     row.row.map((currentRow) => switchRowCheck(currentRow, isChecked));
   }
+
+  return row;
 }
 
 export function getFlatRows(tableRows: Row[]) {

package/ui.image-avatar/UAvatar.vue

@@ -1,125 +1,24 @@
-<template>
-  <div
-    :title="label"
-    :style="backgroundImage"
-    :data-test="dataTest"
-    v-bind="avatarAttrs"
-    @click="onClick"
-  >
-    <template v-if="!backgroundImage">
-      <template v-if="labelFirstLetters">{{ labelFirstLetters }}</template>
-      <!--
-        @slot Use it to add something instead of the avatar image placeholder.
-        @binding {string} icon-name
-        @binding {string} icon-color
-        @binding {string} icon-size
-      -->
-      <slot
-        v-else
-        name="placeholder"
-        :icon-name="placeholderIcon"
-        :icon-color="componentColor"
-        :icon-size="size"
-      >
-        <UIcon
-          internal
-          :size="size"
-          :color="componentColor"
-          :name="placeholderIcon"
-          v-bind="placeholderIconAttrs"
-        />
-      </slot>
-    </template>
-  </div>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { computed } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import { getDefault } from "../utils/ui.ts";
 
-import { UAvatar } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Avatar image source.
-   */
-  src: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Avatar label (username, nickname, etc.).
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Avatar placeholder icon.
-   */
-  placeholderIcon: {
-    type: String,
-    default: getDefault(defaultConfig, UAvatar).placeholderIcon,
-  },
-
-  /**
-   * Avatar size.
-   * @values 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UAvatar).size,
-  },
-
-  /**
-   * Avatar 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, UAvatar).color,
-  },
+import { UAvatar } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
 
-  /**
-   * Avatar corner rounding.
-   * @values dynamic, none, sm, md, lg, full
-   */
-  rounded: {
-    type: String,
-    default: getDefault(defaultConfig, UAvatar).rounded,
-  },
+import type { UAvatarProps } from "./types.ts";
 
-  /**
-   * Add border to the avatar.
-   */
-  bordered: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UAvatar).bordered,
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
+defineOptions({ inheritAttrs: false });
 
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+const props = withDefaults(defineProps<UAvatarProps>(), {
+  placeholderIcon: getDefault<UAvatarProps>(defaultConfig, UAvatar).placeholderIcon,
+  size: getDefault<UAvatarProps>(defaultConfig, UAvatar).size,
+  color: getDefault<UAvatarProps>(defaultConfig, UAvatar).color,
+  rounded: getDefault<UAvatarProps>(defaultConfig, UAvatar).rounded,
+  bordered: getDefault<UAvatarProps>(defaultConfig, UAvatar).bordered,
+  dataTest: "",
 });
 
 const emit = defineEmits([
@@ -132,6 +31,8 @@ const emit = defineEmits([
 const { avatarAttrs, placeholderIconAttrs } = useAttrs(props);
 
 const labelFirstLetters = computed(() => {
+  if (!props.label) return "";
+
   const [firstWord, secondWord] = props.label.split(" ");
 
   const firstWordLetter = firstWord ? firstWord[0].toUpperCase() : "";
@@ -151,7 +52,42 @@ const componentColor = computed(() => {
   return props.color === "white" ? "grayscale" : props.color;
 });
 
-function onClick(event) {
+function onClick(event: Event) {
   emit("click", event);
 }
 </script>
+
+<template>
+  <div
+    :title="label"
+    :style="backgroundImage"
+    :data-test="dataTest"
+    v-bind="avatarAttrs"
+    @click="onClick"
+  >
+    <template v-if="!backgroundImage">
+      <template v-if="labelFirstLetters">{{ labelFirstLetters }}</template>
+      <!--
+        @slot Use it to add something instead of the avatar image placeholder.
+        @binding {string} icon-name
+        @binding {string} icon-color
+        @binding {string} icon-size
+      -->
+      <slot
+        v-else
+        name="placeholder"
+        :icon-name="placeholderIcon"
+        :icon-color="componentColor"
+        :icon-size="size"
+      >
+        <UIcon
+          internal
+          :size="size"
+          :color="componentColor"
+          :name="placeholderIcon"
+          v-bind="placeholderIconAttrs"
+        />
+      </slot>
+    </template>
+  </div>
+</template>

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

@@ -5,6 +5,14 @@ import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import ULoader from "../../ui.loader/ULoader.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UAvatarProps } from "../types.ts";
+
+interface UAvatarArgs extends UAvatarProps {
+  slotTemplate?: string;
+  enum: "size" | "rounded" | "color";
+}
+
 /**
  * The `UAvatar` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.image-avatar)
  */
@@ -15,9 +23,9 @@ export default {
   argTypes: {
     ...getArgTypes(UAvatar.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UAvatarArgs> = (args: UAvatarArgs) => ({
   components: { UAvatar, ULoader },
   setup() {
     const slots = getSlotNames(UAvatar.__name);
@@ -26,17 +34,17 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UAvatar v-bind="args">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UAvatar>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UAvatarArgs> = (args: UAvatarArgs, { argTypes }) => ({
   components: { UCol, URow, UAvatar },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `

package/ui.image-avatar/types.ts

@@ -0,0 +1,71 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UAvatarProps {
+  /**
+   * Avatar image source.
+   */
+  src?: string;
+
+  /**
+   * Avatar label (username, nickname, etc.).
+   */
+  label?: string;
+
+  /**
+   * Avatar placeholder icon.
+   */
+  placeholderIcon?: string;
+
+  /**
+   * Avatar size.
+   */
+  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+
+  /**
+   * Avatar color.
+   */
+  color?:
+    | "brand"
+    | "grayscale"
+    | "gray"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "white";
+
+  /**
+   * Avatar corner rounding.
+   */
+  rounded?: "dynamic" | "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Add border to the avatar.
+   */
+  bordered?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.image-avatar/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 { UAvatarProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UAvatarProps): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+
+  const keysAttrs = getKeysAttrs();
+
+  return {
+    config,
+    ...keysAttrs,
+    hasSlotContent,
+  };
+}

package/ui.image-icon/UIcon.vue

@@ -1,120 +1,24 @@
-<template>
-  <component
-    :is="dynamicComponent"
-    v-tooltip="tooltipConfig"
-    tabindex="-1"
-    v-bind="iconAttrs"
-    :data-test="dataTest"
-    @click="onClick"
-  />
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { computed, defineAsyncComponent } from "vue";
 import { vTooltip } from "../directives";
 import { getDefault } from "../utils/ui.ts";
 import { isSSR } from "../utils/helper.ts";
 import { VUELESS_ICONS_CACHED_DIR, VUELESS_LIBRARY } from "../constants.js";
 
-import { UIcon } from "./constants.js";
+import { UIcon } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Icon name.
-   */
-  name: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Icon source (svg as a vue component).
-   */
-  src: {
-    type: Object,
-    default: () => {},
-  },
-
-  /**
-   * Icon color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, black, white
-   */
-  color: {
-    type: String,
-    default: getDefault(defaultConfig, UIcon).color,
-  },
+import useAttrs from "./useAttrs.ts";
 
-  /**
-   * Icon size.
-   * @values 4xs, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UIcon).size,
-  },
+import type { UIconProps } from "./types.ts";
 
-  /**
-   * Icon variant.
-   * @values light, default, dark
-   */
-  variant: {
-    type: String,
-    default: getDefault(defaultConfig, UIcon).variant,
-  },
-
-  /**
-   * Make the icon interactive (cursor pointer, etc.).
-   */
-  interactive: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UIcon).interactive,
-  },
-
-  /**
-   * Add tooltip text on hover.
-   */
-  tooltip: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Tooltip settings.
-   * [See all settings here](https://kabbouchi.github.io/vue-tippy/4.0/features/placement.html).
-   */
-  tooltipSettings: {
-    type: Object,
-    default: () => {},
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+defineOptions({ inheritAttrs: false });
 
-  /**
-   * Mark that Icon used inside Vueless components (used to get icons from vueless library).
-   * @ignore
-   */
-  internal: {
-    type: Boolean,
-    default: false,
-  },
+const props = withDefaults(defineProps<UIconProps>(), {
+  color: getDefault<UIconProps>(defaultConfig, UIcon).color,
+  size: getDefault<UIconProps>(defaultConfig, UIcon).size,
+  variant: getDefault<UIconProps>(defaultConfig, UIcon).variant,
+  interactive: getDefault<UIconProps>(defaultConfig, UIcon).interactive,
+  dataTest: "",
 });
 
 const emit = defineEmits([
@@ -144,11 +48,11 @@ const dynamicComponent = computed(() => {
     generatedIcons.value.find(([path]) => path.includes(VUELESS_LIBRARY + "/" + props.name)),
   );
 
-  const userLibrary = config.value.defaults.library;
+  const userLibrary = config.value?.defaults?.library;
   const library = props.internal && isInternalIcon ? VUELESS_LIBRARY : userLibrary;
-  const weight = config.value.defaults.weight;
-  const style = config.value.defaults.style;
-  const isFill = props.name.endsWith(FILL_SUFFIX);
+  const weight = config.value?.defaults?.weight;
+  const style = config.value?.defaults?.style;
+  const isFill = props.name?.endsWith(FILL_SUFFIX);
   const name = props.name;
   const src = props.src;
 
@@ -161,7 +65,7 @@ const dynamicComponent = computed(() => {
   /* Dynamic import */
   if (!name) return "";
 
-  function getIcon(params) {
+  function getIcon(params: Array<string | number | undefined>) {
     const [, component] =
       generatedIcons.value.find(([path]) =>
         params.every(
@@ -216,7 +120,18 @@ const tooltipConfig = computed(() => ({
   content: props.tooltip,
 }));
 
-function onClick(event) {
+function onClick(event: Event) {
   emit("click", event);
 }
 </script>
+
+<template>
+  <component
+    :is="dynamicComponent"
+    v-tooltip="tooltipConfig"
+    tabindex="-1"
+    v-bind="iconAttrs"
+    :data-test="dataTest"
+    @click="onClick"
+  />
+</template>

package/ui.image-icon/storybook/Docs.mdx

@@ -1,7 +1,7 @@
 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 * as stories from "./stories.ts";
 import defaultConfig from "../config.ts?raw"
 
 <Meta of={stories} />