@policystudio/policy-studio-ui-vue 1.1.90-beta.10 → 1.1.90-beta.12

package/dist/stories/Input.stories.js

@@ -0,0 +1,235 @@
+import PsInput from '../components/forms/PsInput.vue';
+export default {
+    title: 'Text fields & Forms/Input',
+    component: PsInput,
+    argTypes: {
+        disabled: { control: 'boolean' },
+        required: { control: 'boolean' },
+    },
+};
+const TemplateInputText = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { PsInput },
+    data: () => {
+        return {
+            validator: {
+                hasError: true,
+                label: 'Error message!'
+            }
+        };
+    },
+    template: `    
+    <div class="psui-p-8 psui-bg-gray-10 psui-grid psui-grid-cols-3 psui-gap-6">          
+ 
+      <div class="psui-col-span-3 psui-mt-8">
+        <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSInput Layout Default</h1>
+      </div>
+     
+      <PsInput v-bind="{...$props, label: 'Resting with hint', placeholder: '', value: '' }" />
+      <PsInput label="Resting without hint" />      
+      <PsInput label="Resting with Placeholder" placeholder="This is a placeholder" />      
+ 
+      <PsInput v-bind="{...$props, label: 'Focus'}" />
+      <PsInput label="Typing" placeholder="Type to see the effect..." />
+      <PsInput v-bind="{...$props, label: 'Active', active: true }" />
+     
+      <PsInput v-bind="{...$props, label: 'Error', hasError: true }" />
+      <PsInput v-bind="{...$props, label: 'Error with custom message', hasError: 'Format invalid' }" />    
+      <PsInput v-bind="{...$props, label: 'Prepend / Append ' }" >
+        <template v-slot:append>
+          Append
+        </template>
+        <template v-slot:prepend>
+          Prepend
+        </template>
+      </PsInput>
+ 
+      <PsInput label="Disabled" :disabled="true" value="100,000" />      
+      <PsInput v-bind="{...$props, label: 'Disabled without value', disabled: true, value: '', hint: false }" />
+      <PsInput v-bind="{...$props, label: 'Active/Disabled', disabled: true, active: true }" />      
+ 
+      <div class="psui-col-span-3 psui-mt-8">
+        <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSInput Layout Mini</h1>
+      </div>
+ 
+      <PsInput layout="mini" label="Resting with hint" hint="This is a hint" value="1,653" />      
+      <PsInput layout="mini" label="Resting without hint" />      
+      <PsInput layout="mini" label="Resting with Placeholder" placeholder="This is a placeholder" />      
+ 
+      <PsInput layout="mini" v-bind="{...$props, label: 'Focus'}" />
+      <PsInput layout="mini" label="Typing" placeholder="Type to see the effect..." />
+      <PsInput layout="mini" v-bind="{...$props, label: 'Active', active: true }" />
+     
+      <PsInput layout="mini" v-bind="{...$props, label: 'Error', hasError: true }" />
+      <PsInput layout="mini" v-bind="{...$props, label: 'Error with custom message', hasError: 'Format invalid' }" />
+      <PsInput layout="mini" v-bind="{...$props, label: 'Prepend / Append ' }" >
+        <template v-slot:append>
+          Append
+        </template>
+        <template v-slot:prepend>
+          Prepend
+        </template>
+      </PsInput>
+ 
+      <PsInput layout="mini" label="Disabled" :disabled="true" value="100,000" />      
+      <PsInput layout="mini" v-bind="{...$props, label: 'Disabled without value', disabled: true, value: '', hint: false }" />
+      <PsInput layout="mini" v-bind="{...$props, label: 'Active/Disabled', disabled: true, active: true }" />      
+ 
+    </div>
+  `
+});
+const TemplateInputPassword = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { PsInput },
+    data: () => {
+        return {
+            validator: {
+                hasError: true,
+                label: 'Error message!'
+            }
+        };
+    },
+    template: `    
+    <div class="psui-p-8 psui-bg-gray-10 psui-grid psui-grid-cols-3 psui-gap-6">          
+ 
+      <div class="psui-col-span-3 psui-mt-8">
+        <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSInput Password Layout Default</h1>
+      </div>
+     
+      <PsInput v-bind="{...$props, label: 'Resting with hint', placeholder: '', value: '', hint: 'Between 8 and 16 characters' }" >
+        <template v-slot:append>
+          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+            visibility_off
+          </span>
+        </template>
+      </PsInput>
+ 
+      <PsInput label="Resting without hint" hint="Between 8 and 16 characters">
+        <template v-slot:append>
+          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+            visibility_off
+          </span>
+        </template>
+        </PsInput>
+       
+        <PsInput label="Resting with Placeholder" placeholder="This is a placeholder" hint="Between 8 and 16 characters">        
+          <template v-slot:append>
+            <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+              visibility_off
+            </span>
+          </template>
+      </PsInput>
+ 
+      <PsInput v-bind="{...$props, label: 'Focus'}" hint="Between 8 and 16 characters">
+        <template v-slot:append>
+          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+            visibility_off
+          </span>
+        </template>
+      </PsInput>
+ 
+      <PsInput v-bind="{...$props, label: 'Typing', placeholder: 'Type to see the effect...', value: '' }" hint="Between 8 and 16 characters" >
+        <template v-slot:append>
+          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+            visibility_off
+          </span>
+        </template>
+      </PsInput>
+ 
+      <PsInput v-bind="{label: 'Active', active: true }" value="Password123" hint="Between 8 and 16 characters">
+        <template v-slot:append>
+          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+            visibility
+          </span>
+        </template>
+      </PsInput>
+     
+      <PsInput v-bind="{...$props, label: 'Error', hasError: true }" hint="Between 8 and 16 characters" />
+      <PsInput v-bind="{...$props, label: 'Error with custom message', hasError: 'Format invalid' }" />    
+      <PsInput v-bind="{...$props, label: 'Prepend / Append ' }" hint="Between 8 and 16 characters">
+        <template v-slot:append>
+          Append
+        </template>
+        <template v-slot:prepend>
+          Prepend
+        </template>
+      </PsInput>
+ 
+      <PsInput label="Disabled" :disabled="true" value="100,000" hint="Between 8 and 16 characters">
+        <template v-slot:append>
+          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+            visibility
+          </span>
+        </template>
+      </PsInput>
+ 
+      <PsInput v-bind="{...$props, label: 'Disabled without value', disabled: true, value: '', hint: false }">
+        <template v-slot:append>
+          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+            visibility_off
+          </span>
+        </template>
+      </PsInput>
+ 
+      <PsInput v-bind="{...$props, label: 'Active/Disabled', disabled: true, active: true }" hint="Between 8 and 16 characters">
+        <template v-slot:append>
+          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+            visibility_off
+          </span>
+        </template>
+      </PsInput>      
+    </div>
+  `
+});
+const TemplateSlots = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { PsInput },
+    template: `
+    <div class="psui-p-8 psui-bg-gray-10">
+      <PsInput v-bind="$props" class="psui-mb-4">
+        <template v-slot:append>
+          ft²
+        </template>
+      </PsInput>  
+      <PsInput v-bind="$props" class="psui-mb-4">
+        <template v-slot:prepend>
+          ft²
+        </template>
+      </PsInput>  
+      <PsInput v-bind="$props" class="psui-mb-4">
+        <template v-slot:prepend>
+          ft²
+        </template>
+        <template v-slot:append>
+          ft²
+        </template>
+      </PsInput>
+    </div>
+  `
+});
+export const InputText = TemplateInputText.bind({});
+InputText.args = {
+    label: 'Input Text',
+    placeholder: 'Placeholder',
+    hint: 'Optional Assistive text',
+    disabled: false,
+    required: false,
+    value: 10,
+};
+export const InputPassword = TemplateInputPassword.bind({});
+InputPassword.args = {
+    type: 'password',
+    label: 'Password',
+    hint: 'Optional Assistive text',
+    disabled: false,
+    required: false,
+};
+export const InputSlots = TemplateSlots.bind({});
+InputSlots.args = {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    hint: 'Optional Assistive text',
+    disabled: false,
+    required: false,
+};
+//# sourceMappingURL=Input.stories.js.map

