vueless 0.0.513 → 0.0.514

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

@@ -1,3 +1,85 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import { merge } from "lodash-es";
+
+import { getDefault } from "../utils/ui.ts";
+
+import UButton from "../ui.button/UButton.vue";
+import UModal from "../ui.container-modal/UModal.vue";
+
+import defaultConfig from "./config.ts";
+import { UModalConfirm } from "./constants.ts";
+import useAttrs from "./useAttrs.ts";
+import { useLocale } from "../composables/useLocale.ts";
+
+import type { UModalConfirmProps } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<UModalConfirmProps>(), {
+  confirmColor: getDefault<UModalConfirmProps>(defaultConfig, UModalConfirm).confirmColor,
+  confirmDisabled: getDefault<UModalConfirmProps>(defaultConfig, UModalConfirm).confirmDisabled,
+  cancelHidden: getDefault<UModalConfirmProps>(defaultConfig, UModalConfirm).cancelHidden,
+  size: getDefault<UModalConfirmProps>(defaultConfig, UModalConfirm).size,
+  closeOnCross: getDefault<UModalConfirmProps>(defaultConfig, UModalConfirm).closeOnCross,
+  closeOnOverlay: getDefault<UModalConfirmProps>(defaultConfig, UModalConfirm).closeOnOverlay,
+  closeOnEsc: getDefault<UModalConfirmProps>(defaultConfig, UModalConfirm).closeOnEsc,
+  inner: getDefault<UModalConfirmProps>(defaultConfig, UModalConfirm).inner,
+  mobileStickBottom: getDefault<UModalConfirmProps>(defaultConfig, UModalConfirm).mobileStickBottom,
+  dataTest: "",
+});
+
+const emit = defineEmits([
+  /**
+   * Triggers when the modal is toggled.
+   * @property {Boolean} value
+   */
+  "update:modelValue",
+
+  /**
+   * Triggers when the action is confirmed.
+   */
+  "confirm",
+
+  /**
+   * Triggers when the action is declined or modal is closed.
+   */
+  "close",
+]);
+
+const { tm } = useLocale();
+
+const {
+  hasSlotContent,
+  footerLeftFallbackAttrs,
+  confirmModalAttrs,
+  confirmButtonAttrs,
+  cancelButtonAttrs,
+} = useAttrs(props);
+
+const isShownModal = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+const i18nGlobal = tm(UModalConfirm);
+const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props?.config?.i18n));
+
+function closeModal() {
+  isShownModal.value = false;
+}
+
+function onCloseModal() {
+  emit("close");
+  closeModal();
+}
+
+function emitConfirmAction() {
+  emit("confirm");
+  closeModal();
+}
+</script>
+
 <template>
   <UModal
     :id="id"
@@ -78,202 +160,3 @@
     </template>
   </UModal>
 </template>
-
-<script setup>
-import { computed } from "vue";
-import { merge } from "lodash-es";
-
-import { getDefault } from "../utils/ui.ts";
-
-import UButton from "../ui.button/UButton.vue";
-import UModal from "../ui.container-modal/UModal.vue";
-
-import defaultConfig from "./config.js";
-import { UModalConfirm } from "./constants.js";
-import useAttrs from "./useAttrs.js";
-import { useLocale } from "../composables/useLocale.ts";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Set modal state (hidden / shown).
-   */
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Modal title.
-   */
-  title: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Modal description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Confirm button label.
-   */
-  confirmLabel: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Confirm button color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
-   */
-  confirmColor: {
-    type: String,
-    default: getDefault(defaultConfig, UModalConfirm).confirmColor,
-  },
-
-  /**
-   * Set the disabled accept-button.
-   */
-  confirmDisabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UModalConfirm).confirmDisabled,
-  },
-
-  /**
-   * Hide cancel button.
-   */
-  cancelHidden: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UModalConfirm).cancelHidden,
-  },
-
-  /**
-   * Modal size (width).
-   * @values xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UModalConfirm).size,
-  },
-
-  /**
-   * Allow closing modal by clicking on close cross.
-   */
-  closeOnCross: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UModalConfirm).closeOnCross,
-  },
-
-  /**
-   * Allow closing modal by clicking on overlay.
-   */
-  closeOnOverlay: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UModalConfirm).closeOnOverlay,
-  },
-
-  /**
-   * Allow closing modal by pressing escape (esc) on the keyboard.
-   */
-  closeOnEsc: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UModalConfirm).closeOnEsc,
-  },
-
-  /**
-   * Add extra top margin for modal inside another modal.
-   */
-  inner: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UModalConfirm).inner,
-  },
-
-  /**
-   * Attach small modal to the bottom of the screen (mobile version only).
-   */
-  mobileStickBottom: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UModalConfirm).mobileStickBottom,
-  },
-
-  /**
-   * Unique element id.
-   */
-  id: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits([
-  /**
-   * Triggers when the modal is toggled.
-   * @property {Boolean} value
-   */
-  "update:modelValue",
-
-  /**
-   * Triggers when the action is confirmed.
-   */
-  "confirm",
-
-  /**
-   * Triggers when the action is declined or modal is closed.
-   */
-  "close",
-]);
-
-const { tm } = useLocale();
-
-const {
-  hasSlotContent,
-  footerLeftFallbackAttrs,
-  confirmModalAttrs,
-  confirmButtonAttrs,
-  cancelButtonAttrs,
-} = useAttrs(props);
-
-const isShownModal = computed({
-  get: () => props.modelValue,
-  set: (value) => emit("update:modelValue", value),
-});
-
-const i18nGlobal = tm(UModalConfirm);
-const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
-
-function closeModal() {
-  isShownModal.value = false;
-}
-
-function onCloseModal() {
-  emit("close");
-  closeModal();
-}
-
-function emitConfirmAction() {
-  emit("confirm");
-  closeModal();
-}
-</script>

