vueless 0.0.10 → 0.0.12

package/ui.form-radio/index.vue

@@ -0,0 +1,170 @@
+<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 ULabel from "../ui.form-label";
+import UIService, { getRandomId } from "../service.ui";
+
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+import { URadio } from "./constants";
+
+/* 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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,35 @@
+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, 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 wrapperAttrsRaw = getAttrs("wrapper");
+  const radioAttrs = getAttrs("radio", { isComponent: true, classes: radioClasses });
+  const labelAttrs = getAttrs("label", { isComponent: true });
+  const iconAttrs = getAttrs("icon", { isComponent: true });
+
+  const wrapperAttrs = computed(() => (classes) => ({
+    ...wrapperAttrsRaw.value,
+    class: cx([wrapperAttrsRaw.value.class, classes]),
+  }));
+
+  return {
+    radioAttrs,
+    iconAttrs,
+    wrapperAttrs,
+    labelAttrs,
+  };
+}

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,5 @@
+/*
+  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

@@ -0,0 +1,149 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import URadioCard from "../ui.form-radio-card";
+import UIcon from "../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

@@ -0,0 +1,160 @@
+<template>
+  <div v-bind="wrapperAttrs(gridColsClass)">
+    <template v-for="(item, index) in options" :key="id + index">
+      <URadio
+        :id="id + index"
+        v-model="selectedItem"
+        :value="item.value"
+        :name="name"
+        v-bind="radioAttrs"
+        :label="item.label"
+        :description="item.description"
+      />
+      <!-- @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>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useStore } from "vuex";
+
+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";
+
+/* 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

@@ -0,0 +1,15 @@
+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 };
+  }
+}

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

@@ -0,0 +1,16 @@
+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-group/composables/attrs.composable.js

@@ -0,0 +1,27 @@
+import { computed } from "vue";
+
+import { cva } from "../../service.ui";
+import useUI from "../../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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,5 @@
+/*
+  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

@@ -0,0 +1,42 @@
+import { getArgTypes } from "../service.storybook";
+
+import URadioGroup from "../ui.form-radio-group";
+import URadio from "../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 = {};