vueless 0.0.3 → 0.0.4

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

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

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

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

@@ -1,78 +0,0 @@
-import ULoader from "vueless/ui.other-loader";
-import URow from "vueless/ui.container-row";
-
-import { getArgTypes } from "vueless/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/ui.other-loader/index.vue

@@ -1,136 +0,0 @@
-<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 "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,
-  },
-
-  /**
-   * 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/ui.text-alert/composables/attrs.composable.js

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

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

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

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

@@ -1,157 +0,0 @@
-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: "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/ui.text-alert/index.vue

@@ -1,121 +0,0 @@
-<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 "vueless/ui.image-icon/index.vue";
-import UIService from "vueless/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/ui.text-badge/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 />