vueless 0.0.1

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

@@ -0,0 +1,157 @@
+import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+
+import UDropdownButton from "vueless/ui.dropdown-button";
+import UDropdownItem from "vueless/ui.dropdown-item";
+import URow from "vueless/ui.container-row";
+import UGroup from "vueless/ui.container-group";
+
+export default {
+  title: "Dropdowns / Dropdown Button",
+  component: UDropdownButton,
+  args: {
+    text: "Dropdown",
+    options: [
+      { label: "option 1", value: "1" },
+      { label: "option 2", value: "2" },
+      { label: "option 3", value: "3" },
+    ],
+  },
+  argTypes: {
+    ...getArgTypes(UDropdownButton.name),
+  },
+  parameters: {
+    docs: {
+      story: {
+        height: "200px",
+      },
+    },
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UDropdownButton },
+  setup() {
+    const slots = getSlotNames(UDropdownButton.name);
+
+    return { args, slots };
+  },
+  template: `
+    <UDropdownButton
+      v-bind="args"
+    >
+      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
+        <template v-if="args[slot]">{{ args[slot] }}</template>
+      </template>
+    </UDropdownButton>
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { UDropdownButton, UDropdownItem },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UDropdownButton
+      v-bind="args"
+    >
+      ${args.slotTemplate}
+    </UDropdownButton>
+  `,
+});
+
+const VariantsTemplate = (args, { argTypes }) => ({
+  components: { UDropdownButton, URow },
+  setup() {
+    return {
+      args,
+      variants: argTypes.variant.options,
+    };
+  },
+  template: `
+    <URow>
+      <UDropdownButton
+        v-for="(variant, index) in variants"
+        v-bind="args"
+        :variant="variant"
+        :text="variant"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes }) => ({
+  components: { UDropdownButton, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <UDropdownButton
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        :text="size"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+const VariantColorsTemplate = (args, { argTypes }) => ({
+  components: { UDropdownButton, URow, UGroup },
+  setup() {
+    return {
+      args,
+      variants: argTypes.variant.options,
+      colors: argTypes.color.options,
+    };
+  },
+  template: `
+    <UGroup>
+      <URow v-for="(variant, index) in variants" :key="index">
+        <UDropdownButton
+          v-for="(color, idx) in colors"
+          v-bind="args"
+          :color="color"
+          :variant="variant"
+          :text="color"
+          :key="idx"
+        />
+      </URow>
+    </UGroup>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Filled = DefaultTemplate.bind({});
+Filled.args = { variant: "thirdary", filled: true };
+
+export const Variants = VariantsTemplate.bind({});
+Variants.args = { text: "" };
+
+export const Sizes = SizesTemplate.bind({});
+Sizes.args = { text: "" };
+
+export const VariantColors = VariantColorsTemplate.bind({});
+VariantColors.args = { text: "" };
+
+export const WithoutDropdownIcon = VariantsTemplate.bind({});
+WithoutDropdownIcon.args = { dropdownIcon: false };
+
+export const dropdownListSlot = SlotTemplate.bind({});
+dropdownListSlot.args = {
+  slotTemplate: `
+    <template #default>
+      <UDropdownItem text="Some option" />
+      <UDropdownItem text="Some option 2" />
+      <UDropdownItem text="Some option 3" />
+    </template>
+  `,
+};

package/ui.dropdown-button/index.vue

@@ -0,0 +1,331 @@
+<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"
+        />
+      </slot>
+    </div>
+  </t-dropdown>
+</template>
+
+<script>
+import TDropdown from "vueless/library.vue-tailwind-3/t-dropdown";
+import UIcon from "vueless/ui.image-icon";
+import UButton from "vueless/ui.button";
+import UDropdownList from "vueless/ui.dropdown-list";
+
+export default {
+  name: "UDropdownButton",
+
+  components: {
+    TDropdown,
+    UIcon,
+    UButton,
+    UDropdownList,
+  },
+
+  provide() {
+    return {
+      hideDropdownOptions: () => {
+        this.hideOptions();
+      },
+    };
+  },
+
+  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: "",
+    },
+  },
+
+  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",
+      };
+    },
+  },
+
+  watch: {
+    modelValue: {
+      handler: "hideOptions",
+    },
+  },
+
+  created() {
+    window.addEventListener("click", (event) => this.closeOptions(event));
+  },
+
+  unmounted() {
+    window.removeEventListener("click", (event) => this.closeOptions(event));
+  },
+
+  methods: {
+    onMousedown() {
+      this.isShownOptions = !this.isShownOptions;
+    },
+
+    closeOptions(event) {
+      if (!this.$el.contains(event.target)) {
+        this.isShownOptions = false;
+      }
+    },
+
+    hideOptions() {
+      this.isShownOptions = false;
+    },
+  },
+};
+</script>
+
+<style lang="postcss" scoped>
+.mono-dropdown-button {
+  .icon {
+    @apply transition-all duration-300;
+  }
+
+  .icon-rotate {
+    .icon {
+      @apply rotate-180 transform;
+    }
+  }
+
+  .mono-dropdown-button-list {
+    @apply max-h-60 w-auto overflow-y-auto overflow-x-hidden;
+    @apply border-gray-300;
+    @apply top-3;
+  }
+
+  :deep(.dropdown-list-bottom) {
+    &-xs {
+      @apply bottom-[1.625rem];
+    }
+
+    &-sm {
+      @apply bottom-10;
+    }
+
+    &-md {
+      @apply bottom-12;
+    }
+
+    &-lg {
+      @apply bottom-[3.75rem];
+    }
+  }
+}
+
+.primary-icon:deep(g [fill]) {
+  @apply fill-current text-white;
+}
+
+.secondary-icon:deep(g [fill]) {
+  @apply fill-current text-gray-900;
+}
+
+.thirdary-icon:deep(g [fill]) {
+  @apply fill-current text-gray-900;
+}
+</style>

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

