vueless 0.0.10 → 0.0.11

package/ui.form-input-rating/composables/attrs.composable.js

@@ -0,0 +1,34 @@
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { counter } = config.value;
+
+  const cvaCounter = cva({
+    base: counter.base,
+    variants: counter.variants,
+    compoundVariants: counter.compoundVariants,
+  });
+
+  const counterClasses = computed(() => cvaCounter({ size: props.size }));
+
+  const counterAttrs = getAttrs("counter", { classes: counterClasses });
+  const ratingAttrs = getAttrs("rating");
+  const wrapperAttrs = getAttrs("wrapper");
+  const iconsAttrs = getAttrs("icons", { isComponent: true });
+  const iconsContainerAttrs = getAttrs("iconsContainer");
+  const labelAttrs = getAttrs("label", { isComponent: true });
+
+  return {
+    counterAttrs,
+    ratingAttrs,
+    wrapperAttrs,
+    iconsAttrs,
+    iconsContainerAttrs,
+    labelAttrs,
+  };
+}

package/ui.form-input-rating/configs/default.config.js

@@ -0,0 +1,25 @@
+export default /*tw*/ {
+  rating: "flex flex-col",
+  label: "",
+  wrapper: "",
+  iconsContainer: "leading-none flex",
+  icons: "",
+  counter: {
+    base: "leading-none",
+    variants: {
+      size: {
+        sm: "text-2xs",
+        md: "text-xs",
+        lg: "text-sm",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    modelValue: 0,
+    starsNumber: 5,
+    selectable: false,
+    noCounter: false,
+    labelOutside: false,
+  },
+};

package/ui.form-input-rating/constants/index.js

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UInputRating = "UInputRating";

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

@@ -0,0 +1,108 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import UInputRating from "../ui.form-input-rating";
+import URow from "../ui.container-row";
+
+export default {
+  id: "3060",
+  title: "Form Inputs & Controls / Input Rating",
+  component: UInputRating,
+  args: {
+    label: "Label",
+    value: 2,
+  },
+  argTypes: {
+    ...getArgTypes(UInputRating.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UInputRating },
+  setup() {
+    const slots = getSlotNames(UInputRating.name);
+
+    return { args, slots };
+  },
+  template: `
+    <UInputRating
+      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>
+
+    </UInputRating>
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { UInputRating },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UInputRating
+      v-bind="args"
+      v-model="args.value"
+    >
+      ${args.slotTemplate}
+    </UInputRating>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UInputRating, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <UInputRating
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const selectable = DefaultTemplate.bind({});
+selectable.args = { selectable: true };
+
+export const starsNumber = DefaultTemplate.bind({});
+starsNumber.args = { value: 4, starsNumber: 7 };
+
+export const error = DefaultTemplate.bind({});
+error.args = { error: "some error" };
+
+export const withoutCounter = DefaultTemplate.bind({});
+withoutCounter.args = { withCounter: false };
+
+export const slotCounter = SlotTemplate.bind({});
+slotCounter.args = {
+  slotTemplate: `
+    <template #counter>
+      some counter
+    </template>
+  `,
+};
+
+export const slotRight = SlotTemplate.bind({});
+slotRight.args = {
+  slotTemplate: `
+    <template #right>
+      🤘🤘🤘
+    </template>
+  `,
+};

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

@@ -0,0 +1,186 @@
+<template>
+  <div :data-cy="dataCy" v-bind="ratingAttrs">
+    <ULabel
+      :label="label"
+      :error="error"
+      :size="size"
+      :description="description"
+      :align="labelAlign"
+      v-bind="labelAttrs"
+    >
+      <div v-bind="wrapperAttrs">
+        <div v-if="!noCounter" v-bind="counterAttrs">
+          <!-- @slot Use it to add counter. -->
+          <slot name="counter">
+            {{ ratingCounter }}
+          </slot>
+        </div>
+
+        <div v-bind="iconsContainerAttrs">
+          <UIcon
+            v-for="star in starsNumber"
+            :key="star"
+            :data-cy="`${dataCy}-rating-star-${star}`"
+            :name="star <= ratingCounter ? 'star-fill' : 'star'"
+            :size="iconSize"
+            color="yellow"
+            :interactive="selectable"
+            v-bind="iconsAttrs"
+            @mouseover="onMouseHover(star)"
+            @mouseleave="onMouseHover()"
+            @click="onClickStar(star)"
+          />
+        </div>
+
+        <!-- @slot Use it to add something right. -->
+        <slot name="right" />
+      </div>
+    </ULabel>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+
+import UIcon from "../ui.image-icon";
+import ULabel from "../ui.form-label";
+import UIService from "../service.ui";
+
+import { UInputRating } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UInputRating", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Set input rating  label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Set input rating value.
+   */
+  modelValue: {
+    type: Number,
+    default: UIService.get(defaultConfig, UInputRating).default.modelValue,
+  },
+
+  /**
+   * Set the number of stars.
+   */
+  starsNumber: {
+    type: Number,
+    default: UIService.get(defaultConfig, UInputRating).default.starsNumber,
+  },
+
+  /**
+   * Set component size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputRating).default.size,
+  },
+
+  /**
+   * Make stars selectable.
+   */
+  selectable: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputRating).default.selectable,
+  },
+
+  /**
+   * Set label placement related from the default slot.
+   * @values topInside, top, left, right
+   */
+  labelOutside: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputRating).default.placement,
+  },
+
+  /**
+   * Set error message.
+   */
+  error: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Set description text.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Hide / show counter.
+   */
+  noCounter: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputRating).default.noCounter,
+  },
+
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const hovered = ref(null);
+
+const { counterAttrs, ratingAttrs, wrapperAttrs, iconsAttrs, iconsContainerAttrs, labelAttrs } =
+  useAttrs(props);
+
+const labelAlign = computed(() => {
+  return props.labelOutside ? "top" : "topInside";
+});
+
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+  };
+
+  return sizes[props.size];
+});
+
+const ratingCounter = computed(() => {
+  return hovered.value || props.modelValue;
+});
+
+function onClickStar(newValue) {
+  if (props.selectable) {
+    const selected = newValue !== props.modelValue ? newValue : 0;
+
+    hovered.value = null;
+
+    emit("update:modelValue", selected);
+  }
+}
+
+function onMouseHover(overStar) {
+  if (props.selectable) hovered.value = overStar;
+}
+</script>

package/ui.form-input-search/composables/attrs.composable.js

@@ -0,0 +1,21 @@
+import useUI from "../../composable.ui";
+
+import defaultConfig from "../configs/default.config";
+
+export function useAttrs(props) {
+  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+
+  const inputAttrs = getAttrs("input", { isComponent: true });
+  const searchIconAttrs = getAttrs("searchIcon", { isComponent: true });
+  const closeIconAttrs = getAttrs("closeIcon", { isComponent: true });
+  const buttonAttrs = getAttrs("button", { isComponent: true });
+
+  return {
+    config,
+    inputAttrs,
+    searchIconAttrs,
+    closeIconAttrs,
+    buttonAttrs,
+    hasSlotContent,
+  };
+}

package/ui.form-input-search/configs/default.config.js

@@ -0,0 +1,20 @@
+export default /*tw*/ {
+  input: {
+    wrapper: "relative flex items-center justify-between w-full rounded-lg bg-gray-900 bg-opacity-5",
+    input: "w-full",
+    label: "w-full",
+    rightSlot: "pr-0",
+    leftSlot: "pl-0",
+  },
+  closeIcon: "flex h-full items-center mr-2",
+  closeIconName: "close",
+  searchIcon: "mr-2",
+  searchIconName: "search",
+  button: "",
+  defaultVariants: {
+    size: "md",
+    disabled: false,
+    searchButton: false,
+    labelOutside: false,
+  },
+};

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

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UInputSearch = "UInputSearch";

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

@@ -0,0 +1,90 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import UInputSearch from "../ui.form-input-search";
+import UButton from "../ui.button";
+import URow from "../ui.container-row";
+
+export default {
+  id: "3040",
+  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-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        :key="index"
+      >
+      </UInputSearch>
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const searchButton = DefaultTemplate.bind({});
+searchButton.args = { searchButton: true, text: "Search" };
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const slotLeft = SlotTemplate.bind({});
+slotLeft.args = {
+  slotTemplate: `
+    <template #left>
+      <UButton
+        label="filter"
+        variant="thirdary"
+        filled
+      />
+    </template>
+  `,
+};

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

@@ -0,0 +1,215 @@
+<template>
+  <UInput
+    :id="id"
+    ref="searchInput"
+    v-model="search"
+    :size="size"
+    :disabled="disabled"
+    :description="description"
+    :label="label"
+    :error="error"
+    :placeholder="placeholder"
+    :type="search"
+    :input-mode="search"
+    :data-cy="dataCy"
+    :label-outside="labelOutside"
+    v-bind="inputAttrs"
+    @keyup.enter="onClickSearch"
+  >
+    <template #left>
+      <!-- @slot Use it to add something before text. -->
+      <slot name="left" />
+    </template>
+
+    <template #right>
+      <!-- @slot Use it to add something before text. -->
+      <slot name="right" />
+
+      <UButton
+        v-if="searchButton && !hasSlotContent(slots['right'])"
+        :label="text"
+        v-bind="buttonAttrs"
+        :data-cy="`${dataCy}-right`"
+        @click="onClickSearch"
+      />
+    </template>
+
+    <template #right-icon>
+      <UIcon
+        color="gray"
+        interactive
+        :name="config.closeIconName"
+        :data-cy="`${dataCy}-close`"
+        :size="iconSize"
+        v-bind="closeIconAttrs"
+        @click="onClickClear"
+      />
+
+      <UIcon
+        v-if="!searchButton"
+        color="grayscale"
+        interactive
+        :size="iconSize"
+        :name="config.searchIconName"
+        :data-cy="`${dataCy}-search`"
+        v-bind="searchIconAttrs"
+        @click="onClickSearch"
+      />
+    </template>
+  </UInput>
+</template>
+
+<script setup>
+import { computed, useSlots } from "vue";
+
+import UIcon from "../ui.image-icon";
+import UInput from "../ui.form-input";
+import UButton from "../ui.button";
+import UIService, { getRandomId } from "../service.ui";
+
+import { UInputSearch } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UInputSearch" });
+
+const props = defineProps({
+  /**
+   * Set component value.
+   */
+  modelValue: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Set input size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputSearch).default.size,
+  },
+
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
+
+  /**
+   * Set input disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputSearch).default.disabled,
+  },
+
+  /**
+   * Search button text..
+   */
+  text: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Show / hide search button.
+   */
+  searchButton: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputSearch).default.searchButton,
+  },
+
+  /**
+   * Input description.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Show label outside the input block.
+   */
+  labelOutside: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputSearch).default.labelOutside,
+  },
+
+  /**
+   * Input placeholder.
+   */
+  placeholder: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Input label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Error message.
+   */
+  error: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const slots = useSlots();
+const emit = defineEmits(["update:modelValue", "clear", "search"]);
+
+const { config, inputAttrs, searchIconAttrs, closeIconAttrs, buttonAttrs, hasSlotContent } =
+  useAttrs(props);
+
+const search = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+  };
+
+  return sizes[props.size];
+});
+
+function onClickClear() {
+  search.value = "";
+  emit("clear");
+}
+
+function onClickSearch() {
+  if (!search.value) return;
+  emit("search", search.value);
+}
+</script>