vueless 0.0.3 → 0.0.4

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

@@ -1,43 +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 } = useUI(defaultConfig, () => props.config);
-  const { title, description } = config.value;
-
-  const cvaTitle = cva({
-    base: title.base,
-    variants: title.variants,
-    compoundVariants: title.compoundVariants,
-  });
-
-  const cvaDescription = cva({
-    base: description.base,
-    variants: description.variants,
-    compoundVariants: description.compoundVariants,
-  });
-
-  const titleClasses = computed(() => cvaTitle({ size: props.size }));
-
-  const descriptionClasses = computed(() => cvaDescription({ size: props.size }));
-
-  const wrapperAttrs = getAttrs("wrapper");
-  const headerAttrs = getAttrs("header");
-  const iconAttrs = getAttrs("icon", { isComponent: true });
-  const footerAttrs = getAttrs("footer");
-  const titleAttrs = getAttrs("title", { classes: titleClasses });
-  const descriptionAttrs = getAttrs("description", { classes: descriptionClasses });
-
-  return {
-    config,
-    titleAttrs,
-    descriptionAttrs,
-    wrapperAttrs,
-    headerAttrs,
-    footerAttrs,
-    iconAttrs,
-  };
-}

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

@@ -1,30 +0,0 @@
-export default /*tw*/ {
-  wrapper: "flex flex-col items-center justify-center size-full",
-  header: "mb-4 flex justify-center",
-  icon: "",
-  iconName: "emoji_food_beverage",
-  footer: "mt-4 flex justify-center",
-  title: {
-    base: "mb-2 font-medium text-center",
-    variants: {
-      size: {
-        sm: "text-base",
-        md: "text-lg",
-        lg: "text-xl",
-      },
-    },
-  },
-  description: {
-    base: "text-center",
-    variants: {
-      size: {
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
-      },
-    },
-  },
-  defaultVariants: {
-    size: "md",
-  },
-};

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

