vueless 0.0.4 → 0.0.5

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

@@ -0,0 +1,271 @@
+<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 UIService, { getRandomId } from "../service.ui";
+import UIcon from "../ui.image-icon";
+import UButton from "../ui.button";
+import UDropdownList from "../ui.dropdown-list";
+import { BUTTON_VARIANT } from "../ui.dropdown-button/constants";
+
+import { UDropdownButton } from "./constants";
+import defaultConfig from "./configs/default.config";
+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

@@ -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-item/composables/attrs.composable.js

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

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

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

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

@@ -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-link/composables/attrs.composable.js

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

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

@@ -0,0 +1,37 @@
+export default /*tw*/ {
+  wrapper: "relative inline-block",
+  trigger: "flex items-center relative space-x-0.5",
+  link: "",
+  icon: "transition-all duration-300",
+  iconName: "keyboard_arrow_down",
+  iconRotate: "rotate-180",
+  listWrapper: {
+    base: `
+      absolute z-10
+      max-h-60 overflow-y-auto overflow-x-hidden md:!w-auto
+      rounded-lg border-gray-300 shadow bg-white
+    `,
+    variants: {
+      listYPosition: {
+        top: "bottom-6 mb-4",
+        bottom: "top-3 mt-4",
+      },
+      listXPosition: {
+        left: "left-0",
+        right: "right-0",
+      },
+    },
+  },
+  list: "w-fit",
+  defaultVariants: {
+    color: "brand",
+    size: "md",
+    listYPosition: "bottom",
+    listXPosition: "left",
+    underlined: undefined,
+    dashed: true,
+    noRing: true,
+    noIcon: false,
+    disabled: false,
+  },
+};

package/src/ui.dropdown-link/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 UDropdownLink = "UDropdownLink";

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

@@ -0,0 +1,127 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import UDropdownLink from "../ui.dropdown-link";
+import UDropdownItem from "../ui.dropdown-item";
+import URow from "../ui.container-row";
+
+export default {
+  id: "2030",
+  title: "Dropdowns / Dropdown Link",
+  component: UDropdownLink,
+  args: {
+    label: "Dropdown",
+    options: [
+      { label: "option 1", value: "1" },
+      { label: "option 2", value: "2" },
+      { label: "option 3", value: "3" },
+    ],
+  },
+  argTypes: {
+    ...getArgTypes(UDropdownLink.name),
+  },
+  parameters: {
+    docs: {
+      story: {
+        height: "200px",
+      },
+    },
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UDropdownLink },
+  setup() {
+    const slots = getSlotNames(UDropdownLink.name);
+
+    return { args, slots };
+  },
+  template: `
+    <UDropdownLink
+      v-bind="args"
+    >
+      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
+        <template v-if="args[slot]">{{ args[slot] }}</template>
+      </template>
+    </UDropdownLink>
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { UDropdownLink, UDropdownItem },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UDropdownLink
+      v-bind="args"
+    >
+      ${args.slotTemplate}
+    </UDropdownLink>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UDropdownLink, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <UDropdownLink
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+const ColorsTemplate = (args, { argTypes } = {}) => ({
+  components: { UDropdownLink, URow },
+  setup() {
+    return {
+      args,
+      colors: argTypes.color.options,
+    };
+  },
+  template: `
+    <div>
+      <URow>
+        <UDropdownLink
+          v-for="(color, id) in colors"
+          v-bind="args"
+          :color="color"
+          :label="color"
+          :key="id"
+        />
+      </URow>
+    </div>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const colors = ColorsTemplate.bind({});
+colors.args = {};
+
+export const WithoutDropdownIcon = DefaultTemplate.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>
+  `,
+};