vueless 0.0.2 → 0.0.3

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

@@ -1,242 +1,185 @@
 <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 :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>
-
-      <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>
+    </ULabel>
   </div>
 </template>
 
-<script>
-import UIcon from "vueless/ui.image-icon";
+<script setup>
+import { computed, ref } from "vue";
 
-export default {
-  name: "UInputRating",
-
-  components: {
-    UIcon,
+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: "",
   },
 
-  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: "",
-    },
+  /**
+   * Set input rating value.
+   */
+  modelValue: {
+    type: Number,
+    default: UIService.get(defaultConfig, UInputRating).default.modelValue,
   },
 
-  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;
-    },
+  /**
+   * Set the number of stars.
+   */
+  starsNumber: {
+    type: Number,
+    default: UIService.get(defaultConfig, UInputRating).default.starsNumber,
   },
 
-  methods: {
-    onClickStar(newValue) {
-      if (this.selectable) {
-        const selected = newValue !== this.modelValue ? newValue : 0;
+  /**
+   * Set component size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputRating).default.size,
+  },
 
-        this.hovered = null;
+  /**
+   * Make stars selectable.
+   */
+  selectable: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputRating).default.selectable,
+  },
 
-        this.$emit("update:modelValue", selected);
-      }
-    },
+  /**
+   * Set label placement related from the default slot.
+   * @values topInside, top, left, right
+   */
+  labelOutside: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputRating).default.placement,
+  },
 
-    onMouseHover(overStar) {
-      if (this.selectable) this.hovered = overStar;
-    },
+  /**
+   * Set error message.
+   */
+  error: {
+    type: String,
+    default: "",
+  },
 
-    getIconClasses(star) {
-      const roundedValue = Math.ceil(this.ratingCounter);
-      const isSelected = star <= roundedValue;
+  /**
+   * Set description text.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
 
-      return {
-        "elected-star": isSelected,
-        "cursor-pointer": this.selectable,
-      };
-    },
+  /**
+   * Hide / show counter.
+   */
+  noCounter: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputRating).default.noCounter,
   },
-};
-</script>
 
-<style lang="postcss" scoped>
-.mono-rating {
-  @apply flex flex-col;
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-  .label {
-    @apply text-sm font-normal text-gray-500;
-    @apply mb-0.5;
-  }
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
 
-  &-wrapper {
-    @apply flex items-center space-x-2;
+const emit = defineEmits(["update:modelValue"]);
 
-    .counter {
-      @apply leading-none;
-    }
+const hovered = ref(null);
 
-    .icons {
-      @apply leading-none;
+const { counterAttrs, ratingAttrs, wrapperAttrs, iconsAttrs, iconsContainerAttrs, labelAttrs } =
+  useAttrs(props);
 
-      .star:deep(:not(.selected-star) [stroke]) {
-        @apply stroke-current text-yellow-400;
-      }
+const labelAlign = computed(() => {
+  return props.labelOutside ? "top" : "topInside";
+});
 
-      .error-message {
-        @apply font-normal text-red-500;
-        @apply pl-1.5;
-      }
-    }
-  }
-}
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+  };
 
-.size {
-  &-sm {
-    .label {
-      @apply text-xs;
-    }
+  return sizes[props.size];
+});
 
-    .counter {
-      @apply text-2xs;
-    }
+const ratingCounter = computed(() => {
+  return hovered.value || props.modelValue;
+});
 
-    .error-message {
-      @apply text-2xs;
-    }
-  }
+function onClickStar(newValue) {
+  if (props.selectable) {
+    const selected = newValue !== props.modelValue ? newValue : 0;
 
-  &-md {
-    .counter {
-      @apply text-xs;
-    }
+    hovered.value = null;
 
-    .error-message {
-      @apply text-xs;
-    }
+    emit("update:modelValue", selected);
   }
+}
 
-  &-lg {
-    .label {
-      @apply text-base;
-      @apply mb-1;
-    }
-
-    .counter {
-      @apply text-sm;
-    }
-
-    .error-message {
-      @apply text-sm;
-    }
-  }
+function onMouseHover(overStar) {
+  if (props.selectable) hovered.value = overStar;
 }
-</style>
+</script>

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

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

@@ -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

@@ -5,6 +5,7 @@ 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: {
@@ -40,12 +41,12 @@ const SlotTemplate = (args) => ({
   },
   template: `
     <UInputSearch v-bind="args">
-    ${args.slotTemplate}
+      ${args.slotTemplate}
     </UInputSearch>
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UInputSearch, URow },
   setup() {
     return {
@@ -56,8 +57,8 @@ const SizesTemplate = (args, { argTypes }) => ({
   template: `
     <URow>
       <UInputSearch
-        v-bind="args"
         v-for="(size, index) in sizes"
+        v-bind="args"
         :size="size"
         :key="index"
       >
@@ -69,6 +70,9 @@ const SizesTemplate = (args, { argTypes }) => ({
 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 = {};
 
@@ -77,7 +81,7 @@ slotLeft.args = {
   slotTemplate: `
     <template #left>
       <UButton
-        text="filter"
+        label="filter"
         variant="thirdary"
         filled
       />