vueless 0.0.144 → 0.0.146

package/index.js

@@ -1,20 +1,15 @@
+/* eslint-disable vue/max-len, prettier/prettier */
 import { createLocale, LocaleSymbol } from "./composable.locale";
-import {
-  createLoaderRendering,
-  LoaderRenderingSymbol,
-} from "./ui.loader-rendering/composables/useLoaderRendering";
+import { createLoaderRendering, LoaderRenderingSymbol } from "./ui.loader-rendering/composables/useLoaderRendering";
 import { createLoaderTop, LoaderTopSymbol } from "./ui.loader-top/composables/useLoaderTop";
 
 export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n";
 export { default as defaultEnLocale } from "./adatper.locale/locales/en";
 export { useLocale } from "./composable.locale";
-export { useLoaderRendering } from "./ui.loader-rendering/composables/useLoaderRendering";
 export { useLoaderTop } from "./ui.loader-top/composables/useLoaderTop";
-export {
-  loaderRenderingOn,
-  loaderRenderingOff,
-} from "./ui.loader-rendering/services/loaderRedering.service";
 export { loaderTopOn, loaderTopOff } from "./ui.loader-top/services/loaderTop.service";
+export { useLoaderRendering } from "./ui.loader-rendering/composables/useLoaderRendering";
+export { loaderRenderingOn, loaderRenderingOff } from "./ui.loader-rendering/services/loaderRedering.service";
 export {
   notify,
   notifySuccess,
@@ -24,6 +19,7 @@ export {
   setDelayedNotify,
   getDelayedNotify,
 } from "./ui.text-notify/services";
+/* eslint-enable vue/max-len, prettier/prettier */
 
 export function createVueless(options = {}) {
   const i18n = createLocale(options.i18n);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.144",
+  "version": "0.0.146",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.button-toggle/configs/default.config.js

@@ -6,9 +6,13 @@ export default /*tw*/ {
   `,
   toggleItem: "",
   defaultVariants: {
+    color: "brand",
     variant: "primary",
     size: "md",
     block: false,
+    pill: false,
+    square: false,
+    filled: false,
     multiple: false,
   },
 };

package/ui.button-toggle/index.vue

@@ -39,7 +39,7 @@ const props = defineProps({
   },
 
   /**
-   * Toggle variants.
+   * Toggle variant.
    * @values primary, secondary, thirdary
    */
   variant: {
@@ -65,7 +65,7 @@ const props = defineProps({
 
   /**
    * Toggle size.
-   * @values xs, sm, md, lg
+   * @values 2xs, xs, sm, md, lg, xl
    */
   size: {
     type: String,
@@ -88,6 +88,39 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UToggle).default.multiple,
   },
 
+  /**
+   * Button color.
+   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
+   */
+  color: {
+    type: String,
+    default: UIService.get(defaultConfig, UToggle).default.color,
+  },
+
+  /**
+   * Fill the background for thirdary variant.
+   */
+  filled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UToggle).default.filled,
+  },
+
+  /**
+   * Set button corners rounded.
+   */
+  pill: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UToggle).default.pill,
+  },
+
+  /**
+   * Set the same paddings for the button.
+   */
+  square: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UToggle).default.square,
+  },
+
   /**
    * Sets data-cy attribute for automated testing.
    */
@@ -129,6 +162,12 @@ provide("toggleName", () => props.name);
 provide("toggleSize", () => props.size);
 provide("toggleBlock", () => props.block);
 provide("toggleVariant", () => props.variant);
+provide("toggleColor", () => props.color);
+provide("toggleFilled", () => props.filled);
+provide("toggleDisabled", () => props.disabled);
+provide("togglePill", () => props.pill);
+provide("toggleSquare", () => props.square);
+
 provide("toggleSelectedValue", {
   selectedValue: readonly(selectedValue),
   updateSelectedValue,

package/ui.button-toggle-item/configs/default.config.js

@@ -2,10 +2,14 @@ export default /*tw*/ {
   button: "rounded-none",
   input: "p-0 m-0 size-0 invisible peer absolute",
   defaultVariants: {
+    color: "brand",
     variant: "primary",
     type: "radio",
     size: "md",
     block: false,
+    pill: false,
+    square: false,
+    filled: false,
     disabled: false,
   },
 };

package/ui.button-toggle-item/index.vue

@@ -7,6 +7,10 @@
     :size="toValue(size)"
     :block="toValue(block)"
     :variant="toValue(variant)"
+    :color="color"
+    :pill="pill"
+    :filled="filled"
+    :square="square"
     v-bind="buttonAttrs"
     @click="onClickSetValue"
   >
@@ -115,6 +119,11 @@ const type = inject("toggleType", UIService.get(defaultConfig, UToggleItem).defa
 const size = inject("toggleSize", UIService.get(defaultConfig, UToggleItem).default.size);
 const block = inject("toggleBlock", UIService.get(defaultConfig, UToggleItem).default.block);
 const variant = inject("toggleVariant", UIService.get(defaultConfig, UToggleItem).default.variant);
+const color = inject("toggleColor", UIService.get(defaultConfig, UToggleItem).default.color);
+const filled = inject("toggleFilled", UIService.get(defaultConfig, UToggleItem).default.filled);
+const pill = inject("togglePill", UIService.get(defaultConfig, UToggleItem).default.pill);
+const square = inject("toggleSquare", UIService.get(defaultConfig, UToggleItem).default.square);
+
 const { selectedValue, updateSelectedValue } = inject("toggleSelectedValue", {});
 
 const { buttonAttrs, inputAttrs } = useAttrs(props);

package/ui.loader-rendering/Docs.mdx

@@ -11,18 +11,33 @@ import * as stories from "./index.stories";
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## Control loader
-You can control loader state using *useLoaderRendering* composable.
+## Using loader
+To control the loader state in Vue components use `useLoaderRendering` composable.
 
 <Source code={`
 import { useLoaderRendering } from "vueless";
 
-const { setRenderingFinished, isRenderingPage, setRenderingStarted } = useLoaderRendering();
+const { isLoading, loaderRenderingOn, loaderRenderingOff } = useLoaderRendering();
+
+// get loader state
+console.log(isLoading.value);
+
+// show loader
+loaderRenderingOn();
+
+// hide loader
+loaderRenderingOff();
 `} language="jsx" dark />
 
-## Control outside of component
-You can control loader state outside of vue components using following methods.
+## Using loader outside Vue components
+To control the loader state outside Vue components, use the following methods.
 
 <Source code={`
 import { loaderRenderingOn, loaderRenderingOff } from "vueless";
+
+// show loader
+loaderRenderingOn();
+
+// hide loader
+loaderRenderingOff();
 `} language="jsx" dark />

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

@@ -1,27 +1,25 @@
-import { readonly, ref, inject } from "vue";
+import { inject, readonly, ref } from "vue";
 
 export const LoaderRenderingSymbol = Symbol.for("vueless:loader-rendering");
 
-const isRenderingPage = ref(true);
+const isLoading = ref(true);
 
-function setRenderingStarted() {
-  isRenderingPage.value = true;
+function loaderRenderingOn() {
+  isLoading.value = true;
 }
 
-function setRenderingFinished() {
-  isRenderingPage.value = false;
+function loaderRenderingOff() {
+  isLoading.value = false;
 }
 
 export function createLoaderRendering() {
   return {
-    isRenderingPage: readonly(isRenderingPage),
-    setRenderingStarted,
-    setRenderingFinished,
+    isLoading: readonly(isLoading),
+    loaderRenderingOn,
+    loaderRenderingOff,
   };
 }
 
 export function useLoaderRendering() {
-  const loaderRenderingState = inject(LoaderRenderingSymbol);
-
-  return loaderRenderingState;
+  return inject(LoaderRenderingSymbol);
 }

package/ui.loader-rendering/index.vue

@@ -40,19 +40,19 @@ const props = defineProps({
 });
 
 const { wrapperAttrs, config } = useAttrs(props);
-const { isRenderingPage, setRenderingStarted, setRenderingFinished } = useLoaderRendering();
+const { isLoading, loaderRenderingOn, loaderRenderingOff } = useLoaderRendering();
 
 onMounted(() => {
-  window.addEventListener("setRenderingStarted", setRenderingStarted);
-  window.addEventListener("setRenderingFinished", setRenderingFinished);
+  window.addEventListener("setRenderingStarted", loaderRenderingOn);
+  window.addEventListener("setRenderingFinished", loaderRenderingOff);
 });
 
 onUnmounted(() => {
-  window.removeEventListener("setRenderingStarted", setRenderingStarted);
-  window.removeEventListener("setRenderingFinished", setRenderingFinished);
+  window.removeEventListener("setRenderingStarted", loaderRenderingOn);
+  window.removeEventListener("setRenderingFinished", loaderRenderingOff);
 });
 
 const showLoader = computed(() => {
-  return props.loading || isRenderingPage.value;
+  return props.loading || isLoading.value;
 });
 </script>

package/ui.loader-top/Docs.mdx

@@ -21,9 +21,9 @@ You can control loader state using *useLoaderRendering* composable.
 <Source code={`
 import { useLoaderTop } from "vueless";
 
-const { 
-    setLoaderTopOn,
-    setLoaderTopOff,
+const {
+    loaderTopOn,
+    loaderTopOff,
     addRequestUrl,
     removeRequestUrl
 } = useLoaderTop();
@@ -33,8 +33,5 @@ const {
 You can control loader state outside of vue components using following methods.
 
 <Source code={`
-import {
-  loaderTopOn,
-  loaderTopOff,
-} from "vueless";
+import { loaderTopOn, loaderTopOff } from "vueless";
 `} language="jsx" dark />

package/ui.loader-top/composables/useLoaderTop.js

@@ -1,4 +1,4 @@
-import { ref, readonly, inject } from "vue";
+import { inject, readonly, ref } from "vue";
 
 export const LoaderTopSymbol = Symbol.for("vueless:loader-top");
 
@@ -8,15 +8,14 @@ const loaderRequestQueue = ref([]);
 const loaderRequestTimeout = ref(0);
 const componentLoaderRequestQueue = ref([]);
 
-function setLoaderTopOn(url) {
+function loaderTopOn(url) {
   loaderRequestQueue.value.push(url);
-
   isLoading.value = true;
 
   clearTimeout(loaderRequestTimeout.value);
 }
 
-function setLoaderTopOff(url) {
+function loaderTopOff(url) {
   loaderRequestQueue.value = url ? loaderRequestQueue.value.filter((item) => item !== url) : [];
 
   loaderRequestTimeout.value = setTimeout(() => {
@@ -49,8 +48,8 @@ export function createLoaderTop() {
     loaderRequestQueue: readonly(loaderRequestQueue),
     loaderRequestTimeout: readonly(loaderRequestTimeout),
     componentLoaderRequestQueue: readonly(componentLoaderRequestQueue),
-    setLoaderTopOn,
-    setLoaderTopOff,
+    loaderTopOn,
+    loaderTopOff,
     addRequestUrl,
     removeRequestUrl,
     setComponentRequestQueue,
@@ -59,7 +58,5 @@ export function createLoaderTop() {
 }
 
 export function useLoaderTop() {
-  const loaderTopState = inject(LoaderTopSymbol);
-
-  return loaderTopState;
+  return inject(LoaderTopSymbol);
 }

package/ui.loader-top/index.stories.js

@@ -21,9 +21,9 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { ULoaderTop, UButton },
   setup() {
-    const { setLoaderTopOn, setLoaderTopOff } = useLoaderTop();
+    const { loaderTopOn, loaderTopOff } = useLoaderTop();
 
-    return { args, setLoaderTopOn, setLoaderTopOff };
+    return { args, loaderTopOn, loaderTopOff };
   },
   template: `
     <div>

package/ui.loader-top/index.vue

@@ -49,8 +49,8 @@ const {
   componentLoaderRequestQueue,
   setComponentRequestQueue,
   removeComponentRequestQueue,
-  setLoaderTopOff,
-  setLoaderTopOn,
+  loaderTopOff,
+  loaderTopOn,
 } = useLoaderTop();
 const { progressAttrs } = useAttrs(props, { error, isMobileApp });
 
@@ -93,11 +93,11 @@ onUnmounted(() => {
 });
 
 function setLoaderOnHandler(event) {
-  setLoaderTopOn(event.detail.resource);
+  loaderTopOn(event.detail.resource);
 }
 
 function setLoaderOffHandler(event) {
-  setLoaderTopOff(event.detail.resource);
+  loaderTopOff(event.detail.resource);
 }
 
 function requestWithoutQuery(request) {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.144",
+  "version": "0.0.146",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -7004,7 +7004,7 @@
             },
             {
               "name": "variant",
-              "description": "Toggle variants.",
+              "description": "Toggle variant.",
               "value": {
                 "kind": "expression",
                 "type": "'primary' | 'secondary' | 'thirdary'"
@@ -7034,7 +7034,7 @@
               "description": "Toggle size.",
               "value": {
                 "kind": "expression",
-                "type": "'xs' | 'sm' | 'md' | 'lg'"
+                "type": "'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'"
               },
               "default": "md"
             },
@@ -7056,6 +7056,42 @@
               },
               "default": "false"
             },
+            {
+              "name": "color",
+              "description": "Button color.",
+              "value": {
+                "kind": "expression",
+                "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white'"
+              },
+              "default": "brand"
+            },
+            {
+              "name": "filled",
+              "description": "Fill the background for thirdary variant.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "pill",
+              "description": "Set button corners rounded.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "square",
+              "description": "Set the same paddings for the button.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "dataCy",
               "description": "Sets data-cy attribute for automated testing.",