vueless 0.0.178 → 0.0.180

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.178",
+  "version": "0.0.180",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.data-table/configs/default.config.js

@@ -1,14 +1,14 @@
 export default /*tw*/ {
   wrapper: "relative",
   headerCellGeneral: {
-    base: "p-4 first:p-5 text-sm font-normal text-gray-500 text-left",
+    base: "p-4 first:p-5 text-sm font-normal text-gray-500 text-left text-nowrap",
     variants: {
       compact: {
         true: "px-4 py-3 last:px-4 last:py-3 first:px-4 first:py-3",
       },
     },
   },
-  headerCounterGeneral: "mr-3 font-medium text-sm text-gray-900",
+  headerCounterGeneral: "mr-1.5 pr-1.5 font-medium text-sm text-gray-900",
   stickyHeader: "fixed top-0 flex items-center z-30 overflow-hidden rounded-none border",
   stickyHeaderRow: "border-gray-200 bg-white",
   stickyHeaderCell: "flex-none whitespace-nowrap",

package/ui.form-calendar/components/DayView.vue

@@ -1,9 +1,9 @@
 <template>
-  <div v-bind="dayViewWrapperAttrs">
-    <div v-bind="weekDaysWrapperAttrs">
+  <div v-bind="dayViewAttrs">
+    <div v-bind="weekDaysAttrs">
       <span v-for="weekDay in weekdays" :key="weekDay" v-bind="weekDayAttrs" v-text="weekDay" />
     </div>
-    <div v-bind="daysWrapperAttrs">
+    <div v-bind="daysAttrs">
       <button
         v-for="day in days"
         :key="day"
@@ -90,10 +90,10 @@ const props = defineProps({
 const emit = defineEmits(["input"]);
 
 const {
-  dayViewWrapperAttrs,
-  weekDaysWrapperAttrs,
+  dayViewAttrs,
+  weekDaysAttrs,
   weekDayAttrs,
-  daysWrapperAttrs,
+  daysAttrs,
   activeDayAttrs,
   selectedDayAttrs,
   currentDayAttrs,

package/ui.form-calendar/components/MonthView.vue

@@ -1,13 +1,15 @@
 <template>
-  <div v-bind="monthViewWrapperAttrs">
-    <button
+  <div v-bind="monthViewAttrs">
+    <UButton
       v-for="month in months"
       :key="month"
-      :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
+      variant="thirdary"
+      color="brand"
       v-bind="monthAttrs(getMonthClasses(month))"
+      :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
+      :label="formatDate(month, 'M', props.locale)"
       @click="onClickMonth(month)"
       @mousedown.prevent.capture
-      v-text="formatDate(month, 'M', props.locale)"
     />
   </div>
 </template>
@@ -21,6 +23,8 @@ import useAttrs from "../composables/attrs.composable";
 
 import { MONTHS_PER_VIEW } from "../constants";
 
+import UButton from "../../ui.button";
+
 const props = defineProps({
   selectedDate: {
     type: [Date, null],
@@ -65,7 +69,7 @@ const props = defineProps({
 
 const emit = defineEmits(["input"]);
 
-const { monthViewWrapperAttrs, selectedMonthAttrs, activeMonthAttrs, monthAttrs } = useAttrs(props);
+const { monthViewAttrs, selectedMonthAttrs, activeMonthAttrs, monthAttrs } = useAttrs(props);
 
 const localSelectedDate = computed(() => {
   return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;

package/ui.form-calendar/components/YearView.vue

@@ -1,13 +1,15 @@
 <template>
-  <div v-bind="yearViewWrapperAttrs">
-    <button
+  <div v-bind="yearViewAttrs">
+    <UButton
       v-for="year in years"
       :key="year"
+      variant="thirdary"
+      color="brand"
       :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
       v-bind="yearAttrs(getYearClasses(year))"
+      :label="formatDate(year, 'Y', props.locale)"
       @mousedown.prevent.capture
       @click="onClickMonth(year)"
-      v-text="formatDate(year, 'Y', props.locale)"
     />
   </div>
 </template>
@@ -21,6 +23,8 @@ import useAttrs from "../composables/attrs.composable";
 
 import { YEARS_PER_VIEW } from "../constants";
 
+import UButton from "../../ui.button";
+
 const props = defineProps({
   selectedDate: {
     type: [Date, null],
@@ -65,7 +69,7 @@ const props = defineProps({
 
 const emit = defineEmits(["input"]);
 
-const { yearViewWrapperAttrs, selectedYearAttrs, activeYearAttrs, yearAttrs } = useAttrs(props);
+const { yearViewAttrs, selectedYearAttrs, activeYearAttrs, yearAttrs } = useAttrs(props);
 
 const localSelectedDate = computed(() => {
   return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;

package/ui.form-calendar/composables/attrs.composable.js

@@ -26,10 +26,10 @@ export default function useAttrs(props) {
   const nextPrevButtonAttrs = getAttrs("nextPrevButton");
   const nextIconAttrs = getAttrs("nextIcon");
   const prevIconAttrs = getAttrs("prevIcon");
-  const dayViewWrapperAttrs = getAttrs("dayViewWrapper");
-  const weekDaysWrapperAttrs = getAttrs("weekDaysWrapper");
+  const dayViewAttrs = getAttrs("dayView");
+  const weekDaysAttrs = getAttrs("weekDays");
   const weekDayAttrs = getAttrs("weekDay");
-  const daysWrapperAttrs = getAttrs("daysWrapper");
+  const daysAttrs = getAttrs("days");
   const activeDayAttrs = getAttrs("activeDay");
   const selectedDayAttrs = getAttrs("selectedDay");
   const currentDayAttrs = getAttrs("currentDay");
@@ -37,18 +37,23 @@ export default function useAttrs(props) {
   const inRangeFirstDayAttrs = getAttrs("inRangeFirstDay");
   const inRangeLastDayAttrs = getAttrs("inRangeLastDay");
   const anotherMonthDayAttrs = getAttrs("anotherMonthDay");
-  const monthViewWrapperAttrs = getAttrs("monthViewWrapper");
+  const monthViewAttrs = getAttrs("monthView");
   const selectedMonthAttrs = getAttrs("selectedMonth");
   const activeMonthAttrs = getAttrs("activeMonth");
-  const yearViewWrapperAttrs = getAttrs("yearViewWrapper");
+  const yearViewAttrs = getAttrs("yearView");
   const selectedYearAttrs = getAttrs("selectedYear");
   const activeYearAttrs = getAttrs("activeYear");
-  const timepickerWrapperAttrs = getAttrs("timepickerWrapper");
+  const timepickerAttrs = getAttrs("timepicker");
   const timepickerLabelAttrs = getAttrs("timepickerLabel");
+  const timepickerInput = getAttrs("timepickerInput");
   const timepickerInputWrapperAttrs = getAttrs("timepickerInputWrapper");
-  const timepickerLeftInputAttrs = getAttrs("timepickerLeftInput");
-  const timepickerRightInputAttrs = getAttrs("timepickerRightInput");
-  const submitButtonAttrs = getAttrs("submitButton");
+  const timepickerLeftInputAttrs = getAttrs("timepickerLeftInput", {
+    classes: timepickerInput.value.class,
+  });
+  const timepickerRightInputAttrs = getAttrs("timepickerRightInput", {
+    classes: timepickerInput.value.class,
+  });
+  const timepickerSubmitButtonAttrs = getAttrs("timepickerSubmitButton");
 
   const nextPrevWrapperAttrs = getAttrs("nextPrevWrapper", { classes: optionClasses.value });
 
@@ -57,11 +62,11 @@ export default function useAttrs(props) {
   };
 
   const monthAttrs = (classes = []) => {
-    return getAttrs("month", { classes }).value;
+    return getAttrs("month", { classes, isComponent: true }).value;
   };
 
   const yearAttrs = (classes = []) => {
-    return getAttrs("year", { classes }).value;
+    return getAttrs("year", { classes, isComponent: true }).value;
   };
 
   return {
@@ -75,10 +80,10 @@ export default function useAttrs(props) {
     nextIconAttrs,
     nextPrevButtonAttrs,
     prevIconAttrs,
-    dayViewWrapperAttrs,
-    weekDaysWrapperAttrs,
+    dayViewAttrs,
+    weekDaysAttrs,
     weekDayAttrs,
-    daysWrapperAttrs,
+    daysAttrs,
     activeDayAttrs,
     selectedDayAttrs,
     currentDayAttrs,
@@ -87,20 +92,20 @@ export default function useAttrs(props) {
     inRangeDayAttrs,
     inRangeFirstDayAttrs,
     inRangeLastDayAttrs,
-    monthViewWrapperAttrs,
+    monthViewAttrs,
     selectedMonthAttrs,
     activeMonthAttrs,
     monthAttrs,
-    yearViewWrapperAttrs,
+    yearViewAttrs,
     selectedYearAttrs,
     activeYearAttrs,
     yearAttrs,
-    timepickerWrapperAttrs,
+    timepickerAttrs,
     timepickerLabelAttrs,
     timepickerInputWrapperAttrs,
     timepickerLeftInputAttrs,
     timepickerRightInputAttrs,
-    submitButtonAttrs,
+    timepickerSubmitButtonAttrs,
     nextPrevWrapperAttrs,
   };
 }

package/ui.form-calendar/configs/default.config.js

@@ -19,10 +19,10 @@ export default /*tw*/ {
   nextIconName: "keyboard_arrow_right",
   prevIcon: "",
   prevIconName: "keyboard_arrow_left",
-  dayViewWrapper: "",
-  weekDaysWrapper: "grid grid-cols-7",
+  dayView: "",
+  weekDays: "grid grid-cols-7",
   weekDay: "flex size-8 items-center justify-center text-xs uppercase text-brand-500",
-  daysWrapper: "grid grid-cols-7",
+  days: "grid grid-cols-7",
   day: "mx-auto size-8 rounded-lg text-sm hover:bg-brand-100 disabled:opacity-50 disabled:cursor-not-allowed",
   activeDay: "bg-brand-100 hover:bg-brand-100",
   inRangeFirstDay: "rounded-none rounded-l-lg bg-brand-200 text-brand-900 hover:bg-brand-200",
@@ -31,26 +31,21 @@ export default /*tw*/ {
   selectedDay: "bg-brand-900 text-white hover:bg-brand-900",
   currentDay: "hover:bg-brand-100 border-2 border-brand-900",
   anotherMonthDay: "hover:bg-brand-100 text-brand-400",
-  monthViewWrapper: "grid grid-cols-4 items-center justify-center",
-  month: `
-    mx-auto flex h-12 w-full items-center justify-center rounded-lg text-sm hover:cursor-pointer hover:bg-brand-100
-    disabled:opacity-50 disabled:cursor-not-allowed
-  `,
+  monthView: "grid grid-cols-4 items-center justify-center",
+  month: "mx-auto flex h-12 w-full rounded-lg hover:!bg-brand-900 hover:text-white",
   selectedMonth: "bg-brand-900 hover:bg-brand-900 text-white",
   activeMonth: "bg-brand-100",
-  yearViewWrapper: "grid grid-cols-4 items-center justify-center",
-  year: `
-    mx-auto flex h-12 w-full items-center justify-center rounded-lg text-sm hover:cursor-pointer hover:bg-brand-100
-    disabled:opacity-50 disabled:cursor-not-allowed
-  `,
+  yearView: "grid grid-cols-4 items-center justify-center",
+  year: "mx-auto flex h-12 w-full rounded-lg hover:!bg-brand-900 hover:text-white",
   selectedYear: "bg-brand-900 hover:bg-brand-900 text-white",
   activeYear: "bg-brand-100",
-  timepickerWrapper: "mt-2 pl-1 pt-3 text-sm flex items-center justify-between gap-2 border-t border-brand-200",
+  timepicker: "mt-2 pl-1 pt-3 text-sm flex items-center justify-between gap-2 border-t border-brand-200",
   timepickerLabel: "w-full",
   timepickerInputWrapper: "flex items-center gap-px rounded-lg border border-brand-300",
-  timepickerLeftInput: "w-11 rounded-l-lg border-none px-2.5 py-1.5 text-center text-sm focus:ring-brand-500",
-  timepickerRightInput: "w-11 rounded-r-lg border-none px-2.5 py-1.5 text-center text-sm focus:ring-brand-500",
-  submitButton: "py-2 focus:ring-0 border-0",
+  timepickerInput: "w-11 border-none px-2.5 py-1.5 text-center text-sm focus:ring-brand-500",
+  timepickerLeftInput: "rounded-l-lg",
+  timepickerRightInput: "rounded-r-lg",
+  timepickerSubmitButton: "py-2 focus:ring-0 border-0",
   i18n: {
     weekdays: {
       shorthand: {

package/ui.form-calendar/index.vue

@@ -118,7 +118,7 @@
       @input="onInput"
     />
 
-    <div v-if="isTimepickerEnabled" v-bind="timepickerWrapperAttrs">
+    <div v-if="isTimepickerEnabled" v-bind="timepickerAttrs">
       <span v-bind="timepickerLabelAttrs" v-text="locale.timeLabel" />
 
       <div v-bind="timepickerInputWrapperAttrs">
@@ -144,7 +144,7 @@
         size="sm"
         square
         filled
-        v-bind="submitButtonAttrs"
+        v-bind="timepickerSubmitButtonAttrs"
         @click="onClickSubmit"
       >
         {{ locale.okLabel }}
@@ -309,12 +309,12 @@ const {
   nextIconAttrs,
   nextPrevButtonAttrs,
   prevIconAttrs,
-  timepickerWrapperAttrs,
+  timepickerAttrs,
   timepickerLabelAttrs,
   timepickerInputWrapperAttrs,
   timepickerLeftInputAttrs,
   timepickerRightInputAttrs,
-  submitButtonAttrs,
+  timepickerSubmitButtonAttrs,
   nextPrevWrapperAttrs,
 } = useAttrs(props);
 

package/ui.form-checkbox-group/configs/default.config.js

@@ -3,6 +3,8 @@ export default /*tw*/ {
   list: "ml-4 flex flex-col gap-4 relative",
   checkbox: "",
   defaultVariants: {
+    color: "brand",
+    size: "md",
     disabled: false,
   },
 };

package/ui.form-checkbox-group/index.vue

@@ -1,14 +1,14 @@
 <template>
   <ULabel
-    :for="id"
+    :size="size"
     :label="label"
     :error="error"
-    align="topWithDesc"
+    :description="description"
     :disabled="disabled"
+    align="topWithDesc"
     :data-cy="dataCy"
     v-bind="labelAttrs"
   >
-    {{ option }}
     <div v-bind="listAttrs">
       <slot>
         <UCheckbox
@@ -33,7 +33,7 @@
 import { provide, ref, watch } from "vue";
 import { isEqual } from "lodash-es";
 
-import UIService, { getRandomId } from "../service.ui";
+import UIService from "../service.ui";
 
 import ULabel from "../ui.form-label";
 import UCheckbox from "../ui.form-checkbox";
@@ -46,14 +46,6 @@ import { useAttrs } from "./composables/attrs.composable";
 defineOptions({ name: "UCheckboxGroup", inheritAttrs: false });
 
 const props = defineProps({
-  /**
-   * Checkbox group label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
   /**
    * Checkbox group value.
    */
@@ -71,13 +63,47 @@ const props = defineProps({
   },
 
   /**
-   * Error description.
+   * Checkbox group label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Checkbox group description.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Checkbox group error message.
    */
   error: {
     type: String,
     default: "",
   },
 
+  /**
+   * Radio size.
+   * @values xs, sm, md, lg, xl
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UCheckboxGroup).default.size,
+  },
+
+  /**
+   * Radio group color.
+   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+   */
+  color: {
+    type: String,
+    default: UIService.get(defaultConfig, UCheckboxGroup).default.color,
+  },
+
   /**
    * Name for each checkbox.
    */
@@ -94,15 +120,6 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UCheckboxGroup).default.disabled,
   },
 
-  /**
-   * Generates unique element id.
-   * @ignore
-   */
-  id: {
-    type: String,
-    default: () => getRandomId(),
-  },
-
   /**
    * Component ui config object.
    */

package/ui.form-color-picker/composables/attrs.composable.js

@@ -1,12 +1,18 @@
+import { computed } from "vue";
 import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
-import { cva } from "../../service.ui";
-import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { radio } = config.value;
+  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { list, radio } = config.value;
+
+  const cvaList = cva({
+    base: list.base,
+    variants: list.variants,
+    compoundVariants: list.compoundVariants,
+  });
 
   const cvaRadio = cva({
     base: radio.base,
@@ -14,24 +20,23 @@ export function useAttrs(props) {
     compoundVariants: radio.compoundVariants,
   });
 
-  const radioClasses = computed(() => cvaRadio({ color: props.color }));
+  const listClasses = computed(() => cvaList({ size: props.size }));
+  const radioClasses = computed(() => setColor(cvaRadio({ color: props.color }), props.color));
 
-  const wrapperAttrs = getAttrs("wrapper");
-  const listAttrs = getAttrs("listAttrs");
   const labelAttrs = getAttrs("label");
+  const listAttrs = getAttrs("list", { classes: listClasses });
+  const unselectedAttrs = getAttrs("unselected");
+  const unselectedRadioAttrs = getAttrs("unselectedRadio", { isComponent: true });
+  const unselectedIconAttrs = getAttrs("unselectedIcon", { isComponent: true });
   const radioAttrs = getAttrs("radio", { classes: radioClasses, isComponent: true });
-  const iconAttrs = getAttrs("icon");
-  const uncoloredAttrs = getAttrs("uncolored", { isComponent: true });
-  const uncoloredRadioAttrs = getAttrs("uncoloredRadio", { isComponent: true });
 
   return {
     config,
-    wrapperAttrs,
     listAttrs,
     labelAttrs,
     radioAttrs,
-    iconAttrs,
-    uncoloredAttrs,
-    uncoloredRadioAttrs,
+    unselectedIconAttrs,
+    unselectedAttrs,
+    unselectedRadioAttrs,
   };
 }

package/ui.form-color-picker/configs/default.config.js

@@ -1,31 +1,39 @@
 export default /*tw*/ {
-  wrapper: "",
-  listAttrs: "mt-4 gap-4 flex flex-wrap",
   label: "",
+  list: {
+    base: "flex flex-wrap",
+    variants: {
+      size: {
+        xs: "gap-2",
+        sm: "gap-2",
+        md: "gap-3",
+        lg: "gap-3",
+        xl: "gap-4",
+      },
+    },
+  },
   radio: {
-    base: "size-6 cursor-pointer ",
     radio: {
-      base: "bg-{color}-500",
+      base: "cursor-pointer bg-{color}-500 border-{color}-500 hover:border-{color}-500",
     },
   },
-  icon: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
-  iconName: "close",
-  uncolored: "relative flex",
-  uncoloredRadio: {
-    base: "size-6",
+  unselected: "relative flex",
+  unselectedRadio: {
     radio: {
       compoundVariants: [
         {
           color: "grayscale",
-          class: `
-          text-white
-          checked:border-gray-300
-        `,
+          class: "text-white !border-gray-300 hover:!border-gray-400 focus:!border-gray-400 active:!border-gray-500",
         },
       ],
     },
   },
+  unselectedIcon: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+  unselectedIconName: "close",
   defaultVariants: {
+    name: "UColorPicker",
+    size: "md",
+    disabled: false,
     colorOptions: [
       "red",
       "orange",
@@ -45,8 +53,6 @@ export default /*tw*/ {
       "pink",
       "rose",
     ],
-    disabled: false,
-    size: "md",
   },
   safelist: (colors) => [{ pattern: `bg-(${colors})-500` }],
 };

package/ui.form-color-picker/index.stories.js

@@ -11,7 +11,7 @@ export default {
   component: UColorPicker,
   args: {
     label: "Label",
-    value: "red",
+    value: "",
   },
   argTypes: {
     ...getArgTypes(UColorPicker.name),