vueless 0.0.3 → 0.0.4

package/ui.navigation-tab/composables/attrs.composable.js

@@ -1,30 +0,0 @@
-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, { selected, size }) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { wrapper } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const wrapperClasses = computed(() =>
-    cvaWrapper({
-      disabled: props.disabled,
-      size: size.value,
-      selected: selected.value,
-    }),
-  );
-
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
-
-  return {
-    wrapperAttrs,
-  };
-}

package/ui.navigation-tab/configs/default.config.js

@@ -1,22 +0,0 @@
-export default /*tw*/ {
-  wrapper: {
-    base: `w-max pb-2 text-center cursor-pointer`,
-    variants: {
-      size: {
-        sm: "text-xs",
-        md: "text-sm",
-        lg: "text-base",
-      },
-      disabled: {
-        true: "text-gray-500",
-      },
-      selected: {
-        true: "border-b-2 border-gray-900",
-      },
-    },
-  },
-  defaultVariants: {
-    size: "md",
-    disabled: false,
-  },
-};

package/ui.navigation-tab/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 UTab = "UTab";

package/ui.navigation-tab/index.stories.js

@@ -1,57 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UTab from "vueless/ui.navigation-tab";
-import UIcon from "vueless/ui.image-icon";
-
-export default {
-  id: "8010",
-  title: "Navigation / Tab",
-  component: UTab,
-  args: {
-    label: "Tab",
-  },
-  argTypes: {
-    ...getArgTypes(UTab.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UTab },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UTab v-bind="args" />
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UTab, UIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UTab v-bind="args">
-      ${args.slotTemplate}
-    </UTab>
-  `,
-});
-
-export const defaultTemplate = DefaultTemplate.bind({});
-defaultTemplate.args = {};
-
-export const disabled = DefaultTemplate.bind({});
-disabled.args = { disabled: true };
-
-export const slotDefault = SlotTemplate.bind({});
-slotDefault.args = {
-  label: "Tag",
-  slotTemplate: `
-    <template #default>
-      <div class="flex items-center">
-        <UIcon name="star" size="sm" />
-        {{label}}
-      </div>
-    </template>
-  `,
-};

package/ui.navigation-tab/index.vue

@@ -1,85 +0,0 @@
-<template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs" @click="onClickSetValue">
-    <!-- @slot Use it to add something instead of label. -->
-    <slot>
-      {{ label }}
-    </slot>
-  </div>
-</template>
-
-<script setup>
-import { computed, inject } from "vue";
-
-import UIService from "vueless/service.ui";
-
-import { UTab } 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: "UTab", inheritAttrs: false });
-
-const setUTabsSelectedItem = inject("setUTabsSelectedItem", null);
-const getUTabsSelectedItem = inject("getUTabsSelectedItem", null);
-const getUTabsSize = inject("getUTabsSize", null);
-
-const props = defineProps({
-  /**
-   * Tab label.
-   * @ignore
-   */
-  label: {
-    type: String,
-    required: true,
-  },
-
-  /**
-   * Tab value.
-   */
-  value: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Make tab disabled.
-   * @ignore
-   */
-  disabled: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UTab).default.disabled,
-  },
-
-  /**
-   * Component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const selected = computed(() => {
-  return getUTabsSelectedItem && getUTabsSelectedItem() === props.value && !props.disabled;
-});
-
-const size = computed(() => {
-  return getUTabsSize ? getUTabsSize() : UIService.get(defaultConfig, UTab).default.size;
-});
-
-const { wrapperAttrs } = useAttrs(props, { selected, size });
-
-async function onClickSetValue() {
-  if (!props.disabled && setUTabsSelectedItem) {
-    setUTabsSelectedItem(props.value);
-  }
-}
-</script>

package/ui.navigation-tabs/composables/attrs.composable.js

@@ -1,24 +0,0 @@
-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 } = useUI(defaultConfig, () => props.config);
-  const { wrapper } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const wrapperClasses = computed(() => cvaWrapper({ underlined: props.underlined }));
-
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
-
-  return {
-    wrapperAttrs,
-  };
-}

package/ui.navigation-tabs/configs/default.config.js

@@ -1,14 +0,0 @@
-export default /*tw*/ {
-  wrapper: {
-    base: "mb-6 flex space-x-8",
-    variants: {
-      underlined: {
-        true: "border-b border-gray-100",
-      },
-    },
-  },
-  defaultVariants: {
-    size: "md",
-    underlined: false,
-  },
-};

package/ui.navigation-tabs/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 UTabs = "UTabs";

package/ui.navigation-tabs/index.stories.js

@@ -1,69 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UTabs from "vueless/ui.navigation-tabs";
-
-export default {
-  id: "8020",
-  title: "Navigation / Tabs",
-  component: UTabs,
-  args: {
-    modelValue: "1",
-    options: [
-      { label: "Tab 1", value: "1" },
-      { label: "Tab 2", value: "2" },
-      { label: "Tab 3", value: "3" },
-    ],
-  },
-  argTypes: {
-    ...getArgTypes(UTabs.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UTabs },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UTabs v-model="args.modelValue" v-bind="args"/>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UTabs },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <div class="space-y-16">
-      <UTabs
-        v-model="args.modelValue"
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        :key="index"
-      />
-    </div>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
-
-export const bottomLine = DefaultTemplate.bind({});
-bottomLine.args = { underlined: true };
-
-export const disabledTab = DefaultTemplate.bind({});
-disabledTab.args = {
-  options: [
-    { label: "Tab 1", value: 1 },
-    { label: "Tab 2", value: 2, disabled: true },
-    { label: "Tab 3", value: 3 },
-  ],
-};

package/ui.navigation-tabs/index.vue

@@ -1,99 +0,0 @@
-<template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs">
-    <slot>
-      <UTab
-        v-for="(item, index) in options"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-        :disabled="item.disabled"
-        :size="size"
-        :data-cy="`${dataCy}-item-${index}`"
-      />
-    </slot>
-  </div>
-</template>
-
-<script setup>
-import { computed, provide } from "vue";
-
-import UIService from "vueless/service.ui";
-import UTab from "vueless/ui.navigation-tab";
-
-import { UTabs } 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: "UTabs", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Selected tab value.
-   */
-  modelValue: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Tab options.
-   */
-  options: {
-    type: Array,
-    default: () => [
-      {
-        label: "",
-        value: "",
-        disabled: false,
-      },
-    ],
-  },
-
-  /**
-   * Tabs size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: UIService.get(defaultConfig, UTabs).default.size,
-  },
-
-  /**
-   * Add the bottom line along the entire length.
-   */
-  underlined: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UTabs).default.underlined,
-  },
-
-  /**
-   * Component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits(["update:modelValue"]);
-
-const selectedItem = computed({
-  get: () => props.modelValue,
-  set: (value) => emit("update:modelValue", value),
-});
-
-provide("setUTabsSelectedItem", (value) => (selectedItem.value = value));
-provide("getUTabsSelectedItem", () => selectedItem.value);
-provide("getUTabsSize", () => props.size);
-
-const { wrapperAttrs } = useAttrs(props);
-</script>

package/ui.other-dot/composables/attrs.composable.js

@@ -1,32 +0,0 @@
-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,
-        color: props.color,
-      }),
-      props.color,
-    ),
-  );
-
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
-
-  return {
-    wrapperAttrs,
-  };
-}

package/ui.other-dot/configs/default.config.js

@@ -1,21 +0,0 @@
-export default /*tw*/ {
-  wrapper: {
-    base: "rounded-full bg-{color}-500 mr-1",
-    variants: {
-      color: {
-        white: "bg-white",
-        grayscale: "bg-gray-900",
-      },
-      size: {
-        sm: "size-1",
-        md: "size-1.5",
-        lg: "size-2",
-      },
-    },
-  },
-  defaultVariants: {
-    color: "brand",
-    size: "md",
-  },
-  safelist: (colors) => [{ pattern: `bg-(${colors})-500` }],
-};

package/ui.other-dot/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 UDot = "UDot";

package/ui.other-dot/index.stories.js

@@ -1,77 +0,0 @@
-import UDot from "vueless/ui.other-dot";
-import URow from "vueless/ui.container-row";
-
-import { getArgTypes } from "vueless/service.storybook";
-
-export default {
-  id: "9010",
-  title: "Other / Dot",
-  component: UDot,
-  argTypes: {
-    ...getArgTypes(UDot.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UDot },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UDot v-bind="args" />
-  `,
-});
-
-const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { UDot, URow },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <URow>
-      <UDot
-        v-for="(color, index) in colors"
-        v-bind="args"
-        :color="color"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UDot, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UDot
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        :key="index"
-      />
-    </URow>
-  `,
-  methods: {
-    getText(value) {
-      return `Tag ${value}`;
-    },
-  },
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const Colors = ColorsTemplate.bind({});
-Colors.args = {};
-
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};

package/ui.other-dot/index.vue

@@ -1,52 +0,0 @@
-<template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs" />
-</template>
-
-<script setup>
-import UIService from "vueless/service.ui";
-
-import { UDot } 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: "UDot", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Dot 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, UDot).default.color,
-  },
-
-  /**
-   * Dot size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: UIService.get(defaultConfig, UDot).default.size,
-  },
-
-  /**
-   * Component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const { wrapperAttrs } = useAttrs(props);
-</script>

package/ui.other-loader/composables/attrs.composable.js

@@ -1,51 +0,0 @@
-import useUI from "vueless/composable.ui";
-import { cva, cx } 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 { loader, ellipse } = config.value;
-
-  const cvaLoader = cva({
-    base: loader.base,
-    variants: loader.variants,
-    compoundVariants: loader.compoundVariants,
-  });
-
-  const cvaEllipse = cva({
-    base: ellipse.base,
-    variants: ellipse.variants,
-    compoundVariants: ellipse.compoundVariants,
-  });
-
-  const loaderClasses = computed(() =>
-    cvaLoader({
-      size: props.size,
-    }),
-  );
-
-  const ellipseClasses = computed(() =>
-    setColor(
-      cvaEllipse({
-        size: props.size,
-        color: props.color,
-      }),
-      props.color,
-    ),
-  );
-
-  const loaderAttrs = getAttrs("loader", { classes: loaderClasses });
-  const ellipseRaw = getAttrs("ellipse", { classes: ellipseClasses });
-
-  const ellipseAttrs = computed(() => (classes) => ({
-    ...ellipseRaw.value,
-    class: cx([ellipseRaw.value.class, classes]),
-  }));
-
-  return {
-    loaderAttrs,
-    ellipseAttrs,
-  };
-}