vueless 0.0.412 → 0.0.414

package/package.json

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

package/ui.data-table/UTable.vue

@@ -190,7 +190,7 @@
               :columns="columns"
               :config="config"
               :attrs="keysAttrs"
-              v-bind="getRowAttrs(row)"
+              v-bind="getRowAttrs(row.id)"
               :class="cx([getRowAttrs(row.id).class, getRowClasses(row)])"
               @click="onClickRow"
               @toggle-row-visibility="onToggleRowVisibility"
@@ -610,7 +610,7 @@ function shouldDisplayDateSeparator(rowIndex) {
 }
 
 function getRowAttrs(rowId) {
-  return selectedRows.value.includes(rowId) ? bodyRowCheckedAttrs : bodyRowAttrs;
+  return selectedRows.value.includes(rowId) ? bodyRowCheckedAttrs.value : bodyRowAttrs.value;
 }
 
 function getRowClasses(row) {

package/ui.data-table/UTableRow.vue

@@ -36,7 +36,10 @@
         />
       </div>
 
-      <div v-if="isCellObject(value)">
+      <div
+        v-if="isCellObject(value)"
+        :class="cx([bodyCellPrimaryAttrs.class, getCellContentClasses(row, key)])"
+      >
         <slot :name="`cell-${key}`" :value="value" :row="row">
           <div v-bind="bodyCellPrimaryAttrs" ref="cellRef" :data-test="`${dataTest}-${key}-cell`">
             {{ getCellPrimaryContent(value) }}
@@ -196,6 +199,12 @@ function getCellClasses(row, key) {
   return typeof cellClasses === "function" ? cellClasses(row[key].value, row) : cellClasses;
 }
 
+function getCellContentClasses(row, key) {
+  const cellClasses = row[key]?.contentClasses || "";
+
+  return typeof cellClasses === "function" ? cellClasses(row[key].value, row) : cellClasses;
+}
+
 function isCellObject(value) {
   return typeof value === "object" && value !== null && ("primary" in value || "value" in value);
 }

package/ui.dropdown-list/UDropdownList.vue

@@ -198,7 +198,7 @@ const emit = defineEmits([
   /**
    * Triggers when option is added.
    */
-  "addOption",
+  "add",
   /**
    * Triggers on click option.
    */
@@ -260,7 +260,7 @@ const wrapperHeight = computed(() => {
 });
 
 function onClickAddOption() {
-  emit("addOption");
+  emit("add");
 }
 
 function select(option, key) {

package/ui.form-calendar/UCalendar.vue

@@ -189,7 +189,7 @@ defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Calendar value in JS Date Object or String formatted in provided props.dateFormat.
+   * Calendar value (JavaScript Date object or string formatted in given `dateFormat`).
    */
   modelValue: {
     type: [String, Object],
@@ -197,7 +197,7 @@ const props = defineProps({
   },
 
   /**
-   * Calendar view.
+   * Calendar view variant.
    * @values day, month, year
    */
   view: {
@@ -206,7 +206,7 @@ const props = defineProps({
   },
 
   /**
-   * Enable range selection.
+   * Enable date range selection.
    */
   range: {
     type: Boolean,
@@ -214,7 +214,7 @@ const props = defineProps({
   },
 
   /**
-   * Enable timepicker.
+   * Show timepicker.
    */
   timepicker: {
     type: Boolean,
@@ -222,7 +222,7 @@ const props = defineProps({
   },
 
   /**
-   * Date format.
+   * Date string format.
    */
   dateFormat: {
     type: String,
@@ -238,7 +238,7 @@ const props = defineProps({
   },
 
   /**
-   * User friendly date format.
+   * User-friendly date format (it will be shown in UI).
    */
   userDateFormat: {
     type: String,
@@ -254,7 +254,7 @@ const props = defineProps({
   },
 
   /**
-   * Min date in JS Date Object or Date String formatted in provided props.dateFormat.
+   * Min date (JavaScript Date object or string formatted in given `dateFormat`).
    */
   minDate: {
     type: [Date, String],
@@ -262,7 +262,7 @@ const props = defineProps({
   },
 
   /**
-   * Max date in JS Date Object or Date String formatted in provided props.dateFormat.
+   * Max date (JavaScript Date object or string formatted in given `dateFormat`).
    */
   maxDate: {
     type: [Date, String],
@@ -316,7 +316,7 @@ const emit = defineEmits([
   "keydown",
 
   /**
-   * Triggers when the date input value is changed by the user.
+   * Triggers when the user changes the date input value.
    * @property {string} value
    */
   "userDateChange",

package/ui.form-date-picker/UDatePicker.vue

@@ -86,6 +86,14 @@ import { UDatePicker } from "./constants.js";
 defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
+  /**
+   * Datepicker value (JavaScript Date object or string formatted in given `dateFormat`).
+   */
+  modelValue: {
+    type: [Object, String],
+    default: null,
+  },
+
   /**
    * Datepicker label.
    */
@@ -95,7 +103,7 @@ const props = defineProps({
   },
 
   /**
-   * Label placement.
+   * Datepicker label placement.
    * @values top, topInside, topWithDesc, left, right
    */
   labelAlign: {
@@ -112,11 +120,28 @@ const props = defineProps({
   },
 
   /**
-   * Datepicker value in JS Date Object or String formatted in provided props.dateFormat.
+   * Datepicker description.
    */
-  modelValue: {
-    type: [Object, String],
-    default: null,
+  description: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Datepicker error message.
+   */
+  error: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Datepicker size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: getDefault(defaultConfig, UDatePicker).size,
   },
 
   /**
@@ -138,7 +163,7 @@ const props = defineProps({
   },
 
   /**
-   * Min date in format date string or Date.
+   * Min date (JavaScript Date object or string formatted in given `dateFormat`).
    */
   minDate: {
     type: [String, Date],
@@ -146,7 +171,7 @@ const props = defineProps({
   },
 
   /**
-   * Max date in format date string or Date.
+   * Max date (JavaScript Date object or string formatted in given `dateFormat`).
    */
   maxDate: {
     type: [String, Date],
@@ -154,44 +179,35 @@ const props = defineProps({
   },
 
   /**
-   * Disable component.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDatePicker).disabled,
-  },
-
-  /**
-   * Enable timepicker.
+   * Date string format.
    */
-  timepicker: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDatePicker).timepicker,
+  dateFormat: {
+    type: String,
+    default: getDefault(defaultConfig, UDatePicker).dateFormat,
   },
 
   /**
-   * Error message.
+   * Same as date format, but used when timepicker is enabled.
    */
-  error: {
+  dateTimeFormat: {
     type: String,
-    default: "",
+    default: getDefault(defaultConfig, UDatePicker).dateTimeFormat,
   },
 
   /**
-   * Datepicker description.
+   * User-friendly date format (it will be shown in UI).
    */
-  description: {
+  userDateFormat: {
     type: String,
-    default: "",
+    default: getDefault(defaultConfig, UDatePicker).userDateFormat,
   },
 
   /**
-   * Datepicker size.
-   * @values sm, md, lg
+   * Same as user format, but used when timepicker is enabled.
    */
-  size: {
+  userDateTimeFormat: {
     type: String,
-    default: getDefault(defaultConfig, UDatePicker).size,
+    default: getDefault(defaultConfig, UDatePicker).userDateTimeFormat,
   },
 
   /**
@@ -211,35 +227,19 @@ const props = defineProps({
   },
 
   /**
-   * Date format.
-   */
-  dateFormat: {
-    type: String,
-    default: getDefault(defaultConfig, UDatePicker).dateFormat,
-  },
-
-  /**
-   * Same as date format, but used when timepicker is enabled.
+   * Make datepicker disabled.
    */
-  dateTimeFormat: {
-    type: String,
-    default: getDefault(defaultConfig, UDatePicker).dateTimeFormat,
-  },
-
-  /**
-   * User friendly date format.
-   */
-  userDateFormat: {
-    type: String,
-    default: getDefault(defaultConfig, UDatePicker).userDateFormat,
+  disabled: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UDatePicker).disabled,
   },
 
   /**
-   * Same as user format, but used when timepicker is enabled.
+   * Show timepicker.
    */
-  userDateTimeFormat: {
-    type: String,
-    default: getDefault(defaultConfig, UDatePicker).userDateTimeFormat,
+  timepicker: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UDatePicker).timepicker,
   },
 
   /**
@@ -390,9 +390,9 @@ function onInput() {
   nextTick(() => {
     calendarRef.value?.wrapperRef?.blur();
     emit("input", {
-      userFormatDate: formatUserDate(userFormatDate.value),
       value: localValue.value,
       formattedDate: formattedDate.value,
+      userFormatDate: formatUserDate(userFormatDate.value),
     });
   });
 }

package/ui.form-date-picker/storybook/Docs.mdx

@@ -16,7 +16,8 @@ import defaultConfig from "../config.js?raw"
 <Source code={getSource(defaultConfig)} language="jsx" dark />
 
 ## Formatting tokens
-Each character in the table below can be used in `dateFormat` and `userDateFormat` / `userDateTimeFormat` options to achieve the format you need.
+Each character in the table below can be used in `dateFormat` / `dateTimeFormat` and `userDateFormat` / `userDateTimeFormat` options
+to achieve the format you need.
 
 <Markdown>
 {`
@@ -47,6 +48,6 @@ Each character in the table below can be used in `dateFormat` and `userDateForma
 </Markdown>
 
 ## Escaping Formatting Tokens
-You may escape formatting tokens using \\\\.
+You may escape formatting tokens using `\\`.
 
 <Source code={`dateFormat: "Y-m-d\\Z", // Displays: 2017-01-22Z`} language="jsx" dark />

package/ui.form-date-picker-range/UDatePickerRange.vue

@@ -123,7 +123,7 @@
           :attrs="keysAttrs"
         />
 
-        <div v-if="inputRangeToError || inputRangeFromError" v-bind="inputRangeErrorAttrs">
+        <div v-if="inputRangeToError || inputRangeFromError" v-bind="rangeInputErrorAttrs">
           {{ inputRangeToError || inputRangeFromError }}
         </div>
 
@@ -198,7 +198,7 @@ defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Datepicker value in JS Date Objects or Strings formatted in provided props.dateFormat.
+   * Datepicker value (JavaScript Date object or string formatted in given `dateFormat`).
    */
   modelValue: {
     type: Object,
@@ -248,7 +248,7 @@ const props = defineProps({
   },
 
   /**
-   * Min date in format date string or Date.
+   * Min date (JavaScript Date object or string formatted in given `dateFormat`).
    */
   minDate: {
     type: [String, Date],
@@ -256,13 +256,21 @@ const props = defineProps({
   },
 
   /**
-   * Max date in format date string or Date.
+   * Max date (JavaScript Date object or string formatted in given `dateFormat`).
    */
   maxDate: {
     type: [String, Date],
     default: getDefault(defaultConfig, UDatePickerRange).maxDate,
   },
 
+  /**
+   * Date string format.
+   */
+  dateFormat: {
+    type: String,
+    default: getDefault(defaultConfig, UDatePickerRange).dateFormat,
+  },
+
   /**
    * Datepicker size.
    * @values sm, md, lg
@@ -289,7 +297,7 @@ const props = defineProps({
   },
 
   /**
-   * Label text for input type.
+   * Label text for an input type.
    */
   label: {
     type: String,
@@ -297,7 +305,7 @@ const props = defineProps({
   },
 
   /**
-   * Input placeholder for input type.
+   * Input placeholder for an input type.
    */
   placeholder: {
     type: String,
@@ -305,7 +313,7 @@ const props = defineProps({
   },
 
   /**
-   * Datepicker description for input type.
+   * Datepicker description for an input type.
    */
   description: {
     type: String,
@@ -313,7 +321,7 @@ const props = defineProps({
   },
 
   /**
-   * Error message for input type.
+   * Error message for an input type.
    */
   error: {
     type: String,
@@ -328,14 +336,6 @@ const props = defineProps({
     default: getDefault(defaultConfig, UDatePickerRange).disabled,
   },
 
-  /**
-   * Date format.
-   */
-  dateFormat: {
-    type: String,
-    default: getDefault(defaultConfig, UDatePickerRange).dateFormat,
-  },
-
   /**
    * Unique element id.
    */
@@ -364,7 +364,7 @@ const props = defineProps({
 const emit = defineEmits([
   /**
    * Triggers when date picker range value changes.
-   * @property {string} value
+   * @property {object} range
    */
   "update:modelValue",
 ]);
@@ -412,7 +412,7 @@ const {
   buttonAttrs,
   shiftRangeButtonAttrs,
   rangeInputWrapperAttrs,
-  inputRangeErrorAttrs,
+  rangeInputErrorAttrs,
 } = useAttrs(props, { isShownMenu, isTop, isRight, isPeriod });
 
 const calendarValue = ref(props.modelValue);

package/ui.form-date-picker-range/UDatePickerRangePeriodMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="periodsRowAttrs">
+  <div v-bind="periodRowAttrs">
     <template v-for="periodButton in periods" :key="periodButton.name">
       <UButton
         v-if="periodButton.name !== period"
@@ -27,7 +27,7 @@
     </template>
   </div>
 
-  <div v-bind="periodsRowAttrs">
+  <div v-bind="periodRowAttrs">
     <UButton
       v-if="customRangeButton.range.to && customRangeButton.range.from && PERIOD.custom !== period"
       square
@@ -276,7 +276,7 @@ const isDatePeriodOutOfRange = inject("isDatePeriodOutOfRange", null);
 
 const {
   periodButtonAttrs,
-  periodsRowAttrs,
+  periodRowAttrs,
   periodButtonActiveAttrs,
   customRangeDescription,
   rangeSwitchWrapperAttrs,

package/ui.form-date-picker-range/config.js

@@ -44,7 +44,7 @@ export default /*tw*/ {
     leaveActiveClass: "transition transform ease-in duration-75",
     leaveToClass: "opacity-0 scale-95",
   },
-  periodsRow: "mb-1 flex min-w-64 gap-1",
+  periodRow: "mb-1 flex min-w-64 gap-1",
   periodButton: "{UButton} h-[3.125rem] w-full",
   periodButtonActive: "!bg-gray-800/20",
   rangeSwitchWrapper: "flex items-center justify-between py-2",
@@ -85,7 +85,7 @@ export default /*tw*/ {
     block: "focus-within:z-10 focus-within:ring-0 rounded-l-none",
     input: "rounded-l-none",
   },
-  inputRangeError: "text-xs font-normal leading-none mt-2 text-center text-red-500",
+  rangeInputError: "text-xs font-normal leading-none mt-2 text-center text-red-500",
   calendar: {
     component: "{UCalendar}",
     wrapper: "p-0 w-full border-none shadow-none",

package/ui.form-date-picker-range/storybook/stories.js

@@ -15,7 +15,7 @@ export default {
   title: "Form Inputs & Controls / Date Picker Range",
   component: UDatePickerRange,
   args: {
-    value: {
+    modelValue: {
       from: new Date(2022, 1, 14),
       to: new Date(2022, 2, 20),
     },
@@ -39,18 +39,13 @@ const DefaultTemplate = (args) => ({
 
     return { args, slots };
   },
-  data() {
-    return {
-      value: this.args.value,
-    };
-  },
   template: `
-    <UDatePickerRange open-direction-y="bottom" v-bind="args" v-model="value">
+    <UDatePickerRange open-direction-y="bottom" v-bind="args" v-model="args.modelValue">
       ${args.slotTemplate || getSlotsFragment()}
     </UDatePickerRange>
 
     <div class="mt-4">
-      {{ value }}
+      {{ args.modelValue }}
     </div>
   `,
 });
@@ -70,7 +65,7 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
         :key="index"
         open-direction-y="bottom"
         v-bind="args"
-        v-model="args.value"
+        v-model="args.modelValue"
         :[args.enum]="option"
       />
     </URow>
@@ -89,7 +84,7 @@ const OpenDirectionTemplate = (args) => ({
         open-direction-y="top"
         open-direction-x="left"
         v-bind="args"
-        v-model="args.value"
+        v-model="args.modelValue"
         label="Top Left"
       />
       <UDatePickerRange
@@ -97,7 +92,7 @@ const OpenDirectionTemplate = (args) => ({
         open-direction-y="top"
         open-direction-x="right"
         v-bind="args"
-        v-model="args.value"
+        v-model="args.modelValue"
         label="Top Right"
       />
       <UDatePickerRange
@@ -105,7 +100,7 @@ const OpenDirectionTemplate = (args) => ({
         open-direction-y="bottom"
         open-direction-x="left"
         v-bind="args"
-        v-model="args.value"
+        v-model="args.modelValue"
         label="Bottom Left"
       />
       <UDatePickerRange
@@ -113,7 +108,7 @@ const OpenDirectionTemplate = (args) => ({
         open-direction-y="bottom"
         open-direction-x="right"
         v-bind="args"
-        v-model="args.value"
+        v-model="args.modelValue"
         label="Bottom Right"
       />
     </URow>
@@ -145,14 +140,14 @@ export const MinMax = DefaultTemplate.bind({});
 MinMax.args = {
   minDate: new Date(2022, 2, 22),
   maxDate: new Date(2022, 2, 26),
-  value: { from: new Date(2022, 2, 24), to: new Date(2022, 2, 25) },
+  modelValue: { from: new Date(2022, 2, 24), to: new Date(2022, 2, 25) },
 };
 
 export const DateFormat = DefaultTemplate.bind({});
 DateFormat.args = {
   dateFormat: "d.m.Y",
   userDateFormat: "d.m.Y",
-  value: { from: "28.06.2024", to: "30.06.2024" },
+  modelValue: { from: "28.06.2024", to: "30.06.2024" },
 };
 
 export const CustomRangeButton = DefaultTemplate.bind({});
@@ -165,7 +160,7 @@ CustomRangeButton.args = {
     label: "Next 2 days",
     description: "Some description",
   },
-  value: { from: null, to: null },
+  modelValue: { from: null, to: null },
 };
 
 export const LeftIcon = DefaultTemplate.bind({});