vueless 0.0.196 → 0.0.197

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.196",
+  "version": "0.0.197",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.196",
+  "version": "0.0.197",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -4945,84 +4945,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "ULogo",
-          "description": "",
-          "attributes": [
-            {
-              "name": "src",
-              "description": "Logo source path.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            },
-            {
-              "name": "label",
-              "description": "Logo label.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            },
-            {
-              "name": "title",
-              "description": "Logo title.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            },
-            {
-              "name": "titleSize",
-              "description": "Logo title size.",
-              "value": {
-                "kind": "expression",
-                "type": "'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'"
-              },
-              "default": "md"
-            },
-            {
-              "name": "size",
-              "description": "title size.",
-              "value": {
-                "kind": "expression",
-                "type": "'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'"
-              },
-              "default": "md"
-            },
-            {
-              "name": "config",
-              "description": "Component ui config object.",
-              "value": {
-                "kind": "expression",
-                "type": "object"
-              },
-              "default": "{}"
-            },
-            {
-              "name": "dataCy",
-              "description": "Data-cy attribute for automated testing.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            }
-          ],
-          "events": [
-            {
-              "name": "click"
-            }
-          ],
-          "source": {
-            "module": "./src/ui.image-logo/index.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "UModal",
           "description": "",

package/ui.image-logo/Docs.mdx

@@ -1,16 +0,0 @@
-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.image-logo/composables/attrs.composable.js

@@ -1,41 +0,0 @@
-import { computed } from "vue";
-
-import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
-
-import defaultConfig from "../configs/default.config";
-
-export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { logo, title } = config.value;
-
-  const cvaLogo = cva({
-    base: logo.base,
-    variants: logo.variants,
-    compoundVariants: logo.compoundVariants,
-  });
-
-  const cvaTitle = cva({
-    base: title.base,
-    variants: title.variants,
-    compoundVariants: title.compoundVariants,
-  });
-
-  const logoClasses = computed(() => cvaLogo({ size: props.size }));
-
-  const titleClasses = computed(() => cvaTitle({ size: props.size }));
-
-  const wrapperAttrs = getAttrs("wrapper");
-  const logoAttrs = getAttrs("logo", { classes: logoClasses });
-  const labelAttrs = getAttrs("label");
-  const imageAttrs = getAttrs("image");
-  const titleAttrs = getAttrs("title", { classes: titleClasses });
-
-  return {
-    titleAttrs,
-    logoAttrs,
-    wrapperAttrs,
-    labelAttrs,
-    imageAttrs,
-  };
-}

package/ui.image-logo/configs/default.config.js

@@ -1,38 +0,0 @@
-export default /*tw*/ {
-  wrapper: "flex items-center",
-  logo: {
-    base: "relative",
-    variants: {
-      size: {
-        "2xs": "size-3.5",
-        xs: "size-4",
-        sm: "size-5",
-        md: "size-6",
-        lg: "size-8",
-        xl: "size-10",
-        "2xl": "size-12",
-        "3xl": "size-14",
-      },
-    },
-  },
-  label: "bg-red-500 text-xs font-medium text-white rounded-full absolute -right-7 -top-1.5 px-2 py-0.5",
-  image: "h-full w-full bg-contain bg-center bg-no-repeat",
-  title: {
-    base: "whitespace-nowrap px-3.5 font-bold text-gray-900",
-    variants: {
-      size: {
-        "2xs": "text-xs",
-        xs: "text-sm",
-        sm: "text-base",
-        md: "text-lg",
-        lg: "text-2xl",
-        xl: "text-3xl",
-        "2xl": "text-4xl",
-      },
-    },
-  },
-  defaultVariants: {
-    size: "md",
-    titleSize: "md",
-  },
-};

package/ui.image-logo/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 ULogo = "ULogo";

package/ui.image-logo/index.stories.js

@@ -1,87 +0,0 @@
-import { getArgTypes } from "../service.storybook";
-
-import ULogo from "../ui.image-logo";
-import URow from "../ui.container-row";
-
-/**
- * The `ULogo` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.image-logo)
- */
-export default {
-  id: "6020",
-  title: "Images & Icons / Logo",
-  component: ULogo,
-  args: {
-    src: "https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg",
-  },
-  argTypes: {
-    ...getArgTypes(ULogo.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { ULogo },
-  setup() {
-    return { args };
-  },
-  template: `
-    <ULogo v-bind="args"/>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { ULogo, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <ULogo
-        v-for="(size, index) in sizes"
-        :key="index"
-        v-bind="args"
-        :size="size"
-        :title="size"
-      />
-    </URow>
-  `,
-});
-
-const SizesTitleTemplate = (args, { argTypes } = {}) => ({
-  components: { ULogo, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.sizeTitle.options,
-    };
-  },
-  template: `
-    <URow>
-      <ULogo
-        v-for="(size, index) in sizes"
-        :key="index"
-        v-bind="args"
-        :size-title="size"
-        :title="size"
-        size="md"
-      />
-    </URow>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
-
-export const sizesTitle = SizesTitleTemplate.bind({});
-sizesTitle.args = {};
-
-export const title = DefaultTemplate.bind({});
-title.args = { title: "some title" };
-
-export const label = DefaultTemplate.bind({});
-label.args = { label: "label" };

package/ui.image-logo/index.vue

@@ -1,98 +0,0 @@
-<template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs" @click="onClick">
-    <div v-bind="logoAttrs">
-      <div v-if="label" v-bind="labelAttrs" v-text="label" />
-
-      <div :style="bgImage" v-bind="imageAttrs" />
-    </div>
-
-    <div v-if="title" v-bind="titleAttrs" v-text="title" />
-  </div>
-</template>
-
-<script setup>
-import { computed } from "vue";
-
-import UIService from "../service.ui";
-
-import { useAttrs } from "./composables/attrs.composable";
-import defaultConfig from "./configs/default.config";
-import { ULogo } from "./constants";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "ULogo", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Logo source path.
-   */
-  src: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Logo label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Logo title.
-   */
-  title: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Logo title size.
-   * @values 2xs, xs, sm, md, lg, xl, 2xl
-   */
-  titleSize: {
-    type: String,
-    default: UIService.get(defaultConfig, ULogo).default.titleSize,
-  },
-
-  /**
-   * title size.
-   * @values 2xs, xs, sm, md, lg, xl, 2xl, 3xl
-   */
-  size: {
-    type: String,
-    default: UIService.get(defaultConfig, ULogo).default.size,
-  },
-
-  /**
-   * Component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits(["click"]);
-
-const { titleAttrs, logoAttrs, wrapperAttrs, labelAttrs, imageAttrs } = useAttrs(props);
-
-const bgImage = computed(() => {
-  let path = props.src.includes("http") ? props.src : import.meta.env.BASE_URL + props.src;
-
-  return `background-image: url(${path});`;
-});
-
-function onClick(event) {
-  emit("click", event);
-}
-</script>