vueless 0.0.2 → 0.0.4

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

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

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

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

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

@@ -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 {
-  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>
-  `,
-};