vueless 0.0.218 → 0.0.219

package/package.json

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

package/ui.button/configs/default.config.js

@@ -130,12 +130,6 @@ export default /*tw*/ {
         class: "bg-gray-800 bg-opacity-10 hover:bg-opacity-15 focus:bg-opacity-15 active:bg-opacity-20",
       },
       { filled: true, variant: "thirdary", color: "white", class: "bg-gray-50" },
-      { square: true, size: "2xs", class: "p-1" },
-      { square: true, size: "xs", class: "p-1.5" },
-      { square: true, size: "sm", class: "p-2" },
-      { square: true, size: "md", class: "p-3" },
-      { square: true, size: "lg", class: "p-3.5" },
-      { square: true, size: "xl", class: "p-4" },
       { iconLeft: true, size: "2xs", class: "pl-1" },
       { iconLeft: true, size: "xs", class: "pl-1.5" },
       { iconLeft: true, size: "sm", class: "pl-2" },
@@ -148,6 +142,12 @@ export default /*tw*/ {
       { iconRight: true, size: "md", class: "pr-4" },
       { iconRight: true, size: "lg", class: "pr-5" },
       { iconRight: true, size: "xl", class: "pr-6" },
+      { square: true, size: "2xs", class: "p-1" },
+      { square: true, size: "xs", class: "p-1.5" },
+      { square: true, size: "sm", class: "p-2" },
+      { square: true, size: "md", class: "p-3" },
+      { square: true, size: "lg", class: "p-3.5" },
+      { square: true, size: "xl", class: "p-4" },
     ],
   },
   text: "whitespace-nowrap focus-visible:outline-none",

package/ui.button/index.vue

@@ -27,7 +27,13 @@
           :icon-size="iconSize"
           :icon-color="componentColor"
         >
-          <UIcon v-if="iconLeft" :name="iconLeft" :size="iconSize" :color="componentColor" />
+          <UIcon
+            v-if="iconLeft"
+            :name="iconLeft"
+            :size="iconSize"
+            :color="componentColor"
+            internal
+          />
         </slot>
       </div>
 
@@ -59,7 +65,13 @@
           :icon-size="iconSize"
           :icon-color="componentColor"
         >
-          <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" :color="componentColor" />
+          <UIcon
+            v-if="iconRight"
+            :name="iconRight"
+            :size="iconSize"
+            :color="componentColor"
+            internal
+          />
         </slot>
       </div>
     </template>

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

