vueless 0.0.2 → 0.0.4

package/src/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/src/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/src/ui.form-radio-card/index.vue

@@ -0,0 +1,159 @@
+<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 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/src/ui.image-icon/composables/attrs.composable.js

@@ -0,0 +1,65 @@
+import useUI from "../../composable.ui";
+import { cva } 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 { wrapper, container, icon } = config.value;
+
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const cvaContainer = cva({
+    base: container.base,
+    variants: container.variants,
+    compoundVariants: container.compoundVariants,
+  });
+
+  const cvaIcon = cva({
+    base: icon.base,
+    variants: icon.variants,
+    compoundVariants: icon.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() =>
+    setColor(
+      cvaWrapper({
+        pill: props.pill,
+        size: props.size,
+        color: props.color,
+      }),
+      props.color,
+    ),
+  );
+
+  const containerClasses = computed(() =>
+    setColor(
+      cvaContainer({
+        pill: props.pill,
+        size: props.size,
+        color: props.color,
+        variant: props.variant,
+        interactive: props.interactive,
+      }),
+      props.color,
+    ),
+  );
+
+  const iconClasses = computed(() => cvaIcon({ size: props.size }));
+
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  const containerAttrs = getAttrs("container", { classes: containerClasses });
+  const iconAttrs = getAttrs("icon", { classes: iconClasses });
+
+  return {
+    config,
+    wrapperAttrs,
+    containerAttrs,
+    iconAttrs,
+  };
+}

package/src/ui.image-icon/configs/default.config.js

@@ -0,0 +1,90 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "",
+    variants: {
+      pill: {
+        true: "rounded-full bg-{color}-500 bg-opacity-5",
+      },
+    },
+    compoundVariants: [
+      { pill: true, size: "3xs", class: "p-1" },
+      { pill: true, size: "2xs", class: "p-1" },
+      { pill: true, size: "xs", class: "p-2" },
+      { pill: true, size: "sm", class: "p-2" },
+      { pill: true, size: "md", class: "p-3" },
+      { pill: true, size: "lg", class: "p-3" },
+      { pill: true, size: "xl", class: "p-4" },
+      { pill: true, size: "2xl", class: "p-4" },
+      { pill: true, size: "3xl", class: "p-4" },
+      { pill: true, size: "4xl", class: "p-5" },
+      { pill: true, size: "5xl", class: "p-5" },
+      { pill: true, color: "white", class: "bg-white" },
+      { pill: true, color: "grayscale", class: "bg-gray-900" },
+    ],
+  },
+  container: {
+    base: "fill-current outline-0",
+    variants: {
+      size: {
+        "3xs": "size-3",
+        "2xs": "size-3.5",
+        xs: "size-4",
+        sm: "size-5",
+        md: "size-6",
+        lg: "size-8",
+        xl: "size-10",
+        "2xl": "size-12",
+        "3xl": "size-14",
+        "4xl": "size-16",
+        "5xl": "size-20",
+      },
+      variant: {
+        light: "text-{color}-400",
+        default: "text-{color}-500",
+        dark: "text-{color}-700",
+      },
+      color: {
+        white: "text-white",
+        grayscale: "text-gray-900",
+      },
+      interactive: {
+        true: "cursor-pointer hover:opacity-50, active:opacity-50",
+      },
+    },
+  },
+  icon: {
+    variants: {
+      size: {
+        "3xs": "h-3 w-3",
+        "2xs": "h-3.5 w-3.5",
+        xs: " h-4 w-4",
+        sm: "h-5 w-5",
+        md: "h-6 w-6",
+        lg: "h-8 w-8",
+        xl: "h-10 w-10",
+        "2xl": "h-12 w-12",
+        "3xl": "h-14 w-14",
+        "4xl": "h-16 w-16",
+        "5xl": "h-20 w-20",
+      },
+    },
+  },
+  defaultVariants: {
+    name: "",
+    library: "@material-symbols",
+    weight: 500,
+    style: "outlined",
+    pill: false,
+    fill: false,
+    size: "md",
+    color: "black",
+    variant: "default",
+    interactive: false,
+  },
+  safelist: (colors) => [
+    { pattern: `text-(${colors})-400` },
+    { pattern: `text-(${colors})-500` },
+    { pattern: `text-(${colors})-700` },
+    { pattern: `bg-(${colors})-500` },
+  ],
+};

package/src/ui.image-icon/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 UIcon = "UIcon";