vueless 0.0.1

package/ui.data-list/index.vue

@@ -0,0 +1,367 @@
+<template>
+  <div class="mono-table-list-wrapper">
+    <UDivider v-if="upperlined" size="xl" no-top-padding />
+
+    <UEmpty
+      v-if="!hideEmptyStateForNesting && !list?.length"
+      :description="emptyDescription"
+      :title="emptyTitle"
+    />
+
+    <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"
+      :data-cy="dataCy"
+      :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
+                class="mono-table-list-item-left-title"
+                :class="getInactiveClass(element.isActive)"
+              >
+                <slot :item="element">
+                  {{ element.name }}
+                </slot>
+              </div>
+            </div>
+
+            <div v-if="!element.isHiddenAction" class="mono-table-list-item-right">
+              <div v-if="isShownIconsSlot && !element.isHiddenIconSlot" class="icon-wrapper">
+                <!-- @slot Use it to add icons. -->
+                <slot name="icons" :item="element" />
+              </div>
+
+              <UIcon
+                v-if="!element.isHiddenIconRemove"
+                interactive
+                class="icon-remove"
+                name="delete"
+                color="gray"
+                :data-cy="`${dataCy}-delete`"
+                :tooltip="$t('button.delete')"
+                @click="onClickDelete(element.id, element.name)"
+              />
+
+              <UIcon
+                v-if="!element.isHiddenIconEdit"
+                interactive
+                class="icon-edit"
+                name="edit_note"
+                color="gray"
+                :data-cy="`${dataCy}-edit`"
+                :tooltip="$t('button.edit')"
+                @click="onClickEdit(element.id)"
+              />
+            </div>
+          </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`"
+            @clickDelete="onClickDelete"
+            @clickEdit="onClickEdit"
+            @dragSort="onDragEnd"
+          >
+            <template #default="{ item }">
+              <slot :item="item">
+                <div class="mono-table-list-item-left-title">{{ item.name }}</div>
+              </slot>
+            </template>
+
+            <template #icons="{ item }">
+              <!-- @slot Use it to add icons. -->
+              <slot name="icons" :item="item" />
+            </template>
+          </UDataList>
+        </div>
+      </template>
+    </draggable>
+  </div>
+</template>
+
+<script>
+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,
+  },
+
+  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,
+    },
+  },
+
+  emits: ["dragSort", "clickEdit", "clickDelete"],
+
+  computed: {
+    dragOptions() {
+      return {
+        animation: 200,
+        group: this.group,
+        disabled: false,
+        ghostClass: "ghost",
+      };
+    },
+
+    isShownIconsSlot() {
+      return !!this.$slots["icons"];
+    },
+  },
+
+  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);
+          });
+        }
+
+        let parentItem = { ...item, parentId: 0 || parentId };
+
+        sortData.push(parentItem);
+      });
+
+      return sortData;
+    },
+  },
+};
+</script>
+
+<style lang="postcss" scoped>
+.ghost {
+  @apply bg-gray-100 bg-opacity-50;
+}
+
+.draggable-item {
+  @apply bg-gray-100;
+  @apply border-b-0;
+}
+
+.sortable-chosen {
+  .mono-table-list-item-parent {
+    @apply border-b-0;
+  }
+}
+
+.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;
+
+      &-wrapper {
+        @apply flex space-x-4 items-center;
+      }
+
+      &-title {
+        @apply flex-auto;
+        @apply text-base font-normal text-gray-900;
+        @apply pt-px;
+
+        &-inactive {
+          @apply line-through;
+        }
+      }
+    }
+
+    &-right {
+      @apply flex flex-none items-center justify-end;
+      @apply w-28 space-x-5;
+    }
+  }
+
+  &-items {
+    &:last-child {
+      .mono-table-list-item-parent {
+        @apply border-b-0;
+      }
+    }
+  }
+
+  &-nested {
+    .mono-table-list-items {
+      &:last-child {
+        .mono-table-list-item-parent {
+          @apply border-b;
+        }
+      }
+    }
+  }
+}
+
+.icon {
+  &-wrapper {
+    @apply md:items-center space-x-5 hidden md:flex;
+    @apply opacity-50 md:opacity-0;
+  }
+
+  &-edit {
+    :deep(svg) {
+      @apply fill-gray-500 opacity-50;
+    }
+  }
+
+  &-remove {
+    @apply hidden md:block md:opacity-0;
+  }
+
+  &-drag {
+    @apply cursor-move;
+
+    :deep(svg) {
+      @apply fill-gray-400;
+      @apply opacity-100;
+    }
+
+    &:hover {
+      :deep(svg) {
+        @apply md:fill-gray-500;
+      }
+    }
+  }
+}
+</style>

package/ui.data-table/components/DateSeparator.vue

@@ -0,0 +1,99 @@
+<template>
+  <tr>
+    <td :colspan="colsCount">
+      <div class="date-separator-wrap">
+        <div class="date-separator" :class="separatorClass"></div>
+        <div class="date" :class="titleClass">{{ title }}</div>
+        <div class="date-separator" :class="separatorClass"></div>
+      </div>
+    </td>
+  </tr>
+</template>
+
+<script>
+import DateService from "vueless/service.date";
+import { secondsToMilliseconds, isToday, isTomorrow, isYesterday } from "date-fns";
+
+export default {
+  name: "DateSeparator",
+
+  props: {
+    date: {
+      type: Number,
+      default: 0,
+    },
+
+    colsCount: {
+      type: Number,
+      default: 1,
+    },
+
+    i18n: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  data: () => ({
+    currentDateInMilliseconds: 0,
+  }),
+
+  computed: {
+    title() {
+      let title = "";
+
+      if (isToday(this.currentDateInMilliseconds)) {
+        title = this.i18n.today;
+      } else if (isTomorrow(this.currentDateInMilliseconds)) {
+        title = this.i18n.tomorrow;
+      } else if (isYesterday(this.currentDateInMilliseconds)) {
+        title = this.i18n.yesterday;
+      } else {
+        title = new DateService().dateConverter(this.date, "dateWithFullMonth");
+      }
+
+      return title;
+    },
+
+    separatorClass() {
+      return isToday(this.currentDateInMilliseconds) ? "border-yellow-500" : "border-gray-200";
+    },
+
+    titleClass() {
+      return isToday(this.currentDateInMilliseconds) ? "text-yellow-500" : "text-gray-400";
+    },
+  },
+
+  watch: {
+    date: {
+      handler: "onChangeDate",
+      immediate: true,
+    },
+  },
+
+  methods: {
+    onChangeDate() {
+      this.currentDateInMilliseconds = secondsToMilliseconds(this.date);
+    },
+  },
+};
+</script>
+
+<style lang="postcss" scoped>
+td {
+  @apply p-0 !important;
+
+  .date-separator-wrap {
+    @apply flex items-center justify-center;
+
+    .date {
+      @apply px-2 py-0.5;
+    }
+
+    .date-separator {
+      @apply w-full;
+      @apply border-t border-solid;
+    }
+  }
+}
+</style>

package/ui.data-table/components/EmptyTableMsg.vue

@@ -0,0 +1,46 @@
+<template>
+  <tbody>
+    <tr>
+      <td :colspan="colspan">
+        <slot>
+          <UEmpty class="my-8" :description="emptyTableMsg" size="sm" data-cy="empty-table-msg" />
+        </slot>
+      </td>
+    </tr>
+  </tbody>
+</template>
+
+<script>
+import UEmpty from "vueless/ui.text-empty";
+
+export default {
+  name: "EmptyTableMsg",
+
+  components: { UEmpty },
+
+  props: {
+    colspan: {
+      type: Number,
+      default: 1,
+    },
+
+    filters: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    i18n: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  computed: {
+    emptyTableMsg() {
+      const isFiltersApplied = !!Object.keys(this.filters).length;
+
+      return isFiltersApplied ? this.i18n.noResultsForFilters : this.i18n.noItems;
+    },
+  },
+};
+</script>

package/ui.data-table/components/TableCheckbox.vue

@@ -0,0 +1,109 @@
+<template>
+  <label class="checkbox-wrap">
+    <t-checkbox v-model="selected" :value="value" class="checkbox" :disabled="disabled" />
+  </label>
+</template>
+
+<script>
+import TCheckbox from "vueless/library.vue-tailwind-3/t-checkbox";
+
+export default {
+  name: "TableCheckbox",
+
+  components: { TCheckbox },
+
+  props: {
+    values: {
+      type: Array,
+      default: () => [],
+    },
+
+    value: {
+      type: Number,
+      default: null,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: ["update:values"],
+
+  computed: {
+    selected: {
+      get() {
+        return this.values;
+      },
+      set(values) {
+        this.$emit("update:values", values);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="postcss" scoped>
+.checkbox-wrap {
+  @apply flex max-w-max items-center;
+
+  .checkbox {
+    @apply border border-solid border-gray-300;
+    @apply h-5 w-5;
+
+    &:disabled {
+      @apply border-gray-100 bg-gray-100;
+    }
+
+    &:hover {
+      @apply border-gray-400;
+    }
+
+    &:focus {
+      @apply border-gray-500 ring-4 ring-gray-200;
+    }
+
+    &:active {
+      @apply border-gray-900 bg-gray-900;
+    }
+
+    &:checked {
+      @apply border-gray-900 bg-gray-900;
+    }
+  }
+}
+</style>
+
+<!-- Brand theme -->
+<style scoped lang="postcss">
+.brand-theme {
+  &.checkbox-wrap {
+    .checkbox {
+      @apply border-gray-300;
+
+      &:disabled {
+        @apply bg-brand bg-opacity-10;
+        @apply border-brand border-opacity-10;
+      }
+
+      &:hover {
+        @apply border-brand border-opacity-40;
+      }
+
+      &:focus {
+        @apply border-brand border-opacity-50;
+        @apply ring-4 ring-brand ring-opacity-15;
+      }
+
+      &:active {
+        @apply border-brand bg-brand;
+      }
+
+      &:checked {
+        @apply border-brand bg-brand;
+      }
+    }
+  }
+}
+</style>