package/dist/stories/Input.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.stories.js","sourceRoot":"","sources":["../../src/stories/Input.stories.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,iCAAiC,CAAA;AACrD,eAAe;IACb,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE;QACR,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAED,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IACjD,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAE,OAAO,EAAE;IACvB,IAAI,EAAE,GAAG,EAAE;QACT,OAAO;YACL,SAAS,EAAE;gBACT,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,gBAAgB;aACxB;SACF,CAAA;IACH,CAAC;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DT;CACF,CAAC,CAAA;AAEF,MAAM,qBAAqB,GAAG,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAE,OAAO,EAAE;IACvB,IAAI,EAAE,GAAG,EAAE;QACT,OAAO;YACL,SAAS,EAAE;gBACT,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,gBAAgB;aACxB;SACF,CAAA;IACH,CAAC;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0FT;CACF,CAAC,CAAA;AAEF,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7C,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAE,OAAO,EAAE;IACvB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;GAqBT;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACnD,SAAS,CAAC,IAAI,GAAG;IACf,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,aAAa;IAC1B,IAAI,EAAE,yBAAyB;IAC/B,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,EAAE;CACV,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC3D,aAAa,CAAC,IAAI,GAAG;IACnB,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,UAAU;IACjB,IAAI,EAAE,yBAAyB;IAC/B,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAChD,UAAU,CAAC,IAAI,GAAG;IAChB,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,aAAa;IAC1B,IAAI,EAAE,yBAAyB;IAC/B,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAChB,CAAA"}

