vueless 0.0.3 → 0.0.4

package/service.ui/index.js

@@ -1,193 +0,0 @@
-import merge from "lodash.merge";
-import { defineConfig } from "cva";
-import { twMerge } from "tailwind-merge";
-import colors from "tailwindcss/colors";
-import { brandColors, grayColors } from "../service.tailwind";
-import vuelessConfig from "/vueless.config";
-
-/*
-  Export cva (class variance authority) methods extended with tailwind-merge.
-  It helps to make class variation switchers and removes class duplications.
-  https://beta.cva.style
-*/
-export const {
-  cva: classVarianceAuthority,
-  cx,
-  compose,
-} = defineConfig({
-  hooks: { onComplete: (className) => twMerge(className) },
-});
-
-export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVariants = {} }) =>
-  classVarianceAuthority({
-    base,
-    variants,
-    compoundVariants,
-    defaultVariants,
-  });
-
-/*
-  Export global config settings for the current library.
-  Did as a separate variables for more comfortable usage.
-*/
-export const { layout, strategy, gray, brand, component: globalComponentConfig } = vuelessConfig;
-
-export default class UIServiceDefault {
-  isMac = false;
-  isPWA = false;
-  isIOS = false;
-  isAndroid = false;
-  isMobileApp = false;
-  PX_IN_REM = 16;
-  HYPHEN_SYMBOL = "-";
-
-  constructor() {
-    this.isMac = this.checkIsMac();
-
-    this.isPWA = this.checkIsPWA();
-    this.isIOS = this.checkIsIOS();
-    this.isAndroid = this.checkIsAndroid();
-
-    this.isMobileApp = this.isPWA || this.isIOS || this.isAndroid;
-  }
-
-  checkIsPWA() {
-    return !!navigator.standalone;
-  }
-
-  checkIsMac() {
-    return this.getPlatform().toUpperCase().indexOf("MAC") >= 0;
-  }
-
-  checkIsIOS() {
-    const iOSDevices = [
-      "iPad Simulator",
-      "iPhone Simulator",
-      "iPod Simulator",
-      "iPad",
-      "iPhone",
-      "iPod",
-    ];
-    const platform = this.getPlatform();
-    const isIpodIOS13 = platform.includes("Mac") && "ontouchend" in document;
-
-    return iOSDevices.includes(platform) || isIpodIOS13;
-  }
-
-  checkIsAndroid() {
-    return this.getPlatform().toUpperCase().indexOf("ANDROID") >= 0;
-  }
-
-  getPlatform() {
-    return navigator.userAgentData?.platform || navigator.platform || "unknown";
-  }
-
-  static convertHexInRgb(hex) {
-    const color = hex.replace(/#/g, "");
-
-    let r, g, b;
-
-    if (color.length === 6) {
-      r = parseInt(color.substring(0, 2), 16);
-      g = parseInt(color.substring(2, 4), 16);
-      b = parseInt(color.substring(4, 6), 16);
-    }
-
-    if (color.length === 3) {
-      r = parseInt(color.substring(0, 1).repeat(2), 16);
-      g = parseInt(color.substring(1, 2).repeat(2), 16);
-      b = parseInt(color.substring(2, 3).repeat(2), 16);
-    }
-
-    return color.length === 6 || color.length === 3 ? `${r}, ${g}, ${b}` : "";
-  }
-
-  setBrandColor(brandColor) {
-    function getBrandColor(color, grayColor, brandColors) {
-      if (color === "grayscale") {
-        return grayColor;
-      }
-
-      return brandColors.includes(color) ? colors[color][500] : color;
-    }
-
-    function getGrayColor(color, grayColors) {
-      return grayColors.includes(color) ? colors[color][900] : colors.zinc[900];
-    }
-
-    const grayColor = getGrayColor(gray, grayColors);
-    const localBrandColor = getBrandColor(brandColor, grayColor, brandColors);
-    const globalBrandColor = getBrandColor(brand, grayColor, brandColors);
-
-    const style = document.createElement("style");
-    const rgb = UIServiceDefault.convertHexInRgb(localBrandColor || globalBrandColor || grayColor);
-
-    style.innerHTML = `
-      :root {
-        --color-brand: ${rgb};
-      }
-    `;
-
-    document.head.appendChild(style);
-  }
-
-  getRandomId(idLength = 15) {
-    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
-    const charactersLength = characters.length;
-    let id = "";
-
-    while (id.length < idLength) {
-      id += characters.charAt(Math.floor(Math.random() * charactersLength));
-    }
-
-    return id;
-  }
-
-  static setTitle({ title, separator = " / ", suffix = "" }) {
-    document.title = title ? title + separator + suffix : suffix;
-  }
-
-  static setFavicon(faviconPath) {
-    if (!faviconPath) return;
-
-    const head = document.querySelector("head");
-    const faviconTag = document.createElement("link");
-
-    faviconTag.setAttribute("rel", "shortcut icon");
-    faviconTag.setAttribute("href", `${faviconPath}?${Math.random()}`);
-    head.appendChild(faviconTag);
-  }
-
-  /**
-    Get default component props value related on default and global config.
-    @param { Object } defaultConfig
-    @param { String } name
-    @returns { Object }
-  */
-  static get(defaultConfig, name) {
-    const globalVuelessColor = brand ? { color: brand } : {};
-
-    return {
-      default: merge(
-        defaultConfig.defaultVariants,
-        globalVuelessColor,
-        globalComponentConfig[name]?.defaultVariants,
-      ),
-    };
-  }
-}
-
-export const {
-  getRandomId,
-  setBrandColor,
-  convertHexInRgb,
-  setTitle,
-  setFavicon,
-  isMac,
-  isPWA,
-  isIOS,
-  isAndroid,
-  isMobileApp,
-  PX_IN_REM,
-  HYPHEN_SYMBOL,
-} = new UIServiceDefault();

package/ui.button/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.button/composables/attrs.composable.js

@@ -1,41 +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) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
-  const { button } = config.value;
-
-  const cvaButton = cva({
-    base: button.base,
-    variants: button.variants,
-    compoundVariants: button.compoundVariants,
-  });
-
-  const buttonClasses = computed(() =>
-    setColor(
-      cvaButton({
-        size: props.size,
-        color: props.color,
-        variant: props.variant,
-        pill: props.pill,
-        block: props.block,
-        square: props.square,
-        filled: props.filled,
-        loading: props.loading,
-        disabled: props.disabled,
-      }),
-      props.color,
-    ),
-  );
-
-  const buttonAttrs = getAttrs("button", { classes: buttonClasses });
-  const textAttrs = getAttrs("text");
-
-  return {
-    textAttrs,
-    buttonAttrs,
-  };
-}

