vueless 0.0.3 → 0.0.4

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

@@ -1,209 +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 {
-  id: "5080",
-  title: "Containers / Modal Confirm",
-  component: UModalConfirm,
-  args: {
-    title: "Modal Confirm title",
-    confirmLabel: "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 label="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 label="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" :label="size" @click="onClick(size)"
-        />
-      </URow>
-    </div>
-  `,
-  methods: {
-    onClick(value) {
-      args.width = value;
-      args.value = true;
-    },
-  },
-});
-
-const ColorTemplate = (args, { argTypes } = {}) => ({
-  components: { UModalConfirm, UButton, URow },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <div>
-      <UModalConfirm v-bind="args" v-model="args.value">
-        ${args.slotTemplate}
-      </UModalConfirm>
-
-      <URow>
-        <UButton
-          v-for="(color, index) in colors"
-          :key="index" :label="color" @click="onClick(color)"
-        />
-      </URow>
-    </div>
-  `,
-  methods: {
-    onClick(value) {
-      args.color = value;
-      args.value = true;
-    },
-  },
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const withoutCancelButton = DefaultTemplate.bind({});
-withoutCancelButton.args = { cancelButton: false };
-
-export const disableAcceptButton = DefaultTemplate.bind({});
-disableAcceptButton.args = { confirmDisabled: true };
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = { text: "" };
-
-export const color = ColorTemplate.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" label="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 label="I'm in the right slot" size="sm" color="gray" />
-    </template>
-  `,
-};
-
-export const slotDefault = SlotTemplate.bind({});
-slotDefault.args = {
-  slotTemplate: `
-    <template #default>
-      🤘🤘🤘
-    </template>
-  `,
-};
-
-export const slotFooterRight = SlotTemplate.bind({});
-slotFooterRight.args = {
-  slotTemplate: `
-    <template #footer-right>
-       <UButton label="I'm in the right slot" size="sm" color="gray" />
-    </template>
-  `,
-};

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

@@ -1,196 +0,0 @@
-<template>
-  <UModal
-    v-model="isShownModal"
-    :width="width"
-    :title="title"
-    no-divider
-    mobile-bottom-align
-    :data-cy="dataCy"
-    v-bind="modalAttrs"
-  >
-    <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>
-      <slot v-if="hasSlotContent($slots['footer-left'])" name="footer-left" />
-
-      <div v-else v-bind="footerLeftFallbackAttrs">
-        <UButton
-          :label="confirmLabel"
-          :color="color"
-          :disabled="confirmDisabled"
-          :data-cy="`${dataCy}-accept`"
-          v-bind="confirmButtonAttrs"
-          @click="emitConfirmAction"
-        />
-
-        <UButton
-          v-if="cancelButton"
-          :label="i18n.cancel"
-          variant="thirdary"
-          filled
-          :data-cy="`${dataCy}-close`"
-          v-bind="cancelButtonAttrs"
-          @click="onCloseModal"
-        />
-      </div>
-    </template>
-
-    <template #footer-right>
-      <slot name="footer-right" />
-    </template>
-  </UModal>
-</template>
-
-<script setup>
-import { computed } from "vue";
-
-import UIService from "vueless/service.ui";
-import I18nServiceDefault from "@vueless/services/i18n";
-
-import UButton from "vueless/ui.button";
-import UModal from "vueless/ui.container-modal";
-
-import defaultConfig from "./configs/default.config";
-import { UModalConfirm } from "./constants/index";
-import { useAttrs } from "./composable/attrs.composable";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UModalConfirm", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Change modal state (hidden / shown).
-   */
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Set modal's title.
-   */
-  title: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Set confirm button label.
-   */
-  confirmLabel: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Set the disabled accept-button.
-   */
-  confirmDisabled: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UModalConfirm).default.confirmDisabled,
-  },
-
-  /**
-   * Show cancel button.
-   */
-  cancelButton: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UModalConfirm).default.cancelButton,
-  },
-
-  /**
-   * Buttons and modal title color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
-   */
-  color: {
-    type: String,
-    default: UIService.get(defaultConfig, UModalConfirm).default.color,
-  },
-
-  /**
-   * Set width for modal.
-   * @values xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
-   */
-  width: {
-    type: String,
-    default: UIService.get(defaultConfig, UModalConfirm).default.width,
-  },
-
-  /**
-   * Sets component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Sets data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits(["update:modelValue", "confirm", "close"]);
-
-const { getTranslation } = new I18nServiceDefault();
-const {
-  hasSlotContent,
-  footerLeftFallbackAttrs,
-  modalAttrs,
-  confirmButtonAttrs,
-  cancelButtonAttrs,
-} = useAttrs(props);
-
-const isShownModal = computed({
-  get: () => props.modelValue,
-  set: (value) => emit("update:modelValue", value),
-});
-
-const i18n = computed(() => ({
-  cancel: getTranslation("cancel"),
-}));
-
-function closeModal() {
-  isShownModal.value = false;
-}
-
-function onCloseModal() {
-  emit("close");
-  closeModal();
-}
-
-function emitConfirmAction() {
-  emit("confirm");
-  closeModal();
-}
-</script>
-
-<i18n>
-en:
-  cancel: "Cancel"
-ru:
-  cancel: "Отмена"
-ua:
-  cancel: "Відміна"
-</i18n>

package/ui.container-page/Docs.mdx

@@ -1,16 +0,0 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "vueless/service.storybook";
-
-import * as stories from "./index.stories";
-import defaultConfig from "./configs/default.config?raw"
-
-<Meta of={stories} />
-<Title of={stories} />
-<Subtitle of={stories} />
-<Description of={stories} />
-<Primary of={stories}  />
-<Controls of={stories.Default} />
-<Stories of={stories} />
-
-## **Default config**
-<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.container-page/composables/attrs.composable.js

@@ -1,96 +0,0 @@
-import useUI from "vueless/composable.ui";
-import { cva, cx, isMobileApp } from "vueless/service.ui";
-
-import defaultConfig from "../configs/default.config";
-import { computed } from "vue";
-
-export function useAttrs(props, { isMobileDevice }) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { wrapper, page, rightRounding } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const cvaPage = cva({
-    base: page.base,
-    variants: page.variants,
-    compoundVariants: page.compoundVariants,
-  });
-
-  const cvaRightRounding = cva({
-    base: rightRounding.base,
-    variants: rightRounding.variants,
-    compoundVariants: rightRounding.compoundVariants,
-  });
-
-  const wrapperClasses = computed(() =>
-    cvaWrapper({
-      width: props.width,
-      fixedRounding: props.fixedRounding,
-    }),
-  );
-
-  const pageClasses = computed(() =>
-    cvaPage({
-      fixedRounding: props.fixedRounding,
-      gray: props.gray,
-    }),
-  );
-
-  const rightRoundingClasses = computed(() => cvaRightRounding({ gray: props.gray }));
-
-  const wrapperAttrsRaw = getAttrs("wrapper", { classes: wrapperClasses });
-  const pageAttrs = getAttrs("page", { classes: pageClasses });
-  const headerAttrs = getAttrs("header");
-  const headerLeftAttrs = getAttrs("headerLeft");
-  const headerRightAttrs = getAttrs("headerRight");
-  const headerLeftFallbackAttrs = getAttrs("headerLeftFallback");
-  const backLinkAttrs = getAttrs("backLink", { isComponent: true });
-  const backLinkIconAttrs = getAttrs("backLinkIcon", { isComponent: true });
-  const titleAttrs = getAttrs("title", { isComponent: true });
-  const descriptionAttrs = getAttrs("description");
-  const footerAttrsRaw = getAttrs("footer");
-  const footerLeftAttrs = getAttrs("footerLeft");
-  const footerRightAttrs = getAttrs("footerRight");
-  const rightRoundingWrapperAttrs = getAttrs("rightRoundingWrapper");
-  const rightRoundingAttrs = getAttrs("rightRounding", { classes: rightRoundingClasses });
-
-  const wrapperAttrs = computed(() => ({
-    ...wrapperAttrsRaw.value,
-    class: cx([
-      wrapperAttrsRaw.value.class,
-      isMobileDevice.value && !isMobileApp && config.value.wrapperMobile,
-    ]),
-  }));
-
-  const footerAttrs = computed(() => ({
-    ...footerAttrsRaw.value,
-    class: cx([
-      footerAttrsRaw.value.class,
-      props.mobileFooterReverse && isMobileDevice.value && config.value.footerMobileReverse,
-    ]),
-  }));
-
-  return {
-    config,
-    wrapperAttrs,
-    pageAttrs,
-    rightRoundingWrapperAttrs,
-    rightRoundingAttrs,
-    headerAttrs,
-    headerRightAttrs,
-    headerLeftAttrs,
-    headerLeftFallbackAttrs,
-    titleAttrs,
-    backLinkAttrs,
-    backLinkIconAttrs,
-    descriptionAttrs,
-    footerAttrs,
-    footerLeftAttrs,
-    footerRightAttrs,
-    hasSlotContent,
-  };
-}

package/ui.container-page/configs/default.config.js

@@ -1,71 +0,0 @@
-export default /*tw*/ {
-  htmlBody: "bg-gray-50 group/body-gray",
-  wrapperMobile: "overflow-x-hidden mb-[theme('spacing.mobile-menu-height')]",
-  wrapper: {
-    base: "min-h-screen overflow-auto",
-    variants: {
-      width: {
-        xs: "md:w-[25rem] md:max-[500px]:!w-full",
-        sm: "md:w-[31.25rem] md:max-[600px]:!w-full",
-        md: "md:w-[37.5rem] md:max-[700px]:!w-full",
-        lg: "md:w-[43.75rem] md:max-[800px]:!w-full",
-        xl: "md:w-[50rem] md:max-[900px]:!w-full",
-        "2xl": "md:w-[56.25rem] md:max-[1000px]:!w-full",
-        "3xl": "md:w-[62.5rem] md:max-[1100px]:!w-full",
-        "4xl": "md:w-[68.75rem] md:max-[1200px]:!w-full",
-        "5xl": "md:w-[75rem] md:max-[1300px]:!w-full",
-        wide: "md:w-full",
-      },
-      fixedRounding: {
-        true: "relative pr-0 md:pr-4 md:rounded-none",
-        false: "md:rounded-r-2xl",
-      },
-    },
-  },
-  page: {
-    base: "p-4 md:py-6 md:pl-8 mx-auto min-h-screen w-full",
-    variants: {
-      gray: {
-        false: "bg-white",
-        true: "bg-gray-50",
-      },
-      fixedRounding: {
-        true: "md:pr-4",
-        false: "md:pr-8",
-      },
-    },
-  },
-  header: "flex items-start justify-between mb-4 md:mb-6",
-  headerLeft: "flex items-center space-x-4",
-  headerLeftFallback: "flex flex-col",
-  backLink: "flex items-center gap-0.5",
-  backLinkIcon: "",
-  backLinkIconName: "arrow_back",
-  title: "",
-  description: "mt-1.5 text-base font-normal text-gray-600",
-  headerRight: "",
-  footer: `mb-0 mt-14 justify-between pt-8 md:flex md:items-baseline space-y-4 md:space-y-0 border-t border-gray-200`,
-  footerLeft: "md:flex space-y-4 md:space-x-4 md:space-y-0",
-  footerRight: `
-    md:flex space-y-4 md:space-x-4 md:space-y-0 group-[]/reversed-footer:flex
-    group-[]/reversed-footer:flex-col-reverse group-[]/reversed-footer:space-y-reverse
-  `,
-  footerMobileReverse: "flex flex-col-reverse space-y-reverse group/reversed-footer",
-  rightRoundingWrapper: "absolute right-4",
-  rightRounding: {
-    base: "fixed top-0 w-4 rounded-r-2xl bg-white h-screen",
-    variants: {
-      gray: {
-        false: "bg-white",
-        true: "bg-gray-50",
-      },
-    },
-  },
-  defaultVariants: {
-    titleSize: "lg",
-    width: "wide",
-    gray: false,
-    fixedRounding: true,
-    mobileFooterReverse: false,
-  },
-};

package/ui.container-page/constants/index.js

@@ -1,5 +0,0 @@
-/*
-  This const is needed to prevent the issue in script setup:
- `defineProps` is referencing locally declared variables. (vue/valid-define-props)
- */
-export const UPage = "UPage";