vueless 0.0.2 → 0.0.4

package/ui.image-logo/index.vue

@@ -1,184 +0,0 @@
-<template>
-  <div class="mono-logo-wrapper" :data-cy="dataCy" @click="onClick">
-    <div class="mono-logo" :class="sizeClass">
-      <div v-if="label" class="mono-logo-label">
-        {{ label }}
-      </div>
-
-      <div class="mono-logo-image" :style="bgImage" />
-    </div>
-
-    <div v-if="title" class="mono-logo-title" :class="sizeTitleClass">
-      {{ title }}
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "ULogo",
-
-  props: {
-    /**
-     * Set the path for img.
-     */
-    path: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set label for component.
-     */
-    label: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set title for component.
-     */
-    title: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * The size of title.
-     * @values 2xs, xs, sm, md, lg, xl, 2xl
-     */
-    sizeTitle: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * The size of the logo.
-     * @values 2xs, xs, sm, md, lg, xl, 2xl, 3xl
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["click"],
-
-  computed: {
-    bgImage() {
-      let path = this.path.includes("http") ? this.path : import.meta.env.BASE_URL + this.path;
-
-      return `background-image: url(${path});`;
-    },
-
-    sizeClass() {
-      return `mono-logo-size-${this.size}`;
-    },
-
-    sizeTitleClass() {
-      return `mono-logo-size-${this.sizeTitle}-title`;
-    },
-  },
-
-  methods: {
-    onClick() {
-      this.$emit("click");
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-logo-wrapper {
-  @apply flex items-center;
-
-  .mono-logo {
-    @apply relative;
-
-    &-label {
-      @apply bg-red-500 text-xs font-medium text-white;
-      @apply rounded-full;
-      @apply absolute -right-7 -top-1.5 px-2 py-0.5;
-    }
-
-    &-image {
-      @apply h-full w-full;
-      @apply bg-contain bg-center bg-no-repeat;
-    }
-
-    &-title {
-      @apply whitespace-nowrap px-3.5 font-bold text-white;
-    }
-
-    &-size {
-      &-2xs {
-        @apply h-3.5 w-3.5;
-
-        &-title {
-          @apply text-xs;
-        }
-      }
-
-      &-xs {
-        @apply h-4 w-4;
-
-        &-title {
-          @apply text-sm;
-        }
-      }
-
-      &-sm {
-        @apply h-5 w-5;
-
-        &-title {
-          @apply text-base;
-        }
-      }
-
-      &-md {
-        @apply h-6 w-6;
-
-        &-title {
-          @apply text-lg;
-        }
-      }
-
-      &-lg {
-        @apply h-8 w-8;
-
-        &-title {
-          @apply text-2xl;
-        }
-      }
-
-      &-xl {
-        @apply h-10 w-10;
-
-        &-title {
-          @apply text-3xl;
-        }
-      }
-
-      &-2xl {
-        @apply h-12 w-12;
-
-        &-title {
-          @apply text-4xl;
-        }
-      }
-
-      &-3xl {
-        @apply h-14 w-14;
-      }
-    }
-  }
-}
-</style>

package/ui.navigation-pagination/index.stories.js

@@ -1,35 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UPagination from "vueless/ui.navigation-pagination";
-
-export default {
-  title: "Navigation / Pagination",
-  component: UPagination,
-  args: {
-    total: 90,
-  },
-  argTypes: {
-    ...getArgTypes(UPagination.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UPagination },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UPagination v-bind="args" @pageChange="onChange"/>
-  `,
-  methods: {
-    onChange(value) {
-      this.currentPage = value;
-    },
-  },
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const perPage1 = DefaultTemplate.bind({});
-perPage1.args = { perPage: 1 };

package/ui.navigation-pagination/index.vue

@@ -1,115 +0,0 @@
-<template>
-  <div class="mono-pagination-wrapper">
-    <t-pagination
-      v-model="currentPageModel"
-      class="mono-pagination"
-      :classes="paginationClasses"
-      :per-page="perPage"
-      :total-items="total"
-      :data-cy="dataCy"
-    />
-  </div>
-</template>
-
-<script>
-import TPagination from "vueless/library.vue-tailwind-3/t-pagination";
-
-export default {
-  name: "UPagination",
-
-  components: { TPagination },
-
-  props: {
-    /**
-     * Сurrent page number.
-     */
-    currentPage: {
-      type: Number,
-      default: 1,
-    },
-
-    /**
-     * Set number of items per page..
-     */
-    perPage: {
-      type: Number,
-      default: 20,
-    },
-
-    /**
-     * Set total number of items.
-     */
-    total: {
-      type: Number,
-      default: 0,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["pageChange"],
-
-  computed: {
-    currentPageModel: {
-      get() {
-        return this.currentPage;
-      },
-      set(page) {
-        this.$emit("pageChange", page);
-      },
-    },
-
-    paginationClasses() {
-      return {
-        wrapper: "table border-collapse text-center mx-auto",
-        element: `pagination-element table-cell`,
-        activeElement: `pagination-active-element table-cell`,
-        disabledElement: `pagination-disabled-element table-cell`,
-        ellipsisElement: `pagination-ellipsis-element hidden md:table-cell`,
-        activeButton: `pagination-active-button w-full h-full transition duration-100 ease-in-out`,
-        disabledButton: "opacity-25 cursor-not-allowed transition duration-100 ease-in-out",
-        button: `pagination-button w-full h-full transition duration-100 ease-in-out`,
-        ellipsis: "",
-      };
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-pagination {
-  &-wrapper {
-    @apply mt-4 flex justify-center;
-  }
-
-  :deep(.pagination) {
-    &-element,
-    &-active-element,
-    &-disabled-element,
-    &-ellipsis-element {
-      @apply inline-flex justify-center items-center;
-      @apply h-9 w-9;
-    }
-
-    &-active-button {
-      @apply bg-gray-900/15 hover:bg-gray-900/5;
-      @apply rounded;
-    }
-
-    &-button {
-      @apply hover:bg-gray-900/5;
-      @apply rounded;
-
-      &:active {
-        @apply bg-gray-900/10;
-      }
-    }
-  }
-}
-</style>

package/ui.navigation-stepper/index.stories.js

@@ -1,29 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UStepper from "vueless/ui.navigation-stepper";
-
-export default {
-  title: "Navigation / Stepper",
-  component: UStepper,
-  args: {
-    title: "Title",
-    step: 1,
-    totalSteps: 10,
-  },
-  argTypes: {
-    ...getArgTypes(UStepper.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UStepper },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UStepper v-bind="args" />
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};

package/ui.navigation-stepper/index.vue

@@ -1,129 +0,0 @@
-<template>
-  <div class="mono-stepper-wrapper" :data-cy="dataCy">
-    <UHeader :text="title" size="xs" />
-
-    <div class="mono-stepper">
-      <svg width="100%" height="100%" viewBox="0 0 40 40">
-        <defs>
-          <linearGradient id="gradient" class="svg-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" class="stop-1" />
-            <stop offset="100%" class="stop-2" />
-          </linearGradient>
-        </defs>
-
-        <circle
-          class="mono-stepper-ring"
-          cx="20"
-          cy="20"
-          r="15.91549430918954"
-          fill="transparent"
-          stroke-width="4"
-        ></circle>
-
-        <circle
-          cx="20"
-          cy="20"
-          r="15.91549430918954"
-          fill="transparent"
-          stroke="url(#gradient)"
-          stroke-width="4"
-          :stroke-dasharray="accountOccupancyInPercent"
-          stroke-dashoffset="0"
-        ></circle>
-        <g class="mono-stepper-count">
-          <text y="45%" transform="translate(0, 2)">
-            <tspan x="50%" text-anchor="middle" class="mono-stepper-count">{{ step }}</tspan>
-          </text>
-        </g>
-      </svg>
-    </div>
-  </div>
-</template>
-
-<script>
-import UHeader from "vueless/ui.text-header";
-
-export default {
-  name: "UStepper",
-
-  components: {
-    UHeader,
-  },
-
-  props: {
-    /**
-     * Set component title.
-     */
-    title: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set step number.
-     */
-    step: {
-      type: Number,
-      default: null,
-    },
-
-    /**
-     * Set total number of steps.
-     */
-    totalSteps: {
-      type: Number,
-      default: null,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  computed: {
-    accountOccupancyInPercent() {
-      const maxCountPercent = 100;
-      const activePercent = (this.step / this.totalSteps) * maxCountPercent;
-
-      return `${activePercent} ${maxCountPercent}`;
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.wrapper {
-  @apply flex items-center justify-between;
-}
-
-.mono-stepper {
-  @apply h-12 w-12;
-
-  &-wrapper {
-    @apply flex items-center justify-between;
-  }
-
-  .svg-gradient {
-    .stop-1 {
-      stop-color: theme("colors.blue.500");
-    }
-
-    .stop-2 {
-      stop-color: theme("colors.blue.500");
-    }
-  }
-
-  &-ring {
-    @apply stroke-current text-gray-100;
-  }
-
-  &-count {
-    @apply text-xl font-bold text-gray-900;
-    @apply translate-y-2 transform;
-  }
-}
-</style>

package/ui.navigation-tab/index.stories.js

@@ -1,61 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UTab from "vueless/ui.navigation-tab";
-import UIcon from "vueless/ui.image-icon";
-
-export default {
-  title: "Navigation / Tab",
-  component: UTab,
-  args: {
-    label: "Tab",
-  },
-  argTypes: {
-    ...getArgTypes(UTab.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UTab },
-  setup() {
-    const slots = getSlotNames(UTab.name);
-
-    return { args, slots };
-  },
-  template: `
-    <UTab v-bind="args" />
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UTab, UIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UTab v-bind="args">
-      ${args.slotTemplate}
-    </UTab>
-  `,
-});
-
-export const defaultTemplate = DefaultTemplate.bind({});
-defaultTemplate.args = {};
-
-export const disabled = DefaultTemplate.bind({});
-disabled.args = { disabled: true };
-
-export const slotDefault = SlotTemplate.bind({});
-slotDefault.args = {
-  label: "Tag",
-  slotTemplate: `
-    <template #default>
-     <div class="flex items-center">
-      <UIcon
-       name="star"
-       size="sm"
-      />
-      {{label}}
-     </div>
-    </template>
-  `,
-};

package/ui.navigation-tab/index.vue

@@ -1,112 +0,0 @@
-<template>
-  <div ref="UTab" class="mono-tab" :class="tabClasses" :data-cy="dataCy" @click="onClickSetValue">
-    <!-- @slot Use it to add something instead of label. -->
-    <slot>
-      {{ label }}
-    </slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "UTab",
-
-  inject: ["setTabsSelectedItem", "getTabsSelectedItem", "getTabsSize"],
-
-  props: {
-    /**
-     * Set label.
-     * @ignore
-     */
-    label: {
-      type: String,
-      required: true,
-    },
-
-    /**
-     * Set component value.
-     */
-    value: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Make tab inactive.
-     * @ignore
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  data: () => ({
-    size: "md",
-  }),
-
-  computed: {
-    tabClasses() {
-      const size = `mono-tab-size-${this.size}`;
-      const disabled = this.disabled ? "mono-tab-disabled" : "";
-      const selected =
-        this.getTabsSelectedItem && this.getTabsSelectedItem() === this.value && !this.disabled
-          ? "mono-tab-selected"
-          : "";
-
-      return [size, disabled, selected];
-    },
-  },
-
-  mounted() {
-    this.size = this.getTabsSize ? this.getTabsSize() : this.size;
-  },
-
-  methods: {
-    async onClickSetValue() {
-      if (!this.disabled) {
-        this.setTabsSelectedItem && this.setTabsSelectedItem(this.value);
-      }
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-tab {
-  @apply w-max;
-  @apply pb-2;
-  @apply text-center;
-  @apply cursor-pointer;
-
-  &-selected {
-    @apply border-b-2 border-gray-900;
-  }
-
-  &-disabled {
-    @apply text-gray-500;
-  }
-
-  &-size {
-    &-sm {
-      @apply text-xs;
-    }
-
-    &-md {
-      @apply text-sm;
-    }
-
-    &-lg {
-      @apply text-base;
-    }
-  }
-}
-</style>