Merge pull request #179 from kws3media/bulma-1

Bulma 1

package.json

@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@storybook/test": "^8.0.5",
-    "bulma": "^0.9.4",
+    "bulma": "^1.0.1",
     "global": "^4.4.0"
   },
   "devDependencies": {
@@ -66,13 +66,12 @@
     "jest": "^29.7.0 ",
     "lerna": "^3.3.0",
     "moment": "^2.22.2",
-    "node-sass": "^9.0.0",
     "npm-run-all": "^4.1.5",
     "pluralize": "^8.0.0",
     "prettier": "^3.0.3",
     "prettier-plugin-svelte": "^3.0.3",
     "rimraf": "^5.0.0",
-    "sass": "^1.68.0",
+    "sass": "^1.72.0",
     "storybook": "^8.0.5",
     "style-loader": "^3.3.3",
     "svelte": "^4.2.10",

packages/@kws3/ui/CHANGELOG.mdx

@@ -1,3 +1,20 @@
+# 4.5.0 <span className="has-text-danger">[BREAKING]</span>
+  - This version requires Bulma v1
+  - Supports bulma dark mode
+  - All SCSS files are now modular, so you need to use `@use` instead of `@import`
+  - All SCSS variable names have been updated. Now they do not start with `$kws-` and are more generic. This is due to using modular SCSS
+  - All SCSS variables now have default Bulma css variables as default values, so most of the time an override will not be required, and it will just work according to the active theme
+  - `ToggleButtons` component now has it's own SCSS file that needs to be imported
+  - Default `inactive_class` has changed in `ToggleButtons` component
+  - Some internal class names in `FileUpload` component have changed
+  - Some internal class names in `TimelineItem` component have changed
+  - `Colorpicker` component's wrapper class name has changed
+  - All instances of `is-marginless` css class has been replaced with `marginless`, as this is how new Bulma v1 supports it
+  - All instances of `is-paddingless` css class has been replaced with `paddingless`, as this is how new Bulma v1 supports it
+  - Fix `datepicker` and `timepicker` action return types
+  - Fix utility `cloneObject` type signature
+  - Add `transparent` to `ExtendedColors` type
+
 ## 4.3.5
   - Fix Radio component value type
 

packages/@kws3/ui/controls/FileUpload.svelte

@@ -32,7 +32,10 @@ The following functions are returned in `event.detail`:
   class="kws-file-upload {klass} is-{color} is-{size} is-{_error
     ? 'danger'
     : ''} {disabled ? 'is-disabled' : ''} {_is_finished ? 'is-success' : ''}">
