vueless 0.0.50 → 0.0.52

package/ui.form-date-picker-range/configs/default.config.js

@@ -2,23 +2,23 @@ export default /*tw*/ {
   input: "",
   inputActive: {
     block: {
-      base: "ring-4 ring-gray-600/[.15] border-gray-500 hover:border-gray-500",
+      base: "ring-4 ring-brand-600/[.15] border-brand-500 hover:border-brand-500",
     },
   },
-  buttonWrapper: "flex h-full rounded-lg focus-within:ring-4 focus-within:ring-gray-600/[.15] max-md:justify-between",
+  buttonWrapper: "flex h-full rounded-lg focus-within:ring-4 focus-within:ring-brand-600/[.15] max-md:justify-between",
   button: `
     shrink-0 grow rounded-none border-0 bg-zinc-100 py-2 text-base font-medium text-gray-900 shadow-none
-  hover:bg-zinc-200 hover:ring-gray-600/[.15] focus:border-0 focus:bg-zinc-200 focus:ring-0 focus:ring-gray-600/[.15]
-  active:bg-zinc-200 disabled:cursor-not-allowed
+    hover:bg-zinc-200 hover:ring-brand-600/[.15] focus:border-0 focus:bg-zinc-200 focus:ring-0 focus:ring-brand-600/[.15]
+    active:bg-zinc-200 disabled:cursor-not-allowed
   `,
-  buttonActive: "border-0 hover:bg-zinc-200 ring-0 ring-gray-600/[.15] bg-zinc-200",
-  buttonWrapperActive: "ring-4 ring-gray-600/[.15]",
+  buttonActive: "border-0 hover:bg-zinc-200 ring-0 ring-brand-600/[.15] bg-zinc-200",
+  buttonWrapperActive: "ring-4 ring-brand-600/[.15]",
   shiftRangeButton: `
     focus:bg-bg-zinc-200 flex items-center border-0 bg-zinc-100 py-[0.71875rem] shadow-none
-    hover:bg-zinc-200 hover:ring-gray-600/[.15] focus:border-0 focus:ring-0 focus:ring-gray-600/[.15] active:bg-zinc-200
+    hover:bg-zinc-200 hover:ring-brand-600/[.15] focus:border-0 focus:ring-0 focus:ring-brand-600/[.15] active:bg-zinc-200
     disabled:cursor-not-allowed last:rounded-l-none last:rounded-r-lg first:rounded-l-lg first:rounded-r-none
   `,
-  menu: "absolute z-40 mt-2 w-80 overflow-hidden rounded-lg border border-gray-300 bg-white p-2 shadow focus:outline-none",
+  menu: "absolute z-40 mt-2 w-80 overflow-hidden rounded-lg border border-brand-300 bg-white p-2 shadow focus:outline-none",
   menuTransition: {
     enterFromClass: "opacity-0 scale-95",
     enterActiveClass: "transition transform ease-out duration-100",
@@ -30,8 +30,8 @@ export default /*tw*/ {
   periodsRow: "mb-1 flex min-w-64 gap-1",
   periodButton: `
     flex h-[3.125rem] w-full cursor-pointer flex-col items-center justify-center rounded-lg bg-zinc-100
-    px-1.5 py-2.5 text-center text-xs font-medium text-gray-900 hover:bg-gray-200
-    [&_span]:block [&_span]:font-normal [&_span]:text-gray-500
+    px-1.5 py-2.5 text-center text-xs font-medium text-brand-900 hover:bg-brand-200
+    [&_span]:block [&_span]:font-normal [&_span]:text-brand-500
   `,
   periodButtonActive: "bg-zinc-200",
   rangeSwitchWrapper: "mb-2.5 mt-4 flex items-center justify-between py-2",
@@ -46,7 +46,7 @@ export default /*tw*/ {
   periodDateYearList: "grid grid-cols-3 grid-rows-1 gap-0.5",
   periodDateQuarterList: "",
   periodDate: `
-    cursor-pointer block w-full rounded-lg py-3 text-center text-sm font-medium text-gray-900 hover:rounded-lg hover:bg-gray-50
+    cursor-pointer block w-full rounded-lg py-3 text-center text-sm font-medium text-gray-900 hover:rounded-lg hover:bg-brand-50
     disabled:opacity-50 disabled:cursor-not-allowed
   `,
   periodDateActive: "bg-zinc-100",
@@ -58,7 +58,7 @@ export default /*tw*/ {
       description: "hidden",
     },
     input: {
-      base: "text-sm border-gray-100 px-4 py-2.5",
+      base: "text-sm border-brand-100 px-4 py-2.5",
       variants: {
         size: {
           md: "pt-2.5 pb-2.5",
@@ -72,7 +72,7 @@ export default /*tw*/ {
     dayViewWrapper: "p-0 w-full",
     monthViewWrapper: "p-0 w-full",
     yearViewWrapper: "p-0 w-full",
-    dayViewSwitchLabel: "font-medium text-gray-900",
+    dayViewSwitchLabel: "font-medium text-brand-900",
     nextPrevButton: "p-0 py-2 hover:bg-transparent",
     navigation: "px-0 w-full",
     nextIcon: {
@@ -88,12 +88,12 @@ export default /*tw*/ {
       },
     },
     day: "font-medium w-full h-10 text-sm mb-0.5",
-    currentDay: "text-white bg-gray-900 hover:bg-gray-900 hover:text-white",
+    currentDay: "text-white bg-brand-900 hover:bg-brand-900 hover:text-white",
     weekDay: "text-sm size-10",
     month: "font-medium",
-    selectedMonth: "bg-zinc-100 text-gray-900 hover:text-white",
+    selectedMonth: "bg-zinc-100 text-brand-900 hover:text-white",
     year: "font-medium",
-    selectedYear: "bg-zinc-100 text-gray-900 hover:text-white",
+    selectedYear: "bg-zinc-100 text-brand-900 hover:text-white",
   },
   i18n: {
     lastThirtyDays: "Last 30 days <span> and 2 next two weeks </span>",

package/ui.form-date-picker-range/index.vue

@@ -179,7 +179,6 @@
 
 <script setup>
 import { computed, watch, ref, nextTick } from "vue";
-import { useStore } from "vuex";
 import { merge } from "lodash-es";
 
 import UIcon from "../ui.image-icon";
@@ -227,6 +226,7 @@ import {
 import { wrongDateFormat, wrongMonthNumber, wrongDayNumber } from "./services/validation.service";
 import useAttrs from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
+import useBreakpoint from "../composable.breakpoint";
 
 import defaultConfig from "./configs/default.config";
 import {
@@ -385,7 +385,6 @@ const {
   rangeInputWrapperAttrs,
   inputRangeErrorAttrs,
 } = useAttrs(props, { isShownMenu });
-const store = useStore();
 const { tm } = useLocale();
 
 const calendarValue = ref(props.modelValue);
@@ -413,7 +412,7 @@ const localValue = computed({
   },
 });
 
-const isMobileDevice = computed(() => store.getters["breakpoint/isMobileDevice"]);
+const { isMobileBreakpoint } = useBreakpoint();
 const rangeInputName = computed(() => `rangeInput-${props.id}`);
 const currentLocale = computed(() => merge(tm("UDatePickerRange"), props.config.i18n));
 
@@ -560,7 +559,7 @@ const userFormatDate = computed(() => {
     title = `${fromTitle} – ${toTitle}`;
   }
 
-  if (isMobileDevice.value && !isPeriod.value.month && isVariant.value.button) {
+  if (isMobileBreakpoint.value && !isPeriod.value.month && isVariant.value.button) {
     const startDay = String(from.getDate()).padStart(2, "0");
     const endDay = String(to?.getDate())?.padStart(2, "0");
     const startMonth = String(from.getMonth()).padStart(2, "0");

package/ui.form-input/configs/default.config.js

@@ -10,8 +10,8 @@ export default /*tw*/ {
     base: `
       rounded-lg border border-solid border-gray-300 bg-white !opacity-100 relative flex
       transition duration-100 ease-in-out
-      hover:border-gray-400 hover:focus-within:border-gray-500
-      focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15]
+      hover:border-gray-400 hover:focus-within:border-brand-500
+      focus-within:border-brand-500 focus-within:ring-4 focus-within:ring-brand-600/[.15]
     `,
     variants: {
       disabled: {

package/ui.form-radio-card/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
   const { radio } = config.value;
 
   const cvaRadio = cva({
@@ -14,7 +14,7 @@ export function useAttrs(props) {
     compoundVariants: radio.compoundVariants,
   });
 
-  const radioClasses = computed(() => setColor(cvaRadio({ color: props.color }), props.color));
+  const radioClasses = computed(() => cvaRadio({ color: props.color }));
 
   const wrapperAttrsRaw = getAttrs("wrapper");
   const itemsAttrs = getAttrs("items");

package/ui.form-radio-card/index.vue

@@ -25,7 +25,6 @@
 
 <script setup>
 import { computed } from "vue";
-import { useStore } from "vuex";
 
 import UIcon from "../ui.image-icon";
 import URadio from "../ui.form-radio";
@@ -34,12 +33,11 @@ import UIService, { getRandomId } from "../service.ui";
 import defaultConfig from "./configs/default.config";
 import { URadioCard } from "./constants";
 import { useAttrs } from "./composables/attrs.composable";
+import useBreakpoint from "../composable.breakpoint";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "URadioCard", inheritAttrs: false });
 
-const store = useStore();
-
 const props = defineProps({
   /**
    * Set radio card name.
@@ -126,9 +124,7 @@ const emit = defineEmits(["update:modelValue"]);
 
 const { radioAttrs, iconAttrs, wrapperAttrs, labelAttrs, itemsAttrs } = useAttrs(props);
 
-const isMobileDevice = computed(() => {
-  return store.getters["breakpoint/isMobileDevice"];
-});
+const { isMobileBreakpoint } = useBreakpoint();
 
 const selectedItem = computed({
   get: () => props.modelValue,
@@ -137,10 +133,10 @@ const selectedItem = computed({
 
 const gridColsClass = computed(() => {
   return {
-    "grid-cols-1": isMobileDevice,
-    "grid-cols-2": props.gridCols === 2 && isMobileDevice,
-    "grid-cols-3": props.gridCols === 3 && isMobileDevice,
-    "grid-cols-4": props.gridCols === 4 && isMobileDevice,
+    "grid-cols-1": isMobileBreakpoint.value,
+    "grid-cols-2": props.gridCols === 2 && isMobileBreakpoint.value,
+    "grid-cols-3": props.gridCols === 3 && isMobileBreakpoint.value,
+    "grid-cols-4": props.gridCols === 4 && isMobileBreakpoint.value,
   };
 });
 </script>

package/ui.form-select/configs/default.config.js

@@ -4,8 +4,8 @@ export default /*tw*/ {
     base: `
       pb-2 pt-2 flex flex-row-reverse justify-between w-full min-h-full box-border relative
       rounded-lg border border-gray-300 bg-white
-      hover:border-gray-400 hover:transition hover:duration-100 hover:ease-in-out hover:focus-within:border-gray-500
-      focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15] focus-within:outline-none
+      hover:border-gray-400 hover:transition hover:duration-100 hover:ease-in-out hover:focus-within:border-brand-500
+      focus-within:border-brand-500 focus-within:ring-4 focus-within:ring-brand-600/[.15] focus-within:outline-none
     `,
     variants: {
       error: {

package/ui.form-textarea/configs/default.config.js

@@ -21,7 +21,7 @@ export default /*tw*/ {
         true: "cursor-not-allowed border-none focus-within:ring-0 bg-gray-100",
       },
       readonly: {
-        true: "ring-0 border-gray-300 focus-within:ring-0 focus-within:border-gray-300",
+        true: "ring-0 border-gray-300 focus-within:ring-0 focus-within:border-brand-300",
       },
       size: {
         sm: "pb-2 pr-4 pt-6",

package/ui.loader-rendering/composables/useLoaderRendering.js

@@ -0,0 +1,19 @@
+import { readonly, ref } from "vue";
+
+const isRenderingPage = ref(true);
+
+function setRenderingStarted() {
+  isRenderingPage.value = true;
+}
+
+function setRenderingFinished() {
+  isRenderingPage.value = false;
+}
+
+export default function useLoaderRendering() {
+  return {
+    isRenderingPage: readonly(isRenderingPage),
+    setRenderingStarted,
+    setRenderingFinished,
+  };
+}

package/ui.loader-rendering/index.vue

@@ -9,27 +9,26 @@
   </transition>
 </template>
 
-<script>
-import { mapState } from "vuex";
+<script setup>
+import { computed } from "vue";
 
-export default {
-  name: "ULoaderRendering",
+import useLoaderRendering from "./composables/useLoaderRendering";
 
-  props: {
-    loading: {
-      type: Boolean,
-      default: false,
-    },
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "ULoaderRendering", inheritAttrs: false });
+
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false,
   },
+});
 
-  computed: {
-    ...mapState("loader", ["isRenderingPage"]),
+const { isRenderingPage } = useLoaderRendering();
 
-    showLoader() {
-      return this.loading || this.isRenderingPage;
-    },
-  },
-};
+const showLoader = computed(() => {
+  return props.loading || isRenderingPage.value;
+});
 </script>
 
 <style lang="postcss" scoped>

package/ui.navigation-pagination/configs/default.config.js

@@ -5,8 +5,8 @@ export default /*tw*/ {
   navigationButton: "size-full rounded font-normal disabled:hover:bg-transparent",
   pageButton: "size-full rounded font-normal disabled:hover:bg-transparent",
   pageButtonActive: `
-    rounded !bg-gray-900/15
-    hover:!text-gray-900 !hover:bg-gray-900/15 disabled:hover:bg-gray-900/15
+    rounded !bg-brand-900/15
+    hover:!text-brand-900 !hover:bg-brand-900/15 disabled:hover:bg-brand-900/15
     focus:outline-none
   `,
   defaultVariants: {

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 = {};