@@ -1,106 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UEmpty from "vueless/ui.text-empty";
-import UButton from "vueless/ui.button";
-import UIcon from "vueless/ui.image-icon";
-import URow from "vueless/ui.container-row";
-
-export default {
-  id: "4080",
-  title: "Text & Content / Empty",
-  component: UEmpty,
-  args: {
-    title: "No contacts",
-    description: "There is no contacts in the list.",
-  },
-  argTypes: {
-    ...getArgTypes(UEmpty.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UEmpty },
-  setup() {
-    const slots = getSlotNames(UEmpty.name);
-
-    return { args, slots };
-  },
-  template: `
-    <UEmpty v-bind="args">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
-    </UEmpty>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UEmpty, UIcon, UButton },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UEmpty v-bind="args">
-      ${args.slotTemplate}
-    </UEmpty>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UEmpty, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UEmpty
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        :title="size"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = { title: "" };
-
-export const slotHeader = SlotTemplate.bind({});
-slotHeader.args = {
-  slotTemplate: `
-    <template #header>
-      <UIcon
-        name="person"
-        color="blue"
-        size="2xl"
-        pill
-       />
-    </template>
-  `,
-};
-
-export const slotDefault = SlotTemplate.bind({});
-slotDefault.args = {
-  slotTemplate: `
-    <template #default>
-      <span>Some unique <b><code>HTML</code></b> or <b><code>Components</code></b>...</span>
-    </template>
-  `,
-};
-
-export const slotFooter = SlotTemplate.bind({});
-slotFooter.args = {
-  slotTemplate: `
-    <template #footer>
-        <UButton label="Add new one" size="sm" variant="thirdary" filled />
-    </template>
-  `,
-};

package/ui.text-empty/index.vue

@@ -1,94 +0,0 @@
-<template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs">
-    <div v-bind="headerAttrs">
-      <!-- @slot Use it to add something to the header. -->
-      <slot name="header">
-        <UIcon :name="config.iconName" color="gray" :size="iconSize" pill v-bind="iconAttrs" />
-      </slot>
-    </div>
-
-    <!-- @slot Use it to add something inside. -->
-    <slot>
-      <div v-if="title" v-bind="titleAttrs">
-        {{ title }}
-      </div>
-      <div v-if="description" v-bind="descriptionAttrs">
-        {{ description }}
-      </div>
-    </slot>
-
-    <div v-bind="footerAttrs">
-      <!-- @slot Use it to add something to the footer. -->
-      <slot name="footer" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from "vue";
-
-import UIService from "vueless/service.ui";
-
-import { UEmpty } 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: "UEmpty", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Sets title.
-   */
-  title: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Sets description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Sets component size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: UIService.get(defaultConfig, UEmpty).default.size,
-  },
-
-  /**
-   * Sets component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Sets data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const { config, titleAttrs, descriptionAttrs, wrapperAttrs, headerAttrs, footerAttrs, iconAttrs } =
-  useAttrs(props);
-
-const iconSize = computed(() => {
-  const sizes = {
-    sm: "xl",
-    md: "2xl",
-    lg: "3xl",
-  };
-
-  return sizes[props.size];
-});
-</script>

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

@@ -1,37 +0,0 @@
-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, { focus }) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { text } = config.value;
-
-  const cvaText = cva({
-    base: text.base,
-    variants: text.variants,
-    compoundVariants: text.compoundVariants,
-  });
-
-  const textClasses = computed(() =>
-    cvaText({
-      focus: Boolean(focus.value),
-    }),
-  );
-
-  const textAttrs = getAttrs("text", { classes: textClasses });
-  const fileAttrs = getAttrs("file", { isComponent: true });
-  const infoAttrs = getAttrs("info");
-  const iconAttrs = getAttrs("icon", { isComponent: true });
-  const itemImageAttrs = getAttrs("itemImage");
-
-  return {
-    config,
-    fileAttrs,
-    infoAttrs,
-    iconAttrs,
-    textAttrs,
-    itemImageAttrs,
-  };
-}

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

@@ -1,15 +0,0 @@
-export default /*tw*/ {
-  file: "",
-  info: "flex items-start",
-  icon: " mr-3",
-  iconDescriptionName: "description",
-  itemImage: "rounded-sm",
-  text: {
-    base: "whitespace-normal pt-0.5 hover:underline hover:decoration-dashed hover:underline-offset-4",
-    variants: {
-      focus: {
-        true: "underline decoration-dashed underline-offset-4",
-      },
-    },
-  },
-};

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

@@ -1,29 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UFile from "vueless/ui.text-file";
-
-export default {
-  id: "4050",
-  title: "Text & Content / File",
-  component: UFile,
-  args: {
-    label: "some file text",
-    url: "https://storybook.js.org/",
-  },
-  argTypes: {
-    ...getArgTypes(UFile.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UFile },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UFile v-bind="args" />
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};

package/ui.text-file/index.vue

@@ -1,93 +0,0 @@
-<template>
-  <ULink :url="url" no-ring target-blank :data-cy="dataCy" v-bind="fileAttrs">
-    <slot name="left" :file="{ id, text, url, imageUrl }" />
-
-    <div v-bind="infoAttrs">
-      <img v-if="imageUrl" :src="imageUrl" v-bind="itemImageAttrs" />
-
-      <UIcon
-        v-else
-        :name="config.iconDescriptionName"
-        color="gray"
-        interactive
-        v-bind="iconAttrs"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-
-      <span v-bind="textAttrs" v-text="label" />
-    </div>
-
-    <slot name="right" :file="{ id, label, url, imageUrl }" />
-  </ULink>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-import ULink from "vueless/ui.button-link";
-import UIcon from "vueless/ui.image-icon";
-import { getRandomId } from "vueless/service.ui";
-
-import { useAttrs } from "./composables/attrs.composable";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UFile", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Set url link for the file.
-   */
-  url: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Set image url.
-   */
-  imageUrl: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Set label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Generates unique element id.
-   * @ignore
-   */
-  id: {
-    type: String,
-    default: () => getRandomId(),
-  },
-
-  /**
-   * Sets data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const focus = ref(false);
-
-const { config, fileAttrs, infoAttrs, iconAttrs, textAttrs, itemImageAttrs } = useAttrs(props, {
-  focus,
-});
-
-function onFocus() {
-  focus.value = true;
-}
-
-function onBlur() {
-  focus.value = false;
-}
-</script>

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

@@ -1,19 +0,0 @@
-import useUI from "vueless/composable.ui";
-
-import defaultConfig from "../configs/default.config";
-
-export function useAttrs(props) {
-  const { getAttrs } = useUI(defaultConfig, () => props.config);
-
-  const filesAttrs = getAttrs("files");
-  const labelAttrs = getAttrs("label");
-  const bodyAttrs = getAttrs("body");
-  const fileAttrs = getAttrs("file", { isComponent: true });
-
-  return {
-    filesAttrs,
-    labelAttrs,
-    bodyAttrs,
-    fileAttrs,
-  };
-}

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

@@ -1,9 +0,0 @@
-export default /*tw*/ {
-  files: "",
-  label: "block text-sm font-normal text-gray-500",
-  body: "space-y-2 mt-4",
-  file: "block",
-  defaultVariants: {
-    placement: "topInside",
-  },
-};

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

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

@@ -1,32 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UFiles from "vueless/ui.text-files";
-
-export default {
-  id: "4060",
-  title: "Text & Content / Files",
-  component: UFiles,
-  args: {
-    label: "Label",
-    options: [
-      { text: "some file text 1", url: "https://storybook.js.org/" },
-      { text: "some file text 2", url: "https://storybook.js.org/" },
-    ],
-  },
-  argTypes: {
-    ...getArgTypes(UFiles.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UFiles },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UFiles v-bind="args" />
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};

package/ui.text-files/index.vue

@@ -1,87 +0,0 @@
-<template>
-  <div :data-cy="dataCy" v-bind="filesAttrs">
-    <ULabel :label="label" :description="description" v-bind="labelAttrs">
-      <div v-bind="bodyAttrs">
-        <slot>
-          <UFile
-            v-for="(option, index) in options"
-            :id="option.id"
-            :key="option.text"
-            :label="option.text"
-            :url="option.url"
-            :data-cy="`${dataCy}-item-${index}`"
-            v-bind="fileAttrs"
-          >
-            <template #left="{ file }">
-              <!-- @slot Use it to add something left. -->
-              <slot name="left" :file="file" />
-            </template>
-
-            <template #right="{ file }">
-              <!-- @slot Use it to add something right. -->
-              <slot name="right" :file="file" />
-            </template>
-          </UFile>
-        </slot>
-      </div>
-    </ULabel>
-  </div>
-</template>
-
-<script setup>
-import UFile from "vueless/ui.text-file";
-
-import UIService from "vueless/service.ui";
-
-import { UFiles } 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: "UFiles", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Set files label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Set description text.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Set label placement related from the default slot.
-   * @values topInside, top, left, right
-   */
-  placement: {
-    type: String,
-    default: UIService.get(defaultConfig, UFiles).default.placement,
-  },
-
-  /**
-   * Set options for files.
-   */
-  options: {
-    type: Array,
-    default: () => [],
-  },
-
-  /**
-   * Sets data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const { filesAttrs, labelAttrs, bodyAttrs, fileAttrs } = useAttrs(props);
-</script>

package/ui.text-header/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 />

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

@@ -1,34 +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 } = useUI(defaultConfig, () => props.config);
-  const { wrapper } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const wrapperClasses = computed(() =>
-    setColor(
-      cvaWrapper({
-        size: props.size,
-        weight: props.weight,
-        underlined: props.underlined,
-        color: props.color,
-      }),
-      props.color,
-    ),
-  );
-
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
-
-  return {
-    wrapperAttrs,
-  };
-}

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