vueless 0.0.175 → 0.0.177

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.175",
+  "version": "0.0.177",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -181,6 +181,93 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "TableRow",
+          "description": "",
+          "attributes": [
+            {
+              "name": "row",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "object"
+              }
+            },
+            {
+              "name": "columns",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "array"
+              }
+            },
+            {
+              "name": "tag",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"tr\""
+            },
+            {
+              "name": "selectable",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "nestedLevel",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "0"
+            },
+            {
+              "name": "dataCy",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "attrs",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "object"
+              }
+            },
+            {
+              "name": "config",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "object"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "toggleRowVisibility"
+            },
+            {
+              "name": "click"
+            }
+          ],
+          "slots": [
+            {
+              "name": "`cell-${key}`"
+            }
+          ],
+          "source": {
+            "module": "./src/ui.data-table/components/TableRow.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "UAccordion",
           "description": "",
@@ -1057,7 +1144,7 @@
               "description": "Checkbox size.",
               "value": {
                 "kind": "expression",
-                "type": "'sm' | 'md' | 'lg'"
+                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
               },
               "default": "md"
             },
@@ -4276,7 +4363,7 @@
               "description": "Set label size.",
               "value": {
                 "kind": "expression",
-                "type": "'sm' | 'md' | 'lg'"
+                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
               },
               "default": "md"
             },
@@ -4655,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": {
@@ -5666,7 +5753,7 @@
               "description": "Radio size.",
               "value": {
                 "kind": "expression",
-                "type": "'sm' | 'md' | 'lg'"
+                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
               },
               "default": "md"
             },
@@ -5752,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": "",
@@ -6642,15 +6618,6 @@
               },
               "default": "false"
             },
-            {
-              "name": "nesting",
-              "description": "Sets the nesting level from which folding button need to be shown.",
-              "value": {
-                "kind": "expression",
-                "type": "number|boolean"
-              },
-              "default": "false"
-            },
             {
               "name": "resource",
               "description": "Set loader resource name to activate table top loader exact for that resource.",
@@ -6709,8 +6676,7 @@
               "description": "Use it to add something before first row."
             },
             {
-              "name": "`cell-${key}`",
-              "description": "Use it to customise table cell item (in whole column)."
+              "name": "`cell-${key}`"
             },
             {
               "name": "after-last-row",

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>
-  `,
-};

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

@@ -1,142 +0,0 @@
-<template>
-  <div v-bind="wrapperAttrs(gridColsClass)">
-    <div v-for="(item, index) in options" :key="id + index" v-bind="itemsAttrs">
-      <label :for="id + index" v-bind="labelAttrs">
-        <URadio
-          :id="id + index"
-          v-model="selectedItem"
-          :value="item.value"
-          :name="name"
-          :label="item.label"
-          :checked="item.value === selectedItem"
-          :description="item.description"
-          :label-align="labelAlign"
-          v-bind="radioAttrs"
-        >
-          <!-- @slot Use it to add icon. -->
-          <slot v-if="withIcon" name="icon" :item="item">
-            <UIcon internal :name="item.iconName" size="xl" :color="color" v-bind="iconAttrs" />
-          </slot>
-        </URadio>
-      </label>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from "vue";
-
-import UIcon from "../ui.image-icon";
-import URadio from "../ui.form-radio";
-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 props = defineProps({
-  /**
-   * Set radio card name.
-   */
-  name: {
-    type: String,
-    required: true,
-    default: "",
-  },
-
-  /**
-   * Set options for component.
-   */
-  options: {
-    type: Array,
-    default: () => [],
-  },
-
-  /**
-   * Set component value.
-   */
-  modelValue: {
-    type: [String, Number, Boolean],
-    default: "",
-  },
-
-  /**
-   * Set grid cols number.
-   */
-  gridCols: {
-    type: Number,
-    default: UIService.get(defaultConfig, URadioCard).default.gridCols,
-  },
-
-  /**
-   * Show / hide component icon.
-   */
-  withIcon: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, URadioCard).default.withIcon,
-  },
-
-  /**
-   * The color of the icon.
-   * @values brand, grayscale, black, white, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
-   */
-  color: {
-    type: String,
-    default: UIService.get(defaultConfig, URadioCard).default.color,
-  },
-
-  /**
-   * Generates unique element id.
-   * @ignore
-   */
-  id: {
-    type: String,
-    default: () => getRandomId(),
-  },
-
-  labelAlign: {
-    type: String,
-    default: UIService.get(defaultConfig, URadioCard).default.labelAlign,
-  },
-
-  /**
-   * Sets component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Sets data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits(["update:modelValue"]);
-
-const { radioAttrs, iconAttrs, wrapperAttrs, labelAttrs, itemsAttrs } = useAttrs(props);
-
-const { isMobileBreakpoint } = useBreakpoint();
-
-const selectedItem = computed({
-  get: () => props.modelValue,
-  set: (value) => emit("update:modelValue", value),
-});
-
-const gridColsClass = computed(() => {
-  return {
-    "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>