vueless 0.0.2 → 0.0.3

package/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/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/ui.dropdown-button/index.stories.js

@@ -6,10 +6,11 @@ import URow from "vueless/ui.container-row";
 import UGroup from "vueless/ui.container-group";
 
 export default {
+  id: "2010",
   title: "Dropdowns / Dropdown Button",
   component: UDropdownButton,
   args: {
-    text: "Dropdown",
+    label: "Dropdown",
     options: [
       { label: "option 1", value: "1" },
       { label: "option 2", value: "2" },
@@ -60,7 +61,7 @@ const SlotTemplate = (args) => ({
   `,
 });
 
-const VariantsTemplate = (args, { argTypes }) => ({
+const VariantsTemplate = (args, { argTypes } = {}) => ({
   components: { UDropdownButton, URow },
   setup() {
     return {
@@ -74,14 +75,14 @@ const VariantsTemplate = (args, { argTypes }) => ({
         v-for="(variant, index) in variants"
         v-bind="args"
         :variant="variant"
-        :text="variant"
+        :label="variant"
         :key="index"
       />
     </URow>
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UDropdownButton, URow },
   setup() {
     return {
@@ -95,14 +96,14 @@ const SizesTemplate = (args, { argTypes }) => ({
         v-for="(size, index) in sizes"
         v-bind="args"
         :size="size"
-        :text="size"
+        :label="size"
         :key="index"
       />
     </URow>
   `,
 });
 
-const VariantColorsTemplate = (args, { argTypes }) => ({
+const VariantColorsTemplate = (args, { argTypes } = {}) => ({
   components: { UDropdownButton, URow, UGroup },
   setup() {
     return {
@@ -119,7 +120,7 @@ const VariantColorsTemplate = (args, { argTypes }) => ({
           v-bind="args"
           :color="color"
           :variant="variant"
-          :text="color"
+          :label="color"
           :key="idx"
         />
       </URow>
@@ -143,15 +144,15 @@ export const VariantColors = VariantColorsTemplate.bind({});
 VariantColors.args = { text: "" };
 
 export const WithoutDropdownIcon = VariantsTemplate.bind({});
-WithoutDropdownIcon.args = { dropdownIcon: false };
+WithoutDropdownIcon.args = { noIcon: true };
 
 export const dropdownListSlot = SlotTemplate.bind({});
 dropdownListSlot.args = {
   slotTemplate: `
     <template #default>
-      <UDropdownItem text="Some option" />
-      <UDropdownItem text="Some option 2" />
-      <UDropdownItem text="Some option 3" />
+      <UDropdownItem label="Some option" />
+      <UDropdownItem label="Some option 2" />
+      <UDropdownItem label="Some option 3" />
     </template>
   `,
 };

package/ui.dropdown-button/index.vue

@@ -1,331 +1,271 @@
 <template>
-  <t-dropdown
-    v-model:show="isShownOptions"
-    :classes="dropdownClasses"
-    toggle-on-focus
-    :data-cy="dataCy"
-    class="mono-dropdown-button"
-  >
-    <template #trigger>
-      <div class="relative" :class="iconRotateClass">
-        <UButton
-          ref="dropdown"
-          :text="text"
-          :size="size"
-          :variant="variant"
-          :filled="filled || isShownOptions"
-          :color="color"
-          :data-cy="`${dataCy}-button`"
-          @mousedown="onMousedown"
-        >
-          <template #right>
-            <UIcon
-              v-if="dropdownIcon"
-              name="keyboard_arrow_down"
-              color="white"
-              class="icon"
-              :size="iconSize"
-              :class="iconClasses"
-              :data-cy="`${dataCy}-caret`"
-            />
-          </template>
-        </UButton>
-      </div>
-    </template>
-
-    <div class="mono-dropdown-button-list">
-      <!-- @slot Use it to add dropdown list. -->
-      <slot>
-        <UDropdownList
-          v-model="selectValue"
-          :options="options"
-          :value-key="valueKey"
-          :item-label="itemLabel"
+  <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"
         />
-      </slot>
+      </template>
+    </UButton>
+
+    <div v-if="isShownOptions && hasSlotContent($slots['default'])" v-bind="listWrapperAttrs">
+      <!-- @slot Use it to add dropdown list. -->
+      <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 UIService, { getRandomId } from "vueless/service.ui";
 import UIcon from "vueless/ui.image-icon";
 import UButton from "vueless/ui.button";
 import UDropdownList from "vueless/ui.dropdown-list";
+import { BUTTON_VARIANT } from "vueless/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: "",
+  },
 
-export default {
-  name: "UDropdownButton",
+  /**
+   * Button label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
 
-  components: {
-    TDropdown,
-    UIcon,
-    UButton,
-    UDropdownList,
+  /**
+   * Button variant.
+   * @values primary, secondary, thirdary
+   */
+  variant: {
+    type: String,
+    default: UIService.get(defaultConfig, UDropdownButton).default.variant,
   },
 
-  provide() {
-    return {
-      hideDropdownOptions: () => {
-        this.hideOptions();
-      },
-    };
+  /**
+   * Fill the background for thirdary variant.
+   */
+  filled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDropdownButton).default.filled,
   },
 
-  props: {
-    /**
-     * Set button text.
-     */
-    text: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * The variant of the button.
-     * @values primary, secondary, thirdary
-     */
-    variant: {
-      type: String,
-      default: "primary",
-    },
-
-    /**
-     * Fill the background for thirdary variant.
-     */
-    filled: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * The color of the button.
-     * @values gray, red, orange, yellow, green, blue, violet, fuchsia
-     */
-    color: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * The size of the button.
-     * @values xs, sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * 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: "",
-    },
+  /**
+   * 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,
   },
 
-  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" : "";
-    },
-
-    iconClasses() {
-      const iconVariant = `${this.variant}-icon`;
-
-      return [iconVariant];
-    },
-
-    iconSize() {
-      const sizes = {
-        xs: "xs",
-        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: "md: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`,
-        enterFromClass: "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",
-      };
-    },
+  /**
+   * Button size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UDropdownButton).default.size,
   },
 
-  watch: {
-    modelValue: {
-      handler: "hideOptions",
-    },
+  /**
+   * Set button corners rounded.
+   */
+  pill: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDropdownButton).default.pill,
   },
 
-  created() {
-    window.addEventListener("click", (event) => this.closeOptions(event));
+  /**
+   * Set the same paddings for the button.
+   */
+  square: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDropdownButton).default.square,
   },
 
-  unmounted() {
-    window.removeEventListener("click", (event) => this.closeOptions(event));
+  /**
+   * Disable the link.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDropdownButton).default.disabled,
   },
 
-  methods: {
-    onMousedown() {
-      this.isShownOptions = !this.isShownOptions;
-    },
+  /**
+   * Hide dropdown icon.
+   */
+  noIcon: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDropdownButton).default.noIcon,
+  },
 
-    closeOptions(event) {
-      if (!this.$el.contains(event.target)) {
-        this.isShownOptions = false;
-      }
-    },
+  /**
+   * Options list.
+   */
+  options: {
+    type: Array,
+    default: () => [],
+  },
 
-    hideOptions() {
-      this.isShownOptions = false;
-    },
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey: {
+    type: String,
+    default: "label",
   },
-};
-</script>
 
-<style lang="postcss" scoped>
-.mono-dropdown-button {
-  .icon {
-    @apply transition-all duration-300;
-  }
+  /**
+   * Value key in the item object of options.
+   */
+  valueKey: {
+    type: String,
+    default: "id",
+  },
 
-  .icon-rotate {
-    .icon {
-      @apply rotate-180 transform;
-    }
-  }
+  /**
+   * The position of dropdown list on the y-axis.
+   * @values top, bottom
+   */
+  listYPosition: {
+    type: String,
+    default: UIService.get(defaultConfig, UDropdownButton).default.listYPosition,
+  },
 
-  .mono-dropdown-button-list {
-    @apply max-h-60 w-auto overflow-y-auto overflow-x-hidden;
-    @apply border-gray-300;
-    @apply top-3;
-  }
+  /**
+   * The position of dropdown list on the x-axis.
+   * @values left, right
+   */
+  listXPosition: {
+    type: String,
+    default: UIService.get(defaultConfig, UDropdownButton).default.listXPosition,
+  },
 
-  :deep(.dropdown-list-bottom) {
-    &-xs {
-      @apply bottom-[1.625rem];
-    }
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
 
-    &-sm {
-      @apply bottom-10;
-    }
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-    &-md {
-      @apply bottom-12;
-    }
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
 
-    &-lg {
-      @apply bottom-[3.75rem];
-    }
-  }
-}
+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];
+});
 
-.primary-icon:deep(g [fill]) {
-  @apply fill-current text-white;
+watch(() => props.modelValue, hideOptions);
+
+onMounted(() => window.addEventListener("click", onClickOutside));
+onUnmounted(() => window.removeEventListener("click", onClickOutside));
+
+function onClickButton() {
+  isShownOptions.value = !isShownOptions.value;
 }
 
-.secondary-icon:deep(g [fill]) {
-  @apply fill-current text-gray-900;
+function hideOptions() {
+  isShownOptions.value = false;
 }
 
-.thirdary-icon:deep(g [fill]) {
-  @apply fill-current text-gray-900;
+function onClickOutside(event) {
+  if (!document.getElementById(props.id)?.contains(event.target)) {
+    hideOptions();
+  }
 }
-</style>
+</script>