Merge branch 'main' into record-init-clone

packages/oceanfront/src/components/Button.ts

@@ -15,6 +15,10 @@ export const OfButton = defineComponent({
     density: [String, Number],
     disabled: Boolean,
     icon: String,
+    iconPosition: {
+      type: String,
+      default: 'start',
+    },
     id: String,
     items: [String, Array, Object] as PropType<ItemsProp>,
     label: String,
@@ -166,6 +170,12 @@ export const OfButton = defineComponent({
         extraContent,
         items && !split ? expand : undefined,
       ]
+      const iconPosition = () => {
+        if (props.iconPosition === 'end') {
+          return { 'of-flex-reverse': true }
+        }
+        return {}
+      }
       return h(
         'div',
         {
@@ -196,7 +206,11 @@ export const OfButton = defineComponent({
           h(
             'button',
             {
-              class: ['of-button-main', scaleClass(props.scale)],
+              class: [
+                'of-button-main',
+                scaleClass(props.scale),
+                iconPosition(),
+              ],
               disabled,
               tabindex,
               id: buttonId,

packages/oceanfront/src/components/Dialog.vue

@@ -48,7 +48,15 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, computed, watch, Ref } from 'vue'
+import {
+  ref,
+  defineComponent,
+  computed,
+  watch,
+  Ref,
+  onMounted,
+  onUnmounted,
+} from 'vue'
 import { OfOverlay } from './Overlay'
 
 export default defineComponent({
@@ -69,6 +77,45 @@ export default defineComponent({
   emits: ['update:modelValue'],
   setup: function (props, ctx) {
     const dialog = ref<any>()
+    const focusableElements =
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]'
+    const handelKeyDown = (e: KeyboardEvent) => {
+      const firstFocusableElement =
+        dialog.value.querySelectorAll(focusableElements)[0]
+      const focusableContent = dialog.value.querySelectorAll(focusableElements)
+      const lastFocusableElement = focusableContent[focusableContent.length - 1]
+      let isTabPressed = e.key === 'Tab' || e.keyCode === 9
+      if (!isTabPressed) {
+        return
+      }
+      if (e.shiftKey) {
+        if (document.activeElement === firstFocusableElement) {
+          lastFocusableElement.focus()
+          e.preventDefault()
+        }
+      } else {
+        if (
+          document.activeElement === lastFocusableElement ||
+          !dialog.value.contains(document.activeElement)
+        ) {
+          firstFocusableElement.focus()
+          e.preventDefault()
+        }
+      }
+    }
+    watch(
+      () => dialog.value,
+      (value) => {
+        if (!value) {
+          document.removeEventListener('keydown', handelKeyDown)
+          return
+        }
+        document.addEventListener('keydown', handelKeyDown)
+      }
+    )
+    onUnmounted(() => {
+      document.removeEventListener('keydown', handelKeyDown)
+    })
     const dialogHeader: Ref<HTMLDivElement | undefined> = ref()
     const active = ref(props.modelValue)
 

packages/oceanfront/src/components/Editable.vue

@@ -85,6 +85,8 @@
       @update:model-value="updateValue"
       v-model="item.value"
       :items="item.items"
+      :input-type="item.inputType"
+      :outside="item.outside"
     ></of-field>
   </template>
 </template>
@@ -193,7 +195,7 @@ const OfEditableField = defineComponent({
       if (type.value === 'toggle') {
         return 'editable'
       } else {
-        return active.value ? 'editable' : 'fixed'
+        return active.value ? 'editable' : props.modelValue?.mode || 'fixed'
       }
     })
     const resizeInput = (focus = false) => {

packages/oceanfront/src/components/TableRow.vue

@@ -467,7 +467,8 @@ export default defineComponent({
       return { coords, depth, fixArrowNext }
     }
     const mouseMove = (event: MouseEvent | TouchEvent) => {
-      if (event.cancelable) event.preventDefault()
+      if (event.cancelable && props.dragInfo?.dragInProgress)
+        event.preventDefault()
       let index = null
       let currentDepth = null
       if (props.dragInfo?.dragInProgress) {

packages/oceanfront/src/components/ToggleInner.ts

@@ -13,6 +13,7 @@ export const ToggleInner = defineComponent({
     name: String,
     mode: String as PropType<FieldMode>,
     scale: [String, Number],
+    outside: Boolean,
   },
   emits: ['focus', 'blur', 'inputMounted'],
   setup(props, ctx) {
@@ -65,10 +66,18 @@ export const ToggleInner = defineComponent({
               ...hooks,
             }),
             props.switch
-              ? h('div', { class: 'of-switch' }, [
-                  h('div', { class: 'of-switch-track' }),
-                  h('div', { class: 'of-switch-thumb' }),
-                ])
+              ? h(
+                  'div',
+                  { class: ['of-switch', { outside: !props.outside }] },
+                  [
+                    h('div', {
+                      class: ['of-switch-track', { outside: !props.outside }],
+                    }),
+                    h('div', {
+                      class: ['of-switch-thumb', { outside: !props.outside }],
+                    }),
+                  ]
+                )
               : ctx.slots.icon
               ? ctx.slots.icon(props.checked)
               : h(OfIcon, {

packages/oceanfront/src/fields/Text.ts

@@ -396,7 +396,7 @@ export const OfTextField = defineComponent({
         })
       },
       fixedContent: () => {
-        return formatter.value?.formatFixed?.(lazyInputValue) ?? lazyInputValue
+        return formatter.value?.formatFixed?.(fieldCtx.value) ?? lazyInputValue
       },
     }
 

packages/oceanfront/src/fields/Toggle.ts

@@ -14,7 +14,12 @@ export const supportedTypes = new Set(['checkbox', 'switch'])
 
 export const OfToggleField = defineComponent({
   name: 'OfToggleField',
-  props: { ...BaseFieldProps, inputType: String, switch: Boolean },
+  props: {
+    ...BaseFieldProps,
+    inputType: String,
+    switch: Boolean,
+    outside: { type: Boolean, default: true },
+  },
   setup(props, ctx) {
     const fieldCtx = provideFieldContext(props, ctx)
     const initialValue = computed(() => {
@@ -88,6 +93,7 @@ export const OfToggleField = defineComponent({
           ToggleInner,
           {
             switch: inputType.value === 'switch',
+            outside: props.outside,
             checked: stateValue.value,
             focused: focused.value,
             label: fieldCtx.inputLabel,

packages/oceanfront/src/lib/fields.ts

@@ -215,6 +215,8 @@ export const BaseFieldProps = {
   formatOptions: null,
   defaultValue: null,
   sticky: { type: Boolean, default: true },
+  switch: { type: Boolean, default: false },
+  outside: { type: Boolean, default: true },
 }
 
 export function extendFieldFormat(

packages/oceanfront/src/scss/_button.scss

@@ -395,7 +395,9 @@
     opacity: var(--button-split-opacity);
   }
 }
-
+.of-flex-reverse {
+  flex-direction: row-reverse;
+}
 .of-button-icon,
 .of-button-expand {
   align-self: center;

packages/oceanfront/src/scss/_fields.scss

@@ -792,7 +792,13 @@
     transition: left 0.15s ease-in-out, background-color 0.15s ease-in-out;
     width: 1em;
   }
-
+  &-thumb.outside {
+    left: 0.35em;
+    top: auto;
+    width: 0.8em;
+    height: 0.8em;
+    background-color: #ffffff;
+  }
   &-track {
     border: 1px solid var(--field-color);
     border-radius: 1em;
@@ -801,13 +807,22 @@
     height: 100%;
     transition: background-color 0.15s ease-in-out, border 0.15s ease-in-out;
   }
+  &-track.outside {
+    height: 1em;
+    background-color: #F0F1EE;
+    border: none;
+  }
   .of--checked & {
-    .of-switch-thumb {
-      background-color: var(--of-primary-tint);
+    .of-switch-thumb{
       left: calc(1em - 1px);
     }
+    .of-switch-thumb:not(.outside) {
+      background-color: var(--of-primary-tint);
+    }
     .of-switch-track {
       background-color: var(--of-primary-tint);
+    }
+    .of-switch-track:not(.outside) {
       opacity: 72%;
     }
   }

packages/oceanfront/src/scss/_overlay.scss

@@ -100,7 +100,7 @@
 
   .of-dialog-header,
   .of-dialog-footer {
-    max-height: 2em;
+    max-height: 5em;
     line-height: 2em;
     width: 100%;
     text-align: center;