vueless 0.0.3 → 0.0.4

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

@@ -1,34 +0,0 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/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/constants/index.js

@@ -1,5 +0,0 @@
-/*
-  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

@@ -1,108 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UInputRating from "vueless/ui.form-input-rating";
-import URow from "vueless/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

@@ -1,185 +0,0 @@
-<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 "vueless/ui.image-icon";
-import UIService from "vueless/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

@@ -1,21 +0,0 @@
-import useUI from "vueless/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

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

@@ -1,5 +0,0 @@
-/*
-  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

@@ -1,90 +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 {
-  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

@@ -1,213 +0,0 @@
-<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'])"
-        variant="primary"
-        :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 UIService, { getRandomId } from "vueless/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>

package/ui.form-label/Docs.mdx

@@ -1,16 +0,0 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "vueless/service.storybook";
-
-import * as stories from "./index.stories";
-import defaultConfig from "./configs/default.config?raw"
-
-<Meta of={stories} />
-<Title of={stories} />
-<Subtitle of={stories} />
-<Description of={stories} />
-<Primary of={stories}  />
-<Controls of={stories.Default} />
-<Stories of={stories} />
-
-## **Default config**
-<Source code={getSource(defaultConfig)} language="jsx" dark />