Rename datalist item keys

vuelessjs · Feb 23, 2025 · 3215452 · 3215452
1 parent 6f6c0b0
commit 3215452
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 35 deletions.
diff --git a/src/ui.image-icon/assets/cloud-moon.svg → src/assets/icons/vueless/cloud-moon.svg b/src/ui.image-icon/assets/cloud-moon.svg → src/assets/icons/vueless/cloud-moon.svg
diff --git a/src/ui.data-list/UDataList.vue b/src/ui.data-list/UDataList.vue
@@ -51,12 +51,12 @@ const i18nGlobal = tm(COMPONENT_NAME);
 const currentLocale = computed(() => merge({}, defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
 function isActive(element: DataListItem) {
-  return element.isActive === undefined || element.isActive;
+  return element.active === undefined || element.active;
 }
 
 function onDragMove(event: DragMoveEvent): boolean | void {
-  const isDisabledNestingItem = event.draggedContext.element.isDisabledNesting;
-  const isNestingAction = !event.relatedContext?.element?.isDisabledNesting;
+  const isDisabledNestingItem = event.draggedContext.element.nesting === false;
+  const isNestingAction = !event.relatedContext?.element?.nesting === false;
 
   if (isDisabledNestingItem && isNestingAction) {
     return false;
@@ -119,7 +119,7 @@ const {
   deleteIconAttrs,
   editIconAttrs,
   dragIconAttrs,
-  dragIconWrapperAttrs,
+  dragAttrs,
 } = useUI<Config>(defaultConfig);
 </script>
 
@@ -160,7 +160,7 @@ const {
       <template #item="{ element }">
         <div :id="element[valueKey]" v-bind="itemWrapperAttrs" :data-test="getDataTest('item')">
           <div v-bind="itemAttrs" :data-test="getDataTest(`item-${element[valueKey]}`)">
-            <div v-bind="dragIconWrapperAttrs">
+            <div v-bind="dragAttrs">
               <!--
                 @slot Use it to add something instead of the drag icon.
                 @binding {object} item
@@ -188,9 +188,9 @@ const {
               </slot>
             </div>
 
-            <template v-if="!element.isHiddenActions">
+            <template v-if="!element.hideActions">
               <div
-                v-if="hasSlotContent($slots['actions']) && !element.isHiddenCustomActions"
+                v-if="hasSlotContent($slots['actions']) && !element.hideCustomActions"
                 v-bind="customActionsAttrs"
               >
                 <!--
@@ -207,7 +207,7 @@ const {
               -->
               <slot name="delete" :item="element" :icon-name="config.defaults.deleteIcon">
                 <UIcon
-                  v-if="!element.isHiddenDelete"
+                  v-if="!element.hideDelete"
                   internal
                   interactive
                   color="red"
@@ -226,7 +226,7 @@ const {
               -->
               <slot name="edit" :item="element" :icon-name="config.defaults.editIcon">
                 <UIcon
-                  v-if="!element.isHiddenEdit"
+                  v-if="!element.hideEdit"
                   internal
                   interactive
                   color="gray"
@@ -241,7 +241,7 @@ const {
           </div>
 
           <UDataList
-            v-if="nesting && !element.isDisabledNesting"
+            v-if="nesting && !element.nesting"
             :nesting="nesting"
             hide-empty-state-for-nesting
             :list="element.children"

diff --git a/src/ui.data-list/config.ts b/src/ui.data-list/config.ts
@@ -29,7 +29,7 @@ export default /*tw*/ {
       },
     },
   },
-  dragIconWrapper: "icon-drag cursor-move",
+  drag: "icon-drag cursor-move",
   dragIcon: "{UIcon} {>dataListIcon} icon-drag cursor-move opacity-100",
   label: {
     base: "font-normal flex-auto pt-px",

diff --git a/src/ui.data-list/storybook/docs.mdx b/src/ui.data-list/storybook/docs.mdx
@@ -17,17 +17,17 @@ You can configure any item in a `list` array by passing the following params:
 
 <Markdown>
 {`
-|  Key name             | Description                             | Type           |
-| ----------------------| --------------------------------------- | ---------------|
-| id                    | Unique item identifier                  | String, Number |
-| label                 | Item label                              | String         |
-| children              | Nested items                            | Array          |        
-| isActive              | Option value                            | Boolean        |
-| isHiddenActions       | Hide default and custom action buttons  | Boolean        |
-| isHiddenCustomActions | Hide only custom action buttons         | Boolean        |
-| isHiddenDelete        | Hide delete button                      | Boolean        |
-| isHiddenEdit          | Hide edit button                        | Boolean        |
-| isDisabledNesting     | Disable nesting for the item            | Boolean        |
+|  Key name             | Description                                            | Type           |
+| ----------------------| ------------------------------------------------------ | ---------------|
+| id                    | Unique item identifier                                 | String, Number |
+| label                 | Item label                                             | String         |
+| children              | Nested items                                           | Array          |        
+| active                | Controls item style (false = line-through decoration)  | Boolean        |
+| hideActions           | Hide default and custom action buttons                 | Boolean        |
+| hideCustomActions     | Hide only custom action buttons                        | Boolean        |
+| hideDelete            | Hide delete button                                     | Boolean        |
+| hideEdit              | Hide edit button                                       | Boolean        |
+| nesting               | Disable nesting for the item                           | Boolean        |
 `}
 </Markdown>
 

diff --git a/src/ui.data-list/storybook/stories.ts b/src/ui.data-list/storybook/stories.ts
@@ -126,11 +126,7 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const EmptyState = DefaultTemplate.bind({});
-EmptyState.args = {
-  list: [],
-  emptyTitle: "The list is empty.",
-  emptyDescription: "There is no data in the list.",
-};
+EmptyState.args = { list: [] };
 EmptyState.parameters = {
   docs: {
     description: {

diff --git a/src/ui.data-list/types.ts b/src/ui.data-list/types.ts
@@ -12,12 +12,12 @@ export interface DragMoveEvent extends DragEvent {
 }
 
 export interface DataListItem {
-  isActive?: boolean;
-  isHiddenActions?: boolean;
-  isHiddenCustomActions?: boolean;
-  isHiddenDelete?: boolean;
-  isHiddenEdit?: boolean;
-  isDisabledNesting?: boolean;
+  active?: boolean;
+  hideActions?: boolean;
+  hideCustomActions?: boolean;
+  hideDelete?: boolean;
+  hideEdit?: boolean;
+  nesting?: boolean;
   children?: DataListItem[];
   [key: string]: UnknownType | DataListItem[];
 }

diff --git a/src/ui.image-icon/storybook/stories.ts b/src/ui.image-icon/storybook/stories.ts
@@ -9,7 +9,7 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
 import tooltip from "../../directives/tooltip/vTooltip.ts";
 
-import CloudMoon from "../assets/cloud-moon.svg?component";
+import CloudMoon from "../../assets/icons/vueless/cloud-moon.svg?component";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -83,7 +83,7 @@ Src.parameters = {
     description: {
       story:
         // eslint-disable-next-line vue/max-len
-        "To use a custom icon, import it with the suffix `?component` and pass the imported component in the `src` prop, like this: <br/> `import CloudMoon from '../assets/cloud-moon.svg?component'`",
+        "To use a custom icon, import it with the suffix `?component` and pass the imported component in the `src` prop, like this: <br/> `import CloudMoon from '../../assets/icons/vueless/cloud-moon.svg?component'`",
     },
   },
 };