vueless 0.0.3 → 0.0.4

package/ui.button-link/index.vue

@@ -1,226 +0,0 @@
-<template>
-  <div tabindex="-1" v-bind="wrapperAttrs">
-    <div v-if="hasSlotContent(slots['left'])" v-bind="leftSlotAttrs">
-      <!-- @slot Use it to add something before text. -->
-      <slot name="left" />
-    </div>
-
-    <router-link
-      v-if="isPresentRoute"
-      :to="route"
-      :target="targetValue"
-      :data-cy="dataCy"
-      v-bind="linkAttrs"
-      @blur="onBlur"
-      @click="onClick"
-      @focus="onFocus"
-      @keydown="onKeydown"
-      @mouseover="onMouseover"
-    >
-      <!-- @slot Use it replace the text. -->
-      <slot>
-        <span v-if="!hasSlotContent(slots['default'])" v-bind="textAttrs" v-text="label" />
-      </slot>
-    </router-link>
-
-    <a
-      v-else
-      :href="href"
-      :target="targetValue"
-      :data-cy="dataCy"
-      v-bind="linkAttrs"
-      @blur="onBlur"
-      @focus="onFocus"
-      @keydown="onKeydown"
-      @mouseover="onMouseover"
-      @click.prevent="onClick"
-    >
-      <!-- @slot Use it replace the text. -->
-      <slot>
-        <span v-if="!hasSlotContent(slots['default'])" v-bind="textAttrs" v-text="label" />
-      </slot>
-    </a>
-
-    <div v-if="hasSlotContent(slots['right'])" v-bind="rightSlotAttrs">
-      <!-- @slot Use it to add something after text. -->
-      <slot name="right" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, useSlots } from "vue";
-import UIService from "vueless/service.ui";
-
-import { useAttrs } from "./composables/attrs.composable";
-import defaultConfig from "./configs/default.config";
-import { ULink } from "./constants";
-import { UButton } from "vueless/ui.button/constants/index.js";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "ULink", inheritAttrs: false });
-
-const emit = defineEmits(["click", "mouseover", "focus", "blur", "keydown"]);
-
-const props = defineProps({
-  /**
-   * Button label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Link url.
-   */
-  url: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Vue route object.
-   */
-  route: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Link size.
-   * @values xs, sm, md, lg
-   */
-  size: {
-    type: String,
-    default: UIService.get(defaultConfig, ULink).default.size,
-  },
-
-  /**
-   * Link 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, ULink).default.color,
-  },
-
-  /**
-   * Link open type behaviour.
-   * @values phone, email, link
-   */
-  type: {
-    type: String,
-    default: UIService.get(defaultConfig, ULink).default.type,
-  },
-
-  /**
-   * Open link in new window.
-   */
-  targetBlank: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, ULink).default.targetBlank,
-  },
-
-  /**
-   * Show underline.
-   */
-  underlined: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, ULink).default.underlined,
-  },
-
-  /**
-   * Set link underline style as dashed.
-   */
-  dashed: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, ULink).default.dashed,
-  },
-
-  /**
-   * Disable the link.
-   */
-  disabled: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, ULink).default.disabled,
-  },
-
-  /**
-   * Make the Button fill the width with its container.
-   */
-  block: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UButton).default.square,
-  },
-
-  /**
-   * Remove outline ring on focus.
-   */
-  noRing: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, ULink).default.noRing,
-  },
-
-  /**
-   * Component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const slots = useSlots();
-
-const { wrapperAttrs, linkAttrs, rightSlotAttrs, leftSlotAttrs, textAttrs, hasSlotContent } =
-  useAttrs(props);
-
-const targetValue = computed(() => {
-  return props.targetBlank ? "_blank" : "_self";
-});
-
-const href = computed(() => {
-  const types = {
-    phone: "tel:",
-    email: "mailto:",
-    link: "",
-  };
-
-  return `${types[props.type]}${props.url}`;
-});
-
-const isPresentRoute = computed(() => {
-  for (let key in props.route) return true;
-
-  return false;
-});
-
-function onClick(event) {
-  !props.url || props.disabled ? emit("click", event) : window.open(href.value, props.targetValue);
-}
-
-function onMouseover(event) {
-  emit("mouseover", event);
-}
-
-function onFocus(event) {
-  emit("focus", event);
-}
-
-function onKeydown(event) {
-  emit("keydown", event);
-}
-
-function onBlur(event) {
-  emit("blur", event);
-}
-</script>

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

@@ -1,16 +0,0 @@
-import useUI from "vueless/composable.ui";
-
-import defaultConfig from "../configs/default.config";
-
-export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-
-  const wrapperAttrs = getAttrs("wrapper");
-  const toggleItemAttrs = getAttrs("toggleItem", { isComponent: true });
-
-  return {
-    config,
-    wrapperAttrs,
-    toggleItemAttrs,
-  };
-}

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

@@ -1,12 +0,0 @@
-export default /*tw*/ {
-  wrapper: `
-    flex gap-px
-    [&>*:first-child]:rounded-l-lg [&>*:first-child]:rounded-r-none [&>*:first-child]:overflow-hidden
-    [&>*:last-child]:rounded-r-lg [&>*:last-child]:rounded-l-none [&>*:last-child]:overflow-hidden
-  `,
-  defaultVariants: {
-    size: "md",
-    block: false,
-    multiple: false,
-  },
-};