package/dist/stories/InputSelect.stories.js

@@ -0,0 +1,28 @@
+import PsInputSelect from '../components/forms/PsInputSelect.vue';
+export default {
+    title: 'Text fields & Forms/InputSelect',
+    component: PsInputSelect
+};
+const TemplateDefault = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { PsInputSelect },
+    template: `
+  <div style='display:flex; gap: 30px;'>  
+    <div style='width:300px; display:flex; flex-direction: column; gap:20px;'>
+        <span>Default Select</span>
+        <PsInputSelect v-bind="$props" label="Gender" keyLabel="title" keyValue="value" optionalLabel="Optional helper/feedback text"/>
+        <PsInputSelect v-bind="$props" disabled label="Gender" keyLabel="title" keyValue="value" optionalLabel="Optional helper/feedback text"/>
+    </div>
+    <div style='width:90px; display:flex; flex-direction: column; gap:20px;'>
+        <span>Mini Select</span>
+        <PsInputSelect v-bind="$props" layout="mini" keyLabel="title" keyValue="value" optionalLabel="Optional helper/feedback text"/>
+        <PsInputSelect v-bind="$props" layout="mini" disabled keyLabel="title" keyValue="value" optionalLabel="Optional helper/feedback text"/>
+    </div>
+  </div>
+    `
+});
+export const Default = TemplateDefault.bind({});
+Default.args = {
+    items: [{ title: 'Text 1', value: 'Value 1' }, { title: 'Text 2', value: 'Value 2' }]
+};
+//# sourceMappingURL=InputSelect.stories.js.map

package/dist/stories/InputSelect.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputSelect.stories.js","sourceRoot":"","sources":["../../src/stories/InputSelect.stories.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,uCAAuC,CAAA;AAEjE,eAAe;IACb,KAAK,EAAE,iCAAiC;IACxC,SAAS,EAAE,aAAa;CACzB,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,EAAC,QAAQ,EAAC,EAAC,EAAE,CAAC,CAAC;IAC1C,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAC,aAAa,EAAC;IAC3B,QAAQ,EAAE;;;;;;;;;;;;;KAaT;CACJ,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/C,OAAO,CAAC,IAAI,GAAG;IACX,KAAK,EAAE,CAAC,EAAC,KAAK,EAAC,QAAQ,EAAE,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,KAAK,EAAC,QAAQ,EAAE,KAAK,EAAC,SAAS,EAAC,CAAC;CAChF,CAAA"}

