@ditojs/ui 2.71.0 → 2.72.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/ui",
-  "version": "2.71.0",
+  "version": "2.72.0",
   "type": "module",
   "description": "Dito.js UI is a simple UI library, built with Vue.js for use in Dito.js Admin and elsewhere",
   "repository": "https://github.com/ditojs/dito/tree/master/packages/ui",
@@ -41,12 +41,12 @@
     "ie_mob >= 11"
   ],
   "dependencies": {
-    "@ditojs/utils": "^2.71.0",
+    "@ditojs/utils": "^2.72.0",
     "@soda/get-current-script": "^1.0.2"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.71.0",
-    "vite": "^7.3.0"
+    "@ditojs/build": "^2.72.0",
+    "vite": "^7.3.1"
   },
-  "gitHead": "e5a095c7c44de8b6c84994d744612f0fce19eae2"
+  "gitHead": "6af5f5bad3ff155436e4344d9c422933ff5ee7d8"
 }

package/src/components/DatePicker.vue

@@ -16,8 +16,7 @@ Trigger.dito-date-picker(
       ref="input"
       v-model="currentText"
       type="text"
-      :class="{ 'dito-focus': focused }"
-      v-bind="{ placeholder, disabled, ...$attrs }"
+      v-bind="{ placeholder, disabled, focused, ...$attrs }"
       @focus="onFocus(true)"
       @blur="onFocus(false)"
       @keydown="onKeyDown"

package/src/components/DateTimePicker.vue

@@ -1,12 +1,13 @@
 <template lang="pug">
 .dito-date-time-picker(ref="picker")
-  .dito-date-time-picker__inner(:class="{ 'dito-focus': focused }")
+  .dito-date-time-picker__inner(
+    :class="{ 'dito-date-time-picker__inner--focus': focused }"
+  )
     InputField.dito-date-time-picker__input(
       ref="input"
       v-model="currentText"
       type="text"
-      :class="{ 'dito-focus': focused }"
-      v-bind="{ placeholder, disabled, ...$attrs }"
+      v-bind="{ placeholder, disabled, focused, ...$attrs }"
       @focus="onFocus(true)"
       @blur="onFocus(false)"
       @keydown="onKeyDown"

package/src/components/InputField.vue

@@ -33,21 +33,25 @@ export default {
     disabled: { type: Boolean, default: false },
     readonly: { type: Boolean, default: false },
     autofocus: { type: Boolean, default: false },
+    focused: { type: Boolean, default: false },
     placeholder: { type: String, default: null },
     autocomplete: { type: String, default: 'off' }
   },
 
   data() {
     return {
-      currentValue: this.modelValue,
-      hovering: false,
-      focused: false
+      currentValue: this.modelValue
     }
   },
 
   computed: {
     classes() {
-      return this.$attrs.class
+      return [
+        this.$attrs.class,
+        {
+          'dito-input--focus': this.focused
+        }
+      ]
     },
 
     attributes() {

package/src/components/Pagination.vue

@@ -7,7 +7,7 @@
     template(
       v-if="total > 0"
     ) {{ first }} – {{ last }} / {{ total }}
-  .dito-buttons.dito-buttons-round(
+  .dito-buttons.dito-buttons--round(
     v-if="numPages > 1"
   )
     button.dito-button(
@@ -136,13 +136,11 @@ export default {
 
   methods: {
     getButtonClasses(button) {
-      const classes = {
-        'dito-selected': button.active
+      const prefix = 'dito-button'
+      return {
+        [`${prefix}--${button.type}`]: button.type,
+        [`${prefix}--active`]: button.active
       }
-      if (button.type) {
-        classes[`dito-button-${button.type}`] = true
-      }
-      return classes
     },
 
     onClickButton(button) {
@@ -180,19 +178,19 @@ export default {
     font-variant-numeric: tabular-nums;
     padding: 0 0.5em;
 
-    &-prev,
-    &-next {
+    &--prev,
+    &--next {
       &::before {
         @extend %icon-arrow;
       }
     }
 
-    &-prev::before {
+    &--prev::before {
       transform: scaleX(-1);
     }
 
-    &-ellipsis-prev,
-    &-ellipsis-next {
+    &--ellipsis-prev,
+    &--ellipsis-next {
       background: none;
       border: 0;
       padding: 0;
@@ -216,7 +214,7 @@ export default {
       }
     }
 
-    &-ellipsis-prev::before {
+    &--ellipsis-prev::before {
       transform: scaleX(-1);
     }
   }

package/src/components/SwitchButton.vue

@@ -3,7 +3,7 @@
   :class="classes"
   :style="styles"
 )
-  .dito-switch-pane
+  .dito-switch__pane
     input(
       :id="id"
       ref="input"
@@ -13,8 +13,8 @@
       :name="name"
       :disabled="disabled"
     )
-    .dito-switch-button
-    span.dito-switch-label(
+    .dito-switch__button
+    span.dito-switch__label(
       v-if="labels"
     )
       slot(
@@ -48,11 +48,12 @@ export default {
 
   computed: {
     classes() {
+      const prefix = 'dito-switch'
       return [
         this.$attrs.class,
         {
-          'dito-checked': this.checked,
-          'dito-disabled': this.disabled
+          [`${prefix}--checked`]: this.checked,
+          [`${prefix}--disabled`]: this.disabled
         }
       ]
     },
@@ -97,6 +98,8 @@ export default {
 @import '../styles/_imports';
 
 .dito-switch {
+  $self: &;
+
   // Use whole multiples of `rem` for sizes and `px` margins/padding along
   // with `calc()` to end up with even pixel sizes.
   --switch-width: 4em;
@@ -116,14 +119,14 @@ export default {
   vertical-align: bottom;
   @include user-select(none);
 
-  .dito-switch-pane {
+  &__pane {
     position: relative;
     width: var(--width);
     height: var(--height);
   }
 
-  .dito-switch-pane,
-  .dito-switch-label {
+  &__pane,
+  &__label {
     top: 50%;
     transform: translateY(-50%);
   }
@@ -140,7 +143,7 @@ export default {
       background-color 0.3s;
   }
 
-  .dito-switch-button {
+  &__button {
     --size: calc(var(--height) - 2 * var(--switch-padding));
 
     position: absolute;
@@ -155,39 +158,39 @@ export default {
     transform: translateX(0);
   }
 
-  .dito-switch-button,
-  .dito-switch-label {
+  &__button,
+  &__label {
     pointer-events: none;
   }
 
-  .dito-switch-label {
+  &__label {
     position: absolute;
     right: var(--label-margin);
     text-transform: uppercase;
     color: $color-white;
   }
 
-  &.dito-checked {
+  &--checked {
     input {
       background: $color-active;
     }
 
-    .dito-switch-button {
+    #{$self}__button {
       transform: translateX(var(--offset));
     }
 
-    .dito-switch-label {
+    #{$self}__label {
       left: var(--label-margin);
       right: unset;
     }
   }
 
-  &.dito-disabled {
+  &--disabled {
     @extend %button-disabled;
   }
 
   &:focus-within:not(:hover) {
-    .dito-switch-button {
+    #{$self}__button {
       box-shadow: $shadow-focus;
     }
   }

package/src/components/TimePicker.vue

@@ -16,8 +16,7 @@ Trigger.dito-time-picker(
       ref="input"
       v-model="currentText"
       type="text"
-      :class="{ 'dito-focus': focused }"
-      v-bind="{ placeholder, disabled, ...$attrs }"
+      v-bind="{ placeholder, disabled, focused, ...$attrs }"
       @focus="onFocus(true)"
       @blur="onFocus(false)"
       @keydown="onKeyDown"

package/src/styles/components/_button.scss

@@ -31,7 +31,7 @@
     box-shadow: inset 0 1px 2px 0 $color-shadow;
   }
 
-  &.dito-selected {
+  &--selected {
     background: $button-color-active;
 
     &:hover {
@@ -39,7 +39,7 @@
     }
   }
 
-  &.dito-active,
+  &--active,
   &[type='submit'] {
     color: $color-text-inverted;
     background: $color-active;
@@ -58,7 +58,7 @@
     }
   }
 
-  &.dito-disabled,
+  &--disabled,
   &[disabled] {
     @extend %button-disabled;
   }
@@ -72,7 +72,7 @@
   white-space: nowrap;
 
   &,
-  .dito-button-group {
+  &__group {
     > * {
       margin-left: var(--button-margin);
 
@@ -82,11 +82,11 @@
     }
   }
 
-  .dito-button-group + .dito-button-group {
+  &__group + &__group {
     margin-left: 1.5em;
   }
 
-  &.dito-buttons-round {
+  &--round {
     .dito-button {
       padding: $button-round-padding;
       min-width: $input-height;
@@ -95,16 +95,16 @@
     }
   }
 
-  &.dito-buttons-small {
+  &--small {
     --button-margin: 1px;
   }
 
-  &.dito-buttons-round,
-  &.dito-buttons-small {
+  &--round,
+  &--small {
     line-height: 1em;
   }
 
-  &.dito-buttons-toolbar {
+  &--toolbar {
     justify-content: flex-start;
 
     .dito-button {

package/src/styles/components/_chevron.scss

@@ -12,7 +12,7 @@
     transition: transform 0.1s ease;
   }
 
-  &.dito-open::before {
+  &--open::before {
     transform: rotate(90deg);
   }
 

package/src/styles/mixins/_field.scss

@@ -6,12 +6,12 @@
   padding: $input-padding;
   background: $color-white;
 
-  .dito-has-errors & {
+  .dito-container--has-errors & {
     border-color: $color-error;
   }
 
   &:disabled,
-  .dito-disabled & {
+  .dito-container--disabled & {
     color: $color-disabled;
     pointer-events: none;
     cursor: text;

package/src/styles/mixins/_input.scss

@@ -9,11 +9,8 @@
 
   &:focus,
   &:focus-within,
-  &.dito-focus {
-    &,
-    .dito-inherit-focus {
-      border-color: $color-active;
-    }
+  &.dito-input--focus {
+    border-color: $color-active;
   }
 }