vueless 0.0.411 → 0.0.413

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.411",
+  "version": "0.0.413",
   "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"
@@ -331,7 +331,7 @@ const props = defineProps({
    * Show date divider line between dates.
    */
   dateDivider: {
-    type: [Array, Boolean],
+    type: [Boolean, Array],
     default: getDefault(defaultConfig, UTable).dateDivider,
   },
 
@@ -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.form-checkbox/UCheckbox.vue

@@ -34,8 +34,9 @@
       />
     </label>
 
-    <template #footer>
-      <slot name="footer" />
+    <template #bottom>
+      <!-- @slot Use it to add something below the checkbox. -->
+      <slot name="bottom" />
     </template>
   </ULabel>
 </template>

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

@@ -10,6 +10,7 @@
     :data-test="dataTest"
   >
     <div v-bind="listAttrs">
+      <!-- @slot Use it to add URadio directly. -->
       <slot>
         <UCheckbox
           v-for="(option, index) in options"

package/ui.form-checkbox-multi-state/UCheckboxMultiState.vue

@@ -7,7 +7,7 @@
     :size="size"
     :color="color"
     :placement="placement"
-    v-bind="checkboxAttrs"
+    v-bind="multiStateCheckboxAttrs"
     @input="onClickCheckbox"
   />
 </template>
@@ -114,7 +114,7 @@ const isChecked = ref(false);
 
 const selected = computed(() => props.options[index.value]);
 
-const { checkboxAttrs } = useAttrs(props, { selected });
+const { multiStateCheckboxAttrs } = useAttrs(props, { selected });
 
 watchEffect(setIndex);
 

package/ui.form-checkbox-multi-state/config.js

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  checkbox: "{UCheckbox}",
+  multiStateCheckbox: "{UCheckbox}",
   defaults: {
     color: "brand",
     size: "md",

package/ui.form-checkbox-multi-state/useAttrs.js

@@ -8,7 +8,7 @@ export default function useAttrs(props, { selected }) {
 
   const keysAttrs = getKeysAttrs();
 
-  const { checkboxAttrs } = keysAttrs;
+  const { multiStateCheckboxAttrs: checkboxAttrs } = keysAttrs;
 
   keysAttrs.checkboxAttrs = computed(() => {
     if (selected.value.icon) {

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

@@ -18,7 +18,7 @@
           color="gray"
           :checked="selectedItem === ''"
           :disabled="disabled"
-          v-bind="unselectedRadioAttrs"
+          v-bind="unselectedColorPickerRadioAttrs"
           @update:model-value="onUpdateValue('')"
         />
 
@@ -43,7 +43,7 @@
         :color="color"
         :checked="selectedItem === color"
         :disabled="disabled"
-        v-bind="radioAttrs"
+        v-bind="colorPickerRadioAttrs"
         @update:model-value="onUpdateValue(color)"
       />
     </div>
@@ -169,10 +169,10 @@ const {
   config,
   colorPickerLabelAttrs,
   listAttrs,
-  radioAttrs,
+  colorPickerRadioAttrs,
+  unselectedColorPickerRadioAttrs,
   unselectedIconAttrs,
   unselectedAttrs,
-  unselectedRadioAttrs,
 } = useAttrs(props);
 
 const selectedItem = computed({

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

@@ -12,11 +12,11 @@ export default /*tw*/ {
   },
   unselected: "relative flex",
   unselectedIcon: "{UIcon} absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",
-  unselectedRadio: {
+  unselectedColorPickerRadio: {
     component: "{URadio}",
     radio: "checked:text-white !border-gray-300",
   },
-  radio: {
+  colorPickerRadio: {
     component: "{URadio}",
     radio: `
       bg-{color}-600 border-{color}-600 hover:border-{color}-600 active:bg-{color}-800

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

@@ -95,7 +95,7 @@ const props = defineProps({
   },
 
   /**
-   * Set label placement related from the default slot.
+   * Label placement.
    * @values top, topInside, topWithDesc, left, right
    */
   labelAlign: {

package/ui.form-input/UInput.vue

@@ -183,7 +183,7 @@ const props = defineProps({
   },
 
   /**
-   * Set label placement related from the default slot.
+   * Label placement.
    * @values top, topInside, topWithDesc, left, right
    */
   labelAlign: {

package/ui.form-input-file/UInputFile.vue

@@ -9,13 +9,13 @@
     :description="description"
     v-bind="inputLabelAttrs"
   >
-    <div ref="dropZoneRef" :ondrop="onDrop" v-bind="dropzoneWrapperAttrs">
+    <div ref="dropZoneRef" :ondrop="onDrop" v-bind="dropzoneAttrs">
       <UText v-if="hasSlotContent($slots['top'])" :size="size" v-bind="descriptionTopAttrs">
-        <!-- @slot Use it to add something at the top of the file block. -->
+        <!-- @slot Use it to add something above the component content. -->
         <slot name="top" />
       </UText>
 
-      <div v-bind="contentWrapperAttrs">
+      <div v-bind="contentAttrs">
         <!-- @slot Use it to add something before the placeholder. -->
         <slot name="left" />
 
@@ -40,7 +40,7 @@
           </template>
         </UFiles>
 
-        <div v-bind="buttonWrapperAttrs">
+        <div v-bind="buttonsAttrs">
           <template v-if="Array.isArray(currentFiles) || !currentFiles">
             <UButton
               filled
@@ -86,7 +86,7 @@
       </div>
 
       <UText v-if="hasSlotContent($slots['bottom'])" :size="size" v-bind="descriptionBottomAttrs">
-        <!-- @slot Use it to add something at the bottom of the file block. -->
+        <!-- @slot Use it to add something below the component content. -->
         <slot name="bottom" />
       </UText>
     </div>
@@ -115,7 +115,15 @@ defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Set label.
+   * Input value.
+   */
+  modelValue: {
+    type: [Array, File],
+    default: null,
+  },
+
+  /**
+   * Input label.
    */
   label: {
     type: String,
@@ -123,7 +131,7 @@ const props = defineProps({
   },
 
   /**
-   * Set description.
+   * Input description.
    */
   description: {
     type: String,
@@ -131,7 +139,15 @@ const props = defineProps({
   },
 
   /**
-   * Set label placement related from the default slot.
+   * Error message.
+   */
+  error: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Label placement.
    * @values top, topInside, topWithDesc
    */
   labelAlign: {
@@ -139,21 +155,17 @@ const props = defineProps({
     default: getDefault(defaultConfig, UInputFile).labelAlign,
   },
 
-  modelValue: {
-    type: [Array, File],
-    default: null,
-  },
-
   /**
-   * Allow selecting multiple files.
+   * Input size.
+   * @values sm, md, lg
    */
-  multiple: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UInputFile).multiple,
+  size: {
+    type: String,
+    default: getDefault(defaultConfig, UInputFile).size,
   },
 
   /**
-   * Set max file size in megabytes.
+   * Max file size in megabytes.
    */
   maxFileSize: {
     type: Number,
@@ -161,7 +173,7 @@ const props = defineProps({
   },
 
   /**
-   * Set allowed file types.
+   * Allowed file types.
    */
   allowedFileTypes: {
     type: Array,
@@ -169,20 +181,11 @@ const props = defineProps({
   },
 
   /**
-   * Set size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UInputFile).size,
-  },
-
-  /**
-   * Set error text for component.
+   * Allow selecting multiple files.
    */
-  error: {
-    type: String,
-    default: "",
+  multiple: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UInputFile).multiple,
   },
 
   /**
@@ -242,15 +245,15 @@ const {
   config,
   inputLabelAttrs,
   chooseFileButtonAttrs,
-  dropzoneWrapperAttrs,
+  dropzoneAttrs,
   descriptionTopAttrs,
   descriptionBottomAttrs,
-  contentWrapperAttrs,
+  contentAttrs,
   clearButtonAttrs,
   placeholderAttrs,
   inputAttrs,
   fileListAttrs,
-  buttonWrapperAttrs,
+  buttonsAttrs,
   removeItemButtonAttrs,
   hasSlotContent,
 } = useAttrs(props);
@@ -285,10 +288,7 @@ const accept = computed(() => {
 });
 
 const isValue = computed(() => {
-  return (
-    (Array.isArray(currentFiles.value) && currentFiles.value?.length) ||
-    (!Array.isArray(currentFiles.value) && currentFiles.value)
-  );
+  return Array.isArray(currentFiles.value) ? !!currentFiles.value?.length : !!currentFiles.value;
 });
 
 const fileList = computed(() => {
@@ -389,13 +389,13 @@ function onClickResetFiles() {
 function onDragOver(event) {
   event.preventDefault();
 
-  dropZoneRef.value.classList.add(...config.value.dropzoneWrapperHover.split(" "));
+  dropZoneRef.value.classList.add(...config.value.dropzoneHover.split(" "));
 }
 
 function onDragLeave(event) {
   event.preventDefault();
 
-  dropZoneRef.value.classList.remove(...config.value.dropzoneWrapperHover.split(" "));
+  dropZoneRef.value.classList.remove(...config.value.dropzoneHover.split(" "));
 }
 
 function onDrop(event) {

package/ui.form-input-file/config.js

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   inputLabel: "{ULabel} w-full",
-  dropzoneWrapper: {
+  dropzone: {
     base: `
       p-3 size-auto w-full bg-white transition
       rounded-dynamic border border-solid border-gray-300
@@ -21,9 +21,11 @@ export default /*tw*/ {
       { labelAlign: "topInside", label: true, size: "lg", class: "pt-9" },
     ],
   },
+  dropzoneHover: "border-gray-400 border-dashed",
+  dropzoneError: "hover:border-red-400 border-dashed border-red-300",
   descriptionTop: "{UText} text-gray-700 mb-2",
   descriptionBottom: "{UText} text-gray-700 mt-2",
-  contentWrapper: {
+  content: {
     base: "p-3 gap-6 flex justify-between items-start relative w-full rounded-dynamic bg-brand-50",
     variants: {
       multiple: {
@@ -47,6 +49,8 @@ export default /*tw*/ {
       },
     },
   },
+  fileList: "{UFiles} w-full",
+  buttons: "flex gap-3 items-center",
   chooseFileButton: {
     component: "{UButton}",
     variants: {
@@ -57,11 +61,7 @@ export default /*tw*/ {
   },
   clearButton: "{UButton}",
   removeItemButton: "{UButton} ml-2",
-  dropzoneWrapperHover: "border-gray-400 border-dashed",
-  dropzoneWrapperError: "hover:border-red-400 border-dashed border-red-300",
   input: "sr-only",
-  buttonWrapper: "flex gap-3 items-center",
-  fileList: "{UFiles} w-full",
   i18n: {
     sizeError: "File size is too big.",
     formatError: "Format is not supported.",

package/ui.form-input-money/UInputMoney.vue

@@ -14,7 +14,7 @@
     :data-test="`${dataTest}-base-currency`"
     :left-icon="leftIcon"
     :right-icon="rightIcon"
-    v-bind="inputAttrs"
+    v-bind="moneyInputAttrs"
     @keyup="onKeyup"
     @blur="onBlur"
     @input="onInput"
@@ -72,7 +72,7 @@ const props = defineProps({
   },
 
   /**
-   * Set label placement related from the default slot.
+   * Label placement.
    * @values top, topInside, topWithDesc, left, right
    */
   labelAlign: {
@@ -232,7 +232,7 @@ const moneyInputRef = ref(null);
 
 const elementId = props.id || useId();
 
-const { inputAttrs } = useAttrs(props);
+const { moneyInputAttrs } = useAttrs(props);
 
 const { formattedValue, rawValue, setValue } = useFormatCurrency(`#${elementId}`, () => ({
   minFractionDigits: props.minFractionDigits,

package/ui.form-input-money/config.js

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  input: "{UInput}",
+  moneyInput: "{UInput}",
   defaults: {
     symbol: "$",
     size: "md",

package/ui.form-input-number/UInputNumber.vue

@@ -6,7 +6,7 @@
       filled
       square
       round
-      :disabled="isRemoveButtonDisabled"
+      :disabled="isRemoveButtonDisabled || disabled"
       v-bind="removeButtonAttrs"
       @click="onClickRemove"
     >
@@ -22,7 +22,7 @@
 
     <div v-bind="numberAttrs">
       <div v-bind="valueAttrs" v-text="count" />
-      <div v-bind="textAttrs" v-text="label" />
+      <div v-bind="labelAttrs" v-text="label" />
     </div>
 
     <UButton
@@ -31,7 +31,7 @@
       filled
       square
       round
-      :disabled="isAddButtonDisabled"
+      :disabled="isAddButtonDisabled || disabled"
       v-bind="addButtonAttrs"
       @click="onClickAdd"
     >
@@ -101,6 +101,31 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Label placement.
+   * @values top, topWithDesc, left, right
+   */
+  labelAlign: {
+    type: String,
+    default: getDefault(defaultConfig, UInputNumber).labelAlign,
+  },
+
+  /**
+   * Input description.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Error message.
+   */
+  error: {
+    type: String,
+    default: "",
+  },
+
   /**
    * Input size.
    * @values sm, md, lg
@@ -110,6 +135,14 @@ const props = defineProps({
     default: getDefault(defaultConfig, UInputNumber).size,
   },
 
+  /**
+   * Disable the input.
+   */
+  disabled: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UInputNumber).disabled,
+  },
+
   /**
    * Component config object.
    */
@@ -138,7 +171,7 @@ const emit = defineEmits([
 const {
   config,
   valueAttrs,
-  textAttrs,
+  labelAttrs,
   removeButtonAttrs,
   removeIconAttrs,
   addButtonAttrs,

package/ui.form-input-number/config.js

@@ -15,7 +15,7 @@ export default /*tw*/ {
       },
     },
   },
-  text: {
+  label: {
     base: "pt-1 !leading-none text-gray-500",
     variants: {
       size: {

package/ui.form-input-rating/UInputRating.vue

@@ -8,7 +8,7 @@
     v-bind="inputLabelAttrs"
     :data-test="dataTest"
   >
-    <div v-bind="wrapperAttrs">
+    <div v-bind="containerAttrs">
       <div v-if="counter || hasSlotContent($slots['counter'])" v-bind="counterAttrs">
         <!--
           @slot Use it to customise counter.
@@ -177,7 +177,7 @@ const hovered = ref(null);
 const {
   config,
   inputLabelAttrs,
-  wrapperAttrs,
+  containerAttrs,
   counterAttrs,
   totalAttrs,
   starsAttrs,

package/ui.form-input-rating/config.js

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   inputLabel: "{ULabel}",
-  wrapper: {
+  container: {
     base: "flex items-center text-gray-500 !leading-none",
     variants: {
       size: {

package/ui.form-input-search/UInputSearch.vue

@@ -13,7 +13,7 @@
     :placeholder="placeholder"
     inputmode="search"
     :left-icon="leftIcon"
-    v-bind="inputAttrs"
+    v-bind="searchInputAttrs"
     :data-test="dataTest"
     @update:model-value="onUpdateValue"
     @keyup.enter="onKeyupEnter"
@@ -69,7 +69,7 @@
           :label="searchButtonLabel"
           :size="buttonSize"
           no-ring
-          v-bind="buttonAttrs"
+          v-bind="searchButtonAttrs"
           :data-test="`${dataTest}-search-button`"
           @click="onClickSearch"
         />
@@ -111,22 +111,6 @@ const props = defineProps({
     default: getDefault(defaultConfig, UInputSearch).size,
   },
 
-  /**
-   * Left icon name.
-   */
-  leftIcon: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Right icon name.
-   */
-  rightIcon: {
-    type: String,
-    default: "",
-  },
-
   /**
    * Input placeholder.
    */
@@ -185,7 +169,31 @@ const props = defineProps({
   },
 
   /**
-   * Set input read-only.
+   * Time in milliseconds before value emit.
+   */
+  debounce: {
+    type: [Number, String],
+    default: getDefault(defaultConfig, UInputSearch).debounce,
+  },
+
+  /**
+   * Left icon name.
+   */
+  leftIcon: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Right icon name.
+   */
+  rightIcon: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Make input read-only.
    */
   readonly: {
     type: Boolean,
@@ -193,7 +201,7 @@ const props = defineProps({
   },
 
   /**
-   * Set input disabled.
+   * Make input disabled.
    */
   disabled: {
     type: Boolean,
@@ -208,11 +216,6 @@ const props = defineProps({
     default: "",
   },
 
-  debounce: {
-    type: [Number, String],
-    default: getDefault(defaultConfig, UInputSearch).debounce,
-  },
-
   /**
    * Component config object.
    */
@@ -260,7 +263,8 @@ defineExpose({ inputRef });
 
 const elementId = props.id || useId();
 
-const { config, inputAttrs, searchIconAttrs, clearIconAttrs, buttonAttrs } = useAttrs(props);
+const { config, searchInputAttrs, searchIconAttrs, clearIconAttrs, searchButtonAttrs } =
+  useAttrs(props);
 
 const iconSize = computed(() => {
   const sizes = {

package/ui.form-input-search/config.js

@@ -1,8 +1,8 @@
 export default /*tw*/ {
-  input: "{UInput}",
+  searchInput: "{UInput}",
   clearIcon: "{UIcon}",
   searchIcon: "{UIcon}",
-  button: "{UButton} rounded-l-none ml-1 outline outline-1 outline-gray-900",
+  searchButton: "{UButton} rounded-l-none ml-1 outline outline-1 outline-gray-900",
   defaults: {
     size: "md",
     labelAlign: "topInside",