vueless 0.0.566 → 0.0.568

package/composables/useUI.ts

@@ -34,7 +34,7 @@ import type {
  */
 export default function useUI<T>(
   defaultConfig: T & Component,
-  propsConfigGetter?: () => (T & Component) | undefined,
+  propsConfigGetter?: () => T & Component,
   topLevelClassKey?: string,
   mutatedProps?: ComputedRef,
 ): UseUI<T> {

package/package.json

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

package/types.ts

@@ -46,6 +46,7 @@ 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 UDataListConfig from "./ui.data-list/config.ts";
 
 import type { ComputedRef, MaybeRef, Ref, UnwrapRef } from "vue";
 import type { Props } from "tippy.js";
@@ -134,6 +135,7 @@ export interface Config extends ThemeConfig {
 
 export type UnknownObject = Record<string, unknown>;
 export type UnknownArray = Array<unknown>;
+export type UnknownType = string | number | boolean | UnknownObject | undefined | null;
 export type ComponentNames = keyof Components; // keys union
 export type Strategies = "merge" | "replace" | "override";
 export type Gray = "gray";
@@ -207,6 +209,7 @@ export interface Components {
   USwitch?: Partial<typeof USwitchConfig>;
   UTextarea?: Partial<typeof UTextareaConfig>;
   ULabel?: Partial<typeof ULabelConfig>;
+  UDataList?: Partial<typeof UDataListConfig>;
 }
 
 export interface Directives {

package/ui.button/UButton.vue

@@ -4,7 +4,7 @@ import { computed, ref, watchEffect, useId, watch, useSlots } from "vue";
 import useUI from "../composables/useUI.ts";
 import { useDarkMode } from "../composables/useDarkMode.ts";
 import { hasSlotContent } from "../utils/helper.ts";
-import { getDefault } from "../utils/ui.ts";
+import { getDefaults } from "../utils/ui.ts";
 
 import ULoader from "../ui.loader/ULoader.vue";
 import UIcon from "../ui.image-icon/UIcon.vue";
@@ -17,19 +17,7 @@ import type { UButtonProps, LoaderSize, IconSize, Config } from "./types.ts";
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<UButtonProps>(), {
-  variant: getDefault<UButtonProps>(defaultConfig, UButton).variant,
-  color: getDefault<UButtonProps>(defaultConfig, UButton).color,
-  size: getDefault<UButtonProps>(defaultConfig, UButton).size,
-  tag: getDefault<UButtonProps>(defaultConfig, UButton).tag,
-  tabindex: getDefault<UButtonProps>(defaultConfig, UButton).tabindex,
-  filled: getDefault<UButtonProps>(defaultConfig, UButton).filled,
-  disabled: getDefault<UButtonProps>(defaultConfig, UButton).disabled,
-  block: getDefault<UButtonProps>(defaultConfig, UButton).block,
-  round: getDefault<UButtonProps>(defaultConfig, UButton).round,
-  square: getDefault<UButtonProps>(defaultConfig, UButton).square,
-  loading: getDefault<UButtonProps>(defaultConfig, UButton).loading,
-  noRing: getDefault<UButtonProps>(defaultConfig, UButton).noRing,
-  dataTest: "",
+  ...getDefaults<UButtonProps>(defaultConfig, UButton),
 });
 
 const slots = useSlots();

package/ui.button/types.ts

@@ -1,6 +1,7 @@
 import defaultConfig from "./config.ts";
+import type { Component } from "../types.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = Partial<typeof defaultConfig> & Component;
 
 export type LoaderSize = "sm" | "md" | "lg";
 export type IconSize = "2xs" | "xs" | "sm" | "md";

package/ui.data-list/UDataList.vue

@@ -1,3 +1,150 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import draggable from "vuedraggable";
+import { merge } from "lodash-es";
+
+import { getDefault } from "../utils/ui.ts";
+import { hasSlotContent } from "../utils/helper.ts";
+
+import UIcon from "../ui.image-icon/UIcon.vue";
+import UEmpty from "../ui.text-empty/UEmpty.vue";
+
+import { UDataList as UDataListName } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
+import { useLocale } from "../composables/useLocale.ts";
+
+import type { UnknownObject } from "../types.ts";
+import type { UDataListProps, IconSize, DragMoveEvent, DataListItem } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<UDataListProps>(), {
+  size: getDefault<UDataListProps>(defaultConfig, UDataListName).size,
+  labelKey: getDefault<UDataListProps>(defaultConfig, UDataListName).labelKey,
+  valueKey: getDefault<UDataListProps>(defaultConfig, UDataListName).valueKey,
+  animationDuration: getDefault<UDataListProps>(defaultConfig, UDataListName).animationDuration,
+  nesting: getDefault<UDataListProps>(defaultConfig, UDataListName).nesting,
+  hideEmptyStateForNesting: false,
+  dataTest: "",
+  config: () => ({}),
+});
+
+const emit = defineEmits([
+  /**
+   * Triggers when item is sorted (after drag).
+   * @property {array} sortData
+   */
+  "dragSort",
+
+  /**
+   * Triggers when edit button is clicked.
+   * @property {number} value
+   * @property {string} label
+   */
+  "clickEdit",
+
+  /**
+   * Triggers when delete button is clicked.
+   * @property {number} value
+   * @property {string} label
+   */
+  "clickDelete",
+]);
+
+defineSlots<{
+  edit: { element: UnknownObject };
+  delete: { element: UnknownObject };
+  drag: { element: UnknownObject };
+  empty: {
+    emptyTitle: string;
+    emptyDescription: string;
+  };
+  label: { item: DataListItem; active: boolean };
+  actions: { item: DataListItem };
+}>();
+
+const {
+  config,
+  wrapperAttrs,
+  emptyAttrs,
+  draggableAttrs,
+  nestedAttrs,
+  itemWrapperAttrs,
+  itemAttrs,
+  labelAttrs,
+  labelCrossedAttrs,
+  customActionsAttrs,
+  deleteIconAttrs,
+  editIconAttrs,
+  dragIconAttrs,
+} = useAttrs(props);
+const { tm } = useLocale();
+
+const i18nGlobal = tm(UDataListName);
+const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
+
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+  };
+
+  return sizes[props.size] as IconSize;
+});
+
+function isActive(element: DataListItem) {
+  return element.isActive === undefined || element.isActive;
+}
+
+function onDragMove(event: DragMoveEvent): boolean | void {
+  const isDisabledNestingItem = event.draggedContext.element.isDisabledNesting;
+  const isNestingAction = !event.relatedContext?.element?.isDisabledNesting;
+
+  if (isDisabledNestingItem && isNestingAction) {
+    return false;
+  }
+}
+
+function onDragEnd() {
+  const sortData = prepareSortData(props.list);
+
+  emit("dragSort", sortData);
+}
+
+function onClickEdit(value: number, label: string) {
+  emit("clickEdit", value, label);
+}
+
+function onClickDelete(value: number, label: string) {
+  emit("clickDelete", value, label);
+}
+
+function prepareSortData(list: DataListItem[] = [], parentValue: string | number | null = null) {
+  const sortData: DataListItem[] = [];
+
+  list.forEach((item: DataListItem) => {
+    const hasItemChildren = item?.children?.length;
+
+    if (hasItemChildren) {
+      const childrenItem = prepareSortData(
+        item.children,
+        item[props.valueKey] as string | number | null,
+      );
+
+      childrenItem.forEach((item) => sortData.push(item));
+    }
+
+    const parentItem = { ...item, parentValue };
+
+    sortData.push(parentItem);
+  });
+
+  return sortData;
+}
+</script>
+
 <template>
   <div v-bind="wrapperAttrs">
     <!--