package/dist/stories/InputTextArea.stories.js

@@ -0,0 +1,23 @@
+import PsInputTextArea from '../components/forms/PsInputTextArea.vue';
+export default {
+    title: 'Text fields & Forms/Input Textarea',
+    component: PsInputTextArea,
+};
+const Template = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { PsInputTextArea },
+    template: `
+  <div style='background-color:#F3F6F9; width:400px; height: 100%; padding: 20px 20px; display: flex: display; flex-direction: column;'>
+      <div style='display: flex; align-items:center; gap:30px;'>
+          <h1>Default</h1>
+          <PsInputTextArea v-bind='$props' placeholder='Optional placeholder' label='Drop us a line' rows="${10}" optionalLabel="Optional helper/feedback text"></PsInputTextArea>    
+      </div>
+      <div style='display: flex; align-items:center; gap:30px; margin-top:40px;'>
+          <h1>Disable</h1>
+          <PsInputTextArea v-bind='$props' placeholder='Optional placeholder' label='Drop us a line' rows="${10}" disabled ></PsInputTextArea>
+      </div>
+  </div>
+  `
+});
+export const Default = Template.bind({});
+//# sourceMappingURL=InputTextArea.stories.js.map

package/dist/stories/InputTextArea.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputTextArea.stories.js","sourceRoot":"","sources":["../../src/stories/InputTextArea.stories.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,yCAAyC,CAAA;AAErE,eAAe;IACb,KAAK,EAAE,oCAAoC;IAC3C,SAAS,EAAE,eAAe;CAC3B,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAQ,EAAE,EAAC,QAAQ,EAAgB,EAAE,EAAE,CAAC,CAAC;IACzD,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAC,eAAe,EAAC;IAC7B,QAAQ,EAAE;;;;6GAIiG,EAAE;;;;6GAIF,EAAE;;;GAG5G;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}

package/dist/stories/MiniTag.stories.js

@@ -0,0 +1,44 @@
+import PsMiniTag, { typeOptions, } from '../components/badges-and-tags/PsMiniTag.vue';
+export default {
+    title: 'Badges & Tags/Tags/Mini Tag',
+    component: PsMiniTag,
+    argTypes: {
+        type: {
+            control: {
+                type: 'select',
+                options: typeOptions,
+            },
+        },
+    },
+};
+const Template = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { PsMiniTag },
+    template: '<PsMiniTag v-bind="$props" />',
+});
+export const Info = Template.bind({});
+Info.args = {
+    layout: 'info',
+    message: 'This is an info alert',
+};
+export const Success = Template.bind({});
+Success.args = {
+    layout: 'success',
+    message: 'This is a success alert',
+};
+export const Warning = Template.bind({});
+Warning.args = {
+    layout: 'warning',
+    message: 'This is a warning alert',
+};
+export const Error = Template.bind({});
+Error.args = {
+    layout: 'error',
+    message: 'This is an error alert',
+};
+export const Default = Template.bind({});
+Default.args = {
+    layout: 'default',
+    message: 'This is a default color',
+};
+//# sourceMappingURL=MiniTag.stories.js.map

package/dist/stories/MiniTag.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiniTag.stories.js","sourceRoot":"","sources":["../../src/stories/MiniTag.stories.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,EAAE,EAChB,WAAW,GACZ,MAAM,6CAA6C,CAAA;AAEpD,eAAe;IACb,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,WAAW;aACrB;SACF;KACF;CACF,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAE,SAAS,EAAE;IACzB,QAAQ,EAAE,+BAA+B;CAC1C,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACrC,IAAI,CAAC,IAAI,GAAG;IACV,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,uBAAuB;CACjC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,yBAAyB;CACnC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,yBAAyB;CACnC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACtC,KAAK,CAAC,IAAI,GAAG;IACX,MAAM,EAAE,OAAO;IACf,OAAO,EAAE,wBAAwB;CAClC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,yBAAyB;CACnC,CAAA"}

