vueless 0.0.3 → 0.0.4

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

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

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

@@ -1,13 +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 ULabel = "ULabel";
-
-export const PLACEMENT = {
-  topInside: "topInside",
-  topWithDesc: "topWithDesc",
-  top: "top",
-  left: "left",
-  right: "right",
-};

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

@@ -1,107 +0,0 @@
-import ULabel from "vueless/ui.form-label";
-import URow from "vueless/ui.container-row";
-import UButton from "vueless/ui.button/index";
-import UBadge from "vueless/ui.text-badge";
-
-import { getArgTypes } from "vueless/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

@@ -1,170 +0,0 @@
-<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 "vueless/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

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

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

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

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

@@ -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 URadio = "URadio";

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

@@ -1,71 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import URadio from "vueless/ui.form-radio";
-import UBadge from "vueless/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>
-  `,
-};