vueless 0.0.4 → 0.0.5

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

@@ -0,0 +1,260 @@
+<template>
+  <div v-bind="wrapperAttrs">
+    <div v-bind="triggerAttrs">
+      <ULink
+        :id="id"
+        :label="label"
+        :size="size"
+        :color="color"
+        :dashed="dashed"
+        :underlined="underlined"
+        :disabled="disabled"
+        :no-ring="noRing"
+        :data-cy="`${dataCy}-link`"
+        v-bind="linkAttrs"
+        @click.stop="onClickLink"
+      >
+        <template #right>
+          <UIcon
+            v-if="!noIcon"
+            :name="config.iconName"
+            :size="iconSize"
+            :color="color"
+            :data-cy="`${dataCy}-caret`"
+            v-bind="iconAttrs"
+          />
+        </template>
+      </ULink>
+    </div>
+
+    <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 ULink from "../ui.button-link";
+import UDropdownList from "../ui.dropdown-list";
+import UIService, { getRandomId } from "../service.ui";
+
+import { UDropdownLink } 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: "UDropdownLink", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Selected value.
+   */
+  modelValue: {
+    type: [String, Number],
+    default: "",
+  },
+
+  /**
+   * Link label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Link 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, UDropdownLink).default.color,
+  },
+
+  /**
+   * Link size.
+   * @values xs, sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UDropdownLink).default.size,
+  },
+
+  /**
+   * Add underline.
+   */
+  underlined: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDropdownLink).default.underlined,
+  },
+
+  /**
+   * Set dashed underline style.
+   */
+  dashed: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDropdownLink).default.dashed,
+  },
+
+  /**
+   * Disable the link.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDropdownLink).default.disabled,
+  },
+
+  /**
+   * Hide focus ring.
+   */
+  noRing: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDropdownLink).default.noRing,
+  },
+
+  /**
+   * Hide dropdown icon.
+   */
+  noIcon: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDropdownLink).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, UDropdownLink).default.listYPosition,
+  },
+
+  /**
+   * The position of dropdown list on the x-axis.
+   * @values left, right
+   */
+  listXPosition: {
+    type: String,
+    default: UIService.get(defaultConfig, UDropdownLink).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,
+  linkAttrs,
+  listAttrs,
+  iconAttrs,
+  triggerAttrs,
+  hasSlotContent,
+} = useAttrs(props, { isShownOptions });
+
+const selectValue = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    isShownOptions.value = false;
+    emit("update:modelValue", value);
+  },
+});
+
+const iconSize = computed(() => {
+  const sizes = {
+    xs: "2xs",
+    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 onClickLink() {
+  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-list/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-list/composables/attrs.composable.js

@@ -0,0 +1,93 @@
+import useUI from "../../composable.ui";
+import { cva, cx } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export default function useAttrs(props) {
+  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { subGroupLabel, groupLabel, option } = config.value;
+
+  const cvaSubGroupLabel = cva({
+    base: subGroupLabel.base,
+    variants: subGroupLabel.variants,
+    compoundVariants: subGroupLabel.compoundVariants,
+  });
+  const cvaGroupLabel = cva({
+    base: groupLabel.base,
+    variants: groupLabel.variants,
+    compoundVariants: groupLabel.compoundVariants,
+  });
+  const cvaOption = cva({
+    base: option.base,
+    variants: option.variants,
+    compoundVariants: option.compoundVariants,
+  });
+
+  const optionClasses = computed(() =>
+    cvaOption({
+      disabled: props.disabled,
+      size: props.size,
+    }),
+  );
+  const subGroupLabelClasses = computed(() =>
+    cvaSubGroupLabel({
+      size: props.size,
+    }),
+  );
+  const groupLabelClasses = computed(() =>
+    cvaGroupLabel({
+      size: props.size,
+    }),
+  );
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const listAttrs = getAttrs("list");
+  const optionHighlightAttrs = getAttrs("optionHighlight");
+  const optionSelectedAttrs = getAttrs("optionSelected");
+  const optionItemAttrs = getAttrs("optionItem");
+  const addTitleWrapperAttrs = getAttrs("addTitleWrapper");
+  const addTitleAttrs = getAttrs("addTitle");
+  const addTitleHotkeyAttrs = getAttrs("addTitleHotkey");
+  const buttonAddAttrs = getAttrs("buttonAdd", { isComponent: true });
+  const iconAddAttrs = getAttrs("iconAdd", { isComponent: true });
+  const optionContentAttrs = getAttrs("optionContent");
+
+  const subGroupLabelAttrsRaw = getAttrs("subGroupLabel", { classes: subGroupLabelClasses });
+  const subGroupLabelAttrs = computed(() => ({
+    ...subGroupLabelAttrsRaw.value,
+    class: cx([optionClasses.value, subGroupLabelAttrsRaw.value.class]),
+  }));
+
+  const groupLabelAttrsRaw = getAttrs("groupLabel", { classes: groupLabelClasses });
+  const groupLabelAttrs = computed(() => ({
+    ...groupLabelAttrsRaw.value,
+    class: cx([optionClasses.value, groupLabelAttrsRaw.value.class]),
+  }));
+
+  const optionAttrs = (classes = []) => {
+    const mergedClasses = cx([optionClasses.value, ...classes]);
+
+    return getAttrs("option", { classes: mergedClasses }).value;
+  };
+
+  return {
+    hasSlotContent,
+    config,
+    wrapperAttrs,
+    listAttrs,
+    optionHighlightAttrs,
+    optionSelectedAttrs,
+    optionItemAttrs,
+    addTitleWrapperAttrs,
+    addTitleAttrs,
+    addTitleHotkeyAttrs,
+    buttonAddAttrs,
+    iconAddAttrs,
+    optionAttrs,
+    subGroupLabelAttrs,
+    groupLabelAttrs,
+    optionClasses,
+    optionContentAttrs,
+  };
+}

package/src/ui.dropdown-list/composables/usePointer.js

@@ -0,0 +1,77 @@
+import { ref, computed } from "vue";
+
+export default function usePointer(options, optionHeight, listWrapperElement) {
+  const pointer = ref(null);
+  const pointerDirty = ref(false);
+
+  const pointerPosition = computed(() => {
+    return pointer.value * optionHeight || 0;
+  });
+
+  function scrollWrapperToElement() {
+    const visibleElements = listWrapperElement.value.getBoundingClientRect().height / optionHeight;
+    const currentElement = visibleElements - 1;
+    const currentPointerPosition = pointerPosition.value - currentElement * optionHeight;
+
+    if (listWrapperElement.value.scrollTop <= currentPointerPosition) {
+      listWrapperElement.value.scrollTop = currentPointerPosition;
+    }
+  }
+
+  function pointerForward() {
+    if (pointer.value < options.length - 1) {
+      pointer.value++;
+
+      const isGroup =
+        options[pointer.value].$isLabel ||
+        options[pointer.value].isSubGroup ||
+        options[pointer.value].$groupLabel;
+
+      if (listWrapperElement) scrollWrapperToElement();
+
+      if (options[pointer.value] && isGroup) {
+        pointerForward();
+      }
+    }
+
+    pointerDirty.value = true;
+  }
+
+  function pointerBackward() {
+    if (pointer.value > 0) {
+      pointer.value--;
+
+      const isGroup =
+        options[pointer.value].$isLabel ||
+        options[pointer.value].isSubGroup ||
+        options[pointer.value].$groupLabel;
+
+      if (listWrapperElement && listWrapperElement.value.scrollTop >= pointerPosition.value) {
+        listWrapperElement.value.scrollTop = pointerPosition.value;
+      }
+
+      if (options[pointer.value] && isGroup) {
+        pointerBackward();
+      }
+    } else {
+      if (options[pointer.value] && options[0].$isLabel) {
+        pointerForward();
+      }
+    }
+
+    pointerDirty.value = true;
+  }
+
+  function pointerSet(index) {
+    pointer.value = index;
+    pointerDirty.value = true;
+  }
+
+  function pointerReset() {
+    pointer.value = 0;
+
+    if (listWrapperElement) listWrapperElement.value.scrollTop = 0;
+  }
+
+  return { pointer, pointerDirty, pointerSet, pointerReset, pointerBackward, pointerForward };
+}

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

@@ -0,0 +1,74 @@
+export default /*tw*/ {
+  wrapper: `
+    my-2 flex w-full absolute right-0 z-50
+    rounded-lg border border-gray-300 bg-white shadow
+    overflow-auto [-webkit-overflow-scrolling:touch]
+    focus:outline-none
+  `,
+  list: `
+      inline-block list-none align-top m-0 min-w-full p-0
+      hover:transition hover:duration-100 hover:ease-in-out bg-white opacity-1
+    `,
+  subGroupLabel: {
+    base: "pointer-events-none bg-transparent !font-medium leading-none !uppercase !text-gray-500/[85] pt-1",
+    variants: {
+      size: {
+        sm: "text-2xs",
+        md: "text-xs",
+        lg: "text-sm",
+      },
+    },
+  },
+  groupLabel: {
+    base: "pointer-events-none bg-transparent !font-medium leading-none !uppercase !text-gray-500/[85] pt-6 group-first/item:pt-2",
+    variants: {
+      size: {
+        sm: "text-2xs pb-1 mt-4",
+        md: "text-xs pb-1",
+        lg: "text-sm pb-1 mt-4",
+      },
+    },
+  },
+  option: {
+    base: `
+        p-3 flex items-center align-middle whitespace-nowrap cursor-pointer
+        font-normal !leading-none normal-case text-gray-900
+        hover:bg-gray-100 active:bg-gray-200 active:font-medium
+        overflow-hidden text-ellipsis
+      `,
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+      },
+      disabled: {
+        true: "pointer-events-none",
+      },
+    },
+  },
+  optionHighlight: "bg-gray-100",
+  optionSelected: "bg-gray-200 font-medium",
+  optionItem: "group/item block",
+  optionContent: "overflow-hidden text-ellipsis",
+  addTitleWrapper: `
+    flex items-center justify-between cursor-pointer p-3 hover:bg-gray-100
+    active:bg-gray-200 active:font-medium -mb-6
+  `,
+  addTitle: "text-sm font-medium text-gray-900",
+  addTitleHotkey: "text-gray-500",
+  buttonAdd: "sticky left-[calc(100%-2.3rem)] bottom-2.5 p-1",
+  iconAddName: "add",
+  iconAdd: "bg-transparent",
+  i18n: {
+    noDataToShow: "No data to show.",
+    add: "Add",
+  },
+  defaultVariants: {
+    size: "md",
+    optionHeight: 40,
+    maxHeight: undefined,
+    disabled: false,
+    addOption: false,
+  },
+};

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

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

@@ -0,0 +1,76 @@
+import { getArgTypes } from "../service.storybook";
+
+import UDropdownList from "../ui.dropdown-list";
+import URow from "../ui.container-row";
+
+export default {
+  id: "2050",
+  title: "Dropdowns / Dropdown List",
+  component: UDropdownList,
+  args: {
+    options: [
+      { label: "option 1", id: "1" },
+      { label: "option 2", id: "2" },
+      { label: "option 3", id: "3" },
+    ],
+  },
+  argTypes: {
+    ...getArgTypes(UDropdownList.name),
+  },
+  parameters: {
+    backgrounds: {
+      default: "white",
+    },
+    docs: {
+      story: {
+        iframeHeight: 160,
+      },
+    },
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UDropdownList },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UDropdownList
+      v-bind="args"
+    />
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UDropdownList, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <div class="flex flex-col gap-6">
+      <URow>
+        <UDropdownList
+          v-for="(size, index) in sizes"
+          :key="index"
+          v-bind="args"
+          :size="size"
+        />
+      </URow>
+    </div>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const maxHeight = DefaultTemplate.bind({});
+maxHeight.args = { maxHeight: 80 };
+
+export const withoutOptions = DefaultTemplate.bind({});
+withoutOptions.args = { options: [] };