package/ui.button/configs/default.config.js

@@ -1,164 +0,0 @@
-export default /*tw*/ {
-  button: {
-    base: `
-      flex items-center justify-center
-      text-base font-medium rounded-lg outline-none
-      transition duration-100 ease-in-out
-      focus:ring-4 focus:ring-opacity-10 focus:outline-none
-    `,
-    variants: {
-      size: {
-        xs: "px-2 py-1.5 text-xs leading-tight",
-        sm: "px-3 py-2.5 text-sm leading-tight",
-        md: "px-4 py-3.5 text-base leading-tight",
-        lg: "px-5 py-[1.125rem] text-lg leading-tight",
-      },
-      variant: {
-        primary: `
-          border border-solid border-{color}-500 bg-{color}-500 text-white
-          focus:border-opacity-0 focus:bg-opacity-80 focus:border-{color}-500 focus:bg-{color}-500
-          focus:ring-{color}-500
-          hover:border-{color}-500 hover:bg-{color}-500
-          hover:border-opacity-0 hover:bg-opacity-80
-          active:border-{color}-500 active:bg-{color}-500
-          active:border-opacity-0 active:bg-opacity-70`,
-        secondary: `
-          border border-solid bg-transparent
-          border-{color}-500 text-{color}-500
-          focus:text-{color}-500 focus:border-{color}-500 focus:ring-{color}-500
-          focus:text-opacity-80 focus:border-opacity-80
-          hover:border-{color}-500 hover:text-{color}-500
-          hover:text-opacity-80 hover:border-opacity-80
-          active:border-{color}-500 active:text-{color}-500
-          active:border-opacity-70 active:text-opacity-70`,
-        thirdary: `
-          border border-transparent bg-transparent text-{color}-500
-          focus:text-{color}-500 focus:bg-{color}-500 focus:ring-{color}-500
-          focus:text-opacity-70 focus:bg-opacity-5
-          hover:text-{color}-500 hover:bg-{color}-500
-          hover:text-opacity-70 hover:bg-opacity-10
-          active:text-{color}-500 active:bg-{color}-500
-          active:text-opacity-60 active:bg-opacity-15`,
-      },
-      loading: {
-        true: "pointer-events-none",
-      },
-      pill: {
-        true: "rounded-full",
-      },
-      block: {
-        true: "w-full",
-      },
-    },
-    compoundVariants: [
-      {
-        disabled: true,
-        variant: "primary",
-        class: `
-          border-opacity-0 bg-opacity-40 cursor-no-drop text-white
-          hover:bg-opacity-40
-          focus:bg-opacity-40 focus:ring-0
-          active:bg-opacity-40 active:ring-0
-        `,
-      },
-      {
-        disabled: true,
-        variant: "secondary",
-        class: `
-          text-opacity-40 border-opacity-40 cursor-no-drop
-          hover:text-opacity-40 hover:border-opacity-40
-          focus:text-opacity-40 focus:border-opacity-40 focus:ring-0
-          active:text-opacity-40 active:border-opacity-40 active:ring-0
-        `,
-      },
-      {
-        disabled: true,
-        variant: "thirdary",
-        class: `
-          bg-opacity-5 text-opacity-40 ring-opacity-0 cursor-no-drop
-          hover:bg-opacity-5 hover:text-opacity-40
-          focus:ring-0 focus:bg-opacity-5 focus:text-opacity-40
-          active:bg-opacity-5 active:ring-0 active:text-opacity-40
-        `,
-      },
-      {
-        color: "grayscale",
-        variant: "primary",
-        class: `
-          border-gray-900 bg-gray-900
-          hover:border-gray-900 hover:bg-gray-900
-          focus:border-gray-900  focus:ring-gray-900/20
-          active:border-gray-900 active:bg-gray-900`,
-      },
-      {
-        color: "grayscale",
-        variant: "secondary",
-        class: `
-          text-gray-900 border-gray-900
-          hover:border-gray-900 hover:text-gray-900
-          focus:border-gray-900 focus:text-gray-900 focus:ring-gray-900/20
-          active:border-gray-900 active:text-gray-900`,
-      },
-      {
-        color: "grayscale",
-        variant: "thirdary",
-        class: `
-          text-gray-900
-          focus:text-gray-800 focus:bg-gray-800 focus:ring-gray-800
-          hover:text-gray-800 hover:bg-gray-800
-          active:text-gray-800 active:bg-gray-800`,
-      },
-      {
-        color: "white",
-        variant: "primary",
-        class: `
-          border-white bg-white text-gray-500
-          focus:ring-white focus:border-white focus:bg-white
-          hover:border-white hover:bg-white
-          active:border-white active:bg-white`,
-      },
-      {
-        color: "white",
-        variant: "secondary",
-        class: `
-          border-white bg-transparent text-white
-          focus:border-white focus:ring-white
-          hover:border-white
-          active:border-white`,
-      },
-      {
-        color: "white",
-        variant: "thirdary",
-        class: `
-          border-transparent bg-transparent text-white
-          focus:bg-white focus:ring-white
-          hover:bg-white
-          active:bg-white`,
-      },
-      { filled: true, variant: "thirdary", class: "bg-{color}-500 bg-opacity-5" },
-      { filled: true, variant: "thirdary", color: "white", class: "bg-white" },
-      { filled: true, variant: "thirdary", color: "grayscale", class: "bg-gray-900" },
-      { square: true, size: "xs", class: "p-1" },
-      { square: true, size: "sm", class: "p-2" },
-      { square: true, size: "md", class: "p-3" },
-      { square: true, size: "lg", class: "py-4" },
-    ],
-  },
-  text: "whitespace-nowrap px-1.5",
-  defaultVariants: {
-    color: "brand",
-    variant: "primary",
-    size: "md",
-    pill: false,
-    square: false,
-    filled: false,
-    loading: false,
-    disabled: false,
-  },
-  safelist: (colors) => [
-    { pattern: `border-(${colors})-500` /* , variants: ["hover", "focus", "active"] */ },
-    { pattern: `text-(${colors})-500` /* , variants: ["hover", "focus", "active"] */ },
-    { pattern: `ring-(${colors})-500`, variants: ["focus"] },
-    { pattern: `bg-(${colors})-500` /* , variants: ["hover", "focus", "active"] */ },
-  ],
-};

