vueless 0.0.2 → 0.0.4

package/ui.container-divider/index.vue

@@ -1,201 +0,0 @@
-<template>
-  <div class="mono-divider-wrapper" :class="dividerWrapperClasses">
-    <div class="mono-divider" :class="dividerClasses" :data-cy="dataCy" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: "UDivider",
-
-  props: {
-    /**
-     * Set padding size.
-     * @values xs, sm, md, lg, xl
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Set divider color.
-     * @values light, default, dark
-     */
-    variant: {
-      type: String,
-      default: "default",
-    },
-
-    /**
-     * Make line dashed.
-     */
-    dashed: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Make line dotted.
-     */
-    dotted: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Remove border (keeps only spacings).
-     */
-    noBorder: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Remove top padding.
-     */
-    noTopPadding: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Remove bottom padding.
-     */
-    noBottomPadding: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Set divider orientation to vertical.
-     */
-    vertical: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  data: () => ({}),
-
-  computed: {
-    dividerWrapperClasses() {
-      const size = this.vertical ? `size-vertical-${this.size}` : `size-horisontal-${this.size}`;
-      const noTopPadding = this.noTopPadding ? "mono-divider-no-top-padding" : "";
-      const noBottomPadding = this.noBottomPadding ? "mono-divider-no-bottom-padding" : "";
-
-      return [size, noTopPadding, noBottomPadding];
-    },
-
-    dividerClasses() {
-      const dashed = this.dashed ? "mono-divider-dashed" : "";
-      const dotted = this.dotted ? "mono-divider-dotted" : "";
-      const noBorder = this.noBorder ? "mono-divider-no-border" : "";
-      const vertical = this.vertical ? "mono-divider-vertical" : "mono-divider-horizontal";
-      const variant = `mono-divider-${this.variant}`;
-
-      return [dashed, dotted, noBorder, variant, vertical];
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.size-horisontal {
-  &-xs {
-    @apply py-2;
-  }
-
-  &-sm {
-    @apply py-3;
-  }
-
-  &-md {
-    @apply py-4;
-  }
-
-  &-lg {
-    @apply py-5;
-  }
-
-  &-xl {
-    @apply py-6;
-  }
-}
-
-.size-vertical {
-  &-xs {
-    @apply px-2;
-  }
-
-  &-sm {
-    @apply px-3;
-  }
-
-  &-md {
-    @apply px-4;
-  }
-
-  &-lg {
-    @apply px-5;
-  }
-
-  &-xl {
-    @apply px-6;
-  }
-}
-
-.mono-divider {
-  @apply border-transparent;
-
-  &-vertical {
-    @apply border-l;
-    @apply h-full;
-  }
-
-  &-horizontal {
-    @apply border-t;
-    @apply w-full;
-  }
-
-  &-light {
-    @apply border-gray-100;
-  }
-
-  &-default {
-    @apply border-gray-200;
-  }
-
-  &-dark {
-    @apply border-gray-300;
-  }
-
-  &-no-border {
-    @apply border-0;
-  }
-
-  &-dashed {
-    @apply border-dashed;
-  }
-
-  &-dotted {
-    @apply border-dotted;
-  }
-
-  &-no-top-padding {
-    @apply pt-0;
-  }
-
-  &-no-bottom-padding {
-    @apply pb-0;
-  }
-}
-</style>

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

@@ -1,87 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UGroup from "vueless/ui.container-group";
-import UInput from "vueless/ui.form-input";
-import UButton from "vueless/ui.button";
-
-export default {
-  title: "Containers / Group",
-  component: UGroup,
-  args: {
-    title: "Form group",
-    slotTemplate: `
-    <template #default>
-      <UInput placeholder="Vasyl" label="Name" />
-
-      <UInput placeholder="Vasylenko" label="Surname" />
-
-      <UInput placeholder="Kyiv" label="Town" />
-    </template>
-  `,
-  },
-  argTypes: {
-    ...getArgTypes(UGroup.name),
-  },
-  parameters: {
-    docs: {
-      story: {
-        iframeHeight: 360,
-      },
-    },
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UGroup, UInput, UButton },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UGroup v-bind="args">
-      ${args.slotTemplate}
-    </UGroup>
-  `,
-});
-
-export const title = DefaultTemplate.bind({});
-title.args = {
-  title: "Some title",
-};
-
-export const withoutUpperlined = DefaultTemplate.bind({});
-withoutUpperlined.args = { upperlined: false };
-
-export const underlined = DefaultTemplate.bind({});
-underlined.args = { underlined: true, upperlined: false };
-
-export const slotDefault = DefaultTemplate.bind({});
-slotDefault.args = {
-  slotTemplate: `
-    <template #default>
-      <UInput placeholder="placeholder" label="Label" />
-    </template>
-  `,
-};
-slotDefault.parameters = {
-  docs: {
-    story: {
-      iframeHeight: 240,
-    },
-  },
-};
-
-export const slotRight = DefaultTemplate.bind({});
-slotRight.args = {
-  slotTemplate: `
-    <template #right>
-      <UButton size="sm" text="Some button"/>
-    </template>
-  `,
-};
-slotRight.parameters = {
-  docs: {
-    story: {
-      iframeHeight: 200,
-    },
-  },
-};

package/ui.container-group/index.vue

@@ -1,172 +0,0 @@
-<template>
-  <div class="mono-group" :class="formGroupClasses" :data-cy="dataCy">
-    <div v-if="title" class="mono-group-header-wrapper">
-      <UDivider v-if="isUpperlined" class="mono-group-upperlined" size="xl" no-top-padding />
-
-      <div class="mono-group-header" :class="headerClass">
-        <!-- @slot Use it to add something left side of the header. -->
-        <slot name="left" />
-
-        <div class="mono-group-header-container">
-          <!-- @slot Use it to add something before title. -->
-          <slot name="beforeTitle" />
-
-          <UHeader v-if="title" class="mono-group-block-title" :text="title" size="xs" />
-
-          <!-- @slot Use it to add something after title. -->
-          <slot name="afterTitle" />
-        </div>
-
-        <!-- @slot Use it to add something right side of the header. -->
-        <slot name="right" />
-      </div>
-
-      <UDivider v-if="isUnderlined" class="mono-group-underlined" size="xl" no-top-padding />
-    </div>
-
-    <div class="mono-group-content">
-      <!-- @slot Use it to add something instead form. -->
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-import { globalComponentConfig } from "vueless/service.ui";
-
-import UDivider from "vueless/ui.container-divider";
-import UHeader from "vueless/ui.text-header";
-
-export default {
-  name: "UGroup",
-
-  components: {
-    UDivider,
-    UHeader,
-  },
-
-  props: {
-    /**
-     * Set header title.
-     */
-    title: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * The size between nested components.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Show line above the header.
-     */
-    upperlined: {
-      type: Boolean,
-      default: undefined,
-    },
-
-    /**
-     * Show line under the header.
-     */
-    underlined: {
-      type: Boolean,
-      default: undefined,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  computed: {
-    formGroupClasses() {
-      const size = `size-${this.size}`;
-
-      return [size];
-    },
-
-    isUpperlined() {
-      const upperlined = globalComponentConfig.UGroup?.upperlined;
-
-      if (this.upperlined === undefined && upperlined === undefined) return true;
-      else if (this.upperlined !== undefined) return this.upperlined;
-
-      return upperlined;
-    },
-
-    isUnderlined() {
-      if (this.underlined !== undefined) return this.underlined;
-
-      return globalComponentConfig.UGroup?.underlined;
-    },
-
-    headerClass() {
-      return !this.isUnderlined ? "padding-bottom" : "";
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.size {
-  &-sm {
-    .mono-group-content {
-      @apply space-y-2;
-    }
-  }
-
-  &-md {
-    .mono-group-content {
-      @apply space-y-4;
-    }
-  }
-
-  &-lg {
-    .mono-group-content {
-      @apply space-y-6;
-    }
-  }
-}
-
-.mono-group {
-  &-header {
-    @apply flex items-center justify-between;
-
-    &.padding-bottom {
-      @apply pb-6;
-    }
-
-    &-container {
-      @apply flex items-center;
-    }
-  }
-
-  &-title {
-    @apply mb-6;
-  }
-
-  &-underlined {
-    @apply pt-1.5;
-  }
-
-  &-content {
-    @apply space-y-4;
-  }
-
-  &-block {
-    &-title {
-      @apply pr-2;
-    }
-  }
-}
-</style>

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

@@ -1,44 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UGroup from "vueless/ui.container-group";
-import UGroups from "vueless/ui.container-groups";
-import UInput from "vueless/ui.form-input";
-
-export default {
-  title: "Containers / Groups",
-  component: UGroups,
-  argTypes: {
-    ...getArgTypes(UGroups.name),
-  },
-  parameters: {
-    docs: {
-      story: {
-        iframeHeight: 760,
-      },
-    },
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UGroups, UGroup, UInput },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UGroups>
-      ${args.slotTemplate}
-    </UGroups>
-  `,
-});
-
-export const slotDefault = DefaultTemplate.bind({});
-slotDefault.args = {
-  slotTemplate: `
-    <template #default>
-      <UGroup :upperlined="!n" :title="'Group '+n" v-for="n in 3">
-        <UInput placeholder="input" label="Label" />
-        <UInput placeholder="input" label="Label" />
-      </UGroup>
-    </template>
-  `,
-};

package/ui.container-groups/index.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="mono-groups">
-    <!-- @slot Use it to add something inside. -->
-    <slot />
-  </div>
-</template>
-
-<script>
-export default {
-  name: "UGroups",
-};
-</script>
-
-<style scoped lang="postcss">
-.mono-groups {
-  @apply flex flex-col space-y-14;
-}
-</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>