vueless 0.0.3 → 0.0.4

package/ui.form-radio/index.vue

@@ -1,169 +0,0 @@
-<template>
-  <ULabel
-    :for="id"
-    :label="label"
-    :size="radioSize"
-    :align="labelAlign"
-    :description="description"
-    :disabled="disabled"
-    :data-cy="dataCy"
-    v-bind="labelAttrs"
-  >
-    <input
-      :id="id"
-      type="radio"
-      :disabled="disabled"
-      :name="radioName"
-      :value="value"
-      :checked="checked"
-      :data-cy="dataCy"
-      v-bind="radioAttrs"
-      @focus="onFocus"
-    />
-
-    <template #footer>
-      <slot name="footer" />
-    </template>
-  </ULabel>
-</template>
-
-<script setup>
-import { inject, onMounted, ref, watchEffect } from "vue";
-
-import UIService, { getRandomId } from "vueless/service.ui";
-
-import defaultConfig from "./configs/default.config";
-import { URadio } from "./constants";
-import { useAttrs } from "./composables/attrs.composable";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "URadio", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Radio value.
-   */
-  value: {
-    type: [String, Number],
-    default: "",
-  },
-
-  /**
-   * Radio label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Radio description.
-   */
-  description: {
-    type: [String, Object],
-    default: "",
-  },
-
-  /**
-   * Radio name.
-   */
-  name: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Radio size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: UIService.get(defaultConfig, URadio).default.size,
-  },
-
-  /**
-   * Radio color.
-   * @values brand, grayscale, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
-   */
-  color: {
-    type: String,
-    default: UIService.get(defaultConfig, URadio).default.color,
-  },
-
-  /**
-   * Set label placement related from the default slot.
-   * @values left, right
-   */
-  labelAlign: {
-    type: String,
-    default: UIService.get(defaultConfig, URadio).default.labelAlign,
-  },
-
-  /**
-   * Set radio disabled.
-   */
-  disabled: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, URadio).default.disabled,
-  },
-
-  /**
-   * Set radio checked.
-   */
-  checked: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, URadio).default.checked,
-  },
-
-  /**
-   * Generates unique element id.
-   * @ignore
-   */
-  id: {
-    type: String,
-    default: () => getRandomId(),
-  },
-
-  /**
-   * Component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits(["update:value"]);
-
-const setRadioGroupSelectedItem = inject("setRadioGroupSelectedItem", null);
-const getRadioGroupName = inject("getRadioGroupName", null);
-const getRadioGroupColor = inject("getRadioGroupColor", null);
-const getRadioGroupSize = inject("getRadioGroupSize", null);
-
-const radioName = ref("");
-const radioColor = ref(getRadioGroupColor ? getRadioGroupColor() : props.color);
-const radioSize = ref(getRadioGroupSize ? getRadioGroupSize() : props.size);
-
-const { radioAttrs, labelAttrs } = useAttrs(props, { radioColor, radioSize });
-
-onMounted(() => {
-  radioName.value = props.name || getRadioGroupName;
-});
-
-watchEffect(() => (radioColor.value = getRadioGroupColor ? getRadioGroupColor() : props.color));
-watchEffect(() => (radioSize.value = getRadioGroupSize ? getRadioGroupSize() : props.size));
-
-function onFocus(event) {
-  setRadioGroupSelectedItem && setRadioGroupSelectedItem(props.value);
-
-  emit("update:value", event.target.value);
-}
-</script>

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 "vueless/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,30 +0,0 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
-
-import defaultConfig from "../configs/default.config";
-import { computed } from "vue";
-
-export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
-  const { radio } = config.value;
-
-  const cvaRadio = cva({
-    base: radio.base,
-    variants: radio.variants,
-    compoundVariants: radio.compoundVariants,
-  });
-
-  const radioClasses = computed(() => setColor(cvaRadio({ color: props.color }), props.color));
-
-  const wrapperAttrs = getAttrs("wrapper");
-  const radioAttrs = getAttrs("radio", { isComponent: true, classes: radioClasses });
-  const labelAttrs = getAttrs("label", { isComponent: true });
-  const iconAttrs = getAttrs("icon", { isComponent: true });
-
-  return {
-    radioAttrs,
-    iconAttrs,
-    wrapperAttrs,
-    labelAttrs,
-  };
-}

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

@@ -1,25 +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: "absolute right-4 top-2 !gap-0",
-  },
-  label: "mr-1",
-  icon: "mb-3 flex justify-center",
-  defaultVariants: {
-    color: "brand",
-    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,149 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import URadioCard from "vueless/ui.form-radio-card";
-import UIcon from "vueless/ui.image-icon";
-
-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,169 +0,0 @@
-<template>
-  <div :class="[gridColsClass]" v-bind="wrapperAttrs">
-    <ULabel
-      v-for="(item, index) in options"
-      :key="item.value"
-      :data-cy="`${dataCy}-item-${index}`"
-      :for="id + index"
-      :description="item.description"
-      :config="labelConfig"
-    >
-      <URadio
-        :id="id + index"
-        v-model="selectedItem"
-        :value="item.value"
-        :name="name"
-        v-bind="radioAttrs"
-      />
-
-      <div>
-        <!-- @slot Use it to add icon. -->
-        <slot v-if="withIcon" name="icon" :item="item">
-          <UIcon :name="item.iconName" size="xl" :color="color" v-bind="iconAttrs" />
-        </slot>
-      </div>
-
-      <div v-bind="labelAttrs">{{ item.label }}</div>
-    </ULabel>
-  </div>
-</template>
-
-<script setup>
-import { computed } from "vue";
-import { useStore } from "vuex";
-
-import UIcon from "vueless/ui.image-icon";
-import UIService, { getRandomId } from "vueless/service.ui";
-
-import defaultConfig from "./configs/default.config";
-import { URadioCard } from "./constants";
-import { useAttrs } from "./composables/attrs.composable";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "URadioCard", inheritAttrs: false });
-
-const store = useStore();
-
-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(),
-  },
-
-  /**
-   * Sets component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Sets data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const labelConfig = {
-  wrapper: {
-    base: `
-    rounded-lg border border-solid border-gray-300 cursor-pointer relative w-full
-    hover:border-gray-400 focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15]
-    px-6 py-4`,
-  },
-  label: {
-    base: "h-full w-full cursor-pointer",
-    variants: {
-      placement: {
-        topInside: "left-0 !top-0",
-      },
-    },
-  },
-  description: {
-    variants: {
-      placement: {
-        topInside: "pl-0",
-      },
-    },
-  },
-};
-
-const emit = defineEmits(["update:modelValue"]);
-
-const { radioAttrs, iconAttrs, wrapperAttrs, labelAttrs } = useAttrs(props);
-
-const isMobileDevice = computed(() => {
-  return store.getters["breakpoint/isMobileDevice"];
-});
-
-const selectedItem = computed({
-  get: () => props.modelValue,
-  set: (value) => emit("update:modelValue", value),
-});
-
-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,
-  };
-});
-</script>

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

@@ -1,15 +0,0 @@
-import { cva } from "vueless/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 };
-  }
-}

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

@@ -1,16 +0,0 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "vueless/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-group/composables/attrs.composable.js

@@ -1,27 +0,0 @@
-import { computed } from "vue";
-
-import { cva } from "vueless/service.ui";
-import useUI from "vueless/composable.ui";
-
-import defaultConfig from "../configs/default.config";
-
-export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { list } = config.value;
-
-  const cvaList = cva({
-    base: list.base,
-    variants: list.variants,
-    compoundVariants: list.compoundVariants,
-  });
-
-  const listClasses = computed(() => cvaList({ size: props.size }));
-
-  const labelAttrs = getAttrs("label", { isComponent: true });
-  const listAttrs = getAttrs("list", { classes: listClasses });
-
-  return {
-    labelAttrs,
-    listAttrs,
-  };
-}

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

@@ -1,18 +0,0 @@
-export default /*tw*/ {
-  label: "",
-  list: {
-    base: "flex flex-col",
-    variants: {
-      size: {
-        sm: "space-y-3",
-        md: "space-y-4",
-        lg: "space-y-5",
-      },
-    },
-  },
-  defaultVariants: {
-    color: "brand",
-    size: "md",
-    disabled: false,
-  },
-};

package/ui.form-radio-group/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 URadioGroup = "URadioGroup";

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

@@ -1,42 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import URadioGroup from "vueless/ui.form-radio-group";
-import URadio from "vueless/ui.form-radio";
-
-export default {
-  id: "3160",
-  title: "Form Inputs & Controls / Radio Group",
-  component: URadioGroup,
-  args: {
-    label: "Label",
-    value: "1",
-    radios: [
-      { name: "radio", label: "radio 1", description: "description", value: "1" },
-      { name: "radio", label: "radio 2", description: "description", value: "2" },
-      { name: "radio", label: "radio 3", description: "description", value: "3" },
-    ],
-  },
-  argTypes: {
-    ...getArgTypes(URadioGroup.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { URadioGroup, URadio },
-  setup() {
-    return { args };
-  },
-  template: `
-    <URadioGroup v-bind="args" v-model="args.value">
-      <template v-for="(radio,index) in args.radios" :key="index">
-        <URadio
-          v-bind="radio"
-        >
-        </URadio>
-      </template>
-    </URadioGroup>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};