vueless 0.0.676 → 0.0.678

package/constants.js

@@ -107,6 +107,7 @@ export const COMPONENTS = {
   UCalendar: "ui.form-calendar",
   UDatePicker: "ui.form-date-picker",
   UDatePickerRange: "ui.form-date-picker-range",
+  UColorPicker: "ui.form-color-picker",
   ULabel: "ui.form-label",
 
   /* Text & Content */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.676",
+  "version": "0.0.678",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.form-color-picker/UColorPicker.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed, useId } from "vue";
+
+import { vTooltip } from "../directives";
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+
+import UButton from "../ui.button/UButton.vue";
+
+import { COMPONENT_NAME } from "./constants.ts";
+import defaultConfig from "./config.ts";
+
+import type { Props, Config } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+  modelValue: "",
+  colors: () => ({}),
+  labels: () => ({}),
+});
+
+const emit = defineEmits([
+  /**
+   * Triggers when color value changes.
+   * @property {string} value
+   */
+  "update:modelValue",
+]);
+
+const elementId = props.id || useId();
+
+const selectedItem = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+function onClickColor(color: string) {
+  selectedItem.value = color;
+}
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { listAttrs, colorButtonAttrs, circleAttrs } = useUI<Config>(defaultConfig);
+</script>
+
+<template>
+  <div :id="elementId" v-bind="listAttrs">
+    <UButton
+      v-for="(colorClass, color) in colors"
+      :key="color"
+      v-tooltip="labels?.[color] || color"
+      square
+      size="xs"
+      :ring="false"
+      color="grayscale"
+      variant="thirdary"
+      :filled="selectedItem === color"
+      v-bind="colorButtonAttrs"
+      @click="onClickColor(color)"
+    >
+      <div :class="colorClass" v-bind="circleAttrs" />
+    </UButton>
+  </div>
+</template>

package/ui.form-color-picker/config.ts

@@ -0,0 +1,29 @@
+export default /*tw*/ {
+  list: "flex flex-wrap gap-0.5",
+  colorButton: {
+    base: "{UButton}",
+    button: {
+      compoundVariants: [
+        {
+          filled: true,
+          variant: "thirdary",
+          color: "grayscale",
+          class: "focus:bg-gray-800/10 bg-gray-800/10 dark:focus:bg-gray-200/10 dark:bg-gray-200/10",
+        },
+      ],
+    },
+  },
+  circle: {
+    base: "rounded-full",
+    variants: {
+      size: {
+        sm: "size-4",
+        md: "size-5",
+        lg: "size-6",
+      },
+    },
+  },
+  defaults: {
+    size: "md",
+  },
+};

package/ui.form-color-picker/constants.ts

@@ -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 COMPONENT_NAME = "UColorPicker";

package/ui.form-color-picker/storybook/docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/storybook.ts";
+
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?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.form-color-picker/storybook/stories.ts

