vueless 0.0.10 → 0.0.11

package/ui.form-label/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../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 />

package/ui.form-label/composables/attrs.composable.js

@@ -0,0 +1,65 @@
+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, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { wrapper, label, description } = config.value;
+
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const cvaLabel = cva({
+    base: label.base,
+    variants: label.variants,
+    compoundVariants: label.compoundVariants,
+  });
+
+  const cvaDescription = cva({
+    base: description.base,
+    variants: description.variants,
+    compoundVariants: description.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() =>
+    cvaWrapper({
+      size: props.size,
+      align: props.align,
+    }),
+  );
+
+  const labelClasses = computed(() =>
+    cvaLabel({
+      size: props.size,
+      error: Boolean(props.error),
+      disabled: props.disabled,
+      align: props.align,
+    }),
+  );
+
+  const descriptionClasses = computed(() =>
+    cvaDescription({
+      size: props.size,
+      error: Boolean(props.error),
+      align: props.align,
+    }),
+  );
+
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  const labelAttrs = getAttrs("label", { classes: labelClasses });
+  const labelWrapperAttrs = getAttrs("labelWrapper");
+  const descriptionAttrs = getAttrs("description", { classes: descriptionClasses });
+
+  return {
+    wrapperAttrs,
+    labelWrapperAttrs,
+    labelAttrs,
+    descriptionAttrs,
+    hasSlotContent,
+  };
+}

package/ui.form-label/configs/default.config.js

@@ -0,0 +1,95 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "flex",
+    variants: {
+      size: {
+        sm: "gap-2",
+        md: "gap-3",
+        lg: "gap-4",
+      },
+      align: {
+        top: "flex-col",
+        topInside: "flex-col",
+        topWithDesc: "flex-col-reverse w-fit",
+        left: "flex-row w-fit",
+        right: "flex-row-reverse w-fit",
+      },
+    },
+    compoundVariants: [
+      { align: "top", size: "sm", class: "gap-0 space-y-2" },
+      { align: "top", size: "md", class: "gap-0 space-y-2" },
+      { align: "top", size: "lg", class: "gap-0 space-y-2" },
+      { align: "topInside", size: "sm", class: "gap-0" },
+      { align: "topInside", size: "md", class: "gap-0" },
+      { align: "topInside", size: "lg", class: "gap-0" },
+    ],
+  },
+  labelWrapper: "",
+  label: {
+    base: "pt-1 pb-1.5 z-10 font-normal block !leading-none",
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-base mt-px",
+        lg: "text-lg mt-0.5",
+      },
+      align: {
+        topInside: "absolute left-4 text-gray-500",
+        topWithDesc: "text-gray-500",
+        top: "text-gray-500",
+        left: "text-gray-900",
+        right: "text-gray-900",
+      },
+      error: {
+        true: "text-red-500",
+      },
+      disabled: {
+        true: "text-gray-900 opacity-50",
+      },
+    },
+    compoundVariants: [
+      { align: "top", size: "sm", class: "m-0 p-0 text-xs" },
+      { align: "top", size: "md", class: "m-0 p-0 text-sm" },
+      { align: "top", size: "lg", class: "m-0 p-0 text-base" },
+      { align: "topInside", size: "sm", class: "m-0 p-0 top-2 text-xs" },
+      { align: "topInside", size: "md", class: "m-0 p-0 top-2.5 text-sm" },
+      { align: "topInside", size: "lg", class: "m-0 p-0 top-3 text-base" },
+      { align: "topWithDesc", size: "sm", class: "m-0 p-0 text-xs" },
+      { align: "topWithDesc", size: "md", class: "m-0 p-0 text-sm" },
+      { align: "topWithDesc", size: "lg", class: "m-0 p-0 text-base" },
+    ],
+  },
+  description: {
+    base: "font-normal text-gray-500/[85] !leading-none",
+    variants: {
+      size: {
+        sm: "text-2xs",
+        md: "text-xs",
+        lg: "text-sm",
+      },
+      align: {
+        topInside: "pl-4",
+        top: "pl-0",
+        left: "pl-0",
+        right: "pl-0",
+      },
+      error: {
+        true: "text-red-500",
+      },
+    },
+    compoundVariants: [
+      { align: "top", size: "sm", class: "mt-1.5" },
+      { align: "top", size: "md", class: "mt-2" },
+      { align: "top", size: "lg", class: "mt-2.5" },
+      { align: "topInside", size: "sm", class: "mt-1.5" },
+      { align: "topInside", size: "md", class: "mt-2" },
+      { align: "topInside", size: "lg", class: "mt-2.5" },
+    ],
+  },
+  defaultVariants: {
+    align: "top",
+    size: "md",
+    error: false,
+    disabled: false,
+  },
+};

