vueless 0.0.2 → 0.0.3

package/ui.dropdown-link/index.vue

@@ -1,330 +1,260 @@
 <template>
-  <t-dropdown
-    v-model:show="isShownOptions"
-    :classes="dropdownClasses"
-    toggle-on-focus
-    :data-cy="dataCy"
-    class="mono-dropdown-link"
-  >
-    <template #trigger>
-      <div class="mono-dropdown-link-trigger" :class="iconRotateClass">
-        <ULink
-          ref="dropdown"
-          :variant="variant"
-          :text="text"
-          :size="size"
-          :color="color"
-          :dashed="dashed"
-          :no-focus-ring="noFocusRing"
-          :data-cy="`${dataCy}-button`"
-          @mousedown="onMousedown"
-        />
-
-        <div v-if="dropdownIcon" class="mono-dropdown-link-block">
+  <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
-            :variant="variant"
-            name="expand_more"
-            class="icon"
-            :color="color"
+            v-if="!noIcon"
+            :name="config.iconName"
             :size="iconSize"
+            :color="color"
             :data-cy="`${dataCy}-caret`"
+            v-bind="iconAttrs"
           />
-        </div>
-      </div>
-    </template>
+        </template>
+      </ULink>
+    </div>
 
-    <div class="mono-dropdown-link-list">
+    <div v-if="isShownOptions && hasSlotContent($slots['default'])" v-bind="listWrapperAttrs">
       <!-- @slot Use it to add dropdown list. -->
-      <slot>
-        <UDropdownList
-          v-model="selectValue"
-          :options="options"
-          :value-key="valueKey"
-          :item-label="itemLabel"
-          :data-cy="`${dataCy}-item`"
-        />
-      </slot>
+      <slot />
     </div>
-  </t-dropdown>
+
+    <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>
-import TDropdown from "vueless/library.vue-tailwind-3/t-dropdown";
+<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: "",
+  },
 
-export default {
-  name: "UDropdownLink",
+  /**
+   * Link label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
 
-  components: {
-    TDropdown,
-    UIcon,
-    ULink,
-    UDropdownList,
+  /**
+   * 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,
   },
 
-  provide() {
-    return {
-      hideDropdownOptions: () => {
-        this.hideOptions();
-      },
-    };
+  /**
+   * Link size.
+   * @values xs, sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UDropdownLink).default.size,
   },
 
-  props: {
-    /**
-     * Set button text.
-     */
-    text: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * The color of the link.
-     * @values gray, red, orange, yellow, green, blue, violet, fuchsia, black, white
-     */
-    color: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * The variant of the link and icon.
-     * @values light, default, dark
-     */
-    variant: {
-      type: String,
-      default: "default",
-    },
-
-    /**
-     * The size of the button.
-     * @values xs, sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Make a button border dashed.
-     */
-    dashed: {
-      type: Boolean,
-      default: undefined,
-    },
-
-    /**
-     * Makes outline ring during focus inactive.
-     */
-    noFocusRing: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Make the dropdown icon visible.
-     */
-    dropdownIcon: {
-      type: Boolean,
-      default: true,
-    },
-
-    /**
-     * Set select value.
-     */
-    modelValue: {
-      type: [String, Number],
-      default: "",
-    },
-
-    /**
-     * Set options for component.
-     */
-    options: {
-      type: Array,
-      default: () => [],
-    },
-
-    /**
-     * Label from option Object, that will be visible in the dropdown.
-     */
-    itemLabel: {
-      type: String,
-      default: "label",
-    },
-
-    /**
-     * Set track value key.
-     */
-    valueKey: {
-      type: String,
-      default: "id",
-    },
-
-    /**
-     * The position of dropdown list on the y-axis.
-     * @values top, bottom
-     */
-    listYPosition: {
-      type: String,
-      default: "bottom",
-    },
-
-    /**
-     * The position of dropdown list on the x-axis.
-     * @values left, right
-     */
-    listXPosition: {
-      type: String,
-      default: "left",
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+  /**
+   * Add underline.
+   */
+  underlined: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDropdownLink).default.underlined,
   },
 
