@opendesign-plus/components 0.0.1-rc.24 → 0.0.1-rc.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendesign-plus/components",
-  "version": "0.0.1-rc.24",
+  "version": "0.0.1-rc.25",
   "type": "module",
   "publishConfig": {
     "access": "public",
@@ -32,8 +32,8 @@
     "dayjs": "^1.11.13",
     "video.js": "^8.23.7",
     "vue-dompurify-html": "^3.1.2",
-    "@opendesign-plus/composables": "0.0.1-rc.8",
-    "@opendesign-plus/styles": "0.0.1-rc.2"
+    "@opendesign-plus/styles": "0.0.1-rc.2",
+    "@opendesign-plus/composables": "0.0.1-rc.8"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.0",

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/meeting/index.ts

@@ -24,11 +24,11 @@ const OMeetingPlayback = Object.assign(_OMeetingPlayback, {
 
 const OMeetingSigCalendar = Object.assign(_OMeetingSigCalendar, {
   install(app: App) {
-    app.component('OMeetingSigCalendar', _OMeetingMyCalendar);
+    app.component('OMeetingSigCalendar', _OMeetingSigCalendar);
   },
 });
 
-const OMeetingMyCalendar = Object.assign(_OMeetingSigCalendar, {
+const OMeetingMyCalendar = Object.assign(_OMeetingMyCalendar, {
   install(app: App) {
     app.component('OMeetingMyCalendar', _OMeetingMyCalendar);
   },