vueless 0.0.2 → 0.0.3

package/ui.button-group/index.vue

@@ -1,165 +0,0 @@
-<template>
-  <div class="mono-button-group" :class="componentClasses" :data-cy="dataCy">
-    <slot>
-      <UButtonGroupItem
-        v-for="(item, index) in options"
-        :key="item.value"
-        :value="item.value"
-        :size="size"
-        :label="item.label"
-        :data-cy="`${dataCy}-item-${index}`"
-      />
-    </slot>
-  </div>
-</template>
-
-<script>
-import UButtonGroupItem from "vueless/ui.button-group-item";
-
-export default {
-  name: "UButtonGroup",
-
-  components: { UButtonGroupItem },
-
-  provide() {
-    return {
-      setButtonGroupSelectedItem: (value) => {
-        this.selectedItem = value;
-      },
-
-      getButtonGroupName: () => {
-        return this.name;
-      },
-
-      getButtonGroupSize: () => {
-        return this.size;
-      },
-
-      getButtonGroupValue: () => {
-        return this.selectedItem;
-      },
-    };
-  },
-
-  props: {
-    /**
-     * Set buttons name.
-     */
-    name: {
-      type: String,
-      required: true,
-      default: "",
-    },
-
-    /**
-     * Set data for buttons.
-     */
-    options: {
-      type: Array,
-      default: () => [],
-    },
-
-    /**
-     * Set current value.
-     */
-    modelValue: {
-      type: [String, Number],
-      default: "",
-    },
-
-    /**
-     * The size of the buttons.
-     * @values xs ,sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Fit buttons to the parent block.
-     */
-    wide: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["update:modelValue"],
-
-  computed: {
-    selectedItem: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
-
-    componentClasses() {
-      const wide = this.wide ? "mono-button-group-wide" : "";
-
-      return [wide];
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-button-group {
-  @apply flex space-x-px;
-
-  &-wide {
-    &:deep(.mono-button-group-item) {
-      @apply w-full;
-
-      .label {
-        @apply w-full justify-center;
-      }
-    }
-  }
-
-  &:deep(.mono-button-group-item) {
-    &:first-child {
-      .label {
-        @apply rounded-l-lg;
-      }
-    }
-
-    &:last-child {
-      .label {
-        @apply rounded-r-lg;
-      }
-    }
-  }
-
-  &:deep(.mono-link-wrapper) {
-    .mono-button-group-item {
-      .label {
-        @apply rounded-none;
-      }
-    }
-
-    &:first-child {
-      .label {
-        @apply rounded-l-lg;
-      }
-    }
-
-    &:last-child {
-      .label {
-        @apply rounded-r-lg;
-      }
-    }
-  }
-}
-</style>

package/ui.button-group-item/index.vue

@@ -1,283 +0,0 @@
-<template>
-  <div
-    ref="UButtonGroupItem"
-    :class="labelButtonsClasses"
-    class="mono-button-group-item"
-    :data-cy="dataCy"
-    @click="onClickSetValue"
-  >
-    <t-radio
-      :id="id"
-      v-model="selectedItem"
-      :class="radioButtonsClasses"
-      class="radio"
-      :name="buttonName"
-      :value="value"
-    />
-
-    <label :for="id" class="label">
-      <span v-if="isShownSlot.left" class="label-slot">
-        <!-- @slot Use it to add some content before label. -->
-        <slot name="left" />
-      </span>
-
-      <span v-if="label || isShownSlot.default" class="label-text label-slot">
-        {{ label }}
-        <!-- @slot Use it to add some content instead of label. -->
-        <slot />
-      </span>
-
-      <span v-if="isShownSlot.right" class="label-slot">
-        <!-- @slot Use it to some content after label. -->
-        <slot name="right" />
-      </span>
-    </label>
-  </div>
-</template>
-
-<script>
-import TRadio from "vueless/library.vue-tailwind-3/t-radio";
-
-export default {
-  name: "UButtonGroupItem",
-
-  components: { TRadio },
-
-  inject: [
-    "setButtonGroupSelectedItem",
-    "getButtonGroupName",
-    "getButtonGroupSize",
-    "getButtonGroupValue",
-  ],
-
-  props: {
-    /**
-     * The variant of the button.
-     * @values primary, secondary, thirdary, raw
-     */
-    variant: {
-      type: String,
-      default: "primary",
-    },
-    /**
-     * Set data for button.
-     */
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-
-    /**
-     * Set label.
-     */
-    label: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["update:value"],
-
-  data: () => ({
-    selectedItem: "",
-    buttonName: "",
-    size: "md",
-  }),
-
-  computed: {
-    labelButtonsClasses() {
-      const size = `size-${this.size}`;
-      const variant = `variant-${this.variant}`;
-
-      return [size, variant];
-    },
-
-    radioButtonsClasses() {
-      const radio = `radio-${this.variant}`;
-
-      return [radio];
-    },
-
-    isShownSlot() {
-      return {
-        default: !!this.$slots["default"],
-        left: !!this.$slots["left"],
-        right: !!this.$slots["right"],
-      };
-    },
-
-    id() {
-      return this.value + this.buttonName;
-    },
-  },
-
-  mounted() {
-    this.size = this.getButtonGroupSize ? this.getButtonGroupSize() : this.size;
-
-    this.selectedItem = this.getButtonGroupValue ? this.getButtonGroupValue() : this.selectedItem;
-
-    this.buttonName = this.getButtonGroupName ? this.getButtonGroupName() : "group";
-  },
-
-  methods: {
-    onClickSetValue() {
-      this.selectedItem = this.value;
-
-      if (this.setButtonGroupSelectedItem) this.setButtonGroupSelectedItem(this.value);
-
-      this.$emit("update:value", this.value);
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-button-group-item {
-  @apply rounded-none;
-
-  .radio {
-    @apply absolute -z-10 opacity-0;
-
-    &-primary {
-      &:focus {
-        & + .label {
-          @apply border-gray-100 bg-opacity-10;
-          @apply ring-4 ring-gray-600/15;
-        }
-      }
-
-      &:checked {
-        & + .label {
-          @apply bg-gray-900/15;
-        }
-      }
-    }
-
-    &-secondary {
-      &:focus {
-        & + .label {
-          @apply !text-opacity-100;
-          @apply !border-opacity-100;
-        }
-      }
-
-      &:checked {
-        & + .label {
-          @apply !text-opacity-100;
-          @apply !border-opacity-100;
-        }
-      }
-    }
-
-    &-thirdary {
-      & + .label {
-        @apply bg-transparent opacity-50;
-      }
-
-      &:focus {
-        & + .label {
-          @apply border-none bg-gray-100 bg-opacity-10 opacity-100;
-          @apply ring-0;
-        }
-      }
-
-      &:checked {
-        & + .label {
-          @apply bg-transparent opacity-100;
-        }
-      }
-    }
-  }
-
-  .label {
-    @apply flex items-center justify-between;
-    @apply cursor-pointer;
-
-    &-text {
-      @apply font-medium;
-    }
-
-    &-slot:deep(.mono-svg-icon) {
-      @apply block;
-    }
-  }
-
-  &.size {
-    &-sm {
-      .label {
-        @apply space-x-1.5 p-3.5;
-
-        &-text {
-          @apply text-sm;
-        }
-      }
-    }
-
-    &-md {
-      .label {
-        @apply space-x-2 p-[1.125rem];
-
-        &-text {
-          @apply text-base;
-        }
-      }
-    }
-
-    &-lg {
-      .label {
-        @apply space-x-2.5 p-[1.375rem];
-
-        &-text {
-          @apply text-lg;
-        }
-      }
-    }
-  }
-}
-
-.variant {
-  &-primary {
-    .label {
-      @apply bg-gray-900/5;
-
-      &:hover {
-        @apply bg-gray-900/10;
-      }
-
-      &:active {
-        @apply bg-gray-900/15;
-      }
-    }
-  }
-
-  &-secondary {
-    .label {
-      @apply !bg-transparent border;
-
-      &:hover {
-        @apply !text-opacity-80;
-        @apply !border-opacity-80;
-      }
-    }
-  }
-
-  &-thirdary {
-    .label {
-      @apply !bg-transparent border-none;
-
-      &:hover {
-        @apply border-none opacity-100;
-        @apply ring-0;
-      }
-    }
-  }
-}
-</style>

package/ui.container-modal/components/ArrowLink.vue

@@ -1,87 +0,0 @@
-<template>
-  <router-link
-    :to="{ name: backRoute.name, params: backRoute.params }"
-    class="arrow-link"
-    :data-cy="dataCy"
-  >
-    <t-button class="arrow-button" @click="onClick">
-      <UIcon class="icon" name="arrow_back" size="xs" color="gray" />
-
-      <div class="title">
-        {{ backRoute.title }}
-      </div>
-    </t-button>
-  </router-link>
-</template>
-
-<script>
-import UIcon from "vueless/ui.image-icon";
-import TButton from "vueless/library.vue-tailwind-3/t-button";
-
-export default {
-  name: "ArrowLink",
-
-  components: {
-    UIcon,
-    TButton,
-  },
-
-  props: {
-    backRoute: {
-      type: Object,
-      required: true,
-      default: () => ({
-        name: "",
-        title: "",
-        params: {},
-      }),
-      validator(backRoute) {
-        const isExistName = "name" in backRoute;
-        const isExistTitle = "title" in backRoute;
-
-        return isExistName && isExistTitle;
-      },
-    },
-
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["click"],
-
-  methods: {
-    onClick() {
-      this.$emit("click");
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.arrow {
-  &-link {
-    @apply block h-3.5;
-  }
-
-  &-button {
-    @apply inline-flex items-center;
-    @apply border-0 bg-transparent p-0 shadow-none;
-    @apply cursor-pointer;
-
-    &:hover {
-      @apply bg-transparent;
-    }
-
-    .title {
-      @apply text-xs font-normal text-gray-500;
-      @apply ml-0.5;
-    }
-
-    .icon:deep(g rect) {
-      @apply opacity-100;
-    }
-  }
-}
-</style>

package/ui.container-page/components/ArrowLink.vue

@@ -1,87 +0,0 @@
-<template>
-  <router-link
-    :to="{ name: backRoute.name, params: backRoute.params }"
-    class="arrow-link"
-    :data-cy="dataCy"
-  >
-    <t-button class="arrow-button" @click="onClick">
-      <UIcon class="icon" name="arrow_back" size="xs" color="gray" />
-
-      <div class="title">
-        {{ backRoute.title }}
-      </div>
-    </t-button>
-  </router-link>
-</template>
-
-<script>
-import UIcon from "vueless/ui.image-icon";
-import TButton from "vueless/library.vue-tailwind-3/t-button";
-
-export default {
-  name: "ArrowLink",
-
-  components: {
-    UIcon,
-    TButton,
-  },
-
-  props: {
-    backRoute: {
-      type: Object,
-      required: true,
-      default: () => ({
-        name: "",
-        title: "",
-        params: {},
-      }),
-      validator(backRoute) {
-        const isExistName = "name" in backRoute;
-        const isExistTitle = "title" in backRoute;
-
-        return isExistName && isExistTitle;
-      },
-    },
-
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["click"],
-
-  methods: {
-    onClick() {
-      this.$emit("click");
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.arrow {
-  &-link {
-    @apply block h-3.5;
-  }
-
-  &-button {
-    @apply inline-flex items-center;
-    @apply border-0 bg-transparent p-0 shadow-none;
-    @apply cursor-pointer;
-
-    &:hover {
-      @apply bg-transparent;
-    }
-
-    .title {
-      @apply text-xs font-normal text-gray-500;
-      @apply ml-0.5;
-    }
-
-    .icon:deep(g rect) {
-      @apply opacity-100;
-    }
-  }
-}
-</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>