package/ui.button-toggle/constants/index.js

@@ -1,7 +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 UToggle = "UToggle";
-export const TYPE_RADIO = "radio";
-export const TYPE_CHECKBOX = "checkbox";

package/ui.button-toggle/index.stories.js

@@ -1,155 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UToggle from "vueless/ui.button-toggle";
-import UIcon from "vueless/ui.image-icon";
-import UToggleItem from "vueless/ui.button-toggle-item";
-import URow from "vueless/ui.container-row";
-
-export default {
-  title: "Buttons & Links / Toggle",
-  component: UToggle,
-  argTypes: {
-    ...getArgTypes(UToggle.name),
-    modelValue: { control: { type: "text" } },
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UToggle },
-  data() {
-    return {
-      value: "",
-    };
-  },
-  setup() {
-    const groupOptions = [
-      { value: "11", label: "label 1" },
-      { value: "12", label: "label 2" },
-      { value: "13", label: "label 3" },
-      { value: "14", label: "label 4" },
-    ];
-
-    return { args, groupOptions };
-  },
-  template: `
-    <UToggle
-      v-model="value"
-      v-bind="args"
-      :options="groupOptions"
-      name="defaultTemplate"
-    />
-  `,
-});
-
-const checkboxTemplate = (args) => ({
-  components: { UToggle },
-  data() {
-    return {
-      value: [],
-    };
-  },
-  setup() {
-    const groupOptions = [
-      { value: "11", label: "label 1" },
-      { value: "12", label: "label 2" },
-      { value: "13", label: "label 3" },
-      { value: "14", label: "label 4" },
-    ];
-
-    return { args, groupOptions };
-  },
-  template: `
-    <UToggle
-      v-model="value"
-      v-bind="args"
-      multiple
-      :options="groupOptions"
-      name="defaultTemplate"
-    />
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UToggle, URow },
-  data() {
-    return {
-      value: "",
-    };
-  },
-  setup() {
-    const slots = getSlotNames(UToggle.name);
-
-    return {
-      args,
-      slots,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UToggle
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        :label="size"
-        :options="[
-          { value: size + 1, label: size },
-          { value: size + 2, label: size },
-        ]"
-        v-model="value"
-        :key="index"
-        name="sizeTemplate"
-      >
-        <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-          <template v-if="args[slot]">{{ args[slot] }}</template>
-        </template>
-      </UToggle>
-    </URow>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UToggle, UIcon, UToggleItem },
-  setup() {
-    return {
-      args,
-      selected: "55",
-    };
-  },
-  template: `
-    <UToggle v-bind="args" name="slotTemplate" v-model="selected">
-      ${args.slotTemplate}
-    </UToggle>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {
-  name: "first name",
-};
-
-export const multiple = checkboxTemplate.bind({});
-multiple.args = {
-  name: "second name",
-};
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = {
-  name: "four name",
-};
-
-export const block = DefaultTemplate.bind({});
-block.args = {
-  name: "five name",
-  block: true,
-};
-
-export const slotDefault = SlotTemplate.bind({});
-slotDefault.args = {
-  name: "third name",
-  slotTemplate: `
-    <template #default>
-      <UToggleItem label="label" />
-    </template>
-  `,
-};

package/ui.button-toggle/index.vue

@@ -1,128 +0,0 @@
-<template>
-  <div ref="wrapperRef" :data-cy="dataCy" v-bind="wrapperAttrs">
-    <slot>
-      <UToggleItem
-        v-for="(item, index) in options"
-        :key="item.value"
-        :model-value="item.value"
-        :value="item.value"
-        :label="item.label"
-        :data-cy="`${dataCy}-item-${index}`"
-        v-bind="toggleItemAttrs"
-      />
-    </slot>
-  </div>
-</template>
-
-<script setup>
-import { computed, provide, readonly, ref } from "vue";
-
-import UIService from "vueless/service.ui";
-
-import defaultConfig from "./configs/default.config";
-import { UToggle, TYPE_RADIO, TYPE_CHECKBOX } from "./constants";
-import { useAttrs } from "./composables/attrs.composable";
-import { UButton } from "vueless/ui.button/constants/index.js";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UToggle", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Set buttons name.
-   */
-  name: {
-    type: String,
-    required: true,
-  },
-
-  /**
-   * Set data for buttons.
-   */
-  options: {
-    type: Array,
-    default: () => [],
-  },
-
-  /**
-   * Set current value.
-   */
-  modelValue: {
-    type: [String, Number, Array],
-    default: () => (!this.multiple ? "" : []),
-  },
-
-  /**
-   * Allow to select a few options and return them as array.
-   */
-  multiple: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UToggle).default.multiple,
-  },
-
-  /**
-   * The size of the buttons.
-   * @values xs, sm, md, lg
-   */
-  size: {
-    type: String,
-    default: UIService.get(defaultConfig, UToggle).default.size,
-  },
-
-  /**
-   * Make the toggle fill the width with its container.
-   */
-  block: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UButton).default.block,
-  },
-
-  /**
-   * Sets data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits(["update:modelValue"]);
-
-const { wrapperAttrs, toggleItemAttrs } = useAttrs(props);
-
-const wrapperRef = ref();
-
-const selectedValue = computed({
-  get: () => props.modelValue,
-  set: (value) => emit("update:modelValue", value),
-});
-
-const type = computed(() => (props.multiple ? TYPE_CHECKBOX : TYPE_RADIO));
-
-function updateSelectedValue(value, checked) {
-  if (type.value === TYPE_RADIO) {
-    selectedValue.value = value;
-
-    return;
-  }
-
-  if (!checked) {
-    selectedValue.value = selectedValue.value.filter((item) => item !== value);
-  } else {
-    selectedValue.value.push(value);
-  }
-}
-
-provide("toggleName", () => props.name);
-
-provide("toggleSize", () => props.size);
-
-provide("toggleBlock", () => props.block);
-
-provide("toggleType", readonly(type));
-
-provide("toggleSelectedValue", {
-  selectedValue: readonly(selectedValue),
-  updateSelectedValue,
-});
-</script>

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

@@ -1,53 +0,0 @@
-import { computed, toValue } from "vue";
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
-
-import defaultConfig from "../configs/default.config";
-
-export function useAttrs(props, { size, block }) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { label, labelText, wrapper } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const cvaLabelText = cva({
-    base: labelText.base,
-    variants: labelText.variants,
-    compoundVariants: labelText.compoundVariants,
-  });
-
-  const cvaLabel = cva({
-    base: label.base,
-    variants: label.variants,
-    compoundVariants: label.compoundVariants,
-  });
-
-  const wrapperClasses = computed(() => cvaWrapper({ block: toValue(block) }));
-
-  const labelTextClasses = computed(() => cvaLabelText({ size: toValue(size) }));
-
-  const labelClasses = computed(() =>
-    cvaLabel({
-      size: toValue(size),
-      variant: props.variant,
-      disabled: props.disabled,
-    }),
-  );
-
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
-  const inputAttrs = getAttrs("input");
-  const labelAttrs = getAttrs("label", { classes: labelClasses });
-  const labelTextAttrs = getAttrs("labelText", { classes: labelTextClasses });
-
-  return {
-    inputAttrs,
-    wrapperAttrs,
-    labelTextAttrs,
-    labelAttrs,
-    hasSlotContent,
-  };
-}

package/ui.button-toggle-item/configs/default.config.js

@@ -1,58 +0,0 @@
-export default /*tw*/ {
-  wrapper: {
-    base: "w-fit",
-    variants: {
-      block: {
-        true: "w-full",
-      },
-    },
-  },
-  input: "p-0 m-0 size-0 invisible peer absolute",
-  label: {
-    base: "font-medium w-full flex items-center justify-center cursor-pointer",
-    variants: {
-      variant: {
-        primary: `
-          bg-gray-900/5 hover:bg-gray-900/10 active:bg-gray-900/15
-          peer-focus:border-gray-100 peer-focus:bg-opacity-10 peer-focus:ring-4 peer-focus:ring-gray-600/15
-          focus:border-gray-100 focus:bg-opacity-10 focus:ring-4 focus:ring-gray-600/15
-          peer-checked:bg-gray-900/15
-        `,
-        secondary: `
-          bg-transparent border hover:text-opacity-80 hover:border-opacity-80
-          peer-focus:text-opacity-100 peer-focus:border-opacity-100
-          focus:text-opacity-100 focus:border-opacity-100
-          peer-checked:text-opacity-100 peer-checked:border-opacity-100
-        `,
-        thirdary: `
-          bg-transparent opacity-50 border-none hover:border-none hover:opacity-100 hover:ring-0
-          peer-focus:border-none peer-focus:bg-gray-100 peer-focus:bg-opacity-10 peer-focus:opacity-100
-          peer-focus:ring-0 peer-checked:bg-transparent peer-checked:opacity-100
-          focus:border-none focus:bg-gray-100 focus:bg-opacity-10 focus:opacity-100 focus:ring-0
-        `,
-      },
-      size: {
-        sm: "gap-1.5 p-3.5",
-        md: "p-[1.125rem] gap-2",
-        lg: "gap-2.5 p-[1.375rem]",
-      },
-    },
-  },
-  labelText: {
-    base: "font-medium text-center w-full",
-    variants: {
-      size: {
-        sm: "text-sm",
-        md: "font-base",
-        lg: "text-lg",
-      },
-    },
-  },
-  defaultVariants: {
-    variant: "primary",
-    type: "radio",
-    size: "md",
-    block: false,
-    disabled: false,
-  },
-};

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