package/dist/stories/Playground.stories.js

@@ -0,0 +1,14 @@
+import PsScrollBar from '../components/playground/PsScrollBar.vue';
+export default {
+    title: 'Components/Playground',
+    component: PsScrollBar
+};
+const Template = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { PsScrollBar },
+    template: `
+            <PsScrollBar v-bind='$props' scrollWidth='30'></PsScrollbar>
+    `
+});
+export const ScrollBar = Template.bind({});
+//# sourceMappingURL=Playground.stories.js.map

package/dist/stories/Playground.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Playground.stories.js","sourceRoot":"","sources":["../../src/stories/Playground.stories.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,0CAA0C,CAAA;AAElE,eAAe;IACX,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,WAAW;CACzB,CAAA;AAED,MAAM,QAAQ,GAAI,CAAC,IAAI,EAAE,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAE,WAAW,EAAC;IAC1B,QAAQ,EAAE;;KAET;CACJ,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}

package/dist/stories/ProgressBar.stories.js

@@ -0,0 +1,21 @@
+import PsProgressBar from '../components/badges-and-tags/PsProgressBar.vue';
+export default {
+    title: 'Badges & Tags/Badges/ProgressBar',
+    component: PsProgressBar,
+    argTypes: {
+        value: {
+            control: { type: 'number', min: 0, max: 100 },
+        },
+        breakEven: {
+            control: { type: 'number', min: 0, max: 100 },
+        },
+    },
+};
+const TemplateDefault = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { PsProgressBar },
+    template: '<PsProgressBar v-bind="$props" />',
+});
+export const Default = TemplateDefault.bind({});
+Default.args = {};
+//# sourceMappingURL=ProgressBar.stories.js.map

package/dist/stories/ProgressBar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.stories.js","sourceRoot":"","sources":["../../src/stories/ProgressBar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,iDAAiD,CAAA;AAE3E,eAAe;IACb,KAAK,EAAE,kCAAkC;IACzC,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE;SAC9C;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE;SAC9C;KACF;CACF,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAE,aAAa,EAAE;IAC7B,QAAQ,EAAE,mCAAmC;CAC9C,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/C,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA"}

package/dist/stories/RadioButton.stories.js

@@ -0,0 +1,36 @@
+import PsRadioButton from '../components/controls/PsRadioButton.vue';
+export default {
+    title: 'Controls & Selectors/Radio Button',
+    component: PsRadioButton,
+};
+const DefaultTemplate = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { PsRadioButton },
+    template: `
+    <div style='display: flex; gap: 20px;'>
+      <div style='display: flex; flex-direction: column; gap:10px;'>
+        <span>Resting</span>
+        <div style='display: flex; flex-direction:column; gap:5px;'> 
+          <PsRadioButton v-bind='$props' label='Label 1' size='big'/>
+          <PsRadioButton v-bind='$props' label='Label 2' size='small'/>
+        </div>
+      </div>  
+      <div style='display: flex; flex-direction: column; gap:10px;'>
+        <span>Active</span>
+        <div style='display: flex; flex-direction:column; gap:5px;'> 
+          <PsRadioButton v-bind='$props' label='Label 3' size='big' checked/>
+          <PsRadioButton v-bind='$props' label='Label 4' size='small' checked/>
+        </div>
+      </div>  
+      <div style='display: flex; flex-direction: column; gap:10px;'>
+        <span>Disable</span>
+        <div style='display: flex; flex-direction:column; gap:5px;'> 
+          <PsRadioButton v-bind='$props' label='Label 5' size='big' disabled/>
+          <PsRadioButton v-bind='$props' label='Label 6' size='small' disabled/>
+        </div>
+      </div>  
+    </div>  
+  `
+});
+export const Default = DefaultTemplate.bind({});
+//# sourceMappingURL=RadioButton.stories.js.map

