vueless 0.0.3 → 0.0.4

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

@@ -1,69 +0,0 @@
-export default /*tw*/ {
-  wrapper: "fixed inset-0 z-50 outline-none",
-  wrapperTransition: {
-    enterActiveClass: "ease-out duration-300",
-    enterFromClass: "opacity-0 translate-y-4 sm:translate-y-0 transform sm:scale-95",
-    enterToClass: "opacity-100 translate-y-0 transform sm:scale-100",
-    leaveActiveClass: "ease-in duration-200",
-    leaveFromClass: "opacity-100 translate-y-0 transform sm:scale-100",
-    leaveToClass: "opacity-0 translate-y-4 sm:translate-y-0 transform sm:scale-95",
-  },
-  overlay: "fixed inset-0 z-40 bg-gray-900 bg-opacity-75",
-  overlayTransition: {
-    enterActiveClass: "ease-out duration-300",
-    enterFromClass: "opacity-0",
-    enterToClass: "opacity-100",
-    leaveActiveClass: "ease-in duration-200",
-    leaveFromClass: "opacity-100",
-    leaveToClass: "opacity-0",
-  },
-  innerWrapper: "py-12 w-full h-full overflow-auto",
-  header: "flex items-center justify-between px-4 md:px-8 pb-6 pt-8",
-  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-500",
-  headerRight: "",
-  closeIcon: "",
-  closeIconName: "close",
-  body: "space-y-4 px-4 md:px-8",
-  divider: "",
-  dividerSpacing: "",
-  footer: "flex justify-between px-4 md:px-8 py-8 max-md:flex-col max-md:gap-4",
-  footerLeft: "flex flex-col md:flex-row space-y-4 md:space-x-4 md:space-y-0 w-full",
-  footerRight: "flex flex-col md:flex-row space-y-4 md:space-x-4 md:space-y-0 w-full justify-end",
-  footerMobileReverse: "flex flex-col-reverse space-y-reverse group/reversed-footer",
-  modal: {
-    base: "mx-auto rounded-2xl bg-white",
-    variants: {
-      width: {
-        xs: "md:w-[25rem]",
-        sm: "md:w-[31.25rem]",
-        md: "md:w-[37.5rem]",
-        lg: "md:w-[43.75rem]",
-        xl: "md:w-[50rem]",
-        "2xl": "md:w-[56.25rem]",
-        "3xl": "md:w-[62.5rem]",
-        "4xl": "md:w-[68.75rem]",
-        "5xl": "md:w-[75rem]",
-      },
-      inner: {
-        true: "!my-[4.5rem]",
-      },
-    },
-  },
-  defaultVariants: {
-    color: "brand",
-    width: "sm",
-    inner: false,
-    closeIcon: true,
-    escToClose: true,
-    clickToClose: true,
-    noDivider: false,
-    mobileBottomAlign: false,
-    mobileFooterReverse: false,
-  },
-};

package/ui.container-modal/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 UModal = "UModal";

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

