vueless 0.0.2 → 0.0.3

package/ui.data-list/index.vue

@@ -1,89 +1,86 @@
 <template>
-  <div class="mono-table-list-wrapper">
-    <UDivider v-if="upperlined" size="xl" no-top-padding />
+  <div v-bind="wrapperAttrs">
+    <UDivider v-if="upperlined" size="xl" no-top-padding v-bind="dividerAttrs" />
 
     <UEmpty
       v-if="!hideEmptyStateForNesting && !list?.length"
       :description="emptyDescription"
       :title="emptyTitle"
+      v-bind="emptyAttrs"
     />
 
     <draggable
       v-else
-      v-bind="dragOptions"
       :list="list"
       item-key="id"
       :group="{ name: group }"
-      class="mono-table-list"
       handle=".icon-drag"
-      drag-class="draggable-item"
+      :ghost-class="config.draggableGhost"
+      :drag-class="config.draggableDrag"
       :data-cy="dataCy"
+      v-bind="draggableAttrs"
       :move="onDragMove"
       @end="onDragEnd"
     >
       <template #item="{ element }">
-        <div :id="element.id" class="mono-table-list-items" :data-cy="`${dataCy}-item`">
-          <div class="mono-table-list-item-parent" :data-cy="`${dataCy}-item-${element.id}`">
-            <div class="mono-table-list-item-left-wrapper">
-              <div class="mono-table-list-item-left">
-                <UIcon class="icon-drag" name="drag_indicator" color="gray" variant="light" />
-              </div>
+        <div :id="element.id" :data-cy="`${dataCy}-item`" v-bind="itemWrapperAttrs">
+          <div :data-cy="`${dataCy}-item-${element.id}`" v-bind="itemAttrs">
+            <UIcon :name="config.iconDragName" color="gray" v-bind="iconDragAttrs" />
 
-              <div
-                class="mono-table-list-item-left-title"
-                :class="getInactiveClass(element.isActive)"
-              >
-                <slot :item="element">
-                  {{ element.name }}
-                </slot>
-              </div>
+            <div v-bind="titleAttrs(element.isActive)">
+              <slot :item="element">
+                {{ element.name }}
+              </slot>
             </div>
 
-            <div v-if="!element.isHiddenAction" class="mono-table-list-item-right">
-              <div v-if="isShownIconsSlot && !element.isHiddenIconSlot" class="icon-wrapper">
+            <template v-if="!element.isHiddenAction">
+              <div
+                v-if="hasSlotContent($slots['icons']) && !element.isHiddenCustomActions"
+                v-bind="customActionsAttrs"
+              >
                 <!-- @slot Use it to add icons. -->
                 <slot name="icons" :item="element" />
               </div>
 
               <UIcon
-                v-if="!element.isHiddenIconRemove"
+                v-if="!element.isHiddenDelete"
                 interactive
-                class="icon-remove"
-                name="delete"
+                :name="config.iconDeleteName"
                 color="gray"
                 :data-cy="`${dataCy}-delete`"
                 :tooltip="$t('button.delete')"
+                v-bind="iconDeleteAttrs"
                 @click="onClickDelete(element.id, element.name)"
               />
 
               <UIcon
-                v-if="!element.isHiddenIconEdit"
+                v-if="!element.isHiddenEdit"
                 interactive
-                class="icon-edit"
-                name="edit_note"
+                :name="config.iconEditName"
                 color="gray"
                 :data-cy="`${dataCy}-edit`"
                 :tooltip="$t('button.edit')"
+                v-bind="iconEditAttrs"
                 @click="onClickEdit(element.id)"
               />
-            </div>
+            </template>
           </div>
 
           <UDataList
             v-if="nesting && !element.isDisabledNesting"
             :nesting="nesting"
             hide-empty-state-for-nesting
-            class="mono-table-list-nested"
             :list="element.children"
             :group="group"
             :data-cy="`${dataCy}-table`"
+            v-bind="nestedAttrs"
             @clickDelete="onClickDelete"
             @clickEdit="onClickEdit"
             @dragSort="onDragEnd"
           >
             <template #default="{ item }">
               <slot :item="item">
