vueless 0.0.176 → 0.0.177

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

@@ -1,5 +1,8 @@
 import ULoaderTop from "../ui.loader-top";
 import UButton from "../ui.button";
+import URow from "../ui.container-row";
+import UGroup from "../ui.container-group";
+import UBadge from "../ui.text-badge";
 
 import { useLoaderTop } from "./composables/useLoaderTop";
 import { loaderTopOff, loaderTopOn } from "./services/loaderTop.service";
@@ -11,7 +14,7 @@ import { getArgTypes } from "../service.storybook";
  */
 export default {
   id: "9020",
-  title: "Loaders and Skeletons / Loader top",
+  title: "Loaders and Skeletons / Loader Top",
   component: ULoaderTop,
   argTypes: {
     ...getArgTypes(ULoaderTop.name),
@@ -19,26 +22,24 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { ULoaderTop, UButton },
+  components: { ULoaderTop, UButton, URow },
   setup() {
     const { loaderTopOn, loaderTopOff } = useLoaderTop();
 
     return { args, loaderTopOn, loaderTopOff };
   },
   template: `
-    <div>
-        <ULoaderTop color="blue" v-bind="args" resource-names="https://api.publicapis.org/entries"/>
+    <ULoaderTop color="blue" v-bind="args" resources="https://api.publicapis.org/entries"/>
 
-        <div class="flex gap-2">
-          <UButton label="On" @click="setLoaderOn('https://api.publicapis.org/entries')" />
-          <UButton label="Off" @click="setLoaderOff('https://api.publicapis.org/entries')" />
-        </div>
-    </div>
+    <URow gap="sm">
+      <UButton label="On" size="sm" @click="loaderTopOn('https://api.publicapis.org/entries')" />
+      <UButton label="Off" size="sm" @click="loaderTopOff('https://api.publicapis.org/entries')" />
+    </URow>
   `,
 });
 
 const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { ULoaderTop, UButton },