@@ -8,10 +8,12 @@ export default /*tw*/ {
     flex rounded-lg max-md:justify-between
     focus-within:ring-4 focus-within:ring-brand-700 focus-within:ring-opacity-20
   `,
-  button: "{UButton} shrink-0 grow rounded-none focus:ring-0",
+  button: "{UButton} shrink-0 grow rounded-none !ring-0",
   buttonActive: "ring-0",
   buttonWrapperActive: "ring-4 ring-brand-700 ring-opacity-20",
   shiftRangeButton: "focus:ring-0 last:rounded-l-none last:rounded-r-lg first:rounded-l-lg first:rounded-r-none",
+  nextIconName: "keyboard_arrow_right",
+  prevIconName: "keyboard_arrow_left",
   menu: {
     base: "absolute z-40 my-2 w-80 overflow-hidden rounded-lg border border-brand-300 bg-white p-2 shadow focus:outline-none",
     variants: {
@@ -33,19 +35,12 @@ export default /*tw*/ {
     leaveToClass: "opacity-0 scale-95",
   },
   periodsRow: "mb-1 flex min-w-64 gap-1",
-  periodButton: `
-    {UButton} h-[3.125rem] w-full flex flex-col items-center justify-center
-    [&_span]:block [&_span]:font-normal [&_span]:text-brand-500
-  `,
-  periodButtonIcon: "{UIcon}",
+  periodButton: "{UButton} h-[3.125rem] w-full !ring-0",
   periodButtonIconName: "apps",
-  periodButtonActive: "bg-gray-200",
+  periodButtonActive: "!bg-opacity-20",
   rangeSwitchWrapper: "flex items-center justify-between py-2",
+  rangeSwitchButton: "{UButton}",
   rangeSwitchTitle: "font-medium text-sm",
-  nextIcon: "{UIcon}",
-  nextIconName: "keyboard_arrow_right",
-  prevIcon: "{UIcon}",
-  prevIconName: "keyboard_arrow_left",
   periodDateList: "",
   periodDateMonthList: "grid grid-cols-3 grid-rows-1 gap-0.5",
   periodDateWeekList: "",
@@ -53,25 +48,24 @@ export default /*tw*/ {
   periodDateQuarterList: "",
   periodDate: "w-full",
   periodDateActive: "bg-gray-100",
-  rangeInputWrapper: "flex mt-4",
+  rangeInputWrapper: "flex mt-4 -space-x-px",
   rangeInput: {
-    block: `focus-within:z-10 group-first/range-input-wrapper:rounded-r-none group-last/range-input-wrapper:rounded-l-none`,
+    component: "{UInput}",
     label: {
-      wrapper: "group/range-input-wrapper",
+      component: "{ULabel}",
+      wrapper: "group/range-input-wrapper w-full hover:z-10 focus:z-10",
       description: "hidden",
     },
-    input: {
-      base: "{UInput} text-sm border-brand-100 px-4 py-2.5",
-      variants: {
-        size: {
-          md: "pt-2.5 pb-2.5",
-        },
-      },
-    },
+    block: `
+      focus-within:z-10 focus-within:ring-0
+      group-first/range-input-wrapper:rounded-r-none group-last/range-input-wrapper:rounded-l-none
+    `,
+    input: "group-first/range-input-wrapper:rounded-r-none group-last/range-input-wrapper:rounded-l-none",
   },
-  inputRangeError: "text-xs font-normal !leading-none mt-2 text-center text-red-500",
+  inputRangeError: "text-xs font-normal leading-none mt-2 text-center text-red-500",
   calendar: {
-    wrapper: "{UCalendar} p-0 mt-2 w-full border-none shadow-none",
+    component: "{UCalendar}",
+    wrapper: "p-0 mt-2 w-full border-none shadow-none",
     navigation: "mb-0 border-none",
     navigationSwitchViewButton: "rounded-lg px-3",
     day: "w-full h-10 mb-0.5",

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

@@ -5,13 +5,13 @@
       :id="id"
       ref="inputRef"
       v-model="userFormatDate"
+      :size="size"
       :label="label"
+      :disabled="disabled"
       :placeholder="placeholder"
-      :error="error"
       :description="description"
+      :error="error"
       readonly
-      :disabled="disabled"
-      :size="size"
       v-bind="inputAttrs"
       @focus="activate"
     >
@@ -19,8 +19,8 @@
         <slot name="left" />
       </template>
 
-      <template #right-icon>
-        <slot name="right-icon" />
+      <template #icon-right>
+        <slot name="icon-right" />
       </template>
 
       <template #right>
@@ -36,21 +36,20 @@
         :disabled="disabled"
         variant="thirdary"
         filled
+        :icon-left="config.prevIconName"
         v-bind="shiftRangeButtonAttrs"
         @click="onClickShiftRange('prev')"
-      >
-        <UIcon internal interactive size="sm" :name="config.prevIconName" v-bind="prevIconAttrs" />
-      </UButton>
+      />
 
       <UButton
         :id="id"
         ref="buttonRef"
         square
+        filled
         :size="size"
         :disabled="disabled"
         :label="userFormatDate"
         variant="thirdary"
-        filled
         v-bind="buttonAttrs"
         @click="activate"
       />
@@ -58,15 +57,14 @@
       <UButton
         ref="buttonNextRef"
         square
+        filled
         :size="size"
         :disabled="disabled"
         variant="thirdary"
-        filled
+        :icon-left="config.nextIconName"
         v-bind="shiftRangeButtonAttrs"
         @click="onClickShiftRange('next')"
-      >
-        <UIcon internal interactive size="sm" :name="config.nextIconName" v-bind="nextIconAttrs" />
-      </UButton>
+      />
     </div>
 
     <Transition v-bind="config.menuTransition">
@@ -82,12 +80,11 @@
           <UButton
             v-for="periodButton in periods"
             :key="periodButton.name"
-            :label="periodButton.title"
-            variant="thirdary"
-            size="xs"
             square
             filled
-            color="brand"
+            size="xs"
+            variant="thirdary"
+            :label="periodButton.title"
             v-bind="periodButtonAttrs(getPeriodButtonsClasses(periodButton.name))"
             @click="onClickPeriodButton(periodButton.name)"
           />
@@ -96,9 +93,10 @@
         <div v-bind="periodsRowAttrs">
           <UButton
             v-if="customRangeButton.range.to && customRangeButton.range.from"
-            variant="thirdary"
+            square
             filled
-            color="brand"
+            size="xs"
+            variant="thirdary"
             v-bind="periodButtonAttrs(getPeriodButtonsClasses(PERIOD.custom))"
             @click="onClickCustomRangeButton"
           >
@@ -107,62 +105,51 @@
           </UButton>
 
           <UButton
-            variant="thirdary"
-            size="xs"
+            square
             filled
-            color="brand"
+            size="xs"
+            variant="thirdary"
+            :label="locale.ownRange"
+            :icon-left="config.periodButtonIconName"
             v-bind="periodButtonAttrs(getPeriodButtonsClasses(PERIOD.ownRange))"
             @click="onClickOwnRange"
-          >
-            <UIcon
-              internal
-              :name="config.periodButtonIconName"
-              size="xs"
-              v-bind="periodButtonIconAttrs"
-            />
-            {{ locale.ownRange }}
-          </UButton>
+          />
         </div>
 
         <template v-if="!isPeriod.ownRange && !isPeriod.custom">
           <div v-bind="rangeSwitchWrapperAttrs">
-            <UButton size="sm" color="brand" variant="thirdary" square>
-              <UIcon
-                internal
-                interactive
-                size="sm"
-                color="gray"
-                :name="config.prevIconName"
-                v-bind="prevIconAttrs"
-                @click="onClickShiftDatesList('prev')"
-              />
-            </UButton>
+            <UButton
+              square
+              size="xs"
+              color="gray"
+              variant="thirdary"
+              :icon-left="config.prevIconName"
+              v-bind="rangeSwitchButtonAttrs"
+              @click="onClickShiftDatesList('prev')"
+            />
 
             <div v-bind="rangeSwitchTitleAttrs">
               {{ rangeSwitchTitle }}
             </div>
 
-            <UButton size="sm" color="brand" variant="thirdary" square>
-              <UIcon
-                internal
-                interactive
-                size="sm"
-                color="gray"
-                :name="config.nextIconName"
-                v-bind="nextIconAttrs"
-                @click="onClickShiftDatesList('next')"
-              />
-            </UButton>
+            <UButton
+              square
+              size="xs"
+              color="gray"
+              variant="thirdary"
+              :icon-left="config.nextIconName"
+              v-bind="rangeSwitchButtonAttrs"
+              @click="onClickShiftDatesList('next')"
+            />
           </div>
 
           <div v-bind="periodDateListAttrs(getPeriodDateListClasses())">
             <UButton
               v-for="date in periodDateList"
               :key="date.title"
-              :disabled="isDatePeriodOutOfRange(date)"
-              variant="thirdary"
-              color="brand"
               size="sm"
+              variant="thirdary"
+              :disabled="isDatePeriodOutOfRange(date)"
               v-bind="periodDateAttrs(getPeriodDateClasses(date))"
               :label="String(date.title)"
               @click="selectDate(date), toggleMenu()"
@@ -175,7 +162,7 @@
             ref="rangeInputStartRef"
             v-model="rangeStart"
             :error="inputRangeFromError"
-            size="sm"
+            size="md"
             v-bind="rangeInputAttrs"
             :name="rangeInputName"
             @input="onInputRangeInput($event, INPUT_RANGE_TYPE.start)"
@@ -185,14 +172,14 @@
             ref="rangeInputEndRef"
             v-model="rangeEnd"
             :error="inputRangeToError"
-            size="sm"
+            size="md"
             v-bind="rangeInputAttrs"
             :name="rangeInputName"
             @input="onInputRangeInput($event, INPUT_RANGE_TYPE.end)"
           />
         </div>
 
-        <div v-bind="inputRangeErrorAttrs">
+        <div v-if="inputRangeToError || inputRangeFromError" v-bind="inputRangeErrorAttrs">
           {{ inputRangeToError || inputRangeFromError }}
         </div>
 
@@ -216,7 +203,6 @@
 import { computed, watch, ref, nextTick } from "vue";
 import { merge } from "lodash-es";
 
-import UIcon from "../ui.image-icon";
 import UInput from "../ui.form-input";
 import UButton from "../ui.button";
 import UCalendar from "../ui.form-calendar";
@@ -469,12 +455,10 @@ const {
   menuAttrs,
   periodsRowAttrs,
   periodButtonAttrs,
-  periodButtonIconAttrs,
-  rangeSwitchWrapperAttrs,
-  nextIconAttrs,
-  prevIconAttrs,
   periodDateAttrs,
   periodDateListAttrs,
+  rangeSwitchWrapperAttrs,
+  rangeSwitchButtonAttrs,
   rangeSwitchTitleAttrs,
   buttonWrapperAttrs,
   buttonAttrs,

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

@@ -22,7 +22,7 @@ export default /*tw*/ {
       },
       error: {
         true: `
-          hover:bg-red-300 border-red-300
+          border-red-300
           hover:border-red-400 hover:focus-within:border-red-500
           focus-within:border-red-500 focus-within:ring-red-100
         `,
@@ -47,7 +47,7 @@ export default /*tw*/ {
       },
       error: {
         true: `
-        bg-red-50 border-red-900 hover:border-red-400 focus:border-red-500 focus:ring-red-100
+        bg-red-50 hover:border-red-400 focus:border-red-500 focus:ring-red-100
         focus-within:border-red-500 focus-within:ring-red-100
       `,
       },

package/ui.form-input/index.vue

@@ -23,7 +23,7 @@
           @binding {string} icon-size
         -->
         <slot name="icon-left" :icon-name="iconLeft" :icon-size="iconSize">
-          <UIcon v-if="iconLeft" :name="iconLeft" :size="iconSize" />
+          <UIcon v-if="iconLeft" :name="iconLeft" :size="iconSize" internal />
         </slot>
       </span>
 
@@ -77,7 +77,7 @@
           @binding {string} icon-size
         -->
         <slot name="icon-right" :icon-name="iconLeft" :icon-size="iconSize">
-          <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" />
+          <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" internal />
         </slot>
       </span>
     </label>

package/ui.form-select/index.vue

@@ -85,7 +85,7 @@
             @binding {string} icon-size
           -->
           <slot name="icon-left" :icon-name="iconLeft" :icon-size="iconSize">
-            <UIcon v-if="iconLeft" :name="iconLeft" :size="iconSize" />
+            <UIcon v-if="iconLeft" :name="iconLeft" :size="iconSize" internal />
           </slot>
         </span>
 
@@ -196,7 +196,7 @@
             @binding {string} icon-size
           -->
           <slot name="icon-right" :icon-name="iconRight" :icon-size="iconSize">
-            <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" />
+            <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" internal />
           </slot>
         </span>
       </div>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.218",
+  "version": "0.0.219",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2349,7 +2349,7 @@
               "name": "left"
             },
             {
-              "name": "right-icon"
+              "name": "icon-right"
             },
             {
               "name": "right"