vueless 0.0.2 → 0.0.3

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

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

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

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

@@ -1,15 +1,17 @@
 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",
-    description: "description",
     value: "1",
+    color: "brand",
   },
   argTypes: {
     ...getArgTypes(URadio.name),
@@ -24,7 +26,7 @@ const DefaultTemplate = (args) => ({
     return { args, slots };
   },
   template: `
-    <URadio v-bind="args" >
+    <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>
@@ -33,12 +35,12 @@ const DefaultTemplate = (args) => ({
 });
 
 const SlotTemplate = (args) => ({
-  components: { URadio },
+  components: { URadio, UBadge },
   setup() {
     return { args };
   },
   template: `
-    <URadio v-bind="args">
+    <URadio v-bind="args" description="description">
       ${args.slotTemplate}
     </URadio>
   `,
@@ -51,19 +53,19 @@ export const disabled = DefaultTemplate.bind({});
 disabled.args = { disabled: true, name: "radio2" };
 
 export const description = DefaultTemplate.bind({});
-description.args = { description: "Some description", name: "radio3" };
+description.args = { name: "radio3" };
 
 export const checked = DefaultTemplate.bind({});
 checked.args = { checked: true, name: "radio4" };
 
-export const descriptionSlot = SlotTemplate.bind({});
-descriptionSlot.args = {
-  name: "radio4",
+export const slotFooter = SlotTemplate.bind({});
+slotFooter.args = {
+  name: "radio5",
   label: "radio",
   value: "radio",
   slotTemplate: `
-    <template #description>
-       <div>slot description</div>
+    <template #footer>
+       <UBadge label="favourite" color="green" size="sm" />
     </template>
   `,
 };

package/ui.form-radio/index.vue

@@ -1,176 +1,169 @@
 <template>
-  <div ref="radioInput" class="mono-radio-wrapper">
-    <t-radio
+  <ULabel
+    :for="id"
+    :label="label"
+    :size="radioSize"
+    :align="labelAlign"
+    :description="description"
+    :disabled="disabled"
+    :data-cy="dataCy"
+    v-bind="labelAttrs"
+  >
+    <input
       :id="id"
+      type="radio"
       :disabled="disabled"
-      class="mono-radio"
       :name="radioName"
       :value="value"
       :checked="checked"
       :data-cy="dataCy"
+      v-bind="radioAttrs"
       @focus="onFocus"
     />
 
-    <div>
-      <label v-if="label" :for="id" class="mono-radio-label">{{ label }}</label>
-
-      <!-- @slot Use it to add some description. -->
-      <div class="mono-radio-description">
-        <slot name="description" :description="description">
-          <label v-if="description" :for="id">{{ description }}</label>
-        </slot>
-      </div>
-    </div>
-  </div>
+    <template #footer>
+      <slot name="footer" />
+    </template>
+  </ULabel>
 </template>
 
-<script>
-import TRadio from "vueless/library.vue-tailwind-3/t-radio";
-import { getRandomId } from "vueless/service.ui";
+<script setup>
+import { inject, onMounted, ref, watchEffect } from "vue";
 
-export default {
-  name: "URadio",
+import UIService, { getRandomId } from "vueless/service.ui";
 
-  components: { TRadio },
+import defaultConfig from "./configs/default.config";
+import { URadio } from "./constants";
+import { useAttrs } from "./composables/attrs.composable";
 
-  inject: {
-    setRadioGroupSelectedItem: { default: null },
-    getRadioGroupName: { default: null },
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "URadio", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Radio value.
+   */
+  value: {
+    type: [String, Number],
+    default: "",
+  },
+
+  /**
+   * Radio label.
+   */
+  label: {
+    type: String,
+    default: "",
   },
 
-  props: {
-    /**
-     * Set radio value.
-     */
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-
-    /**
-     * Set label.
-     */
-    label: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set description.
-     */
-    description: {
-      type: [String, Object],
-      default: "",
-    },
-
-    /**
-     * Set name for radio.
-     */
-    name: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Make radio group inactive.
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Make a radio group item checked.
-     */
-    checked: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Generates unique element id.
-     * @ignore
-     */
-    id: {
-      type: String,
-      default: () => getRandomId(),
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+  /**
+   * Radio description.
+   */
+  description: {
+    type: [String, Object],
+    default: "",
   },
 
-  emits: ["update:value"],
+  /**
+   * Radio name.
+   */
+  name: {
+    type: String,
+    default: "",
+  },
 
-  data() {
-    return {
-      radioName: "",
-    };
+  /**
+   * Radio size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, URadio).default.size,
   },
 
-  mounted() {
-    this.radioName = this.name || this.getRadioGroupName();
+  /**
+   * Radio color.
+   * @values brand, grayscale, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+   */
+  color: {
+    type: String,
+    default: UIService.get(defaultConfig, URadio).default.color,
   },
 
-  methods: {
-    onFocus(event) {
-      if (this.setRadioGroupSelectedItem) {
-        this.setRadioGroupSelectedItem(this.value);
-      }
+  /**
+   * Set label placement related from the default slot.
+   * @values left, right
+   */
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, URadio).default.labelAlign,
+  },
 
-      this.$emit("update:value", event.target.value);
-    },
+  /**
+   * Set radio disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, URadio).default.disabled,
   },
-};
-</script>
 
-<style lang="postcss" scoped>
-.mono-radio {
-  @apply border border-solid border-gray-300;
-  @apply h-6 w-6;
-
-  &:hover {
-    @apply border-gray-400;
-  }
-
-  &:active {
-    @apply border-gray-900 bg-gray-900;
-  }
-
-  &:focus {
-    @apply border-gray-500 !bg-gray-900 ring-4 ring-gray-200;
-  }
-
-  &:checked {
-    @apply border-gray-900 bg-gray-900;
-
-    &:hover {
-      @apply bg-gray-900;
-    }
-  }
-
-  &:disabled {
-    @apply border-gray-100 bg-gray-100;
-  }
-
-  &-wrapper {
-    @apply inline-flex;
-  }
-
-  &-label {
-    @apply block;
-    @apply text-base font-normal text-gray-900;
-    @apply pl-4 pt-0.5;
-  }
-
-  &-description {
-    @apply text-xs font-normal text-gray-500/[85];
-    @apply pl-4 pt-1;
-  }
+  /**
+   * Set radio checked.
+   */
+  checked: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, URadio).default.checked,
+  },
+
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:value"]);
+
+const setRadioGroupSelectedItem = inject("setRadioGroupSelectedItem", null);
+const getRadioGroupName = inject("getRadioGroupName", null);
+const getRadioGroupColor = inject("getRadioGroupColor", null);
+const getRadioGroupSize = inject("getRadioGroupSize", null);
+
+const radioName = ref("");
+const radioColor = ref(getRadioGroupColor ? getRadioGroupColor() : props.color);
+const radioSize = ref(getRadioGroupSize ? getRadioGroupSize() : props.size);
+
+const { radioAttrs, labelAttrs } = useAttrs(props, { radioColor, radioSize });
+
+onMounted(() => {
+  radioName.value = props.name || getRadioGroupName;
+});
+
+watchEffect(() => (radioColor.value = getRadioGroupColor ? getRadioGroupColor() : props.color));
+watchEffect(() => (radioSize.value = getRadioGroupSize ? getRadioGroupSize() : props.size));
+
+function onFocus(event) {
+  setRadioGroupSelectedItem && setRadioGroupSelectedItem(props.value);
+
+  emit("update:value", event.target.value);
 }
-</style>
+</script>

package/ui.form-radio-card/Docs.mdx

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