vueless 0.0.3 → 0.0.4

package/src/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/src/ui.form-input-rating/index.vue

@@ -0,0 +1,185 @@
+<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 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/src/ui.form-radio-card/composables/attrs.composable.js

@@ -0,0 +1,35 @@
+import useUI from "../../composable.ui";
+import { cva, cx } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { radio } = config.value;
+
+  const cvaRadio = cva({
+    base: radio.base,
+    variants: radio.variants,
+    compoundVariants: radio.compoundVariants,
+  });
+
+  const radioClasses = computed(() => setColor(cvaRadio({ color: props.color }), props.color));
+
+  const wrapperAttrsRaw = getAttrs("wrapper");
+  const radioAttrs = getAttrs("radio", { isComponent: true, classes: radioClasses });
+  const labelAttrs = getAttrs("label", { isComponent: true });
+  const iconAttrs = getAttrs("icon", { isComponent: true });
+
+  const wrapperAttrs = computed(() => (classes) => ({
+    ...wrapperAttrsRaw.value,
+    class: cx([wrapperAttrsRaw.value.class, classes]),
+  }));
+
+  return {
+    radioAttrs,
+    iconAttrs,
+    wrapperAttrs,
+    labelAttrs,
+  };
+}

package/src/ui.form-radio-card/configs/default.config.js

@@ -0,0 +1,25 @@
+export default /*tw*/ {
+  wrapper: "grid grid-rows-1 gap-4 md:gap-6 text-center",
+  title: "text-base font-normal text-gray-900 mb-1 mt-3",
+  description: "text-xs font-normal text-gray-500/[85]",
+  radio: {
+    base: "absolute right-4 top-2 !gap-0",
+    label: "mr-1",
+  },
+  icon: "mb-3 flex justify-center",
+  defaultVariants: {
+    color: "brand",
+    gridCols: 2,
+    withIcon: true,
+  },
+  safelist: (colors) => [
+    { pattern: `border-(${colors})-100`, variants: ["disabled"] },
+    { pattern: `border-(${colors})-300` },
+    { pattern: `border-(${colors})-400`, variants: ["hover"] },
+    { pattern: `border-(${colors})-500`, variants: ["focus", "active"] },
+    { pattern: `text-(${colors})-500` },
+    { pattern: `bg-(${colors})-100`, variants: ["disabled"] },
+    { pattern: `bg-(${colors})-500`, variants: ["focus"] },
+    { pattern: `ring-(${colors})-200`, variants: ["focus"] },
+  ],
+};

package/src/ui.form-radio-card/index.vue

@@ -0,0 +1,159 @@
+<template>
+  <div v-bind="wrapperAttrs(gridColsClass)">
+    <template v-for="(item, index) in options" :key="id + index">
+      <URadio
+        :id="id + index"
+        v-model="selectedItem"
+        :value="item.value"
+        :name="name"
+        v-bind="radioAttrs"
+        :label="item.label"
+        :description="item.description"
+      />
+      <!-- @slot Use it to add icon. -->
+      <slot v-if="withIcon" name="icon" :item="item">
+        <UIcon :name="item.iconName" size="xl" :color="color" v-bind="iconAttrs" />
+      </slot>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useStore } from "vuex";
+
+import UIcon from "../ui.image-icon";
+import UIService, { getRandomId } from "../service.ui";
+
+import defaultConfig from "./configs/default.config";
+import { URadioCard } from "./constants";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "URadioCard", inheritAttrs: false });
+
+const store = useStore();
+
+const props = defineProps({
+  /**
+   * Set radio card name.
+   */
+  name: {
+    type: String,
+    required: true,
+    default: "",
+  },
+
+  /**
+   * Set options for component.
+   */
+  options: {
+    type: Array,
+    default: () => [],
+  },
+
+  /**
+   * Set component value.
+   */
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: "",
+  },
+
+  /**
+   * Set grid cols number.
+   */
+  gridCols: {
+    type: Number,
+    default: UIService.get(defaultConfig, URadioCard).default.gridCols,
+  },
+
+  /**
+   * Show / hide component icon.
+   */
+  withIcon: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, URadioCard).default.withIcon,
+  },
+
+  /**
+   * The color of the icon.
+   * @values brand, grayscale, black, white, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+   */
+  color: {
+    type: String,
+    default: UIService.get(defaultConfig, URadioCard).default.color,
+  },
+
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
+
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const labelConfig = {
+  wrapper: {
+    base: `
+    rounded-lg border border-solid border-gray-300 cursor-pointer relative w-full
+    hover:border-gray-400 focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15]
+    px-6 py-4`,
+  },
+  label: {
+    base: "h-full w-full cursor-pointer",
+    variants: {
+      placement: {
+        topInside: "left-0 !top-0",
+      },
+    },
+  },
+  description: {
+    variants: {
+      placement: {
+        topInside: "pl-0",
+      },
+    },
+  },
+};
+
+const emit = defineEmits(["update:modelValue"]);
+
+const { radioAttrs, iconAttrs, wrapperAttrs, labelAttrs } = useAttrs(props);
+
+const isMobileDevice = computed(() => {
+  return store.getters["breakpoint/isMobileDevice"];
+});
+
+const selectedItem = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+const gridColsClass = computed(() => {
+  return {
+    "grid-cols-1": isMobileDevice,
+    "grid-cols-2": props.gridCols === 2 && isMobileDevice,
+    "grid-cols-3": props.gridCols === 3 && isMobileDevice,
+    "grid-cols-4": props.gridCols === 4 && isMobileDevice,
+  };
+});
+</script>