vueless 0.0.4 → 0.0.6

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

@@ -0,0 +1,336 @@
+<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 ULink from "../ui.button-link";
+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";

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

@@ -0,0 +1,209 @@
+import { getArgTypes } from "../service.storybook";
+
+import UModalConfirm from "../ui.container-modal-confirm";
+import UButton from "../ui.button";
+import UHeader from "../ui.text-header";
+import UIcon from "../ui.image-icon";
+import URow from "../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>
+  `,
+};