vueless 0.0.2 → 0.0.3

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

@@ -1,98 +1,127 @@
 <template>
-  <div ref="URadioGroup" class="mono-radio-group" :data-cy="dataCy">
-    <h3 v-if="label" class="mono-radio-group-label">{{ label }}</h3>
-
-    <div :class="labelClass" class="mono-radio-group-wrapper">
+  <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>
-  </div>
+  </ULabel>
 </template>
 
-<script>
-export default {
-  name: "URadioGroup",
+<script setup>
+import { computed, provide } from "vue";
+
+import UIService from "vueless/service.ui";
+
+import defaultConfig from "./configs/default.config";
+import { URadioGroup } from "./constants";
+import { useAttrs } from "./composables/attrs.composable";
 
-  provide() {
-    return {
-      setRadioGroupSelectedItem: (value) => {
-        this.selectedItem = value;
-      },
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "URadioGroup", inheritAttrs: false });
 
-      getRadioGroupName: () => {
-        return this.name;
-      },
-    };
+const props = defineProps({
+  /**
+   * Radio group selected value.
+   */
+  modelValue: {
+    type: [String, Number],
+    default: "",
   },
 
-  props: {
-    /**
-     * Set radio group label.
-     */
-    label: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set component value.
-     */
-    modelValue: {
-      type: [String, Number],
-      default: "",
-    },
-
-    /**
-     * Set the name for radio group for each radio.
-     */
-    name: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set test dataCy for a radio group.
-     */
-    dataCy: {
-      type: String,
-      default: "radio",
-    },
+  /**
+   * Radio group label.
+   */
+  label: {
+    type: String,
+    default: "",
   },
 
-  emits: ["update:modelValue"],
-
-  computed: {
-    labelClass() {
-      return {
-        "mono-radio-group-label-margin": this.label,
-      };
-    },
-
-    selectedItem: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
+  /**
+   * 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,
   },
-};
-</script>
 
-<style lang="postcss" scoped>
-.mono-radio-group {
-  &-wrapper {
-    @apply flex flex-col;
-    @apply space-y-4;
-  }
-
-  &-label {
-    @apply text-sm font-normal text-gray-500;
-    @apply mb-6;
-
-    &-margin {
-      @apply mb-4 ml-4;
-    }
-  }
-}
-</style>
+  /**
+   * 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/ui.form-select/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-select/composables/attrs.composable.js

@@ -0,0 +1,172 @@
+import useUI from "vueless/composable.ui";
+import { cva, cx } from "vueless/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/ui.form-select/configs/default.config.js

@@ -0,0 +1,131 @@
+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",
+  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/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,
+};