vueless 0.0.4 → 0.0.6

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

@@ -0,0 +1,78 @@
+import ULoader from "../ui.other-loader";
+import URow from "../ui.container-row";
+
+import { getArgTypes } from "../service.storybook";
+
+export default {
+  id: "9020",
+  title: "Other / Loader",
+  component: ULoader,
+  argTypes: {
+    ...getArgTypes(ULoader.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { ULoader },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ULoader v-bind="args" />
+  `,
+});
+
+const ColorsTemplate = (args, { argTypes } = {}) => ({
+  components: { ULoader, URow },
+  setup() {
+    return {
+      args,
+      colors: argTypes.color.options,
+    };
+  },
+  template: `
+    <URow>
+      <ULoader
+        v-for="(color, index) in colors"
+        :color="color"
+        v-bind="args"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { ULoader, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <ULoader
+        v-for="(size, index) in sizes"
+        :size="size"
+        :label="getText(size)"
+        v-bind="args"
+        :key="index"
+      />
+    </URow>
+  `,
+  methods: {
+    getText(value) {
+      return `Tag ${value}`;
+    },
+  },
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Colors = ColorsTemplate.bind({});
+Colors.args = {};
+
+export const Sizes = SizesTemplate.bind({});
+Sizes.args = {};

package/src/ui.other-loader/index.vue

@@ -0,0 +1,136 @@
+<template>
+  <div v-bind="loaderAttrs">
+    <div v-for="ellipse in ellipsesAmount" :key="ellipse" v-bind="ellipseAttrs(ellipseClasses)" />
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import UIService from "../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,
+  },
+
+  /**
+   * 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,
+  },
+});
+
+const ellipsesAmount = ref(4);
+
+const { loaderAttrs, ellipseAttrs } = useAttrs(props);
+
+const ellipseClasses = computed(() => [
+  "vueless-internal-loader-ellipse",
+  `vueless-internal-loader-ellipse-${props.size}`,
+]);
+</script>
+
+<style scoped lang="postcss">
+.vueless-internal-loader-ellipse {
+  &:nth-child(1) {
+    @apply animate-[lds-ellipsis1_0.6s_infinite];
+  }
+
+  &:nth-child(4) {
+    @apply animate-[lds-ellipsis3_0.6s_infinite];
+  }
+
+  &-sm {
+    &:nth-child(2) {
+      @apply animate-[lds-ellipsis2-sm_0.6s_infinite];
+    }
+
+    &:nth-child(3) {
+      @apply animate-[lds-ellipsis2-sm_0.6s_infinite];
+    }
+  }
+
+  &-md {
+    &:nth-child(2) {
+      @apply animate-[lds-ellipsis2-md_0.6s_infinite];
+    }
+
+    &:nth-child(3) {
+      @apply animate-[lds-ellipsis2-md_0.6s_infinite];
+    }
+  }
+
+  &-lg {
+    &:nth-child(2) {
+      @apply animate-[lds-ellipsis2-lg_0.6s_infinite];
+    }
+
+    &:nth-child(3) {
+      @apply animate-[lds-ellipsis2-lg_0.6s_infinite];
+    }
+  }
+}
+
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+
+@keyframes lds-ellipsis2-sm {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: translate(12px, 0);
+  }
+}
+
+@keyframes lds-ellipsis2-md {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: translate(18px, 0);
+  }
+}
+
+@keyframes lds-ellipsis2-lg {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: translate(24px, 0);
+  }
+}
+</style>

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

@@ -0,0 +1,48 @@
+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, 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/src/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-gray-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/src/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";

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

@@ -0,0 +1,157 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import UAlert from "../ui.text-alert";
+import URow from "../ui.container-row";
+export default {
+  id: "4030",
+  title: "Text & Content / Alert",
+  component: UAlert,
+  args: {
+    text: "UHint",
+    slotTemplate: `
+      <template #default>
+        <p>
+          <b>Lorem ipsum dolor sit amet,</b>
+          <u>consectetur adipiscing elit,</u>
+          <em>sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua.</em>
+          <a href="https://uk.wikipedia.org/wiki/Lorem_ipsum" target="_blank">Wikipedia</a>
+        </p>
+      </template>
+    `,
+  },
+  argTypes: {
+    ...getArgTypes(UAlert.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UAlert },
+  setup() {
+    const slots = getSlotNames(UAlert.name);
+
+    return { args, slots };
+  },
+  template: `
+    <UAlert v-bind="args">
+      ${args.slotTemplate || ""}
+    </UAlert>
+  `,
+});
+
+const ColorsTemplate = (args, { argTypes } = {}) => ({
+  components: { UAlert, URow },
+  setup() {
+    return {
+      args,
+      colors: argTypes.color.options,
+    };
+  },
+  template: `
+    <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}
+      </UAlert>
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const colors = ColorsTemplate.bind({});
+colors.args = {
+  closeIcon: true,
+  slotTemplate: `
+     <template #default>
+       text
+     </template>
+  `,
+};
+
+export const size = SizeTemplate.bind({});
+size.args = {
+  closeIcon: true,
+  slotTemplate: `
+     <template #default>
+       text
+     </template>
+  `,
+};
+
+export const closeIcon = DefaultTemplate.bind({});
+closeIcon.args = {
+  closeIcon: true,
+  slotTemplate: `
+     <template #default>
+       some text
+     </template>
+  `,
+};
+
+export const paragraphs = DefaultTemplate.bind({});
+paragraphs.args = {
+  slotTemplate: `
+    <template #default>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+        ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit
+        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia
+        deserunt mollit anim id est laborum.
+      </p>
+
+    </template>
+    `,
+};
+
+export const list = DefaultTemplate.bind({});
+list.args = {
+  slotTemplate: `
+    <template #default>
+      <URow>
+        <ul>
+          <li> Lorem ipsum dolor </li>
+          <li> Lorem ipsum dolor </li>
+          <li> Lorem ipsum dolor </li>
+        </ul>
+
+        <ol>
+          <li> Lorem ipsum dolor </li>
+          <li> Lorem ipsum dolor </li>
+          <li> Lorem ipsum dolor </li>
+        </ol>
+      </URow>
+    </template>
+    `,
+};

package/src/ui.text-alert/index.vue

@@ -0,0 +1,122 @@
+<template>
+  <div v-if="isShownAlert" :data-cy="dataCy" v-bind="wrapperAttrs">
+    <div v-bind="bodyAttrs">
+      <!-- @slot Use it to add something inside. -->
+      <slot />
+
+      <div v-if="!hasSlotContent(slots['default'])" v-html="html" />
+    </div>
+
+    <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 setup>
+import { onMounted, ref, useSlots } from "vue";
+
+import UIcon from "../ui.image-icon";
+import UButton from "../ui.button";
+import UIService from "../service.ui";
+
+import { UAlert } from "./constatns";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UAlert" });
+
+const props = defineProps({
+  /**
+   * HTML or plain text.
+   */
+  html: {
+    type: String,
+    default: UIService.get(defaultConfig, UAlert).default.html,
+  },
+
+  /**
+   * Hint size.
+   * @values xs, sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UAlert).default.size,
+  },
+
+  /**
+   * 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,
+  },
+
+  /**
+   * Show Alert with a border.
+   */
+  bordered: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UAlert).default.bordered,
+  },
+
+  /**
+   * Hint timeout.
+   */
+  timeout: {
+    type: Number,
+    default: UIService.get(defaultConfig, UAlert).default.timeout,
+  },
+
+  /**
+   * Show close button.
+   */
+  closeIcon: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UAlert).default.closeIcon,
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const slots = useSlots();
+const emit = defineEmits(["hidden"]);
+
+const isShownAlert = ref(true);
+
+const { config, wrapperAttrs, bodyAttrs, iconAttrs, buttonAttrs, hasSlotContent } = useAttrs(props);
+
+onMounted(() => {
+  if (props.timeout > 0) {
+    setTimeout(() => onHidden(), props.timeout);
+  }
+});
+
+function onHidden() {
+  isShownAlert.value = false;
+  emit("hidden");
+}
+</script>

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

@@ -0,0 +1,49 @@
+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, 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,
+  };
+}