vueless 0.0.2 → 0.0.3

package/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 "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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -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/ui.container-modal-confirm/index.stories.js

@@ -7,11 +7,12 @@ 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",
-    actionButtonText: "Confirm",
+    confirmLabel: "Confirm",
     slotTemplate: `
       <template #default>
        Confirm the action?
@@ -41,7 +42,7 @@ const DefaultTemplate = (args) => ({
         ${args.slotTemplate}
       </UModalConfirm>
 
-      <UButton text="show modal" @click="onClick"/>
+      <UButton label="show modal" @click="onClick"/>
     </div>
   `,
   methods: {
@@ -62,7 +63,7 @@ const SlotTemplate = (args) => ({
         ${args.slotTemplate}
       </UModalConfirm>
 
-      <UButton text="show modal" @click="onClick"/>
+      <UButton label="show modal" @click="onClick"/>
     </div>
   `,
   methods: {
@@ -72,7 +73,7 @@ const SlotTemplate = (args) => ({
   },
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UModalConfirm, UButton, URow },
   setup() {
     return {
@@ -85,10 +86,11 @@ const SizesTemplate = (args, { argTypes }) => ({
       <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)"
+          :key="index" :label="size" @click="onClick(size)"
         />
       </URow>
     </div>
@@ -101,12 +103,51 @@ const SizesTemplate = (args, { argTypes }) => ({
   },
 });
 
+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: `
@@ -123,7 +164,7 @@ export const slotHeaderLeft = SlotTemplate.bind({});
 slotHeaderLeft.args = {
   slotTemplate: `
     <template #header-left>
-      <UHeader size="lg" text="Large title" />
+      <UHeader size="lg" label="Large title" />
     </template>
   `,
 };
@@ -144,7 +185,25 @@ export const slotHeaderRight = SlotTemplate.bind({});
 slotHeaderRight.args = {
   slotTemplate: `
     <template #header-right>
-       <UButton text="I'm in the right slot" size="sm" color="gray" />
+       <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,13 +1,12 @@
 <template>
   <UModal
     v-model="isShownModal"
-    :title="title"
     :width="width"
-    :data-cy="dataCy"
-    :color="color"
+    :title="title"
     no-divider
     mobile-bottom-align
-    class="mono-confirm-modal"
+    :data-cy="dataCy"
+    v-bind="modalAttrs"
   >
     <template #header-left-before>
       <slot name="header-left-before" />
@@ -30,150 +29,161 @@
     </template>
 
     <template #footer-left>
-      <div class="flex space-x-4">
+      <slot v-if="hasSlotContent($slots['footer-left'])" name="footer-left" />
+
+      <div v-else v-bind="footerLeftFallbackAttrs">
         <UButton
-          class="w-full"
-          :disabled="disableAcceptButton"
-          :text="actionButtonText"
+          :label="confirmLabel"
           :color="color"
+          :disabled="confirmDisabled"
           :data-cy="`${dataCy}-accept`"
+          v-bind="confirmButtonAttrs"
           @click="emitConfirmAction"
         />
 
         <UButton
-          v-if="shownCancelButton"
-          class="w-full"
-          :color="color"
-          variant="secondary"
-          :text="i18n.cancel"
+          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>
+<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 I18nServiceDefault from "vueless/service.i18n";
 
-export default {
-  name: "UModalConfirm",
+import defaultConfig from "./configs/default.config";
+import { UModalConfirm } from "./constants/index";
+import { useAttrs } from "./composable/attrs.composable";
 
-  components: {
-    UButton,
-    UModal,
+/* 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,
   },
 
-  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: "",
-    },
+  /**
+   * Set modal's title.
+   */
+  title: {
+    type: String,
+    default: "",
   },
 
-  emits: ["update:modelValue", "actionConfirmed", "close"],
+  /**
+   * Set confirm button label.
+   */
+  confirmLabel: {
+    type: String,
+    default: "",
+  },
 
-  setup() {
-    const { getTranslation } = new I18nServiceDefault();
+  /**
+   * Set the disabled accept-button.
+   */
+  confirmDisabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UModalConfirm).default.confirmDisabled,
+  },
 
-    return { getTranslation };
+  /**
+   * Show cancel button.
+   */
+  cancelButton: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UModalConfirm).default.cancelButton,
   },
 
-  computed: {
-    isShownModal: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
-
-    i18n() {
-      return { cancel: this.getTranslation("cancel") };
-    },
+  /**
+   * 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,
   },
 
-  methods: {
-    closeModal() {
-      this.isShownModal = false;
-    },
+  /**
+   * Set width for modal.
+   * @values xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
+   */
+  width: {
+    type: String,
+    default: UIService.get(defaultConfig, UModalConfirm).default.width,
+  },
 
-    onCloseModal() {
-      this.$emit("close");
-      this.closeModal();
-    },
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-    emitConfirmAction() {
-      this.$emit("actionConfirmed");
-      this.closeModal();
-    },
+  /**
+   * 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>

package/ui.container-page/Docs.mdx

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,96 @@
+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

@@ -0,0 +1,71 @@
+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

@@ -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 UPage = "UPage";