vueless 0.0.10 → 0.0.12

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

@@ -0,0 +1,106 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import UEmpty from "../ui.text-empty";
+import UButton from "../ui.button";
+import UIcon from "../ui.image-icon";
+import URow from "../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

@@ -0,0 +1,95 @@
+<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 UIcon from "../ui.image-icon";
+import UIService from "../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

@@ -0,0 +1,37 @@
+import { computed } from "vue";
+import useUI from "../../composable.ui";
+import { cva } from "../../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

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

@@ -0,0 +1,29 @@
+import { getArgTypes } from "../service.storybook";
+
+import UFile from "../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

@@ -0,0 +1,93 @@
+<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 "../ui.button-link";
+import UIcon from "../ui.image-icon";
+import { getRandomId } from "../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

@@ -0,0 +1,19 @@
+import useUI from "../../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

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

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

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

@@ -0,0 +1,32 @@
+import { getArgTypes } from "../service.storybook";
+
+import UFiles from "../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

@@ -0,0 +1,87 @@
+<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 "../ui.text-file";
+import ULabel from "../ui.form-label";
+import UIService from "../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

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

@@ -0,0 +1,34 @@
+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 } = 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/configs/default.config.js

@@ -0,0 +1,45 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "text-{color}-600 !leading-none",
+    variants: {
+      size: {
+        xs: "text-lg",
+        sm: "text-xl",
+        md: "text-2xl",
+        lg: "text-3xl",
+        xl: "text-4xl",
+        "2xl": "text-5xl",
+      },
+      weight: {
+        regular: "font-normal",
+        medium: "font-medium",
+        bold: "font-bold",
+      },
+      color: {
+        brand: "text-brand",
+        white: "text-white",
+        grayscale: "text-gray-900",
+      },
+      underlined: {
+        true: "border-b border-{color}-600",
+      },
+    },
+    compoundVariants: [
+      { underlined: true, size: "xs", class: "pb-1.5" },
+      { underlined: true, size: "sm", class: "pb-2" },
+      { underlined: true, size: "md", class: "pb-2" },
+      { underlined: true, size: "lg", class: "pb-2.5" },
+      { underlined: true, size: "xl", class: "pb-2.5" },
+      { underlined: true, size: "2xl", class: "pb-3" },
+      { underlined: true, color: "white", class: "border-white" },
+      { underlined: true, color: "grayscale", class: "border-gray-600" },
+    ],
+  },
+  defaultVariants: {
+    color: "grayscale",
+    weight: "medium",
+    size: "md",
+    underlined: false,
+  },
+  safelist: (colors) => [{ pattern: `text-(${colors})-600` }, { pattern: `border-(${colors})-600` }],
+};

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