vueless 0.0.176 → 0.0.178

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>

package/ui.form-radio-card/services/variant.service.js

@@ -1,15 +0,0 @@
-import { cva } from "../service.ui";
-
-export default class VariantService {
-  static get(config) {
-    const { radio } = config;
-
-    const radioVariants = cva({
-      base: radio.base,
-      variants: radio.variants,
-      compoundVariants: radio.compoundVariants,
-    });
-
-    return { radioVariants };
-  }
-}