vueless 0.0.51 → 0.0.53

package/ui.notify/Docs.mdx

@@ -0,0 +1,84 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } 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 />
+
+## Trigger notifications
+You can trigger notification using *notify* method. Use *notifySuccess, notifyWarning, notifyError* methods to trigger notification of specific type.
+
+<Source code={`
+import {
+    notify,
+    notifySuccess,
+    notifyWarning,
+    notifyError,
+} from "vueless";
+
+notify({
+    type: "success" // success, warning, error
+    title: "" // Some label
+    text: "" // Some text content
+    duration: 1000 // Duration in milliseconds
+    delayDuplicates: false // Delay notifications with same text
+});
+
+const durationInMilliseconds = 1000;
+
+notifySuccess("Some success text", durationInMilliseconds);
+notifyWarning("Some warning text", durationInMilliseconds);
+notifyError("Some error text", durationInMilliseconds);
+`} language="jsx" dark />
+
+## Clear active notifications
+Use *clearAllNotifications* method to clear all active notifications.
+
+<Source code={`
+import { clearAllNotifications, notifySuccess } from "vueless";
+
+const durationInMilliseconds = 1000;
+notifySuccess("Some success text", durationInMilliseconds);
+
+clearAllNotifications();
+`} language="jsx" dark />
+
+## Trigger notifications
+You can create delayed notification which you can trigger any time later.
+
+<Source code={`
+import { setDelayedNotify, getDelayedNotify } from "vueless";
+
+setDelayedNotify({
+    type: "success" // success, warning, error
+    title: "" // Some label
+    text: "" // Some text content
+    duration: 1000 // Duration in milliseconds
+    delayDuplicates: false // Delay notifications with same text
+});
+
+setTimeout(getDelayedNotify, 10_000);
+`} language="jsx" dark />
+
+## Place notification relatively to navigation elements
+Provide *positionClasses* key for UNotify config to take navigation elements offset into account. 
+By default, it will be looking for UNotifyPage and UNotifyAside classes.
+
+<Source code={`
+const notifyConfig = {
+    positionClasses: {
+        page: "UNotifyPage",
+        aside: "UNotifyAside",
+    },
+}
+`} language="jsx" dark />

package/ui.notify/composables/attrs.composable.js

@@ -0,0 +1,30 @@
+import useUI from "../../composable.ui";
+
+import defaultConfig from "../configs/default.config";
+
+export function useAttrs(props) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const bodyAttrs = getAttrs("body");
+  const contentAttrs = getAttrs("content");
+  const labelAttrs = getAttrs("label");
+  const descriptionAttrs = getAttrs("description");
+  const iconSuccessAttrs = getAttrs("iconSuccess");
+  const iconWarningAttrs = getAttrs("iconWarning");
+  const iconErrorAttrs = getAttrs("iconError");
+  const iconCloseAttrs = getAttrs("iconClose");
+
+  return {
+    config,
+    wrapperAttrs,
+    bodyAttrs,
+    contentAttrs,
+    labelAttrs,
+    descriptionAttrs,
+    iconSuccessAttrs,
+    iconWarningAttrs,
+    iconCloseAttrs,
+    iconErrorAttrs,
+  };
+}

package/ui.notify/configs/default.config.js

@@ -0,0 +1,47 @@
+export default /*tw*/ {
+  wrapper: "absolute overflow-visible md:w-[22rem]",
+  body: `
+    mb-3 flex w-fit items-center justify-center gap-3 rounded-2xl bg-gray-900/90 
+    p-4 shadow-[0_4px_16px_rgba(17,24,39,0.5)] backdrop-blur-md md:shadow-[0_0px_12px_rgba(0,0,0,0.25)]
+  `,
+  bodySuccess: "bg-[radial-gradient(100.16%_500.78%_at_0%_50%,rgba(74,222,128,0.1)_2.17%,transparent)]",
+  bodyWarning: "bg-[radial-gradient(100.16%_500.78%_at_0%_50%,rgba(251,146,60,0.2)_2.17%,transparent)]",
+  bodyError: "bg-[radial-gradient(100.16%_500.78%_at_0%_50%,rgba(251,113,133,0.2)_2.17%,transparent)]",
+  content: "w-full flex flex-col max-w-full px-3 text-sm text-gray-200",
+  label: "mb-1 font-medium",
+  description: "break-words font-normal leading-5",
+  iconSuccess: "",
+  iconSuccessName: "check_circle",
+  iconWarning: "",
+  iconWarningName: "warning",
+  iconError: "",
+  iconErrorName: "error",
+  iconClose: "",
+  iconCloseName: "close",
+  transitionGroup: {
+    moveClass: "transition-all duration-500",
+    enterActiveClass: "transition-all duration-500",
+    leaveActiveClass: "transition-all duration-500 absolute",
+    enterFromClass: "opacity-0",
+    leaveToClass: "opacity-0",
+  },
+  duration: {
+    short: 4000,
+    medium: 8000,
+    long: 12000,
+  },
+  i18n: {
+    success: "Operation successful.",
+    warning: "Operation warning.",
+    error: "Operation error.",
+  },
+  positionClasses: {
+    page: "UNotifyPage",
+    aside: "UNotifyAside",
+  },
+  defaultVariants: {
+    xPosition: "center",
+    yPosition: "top",
+    vHtml: false,
+  },
+};

package/ui.notify/constants/index.js

@@ -0,0 +1,19 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UNotify = "UNotify";
+
+export const NOTIFY_TYPE = {
+  success: "success",
+  warning: "warning",
+  error: "error",
+};
+
+export const POSITION = {
+  left: "left",
+  right: "right",
+  top: "top",
+  bottom: "bottom",
+  center: "center",
+};

package/ui.notify/index.stories.js

@@ -0,0 +1,77 @@
+import { notify } from "../ui.notify/services";
+
+import UNotify from "../ui.notify";
+import UButton from "../ui.button";
+
+import { getArgTypes } from "../service.storybook";
+
+export default {
+  title: "Other / Notify",
+  component: UNotify,
+  args: {
+    type: "success",
+    label: "",
+    text: "",
+  },
+  argTypes: {
+    ...getArgTypes(UNotify.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UNotify, UButton },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div>
+      <UNotify v-bind="args" />
+
+      <UButton label="show notify" @click="onClick"/>
+    </div>
+ `,
+
+  methods: {
+    onClick() {
+      const settings = {
+        type: "success",
+        label: "Some label",
+      };
+
+      notify(settings);
+    },
+  },
+});
+
+const TypesTemplate = (args) => ({
+  components: { UNotify, UButton },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div class="flex gap-4">
+      <UNotify />
+
+      <UButton label="Success" @click="onClick('success')"/>
+      <UButton label="Warning" @click="onClick('warning')"/>
+      <UButton label="Error" @click="onClick('error')"/>
+    </div>
+ `,
+
+  methods: {
+    onClick(type) {
+      const settings = { type };
+
+      notify(settings);
+    },
+  },
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const position = DefaultTemplate.bind({});
+position.args = { xPosition: "right", yPosition: "bottom" };
+
+export const types = TypesTemplate.bind({});
+types.args = {};