@@ -44,7 +191,7 @@
             <slot
               name="drag"
               :item="element"
-              :icon-name="config.defaults.dragIcon"
+              :icon-name="config.defaults?.dragIcon"
               :icon-size="iconSize"
             >
               <UIcon
@@ -52,7 +199,7 @@
                 color="gray"
                 variant="light"
                 :size="iconSize"
-                :name="config.defaults.dragIcon"
+                :name="config.defaults?.dragIcon"
                 v-bind="dragIconAttrs"
               />
             </slot>
@@ -89,7 +236,7 @@
               <slot
                 name="delete"
                 :item="element"
-                :icon-name="config.defaults.deleteIcon"
+                :icon-name="config.defaults?.deleteIcon"
                 :icon-size="iconSize"
               >
                 <UIcon
@@ -98,7 +245,7 @@
                   interactive
                   color="red"
                   :size="iconSize"
-                  :name="config.defaults.deleteIcon"
+                  :name="config.defaults?.deleteIcon"
                   :tooltip="currentLocale.delete"
                   v-bind="deleteIconAttrs"
                   :data-test="`${dataTest}-delete`"
@@ -115,7 +262,7 @@
               <slot
                 name="edit"
                 :item="element"
-                :icon-name="config.defaults.editIcon"
+                :icon-name="config.defaults?.editIcon"
                 :icon-size="iconSize"
               >
                 <UIcon
