vueless 0.0.4 → 0.0.6

package/src/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/src/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/src/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/src/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/src/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/src/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 = {};

package/src/ui.form-radio-group/index.vue

@@ -0,0 +1,127 @@
+<template>
+  <ULabel
+    :label="label"
+    :description="description"
+    :disabled="disabled"
+    :error="error"
+    :size="size"
+    align="topWithDesc"
+    :data-cy="dataCy"
+    v-bind="labelAttrs"
+  >
+    <div v-bind="listAttrs">
+      <slot />
+    </div>
+  </ULabel>
+</template>
+
+<script setup>
+import { computed, provide } from "vue";
+
+import UIService from "../service.ui";
+
+import defaultConfig from "./configs/default.config";
+import { URadioGroup } from "./constants";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "URadioGroup", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Radio group selected value.
+   */
+  modelValue: {
+    type: [String, Number],
+    default: "",
+  },
+
+  /**
+   * Radio group label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Input description.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Error message.
+   */
+  error: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Radio size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, URadioGroup).default.size,
+  },
+
+  /**
+   * Radio group color.
+   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+   */
+  color: {
+    type: String,
+    default: UIService.get(defaultConfig, URadioGroup).default.color,
+  },
+
+  /**
+   * Radio group name (sets for each radio).
+   */
+  name: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Disable the input.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, URadioGroup).default.disabled,
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "radio",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const { listAttrs, labelAttrs } = useAttrs(props);
+
+const selectedItem = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+provide("setRadioGroupSelectedItem", (value) => (selectedItem.value = value));
+provide("getRadioGroupName", () => props.name);
+provide("getRadioGroupColor", () => props.color);
+provide("getRadioGroupSize", () => props.size);
+</script>

package/src/ui.form-select/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/src/ui.form-select/composables/attrs.composable.js

