vueless 0.0.3 → 0.0.4

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

@@ -1,127 +0,0 @@
-<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 "vueless/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/ui.form-select/Docs.mdx

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

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

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

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