@@ -124,7 +271,7 @@
                   interactive
                   color="gray"
                   :size="iconSize"
-                  :name="config.defaults.editIcon"
+                  :name="config.defaults?.editIcon"
                   :tooltip="currentLocale.edit"
                   v-bind="editIconAttrs"
                   :data-test="`${dataTest}-edit`"
@@ -170,223 +317,3 @@
     </draggable>
   </div>
 </template>
-
-<script setup>
-import { computed } from "vue";
-import draggable from "vuedraggable";
-import { merge } from "lodash-es";
-
-import { getDefault } from "../utils/ui.ts";
-import { hasSlotContent } from "../utils/helper.ts";
-
-import UIcon from "../ui.image-icon/UIcon.vue";
-import UEmpty from "../ui.text-empty/UEmpty.vue";
-
-import { UDataList as UDataListName } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
-import { useLocale } from "../composables/useLocale.ts";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Data item options.
-   */
-  list: {
-    type: Array,
-    default: () => [],
-  },
-
-  /**
-   * Group name.
-   */
-  group: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Data list size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UDataListName).size,
-  },
-
-  /**
-   * Label key in the item object of options.
-   */
-  labelKey: {
-    type: String,
-    default: getDefault(defaultConfig, UDataListName).labelKey,
-  },
-
-  /**
-   * Value key in the item object of options.
-   */
-  valueKey: {
-    type: String,
-    default: getDefault(defaultConfig, UDataListName).valueKey,
-  },
-
-  /**
-   * Empty state title.
-   */
-  emptyTitle: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Empty state description.
-   */
-  emptyDescription: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Drag animation duration.
-   */
-  animationDuration: {
-    type: Number,
-    default: getDefault(defaultConfig, UDataListName).animationDuration,
-  },
-
-  /**
-   * Enable nesting.
-   */
-  nesting: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDataListName).nesting,
-  },
-
-  /**
-   * Disable empty state for nested elements if empty (internal props).
-   * @ignore
-   */
-  hideEmptyStateForNesting: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits([
-  /**
-   * Triggers when item is sorted (after drag).
-   * @property {array} sortData
-   */
-  "dragSort",
-
-  /**
-   * Triggers when edit button is clicked.
-   * @property {number} value
-   * @property {string} label
-   */
-  "clickEdit",
-
-  /**
-   * Triggers when delete button is clicked.
-   * @property {number} value
-   * @property {string} label
-   */
-  "clickDelete",
-]);
-
-const {
-  config,
-  wrapperAttrs,
-  emptyAttrs,
-  draggableAttrs,
-  nestedAttrs,
-  itemWrapperAttrs,
-  itemAttrs,
-  labelAttrs,
-  labelCrossedAttrs,
-  customActionsAttrs,
-  deleteIconAttrs,
-  editIconAttrs,
-  dragIconAttrs,
-} = useAttrs(props);
-const { tm } = useLocale();
-
-const i18nGlobal = tm(UDataListName);
-const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
-
-const iconSize = computed(() => {
-  const sizes = {
-    sm: "xs",
-    md: "sm",
-    lg: "md",
-  };
-
-  return sizes[props.size];
-});
-
-function isActive(element) {
-  return element.isActive === undefined || element.isActive;
-}
-
-function onDragMove(event) {
-  const isDisabledNestingItem = event.draggedContext.element.isDisabledNesting;
-  const isNestingAction = !event.relatedContext.element?.isDisabledNesting;
-
-  if (isDisabledNestingItem && isNestingAction) {
-    return false;
-  }
-}
-
-function onDragEnd() {
-  const sortData = prepareSortData(props.list);
-
-  emit("dragSort", sortData);
-}
-
-function onClickEdit(value, label) {
-  emit("clickEdit", value, label);
-}
-
-function onClickDelete(value, label) {
-  emit("clickDelete", value, label);
-}
-
-function prepareSortData(list, parentId) {
-  const sortData = [];
-
-  list.forEach((item) => {
-    const hasItemChildren = item?.children?.length;
-
-    if (hasItemChildren) {
-      const childrenItem = prepareSortData(item.children, item[props.valueKey]);
-
-      childrenItem.forEach((item) => {
-        sortData.push(item);
-      });
-    }
-
-    const parentItem = { ...item, parentId: 0 || parentId };
-
-    sortData.push(parentItem);
-  });
-
-  return sortData;
-}
-</script>

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

