### Development and Demo

Source: https://github.com/pharzan/empty-state-component/blob/master/README.md

Commands to clone the repository, install dependencies, and run the demo or development server.

```bash
# Clone empty state component
git clone https://github.com/pharzan/chatchamp-empty-state chatchamp-empty-state

# Install dependencies
yarn

# To run the demo
yarn demo

# To run the component alone
yarn dev

# To run the tests
yarn test
```

--------------------------------

### Run Demo and Development Commands

Source: https://github.com/pharzan/empty-state-component/blob/master/README.md

Commands to clone the repository, install dependencies, and run the demo or development environment.

```bash
# clone empty state component

git clone https://github.com/pharzan/chatchamp-empty-state chatchamp-empty-state

  

# install dependices

yarn

  

# to run the demo

yarn demo
```

```sh
# to run the component alone

yarn dev


# to run the tests

yarn test
```

--------------------------------

### Install Component via NPM

Source: https://github.com/pharzan/empty-state-component/blob/master/README.md

Command to add the component to your project dependencies.

```bash
npm install --save chatchamp-empty-state
```

--------------------------------

### EmptyState with Action Button and Data Loading Example

Source: https://context7.com/pharzan/empty-state-component/llms.txt

An example demonstrating an empty state with an action button that, when clicked, loads data. The empty state UI will automatically hide once the `data` prop receives a non-empty value.

```vue
<!-- Counter example with action button -->
<EmptyState
  :data="data"
  title="No data available"
  subTitle="Click the button to load data"
  @click="loadData"
/>
<p>Action clicked {{ counter }} times</p>
```

--------------------------------

### Vue: Dynamic Data Binding Example

Source: https://context7.com/pharzan/empty-state-component/llms.txt

Shows how the EmptyState component reactively updates based on data changes, with examples of setting different data types and toggling the action button.

```vue
<template>
  <section id="app">
    <h2>Empty State Demo</h2>

    <!-- Empty state with action button -->
    <EmptyState
      v-if="hasAction"
      :data="data"
      @click="counter++"
    />

    <!-- Empty state without action button -->
    <EmptyState v-else :data="data" />

    <div class="controls">
      <p>Current data: {{ data }}</p>
      <p>Action clicked {{ counter }} times</p>

      <!-- Populate with different data types -->
      <button @click="data = { key: 'value' }">Set Object</button>
      <button @click="data = ['example']">Set Array</button>
      <button @click="data = 'example'">Set String</button>
      <button @click="data = 1">Set Number</button>

      <!-- Clear to trigger empty state -->
      <button @click="data = {}">Empty Object</button>
      <button @click="data = []">Empty Array</button>
      <button @click="data = ''">Empty String</button>
      <button @click="data = NaN">Empty Number</button>

      <!-- Toggle action button -->
      <button @click="hasAction = !hasAction">
        Toggle Action Button
      </button>
    </div>
  </section>
</template>

<script>
import EmptyState from 'chatchamp-empty-state'
import 'chatchamp-empty-state/dist/chatchamp-empty-state.css'

export default {
  components: { EmptyState },
  data() {
    return {
      hasAction: true,
      counter: 0,
      data: false  // Initial empty state
    }
  }
}
</script>
```

--------------------------------

### Vue Component Setup with EmptyState

Source: https://context7.com/pharzan/empty-state-component/llms.txt

This script section sets up the Vue component, including importing the EmptyState component, defining reactive data properties that represent various empty states, and implementing methods for event handlers.

```javascript
import EmptyState from 'chatchamp-empty-state'
import 'chatchamp-empty-state/dist/chatchamp-empty-state.css'

export default {
  components: { EmptyState },
  data() {
    return {
      counter: 0,
      data: [],                    // Empty array - triggers empty state
      emptyList: [],               // Empty array
      searchResults: '',           // Empty string - triggers empty state
      items: {},                   // Empty object - triggers empty state
      notifications: null,         // Falsy value - triggers empty state
      customImageUrl: '/images/empty-cart.svg'
    }
  },
  methods: {
    refreshNotifications() {
      console.log('Refreshing notifications...')
      // Fetch new notifications
    },
    loadData() {
      this.counter++
      // Simulate loading data
      this.data = [{ id: 1, name: 'Item 1' }]
      // Component will hide once data is no longer empty
    }
  }
}
```

