vueless 0.0.171 → 0.0.173

package/package.json

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

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

@@ -124,7 +124,12 @@ export default /*tw*/ {
         `,
       },
       { filled: true, variant: "thirdary", class: "bg-{color}-700 bg-opacity-10" },
-      { filled: true, variant: "thirdary", color: "grayscale", class: "bg-gray-800 bg-opacity-10" },
+      {
+        filled: true,
+        variant: "thirdary",
+        color: "grayscale",
+        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: "xs", class: "p-1" },
       { square: true, size: "xs", class: "p-1.5" },

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

@@ -1,7 +1,7 @@
 export default /*tw*/ {
-  wrapper: "w-fit overflow-hidden rounded-lg border focus:outline-none border-brand-300 bg-white px-1 pb-4 shadow",
-  navigation: "flex items-center justify-between px-3 pt-2",
-  navigationSwitchViewButton: "",
+  wrapper: "p-3 pb-4 w-64 border border-brand-300 rounded-lg bg-white shadow overflow-hidden focus:outline-none",
+  navigation: "mb-2 pb-2 border-b flex items-center justify-between",
+  navigationSwitchViewButton: "-ml-3 pl-3 text-sm rounded-l-none",
   dayViewSwitchLabel: "flex gap-1",
   dayViewSwitchLabelMonth: "text-brand-900",
   dayViewSwitchLabelIcon: "",
@@ -19,7 +19,7 @@ export default /*tw*/ {
   nextIconName: "keyboard_arrow_right",
   prevIcon: "",
   prevIconName: "keyboard_arrow_left",
-  dayViewWrapper: "w-64 px-3 pt-2",
+  dayViewWrapper: "",
   weekDaysWrapper: "grid grid-cols-7",
   weekDay: "flex size-8 items-center justify-center text-xs uppercase text-brand-500",
   daysWrapper: "grid grid-cols-7",
@@ -31,35 +31,26 @@ 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 w-64 grid-cols-4 items-center justify-center px-3 pt-2",
+  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
   `,
   selectedMonth: "bg-brand-900 hover:bg-brand-900 text-white",
   activeMonth: "bg-brand-100",
-  yearViewWrapper: "grid w-64 grid-cols-4 items-center justify-center px-3 pt-2",
+  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
   `,
   selectedYear: "bg-brand-900 hover:bg-brand-900 text-white",
   activeYear: "bg-brand-100",
-  timepickerWrapper: `
-    mx-2 -mb-1 mt-2 flex items-center justify-between gap-2 border-t border-brand-200 pl-2 pr-1 pt-3 text-sm
-  `,
+  timepickerWrapper: "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:border-none focus:outline-none
-  `,
-  timepickerRightInput: `
-    w-11 rounded-r-lg border-none px-2.5 py-1.5 text-center text-sm focus:border-none focus:outline-none
-  `,
-  submitButton: `
-    rounded-lg border-none bg-brand-900/10 px-2.5 py-1.5 text-sm font-normal text-brand-900 outline-none
-    focus:ring-0 hover:bg-brand-900/10
-  `,
+  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",
   i18n: {
     weekdays: {
       shorthand: {

package/ui.form-calendar/index.vue

@@ -7,9 +7,8 @@
         :disabled="!range"
       >
         <UButton
-          size="sm"
+          size="xs"
           color="gray"
-          pill
           square
           variant="thirdary"
           v-bind="navigationSwitchViewButtonAttrs"
@@ -39,8 +38,7 @@
 
       <div v-bind="nextPrevWrapperAttrs">
         <UButton
-          pill
-          size="sm"
+          size="xs"
           square
           variant="thirdary"
           v-bind="nextPrevButtonAttrs"
@@ -60,8 +58,7 @@
         <div ref="rangeSwitchViewContainerRef" />
 
         <UButton
-          pill
-          size="sm"
+          size="xs"
           square
           variant="thirdary"
           v-bind="nextPrevButtonAttrs"
@@ -142,7 +139,14 @@
         />
       </div>
 
-      <UButton v-bind="submitButtonAttrs" @click="onClickSubmit">
+      <UButton
+        variant="thirdary"
+        size="sm"
+        square
+        filled
+        v-bind="submitButtonAttrs"
+        @click="onClickSubmit"
+      >
         {{ locale.okLabel }}
       </UButton>
     </div>

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

@@ -20,7 +20,7 @@ export default {
   parameters: {
     docs: {
       story: {
-        height: "380px",
+        height: "480px",
       },
     },
   },

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

@@ -2,23 +2,16 @@ export default /*tw*/ {
   wrapper: "relative",
   input: "",
   inputActive: {
-    block: {
-      base: "ring-4 ring-brand-600/[.15] border-brand-500 hover:border-brand-500",
-    },
+    block: "ring-4 ring-brand-700 ring-opacity-20 border-brand-500 hover:border-brand-500",
   },
-  buttonWrapper: "flex h-full rounded-lg focus-within:ring-4 focus-within:ring-brand-600/[.15] max-md:justify-between",
-  button: `
-    shrink-0 grow rounded-none border-0 bg-zinc-100 py-2 text-base font-medium text-gray-900 shadow-none
-    hover:bg-zinc-200 hover:ring-brand-600/[.15] focus:border-0 focus:bg-zinc-200 focus:ring-0 focus:ring-brand-600/[.15]
-    active:bg-zinc-200 disabled:cursor-not-allowed
-  `,
-  buttonActive: "border-0 hover:bg-zinc-200 ring-0 ring-brand-600/[.15] bg-zinc-200",
-  buttonWrapperActive: "ring-4 ring-brand-600/[.15]",
-  shiftRangeButton: `
-    focus:bg-bg-zinc-200 flex items-center border-0 bg-zinc-100 py-[0.71875rem] shadow-none
-    hover:bg-zinc-200 hover:ring-brand-600/[.15] focus:border-0 focus:ring-0 focus:ring-brand-600/[.15] active:bg-zinc-200
-    disabled:cursor-not-allowed last:rounded-l-none last:rounded-r-lg first:rounded-l-lg first:rounded-r-none
+  buttonWrapper: `
+    flex rounded-lg max-md:justify-between
+    focus-within:ring-4 focus-within:ring-brand-700 focus-within:ring-opacity-20
   `,
+  button: "shrink-0 grow rounded-none focus: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",
   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: {
@@ -41,13 +34,13 @@ export default /*tw*/ {
   },
   periodsRow: "mb-1 flex min-w-64 gap-1",
   periodButton: `
-    flex h-[3.125rem] w-full cursor-pointer flex-col items-center justify-center rounded-lg bg-zinc-100
+    flex h-[3.125rem] w-full cursor-pointer flex-col items-center justify-center rounded-lg bg-gray-100
     px-1.5 py-2.5 text-center text-xs font-medium text-brand-900 hover:bg-brand-200
     [&_span]:block [&_span]:font-normal [&_span]:text-brand-500
   `,
   periodButtonIcon: "",
   periodButtonIconName: "apps",
-  periodButtonActive: "bg-zinc-200",
+  periodButtonActive: "bg-gray-200",
   rangeSwitchWrapper: "mb-2.5 mt-4 flex items-center justify-between py-2",
   rangeSwitchTitle: "font-medium text-sm",
   nextIcon: "",
@@ -63,7 +56,7 @@ export default /*tw*/ {
     cursor-pointer block w-full rounded-lg py-3 text-center text-sm font-medium text-gray-900 hover:rounded-lg hover:bg-brand-50
     disabled:opacity-50 disabled:cursor-not-allowed
   `,
-  periodDateActive: "bg-zinc-100",
+  periodDateActive: "bg-gray-100",
   rangeInputWrapper: "flex mt-4",
   rangeInput: {
     block: `focus-within:z-10 group-first/range-input-wrapper:rounded-r-none group-last/range-input-wrapper:rounded-l-none`,
@@ -83,43 +76,21 @@ export default /*tw*/ {
   inputRangeError: "text-xs font-normal !leading-none mt-2 text-center text-red-500",
   calendar: {
     wrapper: "p-0 mt-2 w-full border-none shadow-none",
-    dayViewWrapper: "p-0 w-full",
-    monthViewWrapper: "p-0 w-full",
-    yearViewWrapper: "p-0 w-full",
-    dayViewSwitchLabel: "font-medium text-brand-900",
-    nextPrevButton: "p-0 py-2 hover:bg-transparent",
-    navigation: "px-0 w-full",
-    nextIcon: {
-      defaultVariants: {
-        variant: "grayscale",
-        size: "sm",
-      },
-    },
-    prevIcon: {
-      defaultVariants: {
-        variant: "grayscale",
-        size: "sm",
-      },
-    },
-    day: "font-medium w-full h-10 text-sm mb-0.5",
-    weekDay: "text-sm size-10",
-    month: "font-medium",
-    selectedMonth: "bg-zinc-100 text-brand-900 hover:text-white",
-    year: "font-medium",
-    selectedYear: "bg-zinc-100 text-brand-900 hover:text-white",
+    navigation: "mb-0 border-none",
+    navigationSwitchViewButton: "rounded-lg px-3",
+    day: "w-full h-10 mb-0.5",
   },
   i18n: {
-    lastThirtyDays: "Last 30 days <span> and 2 next two weeks </span>",
     ownRange: "Own range",
     week: "Week",
     month: "Month",
     quarter: "Quarter",
     year: "Year",
-    dateFormatWithDot: "Date should be in format 'dd.mm.yyyy'.",
+    dateFormatWithDot: "The date should be in format 'dd.mm.yyyy'.",
     notCorrectMonthNumber: "Wrong month number.",
     notCorrectDayNumber: "Wrong day in month.",
-    fromDateGraterThanSecond: "The first date should be less than the second.",
-    toDateSmallerThanFirst: "The second date should be greater than the first.",
+    fromDateGraterThanSecond: "The 'from' date should be less than the 'to' date.",
+    toDateSmallerThanFirst: "The 'to' date should be greater than the 'from' date.",
     weekdays: {
       shorthand: {
         sunday: "Sun",

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

@@ -24,7 +24,7 @@ export default {
   parameters: {
     docs: {
       story: {
-        height: "580px",
+        height: "620px",
       },
     },
   },

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

@@ -33,6 +33,8 @@
         square
         :size="size"
         :disabled="disabled"
+        variant="thirdary"
+        filled
         v-bind="shiftRangeButtonAttrs"
         @click="onClickShiftRange('prev')"
       >
@@ -45,6 +47,8 @@
         :size="size"
         :disabled="disabled"
         :label="userFormatDate"
+        variant="thirdary"
+        filled
         v-bind="buttonAttrs"
         @click="activate"
       />
@@ -54,6 +58,8 @@
         square
         :size="size"
         :disabled="disabled"
+        variant="thirdary"
+        filled
         v-bind="shiftRangeButtonAttrs"
         @click="onClickShiftRange('next')"
       >

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

@@ -35,7 +35,7 @@ export default /*tw*/ {
     },
   },
   placeholder: {
-    base: "pr-4 text-gray-700 flex-grow",
+    base: "pr-4 text-gray-700 flex-grow w-full",
     variants: {
       size: {
         sm: "text-sm",
@@ -49,12 +49,13 @@ export default /*tw*/ {
   chooseFileIconName: "attach_file",
   clearIcon: "",
   clearIconName: "close",
-  removeItemIcon: "",
+  removeItemIcon: "ml-2",
   removeItemIconName: "close",
   dropzoneWrapperHover: "border-gray-400 border-dashed",
   dropzoneWrapperError: "hover:border-red-400 border-dashed border-red-300",
   input: "sr-only pointer-events-none size-0 opacity-0",
   buttonWrapper: "flex gap-4 items-center",
+  fileList: "w-full",
   i18n: {
     sizeError: "File size is too big.",
     formatError: "Format is not supported.",

package/ui.form-input-file/index.stories.js

@@ -40,6 +40,28 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
+const SlotTemplate = (args) => ({
+  components: { UInputFile },
+  setup() {
+    return { args };
+  },
+  data() {
+    return {
+      files: [],
+      error: args.error || "",
+    };
+  },
+  template: `
+    <UInputFile 
+      v-bind="args"
+      v-model="files"
+      v-model:error="error"
+    >
+      ${args.slotTemplate}
+    </UInputFile>
+  `,
+});
+
 const LabelAlignTemplate = (args, { argTypes } = {}) => ({
   components: { UInputFile, URow },
   setup() {
@@ -98,3 +120,12 @@ sizes.args = {};
 
 export const labelAlign = LabelAlignTemplate.bind({});
 labelAlign.args = {};
+
+export const slotLeft = SlotTemplate.bind({});
+slotLeft.args = {
+  slotTemplate: `
+    <template #left>
+      🥸
+    </template>
+  `,
+};

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.171",
+  "version": "0.0.173",
   "contributions": {
     "html": {
       "description-markup": "markdown",