@policystudio/policy-studio-ui-vue 1.1.90-beta.30 → 1.1.90-beta.31

package/doc/src/stories/SimpleAlert.stories.ts

@@ -0,0 +1,22 @@
+import PsSimpleAlert from '../../../src/components/notifications/PsSimpleAlert.vue'
+
+export default {
+    title: 'Notifications/Simple Alert',
+    component: PsSimpleAlert,
+  }
+// @ts-ignore
+  const TemplateDefault = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { PsSimpleAlert },
+    template: `
+      <div style="width:300px;">
+        <PsSimpleAlert v-bind="$props" class="psui-text-blue-60 psui-bg-blue-20"/>
+      </div>
+        `,
+  })
+  
+  export const Default = TemplateDefault.bind({})
+  // @ts-ignore
+  Default.args = {
+    message:'lorem'
+  }

package/doc/src/stories/Slider.stories.ts

@@ -0,0 +1,79 @@
+import PsSlider from '../../../src/components/controls/PsSlider.vue'
+
+export default {
+  title: 'Text fields & Forms/Slider',
+  component: PsSlider,
+  // argTypes: {
+  //   layout: { control: { type: 'inline-radio', options: sliderLayout } },
+  // },
+}
+// @ts-ignore
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsSlider },
+  template: `
+    <div style="width: 500px;display:block;margin:0 auto;">
+      <PsSlider 
+        v-if="$props['layout'] == 'rich'"
+        v-bind="$props" 
+        :value.sync="value" 
+        class="psui-bg-gray-10 psui-p-10 psui-rounded psui-border psui-border-gray-30 psui-border-dashed"
+      />
+      <PsSlider 
+        v-else
+        v-bind="$props" 
+        :value.sync="value" 
+      />
+    </div>
+  `
+})
+
+export const Label = Template.bind({})
+// @ts-ignore
+Label.args = {
+  min: 0,
+  max: 200,
+  maxValue: 200,
+  value: 30,
+  label: 'Score Label',
+  layout: 'default'
+}
+
+export const NoLabel = Template.bind({})
+// @ts-ignore
+NoLabel.args = {
+  min: 0,
+  max: 200,
+  maxValue: 200,
+  value: 15,
+  layout: 'default'
+}
+
+export const Bubble = Template.bind({})
+// @ts-ignore
+Bubble.args = {
+  min: 0,
+  max: 200,
+  maxValue: 200,
+  value: 23,
+  bubble: true,
+  layout: 'default'
+}
+
+const sliderColors = [
+  { start: 140, end: 170, bgColor: '#FF906D' },
+  { start: 170, end: 200, bgColor: '#D65C5A' },
+]
+export const Rich = Template.bind({})
+// @ts-ignore
+Rich.args = {
+  min: 0,
+  max: 200,
+  maxValue: 200,
+  value: 20,
+  bubble: true,
+  dividers: true,
+  layout: 'rich',
+  sliderColors: sliderColors,
+  gridData: [0, 30, 55, 80, 100]
+}

package/doc/src/stories/Switch.stories.ts

@@ -0,0 +1,39 @@
+import PsSwitch from '../../../src/components/controls/PsSwitch.vue'
+export default {
+  title: 'Controls & Selectors/Switch',
+  component: PsSwitch,
+}
+// @ts-ignore
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsSwitch },
+  data(){
+    return {
+      dt: false
+
+    }
+  },
+  template: `
+    <div style='display: flex; gap:10px;'> 
+      <div style='display: flex; gap: 10px; flex-direction: column; margin-right: 10px;'>
+        <span>Size</span>
+        <span>BIG</span>
+        <span>SMALL</span>
+      </div>
+      <div style='display: flex; gap: 10px; flex-direction: column;'>
+        <span>Disable</span>
+        <PsSwitch v-bind="$props" v-model="dt" label='Switch1' disabled size='big'/>
+        <PsSwitch v-bind="$props" v-model="dt" label='Switch2' disabled size='small'/>
+      </div>
+      <div style='display: flex; gap: 10px; flex-direction: column;'>
+      <span>Enable</span>
+        <PsSwitch v-bind="$props" label='Switch3' value size='big'/>
+        <PsSwitch v-bind="$props" label='Switch4' value size='small'/>
+      </div>
+    </div>
+  `
+})
+
+export const Default = Template.bind({})
+
+

package/doc/src/stories/TabHeader.stories.ts

@@ -0,0 +1,57 @@
+import PsTabHeader from '../../../src/components/tabs/PsTabHeader.vue'
+const items = ['Existing Buildings', 'New Constructions', 'Other tab']
+const item = items[0]
+
+export default {
+  title: 'Components/Tab Header',
+  component: PsTabHeader,
+  argTypes: {}
+}
+
+// @ts-ignore
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsTabHeader },
+  data: () => {
+    return {
+    }
+  },
+  template: `
+  <div class="psui-bg-gray-20 psui-p-8">
+    <PsTabHeader :selected.sync=selected v-bind="$props"/>
+    <div v-if="$props['selected'] === 'Existing Buildings'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['layout'] === 'standard'}">
+      <p v-for="i of 4">Tab Existing Buildings Selected</p>
+    </div>
+    <div v-if="$props['selected'] === 'New Constructions'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['layout'] === 'standard'}">
+      <p v-for="i of 4">Tab New Constructions Selected</p>
+    </div>
+    <div v-if="$props['selected'] === 'Other tab'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['layout'] === 'standard'}">
+      <p v-for="i of 4">Other tab Selected</p>
+    </div>
+  </div>
+  `
+})
+
+export const Standard = Template.bind({})
+// @ts-ignore
+Standard.args = {
+  layout: 'standard',
+  items: items,
+  selected: item
+}
+
+export const Underline = Template.bind({})
+// @ts-ignore
+Underline.args = {
+  layout: 'underline',
+  items: items,
+  selected: item
+}
+
+export const Folder = Template.bind({})
+// @ts-ignore
+Folder.args = {
+  layout: 'folder',
+  items: items,
+  selected: item
+}