@@ -1,170 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UModal from "vueless/ui.container-modal";
-import UButton from "vueless/ui.button";
-import UIcon from "vueless/ui.image-icon";
-import UHeader from "vueless/ui.text-header";
-import UInput from "vueless/ui.form-input";
-import UTextarea from "vueless/ui.form-textarea";
-import URow from "vueless/ui.container-row";
-
-export default {
-  id: "5070",
-  title: "Containers / Modal",
-  component: UModal,
-  args: {
-    title: "Modal title",
-    value: false,
-    slotDefaultTemplate: `
-      <template #default>
-        <URow>
-          <UInput label="Name" />
-          <UInput label="Lastname" />
-        </URow>
-
-        <UTextarea class="mb-7" label="Comments" rows="3" />
-      </template>
-    `,
-  },
-  argTypes: {
-    ...getArgTypes(UModal.name),
-  },
-  parameters: {
-    docs: {
-      story: {
-        height: "500px",
-      },
-    },
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UModal, URow, UButton, UIcon, UHeader, UInput, UTextarea },
-  setup() {
-    return { args };
-  },
-  template: `
-    <div>
-      <UModal v-bind="args" v-model="args.value">
-        ${args.slotDefaultTemplate}
-        ${args.slotTemplate || ""}
-      </UModal>
-
-      <UButton label="show modal" @click="onClick"/>
-    </div>
-  `,
-  methods: {
-    onClick() {
-      args.value = true;
-    },
-  },
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UModal, UButton, URow, UInput, UTextarea },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.width.options,
-    };
-  },
-  template: `
-    <div>
-      <UModal v-bind="args" v-model="args.value">
-        ${args.slotDefaultTemplate}
-        ${args.slotTemplate || ""}
-      </UModal>
-
-      <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;
-    },
-  },
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = { text: "" };
-
-export const backRoute = DefaultTemplate.bind({});
-backRoute.args = { backRoute: { title: "route title" } };
-
-export const slotDefault = DefaultTemplate.bind({});
-slotDefault.args = {
-  slotTemplate: `
-    <template #default>
-      Some text
-    </template>
-  `,
-};
-
-export const slotHeaderLeftBefore = DefaultTemplate.bind({});
-slotHeaderLeftBefore.args = {
-  slotTemplate: `
-    <template #header-left-before>
-      <UIcon
-        name="star"
-        color="gray"
-      />
-    </template>
-  `,
-};
-
-export const slotHeaderLeft = DefaultTemplate.bind({});
-slotHeaderLeft.args = {
-  slotTemplate: `
-    <template #header-left>
-      <UHeader size="lg" label="Large title" />
-    </template>
-  `,
-};
-
-export const slotHeaderLeftAfter = DefaultTemplate.bind({});
-slotHeaderLeftAfter.args = {
-  slotTemplate: `
-    <template #header-left-after>
-      <UIcon
-        name="star"
-        color="gray"
-      />
-    </template>
-  `,
-};
-
-export const slotHeaderRight = DefaultTemplate.bind({});
-slotHeaderRight.args = {
-  slotTemplate: `
-    <template #header-right>
-       <UButton size="sm" color="gray" label="some button" />
-    </template>
-  `,
-};
-
-export const slotFooterLeft = DefaultTemplate.bind({});
-slotFooterLeft.args = {
-  slotTemplate: `
-    <template #footer-left>
-      <UButton label="Submit" />
-    </template>
-  `,
-};
-
-export const slotFooterRight = DefaultTemplate.bind({});
-slotFooterRight.args = {
-  slotTemplate: `
-    <template #footer-right>
-      <UButton label="Back" />
-    </template>
-  `,
-};

package/ui.container-modal/index.vue

@@ -1,335 +0,0 @@
-<template>
-  <transition v-bind="config.overlayTransition">
-    <div v-if="isShownModal" v-bind="overlayAttrs" />
-  </transition>
-
-  <transition v-bind="config.wrapperTransition">
-    <div
-      v-if="isShownModal"
-      :id="id"
-      ref="wrapperRef"
-      tabindex="0"
-      :data-cy="dataCy"
-      v-bind="wrapperAttrs"
-      @keydown.self.esc="onKeydownEsc"
-    >
-      <div v-bind="innerWrapperAttrs" @click.self="onClickOutside">
-        <div v-bind="modalAttrs">
-          <div v-if="isExistHeader" v-bind="headerAttrs">
-            <div v-bind="headerLeftAttrs">
-              <!-- @slot Use it to add something to the header left before. -->
-              <slot name="header-left-before" />
-
-              <!-- @slot Use it to add something to the header left. -->
-              <slot name="header-left">
-                <div v-bind="headerLeftFallbackAttrs">
-                  <ULink
-                    v-if="isShownArrowButton"
-                    size="xs"
-                    color="gray"
-                    :route="backRoute"
-                    v-bind="backLinkAttrs"
-                    @click="onClickBackLink"
-                  >
-                    <UIcon
-                      :name="config.backLinkIconName"
-                      size="xs"
-                      color="gray"
-                      v-bind="backLinkIconAttrs"
-                    />
-                    {{ backRoute.title }}
-                  </ULink>
-
-                  <UHeader size="md" :color="titleColor" :label="title" v-bind="titleAttrs" />
-                  <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
-                </div>
-              </slot>
-
-              <!-- @slot Use it to add something to the header left after. -->
-              <slot name="header-left-after" />
-            </div>
-
-            <div v-bind="headerRightAttrs">
-              <!-- @slot Use it to add something to the header right. -->
-              <slot name="header-right">
-                <UIcon
-                  v-if="closeIcon"
-                  :name="config.closeIconName"
-                  interactive
-                  :data-cy="`${dataCy}-close`"
-                  v-bind="closeIconAttrs"
-                  @click="onClickCloseModal"
-                />
-              </slot>
-            </div>
-          </div>
-
-          <div v-bind="bodyAttrs">
-            <!-- @slot Use it to add something to the modal body. -->
-            <slot />
-          </div>
-
-          <UDivider v-if="!isExistFooter || !noDivider" no-border v-bind="dividerSpacingAttrs" />
-
-          <template v-if="isExistFooter">
-            <UDivider
-              v-if="!noDivider"
-              variant="dark"
-              no-bottom-padding
-              no-top-padding
-              v-bind="dividerAttrs"
-            />
-
-            <div v-bind="footerAttrs">
-              <div v-if="hasSlotContent($slots['footer-left'])" v-bind="footerLeftAttrs">
-                <!-- @slot Use it to add something to the footer left. -->
-                <slot name="footer-left" />
-              </div>
-
-              <div v-if="hasSlotContent($slots['footer-right'])" v-bind="footerRightAttrs">
-                <!-- @slot Use it to add something to the footer right. -->
-                <slot name="footer-right" />
-              </div>
-            </div>
-          </template>
-        </div>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script setup>
-import { computed, useSlots, watch, ref } from "vue";
-
-import UIService, { getRandomId } from "vueless/service.ui";
-
-import UIcon from "vueless/ui.image-icon";
-import UHeader from "vueless/ui.text-header";
-import UDivider from "vueless/ui.container-divider";
-
-import defaultConfig from "./configs/default.config";
-import { UModal } from "./constants/index";
-import { useAttrs } from "./composables/attrs.composable";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UModal", inheritAttrs: false });
-const slots = useSlots();
-
-const wrapperRef = ref(null);
-
-const props = defineProps({
-  /**
-   * Change modal state (hidden / shown).
-   */
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Set modal title.
-   */
-  title: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * The color of the title.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
-   */
-  titleColor: {
-    type: String,
-    default: UIService.get(defaultConfig, UModal).default.color,
-  },
-
-  /**
-   * Sets modal description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Set back link route.
-   */
-  backRoute: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Set width for modal.
-   * @values xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
-   */
-  width: {
-    type: String,
-    default: UIService.get(defaultConfig, UModal).default.width,
-  },
-
-  /**
-   * Allow closing modal by clicking on overlay.
-   */
-  clickToClose: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UModal).default.clickToClose,
-  },
-
-  /**
-   * Allow closing modal by clicking on close icon.
-   */
-  closeIcon: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UModal).default.closeIcon,
-  },
-
-  /**
-   * Allow closing modal by pressing escape (esc) key.
-   */
-  escToClose: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UModal).default.escToClose,
-  },
-
-  /**
-   * Add extra top margin for modal inside another modal.
-   */
-  inner: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UModal).default.inner,
-  },
-
-  /**
-   * Hide divider between content end footer.
-   */
-  noDivider: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UModal).default.noDivider,
-  },
-
-  /**
-   * Reverse left and right footer blocks (mobile version only).
-   */
-  mobileFooterReverse: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UModal).default.mobileFooterReverse,
-  },
-
-  /**
-   * Attach small modal to the bottom of the screen (mobile version only).
-   */
-  mobileBottomAlign: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UModal).default.mobileBottomAlign,
-  },
-
-  /**
-   * Set component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Unique element id.
-   * @ignore
-   */
-  id: {
-    type: String,
-    default: () => getRandomId(),
-  },
-
-  /**
-   * Set data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits(["update:modelValue", "back"]);
-
-const {
-  config,
-  modalAttrs,
-  titleAttrs,
-  backLinkAttrs,
-  backLinkIconAttrs,
-  closeIconAttrs,
-  dividerAttrs,
-  dividerSpacingAttrs,
-  overlayAttrs,
-  wrapperAttrs,
-  innerWrapperAttrs,
-  headerAttrs,
-  headerLeftAttrs,
-  headerLeftFallbackAttrs,
-  descriptionAttrs,
-  headerRightAttrs,
-  bodyAttrs,
-  footerLeftAttrs,
-  footerAttrs,
-  footerRightAttrs,
-  hasSlotContent,
-} = useAttrs(props);
-
-const isShownModal = computed({
-  get: () => props.modelValue,
-  set: (value) => emit("update:modelValue", value),
-});
-
-const isShownArrowButton = computed(() => {
-  return !!Object.keys(props.backRoute).length;
-});
-
-const isExistHeader = computed(() => {
-  return (
-    hasSlotContent(slots["header-left"]) ||
-    hasSlotContent(slots["header-left-before"]) ||
-    hasSlotContent(slots["header-left-after"]) ||
-    hasSlotContent(slots["header-right"]) ||
-    props.title
-  );
-});
-
-const isExistFooter = computed(() => {
-  return hasSlotContent(slots["footer-left"]) || hasSlotContent(slots["footer-right"]);
-});
-
-watch(() => isShownModal.value, preventOverlayFromScrolling);
-
-function preventOverlayFromScrolling(newValue) {
-  // focus wrapper to be able to close modal on esc
-  setTimeout(() => wrapperRef.value?.focus(), 0);
-
-  if (newValue) {
-    document.body.style.overflow = "hidden";
-  } else {
-    document.getElementById(`${props.id}`).style.overflow = "hidden";
-    document.body.style.overflow = "auto";
-  }
-}
-
-function onClickBackLink() {
-  emit("back");
-}
-
-function onClickOutside() {
-  props.clickToClose && closeModal();
-}
-
-function onKeydownEsc() {
-  props.escToClose && closeModal();
-}
-
-function onClickCloseModal() {
-  props.closeIcon && closeModal();
-}
-
-function closeModal() {
-  isShownModal.value = false;
-}
-</script>

package/ui.container-modal-confirm/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-modal-confirm/composable/attrs.composable.js

@@ -1,19 +0,0 @@
-import useUI from "vueless/composable.ui";
-import defaultConfig from "../configs/default.config";
-
-export function useAttrs(props) {
-  const { getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-
-  const modalAttrs = getAttrs("modal", { isComponent: true });
-  const footerLeftFallbackAttrs = getAttrs("footerLeftFallback");
-  const confirmButtonAttrs = getAttrs("confirmButton", { isComponent: true });
-  const cancelButtonAttrs = getAttrs("cancelButton", { isComponent: true });
-
-  return {
-    footerLeftFallbackAttrs,
-    modalAttrs,
-    confirmButtonAttrs,
-    cancelButtonAttrs,
-    hasSlotContent,
-  };
-}

package/ui.container-modal-confirm/configs/default.config.js

@@ -1,12 +0,0 @@
-export default /*tw*/ {
-  modal: "",
-  footerLeftFallback: "flex space-x-4",
-  confirmButton: "w-full",
-  cancelButton: "w-full",
-  defaultVariants: {
-    color: "brand",
-    width: "sm",
-    cancelButton: true,
-    confirmDisabled: false,
-  },
-};

package/ui.container-modal-confirm/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 UModalConfirm = "UModalConfirm";