feat(control): add "Action Bar" type support (#464)

globalbrain · Feb 5, 2024 · cb7c95d · cb7c95d
1 parent bd886cb
commit cb7c95d
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 5 deletions.
diff --git a/lib/components/SControlActionBar.vue b/lib/components/SControlActionBar.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="SControlActionBar">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SControlActionBar {
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/lib/components/SControlActionBarButton.vue b/lib/components/SControlActionBarButton.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useControlSize } from '../composables/Control'
+import SButton from './SButton.vue'
+
+defineProps<{
+  as?: string
+  icon?: any
+}>()
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+
+const size = useControlSize()
+</script>
+
+<template>
+  <div class="SControlActionBarButton">
+    <SButton
+      :tag="as"
+      type="text"
+      mode="mute"
+      :size="size"
+      :icon="icon"
+      block
+      @click="$emit('click')"
+    />
+  </div>
+</template>
diff --git a/lib/components/SControlActionBarClose.vue b/lib/components/SControlActionBarClose.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import IconX from '@iconify-icons/ph/x-bold'
+import SControlActionBarButton from './SControlActionBarButton.vue'
+
+defineProps<{
+  as?: string
+}>()
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+</script>
+
+<template>
+  <div class="SControlActionBarClose">
+    <SControlActionBarButton
+      :as="as"
+      :icon="IconX"
+      @click="$emit('click')"
+    />
+  </div>
+</template>
diff --git a/lib/components/SControlActionBarCollapse.vue b/lib/components/SControlActionBarCollapse.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import IconArrowsInLineVertical from '@iconify-icons/ph/arrows-in-line-vertical-bold'
+import IconArrowsOutLineVertical from '@iconify-icons/ph/arrows-out-line-vertical-bold'
+import { computed, shallowRef } from 'vue'
+import { useCardState } from '../composables/Card'
+import SControlActionBarButton from './SControlActionBarButton.vue'
+
+const props = defineProps<{
+  as?: string
+  collapsed?: boolean
+}>()
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+
+const { isCollapsed, setCollapse, toggleCollapse } = useCardState()
+
+setCollapse(props.collapsed)
+
+const el = shallowRef<HTMLElement | null>(null)
+
+const icon = computed(() => {
+  return isCollapsed.value
+    ? IconArrowsOutLineVertical
+    : IconArrowsInLineVertical
+})
+</script>
+
+<template>
+  <div class="SControlActionBarCollapse" ref="el">
+    <SControlActionBarButton
+      :as="as"
+      :icon="icon"
+      @click="toggleCollapse"
+    />
+  </div>
+</template>
diff --git a/lib/mixins/Control.ts b/lib/mixins/Control.ts
@@ -1,5 +1,9 @@
 import { type App } from 'vue'
 import SControl from '../components/SControl.vue'
+import SControlActionBar from '../components/SControlActionBar.vue'
+import SControlActionBarButton from '../components/SControlActionBarButton.vue'
+import SControlActionBarClose from '../components/SControlActionBarClose.vue'
+import SControlActionBarCollapse from '../components/SControlActionBarCollapse.vue'
 import SControlActionMenu from '../components/SControlActionMenu.vue'
 import SControlButton from '../components/SControlButton.vue'
 import SControlCenter from '../components/SControlCenter.vue'
@@ -11,6 +15,10 @@ import SControlText from '../components/SControlText.vue'
 
 export function mixin(app: App): void {
   app.component('SControl', SControl)
+  app.component('SControlActionBar', SControlActionBar)
+  app.component('SControlActionBarButton', SControlActionBarButton)
+  app.component('SControlActionBarClose', SControlActionBarClose)
+  app.component('SControlActionBarCollapse', SControlActionBarCollapse)
   app.component('SControlActionMenu', SControlActionMenu)
   app.component('SControlButton', SControlButton)
   app.component('SControlCenter', SControlCenter)
@@ -24,6 +32,9 @@ export function mixin(app: App): void {
 declare module 'vue' {
   export interface GlobalComponents {
     SControl: typeof SControl
+    SControlActionBar: typeof SControlActionBar
+    SControlActionBarButton: typeof SControlActionBarButton
+    SControlActionBarClose: typeof SControlActionBarClose
     SControlActionMenu: typeof SControlActionMenu
     SControlButton: typeof SControlButton
     SControlCenter: typeof SControlCenter

diff --git a/stories/components/SCard.01_Playground.story.vue b/stories/components/SCard.01_Playground.story.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import IconX from '@iconify-icons/ph/x-bold'
 import SCard from 'sefirot/components/SCard.vue'
 import SCardBlock from 'sefirot/components/SCardBlock.vue'
 import SControl from 'sefirot/components/SControl.vue'
+import SControlActionBar from 'sefirot/components/SControlActionBar.vue'
+import SControlActionBarCollapse from 'sefirot/components/SControlActionBarCollapse.vue'
 import SControlButton from 'sefirot/components/SControlButton.vue'
 import SControlLeft from 'sefirot/components/SControlLeft.vue'
 import SControlRight from 'sefirot/components/SControlRight.vue'
@@ -47,7 +48,9 @@ function state() {
                   </SControlText>
                 </SControlLeft>
                 <SControlRight>
-                  <SControlButton type="text" mode="mute" :icon="IconX" />
+                  <SControlActionBar>
+                    <SControlActionBarCollapse />
+                  </SControlActionBar>
                 </SControlRight>
               </SControl>
             </SCardBlock>

diff --git a/stories/components/SCard.02_Within_Modal.story.vue b/stories/components/SCard.02_Within_Modal.story.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import IconX from '@iconify-icons/ph/x-bold'
 import SButton from 'sefirot/components/SButton.vue'
 import SCard from 'sefirot/components/SCard.vue'
 import SCardBlock from 'sefirot/components/SCardBlock.vue'
 import SControl from 'sefirot/components/SControl.vue'
+import SControlActionBar from 'sefirot/components/SControlActionBar.vue'
+import SControlActionBarClose from 'sefirot/components/SControlActionBarClose.vue'
 import SControlButton from 'sefirot/components/SControlButton.vue'
 import SControlLeft from 'sefirot/components/SControlLeft.vue'
 import SControlRight from 'sefirot/components/SControlRight.vue'
@@ -63,12 +64,14 @@ function state() {
             <SCardBlock size="small" class="s-pl-24 s-pr-8">
               <SControl>
                 <SControlLeft>
-                  <SControlText class="s-font-w-500">
+                  <SControlText class="s-font-w-600">
                     Header title
                   </SControlText>
                 </SControlLeft>
                 <SControlRight>
-                  <SControlButton type="text" mode="mute" :icon="IconX" @click="open = false" />
+                  <SControlActionBar>
+                    <SControlActionBarClose @click="open = false" />
+                  </SControlActionBar>
                 </SControlRight>
               </SControl>
             </SCardBlock>