@@ -0,0 +1,172 @@
+import useUI from "../../composable.ui";
+import { cva, cx } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export default function useAttrs(props, { isTop, isOpen, selectedLabel: selectedLabelValue }) {
+  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { wrapper, innerWrapper, searchInput, selectedLabel, caret, caretClearText } = config.value;
+
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const cvaInnerWrapper = cva({
+    base: innerWrapper.base,
+    variants: innerWrapper.variants,
+    compoundVariants: innerWrapper.compoundVariants,
+  });
+
+  const cvaSearchInput = cva({
+    base: searchInput.base,
+    variants: searchInput.variants,
+    compoundVariants: searchInput.compoundVariants,
+  });
+
+  const cvaSelectedLabel = cva({
+    base: selectedLabel.base,
+    variants: selectedLabel.variants,
+    compoundVariants: selectedLabel.compoundVariants,
+  });
+
+  const cvaCaret = cva({
+    base: caret.base,
+    variants: caret.variants,
+    compoundVariants: caret.compoundVariants,
+  });
+
+  const cvaCaretClearText = cva({
+    base: caretClearText.base,
+    variants: caretClearText.variants,
+    compoundVariants: caretClearText.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() =>
+    cvaWrapper({
+      size: props.size,
+      error: Boolean(props.error),
+      disabled: props.disabled,
+      labelOutside: props.labelOutside,
+      label: Boolean(props.label),
+    }),
+  );
+
+  const innerWrapperClasses = computed(() =>
+    cvaInnerWrapper({
+      multiple: props.multiple,
+      size: props.size,
+    }),
+  );
+
+  const searchInputClasses = computed(() =>
+    cvaSearchInput({
+      size: props.size,
+    }),
+  );
+
+  const selectedLabelClasses = computed(() =>
+    cvaSelectedLabel({
+      size: props.size,
+      disabled: props.disabled,
+      multiple: props.multiple,
+    }),
+  );
+
+  const caretClasses = computed(() =>
+    cvaCaret({
+      size: props.size,
+      labelOutside: props.labelOutside,
+      label: Boolean(props.label),
+    }),
+  );
+
+  const caretClearTextClasses = computed(() =>
+    cvaCaretClearText({
+      size: props.size,
+    }),
+  );
+
+  const innerWrapperAttrs = getAttrs("innerWrapper", { classes: innerWrapperClasses });
+  const wrapperTopAttrs = getAttrs("wrapperTop");
+  const leftSlotAttrs = getAttrs("leftSlot");
+  const beforeCaretSlotAttrs = getAttrs("beforeCaretSlot");
+  const afterCaretSlotAttrs = getAttrs("afterCaretSlot");
+  const iconToggleAttrs = getAttrs("iconToggle", { isComponent: true });
+  const searchInputAttrs = getAttrs("searchInput", { classes: searchInputClasses });
+  const selectedLabelsAttrs = getAttrs("selectedLabels");
+  const selectedLabelAttrs = getAttrs("selectedLabel", { classes: selectedLabelClasses });
+  const dropdownListAttrs = getAttrs("dropdownList", { isComponent: true });
+  const caretClearTextAttrs = getAttrs("caretClearText", { classes: caretClearTextClasses });
+  const iconClearAttrs = getAttrs("iconClear", { isComponent: true });
+  const caretRemoveItemAttrs = getAttrs("caretRemoveItem");
+  const iconRemoveItemAttrs = getAttrs("iconRemoveItem", { isComponent: true });
+
+  const wrapperAttrsRaw = getAttrs("wrapper", { classes: wrapperClasses });
+
+  const wrapperAttrs = computed(() => ({
+    ...wrapperAttrsRaw.value,
+    class: cx([wrapperAttrsRaw.value.class, isOpen.value && config.value.wrapperActive]),
+  }));
+
+  const labelAttrsRaw = getAttrs("label", { isComponent: true });
+
+  const labelAttrs = computed(() => ({
+    ...labelAttrsRaw.value,
+    class: cx([
+      labelAttrsRaw.value.class,
+      isOpen.value && config.value.labelWrapperActive,
+      isTop.value && config.value.labelWrapperTop,
+    ]),
+  }));
+
+  const caretToggleAttrsRaw = getAttrs("caretToggle");
+
+  const caretToggleAttrs = computed(() => ({
+    ...caretToggleAttrsRaw.value,
+    class: cx([caretToggleAttrsRaw.value.class, caretClasses.value]),
+  }));
+
+  const caretClearAttrsRaw = getAttrs("caretClear");
+
+  const caretClearAttrs = computed(() => ({
+    ...caretClearAttrsRaw.value,
+    class: cx([caretClearAttrsRaw.value.class, caretClasses.value]),
+  }));
+
+  const searchAttrsRaw = getAttrs("search");
+
+  const searchAttrs = computed(() => ({
+    ...searchAttrsRaw.value,
+    class: cx([
+      searchAttrsRaw.value.class,
+      Boolean(selectedLabelValue.value) && !isOpen.value && "w-0", // this is not configurable
+    ]),
+  }));
+
+  return {
+    config,
+    hasSlotContent,
+    labelAttrs,
+    wrapperAttrs,
+    innerWrapperAttrs,
+    wrapperTopAttrs,
+    leftSlotAttrs,
+    beforeCaretSlotAttrs,
+    afterCaretSlotAttrs,
+    caretToggleAttrs,
+    iconToggleAttrs,
+    caretClearAttrs,
+    caretClearTextAttrs,
+    iconClearAttrs,
+    caretRemoveItemAttrs,
+    iconRemoveItemAttrs,
+    searchAttrs,
+    searchInputAttrs,
+    selectedLabelsAttrs,
+    selectedLabelAttrs,
+    dropdownListAttrs,
+  };
+}

package/src/ui.form-select/configs/default.config.js

@@ -0,0 +1,138 @@
+export default /*tw*/ {
+  label: "relative w-full",
+  wrapper: {
+    base: `
+      pb-2 flex flex-row-reverse justify-between w-full min-h-full static box-border
+      rounded-lg border border-gray-300 bg-white
+      hover:border-gray-400 hover:transition hover:duration-100 hover:ease-in-out hover:focus-within:border-gray-500
+      focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15] focus-within:outline-none
+    `,
+    variants: {
+      size: {
+        sm: "pt-6",
+        md: "pt-7",
+        lg: "pt-8",
+      },
+      error: {
+        true: `
+          border-red-300 hover:border-red-300
+          focus-within:border-red-500 focus-within:ring-4 focus-within:ring-red-100
+        `,
+      },
+      disabled: {
+        true: `
+          border-gray-100 bg-gray-100 text-gray-900 hover:border-gray-100
+          focus-within:border-gray-100 focus-within:ring-0
+        `,
+      },
+      labelOutside: {
+        true: "pt-2",
+      },
+    },
+    compoundVariants: [{ labelOutside: false, label: false, class: "pt-2.5" }],
+  },
+  innerWrapper: {
+    base: "flex px-4 min-h-full w-full overflow-hidden",
+    variants: {
+      multiple: {
+        true: "grid grid-cols-1 grid-rows-[minmax(0, 1fr)_min-content]",
+      },
+    },
+  },
+  wrapperActive: "z-[inherit]", // applies when select active
+  labelWrapperTop: "group/top", // applies when an open direction is top
+  labelWrapperActive: "group/active",
+  leftSlot: "pr-4 flex items-center",
+  caret: {
+    base: "flex items-center mt-0",
+    compoundVariants: [
+      { labelOutside: false, size: "sm", label: true, class: "-mt-3" },
+      { labelOutside: false, size: "md", label: true, class: "-mt-4" },
+      { labelOutside: false, size: "lg", label: true, class: "-mt-5" },
+    ],
+  },
+  beforeCaretSlot: "",
+  afterCaretSlot: "mr-3",
+  caretToggle: "mr-3",
+  iconToggle: "transform transition-all duration-300 group-[]/active:rotate-180",
+  iconToggleName: "expand_more",
+  iconClear: "",
+  iconClearName: "close_small",
+  iconRemoveItem: "",
+  iconRemoveItemName: "close_small",
+  caretRemoveItem: "flex items-center",
+  caretClearText: {
+    base: `
+      cursor-pointer flex items-center text-sm font-normal text-gray-400 hover:text-gray-500
+      transition-all duration-100 ease-in-out
+    `,
+    compoundVariants: [
+      { size: "sm", class: "text-sm" },
+      { size: "md", class: "text-base" },
+      { size: "lg", class: "text-lg" },
+    ],
+  },
+  search: "flex w-fit",
+  searchInput: {
+    base: `
+        p-0 font-normal leading-none text-gray-900 relative w-full border-none bg-transparent
+        focus:shadow-none focus:outline-none focus:ring-0
+        placeholder:text-gray-400 placeholder:font-normal
+      `,
+    variants: {
+      size: {
+        sm: "text-sm placeholder:text-sm",
+        md: "text-base placeholder:text-base",
+        lg: "text-lg placeholder:text-lg",
+      },
+    },
+  },
+  selectedLabels: "flex flex-col col-span-2",
+  selectedLabel: {
+    base: `
+        font-normal leading-none text-gray-900 relative truncate
+        inline-flex items-center whitespace-nowrap mb-0 w-full
+      `,
+    variants: {
+      size: {
+        sm: "text-sm min-h-4",
+        md: "text-base min-h-5",
+        lg: "text-lg min-h-6",
+      },
+      disabled: {
+        true: "bg-gray-100",
+      },
+      multiple: {
+        true: "py-2 last:mb-2.5 flex justify-between border-b border-gray-100",
+      },
+    },
+    compoundVariants: [
+      { size: "sm", multiple: true, class: "text-sm" },
+      { size: "md", multiple: true, class: "text-base" },
+      { size: "lg", multiple: true, class: "text-lg" },
+    ],
+  },
+  dropdownList: "group-[]/top:bottom-full group-[]/top:top-auto top-full",
+  i18n: {
+    listIsEmpty: "List is empty.",
+    noDataToShow: "No data to show.",
+    clear: "clear",
+    addMore: "Add more...",
+    add: "Add",
+  },
+  defaultVariants: {
+    size: "md",
+    openDirection: "auto",
+    labelKey: "label",
+    valueKey: "id",
+    optionsLimit: 100,
+    maxHeight: 300,
+    optionHeight: 40,
+    multiple: false,
+    disabled: false,
+    searchable: true,
+    noClear: false,
+    addOption: false,
+    labelOutside: false,
+  },
+};

package/src/ui.form-select/constants/index.js

@@ -0,0 +1,19 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const USelect = "USelect";
+
+export const DIRECTION = {
+  top: "top",
+  bottom: "bottom",
+};
+
+export const KEYS = {
+  enter: "Enter",
+  tab: "Tab",
+};
+
+export const KEY_CODES = {
+  enter: 13,
+};