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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendesign-plus/components",
-  "version": "0.0.1-rc.23",
+  "version": "0.0.1-rc.24",
   "type": "module",
   "publishConfig": {
     "access": "public",

package/src/components/OThemeSwitcher.vue

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

package/src/components/meeting/index.ts

@@ -22,15 +22,15 @@ const OMeetingPlayback = Object.assign(_OMeetingPlayback, {
   },
 });
 
-const OSigMeetingCalendar = Object.assign(_OMeetingSigCalendar, {
+const OMeetingSigCalendar = Object.assign(_OMeetingSigCalendar, {
   install(app: App) {
-    app.component('OSigMeetingCalendar', _OMeetingMyCalendar);
+    app.component('OMeetingSigCalendar', _OMeetingMyCalendar);
   },
 });
 
-const OMyMeetingCalendar = Object.assign(_OMeetingSigCalendar, {
+const OMeetingMyCalendar = Object.assign(_OMeetingSigCalendar, {
   install(app: App) {
-    app.component('OMyMeetingCalendar', _OMeetingMyCalendar);
+    app.component('OMeetingMyCalendar', _OMeetingMyCalendar);
   },
 });
 
@@ -38,8 +38,8 @@ export {
   OMeetingCalendar,
   OMeetingForm,
   OMeetingPlayback,
-  OSigMeetingCalendar,
-  OMyMeetingCalendar,
+  OMeetingSigCalendar,
+  OMeetingMyCalendar,
 };
 
 export * from './types';