vueless 0.0.2 → 0.0.4

package/ui.container-modal-confirm/index.stories.js

@@ -1,150 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UModalConfirm from "vueless/ui.container-modal-confirm";
-import UButton from "vueless/ui.button";
-import UHeader from "vueless/ui.text-header";
-import UIcon from "vueless/ui.image-icon";
-import URow from "vueless/ui.container-row";
-
-export default {
-  title: "Containers / Modal Confirm",
-  component: UModalConfirm,
-  args: {
-    title: "Modal Confirm title",
-    actionButtonText: "Confirm",
-    slotTemplate: `
-      <template #default>
-       Confirm the action?
-      </template>
-    `,
-  },
-  argTypes: {
-    ...getArgTypes(UModalConfirm.name),
-  },
-  parameters: {
-    docs: {
-      story: {
-        height: "360px",
-      },
-    },
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UModalConfirm, UButton },
-  setup() {
-    return { args };
-  },
-  template: `
-    <div>
-      <UModalConfirm v-bind="args" v-model="args.value">
-        ${args.slotTemplate}
-      </UModalConfirm>
-
-      <UButton text="show modal" @click="onClick"/>
-    </div>
-  `,
-  methods: {
-    onClick() {
-      args.value = true;
-    },
-  },
-});
-
-const SlotTemplate = (args) => ({
-  components: { UModalConfirm, UButton, UHeader, UIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-    <div>
-      <UModalConfirm v-bind="args" v-model="args.value">
-        ${args.slotTemplate}
-      </UModalConfirm>
-
-      <UButton text="show modal" @click="onClick"/>
-    </div>
-  `,
-  methods: {
-    onClick() {
-      args.value = true;
-    },
-  },
-});
-
-const SizesTemplate = (args, { argTypes }) => ({
-  components: { UModalConfirm, UButton, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.width.options,
-    };
-  },
-  template: `
-    <div>
-      <UModalConfirm v-bind="args" v-model="args.value">
-        ${args.slotTemplate}
-      </UModalConfirm>
-      <URow>
-        <UButton
-          v-for="(size, index) in sizes"
-          :key="index" :text="size" @click="onClick(size)"
-        />
-      </URow>
-    </div>
-  `,
-  methods: {
-    onClick(value) {
-      args.width = value;
-      args.value = true;
-    },
-  },
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = { text: "" };
-
-export const slotHeaderLeftBefore = SlotTemplate.bind({});
-slotHeaderLeftBefore.args = {
-  slotTemplate: `
-    <template #header-left-before>
-      <UIcon
-        name="star"
-        color="gray"
-      />
-    </template>
-  `,
-};
-
-export const slotHeaderLeft = SlotTemplate.bind({});
-slotHeaderLeft.args = {
-  slotTemplate: `
-    <template #header-left>
-      <UHeader size="lg" text="Large title" />
-    </template>
-  `,
-};
-
-export const slotHeaderLeftAfter = SlotTemplate.bind({});
-slotHeaderLeftAfter.args = {
-  slotTemplate: `
-    <template #header-left-after>
-      <UIcon
-        name="star"
-        color="gray"
-      />
-    </template>
-  `,
-};
-
-export const slotHeaderRight = SlotTemplate.bind({});
-slotHeaderRight.args = {
-  slotTemplate: `
-    <template #header-right>
-       <UButton text="I'm in the right slot" size="sm" color="gray" />
-    </template>
-  `,
-};

package/ui.container-modal-confirm/index.vue

@@ -1,186 +0,0 @@
-<template>
-  <UModal
-    v-model="isShownModal"
-    :title="title"
-    :width="width"
-    :data-cy="dataCy"
-    :color="color"
-    no-divider
-    mobile-bottom-align
-    class="mono-confirm-modal"
-  >
-    <template #header-left-before>
-      <slot name="header-left-before" />
-    </template>
-
-    <template #header-left>
-      <slot name="header-left" />
-    </template>
-
-    <template #header-left-after>
-      <slot name="header-left-after" />
-    </template>
-
-    <template #header-right>
-      <slot name="header-right" />
-    </template>
-
-    <template #default>
-      <slot />
-    </template>
-
-    <template #footer-left>
-      <div class="flex space-x-4">
-        <UButton
-          class="w-full"
-          :disabled="disableAcceptButton"
-          :text="actionButtonText"
-          :color="color"
-          :data-cy="`${dataCy}-accept`"
-          @click="emitConfirmAction"
-        />
-
-        <UButton
-          v-if="shownCancelButton"
-          class="w-full"
-          :color="color"
-          variant="secondary"
-          :text="i18n.cancel"
-          :data-cy="`${dataCy}-close`"
-          @click="onCloseModal"
-        />
-      </div>
-    </template>
-  </UModal>
-</template>
-
-<script>
-import UButton from "vueless/ui.button";
-import UModal from "vueless/ui.container-modal";
-import I18nServiceDefault from "vueless/service.i18n";
-
-export default {
-  name: "UModalConfirm",
-
-  components: {
-    UButton,
-    UModal,
-  },
-
-  props: {
-    /**
-     * Show cancel button.
-     */
-    shownCancelButton: {
-      type: Boolean,
-      default: true,
-    },
-
-    /**
-     * Set the disabled accept-button.
-     */
-    disableAcceptButton: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Set action button text.
-     */
-    actionButtonText: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set width for modal.
-     * @values xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
-     */
-    width: {
-      type: String,
-      default: "sm",
-    },
-
-    /**
-     * Set modal's title.
-     */
-    title: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Change modal state (hidden / shown).
-     */
-    modelValue: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * The color of the button and modal title.
-     * @values gray, red, orange, yellow, green, blue, violet, fuchsia
-     */
-    color: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["update:modelValue", "actionConfirmed", "close"],
-
-  setup() {
-    const { getTranslation } = new I18nServiceDefault();
-
-    return { getTranslation };
-  },
-
-  computed: {
-    isShownModal: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
-
-    i18n() {
-      return { cancel: this.getTranslation("cancel") };
-    },
-  },
-
-  methods: {
-    closeModal() {
-      this.isShownModal = false;
-    },
-
-    onCloseModal() {
-      this.$emit("close");
-      this.closeModal();
-    },
-
-    emitConfirmAction() {
-      this.$emit("actionConfirmed");
-      this.closeModal();
-    },
-  },
-};
-</script>
-
-<i18n>
-en:
-  cancel: "Cancel"
-ru:
-  cancel: "Отмена"
-ua:
-  cancel: "Відміна"
-</i18n>

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.container-page/index.stories.js

@@ -1,174 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UPage from "vueless/ui.container-page";
-import UCard from "vueless/ui.container-card";
-import URow from "vueless/ui.container-row";
-import UInput from "vueless/ui.form-input";
-import UTextarea from "vueless/ui.form-textarea";
-import UButton from "vueless/ui.button";
-import UIcon from "vueless/ui.image-icon";
-import UHeader from "vueless/ui.text-header";
-
-export default {
-  title: "Containers / Page",
-  component: UPage,
-  args: {
-    title: "Page title",
-    gray: true,
-    slotDefaultTemplate: `
-      <template #default>
-        <UCard title="Card title">
-          <URow>
-            <UInput label="Name" />
-            <UInput label="Lastname" />
-          </URow>
-          <UTextarea class="mb-7" label="Comments" rows="3" />
-        </UCard>
-      </template>
-    `,
-  },
-  argTypes: {
-    ...getArgTypes(UPage.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: {
-    UPage,
-    UCard,
-    URow,
-    UInput,
-    UTextarea,
-    UButton,
-    UIcon,
-    UHeader,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UPage v-bind="args">
-      ${args.slotDefaultTemplate}
-      ${args.slotTemplate || ""}
-    </UPage>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const titleSizeSm = DefaultTemplate.bind({});
-titleSizeSm.args = { titleSize: "sm" };
-
-export const classes = DefaultTemplate.bind({});
-classes.args = {
-  classes: {
-    header: "text-violet-300",
-  },
-};
-
-export const description = DefaultTemplate.bind({});
-description.args = { description: "Page description" };
-
-export const width = DefaultTemplate.bind({});
-width.args = { width: "md", title: "Width = md" };
-
-export const widePage = DefaultTemplate.bind({});
-widePage.args = { widePage: true, width: "sm" };
-
-export const backRoute = DefaultTemplate.bind({});
-backRoute.args = {
-  backRoute: {
-    name: "",
-    title: "some route title",
-    params: {},
-  },
-};
-
-export const headerPadding = DefaultTemplate.bind({});
-headerPadding.args = {
-  headerPadding: true,
-  slotTemplate: `
-    <template #header-left>
-      <UHeader size="lg" text="Some title" />
-    </template>
-
-     <template #header-right>
-      <UButton size="sm" color="gray" text="button" />
-    </template>
-  `,
-};
-
-export const footerPadding = DefaultTemplate.bind({});
-footerPadding.args = {
-  footerPadding: true,
-  slotTemplate: `
-    <template #footer-left>
-      <UButton text="button" />
-    </template>
-
-    <template #footer-right>
-      <UButton text="button" />
-    </template>
-  `,
-};
-
-export const slotHeaderLeftBefore = DefaultTemplate.bind({});
-slotHeaderLeftBefore.args = {
-  slotTemplate: `
-    <template #header-left-before>
-      <UIcon
-        name="close"
-        color="gray"
-       />
-    </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="close"
-        color="gray"
-       />
-    </template>
-  `,
-};
-
-export const slotHeaderRight = DefaultTemplate.bind({});
-slotHeaderRight.args = {
-  slotTemplate: `
-    <template #header-right>
-       <UButton size="sm" color="gray" text="button" />
-    </template>
-  `,
-};
-
-export const slotFooterLeft = DefaultTemplate.bind({});
-slotFooterLeft.args = {
-  slotTemplate: `
-    <template #footer-left>
-        <UButton text="button" />
-    </template>
-  `,
-};
-
-export const slotFooterRight = DefaultTemplate.bind({});
-slotFooterRight.args = {
-  slotTemplate: `
-    <template #footer-right>
-        <UButton text="button" />
-    </template>
-  `,
-};