vueless 0.0.3 → 0.0.4

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

@@ -1,127 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UDropdownLink from "vueless/ui.dropdown-link";
-import UDropdownItem from "vueless/ui.dropdown-item";
-import URow from "vueless/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>
-  `,
-};

package/ui.dropdown-link/index.vue

@@ -1,260 +0,0 @@
-<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 "vueless/ui.image-icon";
-import ULink from "vueless/ui.button-link";
-import UDropdownList from "vueless/ui.dropdown-list";
-import UIService, { getRandomId } from "vueless/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/ui.dropdown-list/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.dropdown-list/composables/attrs.composable.js

@@ -1,91 +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) {
-  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 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,
-  };
-}

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

@@ -1,77 +0,0 @@
-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/ui.dropdown-list/configs/default.config.js

@@ -1,68 +0,0 @@
-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
-      `,
-    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",
-  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",
-  defaultVariants: {
-    size: "md",
-    optionHeight: 40,
-    maxHeight: undefined,
-    disabled: false,
-    addOption: false,
-  },
-};

package/ui.dropdown-list/constants/index.js

@@ -1,5 +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 UDropdownList = "UDropdownList";