package/ui.container-modal-confirm/storybook/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../../utils/storybook.ts";
 
-import * as stories from "./stories.js";
-import defaultConfig from "../config.js?raw"
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.container-modal-confirm/storybook/{stories.js → stories.ts}

@@ -6,6 +6,14 @@ import UHeader from "../../ui.text-header/UHeader.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UModalConfirmProps } from "../types.ts";
+
+interface UModalConfirmArgs extends UModalConfirmProps {
+  slotTemplate?: string;
+  enum: "size" | "confirmColor";
+}
+
 /**
  * The `UModalConfirm` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.container-modal-confirm)
  */
@@ -28,14 +36,14 @@ export default {
       },
     },
   },
-};
+} as Meta;
 
 const defaultTemplate = `
   It looks like you going to complete the transaction before the process will finished.
   All unsaved data will be lost.
 `;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UModalConfirmArgs> = (args: UModalConfirmArgs) => ({
   components: { UModalConfirm, UButton, UHeader, UIcon },
   setup() {
     function onClick() {
@@ -57,7 +65,10 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UModalConfirmArgs> = (
+  args: UModalConfirmArgs,
+  { argTypes },
+) => ({
   components: { UModalConfirm, UButton, URow },
   setup() {
     function onClick(value) {

package/ui.container-modal-confirm/types.ts

@@ -0,0 +1,106 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UModalConfirmProps {
+  /**
+   * Modal state (shown / hidden).
+   */
+  modelValue?: boolean;
+
+  /**
+   * Modal title.
+   */
+  title?: string;
+
+  /**
+   * Modal description.
+   */
+  description?: string;
+
+  /**
+   * Confirm button label.
+   */
+  confirmLabel?: string;
+
+  /**
+   * Confirm button color.
+   */
+  confirmColor?:
+    | "brand"
+    | "grayscale"
+    | "gray"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "white";
+
+  /**
+   * Set the disabled accept-button.
+   */
+  confirmDisabled?: boolean;
+
+  /**
+   * Hide cancel button.
+   */
+  cancelHidden?: boolean;
+
+  /**
+   * Modal size (width).
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl";
+
+  /**
+   * Allow closing modal by clicking on close cross.
+   */
+  closeOnCross?: boolean;
+
+  /**
+   * Allow closing modal by clicking on overlay.
+   */
+  closeOnOverlay?: boolean;
+
+  /**
+   * Allow closing modal by pressing escape (esc) on the keyboard.
+   */
+  closeOnEsc?: boolean;
+
+  /**
+   * Add extra top margin for modal inside another modal.
+   */
+  inner?: boolean;
+
+  /**
+   * Attach small modal to the bottom of the screen (mobile version only).
+   */
+  mobileStickBottom?: boolean;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.container-modal-confirm/useAttrs.ts

@@ -0,0 +1,18 @@
+import useUI from "../composables/useUI.ts";
+
+import defaultConfig from "./config.ts";
+
+import type { UseAttrs } from "../types.ts";
+import type { UModalConfirmProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UModalConfirmProps): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+
+  const keysAttrs = getKeysAttrs();
+
+  return {
+    config,
+    ...keysAttrs,
+    hasSlotContent,
+  };
+}

package/ui.container-page/UPage.vue

@@ -1,3 +1,82 @@
+<script lang="ts" setup>
+import { computed, useSlots, onMounted } from "vue";
+
+import useBreakpoint from "../composables/useBreakpoint.ts";
+
+import ULink from "../ui.button-link/ULink.vue";
+import UIcon from "../ui.image-icon/UIcon.vue";
+import UHeader from "../ui.text-header/UHeader.vue";
+
+import { getDefault } from "../utils/ui.ts";
+
+import defaultConfig from "./config.ts";
+import { UPage } from "./constants.ts";
+import useAttrs from "./useAttrs.ts";
+
+import type { UPageProps } from "./types.ts";
+
+const slots = useSlots();
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<UPageProps>(), {
+  size: getDefault<UPageProps>(defaultConfig, UPage).size,
+  titleSize: getDefault<UPageProps>(defaultConfig, UPage).titleSize,
+  gray: getDefault<UPageProps>(defaultConfig, UPage).gray,
+  fixedRounding: getDefault<UPageProps>(defaultConfig, UPage).fixedRounding,
+  dataTest: "",
+});
+
+const { isMobileBreakpoint } = useBreakpoint();
+
+const {
+  config,
+  wrapperAttrs,
+  pageAttrs,
+  rightRoundingAttrs,
+  titleAttrs,
+  backLinkAttrs,
+  backLinkIconAttrs,
+  headerAttrs,
+  headerLeftFallbackAttrs,
+  descriptionAttrs,
+  headerLeftAttrs,
+  headerRightAttrs,
+  bodyAttrs,
+  footerAttrs,
+  footerLeftAttrs,
+  footerRightAttrs,
+  rightRoundingWrapperAttrs,
+  hasSlotContent,
+} = useAttrs(props, { isMobileBreakpoint });
+
+const isExistHeader = computed(() => {
+  return (
+    props.title ||
+    hasSlotContent(slots["header-left"]) ||
+    hasSlotContent(slots["header-right"]) ||
+    hasSlotContent(slots["before-title"]) ||
+    hasSlotContent(slots["after-title"])
+  );
+});
+
+const isExistFooter = computed(() => {
+  return hasSlotContent(slots["footer-left"]) || hasSlotContent(slots["footer-right"]);
+});
+
+const isShownArrowButton = computed(() => {
+  return Object.keys(props.backTo || {}).length > 0;
+});
+
+onMounted(() => {
+  const classes = props.gray
+    ? config.value.htmlBody.split(" ").filter((item) => Boolean(item))
+    : "";
+
+  document.querySelector("body").classList.add(...classes);
+});
+</script>
+
 <template>
   <div :data-test="dataTest" v-bind="wrapperAttrs">
     <div v-bind="pageAttrs">
@@ -79,156 +158,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { computed, useSlots, onMounted } from "vue";
-
-import useBreakpoint from "../composables/useBreakpoint.ts";
-
-import ULink from "../ui.button-link/ULink.vue";
-import UIcon from "../ui.image-icon/UIcon.vue";
-import UHeader from "../ui.text-header/UHeader.vue";
-
-import { getDefault } from "../utils/ui.ts";
-
-import defaultConfig from "./config.js";
-import { UPage } from "./constants.js";
-import useAttrs from "./useAttrs.js";
-
-const slots = useSlots();
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Page size (width).
-   * @values xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, wide
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UPage).size,
-  },
-
-  /**
-   * Page title.
-   */
-  title: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Page title size.
-   * @values xs, sm, md, lg, xl, 2xl
-   */
-  titleSize: {
-    type: String,
-    default: getDefault(defaultConfig, UPage).titleSize,
-  },
-
-  /**
-   * Set page description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Back link vue-router route object.
-   */
-  backTo: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Back link label.
-   */
-  backLabel: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Sets background light gray (useful if the page contains nested cards).
-   */
-  gray: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UPage).gray,
-  },
-
-  /**
-   * Stick right page rounding.
-   */
-  fixedRounding: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UPage).fixedRounding,
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
-});
-
-const { isMobileBreakpoint } = useBreakpoint();
-
-const {
-  config,
-  wrapperAttrs,
-  pageAttrs,
-  rightRoundingAttrs,
-  titleAttrs,
-  backLinkAttrs,
-  backLinkIconAttrs,
-  headerAttrs,
-  headerLeftFallbackAttrs,
-  descriptionAttrs,
-  headerLeftAttrs,
-  headerRightAttrs,
-  bodyAttrs,
-  footerAttrs,
-  footerLeftAttrs,
-  footerRightAttrs,
-  rightRoundingWrapperAttrs,
-  hasSlotContent,
-} = useAttrs(props, { isMobileBreakpoint });
-
-const isExistHeader = computed(() => {
-  return (
-    props.title ||
-    hasSlotContent(slots["header-left"]) ||
-    hasSlotContent(slots["header-right"]) ||
-    hasSlotContent(slots["before-title"]) ||
-    hasSlotContent(slots["after-title"])
-  );
-});
-
-const isExistFooter = computed(() => {
-  return hasSlotContent(slots["footer-left"]) || hasSlotContent(slots["footer-right"]);
-});
-
-const isShownArrowButton = computed(() => {
-  return Boolean(Object.keys(props.backTo).length);
-});
-
-onMounted(() => {
-  const classes = props.gray
-    ? config.value.htmlBody.split(" ").filter((item) => Boolean(item))
-    : "";
-
-  document.querySelector("body").classList.add(...classes);
-});
-</script>

package/ui.container-page/storybook/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../../utils/storybook.ts";
 
-import * as stories from "./stories.js";
-import defaultConfig from "../config.js?raw"
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
 
 <Meta of={stories} />
 <Title of={stories} />