vueless 0.0.2 → 0.0.3

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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,5 @@
+/*
+  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,9 +1,10 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+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: {
@@ -17,9 +18,7 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UTab },
   setup() {
-    const slots = getSlotNames(UTab.name);
-
-    return { args, slots };
+    return { args };
   },
   template: `
     <UTab v-bind="args" />
@@ -49,13 +48,10 @@ slotDefault.args = {
   label: "Tag",
   slotTemplate: `
     <template #default>
-     <div class="flex items-center">
-      <UIcon
-       name="star"
-       size="sm"
-      />
-      {{label}}
-     </div>
+      <div class="flex items-center">
+        <UIcon name="star" size="sm" />
+        {{label}}
+      </div>
     </template>
   `,
 };

package/ui.navigation-tab/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="UTab" class="mono-tab" :class="tabClasses" :data-cy="dataCy" @click="onClickSetValue">
+  <div :data-cy="dataCy" v-bind="wrapperAttrs" @click="onClickSetValue">
     <!-- @slot Use it to add something instead of label. -->
     <slot>
       {{ label }}
@@ -7,106 +7,79 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "UTab",
+<script setup>
+import { computed, inject } from "vue";
 
-  inject: ["setTabsSelectedItem", "getTabsSelectedItem", "getTabsSize"],
+import UIService from "vueless/service.ui";
 
-  props: {
-    /**
-     * Set label.
-     * @ignore
-     */
-    label: {
-      type: String,
-      required: true,
-    },
+import { UTab } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
 
-    /**
-     * Set component value.
-     */
-    value: {
-      type: String,
-      default: "",
-    },
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UTab", inheritAttrs: false });
 
-    /**
-     * Make tab inactive.
-     * @ignore
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+const setUTabsSelectedItem = inject("setUTabsSelectedItem", null);
+const getUTabsSelectedItem = inject("getUTabsSelectedItem", null);
+const getUTabsSize = inject("getUTabsSize", null);
 
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+const props = defineProps({
+  /**
+   * Tab label.
+   * @ignore
+   */
+  label: {
+    type: String,
+    required: true,
   },
 
