vueless 0.0.1

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

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

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

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

@@ -0,0 +1,69 @@
+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>
+  `,
+};