@@ -0,0 +1,29 @@
+import { getArgTypes } from "vueless/service.storybook";
+
+import UDropdownItem from "vueless/ui.dropdown-item";
+
+export default {
+  title: "Dropdowns / Dropdown Item",
+  component: UDropdownItem,
+  args: {
+    text: "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/ui.dropdown-item/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="mono-dropdown-item" :data-cy="dataCy" @click="onClick">
+    {{ text }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: "UDropdownItem",
+
+  inject: ["hideDropdownOptions"],
+
+  props: {
+    /**
+     * Set dropdown item text.
+     */
+    text: {
+      type: String,
+      required: true,
+    },
+
+    /**
+     * Sets data-cy attribute for automated testing.
+     */
+    dataCy: {
+      type: String,
+      default: "",
+    },
+  },
+
+  emits: ["click"],
+
+  methods: {
+    onClick() {
+      // invokes click event on current item
+      this.$emit("click");
+
+      if (this.hideDropdownOptions) this.hideDropdownOptions();
+    },
+  },
+};
+</script>
+
+<style lang="postcss" scoped>
+.mono-dropdown-item {
+  @apply whitespace-nowrap text-left text-base font-normal text-gray-900;
+  @apply p-3;
+  @apply cursor-pointer;
+
+  &:first-child {
+    @apply rounded-t-lg;
+  }
+
+  &:last-child {
+    @apply rounded-b-lg;
+  }
+
+  &:hover {
+    @apply bg-gray-100;
+  }
+
+  &:active {
+    @apply bg-gray-200 font-medium;
+  }
+
+  &:disabled {
+    @apply bg-gray-500;
+  }
+}
+</style>

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

@@ -0,0 +1,127 @@
+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 {
+  title: "Dropdowns / Dropdown Link",
+  component: UDropdownLink,
+  args: {
+    text: "Dropdown",
+    options: [
+      { label: "option 1", value: "1" },
+      { label: "option 2", value: "2" },
+      { label: "option 3", value: "3" },
+    ],
+    noFocusRing: true,
+  },
+  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"
+        :size="size"
+        v-bind="args"
+        :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"
+          :color="color"
+          :text="color"
+          v-bind="args"
+          :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 = { dropdownIcon: false };
+
+export const dropdownListSlot = SlotTemplate.bind({});
+dropdownListSlot.args = {
+  slotTemplate: `
+    <template #default>
+      <UDropdownItem text="Some option" />
+      <UDropdownItem text="Some option 2" />
+      <UDropdownItem text="Some option 3" />
+    </template>
+  `,
+};