+  components: { ULoaderTop, UButton, UGroup, URow, UBadge },
   setup() {
     return {
       args,
@@ -48,19 +49,23 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <div class="flex gap-4 flex-col">
-      <ULoaderTop
-        class="static"
-        v-for="(color, index) in colors"
-        :color="color"
-        v-bind="args"
-        :key="index"
-      />
-    </div>
-    <div class="flex gap-2 pt-4">
-      <UButton label="On" @click="loaderTopOn('https://api.publicapis.org/entries')" />
-      <UButton label="Off" @click="loaderTopOff('https://api.publicapis.org/entries')" />
-    </div>
+    <UGroup>
+      <URow gap="sm" class="pb-4">
+        <UButton label="On" size="sm" @click="loaderTopOn('https://api.publicapis.org/images')" />
+        <UButton label="Off" size="sm" @click="loaderTopOff('https://api.publicapis.org/images')" />
+      </URow>
+
+      <URow align="center" v-for="(color, index) in colors" :key="index">
+        <UBadge :label="color" :color="color" />
+        <ULoaderTop
+          resources="https://api.publicapis.org/images"
+          class="static"
+          :color="color"
+          v-bind="args"
+        />
+      </URow>
+
+    </UGroup>
   `,
 });
 

package/ui.loader-top/index.vue

@@ -19,14 +19,6 @@ import { useAttrs } from "./composables/attrs.composable";
 defineOptions({ name: "ULoaderTop", inheritAttrs: false });
 
 const props = defineProps({
-  /**
-   * The name of API resource (endpoint URI).
-   */
-  resourceNames: {
-    type: [String, Array],
-    default: "",
-  },
-
   /**
    * The color of the loader stripe.
    * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
@@ -35,6 +27,14 @@ const props = defineProps({
     type: String,
     default: UIService.get(defaultConfig, ULoaderTop).default.color,
   },
+
+  /**
+   * API resource names (endpoint URIs).
+   */
+  resources: {
+    type: [String, Array],
+    default: "",
+  },
 });
 
 const error = ref(false);
@@ -44,13 +44,13 @@ const opacity = ref(1);
 const status = ref(null);
 
 const {
-  loaderRequestQueue,
   isLoading,
-  componentLoaderRequestQueue,
+  requestQueue,
+  loaderTopOn,
+  loaderTopOff,
+  loaderRequestQueue,
   setComponentRequestQueue,
   removeComponentRequestQueue,
-  loaderTopOff,
-  loaderTopOn,
 } = useLoaderTop();
 const { progressAttrs } = useAttrs(props, { error, isMobileApp });
 
@@ -66,13 +66,13 @@ const barStyle = computed(() => {
 });
 
 const resourceNamesArray = computed(() => {
-  return Array.isArray(props.resourceNames) ? [...props.resourceNames] : [props.resourceNames];
+  return Array.isArray(props.resources) ? [...props.resources] : [props.resources];
 });
 
-watch(loaderRequestQueue, onChangeRequestsQueue, { deep: true });
+watch(requestQueue, onChangeRequestsQueue, { deep: true });
 watch(isLoading, onChangeLoadingState, { deep: true });
 
-if (props.resourceNames) {
+if (props.resources) {
   setComponentRequestQueue(resourceNamesArray.value);
 }
 
@@ -82,7 +82,7 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-  if (props.resourceNames) {
+  if (props.resources) {
     removeComponentRequestQueue();
   }
 });
@@ -107,7 +107,7 @@ function requestWithoutQuery(request) {
 }
 
 function onChangeLoadingState() {
-  if (!props.resourceNames && isStarted.value && show.value && !isLoading.value) {
+  if (!props.resources && isStarted.value && show.value && !isLoading.value) {
     done();
   }
 }
@@ -115,10 +115,10 @@ function onChangeLoadingState() {
 function onChangeRequestsQueue() {
   let isActiveRequests = false;
 
-  if (props.resourceNames) {
+  if (props.resources) {
     resourceNamesArray.value.forEach((item) => {
       if (!isActiveRequests) {
-        const activeRequest = loaderRequestQueue.value.find(
+        const activeRequest = requestQueue.value.find(
           (request) => requestWithoutQuery(request) === item,
         );
 
@@ -132,8 +132,8 @@ function onChangeRequestsQueue() {
       done();
     }
   } else {
-    loaderRequestQueue.value.forEach((item) => {
-      const activeRequest = componentLoaderRequestQueue.value.find(
+    requestQueue.value.forEach((item) => {
+      const activeRequest = loaderRequestQueue.value.find(
         (request) => request === requestWithoutQuery(item),
       );
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.176",
+  "version": "0.0.177",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1144,7 +1144,7 @@
               "description": "Checkbox size.",
               "value": {
                 "kind": "expression",
-                "type": "'sm' | 'md' | 'lg'"
+                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
               },
               "default": "md"
             },
@@ -4363,7 +4363,7 @@
               "description": "Set label size.",
               "value": {
                 "kind": "expression",
-                "type": "'sm' | 'md' | 'lg'"
+                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
               },
               "default": "md"
             },
@@ -4742,22 +4742,22 @@
           "description": "",
           "attributes": [
             {
-              "name": "resourceNames",
-              "description": "The name of API resource (endpoint URI).",
+              "name": "color",
+              "description": "The color of the loader stripe.",
               "value": {
                 "kind": "expression",
-                "type": "string|array"
+                "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white'"
               },
-              "default": "\"\""
+              "default": "brand"
             },
             {
-              "name": "color",
-              "description": "The color of the loader stripe.",
+              "name": "resources",
+              "description": "API resource names (endpoint URIs).",
               "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'"
+                "type": "string|array"
               },
-              "default": "brand"
+              "default": "\"\""
             }
           ],
           "source": {
@@ -5753,7 +5753,7 @@
               "description": "Radio size.",
               "value": {
                 "kind": "expression",
-                "type": "'sm' | 'md' | 'lg'"
+                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
               },
               "default": "md"
             },
@@ -5839,117 +5839,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "URadioCard",
-          "description": "",
-          "attributes": [
-            {
-              "name": "name",
-              "required": true,
-              "description": "Set radio card name.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            },
-            {
-              "name": "options",
-              "description": "Set options for component.",
-              "value": {
-                "kind": "expression",
-                "type": "array"
-              },
-              "default": "[]"
-            },
-            {
-              "name": "modelValue",
-              "description": "Set component value.",
-              "value": {
-                "kind": "expression",
-                "type": "string|number|boolean"
-              },
-              "default": "\"\""
-            },
-            {
-              "name": "gridCols",
-              "description": "Set grid cols number.",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "2"
-            },
-            {
-              "name": "withIcon",
-              "description": "Show / hide component icon.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "true"
-            },
-            {
-              "name": "color",
-              "description": "The color of the icon.",
-              "value": {
-                "kind": "expression",
-                "type": "'brand' | 'grayscale' | 'black' | 'white' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose'"
-              },
-              "default": "brand"
-            },
-            {
-              "name": "id",
-              "description": "@ignore: Generates unique element id.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "() => getRandomId()"
-            },
-            {
-              "name": "labelAlign",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "top"
-            },
-            {
-              "name": "config",
-              "description": "Sets component ui config object.",
-              "value": {
-                "kind": "expression",
-                "type": "object"
-              },
-              "default": "{}"
-            },
-            {
-              "name": "dataCy",
-              "description": "Sets data-cy attribute for automated testing.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            }
-          ],
-          "events": [
-            {
-              "name": "update:modelValue"
-            }
-          ],
-          "slots": [
-            {
-              "name": "icon",
-              "description": "Use it to add icon."
-            }
-          ],
-          "source": {
-            "module": "./src/ui.form-radio-card/index.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "URadioGroup",
           "description": "",

package/ui.form-radio-card/Docs.mdx

@@ -1,16 +0,0 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } 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 />

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

@@ -1,37 +0,0 @@
-import useUI from "../../composable.ui";
-import { cva, cx } from "../../service.ui";
-
-import defaultConfig from "../configs/default.config";
-import { computed } from "vue";
-
-export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { radio } = config.value;
-
-  const cvaRadio = cva({
-    base: radio.base,
-    variants: radio.variants,
-    compoundVariants: radio.compoundVariants,
-  });
-
-  const radioClasses = computed(() => cvaRadio({ color: props.color }));
-
-  const wrapperAttrsRaw = getAttrs("wrapper");
-  const itemsAttrs = getAttrs("items");
-  const labelAttrs = getAttrs("label");
-  const radioAttrs = getAttrs("radio", { isComponent: true, classes: radioClasses });
-  const iconAttrs = getAttrs("icon", { isComponent: true });
-
-  const wrapperAttrs = computed(() => (classes) => ({
-    ...wrapperAttrsRaw.value,
-    class: cx([wrapperAttrsRaw.value.class, classes]),
-  }));
-
-  return {
-    radioAttrs,
-    iconAttrs,
-    wrapperAttrs,
-    labelAttrs,
-    itemsAttrs,
-  };
-}

package/ui.form-radio-card/configs/default.config.js

@@ -1,31 +0,0 @@
-export default /*tw*/ {
-  wrapper: "grid grid-rows-1 gap-4 md:gap-6 text-center",
-  title: "text-base font-normal text-gray-900 mb-1 mt-3",
-  description: "text-xs font-normal text-gray-500/[85]",
-  radio: {
-    base: "w-full right-4 top-2 !gap-0",
-    radio: "absolute right-6 top-4",
-  },
-  label: "size-full cursor-pointer",
-  items: `
-    relative mr-1 w-full cursor-pointer rounded-lg border border-solid border-gray-300 px-6 py-4
-    focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15] hover:border-gray-400
-  `,
-  icon: "mb-3 flex justify-center",
-  defaultVariants: {
-    color: "brand",
-    labelAlign: "top",
-    gridCols: 2,
-    withIcon: true,
-  },
-  safelist: (colors) => [
-    { pattern: `border-(${colors})-100`, variants: ["disabled"] },
-    { pattern: `border-(${colors})-300` },
-    { pattern: `border-(${colors})-400`, variants: ["hover"] },
-    { pattern: `border-(${colors})-500`, variants: ["focus", "active"] },
-    { pattern: `text-(${colors})-500` },
-    { pattern: `bg-(${colors})-100`, variants: ["disabled"] },
-    { pattern: `bg-(${colors})-500`, variants: ["focus"] },
-    { pattern: `ring-(${colors})-200`, variants: ["focus"] },
-  ],
-};

package/ui.form-radio-card/constants/index.js

@@ -1,5 +0,0 @@
-/*
-  This const is needed to prevent the issue in script setup:
- `defineProps` is referencing locally declared variables. (vue/valid-define-props)
- */
-export const URadioCard = "URadioCard";

package/ui.form-radio-card/index.stories.js

@@ -1,152 +0,0 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
-
-import URadioCard from "../ui.form-radio-card";
-import UIcon from "../ui.image-icon";
-
-/**
- * The `URadioCard` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-radio-card)
- */
-export default {
-  id: "3150",
-  title: "Form Inputs & Controls / Radio Card",
-  component: URadioCard,
-  args: {
-    value: "radio card 1",
-    name: "radio",
-    options: [
-      {
-        iconName: "star",
-        iconFill: true,
-        value: "radio card 1",
-        description: "some description 1",
-        label: "title 1",
-      },
-      {
-        iconName: "star",
-        iconFill: true,
-        value: "radio card 2",
-        description: "some description 2",
-        label: "title 2",
-      },
-      {
-        iconName: "star",
-        iconFill: true,
-        value: "radio card 3",
-        description: "some description 3",
-        label: "title 3",
-      },
-    ],
-  },
-  argTypes: {
-    ...getArgTypes(URadioCard.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { URadioCard },
-  setup() {
-    const slots = getSlotNames(URadioCard.name);
-
-    return { args, slots };
-  },
-  template: `
-    <URadioCard v-bind="args">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
-    </URadioCard>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { URadioCard, UIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-    <URadioCard v-bind="args">
-      ${args.slotTemplate}
-    </URadioCard>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const gridCols3 = DefaultTemplate.bind({});
-gridCols3.args = {
-  gridCols: 3,
-  value: "radio card 4",
-  name: "radio 2",
-  options: [
-    {
-      value: "radio card 4",
-      description: "some description 1",
-      iconName: "star",
-      iconFill: true,
-      label: "title 1",
-    },
-    {
-      value: "radio card 5",
-      description: "some description 2",
-      iconName: "star",
-      iconFill: true,
-      label: "title 2",
-    },
-    {
-      value: "radio card 6",
-      description: "some description 3",
-      iconName: "star",
-      iconFill: true,
-      label: "title 3",
-    },
-  ],
-};
-
-export const withoutIcon = DefaultTemplate.bind({});
-withoutIcon.args = {
-  withIcon: false,
-  value: "radio card 7",
-  name: "radio 3",
-  options: [
-    {
-      value: "radio card 7",
-      description: "some description 1",
-      iconName: "star",
-      iconFill: true,
-      label: "title 1",
-    },
-    {
-      value: "radio card 8",
-      description: "some description 2",
-      iconName: "star",
-      iconFill: true,
-      label: "title 2",
-    },
-    {
-      value: "radio card 9",
-      description: "some description 3",
-      iconName: "star",
-      iconFill: true,
-      label: "title 3",
-    },
-  ],
-};
-
-export const iconSlot = SlotTemplate.bind({});
-iconSlot.args = {
-  value: "radio card 10",
-  name: "radio 4",
-  options: [
-    { value: "radio card 10", description: "some description 1", title: "title 1" },
-    { value: "radio card 11", description: "some description 2", title: "title 2" },
-  ],
-  slotTemplate: `
-    <template #icon>
-      <UIcon
-        name="star"
-        size="lg"
-      />
-    </template>
-  `,
-};