vueless 0.0.2 → 0.0.3

package/ui.text-alert/index.stories.js

@@ -3,10 +3,11 @@ import { getArgTypes, getSlotNames } from "vueless/service.storybook";
 import UAlert from "vueless/ui.text-alert";
 import URow from "vueless/ui.container-row";
 export default {
+  id: "4030",
   title: "Text & Content / Alert",
   component: UAlert,
   args: {
-    text: "U Hint",
+    text: "UHint",
     slotTemplate: `
       <template #default>
         <p>
@@ -38,7 +39,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const ColorsTemplate = (args, { argTypes }) => ({
+const ColorsTemplate = (args, { argTypes } = {}) => ({
   components: { UAlert, URow },
   setup() {
     return {
@@ -50,8 +51,30 @@ const ColorsTemplate = (args, { argTypes }) => ({
     <URow>
       <UAlert
         v-for="(color, index) in colors"
+        v-bind="args"
         :color="color"
+        :key="index"
+      >
+        ${args.slotTemplate}
+      </UAlert>
+    </URow>
+  `,
+});
+
+const SizeTemplate = (args, { argTypes } = {}) => ({
+  components: { UAlert, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <UAlert
+        v-for="(size, index) in sizes"
         v-bind="args"
+        :size="size"
         :key="index"
       >
         ${args.slotTemplate}
@@ -65,7 +88,17 @@ Default.args = {};
 
 export const colors = ColorsTemplate.bind({});
 colors.args = {
-  closeButton: true,
+  closeIcon: true,
+  slotTemplate: `
+     <template #default>
+       text
+     </template>
+  `,
+};
+
+export const size = SizeTemplate.bind({});
+size.args = {
+  closeIcon: true,
   slotTemplate: `
      <template #default>
        text
@@ -73,9 +106,9 @@ colors.args = {
   `,
 };
 
-export const closeButton = DefaultTemplate.bind({});
-closeButton.args = {
-  closeButton: true,
+export const closeIcon = DefaultTemplate.bind({});
+closeIcon.args = {
+  closeIcon: true,
   slotTemplate: `
      <template #default>
        some text

package/ui.text-alert/index.vue

@@ -1,236 +1,121 @@
 <template>
-  <t-alert
-    class="mono-hint"
-    :class="colorClass"
-    show
-    :timeout="timeout"
-    :data-cy="dataCy"
-    @hidden="onHidden"
-  >
-    <div class="mono-hint-wrapper">
+  <div v-if="isShownAlert" :data-cy="dataCy" v-bind="wrapperAttrs">
+    <div v-bind="bodyAttrs">
       <!-- @slot Use it to add something inside. -->
-      <div v-if="!$slots.default" v-html="html" />
       <slot />
+
+      <div v-if="!hasSlotContent(slots['default'])" v-html="html" />
     </div>
-  </t-alert>
+
+    <UButton size="sm" variant="thirdary" :color="color" square v-bind="buttonAttrs">
+      <UIcon
+        v-if="closeIcon"
+        :color="color"
+        :name="config.iconName"
+        size="xs"
+        :data-cy="`${dataCy}-button`"
+        v-bind="iconAttrs"
+        @click="onHidden"
+      />
+    </UButton>
+  </div>
 </template>
 
-<script>
-import TAlert from "vueless/library.vue-tailwind-3/t-alert";
+<script setup>
+import { onMounted, ref, useSlots } from "vue";
 
-export default {
-  name: "UAlert",
+import UIcon from "vueless/ui.image-icon/index.vue";
+import UIService from "vueless/service.ui";
 
-  components: {
-    TAlert,
-  },
+import { UAlert } from "./constatns";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
 
-  props: {
-    /**
-     * Set html to render inside of UAlert.
-     */
-    html: {
-      type: String,
-      default: undefined,
-    },
-
-    /**
-     * Set text hint color.
-     * @values gray, red, orange, yellow, green, blue, violet, fuchsia
-     */
-    color: {
-      type: String,
-      default: "gray",
-    },
-
-    /**
-     * Set text hint timeout.
-     */
-    timeout: {
-      type: Number,
-      default: 0,
-    },
-
-    /**
-     * Show / hide close button.
-     */
-    closeButton: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UAlert" });
 
-  emits: ["hidden"],
+const props = defineProps({
+  /**
+   * HTML or plain text.
+   */
+  html: {
+    type: String,
+    default: UIService.get(defaultConfig, UAlert).default.html,
+  },
 
-  computed: {
-    colorClass() {
-      return this.closeButton
-        ? `mono-hint-${this.color}-active`
-        : [`mono-hint-${this.color}-disable`, "mono-hint-button-disabled"];
-    },
+  /**
+   * Hint size.
+   * @values xs, sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UAlert).default.size,
   },
 
-  methods: {
-    onHidden() {
-      this.$emit("hidden", this.message);
-    },
+  /**
+   * Hint 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, UAlert).default.color,
   },
-};
-</script>
 
-<style lang="postcss" scoped>
-.mono-hint {
-  @apply rounded-lg border-0 p-4;
-
-  &-wrapper {
-    @apply text-xs leading-normal;
-
-    :deep(h3) {
-      @apply font-medium;
-      @apply mb-0.5;
-    }
-
-    :deep(p) {
-      @apply font-normal;
-    }
-
-    :deep(b) {
-      @apply font-bold;
-    }
-
-    :deep(i) {
-      @apply italic;
-    }
-
-    :deep(ul) {
-      @apply font-normal leading-[1.125rem];
-      @apply list-inside list-disc;
-      @apply ml-2;
-    }
-
-    :deep(a) {
-      @apply block;
-      @apply font-medium;
-      @apply mt-2.5;
-    }
-  }
+  /**
+   * Show Alert with a border.
+   */
+  bordered: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UAlert).default.bordered,
+  },
 
-  &-button-disabled {
-    &:deep(button) {
-      @apply hidden;
-    }
-  }
+  /**
+   * Hint timeout.
+   */
+  timeout: {
+    type: Number,
+    default: UIService.get(defaultConfig, UAlert).default.timeout,
+  },
 
-  &-gray {
-    &-active,
-    &-disable {
-      @apply bg-gray-100 text-gray-500;
-    }
-
-    &-active {
-      &:deep(button) {
-        @apply text-gray-500 hover:bg-gray-200;
-      }
-    }
-  }
+  /**
+   * Show close button.
+   */
+  closeIcon: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UAlert).default.closeIcon,
+  },
 
-  &-red {
-    &-active,
-    &-disable {
-      @apply bg-red-50 text-red-700;
-    }
-
-    &-active {
-      &:deep(button) {
-        @apply text-red-500 hover:bg-red-200;
-      }
-    }
-  }
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-  &-orange {
-    &-active,
-    &-disable {
-      @apply bg-orange-50 text-orange-700;
-    }
-
-    &-active {
-      &:deep(button) {
-        @apply text-orange-500 hover:bg-orange-200;
-      }
-    }
-  }
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
 
-  &-yellow {
-    &-active,
-    &-disable {
-      @apply bg-yellow-50 text-yellow-700;
-    }
-
-    &-active {
-      &:deep(button) {
-        @apply text-yellow-500 hover:bg-yellow-200;
-      }
-    }
-  }
+const slots = useSlots();
+const emit = defineEmits(["hidden"]);
 
-  &-green {
-    &-active,
-    &-disable {
-      @apply bg-green-50 text-green-700;
-    }
-
-    &-active {
-      &:deep(button) {
-        @apply text-green-500 hover:bg-green-200;
-      }
-    }
-  }
+const isShownAlert = ref(true);
 
-  &-blue {
-    &-active,
-    &-disable {
-      @apply bg-blue-50 text-blue-700;
-    }
-
-    &-active {
-      &:deep(button) {
-        @apply text-blue-500 hover:bg-blue-200;
-      }
-    }
-  }
+const { config, wrapperAttrs, bodyAttrs, iconAttrs, buttonAttrs, hasSlotContent } = useAttrs(props);
 
-  &-violet {
-    &-active,
-    &-disable {
-      @apply bg-violet-50 text-violet-700;
-    }
-
-    &-active {
-      &:deep(button) {
-        @apply text-violet-500 hover:bg-violet-200;
-      }
-    }
+onMounted(() => {
+  if (props.timeout > 0) {
+    setTimeout(() => onHidden(), props.timeout);
   }
+});
 
-  &-fuchsia {
-    &-active,
-    &-disable {
-      @apply bg-fuchsia-50 text-fuchsia-700;
-    }
-
-    &-active {
-      &:deep(button) {
-        @apply text-fuchsia-500 hover:bg-fuchsia-200;
-      }
-    }
-  }
+function onHidden() {
+  isShownAlert.value = false;
+  emit("hidden");
 }
-</style>
+</script>

package/ui.text-badge/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.text-badge/composables/attrs.composable.js

@@ -0,0 +1,49 @@
+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, setColor } = 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({
+        variant: props.variant,
+        size: props.size,
+        color: props.color,
+        weight: props.weight,
+      }),
+      props.color,
+    ),
+  );
+
+  const bodyClasses = computed(() =>
+    cvaBody({
+      size: props.size,
+    }),
+  );
+
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  const bodyAttrs = getAttrs("body", { classes: bodyClasses });
+
+  return {
+    bodyAttrs,
+    wrapperAttrs,
+    hasSlotContent,
+  };
+}

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

@@ -0,0 +1,51 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "border border-solid rounded-full inline-block !leading-none",
+    variants: {
+      variant: {
+        primary: "bg-{color}-100 text-{color}-500 border-transparent",
+        secondary: "border-{color}-500 text-{color}-500",
+        thirdary: "text-{color}-500 border-transparent",
+      },
+      size: {
+        sm: "p-0.5 px-2 text-2xs",
+        md: "px-2 py-1 text-xs",
+        lg: "px-3 py-1.5 text-sm",
+      },
+      weight: {
+        regular: "font-normal",
+        medium: "font-medium",
+        bold: "font-bold",
+      },
+    },
+    compoundVariants: [
+      { color: "grayscale", variant: "primary", class: "bg-gray-100 text-gray-900" },
+      { color: "grayscale", variant: "secondary", class: "border-gray-900 text-gray-900" },
+      { color: "grayscale", variant: "thirdary", class: "text-gray-900" },
+      { color: "white", variant: "primary", class: "bg-white text-gray-900" },
+      { color: "white", variant: "secondary", class: "border-white text-white" },
+      { color: "white", variant: "thirdary", class: "text-white" },
+    ],
+  },
+  body: {
+    base: "flex items-center",
+    variants: {
+      size: {
+        sm: "space-x-1",
+        md: "space-x-1.5",
+        lg: "space-x-2",
+      },
+    },
+  },
+  defaultVariants: {
+    color: "brand",
+    size: "md",
+    weight: "medium",
+    variant: "primary",
+  },
+  safelist: (colors) => [
+    { pattern: `bg-(${colors})-100` },
+    { pattern: `border-(${colors})-500` },
+    { pattern: `text-(${colors})-500` },
+  ],
+};

package/ui.text-badge/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 UBadge = "UBadge";