vueless 0.0.2 → 0.0.4

package/ui.data-list/index.vue

@@ -1,367 +0,0 @@
-<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

@@ -1,99 +0,0 @@
-<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

@@ -1,46 +0,0 @@
-<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

@@ -1,109 +0,0 @@
-<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>