-  data: () => ({
-    size: "md",
-  }),
-
-  computed: {
-    tabClasses() {
-      const size = `mono-tab-size-${this.size}`;
-      const disabled = this.disabled ? "mono-tab-disabled" : "";
-      const selected =
-        this.getTabsSelectedItem && this.getTabsSelectedItem() === this.value && !this.disabled
-          ? "mono-tab-selected"
-          : "";
-
-      return [size, disabled, selected];
-    },
+  /**
+   * Tab value.
+   */
+  value: {
+    type: String,
+    default: "",
   },
 
-  mounted() {
-    this.size = this.getTabsSize ? this.getTabsSize() : this.size;
+  /**
+   * Make tab disabled.
+   * @ignore
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UTab).default.disabled,
   },
 
-  methods: {
-    async onClickSetValue() {
-      if (!this.disabled) {
-        this.setTabsSelectedItem && this.setTabsSelectedItem(this.value);
-      }
-    },
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
   },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-tab {
-  @apply w-max;
-  @apply pb-2;
-  @apply text-center;
-  @apply cursor-pointer;
 
-  &-selected {
-    @apply border-b-2 border-gray-900;
-  }
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
 
-  &-disabled {
-    @apply text-gray-500;
-  }
+const selected = computed(() => {
+  return getUTabsSelectedItem && getUTabsSelectedItem() === props.value && !props.disabled;
+});
 
-  &-size {
-    &-sm {
-      @apply text-xs;
-    }
+const size = computed(() => {
+  return getUTabsSize ? getUTabsSize() : UIService.get(defaultConfig, UTab).default.size;
+});
 
-    &-md {
-      @apply text-sm;
-    }
+const { wrapperAttrs } = useAttrs(props, { selected, size });
 
-    &-lg {
-      @apply text-base;
-    }
+async function onClickSetValue() {
+  if (!props.disabled && setUTabsSelectedItem) {
+    setUTabsSelectedItem(props.value);
   }
 }
-</style>
+</script>

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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,5 @@
+/*
+  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,8 +1,9 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes } from "vueless/service.storybook";
 
 import UTabs from "vueless/ui.navigation-tabs";
 
 export default {
+  id: "8020",
   title: "Navigation / Tabs",
   component: UTabs,
   args: {
@@ -21,19 +22,14 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UTabs },
   setup() {
-    const slots = getSlotNames(UTabs.name);
-
-    return {
-      args,
-      slots,
-    };
+    return { args };
   },
   template: `
-    <UTabs v-bind="args" v-model="args.modelValue"/>
+    <UTabs v-model="args.modelValue" v-bind="args"/>
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UTabs },
   setup() {
     return {
@@ -46,9 +42,9 @@ const SizesTemplate = (args, { argTypes }) => ({
       <UTabs
         v-model="args.modelValue"
         v-for="(size, index) in sizes"
+        v-bind="args"
         :size="size"
         :key="index"
-        v-bind="args"
       />
     </div>
   `,
@@ -61,7 +57,7 @@ export const sizes = SizesTemplate.bind({});
 sizes.args = {};
 
 export const bottomLine = DefaultTemplate.bind({});
-bottomLine.args = { bottomLine: true };
+bottomLine.args = { underlined: true };
 
 export const disabledTab = DefaultTemplate.bind({});
 disabledTab.args = {

package/ui.navigation-tabs/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mono-tabs" :class="tabsClass" :data-cy="dataCy">
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
     <slot>
       <UTab
         v-for="(item, index) in options"
@@ -14,106 +14,86 @@
   </div>
 </template>
 
-<script>
-import UTab from "vueless/ui.navigation-tab";
+<script setup>
+import { computed, provide } from "vue";
 
-export default {
-  name: "UTabs",
+import UIService from "vueless/service.ui";
+import UTab from "vueless/ui.navigation-tab";
 
-  components: {
-    UTab,
-  },
+import { UTabs } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
 
-  provide() {
-    return {
-      setTabsSelectedItem: (value) => {
-        this.selectedItem = value;
-      },
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UTabs", inheritAttrs: false });
 
-      getTabsSelectedItem: () => {
-        return this.selectedItem;
-      },
+const props = defineProps({
+  /**
+   * Selected tab value.
+   */
+  modelValue: {
+    type: String,
+    default: "",
+  },
 
-      getTabsSize: () => {
-        return this.size;
+  /**
+   * Tab options.
+   */
+  options: {
+    type: Array,
+    default: () => [
+      {
+        label: "",
+        value: "",
+        disabled: false,
       },
-    };
+    ],
   },
 
-  props: {
-    /**
-     * Set component value.
-     */
-    modelValue: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set options for tabs.
-     */
-    options: {
-      type: Array,
-      default: () => [
-        {
-          label: "",
-          value: "",
-          disabled: false,
-        },
-      ],
-    },
-
-    /**
-     * Add a line in bottom along the entire length.
-     */
-    bottomLine: {
-      type: Boolean,
-      default: false,
-    },
+  /**
+   * Tabs size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UTabs).default.size,
+  },
 
-    /**
-     * The size of the tabs.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
+  /**
+   * Add the bottom line along the entire length.
+   */
+  underlined: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UTabs).default.underlined,
+  },
 
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
   },
 
-  emits: ["update:modelValue"],
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
 
-  computed: {
-    selectedItem: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
+const emit = defineEmits(["update:modelValue"]);
 
-    tabsClass() {
-      return this.bottomLine ? "mono-tabs-bottom-line" : "";
-    },
-  },
-};
-</script>
+const selectedItem = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
 
-<style lang="postcss" scoped>
-.mono-tabs {
-  @apply mb-6 flex space-x-8;
-}
+provide("setUTabsSelectedItem", (value) => (selectedItem.value = value));
+provide("getUTabsSelectedItem", () => selectedItem.value);
+provide("getUTabsSize", () => props.size);
 
-.mono-tabs-bottom-line {
-  @apply border-b border-gray-100;
-}
-</style>
+const { wrapperAttrs } = useAttrs(props);
+</script>

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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,5 @@
+/*
+  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

@@ -4,6 +4,7 @@ import URow from "vueless/ui.container-row";
 import { getArgTypes } from "vueless/service.storybook";
 
 export default {
+  id: "9010",
   title: "Other / Dot",
   component: UDot,
   argTypes: {
@@ -21,7 +22,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const ColorsTemplate = (args, { argTypes }) => ({
+const ColorsTemplate = (args, { argTypes } = {}) => ({
   components: { UDot, URow },
   setup() {
     return {
@@ -33,15 +34,15 @@ const ColorsTemplate = (args, { argTypes }) => ({
     <URow>
       <UDot
         v-for="(color, index) in colors"
-        :color="color"
         v-bind="args"
+        :color="color"
         :key="index"
       />
     </URow>
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UDot, URow },
   setup() {
     return {
@@ -53,9 +54,8 @@ const SizesTemplate = (args, { argTypes }) => ({
     <URow>
       <UDot
         v-for="(size, index) in sizes"
-        :size="size"
-        :text="getText(size)"
         v-bind="args"
+        :size="size"
         :key="index"
       />
     </URow>