Action Panel

It is a panel with 3 general actions. Option:

Close

Check

Cleared.

Clear Action

This Action is used to delete or clear the content of the panel

Viwer Source

Code

```vue
<template>
  <el-input v-model="input" placeholder="Please input" />
  <molecula-ActionPanel
    :showClear="true"
    :showClose="false"
    :showCheck="false"
    :actionClear="handleClear"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
const handleClear = () => {
  input.value = ''
}
</script>

```

:::

Close Action

This action is used to Close.

Viwer Source

Code

```vue
<template>
  <el-popover
    :visible="visible"
    trigger="click"
    placement="top"
    :width="460"
  >
    <el-input v-model="input" placeholder="Please input" />
    <molecula-ActionPanel
      :showClear="true"
      :showClose="true"
      :showCheck="false"
      :actionClear="handleClear"
      :actionClose="handleClose"
    />
    <el-button #reference @click="visible = true">Click to activate</el-button>
  </el-popover>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
const visible = ref(false)
const handleClear = () => {
  input.value = ''
}
const handleClose = () => {
  visible.value = false
}
</script>

```

:::

Check Action

This action is used to Close.

Viwer Source

Code

```
<template>
  <el-popover
    :visible="visible"
    trigger="click"
    placement="top"
    :width="460"
  >
    <el-input v-model="input" placeholder="Please input" />
    <molecula-ActionPanel
      :showClear="true"
      :showClose="true"
      :showCheck="true"
      :actionClear="handleClear"
      :actionClose="handleClose"
      :actionCheck="handleDone"
    >
    </molecula-ActionPanel>
    <el-button #reference @click="visible = true">
      !hello! {{ world }}
    </el-button>
  </el-popover>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
const world = ref('')
const visible = ref(false)
const handleClear = () => {
  input.value = ''
}
const handleClose = () => {
  visible.value = false
}
const handleDone = () => {
  handleClose()
  world.value = input.value
}

```

:::

Slots Action

Add Custom Content to the Left or Right of the Action Panel Button.

Viwer Source

Code

```
<template>
  <el-popover
    :visible="visible"
    trigger="click"
    placement="top"
    :width="460"
  >
    <el-input v-model="input" placeholder="Please input" /> {{ world }}
    <molecula-ActionPanel
      :showClear="true"
      :showClose="true"
      :showCheck="true"
      :actionClear="handleClear"
      :actionClose="handleClose"
      :actionCheck="handleDone"
    >
      <template v-slot:slotsLeft>
        <el-button type="success" :icon="Refresh" @click="handleRefresh" />
      </template>
    </molecula-ActionPanel>
    <el-button #reference @click="visible = true">
      !hello! {{ world }}
    </el-button>
  </el-popover>
</template>
<script lang="ts" setup>
import {
  Refresh
} from '@element-plus/icons-vue'
import { ref } from 'vue'
const input = ref('')
const world = ref('')
const visible = ref(false)
const handleClear = () => {
  input.value = ''
}
const handleClose = () => {
  visible.value = false
}
const handleDone = () => {
  handleClose()
  world.value = input.value
}
const handleRefresh = () => {
  world.value = input.value
}

```

:::

Props

Name	Description	Type	Mandatory
showClear	This property allows to display the Clear button.	Boolean	True
showClose	This property allows to display the Close button.	Boolean	True
showCheck	This property allows to display the Check button.	Boolean	True
actionClear	Method or Function that is triggered when clicking on the Clear Button.	Function	True
actionClose	Method or Function that is triggered when clicking on the Close Button.	Function	True
actionCheck	Method or Function that is triggered when clicking on the Check Button.	Function	True

Attributes

Name	Description	Type	Default
disabledClear	Disable the Button Clear	Boolean	False
disabledClose	Disable the Button Close	Boolean	False
disabledCheck	Disable the Button Check	Boolean	False
textAling	Position where the buttons are displayed	String	Right
slotsLeft	Add Custom Content to the Left of the Button Panel	String	────────────
slotsRight	Add Custom Content to the Right of the Button Panel	String	────────────
slotsAlingLeft	Position of the Custom Content to the Left of the Button Panel	String	────────────
slotsAlingRight	Position of the Custom Content to the Right of the Button Panel	String	────────────

Events

Name	Description	Type
actionClear	Method or Function that is triggered when clicking on the Clear Button.	Function
actionClose	Method or Function that is triggered when clicking on the Close Button.	Function
actionCheck	Method or Function that is triggered when clicking on the Check Button.	Function

Example for Developer

Open in StackBlitz

Directory

└─ src                                            # Main source code.
    └── Components                                # Global components
            └── Atoms                             # Atom components
            └── Moleculas                         # Moleculas components
                └── ActionPanel                   # Molecule Action Panel specific components.