vueless 0.0.2 → 0.0.3

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

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

@@ -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

@@ -4,6 +4,7 @@ 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: {
@@ -11,19 +12,22 @@ export default {
     name: "radio",
     options: [
       {
-        iconName: "star-fill",
+        iconName: "star",
+        iconFill: true,
         value: "radio card 1",
         description: "some description 1",
         label: "title 1",
       },
       {
-        iconName: "star-fill",
+        iconName: "star",
+        iconFill: true,
         value: "radio card 2",
         description: "some description 2",
         label: "title 2",
       },
       {
-        iconName: "star-fill",
+        iconName: "star",
+        iconFill: true,
         value: "radio card 3",
         description: "some description 3",
         label: "title 3",
@@ -75,19 +79,22 @@ gridCols3.args = {
     {
       value: "radio card 4",
       description: "some description 1",
-      iconName: "star-fill",
+      iconName: "star",
+      iconFill: true,
       label: "title 1",
     },
     {
       value: "radio card 5",
       description: "some description 2",
-      iconName: "star-fill",
+      iconName: "star",
+      iconFill: true,
       label: "title 2",
     },
     {
       value: "radio card 6",
       description: "some description 3",
-      iconName: "star-fill",
+      iconName: "star",
+      iconFill: true,
       label: "title 3",
     },
   ],
@@ -102,19 +109,22 @@ withoutIcon.args = {
     {
       value: "radio card 7",
       description: "some description 1",
-      iconName: "star-fill",
+      iconName: "star",
+      iconFill: true,
       label: "title 1",
     },
     {
       value: "radio card 8",
       description: "some description 2",
-      iconName: "star-fill",
+      iconName: "star",
+      iconFill: true,
       label: "title 2",
     },
     {
       value: "radio card 9",
       description: "some description 3",
-      iconName: "star-fill",
+      iconName: "star",
+      iconFill: true,
       label: "title 3",
     },
   ],
@@ -124,7 +134,6 @@ export const iconSlot = SlotTemplate.bind({});
 iconSlot.args = {
   value: "radio card 10",
   name: "radio 4",
-  icons: { User: require("vueless/ui.icons-metronic/User.svg") },
   options: [
     { value: "radio card 10", description: "some description 1", title: "title 1" },
     { value: "radio card 11", description: "some description 2", title: "title 2" },

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

@@ -1,183 +1,169 @@
 <template>
-  <div class="mono-radio-card-wrapper" :class="gridColsClass">
-    <label
+  <div :class="[gridColsClass]" v-bind="wrapperAttrs">
+    <ULabel
       v-for="(item, index) in options"
       :key="item.value"
-      class="mono-radio-card"
-      :class="selectedItemClass(item.value)"
       :data-cy="`${dataCy}-item-${index}`"
+      :for="id + index"
+      :description="item.description"
+      :config="labelConfig"
     >
-      <t-radio
+      <URadio
+        :id="id + index"
         v-model="selectedItem"
-        class="mono-radio-card-radio"
-        :name="name"
         :value="item.value"
+        :name="name"
+        v-bind="radioAttrs"
       />
 
-      <div class="mono-radio-card-inner-wrapper">
+      <div>
         <!-- @slot Use it to add icon. -->
         <slot v-if="withIcon" name="icon" :item="item">
-          <UIcon :name="item.iconName" size="xl" color="blue" />
+          <UIcon :name="item.iconName" size="xl" :color="color" v-bind="iconAttrs" />
         </slot>
-
-        <div class="mono-radio-card-title">{{ item.label }}</div>
-
-        <div class="mono-radio-card-description">{{ item.description }}</div>
       </div>
-    </label>
+
+      <div v-bind="labelAttrs">{{ item.label }}</div>
+    </ULabel>
   </div>
 </template>
 
-<script>
-import { mapGetters } from "vuex";
+<script setup>
+import { computed } from "vue";
+import { useStore } from "vuex";
 
 import UIcon from "vueless/ui.image-icon";
-import TRadio from "vueless/library.vue-tailwind-3/t-radio";
+import UIService, { getRandomId } from "vueless/service.ui";
 
-export default {
-  name: "URadioCard",
+import defaultConfig from "./configs/default.config";
+import { URadioCard } from "./constants";
+import { useAttrs } from "./composables/attrs.composable";
 
-  components: {
-    UIcon,
-    TRadio,
-  },
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "URadioCard", inheritAttrs: false });
 
-  props: {
-    /**
-     * Set radio card name.
-     */
-    name: {
-      type: String,
-      required: true,
-      default: "",
-    },
+const store = useStore();
 
-    /**
-     * Set options for component.
-     */
-    options: {
-      type: Array,
-      default: () => [],
-    },
+const props = defineProps({
+  /**
+   * Set radio card name.
+   */
+  name: {
+    type: String,
+    required: true,
+    default: "",
+  },
 
-    /**
-     * Set component value.
-     */
-    modelValue: {
-      type: [String, Number, Boolean],
-      default: "",
-    },
+  /**
+   * Set options for component.
+   */
+  options: {
+    type: Array,
+    default: () => [],
+  },
 
-    /**
-     * Set grid cols number.
-     */
-    gridCols: {
-      type: Number,
-      default: 2,
-    },
+  /**
+   * Set component value.
+   */
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: "",
+  },
 
-    /**
-     * Show / hide component icon.
-     */
-    withIcon: {
-      type: Boolean,
-      default: true,
-    },
+  /**
+   * Set grid cols number.
+   */
+  gridCols: {
+    type: Number,
+    default: UIService.get(defaultConfig, URadioCard).default.gridCols,
+  },
 
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+  /**
+   * Show / hide component icon.
+   */
+  withIcon: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, URadioCard).default.withIcon,
   },
 
-  emits: ["update:modelValue"],
+  /**
+   * 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,
+  },
 
-  computed: {
-    ...mapGetters("breakpoint", ["isMobileDevice"]),
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
 
-    selectedItem: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-    gridColsClass() {
-      return {
-        "grid-cols-1": this.isMobileDevice,
-        "grid-cols-2": this.gridCols === 2 && !this.isMobileDevice,
-        "grid-cols-3": this.gridCols === 3 && !this.isMobileDevice,
-        "grid-cols-4": this.gridCols === 4 && !this.isMobileDevice,
-      };
+  /**
+   * 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",
+      },
     },
   },
-
-  methods: {
-    selectedItemClass(value) {
-      return {
-        "selected-option": this.selectedItem === value,
-      };
+  description: {
+    variants: {
+      placement: {
+        topInside: "pl-0",
+      },
     },
   },
 };
-</script>
 
-<style lang="postcss" scoped>
-.mono-radio-card {
-  @apply rounded-lg border border-solid border-gray-300;
-  @apply cursor-pointer pb-6 pl-6 pr-6 pt-4;
-  @apply relative w-full;
-
-  &-wrapper {
-    @apply grid grid-rows-1 gap-4 md:gap-6;
-  }
-
-  &:hover {
-    @apply border-gray-400;
-  }
-
-  &:focus-within {
-    @apply border-gray-500 ring-4 ring-gray-600 ring-opacity-15;
-  }
-
-  &-radio {
-    @apply border border-solid border-gray-300;
-    @apply h-6 w-6;
-    @apply absolute right-4 top-4;
-
-    &:focus {
-      @apply ring-0;
-    }
-
-    &:active {
-      @apply border-gray-900 bg-gray-900;
-    }
-
-    &:checked {
-      @apply border-gray-900 bg-gray-900;
-    }
-  }
-
-  &-wrapper {
-    @apply text-center;
-  }
-
-  &-title {
-    @apply text-base font-normal text-gray-900;
-    @apply mb-1 mt-3;
-  }
-
-  &-description {
-    @apply text-xs font-normal text-gray-500/[85];
-  }
-}
-
-.selected-option {
-  @apply border-gray-500;
-}
-</style>
+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 "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

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

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

@@ -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

@@ -4,6 +4,7 @@ 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: {