@opendesign-plus/components 0.0.1-rc.21 → 0.0.1-rc.23

package/src/components/OHeaderSearch.vue

@@ -293,7 +293,7 @@ onClickOutside(posWrapper, onClear);
   width: 160px;
   height: 32px;
 
-  @include respond-to('<=laptop') {
+  @include respond('<=laptop') {
     width: 120px;
   }
 
@@ -308,7 +308,7 @@ onClickOutside(posWrapper, onClear);
   color: var(--o-color-info1);
   @include h4;
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     font-size: 20px;
   }
 
@@ -324,7 +324,7 @@ onClickOutside(posWrapper, onClear);
   cursor: pointer;
   display: none;
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     display: block;
   }
 }
@@ -373,7 +373,7 @@ onClickOutside(posWrapper, onClear);
     width: 160px;
     transition: width var(--o-easing-standard-in) var(--o-duration-m2);
 
-    @include respond-to('<=laptop') {
+    @include respond('<=laptop') {
       width: 120px;
     }
   }
@@ -382,7 +382,7 @@ onClickOutside(posWrapper, onClear);
 .o-header-search-input-wrapper.focus {
   padding: var(--o-gap-4);
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     display: flex;
     align-items: center;
     gap: var(--o-gap-4);
@@ -392,11 +392,11 @@ onClickOutside(posWrapper, onClear);
   .o-header-search-input {
     width: 480px;
 
-    @include respond-to('<=laptop') {
+    @include respond('<=laptop') {
       width: 240px;
     }
 
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       flex: 1;
     }
   }
@@ -414,7 +414,7 @@ onClickOutside(posWrapper, onClear);
   background-color: var(--o-color-fill2);
   box-shadow: var(--o-shadow-2);
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     position: static;
     height: calc(100vh - 50px);
     padding-top: 0;
@@ -433,17 +433,17 @@ onClickOutside(posWrapper, onClear);
   background-color: var(--o-color-fill2);
   box-shadow: unset;
 
-  @include respond-to('<=laptop') {
+  @include respond('<=laptop') {
     top: -10px;
     height: 10px;
   }
 
-  @include respond-to('<=pad') {
+  @include respond('<=pad') {
     top: -8px;
     height: 8px;
   }
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     display: none;
   }
 }
@@ -461,7 +461,7 @@ onClickOutside(posWrapper, onClear);
     color: var(--o-color-primary1);
   }
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     font-size: 12px;
     line-height: 18px;
   }
@@ -472,7 +472,7 @@ onClickOutside(posWrapper, onClear);
 }
 
 .o-header-search-history-container {
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     margin-bottom: var(--o-gap-5);
   }
 }
@@ -487,7 +487,7 @@ onClickOutside(posWrapper, onClear);
   @include tip2;
   color: var(--o-color-info3);
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     @include text2;
     color: var(--o-color-info1);
   }
@@ -510,7 +510,7 @@ onClickOutside(posWrapper, onClear);
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background-color: rgb(var(--o-mixedgray-9));
+  background-color: rgb(var(--o-grey-9));
 
   .icon-delete {
     height: 16px;
@@ -547,7 +547,7 @@ onClickOutside(posWrapper, onClear);
   white-space: nowrap;
   @include tip2;
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     @include text1;
   }
 }
@@ -555,7 +555,7 @@ onClickOutside(posWrapper, onClear);
 .o-header-search-drawer-divider {
   --o-divider-gap: var(--o-gap-4);
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     display: none;
   }
 }
@@ -564,7 +564,7 @@ onClickOutside(posWrapper, onClear);
   color: var(--o-color-info3);
   @include tip2;
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     margin-bottom: var(--o-gap-3);
     @include text2;
   }
@@ -577,7 +577,7 @@ onClickOutside(posWrapper, onClear);
   margin-top: var(--o-gap-3);
   @include tip2;
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     flex-direction: column;
     gap: 12px;
     font-size: 12px;

package/src/components/OHeaderUser.vue

@@ -169,7 +169,7 @@ const jumpToPage = (val: any) => {
   @include text-truncate(1);
 }
 
