vueless 0.0.9 → 0.0.10

package/src/ui.dropdown-button/configs/default.config.js

@@ -1,37 +0,0 @@
-export default /*tw*/ {
-  wrapper: "relative inline-block",
-  button: "",
-  icon: "transition-all duration-300",
-  iconName: "keyboard_arrow_down",
-  iconRotate: "rotate-180",
-  listWrapper: {
-    base: `
-      absolute z-10 inline-block
-      max-h-60 overflow-y-auto overflow-x-hidden md:!w-auto
-      rounded-lg border-gray-300 shadow bg-white
-    `,
-    variants: {
-      listYPosition: {
-        top: "bottom-full mb-4",
-        bottom: "top-full mt-4",
-      },
-      listXPosition: {
-        left: "left-0",
-        right: "right-0",
-      },
-    },
-  },
-  list: "w-fit",
-  defaultVariants: {
-    color: "brand",
-    size: "md",
-    variant: "primary",
-    listYPosition: "bottom",
-    listXPosition: "left",
-    filled: false,
-    pill: false,
-    square: false,
-    noIcon: false,
-    disabled: false,
-  },
-};

package/src/ui.dropdown-button/constants/index.js

@@ -1,14 +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 UDropdownButton = "UDropdownButton";
-
-export const BUTTON_VARIANT = {
-  primary: "primary",
-};
-
-export const LIST_POSITION = {
-  bottom: "bottom",
-  right: "right",
-};

package/src/ui.dropdown-button/index.stories.js

@@ -1,158 +0,0 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
-
-import UDropdownButton from "../ui.dropdown-button";
-import UDropdownItem from "../ui.dropdown-item";
-import URow from "../ui.container-row";
-import UGroup from "../ui.container-group";
-
-export default {
-  id: "2010",
-  title: "Dropdowns / Dropdown Button",
-  component: UDropdownButton,
-  args: {
-    label: "Dropdown",
-    options: [
-      { label: "option 1", value: "1" },
-      { label: "option 2", value: "2" },
-      { label: "option 3", value: "3" },
-    ],
-  },
-  argTypes: {
-    ...getArgTypes(UDropdownButton.name),
-  },
-  parameters: {
-    docs: {
-      story: {
-        height: "200px",
-      },
-    },
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UDropdownButton },
-  setup() {
-    const slots = getSlotNames(UDropdownButton.name);
-
-    return { args, slots };
-  },
-  template: `
-    <UDropdownButton
-      v-bind="args"
-    >
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
-    </UDropdownButton>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UDropdownButton, UDropdownItem },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UDropdownButton
-      v-bind="args"
-    >
-      ${args.slotTemplate}
-    </UDropdownButton>
-  `,
-});
-
-const VariantsTemplate = (args, { argTypes } = {}) => ({
-  components: { UDropdownButton, URow },
-  setup() {
-    return {
-      args,
-      variants: argTypes.variant.options,
-    };
-  },
-  template: `
-    <URow>
-      <UDropdownButton
-        v-for="(variant, index) in variants"
-        v-bind="args"
-        :variant="variant"
-        :label="variant"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UDropdownButton, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UDropdownButton
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        :label="size"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const VariantColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { UDropdownButton, URow, UGroup },
-  setup() {
-    return {
-      args,
-      variants: argTypes.variant.options,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <UGroup>
-      <URow v-for="(variant, index) in variants" :key="index">
-        <UDropdownButton
-          v-for="(color, idx) in colors"
-          v-bind="args"
-          :color="color"
-          :variant="variant"
-          :label="color"
-          :key="idx"
-        />
-      </URow>
-    </UGroup>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const Filled = DefaultTemplate.bind({});
-Filled.args = { variant: "thirdary", filled: true };
-
-export const Variants = VariantsTemplate.bind({});
-Variants.args = { text: "" };
-
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = { text: "" };
-
-export const VariantColors = VariantColorsTemplate.bind({});
-VariantColors.args = { text: "" };
-
-export const WithoutDropdownIcon = VariantsTemplate.bind({});
-WithoutDropdownIcon.args = { noIcon: true };
-
-export const dropdownListSlot = SlotTemplate.bind({});
-dropdownListSlot.args = {
-  slotTemplate: `
-    <template #default>
-      <UDropdownItem label="Some option" />
-      <UDropdownItem label="Some option 2" />
-      <UDropdownItem label="Some option 3" />
-    </template>
-  `,
-};

package/src/ui.dropdown-button/index.vue

@@ -1,271 +0,0 @@
-<template>
-  <div v-bind="wrapperAttrs">
-    <UButton
-      :id="id"
-      :label="label"
-      :size="size"
-      :variant="variant"
-      :filled="filled || isShownOptions"
-      :color="color"
-      :pill="pill"
-      :square="square"
-      :disabled="disabled"
-      :data-cy="`${dataCy}-button`"
-      v-bind="buttonAttrs"
-      @click.stop="onClickButton"
-    >
-      <template #right>
-        <UIcon
-          v-if="!noIcon"
-          :name="config.iconName"
-          :size="iconSize"
-          :color="iconColor"
-          :data-cy="`${dataCy}-caret`"
-          v-bind="iconAttrs"
-        />
-      </template>
-    </UButton>
-
-    <div v-if="isShownOptions && hasSlotContent($slots['default'])" v-bind="listWrapperAttrs">
-      <!-- @slot Use it to add dropdown list. -->
-      <slot />
-    </div>
-
-    <UDropdownList
-      v-if="isShownOptions && !hasSlotContent($slots['default'])"
-      v-model="selectValue"
-      :size="size"
-      :options="options"
-      :value-key="valueKey"
-      :label-key="labelKey"
-      :data-cy="`${dataCy}-item`"
-      v-bind="listAttrs"
-    />
-  </div>
-</template>
-
-<script setup>
-import { computed, onMounted, onUnmounted, provide, ref, watch } from "vue";
-
-import UIcon from "../ui.image-icon";
-import UButton from "../ui.button";
-import UDropdownList from "../ui.dropdown-list";
-
-import UIService, { getRandomId } from "../service.ui";
-
-import defaultConfig from "./configs/default.config";
-import { UDropdownButton, BUTTON_VARIANT } from "./constants";
-import { useAttrs } from "./composables/attrs.composable";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UDropdownButton", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Selected value.
-   */
-  modelValue: {
-    type: [String, Number],
-    default: "",
-  },
-
-  /**
-   * Button label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Button variant.
-   * @values primary, secondary, thirdary
-   */
-  variant: {
-    type: String,
-    default: UIService.get(defaultConfig, UDropdownButton).default.variant,
-  },
-
-  /**
-   * Fill the background for thirdary variant.
-   */
-  filled: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UDropdownButton).default.filled,
-  },
-
-  /**
-   * Button color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
-   */
-  color: {
-    type: String,
-    default: UIService.get(defaultConfig, UDropdownButton).default.color,
-  },
-
-  /**
-   * Button size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: UIService.get(defaultConfig, UDropdownButton).default.size,
-  },
-
-  /**
-   * Set button corners rounded.
-   */
-  pill: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UDropdownButton).default.pill,
-  },
-
-  /**
-   * Set the same paddings for the button.
-   */
-  square: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UDropdownButton).default.square,
-  },
-
-  /**
-   * Disable the link.
-   */
-  disabled: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UDropdownButton).default.disabled,
-  },
-
-  /**
-   * Hide dropdown icon.
-   */
-  noIcon: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UDropdownButton).default.noIcon,
-  },
-
-  /**
-   * Options list.
-   */
-  options: {
-    type: Array,
-    default: () => [],
-  },
-
-  /**
-   * Label key in the item object of options.
-   */
-  labelKey: {
-    type: String,
-    default: "label",
-  },
-
-  /**
-   * Value key in the item object of options.
-   */
-  valueKey: {
-    type: String,
-    default: "id",
-  },
-
-  /**
-   * The position of dropdown list on the y-axis.
-   * @values top, bottom
-   */
-  listYPosition: {
-    type: String,
-    default: UIService.get(defaultConfig, UDropdownButton).default.listYPosition,
-  },
-
-  /**
-   * The position of dropdown list on the x-axis.
-   * @values left, right
-   */
-  listXPosition: {
-    type: String,
-    default: UIService.get(defaultConfig, UDropdownButton).default.listXPosition,
-  },
-
-  /**
-   * Generates unique element id.
-   * @ignore
-   */
-  id: {
-    type: String,
-    default: () => getRandomId(),
-  },
-
-  /**
-   * Component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-provide("hideDropdownOptions", () => hideOptions);
-
-const emit = defineEmits(["update:modelValue"]);
-
-const isShownOptions = ref(false);
-
-const {
-  config,
-  listWrapperAttrs,
-  buttonAttrs,
-  listAttrs,
-  iconAttrs,
-  wrapperAttrs,
-  hasSlotContent,
-} = useAttrs(props, { isShownOptions });
-
-const selectValue = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    isShownOptions.value = false;
-    emit("update:modelValue", value);
-  },
-});
-
-const iconColor = computed(() => {
-  return props.variant === BUTTON_VARIANT.primary ? "white" : props.color;
-});
-
-const iconSize = computed(() => {
-  const sizes = {
-    sm: "xs",
-    md: "sm",
-    lg: "md",
-  };
-
-  return sizes[props.size];
-});
-
-watch(() => props.modelValue, hideOptions);
-
-onMounted(() => window.addEventListener("click", onClickOutside));
-onUnmounted(() => window.removeEventListener("click", onClickOutside));
-
-function onClickButton() {
-  isShownOptions.value = !isShownOptions.value;
-}
-
-function hideOptions() {
-  isShownOptions.value = false;
-}
-
-function onClickOutside(event) {
-  if (!document.getElementById(props.id)?.contains(event.target)) {
-    hideOptions();
-  }
-}
-</script>

package/src/ui.dropdown-item/Docs.mdx

@@ -1,16 +0,0 @@
-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.dropdown-item/composables/attrs.composable.js

@@ -1,13 +0,0 @@
-import useUI from "../../composable.ui";
-
-import defaultConfig from "../configs/default.config";
-
-export function useAttrs(props) {
-  const { getAttrs } = useUI(defaultConfig, () => props.config);
-
-  const wrapperAttrs = getAttrs("wrapper");
-
-  return {
-    wrapperAttrs,
-  };
-}

package/src/ui.dropdown-item/configs/default.config.js

@@ -1,16 +0,0 @@
-export default /*tw*/ {
-  wrapper: {
-    base: `
-      text-base p-3
-      whitespace-nowrap text-left font-normal text-gray-900 cursor-pointer
-      first:rounded-t-lg last:rounded-b-lg hover:bg-gray-100 active:bg-gray-200 active:font-medium disabled:bg-gray-500
-   `,
-    variants: {
-      size: {
-        sm: "text-sm p-2",
-        md: "text-base p-3",
-        lg: "text-lg p-4",
-      },
-    },
-  },
-};

package/src/ui.dropdown-item/index.stories.js

@@ -1,30 +0,0 @@
-import { getArgTypes } from "../service.storybook";
-
-import UDropdownItem from "../ui.dropdown-item";
-
-export default {
-  id: "2040",
-  title: "Dropdowns / Dropdown Item",
-  component: UDropdownItem,
-  args: {
-    label: "Dropdown Item",
-  },
-  argTypes: {
-    ...getArgTypes(UDropdownItem.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UDropdownItem },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UDropdownItem
-        v-bind="args"
-    />
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};

package/src/ui.dropdown-item/index.vue

@@ -1,53 +0,0 @@
-<template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs" @click="onClick">
-    <template v-if="label">{{ label }}</template>
-    <slot />
-  </div>
-</template>
-
-<script setup>
-import { inject } from "vue";
-import { useAttrs } from "./composables/attrs.composable";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UDropdownItem", inheritAttrs: false });
-
-const hideDropdownOptions = inject("hideDropdownOptions", null);
-
-const props = defineProps({
-  /**
-   * Set dropdown item label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Sets component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Sets data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits(["click"]);
-
-function onClick() {
-  // invokes click event on current item
-  emit("click");
-
-  if (hideDropdownOptions) hideDropdownOptions();
-}
-
-const { wrapperAttrs } = useAttrs(props);
-</script>

package/src/ui.dropdown-link/Docs.mdx

@@ -1,16 +0,0 @@
-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.dropdown-link/composables/attrs.composable.js

@@ -1,65 +0,0 @@
-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, { isShownOptions }) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { listWrapper } = config.value;
-
-  const cvaListWrapper = cva({
-    base: listWrapper.base,
-    variants: listWrapper.variants,
-    compoundVariants: listWrapper.compoundVariants,
-  });
-
-  const listWrapperClasses = computed(() =>
-    cvaListWrapper({
-      listYPosition: props.listYPosition,
-      listXPosition: props.listXPosition,
-    }),
-  );
-
-  // Get list wrapper position classes to apply them to list without wrapper
-  const cvaListWrapperVariants = cva({
-    base: "",
-    variants: listWrapper.variants,
-    compoundVariants: [],
-  });
-
-  const listWrapperPositionClasses = computed(() =>
-    cvaListWrapperVariants({
-      listYPosition: props.listYPosition,
-      listXPosition: props.listXPosition,
-    }),
-  );
-
-  const wrapperAttrs = getAttrs("wrapper", true);
-  const triggerAttrs = getAttrs("trigger");
-  const linkAttrs = getAttrs("link", { isComponent: true });
-  const iconAttrsRaw = getAttrs("icon", { isComponent: true });
-
-  const iconAttrs = computed(() => {
-    const rotateClasses = isShownOptions.value && config.value.iconRotate;
-
-    return {
-      ...iconAttrsRaw.value,
-      class: cx([iconAttrsRaw.value.class, rotateClasses]),
-    };
-  });
-
-  const listWrapperAttrs = getAttrs("listWrapper", { classes: listWrapperClasses });
-  const listAttrs = getAttrs("list", { isComponent: true, classes: listWrapperPositionClasses });
-
-  return {
-    config,
-    listWrapperAttrs,
-    wrapperAttrs,
-    linkAttrs,
-    listAttrs,
-    iconAttrs,
-    triggerAttrs,
-    hasSlotContent,
-  };
-}