-  emits: ["update:modelValue"],
-
-  data: () => ({
-    isShownOptions: false,
-  }),
-
-  computed: {
-    selectValue: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.isShownOptions = false;
-        this.$emit("update:modelValue", value);
-      },
-    },
-
-    dropdownListYPosition() {
-      return this.listYPosition === "bottom" ? "top-0" : `dropdown-list-bottom-${this.size}`;
-    },
-
-    dropdownListXPosition() {
-      return this.listXPosition === "right" ? "right-0" : "left-0";
-    },
-
-    iconRotateClass() {
-      return this.isShownOptions ? "icon-rotate" : "";
-    },
-
-    iconSize() {
-      const sizes = {
-        xs: "2xs",
-        sm: "xs",
-        md: "sm",
-        lg: "md",
-      };
-
-      return sizes[this.size];
-    },
-
-    dropdownClasses() {
-      return {
-        button: `block px-4 py-2 text-white transition duration-100 ease-in-out bg-blue-500 border
-          border-transparent rounded shadow-sm hover:bg-blue-600 focus:border-blue-500 focus:ring-2
-          focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50
-          disabled:cursor-not-allowed`,
-        wrapper: "inline-flex flex-col",
-        dropdownWrapper: "relative z-10 mb-0 dropdown-list",
-        dropdown: `${this.dropdownListYPosition} ${this.dropdownListXPosition} absolute
-        rounded-lg shadow bg-white mt-2 dropdown-block`,
-        enterClass: "opacity-0 scale-95",
-        enterActiveClass: "transition transform ease-out duration-100",
-        enterToClass: "opacity-100 scale-100",
-        leaveFromClass: "opacity-100 scale-100",
-        leaveActiveClass: "transition transform ease-in duration-75",
-        leaveToClass: "opacity-0 scale-95",
-      };
-    },
+  /**
+   * Set dashed underline style.
+   */
+  dashed: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDropdownLink).default.dashed,
   },
 
-  watch: {
-    modelValue: {
-      handler: "hideOptions",
-    },
+  /**
+   * Disable the link.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDropdownLink).default.disabled,
   },
 
-  created() {
-    window.addEventListener("click", (event) => this.onClickOutside(event));
+  /**
+   * Hide focus ring.
+   */
+  noRing: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDropdownLink).default.noRing,
   },
 
-  unmounted() {
-    window.removeEventListener("click", (event) => this.onClickOutside(event));
+  /**
+   * Hide dropdown icon.
+   */
+  noIcon: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDropdownLink).default.noIcon,
   },
 
-  methods: {
-    onMousedown() {
-      this.isShownOptions = !this.isShownOptions;
-    },
+  /**
+   * Options list.
+   */
+  options: {
+    type: Array,
+    default: () => [],
+  },
 
-    hideOptions() {
-      this.isShownOptions = false;
-    },
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey: {
+    type: String,
+    default: "label",
+  },
 
-    onClickOutside(event) {
-      if (!this.$el.contains(event.target)) {
-        this.isShownOptions = false;
-      }
-    },
+  /**
+   * Value key in the item object of options.
+   */
+  valueKey: {
+    type: String,
+    default: "id",
   },
-};
-</script>
 
-<style lang="postcss" scoped>
-.mono-dropdown-link {
-  &-block {
-    @apply flex items-center;
-  }
+  /**
+   * The position of dropdown list on the y-axis.
+   * @values top, bottom
+   */
+  listYPosition: {
+    type: String,
+    default: UIService.get(defaultConfig, UDropdownLink).default.listYPosition,
+  },
 
-  &-trigger {
-    @apply flex items-center relative space-x-0.5;
-  }
+  /**
+   * The position of dropdown list on the x-axis.
+   * @values left, right
+   */
+  listXPosition: {
+    type: String,
+    default: UIService.get(defaultConfig, UDropdownLink).default.listXPosition,
+  },
 
-  &-list {
-    @apply max-h-60 overflow-y-auto overflow-x-hidden md:!w-auto;
-    @apply border-gray-300;
-    @apply top-3;
-  }
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
 
-  .icon {
-    @apply transition-all duration-300 mt-1;
-  }
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-  .icon-rotate {
-    .icon {
-      @apply rotate-180 transform;
-    }
-  }
+  /**
+   * 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);
+  },
+});
 
-  :deep(.dropdown-list-bottom) {
-    &-xs {
-      @apply bottom-4;
-    }
+const iconSize = computed(() => {
+  const sizes = {
+    xs: "2xs",
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+  };
 
-    &-sm {
-      @apply bottom-5;
-    }
+  return sizes[props.size];
+});
 
-    &-md {
-      @apply bottom-6;
-    }
+watch(() => props.modelValue, hideOptions);
 
-    &-lg {
-      @apply bottom-7;
-    }
+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();
   }
 }
-</style>
+</script>

package/ui.dropdown-list/Docs.mdx

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

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