@@ -10,6 +10,13 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import UButton from "../../ui.button/UButton.vue";
 import URow from "../../ui.container-row/URow.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UDataListProps } from "../types.ts";
+
+interface UDataListArgs extends UDataListProps {
+  slotTemplate?: string;
+}
+
 export default {
   id: "7020",
   title: "Data / Data List",
@@ -45,9 +52,9 @@ export default {
   parameters: {
     ...getDocsDescription(UDataList.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UDataListArgs> = (args: UDataListArgs) => ({
   components: { UDataList, UIcon, URow, UButton },
   setup() {
     const slots = getSlotNames(UDataList.__name);
@@ -56,7 +63,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UDataList v-bind="args">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UDataList>
   `,
 });

package/ui.data-list/types.ts

@@ -0,0 +1,88 @@
+import defaultConfig from "./config.ts";
+
+import DraggableContext from "vuedraggable";
+
+import type { UnknownType } from "../types.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export type IconSize = "xs" | "sm" | "md";
+
+export interface DragMoveEvent extends DragEvent {
+  draggedContext: typeof DraggableContext;
+  relatedContext: typeof DraggableContext | null;
+}
+
+export interface DataListItem {
+  isActive?: boolean;
+  isHiddenActions?: boolean;
+  isHiddenCustomActions?: boolean;
+  isHiddenDelete?: boolean;
+  isHiddenEdit?: boolean;
+  isDisabledNesting?: boolean;
+  children?: DataListItem[];
+  [key: string]: UnknownType | DataListItem[];
+}
+
+export interface UDataListProps {
+  /**
+   * Data item options.
+   */
+  list?: DataListItem[];
+
+  /**
+   * Group name.
+   */
+  group?: string;
+
+  /**
+   * Data list size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey?: string;
+
+  /**
+   * Value key in the item object of options.
+   */
+  valueKey?: string;
+
+  /**
+   * Empty state title.
+   */
+  emptyTitle?: string;
+
+  /**
+   * Empty state description.
+   */
+  emptyDescription?: string;
+
+  /**
+   * Drag animation duration.
+   */
+  animationDuration?: number;
+
+  /**
+   * Enable nesting.
+   */
+  nesting?: boolean;
+
+  /**
+   * Disable empty state for nested elements if empty (internal props).
+   * @ignore
+   */
+  hideEmptyStateForNesting?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Config;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.data-list/useAttrs.ts

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

package/utils/ui.ts

@@ -94,9 +94,11 @@ export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVa
   });
 
 /**
+ * @deprecated
+ * TODO: remove if after all components migration into getDefaults()
  * Return default values for component props, icons, etc..
  */
-export function getDefault<T>(defaultConfig: Component, name: ComponentNames): T {
+export function getDefault<T>(defaultConfig: Component, name: ComponentNames) {
   const componentDefaults = cloneDeep(defaultConfig.defaults) || {};
   const globalDefaults = cloneDeep(vuelessConfig.component?.[name]?.defaults) || {};
 
@@ -106,7 +108,31 @@ export function getDefault<T>(defaultConfig: Component, name: ComponentNames): T
     defaults.color = getColor(defaults.color as BrandColors);
   }
 
-  return defaults;
+  return {
+    ...defaults,
+    dataTest: "",
+    config: () => {},
+  };
+}
+
+/**
+ * Return default values for component props, icons, etc..
+ */
+export function getDefaults<T>(defaultConfig: Component, name: ComponentNames) {
+  const componentDefaults = cloneDeep(defaultConfig.defaults) || {};
+  const globalDefaults = cloneDeep(vuelessConfig.component?.[name]?.defaults) || {};
+
+  const defaults = merge(componentDefaults, globalDefaults) as T & Defaults;
+
+  if (defaults.color) {
+    defaults.color = getColor(defaults.color as BrandColors);
+  }
+
+  return {
+    ...defaults,
+    dataTest: "",
+    config: () => ({}),
+  };
 }
 
 /**

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.566",
+  "version": "0.0.568",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1027,8 +1027,7 @@
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "\"\""
+              }
             }
           ],
           "slots": [
@@ -2630,24 +2629,28 @@
           "attributes": [
             {
               "name": "list",
+              "required": false,
               "description": "Data item options.",
+              "enum": [
+                "DataListItem"
+              ],
               "value": {
                 "kind": "expression",
-                "type": "array"
-              },
-              "default": "[]"
+                "type": "Array"
+              }
             },
             {
               "name": "group",
+              "required": false,
               "description": "Group name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "\"\""
+              }
             },
             {
               "name": "size",
+              "required": false,
               "description": "Data list size.",
               "enum": [
                 "sm",
@@ -2656,12 +2659,13 @@
               ],
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "union"
               },
               "default": "md"
             },
             {
               "name": "labelKey",
+              "required": false,
               "description": "Label key in the item object of options.",
               "value": {
                 "kind": "expression",
@@ -2671,6 +2675,7 @@
             },
             {
               "name": "valueKey",
+              "required": false,
               "description": "Value key in the item object of options.",
               "value": {
                 "kind": "expression",
@@ -2680,24 +2685,25 @@
             },
             {
               "name": "emptyTitle",
+              "required": false,
               "description": "Empty state title.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "\"\""
+              }
             },
             {
               "name": "emptyDescription",
+              "required": false,
               "description": "Empty state description.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "\"\""
+              }
             },
             {
               "name": "animationDuration",
+              "required": false,
               "description": "Drag animation duration.",
               "value": {
                 "kind": "expression",
@@ -2707,6 +2713,7 @@
             },
             {
               "name": "nesting",
+              "required": false,
               "description": "Enable nesting.",
               "value": {
                 "kind": "expression",
@@ -2716,6 +2723,7 @@
             },
             {
               "name": "hideEmptyStateForNesting",
+              "required": false,
               "description": "@ignore: Disable empty state for nested elements if empty (internal props).",
               "value": {
                 "kind": "expression",
@@ -2725,15 +2733,17 @@
             },
             {
               "name": "config",
+              "required": false,
               "description": "Component config object.",
               "value": {
                 "kind": "expression",
-                "type": "object"
+                "type": "Config"
               },
-              "default": "{}"
+              "default": "() => ({})"
             },
             {
               "name": "dataTest",
+              "required": false,
               "description": "Data-test attribute for automated testing.",
               "value": {
                 "kind": "expression",

package/ui.data-list/useAttrs.js

@@ -1,9 +0,0 @@
-import useUI from "../composables/useUI.ts";
-
-import defaultConfig from "./config.js";
-
-export default function useAttrs(props) {
-  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
-
-  return { config, ...getKeysAttrs() };
-}