--------------------------------

### Usage

Source: https://github.com/pharzan/empty-state-component/blob/master/README.md

Example of how to import and use the Empty State Component in a Vue.js application.

```javascript
import EmptyState from 'chatchamp-empty-state'
Vue.component('EmptyState', EmptyState)
```

```html
<EmptyState :data="data" v-on:click="counter++"/>
```

```javascript
import 'chatchamp-empty-state/dist/chatchamp-empty-state.css'
```

--------------------------------

### Use EmptyState Component in Template

Source: https://github.com/pharzan/empty-state-component/blob/master/README.md

Example of implementing the component in a template with data binding and event handling.

```js
<EmptyState :data="data" v-on:click="counter++"/>
```

--------------------------------

### JavaScript: Unit Testing EmptyState Component with Jest

Source: https://context7.com/pharzan/empty-state-component/llms.txt

Provides example unit tests for the EmptyState component using Jest and Vue Test Utils, verifying its behavior with different data states and props.

```javascript
import { shallowMount } from '@vue/test-utils'
import EmptyState from 'chatchamp-empty-state'

describe('EmptyState.vue', () => {
  it('shows empty state with default text when data is empty array', () => {
    const wrapper = shallowMount(EmptyState, {
      propsData: { data: [] }
    })

    expect(wrapper.find('.empty_state').exists()).toBe(true)
    expect(wrapper.findAll('img').length).toEqual(1)
    expect(wrapper.findAll('button').length).toEqual(0) // No button without click listener
    expect(wrapper.text()).toContain('Nothing to show here')
    expect(wrapper.text()).toContain("We couldn't find anything to show")
  })

  it('shows action button when click listener is attached', () => {
    const onClick = jest.fn()
    const wrapper = shallowMount(EmptyState, {
      propsData: { data: [] },
      listeners: { click: onClick }
    })

    expect(wrapper.findAll('button').length).toEqual(1)
    wrapper.find('button').trigger('click')
    expect(onClick).toHaveBeenCalled()
  })

  it('renders custom title and subtitle', () => {
    const wrapper = shallowMount(EmptyState, {
      propsData: {
        data: [],
        title: 'Custom Title',
        subTitle: 'Custom Subtitle'
      }
    })

    expect(wrapper.text()).toContain('Custom Title')
    expect(wrapper.text()).toContain('Custom Subtitle')
  })

  it('hides empty state when data is populated', () => {
    const wrapper = shallowMount(EmptyState, {
      propsData: { data: [1, 2, 3] }
    })

    // Component renders nothing when data exists
    expect(wrapper.find('.empty_state').exists()).toBe(false)
  })

  it('hides empty state for non-empty object', () => {
    const wrapper = shallowMount(EmptyState, {
      propsData: { data: { key: 'value' } }
    })

    expect(wrapper.find('.empty_state').exists()).toBe(false)
  })
})
```

--------------------------------

### Run Tests

Source: https://github.com/pharzan/empty-state-component/blob/master/README.md

Command to execute the test suite.

```bash
npm run test
```

--------------------------------

### Import Component Styles

Source: https://github.com/pharzan/empty-state-component/blob/master/README.md

Include the required CSS styles from the distribution folder.

```js
import 'chatchamp-empty-state/dist/chatchamp-empty-state.css'
```

--------------------------------

### Basic EmptyState Usage

Source: https://context7.com/pharzan/empty-state-component/llms.txt

Demonstrates the basic usage of the EmptyState component with an empty array. The component will render its default empty state UI.

```vue
<template>
  <div id="app">
    <!-- Basic usage with empty array - shows empty state -->
    <EmptyState :data="emptyList" />
  </div>
</template>
```

--------------------------------

### EmptyState Component API

Source: https://context7.com/pharzan/empty-state-component/llms.txt

Documentation for the EmptyState Vue component props and events.

```APIDOC
## EmptyState Component

### Description
A Vue.js component that conditionally renders an empty state UI based on whether the provided data is empty. It supports arrays, strings, objects, booleans, and numbers.

### Props
- **data** (Array, String, Object, Boolean, Number) - Optional - The data to monitor for emptiness. Default: false
- **image** (String) - Optional - Custom image URL to display. Default: Default SVG
- **title** (String) - Optional - Main heading text. Default: "Nothing to show here"
- **subTitle** (String) - Optional - Secondary description text. Default: "We couldn't find anything to show and thats all we know"

### Events
- **click** - Emitted when the call-to-action button is clicked. The button only appears when a listener is attached to this event.
```

