vueless 0.0.4 → 0.0.6

package/src/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/src/ui.text-empty/index.vue

@@ -27,6 +27,7 @@
 <script setup>
 import { computed } from "vue";
 
+import UIcon from "../ui.image-icon";
 import UIService from "../service.ui";
 
 import { UEmpty } from "./constants";

package/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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";

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

@@ -0,0 +1,106 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import UHeader from "../ui.text-header";
+import UGroup from "../ui.container-group";
+
+export default {
+  id: "4010",
+  title: "Text & Content / Header",
+  component: UHeader,
+  args: {
+    label: "Header",
+  },
+  argTypes: {
+    ...getArgTypes(UHeader.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UHeader },
+  setup() {
+    const slots = getSlotNames(UHeader.name);
+
+    return { args, slots };
+  },
+  template: `
+    <UHeader v-bind="args" />
+  `,
+});
+
+const WeightTemplate = (args, { argTypes } = {}) => ({
+  components: { UHeader, UGroup },
+  setup() {
+    return {
+      args,
+      weights: argTypes.weight.options,
+    };
+  },
+  template: `
+    <UGroup>
+      <UHeader
+        v-for="(weight, index) in weights"
+        :key="index"
+        v-bind="args"
+        :weight="weight"
+        :label="'Header ' + weight"
+      />
+    </UGroup>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UHeader, UGroup },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <UGroup>
+      <UHeader
+        v-for="(size, index) in sizes"
+        :key="index"
+        v-bind="args"
+        :size="size"
+        :label="'Header ' + size"
+      />
+    </UGroup>
+  `,
+});
+
+const ColorsTemplate = (args, { argTypes } = {}) => ({
+  components: { UHeader, UGroup },
+  setup() {
+    return {
+      args,
+      colors: argTypes.color.options,
+    };
+  },
+  template: `
+    <UGroup>
+      <UHeader
+        v-for="(color, index) in colors"
+        v-bind="args"
+        :key="index"
+        :color="color"
+        :label="'Header ' + color"
+      />
+    </UGroup>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Weights = WeightTemplate.bind({});
+Weights.args = {};
+
+export const Sizes = SizesTemplate.bind({});
+Sizes.args = {};
+
+export const Underlined = SizesTemplate.bind({});
+Underlined.args = { underlined: true };
+
+export const Colors = ColorsTemplate.bind({});
+Colors.args = {};

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

@@ -0,0 +1,83 @@
+<template>
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+    <template v-if="label">
+      {{ label }}
+    </template>
+
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import UIService from "../service.ui";
+
+import { UHeader } 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: "UHeader", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Set label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Set size.
+   * @values xs, sm, md, lg, xl, 2xl
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UHeader).default.size,
+  },
+
+  /**
+   * Set weight.
+   * @values regular, medium, bold
+   */
+  weight: {
+    type: String,
+    default: UIService.get(defaultConfig, UHeader).default.weight,
+  },
+
+  /**
+   * Header 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, UHeader).default.color,
+  },
+
+  /**
+   * Show the underline.
+   */
+  underlined: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UHeader).default.underlined,
+  },
+
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const { wrapperAttrs } = useAttrs(props);
+</script>