vueless 0.0.2 → 0.0.3

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

@@ -6,6 +6,7 @@ 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: {
@@ -45,7 +46,7 @@ const SlotTemplate = (args) => ({
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UEmpty, URow },
   setup() {
     return {
@@ -79,7 +80,6 @@ slotHeader.args = {
       <UIcon
         name="person"
         color="blue"
-        variant="dark"
         size="2xl"
         pill
        />
@@ -100,7 +100,7 @@ export const slotFooter = SlotTemplate.bind({});
 slotFooter.args = {
   slotTemplate: `
     <template #footer>
-        <UButton text="Add new one" size="sm" variant="thirdary" filled />
+        <UButton label="Add new one" size="sm" variant="thirdary" filled />
     </template>
   `,
 };

package/ui.text-empty/index.vue

@@ -1,23 +1,23 @@
 <template>
-  <div :class="ui.wrapper" :data-cy="dataCy">
-    <div :class="ui.header">
+  <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="emoji_food_beverage" color="gray" :size="iconSize" pill />
+        <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" :class="titleVariants({ size })">
+      <div v-if="title" v-bind="titleAttrs">
         {{ title }}
       </div>
-      <div v-if="description" :class="descriptionVariants({ size })">
+      <div v-if="description" v-bind="descriptionAttrs">
         {{ description }}
       </div>
     </slot>
 
-    <div :class="ui.footer">
+    <div v-bind="footerAttrs">
       <!-- @slot Use it to add something to the footer. -->
       <slot name="footer" />
     </div>
@@ -26,15 +26,15 @@
 
 <script setup>
 import { computed } from "vue";
+
 import UIService from "vueless/service.ui";
-import { useUI } from "vueless/composable.ui";
-import { UEmpty } from "vueless/constant.component-names";
 
-import VariantService from "./services/variant.service";
+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" });
+defineOptions({ name: "UEmpty", inheritAttrs: false });
 
 const props = defineProps({
   /**
@@ -79,6 +79,9 @@ const props = defineProps({
   },
 });
 
+const { config, titleAttrs, descriptionAttrs, wrapperAttrs, headerAttrs, footerAttrs, iconAttrs } =
+  useAttrs(props);
+
 const iconSize = computed(() => {
   const sizes = {
     sm: "xl",
@@ -88,8 +91,4 @@ const iconSize = computed(() => {
 
   return sizes[props.size];
 });
-
-const { ui } = useUI(defaultConfig, props.config);
-
-const { titleVariants, descriptionVariants } = VariantService.get(ui);
 </script>

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

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

@@ -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

@@ -3,10 +3,11 @@ import { getArgTypes } from "vueless/service.storybook";
 import UFile from "vueless/ui.text-file";
 
 export default {
+  id: "4050",
   title: "Text & Content / File",
   component: UFile,
   args: {
-    text: "some file text",
+    label: "some file text",
     url: "https://storybook.js.org/",
   },
   argTypes: {

package/ui.text-file/index.vue

@@ -1,102 +1,93 @@
 <template>
-  <ULink class="mono-file" :url="url" no-focus-ring target-blank :data-cy="dataCy">
-    <div class="mono-file-info">
+  <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
-        name="description"
+        v-else
+        :name="config.iconDescriptionName"
         color="gray"
-        class="icon"
         interactive
+        v-bind="iconAttrs"
         @focus="onFocus"
         @blur="onBlur"
       />
-      <span class="text" :class="focusClass">{{ text }}</span>
+
+      <span v-bind="textAttrs" v-text="label" />
     </div>
+
+    <slot name="right" :file="{ id, label, url, imageUrl }" />
   </ULink>
 </template>
 
-<script>
+<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";
 
-export default {
-  name: "UFile",
+import { useAttrs } from "./composables/attrs.composable";
 
-  components: {
-    ULink,
-    UIcon,
-  },
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UFile", inheritAttrs: false });
 
-  props: {
-    /**
-     * Set url link for the file.
-     */
-    url: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set text.
-     */
-    text: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+const props = defineProps({
+  /**
+   * Set url link for the file.
+   */
+  url: {
+    type: String,
+    default: "",
   },
 
-  data() {
-    return {
-      focus: false,
-    };
+  /**
+   * Set image url.
+   */
+  imageUrl: {
+    type: String,
+    default: "",
   },
 
-  computed: {
-    focusClass() {
-      return this.focus ? "focus" : "";
-    },
+  /**
+   * Set label.
+   */
+  label: {
+    type: String,
+    default: "",
   },
 
-  methods: {
-    onFocus() {
-      this.focus = true;
-    },
-
-    onBlur() {
-      this.focus = false;
-    },
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
   },
-};
-</script>
 
-<style lang="postcss" scoped>
-.mono-file {
-  &-info {
-    @apply flex items-start;
-  }
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
 
-  .icon {
-    @apply mr-3;
-  }
+const focus = ref(false);
 
-  .text {
-    @apply whitespace-normal;
-    @apply pt-0.5;
+const { config, fileAttrs, infoAttrs, iconAttrs, textAttrs, itemImageAttrs } = useAttrs(props, {
+  focus,
+});
 
-    &:hover {
-      @apply underline decoration-dashed underline-offset-4;
-    }
-  }
+function onFocus() {
+  focus.value = true;
 }
 
-.focus {
-  @apply underline decoration-dashed underline-offset-4;
+function onBlur() {
+  focus.value = false;
 }
-</style>
+</script>

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

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

@@ -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

@@ -3,6 +3,7 @@ import { getArgTypes } from "vueless/service.storybook";
 import UFiles from "vueless/ui.text-files";
 
 export default {
+  id: "4060",
   title: "Text & Content / Files",
   component: UFiles,
   args: {

package/ui.text-files/index.vue

@@ -1,64 +1,87 @@
 <template>
-  <div :data-cy="dataCy" class="mono-files">
-    <h3 v-if="label" class="mono-files-label">{{ label }}</h3>
+  <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>
 
-    <div class="space-y-2">
-      <slot>
-        <UFile
-          v-for="(option, index) in options"
-          :key="option.text"
-          class="!block"
-          :text="option.text"
-          :url="option.url"
-          :data-cy="`${dataCy}-item-${index}`"
-        />
-      </slot>
-    </div>
+            <template #right="{ file }">
+              <!-- @slot Use it to add something right. -->
+              <slot name="right" :file="file" />
+            </template>
+          </UFile>
+        </slot>
+      </div>
+    </ULabel>
   </div>
 </template>
 
-<script>
+<script setup>
 import UFile from "vueless/ui.text-file";
 
-export default {
-  name: "UFiles",
+import UIService from "vueless/service.ui";
 
-  components: {
-    UFile,
+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: "",
   },
 
-  props: {
-    /**
-     * Set files label.
-     */
-    label: {
-      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: () => [],
-    },
+  /**
+   * Set options for files.
+   */
+  options: {
+    type: Array,
+    default: () => [],
+  },
 
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
   },
-};
-</script>
+});
 
-<style lang="postcss" scoped>
-.mono-files-label {
-  @apply block max-w-max;
-  @apply text-sm font-normal text-gray-500;
-  @apply mb-4;
-}
-</style>
+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 "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

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