vueless 0.0.9 → 0.0.10

package/src/ui.navigation-stepper/configs/default.config.js

@@ -1,13 +0,0 @@
-export default /*tw*/ {
-  wrapper: "flex items-center justify-between",
-  stepper: "h-12 w-12",
-  ring: "stroke-current text-gray-100",
-  count: "text-xl font-bold text-gray-900 translate-y-2 transform",
-  title: "",
-  gradient: "",
-  svg: "",
-  defaultVariants: {
-    step: 1,
-    color: "brand",
-  },
-};

package/src/ui.navigation-stepper/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 UStepper = "UStepper";

package/src/ui.navigation-stepper/index.stories.js

@@ -1,30 +0,0 @@
-import { getArgTypes } from "../service.storybook";
-
-import UStepper from "../ui.navigation-stepper";
-
-export default {
-  id: "8030",
-  title: "Navigation / Stepper",
-  component: UStepper,
-  args: {
-    title: "Title",
-    step: 1,
-    totalSteps: 10,
-  },
-  argTypes: {
-    ...getArgTypes(UStepper.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UStepper },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UStepper v-bind="args" />
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};

package/src/ui.navigation-stepper/index.vue

@@ -1,126 +0,0 @@
-<template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs">
-    <UHeader :label="title" size="xs" v-bind="titleAttrs" />
-
-    <div v-bind="stepperAttrs">
-      <svg width="100%" height="100%" viewBox="0 0 40 40" v-bind="svgAttrs">
-        <defs>
-          <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%" v-bind="gradientAttrs">
-            <stop offset="0%" :stop-color="setStepperColor" />
-            <stop offset="100%" :stop-color="setStepperColor" />
-          </linearGradient>
-        </defs>
-
-        <circle
-          cx="20"
-          cy="20"
-          r="15.91549430918954"
-          fill="transparent"
-          stroke-width="4"
-          v-bind="ringAttrs"
-        ></circle>
-
-        <circle
-          cx="20"
-          cy="20"
-          r="15.91549430918954"
-          fill="transparent"
-          stroke="url(#gradient)"
-          stroke-width="4"
-          :stroke-dasharray="fillPercentage"
-          stroke-dashoffset="0"
-        ></circle>
-        <g v-bind="countAttrs">
-          <text y="45%" transform="translate(0, 2)">
-            <tspan x="50%" text-anchor="middle">{{ step }}</tspan>
-          </text>
-        </g>
-      </svg>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from "vue";
-import colors from "tailwindcss/colors";
-
-import UHeader from "../ui.text-header";
-import UIService from "../service.ui";
-import { grayColors } from "../service.tailwind";
-
-import { UStepper } from "./constants/index";
-import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UStepper", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Set component title.
-   */
-  title: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Set step number.
-   */
-  step: {
-    type: Number,
-    default: UIService.get(defaultConfig, UStepper).default.step,
-  },
-
-  /**
-   * Icon 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, UStepper).default.color,
-  },
-
-  /**
-   * Set total number of steps.
-   */
-  totalSteps: {
-    type: Number,
-    default: null,
-  },
-
-  /**
-   * Component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Sets data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const { wrapperAttrs, titleAttrs, stepperAttrs, ringAttrs, countAttrs, gradientAttrs, svgAttrs } =
-  useAttrs(props);
-
-const setStepperColor = computed(() => {
-  return colors[props.color]
-    ? colors[props.color][500]
-    : grayColors.includes(props.color)
-      ? colors[props.color][900]
-      : colors.zinc[900];
-});
-
-const fillPercentage = computed(() => {
-  const maxCountPercent = 100;
-  const activePercent = (props.step / props.totalSteps) * maxCountPercent;
-
-  return `${activePercent} ${maxCountPercent}`;
-});
-</script>

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

@@ -1,30 +0,0 @@
-import useUI from "../../composable.ui";
-import { cva } from "../../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/src/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/src/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/src/ui.navigation-tab/index.stories.js

@@ -1,57 +0,0 @@
-import { getArgTypes } from "../service.storybook";
-
-import UTab from "../ui.navigation-tab";
-import UIcon from "../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/src/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 "../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/src/ui.navigation-tabs/composables/attrs.composable.js

@@ -1,24 +0,0 @@
-import useUI from "../../composable.ui";
-import { cva } from "../../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/src/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/src/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/src/ui.navigation-tabs/index.stories.js

@@ -1,69 +0,0 @@
-import { getArgTypes } from "../service.storybook";
-
-import UTabs from "../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/src/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 UTab from "../ui.navigation-tab";
-import UIService from "../service.ui";
-
-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/src/ui.notify/index.sto_ries.js

@@ -1,102 +0,0 @@
-import NotifyServiceDefault from "../ui.notify/services";
-
-import UNotify from "../ui.notify";
-import UButton from "../ui.button";
-
-import { getArgTypes } from "../service.storybook";
-
-const NotifyService = new NotifyServiceDefault();
-
-export default {
-  title: "Other / Notify",
-  component: UNotify,
-  args: {
-    type: "success",
-    code: "code",
-    title: "",
-    text: "",
-    duration: "short",
-    ignoreDuplicates: false,
-  },
-  argTypes: {
-    ...getArgTypes(UNotify.name),
-    type: {
-      description: "The type of notify.",
-      defaultValue: { summary: "success" },
-      options: ["success", "warning", "error"],
-      control: {
-        type: "radio",
-      },
-    },
-    code: {
-      description:
-        "Unique translation code, for ex. `categoryCreated`, " +
-        "which will be used in i18n translation path, for ex. `UNotify.success.categoryCreated`.",
-      defaultValue: { summary: "" },
-      control: {
-        type: "text",
-      },
-    },
-    title: {
-      description: "Notify title.",
-      defaultValue: { summary: "" },
-      control: {
-        type: "text",
-      },
-    },
-    text: {
-      description: "Notify text (description).",
-      defaultValue: { summary: "" },
-      control: {
-        type: "text",
-      },
-    },
-    duration: {
-      description: "The notify visibility duration.",
-      defaultValue: { summary: "short" },
-      options: ["short", "medium", "long", "permanent"], //4000, 8000, 12000, 300000
-      control: {
-        type: "radio",
-      },
-    },
-    ignoreDuplicates: {
-      description: "Show only 1 notify at once.",
-      defaultValue: { summary: false },
-      control: {
-        type: "boolean",
-      },
-    },
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UNotify, UButton },
-  setup() {
-    return { args };
-  },
-  template: `
-    <div>
-      <UNotify v-bind="args"/>
-
-      <UButton label="show notify" @click="onClick"/>
-    </div>
- `,
-
-  methods: {
-    onClick() {
-      const settings = {
-        type: args.type,
-        code: args.code,
-        title: args.title,
-        text: args.text,
-        duration: args.duration,
-        ignoreDuplicates: args.ignoreDuplicates,
-      };
-
-      NotifyService.notify(settings);
-    },
-  },
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};