vueless 0.0.2 → 0.0.4

package/ui.container-accordion/index.vue

@@ -1,167 +0,0 @@
-<template>
-  <div class="mono-accordion" :class="sizeClass" :data-cy="dataCy" @click="onClickItem">
-    <div class="item-info">
-      <div class="info-title">
-        <div>
-          {{ title }}
-        </div>
-
-        <UIcon :name="isOpened ? 'remove' : 'add'" class="info-icon" :size="size" color="gray" />
-      </div>
-
-      <div :ref="name" class="info-description">
-        {{ description }}
-      </div>
-    </div>
-
-    <div class="separator" />
-  </div>
-</template>
-
-<script>
-import UIcon from "vueless/ui.image-icon";
-
-export default {
-  name: "UAccordion",
-  components: {
-    UIcon,
-  },
-
-  props: {
-    /**
-     * Set component title.
-     */
-    title: {
-      type: String,
-      required: true,
-    },
-
-    /**
-     * Set component description.
-     */
-    description: {
-      type: String,
-      required: true,
-    },
-
-    /**
-     * Set unique block name.
-     * @ignore
-     */
-    name: {
-      type: String,
-      required: true,
-    },
-
-    /**
-     * The size of component.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["itemClicked"],
-
-  data: () => ({
-    isOpened: false,
-  }),
-
-  computed: {
-    // TODO: This is super weird, need to be removed!
-    descriptionNode() {
-      return this.$refs[this.name];
-    },
-
-    sizeClass() {
-      return `size-${this.size}`;
-    },
-  },
-
-  methods: {
-    onClickItem() {
-      this.isOpened = !this.isOpened;
-      this.descriptionNode.classList.toggle("show-description");
-
-      this.$emit("itemClicked", this.name);
-    },
-  },
-};
-</script>
-
-<style scoped lang="postcss">
-.mono-accordion {
-  @apply cursor-pointer;
-
-  &:not(:first-child) {
-    @apply pt-6;
-  }
-
-  &:last-child {
-    .separator {
-      @apply hidden;
-    }
-  }
-
-  .item-info {
-    @apply leading-6;
-
-    .info-title {
-      @apply flex items-center justify-between;
-      @apply font-medium text-gray-800;
-    }
-
-    .info-description {
-      @apply h-0 overflow-hidden opacity-0;
-      @apply text-gray-600 leading-normal;
-    }
-
-    .show-description {
-      @apply h-full pt-3 opacity-100;
-      @apply transition-all duration-100 ease-in-out;
-    }
-  }
-
-  .separator {
-    @apply mt-2 h-px w-full lg:mt-6;
-    @apply bg-gray-100;
-    @apply mt-2.5;
-  }
-}
-
-.size {
-  &-sm {
-    @apply text-sm;
-
-    .info-description {
-      @apply text-xs;
-    }
-  }
-
-  &-md {
-    @apply text-base;
-
-    .info-description {
-      @apply text-sm;
-    }
-  }
-
-  &-lg {
-    @apply text-lg;
-
-    .info-description {
-      @apply text-base;
-    }
-  }
-}
-</style>

package/ui.container-card/index.stories.js

@@ -1,128 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UCard from "vueless/ui.container-card";
-import UInput from "vueless/ui.form-input";
-import UButton from "vueless/ui.button";
-import UIcon from "vueless/ui.image-icon";
-import UHeader from "vueless/ui.text-header";
-
-export default {
-  title: "Containers / Card",
-  component: UCard,
-  args: {
-    title: "Card title",
-    slotDefaultTemplate: `
-    <template #default>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-        sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-        ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit
-        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia
-        deserunt mollit anim id est laborum.
-      </p>
-    </template>
-  `,
-  },
-  argTypes: {
-    ...getArgTypes(UCard.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UCard, UButton, UInput, UIcon, UHeader },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UCard v-bind="args">
-      ${args.slotDefaultTemplate}
-      ${args.slotTemplate || ""}
-    </UCard>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {
-  slotTemplate: `
-    <template #default>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-        sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-        ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit
-        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia
-        deserunt mollit anim id est laborum.
-      </p>
-    </template>
-  `,
-};
-
-export const description = DefaultTemplate.bind({});
-description.args = { description: "Card description" };
-
-export const slotHeaderLeftBefore = DefaultTemplate.bind({});
-slotHeaderLeftBefore.args = {
-  slotTemplate: `
-    <template #header-left-before>
-      <UIcon
-        name="star"
-        color="gray"
-        pill-filled
-      />
-    </template>
-  `,
-};
-
-export const slotHeaderLeft = DefaultTemplate.bind({});
-slotHeaderLeft.args = {
-  slotTemplate: `
-    <template #header-left>
-      <UHeader size="lg" text="Large title" />
-    </template>
-  `,
-};
-
-export const slotHeaderLeftAfter = DefaultTemplate.bind({});
-slotHeaderLeftAfter.args = {
-  slotTemplate: `
-    <template #header-left-after>
-      <UIcon
-        name="star"
-        color="gray"
-        pill-filled
-      />
-    </template>
-  `,
-};
-
-export const slotHeaderRight = DefaultTemplate.bind({});
-slotHeaderRight.args = {
-  slotTemplate: `
-    <template #header-right>
-      <UButton size="sm" color="gray" text="some button" />
-    </template>
-  `,
-};
-
-export const slotFooterLeft = DefaultTemplate.bind({});
-slotFooterLeft.args = {
-  slotTemplate: `
-    <template #footer-left>
-      <UButton text="some button" />
-    </template>
-  `,
-};
-
-export const slotFooterRight = DefaultTemplate.bind({});
-slotFooterRight.args = {
-  slotTemplate: `
-    <template #footer-right>
-      <UButton text="some button" />
-    </template>
-  `,
-};

package/ui.container-card/index.vue

@@ -1,207 +0,0 @@
-<template>
-  <t-card no-body class="mono-card" :class="cardClasses" :data-cy="dataCy">
-    <div v-if="isShownHeader" class="mono-card-header">
-      <div class="mono-card-header-left-wrapper">
-        <!-- @slot Use it to add something before left side of the header. -->
-        <slot name="header-left-before" />
-
-        <!-- @slot Use it to customise left side of the header. -->
-        <slot name="header-left">
-          <div class="mono-card-header-left">
-            <UHeader size="md" color="brand" :text="title" />
-            <div v-if="description" class="mono-card-header-left-subtitle">
-              {{ description }}
-            </div>
-          </div>
-        </slot>
-
-        <!-- @slot Use it to add something after left side of the header. -->
-        <slot name="header-left-after" />
-      </div>
-
-      <div>
-        <!-- @slot Use it to customise right side of the header. -->
-        <slot name="header-right" />
-      </div>
-    </div>
-
-    <!-- @slot Use it to add something inside. -->
-    <div class="mono-card-content">
-      <slot />
-    </div>
-
-    <UDivider v-if="isShownFooterSlot" no-top-padding no-bottom-padding size="xl" />
-
-    <div v-if="isShownFooterSlot" class="mono-card-footer" :class="reverseFooterClass">
-      <div>
-        <!-- @slot Use it to add something to the left side of the footer. -->
-        <slot name="footer-left" />
-      </div>
-
-      <div>
-        <!-- @slot Use it to add something to the right side of the footer. -->
-        <slot name="footer-right" />
-      </div>
-    </div>
-  </t-card>
-</template>
-
-<script>
-import TCard from "vueless/library.vue-tailwind-3/t-card";
-import UHeader from "vueless/ui.text-header";
-import UDivider from "vueless/ui.container-divider";
-
-export default {
-  name: "UCard",
-
-  components: {
-    TCard,
-    UHeader,
-    UDivider,
-  },
-
-  props: {
-    /**
-     * Sets card title.
-     */
-    title: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Sets card description.
-     */
-    description: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * The size of the padding.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Reverse left and right footer blocks (in mobile version only).
-     */
-    mobileFooterReverse: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Sets border radius size (makes card more or less rounded).
-     * @values xs, sm, md, lg
-     */
-    borderRadius: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  computed: {
-    cardClasses() {
-      const borderRadius = `border-radius-${this.borderRadius}`;
-      const size = `size-${this.size}`;
-
-      return [borderRadius, size];
-    },
-
-    isShownHeader() {
-      return this.title || !!this.$slots["header-left"] || !!this.$slots["header-right"];
-    },
-
-    isShownFooterSlot() {
-      return !!this.$slots["footer-left"] || !!this.$slots["footer-right"];
-    },
-
-    reverseFooterClass() {
-      return {
-        "reverse-footer": this.mobileFooterReverse && this.isMobileDevice,
-      };
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-card {
-  @apply border border-gray-200 bg-white;
-  @apply shadow-none;
-  @apply space-y-4 md:space-y-6;
-  @apply w-full;
-
-  &.border-radius {
-    &-xs {
-      @apply rounded;
-    }
-
-    &-sm {
-      @apply rounded-lg;
-    }
-
-    &-md {
-      @apply rounded-2xl;
-    }
-
-    &-lg {
-      @apply rounded-3xl;
-    }
-  }
-
-  &.size {
-    &-sm {
-      @apply p-2 md:p-4;
-    }
-
-    &-md {
-      @apply p-4 md:p-6;
-    }
-
-    &-lg {
-      @apply p-6 md:p-8;
-    }
-  }
-
-  &-header {
-    @apply flex justify-between;
-
-    &-left {
-      @apply flex flex-col;
-
-      &-wrapper {
-        @apply flex items-center space-x-4;
-      }
-
-      &-subtitle {
-        @apply mt-1.5 text-base font-normal text-gray-600;
-      }
-    }
-  }
-
-  &-content {
-    @apply space-y-2 md:space-y-4;
-  }
-
-  &-footer {
-    @apply flex justify-between;
-  }
-}
-
-.reverse-footer {
-  @apply flex flex-col-reverse space-y-reverse;
-}
-</style>

package/ui.container-divider/index.stories.js

@@ -1,91 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-import URow from "vueless/ui.container-row";
-
-import UDivider from "vueless/ui.container-divider";
-
-export default {
-  title: "Containers / Divider",
-  component: UDivider,
-  argTypes: {
-    ...getArgTypes(UDivider.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UDivider },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UDivider v-bind="args" />
-  `,
-});
-
-const SizesTemplate = (args, { argTypes }) => ({
-  components: { UDivider, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UDivider
-        class="w-1/4"
-        v-for="(size, index) in sizes"
-        :size="size"
-        v-bind="args"
-        :key="index"
-      />
-    </URow>
-  `,
-  created() {
-    this.mxArgTypes = argTypes;
-  },
-});
-
-const VariantsTemplate = (args, { argTypes }) => ({
-  components: { UDivider, URow },
-  setup() {
-    return {
-      args,
-      variants: argTypes.variant.options,
-    };
-  },
-  template: `
-    <URow>
-      <UDivider
-        class="w-1/3"
-        v-for="(variant, index) in variants"
-        :variant="variant"
-        v-bind="args"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const dashed = DefaultTemplate.bind({});
-dashed.args = { dashed: true };
-
-export const dotted = DefaultTemplate.bind({});
-dotted.args = { dotted: true };
-
-export const noBorder = DefaultTemplate.bind({});
-noBorder.args = { noBorder: true };
-
-export const noTopPadding = DefaultTemplate.bind({});
-noTopPadding.args = { noTopPadding: true };
-
-export const noBottomPadding = DefaultTemplate.bind({});
-noBottomPadding.args = { noBottomPadding: true };
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
-
-export const variants = VariantsTemplate.bind({});
-variants.args = {};