vueless 0.0.2 → 0.0.4

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-checkbox/index.stories.js

@@ -1,98 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UCheckbox from "vueless/ui.form-checkbox";
-import UIcon from "vueless/ui.image-icon";
-import URow from "vueless/ui.container-row";
-
-export default {
-  title: "Form Inputs & Controls / Checkbox",
-  component: UCheckbox,
-  args: {
-    label: "Label",
-    modelValue: "",
-  },
-  argTypes: {
-    ...getArgTypes(UCheckbox.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UCheckbox },
-  setup() {
-    const slots = getSlotNames(UCheckbox.name);
-
-    return { args, slots };
-  },
-  template: `
-    <UCheckbox 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>
-    </UCheckbox>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes }) => ({
-  components: { UCheckbox, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UCheckbox
-        v-for="(size, index) in sizes"
-        :size="size"
-        :label="size"
-        :key="index"
-        v-bind="args"
-      />
-    </URow>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UCheckbox, UIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UCheckbox v-bind="args">
-      ${args.slotTemplate}
-    </UCheckbox>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};
-
-export const Disabled = DefaultTemplate.bind({});
-Disabled.args = { disabled: true };
-
-export const Description = DefaultTemplate.bind({});
-Description.args = { description: "Some description" };
-
-export const slotDescription = SlotTemplate.bind({});
-slotDescription.args = {
-  slotTemplate: `
-    <template #description>
-    <div class="flex">
-      <div>
-        Hello
-      </div>
-
-      <UIcon
-        name="star"
-        color="black"
-        size="md"
-      />
-    </div>
-
-    </template>
-  `,
-};

package/ui.form-checkbox/index.vue

@@ -1,301 +0,0 @@
-<template>
-  <label ref="inputCheckbox" class="mono-checkbox-wrapper">
-    <t-checkbox
-      v-model="selected"
-      class="mono-checkbox"
-      :class="checkboxSizeClass"
-      :disabled="disabled"
-      :value="values.select"
-      :unchecked-value="values.unselect"
-      :name="checkboxName"
-      :data-cy="dataCy"
-    />
-
-    <UIcon
-      v-if="isShownPartialIcon"
-      name="remove"
-      :size="size"
-      class="mono-checkbox-partial-icon"
-      color="white"
-    />
-
-    <div>
-      <span v-if="label" class="label">
-        {{ label }}
-      </span>
-
-      <!-- @slot Use it to add some description. -->
-      <div v-if="isShownDescription" class="mono-checkbox-description">
-        <slot name="description" :description="description">
-          <span>{{ description }}</span>
-        </slot>
-      </div>
-    </div>
-  </label>
-</template>
-
-<script>
-import TCheckbox from "vueless/library.vue-tailwind-3/t-checkbox";
-import UIcon from "vueless/ui.image-icon";
-
-export default {
-  name: "UCheckbox",
-
-  components: { UIcon, TCheckbox },
-
-  inject: {
-    setCheckboxGroupSelectedItems: { default: null },
-    getCheckboxGroupSelectedItems: { default: null },
-    getCheckboxGroupName: { default: null },
-  },
-
-  props: {
-    /**
-     * Set checkbox value.
-     */
-    modelValue: {
-      type: [Boolean, String, Number],
-      default: false,
-    },
-
-    /**
-     * Set own values for checkbox states (selected | unselected).
-     */
-    values: {
-      type: Object,
-      default: () => ({
-        select: true,
-        unselect: false,
-      }),
-    },
-
-    /**
-     * Set checkbox label.
-     */
-    label: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set checkbox size.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Set description.
-     */
-    description: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Make checkbox inactive.
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Make checkbox partially selected (change the selected tick to a minus).
-     */
-    partial: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Set the name for checkbox.
-     */
-    name: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["update:modelValue", "input"],
-
-  data() {
-    return {
-      checkboxName: "",
-    };
-  },
-
-  computed: {
-    selected: {
-      get() {
-        const { select, unselect } = this.values;
-
-        return this.modelValue === select ? select : unselect;
-      },
-      set(value) {
-        if (this.isCheckboxInGroup) {
-          const selectedItems = this.getCheckboxGroupSelectedItems();
-
-          if (!value) {
-            const checkboxIndex = selectedItems.findIndex((item) => item === this.values.select);
-
-            selectedItems.splice(checkboxIndex, 1);
-          } else {
-            selectedItems.push(value);
-          }
-
-          this.setCheckboxGroupSelectedItems(selectedItems);
-        } else {
-          this.$emit("update:modelValue", value);
-          this.$emit("input", value);
-        }
-      },
-    },
-
-    isCheckboxInGroup() {
-      return !!this.getCheckboxGroupName;
-    },
-
-    isShownDescription() {
-      return this.description || !!this.$slots["description"];
-    },
-
-    checkboxSizeClass() {
-      return {
-        "size-sm": this.size === "sm",
-        "size-md": this.size === "md",
-        "size-lg": this.size === "lg",
-        "mono-checkbox-with-label": !!this.label,
-      };
-    },
-
-    isShownPartialIcon() {
-      const { select } = this.values;
-
-      return this.partial && this.selected === select;
-    },
-  },
-
-  mounted() {
-    this.checkboxName = this.isCheckboxInGroup ? this.getCheckboxGroupName() : this.name;
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-checkbox-wrapper {
-  @apply flex max-w-max items-center;
-  @apply relative;
-
-  .mono-checkbox {
-    @apply border border-solid border-gray-300;
-
-    &-with-label {
-      @apply mr-4;
-    }
-
-    &:disabled {
-      @apply border-gray-100 bg-gray-100;
-    }
-
-    &:hover {
-      @apply border-gray-400;
-    }
-
-    &:focus {
-      @apply border-gray-500 ring-4 ring-gray-200;
-    }
-
-    &:active {
-      @apply border-gray-900 bg-gray-900;
-    }
-
-    &:checked {
-      @apply border-gray-900 bg-gray-900;
-    }
-
-    &-partial-icon {
-      @apply absolute rounded bg-gray-900;
-    }
-
-    &-description {
-      @apply text-xs font-normal text-gray-500/[85];
-      @apply pt-1;
-    }
-  }
-
-  .label {
-    @apply text-base font-normal text-gray-900;
-  }
-}
-
-.size {
-  &-sm {
-    @apply h-5 w-5;
-
-    & + .label {
-      @apply text-sm;
-    }
-  }
-
-  &-md {
-    @apply h-6 w-6;
-  }
-
-  &-lg {
-    @apply h-7 w-7;
-
-    & + .label {
-      @apply text-lg;
-    }
-  }
-}
-</style>
-
-<!-- Brand theme -->
-<style scoped lang="postcss">
-.brand-theme {
-  &.mono-checkbox-wrapper {
-    .mono-checkbox {
-      @apply border border-solid border-gray-300;
-
-      &:disabled {
-        @apply bg-brand bg-opacity-10;
-        @apply border-brand border-opacity-10;
-      }
-
-      &:hover {
-        @apply border-brand border-opacity-40;
-      }
-
-      &:focus {
-        @apply border-brand border-opacity-50;
-        @apply ring-4 ring-brand ring-opacity-15;
-      }
-
-      &:active {
-        @apply border-brand bg-brand;
-      }
-
-      &:checked {
-        @apply border-brand bg-brand;
-      }
-    }
-
-    .label {
-      @apply text-sm font-normal text-gray-900;
-      @apply ml-4;
-    }
-  }
-}
-</style>

package/ui.form-checkbox-group/index.stories.js

@@ -1,39 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UCheckboxGroup from "vueless/ui.form-checkbox-group";
-
-export default {
-  title: "Form Inputs & Controls / Checkbox Group",
-  component: UCheckboxGroup,
-  args: {
-    label: "Label",
-    options: [
-      { label: "checkbox 1", description: "some description 1", value: "1" },
-      { label: "checkbox 2", description: "some description 2", value: "2" },
-      { label: "checkbox 3", description: "some description 3", value: "3" },
-    ],
-    value: ["1"],
-  },
-  argTypes: {
-    ...getArgTypes(UCheckboxGroup.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UCheckboxGroup },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UCheckboxGroup v-bind="args"/>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const disabled = DefaultTemplate.bind({});
-disabled.args = { disabled: true };
-
-export const error = DefaultTemplate.bind({});
-error.args = { error: "some error" };