-  <div class="file-upload-inner">
+  <div
+    class="file-upload-inner input is-{color} is-{size} is-{_error
+      ? 'danger'
+      : ''}">
     <div class="up-icon">
       {#if _is_uploading}
         <span class="loader" />
@@ -42,7 +45,7 @@ The following functions are returned in `event.detail`:
         <Icon size="" icon="upload" class="fa-lg" />
       {/if}
     </div>
-    <div class="file">
+    <div class="file-target">
       {#if _is_uploading}
         <div class="upload-progress">
           <div class="progress-inner">
@@ -51,9 +54,9 @@ The following functions are returned in `event.detail`:
         </div>
         <div class="progress-caption">{_progress}% - Uploading...</div>
       {:else if _is_finished}
-        <div class="filename">Upload complete!</div>
+        <div class="file-name">Upload complete!</div>
       {:else}
-        <div class="filename"><span>{_filename}</span></div>
+        <div class="file-name"><span>{_filename}</span></div>
       {/if}
     </div>
     <input

packages/@kws3/ui/controls/RangeSlider.svelte

@@ -128,7 +128,7 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
     let range = max - min;
     let position = ((value - min) / range) * 100;
     let positionOffset = Math.round(position * 0.4);
-    computedStyle = `left:calc(${position}% - ${positionOffset}px`;
+    computedStyle = `left:calc(${position}% - ${positionOffset}px)`;
   }
 
   onMount(() => {

packages/@kws3/ui/controls/Toggle.svelte

@@ -29,12 +29,6 @@ This property can be bound to, to fetch the current value, Default: `false`
   </div>
 </div>
 
-<style lang="scss">
-  .disabled {
-    opacity: 0.5;
-  }
-</style>
-
 <script>
   import { createEventDispatcher } from "svelte";
 

packages/@kws3/ui/controls/ToggleButtons.svelte

@@ -42,12 +42,11 @@ This property can be bound to, to fetch the current value, Default: `null`
           ? 'is-active ' +
             (option.active_class ? option.active_class : active_class)
           : option.inactive_class
-          ? option.inactive_class
-          : inactive_class}"
-        style="height:auto">
+            ? option.inactive_class
+            : inactive_class}">
         <span>
           {#if option.icon}
-            <Icon icon={option.icon} size="small" class="is-marginless" />
+            <Icon icon={option.icon} size="small" class="marginless" />
           {/if}
           <span class="is-block">{option.name}</span>
           {#if option.subtitle}
@@ -62,46 +61,6 @@ This property can be bound to, to fetch the current value, Default: `null`
   {/each}
 </div>
 
-<style lang="scss">
-  .kws-toggle-buttons {
-    .button,
-    .button:focus {
-      :global(.icon) {
-        margin: 0;
-      }
-      box-shadow: none;
-      &.is-active {
-        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3) inset !important;
-      }
-    }
-    .button {
-      position: relative;
-      .option-subtitle {
-        font-size: 0.7em;
-        display: block;
-        margin-top: -0.3em;
-        opacity: 0.7;
-      }
-      .count {
-        position: absolute;
-        font-weight: 600;
-        font-size: 0.8em;
-        border-radius: 999px;
-        padding: 0.15em 0.2em;
-        min-width: 1.8em;
-        min-height: 1.5em;
-        top: -0.75em;
-        right: 0.2em;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        background: #ca0303;
-        color: #fff;
-      }
-    }
-  }
-</style>
-
 <script>
   import { createEventDispatcher } from "svelte";
   import { Icon } from "@kws3/ui";
@@ -151,7 +110,7 @@ This property can be bound to, to fetch the current value, Default: `null`
     /**
      * CSS classes to apply when a button is inactive (not pressed)
      */
-    inactive_class = "is-outlined",
+    inactive_class = "",
     /**
      * Size of the Toggle Buttons
      * @type {SizeOptions}

packages/@kws3/ui/datagrid/DataSort/DataSort.svelte

@@ -8,7 +8,7 @@
 -->
 
 <div class="sorting-filters">
-  <div class="field is-grouped">
+  <div class="field is-grouped is-gapless">
     <div class="control">
       <small>Sort By:</small>
     </div>

packages/@kws3/ui/forms/AutoComplete.svelte

@@ -65,7 +65,7 @@ Default value: `<span>{option.label}</span>`
     <button
       type="button"
       style="border: none;"
-      class="button is-paddingless delete is-medium is-loading" />
+      class="button delete paddingless is-small is-loading" />
   {/if}
   {#if rootContainer}
     <div
@@ -127,7 +127,7 @@ Default value: `<span>{option.label}</span>`
     fn: ({ state }) => {
       state.styles.popper.width = `${Math.max(
         200,
-        state.rects.reference.width
+        state.rects.reference.width,
       )}px`;
     },
     effect: ({ state }) => {
@@ -454,25 +454,25 @@ Default value: `<span>{option.label}</span>`
 
   const normaliseArraysToObjects = (arr) =>
     [...arr].map((item) =>
-      typeof item === "object" ? item : { label: item, value: item }
+      typeof item === "object" ? item : { label: item, value: item },
     );
 
   const highlightMatches = (options, filters) => {
     if (!filters.length) return options;
     // join all filter parts and split into chars and filter out duplicates
     let common_chars = [...filters.join("")].filter(
-      (v, i, self) => self.indexOf(v) === i
+      (v, i, self) => self.indexOf(v) === i,
     );
     let pattern = new RegExp(
       `[${common_chars.join("").replace(/\\/g, "&#92;")}]`,
-      "gi"
+      "gi",
     );
     return options.map((item) => {
       return {
         ...item,
         label: item.value.replace(
           pattern,
-          (match) => `<span class="h">${match}</span>`
+          (match) => `<span class="h">${match}</span>`,
         ),
       };
     });

packages/@kws3/ui/forms/PasswordInput.svelte

@@ -43,9 +43,9 @@ This property can be bound to, to fetch the current value, Default: ``
 
 -->
 
-<div class="field is-marginless">
+<div class="field marginless">
   <p
-    class="control is-marginless"
+    class="control marginless"
     class:has-icons-left={show_field_icon}
     class:has-icons-right={show_visibility_switch}>
     <input

packages/@kws3/ui/forms/SearchInput.svelte

@@ -19,7 +19,7 @@
 -->
 <div
   class="
-  field has-addons is-marginless
+  field has-addons marginless
   {readonly ? 'is-readonly' : ''}
   {disabled ? 'is-disabled' : ''}
   ">

packages/@kws3/ui/forms/actions.d.ts

@@ -1,9 +1,32 @@
 /**
- * @type {import("svelte/action").Action}
- */
-export let datepicker: import("svelte/action").Action;
+ * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+ *
+ * @typedef {import("svelte/action").Action<HTMLElement, {
+ * opts:object,
+ * value:string,
+ * placeholder:string,
+ * klass:string,
+ * style:string,
+ * disabled:boolean,
+ * color: ColorOptions
+ * }>} FlatpickerAction
+*/
 /**
- * @type {import("svelte/action").Action}
+ * @type {FlatpickerAction}
  */
-export let timepicker: import("svelte/action").Action;
+export let datepicker: FlatpickerAction;
+/**
+ * @type {FlatpickerAction}
+*/
+export let timepicker: FlatpickerAction;
+export type ColorOptions = import('@kws3/ui/types').ColorOptions;
+export type FlatpickerAction = import("svelte/action").Action<HTMLElement, {
+    opts: object;
+    value: string;
+    placeholder: string;
+    klass: string;
+    style: string;
+    disabled: boolean;
+    color: ColorOptions;
+}>;
 //# sourceMappingURL=actions.d.ts.map

packages/@kws3/ui/forms/actions.js

@@ -4,7 +4,7 @@ function createFlatpickrAction(defaultOpts, hooks, type) {
   return function (
     node,
     // eslint-disable-next-line no-unused-vars
-    { opts, value, placeholder, klass, style, disabled, color }
+    { opts, value, placeholder, klass, style, disabled, color },
   ) {
     const _opts = {};
 
@@ -47,7 +47,7 @@ function createFlatpickrAction(defaultOpts, hooks, type) {
         node.dispatchEvent(
           new CustomEvent(name, {
             detail: [selectedDates, dateStr, instance],
-          })
+          }),
         );
       };
     }
@@ -112,7 +112,21 @@ function createFlatpickrAction(defaultOpts, hooks, type) {
 }
 
 /**
- * @type {import("svelte/action").Action}
+ * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+ *
+ * @typedef {import("svelte/action").Action<HTMLElement, {
+ * opts:object,
+ * value:string,
+ * placeholder:string,
+ * klass:string,
+ * style:string,
+ * disabled:boolean,
+ * color: ColorOptions
+ * }>} FlatpickerAction
+*/
+
+/**
+ * @type {FlatpickerAction}
  */
 export let datepicker = createFlatpickrAction(
   {
@@ -121,12 +135,12 @@ export let datepicker = createFlatpickrAction(
     dateFormat: "Y-m-d",
   },
   ["onOpen", "onClose", "onMonthChange", "onYearChange", "onReady"],
-  "date"
+  "date",
 );
 
 /**
- * @type {import("svelte/action").Action}
- */
+ * @type {FlatpickerAction}
+*/
 export let timepicker = createFlatpickrAction(
   {
     altInput: true,
@@ -136,5 +150,5 @@ export let timepicker = createFlatpickrAction(
     noCalendar: true,
   },
   ["onOpen", "onClose", "onReady"],
-  "time"
+  "time",
 );

packages/@kws3/ui/forms/colorpicker/Colorpicker.svelte

@@ -15,7 +15,7 @@ This property can be bound to, to fetch the current colour, Default: `"000000"`
   - `change` - Triggered when color changes
 
 -->
-<div class="color-picker-wrapper">
+<div class="kws-color-picker">
   <div class="field">
     <div
       class="control {mini ? 'mini' : 'has-icons-left'} {dragover &&