vueless 0.0.2 → 0.0.4

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

@@ -1,73 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UTabs from "vueless/ui.navigation-tabs";
-
-export default {
-  title: "Navigation / Tabs",
-  component: UTabs,
-  args: {
-    modelValue: "1",
-    options: [
-      { label: "Tab 1", value: "1" },
-      { label: "Tab 2", value: "2" },
-      { label: "Tab 3", value: "3" },
-    ],
-  },
-  argTypes: {
-    ...getArgTypes(UTabs.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UTabs },
-  setup() {
-    const slots = getSlotNames(UTabs.name);
-
-    return {
-      args,
-      slots,
-    };
-  },
-  template: `
-    <UTabs v-bind="args" v-model="args.modelValue"/>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes }) => ({
-  components: { UTabs },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <div class="space-y-16">
-      <UTabs
-        v-model="args.modelValue"
-        v-for="(size, index) in sizes"
-        :size="size"
-        :key="index"
-        v-bind="args"
-      />
-    </div>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
-
-export const bottomLine = DefaultTemplate.bind({});
-bottomLine.args = { bottomLine: true };
-
-export const disabledTab = DefaultTemplate.bind({});
-disabledTab.args = {
-  options: [
-    { label: "Tab 1", value: 1 },
-    { label: "Tab 2", value: 2, disabled: true },
-    { label: "Tab 3", value: 3 },
-  ],
-};

package/ui.navigation-tabs/index.vue

@@ -1,119 +0,0 @@
-<template>
-  <div class="mono-tabs" :class="tabsClass" :data-cy="dataCy">
-    <slot>
-      <UTab
-        v-for="(item, index) in options"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-        :disabled="item.disabled"
-        :size="size"
-        :data-cy="`${dataCy}-item-${index}`"
-      />
-    </slot>
-  </div>
-</template>
-
-<script>
-import UTab from "vueless/ui.navigation-tab";
-
-export default {
-  name: "UTabs",
-
-  components: {
-    UTab,
-  },
-
-  provide() {
-    return {
-      setTabsSelectedItem: (value) => {
-        this.selectedItem = value;
-      },
-
-      getTabsSelectedItem: () => {
-        return this.selectedItem;
-      },
-
-      getTabsSize: () => {
-        return this.size;
-      },
-    };
-  },
-
-  props: {
-    /**
-     * Set component value.
-     */
-    modelValue: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set options for tabs.
-     */
-    options: {
-      type: Array,
-      default: () => [
-        {
-          label: "",
-          value: "",
-          disabled: false,
-        },
-      ],
-    },
-
-    /**
-     * Add a line in bottom along the entire length.
-     */
-    bottomLine: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * The size of the tabs.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * 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);
-      },
-    },
-
-    tabsClass() {
-      return this.bottomLine ? "mono-tabs-bottom-line" : "";
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-tabs {
-  @apply mb-6 flex space-x-8;
-}
-
-.mono-tabs-bottom-line {
-  @apply border-b border-gray-100;
-}
-</style>

package/ui.other-dot/index.stories.js

@@ -1,77 +0,0 @@
-import UDot from "vueless/ui.other-dot";
-import URow from "vueless/ui.container-row";
-
-import { getArgTypes } from "vueless/service.storybook";
-
-export default {
-  title: "Other / Dot",
-  component: UDot,
-  argTypes: {
-    ...getArgTypes(UDot.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UDot },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UDot v-bind="args" />
-  `,
-});
-
-const ColorsTemplate = (args, { argTypes }) => ({
-  components: { UDot, URow },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <URow>
-      <UDot
-        v-for="(color, index) in colors"
-        :color="color"
-        v-bind="args"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes }) => ({
-  components: { UDot, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UDot
-        v-for="(size, index) in sizes"
-        :size="size"
-        :text="getText(size)"
-        v-bind="args"
-        :key="index"
-      />
-    </URow>
-  `,
-  methods: {
-    getText(value) {
-      return `Tag ${value}`;
-    },
-  },
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const Colors = ColorsTemplate.bind({});
-Colors.args = {};
-
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};

package/ui.other-dot/index.vue

@@ -1,100 +0,0 @@
-<template>
-  <div class="mono-dot" :class="dotClasses" />
-</template>
-
-<script>
-export default {
-  name: "UDot",
-
-  props: {
-    /**
-     * The dot color.
-     * @values gray, red, orange, yellow, green, blue, violet, fuchsia, black, white
-     */
-    color: {
-      type: String,
-      default: "gray",
-    },
-
-    /**
-     * The dot size.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-  },
-
-  computed: {
-    dotClasses() {
-      const size = `size-${this.size}`;
-      const color = `mono-dot-color-${this?.color}`;
-
-      return [color, size];
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-dot {
-  @apply rounded-full;
-
-  &-color {
-    &-red {
-      @apply bg-red-500;
-    }
-
-    &-orange {
-      @apply bg-orange-500;
-    }
-
-    &-yellow {
-      @apply bg-yellow-500;
-    }
-
-    &-green {
-      @apply bg-green-500;
-    }
-
-    &-blue {
-      @apply bg-blue-500;
-    }
-
-    &-fuchsia {
-      @apply bg-fuchsia-500;
-    }
-
-    &-violet {
-      @apply bg-violet-500;
-    }
-
-    &-gray {
-      @apply bg-gray-500;
-    }
-
-    &-black {
-      @apply bg-gray-900;
-    }
-
-    &-white {
-      @apply bg-white;
-    }
-  }
-}
-
-.size {
-  &-sm {
-    @apply mr-1 h-1 w-1;
-  }
-
-  &-md {
-    @apply mr-1 h-1.5 w-1.5;
-  }
-
-  &-lg {
-    @apply mr-1 h-2 w-2;
-  }
-}
-</style>

package/ui.other-loader/index.stories.js

@@ -1,77 +0,0 @@
-import UDot from "vueless/ui.other-dot";
-import URow from "vueless/ui.container-row";
-
-import { getArgTypes } from "vueless/service.storybook";
-
-export default {
-  title: "Other / Loader (create)",
-  component: UDot,
-  argTypes: {
-    ...getArgTypes(UDot.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UDot },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UDot v-bind="args" />
-  `,
-});
-
-const ColorsTemplate = (args, { argTypes }) => ({
-  components: { UDot, URow },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <URow>
-      <UDot
-        v-for="(color, index) in colors"
-        :color="color"
-        v-bind="args"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes }) => ({
-  components: { UDot, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UDot
-        v-for="(size, index) in sizes"
-        :size="size"
-        :text="getText(size)"
-        v-bind="args"
-        :key="index"
-      />
-    </URow>
-  `,
-  methods: {
-    getText(value) {
-      return `Tag ${value}`;
-    },
-  },
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const Colors = ColorsTemplate.bind({});
-Colors.args = {};
-
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};

package/ui.other-loader/index.vue

@@ -1,185 +0,0 @@
-<template>
-  <div class="mono-internal-loader" :class="loaderCLasses">
-    <div
-      v-for="ellipse in ellipsesAmount"
-      :key="ellipse"
-      class="mono-internal-loader-ellipse"
-      :class="ellipseClasses"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  name: "ULoader",
-
-  props: {
-    /**
-     * The size of the button.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-  },
-
-  data() {
-    return {
-      ellipsesAmount: 4,
-    };
-  },
-
-  computed: {
-    loaderCLasses() {
-      const size = `mono-internal-loader-${this.size}`;
-
-      return [size];
-    },
-
-    ellipseClasses() {
-      const size = `mono-internal-loader-ellipse-${this.size}`;
-
-      return [size];
-    },
-  },
-};
-</script>
-
-<style scoped lang="postcss">
-.mono-internal-loader {
-  @apply relative mx-1 flex h-4 items-center;
-
-  &-sm {
-    @apply w-9;
-  }
-
-  &-md {
-    @apply w-[3.625rem];
-  }
-
-  &-lg {
-    @apply w-20;
-  }
-
-  &-ellipse {
-    @apply absolute rounded-full bg-white ease-[cubic-bezier(0,1,1,0)];
-
-    &:nth-child(1) {
-      @apply animate-[lds-ellipsis1_0.6s_infinite];
-    }
-
-    &:nth-child(4) {
-      @apply animate-[lds-ellipsis3_0.6s_infinite];
-    }
-
-    &-sm {
-      @apply h-1.5 w-1.5;
-
-      &:nth-child(1) {
-        @apply left-1;
-      }
-
-      &:nth-child(2) {
-        @apply left-1 animate-[lds-ellipsis2-sm_0.6s_infinite];
-      }
-
-      &:nth-child(3) {
-        @apply left-4 animate-[lds-ellipsis2-sm_0.6s_infinite];
-      }
-
-      &:nth-child(4) {
-        @apply left-7;
-      }
-    }
-
-    &-md {
-      @apply h-2.5 w-2.5;
-
-      &:nth-child(1) {
-        @apply left-1.5;
-      }
-
-      &:nth-child(2) {
-        @apply left-1.5 animate-[lds-ellipsis2-md_0.6s_infinite];
-      }
-
-      &:nth-child(3) {
-        @apply left-6 animate-[lds-ellipsis2-md_0.6s_infinite];
-      }
-
-      &:nth-child(4) {
-        @apply left-[2.625rem];
-      }
-    }
-
-    &-lg {
-      @apply h-4 w-4;
-
-      &:nth-child(1) {
-        @apply left-2;
-      }
-
-      &:nth-child(2) {
-        @apply left-2 animate-[lds-ellipsis2-lg_0.6s_infinite];
-      }
-
-      &:nth-child(3) {
-        @apply left-8 animate-[lds-ellipsis2-lg_0.6s_infinite];
-      }
-
-      &:nth-child(4) {
-        @apply left-14;
-      }
-    }
-  }
-}
-
-@keyframes lds-ellipsis1 {
-  0% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-@keyframes lds-ellipsis3 {
-  0% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(0);
-  }
-}
-
-@keyframes lds-ellipsis2-sm {
-  0% {
-    transform: translate(0, 0);
-  }
-
-  100% {
-    transform: translate(12px, 0);
-  }
-}
-
-@keyframes lds-ellipsis2-md {
-  0% {
-    transform: translate(0, 0);
-  }
-
-  100% {
-    transform: translate(18px, 0);
-  }
-}
-
-@keyframes lds-ellipsis2-lg {
-  0% {
-    transform: translate(0, 0);
-  }
-
-  100% {
-    transform: translate(24px, 0);
-  }
-}
-</style>