--------------------------------

### Register EmptyState Component

Source: https://github.com/pharzan/empty-state-component/blob/master/README.md

Import and register the component globally in your Vue application.

```js
import EmptyState from 'chatchamp-empty-state'
Vue.component('EmptyState', EmptyState)
```

--------------------------------

### JavaScript: Internal isEmpty Method Behavior

Source: https://context7.com/pharzan/empty-state-component/llms.txt

Demonstrates the internal isEmpty method's behavior with various data types like arrays, objects, strings, and falsy/truthy values.

```javascript
// Internal isEmpty method behavior:

// Arrays - empty if length is 0
isEmpty([])              // true - shows empty state
isEmpty([1, 2, 3])       // false - hides empty state

// Objects - empty if no keys
isEmpty({})
// true - shows empty state
isEmpty({ key: 'value' }) // false - hides empty state

// Strings - empty if length is 0
isEmpty('')              // true - shows empty state
isEmpty('hello')         // false - hides empty state

// Falsy values - always empty
isEmpty(false)           // true - shows empty state
isEmpty(null)            // true - shows empty state
isEmpty(undefined)       // true - shows empty state
isEmpty(NaN)             // true - shows empty state
isEmpty(0)               // true - shows empty state

// Truthy values
isEmpty(true)            // false - hides empty state
isEmpty(1)               // false - hides empty state
```

--------------------------------

### Empty State Component API

Source: https://github.com/pharzan/empty-state-component/blob/master/README.md

This section details the parameters available for the Empty State Component.

```APIDOC
## Empty State Component API

### Description
This component displays an empty state message and optionally an image when data is empty.

### Parameters
#### Component Parameters
- **`data`** (Number | String | Object | Array) - The data object to monitor for emptiness.
- **`image`** (String) - The URL of the image to display.
- **`title`** (String) - The main title to display.
- **`subTitle`** (String) - The subtitle or additional descriptive text.
- **`on-click`** (Function) - A callback function to execute when the component's clickable element is clicked. It receives parameters via `func(...param)`.

### Request Example
```html
<EmptyState :data="myData" image="/path/to/image.png" title="No Items" subTitle="Please add some items to see them here." v-on:click="handleEmptyStateClick"/>
```

### Response
This component does not have direct request/response bodies in the traditional API sense, as it's a UI component. Its behavior is controlled by props and events.
```

--------------------------------

### EmptyState with Custom Image

Source: https://context7.com/pharzan/empty-state-component/llms.txt

Replace the default illustration with a custom image by providing a URL to the `image` prop. This allows for branding or context-specific visuals.

```vue
<!-- With custom image -->
<EmptyState
  :data="items"
  :image="customImageUrl"
  title="Your cart is empty"
  subTitle="Add some items to get started"
/>
```

--------------------------------

### Register EmptyState Component Globally

Source: https://context7.com/pharzan/empty-state-component/llms.txt

Globally register the EmptyState component in your Vue application's main entry file (e.g., main.js). Ensure to import the component and its CSS.

```javascript
// Global registration in main.js
import Vue from 'vue'
import EmptyState from 'chatchamp-empty-state'
import 'chatchamp-empty-state/dist/chatchamp-empty-state.css'

Vue.component('EmptyState', EmptyState)
```

--------------------------------

### EmptyState with Custom Text

Source: https://context7.com/pharzan/empty-state-component/llms.txt

Customize the title and subtitle of the empty state UI. This is useful for providing specific feedback to the user, such as 'No results found'.

```vue
<!-- With custom text -->
<EmptyState
  :data="searchResults"
  title="No results found"
  subTitle="Try adjusting your search criteria"
/>
```

--------------------------------

### EmptyState with Click Handler

Source: https://context7.com/pharzan/empty-state-component/llms.txt

Add an action button to the empty state by attaching a click listener to the component. This button can trigger a function, such as refreshing data or navigating.

```vue
<!-- With click handler - shows action button -->
<EmptyState
  :data="notifications"
  title="No notifications"
  subTitle="You're all caught up!"
  @click="refreshNotifications"
/>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.