package/dist/stories/RadioButton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.stories.js","sourceRoot":"","sources":["../../src/stories/RadioButton.stories.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,0CAA0C,CAAA;AAEpE,eAAe;IACb,KAAK,EAAE,mCAAmC;IAC1C,SAAS,EAAE,aAAa;CACxB,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,IAAI,EAAC,EAAE,QAAQ,EAAC,EAAE,EAAE,CAAC,CAAC;IAC7C,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAE,aAAa,EAAC;IAC5B,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;GAwBV;CACD,CAAC,CAAA;AAGH,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}

package/dist/stories/RadioButtonSimple.stories.js

@@ -0,0 +1,40 @@
+import PsRadioButtonSimple from '../components/controls/PsRadioButtonSimple.vue';
+export default {
+    title: 'Text fields & Forms/Inputs V2/RadioButton',
+    component: PsRadioButtonSimple,
+};
+const defaultTemplate = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { PsRadioButtonSimple },
+    data: () => ({
+        checkBox1: true
+    }),
+    template: `
+      <div style='display:flex; gap: 20px;'>
+        <div style='display:flex; flex-direction:column; gap:5px;'>
+          <p>Resting</p>
+          <div style='display: flex; flex-direction:column; gap: 10px;'>
+            <PsRadioButtonSimple :checked="radioButton1" @click="radioButton1 = true" label='Label 1' />
+            <PsRadioButtonSimple :checked="radioButton2" @click="radioButton2 = true" label='Label 2' size='small' />
+          </div>
+        </div>
+        <div style='display:flex; flex-direction:column; gap:5px;'>
+          <p>Active</p>
+          <div style='display: flex; flex-direction:column; gap: 10px;'>
+            <PsRadioButtonSimple v-bind="$props" label='Label 3' checked />
+            <PsRadioButtonSimple v-bind="$props" label='Label 4' checked size='small'/>
+          </div>
+        </div>
+        <div style='display:flex; flex-direction:column; gap:5px;'>
+          <p>Disabled</p>
+          <div style='display: flex; flex-direction:column; gap: 10px;'>
+            <PsRadioButtonSimple v-bind="$props" label='Input via inputAttrs' :inputAttrs="{ id: 'my-input-id' }" disabled/>
+            <PsRadioButtonSimple v-bind="$props" label='Input via component id' size='small' id="my-component-id" data-test="test" disabled/>
+            <PsRadioButtonSimple v-bind="$props" label='Input fallback' size='small' disabled/>
+          </div>
+        </div>
+      </div>
+      `
+});
+export const Default = defaultTemplate.bind({});
+//# sourceMappingURL=RadioButtonSimple.stories.js.map

package/dist/stories/RadioButtonSimple.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonSimple.stories.js","sourceRoot":"","sources":["../../src/stories/RadioButtonSimple.stories.ts"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,MAAM,gDAAgD,CAAA;AAEhF,eAAe;IACX,KAAK,EAAE,2CAA2C;IAClD,SAAS,EAAE,mBAAmB;CAC/B,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,IAAQ,EAAE,EAAC,QAAQ,EAAgB,EAAE,EAAE,CAAC,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAE,mBAAmB,EAAE;IACnC,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;QACX,SAAS,EAAG,IAAI;KACjB,CAAC;IACF,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;OAyBP;CACJ,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}

package/dist/stories/SimpleAlert.stories.js

@@ -0,0 +1,19 @@
+import PsSimpleAlert from '../components/notifications/PsSimpleAlert.vue';
+export default {
+    title: 'Notifications/Simple Alert',
+    component: PsSimpleAlert,
+};
+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({});
+Default.args = {
+    message: 'lorem'
+};
+//# sourceMappingURL=SimpleAlert.stories.js.map