package/ui.form-label/constants/index.js

@@ -0,0 +1,13 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const ULabel = "ULabel";
+
+export const PLACEMENT = {
+  topInside: "topInside",
+  topWithDesc: "topWithDesc",
+  top: "top",
+  left: "left",
+  right: "right",
+};

package/ui.form-label/index.stories.js

@@ -0,0 +1,107 @@
+import ULabel from "../ui.form-label";
+import URow from "../ui.container-row";
+import UButton from "../ui.button/index";
+import UBadge from "../ui.text-badge";
+
+import { getArgTypes } from "../service.storybook";
+
+export default {
+  id: "3240",
+  title: "Form Inputs & Controls / Label",
+  component: ULabel,
+  args: {
+    label: "Label",
+    description: "Description",
+  },
+  argTypes: {
+    ...getArgTypes(ULabel.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { ULabel },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ULabel v-bind="args" />
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { ULabel, UBadge },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ULabel v-bind="args">
+      ${args.slotTemplate}
+    </ULabel>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { ULabel, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <ULabel
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+const placementTemplate = (args, { argTypes } = {}) => ({
+  components: { ULabel, URow, UButton },
+  setup() {
+    return {
+      args,
+      placements: argTypes.placement.options,
+    };
+  },
+  template: `
+    <URow>
+      <ULabel
+        v-for="(placement, index) in placements"
+        v-bind="args"
+        :align="placement"
+        :key="index"
+      >
+        <UButton text="Button"/>
+      </ULabel>
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Sizes = SizesTemplate.bind({});
+Sizes.args = {};
+
+export const Placement = placementTemplate.bind({});
+Placement.args = {};
+
+export const Error = DefaultTemplate.bind({});
+Error.args = { error: "some error" };
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
+
+export const slotFooter = SlotTemplate.bind({});
+slotFooter.args = {
+  slotTemplate: `
+    <template #footer>
+      <UBadge label="favourite" color="green" size="sm" />
+    </template>
+  `,
+};

package/ui.form-label/index.vue

@@ -0,0 +1,170 @@
+<template>
+  <div
+    v-if="isHorizontalPlacement || isTopWithDescPlacement"
+    ref="wrapperRef"
+    v-bind="wrapperAttrs"
+    @click="onClick"
+  >
+    <slot />
+
+    <div v-bind="labelWrapperAttrs">
+      <label :for="props.for" :data-cy="`${dataCy}-label`" v-bind="labelAttrs" v-text="label" />
+
+      <div
+        v-if="error"
+        :data-cy="`${dataCy}-error-message`"
+        v-bind="descriptionAttrs"
+        v-text="error"
+      />
+
+      <div
+        v-if="description && !error"
+        :data-cy="`${dataCy}-description`"
+        v-bind="descriptionAttrs"
+        v-text="description"
+      />
+
+      <slot name="footer" />
+    </div>
+  </div>
+
+  <div v-else v-bind="wrapperAttrs">
+    <label
+      ref="labelRef"
+      :for="props.for"
+      :data-cy="`${dataCy}-label`"
+      v-bind="labelAttrs"
+      v-text="label"
+    />
+
+    <slot />
+
+    <div
+      v-if="error"
+      :data-cy="`${dataCy}-error-message`"
+      v-bind="descriptionAttrs"
+      v-text="error"
+    />
+
+    <div
+      v-if="description && !error"
+      :data-cy="`${dataCy}-description`"
+      v-bind="descriptionAttrs"
+      v-text="description"
+    />
+
+    <slot name="footer" />
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+
+import UIService from "../service.ui";
+
+import defaultConfig from "./configs/default.config";
+import { ULabel, PLACEMENT } from "./constants";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "ULabel", inheritAttrs: false });
+
+const emit = defineEmits(["click", "mousedown"]);
+
+const props = defineProps({
+  /**
+   * Set label value.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Set label size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, ULabel).default.size,
+  },
+
+  /**
+   * Set label placement related from the default slot.
+   * @values topInside, top, topWithDesc, left, right
+   */
+  align: {
+    type: String,
+    default: UIService.get(defaultConfig, ULabel).default.align,
+  },
+
+  /**
+   * Set error message.
+   */
+  error: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Set description text.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Set id label for.
+   * @ignore
+   */
+  for: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Make label disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, ULabel).default.disabled,
+  },
+
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const labelRef = ref(null);
+const wrapperRef = ref(null);
+
+const { wrapperAttrs, labelWrapperAttrs, labelAttrs, descriptionAttrs } = useAttrs(props);
+
+const isHorizontalPlacement = computed(
+  () => props.placement === PLACEMENT.left || props.placement === PLACEMENT.right,
+);
+
+const isTopWithDescPlacement = computed(() => props.placement === PLACEMENT.topWithDesc);
+
+const labelElement = computed(() => labelRef.value);
+const wrapperElement = computed(() => wrapperRef.value);
+
+function onClick(event) {
+  emit("click", event);
+}
+
+defineExpose({ labelElement, wrapperElement });
+</script>

package/ui.form-radio/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../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 />

package/ui.form-radio/composables/attrs.composable.js

@@ -0,0 +1,34 @@
+import { computed } from "vue";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+
+export function useAttrs(props, { radioColor, radioSize }) {
+  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: radioColor.value,
+        size: radioSize.value,
+      }),
+      radioColor.value,
+    ),
+  );
+
+  const labelAttrs = getAttrs("label", { isComponent: true });
+  const radioAttrs = getAttrs("radio", { classes: radioClasses });
+
+  return {
+    radioAttrs,
+    labelAttrs,
+  };
+}

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

@@ -0,0 +1,47 @@
+export default /*tw*/ {
+  label: "inline-flex",
+  radio: {
+    base: `
+      border border-solid border-{color}-300 text-{color}-500
+      hover:border-{color}-400
+      active:border-{color}-500
+      focus:border-{color}-500 focus:bg-{color}-500 focus:ring-4 focus:ring-{color}-200 focus:ring-offset-0
+      disabled:border-{color}-100 disabled:bg-{color}-100
+    `,
+    variants: {
+      size: {
+        sm: "size-5",
+        md: "size-6",
+        lg: "size-7",
+      },
+    },
+    compoundVariants: [
+      {
+        color: "grayscale",
+        class: `
+          border-gray-300 text-gray-900
+          hover:border-gray-400
+          active:border-gray-500
+          focus:border-gray-500 focus:bg-gray-900 focus:ring-gray-200
+          disabled:border-gray-100 disabled:bg-gray-100
+        `,
+      },
+    ],
+  },
+  defaultVariants: {
+    size: "md",
+    color: "brand",
+    disabled: false,
+    checked: false,
+  },
+  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: `ring-(${colors})-200`, variants: ["focus"] },
+    { pattern: `bg-(${colors})-100`, variants: ["disabled"] },
+    { pattern: `bg-(${colors})-500`, variants: ["focus"] },
+  ],
+};

package/ui.form-radio/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 URadio = "URadio";

package/ui.form-radio/index.stories.js

@@ -0,0 +1,71 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import URadio from "../ui.form-radio";
+import UBadge from "../ui.text-badge";
+
+export default {
+  id: "3140",
+  title: "Form Inputs & Controls / Radio",
+  component: URadio,
+  args: {
+    name: "radio1",
+    label: "radio",
+    value: "1",
+    color: "brand",
+  },
+  argTypes: {
+    ...getArgTypes(URadio.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { URadio },
+  setup() {
+    const slots = getSlotNames(URadio.name);
+
+    return { args, slots };
+  },
+  template: `
+    <URadio v-bind="args" description="description">
+      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
+        <template v-if="args[slot]">{{ args[slot] }}</template>
+      </template>
+    </URadio>
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { URadio, UBadge },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URadio v-bind="args" description="description">
+      ${args.slotTemplate}
+    </URadio>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const disabled = DefaultTemplate.bind({});
+disabled.args = { disabled: true, name: "radio2" };
+
+export const description = DefaultTemplate.bind({});
+description.args = { name: "radio3" };
+
+export const checked = DefaultTemplate.bind({});
+checked.args = { checked: true, name: "radio4" };
+
+export const slotFooter = SlotTemplate.bind({});
+slotFooter.args = {
+  name: "radio5",
+  label: "radio",
+  value: "radio",
+  slotTemplate: `
+    <template #footer>
+       <UBadge label="favourite" color="green" size="sm" />
+    </template>
+  `,
+};