vueless 0.0.1 → 0.0.3

package/ui.dropdown-tag/index.vue

@@ -1,285 +0,0 @@
-<template>
-  <t-dropdown
-    v-model:show="isShownOptions"
-    :classes="dropdownClasses"
-    toggle-on-focus
-    :data-cy="dataCy"
-    class="mono-dropdown-tag"
-  >
-    <template #trigger>
-      <div class="relative" :class="iconRotateClass">
-        <UTag class="tag" :text="text" :color="color" @mousedown="onMousedown">
-          <template #right>
-            <UIcon
-              v-if="dropdownIcon"
-              name="keyboard_arrow_down"
-              class="icon"
-              :color="color"
-              :size="iconSize"
-              :data-cy="`${dataCy}-caret`"
-            />
-          </template>
-        </UTag>
-      </div>
-    </template>
-
-    <div class="mono-dropdown-tag-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 UTag from "vueless/ui.text-tag";
-import UDropdownList from "vueless/ui.dropdown-list";
-
-export default {
-  name: "UDropdownTag",
-
-  components: {
-    TDropdown,
-    UIcon,
-    UTag,
-    UDropdownList,
-  },
-
-  provide() {
-    return {
-      hideDropdownOptions: () => {
-        this.hideOptions();
-      },
-    };
-  },
-
-  props: {
-    /**
-     * Set tag text.
-     */
-    text: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * The color of the tag.
-     * @values gray, red, orange, yellow, green, blue, violet, fuchsia
-     */
-    color: {
-      type: String,
-      default: "blue",
-    },
-
-    /**
-     * The size of the tag.
-     * @values 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" : "";
-    },
-
-    iconSize() {
-      const sizes = {
-        sm: "2xs",
-        md: "xs",
-        lg: "sm",
-      };
-
-      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-wrapper-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-tag {
-  .tag {
-    @apply cursor-pointer;
-  }
-
-  .icon {
-    @apply transition-all duration-300;
-  }
-
-  .icon-rotate {
-    .icon {
-      @apply rotate-180 transform;
-    }
-  }
-
-  &-list {
-    @apply max-h-60 overflow-y-auto overflow-x-hidden md:!w-auto;
-    @apply border-gray-300;
-    @apply top-3;
-  }
-
-  :deep(.dropdown-list-bottom) {
-    &-sm {
-      @apply bottom-[1.625rem];
-    }
-
-    &-md {
-      @apply bottom-7;
-    }
-
-    &-lg {
-      @apply bottom-8;
-    }
-  }
-}
-</style>

package/ui.form-date-picker-range/components/VariantButton.vue

@@ -1,136 +0,0 @@
-<template>
-  <div class="date-button" :data-cy="dataCy">
-    <t-button
-      class="arrow arrow-left"
-      :data-cy="`${dataCy}-prev`"
-      @click="onClickShiftRange('prev')"
-    >
-      <UIcon class="icon" size="sm" name="arrow_back_ios_new" />
-    </t-button>
-
-    <t-button
-      :id="id"
-      class="date-current"
-      :text="title"
-      :data-cy="`${dataCy}-title`"
-      @blur="onBlur"
-      @click="onClickRangeSet"
-    />
-
-    <t-button
-      class="arrow arrow-right"
-      :data-cy="`${dataCy}-next`"
-      @click="onClickShiftRange('next')"
-    >
-      <UIcon class="icon" size="sm" name="arrow_forward_ios" />
-    </t-button>
-  </div>
-</template>
-
-<script>
-import UIcon from "vueless/ui.image-icon";
-import TButton from "vueless/library.vue-tailwind-3/t-button";
-
-export default {
-  components: {
-    UIcon,
-    TButton,
-  },
-
-  props: {
-    title: {
-      type: String,
-      default: "",
-    },
-
-    id: {
-      type: String,
-      default: "",
-    },
-
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["clickShiftRange", "clickRangeSet", "blur"],
-
-  methods: {
-    onClickShiftRange(action) {
-      this.$emit("clickShiftRange", action);
-    },
-
-    onClickRangeSet() {
-      this.$emit("clickRangeSet");
-    },
-
-    onBlur() {
-      this.$emit("blur");
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.date {
-  &-button {
-    @apply flex rounded-lg max-md:justify-between;
-    @apply h-full;
-
-    &:active {
-      @apply bg-opacity-5;
-    }
-
-    &:focus-within {
-      @apply ring-4 ring-gray-600 ring-opacity-15;
-    }
-  }
-
-  &-current {
-    @apply rounded-none shadow-none;
-    @apply text-base font-medium text-gray-900;
-    @apply border-0 bg-gray-900 bg-opacity-5;
-    @apply shrink-0 flex-grow;
-
-    &:hover {
-      @apply bg-opacity-10 bg-gray-600/15 ring-gray-600 ring-opacity-15;
-    }
-
-    &:focus {
-      @apply border-0 ring-0 bg-gray-600/15 ring-gray-600 ring-opacity-15;
-    }
-  }
-}
-
-.arrow {
-  @apply flex items-center;
-  @apply bg-gray-900 bg-opacity-5 shadow-none;
-  @apply border-0;
-  @apply py-[0.71875rem];
-
-  &:hover {
-    @apply bg-opacity-10 bg-gray-600/15 ring-gray-600 ring-opacity-15;
-  }
-
-  &:focus {
-    @apply border-0 ring-0 bg-gray-600/15 ring-gray-600 ring-opacity-15;
-  }
-
-  &-left {
-    @apply rounded-l-lg rounded-r-none;
-  }
-
-  &-right {
-    @apply rounded-l-none rounded-r-lg;
-  }
-}
-
-.icon {
-  @apply cursor-pointer;
-
-  &:deep(g [fill]) {
-    @apply fill-current text-gray-900;
-  }
-}
-</style>

package/ui.form-date-picker-range/components/VariantInput.vue

@@ -1,101 +0,0 @@
-<template>
-  <div
-    :id="id"
-    class="date-input"
-    tabindex="1"
-    :data-cy="dataCy"
-    @click="onClickRangeSet"
-    @blur="onBlur"
-  >
-    <div>
-      <div class="date-input-label">{{ label }}</div>
-
-      <div class="date-input-value">{{ modelValue }}</div>
-
-      <div v-if="!modelValue" class="date-input-placeholder">{{ placeholder }}</div>
-    </div>
-
-    <div @click.stop>
-      <slot name="right" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    label: {
-      type: String,
-      default: "",
-    },
-
-    modelValue: {
-      type: String,
-      default: "",
-    },
-
-    placeholder: {
-      type: String,
-      default: "",
-    },
-
-    id: {
-      type: String,
-      default: "",
-    },
-
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["clickRangeSet", "blur"],
-
-  methods: {
-    onClickRangeSet() {
-      this.$emit("clickRangeSet");
-    },
-
-    onBlur() {
-      this.$emit("blur");
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.date {
-  &-input {
-    @apply flex flex-col max-md:gap-3 md:flex-row md:items-center md:justify-between;
-    @apply relative cursor-text;
-    @apply rounded-lg border border-gray-300 bg-white;
-    @apply px-4 py-2.5;
-
-    &:hover {
-      @apply border-gray-400;
-    }
-
-    &:focus {
-      @apply border-gray-500 ring-4 ring-gray-600 ring-opacity-15;
-    }
-
-    &:focus-within {
-      @apply outline-0;
-    }
-
-    &-value {
-      @apply text-base font-normal text-gray-900;
-    }
-
-    &-placeholder {
-      @apply text-base font-normal text-gray-400;
-    }
-
-    &-label {
-      @apply pb-0.5;
-      @apply text-sm font-normal text-gray-500;
-    }
-  }
-}
-</style>

package/ui.form-date-picker-range/index.stories.js

@@ -1,93 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UDatePickerRange from "vueless/ui.form-date-picker-range";
-import URow from "vueless/ui.container-row";
-
-export default {
-  title: "Form Inputs & Controls / Date Picker Range",
-  component: UDatePickerRange,
-  args: {
-    value: {
-      from: 1651813634,
-      to: 1654492034,
-    },
-  },
-  argTypes: {
-    ...getArgTypes(UDatePickerRange.name),
-  },
-  parameters: {
-    docs: {
-      story: {
-        height: "580px",
-      },
-    },
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UDatePickerRange },
-  setup() {
-    const slots = getSlotNames(UDatePickerRange.name);
-
-    return { args, slots };
-  },
-  template: `
-    <UDatePickerRange v-bind="args" v-model="args.value">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
-    </UDatePickerRange>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UDatePickerRange },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UDatePickerRange v-bind="args" v-model="args.value">
-      ${args.slotTemplate}
-    </UDatePickerRange>
-  `,
-});
-
-const VariantsTemplate = (args, { argTypes }) => ({
-  components: { UDatePickerRange, URow },
-  setup() {
-    return {
-      args,
-      variants: argTypes.variant.options,
-    };
-  },
-  template: `
-    <URow>
-      <UDatePickerRange
-        v-for="(variant, index) in variants"
-        :variant="variant"
-        v-bind="args"
-        v-model="args.value"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const variants = VariantsTemplate.bind({});
-variants.args = {};
-
-export const label = DefaultTemplate.bind({});
-label.args = { variant: "input", label: "some label" };
-
-export const slotRight = SlotTemplate.bind({});
-slotRight.args = {
-  variant: "input",
-  slotTemplate: `
-    <template #right>
-      🤘
-    </template>
-  `,
-};