-@include respond-to('<=pad_v') {
+@include respond('<=pad_v') {
   .header-user {
     min-width: auto;
 
@@ -207,7 +207,8 @@ const jumpToPage = (val: any) => {
     color: var(--o-color-primary1);
   }
 }
-@include respond-to('<=pad_v') {
+
+@include respond('<=pad_v') {
   .user-dropdown {
     .o-divider {
       display: none;

package/src/components/OSection.vue

@@ -121,11 +121,11 @@ const props = withDefaults(defineProps<SectionPropsT>(), {
     color: var(--o-color-info2);
     @include text1;
 
-    @include respond-to('pad-laptop') {
+    @include respond('pad-laptop') {
       margin-top: 8px;
     }
 
-    @include respond-to('phone') {
+    @include respond('phone') {
       margin-top: 12px;
       text-align: center;
     }
@@ -155,11 +155,11 @@ const props = withDefaults(defineProps<SectionPropsT>(), {
       border-radius: var(--btn-height);
     }
 
-    @include respond-to('<=laptop') {
+    @include respond('<=laptop') {
       margin-top: 16px;
     }
 
-    @include respond-to('phone') {
+    @include respond('phone') {
       margin-top: 12px;
     }
 

package/src/components/OThemeSwitcher.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { Component, computed } from 'vue';
-import { OIcon, OSwitch } from '@opensig/opendesign';
+import { computed } from 'vue';
+import { OIcon, OSwitch, OIconSun, OIconMoon } from '@opensig/opendesign';
 import { useScreen } from '@opendesign-plus/composables';
 
 import IconSun from '~icons/components/icon-sun.svg';
@@ -11,8 +11,7 @@ export interface OThemeSwitcherPropsT {
   type?: 'auto' | 'common' | 'mobile';
   lightValue?: string;
   darkValue?: string;
-  lightIcon?: Component;
-  darkIcon?: Component;
+  disabled?: boolean;
 }
 
 export interface OThemeSwitcherEmitsT {
@@ -25,8 +24,7 @@ const props = withDefaults(defineProps<OThemeSwitcherPropsT>(), {
   type: 'auto',
   lightValue: 'light',
   darkValue: 'dark',
-  lightIcon: IconSun,
-  darkIcon: IconMoon,
+  disabled: false,
 });
 
 const emit = defineEmits<OThemeSwitcherEmitsT>();
@@ -37,7 +35,7 @@ const switchVal = computed({
   get() {
     return props.theme;
   },
-  set(val) {
+  set(val: string) {
     emit('update:theme', val);
     emit('change', val);
   },
@@ -48,13 +46,17 @@ const isCommon = computed(() => {
 });
 
 const toggleTheme = () => {
+  if (props.disabled) {
+    return;
+  }
+
   switchVal.value = switchVal.value === props.lightValue ? props.darkValue : props.lightValue;
 };
 </script>
 
 <template>
   <div class="o-theme-switcher">
-    <div v-if="isCommon" class="o-theme-switcher-common" @click="toggleTheme">
+    <div v-if="isCommon" class="o-theme-switcher-common" :class="{ disabled }" @click="toggleTheme">
       <OIcon class="o-theme-icon">
         <IconMoon v-if="switchVal === lightValue" />
         <IconSun v-else />
@@ -62,16 +64,18 @@ const toggleTheme = () => {
     </div>
 
     <div v-else class="o-theme-switcher-mobile">
-      <OSwitch v-model="switchVal" class="o-theme-switch" :checked-value="darkValue" :unchecked-value="lightValue">
-        <template #on>
-          <OIcon class="o-theme-icon">
-            <IconSun />
-          </OIcon>
+      <OSwitch v-model="switchVal" class="o-theme-switch" :checked-value="lightValue" :unchecked-value="darkValue" :disabled="disabled">
+        <template #inactive>
+          <OIconMoon />
+        </template>
+        <template #active>
+          <OIconSun />
         </template>
         <template #off>
-          <OIcon class="o-theme-icon">
-            <IconMoon />
-          </OIcon>
+          <OIconSun />
+        </template>
+        <template #on>
+          <OIconMoon />
         </template>
       </OSwitch>
     </div>
@@ -80,29 +84,49 @@ const toggleTheme = () => {
 
 <style lang="scss" scoped>
 .o-theme-switcher-common {
-  cursor: pointer;
-  width: 20px;
-  height: 20px;
   display: flex;
   align-items: center;
+  width: var(--o-icon_size-m);
+  height: var(--o-icon_size-m);
+  font-size: var(--o-icon_size-m);
+
+  @include respond-to('pad_h') {
+    width: var(--o-icon_size-s);
+    height: var(--o-icon_size-s);
+    font-size: var(--o-icon_size-s);
+  }
+}
+
+.o-theme-switcher-common:not(.disabled) {
+  cursor: pointer;
 
   .o-theme-icon {
-    font-size: 24px;
-    color: var(--o-color-info1);
+    color: var(--o-color-info2);
 
     @include hover {
-      color: var(--o-color-primary1);
+      color: var(--o-color-primary2);
+      background-color: var(--o-color-control2-light);
+      border-radius: var(--o-radius-xs);
+    }
+
+    &:active {
+      color: var(--o-color-primary3);
     }
   }
 }
 
+.o-theme-switcher-common.disabled {
+  cursor: not-allowed;
+
+  .o-theme-icon {
+    color: var(--o-color-info4);
+  }
+}
+
 .o-theme-switcher-mobile {
   .o-theme-switch {
-    background-color: var(--o-color-control1-light);
-
-    .o-theme-icon {
-      color: var(--o-color-white);
-    }
+    --switch-handler-color: var(--o-color-white);
+    --switch-color: var(--o-color-info4);
   }
 }
 </style>

package/src/components/activity/OActivityApproval.vue

@@ -569,6 +569,8 @@ const reviewActions = computed<DialogActionT[]>(() => {
 
 <style lang="scss">
 .o-activity-table {
+  --activity-card-radius: var(--o-radius-xs);
+  --activity-input-radius: var(--o-radius-xs);
   .table-wrapper {
     .el-table {
       border-top: none;
@@ -589,12 +591,12 @@ const reviewActions = computed<DialogActionT[]>(() => {
       margin-left: 24px;
     }
 
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       .o-btn + .o-btn {
         margin-left: 16px;
       }
     }
-    @include respond-to('phone') {
+    @include respond('phone') {
       margin-top: 8px;
       .o-btn + .o-btn {
         margin-left: 12px;
@@ -695,7 +697,7 @@ const reviewActions = computed<DialogActionT[]>(() => {
     @include text1;
 
     .el-table__header-wrapper {
-      border-radius: 12px 12px 0 0;
+      border-radius: var(--activity-card-radius) var(--activity-card-radius) 0 0;
 
       .el-table__cell {
         padding: 12px 0 11px;
@@ -725,7 +727,7 @@ const reviewActions = computed<DialogActionT[]>(() => {
   }
 
   .o-textarea {
-    --_box-radius: 16px;
+    --_box-radius: var(--activity-input-radius);
   }
 
   .dialog-footer {
@@ -737,7 +739,7 @@ const reviewActions = computed<DialogActionT[]>(() => {
       margin-left: 16px;
     }
 
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       .o-btn {
         width: 140px;
         color: var(--o-color-info1);
@@ -756,7 +758,7 @@ const reviewActions = computed<DialogActionT[]>(() => {
 
     .o-collapse {
       padding: 0;
-      border-radius: 12px;
+      border-radius: var(--activity-card-radius);
 
       .o-collapse-item {
         --collapse-item-header-padding: 8px 0 12px;
@@ -826,11 +828,12 @@ const reviewActions = computed<DialogActionT[]>(() => {
 
 <style lang="scss">
 .handle-dialog-approval {
+  --activity-card-radius: var(--o-radius-xs);
   --dlg-width: 450px;
-  --dlg-radius: var(--o-radius-xs);
-  @include respond-to('<=pad_v') {
+  --dlg-radius: var(--activity-card-radius);
+  @include respond('<=pad_v') {
     width: 100%;
-    --dlg-radius: var(--o-radius-xs) var(--o-radius-xs) 0 0;
+    --dlg-radius: var(--activity-card-radius) var(--activity-card-radius) 0 0;
   }
 }
 
@@ -841,6 +844,7 @@ const reviewActions = computed<DialogActionT[]>(() => {
 }
 .review-dialog {
   --dlg-width: 690px;
+  --activity-input-radius: var(--o-radius-xs);
 
   .o-form {
     width: 450px;
@@ -852,7 +856,7 @@ const reviewActions = computed<DialogActionT[]>(() => {
 
     .o-textarea {
       width: 100%;
-      --_box-radius: var(--o-radius-xs);
+      --_box-radius: var(--activity-input-radius);
     }
   }
 

package/src/components/activity/OActivityForm.vue

@@ -444,6 +444,8 @@ defineExpose({
 
 <style lang="scss">
 .o-activity-form {
+  --activity-card-radius: var(--o-radius-xs);
+  --activity-input-radius: var(--o-radius-xs);
   .form-wrapper {
     & > .o-form-item {
       max-width: 620px;
@@ -480,7 +482,7 @@ defineExpose({
     }
 
     .o-textarea {
-      --_box-radius: var(--o-radius-xs);
+      --_box-radius: var(--activity-input-radius);
       width: 100%;
     }
 
@@ -489,7 +491,7 @@ defineExpose({
     }
 
     .el-input__wrapper {
-      border-radius: var(--o-radius-xs);
+      border-radius: var(--activity-input-radius);
     }
 
     .time-config {
@@ -497,8 +499,8 @@ defineExpose({
       background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
       padding: var(--o-gap-5);
       padding-right: calc(var(--o-gap-4) + var(--o-gap-5));
-      border-radius: var(--o-radius-xs);
-      @include respond-to('<=pad_v') {
+      border-radius: var(--activity-card-radius);
+      @include respond('<=pad_v') {
         padding: var(--o-gap-4);
       }
 
@@ -522,7 +524,7 @@ defineExpose({
     margin-left: var(--o-gap-4);
   }
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     .o-btn {
       --btn-min-width: 74px;
     }