vueless 0.0.2 → 0.0.3

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

@@ -1,8 +1,10 @@
 import { getArgTypes } from "vueless/service.storybook";
 
 import UInputNumber from "vueless/ui.form-input-number";
+import UGroup from "vueless/ui.container-group";
 
 export default {
+  id: "3050",
   title: "Form Inputs & Controls / Input Number",
   component: UInputNumber,
   argTypes: {
@@ -16,12 +18,45 @@ const DefaultTemplate = (args) => ({
   setup() {
     return { args };
   },
+  data() {
+    return {
+      count: 1,
+    };
+  },
   template: `
     <UInputNumber v-model="count" v-bind="args" />
   `,
-  data: () => ({
-    count: 1,
-  }),
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UInputNumber, UGroup },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  data() {
+    return {
+      sizeValues: [
+        { count: 1, label: "sm" },
+        { count: 1, label: "md" },
+        { count: 1, label: "lg" },
+      ],
+    };
+  },
+  template: `
+    <UGroup size="lg">
+      <UInputNumber
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        :key="index"
+        :label="sizeValues[index].label"
+        v-model="sizeValues[index].count"
+      />
+    </UGroup>
+  `,
 });
 
 export const Default = DefaultTemplate.bind({});
@@ -31,3 +66,38 @@ Default.args = {
   min: 1,
   max: 100,
 };
+
+export const label = DefaultTemplate.bind({});
+label.args = {
+  value: 1,
+  step: 1,
+  min: 1,
+  max: 100,
+  label: "Year",
+};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {
+  value: 1,
+  step: 1,
+  min: 1,
+  max: 100,
+};
+
+export const valueLimit = DefaultTemplate.bind({});
+valueLimit.args = {
+  value: 1,
+  step: 1,
+  min: 5,
+  max: 10,
+  label: "Min is 5 | Max is 10",
+};
+
+export const step = DefaultTemplate.bind({});
+step.args = {
+  value: 1,
+  step: 5,
+  min: 1,
+  max: 100,
+  label: "Step is 5",
+};

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

@@ -1,127 +1,159 @@
 <template>
-  <div class="mono-counter" :data-cy="dataCy">
-    <div class="mono-counter-button" @click="onClickMinus">
-      <UIcon name="remove" size="xs" :data-cy="`${dataCy}-minus`" />
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+    <UButton
+      variant="thirdary"
+      size="sm"
+      filled
+      square
+      pill
+      :disabled="isRemoveButtonDisabled"
+      v-bind="removeButtonAttrs"
+      @click="onClickRemove"
+    >
+      <UIcon
+        :name="config.removeIconName"
+        :size="size"
+        :color="isRemoveButtonDisabled ? 'gray' : 'grayscale'"
+        :data-cy="`${dataCy}-remove`"
+        v-bind="removeIconAttrs"
+      />
+    </UButton>
+
+    <div v-bind="numberAttrs">
+      <div v-bind="valueAttrs" v-text="count" />
+      <div v-bind="textAttrs" v-text="label" />
     </div>
 
-    <div class="mono-counter-value">
-      {{ count }}
-    </div>
-
-    <div class="mono-counter-button" @click="onClickPlus">
-      <UIcon class="plus" name="add" size="xs" :data-cy="`${dataCy}-plus`" />
-    </div>
+    <UButton
+      variant="thirdary"
+      size="sm"
+      filled
+      square
+      pill
+      :disabled="isAddButtonDisabled"
+      v-bind="addButtonAttrs"
+      @click="onClickAdd"
+    >
+      <UIcon
+        :name="config.addIconName"
+        :size="size"
+        :color="isAddButtonDisabled ? 'gray' : 'grayscale'"
+        :data-cy="`${dataCy}-add`"
+        v-bind="addIconAttrs"
+      />
+    </UButton>
   </div>
 </template>
 
-<script>
-import UIcon from "vueless/ui.image-icon";
+<script setup>
+import { computed } from "vue";
+import UIService from "vueless/service.ui";
 
-export default {
-  name: "UInputNumber",
+import defaultConfig from "./configs/default.config";
+import { UInputNumber } from "./constants";
+import { useAttrs } from "./composables/attrs.composable";
 
-  components: {
-    UIcon,
-  },
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UInputNumber", inheritAttrs: false });
 
-  props: {
-    /**
-     * Set value.
-     */
-    modelValue: {
-      type: Number,
-      required: true,
-    },
-
-    /**
-     * Set step size.
-     */
-    step: {
-      type: Number,
-      default: 1,
-    },
-
-    /**
-     * Set min value.
-     */
-    min: {
-      type: Number,
-      default: 1,
-    },
-
-    /**
-     * Set max value.
-     */
-    max: {
-      type: Number,
-      default: 999,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+const props = defineProps({
+  /**
+   * Input value.
+   */
+  modelValue: {
+    type: Number,
+    required: true,
   },
 
-  emits: ["update:modelValue"],
+  /**
+   * Input step.
+   */
+  step: {
+    type: Number,
+    default: 1,
+  },
 
-  computed: {
-    count: {
-      get() {
-        return this.modelValue;
-      },
+  /**
+   * Input min value.
+   */
+  min: {
+    type: Number,
+    default: 1,
+  },
 
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
+  /**
+   * Input max value.
+   */
+  max: {
+    type: Number,
+    default: 999,
   },
 
-  methods: {
-    onClickMinus() {
-      const newCount = this.count - this.step;
+  /**
+   * Input label below number.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
 
-      this.count = newCount >= this.min ? newCount : this.count;
-    },
+  /**
+   * Input size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputNumber).default.size,
+  },
 
-    onClickPlus() {
-      const newCount = this.count + this.step;
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-      this.count = newCount <= this.max ? newCount : this.count;
-    },
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
   },
-};
-</script>
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const {
+  config,
+  valueAttrs,
+  textAttrs,
+  removeButtonAttrs,
+  removeIconAttrs,
+  addButtonAttrs,
+  addIconAttrs,
+  wrapperAttrs,
+  numberAttrs,
+} = useAttrs(props);
+
+const count = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+const isAddButtonDisabled = computed(() => count.value >= props.max);
+const isRemoveButtonDisabled = computed(() => count.value <= props.min);
+
+function onClickRemove() {
+  const newCount = count.value - props.step;
+
+  count.value = newCount >= props.min ? newCount : count.value;
+}
+
+function onClickAdd() {
+  const newCount = count.value + props.step;
 
-<style lang="postcss" scoped>
-.mono-counter {
-  @apply flex items-center justify-between;
-  @apply space-x-3;
-
-  &-button {
-    @apply flex items-center justify-center;
-    @apply h-6 w-6 rounded-full;
-    @apply bg-gray-100;
-    @apply cursor-pointer;
-
-    &:hover {
-      @apply bg-gray-200;
-    }
-
-    &:active {
-      @apply bg-gray-300;
-    }
-  }
-
-  &-value {
-    @apply select-none text-sm font-normal;
-    -moz-user-select: -moz-none;
-    -o-user-select: none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-  }
+  count.value = newCount <= props.max ? newCount : count.value;
 }
-</style>
+</script>

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

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

@@ -4,6 +4,7 @@ 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: {
@@ -50,7 +51,7 @@ const SlotTemplate = (args) => ({
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UInputRating, URow },
   setup() {
     return {
@@ -62,9 +63,9 @@ const SizesTemplate = (args, { argTypes }) => ({
     <URow>
       <UInputRating
         v-for="(size, index) in sizes"
+        v-bind="args"
         :size="size"
         :key="index"
-        v-bind="args"
       />
     </URow>
   `,