vueless 0.0.4 → 0.0.5

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

@@ -0,0 +1,69 @@
+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/src/ui.container-modal/constants/index.js

@@ -0,0 +1,5 @@
+/*
+  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/src/ui.container-modal/index.stories.js

@@ -0,0 +1,170 @@
+import { getArgTypes } from "../service.storybook";
+
+import UModal from "../ui.container-modal";
+import UButton from "../ui.button";
+import UIcon from "../ui.image-icon";
+import UHeader from "../ui.text-header";
+import UInput from "../ui.form-input";
+import UTextarea from "../ui.form-textarea";
+import URow from "../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/src/ui.container-modal/index.vue

@@ -0,0 +1,335 @@
+<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 "../service.ui";
+
+import UIcon from "../ui.image-icon";
+import UHeader from "../ui.text-header";
+import UDivider from "../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/src/ui.container-modal-confirm/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../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/src/ui.container-modal-confirm/composable/attrs.composable.js

@@ -0,0 +1,20 @@
+import useUI from "../../composable.ui";
+import defaultConfig from "../configs/default.config";
+
+export function useAttrs(props) {
+  const { config, 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 {
+    config,
+    footerLeftFallbackAttrs,
+    modalAttrs,
+    confirmButtonAttrs,
+    cancelButtonAttrs,
+    hasSlotContent,
+  };
+}

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

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

package/src/ui.container-modal-confirm/constants/index.js

@@ -0,0 +1,5 @@
+/*
+  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";