@@ -0,0 +1,97 @@
+import {
+  getArgTypes,
+  getSlotNames,
+  getSlotsFragment,
+  getDocsDescription,
+} from "../../utils/storybook.ts";
+
+import UColorPicker from "../UColorPicker.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import UButton from "../../ui.button/UButton.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { Props } from "../types.ts";
+
+interface UColorPickerArgs extends Props {
+  slotTemplate?: string;
+  enum: "size";
+}
+
+export default {
+  id: "3190",
+  title: "Form Inputs & Controls / Color Picker",
+  component: UColorPicker,
+  args: {
+    modelValue: "",
+    colors: {
+      grayscale: "bg-gray-900",
+      gray: "bg-gray-600",
+      red: "bg-red-600",
+      orange: "bg-orange-600",
+      amber: "bg-amber-600",
+      yellow: "bg-yellow-600",
+      lime: "bg-lime-600",
+      green: "bg-green-600",
+      emerald: "bg-emerald-600",
+      teal: "bg-teal-600",
+      cyan: "bg-cyan-600",
+      sky: "bg-sky-600",
+      blue: "bg-blue-600",
+      indigo: "bg-indigo-600",
+      violet: "bg-violet-600",
+      purple: "bg-purple-600",
+      fuchsia: "bg-fuchsia-600",
+      pink: "bg-pink-600",
+      rose: "bg-rose-600",
+    },
+  },
+  argTypes: {
+    ...getArgTypes(UColorPicker.__name),
+  },
+  parameters: {
+    docs: {
+      ...getDocsDescription(UColorPicker.__name),
+    },
+  },
+} as Meta;
+
+const DefaultTemplate: StoryFn<UColorPickerArgs> = (args: UColorPickerArgs) => ({
+  components: { UColorPicker, UButton, UCol },
+  setup() {
+    const slots = getSlotNames(UColorPicker.__name);
+
+    return { args, slots };
+  },
+  template: `
+    <UColorPicker v-bind="args" v-model="args.modelValue">
+      ${args.slotTemplate || getSlotsFragment("")}
+    </UColorPicker>
+  `,
+});
+
+const EnumVariantTemplate: StoryFn<UColorPickerArgs> = (args: UColorPickerArgs, { argTypes }) => ({
+  components: { UCol, UColorPicker },
+  setup() {
+    return {
+      args,
+      options: argTypes?.[args.enum]?.options,
+    };
+  },
+  template: `
+    <UCol>
+      <UColorPicker
+        v-for="(option, index) in options"
+        :key="index"
+        v-bind="args"
+        v-model="args.modelValue"
+        :[args.enum]="option"
+      />
+    </UCol>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };

package/ui.form-color-picker/types.ts

@@ -0,0 +1,42 @@
+import defaultConfig from "./config.ts";
+
+import type { BrandColors, GrayColors, ComponentConfig } from "../types.ts";
+
+export type Config = typeof defaultConfig;
+
+export interface Props {
+  /**
+   * Selected values.
+   */
+  modelValue: string;
+
+  /**
+   * Component size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Color list.
+   */
+  colors?: Record<BrandColors, string>;
+
+  /**
+   * Color labels.
+   */
+  labels?: Record<GrayColors, string>;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: ComponentConfig<Config>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string | null;
+}

package/ui.form-input-file/storybook/stories.ts

@@ -17,7 +17,7 @@ interface UInputFileArgs extends Props {
 }
 
 export default {
-  id: "30232",
+  id: "3200",
   title: "Form Inputs & Controls / Input File",
   component: UInputFile,
   args: {

package/ui.form-label/storybook/stories.ts

@@ -20,7 +20,7 @@ interface ULabelArgs extends Props {
 }
 
 export default {
-  id: "3240",
+  id: "3210",
   title: "Form Inputs & Controls / Label",
   component: ULabel,
   args: {

package/ui.other-theme-color-toggle/UThemeColorToggle.vue

@@ -1,26 +1,25 @@
 <script setup lang="ts">
-import { computed, useId, watch } from "vue";
+import { computed, useId } from "vue";
 
-import { vTooltip } from "../directives";
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
 import { setTheme, getSelectedBrandColor, getSelectedGrayColor } from "../utils/theme.ts";
 import { GRAYSCALE_COLOR } from "../constants.js";
 
 import UDivider from "../ui.container-divider/UDivider.vue";
-import UButton from "../ui.button/UButton.vue";
+import UColorPicker from "../ui.form-color-picker/UColorPicker.vue";
 
 import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
-import type { BrandColors, GrayColors } from "../types.ts";
 import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
-  modelValue: () => ["", ""],
+  brand: "",
+  gray: "",
   brandColors: () => ({}),
   grayColors: () => ({}),
   brandLabels: () => ({}),
@@ -29,78 +28,61 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits([
   /**
-   * Triggers when color value changes.
+   * Triggers when the brand color changes.
    * @property {string} value
    */
-  "update:modelValue",
+  "update:brand",
+
+  /**
+   * Triggers when the gray color changes.
+   * @property {string} value
+   */
+  "update:gray",
 ]);
 
 const elementId = props.id || useId();
 
-const selectedBrand = getSelectedBrandColor();
-const selectedGray = getSelectedGrayColor();
+const selectedBrandColor = computed({
+  get: () => props.brand || getSelectedBrandColor(),
+  set: (brand: string) => {
+    const prevBrand = getSelectedBrandColor();
+    const isBrandGrayscale = brand === GRAYSCALE_COLOR;
+    const isPrevBrandGrayscale = prevBrand === GRAYSCALE_COLOR;
 
-const selectedItem = computed({
-  get: () => {
-    const [brand, gray] = props.modelValue;
+    if (brand !== prevBrand && (isBrandGrayscale || isPrevBrandGrayscale)) {
+      window.location.reload();
+    }
 
-    return [brand || selectedBrand, gray || selectedGray];
+    setTheme({ brand });
+    emit("update:brand", brand);
   },
-  set: (value) => emit("update:modelValue", value),
 });
 
-watch(selectedItem, (newValue, oldValue) => {
-  const [oldBrand, oldGray] = oldValue;
-  const [brand, gray] = newValue;
-
-  if (oldBrand === brand && oldGray === gray) {
-    return;
-  }
-
-  setTheme({ brand, gray });
-
-  if (oldBrand !== brand && (brand === GRAYSCALE_COLOR || oldBrand === GRAYSCALE_COLOR)) {
-    window.location.reload();
-  }
+const selectedGrayColor = computed({
+  get: () => props.gray || getSelectedGrayColor(),
+  set: (value: string) => {
+    setTheme({ gray: value });
+    emit("update:gray", value);
+  },
 });
 
-function onClickBrandColor(brand: BrandColors) {
-  const [, gray] = selectedItem.value;
-
-  selectedItem.value = [brand, gray];
-}
-
-function onClickGrayColor(gray: GrayColors) {
-  const [brand] = selectedItem.value;
-
-  selectedItem.value = [brand, gray];
-}
-
 /**
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { listAttrs, colorButtonAttrs, circleAttrs, colorDividerAttrs } =
+const { listAttrs, colorDividerAttrs, brandColorPickerAttrs, grayColorPickerAttrs } =
   useUI<Config>(defaultConfig);
 </script>
 
 <template>
   <div :id="elementId" v-bind="listAttrs">
-    <UButton
-      v-for="(brandColorClass, color) in brandColors"
-      :key="color"
-      v-tooltip="brandLabels?.[color] || color"
-      square
-      size="xs"
-      :ring="false"
-      color="grayscale"
-      variant="thirdary"
-      :filled="selectedItem[0] === color"
-      v-bind="colorButtonAttrs"
-      @click="onClickBrandColor(color)"
-    >
-      <div :class="brandColorClass" v-bind="circleAttrs" />
-    </UButton>
+    <UColorPicker
+      v-model="selectedBrandColor"
+      :size="size"
+      :colors="brandColors"
+      :labels="brandLabels"
+      v-bind="brandColorPickerAttrs"
+    />
 
     <UDivider
       v-if="Object.keys(brandColors).length && Object.keys(grayColors).length"
@@ -108,20 +90,12 @@ const { listAttrs, colorButtonAttrs, circleAttrs, colorDividerAttrs } =
       v-bind="colorDividerAttrs"
     />
 
-    <UButton
-      v-for="(grayColorClass, color) in grayColors"
-      :key="color"
-      v-tooltip="brandLabels?.[color] || color"
-      square
-      size="xs"
-      :ring="false"
-      color="grayscale"
-      variant="thirdary"
-      :filled="selectedItem[1] === color"
-      v-bind="colorButtonAttrs"
-      @click="onClickGrayColor(color)"
-    >
-      <div :class="grayColorClass" v-bind="circleAttrs" />
-    </UButton>
+    <UColorPicker
+      v-model="selectedGrayColor"
+      :size="size"
+      :colors="grayColors"
+      :labels="grayLabels"
+      v-bind="grayColorPickerAttrs"
+    />
   </div>
 </template>

package/ui.other-theme-color-toggle/config.ts

@@ -1,28 +1,7 @@
 export default /*tw*/ {
   list: "flex flex-wrap gap-0.5",
-  colorButton: {
-    base: "{UButton}",
-    button: {
-      compoundVariants: [
-        {
-          filled: true,
-          variant: "thirdary",
-          color: "grayscale",
-          class: "bg-gray-800/10 dark:bg-gray-200/10",
-        },
-      ],
-    },
-  },
-  circle: {
-    base: "rounded-full",
-    variants: {
-      size: {
-        sm: "size-4",
-        md: "size-5",
-        lg: "size-6",
-      },
-    },
-  },
+  brandColorPicker: "{UColorPicker}",
+  grayColorPicker: "{UColorPicker}",
   colorDivider: "{UDivider}",
   defaults: {
     size: "md",

package/ui.other-theme-color-toggle/storybook/stories.ts

@@ -22,10 +22,10 @@ export default {
   title: "Other / Theme Color Toggle",
   component: UThemeColorToggle,
   args: {
-    modelValue: ["", ""],
+    brand: "",
+    gray: "",
     brandColors: {
       grayscale: "bg-gray-900",
-      gray: "bg-gray-600",
       red: "bg-red-600",
       orange: "bg-orange-600",
       amber: "bg-amber-600",
@@ -71,7 +71,7 @@ const DefaultTemplate: StoryFn<UThemeColorToggleArgs> = (args: UThemeColorToggle
   },
   template: `
     <UCol>
-      <UThemeColorToggle v-bind="args" v-model="args.modelValue">
+      <UThemeColorToggle v-bind="args" v-model:brand="args.brand" v-model:gray="args.gray">
         ${args.slotTemplate || getSlotsFragment("")}
       </UThemeColorToggle>
 
@@ -97,7 +97,8 @@ const EnumVariantTemplate: StoryFn<UThemeColorToggleArgs> = (
         v-for="(option, index) in options"
         :key="index"
         v-bind="args"
-        v-model="args.modelValue"
+        v-model:brand="args.brand"
+        v-model:gray="args.gray"
         :[args.enum]="option"
       />
     </UCol>

package/ui.other-theme-color-toggle/types.ts

@@ -6,9 +6,14 @@ export type Config = typeof defaultConfig;
 
 export interface Props {
   /**
-   * Selected values.
+   * Selected brand color (v-model).
    */
-  modelValue: [BrandColors, GrayColors];
+  brand: BrandColors;
+
+  /**
+   * Selected gray color (v-model).
+   */
+  gray: GrayColors;
 
   /**
    * Component size.

package/utils/theme.ts

@@ -100,11 +100,11 @@ export function setColorMode(colorMode: `${ColorMode}`) {
 }
 
 export function getSelectedBrandColor() {
-  return localStorage.getItem("brand") || undefined;
+  return (isCSR && localStorage.getItem("brand")) || undefined;
 }
 
 export function getSelectedGrayColor() {
-  return localStorage.getItem("gray") || undefined;
+  return (isCSR && localStorage.getItem("gray")) || undefined;
 }
 
 export function setTheme(config: Config = {}) {
@@ -138,6 +138,9 @@ export function setTheme(config: Config = {}) {
   const defaultGrayShade = isDarkMode ? 400 : 600;
   const defaultRingOffsetColor = isDarkMode ? ringOffsetColorDark : ringOffsetColorLight;
 
+  isCSR && localStorage.setItem("brand", brand);
+  isCSR && localStorage.setItem("gray", gray);
+
   if (gray === COOL_COLOR) {
     gray = GRAY_COLOR;
   }
@@ -173,9 +176,6 @@ export function setTheme(config: Config = {}) {
     console.warn(`The gray color '${gray}' is missing in your palette.`);
   }
 
-  localStorage.setItem("brand", brand);
-  localStorage.setItem("gray", gray);
-
   const variables: Partial<VuelessCssVariables> = {
     "--vl-rounding-sm": `${Number(roundingSm) / PX_IN_REM}rem`,
     "--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,