-                <div class="mono-table-list-item-left-title">{{ item.name }}</div>
+                <div v-bind="titleAttrs" v-text="item.name" />
               </slot>
             </template>
 
@@ -98,270 +95,164 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import draggable from "vuedraggable";
 
 import UIcon from "vueless/ui.image-icon";
 import UDivider from "vueless/ui.container-divider";
-
-export default {
-  name: "UDataList",
-
-  components: {
-    UIcon,
-    UDivider,
-    draggable,
+import UIService from "vueless/service.ui";
+
+import { UDataListName } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UDataList", inheritAttrs: true });
+
+const props = defineProps({
+  /**
+   * Data list array.
+   */
+  list: {
+    type: Array,
+    default: () => [],
   },
 
-  props: {
-    /**
-     * Set data list for component.
-     */
-    list: {
-      type: Array,
-      default: () => [],
-    },
-
-    /**
-     * Set group name.
-     */
-    group: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Enable or disable nesting.
-     */
-    nesting: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Sets empty state title when no data in a table.
-     */
-    emptyTitle: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Sets empty state description when no data in a table.
-     */
-    emptyDescription: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Add line divider above the list.
-     */
-    upperlined: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * @ignore
-     * Disable empty state for nested elements if empty (internal prorps).
-     */
-    hideEmptyStateForNesting: {
-      type: Boolean,
-      default: false,
-    },
+  /**
+   * Group name.
+   */
+  group: {
+    type: String,
+    default: "",
   },
 
-  emits: ["dragSort", "clickEdit", "clickDelete"],
-
-  computed: {
-    dragOptions() {
-      return {
-        animation: 200,
-        group: this.group,
-        disabled: false,
-        ghostClass: "ghost",
-      };
-    },
-
-    isShownIconsSlot() {
-      return !!this.$slots["icons"];
-    },
+  /**
+   * Enables nesting.
+   */
+  nesting: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDataListName).default.nesting,
   },
 
-  methods: {
-    onDragMove(event) {
-      const isDisabledNestingItem = event.draggedContext.element.isDisabledNesting;
-      const isNestingAction = !event.relatedContext.element?.isDisabledNesting;
-
-      if (isDisabledNestingItem && isNestingAction) {
-        return false;
-      }
-    },
-
-    getInactiveClass(isActive) {
-      return isActive !== undefined && !isActive ? "mono-table-list-item-left-title-inactive" : "";
-    },
-
-    onDragEnd() {
-      const sortData = this.prepareSortData(this.list);
-
-      this.$emit("dragSort", sortData);
-    },
-
-    onClickEdit(id) {
-      this.$emit("clickEdit", id);
-    },
-
-    onClickDelete(id, title) {
-      this.$emit("clickDelete", id, title);
-    },
-
-    prepareSortData(list, parentId) {
-      let sortData = [];
-
-      list.forEach((item) => {
-        let hasItemChildren = item?.children?.length;
-
-        if (hasItemChildren) {
-          let childrenItem = this.prepareSortData(item.children, item.id);
-
-          childrenItem.forEach((item) => {
-            sortData.push(item);
-          });
-        }
+  /**
+   * Empty state title.
+   */
+  emptyTitle: {
+    type: String,
+    default: "",
+  },
 
-        let parentItem = { ...item, parentId: 0 || parentId };
+  /**
+   * Empty state description.
+   */
+  emptyDescription: {
+    type: String,
+    default: "",
+  },
 
-        sortData.push(parentItem);
-      });
+  /**
+   * Drag animation duration.
+   */
+  animationDuration: {
+    type: Number,
+    default: UIService.get(defaultConfig, UDataListName).default.animationDuration,
+  },
 
-      return sortData;
-    },
+  /**
+   * Add line divider above the list.
+   */
+  upperlined: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDataListName).default.upperlined,
   },
-};
-</script>
 
-<style lang="postcss" scoped>
-.ghost {
-  @apply bg-gray-100 bg-opacity-50;
-}
+  /**
+   * @ignore
+   * Disable empty state for nested elements if empty (internal prorps).
+   */
+  hideEmptyStateForNesting: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDataListName).default.hideEmptyStateForNesting,
+  },
 