package/ui.button/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 UButton = "UButton";

package/ui.button/index.stories.js

@@ -1,166 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UButton from "vueless/ui.button";
-import UIcon from "vueless/ui.image-icon";
-import URow from "vueless/ui.container-row";
-import UGroup from "vueless/ui.container-group";
-
-export default {
-  id: "1010",
-  title: "Buttons & Links / Button",
-  component: UButton,
-  args: {
-    label: "Button",
-  },
-  argTypes: {
-    ...getArgTypes(UButton.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UButton },
-  setup() {
-    const slots = getSlotNames(UButton.name);
-
-    return { args, slots };
-  },
-  template: `
-    <UButton v-bind="args">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
-    </UButton>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UButton, UIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UButton v-bind="args">
-      ${args.slotTemplate}
-    </UButton>
-  `,
-});
-
-const VariantsTemplate = (args, { argTypes } = {}) => ({
-  components: { UButton, URow },
-  setup() {
-    return {
-      args,
-      variants: argTypes.variant.options,
-    };
-  },
-  template: `
-    <URow>
-      <UButton
-        v-for="(variant, index) in variants"
-        v-bind="args"
-        :variant="variant"
-        :label="variant"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UButton, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UButton
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        :label="size"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const ColorTemplate = (args, { argTypes } = {}) => ({
-  components: { UButton, URow, UGroup },
-  setup() {
-    return {
-      args,
-      variants: argTypes.variant.options,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <UGroup>
-      <URow v-for="(variant, index) in variants" :key="index">
-        <UButton
-          v-for="(color, index) in colors"
-          v-bind="args"
-          :variant="variant"
-          :color="color"
-          :label="color"
-          :key="index"
-        />
-      </URow>
-    </UGroup>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const variants = VariantsTemplate.bind({});
-variants.args = {};
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
-
-export const pilled = VariantsTemplate.bind({});
-pilled.args = { pill: true };
-
-export const disabled = VariantsTemplate.bind({});
-disabled.args = { disabled: true };
-
-export const colors = ColorTemplate.bind({});
-colors.args = {};
-
-export const slotDefault = SlotTemplate.bind({});
-slotDefault.args = {
-  slotTemplate: `
-    <template #default>
-      🤘🤘🤘
-    </template>
-  `,
-};
-
-export const slotLeft = SlotTemplate.bind({});
-slotLeft.args = {
-  slotTemplate: `
-    <template #left>
-      <UIcon
-        name="star"
-        color="gray"
-        size="md"
-       />
-    </template>
-  `,
-};
-
-export const slotRight = SlotTemplate.bind({});
-slotRight.args = {
-  slotTemplate: `
-    <template #right>
-      <UIcon
-        name="star"
-        color="gray"
-        size="md"
-       />
-    </template>
-  `,
-};