package/dist/stories/SimpleAlert.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleAlert.stories.js","sourceRoot":"","sources":["../../src/stories/SimpleAlert.stories.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,+CAA+C,CAAA;AAEzE,eAAe;IACX,KAAK,EAAE,4BAA4B;IACnC,SAAS,EAAE,aAAa;CACzB,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAE,aAAa,EAAE;IAC7B,QAAQ,EAAE;;;;SAIL;CACN,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/C,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAC,OAAO;CAChB,CAAA"}

package/dist/stories/Slider.stories.js

@@ -0,0 +1,70 @@
+import PsSlider from '../components/controls/PsSlider.vue';
+export default {
+    title: 'Text fields & Forms/Slider',
+    component: PsSlider,
+    // argTypes: {
+    //   layout: { control: { type: 'inline-radio', options: sliderLayout } },
+    // },
+};
+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({});
+Label.args = {
+    min: 0,
+    max: 200,
+    maxValue: 200,
+    value: 30,
+    label: 'Score Label',
+    layout: 'default'
+};
+export const NoLabel = Template.bind({});
+NoLabel.args = {
+    min: 0,
+    max: 200,
+    maxValue: 200,
+    value: 15,
+    layout: 'default'
+};
+export const Bubble = Template.bind({});
+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({});
+Rich.args = {
+    min: 0,
+    max: 200,
+    maxValue: 200,
+    value: 20,
+    bubble: true,
+    dividers: true,
+    layout: 'rich',
+    sliderColors: sliderColors,
+    gridData: [0, 30, 55, 80, 100]
+};
+//# sourceMappingURL=Slider.stories.js.map

package/dist/stories/Slider.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.stories.js","sourceRoot":"","sources":["../../src/stories/Slider.stories.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,qCAAqC,CAAA;AAE1D,eAAe;IACb,KAAK,EAAE,4BAA4B;IACnC,SAAS,EAAE,QAAQ;IACnB,cAAc;IACd,0EAA0E;IAC1E,KAAK;CACN,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAE,QAAQ,EAAE;IACxB,QAAQ,EAAE;;;;;;;;;;;;;;GAcT;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACtC,KAAK,CAAC,IAAI,GAAG;IACX,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,GAAG;IACR,QAAQ,EAAE,GAAG;IACb,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,aAAa;IACpB,MAAM,EAAE,SAAS;CAClB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,GAAG;IACR,QAAQ,EAAE,GAAG;IACb,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,SAAS;CAClB,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACvC,MAAM,CAAC,IAAI,GAAG;IACZ,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,GAAG;IACR,QAAQ,EAAE,GAAG;IACb,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,IAAI;IACZ,MAAM,EAAE,SAAS;CAClB,CAAA;AAED,MAAM,YAAY,GAAG;IACnB,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE;IAC5C,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE;CAC7C,CAAA;AACD,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACrC,IAAI,CAAC,IAAI,GAAG;IACV,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,GAAG;IACR,QAAQ,EAAE,GAAG;IACb,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,IAAI;IACZ,QAAQ,EAAE,IAAI;IACd,MAAM,EAAE,MAAM;IACd,YAAY,EAAE,YAAY;IAC1B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;CAC/B,CAAA"}

package/dist/stories/Switch.stories.js

@@ -0,0 +1,35 @@
+import PsSwitch from '../components/controls/PsSwitch.vue';
+export default {
+    title: 'Controls & Selectors/Switch',
+    component: PsSwitch,
+};
+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({});
+//# sourceMappingURL=Switch.stories.js.map

package/dist/stories/Switch.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.stories.js","sourceRoot":"","sources":["../../src/stories/Switch.stories.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,qCAAqC,CAAA;AAC1D,eAAe;IACb,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,QAAQ;CACpB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAE,QAAQ,EAAE;IACxB,IAAI;QACF,OAAO;YACL,EAAE,EAAE,KAAK;SAEV,CAAA;IACH,CAAC;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;GAkBT;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}