-.draggable-item {
-  @apply bg-gray-100;
-  @apply border-b-0;
-}
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-.sortable-chosen {
-  .mono-table-list-item-parent {
-    @apply border-b-0;
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["dragSort", "clickEdit", "clickDelete"]);
+
+const {
+  config,
+  wrapperAttrs,
+  dividerAttrs,
+  emptyAttrs,
+  draggableAttrs,
+  nestedAttrs,
+  itemWrapperAttrs,
+  itemAttrs,
+  titleAttrs,
+  customActionsAttrs,
+  iconDeleteAttrs,
+  iconEditAttrs,
+  iconDragAttrs,
+  hasSlotContent,
+} = useAttrs(props);
+
+function onDragMove(event) {
+  const isDisabledNestingItem = event.draggedContext.element.isDisabledNesting;
+  const isNestingAction = !event.relatedContext.element?.isDisabledNesting;
+
+  if (isDisabledNestingItem && isNestingAction) {
+    return false;
   }
 }
 
-.mono-table-list {
-  &-nested {
-    @apply ml-6;
-  }
-
-  &-item {
-    &-parent {
-      @apply flex flex-auto items-center justify-between;
-      @apply py-4 space-x-4;
-      @apply border border-l-0 border-r-0 border-t-0 border-solid border-gray-100;
-
-      &:hover {
-        :deep(.mono-svg-icon) {
-          @apply md:opacity-100;
-          @apply md:transition md:duration-100 md:ease-in-out;
-        }
-
-        .icon-wrapper,
-        .icon-remove {
-          @apply md:opacity-100;
-        }
-      }
-    }
-
-    &-left {
-      @apply flex items-center;
+function onDragEnd() {
+  const sortData = prepareSortData(props.list);
 
-      &-wrapper {
-        @apply flex space-x-4 items-center;
-      }
-
-      &-title {
-        @apply flex-auto;
-        @apply text-base font-normal text-gray-900;
-        @apply pt-px;
+  emit("dragSort", sortData);
+}
 
-        &-inactive {
-          @apply line-through;
-        }
-      }
-    }
+function onClickEdit(id) {
+  emit("clickEdit", id);
+}
 
-    &-right {
-      @apply flex flex-none items-center justify-end;
-      @apply w-28 space-x-5;
-    }
-  }
+function onClickDelete(id, title) {
+  emit("clickDelete", id, title);
+}
 
-  &-items {
-    &:last-child {
-      .mono-table-list-item-parent {
-        @apply border-b-0;
-      }
-    }
-  }
+function prepareSortData(list, parentId) {
+  let sortData = [];
 
-  &-nested {
-    .mono-table-list-items {
-      &:last-child {
-        .mono-table-list-item-parent {
-          @apply border-b;
-        }
-      }
-    }
-  }
-}
+  list.forEach((item) => {
+    let hasItemChildren = item?.children?.length;
 
-.icon {
-  &-wrapper {
-    @apply md:items-center space-x-5 hidden md:flex;
-    @apply opacity-50 md:opacity-0;
-  }
+    if (hasItemChildren) {
+      let childrenItem = prepareSortData(item.children, item.id);
 
-  &-edit {
-    :deep(svg) {
-      @apply fill-gray-500 opacity-50;
+      childrenItem.forEach((item) => {
+        sortData.push(item);
+      });
     }
-  }
-
-  &-remove {
-    @apply hidden md:block md:opacity-0;
-  }
 
-  &-drag {
-    @apply cursor-move;
+    let parentItem = { ...item, parentId: 0 || parentId };
 
-    :deep(svg) {
-      @apply fill-gray-400;
-      @apply opacity-100;
-    }
+    sortData.push(parentItem);
+  });
 
-    &:hover {
-      :deep(svg) {
-        @apply md:fill-gray-500;
-      }
-    }
-  }
+  return sortData;
 }
-</style>
+</script>

package/ui.data-table/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "vueless/service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />