vueless 0.0.4 → 0.0.6

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

@@ -0,0 +1,234 @@
+<template>
+  <div v-bind="wrapperAttrs">
+    <UBadge
+      :id="id"
+      :label="label"
+      :size="size"
+      :color="color"
+      :weight="weight"
+      :variant="variant"
+      :data-cy="`${dataCy}-badge`"
+      v-bind="badgeAttrs"
+      @click.stop="onClickBadge"
+    >
+      <template #right>
+        <UIcon
+          v-if="!noIcon"
+          :name="config.iconName"
+          :size="iconSize"
+          :color="color"
+          :data-cy="`${dataCy}-caret`"
+          v-bind="iconAttrs"
+        />
+      </template>
+    </UBadge>
+
+    <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 UBadge from "../ui.text-badge";
+import UDropdownList from "../ui.dropdown-list";
+
+import UIService, { getRandomId } from "../service.ui";
+
+import defaultConfig from "./configs/default.config";
+import { UDropdownBadge } from "./constants";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UDropdownBadge", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Selected value.
+   */
+  modelValue: {
+    type: [String, Number],
+    default: "",
+  },
+
+  /**
+   * Badge label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Badge variant.
+   * @values primary, secondary, thirdary
+   */
+  variant: {
+    type: String,
+    default: UIService.get(defaultConfig, UDropdownBadge).default.variant,
+  },
+
+  /**
+   * Badge 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, UDropdownBadge).default.color,
+  },
+
+  /**
+   * Badge size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UDropdownBadge).default.size,
+  },
+
+  /**
+   * Badge font weight.
+   * @values regular, medium, bold
+   */
+  weight: {
+    type: String,
+    default: UIService.get(defaultConfig, UDropdownBadge).default.weight,
+  },
+
+  /**
+   * Hide dropdown icon.
+   */
+  noIcon: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDropdownBadge).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, UDropdownBadge).default.listYPosition,
+  },
+
+  /**
+   * The position of dropdown list on the x-axis.
+   * @values left, right
+   */
+  listXPosition: {
+    type: String,
+    default: UIService.get(defaultConfig, UDropdownBadge).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, wrapperAttrs, badgeAttrs, listAttrs, iconAttrs, hasSlotContent } =
+  useAttrs(props, { isShownOptions });
+
+const selectValue = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    isShownOptions.value = false;
+    emit("update:modelValue", value);
+  },
+});
+
+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 onClickBadge() {
+  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-button/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.dropdown-button/composables/attrs.composable.js

@@ -0,0 +1,63 @@
+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");
+  const buttonAttrs = getAttrs("button", { 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,
+    buttonAttrs,
+    listAttrs,
+    iconAttrs,
+    wrapperAttrs,
+    hasSlotContent,
+  };
+}

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

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

@@ -0,0 +1,14 @@
+/*
+  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

@@ -0,0 +1,158 @@
+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>
+  `,
+};