vueless 0.0.2 → 0.0.4

package/ui.form-input-rating/index.vue

@@ -1,242 +0,0 @@
-<template>
-  <div class="mono-rating" :class="sizeClass" :data-cy="dataCy">
-    <h3 v-if="label" class="label">{{ label }}</h3>
-
-    <div class="star-rating-wrapper">
-      <div v-if="!noCounter" class="counter">
-        <!-- @slot Use it to add counter. -->
-        <slot name="counter">
-          {{ ratingCounter }}
-        </slot>
-      </div>
-
-      <div class="icons">
-        <UIcon
-          v-for="star in starsNumber"
-          :key="star"
-          :data-cy="`${dataCy}-rating-star-${star}`"
-          :name="star <= ratingCounter ? 'star-fill' : 'star'"
-          :size="iconSize"
-          class="mono-rating-star"
-          :class="getIconClasses(star)"
-          color="yellow"
-          variant="light"
-          @mouseover="onMouseHover(star)"
-          @mouseleave="onMouseHover()"
-          @click="onClickStar(star)"
-        />
-
-        <p v-if="error" class="error-message" :data-cy="`${dataCy}-error-message`">
-          {{ error }}
-        </p>
-      </div>
-
-      <!-- @slot Use it to add something right. -->
-      <slot name="right" />
-    </div>
-  </div>
-</template>
-
-<script>
-import UIcon from "vueless/ui.image-icon";
-
-export default {
-  name: "UInputRating",
-
-  components: {
-    UIcon,
-  },
-
-  props: {
-    /**
-     * Set input rating  label.
-     */
-    label: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set input rating value.
-     */
-    modelValue: {
-      type: Number,
-      default: 0,
-    },
-
-    /**
-     * Set the number of stars.
-     */
-    starsNumber: {
-      type: Number,
-      default: 5,
-    },
-
-    /**
-     * Set component size.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Make stars selectable.
-     */
-    selectable: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Set error message.
-     */
-    error: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Hide / show counter.
-     */
-    noCounter: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["update:modelValue"],
-
-  data: () => ({
-    hovered: null,
-  }),
-
-  computed: {
-    iconSize() {
-      const sizes = {
-        sm: "xs",
-        md: "sm",
-        lg: "md",
-      };
-
-      return sizes[this.size];
-    },
-
-    sizeClass() {
-      return `size-${this.size}`;
-    },
-
-    ratingCounter() {
-      return this.hovered || this.modelValue;
-    },
-  },
-
-  methods: {
-    onClickStar(newValue) {
-      if (this.selectable) {
-        const selected = newValue !== this.modelValue ? newValue : 0;
-
-        this.hovered = null;
-
-        this.$emit("update:modelValue", selected);
-      }
-    },
-
-    onMouseHover(overStar) {
-      if (this.selectable) this.hovered = overStar;
-    },
-
-    getIconClasses(star) {
-      const roundedValue = Math.ceil(this.ratingCounter);
-      const isSelected = star <= roundedValue;
-
-      return {
-        "elected-star": isSelected,
-        "cursor-pointer": this.selectable,
-      };
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-rating {
-  @apply flex flex-col;
-
-  .label {
-    @apply text-sm font-normal text-gray-500;
-    @apply mb-0.5;
-  }
-
-  &-wrapper {
-    @apply flex items-center space-x-2;
-
-    .counter {
-      @apply leading-none;
-    }
-
-    .icons {
-      @apply leading-none;
-
-      .star:deep(:not(.selected-star) [stroke]) {
-        @apply stroke-current text-yellow-400;
-      }
-
-      .error-message {
-        @apply font-normal text-red-500;
-        @apply pl-1.5;
-      }
-    }
-  }
-}
-
-.size {
-  &-sm {
-    .label {
-      @apply text-xs;
-    }
-
-    .counter {
-      @apply text-2xs;
-    }
-
-    .error-message {
-      @apply text-2xs;
-    }
-  }
-
-  &-md {
-    .counter {
-      @apply text-xs;
-    }
-
-    .error-message {
-      @apply text-xs;
-    }
-  }
-
-  &-lg {
-    .label {
-      @apply text-base;
-      @apply mb-1;
-    }
-
-    .counter {
-      @apply text-sm;
-    }
-
-    .error-message {
-      @apply text-sm;
-    }
-  }
-}
-</style>

package/ui.form-input-search/index.stories.js

@@ -1,86 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UInputSearch from "vueless/ui.form-input-search";
-import UButton from "vueless/ui.button";
-import URow from "vueless/ui.container-row";
-
-export default {
-  title: "Form Inputs & Controls / Input Search",
-  component: UInputSearch,
-  argTypes: {
-    ...getArgTypes(UInputSearch.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UInputSearch },
-  setup() {
-    const slots = getSlotNames(UInputSearch.name);
-
-    return {
-      args,
-      slots,
-    };
-  },
-  template: `
-    <UInputSearch v-bind="args">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
-    </UInputSearch>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UInputSearch, UButton },
-  setup() {
-    return {
-      args,
-    };
-  },
-  template: `
-    <UInputSearch v-bind="args">
-    ${args.slotTemplate}
-    </UInputSearch>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes }) => ({
-  components: { UInputSearch, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UInputSearch
-        v-bind="args"
-        v-for="(size, index) in sizes"
-        :size="size"
-        :key="index"
-      >
-      </UInputSearch>
-    </URow>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
-
-export const slotLeft = SlotTemplate.bind({});
-slotLeft.args = {
-  slotTemplate: `
-    <template #left>
-      <UButton
-        text="filter"
-        variant="thirdary"
-        filled
-      />
-    </template>
-  `,
-};

package/ui.form-input-search/index.vue

@@ -1,210 +0,0 @@
-<template>
-  <div class="mono-search-wrapper" :class="focusClass" @keyup.enter="onClickSearch">
-    <!-- @slot Use it to add something before text. -->
-    <slot name="left" />
-
-    <t-input
-      :id="id"
-      ref="searchInput"
-      v-model="search"
-      class="mono-search-input"
-      type="search"
-      inputmode="search"
-      :class="inputSizeClass"
-      :data-cy="dataCy"
-      @focus="onFocus"
-      @blur="onBlur"
-    />
-
-    <UIcon
-      name="close"
-      class="mono-search-icon-close"
-      color="gray"
-      interactive
-      :data-cy="`${dataCy}-close`"
-      :size="iconSize"
-      @click="onClickClear"
-    />
-
-    <UIcon
-      name="search"
-      class="mono-search-icon"
-      interactive
-      :size="iconSize"
-      :data-cy="`${dataCy}-search`"
-      @click="onClickSearch"
-    />
-  </div>
-</template>
-
-<script>
-import UIcon from "vueless/ui.image-icon";
-import TInput from "vueless/library.vue-tailwind-3/t-input";
-import { getRandomId } from "vueless/service.ui";
-
-export default {
-  name: "UInputSearch",
-
-  components: {
-    UIcon,
-    TInput,
-  },
-
-  props: {
-    /**
-     * Set component value.
-     */
-    modelValue: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set input size.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Generates unique element id.
-     * @ignore
-     */
-    id: {
-      type: String,
-      default: () => getRandomId(),
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["update:modelValue", "clear", "search"],
-
-  data() {
-    return {
-      focus: false,
-    };
-  },
-
-  computed: {
-    search: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
-
-    focusClass() {
-      return this.focus ? "focus" : "";
-    },
-
-    inputSizeClass() {
-      return {
-        "size-sm": this.size === "sm",
-        "size-md": this.size === "md",
-        "size-lg": this.size === "lg",
-      };
-    },
-
-    iconSize() {
-      const sizes = {
-        sm: "xs",
-        md: "sm",
-        lg: "md",
-      };
-
-      return sizes[this.size];
-    },
-  },
-
-  methods: {
-    onClickClear() {
-      this.search = "";
-      this.$emit("clear");
-    },
-
-    onClickSearch() {
-      this.focus = true;
-      if (!this.search) return;
-      this.$emit("search", this.search);
-    },
-
-    onFocus() {
-      this.focus = true;
-    },
-
-    onBlur() {
-      this.focus = false;
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-search {
-  &-wrapper {
-    @apply relative;
-    @apply flex items-center justify-between;
-    @apply w-full rounded-lg;
-    @apply bg-gray-900 bg-opacity-5;
-    @apply pr-3;
-  }
-
-  &-input {
-    @apply h-full;
-    @apply border-0 bg-transparent shadow-none focus:ring-0;
-    @apply font-normal text-gray-900;
-
-    &::-webkit-search-decoration,
-    &::-webkit-search-cancel-button,
-    &::-webkit-search-results-button,
-    &::-webkit-search-results-decoration {
-      -webkit-appearance: none;
-    }
-  }
-
-  &-icon {
-    @apply flex h-full items-center;
-    @apply ml-2;
-
-    &:deep(g [fill]) {
-      @apply fill-current text-gray-900 opacity-100;
-    }
-
-    &-close {
-      @apply flex h-full items-center;
-      @apply absolute right-8 top-0;
-    }
-  }
-}
-
-.focus {
-  @apply ring-4 ring-gray-900 ring-opacity-15;
-}
-
-.size {
-  &-sm {
-    @apply mb-0.5;
-    @apply text-sm;
-  }
-
-  &-md {
-    @apply mb-1 mt-0.5;
-  }
-
-  &-lg {
-    @apply mb-2 mt-1.5;
-    @apply text-lg;
-  }
-}
-</style>

package/ui.form-radio/index.stories.js

@@ -1,69 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import URadio from "vueless/ui.form-radio";
-
-export default {
-  title: "Form Inputs & Controls / Radio",
-  component: URadio,
-  args: {
-    name: "radio1",
-    label: "radio",
-    description: "description",
-    value: "1",
-  },
-  argTypes: {
-    ...getArgTypes(URadio.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { URadio },
-  setup() {
-    const slots = getSlotNames(URadio.name);
-
-    return { args, slots };
-  },
-  template: `
-    <URadio v-bind="args" >
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
-    </URadio>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { URadio },
-  setup() {
-    return { args };
-  },
-  template: `
-    <URadio v-bind="args">
-      ${args.slotTemplate}
-    </URadio>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const disabled = DefaultTemplate.bind({});
-disabled.args = { disabled: true, name: "radio2" };
-
-export const description = DefaultTemplate.bind({});
-description.args = { description: "Some description", name: "radio3" };
-
-export const checked = DefaultTemplate.bind({});
-checked.args = { checked: true, name: "radio4" };
-
-export const descriptionSlot = SlotTemplate.bind({});
-descriptionSlot.args = {
-  name: "radio4",
-  label: "radio",
-  value: "radio",
-  slotTemplate: `
-    <template #description>
-       <div>slot description</div>
-    </template>
-  `,
-};