vueless 0.0.2 → 0.0.3

package/ui.other-dot/index.vue

@@ -1,100 +1,52 @@
 <template>
-  <div class="mono-dot" :class="dotClasses" />
+  <div :data-cy="dataCy" v-bind="wrapperAttrs" />
 </template>
 
-<script>
-export default {
-  name: "UDot",
+<script setup>
+import UIService from "vueless/service.ui";
 
-  props: {
-    /**
-     * The dot color.
-     * @values gray, red, orange, yellow, green, blue, violet, fuchsia, black, white
-     */
-    color: {
-      type: String,
-      default: "gray",
-    },
+import { UDot } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
 
-    /**
-     * The dot size.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-  },
-
-  computed: {
-    dotClasses() {
-      const size = `size-${this.size}`;
-      const color = `mono-dot-color-${this?.color}`;
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UDot", inheritAttrs: false });
 
-      return [color, size];
-    },
+const props = defineProps({
+  /**
+   * Dot color.
+   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
+   */
+  color: {
+    type: String,
+    default: UIService.get(defaultConfig, UDot).default.color,
   },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-dot {
-  @apply rounded-full;
-
-  &-color {
-    &-red {
-      @apply bg-red-500;
-    }
-
-    &-orange {
-      @apply bg-orange-500;
-    }
-
-    &-yellow {
-      @apply bg-yellow-500;
-    }
-
-    &-green {
-      @apply bg-green-500;
-    }
-
-    &-blue {
-      @apply bg-blue-500;
-    }
 
-    &-fuchsia {
-      @apply bg-fuchsia-500;
-    }
-
-    &-violet {
-      @apply bg-violet-500;
-    }
-
-    &-gray {
-      @apply bg-gray-500;
-    }
-
-    &-black {
-      @apply bg-gray-900;
-    }
-
-    &-white {
-      @apply bg-white;
-    }
-  }
-}
+  /**
+   * Dot size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UDot).default.size,
+  },
 
-.size {
-  &-sm {
-    @apply mr-1 h-1 w-1;
-  }
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-  &-md {
-    @apply mr-1 h-1.5 w-1.5;
-  }
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
 
-  &-lg {
-    @apply mr-1 h-2 w-2;
-  }
-}
-</style>
+const { wrapperAttrs } = useAttrs(props);
+</script>

package/ui.other-loader/composables/attrs.composable.js

@@ -0,0 +1,51 @@
+import useUI from "vueless/composable.ui";
+import { cva, cx } from "vueless/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 { loader, ellipse } = config.value;
+
+  const cvaLoader = cva({
+    base: loader.base,
+    variants: loader.variants,
+    compoundVariants: loader.compoundVariants,
+  });
+
+  const cvaEllipse = cva({
+    base: ellipse.base,
+    variants: ellipse.variants,
+    compoundVariants: ellipse.compoundVariants,
+  });
+
+  const loaderClasses = computed(() =>
+    cvaLoader({
+      size: props.size,
+    }),
+  );
+
+  const ellipseClasses = computed(() =>
+    setColor(
+      cvaEllipse({
+        size: props.size,
+        color: props.color,
+      }),
+      props.color,
+    ),
+  );
+
+  const loaderAttrs = getAttrs("loader", { classes: loaderClasses });
+  const ellipseRaw = getAttrs("ellipse", { classes: ellipseClasses });
+
+  const ellipseAttrs = computed(() => (classes) => ({
+    ...ellipseRaw.value,
+    class: cx([ellipseRaw.value.class, classes]),
+  }));
+
+  return {
+    loaderAttrs,
+    ellipseAttrs,
+  };
+}

package/ui.other-loader/configs/default.config.js

@@ -0,0 +1,47 @@
+export default /*tw*/ {
+  loader: {
+    base: "relative mx-1 flex h-4 items-center",
+    variants: {
+      size: {
+        sm: "w-9",
+        md: "w-[3.625rem]",
+        lg: "w-20",
+      },
+    },
+  },
+  ellipse: {
+    base: `absolute rounded-full bg-{color}-500 ease-[cubic-bezier(0,1,1,0)]`,
+    variants: {
+      color: {
+        white: "bg-white",
+        grayscale: "bg-gray-900",
+      },
+      size: {
+        sm: `
+            h-1.5 w-1.5
+            [&:nth-child(1)]:left-1
+            [&:nth-child(4)]:left-7
+          `,
+        md: `
+            h-2.5 w-2.5
+            [&:nth-child(1)]:left-1.5
+            [&:nth-child(2)]:left-1.5
+            [&:nth-child(3)]:left-6
+            [&:nth-child(4)]:left-[2.625rem]
+          `,
+        lg: `
+            h-4 w-4
+            [&:nth-child(1)]:left-2
+            [&:nth-child(2)]:left-2
+            [&:nth-child(3)]:left-8
+            [&:nth-child(4)]:left-14
+          `,
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    color: "brand",
+  },
+  safelist: (colors) => [{ pattern: `bg-(${colors})-500` }],
+};

package/ui.other-loader/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 ULoader = "ULoader";

package/ui.other-loader/index.stories.js

@@ -1,28 +1,29 @@
-import UDot from "vueless/ui.other-dot";
+import ULoader from "vueless/ui.other-loader";
 import URow from "vueless/ui.container-row";
 
 import { getArgTypes } from "vueless/service.storybook";
 
 export default {
-  title: "Other / Loader (create)",
-  component: UDot,
+  id: "9020",
+  title: "Other / Loader",
+  component: ULoader,
   argTypes: {
-    ...getArgTypes(UDot.name),
+    ...getArgTypes(ULoader.name),
   },
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UDot },
+  components: { ULoader },
   setup() {
     return { args };
   },
   template: `
-    <UDot v-bind="args" />
+    <ULoader v-bind="args" />
   `,
 });
 
-const ColorsTemplate = (args, { argTypes }) => ({
-  components: { UDot, URow },
+const ColorsTemplate = (args, { argTypes } = {}) => ({
+  components: { ULoader, URow },
   setup() {
     return {
       args,
@@ -31,7 +32,7 @@ const ColorsTemplate = (args, { argTypes }) => ({
   },
   template: `
     <URow>
-      <UDot
+      <ULoader
         v-for="(color, index) in colors"
         :color="color"
         v-bind="args"
@@ -41,8 +42,8 @@ const ColorsTemplate = (args, { argTypes }) => ({
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
-  components: { UDot, URow },
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { ULoader, URow },
   setup() {
     return {
       args,
@@ -51,10 +52,10 @@ const SizesTemplate = (args, { argTypes }) => ({
   },
   template: `
     <URow>
-      <UDot
+      <ULoader
         v-for="(size, index) in sizes"
         :size="size"
-        :text="getText(size)"
+        :label="getText(size)"
         v-bind="args"
         :key="index"
       />

package/ui.other-loader/index.vue

@@ -1,136 +1,87 @@
 <template>
-  <div class="mono-internal-loader" :class="loaderCLasses">
-    <div
-      v-for="ellipse in ellipsesAmount"
-      :key="ellipse"
-      class="mono-internal-loader-ellipse"
-      :class="ellipseClasses"
-    />
+  <div v-bind="loaderAttrs">
+    <div v-for="ellipse in ellipsesAmount" :key="ellipse" v-bind="ellipseAttrs(ellipseClasses)" />
   </div>
 </template>
 
-<script>
-export default {
-  name: "ULoader",
-
-  props: {
-    /**
-     * The size of the button.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
+<script setup>
+import { computed, ref } from "vue";
+import UIService from "vueless/service.ui";
+
+import { ULoader } 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: "ULoader", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * The size of the button.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, ULoader).default.size,
   },
 
-  data() {
-    return {
-      ellipsesAmount: 4,
-    };
+  /**
+   * Loader color.
+   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
+   */
+  color: {
+    type: String,
+    default: UIService.get(defaultConfig, ULoader).default.color,
   },
+});
 
-  computed: {
-    loaderCLasses() {
-      const size = `mono-internal-loader-${this.size}`;
+const ellipsesAmount = ref(4);
 
-      return [size];
-    },
+const { loaderAttrs, ellipseAttrs } = useAttrs(props);
 
-    ellipseClasses() {
-      const size = `mono-internal-loader-ellipse-${this.size}`;
-
-      return [size];
-    },
-  },
-};
+const ellipseClasses = computed(() => [
+  "vueless-internal-loader-ellipse",
+  `vueless-internal-loader-ellipse-${props.size}`,
+]);
 </script>
 
 <style scoped lang="postcss">
-.mono-internal-loader {
-  @apply relative mx-1 flex h-4 items-center;
-
-  &-sm {
-    @apply w-9;
+.vueless-internal-loader-ellipse {
+  &:nth-child(1) {
+    @apply animate-[lds-ellipsis1_0.6s_infinite];
   }
 
-  &-md {
-    @apply w-[3.625rem];
+  &:nth-child(4) {
+    @apply animate-[lds-ellipsis3_0.6s_infinite];
   }
 
-  &-lg {
-    @apply w-20;
-  }
-
-  &-ellipse {
-    @apply absolute rounded-full bg-white ease-[cubic-bezier(0,1,1,0)];
-
-    &:nth-child(1) {
-      @apply animate-[lds-ellipsis1_0.6s_infinite];
+  &-sm {
+    &:nth-child(2) {
+      @apply animate-[lds-ellipsis2-sm_0.6s_infinite];
     }
 
-    &:nth-child(4) {
-      @apply animate-[lds-ellipsis3_0.6s_infinite];
+    &:nth-child(3) {
+      @apply animate-[lds-ellipsis2-sm_0.6s_infinite];
     }
+  }
 
-    &-sm {
-      @apply h-1.5 w-1.5;
-
-      &:nth-child(1) {
-        @apply left-1;
-      }
-
-      &:nth-child(2) {
-        @apply left-1 animate-[lds-ellipsis2-sm_0.6s_infinite];
-      }
-
-      &:nth-child(3) {
-        @apply left-4 animate-[lds-ellipsis2-sm_0.6s_infinite];
-      }
-
-      &:nth-child(4) {
-        @apply left-7;
-      }
+  &-md {
+    &:nth-child(2) {
+      @apply animate-[lds-ellipsis2-md_0.6s_infinite];
     }
 
-    &-md {
-      @apply h-2.5 w-2.5;
-
-      &:nth-child(1) {
-        @apply left-1.5;
-      }
-
-      &:nth-child(2) {
-        @apply left-1.5 animate-[lds-ellipsis2-md_0.6s_infinite];
-      }
-
-      &:nth-child(3) {
-        @apply left-6 animate-[lds-ellipsis2-md_0.6s_infinite];
-      }
-
-      &:nth-child(4) {
-        @apply left-[2.625rem];
-      }
+    &:nth-child(3) {
+      @apply animate-[lds-ellipsis2-md_0.6s_infinite];
     }
+  }
 
-    &-lg {
-      @apply h-4 w-4;
-
-      &:nth-child(1) {
-        @apply left-2;
-      }
-
-      &:nth-child(2) {
-        @apply left-2 animate-[lds-ellipsis2-lg_0.6s_infinite];
-      }
-
-      &:nth-child(3) {
-        @apply left-8 animate-[lds-ellipsis2-lg_0.6s_infinite];
-      }
+  &-lg {
+    &:nth-child(2) {
+      @apply animate-[lds-ellipsis2-lg_0.6s_infinite];
+    }
 
-      &:nth-child(4) {
-        @apply left-14;
-      }
+    &:nth-child(3) {
+      @apply animate-[lds-ellipsis2-lg_0.6s_infinite];
     }
   }
 }

package/ui.text-alert/composables/attrs.composable.js

@@ -0,0 +1,48 @@
+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, setColor, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { wrapper, body } = config.value;
+
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const cvaBody = cva({
+    base: body.base,
+    variants: body.variants,
+    compoundVariants: body.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() =>
+    setColor(
+      cvaWrapper({
+        color: props.color,
+        bordered: props.bordered,
+      }),
+      props.color,
+    ),
+  );
+
+  const bodyClasses = computed(() => cvaBody({ size: props.size }));
+
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  const bodyAttrs = getAttrs("body", { classes: bodyClasses });
+  const buttonAttrs = getAttrs("button", { isComponent: true });
+  const iconAttrs = getAttrs("icon", { isComponent: true });
+
+  return {
+    config,
+    wrapperAttrs,
+    bodyAttrs,
+    buttonAttrs,
+    iconAttrs,
+    hasSlotContent,
+  };
+}

package/ui.text-alert/configs/default.config.js

@@ -0,0 +1,51 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "p-4 space-x-4 flex justify-between items-start rounded-lg bg-{color}-50 text-{color}-700",
+    variants: {
+      color: {
+        grayscale: "bg-gray-100 text-gray-900",
+      },
+      bordered: {
+        true: "border border-{color}-100",
+      },
+    },
+    compoundVariants: [{ color: "grayscale", bordered: true, class: "border-{color}-200" }],
+  },
+  body: {
+    base: `
+      space-y-4 font-normal leading-normal
+      [&_b]:font-bold [&_i]:italic [&_p]:font-normal
+      [&_a:not([class])]:underline [&_a:not([class])]:underline-offset-4
+      [&_a:not([class]):hover]:no-underline [&_a:not([class])]:font-bold
+      [&_ul]:font-normal [&_ol]:font-normal
+      [&_ul]:leading-[1.125rem] [&_ol]:leading-[1.125rem]
+      [&_ul]:list-inside [&_ol]:list-inside
+      [&_ul]:list-disc [&_ol]:list-decimal
+      [&_ul]:ml-2 [&_ol]:ml-2
+    `,
+    variants: {
+      size: {
+        xs: "text-xs",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+      },
+    },
+  },
+  button: "",
+  icon: "",
+  iconName: "close",
+  defaultVariants: {
+    color: "grayscale",
+    size: "md",
+    timeout: 0,
+    html: undefined,
+    bordered: false,
+    closeButton: false,
+  },
+  safelist: (colors) => [
+    { pattern: `bg-(${colors})-50` },
+    { pattern: `text-(${colors})-700` },
+    { pattern: `border-(${colors})-100` },
+  ],
+};

package/ui.text-alert/constatns/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 UAlert = "UAlert";